::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    /*-webkit-box-shadow: inset 5px 5px 6px rgb(192,192,192); */
    background: rgb(192,192,192); 
    border-radius: 10px;
}

@font-face {

	src: url('fonts/Titillium_Web/TitilliumWeb-Italic.ttf') format('ttf'),
	url('fonts/Titillium_Web/TitilliumWeb-Italic.ttf') format('ttf');
}

p, li{
	color: white;
	font-family: 'Titillium Web', sans-serif;
}

h1{
	color: white;
	align-content: center;
	text-align: center;
	font-family: 'Titillium Web', sans-serif;
}

h2, h3 ,h5{
	color: white;
	align-content: center;
	text-align: center;
	font-family: 'Titillium Web', sans-serif;
}

.contenido{width: 100%; height: 100%; padding: 0; background-image: url('../img/trailerrojo.jpg'); background-repeat: no-repeat;background-size: cover;  position: absolute;}

.ico{width: 30px; margin-left: 4px;}
.redes{width: 98%; z-index: 999; position: absolute;}

.menu a{
	text-decoration: none;
	color: white;
}

.menu li:hover{
	text-decoration: none;
	color: white;
	background-color: goldenrod;
	opacity: .5;
}

.active{
	text-decoration: none;
	color: white;
	background-color: goldenrod;
}

.navbar-light .navbar-toggler{background-color: goldenrod;}

.fondo-transparente-cont-opaco {
    background-color: rgba(0, 0, 0, 0.4);
    color:#000;
	width: 100%;
    height: 70%;
    overflow-y: scroll; 
}

.footer{height: 10.5%;}
.footer img{width: 10%; margin-left: 45%; margin-right: 30%; margin-top: -2%; z-index: 99999; position: absolute;}

/*inicio*/

.carousel{
	width: 90%;
	height: 90%;
	margin-right: 5%;
	margin-left: 5%;
	margin-top: 2%;
}

.img-nosotros{ width: 100%; position: relative; display: inline-block; text-align: center; color: black; }

.img-nosotros img{ width: 25%; align-content: center; }

.centrado{
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.mision{width: 80%; margin-left: 10%; margin-right: 10%;}
.vision{width: 80%; margin-left: 10%; margin-right: 10%; margin-top: 5%;}
.video{width: 50%; margin-left: 25%; margin-right: 25%; height: 500px;}

/*nosotros*/
.icoa{width: 20px; margin-left: 4px;}
.contacto{width: 70%; margin-right: 15%; margin-left: 15%;}

/*servicios*/
.servicios{font-weight: bolder;}
.servicio{ width: 100%; position: relative; display: inline-block; text-align: center; color: black; margin-bottom: 5%; }
.servicio h1{color: white; font-weight: bolder;}
.servicio img{ width: 50%; align-content: center; }

.centrado-servicio{
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.centrado-servicio h3{
	color: rgba(218, 165, 32,0.8);
	font-size: 100px;
}

/*ruta*/
.mapa{height: 90%;}

/*solucion de servicios*/
.circulo {
    width: 300px;
    height: 300px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: white;
    font­size: 0.8em;
    text­align: justify;
    border: 20px solid rgb(11, 77, 173);
    box-shadow: 5px 5px 10px black;
    position: absolute;
    top: 55%;
	left: 50%;
    transform: translate(-50%, -50%);
}
.circulo h2{
	position: absolute;
    top: 55%;
	left: 50%;
    transform: translate(-50%, -50%);
}
.text-dorado{
	color: rgb(201, 162, 0);
	font-weight: bolder;
}

.atencion{
	width: 300px; height: 10%; background-color: white; border: 2px solid rgb(11, 77, 173); border-top-left-radius: 50px; border-bottom-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px;left: 25%; position: absolute; top: 35%; box-shadow: 5px 5px 10px black; display: none; 
}
.atencion h5{ margin-top: 2.5rem; color:black; font-size: 20px; font-weight: bolder;}
.rastreo{
	width: 300px; height: 10%; background-color: white; border: 2px solid rgb(11, 77, 173); border-top-left-radius: 50px; border-bottom-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px;left: 25%; position: absolute; top: 46%; box-shadow: 5px 5px 10px black; display: none; 
}
.rastreo h5{ margin-top: 2.5rem; color:black; font-size: 20px; font-weight: bolder;}
.monitoreo{
	width: 300px; height: 10%; background-color: white; border: 2px solid rgb(11, 77, 173); border-top-left-radius: 50px; border-bottom-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px;left: 25%; position: absolute; top: 57%; box-shadow: 5px 5px 10px black; display: none; 
}
.monitoreo h5{ margin-top: 1.8rem; color:black; font-size: 20px; font-weight: bolder;}
.infra{
	width: 300px; height: 10%; background-color: white; border: 2px solid rgb(11, 77, 173); border-top-left-radius: 50px; border-bottom-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px;left: 25%; position: absolute; top: 68%; box-shadow: 5px 5px 10px black; display: none; 
}
.infra h5{ margin-top: 2.5rem; color:black; font-size: 20px; font-weight: bolder;}
.estrategia{
	width: 310px; height: 10%; background-color: white; border: 2px solid rgb(11, 77, 173); border-top-left-radius: 50px; border-bottom-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px;left: 42%; position: absolute; top: 74%; box-shadow: 5px 5px 10px black; display: none; 
}
.estrategia h5{ margin-top: 1.8rem; color:black; font-size: 20px; font-weight: bolder;}
.poliza{
	width: 300px; height: 10%; background-color: white; border: 2px solid rgb(11, 77, 173); border-top-left-radius: 50px; border-bottom-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px;left: 60%; position: absolute; top: 35%; box-shadow: 5px 5px 10px black; display: none; 
}
.poliza h5{ margin-top: 1.8rem; color:black; font-size: 20px; font-weight: bolder;}
.personal{
	width: 300px; height: 10%; background-color: white; border: 2px solid rgb(11, 77, 173); border-top-left-radius: 50px; border-bottom-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px;left: 60%; position: absolute; top: 46%; box-shadow: 5px 5px 10px black; display: none; 
}
.personal h5{ margin-top: 1.8rem; color:black; font-size: 20px; font-weight: bolder;}
.flotilla{
	width: 300px; height: 10%; background-color: white; border: 2px solid rgb(11, 77, 173); border-top-left-radius: 50px; border-bottom-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px;left: 60%; position: absolute; top: 57%; box-shadow: 5px 5px 10px black; display: none; 
}
.flotilla h5{ margin-top: 2.3rem; color:black; font-size: 20px; font-weight: bolder;}
.carga{
	width: 300px; height: 10%; background-color: white; border: 2px solid rgb(11, 77, 173); border-top-left-radius: 50px; border-bottom-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px;left: 60%; position: absolute; top: 68%; box-shadow: 5px 5px 10px black; display: none; 
}
.carga h5{ margin-top: 2rem; color:black; font-size: 20px; font-weight: bolder;}

/*cliente*/
.cliente{width: 50%; margin-left: 25%; margin-right: 25%; margin-top: 5%;}
.cliente h3{font-weight: bolder;}
.cliente .img-thumbnail{
	border: 2px solid black !important;
	    border-radius: 1rem;
}




@media only screen and (max-device-width: 1450px){
	.atencion{left: 15%; }
	.rastreo{ left: 15%; }
	.monitoreo{ left: 15%; }
	.infra{ left: 15%; }
	.estrategia{ left: 40%; }
	.poliza{ left: 65%; }
	.personal{ left: 65%; }
	.flotilla{ left: 65%; }
	.carga{ left: 65%; }
}

@media only screen and (max-device-width: 1280px){
	/*solucion*/
	.atencion{width: 230px; left: 10%; }
	.atencion h5{ margin-top: 1.5rem; color:black; font-size: 18px; font-weight: bolder;}
	.rastreo{width: 230px; left: 10%; }
	.rastreo h5{ margin-top: 1.5rem; color:black; font-size: 18px; font-weight: bolder;}
	.monitoreo{width: 230px; left: 10%; }
	.monitoreo h5{ margin-top: 1rem; color:black; font-size: 18px; font-weight: bolder;}
	.infra{width: 230px; left: 10%; }
	.infra h5{ margin-top: 1rem; color:black; font-size: 18px; font-weight: bolder;}
	.estrategia{width: 230px; left: 42%; top:75%;}
	.estrategia h5{ margin-top: .8rem; color:black; font-size: 18px; font-weight: bolder;}
	.poliza{width: 230px; left: 70%; }
	.poliza h5{ margin-top: 1rem; color:black; font-size: 18px; font-weight: bolder;}
	.personal{width: 230px; left: 70%; }
	.personal h5{ margin-top: 1rem; color:black; font-size: 18px; font-weight: bolder;}
	.flotilla{width: 230px; left: 70%; }
	.flotilla h5{ margin-top: 1.5rem; color:black; font-size: 18px; font-weight: bolder;}
	.carga{width: 230px; left: 70%; }
	.carga h5{ margin-top: 1rem; color:black; font-size: 18px; font-weight: bolder;}

	@media only screen and (min-device-height: 950px){
		/*solucion*/
		.atencion h5{ margin-top: 2rem !important; }
		.rastreo h5{ margin-top: 2rem !important; }
		.monitoreo h5{ margin-top: 1.8rem !important; }
		.infra h5{ margin-top: 1.8rem !important; }
		.estrategia{width: 230px; left: 42%; top:75%;}
		.estrategia h5{ margin-top: 1.5rem !important; }
		.poliza h5{ margin-top: 1.8rem !important; }
		.personal h5{ margin-top: 1.8rem !important; }
		.flotilla h5{ margin-top: 2rem !important; }
		.carga h5{ margin-top: 1.8rem !important; }
		.footer{height: 12%;}

		/*clientes*/
		.cliente{width: 80%; margin-left: 10%; margin-right: 10%; margin-top: 5%;}
		.cliente h3{ margin-bottom: 5%;}
		.cliente .img-thumbnail{ height: 100px;}

	}

}

@media only screen and (max-device-width: 600px) {
	.ico{width: 60px; margin-left: 4px; margin-top: 3%;}
	/*menu*/
	.menum{width: 100%; height: 9%; margin-top: 8%; padding: 0;  box-sizing: content-box!important; z-index: 9999;}
	.mmenu{width: 100%; height: 550%;}
	.mmenu p{font-size: 50px;}
	.navbar-togglermenu{height: 50%; width:10%;}
	.menu{max-width: 100%;}
	.menu .nav-item {max-height: 15%;}
	/*inicio*/
	.carousel{width: 90%;height: 40%;}
	.img-nosotros{ width: 100%; position: relative; display: inline-block; text-align: center; color: black; font-weight: bolder;}

	.img-nosotros img{ width: 40%; align-content: center; }
	.img-nosotros h3{ font-weight: bolder; }

	.mision h5{font-size: 30px;}
	.vision h5{font-size: 30px;}

	/*nosotros*/
	.col-6 {max-width: 100%; flex: none;}
	.nosotros
	.historia p{font-size: 40px;}
	.valores p{font-size: 20px;}

	/*servicios*/
	.tecnologia h1,h2{font-weight: bolder;}
	.tecnologia li,p{font-size: 30px; margin-top: -8px;}
	.servicio img{ width: 65%; align-content: center; }
	.centrado-servicio h3{font-size: 80px;}

	/*ruta*/
	.mapa{height: 1000px; max-width: 2000px; align-content: center; margin-left: -50%;  margin-top: 15%;}

	/*clientes*/
	.cliente{width: 90%; margin-left: 5%; margin-right: 5%; margin-top: 20%;}
	.cliente h3{font-size: 35px; margin-bottom: 5%;}
	.cliente .img-thumbnail{ border: 2px solid black !important; border-radius: 1rem; width: 100%; height: 150px;}

	/*solucion*/
	.circulo {top:45%;}
	.atencion{width: 300px;height: 5%; left: 5%; top: 25%;}
	.atencion h5{ margin-top: 1.8rem; color:black; font-size: 18px; font-weight: bolder;}
	.rastreo{width: 300px;height: 5%;  left: 5%; top: 36%;}
	.rastreo h5{ margin-top: 1.8rem; color:black; font-size: 18px; font-weight: bolder;}
	.monitoreo{width: 300px; height: 5%; left: 5%; top: 47%;}
	.monitoreo h5{ margin-top: 1.5rem; color:black; font-size: 18px; font-weight: bolder;}
	.infra{width: 300px;height: 5%; left: 5%; top: 58%;}
	.infra h5{ margin-top: 1.8rem; color:black; font-size: 18px; font-weight: bolder;}
	.estrategia{width: 300px;height: 5%; left: 35%; top: 65%;}
	.estrategia h5{ margin-top: 1rem; color:black; font-size: 18px; font-weight: bolder;}
	.poliza{width: 300px;height: 5%; left: 65%; top: 25%;}
	.poliza h5{ margin-top: 1.5rem; color:black; font-size: 18px; font-weight: bolder;}
	.personal{width: 300px;height: 5%; left: 65%; top: 36%;}
	.personal h5{ margin-top: 1.5rem; color:black; font-size: 18px; font-weight: bolder;}
	.flotilla{width: 300px;height: 5%; left: 65%; top: 47%;}
	.flotilla h5{ margin-top: 1.8rem; color:black; font-size: 18px; font-weight: bolder;}
	.carga{width: 300px;height: 5%; left: 65%; top: 58%;}
	.carga h5{ margin-top: 1.5rem; color:black; font-size: 18px; font-weight: bolder;}
	/*footer*/
	.footer{height: 16.5%;}

}