/* VARIABLES */
body {
    font-family: "Open Sans", sans-serif;
}

:root {
    --main-color: #224a9f;
    --main-color-light: #009ee2;
    --main-color-dark: #122541;
}

.text-main-color {
    color: var(--main-color);
}

.text-main-color-light {
    color: var(--main-color-light);
}

.text-main-color-dark {
    color: var(--main-color-dark);
}

.placeholder-main-color::placeholder {
    color: var(--main-color);
}

.placeholder-main-color-light::placeholder {
    color: var(--main-color-light);
}

.placeholder-main-color-dark::placeholder {
    color: var(--main-color-dark);
}

.bg-main-color {
    background-color: var(--main-color);
}

.bg-main-color-light {
    background-color: var(--main-color-light);
}

.bg-main-color-dark {
    background-color: var(--main-color-dark);
}

.fill-main-color {
    fill: var(--main-color);
}

.bg-gray-custom {
    background-color: #eee;
}

.border-main-color {
    border-color: var(--main-color);
}

.border-main-color-light {
    border-color: var(--main-color-light);
}

.border-main-color-dark {
    border-color: var(--main-color-dark);
}

.bg-gradient-main-color {
    background: linear-gradient(
        to bottom,
        var(--main-color-light) 0%,
        var(--main-color) 100%
    );
}

.hover\:text-main-color:hover {
    color: var(--main-color);
}

.hover\:text-main-color-light:hover {
    color: var(--main-color-light);
}

.hover\:text-main-color-dark:hover {
    color: var(--main-color-dark);
}

.hover\:bg-main-color:hover {
    background-color: var(--main-color);
}

.hover\:bg-main-color-light:hover {
    background-color: var(--main-color-light);
}

.hover\:bg-main-color-dark:hover {
    background-color: var(--main-color-dark);
}

.hover\:border-main-color:hover {
    border-color: var(--main-color);
}

.hover\:bg-gradient-main-color:hover {
    background: linear-gradient(
        to bottom,
        var(--main-color-light) 0%,
        var(--main-color) 100%
    );
}

.focus\:text-main-color:focus {
    color: var(--main-color);
}

.focus\:bg-main-color:focus {
    background-color: var(--main-color);
}

.focus\:border-main-color:focus {
    border-color: var(--main-color);
}

.focus\:bg-gradient-main-color:focus {
    background: linear-gradient(
        to bottom,
        var(--main-color-light) 0%,
        var(--main-color) 100%
    );
}

.checked\:bg-main-color:checked {
    background-color: var(--main-color);
}

.checked\:border-main-color:checked {
    border-color: var(--main-color);
}

.rounded-xl {
    border-radius: 1.5rem;
}

.hover\:shadow-around:hover {
    -webkit-box-shadow: 0px 0px 20px 8px rgba(173, 173, 173, 0.2);
    -moz-box-shadow: 0px 0px 20px 8px rgba(173, 173, 173, 0.2);
    box-shadow: 0px 0px 20px 8px rgba(173, 173, 173, 0.2);
}

.shadow-around {
    -webkit-box-shadow: 0px 0px 20px 8px rgba(173, 173, 173, 0.2);
    -moz-box-shadow: 0px 0px 20px 8px rgba(173, 173, 173, 0.2);
    box-shadow: 0px 0px 20px 8px rgba(173, 173, 173, 0.2);
}

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

b,
strong {
    font-weight: bold;
}

/* BASE CLASES PROPIAS */
button[data-action="stop"],
button[data-action="start"] {
    display: none;
}

:focus,
input:focus,
button:hover,
button:focus {
    outline: none;
}

.transition3s {
    transition: all 0.3s ease-in-out;
}

.img::after {
    content: "";
    display: block;
}

.p-1\/10::after {
    content: "";
    display: block;
    padding-top: 100%;
}

.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\/25::after {
    content: "";
    display: block;
    padding-top: 25%;
}

.p-1\/2::after {
    content: "";
    display: block;
    padding-top: 20%;
}

.p-1\/1::after {
    content: "";
    display: block;
    padding-top: 10%;
}

.tns-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    text-align: center;
    color: #000;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 10;
}

.tns-nav > button {
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background-color: #000;
    margin: 0 5px;
    transition: all 0.3s ease-in-out;
}

.tns-nav .tns-nav-active {
    width: 20px;
    height: 20px;
}

.dropdown {
    position: absolute;
    top: 100%;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
}

.dropdown.open {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}

.filter-white {
    filter: brightness(0) invert(1);
}

.first\:border-0 > li:nth-child(1) {
    border: none;
}

.text-footer-bold,
.contacta-footer strong {
    color: #6ad2ff;
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .lg\:pb-21 {
        padding-bottom: 21rem;
    }
}

@media (min-width: 1024px) {
    .lg\:bg-transparent {
        background-color: transparent;
    }
    
    .lg\:shadow-around {
        -webkit-box-shadow: 0px 0px 20px 8px rgba(173, 173, 173, 0.2);
        -moz-box-shadow: 0px 0px 20px 8px rgba(173, 173, 173, 0.2);
        box-shadow: 0px 0px 20px 8px rgba(173, 173, 173, 0.2);
    }
    
    .lg\:filter-none {
        filter: none;
    }
    
    .lg\:columns-2 {
        columns: 2;
    }
    
    .lg\:bg-main-color-submenu {
        background-color: #009ee2cc;
    }
}