{

	font-family: Neuzeit S LT Std;

	src: url('neuzeitsltstd-book-webfont.ttf'),

	     url('neuzeitsltstd-book-webfont.eot'); /* IE9 */

}

.figure-logo {
	width: 90%;
	margin-top: 53px;
}

.figure-quote {
	width: 90%;
}

.hide {
  display: none;
}

/*text styles*/



html, body {

	height: 100%;

}



.back-to-top {

	display: none;

}



body, h1, h2, h3, h4, h5, h6, blockquote, p



{

	margin:0;

	padding:0;

	line-height:1.5em;

	color:#333;

}



body



{   

   background:#fff;

   letter-spacing:1px;

   text-align:center;

   font-family:"Neuzeit S LT Std", Arial, Sans-serif; 

   font-size:12px;

   text-align:center;

}



blockquote{
	font-size: 24px;
	padding-top: 50px;
	font-weight: lighter;
	letter-spacing: -1px;
	line-height: 20px;
	
}

/*h1



{

	text-indent:-9999px;	

}

*/



h2 



{

	font-size:2em;

	font-weight:normal;

	color:#222;

}



h3.titles



{

	font-size:2em;

	font-weight:normal;	

	text-align:center;

	margin:16px 0 10px 0;

	padding:15px 0 30px 0;

	clear:both;

}



a:link, a:visited 



{

	 color: #333;

	 text-decoration:none;

	 -webkit-transition: color 200ms ease-in; /*safari and chrome */

	 -o-transition: color 200ms ease-in; /* opera */

}



a:hover 



{ 

	 color: #ccc;

	 text-decoration:none;

}



a:hover 



{ 

	 color: #ccc;

	 text-decoration:none;

}

.social_btn:hover{
	opacity: 0.5;
	
}



p



{

	padding:20px 0 20px 0;

}



/* -------------- !Clearfix -------------- */



.group:before, .group:after 



{

	content:"";

	display:table;

}



.group:after 



{

	clear:both;

}



.group 



{

	zoom:1; /* For IE 6/7 (trigger hasLayout) */

	margin:0 0 10px 0;

}





iframe



{

	width:100%;

	border:0;

}



form



{



	width:300px;

	float:left;

	margin:-17px;



}



/*wrapper and structure*/



#wrapper



{

	margin:0 auto 0 auto;

	width:980px;

	position:relative;

	text-align:left;

	min-height:100%

}



#footer



{

	position:relative;

	width:100%;

	margin-top:-150px;

	background:#f8f8f8;

	height:150px;

	clear:both;

	border-top:1px solid #ccc;

}



.content



{

	float:right;

	width:700px;

	height:100%;

	margin:0 20px 150px 20px;

	text-align:center;

	z-index: 2;

	position: relative;

	right: 0;

	top: 0;

	overflow:auto;

}



section



{

	float:left;

	display:block;

	margin-bottom:100px;

}



.divider



{

	display:block;

	text-align:center;

	padding:0 0 40px 0;

}



/*navigation and logo*/



.logo 



{

	display:block;

	position:relative;

	z-index:999;

	margin: 0 0 84px 22px;

}



#left_column



{

	float:left;

	width:260px;

	height:100%;

	text-align:left;

	position:fixed;

	padding:225px 0 0 0;

	background:#fff;

	opacity:0.9;

	z-index:999;

}





nav



{

    margin-top: 10px;

	padding-left: 20px;

    height: 100%;

    width: 260px;

    z-index: 9;

    text-transform:uppercase;

}



ul



{

	list-style-type:none;

	margin:0;

	padding:0;

	font-size:1.2em;

	line-height:3em;

}



ul a:link, a:visited 



{

	 color: #333;

	 text-decoration:none;

	 -webkit-transition: color 200ms ease-in; /*safari and chrome */

	 -o-transition: color 200ms ease-in; /* opera */

}



ul a:hover 



{ 

	 color: #ccc;

	 text-decoration:none;

}





/*content*/



.opening_statement



{
	display: none;

	margin:100px 0 105px 0;

}

.opening_statement h2 {
	font-size: 40px;
}



.showreel



{

	width:680px;

	margin:45px 10px 0 10px;

}



p.info1



{

	font-size:1.2em;

	margin:20px 60px 80px 60px;

	font-weight:normal;

}



p.info



{

	font-size:1.2em;

	margin:20px 30px 30px 30px;

	font-weight:normal;

}



/*work*/



#video_container



{

	width:100%;

	position:relative;

}

	



.job



{

	position:relative;

	display:inline-block;

	*display: inline;

	*zoom: 1;

	vertical-align: top;

	width:300px;

	min-height:310px;

	margin:40px 6px 0 10px;

	*margin-right: 10px;

	padding:5px 10px 0 10px;

	background:#f8f8f8;

	border-bottom:1px solid #ccc;

}



	.job .hidden

	

	{

		display: none;

	}



	.job h4

	

	{

		margin:10px 0 20px 0;

		font-weight:normal;

		font-size:1.5em;

	} 

	

	.job p

	

	{

		text-align:left;

	}

	

		.job p a:link, a:visited

		

		{

			font-weight:bold;

			color:#333;

		}

		

		.job p a:hover

		

		{

			font-weight:bold;

			color:#666;

		}



/*clients*/



.clients



{

	position:relative;

	float:left;

	width:145px;

	height:90px;

	margin:11px 18px 3px 10px;

	background:#f8f8f8;

}



/*contact page*/



#contact



{

	width:100%;

	float:left;


	border-top:1px solid #000;

}



#contact p



{

	width:300px;

	float:left;

	text-align:left;

	margin:0 0 0 20px;

}



#contact p.lower



{	

	margin-top:190px;

}

#contact input[type=text]{
	margin-left: -34px;
	
}



.map iframe

	

	{

		width:100%;

		height:410px;	

		display:block;

		margin:-150px 0 20px 0;

	}



/*share icons and rollovers*/



.share_icons



{

	float:right;

	text-align:left;

	position:fixed;

	display:block;

	margin:27px 20px 0 1020px;

	height:120px;

	width:23px;

}



		

	.displace {

		position: absolute;

		left: -5000px;

		}



/*rollovers with fade*/



.play_btn



{

	position:absolute;

	left:15px;

	top:191px;

	z-index:999;

}



.social_btn

	

{	

	 padding-bottom:30px;
	 padding-right: 10px;

}

	

	.cf .play {

	  position:relative;

	  height:45px;

	  width:45px;

	  margin:0 auto;

	}

	

	.cf .social img {

	  position:relative;

	  height:20px;

	  width:20px;

	  margin:0 auto;

	}

	

	.cf img {

	  position:absolute;

	  left:0;

	  -webkit-transition: opacity 500ms ease-in-out;

	  -moz-transition: opacity 500ms ease-in-out;

	  -o-transition: opacity 500ms ease-in-out;

	  transition: opacity 500ms ease-in-out;

	}

	

	.cf img.top:hover {

	  opacity:0;

	}









@media only screen and (max-width: 480px) {

	.figure-logo {
		width: 100%;
		margin-left: 5%;
		margin-right: 5%;
	}
	
	.figure-quote {
	width: 100%;
	height:auto;
}


    .share_icons {

        position: static;

        float: none;

        width: 100%;

        text-align: center;

        padding: 20px 0;

		margin: 0 0 -90px;

		clear: both;

    }

	

	.back-to-top {

		display: block;

		position: fixed;

		z-index: 1000;

		right: 0;

		top: 0;

		padding: 5px 10px;

		background: #eee;

		font-size: 1.5em;

		color: #999;

	}



    .video-anchor {

        position: relative;

    }

    #wrapper {

        width: auto;

    }

    

    .social_btn {

        position: relative;

        display: inline-block;

        *display: inline;

        *zoom: 1;

        width: 23px;

        height: 23px;

        padding-bottom: 0;

		margin: 0 2px;

    }



    h1 {

        padding-top: 20px;

    }



    #left_column {

        position: static;

        width: 100%;

        padding-top: 40px;
		float:left;

    }



    #left_column .logo {

        text-align: center;

        margin-bottom: 10px;

		margin-left: 0;

    }



    #left_column nav {

        width: auto;

		padding-left: 0;

    }



    #left_column nav li {

        text-align: center;

    }



    .content {

        width: 100%;

        margin: 0;

        padding-bottom: 0;

        overflow: visible;

        height: auto;
		float:left;

    }
	




    .opening_statement {

        margin: 20px 0 20px;

    }



    .showreel {

        width: 90%;

        margin-left: 5%;

        margin-top: 40px;

    }



    p.info1 {

        margin-bottom: 20px;

    }



    .info2 {

        margin-bottom: 40px;

    }



    #augmented_reality {

        margin-bottom: 35px;

    }



    h2.titles {

        padding-bottom: 0;

        margin-top: 0;

        padding-top: 0;

    }



    p.info {

        padding-top: 10px;

        padding-bottom: 0;

    }



    .group {

        margin-bottom: 0;

    }



    .job {

        margin-left: 5%;

        margin-right: 0;

        padding-right: 2.5%;

        padding-left: 2.5%;

        width: 85%;

        margin-top: 0;

    }
	
	
	



    section {

        margin-bottom: 0;
		width: 100%;

    }



    .play_btn {

        left: 50%;

        top: 50%;

        margin-top: -17px;

        margin-left: -17px;

    }



    #projection_mapping {

		margin-top: 30px;

        margin-bottom: 40px;

    }



    .job img {

        width: 100%;

    }



    #clients img {

        width: 95%;

        margin: 20px 0 20px 5%;

    }



    #contact {

        width: 85%;

        margin-left: 5%;

        padding-left: 2.5%;

        padding-right: 2.5%;

        padding-bottom: 20px;

    }



    #footer {

        width: 85%;

        margin-left: 5%;

        padding-left: 2.5%;

        padding-right: 2.5%;

        background: #f8f8f8;

        padding-bottom: 20px;

        height: auto;

    }



    #footer .map iframe {

        width: 100%;

        margin-top: 20px;

    }



    #contact p {

        width: auto;

        margin: 0;

        padding-bottom: 0;

    }



    #contact form {

        margin: 0;

        width: auto;

    }



    .link-top {

        margin-top: 10px;

    }

}