@font-face {
font-family: 'regularicons';
src: url('fonts/fa-regular-400.eot?#iefix') format('embedded-opentype'), 
url('fonts/fa-regular-400.ttf')  format('truetype'); 
}


@font-face {
font-family: 'solidicons';
src: url('fonts/fa-solid-900.eot?#iefix') format('embedded-opentype'), 
url('fonts/fa-solid-900.ttf')  format('truetype'); 
}



@font-face {
font-family: 'bold';
src: url('fonts/kabel.eot?#iefix') format('embedded-opentype'), 
url('fonts/kabel.ttf') format('truetype');
text-rendering: optimizeLegibility;
}

@font-face {
font-family: 'black';
src: url('fonts/montserrat-black-webfont.eot?#iefix') format('embedded-opentype'), 
url('fonts/montserrat-black-webfont.ttf') format('truetype');
text-rendering: optimizeLegibility;
}

@font-face {
font-family: 'italic';
src: url('fonts/montserrat-italic-webfont.eot?#iefix') format('embedded-opentype'), 
url('fonts/montserrat-italic-webfont.ttf') format('truetype');
text-rendering: optimizeLegibility;
}

@font-face {
font-family: 'light';
src: url('fonts/montserrat-light-webfont.eot?#iefix') format('embedded-opentype'), 
url('fonts/montserrat-light-webfont.ttf') format('truetype');
text-rendering: optimizeLegibility;
}


@font-face {
font-family: 'normal';
src: url('fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'), 
url('fonts/montserrat-regular-webfont.ttf') format('truetype');
text-rendering: optimizeLegibility;
}



/*Styles RESET****************************************/
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-style: normal;
  text-decoration: none;
  font-weight: normal;
line-height:1em;
box-sizing: border-box;
text-decoration:none;


}





body,html{}

/*Decides the default font style for the whole site*/
body{ font-family:light;}
a{ color:#FF1D59}
a:hover{ color:#000;}
p{line-height:1.3em;
font-size:1em;}
.centered{ text-align:center;
margin-bottom:40px;}
strong{ font-family:bold;}

h1,h2,h3,h4,h5{font-family:bold;}

.invisible{ display:none}



/*// General titles*/

.bigtitle1{ margin:80px auto 10px auto;
font-size:3em;
text-align:center;
padding:20px 0 0 0;
position:relative;
width:90%;
max-width:800px;
z-index:2;
color:#003055;}

.claro{ 
color:#FF1D59;}


.bigtitle1 + p{ font-size:1.2em;
font-family:light;
text-align:center;
max-width:700px;
width:90%;
margin:0 auto 50px auto;
}



.bigtitle2{ margin:80px auto 10px auto;
font-size:2em;
text-align:center;
padding: 0;
position:relative;
width:90%;
max-width:800px;
z-index:2;
color:#003055;}


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

.bigtitle1{ margin:80px auto 10px auto;
font-size:2em;
}



.bigtitle1 + p{ font-size:1.1em;
margin:0 auto 35px auto;
}


}


/*// Close General titles*/





/* // Buttons General styles*/

.button{ background-color:#FF1D59;
color:#fff;
font-family:normal;
border-radius:5px;
padding:15px 21px;
display:inline-block;
cursor:pointer;}

.button:hover{ background-color:#003055;
color:#fff;
 }

/* // Close Buttons General styles*/

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

.button{ 
padding:10px 15px;
font-size:.9em;
}

}




/*Abre header ****************************************************/

header{ position:fixed;
z-index:10;
top:0;
left:0;
width:100%;
padding:15px;}

header.active{ background-color:rgba(255,255,255,.9);
box-shadow:0 1px 5px rgba(0,0,0,.1);
padding:10px;}

header #logo{ position:relative;
display:inline-block;}

header #logo img{ max-width:200px;
transition: all 0.5s ease-in-out;}
header.active #logo img{ max-width:110px;}


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

header #logo img{ max-width:135px;
}


}

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

header #logo img{ max-width:125px;
}


}


/*Cierra header ****************************************************/



/*Abre header nav ****************************************************/

header nav{
	position:absolute;
	top:50%;
	right:25px;
	transform:translate(0,-50%);
	text-align:right;}
	
header nav a{
	color:#fff;
	display:inline-block;
	margin:0 0 0 20px;
	padding:0 0 0 20px;
	position:relative;
	font-family:normal;}
	
	header.active nav a{ color:#FF1D59}
	
header nav a:before{
font-family:solidicons;
content:"\f111";
font-size:4px;
position:absolute;
left:0;
top:50%;
transform:translate(0,-50%);}

header nav a:nth-of-type(2):before,
header nav a:nth-of-type(1):before
{
display:none;}

header.active nav a:nth-of-type(2):before
{
display: inline;}


@media only screen and (max-width:550px) {
	
	header nav{
	right:10px;
	}

header nav a{
	
	margin:0 0 0 4px;
	padding:0 0 0 4px;
	position:relative;
	font-family:normal;
	font-size:.65em;
	text-transform:uppercase;}
	
	nav a.inicio{display:none!important;}
	
	
header nav a:before{
display:none;}

header nav a:first-child:before,
header.active nav a:nth-of-type(2):before{display:none;}

}


/*Cierra header nav ****************************************************/




/*Abre cabezota ****************************************************/

#cabezota{ position:relative;
z-index:1;
}

#blob{ display:block;
width:100%;
position:relative;
z-index:1;}


@media only screen and (max-width:665px) {
	
#cabezota{
	width:100%;
	overflow:hidden;
}

#blob{height:550px;
width:auto;}


}

#tema{ position:absolute;
bottom:0px;
right:15px;
width:50%;
max-width:538px;
z-index:2;}

#cabezota #slogan{
	position:absolute;
	left:40px;
	top:50%;
	transform:translate(0,-50%);
	z-index:3;
	width:50%;
	max-width:650px;
	}
	
	#slogan h1{ font-size:2.8em;
	letter-spacing:.01em;
	line-height:1.1em;
	color:#fff;
	margin-bottom:15px;
	text-shadow:1px 1px 0px rgba(0,0,0,.3);
	font-family:black;}
	
	#slogan h1 em{ 
	color:#ff0255;
	text-shadow:1px 1px 0px rgba(0,0,0,.0)
	}
	
	#slogan p{ font-size:1.5em;
	line-height:1.3em;
	color:#fff;
	font-family:normal;
	text-shadow:1px 1px 0px rgba(0,0,0,.1)}
	
	#slogan p.mini{ font-size:.9em;
	margin-top:20px;}
	
	#slogan .button{ margin-top:30px;}
	
	
	
	
	@media only screen and (max-width:1300px) {

#slogan h1{ font-size:2.4em;

	margin-bottom:10px;
}

#slogan p{ font-size:1em;
	}
}




@media only screen and (max-width:1000px) {
	
	#cabezota #slogan{
	width:70%;
	max-width:650px;
	}
#slogan h1{ font-size:1.5em;
	
}

#slogan p{ font-size:1.1em;

	}
	
	#tema{ 
width:30%;
}
	#slogan p.mini{ font-size:.9em;
	margin-top:10px;}
	
	#slogan .button{ margin-top:10px;}

}

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

#tema{ position:relative;
bottom:auto;
right:auto;
width:85%;
max-width:400px;
margin:0 auto;
z-index:2;
display:block;}

#cabezota #slogan{
	position:absolute;
	left:40px;
	top:100px;
	transform:translate(0,0);
	z-index:3;
	width:80%;
	max-width:700px;
	}


}

/*Cierra cabezota ****************************************************/




/*Special for intro block*/	
	
	#intro #left p, #specialinfo #right p{ 
	font-size:3.1em;
font-family:light;
transform:translate(0,-10px);
color:#003956;
}


	
#intro #right p, #specialinfo #left video{ 
width:100%;}


#intro #right p{font-size:1.5em;
font-family:light;
margin-bottom:25px}
	
#intro #right p:last-child, #specialinfo #left p:last-child{ margin-bottom:0;}
#intro #right h2{
	color:#FF1D59;}


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

#intro{overflow:visible;}



#intro #left p, #specialinfo #right p{ font-size:2em;
}


	
#intro #right p, #specialinfo #left p{ font-family:light;
	
}



}

/*Close Big Ideas ****************************************************/




























/*Open accesos  ****************************************************/

.preaccesos{}

.preaccesos img{ display:block;
width:100%;}


	#accesoscontainer{ background-color:#0750a9;
	position:relative;
	padding:20px 0;
	background-position:center center;
	background-size:100% auto;
	
	
	}
	
	
	#accesoscontainer h1#tituloaccesos{
		margin-top:0;}
		
		
	#accesoscontainer p{
		color:#fff!important;}


.accesos{ margin: 60px auto 0  auto;
width:90%;
max-width:900px;
overflow:hidden;
position:relative;
}

.accesos em{ color:#ff761d}

.accesos .block{ float:left;
width:50%;}

.accesos #left{ padding-right:40px;
overflow:hidden;
position:relative;}

.accesos #left video{ width:100%;
position:relative;
z-index:1;
border-radius:10px;}







.accesos #left:after{
	position:absolute;
	bottom:0;
	left:0;
	background-color:#fff;
	width:100%;
	height:8px;
	z-index:2;
	content:"";
	border-radius:0 10px 10px 0;}
	
	
	
.accesos #left .play{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	color:#fff;
	font-size:90px;
	z-index:3;
	opacity:.6;}


.accesos #left:hover .play{
		opacity:1;}
	
	
	.play:before{
		font-family:solidicons;
		content:"\f144";
		position:absolute;
		left:50%;
		top:50%;
		transform:translate(-50%,-50%);
		}
	

/*autor*/
.accesos h6{ font-size:.8em;
padding-top:20px;
margin-top:20px;
position:relative;
color:#fff;
}

.accesos strong{ font-family:bold;}
	
	
	.accesos h2{ font-size:3.2em;
	line-height:1.1em;
	margin-bottom:25px;}





	
	



.accesos .acceso{ float:left;
width:33.29%;
padding:20px;
border-right:dashed 1px rgba(255,255,255,.3);
text-align:center;}

.accesos .acceso:last-child{ 
border-right:none;
}


.acceso h3{ text-align:center;
font-size:1.35em;
line-height:.9em;
margin-bottom:10px;
color:#00D0D2}

.acceso .mini{ font-size:.9em;
margin-bottom:30px;}

.acceso label{ display:block;
margin-bottom:5px;
text-align:left;
color:#ccc;
}

.acceso select{ display:block;
margin-bottom:15px;
width:100%;
padding:10px;
border:solid 1px rgba(0,51,153,.3);
border-radius:5px;
}

.acceso img{ max-width:90px;
transition:all 0.15s ease-in-out;
padding:5px;
margin:0 auto 25px auto;
display:block;

}



.acceso img:hover{
	padding:0;
	}

	
/*Cierra Accesos ************************************/

	
@media only screen and (max-width:777px) {
	
	.accesos{ margin: 30px auto;
	
}


.accesos .block,
.accesos .acceso{ float:none;
width:100%;}

.accesos  .acceso{ border-right: none;
max-width:400px;
margin: 0 auto;}

.accesos #left{ padding-right:0;
padding-bottom:30px;
text-align:left;}

	.accesos h2{ font-size:2em;
}

.accesos h6:before{
	content:"";
	position:absolute;
	right:auto;
	left:0;
	}
}
/*Cierra Accesos  ******************/























/*Open General Grid System ****************************************************/

.grid{ overflow:hidden;
position:relative;
width:90%;
max-width:1200px;
margin:0 auto;}

.grid .item{ float:left;
display:block;
overflow:hidden;
position:relative;}

.grid4 .item{ width:23.5%;
margin:0 2% 2% 0;}

.grid4 .item:nth-of-type(4n){
	margin-right:0;
	}
	
	
	.grid2 .item{ width:49%;
margin:0 2% 2% 0;}

.grid2 .item:nth-of-type(2n){
	margin-right:0;
	}
	
	
		.grid3 .item{ width:32%;
margin:0 2% 2% 0;}

.grid3 .item:nth-of-type(3n){
	margin-right:0;
	}
	
	
	
	





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

.grid4 .item,
.grid3 .item
{ width:49%;
}

.grid .item:nth-of-type(2n)
{
	margin-right: 0;
	}

.grid4 .item:nth-of-type(4n)
{
	margin-right: inherit;
	}
.grid3 .item:nth-of-type(3){ margin-right:2%;}

}



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

.grid4 .item,
.grid3 .item
{ width:100%;
margin:0 0 25px 0!important;
}

.grid .item:nth-of-type(2n)
{
	margin-right: inherit;
	}

.grid4 .item:nth-of-type(4n)
{
	margin-right: inherit;
	}
.grid3 .item:nth-of-type(3){margin-right: inherit;}

}





/*Close General Grid System  ****************************************************/






/*Abre Icon List ****************************************************/

#iconlist{ }

#iconlist .item{ padding:20px;
text-align:center;
height:310px;
cursor:default;
}

#iconlist .item:nth-of-type(4n){border-right:none;}

#iconlist .item img{ height:150px;
display:inline-block;
margin-bottom:20px;
border-radius:100%;}


#iconlist .item h3{ 
font-size:1.2em;
margin-bottom:15px;
color:#003055;}

#iconlist .item p{
	 font-size:1em;
	 color:#000;
	 font-family:light;
	 max-width:320px;
	 margin:0 auto;
	 	}
	 
	 
	 
	 @media only screen and (max-width:800px) {
#iconlist .item:nth-of-type(2n){border-right:none;}
#iconlist .item:nth-of-type(4n){border-right:inherit;}

#iconlist .item img{ height:100px;
}


}


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

#iconlist .item{ border-right:none;
height:180px;}

#iconlist .item h3{ 
font-size:1em;
margin-bottom:0;
}
}

@media only screen and (max-width:500px) {
	
	#iconlist .item{ padding:15px;
height:auto;

}
	#iconlist .item img{ height:200px;
}
	
#iconlist .item h3{
	font-family:normal; 
font-size:1.2em;
}

#iconlist .item p{
	text-align:center;
	font-size:13px;
	line-height:1.3em;
}


}




/* /// Close Icon List ****************************************************/





/*Abre logos ****************************************************/

#logos .item{ padding:15px;}
#logos .item img{ width:100%;}

/*Cierra logos ****************************************************/






/*Abre Featured list ****************************************************/

#featured{ 
}

#featured .item{
	border-radius:10px;
	background-color:#f9f9f9;}
	
/*Height of the picture window*/
#featured .item .upper{
	overflow:hidden;
	position:relative;
	height:170px;
	z-index:1;
	}
	
	#featured.grid2 .item .upper{
	height:240px;
	z-index:1;
	}
	
		#featured.grid3 .item .upper{
	height:210px;
	z-index:1;
	}
	
	#featured .item .upper img{position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display:block;
width:140%;
z-index:1;
transition:all 0.3s linear;
}

	#featured .item:hover .upper img{
width:150%;

}

#featured .item .upper:before{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	content:"";
	background-color:rgba(6,45,102,0.3);
	z-index:2;}

	
	
		/*date on picture*/
	.item .upper .date{
		position:absolute;
		bottom:10px;
		right:10px;
		height:40px;
		width:40px;
		border-radius:5px;
		padding:5px;
		text-align:center;
		color:#999;
		background-color:#fff;
		z-index:2;
		}
		
		.item .upper .date p:first-child{ font-family:bold;
		font-size:1.4em;
		line-height:.8em;}
		
		.item .upper .date p:last-child{ font-family:normal;
		font-size:.9em;}
		
		
		
		
		
		#featured .item .lower{
		position:relative;
		padding:20px;
		z-index:2;}
		
		#featured .item .lower .info{
			overflow:hidden;
			height:150px;
			margin-bottom:25px;}
		
	#featured .item .lower .info h3 {
				font-size:1.1em;
		margin-bottom:15px;
		color:#003956;
		}
		
		.grid3 .item .lower .info h3 {
				font-size:1.3em;
		
		}
		
		#featured .item .lower .info p{ font-family:light;
		font-size:.9em;
		line-height:1.25em;
		color:#151515;}
		
		#featured.grid2 .item .lower .info p{ 
		font-size:1.2em;
		}
		

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


#featured .item .lower .info h3 {
				font-size:1em;
		
		}
		
		.grid3 .item .lower .info h3 {
				font-size:1.1em;
		
		}
		
		#featured .item .lower .info p{ 
		font-size:.8em;
		}
		
		#featured.grid2 .item .lower .info p{ 
		font-size:1em;
		}

}


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

#featured .item .lower .info h3 {
				font-size:1em;
		
		}
		
		.grid3 .item .lower .info h3 {
				font-size:1em;
		
		}
		
		#featured .item .lower .info p{ 
		display:none;
		}
		
		#featured.grid2 .item .lower .info p{ 
		font-size:1em;
		}


}



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


#featured .item .upper{
	overflow:hidden;
	position:relative;
	height:240px;
	z-index:1;
	}
	
	#featured.grid2 .item .upper{
	height:240px;
	z-index:1;
	}
	
		#featured.grid3 .item .upper{
	height:240px;
	z-index:1;
	}
	
	
	#featured .item .upper img{
width:170%;


}

	#featured .item:hover .upper img{
width:180%;

}
	
#featured .item .lower .info{
height:80px;
}
}

/* /// Close Featured list ****************************************************/





















/*Abre footer ****************************************************/
#prefooter{ display:block;
width:100%;
margin-top:70px;}


footer {
	overflow:hidden;
	position:relative;
	background-color:#003956;
	min-height:500px;
	color:#f2f2f2;
	}
	
	/*Little red line in footer*/
	footer:before{
		content:"";
		position:absolute;
		top:0;
		left:30px;
		width:4px;
		height:150px;
		background-color:#ff761d;
		border-radius:0 0 4px 4px;}



footer .block{ float:left;
width:25%;
padding:40px 60px;
border-right:dotted 1px rgba(153,153,153,.4);}

footer .block:last-child{ border-right:none;
}

footer h3{ 
font-size:1.5em;
margin-bottom:25px;
color:#ff761d;}

footer p{ font-family:light;
margin-bottom:25px;
font-size:.9em;
}

footer #rrss{}


footer .block .item{ display:block;
margin-bottom:20px;
color:#fff;
font-family:light;
position:relative;
font-size:.9em;
letter-spacing:1px;
padding-left:25px;}

footer .block .item:hover{ 
color:#2DB2E6;
}

footer .block .item:last-child{
	margin-bottom:0;}

footer .block .item:before{position:absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
font-family:solidicons;
content:"\f111";
font-size:.5em;

}

#logofooter{ margin:60px auto 30px 0;
max-width: 200px;}







#rrss{ margin-top:50px;}

#rrss a{ display:inline-block;
width:40px;
margin:0 15px 15px 0;
}

#rrss a img{ display:block;
width:100%;}





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

footer .block{ float:none;
width:90%;
padding:40px;
margin:0 auto;
border-right:none;
border-bottom:dotted 1px rgba(153,153,153,.4);}


}

/* /// Close footer ****************************************************/









/*Abre nfooter ****************************************************/

#nfootercontainer{
	
	padding:80px 25px 25px 25px;
	
}

#nfooter{
	overflow: hidden;
	max-width:1000px;
	margin:0 auto
}
	
	#nfooter img{ max-width:200px;}
#nfooter .block{ width:50%}	
	#nfooter #one{ float:left;}
	#nfooter #two{ float:right;
	text-align:right}
	
	#nfooter h3{ color:#003956;
	position:relative;
	margin-bottom:40px;}
	
#nfooter h3:after{
	position:absolute;
	height:5px;
	border-radius:5px;
	width:50px;
	bottom:-20px;
	left:0;
	content:"";
	background-color:#00D0D2;}	
	
	#nfooter #two h3:after{left:auto;
	right:0;}
	
	
#nfooter #two a{
	display:inline-block;
	vertical-align: top;
	height:30px;
	margin-left:20px;
	overflow:hidden;
	}
	
	#nfooter #two a img{ height:100%;}
	
	@media only screen and (max-width:600px) {

#nfooter .block{ float:none!important;
width:90%;
margin:0 auto 20px auto;
border-right:none;
border-bottom:dotted 1px rgba(153,153,153,.2);
text-align:center!important}

#nfooter a{ display:block;}
#nfooter #two{ padding-top:20px;}

#nfooter h3{ 
	margin-bottom:20px;}
#nfooter h3:after{
display:none;	
	}	


}

/*Cierra xxx ****************************************************/





/*videote **********/
#videote{ max-width:900px;
margin:50px auto;
width:90%;}





/*VideoWrapper ************************************/
.videowrapper {
	position: relative;
	overflow:hidden;
	border-radius:10px;

	
}

.videowrapper #sq{
	position:relative;
	z-index:1;
	width:100%;
	display:block;}


.videowrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius:10px;
}





#colors img{
	display:block;
	width:90%;
	margin:0 auto;}