@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

body *{
    font-family: "Montserrat", sans-serif;
}

.btn{
    @apply font-bold border rounded px-4 py-3 text-lg focus:ring-4  focus:ring-opacity-50;
}
.btn-primary{
    @apply bg-primary text-white border-primary focus:ring-green-500;
}
.form-control{
    @apply rounded-sm w-full block border-2 border-gray-400 focus:ring-4 focus:ring-blue-400 focus:ring-opacity-40;
}
.form-control.is-invalid{
    @apply  border-red-700 text-red-500 ring-4 ring-red-700 ring-opacity-40;
}
.marcas-list li{
    @apply py-1;
}
.title{
    @apply text-xl text-white font-bold px-8 py-3 w-full bg-gray-400;
}
.title.active{
    @apply bg-primary;
}
.content{
    @apply hidden;
}
.content.show{
    @apply block;
}
ul li{
    @apply text-base leading-tight mt-3;
}
li strong{
    @apply text-primary;
}
video::-webkit-media-controls { /* Works only on Chrome-based browsers */
    display: none;
}
video::-webkit-media-controls-panel {
display: none;
-webkit-appearance: none;
}
video::-webkit-media-controls-play-button {
display: none;
-webkit-appearance: none;
}
video::-webkit-media-controls-start-playback-button {
display: none;
-webkit-appearance: none
}

video::-webkit-media-controls {
display: none;
-webkit-appearance: none;
}

p{
    @apply text-content text-xl;
}

.Borde::before{
    content: ' ';
    width: 6rem;
    height: 10px;
    @apply bg-naranja;
    position: relative;
    top: -20px;
    display: block;
}

.BordeWhite::before{
    content: ' ';
    width: 3rem;
    height: 6px;
    @apply bg-white;
    position: relative;
    top: -10px;
    display: block;
}

.slick-dots li button{
    background: white !important;
}

#equipo-slider li button,
#PressRoom li button,
#Reconocimientos li button{
    background: #706d6d !important;
}

.slick-dots li.slick-active button:before {
    opacity: .75;
    @apply text-naranja bg-naranja;
}

.slick-dots li button:before {
    @apply bg-white;
}

.form-control::placeholder{
    @apply text-white uppercase;
}

.banner-home{
    height: 900px;
}

.imagen-con-borde {
    position: relative;
    display: inline-block;
  }
  
  .imagen-con-borde img {
    display: block;
  }
  
  .imagen-con-borde::before {
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    width: 12%; /* Ajusta este valor al tamaño del borde que desees */
    height: 20%; /* Ajusta este valor al tamaño del borde que desees */
    border-top: 12px solid #FF5C35; /* Color y grosor del borde */
    border-right:12px solid #FF5C35; /* Color y grosor del borde */
  }


  .foto-con-borde {
    position: relative;
    display: inline-block;
}

.foto-con-borde img {
    display: block;
}

.foto-con-borde::before {
    content: "";
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 22%;
    height: 18%;
    border-bottom: 8px solid #FF5C35;
    border-right: 8px solid #FF5C35;
}

.areas-list .active{
    @apply bg-naranja text-white;
}

.MainMenu li{
    @apply text-lg font-bold mx-4;
}
.MainMenu li.active{
    @apply text-naranja font-bold;
}

.cel{
    display: none;
}
#servicios-slider .slick-next:before, #servicios-slider .slick-prev:before{
    font-size: 25px;
    font-weight: 900;
}

#servicios-slider .slick-next, #servicios-slider .slick-prev{
    border-radius: 0;
} 

.btn.rounded-none{
    border-radius: 0 !important;
}

/* main{
    background-color: #fff;
} */


@media (max-width: 1440px){
    .banner-home{
        height: 800px;
    }
}

@media (max-width: 1367px){
    .banner-home{
        height: 700px;
    }
}

@media (max-width: 1080px){
    .LetrasRTFM{
        width: 50px !important;
    }
    .LetrasRTFM2{
        width: 50px !important;
        top: -32% !important;
    }
}

#Reconocimientos .desk{
    display: block !important;
}
#asociaciones-slider.movil{
    display: none !important;
}
@media (max-width: 640px){
    p, .btn{
        font-size: 1rem !important;
    }
    #Reconocimientos .desk{
        display: none !important;
    }
    #asociaciones-slider.movil{
        display: block !important;
    }
    

}

@media (max-width:480px){
    .cel{
        display: block;
    }
}