html { height: 100%; }

body, div, img, ul, li {
	margin:   0;
	padding:  0;
}

body {
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans;
    font-size: 14px;	
	height: 100%;
}

a {
	color: #FFFFFF;
	text-decoration: none;
	opacity: 1;
	/*-webkit-transition: opacity 0.35s ease-out; */
}


#logo {
		margin: 10px 0 0 4px;
		font-size:15px;
		position:relative;
}	
		

.nav-stripe span { font-size:38px; top:-10px; }

.portrait #nav-stripe-0  { width:17.5%; }


.see-more,
ul.pager li a,
.scroll li a { background-image:url(/sites/all/themes/nt_desktop/img/main_sprite_mobile.png);  }


h1 { width:58px; height:58px; }

/* ===============================   fan   ================================== */

.fan-plane {
	list-style-type: none;
	width: 270px;
	height: 160px;	
	font-size:11px;
	overflow: hidden;
	padding: 14px 12px;
	color:#FFF;
	line-height:1.1;
	-webkit-border-radius:8px;
	   -moz-border-radius:8px;
		-ms-border-radius:8px;
		 -o-border-radius:8px;
			border-radius:8px;
}


#fan-holder .fan-plane h2 { padding:0; font-size:23px; margin-bottom:5px; padding-left:25px; }
.fan-plane h3 { font-size:13px; }
.fan-plane h3,
.fan-plane p { padding-bottom:10px; }
#fan-0 h2 { margin-bottom:0px }
#fan-0 p { padding-bottom:7px; padding-left:15px; font-size:11px; background:url(/sites/all/themes/nt_desktop/img/tweets_bullet_mobile.png) left 2px no-repeat; }
#fan-3 p { padding-bottom:0; }

.fan-plane h2 span { background-image:url(/sites/all/themes/nt_desktop/img/icons_sprite_smart.png); width:20px; height:20px; }
#fan-1 span { background-position:0 -27px;  }
#fan-2 span { background-position:0 -53px;  }
#fan-3 span { background-position:0 -107px; }				
#fan-4 span { background-position:0 -80px;  }

#fan-3 img  { display:block; margin:16px 0px; }
#fan-4 a img { display:block; padding-left:0; padding-top:0px; }
#fan-1 ul { margin-left:15px; }

#fan-2 img { position:relative; top:4px; margin-top:4px; }
#fan-2 p { padding-right: 14px; }
#fan-2 p span { display:block; width:75%; padding-left:22%; font-weight:bold; position:relative; top:-21px;  }
#fan-4 img { position:relative; top:8px; }
#fan-1 p { padding:15px 0 0 15px;  }
#fan-1 p span { display:block; width:70%; padding-left:17%; font-weight:bold; position:relative; top:-30px;  }


#news-items .news-item a { position:relative; margin:-5px; padding:5px; text-decoration:underline; }

#error h3 { font-size:30px; }

.error-logo #logo { width:58px; height:58px } /* Need to revisit this later */

/* ===============================   nav   ================================== */
#map-img { left: -79px; top: -262px; }

#menu-open-btn { font-size:14px; height:20px; bottom:-27px; }
#menu-open-btn span { font-size:14px; }

#menu-info ul li { padding-bottom:10px; list-style:none; }
#menu-info .menu-info-inner { font-size:13px; }
#menu-info .menu-info-inner { position:absolute; bottom:6px; left:15px; width:100%; }
#menu-info .menu-info-inner img { width:18px; height:18px; top:5px; }

.landscape #menu-info ul li { padding-bottom:3px; }
.landscape .nav-stripe span { font-size:23px;  top:0px;  }

.landscape .image-holder img { width:50%; }
.landscape .image-holder div { margin-top:-135px; }	

.landscape #main-copy h3 { margin-top:15px; }

/* ===============================   title   ================================== */

#pid-experience .page h2,
#pid-news .page h2  { display:none; }


/* ===============================   styles   ================================== */

ul.pager { padding-left:7px; }
ul.pager li { margin-right:5px; }
ul.pager li a { width:14px; height:13px; margin-right:0; text-indent:-9999999px; overflow:hidden; background-position:right -84px; }
#page-holder { height:100%; }

.scroll li a { height:65px; width:32px; display:block; text-indent:-999999px; overflow:hidden; }
.scroll li.next a     { background-position:right -166px; }
.scroll li.previous a { background-position:left -166px; }
.scroll li.next { right:0px; }
.scroll li.previous { left:0px;  }

/* ===============================   clients   ================================== */

#pid-clients-universal .text-holder { background-color:#ff6000; }
#pid-clients-hachette .text-holder { background-color:#FF9500; } 
#pid-clients-travelex .text-holder { background-color:#C4D000 }
#pid-clients-espn .text-holder { background-color:#0EA5B4; }
/*pid-clients-panasonic*/
#pid-clients-ligabbva .text-holder { background-color:#FF6000 }
#pid-clients-mcfly .text-holder { background-color:#FF9500; } 
#pid-clients-vauxhall .text-holder { background-color: #C4D000 }
#pid-clients-one-young-world .text-holder { background-color:#0EA5B4 }

/* ===============================   no js version   ================================== */
 

.no-js #logo { padding:5px 0 0 0; left:0; margin:0 0 0 4px; }  
.no-js #menu-info  { display:block; top:auto; position:relative; background:#000; width:100%; margin-bottom:0 }
.no-js #menu-info .menu-info-inner { width:auto; padding:0 20px 0 20px; }
.no-js #menu-info div { width:auto; }
.no-js #fan-holder { position:relative; }
.no-js #nav { width:100%; position:relative; }
.no-js .fan-plane { overflow:visible; margin-bottom:10px; width:88%; min-height:185px; height:auto !important; height:185px; }
.no-js #menu-info p { top:auto; }

.no-js #menu-open-btn { display:none; }

.no-js .nav-stripe { float:none; width:100%; padding:10px 0 }
.no-js #nav .nav-stripe span { font-size:23px; text-align:left; padding:0 20px; }

.no-js #pid-news .page h2,
.no-js #pid-experience .page h2,
.no-js #nav,
.no-js #nav .first-child { 
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;  }
	
.no-js #news-tweets-nav { margin:0; width:100%; left:0; position:relative; bottom:auto; }
.no-js #news-tweets-nav ul li { float:none; width:100%;  }
.no-js #news-tweets-nav li a,
.no-js #news-tweets-nav li a.tweets,
.no-js #news-tweets-nav li.active a { background-image:none; background-color:transparent; color:#8d8d8d; padding:10px 0; font-weight:bold; position:relative; width:auto; height:auto;  }
.no-js #news-tweets-nav li a span { font-size:15px; color:#8d8d8d; padding: 0 20px; overflow:visible; text-indent:0; }
	
.no-js #news-tweets-nav li.active { background:#FD5900 }

.no-js #news-tweets-nav li a { /* dummy style */
	background-color:#dedede;
	-webkit-border-radius: 0;
	-moz-border-radius:0;
	-ms-border-radius:0;
	-o-border-radius:0;
	border-radius:0;
	display:block;
	position:relative;
	bottom:auto;
	font-size:25px; 
}	


.no-js #news-tweets-nav li a.news span { position:relative; top:auto; left:auto; display:block; color:#999; }
.no-js #news-tweets-nav li.active a.news span { top:auto; }
.no-js #news-items { width:auto; margin:0; }
.no-js #news-items .news-item { overflow:visible; margin:0 auto 10px auto;  width:95%; min-height:150px; height:auto !important; height:150px; }
 
.no-js #pid-news .page h2 { color:#FFF; font-size:23px; font-weight:bold; display:block; text-transform:lowercase; padding:12px 20px;  margin-bottom: 20px; background:#FD5900;  }
.no-js #main-copy h3 { margin-top:20px; }
.no-js #customers #main-copy h3, 
.no-js #thinking h3,
.no-js #production #main-copy h3 { margin-top:0; }


.no-js #heads li { font-size:64px; }
.no-js .image-holder { top:auto; padding-bottom:30px; }

.no-js .strategy-content,
.no-js #statement { position:relative; }
.no-js #statement { font-size:15px;  } 
.no-js #projects li { width:70%; display:table; }

.no-js #projects li div { display:table-cell; margin:0 auto; text-align:center; vertical-align:middle; }
.no-js #projects li div.wip { display:none; }

.no-js .imgs-content { width:100% }
.no-js .imgs-content-page { float:none; width:90%; margin:0 auto; }
.no-js #imgs-pager { display:none; }
.no-js .text-holder { overflow:visible; height:100%; position:relative; top:auto; }
.no-js .text-content { position:relative; } 
.no-js .imgs-content-page img { width:95%; height:auto; }
.no-js .work-close-btn { right:0; margin:0; top:0; }

.no-js #projects li img { width:40% }

.no-js .page h2 { display:block !important; padding:10px 0; color:#fff; font-family:'NT GOTHIC BOLD', Arial, Helvetica, sans; font-weight:bold; padding-left:20px; font-size: 23px; margin-bottom:20px; }

.no-js ul.pager { width:auto; padding-left:0; }
.no-js #page-holder { height:auto; }

.no-js #contact-info { top:auto; }
.no-js #contact #geo { display:none; }
.no-js #contact-info div.map { padding-left:0; }

.no-js #awards-content { position:relative; position:relative; top:-30px; }



/*
	6  = 375px
	6+ = 414px

	aspect 1.6875
	320 x 190
	330 x 196
	340 x 200

*/
@media only screen and (min-width: 370px) {

	.fan-plane {
		width:  320px;
		height: 195px;

		font-size:   11px;
		line-height: 16px;
	}
	#fan-0 p{
		font-size:   11px;
		line-height: 16px;
	}
	#fan-2 p{
		padding-right:10px;
	}
	#fan-2 img{
		margin-top:20px;
	}
	#fan-3 img{
		margin-top:22px;
	}

}
/*@media only screen and (min-width: 410px) {
	.fan-plane {
		width:  340px;
		height: 200px;
	}
}*/