/* ==========================================================================
   Author's custom styles
   ========================================================================== */

*{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on October 20, 2017 */
@font-face {
    font-family: 'coolveticaregular';
    src: url('../fonts/coolvetica_rg-webfont.woff2') format('woff2'),
         url('../fonts/coolvetica_rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body{
	overflow-x: hidden;
}
section{
	padding: 100px 0px;
}

h1, h2, h3, h4{
	font-family: 'coolveticaregular', sans-serif;
}
h2{
	font-size: 50px;
	color: #e86d1f;	
	margin-bottom: 60px;
}
h2:after{
	content: "";
	display: block;
	width: 100px;
	background: #00235D;
	height: 5px;
	margin: 0 auto;
	margin-top: 10px;
}
a:hover, a:focus{
	text-decoration: none !important;
	opacity: 0.8;
	transition: all 0.5s;
}
header{
	position: fixed;
	width: 100%;
	background: #fff;
	box-shadow: 1px 3px 20px;
	z-index: 9;
	overflow-x: hidden;
}
header img{
	height: 90px;
}
main{
	padding-top: 90px;	
}
nav ul li a{
	display: block;
	padding: 30px 30px;
	text-transform: uppercase;
	color: #00235D;
	font-weight: bold;
	text-decoration: none !important; 
}
nav ul li a:hover{
	color: #e86d1f;
}
footer{
	border-top: solid thin;	
	overflow-x: hidden;
}
footer img{
	height: 90px;
}
.nopadding{
	padding: 0px;
}
.email{
	font-size: 20px;
	color: #e86d1f;
}
.newsletter{
	display: inline-block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 10px 20px;
	color: #e86d1f;
	border: solid ;
	margin-top: 30px;
}
.social li a{
	display: inline-block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 10px 20px;
	color: #e86d1f;
	border: solid;
	display: none;
}
/* INICIO =====================================*/
#inicio{
	padding: 0px;
}
.flex{
	margin: 0px;
	padding: 0px;
	display: flex;
	flex-flow: row wrap;	
}
.flex li{
	list-style-type: none;
	height: 90vh;			
	position: relative;
	text-align: center;
	flex-basis: 33.333%;
}
.uno, .dos, .tres{
	transition: all 1s;
}
.uno{
	background-image: url(../img/byn-5.jpg);
	background-color: #00235D;
	background-blend-mode: soft-light;
}
.uno:hover{
	background-color: #003997;
}
.dos{
	background-image: url(../img/computadoras.jpg);
	background-color: #999;
	background-blend-mode: multiply;
}
.dos:hover{
	background-color: #d8d8d8;
}
.tres{
	background-image: url(../img/edificios.png);
	background-color: #e86d1f;
	background-blend-mode: multiply;
	background-position: left;
}
.tres:hover{
	background-color: #ffab75;
}
.flex li a{
	display: block;
	width: 100%;
	padding: 20px;
	padding-top: 70vh;
	color: #fff;
	text-shadow: 1px 1px 5px #000;	
}
.flex li a h3{
	font-size: 40px;
}
/* SERVICIOS ==================================*/
.servicios h3{
	font-size: 60px;
}
.servicios h4{
	font-size: 0.7em;
}
.servicios li{
	list-style: square;	
	font-size: 3em;
}
.servicios li small{
	font-size: 0.5em;
}
/*colores*/
.blanco h3{
	color: #00235D;
}
.blanco li{
	color: #e86d1f;
}
.blanco h4{
	color: #333;
}

.azul{
	background: #00235D;
}
.azul h3{
	color: #fff;
}
.azul li{
	color: #e86d1f;
}
.azul h4{
	color: #fff;
}
.azul h5{
	color: #fff;
}

.naranja{
	background: #e86d1f;
}
.naranja h3{
	color: #fff;
}
.naranja li{	
	color: #00235d;
}
.naranja h4{
	color: #fff;
}

/*RESPONSIVE ----------------------------------*/

/*pantalla grande*/
@media screen and (min-width: 1501px) { 	
}
/*note*/
@media screen and (min-width: 1201px) and (max-width: 1500px) { 	
	nav ul li a{
		padding: 30px 20px;
	}
	.flex li a{
		padding-top: 60vh;
	}
}
/*tablet*/
@media screen and (min-width: 601px) and (max-width: 1200px) {    
	header{
		position: static;
	}
	main{
		padding-top: 0px;
	}
	section{
		padding: 30px 0px;
	}
	nav ul li a{
		padding: 30px 10px;
	}
	img{
		max-width: 100%;
	}
	.flex li{
		height: 60vh;
	}
	.flex li a{
		padding-top: 20vh;
	}
	.newsletter{
		font-size: 10px;
	}
	.social li a{
		font-size: 10px;
		padding: 10px;
	}
}
/*mobile*/
@media screen and (max-width: 600px){
	header{
		position: static;		
		box-shadow: none;
	}

	main{
		padding-top: 0px;
	}
	section{
		padding: 30px 0px;
	}
	nav{
		display: none;
	}
	h2{
		font-size: 30px;
		margin-bottom: 30px;
	}
	.xs-hidden{
		display: none;
	}
	.flex{
		flex-direction: column;
	}
	.flex li{
		flex-basis: 100%;
		height: 29vh;
	}
	.flex li a{
		padding-top: 5vh;
	}
	.flex li a h3{
		font-size: 30px;
	}
	
	.servicios ul{
		padding-left: 20px;
	}
	.servicios h3{
		font-size: 30px;
	}
	.servicios li{
		font-size: 1em;
	}
	.servicios h4{
		font-size: 20px;
	}
		
	.newsletter{
		text-align: center;
		margin-top: 30px;
	}
	.social {
		display: none;
	}
}