/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
  outline:none;
}
a {
  text-decoration:none; 
}

:focus {/* remember to define focus styles! */
	outline: 0;
}
html, body {
	line-height: 1;
}
body {
  min-height:508px; 
}
ol, ul {
	list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a img {
	border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}


/* =Fonts
----------------------------------------------- */


@font-face {
    font-family: 'tg20';
    src: url('/fonts/tradegothic-boldcondtwenty-webfont.eot');
    src: url('/fonts/tradegothic-boldcondtwenty-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/tradegothic-boldcondtwenty-webfont.woff') format('woff'),
         url('/fonts/tradegothic-boldcondtwenty-webfont.ttf') format('truetype'),
         url('/fonts/tradegothic-boldcondtwenty-webfont.svg#TradeGothicBoldCondensedNo.20') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'anbook';
    src: url('/fonts/ApexNew-Book.eot');
    src: url('/fonts/ApexNew-Book.eot?#iefix') format('embedded-opentype'),
         url('/fonts/ApexNew-Book.woff') format('woff'),
         url('/fonts/ApexNew-Book.ttf') format('truetype'),
         url('/fonts/ApexNew-Book.svg#apexbook') format('svg');
    font-weight: normal;
    font-style: normal;

}


img {
    padding:0;
    margin:0;
}

html,body {
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    -webkit-text-size-adjust: none;
}

#container {
    position:relative;
    width:100%;
    height:100%;
    font-family:'anbook','Arial',sans-serif;
    font-size:14px;
    min-height:480px;
    background:#ff3342;
}
#content_slider {
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    overflow:hidden;
    background:#ff3342;
    z-index:2;
}
#contact {
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    overflow:hidden;
    z-index:1;

}
.slide {
    height:100%;
    width:100%;
}

#process {
    position:absolute;
    top:0px;
    left:100%;
}
#process_img_cont img {
    padding:0 !important;
    margin:0 !important;
    margin-top:-1px !important;
}
#process_img_cont {
    position:relative; 
}
#process_pos {
    position:absolute;
    top:0;
    left:0;
    color:#FFF;
    background:#000;
    padding:2px 5px;
    font-size:10px;
}

#process_cont {
 		margin:0 auto;
  	height:100%;
    max-width:640px;
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
 		line-height:0; 
}
#process1 {
    margin-top:0px; 
}
#cs {
    position:absolute;
    top:0px;
    left:200%;
    overflow:hidden;
    background:#192121;
}



/* =Case Studies */
.cs_slide {
    height:100%;
    width:100%;
    position:absolute;
    top:0px;
    overflow:hidden;
}

.cs_slide_inner {
    height:100%;
    width:100%;
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
    background:#192121;
}
#cs_slide_1 {
    left:0px; 
}
#cs_slide_2 {
    left:100%; 
}
#cs_slide_3 {
    left:200%; 
}
#cs_slide_4 {
    left:300%; 
}
#cs_slide_5 {
    left:400%; 
}
#cs_slide_6 {
    left:500%; 
}
#cs_slide_7 {
    left:600%; 
}
#cs_selector {
    position:fixed;
    width:100%;
    height:100%;
    margin-top:0px;
    z-index:110;
    background:url('../images/mesh.png');
}
.selector_row {
    margin:0 auto;
    width:320px;
    height:22%;
}
#row1 {
    padding-top:15px; 
}
.selector_item {
    width:50%;
    height:100%;
    text-align:center;
    float:left;
}
.selector_item a {
    display:block;
    width:140px;
    height:50px;
    margin:0 auto;
    background:url('../images/project_nav2.png');
}
#cs_1 {

}
#cs_2 {
    background-position:-140px 0;
}

#cs_3 {
    background-position:-0px -50px;
}
#cs_4 {
    background-position:-140px -50px;
}
#cs_5 {
    background-position:-0px -100px;
}
#cs_6 {
    background-position:-140px -100px;
}
#cs_7 {
    background-position:0px -150px;
}
#cs_8 {
    background-position:-140px -150px;
}
.slidelet_caption {
    background:#192121; 
    padding:10px 30px 10px 20px;
    color:#FFF;
    margin:0 !important;
    line-height:20px;
    font-size:14px;
    position:relative;
}

.slidelet_caption span {
    font-weight:bold; 
}

.slidelet_img {
    margin:0;
    padding:0;
    line-height:0;
    position:relative;
}
.video_player {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.play_button {
    position:absolute;
    top:50%;
    margin-top:-20px;
    left:50%;
    margin-left:-20px;
    width:40px;
    height:40px;
    background: url('../images/play.png');

}
.next_cs_button {
    position:absolute;
    bottom:50px;
    left:50%;
    margin-left:-34px;
    width:68px;
    height:21px;
    background: url('../images/next.png');
}
.slidelet_down {
    width:30px;
    height:20px;
    background:url('../images/arrow_down.png') center bottom no-repeat;
    position:absolute;
    right:10px;
    bottom:10px;
}
.cs_heading {
    position:relative;
    color:#FFF;
    border:solid 0px #FFF;
    padding:20px 20px;
}
.cs_heading_client {
    clear:left;
    padding-bottom:5px;
    height:20px;
}
.cs_heading_client div {
    float:left;
    width:200px;
    font-size:16px; 
    line-height:20px;
  
}
.cs_heading_client div.first {
    float:left;
    width:70px;
    font-size:16px; 
    font-family:'tg20';
    position:relative;
    top:-2px;
}

.cs_heading_title {
    font-family:'tg20';
    font-size:22px; 
    border-bottom:solid 1px #FFF;
    border-top:solid 1px #FFF;
    padding:10px 0;
    margin:14px 0;
}
.cs_heading_teaser {
    font-family:'anbook';
    font-size:16px; 
    line-height:20px;
    padding-right:50px;
}
.title_arrow {
    height:30px;
    width:30px;
    position:absolute;
    right:20px;
    bottom:20px;
    background: url('../images/title_arrow.png') no-repeat;
    z-index:10;
}

.cs_info_button {
    position:absolute;
    display:block;
    top:0px;
    right:20px;
    width:21px;
    height:32px;
    z-index:100;
    background:url('../images/info.png');
}
.cs_info_button.active {
    background-position:-21px 0px;
}
.cs_info_button_close {
    position:absolute;
    top:20px;
    right:20px;
    width:22px;
    height:22px;
    z-index:13;
    background:url('../images/close.png');
}
.cs_info {
    position:absolute;
    top:0px;
    left:0px;
    z-index:12;
    width:100%;
    height:100%;
    background:url('../images/mesh.png');
    overflow:scroll;
    padding-bottom:100px;
}
.cs_info_heading {
    color:#FFF;
    margin:10px;
    padding:10px;
    opacity:0.95;
}
.cs_info_heading_client {
    clear:left;
    padding-bottom:5px;
    height:20px;
}
.cs_info_heading_client div {
    float:left;
    width:200px;
    font-size:16px; 
    line-height:20px;
  
}
.cs_info_heading_client div.first {
    float:left;
    width:70px;
    font-size:16px; 
    font-family:'tg20';
    position:relative;
    top:-2px;
}
.cs_info_heading_title {
    font-family:'tg20';
    font-size:22px; 
    border-bottom:solid 1px #FFF;
    border-top:solid 1px #FFF;
    padding:10px 0;
    margin:10px 0;
}
.cs_info_heading_teaser {
    font-family:'anbook';
    font-size:16px; 
    line-height:20px;
}
.cs_info_synopsis {
    background:#192121;
    margin:0px 10px 10px 10px;
    padding:10px;
    color:#FFF;
    font-family:'anbook';
    font-size:16px; 
    line-height:20px;
    opacity:0.95;
}
.cs_info_synopsis_title {
    font-family:'tg20';
    font-size:16px; 
    border-bottom:solid 1px #FFF;
    padding-bottom:10px;
    margin-bottom:10px;
}
.cs_info_outcomes {
    background:#192121;
    margin:0px 10px 10px 10px;
    padding:10px;
    color:#FFF;
    font-family:'anbook';
    font-size:16px; 
    line-height:20px;
    opacity:0.95;
}
.cs_info_outcomes_title {
    font-family:'tg20';
    font-size:16px; 
    border-bottom:solid 1px #FFF;
    padding-bottom:10px;
    margin-bottom:10px;
}
.cs_info_testimonial {
    background:#192121;
    margin:0px 10px 10px 10px;
    padding:10px;
    color:#FFF;
    font-family:'anbook';
    font-size:16px; 
    line-height:20px;
    opacity:0.9;
}
/* =Home */
#home {
    position:absolute;
    top:0px;
    left:0px;
    background:#ff3342;
    color:#FFF;
    font-weight:normal;
    height:100%;
    width:100%;
    min-height:480px;
}
#home_container {
    width:100%;
    height:500px;
    padding:70px 0;
    margin-bottom:0px;

}
#home_intro {
    text-align:center; 
    padding:0px !important;
    line-height:18px;
    font-size:20px;
    font-style:italic;
}

#home_wordmark {
    margin:25px auto;
   	background:url('../images/wordmark.png') no-repeat;
    width:230px;
  	height:48px;
}
#home_nav {
    margin:25px auto;
    width:253px;
    height:49px;
}
#home_nav div {
    float:left; 
    height:49px;
    line-height:49px;
    padding:14px 22px;
    width:60px;
    font-size:16px;
    font-weight:bold;
}
#home_work {
    text-align:right;
    cursor:pointer;
}
#home_about {
    text-align:left;
    cursor:pointer;
}
#home_logo {
   	background:url('../images/logo.png') center top no-repeat;
    width:45px !important;
    padding:14px 0px 8px 0px !important;
  	height:49px;
}

.fullimg {
    width:100%; 
}




/* =Nav */
#nav {
    height:40px;
    width:100%;
    position:fixed;
    bottom:0px;
    background:#000 url('../images/nav_bg.png') center repeat-x;
    z-index:1000;
}
#nav_inner {
    height:36px;
    width:98%;
    margin:1px auto;
    z-index:1000;
}
.nav_item {
    width:16.5%;
    height:36px;
    float:left;
    border-right:solid 0px #000;
}
#nav_share {
    border:none; 
}
.nav_item div {
    display:block;
    height:20px;
    width:20px;
    background:url('../images/nav.png') no-repeat;
    margin:7px auto 7px;
}
#nav_home div {
    width:18px;
    background-position: 0px 0px;
}
#nav_cs div {
    width:18px;
    background-position: -18px 0px;
}
#nav_left div {
    width:17px;
    background-position: -35px 0px;
}
#nav_right div {
    width:17px;
    background-position: -52px 0px;
}
#nav_contact div {
    width:17px;
    background-position: -68px 0px;
}
#nav_share div {
    width:21px;
    background-position: -86px 0px;
}


#nav_home.selected div {
    width:18px;
    background-position: -0px -21px;
}
#nav_cs.selected div {
    background-position: -18px -21px;
}
#nav_contact.selected div {
    background-position: -68px -21px;
}
#nav_share.selected div {
    background-position: -86px -21px;
}

#sharebox {
    width:18%;
    height:0px;
    overflow:hidden;
    background:url('../images/mesh.png');
    position:absolute;
    right:0;
		bottom:40px;
    z-index:900;
    min-width:40px;
  	max-width:60px;
}
#sharebox ul {
    position:relative;
    top:15px;
}
#sharebox li a {
    display:block;
    clear:left;
    margin:0 auto;
    width:24px;
    height:20px;
    padding:8px;
}
#sharebox li span {
    background:url('../images/social.png');
    width:18px;
    height:18px;
    display:block;
    margin:0px auto;
}
#share-linkedin span {
    background-position:0px -18px !important; 
}
#share-pinterest span {
    background-position:0px -36px !important; 
}
#share-twitter span {
    background-position:0px -53px !important; 
    height:16px !important;
}
#share-google span {
    background-position:0px -68px !important; 
}



/* =Contact */
#contact h1 {
    font-family:'tg20'; 
    font-size:18px;
    color:#FFF;
    padding:25px 0;
}
#contact {
    color:#FFF; 
}
#contact a {
    color:#FFF;
    text-decoration:none;
}
#contact_inner {
    width:90%;
    max-width:400px;
    margin:10px auto;
    padding:0 5%;
}
#contact_inner > div {
    padding:16px 10px 16px 75px; 
    border-top:solid 1px #FFF;
    line-height:18px;
    position:relative;
}
#contact_inner .c_icon {
    position:absolute;
    left:25px;
    top:30%;
    width:20px;
    height:20px;
    background:url('../images/contact.png') no-repeat;
}
#contact_email .c_icon {
    background-position: 0px -21px;
    height:19px;
    width:25px;
}
#contact_physical .c_icon {
    background-position: 0px -39px;
    height:28px;
    width:26px;
    top:35%;
}
#contact_maps .c_icon {
    background-position: 0px -66px;
    height:23px;
    width:25px;
}
#contact_directions .c_icon {
    background-position: 0px -88px;
    height:24px;
    width:25px;
}
#contact_directions {
     border-bottom:solid 1px #FFF;
}




@media all and (-webkit-min-device-pixel-ratio: 1.5) {
    #cs_selector {
        background-size:2px 2px;
    }
    .cs_info {
        background-size:2px 2px;
    }
  	.next_cs_button {
    	  background:url('../images/next@2x.png') no-repeat;
        background-size:68px 21px;
  	}
  	.play_button {
    	  background:url('../images/play@2x.png') no-repeat;
        background-size:40px 40px;
  	}
    .nav_item div {
    	  background:url('../images/nav@2x.png') no-repeat;
        background-size:109px 40px;
  	}
    #home_logo {
    	  background:url('../images/logo@2x.png') no-repeat;
        background-size:45px 49px;
  	}
    #home_wordmark {
    	  background:url('../images/wordmark@2x.png') no-repeat;
        background-size:230px 48px;
  	}
    .title_arrow {
        background: url('../images/title_arrow@2x.png');
        background-size:30px 30px;
    }
    #nav_home div {
      width:18px;
      background-position: 0px 0px;
    }
    #nav_cs div {
        width:18px;
        background-position: -18px 0px;
    }
    #nav_left div {
        width:17px;
        background-position: -36px 0px;
    }
    #nav_right div {
        width:17px;
        background-position: -54px 0px;
    }
    #nav_contact div {
        width:17px;
        background-position: -71px 0px;
    }
    #nav_share div {
        width:21px;
        background-position: -89px 0px;
    }
    
    
    #nav_home.selected div {
        width:18px;
        background-position: -0px -21px;
    }
    #nav_cs.selected div {
        background-position: -18px -21px;
    }
    #nav_contact.selected div {
        background-position: -71px -21px;
    }
    #nav_share.selected div {
        background-position: -89px -21px;
    }
  
  	.selector_item a {
    	  background:url('../images/project_nav2@2x.png') no-repeat;
        background-size:280px 200px;
  	}
    #contact_inner .c_icon {
        background-image:url('../images/contact@2x.png');
    		background-size:49px 110px;
    }
    .cs_info_button {
        background-size:42px 32px;
        background:url('../images/info@2x.png');
    }
    .cs_info_button_close {
        background-size:22px 22px;
        background:url('../images/close@2x.png');
    }
  	#sharebox {
    		background-size:2px 2px;
  	}
  
    #sharebox li span {
        background:url('../images/social@2x.png');
        background-size:40px 85px;
  	}
}

.slidelet_img img {
    width:100%; 
}
  .img_portrait {
      display:block !important;
  }
  .img_landscape {
      display:none !important;
  }

@media screen and (orientation: landscape) {
  #home_container {
      padding:20px 0; 
  }
  #home_wordmark {
 
  }
  #home_logo {

  }  
  .img_portrait {
      display:none !important;
  }
  .img_landscape {
      display:block !important;
  }
  
}

@media screen and (max-width: 320px) // Portait Mode
{
/* CSS RULINGS */
  .img_portrait {
      display:block !important;
  }
  .img_landscape {
      display:none !important;
  }
}

@media screen and (min-width: 321px) // Landscape Mode
{
/* CSS RULINGS */
  .img_portrait {
      display:none !important;
  }
  .img_landscape {
      display:block !important;
  }
}