/*app size and contrast*/


/*         COLORES            */

:root {
    --fondo-titulo: #232323;
    --color-fondo-boton: #383838;
    --color-fondo-boton-active: #4889c9;
    --color-letras-boton: white;
    --color1: #232323;
    --color2: #f2b442;
    --color3: #a8276a;
    --color4: #4889c9;
    --color5: #57938d;
    --color6: #bd4727;
    --color7: #785888;
    --color8: #428042;
    --color9: #2d6367;
    --color10: #3a3a3a;
    --color11: #666666;
    --color12: #898989;
    --color13: #666666;
    --color14: #fafafa;
}

#button_iniciar_sesion {
    font-size: 16px;
}

.btn-group-vertical {
    float: left;
    position: fixed;
    left: 0px;
    z-index: 1000;
    top: 50%;
    width: 60px;
    border-radius: 1px;
}

.button_float_contraste {
    background-color: #e4e4e4;
    color: #0e0e0e;
    font-size: 16px;
    font-weight: 600;
    border-radius: 1px;
}

.button_float_aumentar {
    background-color: #e4e4e4;
    color: #0e0e0e;
    font-size: 20px;
    font-weight: 600;
    border-radius: 1px;
}

.button_float_disminuir {
    background-color: #e4e4e4;
    color: #0e0e0e;
    font-size: 20px;
    font-weight: 600;
    border-radius: 1px;
}


/*hover*/

.button_float_contraste:focus,
.button_float_aumentar:focus,
.button_float_disminuir:focus {
    box-shadow: 0 0 0 0.2rem rgb(7 49 94 / 0%);
}

.button_float_contraste:hover {
    background-color: #0098dc;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 1px;
}

.button_float_aumentar:hover {
    background-color: #0098dc;
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    border-radius: 1px;
}

.button_float_disminuir:hover {
    background-color: #0098dc;
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    border-radius: 1px;
}

.icon_plus {
    font-size: 9px;
    position: absolute;
    top: 14px;
    right: 14px;
}

.icon_minus {
    font-size: 9px;
    position: absolute;
    top: 15px;
    right: 13px;
}

#texto p {
    font-size: 16px;
    text-align: justify;
    transition: all .5s;
    color: blueviolet;
}

.size_actual {
    color: blueviolet;
}


/*Acciones-clases boton de contraste*/


/* cambia letras a negro */

.contraste * {
    color: #000 !important;
}


/* contraste btns login index */

.background-btn {
    background-color: var(--color11) !important;
    color: white !important;
    border-color: var(--color11) !important;
}

.background-btn:hover {
    background-color: var(--color14) !important;
    color: black !important;
    border-color: var(--color14) !important;
}

.btn-index-contraste {
    background-color: var(--color11) !important;
    color: white !important;
    border-color: var(--color11) !important;
}

.btn-index-contraste:hover {
    background-color: var(--color1) !important;
    color: white !important;
    border-color: var(--color11) !important;
}

.background-btn-vitrina {
    background-color: var(--color1) !important;
    color: white !important;
}


/*background a gris en fechas eventos*/

.background-tittle-events {
    background-color: var(--color11) !important;
}


/*btns de carrusel*/

.carousel-contraste {
    border-color: var(--color1) !important;
}

#btn_slider .carousel-contraste.active {
    background: var(--color1) !important;
}

.button_float_contraste-contrast {
    background-color: #e4e4e4;
    color: #0e0e0e;
    font-size: 16px;
    font-weight: 600;
    border-radius: 1px;
}

.button_float_contraste-contrast:hover {
    background-color: var(--color1) !important;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 1px;
}


/*app size end*/


/* Para 1200px*/

@media only screen and (max-width: 1199px) and (min-width: 981px) {
    .btn-group-vertical {
        display: none;
    }
}


/* Para 960px */

@media only screen and (max-width: 980px) and (min-width: 821px) {
    .btn-group-vertical {
        display: none;
    }
}


/* Para 800px */

@media only screen and (max-width: 820px) and (min-width: 621px) {
    .btn-group-vertical {
        display: none;
    }
}


/* Para 600px */

@media only screen and (max-width: 620px) and (min-width: 501px) {
    .btn-group-vertical {
        display: none;
    }
}


/* Para 480px */

@media only screen and (max-width: 500px) and (min-width: 341px) {
    .btn-group-vertical {
        display: none;
    }
}


/* Para 320px */

@media only screen and (max-width: 340px) and (min-width: 5px) {
    .btn-group-vertical {
        display: none;
    }
}