@font-face { font-family: 'InstrumentSans-Bold'; src: url('../fonts/InstrumentSans-Bold.ttf'); }
@font-face { font-family: 'InstrumentSans-Italic'; src: url('../fonts/InstrumentSans-Italic.ttf'); }
@font-face { font-family: 'InstrumentSans-Regular'; src: url('../fonts/InstrumentSans-Regular.ttf'); }
@font-face { font-family: 'WorkSans-Regular'; src: url('../fonts/WorkSans-Medium.otf'); }

.instrument_bold{ font-family: 'InstrumentSans-Bold'; }
.instrument_italic{ font-family: 'InstrumentSans-Italic'; }
.instrument_regular{ font-family: 'InstrumentSans-Regular'; }
.work_regular{ font-family: 'WorkSans-Regular'; }

.pd0{ padding: 0; }
h1, h2, h3, h4, h5, p{ margin: 0; }
.rojo_txt{ color: #C71714; }
.gris_txt{ color: #182825; }
.azul_txt{ color: #708994; }
.w100{ width: 100%; }
.d-flex{ display: flex; }
.m5{ margin: 10px 0; }
.mt2{ margin-top: 5px; } 

.navbar{ margin-bottom: 0 !important; background-color: #C71714; border: none; border-radius: 0; position: fixed; z-index: 3; width: 82.5%; right: 0; top: 1.5em; }
.navbar-brand img{ height: 20px; }
.navbar a{ color: #fff !important; font-family: 'InstrumentSans-Italic'; }
.navbar-toggle .icon-bar{ background-color: #fff !important; }

#menu{ display: none; }
#menu a { text-decoration: none; position: relative; display: inline-block; color: #333; transition: color 0.3s; padding-bottom: 0; }
#menu a:hover { color: #fff; background-color: unset; }
#menu a::after { content: ""; position: absolute; width: 0%; height: 2px; bottom: 0; left: 0; background-color: #fff; transition: width 0.3s; }
#menu a:hover::after { width: 100%; }

.video{ width: 100%; margin-bottom: -5px; }
.logo{ position: absolute; }
.logo img{ width: 100%; }

.quienes_somos{ background-position: bottom; background-size: cover; background-repeat: no-repeat; height: 100vh; display: flex; color: #fff; }

.soluciones{ height: 100vh; display: flex; align-items: center; }
.servicio_integral{ text-align: justify; }

.servicios{ background-position: top; background-size: cover; background-repeat: no-repeat; height: 100vh; display: flex; color: #fff;}
.camiones>div{ color: #182825; font-family: 'InstrumentSans-Regular'; display: flex; align-items: flex-end; justify-content: flex-end; }

.diferenciadores{background-position: center; background-size: cover; background-repeat: no-repeat; height: 100vh; display: flex; }

.contacto{ background-color: #708994; height: 100vh; color: #fff; display: flex; align-items: center; }
.form-control{ border: none; border-radius: 0; font-family: 'WorkSans-Regular';}
.form-control::placeholder{ color: #708994; font-family: 'WorkSans-Regular'; font-style: italic; font-weight: bold; }
.btn_rojo{ width: 100%; background-color: #C71714; border: none; border-radius: 0px; font-size: 1.2em; padding: 10px 0; font-family: 'WorkSans-Regular'; font-style: italic; }
.btn_rojo:hover{ background-color: #182825; color: #fff; }
.rrss{ height: 2.5em; margin-top: 2em; }

.whats_fixed{ position: fixed; z-index: 10; right: 2em; text-align: right; bottom: 4em; }
.whats_fixed img{ width: 5em; }

.footer{ background-color: #708994; color: #fff; padding-bottom: 2em;}
.whats{ cursor: pointer; }

/* movil */
@media (max-width: 768px){
    .hidden-xs{ display: none; }
    .logo{ bottom: 8em; }
    .quienes_somos{ background-image: url('../images/banner_quienes_somos_mov.png'); height: 100vh; align-items: center; }
    h2{ font-size: 2.7em; }
    h3{ font-size: 2em; }
    h4{ font-size: 1em; }
    h5{ font-size: 1em; }

    .soluciones{ height: 100vh; }
    .servicio_integral{ margin-top: 2em; }
    
    .servicios{ background-image: url('../images/banner_servicios_mov.png'); height: 100vh; align-items: center; }
    .camiones img{ width: 30%; margin-bottom: 4px; }
    .camiones h1{ font-size: 2em; margin-right: 10px; }
    .servicios h4{ font-size: 1.5em; }

    .diferenciadores{ background-image: url('../images/banner_diferenciadores_mov.png'); height: 100vh; align-items: center; padding-top: 5em; padding-bottom: 5em; }
    .diferencia{ padding-bottom: 10em; }
    .diferenciadores h5{ font-size: 1.4em; }

    .contacto{ padding-top: 4em; }
    .form-control{ font-size: 1.2em; }
    .logos_contacto{ justify-content: center; }

    .logo_footer{ padding-top: 7em; }
}

/* tablet */
@media (min-width: 769px) and (max-width: 1080px) {
    h2{ font-size: 4em; }
    h3{ font-size: 2.5em; }
    h4{ font-size: 1.4em; }
    h5{ font-size: 1.2em; }

    .quienes_somos{ background-position: bottom right; height: 80vh; }
    .soluciones{ height: 80vh; }
    .servicio_integral{ margin-top: -1.5em !important; }

    .servicios{ background-position: top left; height: 80vh; }
    .camiones h1, .diferencia h1{ font-size: 4em !important; }
    .quienes_somos, .servicios, .diferenciadores{ padding-bottom: 8em; }
    .camiones img{ width: 20% !important; }
    .diferenciadores{ background-image: url('../images/banner_diferenciadores_mov.png'); height: 80vh; }
    .diferenciadores h5{ font-size: 1.5em; }
    .diferencia{ padding-bottom: 17em; }

    .contacto{ height: 80vh; }
    .contacto .logo_footer{ padding-top: 5em; }
    /* .contacto a{ padding-top: 3em; } */

    .navbar-toggle{ display: block; }
    .navbar-collapse.collapse{ display: none !important; overflow: hidden !important; }
    .navbar-header{ float: none !important; }
} 


/* desk */
@media (min-width: 769px){
    .hidden-sm{ display: none; }

    .logo{ bottom: 0em; }
    .quienes_somos{ background-image: url('../images/banner_quienes_somos_desk.png'); align-items: flex-end; }
    
    .servicio_integral{ margin-top: -2.5em; }
    
    .servicios{ background-image: url('../images/banner_servicios_desk.png'); align-items: flex-end; }
    .camiones img{ width: 15%; margin-bottom: 10px; }
    .camiones h1, .diferencia h1{ font-size: 5.8em; margin-right: 1em; }
    .servicios h4{ margin-bottom: 1em; }

    .diferenciadores{ align-items: flex-end; }
    
    .form-control{ font-size: 1.2em; }
    
    .logos_contacto{ justify-content: flex-end; }
}

@media (min-width: 1080px){
    .contacto h1{ font-size: 3em; }
    h2{ font-size: 4.9em; }
    h3{ font-size: 4.7em; }
    h4{ font-size: 1.65em; }
    h5{ font-size: 1.7em; }
    .h2_esp{ font-size: 5.1em; padding-bottom: 0.5em; }
    .servicios h4{ font-size: 2em; }
    .quienes_somos, .servicios, .diferenciadores{ padding-bottom: 5em; }
    .diferenciadores{ background-image: url('../images/banner_diferenciadores_desk.png'); }

    .contacto{ justify-content: center; margin-bottom: -1em; }
    .contacto>div{ display: flex; align-items: center; }
}

@media (min-width: 2560px){
    .diferencia{ padding-bottom: 25em; }
}


.slideInLeftJs, .slideInDownJs, .slideInUpJs, .slideInRightJs{ visibility: hidden; }
.zoomInJs{ opacity: 0; }
html{ scroll-behavior: smooth; }