/*
/*
 Site Name:      Lucy Lamp Portfolio
 Theme URI:      http://www.lucylamp.com/
 Description:    Portfolio website.
 Author:         Lucy Lamp
 Author URI:     http://www.lucylamp.com
*/
/*
GLOSSARY
    Fonts: JosefinSans-SemiBold, JosefinSans-SemiBoldItalic, JosefinSans-RegularCopyright 
        (c) 2010 by Typemade (hi@typemade.mx). All rights reserved. This Font Software is licensed under the SIL Open Font License, Version 1.1.
    Colors:
        font: black: #181818, white: rgba{255,255,255,.9;} or rgba{255,255,255,.8;} 
        blue 1e3470   1b294e
        green #d7ea7f
        yellow dece79
        white fbfaf1
TABLE OF CONTENTS
    -FONTS
    -BASIC SITE COMPONENTS
    -TEXT
    -BG IMAGE
    -NAV
    -TITLE
    -WORK PAGE
        THUMBNAILS
        VIDEOS
        CAPTIONS
    -ABOUT PAGE
    -PROJECT PAGES
        TITLES
        DESCRIPTIONS
        MEDIA
    -FOOTER
    -MEDIA QUERIES
*/
/*--------------------------------------------------------------------------------------------------*/
/*FONTS*/
/*--------------------------------------------------------------------------------------------------*/
@font-face {font-family: 'Josefin Sans Regular';src: url('fonts/JosefinSans-Regular.ttf') format('truetype');src:url('fonts/josefinsans-regular-webfont.ttf') format('truetype');}
@font-face {font-family: 'Josefin Sans SemiBold Italic';src: url('fonts/JosefinSans-SemiBoldItalic.ttf') format('truetype');}
@font-face {font-family: 'Josefin Sans SemiBold'; src: url('fonts/JosefinSans-SemiBold.ttf') format('truetype');}
@font-face {font-family: 'Josefin Sans Bold'; src: url('fonts/JosefinSans-Bold.ttf') format('truetype');}
/*------------------------------------------------------------------------------------------------
/*--------------------------------------------------------------------------------------------------*/
/*RESET*/
/*--------------------------------------------------------------------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)*/
html, body, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
/*table,*/ caption, /*tbody, tfoot, thead, tr, th, td,*/
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
/*--------------------------------------------------------------------------------------------------*/
/*BASIC SITE COMPONENTS*/
/*--------------------------------------------------------------------------------------------------*/
html{
  font-size: 100%;}
  /*Scales by 1px for every 100px from 600px onwards*/
  @media (min-width: 600px) {
    font-size: calc(112.5% + 4 * (100vw - 600px) / 400)
  }}
 /*Sets font-size to 22px after a viewport of 1000px*/
  @media (min-width: 1000px) {
    font-size: calc(137.5%)}}
body{margin:0 auto; padding: 0;text-rendering: geometricPrecision;background:rgb(2,4,10);}
html, body {-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
img, video{max-width: 100%;}
nav{}
blockquote{font-style: italic;}
ul,nav,menu,dir{list-style: none;-moz-padding-start:0px; -moz-margin-before: 0; -moz-margin-after: 0; -moz-margin-before: 0 -moz-margin-after: 0; -moz-margin-start: 0; -moz-margin-end: 0px ;-webkit-margin-before: 0 !important;-webkit-margin-after: 0 !important;-webkit-margin-start: 0;-webkit-margin-end: 0px;-webkit-padding-start: 0 !important;}
ul,menu,dir{ -webkit-margin-before: 0 !important;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0 !important;}
ol{list-style: decimal;position: inside;margin:.5em;}
li{}
a{text-decoration: none; color:rgba(255,255,255,.9);}
a:hover{font-size:1.2em;}  
hr{color: #c0c0c0; opacity: .8; width: 200px;}
table{display: inline-table;border-collapse: collapse;border-spacing: 0;}
    /*webkit fix*/
h1{-webkit-margin-before: 0;-webkit-margin-after: 0;margin-before:0;margin-after: 0}
h1,h2,h3,h4,h5,h6,ul,ol,li,menu,p,a,dir,nav,video{/-webkit-margin-before: 0;-webkit-margin-after: 0;-moz-padding-start:0 !important; padding-inline-start: 0;-moz-margin-before: 0 !important; -moz-margin-after: 0 !important; -moz-margin-before: 0 -moz-margin-after: 0; -moz-margin-start: 0; -moz-margin-end: 0;}
h3{-webkit-margin-before:0;}
input{-webkit-appearance: none; box-shadow: none !important; }
/*--------------------------------------------------------------------------------------------------*/
/*TEXT*/
/*--------------------------------------------------------------------------------------------------*/
h1,h2,h3,h4,h5,h6,p,li,a,td,th,blockquote,ol,ul{letter-spacing: .06em;}
h1,h2,h3{font-family: 'Josefin Sans SemiBold',sans-serif; text-transform: uppercase;}
h4,h5,h6,td,blockquote,ol,th,.work-hover-title a{font-family: 'Josefin Sans SemiBold',sans-serif;}
h1{font-size: 3.25em;}
h2{font-size: 2.75em;}
h3{font-size: 1.75em;}
h4{font-size: 1.25em;color:rgba(255,255,255,.9);}
h5,blockquote{font-size: 1em;}
h6{font-size: 1em;}
p{font-size: 1.2em;}
ol,ul,td,th{font-size: 1em;font-family: 'Josefin Sans SemiBold',sans-serif;letter-spacing:.06em;text-transform: none;}
ol,ul{padding-left: 20px;}
td{font-size: 1.25em;font-weight: 700;}
th{font-size: 1.25em;font-weight: 700;}
/*--------------------------------------------------------------------------------------------------*/   
/*BG image*/
/*--------------------------------------------------------------------------------------------------*/
.BG-image,.BG-image > #home-background-wide > img{position: absolute;top:0;right: 0;margin:0 auto;padding:0;width:100%;height:auto;min-width: 100%;z-index: -100;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
.BG-image > #home-BG-narrow > img,#home-BG-narrow > img,#home-BG-narrow {display: none;}
#BG-container{position: relative;}
.video-BG{position: absolute; top: 0; right: 0; bottom: 0;left: 0;margin: 0;padding: 0;min-width: 100%;  min-height: 100%;overflow: hidden;z-index: -100;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;} 
#video-BG-leaves,#video-BG-twilight{ position: absolute;top: 0;right: 0;bottom:0;left: 0;width: 100%;min-width: 100%;height: auto;}
#leaves-video{opacity: .3;}
.video-poster{display: none;}
embed,iframe,object,video {max-width: 100%;z-index: 99999;}
/*--------------------------------------------------------------------------------------------------*/   
    /*HEADER*/
/*--------------------------------------------------------------------------------------------------*/   
header h1, header h2{color: rgba(255,255,255,.8);} 
/*SITE TITLES*/
.title a img{height: 40px; width: 47px;padding-top: 10px;}
    /*HOME*/ 
.home-header-titles{position: relative; padding: 10% 0 1% 0;color:#181818;z-index: 99;letter-spacing: .06em;}
#name h1{color:rgba(28,27,6,.8);font-size:3em;}
#name{margin-left:3%;}
#RJ-credit-home{font-family: 'Josefin Sans SemiBold';font-size: .8em;color: rgba(28,27,6,.8);position: absolute;top:65%;left: 3%;}
.RJ-credit-about{position:relative;font-size:.75em;color: rgba(255,255,255,.9); float: right;padding-right: 16px;}   
    /*Other Pages*/
.header-titles,.title{color: rgba(255,255,255,.8);letter-spacing: .06em;}
.header-titles{position: relative; padding: 10% 0 1% 5%;color:rgba(255,255,255,.8);z-index: 99;}
.header-titles h1,.header-titles h2,.header-titles h3,.header-titles h4,.title h1,.title h2,.title h3,.tagline,.tagline h3,.project-skills h5{position: relative;line-height: 1.3;}
#work-title{padding-top: 2%;}
#work-title h1{text-transform: none;color:rgba(255,255,255,.75);}
#about-title,#webdev-title{font-weight: 700;}
#about-title h1,#webdev-title h1{color:rgba(255,255,255,.8);}
    /*Project Pages*/    
#LIB-header-titles,#martel-header-titles,#alphabet-soup-header-titles,#odyssey-header-titles{padding-left: 10%;}
    /*taglines*/
.project-skills h4.project-skills h3{padding-top: 10px;line-height: 1.3;} 
/*--------------------------------------------------------------------------------------------------*/
/*NAV*/
/*-------------------------------------------------------------------------------------------------*/
/*HOME MENU*/
#home-menu{position: fixed;top: 3%; left: 2%; z-index: 99999;}
#logo img,#work-link img,#about-link img,#webdev-link img,#contact-link img,#resume-link img{width: 48px; height: 46px;}
.social-link img{width: 45px; height: 45px; opacity: .8;}
/*Other TOP PAGE MENUS*/
.navigation{position: fixed;top: 0; left: 0; width: 100%;height:75px;z-index: 9999999;background: rgba(0,0,0,.3);}
#about-menu,#work-menu,.project-menu,#webdev-menu{width:100%; background:transparent;}
#work-menu,#about-menu,.project-menu,#webdev-menu{position: fixed;width:95%;top: 0; left: 2%;height:45px;padding:0;}
.project-menu ul,#work-menu ul,#about-menu ul{padding: 15px 0 0 1%;}
#work-menu li,#about-menu li,#home-menu li,.project-menu li,#webdev-menu li{display: inline-block;padding: 0 2px;vertical-align: top;}
  li#LL-home img{width: 58px; height: 56px;}
#about-menu img,.project-menu img,#webdev-menu li img{width: 58px; height: 56px;} 
#work-menu img{width: 58px; height: 56px;}
/*SECONDARY NAVS*/
.secondary-navigation{}
.secondary-nav{margin: 0 0 20px 3%;}
#secondary-home-nav li{font-size: 1.25em;color:rgba(28,27,6,.8);font-weight: 700;}
.secondary-nav ul{}
#secondary-work-nav{margin-left:5%;}
#secondary-about-nav,#secondary-webdev-nav{margin-left:5%;}
#secondary-work-nav li{display: block;padding: 10px 5px;}
#secondary-about-nav li,#secondary-webdev-nav li{display: block;padding: 5px;}
#secondary-work-nav li:hover,#secondary-about-nav li:hover,#secondary-webdev-nav li:hover,#secondary-work-nav li:focus,#secondary-about-nav li:focus,#secondary-webdev-nav li:focus,#secondary-work-nav li:visited,#secondary-about-nav li:visited,#secondary-webdev-nav li:visited{text-decoration: none;}
#secondary-work-nav a,#secondary-about-nav a,#secondary-webdev-nav a{color: rgba(255,255,255,.8); font-size:1em;font-style: normal;font-weight:700;letter-spacing: .06em;text-transform: uppercase;}
#secondary-work-nav a:hover,#secondary-about-nav a:hover,#secondary-webdev-nav a:hover,#secondary-work-nav a:focus,#secondary-about-nav a:focus,#secondary-webdev-nav a:focus{font-style: italic;}
#secondary-work-nav a:visited,#secondary-about-nav a:visited,#secondary-webdev-nav a:visited{font-style: normal;}
/*BACK TO TOP*/
.back-to-top{position:fixed;bottom:0;float: right;margin: 0 0 5% 2%;z-index: 9999999;}
.back-to-top img{width: 55px; height: 54px; opacity: .9;}
/*TOOLTIPS*/
.tooltip {
  position: relative;z-index: 2;cursor: pointer;}
tooltip:before,.tooltip:after {visibility: hidden;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;pointer-events: none;}
.tooltip:hover:before,.tooltip:hover:after {visibility: visible;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);opacity: 1;}
/*--------------------------------------------------------------------------------------------------*/
/*WORK PAGE*/
/*--------------------------------------------------------------------------------------------------*/
/*THUMB NAV*/
.work-image-container > #thumb-nav ul > li{width: 65%; padding: 0 2% 0 10%;margin-left: 50px;}
#thumb-nav{margin: 25% 0 0 0;}
#thumb-nav ul li{vertical-align: top;display: inline-block;position: relative;}
.thumb-nav{margin-bottom:5%;}
.work-section{width: 100%;padding: 5% 0;}
.thumb-nav img{position: relative; vertical-align:top; max-width: 100%;margin-bottom: 2%;}
#pool-player.thumb-nav,#martel-logo.thumb-nav,#alphabet-soup.thumb-nav{margin: 10% 0;}
#places,#folio{padding-bottom: 10%;}
/*SECTIONS*/
    /*divs*/
#wordpress-section-ul{width: 100%;}
#wordpress-section,#motion-section,#interactive-section,#video-section,#media-section,#projectpages-section{padding-bottom: 7%;}
    /*background colors*/
#wordpress-section{width:100%;background: rgb(19,28,53);}
#motion-section{background: rgb(23,36,63);}
#interactive-section{background: rgb(16,26,40);}
#media-section{background: rgb(13,33,51);}
#process-section{background: rgb(33,33,2);padding: 5% 0;}
#skills-section{background: rgb(45,45,3);}
#contact-section{background: rgb(41,38,0);padding: 5% 0 10% 0;}
/*IMAGE CONTAINER LIs for image sizes*/
    /*media image ul's & li's & img*/
ul#transformed-35mm,ul#original-35mm,#manipulate-35mm-div,#manipulate-snapshot{padding-left: 10%;}
#snow-div > ul#snow > li{display: inline-block;position: relative;width: 40%;padding: 1% 1% 0 0;}
#image-manipulate > #manipulate-snapshot > ul > li{display: inline-block;position: relative; width: 38%; padding: 0 1% 2% 0;}
#correction-container,.color-correction ul,#christmas-div > ul#christmas-ul,#image-manipulate > #manipulate-container > #manipulate-snapshot > ul {padding: 0 0 3% 10%;}
#manipulate-35mm-div > ul#original-35mm > li{display: inline-block;position: relative;width: 40%;padding:1% 1% 1% 0;}
#manipulate-35mm-div > ul#transformed-35mm > li{display: inline-block;position: relative;width: 40%;padding:1% 1% 1% 0}
img#snapshot,img#portrait,img#contact-sheet,img#original-sizes,img#transformed-35mm,img#trailer,img#snow1,img#snow2,#pool-player-poster,#martel-logo img{border: 1px solid rgba(255,255,255,.5);}
/*THUMB NAV MEDIA*/
#alphabet-soup img, #ofs img, #folio img, #places img{border: 1px solid #989898;}
#folio img,#alphabet-soup img, #ofs img, #places img, #journal img,#alpha-soup-video video,#alpha-soup-video img{max-width: 100%; height:auto;}
#journal img{width: 100%; max-width:100%;height: auto;}
#pool-player-poster img,#pool-player video{padding: 0;}
#pool-player video controls{padding-top: 3%;}
#pool-player img{padding: 100px;}
#pool-player-poster img{padding-bottom: 100px;}
#martel-logo iframe{background: #000;}
    /*journal*/
#journal{padding: 60px 0 0 2%;}
.journal-list,.journal-list ul{margin-top: 0;padding: 10px 0;}
#journal > #LIB-title > h3{padding: 10% 0 2% 0;color: rgba(255,255,255,.8);letter-spacing: .06em;}
#journal > #LIB-title > h4{padding: 0 0 5% 0;color: rgba(255,255,255,.8);letter-spacing: .06em;text-transform: uppercase;}
.journal-list ul > li > a{padding: 0;margin: 0;font-family: 'Josefin Sans SemiBold',sans-serif;color: rgba(255,255,255,.8);font-size:.9em; letter-spacing: .06em;}
#flash-journal a,#flash-journal,.journal-list,.journal-list a{margin-top: 1%;padding:10px 0;font-size: 1.1em;text-transform: none;font-style: italic;}
/*TEXT*/
    /*section Headings*/
#wordpress-section-title,#motion-section-title,.media-section-title,#color-correction-title,#projectpages-section-title{margin-left:50px;}
#wordpress-section-title h2,#interactive-section-title h2,#motion-section-title h2,#video-section-title h2,#web-section-title h2,.media-section-title h2,#projectpages-section-title h2{text-transform: none;}
.media-section-title h2{padding-top: 7%;}
#wordpress-section-title h5,#web-section-title h5,#interactive-section-title h5,#motion-section-title h5,#video-section-title h5,.media-section-title h5, #color-correction h5{text-transform: uppercase;font-weight:700;letter-spacing:.06em;}
#wordpress-section-title h5,#web-section-title h5,#interactive-section-title h5,#motion-section-title h5,#video-section-title h5,{padding-left: 10%;}
#wordpress-section-title h2{color:rgba(255,255,255,.8);letter-spacing: .06em;padding: 12% 0 1% 10%;}
#wordpress-section-title h5,#motion-section-title h5,.media-section-title h2,.media-section-title h5,#projectpages-section-title h2{padding-left: 10%;}
#wordpress-section-title,#projectpages-section-title{padding-bottom: 5%;}
#motion-section-title h2{padding: 7% 0 0 10%;}
#motion-section-title h2#web-section-title h2,.media-section-title h2,#projectpages-section-title h2,#wordpress-section-title h5,#web-section-title h5,#interactive-section-title h5,#motion-section-title h5,#video-section-title h5,.media-section-title h5{color:rgba(255,255,255,.8);letter-spacing: .06em;padding-bottom: 1%;}
#motion-section-title h5{padding-bottom: 5%;}
#web-section-title h2{padding: 0;}
#project-heading{margin: 0;}
#projectpages-section ul a{text-transform: uppercase;padding-top: 2%;}
#projectpages-section img{height: 40px;width: 47px;padding-top: 10px;vertical-align: bottom;padding: 3% 4% 0 4%;}
    /*media section subheads*/
#manipulate-image-title h3{color: rgba(255,255,255,.8);letter-spacing: .04em;padding: 10% 0 4% 10%;}
#color-correction-title h5{font-size: 1.75em;color: rgba(255,255,255,.8);letter-spacing: .04em;padding: 2% 0 0 10%;}
#snow p,#title-35mm p,#title-35mm h5,#manipulate-title p,#LIB-title p{color: rgba(255,255,255,.8);letter-spacing: .06em;}
#title-35mm p,#title-35mm h5,#manipulate-title p,#snow p{padding: 1% 0 1% 0;}
#snow p{font-size: .9em;}
#LIB-title p{padding: 0 0 1% 0;}
#title-35mm h5{font-size: 1.75em;padding: 10% 0 0 0;}
#LIB-title h5{font-size: 1.75em;padding: 5% 0 0 0;}
#manipulate-title h5{font-size: 1.75em;}
#color-correction-container h6{color: rgba(255,255,255,.8);padding-left: 10%;}
#manipulate-image-title h5{padding-left: 0;}
#title-35mm p.hover-title{padding-bottom: 2%;}
    /*captions (Hover titles)*/
#manipulate-title.work-hover-title h5, #title-35mm h6,.work-hover-title h6,.work-hover-title h5,.thumb-nav h5,.thumb-nav h4{color:rgba(255,255,255,.8); letter-spacing: .06em;font-family: 'Josefin Sans SemiBold',sans-serif;margin:0;padding-top: 1%;} 
#journal > #LIB_title > h5{text-transform: uppercase;}
.work-hover-title h3,.thumb-nav h3{text-transform: uppercase;padding-left: 10px;font-family: 'Josefin Sans SemiBold',sans-serif;}
.work-hover-title {line-height: 1.3;}
.thumb-nav a,.work-hover-title a{font-family: 'Josefin Sans SemiBold',sans-serif;text-transform: uppercase;color:rgba(255,255,255,.8);font-size:1em;letter-spacing: .06em;font-style: normal; padding: 1.5% 0;}
.thumb-nav a:hover,.work-hover-title a:hover{font-style: italic;}
.hover-title,p.hover-title{color: rgba(255,255,255,.8);font-size: .9em;}
.hover-title{padding:0;}
p.hover-title{padding: 5px; font-family: 'Josefin Sans SemiBold',sans-serif;}
/*hovers*/
a:hover,#home-menu a img:hover, #social-menu img:hover{-ms-transform: scale(1.05,1.05); -webkit-transform: scale(1.05,1.05); -moz-transform: scale(1.05,1.05); -transform: scale(1.05,1.05);}
  /*alpha a & hover*/
#alpha-video-link{padding-top: 1%;}
#alpha-video-link a{font-family: 'Josefin Sans SemiBold',sans-serif;color:rgba(255,255,255,.8);font-size: 1.25em;font-style: italic; text-transform: uppercase;letter-spacing:.06em;font-weight:700;}
#alpha-video-link a:hover{-ms-transform: scale(1.05,1.05); -webkit-transform: scale(1.05,1.05); -moz-transform: scale(1.05,1.05); -transform: scale(1.05,1.05);}
/*--------------------------------------------------------------------------------------------------*/
/*ABOUT PAGE*/
/*--------------------------------------------------------------------------------------------------*/
#bio-heading h2{font-size: 2.5em;font-weight: 700;margin-left:4%;}
#bio h3{color: rgba(255,255,255,.9);font-weight: 700;}
.sculpture-link img{width: 70px; height: 70px;border;padding-left: 40%;z-index: 99999;}
.about-link img{width:60px;height: auto;}
  /*about image sections*/
.about-image-container{width: 100%; max-width: 100%;}
.about-image-container > #me ul{padding-bottom: 5%;}
.about-image-container > #me ul > li{display: inline-block;position: relative; width: 60%;}
.about-image-container > #me ul > li > img{width: 40%;max-width: 100%;opacity: .95;}
li#me4{padding: 0 12% 0 2%;}
/*--------------------------------------------------------------------------------------------------*/
/*ABOUT, WEBDEV & PROJECT PAGES*/ 
/*--------------------------------------------------------------------------------------------------*/
/*DESCRIPTIONS & BEHIND THE SCENES*/
  /*area divs*/
.description-area,.about-area,.webdev-area{width: 100%;}
.behind-area{margin-bottom: 10%;}
/*TEXT*/
  /*headings*/
.description-heading,.behind-heading{padding: 0 0 3% 7%;text-transform: uppercase; color: rgba(255,255,255,.8);}
.about-heading,.webdev-heading{margin: 2% 4% 0 4%;text-transform: uppercase; color: rgba(255,255,255,.7);}
.about-text-container,.webdev-text-container{width: 65%; margin-left: 18%; padding: 0;}
.description-text-container,.behind-text-container{width: 70%;padding-top: 0;}
#alphabet-description-text-container,#alphabet-description-image-container{background: transparent;} 
  /*subheads*/
.description-subhead,.behind-subhead{padding:0; color: rgba(255,255,255,.75);}
.description-subhead h3,.behind-subhead h3{padding: 2% 0 2% 10%;line-height:1;font-weight: 700;}
.about-subhead,.webdev-subhead{padding: 0;}
.about-subhead,#email-contact-me,#linkedin-contact-me,#twitter-contact-me,.webdev-subhead{color: rgba(255,255,255,.7);}
.about-subhead h3,.webdev-subhead h3{padding: 2% 0 2% 0;font-size: 1.95em;}
#email-contact-me,#linkedin-contact-me,#twitter-contact-me{color: rgba(255,255,255,.5);padding-top: 2%;}
  /*paragraphs*/
.description-paragraph,.behind-paragraph{font-family: 'Josefin Sans SemiBold';color: rgba(255,255,255,.75);line-height: 1.6; letter-spacing: .05em; width:100%;padding: 0 10% 5% 10%;}
#description-paragraph h3,#description-paragraph h4,#behind-paragraph h3,#behind-paragraph h4.description-paragraph p,.behind-paragraph p{font-family: 'Josefin Sans SemiBold';color: rgba(255,255,255,.75);}
#last-martel-paragraph p{padding-bottom: 10%;}
.about-paragraph,.webdev-paragraph{padding: 3% 0 5% 0;font-family: 'Josefin Sans SemiBold';}
.about-paragraph p,.webdev-paragraph p{color: rgba(255,255,255,.7);font-weight:500;line-height: 1.6; letter-spacing: .05em;}
.about-paragraph p,.webdev-paragraph p,.description-paragraph p{padding: 0 7% 30px 0;font-family: 'Josefin Sans SemiBold';}
  /*uls, ol's*/
.about-paragraph ul,.webdev-paragraph ul {padding: 20px;}
.about-paragraph ul li,.webdev-paragraph ul li{font-family: 'Josefin Sans SemiBold'; color:rgba(255,255,255,.7); letter-spacing: .05em; line-height: 1.2;padding: 10px;}
.about-paragraph h4,.webdev-paragraph h4{padding: 0;}
.about-paragraph{font-weight: 700;}
.description-paragraph ol{list-style: decimal;}
/*IMAGES*/
  /*project top images*/
.top-project-image{padding-top: 3%;}
  /*description image sections*/
.description-image-container{position:relative;width: 100%; max-width: 100%;}
.description-image-container h3{padding-left:10%;color:rgba(255,255,255,.7);}
.description-image-container ul{position:relative;width: 100%;}
.description-image-container a{}
.description-image-container > #original ul > li{display: inline-block;position: relative; width: 45%; padding: 1%;vertical-align: top;}
#letters-ul{padding-left: 10%;}
.description-image-container >  #letters > li{display: inline-block;position: relative; width: 45%; padding: 1%;vertical-align: top;}
.description-image-container > #martel-mine ul > li{display: inline-block;position: relative; width: 45%; padding: 1%;vertical-align: top;}
.description-image-container > #illustrations ul > li{display: inline-block;position: relative; width:70%; padding: 1%;vertical-align: top;}
.description-image-container > .animator-images ul > li{display: inline-block;position: relative; width: 45%; padding: 1%;vertical-align: top;}
.description-image-container > .presets-images ul > li{display: inline-block;position: relative; width: 45%; padding: 1%;vertical-align: top;}
.description-image-container > #odyssey ul > li{display: inline-block;position: relative; width: 75%; padding: 1%;vertical-align: top;}
.description-image-container > #odyssey {margin-top: 18%;}
.presets-images img{width: 600px;height: auto;max-width: 100%;}
.animator-images,.presets-images,.firefly-images{padding: 2% 0 2% 10%;}
#martel-mine,#martel-video-project-page,#illustrations{padding-left: 10%;}
  /*behind the scenes image sections*/
.behind-image-container{position:relative; width: 100%; max-width: 100%;}
.behind-image-container ul{position: relative;}
.behind-image-container li{display: inline-block;position: relative; width: 45%; padding: 1%; vertical-align: top;}
.behind-image-container a{} 
.behind-image-container > .firefly-images ul > li{display: inline-block;position: relative; width: 98%; padding: 1%;vertical-align: top;}
  /*images-general*/
.description-image img,.behind-image img,.about-image img{position: relative; vertical-align:top; max-width: 100%;}
.project-image{margin: 30% 0 3% 15%;padding-left: 3%;}
.project-image h4{color: rgba(255,255,255,.9);}
/*--------------------------------------------------------------------------------------------------*/
/*PROJECT PAGES specifics*/
/*--------------------------------------------------------------------------------------------------*/
/*MARTEL*/ 
#lettermark img{width: 45%; padding-left: 10%;} 
#martel-video{position:relative;z-index: 999;}
#martel-video video{width: 900px;height:auto;max-width: 100%;}
/*LIB*/
#city img, #vintage img{width: 800px;height:auto;max-width: 100%;}
#journal-image > a > img{width: 40%; max-width:100%;height: auto;padding: 0 0 0 10%;}
#vintage {padding: 50px 0 0 20px;}
    li > div#vintage > img, #vintage > img{opacity: .8;border: 1px #989898;}
/*ALPHABET*/
#alphabet-soup-video {background: rgba(255,255,255,.9);}
#alpha-soup-video a img,#alphabet-soup img,#alphabet-soup video{width: 900px; height: auto;max-width: 100%;}
#alphabet-soup-titles{position: relative;}
#alpha-soup-video-project-pg{padding: 5% 0 2% 8%;}
#alpha-soup-video img{width: 900px; height: auto;max-width: 100%;}
#animators, .firefly{border: 1px solid #989898;}
#videos{padding-left: 8%;}
#videos li{padding-bottom: 2%;}
.video h3{padding-top: 5px; color: rgba(255,255,255,.9);letter-spacing: .06;} 
/*--------------------------------------------------------------------------------------------------*/
/*ALTERNATE LIB JOURNAL*/
/*--------------------------------------------------------------------------------------------------*/
#journal-menu{position: fixed;top: 3%; left: 1%;width: 50%;}
#journal-menu li{position: relative;display: inline-block;padding-right: 10px;vertical-align: bottom;}
#journal-menu a img{width: 34px;height: 34px;opacity:
        .7;}
#journal-pages li{padding-right: 25px;}
#journal-pages ul{padding: 5px 0 10px 20px;}
#journal-pages li img{height: 600px;width: auto;max-width: 100%;}
    /*LIB journal */
#journal-pages p{color: #181818;text-align: center;margin-top: 0;position: relative;background: transparent;}
#journal-title{top: 1.5%;z-index: 99999;text-transform: uppercase;background: #000;}
#journal-links ul{list-style: none;}
#journal-links li{text-decoration: none;font-style: italic;padding-top: 10px;font-size: 1.25em;}
#journal-links{margin-left:10%;}
#journal ul{padding: 2% 0 0 3%;margin-left: 3%;}
/*--------------------------------------------------------------------------------------------------*/
/*MEDIA*/
/*--------------------------------------------------------------------------------------------------*/
/*video {*/
    /*object-fit: scale-down;}*/
/*--------------------------------------------------------------------------------------------------*/
/*SKILLS TABLE*/
/*--------------------------------------------------------------------------------------------------*/
    /*skills page section*/
#skills-section{padding: 10% 0;}
    /*table heading*/
#skills-heading{padding-bottom: 1%;} 
    /*table container is about-text-container class*/
    /*tables*/
table{border-collapse: collapse;border-spacing: 0;}
#skill-table,#language-table,#software-table{border-spacing: 0;width:100%;padding:0 5%;}
    /*table body*/
tbody{display:inline-table;width: 100%; border: 8px solid rgba(255,255,255,.95);}
    /*subheads*/
#skill-table-subhead,#language-table-subhead,#language-table-subhead{width: 100%;} 
#skill-table-subhead{background: #dece79;}
#language-table-subhead{background: #7ea8fc;}
#software-table-subhead{background: #d7ea7f;}
    /*th's*/
th{border: none; text-align: left;text-transform: uppercase;}
#skills-row th,#software-row th,#languages-row th{text-transform: none;}
#skills th,#languages th,#software th{padding: 16px 0 12px 5px;}
    /*individual table headers bg's & borders*/
#skills,#skills-row{background: #dece79;}
#languages,#languages-row{background: #93aacc;}
#software,#software-row{background: #cdd88b;}
#skills,#languages{border-right:3px solid rgba(255,255,255,.9);}
#skills,#languages,#software{border-bottom:3px solid rgba(255,255,255,.9);}
     /*rows */
tr{height:50px;}
#row-two, #row-three, #row-four, #row-five, #bottom-row{border-top:3px solid rgba(255,255,255,.9);}
    /*td's*/
#skill-table td,#language-table td,#software-table td{width: 100%;padding-left:20px;border-bottom:3px solid rgba(255,255,255,.9);} 
#skill-table td{background:#eae1b9;}
#language-table td{background:#c6d7f7;}
#software-table td{background:#ebf4b8;}
    /*text*/
 td,th{color: rgba(0,0,0,.8);word-wrap: normal;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;padding: 16px 0 12px 8px;}
#skill-table-subhead th,#language-table-subhead th,#software-table-subhead th{padding-left:20px;font-size: 1.5em; font-weight:700;text-transform: uppercase;border: none;} 
#skill-table td,#language-table td,#software-table td,#skill-table th,#language-table th,#software-table th{color: rgba(0,0,0,.4);word-wrap: normal;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;}
    /*hovers*/
#skill-table td:hover{background: #dece79;}
#language-table td:hover{background: #93aacc;}
#software-table td:hover{background: #cdd88b;} 
#skill-table a, #language-table a, #software-table a{color: rgba(0,0,0,.4);}
#skill-table a:hover, #language-table a:hover, #software-table a:hover{color:rgba(255,255,255,.9);font-style: italic;}
/*--------------------------------------------------------------------------------------------------*/
/*FOOTER*/
/*--------------------------------------------------------------------------------------------------*/
  /*home footer menu*/  
.my-footer > .home-footer{background: #d7ea7f;width: 100%;z-index: 999999;position: fixed !important;right: 0;bottom: 0;left: 0;height:50px;} 
.credits ul{width:94%;margin:0 3%;position: relative;display:inline-block;list-style: none; text-align: justify;font-size: .75em;}
.credits ul:after{content: ''; width: 100%;display: inline-block;}
.credits li{display: inline-block;text-decoration: none;vertical-align:middle;padding:0;}
.credits{position: relative;width:100%;z-index: 999999;}
.credits p{padding-top: 2%;}
#work-footer h4,.credits h4{color: rgba(255,255,255,.8);}
#work-footer{position: relative;padding: 0;margin: 0;}
/*--------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/
/*OTHER PAGES*/
/*--------------------------------------------------------------------------------------------------*/
#valentine-video-container,#valentine-title{padding-left: 5%;}
@media screen and (max-width: 800px){#valentine-video-container,#valentine-title{padding-left: 0;}}
/*--------------------------------------------------------------------------------------------------*/
/*MEDIA QUERIES*/
/*--------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/  
  /*FOR LARGE SCREEN*/
  @media  (min-width: 1800px){
      .description-paragraph p,.behind-paragraph p,.about-paragraph p,.webdev-paragraph p{font-size:.9vw;-webkit-column-count: 2; -moz-column-count: 2; column-count: 2;-webkit-column-gap: 1.5em; -moz-column-gap: 1.5em; column-gap: 1.5em; word-wrap: normal;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;}}
/*-------------------------------------------------------------------------------------------------------*/
/*FOR DEVICES*/
  @media screen and (max-width: 1920px){}
/*---------------------------------------------------------------------------------------------*/
  @media (max-width: 1280px){
      .about-image-container > #me ul > li {width: 98%;height: auto;}
      .about-image-container > #me ul > li > img{width: 50%; height: auto;}
      .about-image-container > #me {width: 100%;margin-left:15%;}
      .header-titles{ padding: 10% 0 0 5%;}
      .description-paragraph,.behind-paragraph{padding: 0 15% 5% 15%;}
      .description-subhead,.behind-subhead{padding-left: 15%;}}
  /*---------------------------------------------------------------------------------------------*/
  @media screen and (max-width: 1200px){
      #name{position:relative; padding: 20% 0 0 0; font-weight:700;text-align:left;} 
      #RJ-credit-home{position: absolute; color: rgba(255,255,255,.9);font-size: .85em;top:100%;left: 1.5%;}
      .BG-image{position: absolute;top: 25%;}
      #alpha-soup-video-project-pg{padding: 2% 0 2% 2%;}}
/*---------------------------------------------------------------------------------------------*/
  @media (max-width: 1024px){
      #name{top:15%;}
      #name h1{font-size:2em;font-weight: 400;}
      .header-titles{padding: 10% 0 0 0;}
      .RJ-credit-about {float:none;font-size: .6em;margin: 1% 0 0 5%;} 
      .about-image-container > #me ul > li > img{width: 40%;margin: auto;}
      #LIB-header-titles, #martel-header-titles, #alphabet-soup-header-titles, #odyssey-header-titles {padding-left: 5%;}
      #video-section{padding-top: 5%;}
      #alpha-soup-video{padding: 5% 0 0 3%;}}
/*---------------------------------------------------------------------------------------------*/
  @media screen and (max-width: 960px){}
/*---------------------------------------------------------------------------------------------*/
  @media screen and (max-width: 830px){
      #name{padding: 12% 0 0 0;margin: 0;}
      #name{font-size: .9em;letter-spacing: .04em;font-weight: 700;}
      #secondary-home-nav{padding-top: 5%;}
      #secondary-home-nav li{font-size: .75em;letter-spacing: .02em;}
      .BG-image{top:23%;}
      #RJ-credit-home{position: absolute; color: rgba(255,255,255,.5);font-size: .85em;font-weight: 300;padding-left: 2px;top:100%;left: 48%;}
    /*BG*/
      .BG-image > #home-BG-wide img {position: absolute;top: 18%;right: 0;margin:0 auto;padding:0;width:100%;height:auto;min-width: 100%;max-width:100%;z-index: -100;}
      #twilight-poster img{position: absolute;top:0;right: 0;margin:0 auto;padding:0;width:100%;height:auto;min-width: 100%;z-index: -100;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
  /*font-size*/
      h1{font-size: 2.5em;}
      h2{font-size: 2.25em;}
      h3{font-size: 1.25em;}
      h4{font-size: 1.1em;}
      h5{font-size: 1em;}
      ol{font-size: 1em;color: rgba(255,255,255,.7);padding-left: 5px;}
  /*titles*/ 
      .title a img{display: none;}
      .header-titles{padding: 5% 0 0 0;}
      .header-titles,.header-titles h1,.header-titles h2, .header-titles h4,.title h1, .tagline,.tagline h3{margin-left:0;}
      #about-title h1,#webdev-title h1{padding: 0 0 0 0;}
      #about-header-titles,#webdev-header-titles{padding-left: 9%;}
      #alphabet-soup-header-titles,#martel-header-titles,#LIB-header-titles{margin-top: 1%;padding-left: 12px;}
      #work-title{padding: 3% 0 2% 10px;}
      #alphabet-soup-title h1,#martel-title h2,#LIB-title h1{padding-top: 2%;}
      .project-tagline-one{padding-top: 5%;}
      .project-tagline-two{line-height: 1.3;font-weight:700;padding: 1% 0;}
      .project-skills{padding: 1% 0 5% 0;}
      .project-skills h5{padding-top:10px;}
  /*navigation*/
      #home-menu{left: 1%;}
      #home-menu li,#work-menu li{padding:0 8px 0 2px;}
      #home-menu img{width: 48px; height: 45px;}
      .social-link img{width: 35px;height: 34px;opacity: .9;}
      .navigation{position: relative;background: transparent;} 
      #work-menu,#about-menu,.project-menu,#webdev-menu{position: relative; left:0;margin-top: 5%;background: transparent;}
      .project-menu ul{width: 100%;}
      .project-menu li{padding:0 15px 0 2px;}
      #work-menu img,#about-menu img,.project-menu img,.project-menu li a img,#webdev-menu img{width: 50px; height: 48px;}
      #secondary-about-nav,#secondary-webdev-nav{margin-left: 9%;}
    /*thumb-nav*/
      #thumb-nav{margin:35px 0 0 0;}
      #thumb-nav ul > li{width: 100%; padding: 0 0 5% 0;}
      .thumb-nav img{margin-bottom: 10px;}
      .thumb-nav h2,.thumb-nav h4,.thumb-nav h5,#web-section-title,#interactive-section-title,#motion-section-title{padding-left:10px;}
      .thumb-nav h4{font-weight: normal;}
      .thumb-nav h5{font-size: 1em;font-weight: normal;}
      .thumb-nav a{font-size: 1em;font-weight: normal;}
      #alphabet-soup {margin-bottom: 25px;padding: 1% 0 5% 0;}
      #journal-links li{font-size: 1em;}
        #journal ul{padding: 1% 0 0 3%;margin-left: 0;}
      #pool-player-poster img, #pool-player video {width:95%;border: 1px solid rgba(255,255,255,.9); padding-left: 1.5%;}
      #martel-logo.thumb-nav img{width: 98%;padding-left: 1%;}
      #pool-player.thumb-nav, #martel-logo.thumb-nav, #alphabet-soup.thumb-nav {margin: 0 0;}
  /*text sections*/
      .behind-heading,.about-heading,.description-heading,.webdev-heading{padding-left: 12px;}
      .description-heading,.behind-heading{margin: 0;}
      .description-heading h2,.behind-heading h2,.about-heading h2{padding-bottom: 0;}
      .about-heading,.webdev-heading{margin-left: 0%;}
      .about-subhead,.behind-subhead,.description-subhead,.webdev-subhead{padding-left: 12px;}
      .about-subhead h3,.behind-subhead h3,.description-subhead h3,.webdev-subhead{font-size: 1.25em;padding: 5% 0 2% 0;}
      .description-text-container,.behind-text-container,.description-text-container,.behind-text-container{width: 100%; margin-left: 0;padding-left: 0;}
      .description-paragraph,.behind-paragraph,.about-paragraph,.webdev-paragraph{padding-left:0;}
      .description-paragraph, .behind-paragraph,.about-paragraph,.webdev-paragraph{ width: 98%;}
      .description-paragraph p,.behind-paragraph p,.about-paragraph p,.webdev-paragraph p{padding:0 5px 0 12px;}
      .description-paragraph h4,.behind-paragraph h4{padding:15px 0 10px 12px;font-size: 1.1em;}
      .description-paragraph ol,.behind-paragraph ol{padding-left: 8%;list-style: decimal;width: 90%;}
      .about-paragraph ul,.webdev-paragraph ul{padding: 20px 0 0 12px;}
      #last-martel-paragraph{margin-bottom: 25px;}
      .about-text-container,.webdev-text-container {margin-left: 9%;width:80%;}
    /*media*/
      .top-project-image{margin-top: 20px;}
      #journal-image > a > img{width: 95%; padding: 5% 0 0 12px;}
      .work-image-container{width: 100%;}
      .description-image-container ul > li,.behind-image-container ul > li{width: 100%; padding: 0 0 0 0;}
      .description-image-container > #illustrations ul > li{width: 98%; padding: 0 1% 0 1%;}
      .description-image-container > .animator-images ul > li{width: 98%; padding: 1% 0 0 1%;}
      .description-image-container > .presets-images ul > li{ width: 98%; padding: 1% 0 0 1%;}
      .behind-image-container > .firefly-images ul > li{width: 98%; padding: 0 1% 0 1%;}
      .description-image-container p{padding-top: 0;}
      .about-image-container > #me {margin: 0 0 2% 15%;}
      .description-image-container > #martel-mine ul > li,.description-image-container > #letters ul > li,.description-image-container > #original ul > li{width: 99%; padding: 0 0 0 0;}
        #vintage{padding: 20px 0 0 2px;}
      .project-image{margin: 10% 0 15% 15%;}
      #journal-image,#journal{width: 100%;padding: 5% 0 0 0;}
      #journal-image a img,#journal a img{width: 95%; height:auto;max-width:100%;margin-bottom:2%;}
      #journal-image h4{display: none;}
      #journal-image > a > img{padding: 0 0 0 0;}
      #journal-links{margin-left: 5%;padding-bottom: 5%;}
      .description-image-container > #illustrations > img{width: 95%;}
      #alpha-soup-video{padding: 5% 0 0 ;}
  /*captions*/
      .hover-title{padding: 0 0 0 0;}
      .work-hover-title h5{padding: 10px 0 0 12px;font-size:1.1em;}
      .work-hover-title a{margin-left: 0;padding:10px 0 0 12px;font-size: 1em;}   
  /*video*/
      #video-section{padding-top: 0;}
      #videos{padding: 0 0 0 0;width: 100%;}
      .video{width: 100%;padding-bottom: 1%;border: none;}
      video{width: 100%;height:auto;max-width:100%;margin:0;padding: 0;}
      .video h3{padding-bottom: 20px;}
      #martel-video {padding: 2% 0 0 0;}
      #martel-video-title{padding: 5px 0 5px 15px;color:rgba(255,255,255,.7);}
      .player .controls{padding-top: 3%;}
      .outro-wrapper,.controls-wrapper,.mobile-timecode,.sidedock.box{display: none;visibility: hidden;color: #000;padding: 0em 0em;}
      .player .sidedock button {width: 0em;height: 0em;}
    /*footer*/
      /*home footer*/
      .my-footer > .home-footer{position:relative;}
      .home-footer ul{width: 100%;}
      .home-footer li{}
      /*credits section of footer*/ 
      .credits{width: 90%;padding-bottom: 0;margin-bottom: 0;}
      .credits li{padding: 0;}
      .credits ul{padding-top: 1%;width: 100%;}
      .credits h4{font-size: .9em;}
      .credits ul > li > p, .image-credit, .copyright{padding-bottom: 0;}
  /*alternate journal*/
      #journal-menu{top: 5px; left: 10px;}
      #journal-menu li{padding-right: 10px;}
      #journal-menu a img{width: 30px;height: 30px;opacity:
            .95;}
      #journal-pages ul{padding: 0px 100px 50px 100px ;}
      #journal-pages li img{height: 425px;width: auto;}
      #journal-pages p{margin-top:-20px;padding:2px;text-align: center;background: rgba(0, 0, 0, 0.5);}
      #journal-title{top:0;padding-top:0;width: 500px;overflow-x:scroll; }}
/*---------------------------------------------------------------------------------------------*/
  @media screen and (max-width: 667px){
  /*iphone7 landscape*/
      .BG-image{top:23%;}
      #name{padding: 11% 0 0 1.5%;margin: 0;font-size: .9em;}
      #name h1{letter-spacing: .01em; font-weight: 700;}
      #secondary-home-nav{padding-left: 0;margin-left: 1%;}
      .header-titles{padding: 2% 0 0 3%;}
      .header-titles,.header-titles h1,.header-titles h2, .header-titles h4,.title h1, .tagline,.tagline h3{position: relative; margin-left:0;}
      #work-menu li,#about-menu li,#home-menu li,.project-menu li{;padding: 0 4px;}
      #secondary-about-nav,#secondary-webdev-nav{display: none;}
      #secondary-work-nav li {padding: 8px 0 8px 8px;}
      .work-image-container > #thumb-nav ul > li {width: 90%;padding: 5% 0 5% 5%;}
      .thumb-nav h4{padding: 0;}
      .thumb-nav{margin-bottom:0;}
      #thumb-nav{margin: 5px 0 0 0;}
      .work-hover-title a {padding: 5px 0 0 5px;}
      #places{padding-bottom: 5%;}
      #pool-player-video,#pool-player-poster img{border: none;}
  /*media img li's & ul's*/
      ul#transformed-35mm,ul#original-35mm,#manipulate-35mm-div,#manipulate-snapshot{padding-left: 0;}
      #snow-div > ul#snow > li{width: 85%; padding: 1% 1% 1% 7%;}
      #image-manipulate > #manipulate-snapshot > ul > li{width: 75%; padding: 0 1% 0 12%;}
      #correction-container,.color-correction ul,#image-manipulate > #manipulate-container > #manipulate-snapshot > ul {padding: 0 1% 0 1%;}
      #manipulate-35mm-div > ul#original-35mm > li{width: 85%; padding: 0 1% 0 7%;}
      #manipulate-35mm-div > ul#transformed-35mm > li{width: 85%; padding: 0 1% 0 7%;}
      #color-correction-title h5,#video-title h5,#title-35mm h5,#LIB-title h5,#manipulate-title h5{font-size: 1.15em;}
      #color-correction-title h5,#color-correction-container h6,#color-correction-title p,#title-35mm h5,.media-section-title h5,.media-section-title h2{padding-left: 7%;}
      #color-correction-title h5{padding-top: 10%;}
      #manipulate-image-title h3{padding: 15% 0 1% 5%;}
      #manipulate-title h5{padding: 3% 7%;}
      #wordpress-section-title h2{padding:5% 0 0 5%}
      #wordpress-section-title h2,#motion-section-title h2{}
      p.hover-title{padding: 0 5px 15px 5px;}
      #about-title h1,#webdev-title h1{padding: 0 0 0 0;}
      #about-header-titles,#webdev-header-titles{position: relative;padding-left: 6%;}
      .about-text-container,.webdev-text-container{margin-left:6%; width:90%;}
      .about-paragraph p,.webdev-paragraph p{line-height: 1.3;}
      #me4{padding-left:3%;width: 100%; }
      .description-paragraph,.behind-paragraph{padding: 0 1% 5% 1%;}
      #original{padding-top: 2%; font-size: .9em;}
      .description-subhead h3{font-size: .9em;}
      .description-paragraph h3,.behind-paragraph h3{padding-left: 3%;}
      #alpha-soup-video {padding: 5% 0 0 1%;}
      #alpha-soup-video-project-pg{padding: 1% 1% 0 1%;}
      .about-text-container,.webdev-text-container{margin: 0 0 0 0;padding-left:3%;}
      .work-title{padding: 3% 0 2% 0;}
      .video-BG video{display: none;}
      #martel-mine,#martel-video-project-page,#letters-ul,.animator-images,.presets-images,.firefly-images,#illustrations{padding-left: 0;}
      #journal-links li {font-size: 1.2em;padding: 2% 0;}
      #LIB-title h4{font-size: 1em;}}
/*---------------------------------------------------------------------------------------------*/
  @media (max-width: 400px){
    /*Home*/
      .BG-image{top:23%;}
      .BG-image > #home-BG-wide img{height: 75%; width: auto;overflow: hidden;}
      #name{position:relative;padding: 64% 0 0 6%;}
      #name h1{color: rgba(255,255,255,.7);}
      #secondary-home-nav{padding-top: 1%;margin-left: 6%;}
      #secondary-home-nav li{color: rgba(255,255,255,.7); font-size: 1.2em;line-height: 1.3;}
      #home-menu{top: 66%;left: 5%;}
      #home-menu img{width: 50px;height: 47px;}
      .social-link{margin: 28% 0 0 -131px;}
      li#logo,li#work-link,li#about-link,li#webdev-link{padding-right: 3%;}
      li.social-link{padding-right: 4%;}
      #RJ-credit-home{position: absolute; color: rgba(255,255,255,.5);font-size: .85em;font-weight: 300;padding-left: 2px;top:100%;left: 48%;}
    /*Other Pages Menus*/
      #work-menu,#about-menu,.project-menu,#webdev-menu{position: relative; left:0;margin-top: 7%;background: transparent;}
      #work-title h1{letter-spacing: .05em;}
      /*Work page*/
      .thumb-nav h4{font-size: 1.2em;}
      #flash-journal a{padding: 2% 0;margin-top: 2%;}
      #wordpress-section-title h5,#motion-section-title h2,#motion-section-title h5{padding-left: 5%;}
      /*Footer*/
      .credits{width: 90%;top:90%;bottom: 0;left: 0; padding-bottom: 0;margin-bottom: 0;}}
/*---------------------------------------------------------------------------------------------*/
    @media (max-width: 320px){}
   /*iphone 7=375*/
    /*RETINA*/
    @media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {}
  /* High-res styles*/