/* VARIABLES */
:root {
    --main-color: #FF0000;
    --main-color-light: #f3f3f3;
    --main-color-dark: #535250;
}

/*HEADER CSS*/

nav.sticky { box-shadow: 0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
nav.sticky { background-color: var(--main-color); }

nav.sticky .cta-button { background-color: #fff; }
nav.sticky .cta-button:hover { background-color: var(--main-color); }
nav.sticky .cta-button { color: var(--main-color); }
nav.sticky .cta-button:hover { color: white; }

@media (min-width: 1023px) {
nav.sticky.sticked .cta-button { background-color: var(--main-color); }
nav.sticky.sticked .cta-button:hover { background-color: white; }
nav.sticky.sticked .cta-button { color: white; }
nav.sticky.sticked .cta-button:hover { color: var(--main-color); }
}

nav.sticky.sticked { box-shadow: none; }
nav.sticky.sticked { background-color: transparent; }

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay{
    background:#ff0000!important;
    border-color:#ff0000!important;
}
.flatpickr-wrapper {
    width: 100%;
}
.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)){
    box-shadow:-10px 0 0 #ff0000!important;
}


@media (max-width: 1023px) {
    
    .dropdown-toggle.open ~ .dropdown { max-height: 100%; }
    .dropdown-toggle.open .icon { transform: rotate(180deg); }
    .dropdown-toggle:not(.open) ~ .dropdown {max-height:0px;}
    
    body.navbar-open { height: 100vh; overflow: hidden; }
    
    body{margin-top: 4rem;}
    .navbar { pointer-events: none; }
    .navbar.open { pointer-events: auto; }
    .navbar .navbar-content { transform: translateX(100%); }
    .navbar.open .navbar-content { transform: translateX(0); }
    .navbar .navbar-overlay { opacity: 0;}
    .navbar.open .navbar-overlay { opacity: 1; }
}

/* MAIN COLOR */
.text-main-color { color: var(--main-color); }
.group:hover .group-hover\:text-main-color { color: var(--main-color); }
.hover\:text-main-color:hover { color: var(--main-color); }
.focus\:text-main-color:focus { color: var(--main-color); }
.bg-main-color { background-color: var(--main-color); }
.hover\:bg-main-color:hover { background-color: var(--main-color); }
.focus\:bg-main-color:focus { background-color: var(--main-color); }
.border-main-color { border-color: var(--main-color); }
.hover\:border-main-color:hover { border-color: var(--main-color); }
.focus\:border-main-color:focus { border-color: var(--main-color); }
.fill-main-color { fill: var(--main-color); }
.hover\:fill-main-color:hover { fill: var(--main-color); }
.focus\:fill-main-color:focus { fill: var(--main-color); }
.stroke-main-color { stroke: var(--main-color); }
.hover\:stroke-main-color:hover { stroke: var(--main-color); }
.focus\:stroke-main-color:focus { stroke: var(--main-color); }

/* MAIN COLOR LIGHT */
.text-main-color-light { color: var(--main-color-light); }
.group:hover .group-hover\:text-main-color-light { color: var(--main-color-light); }
.hover\:text-main-color-light:hover { color: var(--main-color-light); }
.focus\:text-main-color-light:focus { color: var(--main-color-light); }
.bg-main-color-light { background-color: var(--main-color-light); }
.hover\:bg-main-color-light:hover { background-color: var(--main-color-light); }
.focus\:bg-main-color-light:focus { background-color: var(--main-color-light); }
.border-main-color-light { border-color: var(--main-color-light); }
.hover\:border-main-color-light:hover { border-color: var(--main-color-light); }
.focus\:border-main-color-light:focus { border-color: var(--main-color-light); }
.fill-main-color-light { fill: var(--main-color-light); }
.hover\:fill-main-color-light:hover { fill: var(--main-color-light); }
.focus\:fill-main-color-light:focus { fill: var(--main-color-light); }
.stroke-main-color-light { stroke: var(--main-color-light); }
.hover\:stroke-main-color-light:hover { stroke: var(--main-color-light); }
.focus\:stroke-main-color-light:focus { stroke: var(--main-color-light); }

/* MAIN COLOR DARK */
.text-main-color-dark { color: var(--main-color-dark); }
.group:hover .group-hover\:text-main-color-dark { color: var(--main-color-dark); }
.hover\:text-main-color-dark:hover { color: var(--main-color-dark); }
.focus\:text-main-color-dark:focus { color: var(--main-color-dark); }
.bg-main-color-dark { background-color: var(--main-color-dark); }
.hover\:bg-main-color-dark:hover { background-color: var(--main-color-dark); }
.focus\:bg-main-color-dark:focus { background-color: var(--main-color-dark); }
.border-main-color-dark { border-color: var(--main-color-dark); }
.hover\:border-main-color-dark:hover { border-color: var(--main-color-dark); }
.focus\:border-main-color-dark:focus { border-color: var(--main-color-dark); }
.fill-main-color-dark { fill: var(--main-color-dark); }
.hover\:fill-main-color-dark:hover { fill: var(--main-color-dark); }
.focus\:fill-main-color-dark:focus { fill: var(--main-color-dark); }
.stroke-main-color-dark { stroke: var(--main-color-dark); }
.hover\:stroke-main-color-dark:hover { stroke: var(--main-color-dark); }
.focus\:stroke-main-color-dark:focus { stroke: var(--main-color-dark); }

/* BASE CLASES PROPIAS */
:focus,
input:focus,
button:hover, 
button:focus { outline: none; }
.tns-nav{display:flex;justify-content:center;width:100%;align-items:center;margin-bottom:10px;position:absolute;bottom:0px;}
.tns-nav button{background-color:#e4e4e4; opacity: 0.5; border:solid 0px white;width:20px; height:20px; border-radius:100%;margin:5px;}
.tns-nav button.tns-nav-active{ background-color: var(--main-color); opacity: 1; }

.tns-nav-custom {display:flex;justify-content:center;width:100%;align-items:center;margin-bottom:10px;position:relative;bottom:0px;}
.tns-nav-custom button{background-color:#e4e4e4; opacity: 0.5; border:solid 0px white;width:20px; height:20px; border-radius:100%;margin:5px;}
.tns-nav-custom button.tns-nav-active{ background-color: var(--main-color); opacity: 1; }

.titulo_resaltado span { color: #FF0000; font-weight: 600;}

@media (max-width:1023px){
.bg-red-500 { background-color: #FF0000; }
}
.bg-black-custom { background-color : #0006; }
.bg-gray { background-color: #D9D9D9; }
.bg-gray-light { background-color: #F4F4F4; }
.bg-rose { background-color: #eee; }

.text-gray-light { color: #7A7B7B; }
.text-gray { color: #A3A3A3; }
.text-gray-dark { color: #393939; }
.fill-gray-dark { fill: #393939; }
.hover\:text-gray-dark:hover { color: #393939; }

.border-gray { border-color: #D9D9D9; }
.border-gray-dark { border-color: #393939; }
.hover\:border-gray:hover { border-color: #D9D9D9; }
.hover\:border-gray-dark:hover { border-color: #393939; }

.shadow-custom { box-shadow: 0 0 20px 2px rgb(0 0 0 / 10%); } 
.shadow-custom2 { box-shadow: 0 0 20px 5px rgb(0 0 0 / 15%); }
.shadow-custom-small { box-shadow: 0 0 10px 2px rgb(0 0 0 / 10%); }

.blur { 
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(40px); 
}

.text-2xs {
    font-size: 0.6rem; /* 12px */
    line-height: 1rem; /* 16px */
}

.leading-normal { line-height: 1.5; }
.leading-tight { line-height: 1.25; }
.transition3s { transition: all 0.3s ease-in-out; }


.p-1\/20::after { content: ""; display: block; padding-top: 200%; }
.p-1\/16::after { content: ""; display: block; padding-top: 160%; }
.p-1\/15::after { content: ""; display: block; padding-top: 150%; }
.p-1\/14::after { content: ""; display: block; padding-top: 140%; }
.p-1\/12::after { content: ""; display: block; padding-top: 120%; }
.p-1\/10::after { content: ""; display: block; padding-top: 100%; }
.p-1\/9::after { content: ""; display: block; padding-top: 90%; }
.p-1\/8::after { content: ""; display: block; padding-top: 80%; }
.p-1\/7::after { content: ""; display: block; padding-top: 70%; }
.p-1\/6::after { content: ""; display: block; padding-top: 60%; }
.p-1\/5::after { content: ""; display: block; padding-top: 50%; }
.p-1\/4::after { content: ""; display: block; padding-top: 40%; }
.p-1\/3::after { content: ""; display: block; padding-top: 30%; }
.p-1\/2::after { content: ""; display: block; padding-top: 20%; }

.p-custom::after { content: ""; display: block; padding-top: 80%; }

@media (min-width: 768px) {
.p-custom::after { content: ""; display: block; padding-top: 50%; }
}
@media (min-width: 1024px) {
    /*
    .lg\:text-gray-dark {
        color: #393939;
    }
    */
    .animate-menu{
        transition: all .3s ease-in-out;
        pointer-events: none;
        opacity:0;
        transform: translate(0%,2rem);
    }
    
    .button-animate-menu:hover>.animate-menu{
        opacity:1;
        transform: translate(0%,0rem);
        pointer-events: all;
    }
    
    .p-custom::after { content: ""; display: block; padding-top: 40%; }
}
@media (min-width: 1280px) {
.p-custom::after { content: ""; display: block; padding-top: 30%; }
}

.last\:border-none > li:last-child,
.last\:border-none > a:last-child { border: none !important; }

.hover\:scale-sm:hover { transform: scale(1.1); }
.hover\:scale-md:hover { transform: scale(1.3); }
.hover\:scale-lg:hover { transform: scale(1.5); }

.rotate-180 { transform: rotate(180deg); }

.filter-white { filter: grayscale(100) brightness(0) invert(1); }
.group:hover .group-hover\:filter-white { filter: grayscale(100) brightness(0) invert(1); }

.-z-1 { z-index: -1; }

.social-media li { padding: 0px; }

.social-media li a { margin: 0px; display: flex; width: 100%; height: 100%; }

form input[type="checkbox"].form-radio {
    width: 1.3em;
    height: 1.3em;
    background-color: white;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #ddd;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}

form input[type="checkbox"]:checked.form-radio {
    background-color: var(--main-color);
}

body { opacity: 1; }