*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Oxygen', sans-serif;
}

.wrapper{
    width: 90%;
    margin: 0 auto;
    max-width: 75rem;
}

header .logo{
	display: block;
	text-decoration: none;
}

header .logo img{
	height: 5rem;
	margin-bottom: .25rem;
}

header .logo p{
	text-decoration: none;
	color: #fff;
}

.header-block{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20;
	width: 100%;
}

.bar{
	background: #39527B;
	color: #fff;
	padding: .5rem;
}

.bar .p1{
	font-size: .875rem;
}

.bar i{
	margin-right: .5rem;
	display: inline-block;
}

.bar .wrapper{
	justify-content: flex-end;
	display: flex;
	align-items: center;
}

header{
	width: 100%;
	transition: all .22s;
}

header.active{
	background: #fff;
	box-shadow: 0 3px 6px 0 rgba(18, 18, 45, 0.05);
}

header.active .wrapper{
	height: 6rem;
}

header.active .logo img{
	height: 3rem;
}

header.active .logo p{
	color: #39527B;
}

header .wrapper{
	height: 8rem;
	transition: all .22s;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

header .sep{
	height: 2rem;
	background: #fff;
	width: 1px;
	margin: 0 1rem;
}

header nav > ul{
	display: flex;
	align-items: center;
}

header nav > ul > li{
	display: inline-block;
	position: relative;
}

header nav > ul > li:after{
	opacity: 0;
	transform: scaleX(0.5);
	transition: all .22s;
	content: '';
	width: 80%;
	right: 0;
	margin: 0 auto;
	height: 3px;
	background: #fff;
	position: absolute;
	bottom: 1rem;
	left: 0;
}

header nav > ul > li:hover:after{
	transform: scaleX(1);
	opacity: 1;
}

header nav > ul > li > a{
	color: #fff;
	cursor: pointer;
	transition: all .22s;
	padding: 0 .5rem;
	text-decoration: none;
	text-transform: uppercase;
	font-size: .875rem;
	font-weight: bold;
	display: flex;
	height: 4rem;
	align-items: center;
}

header.active nav > ul > li > a{
	color: #39527B;
}

header.active .sep,
header.active nav > ul > li:after{
	background: #39527B;
}

.hero .slider{
	position: relative;
	z-index: 5;
}

.hero .slide{
	height: 40rem;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hero{
	position: relative;
}

.hero video{
	width: 100%;
	display: block;
}

.hero  .bg{
	background: rgba(25,25,25,0.3);
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 4;
	top: 0;
	left: 0;
}

.hero  .bg:after{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	opacity: .3;
	height: 100%;
	background: url(images/mask.png);
	background-size: 5px;
}

.hero .content{
	pointer-events: none;
	position: absolute;
	z-index: 7;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	display: flex;
	align-items: center;
}

.hero .content .wrapper{
	pointer-events: all;
}

.hero .content h1{
	font-size: 4rem;
	font-weight: normal;
	margin-bottom: 1rem;
}

.hero .content h2{
	font-size: 2rem;
	font-weight: 300;
}

.hero .content a{
	background: #fff;
	color: #12122d;
	font-size: 1rem;
	font-weight: bold;
	text-transform: uppercase;
	padding: .75rem 2rem;
	display: inline-block;
	transition: all .22s;
	cursor: pointer;
	margin-top: 3rem;
}

.hero .content a:hover{
	transform: translate3d(0, -2px, 0);
	box-shadow: 0 3px 8px 0 rgba(64, 57, 134, .3);
}

section h3{
	font-size: 2.5rem;
	color: #12122d;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
	position: relative;
}

section p{
	color: #444;
	font-size: 1.25rem;
	line-height: 1.4;
}

section h3 span{
	color: #39527B;
}

section{
	padding: 5rem 0;
}

section.hero{
	padding: 0;
}

section.servicios{
	text-align: center;
}

.servicios .cols{
	display: flex;
	width: calc(100% + 2rem);
	margin: 2rem 0 0 -1rem;
}

.servicios .col{
	transition: all .22s;
	cursor: pointer;
	width: calc((100% / 3) - 2rem);
	border-radius: 2px;
	overflow: hidden;
	margin: 1rem;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding: 3rem 1.5rem;
	position: relative;
}

.servicios .col:after{
	background: #39527B;
	content: '';
	display: block;
	z-index: 2;
	opacity: .8;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.servicios .col:hover{
	transform: scale(1.1);
}

.servicios .col:hover span{
	border: 2px solid #fff;
}

.servicios .col img{
	width: 5rem;
	position: relative;
	z-index: 3;
}

.servicios .col a{
	color: #fff;
	font-weight: bold;
	top: -5px;
	left: 4px;
	opacity: .2;
	font-size: 3rem;	
	position: absolute;
	z-index: 3;
}

.servicios .col p{
	position: relative;
	z-index: 3;
	font-size: 1.5rem;
	color: #fff;
	margin: 1.5rem 0 .25rem;
}

.servicios .col span{
	transition: all .22s;
	margin-top: .5rem;
	border-radius: 2px;
	padding: .25em .75rem;
	z-index: 3;
	position: relative;
	display: inline-block;
	border: 2px solid #fff;
	color: rgba(255,255,255,0.5);
}

.servicios .col span:hover{
	background: #fff;
	color: #39527B;
}

.partners{
	text-align: center;
	background: url(images/partners.jpg) no-repeat center;
	background-size: cover;
}

.partners h3{
	color: #fff;
	font-size: 1.5rem;
}

.partners h3:after{
	background: #fff;
	bottom: -1.5rem;
}

.partners h3:before{
	content: '\f10d';
	font-family: 'FontAwesome';
	position: absolute;
	left: -1rem;
	top: -1.5rem;
	color: rgba(255,255,255,0.5);
	font-size: 2.5rem;
}

.slider-container{
	transform: translateX(12px);
}

.nosotros{
	background: url(images/nosotros.jpg) no-repeat center;
	background-size: cover;
	text-align: center;
}

.nosotros .p1{
	font-weight: bold;
	font-size: 1.5rem;
	margin: 2rem 0 0;
}

.nosotros .p1:before{
	/*content: '\f0a4';*/
	font-family: 'FontAwesome';
	margin-right: .5rem;
	color: #39527B;
}

.empresas{
	color: #fff;
	background: #39527B;
	text-align: center;
}

.empresas h3{
	color: #fff;
}

.empresas h3:after{
	background: #fff;
	bottom: -1.5rem;
}

.empresas p.p1{
	color: #fff;
	font-weight: bold;
	font-size: 1.5rem;
	margin-bottom: 2rem;
}

.empresas p.p1 span{
	color: #7E7EC1;
}

.empresas ul li{
	line-height: 1.5;
	font-size: 1.25rem;
	list-style: none;
}

.empresas ul li:before{
	/*content: '\f05d';*/
	margin-right: .5rem;
	color: #7E7EC1;
	font-family: 'FontAwesome';
}

.clientes{
	padding: 2rem 0;
}

.clientes .slider,
.clientes .slider2{
	display: flex;
	flex-wrap: wrap;
}

.clientes .slider2 div,
.clientes .slider div{
	display: flex;
}

.clientes .slider2 a,
.clientes .slider a{
	width: calc((100% / 6));
	text-align: center;
	cursor: pointer;
	transition: all .2s;
	margin: 1.5rem 0;
	filter: saturate(0%);
}

.clientes .slider2 a:hover,
.clientes .slider a:hover{
	filter: saturate(100%);
}

.clientes .slider2 img,
.clientes .slider img{
	width: 80%;
}

.atencion{
	background: #39527B;
	text-align: center;
}

.atencion h3{
	color: #fff;
}

.atencion h3:after{
	background: #fff;
}

.atencion p{
	color: #fff;
}

.contacto h3{
	text-align: center;
}

.contacto-mapa{
	padding: 0;
}

.contacto-mapa iframe{
	width: 100%;
	height: 20rem;
	display: block;
}

.contacto{
	background: url(images/ctc.jpg) no-repeat center;
	background-size: cover;
	position: relative;
}

.contacto:after{
	width: 100%;
	height: 100%;
	background: rgba(175, 202, 224, 0.35);
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	z-index: 2;
}

.contacto .wrapper{
	position: relative;
	z-index: 3;
}

.contacto .cols{
	display: flex;
}

.contacto .col-1{
	width: 50%;
	margin-left: 50%;
}


.scrollUp{
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 100%;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
    position: fixed;
    left: 2rem;
    bottom: 2rem;
    background: #222;
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.scrollUp svg{
    height: 1rem;
    width: 1rem;
}

.scrollUp:hover{
    transform: scale(1.1);
}

.contacto .p1{
	margin-bottom: 1.5rem;
	font-weight: bold;
}

.bar .sep{
	height: 1rem;
	margin: 0 1rem;
	width: 1px;
	background: #fff;
}

.contacto form input,
.contacto form textarea{
	width: 100%;
	border: none;
	border: 2px solid #39527B;
	padding: .75rem;
	margin-bottom: 1rem;
	border-radius: 3px;
}

.contacto form textarea{
	height: 5rem;
	resize: none;
}

.contacto form input::placeholder,
.contacto form textarea::placeholder{
	color: #39527B;
	opacity: .6;
}

.contacto iframe{
}

.contacto button{
	background: #39527B;
	color: #fff;
	padding: .5rem 1.5rem;
	border: none;
	cursor: pointer;
}

.overlay button.disabled,
.info button.disabled,
.contacto button.disabled{
	opacity: .3;
	pointer-events: none;
}

.info{
	background: #f1f1f1;
	text-align: center;
}

.info .cols{
	display: flex;
}

.info .col img{
	width: 80%;
}

.info .col-1{
	display: flex;
	align-items: center;
}

.info .col-2,
.info .col-3{
	text-align: center;
}

.info .col-1{width: 25%;}
.info .col-2{width: 40%;}
.info .col-3{width: 35%;}

.info .p1{
	font-weight: bold;
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}

.info .p2{
	line-height: 1.4;
}

.info .p2 i{
	color: #39527B;
	margin-right: .5rem;
}

.info .col-3{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.info .col-3 form{
	width: 100%;
}

.info .col-3 p{
	margin-bottom: 1rem;
	width: 100%;
}

.info input{
	height: 2.5rem;
	padding: .75rem;
	border: none;
	border-radius: 5px;
	background: #fff;
}

.info button{
	background: #39527B;
	color: #fff;
	padding: .75rem 1rem;
	cursor: pointer;
	border: none;
	border-radius: 5px;
	height: 2.5rem;
}

footer{
	background: #222;
}

footer .wrapper{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .625rem 0;
}

footer p{
	color: #f1f1f1;
}

.info .col-1 p{
	font-size: 1rem;
	margin-top: 1rem;
}

footer img{
	height: 1.5rem;
}

.overlay{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 1000;
	transition: all .5s;
	overflow-y: scroll;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5rem 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	background: rgba(0,0,0,0.9);
}

.overlay .bg{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 2;
}

.overlay form{
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.05);
	background: #fff;
	width: 90%;
	max-width: 30rem;
	z-index: 4;
	position: relative;
	margin: auto;
	padding: 2rem;
}

.overlay .p1{
	font-size: 1.25rem;
	font-weight: bold;
	margin-bottom: 1.5rem;
}

.overlay form label{
	font-size: .875rem;
	font-weight: bold;
	display: block;
	margin-bottom: .25rem;
}

.overlay form label:before{
	content: '\f061';
	margin-right: .25rem;
	font-family: 'FontAwesome';
}

.overlay form input[type="email"]{
	width: 100%;
	padding: .5rem;
	border: 2px solid #666;
	margin-bottom: 1.5rem;
}

.overlay form input[type="file"]{
	margin-bottom: 1.5rem;
	display: block;
}

.overlay form button{
	background: #222;
	color: #f1f1f1;
	padding: .5rem 2rem;
	border: none;
	cursor: pointer;
}

html{
	height: 100%;
}

body.active{
	height: 100%;
	overflow-y: hidden;
}

.overlay.active{
	visibility: visible;
	opacity: 1;
	pointer-events: all;
}

.overlay.servicios-overlay{
	opacity: 1;
	visibility: visible;
	pointer-events: all;
	transform: translate3d(100%, 0, 0);
}

.overlay.servicios-overlay.active{
	transform: translate3d(0, 0, 0);
}

.servicios-overlay{
	background: linear-gradient(#fff, #ddd);
}

.servicios-overlay .content{
	width: 90%;
	max-width: 48rem;
	z-index: 4;
	position: relative;
	margin: auto;
	padding: 2rem;
}

.overlay i,
.servicios-overlay i{
	position: absolute;
	font-size: 1.5rem;
	right: -1rem;
	color: #fff;
	top: -3.25rem;
	cursor: pointer;
	padding: 1rem;
}

.servicios-overlay i{
	color: #222;
}

.servicios-overlay img{
	width: 100%;
	margin-bottom: 1.5rem;
}

.servicios-overlay p{
	font-size: 1.5rem;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 1.5rem;
}

.servicios-overlay ul li{
	color: #444;
	font-size: 1.25rem;
	line-height: 1.4;
	list-style: none;
}

.servicios-overlay ul li:before{
	content: '\f058';
	font-family: 'FontAwesome';
	color: #39527B;
	margin-right: .5rem;
}

.servicios-overlay a{
	color: #fff;
	background: #39527B;
	padding: .5rem 2rem;
	margin-top: 1.5rem;
	display: inline-block;
	cursor: pointer;
}

.pancake-button{
    display: none;
}

.overlay-404{
	z-index: 20000;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	padding: 10rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.overlay-404 img{
	height: 2rem;
}

.overlay-404 p{
	font-size: 2rem;
	margin: 2rem 0 1rem;
}

.overlay-404 a{
	font-size: 1.125rem;
}

/* ==================== MEDIA QUERIES ==================== */

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

	.info .col-1{
		display: flex;
		justify-content: center;
	}

	.info .col-1 p{
		margin-bottom: 2rem;
	}

	.info .col-3{
		display: none;
	}

	.info .cols{
		display: block;
	}

	.info .col img{
		max-width: 20rem;
		width: 100%;
		margin: 0;
	}

	.info .col-1,
	.info .col-2{
		width: 100%;
		text-align: center;
	}

	header{
		background: #fff;
		height: 6rem;
	}

	header .wrapper{
		height: 6rem;
	}

	header .logo img{
		height: 3rem;
	}

	header .logo p{
		color: #39527b;
	}

	header nav > ul > li:after{
		content: none;
	}

	header nav{
		transition: all .22s;
		position: absolute;
		transform: translate3d(0, 2rem, 0);
		opacity: 0;
		visibility: hidden;
		top: calc(100% + 1rem);
		width: 14rem;
		border-radius: 5px;
		box-shadow: 0 4px 12px 0 rgba(0,0,0,0.05);
		background: #fff;
		right: 1rem;
	}

	header nav.active{
		transform: translate3d(0,0,0);
		opacity: 1;
		visibility: visible;
	}

	header nav > ul{
		display: block;
	}

	header .sep{
		width: calc(100% - 2rem);
		position: relative;
		margin: .25rem 0;
		margin-left: 1rem;
		height: 1px;		
		background: #39527B;
		opacity: .1;
	}

	header nav > ul > li{
		display: block;
		text-align: right;
	}

	header nav > ul > li > a{
		padding: .5rem 1rem;
		height: auto;
		display: block;
		color: #39527b;
	}

	.pancake-button{
        position: relative;
        z-index: 20;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .pancake-button.active .button{
        background: #39527b;
        transform: translate(1px, 1px);
    }

    .pancake-button.active .button span{
        background: #fff;
    }

    .pancake-button.active .button span:nth-child(1){
        transform: rotate(45deg) translate(6px, 6px);
    }

    .pancake-button.active .button span:nth-child(3){
        transform: rotate(-45deg) translate(7px, -7px);
    }

    .pancake-button.active .button span:nth-child(2){
        transform: scaleX(0);
    }

    .pancake-button:not(.active):focus .button span:nth-child(1),
    .pancake-button:not(.active):hover .button span:nth-child(1){
        transform: translateY(2px);
    }

    .pancake-button:not(.active):focus .button span:nth-child(3),
    .pancake-button:not(.active):hover .button span:nth-child(3){
        transform: translateY(-2px);
    }

    .pancake-button > span{
        color: #39527b;
        font-size: 1.125rem;
        margin-left: 1rem;
        text-transform: uppercase;
    }

    .pancake-button .button{
        width: 3.5rem;
        height: 3rem;
        transition: all .22s;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pancake-button .button div{
        display: flex;
        flex-direction: column;
        width: 70%;
        align-items: center;
        justify-content: space-between;
        height: 1.25rem;
        flex-wrap: wrap;
    }

    .pancake-button .button span{
        transition: all .22s;
        background: #39527b;
        width: 100%;
        height: 2px;
        border-radius: 100rem;
        display: block;
    }

    section.hero{
    	padding-top: 8rem;
    }
}

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

	header .logo p{
		display: none;
	}

	header .logo img{
		margin-bottom: 0;
	}

	.contacto .cols{
		display: block;
	}

	.contacto .col-2{
		width: 100%;
		margin: 1.5rem 0 0 0;
	}

	.contacto .col-1{
		width: 100%;
		margin-left: 0;
	}

	.slider-container {
	    transform: translateX(0);
	}

	.hero .content h1{
		font-size: 2.5rem;
	}

	.hero .content h2{
		font-size: 1.5rem;
	}

	.hero .content a{
		margin-top: 1.5rem;
	}

	.servicios .cols{
		display: block;
		width: 100%;
		margin: 0;
	}

	.servicios .col{
		width: 100%;
		margin: 1.5rem 0;
	}

	.servicios .col:hover{
		transform: scale(1);
	}

	.clientes .slider a{
		width: calc(100% / 3);
	}
}

@media screen and (max-width: 800px){
	.sl-s1{ background-image: url(images/slider/1s.jpg)!important; }
	.sl-s2{ background-image: url(images/slider/2s.jpg)!important; }
	.sl-s3{ background-image: url(images/slider/3s.jpg)!important; }
	.sl-s4{ background-image: url(images/slider/4s.jpg)!important; }
}

@media screen and (max-width: 640px){
	section{
		padding: 2.5rem 0;
	}

	section h3{
		font-size: 1.5rem;
	}

	section p,
	.empresas ul li,
	.servicios-overlay ul li{
		font-size: 1rem;
	}

	header .logo img{
		height: 2rem;
	}

	.pancake-button{
		transform-origin: 100% 50%;
		transform: scale(.8);
	}

	.hero .slide{
		height: 30rem;
	}

	.hero .content h1{
		font-size: 1.5rem;
	}

	.hero .content h2{
		font-size: 1rem;
	}

	.hero .content a{
		margin-top: 1rem;
	}

	.hero .content{
		margin-top: 2.5rem;
	}

	.clientes .slider a{
		width: calc(100% / 2);
	}
}

@media screen and (max-width: 540px){
	.bar .wrapper,
	footer .wrapper{
		display: block;
		text-align: center;
	}

	footer p{
		font-size: 1rem;
		margin-bottom: .5rem;
	}

	.bar .p1{
		margin-bottom: .25rem;
	}

	.bar .sep{
		display: none;
	}
}