:root{
    --white: white;
    --grey: #c6c6c6;
}


/* FONTS AND STYLING OF TEXT */
@font-face {
    font-family: 'eczarBold';
    src: url(../fonts/Eczar-Bold.ttf);
}

@font-face {
    font-family: 'eczarRegular';
    src: url(../fonts/Eczar-Regular.ttf);
}

@font-face {
    font-family: 'firaSansBold';
    src: url(../fonts/FiraSans-Bold.ttf);
}

@font-face {
    font-family: 'firaSansBoldItalic';
    src: url(../fonts/FiraSans-BoldItalic.ttf);
}

@font-face {
    font-family: 'firaSansRegular';
    src: url(../fonts/FiraSans-Regular.ttf);
}


@font-face {
    font-family: 'firaSansThin';
    src: url(../fonts/FiraSans-Thin.ttf);
}

@font-face {
    font-family: 'firaSansRegularItalic';
    src: url(../fonts/FiraSans-Italic.ttf);
}

@font-face {
    font-family: 'firaSansItalic';
    src: url(../fonts/FiraSans-Italic.ttf);
}

/*Aplicar fuente a body*/
body {
    font-family: 'firaSansRegular';
}

.main-logo {
    font-family: 'eczarBold';
    font-size: 24px;
    letter-spacing: -1px;
}

.main-subtitle {
    color: var(--white);
    opacity: 0.7;
}

.menu-items-small {
    font-size: 14px !important;
}

/*HOMEPAGE*/

@media(max-width:990px){
    .artists_homepage .single_item figure figcaption .title{
        line-height: 20px;
    }
}


/*Custom legal texts*/
/*Forzar estilos de headlines*/

.legal__text h2, .legal__text h3 {
    text-transform: uppercase;
    font-family: 'firaSansBold';
    margin: 2rem 0;
    color: var(--white);
}

.legal__text h4, .legal__text h5, .legal__text h6 {
    font-family: 'firaSansBold';
    text-transform: uppercase;
    margin: 1.4rem 0;
    color: var(--white);
}


.legal__text ul li, .legal__text th, .legal__text td {
    color: #989898;
}

/*FORMS (book y contact)*/

.form__request h2, .form__request__h3, .form__request h4 {
    font-family: 'eczarBold';
}


.footer__links a:hover {
    opacity: 0.7;
}


/*NAVBAR */
.logotipo__navbar {
    max-width: 70px;
}
.logotipo__footer {
    max-width: 220px;
}

/*FORMULARIOS*/

.grecaptcha-badge {
    z-index: 9999 !important;
    bottom: 90px !important;
}

.form-control,.form-control:focus{
    color: var(--white); !important;
    background-color: black !important;
}
.form-control::placeholder{
    color: var(--grey); !important;
    background-color: black !important;
}

::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

select.form-control:not([size]):not([multiple]) {
    height: calc(2.25rem + 8px);
}

.is-invalid {
    border-bottom: 2px solid red !important;
}

.is-valid {
    border-bottom: 2px solid green !important;
}

.filter-white {
    filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(44deg) brightness(106%) contrast(101%);
}

.artist {
    min-height: 100vh; /* Adjust as necessary */
}

.artist section {
    display: flex;
    min-height: 100vh;
}

.artist section .div-50 {
    width: 50%;
}

.artist section div.text {
    padding: 60px;
    overflow-y: auto;
}

.artist section div.full-image {
    height: 100vh;
    background-size: cover;
    background-position: center;
    position: sticky;
    top: 0;
}


.artist h1 {
    font-family: 'eczarBold';
    text-transform: uppercase;
    font-size: 2.7rem;
}
.artist h1, .artist h2, .artist h3, .artist h4, .artist h5, .artist h6{
    color: var(--white);
}
.artist .region{
    font-size: 24px;
    display: block;

}
.artist .excepcion{
    font-size: 24px;
    font-family: 'firaSansThin';
}
.artist .link{
    font-size:24px;
    color: var(--white);
    font-family: 'firaSansBold';
}
@media(max-width:768px){
    .artist section div.full-image {
        margin-top:72px;
    }
}

@media(max-width:800px){
    .artist section div.full-image {
        height: 60vw;
        position:relative;
    }
}


@media (max-width: 800px) {
    body {
        font-size: 16px;
    }

    .artist section {
        display: block;
    }


    .artist section .div-50 {
        width: 100%;
    }


    .artist section div.text {
        padding: 30px;
        margin-top: 10px !important;
    }


    .artist div.full-image {
        height: 100vw;
    }
}

.events .evento{
    display:flex;
    gap:2rem;
    color: var(--white);
}

@media(max-width: 992px) {
    ul#allEvents > li .evento {
        border-bottom: 2px solid var(--white);
    }

    ul#allEvents > li:last-child .evento {
        border-bottom: none; /* Remove the border from the last li element */
    }
}
.events .evento .evento_fecha{
    width:90px;
    text-align:left;
}

.events .evento_info{
    gap:2rem;
    /*width:100%;*/
}
.events .evento_btn{
    width:fit-content;
    text-transform: uppercase;
    font-family: 'firaSansBold';
}
.events .evento_btn a{
    padding: 4px 8px;
    border-radius: 4px;
    color: #1a1a1a;
    background-color: var(--white);
    border: 2px solid white;
}
.events .evento_btn a:hover{
    color: white;
    background-color: black;
    border: 2px solid white;
}

.events .evento .event_party{
    font-family: 'firaSansBold';
    text-transform: uppercase;
}
.events .evento .event_ciudad_nombre{
    font-family: 'firaSansBold';
}


.events .evento .evento_venue{
    font-family: 'firaSansThin';
    width:240px;
    text-align:left;
}
.events .evento .evento_ciudad{
    /*margin-left:auto;*/
    width:240px;
}
.events .evento .evento_artista{
    width:180px;
    text-align:left;
    text-transform: uppercase;
    font-family: 'firaSansBold';
}
.events .evento .evento_artista a{
    color:var(--white);
}
.events .evento .evento_artista a:hover{
    color:var(--grey);
}


.event .title_artist{
    text-transform: uppercase;
    font-family: 'firaSansBold';
}
.event .title_fecha{

}
.event .title_party{
    font-family: 'firaSansBold';
}
.event .title_venue{
    font-family: 'firaSansThin';
}

.event_details{
    color: var(--white);
    font-size:14px;

}
@media(min-width:768px){
    .event_details{
        display:flex;
        /*justify-content:center;*/
        gap:3rem;
    }
}
.event_details .icon {
    width:16px;
}

.event .blog-title:hover {
    opacity: .7;
    transition: opacity ease 0.5s;
    -webkit-transition: opacity ease 0.5s;
    -moz-transition: opacity ease 0.5s;
}

.event .event-post figure img {
    -webkit-filter: grayscale(80%);
    filter: grayscale(80%);
}
@media(max-width:576px){
    .event .event-post figure img {
        filter: unset;
    }
}
.event .event-post:hover figure img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
}
/*Custom legal texts*/

.legals h2, .legals h3{
    text-transform: uppercase;
    font-family: 'firaSansBold';
    margin: 2rem 0;
    color:white;
}
.legals h4, .legals h5, .legals h6{
    font-family: 'firaSansBold';
    text-transform: uppercase;
    margin: 1.4rem 0;
    color:white;
}
.legals b, .legals strong{
    color: var(--white);
}


.legals ul li, .legals th, .legals td {
    color: #989898;
}
.legals ul li{
    margin-left:16px;
}
/*BS: Layout*/

/* Base cases */
.col-3 {
    width: 25%; /* 3/12 columns */
}

.col-4 {
    width: 33.333333%; /* 4/12 columns */
}

.col-6, .col-sm-6 {
    width: 50%; /* 6/12 columns */
}

.col-12 {
    width: 100%;
}

/* Small devices (sm) - screens equal to or greater than 576px */
@media (min-width: 576px) {
    .col-sm-3 {
        width: 25%; /* 3/12 columns */
    }

    .col-sm-4 {
        width: 33.333333%; /* 4/12 columns */
    }
    .d-sm-flex {
        display: flex;
    }

    /* Include the col-sm-6 here if not already defined outside media query
    .col-sm-6 {
      width: 50%;
    }
    */
}

/* Medium devices (md) - screens equal to or greater than 768px */
@media (min-width: 768px) {
    .col-md-2 {
        width: 16.666667%; /* 2/12 columns */
    }

    .col-md-3 {
        width: 25%; /* 3/12 columns */
    }

    .col-md-4 {
        width: 33.333333%; /* 4/12 columns */
    }
    .d-md-flex {
        display: flex;
    }
}

.show-toast{
    position: absolute;
    top: 50%;
    left: 50%;
    /* width: 100%; */
    height: auto;
    z-index: 999;
    padding: 2rem;
    transform: translate(-50%,-50%);
}

.g--background-color-0122ee{
    background-color: #0122ee;
}

.g--font-size-38px{
    font-size: 38px;
}

.g--color-white{
    color: #fff;
}

.page-error{
    height: max(500px, calc(100vh - 360px));
}