@charset "utf-8";
/* CSS Document */

body {display:inline;}
img {max-width:100%;}


.inner_container {max-width:1060px;margin: 0px auto;}
#header_logo {width: 50%;text-align:left;margin-bottom:-35px; }
#top {width:80%; padding:5% 5% 0% 15%;}
#top h3{font-family: 'Montserrat',sans-serif;font-weight:100;font-style:normal;text-transform:uppercase;}
#image_container {width:100%; float:left; background: url(images/bkg.jpg) no-repeat center fixed; padding:10% 0 10% 0;margin-bottom:20%;  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
#media_description {width:35%; float:right;text-align:center;margin:7% 7% 0 5%;color:#fff;text-shadow: 1px 1px 2px #000;}
.glam_shot {width:35%;float:left;margin:0 0 0 15%;}
.centered {text-align: center;}

/*-- clients --*/
#clients {display:block; width:100%; padding:5% 0% 15% 0%;}
#clients h2 {margin: 0 0 0 5%;}
.clients { padding: 2.5%; width:11%;}

/*-- work --*/
.device_container {width:90%; float:left; padding:5% 5% 15% 5%; display:block;}
#square_container {margin-bottom: 50px;}
.square {position:relative;width:21%; float:left; display:block; margin:3% 2% 5% 2%;}
.square img{border-radius:50%;}
.square:hover {transform: scale(1.05);}
.square {transition: .25s; transition-timing-function: ease-out;}

/*-- demo reel --*/
#video_container {width:100%; padding-bottom:25%; display:block;}
#hide_video {display:none;}

/*-- footer --*/
#footer_logo {text-align:center;margin-bottom:-38px;display:block; }
#footer {color:#999;border-top:thin #333 solid; background: url(images/ned_card_footer_bkg.jpg) no-repeat center ; padding:5% 0 31% 0;  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

#contact {width:51%;text-align:left;float:left;display:inline;margin-left:43%;}
#contact h2 {font-size:14px;font-family: 'Montserrat',sans-serif;font-weight:100;font-style:normal;text-transform:uppercase;text-shadow: 1px 1px 1px #000;}
#contact h3 {font-size:18px;font-weight:200;padding-left:5%;text-shadow: 1px 1px 1px #000;}

#social {width:50%;float:right;display:inline;}
.social {float:left;width:10%;display:inline;margin:7.5%;}

/*--text formatting--*/
h1 {font-family: 'Playfair Display',sans-serif;font-size: 26px; text-indent:10px;font-weight:300; font-style:italic;}
h2 {font-family: 'Playfair Display',serif; font-size:20px; font-weight:300; font-style:italic;}
h3 {font-family: 'Playfair Display',serif; font-size:14px; font-weight:300; font-style:italic;}
h4 {position:absolute; top:25%;padding:10px; background-color:#aaa;font-family: 'Playfair Display',serif; font-size:16px; font-style:italic;}
p {font-family: 'Droid Serif',sans-serif;font-size:13px; line-height:18px; text-align:center;}
ul {list-style-type:none;width:60%;}
li {font-family: 'Playfair Display',sans-serif;font-size:20px;color:#FFF;font-style:italic;float:left;width:40%;margin:2%;}
span {font-style:italic; text-transform:lowercase; letter-spacing:0em; font-family:'Montserrat', sans-serif;}

/*-- link styles --*/
a:link {color:#09C; text-decoration: none;}
a:hover {color:#fff;text-decoration: none; }
a:visited {color:#333;text-decoration: none; }
a:active {text-decoration: none;color:#cc0000; }

/*-- 1000px --*/
@media (max-width:1000px) {
.square {width:29.3%;}
}

/*-- tablets --*/
@media (max-width:800px) {
#header_logo{width:50%; margin-left:30%;}
.clients { padding: 0 3% 0 3%; width:18%;}


#media_description {width:45%;float:right;text-align:center;margin: -2% 5% 0 0;}
.glam_shot {width:35%;float:left;margin:0 0 0 5%;}


#device_container {width:100%; padding:5% 0 25% 0; display:block;}
#device_container h2{margin-left:5%;}
#clients h2 {margin-left:5%;}


#contact {width:35%;}
#social {width:25%;float:right;display:inline;}
.social {float:left;width:30%;display:inline;margin:7.5%;}


h1 {font-size: 32px;}
h2 {font-size:26px;}
h3 {font-size:18px;}
p {font-size:14px; line-height:18px;}
}

/*-- phones --*/
@media (max-width:568px) {
#header_logo {margin-left:0;}	
#image_container {width:100%;padding:20% 0 10% 0; }
.glam_shot {width:70%;float:left;margin:0 0 0 15%;}
#media_description {width:70%;text-align:center;margin: 0 15% 0 0;}

.clients { padding: 0 5% 0 5%; width:22%;}
.square {width:46%;}

#footer {padding:5% 0 60% 0;}
#contact {width:51%;float:left;margin:0 0 0 10%;}
}