@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
    font-family: 'Conthrax';
    src: url('fonts/Conthrax-SemiBold.woff2') format('woff2'),
        url('fonts/Conthrax-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
:root{
	--montserrat: "Montserrat", sans-serif;
	--conthrax: 'Conthrax';
	--azul-marino: #010102;
	--azul-aqua: #28b0d4;
	--amarillo: #ffce4a;;
}
*{
	box-sizing: border-box;
}

body{
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;
	font-family: var(--montserrat);
	color: var(--azul-marino);
}
section{
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 5vw;
	padding-bottom: 5vw;
}
section > article{
	position: relative;
	width: 50%;
	padding-left: 10%;
	padding-right: 8%;
}
section > div{
	position: relative;
	width: 50%;
}
p{
	position: relative;
	font-size: 1.1vw;
	font-weight: 400;
	line-height: 1.1;
}
h2{
	position: relative;
	font-weight: 500;
	font-size: 2.4vw;
	margin: 0px;
	width: 100%;
}
h3{
	position: relative;
	font-size: 1vw;
	color: #FFF;
	font-family: var(--conthrax);
	padding-bottom: 2vw;
	margin: 0px;
}
h4{
	position: relative;
	margin: 0px;
}
video{
	position: relative;
	width: 100%;
}
/******************************
 *			 HEADER
 ******************************/
header{
	position: fixed;
	width: 90%;
	height: 70px;
	background-color: #FFF;
	z-index: 10;
	left: 5%;
	top: 2vw;
	display: flex;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
}
header div{
	position: relative;
	width: 150px;
	height: 100%;
	background-image: url(images/SL_1.png);
	background-position: center center;
	background-size: auto 100%;
	background-repeat: no-repeat;
}
header nav{
	position: relative;
	height: 100%;
	width: calc(100% - 150px);
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
header a{
	position: relative;
	font-weight: 700;
	padding-left: 3%;
	padding-right: 3%;
	line-height: 50px;
	padding-top: 10px;
	border-bottom: solid 10px #FFF;
}
.activo{
	border-bottom: solid 10px var(--azul-aqua);
}
header a:hover{
	background-color: var(--azul-aqua);
	border-bottom: solid 10px var(--azul-aqua);
/*	border-top: solid 10px var(--azul-aqua);*/
	color: #FFF;
}

/******************************
 *			 BANNER
 ******************************/
.banner{
	height:54vw;
	background-image: url(images/SL_2.png);
	background-size: cover;
	background-position: center center;
	color: #FFF;
	background-color: var(--azul-aqua);
}
.banner article{
	margin-right: 50%;
}
.banner span{
	font-weight: 700;
	color: var(--azul-marino);
}
.banner p{
	width: 80%;
}
.banner aside{
	position: absolute;
    left: 67%;
    bottom: -17vw;
    width: 30%;
    height: 30vw;
    z-index: 1;
}
.banner .st2{
	fill: var(--azul-aqua);
}

/******************************
 *		 QUIENES SOMOS
 ******************************/
.quienes-somos{
	background-color: #000;
}
.quienes-somos p{
	color: #FFF;
}
.quienes-somos h2{
	color: var(--azul-aqua);
	font-weight: 600;
}
.quienes-somos div{
	width: 50%;
	height: 30vw;
	background-image: url(images/SL_3-1.png);
	background-position: center center;
	background-size: cover;
}

/******************************
 *		   SOLUCIONES
 ******************************/
.soluciones{
	padding-top: 8vw;
	padding-bottom: 8vw;
	background-image: url(images/SL_3.png);

	background-position: center center;
	background-size: cover;
}
.soluciones h4{
	color: var(--azul-aqua);
	font-weight: 800;
	font-size: 4vw;
	margin: 0px;
}
.soluciones h3{
	color: var(--azul-marino);
}
.soluciones h2{
	color: var(--azul-marino);
	font-weight: 600;
}
.soluciones span{
	font-weight: 600;
	font-size: 1.5vw;
}
.soluciones div{
	width: 50%;
	height: 30vw;
/*	background-color: #F0A;*/
}

/******************************
 *		   SERVICIO
 ******************************/
.servicio{
	background-color: #eaeaea;
	padding-top: 10vw;
	padding-bottom: 10vw;
	align-items: flex-start;
}
.servicio article{
	width: calc(90% / 3);
    padding-left: 5%;
    padding-right: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.servicio div{
	font-size: 5vw;
	color: var(--azul-aqua);
	margin-bottom: 2vw;
}
.servicio h2{
	font-family: var(--conthrax);
	font-size: 2vw;
}

/******************************
 *		   MONITOREO
 ******************************/
.monitoreo{
	flex-direction: column;
	padding-top: 10vw;
	padding-bottom: 0px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-image: url(images/SL_4.png);
}
.monitoreo h2{
	font-size: 5vw;
	font-weight: 700;
	color: #FFF;
	line-height: .9;
	text-align: center;
	top: 5vw;
}
.monitoreo span{
	color: var(--azul-marino);
	font-size: 8.5vw;
	font-weight: 900;
}
.monitoreo div{
	position: relative;
	width: 100%;
	height: 33vw;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-image: url(images/SL_5.png);
	top: 5vw;
}

/******************************
 *		   SERVICIOS
 ******************************/
.servicios{
	flex-direction: column;
}
.servicios div{
	position: relative;
	width: 80%;
	height: 13vw;
	display: flex;
	margin-top: 2vw;
	font-family: var(--conthrax);
}
.servicios aside{
	position: relative;
	height: 100%;
	width: 41%;
	margin-right: 1%;
	margin-left: 1%;
	background-position: center center;
	background-size: cover;
}
.servicios div:nth-child(1) > aside{
	background-image: url(images/SL_6.png);
}
.servicios div:nth-child(2) > aside{
	background-image: url(images/SL_7.png);
}
.servicios div:nth-child(3) > aside{
	background-image: url(images/SL_8.png);
}
.servicios article{
	position: relative;
	height: 100%;
	width: 55%;
	margin-right: 1%;
	margin-left: 1%;
	border-right: solid 10px var(--azul-marino);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 3%;
	background-color: var(--azul-aqua);
	color: #FFF;
}
.servicios h2{
	font-size: 1.5vw;
}
.servicios h3{
	font-size: 4vw;
	padding: 0px;
}

/******************************
 *		   	  RUTA
 ******************************/
.ruta{
	color: #FFF;
	padding: 0px;
	height: 50vw;
	background-color: var(--azul-aqua);
	background-color: #FFF;
}
.ruta h4{
	font-size: 2.7vw;
	font-weight: 800;
}
.ruta li{
	font-size: 1.2vw;
	font-weight: 500;
}
.ruta ul{
	position: relative;
	padding: 0px;
	list-style: none;
	width: 50%;
	margin-top: 4vw;
	line-height: 1.5;
}
.ruta li:before{
	content: "○ ";
	color: var(--amarillo);
}
.ruta > article{
	background-image: url(images/SL_9.png);
	background-position: center center;
	background-size: cover;
	padding-top: 15vw;
    padding-bottom: 5vw;
}
.ruta > article > div{
	position: relative;
	display: flex;
}
.ruta > div{
	height: 100%;
	background-image: url(images/SL_10.png);
	background-position: center center;
	background-size: 95%;
	background-repeat: no-repeat;
}
.ruta aside{
	position: absolute;
    left: 42%;
    top: -3vw;
    width: 15%;
    height: 30vw;
    z-index: 1;
}
.ruta .st2{
	fill: var(--azul-aqua);
}
/******************************
 *		   	CONTACTO
 ******************************/
.contacto{
	background-color: var(--azul-aqua);
	color: #FFF;
	height: 35vw;
}
.contacto h4{
	font-weight: 800;
	font-size: 2vw;
	margin-bottom: 0vw;
	margin-top: 1vw;
}
/*.contacto h4:nth-child(3){
	margin-bottom: 1vw;
	margin-top: 2vw;
}*/
.contacto h2{
	margin-bottom: 3vw;
}
.contacto h3{
	margin-top: 1vw;
}
.contacto > article{
	padding-right: 0%;
	width: 45%;
}
.contacto > article > div{
	position: relative;
	display: flex;
}
.contacto > article > div:nth-child(6){
	flex-direction: column;
}
.contacto > article > div:nth-child(6) > h5{
	margin: 0px;
}
.contacto h5{
	margin: .5vw;
	font-size: 1.1vw;
}
.contacto > div{
	width: 60%;
    height: 36vw;
    margin-top: 12vw;
    background-image: url(images/SL_11.png);
    background-position: left bottom;
    background-size: 74%;
    background-repeat: no-repeat;
    z-index: 2;
}
.contacto aside{
	position: absolute;
    right: 0%;
    bottom: -10vw;
    width: 34%;
    height: 30vw;
    z-index: 1;
}

/******************************
 *		   	 FOOTER
 ******************************/
footer{
	position: relative;
	width: 100%;
	display: flex;
	font-family: var(--conthrax);
	padding-bottom: 2vw;
	padding-top: 5vw;
	z-index: 10;
}
footer div{
	position: relative;
	width: 38%;
	padding-left: 8%;
	height: 12vw;
	background-image: url(images/SL_1.png);
	background-position: center center;
	background-size: auto 80%;
	background-repeat: no-repeat;
}
footer nav{
	position: relative;
	width: calc(100% - 38%);
	padding-right: 5%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 1vw;
	color: var(--azul-marino);
}
footer nav > a{
	padding-left: 3%;
	padding-right: 3%;
	line-height: 3;
}
footer nav > a:hover{
	background-color: var(--azul-aqua);
	color: #FFF;
}
footer ul{
	position: absolute;
	bottom: 2vw;
	right: 0px;
	padding: 0px;
	margin: 0px;
	list-style: none;
	display: flex;
	width: 10%;
	padding-right: 12.4%;
}
footer li{
	font-size: 2.4vw;
	margin-left: .5vw;
	margin-right: .5vw;
}
footer li:hover{
	color: var(--azul-aqua);
}


a{
	text-decoration: none;
	color: inherit;
}
input[type="checkbox"]{
	display:none;
}

@media (max-width: 480px){
	.monitoreo h2{
		font-size: 11vw;
	}
	.monitoreo span{
		font-size: 15vw;
	}
	p, .soluciones span, .ruta li, .servicio h2{
		font-size: 4vw;
	}
	.servicios h3{
		font-size: 7vw;
	}
	h2, .ruta h4, .contacto h4, header a{
		font-size: 5vw;
	}
	h3, .servicios h2{
		font-size: 3vw;
	}
	section{
		flex-direction: column;
		padding-top: 15vw;
	}
	.servicios div{
		flex-direction: column;
	}
	section > article{
		width: 100%;
		padding-right: 10%;
	}
	.contacto > article{
		width: 100%;
	}
	.quienes-somos div{
		height: 60vw;
		width: 80%;
	}
	.soluciones{
		padding-top: 15vw;
		background-position: left;
	}
	.soluciones h4{
		font-size: 8vw;
	}
	.soluciones div{
		display: none;
	}
	.ruta{
		height: auto;
	}
	.contacto{
		height: auto;
		padding-top: 15vw;
	}
	.servicio article{
		width: 100%;
        padding-right: 10%;
        padding-left: 10%;
        margin-bottom: 5vw;
        margin-top: 5vw;
	}
	.servicio div{
		font-size: 13vw;
	}
	.servicios div{
		height: 60vw;
		margin: 0px;
		width: 90%;
	}
	.ruta article{
		padding-bottom: 5vw;
		padding-top: 15vw;
	}
	.servicios aside, .servicios article{
		width: 100%;
		margin-right: 0px;
		margin-left: 0px;
		margin-bottom: 2vw;
	}
	.servicios div:nth-child(2){
		flex-direction: column-reverse;
	}
	.monitoreo h2{
		top: 0px;
	}
	.monitoreo div{
		width: 80%;
		height: 60vw;
		top: 0px;
	}
	.ruta > div{
		width: 100%;
		height: 100vw;
	}
	.contacto > div{
		margin-top: 5vw;
		width: 80%;
		height: 60vw;
		background-size: 100%;
	}
	.contacto > article > div{
		flex-direction: column;
	}
	.contacto h5{
		font-size: 4vw;
	}
	.contacto h4:nth-child(3){
		margin-bottom: 3vw;
		margin-top: 4vw;
	}
	.contacto h4{
		margin-bottom: 3vw;
		margin-top: 4vw;
	}
	.contacto h3{
		margin-top: 4vw;
	}
	footer{
		padding: 0px;
		z-index: 3;
	}
	footer div{
		height: 17vw;
	}
	footer nav{
		display: none;
	}
	footer ul{
		position: relative;
		bottom: initial;
		padding: 0px;
		justify-content: center;
        align-items: center;
        width: 62%;
        padding-left: 15%;
	}
	footer li{
		font-size: 7vw;
		margin-left: 2.5vw;
		margin-right: 2.5vw;
	}
	
	.banner > article{
		margin: 0px;
	}
	header{
		top: 5vw;
	}
	header a{
		border-color: var(--azul-marino);
		color: #FFF;
	}
	header nav{
		position: fixed;
		width: 90%;
		height: 87vh;
		top: 80px;
		background-color: var(--azul-marino);
		flex-direction: column;
		justify-content: center;
		top: calc(5vw + 70px);
		display: none;
	}
	.banner{
		height: 115vw;
		padding-top: 25vw;
		background-position: left center;
	}
	label{
		display: flex;
        flex-direction: column;
        width: 50px;
        cursor: pointer;
        right: 5%;
        position:fixed;
        z-index: 11;
        top: 8.5vw;
        right: 9%;
	}
	label span{
	  background: var(--azul-aqua);
	  border-radius:10px;
	  height:4px;
	  margin: 5px 0;
	  transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);
	}
	span:nth-of-type(1){
	  width:50%;
	}
	span:nth-of-type(2){
	  width:100%;
	}
	span:nth-of-type(3){
	  width:75%;
	}
	
	input[type="checkbox"]:checked ~ span:nth-of-type(1){
	  transform-origin:bottom;
	  transform:rotatez(45deg) translate(8px,0px)
	}
	input[type="checkbox"]:checked ~ span:nth-of-type(2){
	  transform-origin:top;
	  transform:rotatez(-45deg)
	}
	input[type="checkbox"]:checked ~ span:nth-of-type(3){ 
	  transform-origin:bottom;
	  width:50%;
	  transform: translate(30px,-11px) rotatez(45deg);
	  transform: translate(21px, -7px) rotatez(45deg);
	}
	.contacto aside{
		bottom: -8vw;
	}

	/*.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{
		background-color: var(--azul-marino) !important;
	}
	.hamburger{
		right: 7vw !important;
    	top: 8vw !important;
    	display: block !important;
	}*/
}