/**
 * Styling for event.
 */

 .chsm-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
}

.chsm-content-event {
    padding: 2rem 0;
}

header img{
    height: auto;
}

.breadcrumb {
    font-size: 0.929em;
    margin: 0;
    margin-bottom: -1rem;
}

.content-event__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    margin-bottom: 3rem;
    & .chsm-title{
        color: var(--secundario);
        font-size: 2.5rem;
        width: 100%;
        text-align: center;
        margin-bottom: 1rem;
    }

    & .details {
        background: var(--gris-claro);
        width: 100%;
        max-width: 400px;
        padding: 3rem;
        border-radius: 50px;
        text-align: center;
        margin-top: -2rem;
    }
}



.chsm-content-event .file a {
    color: var(--principal);
    font-weight: bolder;
    font-size: 1rem;
}

.chsm-content-event .description .file a:hover {
    color: var(--principal);
}

.chsm-content-event .details .icon {
    width: 4.5rem;
    background: var(--blanco);
    padding: 1rem;
    border-radius: 50px;
    margin-bottom: 1rem;
}

.chsm-content-event .field--name-field-ubicacion{
    margin-bottom: 2rem;
}

.chsm-content-event .details {
    color: var(--gris-oscuro);
    font-size: 1rem;
    font-weight: 600;
}

.date {
    font-weight: 400;
}

.chsm-content-event .details .chsm-btns a{
    color: var(--blanco);
    background-color: var(--principal);
}

.chsm-content-event .details .chsm-btns a:hover{
    color: var(--blanco);
    background-color: var(--secundario);
}

.description *{
    font-size: 1rem;
}

.content-event__countdown {
    text-align: center;
}

span.field-timer-jquery-countdown.is-countdown {
    background: none;
    border: none;
}

.field-timer-jquery-countdown .countdown-row {
    display: flex;
    gap: 1.5rem;
}

.field-timer-jquery-countdown .countdown-section {
    color: var(--azul-oscuro);
    font-size: 1.5rem;
    font-weight: bold;
    padding: 1rem;
    border-radius: 10px;
}


.field--name-field-imagenes{
    width: 100%;
}

.chsm-event-form {
    background: var(--azul-claro-2);
    text-align: center;
}

.chsm-event-form .chsm-container {
    max-width: 1000px;
    padding: 2rem;
}

.chsm-event-form .chsm-container > h2 {
    margin-bottom: 3chsrem;
    color: var(--secundario);
}

.chsm-event-form .chsm-container > span {
    font-size: 1.5rem;
    color: var(--gris-oscuro);
    font-weight: bolder;
}

.chsm-event-form .webform-submission-form {
    display: flex;
    flex-wrap: wrap;
    gap: 4%;
}

.chsm-event-form .webform-submission-form > div, .chsm-event-form .webform-submission-form > fieldset {
    width: 48%;
}

.chsm-event-form .webform-submission-form > fieldset, .chsm-event-form .webform-submission-form > fieldset legend{
    margin: 0 !important;
}

.chsm-event-form .webform-submission-form > div.description{
    width: 100%;
}

.chsm-event-form .webform-submission-form .form-control, .chsm-event-form .webform-submission-form .form-select {
    border: none;
    box-shadow: 0 2px 3px var(--gris-medio);
    padding: 0.7rem;
}

.chsm-event-form .webform-submission-form > div.chsm-btn {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

.chsm-event-form .webform-submission-form .webform-button--submit {
    width: fit-content;
    color: var(--blanco);
    background: var(--principal);
    padding: 0.8em;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 100px;
    width: 100%;
    text-align: center;
    position: relative;
    transition: color .4s ease, background .4s ease;
}

.chsm-event-form .webform-submission-form .webform-button--submit:hover {
    background: var(--secundario);
    transition: color .4s ease, background .4s ease;
}

.chsm-speakers{
    background: var(--azul-claro-2);
    padding-bottom: 4rem;
}

.chsm-speakers h2{
    color: var(--secundario);
    margin-bottom: 3rem;
    text-align: center;
}

div#views-bootstrap-chsm-eventos-block-speakers .row > div {
    text-align: center;
    margin-bottom: 2rem;
}

div#views-bootstrap-chsm-eventos-block-speakers a{
    color: var(--gris-oscuro);
    text-decoration: none;
}

div#views-bootstrap-chsm-eventos-block-speakers a:hover{
    color: var(--principal);
}

div#views-bootstrap-chsm-eventos-block-speakers .views-field.views-field-title a{
    font-weight: bolder;
}

div#views-bootstrap-chsm-eventos-block-speakers .views-field-field-imagen img {
    border-radius: 200px;
    background: var(--blanco);
    height: auto;
}

div#views-bootstrap-chsm-eventos-block-speakers .row {
    justify-content: center;
}

@media (max-width: 767px){

    .chsm-banner-event .chsm-container{
        padding: 5rem 1.5rem;
    }

    .breadcrumb-item.active {
        display: none;
    }

    .content-event__info {
        & .chsm-title {
            color: var(--secundario);
            font-size: 1.6rem;
        }
    }

    .chsm-banner-event .field--name-field-ubicacion p {
        flex-direction: column;
        line-height: 1;
    }

    .chsm-content-event .description, .chsm-content-event .details {
        width: 100%;
    }
    .chsm-content-event .description{
        padding-right: 0;
        margin-bottom: 3rem;
    }

    .field-timer-jquery-countdown .countdown-section {
        font-size: 1rem;
    }
}