@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
	--azul: #12335b;
	--rojo: #de4d3d;
	--poppins: "Poppins", sans-serif;
}
*{
	box-sizing: border-box;
	position: relative;
	margin: 0px;
}
.tipo-roja{
	color: var(--rojo);
}
body{
	margin: 0 auto;
	font-family: var(--poppins);
}
section{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 64vw;
	padding-top: 7vw;
/*	background-color: #FA0;*/
/*	border: solid 1px #000;*/
}
section > *{
	padding-left: 2%;
	padding-right: 2%;
}
h1{
	font-size: 4vw;
	font-weight: 700;
	line-height: 1;
	color: #FFF;
}
h2{
	font-size: 1.55vw;
	line-height: 1.1;
}
p{
	font-size: .95vw;
	font-weight: 500;
	line-height: 1.2;
	color: #FFF;
}

/******************
 *	   HEADER
 *****************/
header{
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100px;
	z-index: 2;
	width: 100%;
	top: 0%;
	z-index: 3;
/*	background-color: var(--azul);*/
}
header nav{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
header a{
	font-size: 18px;
	font-weight: 500;
	color: #FFF;
	margin-left: 6%;
	margin-right: 6%;
}
header a:hover{
	color: var(--rojo);
}
header span{
	font-size: 12px;
}
header div{
	width: 200px;
	height: 100px;
	background-image: url(images/Artboard-3-Png-_no-background_.png);
	background-size: 100%;
	background-position: center center;
	margin-left: 5%;
	margin-right: 5%;
}
.logo-desktop{
	position: fixed;
	z-index: 3;
/*	background-color: #Fa0;*/
	width: 60px;
	height: 60px;
	top: 1vw;
	left: 1%;
	background-image: url(images/flecha.png);
	background-position: center center;
	background-size: 100%;
	background-repeat: no-repeat;
	display: none;
}

/******************
 *		HOME
 *****************/
.home{
	background-color: var(--rojo);
	height: 57vw;
	padding-top: 0px;
}
.home > video{
	position: absolute;
	top: 1.5%;
	width: 100%;
	height: 55vw;
/*	margin-top: 1%;*/
	z-index: 2;
	padding-left: 1%;
	padding-right: 1%;
	padding-top: 0px;
}
.home div{
	width: 98%;
	margin-left: 1%;
	height: 96%;
	margin-top: 1%;
	border-radius: 1vw;
	background-image: url(images/H6CARGO_HOME.png);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	justify-content: center;
	align-content: center;
	text-align: center;
}
.home h1{
	padding-bottom: 15vw;
    margin-top: 20vw;
}

/******************
 *		ENVIO
 *****************/
.envio{
	background-color: var(--azul);
	background-image: url(images/CONTAINER-HOME.png);
	background-repeat: no-repeat;
	background-position: 113% -7vw;
    background-size: 60%;
}
.envio div{
	background-image: url(images/flecha.png);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 100%;
	width: 3.2vw;
	height: 3.2vw;
	margin-top: 3vw;
	margin-bottom: 3vw;
}
.envio article{
	width: 40%;
}
.envio p{
	margin-top: 1vw;
/*	text-align: justify;*/
}

/******************
 *		LISTO
 *****************/
.listo{
	background-color: #FFF;
	flex-direction: row;
	height: 65vw;
}
.listo h1{
	color: var(--azul);
	margin-bottom: 5vw;
}
.listo > aside > div{
	background-image: url(images/flecha-azul.png);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 100%;
	width: 3.2vw;
	height: 3.2vw;
	margin-top: 3vw;
	margin-bottom: 1vw;
}
.listo > aside div > h2{
	color: var(--azul);
	width: 90%;
}
.listo span{
	color: var(--rojo);
	font-weight: 400;
	font-size: 1.2vw;
	line-height: 1.3;
}
.listo aside{
	width: 40%;
}
.listo > aside div{
	display: flex;
	align-items: center;
}
.listo > aside div > p{
	width: 10%;
	text-align: right;
	font-size: 1.3vw;
	color: var(--azul);
    cursor: pointer;
}
.listo article{
	border-bottom: solid 1px var(--azul);
	margin-top: 2vw;
}
.listo > aside > article {
	cursor: pointer;
}
.listo > aside > article > p{
	color: #222;
	margin-top: 1vw;
	margin-bottom: 1vw;
	display: none;
}
.listo > article{
	width: 43%;
	height: 85%;
    background-image: url(images/listo/costos-ocultos.jpg);
    background-position: center center;
    background-size: cover;
    border-radius: 1vw;
    margin-left: 15%;
}
/*.listo > aside > article:hover > p{
	display: block;
}*/

/******************
 *	  SERVICIOS
 *****************/
.fondo-servicios{
	background-image: url(images/CONTAINER-SERVICIOS.png);
    background-position: center 20vw;
    background-repeat: no-repeat;
    background-size: 100%;
}
.servicios{
	background-color: var(--rojo);
}
.servicios h1{
	padding-left: 21.5%;
	padding-right: 21.5%;
	text-align: center;
}
.servicios span{
	color: var(--azul);
}
.servicios div{
	background-image: url(images/flecha.png);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 100%;
	width: 3.2vw;
	height: 7.2vw;
	margin-top: 3vw;
	margin-left: 2%;
}
.servicios > section{
	flex-direction: row;
	background-color: var(--rojo);
}
.servicios > section aside{
	width: 50%;
	height: 30vw;
	display: flex;
	flex-wrap: wrap;
	margin-top: 4vw;
}
.servicios > section aside:nth-child(1){
	background-image: url(images/transporte/MARITIMO.jpg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 1vw;
	height: 31vw;
	align-content: space-between;
}
.servicios > section aside:nth-child(2){
	padding-right: 0px;
}
.servicios > section aside > article{
	width: 48%;
	padding-left: 2%;
	height: 15vw;
	background-image: url(images/transporte/MARITIMO.jpg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 1vw;
	margin-right: 2%;
	margin-bottom: 1vw;
}
.servicios > section aside > article:nth-child(1){
	background-image: url(images/transporte/terrestre.jpg);
}
.servicios > section aside > article:nth-child(2){
	background-image: url(images/transporte/AEREO.jpg);
}
.servicios > section aside > article:nth-child(3){
	background-image: url(images/transporte/ALMACENAJE.jpg);
}
.servicios > section aside > article:nth-child(4){
	background-image: url(images/transporte/CALIDAD.jpg);
}
.servicios > section aside h3{
	color: #FFF;
	font-weight: 700;
	font-size: 2.3vw;
	padding-top: 1vw;
	text-shadow: 0px 0px 2px rgba(0,0,0,0.6);
}
.servicios > section aside > article h3{
	color: #FFF;
	font-weight: 700;
	font-size: 1.5vw;
	width: 80%;
	line-height: 1;
	text-shadow: 0px 0px 2px rgba(0,0,0,0.6);
}
.servicios > section > aside > article{
	display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
}
.servicios > section > aside > article > a, .servicios > section > aside > a{
	position: absolute;
	right: 4%;
	top: 1vw;
	font-size: 2vw;
	color: #FFF;
}
.servicios > section > aside > article > a{
	font-size: 1.2vw;
}
.servicios p{
	padding-bottom: .9vw;
	width: 80%;
	text-shadow: 0px 0px 2px rgba(0,0,0,0.6);
}

/******************
 *	  SERVICIO
 *****************/
.servicio{
	background-color: #FFF;
}
.servicio > div{
	background-image: url(images/flecha-azul.png);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 100%;
	width: 3.2vw;
	height: 3.2vw;
	margin-top: 3vw;
	margin-bottom: 2vw;
	margin-left: 2%;
}
.servicio > aside{
	position: relative;
    width: 95%;
    height: 30vw;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 2.5%;
    border-radius: 2vw;
    margin-top: 3vw;
}
#servicio-maritimo > aside{
	background-image: url(images/SERVICIO-MARITIMO.jpg);
}
#servicio-aereo > aside{
	background-image: url(images/SERVICIO-AEREO.jpg);
}
#servicio-terrestre > aside{
	background-image: url(images/SERVICIO-TERRESTRE.jpg);
}
#almacenaje > aside{
	background-image: url(images/SERVICIOS-ALMACENAJE.jpg);
}
#calidad > aside{
	background-image: url(images/SERVICIO-CALIDAD.jpg);
}
.servicio > ul{
	position: relative;
	width: 100%;
	padding: 0px;
	margin: 0px;
	display: flex;
	list-style: none;
	padding-top: 1vw;
	text-align: center;
	justify-content: center;
	padding-left: 5%;
    padding-right: 5%;
    align-items: center;
}
.servicio > ul > li{
	width: 33%;
	color: var(--rojo);
	font-weight: 700;
	font-size: 1.1vw;
}
.servicio > article{
	display: flex;
	align-items: center;
}
.servicio > article > h1{
	font-size: 4.8vw;
	width: 37%;
	color: var(--rojo);
}
.servicio > article > article{
	width: 31%;
}
.servicio > article > article > h2{
	font-size: 1.1vw;
	color: var(--azul);
}
.servicio > article > article > ol{
	list-style: none;
	display: flex;
	margin-top: 3vw;
}
.servicio > article > article > ol > li{
	width: 40%;
	text-align: center;
	color: var(--rojo);
	font-weight: 600;
}
.servicio > article > p{
	width: 32%;
	padding-left: 6%;
	color: #000;

}

/******************
 *	 CONTACTO
 *****************/
.contacto{
	background-color: var(--azul);
	padding-top: 7vw;
	
}
.contacto article, footer article{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding-top: 3vw;
}
.contacto div, footer div{
	width: 25%;
	height: 10vw;
	background-image: url(images/Artboard-3-Png-_no-background_.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 90%;
}
.contacto > article > aside, footer > article > aside{
	width: 43%;
}
.contacto p, footer p{
	width: 25%;
	font-size: 1.3vw;
	padding-left: 3%;
}
.contacto h1, footer h1{
	font-size: 3vw;
}
.contacto form, footer form{
	width: 80%;
	margin-top: 3vw;
}
.contacto input, footer input{
	width: 100%;
	background-color: transparent;
	border:0px;
	border-bottom: solid 1px #FFF;
	font-family: var(--poppins);
	font-size: 1.2vw;
	padding-bottom: .5vw;
}
.contacto input[type=submit], footer input[type=submit]{
	background-color: var(--rojo);
	color: #FFF;
	font-weight: 700;
	width: 20%;
	margin-left: 37.5%;
	border:0px;
	font-size: 1vw;
	margin-top: 1vw;
	padding-top: .5vw;
	cursor: pointer;
}
.contacto input[type=submit]:hover, footer input[type=submit]:hover{
	background-color: #FFF;
	color: var(--rojo);
}
.contacto > aside, footer > aside{
	width: 70%;
	margin-left: 26%;
	margin-top: 2vw;
	height: 20vw;
	border-radius: 1vw;
	background-image: url(images/listo/AGILIDAD.jpg);
	background-size: cover;
	background-position: center center;
}

.contacto nav, footer nav{
	color: #FFF;
	padding-left: 3%;
	padding-top: 2vw;
	padding-bottom: 1vw;
	font-size: .8vw;
}
.contacto a, footer a{
	margin-right: 2vw;
}

/******************
 *	 FOOTER
 *****************/
footer{
	height: auto;
	background-color: var(--azul);
}


input[type="checkbox"], .logo-movil{
	display:none;
}

label{
		display: none;
        flex-direction: column;
        width: 45px;
        cursor: pointer;
        right: 5%;
        position:fixed;
        z-index: 11;
        top: 1vw;
        right: 1%;
        background-color: var(--azul);
        box-sizing: content-box;
        padding: 5px;
	}
	label span{
	  background: #FFF;
	  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);
	}
.tope{
	position: relative;
	width: 100%;
	height: 0px;
}

@media (max-width: 480px){
	.tope{
		height: 100px;
	}
	.logo-movil{
		display: block;
		position: fixed;
		top: 1vw;
		width: 50%;
		height: 20vw;
		background-image: url(images/Artboard-3-Png-_no-background_.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 85%;
		z-index: 4;
	}
	label{
		display: flex;
        padding-left: 2vw;
        padding-right: 2vw;
        padding-top: 2vw;
        padding-bottom:2vw;
        top: 4.5vw;
        right: 8%;
	}

	section{
		height: auto;
	}
	section > *{
		padding-left: 10%;
		padding-right: 10%;
		padding-top: 7vw;
		padding-bottom: 7vw;
	}
	h1{
		font-size: 9vw;
	}
	p, .listo span, .listo > aside div > p{
		font-size: 3.5vw;
	}
	header{

		background-color: var(--azul);
	}
	header nav{
		position: fixed;
		width: 100%;
		height: 100vh;
		background-color: var(--azul);
		flex-direction: column;
		display: none;
	}
	header div{
		display: none;
	}
	header a{
		font-size: 8vw;
	}
	header span, .contacto h1, footer h1{
		font-size: 6vw;
	}
	.listo > aside div > h2{
		font-size: 5vw;
	}
	.home{
		height: 100vw;
	}
	.home > video{
		display: none;
	}
	.home > div{
		background-image: url(images/H6CARGO_HOME.png);
		width: 90%;
	    margin-left: 5%;
	    height: 90%;
	    margin-top: 5%;
	}

	.envio div, .listo > aside > div, .servicios div, .servicio > div{
		width: 7vw;
	    height: 7vw;
	    margin-top: 6vw;
	    margin-bottom: 6vw;
	}
	.envio article, .listo aside{
		width: 100%;
	}
	.envio p{
		margin-top: 5vw;
	}

	.listo{
		height: auto;
	}
	.listo > article{
		display: none;
	}
	.listo > aside > article > p{
		margin-top: 3vw;
		margin-bottom: 3vw;
	}

	.servicios h1{
		padding-left: 10%;
		padding-right: 10%;
	}
	.servicios div, .servicio > div {
		padding-left: 0%;
        padding-right: 0%;
        padding-top: 0vw;
        padding-bottom: 0vw;
        margin-left: 10%;
	}

	.servicios > section{
		flex-direction: column;
	}
	.servicios > section aside:nth-child(1), .servicios > section aside:nth-child(2){
		width: 100%;
	}
	.servicios > section aside{
		height: auto;
	}
	.servicios > section aside:nth-child(1){
		height: 50vw;
		padding: 3vw;
	}
	.servicios > section aside h3, .servicios > section aside > article h3{
		font-size: 8vw;
		line-height: 1;
		padding-top: 5vw;
	}
	.servicios > section aside > article{
		width: 100%;
		flex-direction: column;
		height: 50vw;
		margin-bottom: 3vw;
		padding: 3vw;
	}
	.servicios > section aside{
		padding-left: 0%;
        padding-right: 0%;
        padding-top: 0vw;
        padding-bottom: 0vw;
        margin-left: 0%;
	}

	.fondo-servicios{
		height: 100vw;
        background-position: center 60vw;
	}
	.servicio{
		padding-top: 5vw;
		padding-bottom: 5vw;
	}
	.servicio > article{
		flex-direction: column;
	}
	.servicio > article > h1{
		font-size: 9vw;
    	width: 100%;
	}
	.servicio > article > article{
		width: 100%;
	}
	.servicio > article > article > h2{
		font-size: 4vw;
		margin-top: 3vw;
	}
	.servicio > article > p {
	    width: 100%;
	    padding-left: 0%;
	    margin-top: 3vw;
	}
	.servicio > aside{
		height: 60vw;
		width: 80%;
		margin-left: 10%;
		background-size: cover;
		margin-top: 0px;
	}
	.servicio > ul{
		list-style: disc;
		flex-direction: column;
		padding: revert;
		text-align: left;
		margin-top: 3vw;
		width: 90%;
		margin-left: 6%;
	}
	.servicio > ul > li{
		font-size: 3.5vw;
		line-height: 1;
		margin-bottom: 2vw;
		width: 100%;
	}
	.servicios p{
		width: 100%;
	}
	.servicios > section > aside > article > a, .servicios > section > aside > a{
		font-size: 4vw;
		text-shadow: 0px 0px 2px rgba(0,0,0,0.6);
	}

	.contacto article, footer article{
		flex-direction: column;
	}
	.contacto div, footer div{
		width: 50%;
    	height: 30vw;
	}
	.contacto > article > aside, footer > article > aside{
		width: 80%;
	}
	.contacto h1, footer h1{
		text-align: center;
	}
	.contacto form, footer form{
		width: 100%;
		padding-bottom: 4vw;
	}
	.contacto input, footer input{
		font-size: 4vw;
		margin-top: 4vw;
	}
	.contacto input[type=submit], footer input[type=submit]{
		width: 30%;
	    margin-left: 35%;
	    font-size: 4vw;
	    margin-top: 4vw;
	}
	.contacto p, footer p {
	    width: 50%;
	    font-size: 4vw;
	    padding-bottom: 5vw;
	    padding-top: 5vw;
	    text-align: center;
	}
	.contacto nav, footer nav {
	    color: #FFF;
	    padding-left: 7%;
	    padding-top: 5vw;
	    padding-bottom: 5vw;
	    font-size: 3vw;
	    padding-right: 7%;
	    display: flex;
	    justify-content:center;	
	}
	.contacto a, footer a {
	    margin-right: 3vw;
	    margin-left: 3vw;
	}
}
.envio > div, .listo > aside > div, .servicios > div, .envio  div, .servicio > div{

	display: none;
}
.fondo-azul{
	background-color: var(--azul);
}
a{
	color: inherit;
	text-decoration: none;
}
::placeholder{
	color: #FFF;
}