/*resets dumb default settings in various browser*/
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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

html {height: 500%;}
body {height: 100%;}




@font-face {
    font-family: 'akzidenz-regular';
    src: url('videos_fonts/akzidenzgrotesk-regular-webfont.eot');
    src: url('videos_fonts/akzidenzgrotesk-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('videos_fonts/akzidenzgrotesk-regular-webfont.woff') format('woff'),
         url('videos_fonts/akzidenzgrotesk-regular-webfont.ttf') format('truetype'),
         url('videos_fonts/akzidenzgrotesk-regular-webfont.svg#akzidenz-grotesk_bqregular') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'akzidenz-bold-italic';
    src: url('videos_fonts/akzidenzgrotesk-bolditalic-webfont.eot');
    src: url('videos_fonts/akzidenzgrotesk-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('videos_fonts/akzidenzgrotesk-bolditalic-webfont.woff') format('woff'),
         url('videos_fonts/akzidenzgrotesk-bolditalic-webfont.ttf') format('truetype'),
         url('videos_fonts/akzidenzgrotesk-bolditalic-webfont.svg#akzidenz-grotesk_bqitalic') format('svg');
    font-weight: 300;
    font-style: italic, oblique;
}
@font-face {
    font-family: 'akzidenz-light';
    src: url('videos_fonts/akzidenzgrotesk-light-webfont.eot');
    src: url('videos_fonts/akzidenzgrotesk-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('videos_fonts/akzidenzgrotesk-light-webfont.woff') format('woff'),
         url('videos_fonts/akzidenzgrotesk-light-webfont.ttf') format('truetype'),
         url('videos_fonts/akzidenzgrotesk-light-webfont.svg#akzidenz-grotesk_bq_lightRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'akzidenz-light-italic';
    src: url('videos_fonts/akzidenzgrotesk-lightitalic-webfont.eot');
    src: url('videos_fonts/akzidenzgrotesk-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('videos_fonts/akzidenzgrotesk-lightitalic-webfont.woff') format('woff'),
         url('videos_fonts/akzidenzgrotesk-lightitalic-webfont.ttf') format('truetype'),
         url('videos_fonts/akzidenzgrotesk-lightitalic-webfont.svg#akzidenz-grotesk_bq_lightIt') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'akzidenz-medium';
    src: url('videos_fonts/akzidenzgrotesk-medium-webfont.eot');
    src: url('videos_fonts/akzidenzgrotesk-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('videos_fonts/akzidenzgrotesk-medium-webfont.woff') format('woff'),
         url('videos_fonts/akzidenzgrotesk-medium-webfont.ttf') format('truetype'),
         url('videos_fonts/akzidenzgrotesk-medium-webfont.svg#akzidenz-grotesk_bqmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1{
font-family: 'akzidenz-regular';
font-size: 77px;
color:  #7AAEF9;
letter-spacing: -2px;
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
	
}

h2 {
font-family: 'akzidenz-light';
font-size: 27px;
color: white;
letter-spacing: -1.2px;
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}

h2.black {color: black;}


h3 {
font-family: 'akzidenz-light';
font-size: 24px;
color: black;
margin-top: 1%;
letter-spacing: 0;
line-height: 148%;

}


.caption {font: 16px 'akzidenz-light';  color: gray; margin-top: 8px; float: left;}
.beastscaption {margin-top: 0px;}
.right { margin-right: 20px; float: right; }

h3.contact{
	font-family: 'akzidenz-light-italic';
	font-size: 16px;
	letter-spacing: 1px;
	color: white;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

a:link {color: white; text-decoration: none;}
a:visited {color: white; text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}


h4 {
	font-family: 'akzidenz-regular';
	font-size: 50px;
	letter-spacing: -2px;
	color: #1A191E;
	-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
	
}

h4.more {color: white;}





.regular {font-family: 'akzidenz-regular';}
.bolditalic {font-family: 'akzidenz-bold-italic';}
.light{font-family: 'akzidenz-light';}
.lightitalic  {font-family: 'akzidenz-light-italic'; color: black; background-color: black;
	}
.lightitalic:hover {background-color: #7AAEF9; color: white;
	-webkit-transition:  0s 250ms; -moz-transition:  0s 250ms; -ms-transition:  0s 250ms; -o-transition:  0s 250ms; transition:  0s 250ms;
	cursor: default;
	}
	
.medium {font-family: 'akzidenz-medium';}
.bold {font-family: 'akzidenz-bold';}






#HERO{
	height: 20%;
	 background: url('videos_img/fullframeMCUsmall3.jpg') no-repeat left center ; 
	 -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
	
	/*background-color: #F16365;*/
	overflow: hidden;
	}
	
#buttonWrapper{
	height: 174px;
	width: 125px;
	
	margin: auto;
	position: absolute;
	top: 0; left: 61.8%; bottom: 0; right: 0;
}	


.button {
	height: 33px;

	padding-top: 0%;
	border: solid 2px white;
	margin-bottom: 5px;
		}

.button:hover{
	cursor: pointer;
	border-color: black;
	background-color: black;
	
	-webkit-transition:  0s 150ms; -moz-transition:  0s 150ms; -ms-transition:  0s 150ms; -o-transition:  0s 150ms; transition:  0s 150ms;	
	}

.button:active{
	background-color:transparent; }
 
#aboutTextFrame{
	width: 68px;
	
	-webkit-animation: 	fadeIn 1s 1.6s backwards; animation: fadeIn 1s 1.2s backwards;	
}

#workTextFrame{
	width: 58px;
	
	-webkit-animation: 	fadeIn 1s 1.4s backwards;	animation: fadeIn 1s 1s backwards;	
}	

#contactTextFrame{
	width: 82px;
	
	-webkit-animation: 	fadeIn 1s 1.8s backwards; animation: fadeIn 1s 1.4s backwards;	
}	

@-webkit-keyframes fadeIn {
  from {opacity: 0}
  to   {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0}
  to   {opacity: 1}
}


#ABOUT{
	height: 20%;
	background-color: #7AAEF9 /*#F16365; #0E9C9A*/;
	overflow: hidden;
	position: relative;
	}
	
.bio{
	position: relative;
	width: 65%;
	height: 76%;
	margin-left: 10%;
	top: 10%;
/* 	border: solid 1px black; */
}	

.emTextframe{

	height: 98px;
	width: 460px;
	padding-left: 1px;
	padding-top: 1px;
	margin-left: auto;
	margin-right: -30px;
	margin-bottom: 20px;
	
	background-color: black;
		
}

.bottomButtonWrapper{
	position: absolute;
	width: 100px;
	height: 52px;
	margin-left:auto;
    margin-right:auto;
	left:0;
    right:0;
    bottom: 0px;
	
/* 	border: solid 1px pink; */
	}

.ArrowDown {
    position: absolute;
    border-style: solid;
    border-width: 7px 4px 0 4px;
    width: 0px;
    height: 0px;
    left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	
	
	bottom: 3px;  
    border-color: white transparent transparent;
	
    -webkit-transform:rotate(360deg); /*for weird antialiasing in Safari?*/
    
    line-height: 0px;
	_border-color: #ffffff #000000 #000000 #000000;
	_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); /*for IE6*/
	
}

.ArrowDown.black {
	border-color: black transparent transparent;
	    
    line-height: 0px;
	_border-color: #000000 #000000 #000000 #000000;
	_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); /*for IE6*/
}

	
#workTextFrame2{
	width: 58px;
    margin-right:auto;
    margin-left: auto;
    padding-left: 1px;
	}

	
/*////////////////////////////*/

	
#WORK{
	height: 20%;
	background-color: #1A191E;
	overflow: hidden;	
	text-align: center;
	position: relative;
}

.video
{

    width: 96%;
    max-height: 50%;
    display: inline-block;
    margin-top: 2%;

    position: relative;
    overflow: hidden;

    /*  border: solid 1px aqua; */

}



.video iframe, .video embed, .video object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#BeastCaptionWrapper{
	height: 64px;
	width: 865px;
	margin: 15px 0 0 10%;
	left: 0;
	right: 0;
	
	
/* 	border: solid 1px green; */

}

#beastsTextframeWrapper{
	width: 194px;
	height: 64px;
	padding-right: 15px;
	float: left;
	
/* 	border: solid 1px yellow; */
}


.titleTextframe{

	height: 64px;
	padding-top: 1px;
	margin-left: 0px;
	background-color: gray;
	text-align: left;

}

.beasts{
	width: 194px;
	float: left;

}


.cornerButtonWrapper{
	position: absolute;
	width: 150px;
	height: 52px;
	margin-left:auto;
	left:0;
    right:0;
    bottom: 0;
    
/*     border: solid 1px blue; */
}
#moreTextFrame{
	width: 60px;
	margin-left:auto;
    margin-right:auto;
	left:0;
    right:0;
	text-align: left;
	}


/*////////////////////*/

/*

.Wrapper, #MFtPGTeaserWrapper, #InALandWrapper, #PerfekWrapper, #RouseMeWrapper, #OldskoolWrapper {border: dotted 1px red}
#inalandTextframeWrapper, #perfekTextframeWrapper, #rousemeTextframeWrapper, #oldskoolTextframeWrapper {border: dashed 1px blue}
.iframecenter, .iframeleft, .iframeright, .imgframe {border: solid 1px green}
*/


#MORE{
	height: 20%;
	background-color: white;
	overflow: hidden;
	position: relative;
	
	
/* 	padding-bottom: 50%; */
}

.Wrapper{
	position: absolute;
    top: 50%;
    left: 50%;
	width: 1200px;
	height: 750px;
	margin: -375px 0 0 -600px;
	
	
}

#MFtPGTeaserWrapper{
	width: 600px;
	height: 550px;
	margin: 0 auto;
/* 	background-color: blue; */
}


#InALandWrapper{
	height: 160px;
	width: 475px;
	margin-top: 22px; 
	
}

#OldskoolWrapper{
	height: 160px;
	width: 515px;
	float: right;
	margin-top: -160px;
	margin-right: 50px;
	
}

/*
#PerfekWrapper{
	position: absolute;
	width: 300px;
	height: 260px;
	margin-top: 50px;
	margin-left: 500px;

	
}

#RouseMeWrapper{
	position: absolute;
	width: 313px;
	height: 260px;
	margin: 300px 0 0 183px;
	
}
*/



.iframecenter{
	width: 600px;
	margin: 0 auto;
}

.iframeleft{
	float: left;
	padding: 3px 15px 0 0;

}

/*
.iframeright{
	padding: 3px 0 0 0px;

}
*/

/*
.imgframe{
	width: 313px;
	height: 169px;
	background-image: url('videos_img/Rouse_Me_thumb.jpg');
	background-size: contain;
	background-repeat: no-repeat;
	

	
}
*/

.hoverframe{opacity: 0; -webkit-transition:  250ms; -moz-transition:  250ms; -ms-transition:  250ms; -o-transition:  250ms; transition:  250ms;}
.hoverframe:hover{opacity: .98; cursor: default;}


#mftpgTextframeWrapper{
	width: 650px;
	height: 64px;
	padding-top: 8px;
}

#inalandTextframeWrapper{
	width: 276px;
	float: left;
	
}

#oldskoolTextframeWrapper{
	width: 205px;
	float: left;
}

/*
#perfekTextframeWrapper{
	width: 300px;	
	height: 64px;
	padding: 12px 0 0 0px;
	
}

#rousemeTextframeWrapper{
	width: 247px;
	height: 64px;
	margin-top: 15px;
	padding-left: 40px;	
}
*/


.mftpg{
	width:490px;
	background-color: yellow;
}

.inaland1{
	width:190px;
	margin-bottom: 6px;
		background-color: yellow;

}
.inaland2{
	width: 280px;
		background-color: yellow;

}

.oldskool2{
	width: 200px;
		background-color: yellow;

}


/*
.perfek{
	width: 175px;
	margin-right:  20px;
	float: right;
}

.rouseme {
	width: 226px;
	
}

.comingsoon {
	width: 255px;
	margin-top: 50px;
	float: right;
	margin-right: 36px;
	background-color: red;
}
*/

.button2 {
	height: 33px;

	padding-top: 0%;
	border: solid 2px black;
	margin-bottom: 5px;
		}

.button2:hover{
	cursor: pointer;
	border-color: black;
	background-color: black;
	
	-webkit-transition:  0s 150ms; -moz-transition:  0s 150ms; -ms-transition:  0s 150ms; -o-transition:  0s 150ms; transition:  0s 150ms;	
	}

.button2:hover h2.black{
		color: white;
}	

.button2:active h2.black{
		color: black;
}

.button2:active{
	background-color:transparent; }
	
#contactTextFrame2{
	width: 82px;
	margin-left:auto;
    margin-right:auto;
	left:0;
    right:0;
	text-align: left;
	}


/*///////////////////////*/


#CONTACT{
	height: 20%;
	background-color: #0E9C9A; /* #F16365; */ /* #1E4FC2; */
	overflow: hidden;
	position: relative;
		}
		
		
.centertext{
	width: 100%;
	height: 200px;
	position: absolute;
	
	top: 40%;
	margin-top: -150px;
	
	display: table;
			
}		

#topTextFrame{
	width: 41px;
	margin-left:auto;
    margin-right:auto;
    margin-top: 11px;
    padding-left: 2px;
	left:0;
    right:0;
	text-align: left;
	}

.ArrowUp {
    position: absolute;
    border-style: solid;
    border-width: 0 4px 7px 4px;
    width: 0px;
    height: 0px;
    left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	
	
	bottom: 46px;  
    border-color:  transparent transparent white transparent;
	
    -webkit-transform:rotate(360deg); /*for weird antialiasing in Safari?*/
    
    line-height: 0px;
	_border-color:  #000000 #000000 #ffffff #000000;
	_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); /*for IE6*/
	
}

/*//////////////////////////
//////////////////////////*/

@media only screen /* iPhone 5 portrait */
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {

#HERO{
	 background: url('videos_img/fullframeMCUsmall3.jpg') no-repeat center center ; 
		 -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

	}

h2 {
font-size: calc(27px * 4);
letter-spacing: calc(-1.2px * 4);
}

#buttonWrapper{
	height: calc(174px * 4);
	width: calc(125px * 4);
	
	margin: auto;
	position: absolute;
	top: 50%; left: 50%; bottom: 0; right: 0;
	margin: -522px 0 0 -375px;
}	

.button {
	height: calc(33px * 4);

	padding-top: 0%;
	border: solid calc(2px * 4) white;
	margin-bottom: calc(5px * 4);
		}
.button2:hover{
	border-color: transparent;
	background-color: transparent;
		}

#aboutTextFrame{
	width: calc(68px * 4);
}

#workTextFrame{
	width: calc(58px * 4);
}	

#contactTextFrame{
	width: calc(82px * 4);
}	

h1{
font-size: calc(77px*2);
letter-spacing: calc(-2px*2);
}

h3 {
font-size: calc(24px*1.3);
}

.bio{
	position: relative;
	width: 90%;
	height: 76%;
	margin-left: 5%;
	top: 2%;
}	

.emTextframe{
	height: calc(98px*2);
	width: calc(460px*2);
	padding-left: calc(1px*2);
	padding-top: calc(1px*2);
	margin-right: 0;
	margin-bottom: calc(20px);
	
	background-color: black;
		
}

.bottomButtonWrapper{
	width: calc(100px*4);
	height: calc(52px*4);
	}

.ArrowDown {
    border-width: calc(7px*4) calc(4px*4) 0 calc(4px*4);
    bottom: calc(3px*5);  
}
	
#workTextFrame2{
	width: calc(58px*4);
    padding-left: calc(1px*4);
	}

h4 {
	font-size: calc(50px*3);
	letter-spacing: calc(-2px*3);
}

.caption {font: calc(16px*4) 'akzidenz-light';  color: gray; margin-top: calc(8px*4); float: left; text-align: left;}

.video
{
    width: 99%;
    max-height: 50%;
    display: inline-block;
    margin-top: 5%;
}

#BeastCaptionWrapper{
	height: 30%;
	width: calc(865px);
	margin: 4% 0 0 2%;
	left: 0;
	right: 0;
	
	

}

#beastsTextframeWrapper{
	width: calc(194px*3);
	height: calc(64px*3);
	padding-right: calc(15px*3);
	float: left;
	
}


.titleTextframe{

	height: calc(64px*3);
	padding-top: calc(1px*3);
	margin-left: 0px;
	background-color: gray;
	text-align: left;

}

.beasts{
	width: calc(194px*3);
	float: left;
}

.cornerButtonWrapper{
	position: absolute;
	width: calc(150px*4);
	height: calc(52px*4);
	margin-right:auto;
    margin-left: auto;
    bottom: 0;    
}

#moreTextFrame{
	width: calc(60px*4);
	margin-left:auto;
    margin-right:auto;
	left:0;
    right:0;
	text-align: left;
	}


#MORE{
margin-bottom: 50%;
}

.Wrapper{
	position: absolute;
	margin-left: 0px;
	margin-top: 2%;
    top: 0;
    left: 0;
	width: 100%;
	height: 100%;
	background-color: white;	
}

#MFtPGTeaserWrapper{
	width: 100%;
	height: 30%;
	margin: 0 auto;
}

#InALandWrapper{
	position: relative;
	width: 100%;
	height: 30%;
	margin-top: 0;
}

/*
#PerfekWrapper{
visibility: hidden;

	position: relative;
	width: 100%;
	height: 30%;
	margin-top: 50px;
	margin-left: 0px;	
}

#RouseMeWrapper{

visibility: hidden;
	position: relative;
	width: 100%;
	height: 260px;
	margin: 0 0 0 0;	
}
*/

.iframeleft{
	float:none;
	display: block;
	padding: 0 0 0 0;

}
.iframeright{
	padding: 0px 0 0 0px;
	display: block;

}

/*
.imgframe{
	width: 313px;
	height: 169px;
	background-image: url('videos_img/Rouse_Me_thumb.jpg');
	background-size: contain;
	background-repeat: no-repeat;
	}
*/

#inalandTextframeWrapper{
	width: calc(276px*3);
	float: left;	
}

/*
#perfekTextframeWrapper{
	width: calc(300px*3);	
	height: calc(64px*3);
	padding: 12px 0 0 0px;	
}

#rousemeTextframeWrapper{
	width: calc(247px*3);
	height: calc(64px*3);
	margin-top: 15px;
	padding-left: 40px;	
}
*/



.inaland1{
	width:calc(190px*3);
	margin-bottom: calc(6px*3);
}
.inaland2{
	width: calc(270px*3);
}
/*
.perfek{
	width: calc(175px*3);
	margin-right:  calc(20px*3);
	float: right;
}

.rouseme {
	width: calc(226px*3);
	
}

.comingsoon {
	width: calc(255px*3);
	margin-top: calc(50px*3);
	float: right;
	margin-right: calc(36px*3);
	background-color: red;
}
*/

.button2 {
	height: calc(33px*4);

	padding-top: 0%;
	border: solid calc(2px*4) black;
	margin-bottom: calc(5px*4);
		}

#contactTextFrame2{
	width: calc(82px*4);
	
	}





.centertext{
	width: 100%;
	height: calc(200px*4);
	position: absolute;
	
	top: 50%;
	margin-top: -500px;
	
	display: table;
			
}		

#topTextFrame{
	width: calc(41px*4);
	margin-left:auto;
    margin-right:auto;
    margin-top: calc(11px*4);
    padding-left: calc(2px*4);
	left:0;
    right:0;
	text-align: left;
	}

.ArrowUp {
    position: absolute;
    border-style: solid;
    border-width: 0 calc(4px*4) calc(7px*4) calc(4px*4);
    
    bottom: calc(46px*4);  
    border-color:  transparent transparent white transparent;
	
    -webkit-transform:rotate(360deg); /*for weird antialiasing in Safari?*/
    
    line-height: 0px;
	_border-color:  #000000 #000000 #ffffff #000000;
	_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); /*for IE6*/
	
}

.right { margin-right: 20px; float: right; }

h3.contact{
	font-family: 'akzidenz-light-italic';
	font-size: calc(16px*4);
	letter-spacing: calc(1px*4);
	color: white;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}


}