/* CSS Document */
@font-face
{
font-family: 'paragraph';
src: url('../fonts/NeoSans-Light.otf') format('OpenType');
}
@font-face
{
font-family: 'headings';
src: url('../fonts/CODE-Light.otf') format('OpenType');
}

@font-face
{
font-family: 'headings_light';
src: url('../fonts/CODE-Light.otf') format('OpenType');
}

@font-face
{
font-family: 'headings_medium';
src: url('../fonts/NeoSans-Medium.otf') format('OpenType');
}
@font-face
{
font-family: 'code';
src: url('../fonts/CODE-Light.otf') format('OpenType');
}
@font-face
{
font-family: 'code_bold';
src: url('../fonts/CODE-Bold.otf') format('OpenType');
}

body {margin: 0px; padding: 0px; background: #000;}

/* VIdeo section */
.video-section{ margin:0; padding:0; background:#000; border:0;}
.videoWrapper {position: relative ;padding-bottom:45%; padding-top: 0px; height: 0;   }
.videoWrapper iframe {position: absolute; top: 0; left: 0; 	width: 100%; 	height: 100%;  }
 
.video-agency{ width:800px; margin:0 auto;} 
.video-b{ padding:30px 0;}

img {border:none;} a {border:none;}
#nav {
	 background:none; position:absolute; z-index: 10; width:100%; height:100%;
	 font-family: paragraph; font-size: 20px; color:#fff; 
}
.logo {
	position: absolute; top: 5%; left: 7%;
}
.logo img{
	
}
.menu_icon {display:none;}
.menu {
	 font-family: code; font-size: 20px; color:#fff;
	 position: absolute; top: 4%; right: 15%; padding: 13px 0 7px 0;
}
.menu a{
	 color:#fff; text-decoration: none; margin: 0 10px; letter-spacing: 3px;
}
.social {
	 position: absolute; top: 4%; left: 84%; 
}
.social a{
	 margin-left: 15px;
}

#home_data {width: 100%; height:100%; display:block; color:#FFF; background:#000; position:absolute; z-index: 5; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 0px;
}

.project_link {
	position:absolute; bottom: 10%; right: 2%; z-index: 10; width:340px;
}

.project_link div {float:left;}
.project_link .h2{ text-align: center; width: 200px;
	font-family: paragraph; font-size: 14px; color:#FFF; font-weight: normal; border: 3px solid #FFF; 
	padding: 10px 0px; margin: 0 auto 0 auto; cursor: pointer; line-height: 16px; letter-spacing: 2px;
}

.project_link .h2 a{
	font-family: paragraph; font-size: 12px; font-weight: normal; float:none;  text-align: center; text-decoration: none;
	padding: 1px 20px; margin: 0px; border: none; cursor: pointer; line-height: 18px; letter-spacing: 2px; color:#FFF;
}

.project_link .prev{ 
	border: 3px solid #FFF; border-left: none;  cursor: pointer; margin:0px;
}
.project_link .prev img{ 
	width: 50px; 
}

.project_link .next{ 
	border: 3px solid #FFF; border-left: none; cursor: pointer;margin:0px;
}
.project_link .prev img{ width: 38px; margin: 0 10px 0 10px; }
.project_link .next img{ width: 38px; margin: 0 10px 0 10px; }
@media(max-width:900px){
.menu_icon {display:none;}
.menu {
	 position: absolute; top: 7%; right: 15%; padding: 7px 0 7px 0;
}
.menu a{
	 font-size: 18px; color:#fff; text-decoration: none; margin: 0 10px; letter-spacing: 3px;
}
.social img{
	 height: 34px;
}

.video-agency{ width:90%; margin:0 auto;} 
}

@media(max-width: 700px){
	
#nav {
	 background:none; position:absolute; z-index: 10; width:100%; height:100%;
	 font-family: paragraph; font-size: 20px; color:#fff;
}
.logo {
	position: absolute; top: 3%; left: 2%; z-index:11;
}

.menu_icon {  display:block;
	 position: absolute; top: 4%; right: 3%;   z-index:11;
	 background:url(../images/large-tiles.png) right no-repeat; 
}

.menu_icon2 {  display:block;
	 position: absolute; top: 4%; right: 3%;   z-index:11;
	 background:url(../images/large-tiles-black.png) right no-repeat; 
}


.menu_icon a{
	 font-size: 18px; color:#fff; text-decoration: none; letter-spacing: 3px; display:block; padding: 3px 35px 0px 0; 
}

.menu { display: none; background:#fff;
	 font-family: code; font-size: 20px; color:#000; width: 100%; height: 80%;
	 position: absolute; top: 0; right: 0%; padding: 100px 0 0 0;  z-index:9;
}
.menu a{
	font-size: 30px; font-family: code; 
	 color:#fff; text-decoration: none; margin: 0; letter-spacing: 7px; display: block; text-align: center; line-height: 70px;
}	
.menu a:hover{
	border-top: 1px solid #000; border-bottom: 1px solid #FFF; line-height: 68px;
}

.social {display: none;
	 position:relative; width: 110px; margin: 320px auto 0 auto; z-index:11; left:auto;
}
.social a{
	 position:relative;
}
.social img{
	 height: 34px;
}

.work-hogilicious {display:none;}
.work-vinegar {display:none;}
.work-muga {display:none;}
.work-atom {display:none;}
.work-gamechanger {display:none;}


}

@media(max-width: 500px){
.project_link {
	position:absolute; bottom: 10%; right: 0; left: 0; z-index: 10; margin: 0 auto 0 auto; width: 90%; 
}

.project_link div {float:left;}
.project_link .h2{ text-align: center; width: 65%;
	font-family: paragraph; font-size: 14px; color:#FFF; font-weight: normal; border: 3px solid #FFF; 
	padding: 10px 0px; margin: 0 auto 0 auto; cursor: pointer; line-height: 16px; letter-spacing: 2px;
}

.project_link .h2 a{
	font-family: paragraph; font-size: 14px; font-weight: normal; float:none;  text-align: center; 
	padding: 1px 20px; margin: 0px; border: none; cursor: pointer; line-height: 18px; letter-spacing: 2px;
}

.project_link .prev{ width: 15%;
	border: 3px solid #FFF; border-left: none; cursor: pointer; margin:0px;
}

.project_link .next{ width: 15%;
	border: 3px solid #FFF; border-left: none; cursor: pointer;margin:0px;
}
.project_link .prev img{ width: 38px; margin: 0 20% 0 20%; }
.project_link .next img{ width: 38px; margin: 0 20% 0 20%; }

/* VIdeo section */
 .videoWrapper {position: relative ;padding-bottom:65%; padding-top: 0px; height: 0;   }
 

}

@media(max-width:  400px){
.logo {
	position: absolute; top: 4%; left: 3%;
}
.logo img{
	width: 140px; 
}
.project_link {
	position:absolute; bottom: 10%; right: 0; left: 0; z-index: 10; margin: 0 auto 0 auto; width: 90%; 
}

.project_link div {float:left;}
.project_link .h2{ text-align: center; width: 63%;
	font-family: paragraph; font-size: 14px; color:#FFF; font-weight: normal; border: 3px solid #FFF; 
	padding: 10px 0px; margin: 0 auto 0 auto; cursor: pointer; line-height: 16px; letter-spacing: 2px;
}

.project_link .h2 a{
	font-family: paragraph; font-size: 12px; font-weight: normal; float:none;  text-align: center; 
	padding: 1px 10px; margin: 0px; border: none; cursor: pointer; line-height: 18px; letter-spacing: 2px;
}

.project_link .prev{ width: 15%;
	border: 3px solid #FFF; border-left: none; cursor: pointer; margin:0px;
}

.project_link .next{ width: 15%;
	border: 3px solid #FFF; border-left: none; cursor: pointer;margin:0px;
}
.project_link .prev img{ width: 38px; margin: 0 20% 0 20%; }
.project_link .next img{ width: 38px; margin: 0 20% 0 20%; }
}

@media(max-width:  400px){

.project_link .h2{ text-align: center; width: 60%;
	font-family: paragraph; font-size: 14px; color:#FFF; font-weight: normal; border: 3px solid #FFF; 
	padding: 10px 0px; margin: 0 auto 0 auto; cursor: pointer; line-height: 16px; letter-spacing: 2px;
}
.project_link .h2 a{
	font-family: paragraph; font-size: 12px; font-weight: normal; float:none;  text-align: center; 
	padding: 1px 10px; margin: 0px; border: none; cursor: pointer; line-height: 18px; letter-spacing: 2px;
}
.project_link .prev img{ width: 38px; margin: 0}
.project_link .next img{ width: 38px; margin: 0 }

.work-hogilicious {display:none;}
.work-vinegar {display:none;}
.work-muga {display:none;}
.work-atom {display:none;}
.work-gamechanger {display:none;}

.social {display: none;
	 position:relative; width: 110px; margin: 300px auto 0 auto; z-index:11;
}

/* VIdeo section */
 .videoWrapper {position: relative ;padding-bottom:70%; padding-top: 0px; height: 0;   }
}