/*btn votar principal*/

@font-face {
    font-family: 'Vodafone';
    src: url('../assets/fonts/Vodafone.woff') format('woff2'),
        url('../assets/fonts/Vodafone.woff') format('woff'),
        url('../assets/fonts/Vodafone.ttf') format('truetype');
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
body {
    font-family: 'Vodafone', sans-serif;
}

.bg-custom1 {
    background-color: #d9d9d9;
}

.bg-custom2 {
    background-color: #2b292c;
    padding: 5%;
}

.stk-logo {
    height: 51px;
    width: 154px;
    top: 34px;
}

.stk-logo2 {
    width: 289.84px;
    height: 70.24px;
    top: 25px;
}

.nav-link {
    font-weight: 400;
    font-size: 15px;
    line-height: 17.17px;
    text-align: center;
    color: #2B292C;
}

.stk-title {
    font-weight: 700;
    font-size: 34;
    line-height: 36px;
    text-align: center;
}

.stk-calltext {
    font-weight: 700;
    font-size: 40px;

    text-align: center;
    color: #ffffff;
    padding-bottom: 2%;
}

.stk-subtitle {
    font-weight: 700;
    font-size: 34px;
    line-height: 39.44px;
    text-align: center;
}

.stk-text {
    font-weight: 400;
    font-size: 18px;
    line-height: 20.61px;
}

.stk-cardTitle {
    font-weight: 700;
    font-size: 15;
}

.stk-cardBody {
    border-radius: 4px;
    height: max-content;
}

.slick-slide {
    height: max-content !important;
}

/*imagen tarjeta votaciones*/
.card-img-top {
    /*height: 180px;*/
    border-radius: 2.44px;
    object-fit: contain;
}


.stk-cardinfo {

    border-radius: 10px;
}

/*like welcome*/
.stk-icon {
    width: 9px;
    height: 11.25px;
}

/*like details*/
.stk-icon5 {
    width: 20px;
    height: 25px;
}

/*spotify*/
.stk-spoti {
    padding-top: 2%;
    padding-bottom: 10%;
}

.social-bar2 {
    padding-top: 10%;
    font-size: 14px;
    font-weight: 700;
    gap: 7.34;
}

/*barra social footer*/
.social-bar {
    font-size: 14px;
    font-weight: 700;
    gap: 7.34;
}

.stk-icon2 {
    width: 25px;
    border: 1.62px;
}

/*fecha ver mas*/
.stk-icon3 {
    width: 8.12px;
    height: 3.25px;
    border: 1.62px;
    color: #e60000;
}

/* barra social details*/
.stk-icon4 {
    width: 35.15px;
    height: 35px;

}

/*slide details*/
.stk-icon6 {
    width: 20px;
    height: 90px;
    border: 3px;

}

.stk-btn1 {
    border: 1px solid #ff0000;
    /* Borde rojo */
    border-radius: 20.30px;
    /* Borde con radio de 10px */
    background-color: transparent;
    /* Fondo transparente */
    color: #e60000;
    /* Texto en color rojo */
    text-align: center;
    /* Texto centrado */
    padding: 4px 32px 4px 32px;
    /* Padding interno de 50px arriba/abajo, 40px izquierda/derecha */
    width: 98px;
    height: 24px;
    text-decoration: none;
    /* Quita el subrayado de los enlaces */
    font-weight: 400;
    font-size: 12px;
    line-height: 13.74px;
}

.stk-btn1:hover {
    background-color: rgba(19, 7, 7, 0.1);
    /* Cambia el fondo al pasar el ratón sobre el botón */
}

.stk-btn2 {
    border: 2px solid red;
    /* Borde rojo */
    border-radius: 40px;
    /* Borde con radio de 10px */
    background-color: #e60000;
    /* Fondo transparente */
    color: #ffffff;
    /* Texto en color rojo */
    text-align: center;
    /* Texto centrado */
    padding: 5px 100px;
    /* Padding interno de 5px arriba/abajo, 40px izquierda/derecha */
    display: inline-block;
    /* Hace que el botón ocupe solo el ancho necesario */
    text-decoration: none;
    /* Quita el subrayado de los enlaces */
}

/*boton call action*/
.stk-btn3 {
    border: none;
    /* Borde rojo */
    border-radius: 18.34px;
    /* Borde con radio */
    background-color: white;
    /* Fondo */
    color: rgb(230, 0, 0);
    /* Texto en color rojo */
    text-align: center;
    /* Texto centrado */
    font-weight: 700;
    font-size: 20px;

    padding: 4px 30px 4px 30px;
    /* Padding interno de px arriba/abajo, px izquierda/derecha */
    text-decoration: none;
    /* Quita el subrayado de los enlaces */
    gap: 7.34px;
}


.stk-btn4 {
    border: transparent;
    /* Borde rojo */
    border-radius: 40px;
    /* Borde con radio de 10px */
    background-color: #f3eeee;
    /* Fondo */
    color: #2b292c;
    /* Texto en color rojo */
    text-align: center;
    /* Texto centrado */
    padding: 10px 80px;
    /* Padding interno de 50px arriba/abajo, 40px izquierda/derecha */
    display: inline-block;
    /* Hace que el botón ocupe solo el ancho necesario */
    text-decoration: none;
    /* Quita el subrayado de los enlaces */
    font-size: 24px;
    font-weight: 400;

}

.stk-btn5 {
    border: none;
    /* Borde rojo */
    border-radius: 4px;
    /* Borde con radio de px */
    background-color: transparent;
    /* Fondo */
    width: 41px;
    height: 11.4px;
    text-align: center;
    /* Texto centrado */
    font-size: 12px;
    font-weight: 400;
    color: #2B292C;
    text-decoration: none;
    /* Quita el subrayado de los enlaces */

}

/*boton votar en detalles*/
.stk-btn7 {
    border: 1px solid #ff0000;
    /* Borde rojo */
    border-radius: 45px;
    /* Borde con radio de 10px */
    background-color: transparent;
    /* Fondo transparente */
    color: #e60000;
    /* Texto en color rojo */
    text-align: center;
    /* Texto centrado */
    padding: 8px 100px 8px 100px;
    /*

text-decoration: none; /* Quita el subrayado de los enlaces */
    font-weight: 400;
    font-size: 24px;
    line-height: 27.48px;
}



/*iconos barra social*/
.stk-social {
    border-bottom: none;
    background-color: transparent;
    padding: 10px 10px;
    display: inline-block;
    text-decoration: none;
}
.stk-socialshow {
    border-bottom: none;
    background-color: transparent;
    padding: 10px 10px;
    display: inline-block;
    text-decoration: none;
}

.container {
    padding-top: 2%;
}

.container-project {
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
    box-sizing: border-box;
    /* Asegura que el padding no afecte el ancho total */
}

.container-slide {
    padding: 5%;
}

.form-group {
    margin-bottom: 3%;
    margin-top: 3%;
}

.container-row {
    padding-top: 2%;
    padding-bottom: 2%;
    display: flex;
}

.stk-row {
    background-size: cover;
    display: flex;
    padding: 2%;
}

.carousel-control {
    position: absolute;
    top: 50%;
    /* Ajusta según sea necesario para la posición vertical deseada */
    transform: translateY(-50%);
    width: 10px;
    /* Ancho de los botones */
    height: 80px;
    /* Altura de los botones */
    background-color: transparent;
    /* Fondo transparente para que no se vean los botones */
    border: none;
    /* Sin borde */
    font-size: 30px;
    /* Tamaño del icono de flecha */
    color: transparent;
    /* Color de las flechas */
}

/* Estilos específicos para el botón de "Anterior" */
.carousel-control#prev {
    left: -45px;
    /* Ajusta según sea necesario para la posición horizontal deseada */
}

/* Estilos específicos para el botón de "Siguiente" */
.carousel-control#next {
    right: -10px;
    /* Ajusta según sea necesario para la posición horizontal deseada */
}

.col-form {
    width: 22%;
}

.circle-mask {
    width: 80px;
    /* Ajusta según sea necesario */
    height: 80px;
    /* Ajusta según sea necesario */
    background-color: rgba(179, 183, 199, 0.7);
    /* Fondo gris traslúcido */
    border-radius: 50%;
    /* Hace la máscara circular */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    /* Espacio entre el círculo y el párrafo */
}

.stk-card {
    border-color: transparent;
    text-align: justify;
    /*padding: 5% ;*/
}

.stk-card2 {
    border-color: transparent;
    text-align: center;

}

/*footer*/
.transparent-footer {
    background-color: transparent;
    text-align: center;
}

.stk-imageCall {
    /*max-width: 100%; /* Ajustar el ancho máximo de la imagen */
    float: right;

}

.footer-text {
    text-align: justify;
    font-size: 8px;
    font-weight: 400;

}

.stk-titledetail {
    font-weight: 400;
    size: 60px;
    color: #e60000;
}

.stk-namedetail {
    font-weight: 400;
    font-size: 40px;
    color: #2B292C;
}

.stk-modal2 {
    background: linear-gradient(90deg, #2B292C 0%, #D9D9D9 100%);
    font-size: 20px;
    font-weight: 400;
    color: white;
    text-align: center;
}

/* .modal-vote-form{
    background-color: #ffffff
    padding-left: 0px;
    padding-right:0px;
} */

.modal-content {
    background: #2B292C;
    box-shadow: 60px 0px 60px rgba(0, 0, 0, 0.25);
}

.modal-header {
    background: #2B292C;
    box-shadow: 60px 0px 60px rgba(0, 0, 0, 0.25);
    color: #ffffff;

    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.modal-title {
    font-size: 60px;
    font-weight: 400;
    color: #D9D9D9;
    text-align: center;
}

.stk-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -6%;
    width: 115%;
    display: flex;
    justify-content: space-between;
    background-color: transparent;
}

.next,
.prev {
    border: none;
    background-color: transparent;
}

.stk-controls div {
    background-color: transparent;
    /* Estilo de fondo (puedes personalizarlo) */
    padding: 10px;
    cursor: pointer;
}



/*FORUMLARIO HOME*/
.container-form {
    font-weight: 700;
    font-size: 14px;
    color: #363636;
    padding-top: 2%;
}

.row-form {
    /*background: linear-gradient(93deg, #999999 0%, #2B292C 100%);*/
    display: flex;
}

/*registrate aquí formulario*/
.row-form2 {
    background: linear-gradient(90deg, #2B292C 0%, #D9D9D9 100%);
    color: #ffffff;
    padding-left: 20%;
}

.stk-imageForm {

    max-width: 100%;
    height: auto;
    width: auto;
    padding: 0;
    object-fit: cover;
}

.contenido-form {
    padding-left: 20%;
    padding-right: 0%;
    color: #ffffff;
    width: 60%;
    font-size: 18px;
    line-height: 21px;
    font-weight: 400;
}

.contenido-form1 {
    width: 40%;
}

.form-group {
    font-size: 14px;
    font-weight: 700;
    line-height: 16.24px;
}

.form-control {
    font-weight: 400;
    font-size: 10px;
    line-height: 11.45px;

}

.stk-subtitleform {
    font-size: 38px;
    font-weight: 700;
    line-height: 38px;
}

.stk-btn6 {

    border: 2px solid red;
    /* Borde rojo */
    background-color: #e60000;
    /* Fondo transparente */
    color: #ffffff;
    /* Texto en color rojo */
    text-align: center;
    /* Texto centrado */
    padding: 10px 60px;
    /* Padding interno de 5px arriba/abajo, 40px izquierda/derecha */
    display: inline-block;
    /* Hace que el botón ocupe solo el ancho necesario */
    text-decoration: none;
    /* Quita el subrayado de los enlaces */
    font-size: 18px;
    font-weight: 700;
    line-height: 21px;
    margin-bottom: 10px;

}

.collapsed-navbar {
    display: none;
}

.expanded-navbar {
    display: block;
}

.modal-subtitle{
    font-size: 34px;
    font-weight: 400;
}

.stk-description{
    text-align: justify;
    margin-bottom: 10px;
}

/* .navbar-toggler-icon{

} */
/* Estilo para pantallas pequeñas (móvil) */
@media (max-width: 991.98px) {
    .bg-custom1 {
        /* background-color: #ffffff !important; */
        background-color: #2b292c !important;
    }

    .navbar-nav .nav-link {
        color: #fff !important;
        /* Color del texto en pantallas pequeñas */
    }

    .collapsed-navbar {
        display: block;
    }

    .expanded-navbar {
        display: none;
    }

    .stk-img-fluid {
        max-width: 60%;
        height: auto;
    }

    /*modal votos con formulario*/
    .modal-dialog {
        margin: 30;
    }
    .modal-title{
        font-size: 25px;
    }
    .modal-subtitle{
        font-size: 20px;
    }
    .stk-btn6 {
        margin-top: 20px;
    }

    /*show.blade*/
    .stk-imgdetails1{
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .vote-details{
        text-align: center;
        line-height: 3;
        padding-top: 20%;
    }
    .stk-spoti{
        height: 110px;
    }
    .stk-socialshow{
        width: 38px;
    }
    .social-bar2{
        padding-top: 5%;
    }

}