/* CSS RESET*/
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}



body, html {
	width:100%;
	height:auto;
	margin:0;
	padding:0;
	}

body {
	font-size:1em;
	background: rgb(248,245,238);
	padding-bottom: 3em;
	color: rgb(40,40,40);
	}
	
::selection {
	background: rgb(251,185,0);
	}
	
a { 
	color: inherit;
	border-bottom:1px dotted;
	text-decoration:none;
	transition: all 0.3s ease;
	}

a.dark {
	color:rgb(40,40,40);
	}

a.email:hover {
	color:rgb(221,75,57);
	}

a.imdb:hover {
	color:rgb(246,198,26);
	}

a.instagram:hover {
	color:rgb(211,49,132);
	}

a.youtube:hover {
	color:rgb(255,0,0);
	}

a.linked-in:hover {
	color:rgb(0,123, 182);
	}

h1, h2, h3, h4 {
	font-family:"brandon-grotesque", futura, sans-serif;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:0.14em;
	}
	
h2 {
	font-size:1.4em;
	}

h3 {
	font-size:1.09em;
	line-height: 1.2;
	}
	
h4 {
	font-size:0.6em;
	line-height:1.2em;
	}

p, ol, ul, li  {
	font-family:"brandon-grotesque", futura, sans-serif;
	line-height:140%;
	margin: 1em auto;
	}

p, ol, ul {
	font-size:1.6em;
	}
	
.no-wrap {
	white-space:nowrap;
	}
	
.header {
	width: 90%;
	margin: 0 auto;
	}
	
.content {
	width: 90%;
	margin: 0 auto;
	}

.column-01, .column-02{
	width:60%;
	margin: 0 2em 0 0;	
	}

.expandable {
	cursor: pointer;
	}
	
.expandable:hover {
	opacity:1;
	transition: all 0.3s ease;
	}
	
.line-break {
	width:90%;
	height:2px;
	margin: 0 auto;
	margin-bottom: 0.1em;
	background: rgb(180,180,180);
	}
	
.small {
	font-size: 80%;
	}
	
#lang {
	position: absolute;
	left: 5%;
	padding: 0.7em 0;
	font-size: 0.92em;
	letter-spacing: 0.1em;
	transition: all 0.3s ease;
	color: rgb(248,245,238);
	}
	
#lang ul, #lang li {
	margin: 0;
	padding: 0;
	}
	
#lang li {
	display: inline-block;
	margin: 0.5em;
	font-size: 0.6em;
	text-transform: uppercase;
	font-weight: 800;
	}
	
#lang li.current {
	border-bottom: 2px solid;
	}
	
#lang a {
	border: 0;
	position: relative;
	}
	
#lang a:hover {
	border-bottom: 2px solid rgb(251,185,0);
	}		
	
#introduction {
	width: 100%;
	background: url(../img/federico-louhau_portrait.jpg) no-repeat top right; 
	background-position: 20% 20%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	
	padding: 9em 0 8em 0; 
	}

/* -----------------------------
@media only screen and (-webkit-device-pixel-ratio: 2){
	#introduction {
		background: url(../img/portrait-2x.jpg) no-repeat top right; 
		}
	}
----------------------------- */

#logo {
	position: relative;
	left: 3.5%;
	width: 95%;
	color: #F8F5EE;
	color: rgb (248, 245, 238);
	}
	
#microphone {
	height: 9em;
	width: 5.37em;
	position: relative;
	left: 0;
	padding-right: 1.5%;
	text-align: right;
	}
	
#microphone img {
	height: 100%;
	}
	
#microphone, #logo-type {
	display: inline-block;
	vertical-align: top;
	}
	
#logo-type {
	position: relative;
	top: 0.3em;
	}

#federico-louhau {
	position: relative;
	}

#logo h1 {
	font-size: 4.42em;
	line-height: 1.1em;
	letter-spacing: 0.16em;
	}
	
.louhau_l {
	letter-spacing: 0.09em;
	}
	
.louhau_o {
	letter-spacing: 0.1em;
	}

.louhau_a {
	letter-spacing: 0.1em;
	}
	
#subtitle {
	position: relative;
	left: 0;
	top: 0.7em;
	}

#subtitle h3 {
	margin-left: 0.5em;
	font-size: 0.94em;
	line-height: 1.4em;
	}
			
#about-federico, #video, #audio, #client-list, #studio, #rates, #contact {
	padding: 1.4em 0;
	overflow: hidden;
	}

#contact {
	overflow: auto;
	}
	
#about-federico {
	padding-top: 2.6em;
	}
	
#video-1, #video-2, #video-3 {
	width: 100%;
	max-width: 600px;
	display: block;
	margin: 2em auto 3em 0;
	}
	
#video h3 {
	opacity:0.6;
	}
	
iframe {
	margin: 1em auto;
	}
	
audio, .video-wrapper {
	margin: 0.5em 0;
	}

.audio-subcategory {
	margin: 2.5em auto 0 auto;
	width: 100%;
	display: inline-block;
	vertical-align: top;
	}
	
.audio-subcategory h2 {
	vertical-align: top;
	font-size: 1.4em;
	opacity: 0.6;
	margin-bottom: 1em;
	}
	
.demo {
	position: relative;
	display: block;
	margin-bottom: 1.2em;
	}
	
a.download {
	display: inline-block;
	border: 0;
	transition: all 0.3s ease;
	margin: 0;
	padding: 0;
	vertical-align: middle;
	font-size: 1.4em;
	position: relative;
	}
	
a.download p {
	display: inline-block;
	font-size: 0.8em;
	vertical-align: baseline;
	position: relative;
	margin: 0;
	padding: 0;
	}
	
a.download img{
	width: 0.8em;
	margin-right: 0.3em;
	display: inline-block;
	vertical-align: baseline;
	margin-bottom: -0.08em;
	}
	
a.download:hover {
	opacity: 0.6;
	}

#logo-grid {
	text-align: left;
	}

#logo-grid img {
	display: inline-block;
	width: 5.8em;
	margin: 0 auto;
	}

#studio h4 {
	opacity:0.4;
	}

#studio-sample {
	font-size: 62.5%;
	}

#contact ul li {
	height:2em;
	margin: 1.2em 0;
	transition: all 0.3s ease;
	}
	
#contact ul li a {
	text-decoration: none;
	border: 0;
	}

#contact ul li#phone, #contact ul li#email {
	display: block;
	margin-right:0.8em;
	}
	
.baseline-shift {
	position:relative;
	top:0.1em;
	}
	
#contact ul li#instagram, #contact ul li#youtube, #contact ul li#linked-in, #contact ul li#imdb{
	display: inline-block;
	margin-top:0;
	}

.icon {
	display:inline-block;
	background: rgb(40,40,40);
	margin:0 0.3em 0 0;
	vertical-align:middle;
	border-radius:1em;
	transition: all 0.3s ease;
	}
	
.icon img {
	width: 2em;
	}

/* #phone:hover {
	color: rgb(51,204,0);
	} */

/* #phone .icon:hover {
	background: rgb(51,204,0);
	} */

#email:hover {
	color: rgb(217,62,45);
	}

#email .icon:hover {
	background: rgb(217,62,45);
	}

#instagram .icon:hover {
	background: rgb(211,49,132);
	}

#imdb .icon:hover {
	background: rgb(246,198,26);
	}
	
#youtube .icon:hover {
	background: rgb(255,0,0);
	}
	
#youtube:hover {
	color: rgb(255,0,0);
	}
	
#twitter .icon:hover {
	background: rgb(64,153,255);
	}

#linked-in:hover {
	color: rgb(72,117,180);
	}

#linked-in .icon:hover {
	background: rgb(72,117,180);
	}
	
	
	
	
	
	

	
	
	



	
/* MEDIA QUERIES */

/* Screens below 1000px */	
@media screen and (max-width: 1000px){
	#latin-american-spanish {
		border-bottom: 1px solid rgb(180, 180, 180);
		}
	#intl-english {
		border-bottom: 1px solid rgb(180, 180, 180);
		}
	#argentinian-spanish {
		border-bottom: 1px solid rgb(180, 180, 180);
		}
	.download {
		width: 0;
		height: 0;
		opacity: 0;
		display: none;
		visibility: hidden;
		overflow: hidden;
		}
	}

/* Screens below 800px */	
@media screen and (max-width: 800px){
	#lang {
		left: 6.5%;
		margin-left: 3.222em;
		}
	#logo {
		font-size: 0.6em;
		}
	#subtitle {
		max-width: 30em;
		}
	#subtitle h3 {
		font-size: 1.68em;
		margin-left: 0.2em;
		}
	#email-adjust {
		font-size: 80%;
		}
	.column-01, .column-02, .column-03{
		width: 80%;
		}
	}	

/* Screens below 600px */	
@media screen and (max-width: 600px){
	#lang {
		width: 90%;
		left: 0;
		margin-left: 0;
		padding: 0.2em 5%;
		background: rgb(40,40,40);
		color: rgb(248,245,238);
    	-webkit-box-shadow:inset 0px -6px 20px -10px #000;
    	-moz-box-shadow:inset 0px -6px 20px -10px #000;
	    box-shadow:inset 0px -6px 20px -10px #000;
		}		
	#introduction {
		background: url(../img/bricks.jpg) no-repeat; 
		background-position: 50% 50%;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;	
		font-size: 85%;
		padding: 8em 0 5em 0; 
		}
	#microphone {
		height: 8em;
		}
	#subtitle {
		max-width: 26em;
		}
	.audio-subcategory {
		margin: 2em auto 0.2em auto;
		padding-bottom: 1.4em;
		}
	#about-federico p, #about-federico ul, #about-federico li, #studio p, #studio ul, #studio li, #rates p, #rates ul, #rates li {
		font-size: 1.2em;
		}
	.column-01, .column-02, .column-03{
		width: 100%;
		}
	}
	

	
/* —————————————————————————————————————————————————————————————————————————— */


/* Screens above 800px */	
@media screen and (min-width: 800px){
	h2 {
		font-size: 2em;
		}
	#lang {
		left: 6.5%;
		margin-left: 5.37em;
		}
	#video-1, #video-2, #video-3 {
		display: inline-block;
		width: 26.5%;
		max-width: 780px;
		}		
	#video-1 {
		margin-right: 0;
		padding-right: 4.5%;
		padding-bottom: 1.2em;
		margin-bottom: -1.2em;
		border-right: 1px solid rgb(180, 180, 180);
		}
	#video-2 {
		margin-left: 0;
		padding-left: 4%;
		padding-right: 4%;
		}
	#video-3 {
		margin-left: 0;
		padding-left: 4.5%;
		padding-bottom: 1.2em;
		margin-bottom: -1.2em;
		border-left: 1px solid rgb(180, 180, 180);
		}
	.column-01, .column-02, .column-03 {
		width: 45%;
		display: inline-block;
		vertical-align: top;
		}
	.demo {
		margin-bottom: 0.6em;
		}
	#logo-grid {
		text-align: left;
		}
	#logo-grid img {
		width: 10em;
		}
	#contact ul li#phone, #contact ul li#email {
		display: inline-block;
		}
	}
	
	
	
/* Screens above 1000px */	
@media screen and (min-width: 1000px){
	.audio-subcategory {
		margin: 2em auto;
		width: 27.3%;
		display: inline-block;
		vertical-align: top;
		}
	.audio-subcategory h2 {
		min-height: 2em;
		}
	#latin-american-spanish {
		padding-right: 4%;
		border-right: 1px solid rgb(180, 180, 180);
		}
	#argentinian-spanish {
		padding-right: 4%;
		padding-left: 3.5%;
		border-right: 1px solid rgb(180, 180, 180);
		}
	#english {
		padding-left: 3.5%;
		}
	.demo {
		min-height: 9em;
		vertical-align: bottom;
		position: relative;
		margin-bottom: 0;
		}
	}	



/* Screens above 1200px */	
@media screen and (min-width: 1200px){
	#introduction {
		background-position: 100% 26%;
		}
	#lang {
		left: 14%;
		margin-left: -0.1em;
		}
	#logo {
		left: 0;
		}
	#microphone {
		width: 12.5%;
		}
	#subtitle h3 {
		font-size: 0.92em;
		}
	.header, .content, .line-break {
		width: auto;
		margin: 0 14%;
		}
	.expandable:hover {
		opacity:0.6;
		}
	#about-federico, #video, #audio, #client-list, #studio, #rates, #contact {
		padding: 2em 0;
		}
	#about-federico {
		padding-top: 4em;
		}
	#logo-grid img {
		width: 12em;
		}
	}
	

@media only screen and (-webkit-device-pixel-ratio: 2) and (min-width: 600px){
	#logo-grid img {
		width: 8.2em;
		}
	}