@font-face {
    font-family: 'Gotham Italic Medium';
    src: url(/CSS/Gotham/GOTHAM-MEDIUMITALIC.TTF);
}

.opcion{
    width: 100%;
    height: 150px;
    background: linear-gradient(90deg, rgba(39,1,1,1) 0%, rgba(39,1,1,1) 50%, rgba(220,46,50,1) 100%);
    display: flex;
    flex-direction: row;
    margin-bottom: 30px;
    position: relative;
}

.opcion img{
    height: 100%;
    width: 312px;
    min-width: 312px;
    object-fit: cover;
    object-position: 50% 50%;
    z-index: 99 !important;
}

.opcion .lineafinita{
    height: 100%;
    width: 1px;
    background-color: #F1A52F;
    margin-left: 10px;
    min-width: initial;
}

.opcion h1{
    font-family: 'Gotham Italic Medium';
    color: #fff;
    display: flex;
    align-items: center;
    margin: auto;
    margin-left: 110px;
    font-size: 66px;
    z-index: 9 !important;
}

#preguntasfrecuentes{
    padding-right: 30px;
}

.opcion div{
    width: 312px;
    min-width: 312px;
    text-align: center;
}

.opcion #div-estrella,
.opcion #div-globos{
    background: radial-gradient(circle, rgba(95,131,138,1) 0%, rgba(76,110,115,1) 30%, rgba(50,80,81,1) 70%, rgba(40,69,69,1) 100%);
    z-index: 99 !important;
}

.opcion #div-cajanegra{
    background: linear-gradient(90deg, rgba(79,42,19,1) 0%, rgba(79,42,19,1) 30%, rgba(173,121,33,1) 70%, rgba(214,157,40,1) 100%);
    z-index: 99 !important;
}

.opcion div #estrella{
    width: 60%;
    object-fit: cover;
}

.opcion div #cajanegra{
    width: 70%;
    object-fit: cover;
    object-position: 50% 0%;
}

.opcion div #globos{
    width: 100%;
    object-fit: contain;
}

.lineas-plus{
   width: 80% !important;
   height: 100%;
   position: absolute;
   left: 0px;
   z-index: 99 !important;  
   background: url(/plus/imgs/lineas.png);
   background-size: cover;
   background-repeat: no-repeat;
   top: 0px;
   z-index: 1 !important;
   opacity: 1;
}

@media(max-width:1440px){
    .opcion{
        height: 90px;
        margin-bottom: 15px;
    }

    .opcion img{
        width: 235px;
        min-width: 235px;

    }

    .opcion div{
        width: 235px;
        min-width: 235px;

    }

    .opcion h1{
        margin-left: 80px;
        font-size: 50px;
    }

    .lineas-plus{
        width: 100% !important;
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
     }
}

@media(max-width:1100px){
    .opcion{
        height: 120px;
    }

    .opcion img{
        width: 200px;
        min-width: 200px;

    }

    .opcion div{
        width: 200px;
        min-width: 200px;

    }

    .opcion h1{
        margin-left: 50px;
        font-size: 45px;
    }
}

@media(max-width:768px){
    .opcion{
        height: 150px;
        margin-bottom: 15px;
    }

    .opcion img{
        width: 160px;
        min-width: 160px;
    }

    .opcion div{
        width: 160px;
        min-width: 160px;
    }

    .opcion h1{
        margin-left: 35px;
        font-size: 50px;
    }

    .opcion div #estrella{
        width: 90%;
        object-fit: contain;
    }

    .opcion #div-cajanegra{
        display: flex;
        text-align: center;
    }
    
    .opcion div #cajanegra{
        width: 75%;
        object-fit: contain;
        margin: auto;
    }

    .lineas-plus{
        width: calc(100% + 150px) !important;
        height: 100%;
        position: absolute;
        left: -150px;
        top: 0px;
     }
}

@media(max-width:650px){
    .opcion{
        height: 130px;
        margin-bottom: 20px;
    }

    .opcion img{
        width: 130px;
        min-width: 130px;
    }

    .opcion div{
        width: 130px;
        min-width: 130px;
    }

    .opcion h1{
        margin-left: 20px;
        font-size: 30px;
    }
}

@media(max-width:412px){
    .opcion{
        height: 120px;
        margin-bottom: 20px;
    }

    .opcion img{
        width: 120px;
        min-width: 120px;
    }

    .opcion div{
        width: 120px;
        min-width: 120px;
    }

    .opcion h1{
        margin-left: 20px;
        font-size: 30px;
    }

}

@media(max-width:400px){
    .opcion{
        height: 100px;
        margin-bottom: 15px;
    }

    .opcion img{
        width: 90px;
        min-width: 90px;
    }

    .opcion div{
        width: 90px;
        min-width: 90px;
    }

    .opcion h1{
        margin-left: 10px;
        font-size: 25px;
    }

    .lineas-plus{
        width: calc(100% + 100px) !important;
        height: 100%;
        position: absolute;
        left: -100px;
        top: 0px;
     }

}


@media(max-width:320px){
    .opcion{
        height: 70px;
        margin-bottom: 10px;
    }

    .opcion img{
        width: 90px;
        min-width: 90px;
    }

    .opcion div{
        width: 90px;
        min-width: 90px;
    }

    .opcion h1{
        margin-left: 10px;
        font-size: 23px;
    }

    .lineas-plus{
        width: calc(100% + 50px) !important;
        height: 100%;
        position: absolute;
        left: -50px;
        top: 0px;
     }

}