/********************************/
/* Adicionales a la maqueta 2.0 */
/********************************/

/*** Fonts ***/
@font-face {
    font-family: vwhead-bold;
    src: url(../fonts/vwhead-bold.woff2);
}

@font-face {
    font-family: vwhead-light;
    src: url(../fonts/vwhead-light.woff2);
}

@font-face {
    font-family: vwhead-regular;
    src: url(../fonts/vwhead-regular.woff2);
}

@font-face {
    font-family: vwtext-bold;
    src: url(../fonts/vwtext-bold.woff2);
}

@font-face {
    font-family: vwtext-regular;
    src: url(../fonts/vwtext-regular.woff2);
}
/*** Fonts fin ***/

/*** check boxes ***/
/* The container */
.containerchk {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.containerchk input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
    top: -30px;
    border-radius: 5px;
    border: 0.5px solid var(--neutrales-grey);
}

/* On mouse-over, add a grey background color */
.containerchk:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containerchk input:checked ~ .checkmark {
    background-color: var(--primario-azul-oscuro-vw);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.containerchk input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.containerchk .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*** check boxes fin ***/

/*** Varios ***/
.hide {
   display: none
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /*width: 50%;*/
    text-align: center;
}

.text-danger {
    color: #ed6b75 !important;
    font-weight: bold;
}

.formulario-de-logue {
    margin: 25px;
}

.alert {
    margin-bottom: 50px;
}
.alert-success {
    color: var(--add-verde);
}

.alert-danger {
    color: var(--add-rojo-01);
}

a {
    text-decoration: none !important;
}

a:focus, a:hover, a:active {
    outline: 0;
    text-decoration: none;
}

a:hover {
  /*  color: #23527c;*/
}

a:hover {
    cursor: pointer;
}

.mt10 {
    margin-top: 10px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb30 {
    margin-bottom: 30px;
}

.bold {
    font-weight: bold;
}

.green {
    color: var(--add-verde);
}
.azul-vw {
    color: var(--primario-azul-oscuro-vw);
}

.contentAccordion {   
    padding: var(--padding-xs);
    gap: var(--gap-29xl);
    flex-shrink: 0;
    font-size: var(--h-04-size);
    color: var(--primario-azul-oscuro-vw);
    overflow-y: auto;
    height: 100%;
}

.owl-theme .owl-dots .owl-dot span {
    width: 40px !important;
}

.owl-carousel .owl-wrapper {
    display: flex !important;
}

.owl-carousel .owl-item {
    text-align: center;
}

    .owl-carousel .owl-item img {
        /* border-bottom-left-radius: 8px !important;
        border-bottom-right-radius: 8px !important;
        width: 70%;
        height: auto;*/
        object-fit: cover;
        max-width: initial;
        width: 100%;
        height: 940px;
    }

    .owl-carousel .owl-item video {
        /* border-bottom-left-radius: 8px !important;
        border-bottom-right-radius: 8px !important;
        width: 70%;
        height: auto;*/
        object-fit: cover;
        max-width: initial;
        width: 100%;
        height: 940px;
    }



/*** Varios fin ***/