/****FONTS********/
@font-face {
    font-family: 'creato_displayblack';
    src: url('../fonts/creatodisplay-black-webfont.woff2') format('woff2'),
         url('../fonts/creatodisplay-black-webfont.woff') format('woff');    
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'bebasneue_bold';
    src: url('../fonts/bebasneue_bold-webfont.woff2') format('woff2'),
        url('../fonts/bebasneue_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'creato_displaymedium';
    src: url('../fonts/creatodisplay-medium-webfont.woff2') format('woff2'),
         url('../fonts/creatodisplay-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

h1 ,h2, h3, h4, h5, h6{color: #000; font-family: 'bebasneue_bold' !important;}
footer, p, ul li, label, select, option{color: #000;font-family: 'creato_displaymedium' !important;}
/****GENERAL********/
#home-float-button{
    left: 10%;
    top: 26%;
    position: absolute;  
    /* background-image: url('../icons/DOWN.png');
    background-repeat: no-repeat;
    background-size: 50%; */
    background-color:transparent;
    /* background-attachment: fixed;
    background-position: center; */
    cursor: pointer;
    padding: 0;
    border-radius: 3rem; 
    z-index: 99;  
    font-size: 18px;
    border: none;
    outline: none; 
    align-items: center;
}
#home-float-button img{
    width: 50px;
}

#topBtn {
    display: none;
    position: fixed;
    bottom: 5%;
    right: 5%;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-image: url('../icons/DOWN.png');
    background-repeat: no-repeat;
    background-size: 50%;
    background-color:#D07C32;
    background-attachment: fixed;
    background-position: center;
    transform: rotate(180deg);
    cursor: pointer;
    padding: 2rem;
    border-radius: 3rem;
}

#topBtn:hover {
    background-color: #9F7833;
}

.active_menu{border-bottom: 2px solid #fff;}
.title_page{
    color: #fff;
    z-index: 999999;
    margin-top: -5rem;
    margin-bottom: 2rem;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); /* horizontal offset, vertical offset, blur radius, color */
}
#subheader nav ul{
    margin: 0;
    padding: 0;
}
#subheader nav ul li{
    display: inline-block;
    position: relative;
    z-index: 1;
    list-style: none;
}
#subheader a{
    color: #ADADAB;
    text-decoration: none;
    padding: 12px 50px;
    display: block;
    text-transform: uppercase;
    position: relative;
    font-family: bebasneue_bold;
    font-size: 17px;
}
#subheader a.active{
    color: #E9A34C;
}
#subheader a:hover{
    color: #E9A34C;
}
#subheader a#before:before{
    content: "";
    width: 1px;
    height: 15px;
    background: #ADADAB;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.img-head{
    width: 100%;
    height: 550px;
    object-fit: cover;
}
.img-head-mapa{
    width: 100%;
    height: 550px;
    max-width: 1330px;
    max-height: 550px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.bg-grey{background-color: #E7E6E6;}
.text-right{text-align: right;}
.text-upper{text-transform: uppercase;}
.bg-card{background-color: #ECF2F7 !important;}
.btn-blue{background-color: #07468E; border: 1px solid #002F87; color: #fff;font-size: 1.3rem;}
.btn-blue:hover{color: #FDB53F;}
.white{color: #fff;font-family: 'creato_displaymedium' I !important;}

#banner{
    /* background-image: url('/images/banner.png'); */
    margin-bottom: 5px;
    cursor: pointer;
    padding: 0rem;
}
/****FIX NAVBAR********/
@media (max-width: 991px) {
    #mainNav{
        display: block;
    }
}
/****CAROUSEL TRUCKS********/
.truck {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}  
.truck:hover {opacity: 0.7;}
.modal-truck {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99999; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }
  
  /* Modal Content (image) */
  .modal-truck .modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
  }
    
  /* Add Animation */
  .modal-truck .modal-content {  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
  }
  
  @-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
  }
  
  /* The Close Button */
  .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  
  .close:hover,
  .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
  }
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
    .modal-truck .modal-content {
      width: 100%;
    }
  }

/****HOME********/
.prev, .next,
.carousel-prev, .carousel-next{
    width: 20%;
    cursor: pointer;
}
#home{}

.iframe{
    width: 560px;
    height: 315px;
    border-radius: 1rem;
}
#myVideo {
    margin-top: -3rem;
    height: 100vh;
    object-fit: fill;
    width: 100%;
  }

  /* .content_video {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.0);
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
  } */

#map-desktop{
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: #00387D;
    height: 500px;
    justify-content: center; /* Center vertically */
  
}
#map-desktop img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Maintain aspect ratio and fit within the container */
}
#map-desktop .map-text-left{
    position: absolute;
    top: 15px;
    left: 25px;
    text-align: left;
}
#map-desktop .map-text-right{
    position: absolute;
    top: 15px;
    right: 25px;
    text-align: right;
}
#map-desktop p{
    color: #fff;
    font-size: 13px;
    line-height: 1.1;
}

#map-mobile{
    display: none;
    background-color: #0A191F;
    padding: 0;
}
#map-mobile .map-subtitle{
    padding: 0 1.5rem;
    transform: translateY(-110%);
    line-height: 1.1;
}
#map-mobile span{
    color: #fff;
    font-size: 14px;
    font-family: 'creato_displaymedium'
}
#map-mobile p{
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
}

footer img.logo{
    width: 70%;
}

#footer-social-media {
    text-align: left;
    transform: translateY(-25%);
}

#footer-social-media img{
    max-width: 7%;
}
.footer-section-right{
    margin-bottom: 0.5rem;
}

/****about US********/

#mision{background-color: #07468E;}
#mision .container h4, #mision .container p{
    color: #fff;
}
#about_img_first{
    text-align: right;
}
#about_us_video img#first{
    width: 40%;   
    margin: 0 2rem; 
}
#about_us_video img#second{
    width: 45%;  
    margin: 0 2rem;  
}
.video{
    width: 100%;
    height: 600px;
}

/****Services********/
.title-service{
    text-align: center;
    background-color: rgb(162,161,163,.5) !important;
    color: #fff !important;
    transform: translateY(-98%);
    font-size: 18px;
    padding: 5px;
    /* margin-bottom: -7%; */
}
.img-service{
    height: 215px;
    width: 100%;
    object-fit: cover;
}
.title-service:hover,
.img-service:hover + .title-service{background-color: #FDB53F !important;}
.g-scrolling-carousel .items{
    padding: 5px 0;

 }
 .g-scrolling-carousel .items img{
    display: inline-block;
    margin-right: 10px;
    height: 250px;
    line-height: 150px;
    box-shadow: 0 0 5px #000;
    text-align: center;
 }
 .jc-left {
    left: 15px !important;
}
.jc-right {
    right: 15px !important;
}
.g-scrolling-carousel .items {
    width: 90% !important;
    margin-left: 5% !important;
}
/****OPERADORES********/
.modal-content{
    background-color: transparent !important;
    border: none;
}
.modal-body{
    background-color: #07468E !important;
    opacity: 0.9;
}
.modal-header{
    background-color: transparent !important;
    border: none;
}
.modal-body{text-align: center !important; padding: 30px;}
.modal-body h5{color: #fff;}
.modal-body a{color: #E7E6E6;}
/****TERMINALES********/
.no-margin-bottom{margin-bottom: 0 !important;}
/* DESKTOP */
#bg-black{
    width: auto; 
    background-color: #0F181F; 
    height: 550px;
    overflow-y: hidden;
    overflow-x: scroll;
}
#terminal-header-desktop{width: 1330px; margin: 0 auto;}
#terminal-header-desktop #tijuanaBtn{
    position: absolute;
    top: 6.2%;
    left: 23.8%;
    width: 115px;
    height: 18px;
    background-size: cover;
    z-index: 999999;
}
#terminal-header-desktop #mexicaliBtn{
    position: absolute;
    top: 11%;
    left: 27.4%;
    width: 115px;
    height: 18px;
    background-size: cover;
    z-index: 999999;
    
}
#terminal-header-desktop #nogalesBtn{
    position: absolute;
    top: 20%;
    left: 32.7%;
    width: 115px;
    height: 18px;
    background-size: cover;
}
#terminal-header-desktop #juarezBtn{
    position: absolute;
    top: 16.6%;
    left: 41.3%;
    width: 115px;
    height: 18px;
    background-size: cover;
}
#terminal-header-desktop #chihuahuaBtn{
    position: absolute;
    top: 27.8%;
    left: 41.29%;
    width: 115px;
    height: 18px;
    background-size: cover;
}
#terminal-header-desktop #laredoBtn{
    position: absolute;
    top: 33.3%;
    right: 39.25%;
    width: 115px;
    height: 18px;
    background-size: cover;
}
#terminal-header-desktop #monterreyBtn{
    position: absolute;
    top: 44%;
    right:40.6%;
    width: 115px;
    height: 18px;
    background-size: cover;
}

#terminal-header-desktop #reynosaBtn{
    position: absolute;
    top: 38.9%;
    right: 37%;
    width: 115px;
    height: 18px;
    background-size: cover;
}
#terminal-header-desktop #guadalajaraBtn{
    position: absolute;
    bottom: 27.5%;
    right: 46.19%;
    width: 115px;
    height: 18px;
    background-size: cover;
}
#terminal-header-desktop #mexicoBtn{
    position: absolute;
    bottom: 26.5%;
    right: 38.65%;
    width: 115px;
    height: 18px;
    background-size: cover;
}

#terminal-header-desktop #salamancaBtn{
    position: absolute;
    bottom: 33.3%;
    right: 42.65%;
    width: 115px;
    height: 18px;
    background-size: cover;
}

#terminal-header-desktop .btn-map{
    font-size: 7px;
    padding: 2px 4px;
    
}
/* GENERAL MAP */
#terminal-header-desktop{
    display: block;
    position: relative;
}
#terminal-header-desktop .btn-map{
    /* background-color: #FFB826; */
    color: #fff;
    font-family: 'creato_displaymedium';
    border: none;
    text-align: center;
    letter-spacing: 0.7px;
    /* font-size: 0.5em; */
    line-height: 15px;
}

#terminal-header-desktop .btn-map:hover {
    background-image: url('../images/headers/Cinta-Naranja.png');
    animation: fadeIn 0.5s forwards;
}

#terminal-header-desktop .btn-map:not(:hover) {
    background-image: url('../images/headers/Cinta-Azul.png');
}

#terminal-subheader-desktop{
    position: absolute;
    bottom: 20%;
    left: 7%;
    color: #fff;
    font-size: 15px;
}
#terminal-header-mobile{
    display: none;
}
#terminal-header-mobile .img-head{
    height: 100%;
}
#terminal-subheader-mobile{
    margin-top: -1.5rem;
    transform: translateY(-100%);
    color: #fff;
    font-size: 15px;
}
#terminal-subheader-mobile .title_page{
    margin-left: 7rem;
}

/****responsive********/
/****responsive********/
@media (min-width: 992px) and (max-width: 1199px) {
    #subheader a{
        padding: 12px 35px;
    }
    #home-float-button{
        top: 24%;
    }
}
/****responsive********/
@media (max-width: 991px) {
    #home-float-button{
        top: 12%;
    }
    #home-float-button img{
        width: 40px;
    }
    section,
    .title_page{
        text-align: center;
    }
    #subheader a{
        padding: 12px 7px;
    }

    #about_img_first{
        text-align: center;
    }

    #about_us_video img#first{
        width: 80%;    
    }
    #about_us_video img#second{
        width: 80%;    
    }
    #security-page p{
        font-size: 16px;
        line-height: 1.5;
    }
    .title-service {
        margin-bottom: -3%;
    }
    .img-service{
        height: 150px;
    }
    #myVideo {
        margin-top: -3rem;
        height: 100;
        max-width: 100%;
        min-height: auto;
        object-fit: fill;
      }
}
/****responsive********/
@media only screen and (max-width: 600px) {

/****GENERAL********/
.img-head,
.img-head-mapa{
    margin-top: 72px;
    object-fit: contain;
    
}
.title_page{margin-top: -2rem;margin-bottom: 2rem;}
section{padding-top: 30px;padding-bottom: 30px;}
.prev, .next,
.carousel-prev, .carousel-next{
    width: 50%;
}
/****HOME********/
.img-head{
    width: 100%;
    height: 250px;
    object-fit: cover;
}
.img-head-mapa{
    width: 100%;
    height: 250px;
}
#myVideo {
    margin-top: -3rem;
    height: 100%;
    max-width: 100%;
    min-height: auto;
    object-fit: fill;
  }
.iframe{
    width: 340px;
    height: 200px;
    border-radius: 1rem;
}
#map-desktop{
    display: none;
}
#map-mobile{
    display: block;
}

footer img.logo{
    width: 40%;
}
#footer-social-media {
    text-align: center;
    transform: translateY(0);
    margin: 15px 0px;
}
#footer-social-media img{
    max-width: 10%;
}

.footer-section-right{
    margin-bottom: 0;
}
/****About Us********/
.video{
    width: 100%;
    height: auto;
}
/****Services********/
.title-service{
    font-size: 12px;
}
/****terminal********/
#terminal-header-desktop{
    display: none;
}
#terminal-header-mobile{
    display: block;
}
#bg-black{display: none;}

}

.fade-in {
    animation: fadeIn 0.5s forwards;
}

.fade-out {
    animation: fadeOut 0.5s forwards;
}

.slide-in {
    animation: slideIn 0.5s forwards;
}

.slide-out {
    animation: slideOut 0.5s forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes slideIn {
    0% {
        /* transform: translateX(-100%); */
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    0% {
        /* transform: translateX(0); */
        opacity: 1;
    }
    100% {
        /* transform: translateX(100%); */
        opacity: 0;
    }
}