@import "header_ara_login.scss";
@font-face {
    font-family: "Ringside Narrow Ultra";
    src: url("https://interactius.ara.cat/assets/common/fonts/RngS97/RingsideNarrow-Ultra.otf") format("opentype");
}
@font-face {
    font-family: "Ringside Narrow Bold";
    src: url("https://interactius.ara.cat/assets/common/fonts/RngS97/RingsideNarrow-Bold.otf") format("opentype");
}
@font-face {
    font-family: "Ringside Narrow Book";
    src: url("https://interactius.ara.cat/assets/common/fonts/RngS97/RingsideNarrow-Book.otf") format("opentype");
}
@font-face {
    font-family: "Ringside Narrow Book Italic";
    src: url("https://interactius.ara.cat/assets/common/fonts/RngS97/RingsideNarrow-BookItalic.otf") format("opentype");
}
@font-face {
    font-family: "Ringside Narrow Medium";
    src: url("https://interactius.ara.cat/assets/common/fonts/RngS97/RingsideNarrow-Medium.otf") format("opentype");
}
@font-face {
    font-family: "Ringside Narrow Light";
    src: url("https://interactius.ara.cat/assets/common/fonts/RngS97/RingsideNarrow-Light.otf") format("opentype");
}

$blanc:#fff;
$negre:#000;
$blau100: #0175a2;
$blau90: #1b83ab;
$blau80: #3491b5;
$blau70: #4e9fbe;
$blau60: #67acc7;
$blau50: #80bad0;
$blau40: #99c8da;
$blau30: #b2d5e3;
$blau20: #cce3ec;
$blau10: #e5f1f6;
$width:575px;
$tall: 900px;
$tall2:600px;

body{
    font-family:'Ringside Narrow Book Italic';
    strong{font-weight: normal;font-family:"Ringside Narrow Bold";}
    .contenidor{margin: 0 auto 0px auto;text-align: center;}
    .e1{
       font-family:"Ringside Narrow Bold";font-size:48px;line-height:52px;
       @media only screen and (max-width: $tall2) {
           font-size:32px;line-height:36px;
       }
    }
    .e2{font-family:"Ringside Narrow Book";font-size:18px;line-height:24px}
    .e3{font-family:"Ringside Narrow Bold";font-size:18px;line-height:21px}
    .e4{font-family:"Ringside Narrow Book";font-size:18px;line-height:24px}
    .e5{font-family:"Ringside Narrow Book";font-size:18px;line-height:21px}
    .e6{font-family:"Ringside Narrow Medium";font-size:15px;line-height:15px}
    .e7{
        font-family:"Ringside Narrow Medium";font-size:13px;line-height:14px;
        &.firma{text-transform: uppercase;}
        &.firma-imatge{text-align: right;margin-right: 10px;font-size: 12px;}
    }
    .e8{font-family:"Ringside Narrow Book";font-size:13px;line-height:14px}
    .e9{font-family:"Ringside Narrow Book Italic";font-size:14px;line-height:14px}
    .e10{font-family:"Ringside Narrow Book";font-size:12px;line-height:12px}
    .e11{font-family:"Ringside Narrow Bold";font-size:36px;line-height:38px}
    .e12{font-family:"Ringside Narrow Ultra";font-size:18px;line-height:20px;text-transform: uppercase}


    em{font-style: normal;font-family:"Ringside Narrow Book Italic"}

    .button-start{
        padding:15px 40px;border:2px solid $negre;border-radius:2px;background:$blanc;box-shadow:0 5px 5px rgba(0,0,0,0.1);margin-top:55px;color:#000;
        @media only screen and (max-width: $tall2) {
           margin-top:45px;
       }
        &:hover{background:$negre;color:$blanc}
    }
    .franja_baix{
        position: absolute;width: 100%;bottom: 0;background: #fff;height:80px;border-bottom: 1px solid #000;box-shadow: 0 0 6px rgba(0,0,0,0.5);opacity:0.9;
        @media only screen and (max-width: $tall2) {height:auto;position:relative}
        .e4{
            line-height: 80px;float:left;padding-left:20px;
            @media only screen and (max-width: $tall) {font-size:16px}
            @media only screen and (max-width: $tall2) {float:none;line-height:normal;padding:0;font-size:14px;padding-top:20px}
            span{font-family:"Ringside Narrow Medium";margin-right: 10px;}
        }
        .e9{
            line-height: 80px;float:right;padding-right: 10px;
            @media only screen and (max-width: $tall2) {float:none;line-height:normal;padding:0;margin:0 auto}
            .patrocini{
                padding-left: 20px;
                @media only screen and (max-width: $tall2) {
                    display: block;text-align: center;margin: 5px auto 15px auto;padding: 0;
                }
            }
        }
    }
    .img_slide{
        position:relative;
        @media only screen and (max-width: $tall2) {height:150px;}
        &.hihafranja{
            /*bottom:80px;*/
            @media only screen and (max-width: $tall2) {bottom:0;min-height:150px;}
        }
    }
    .btn{text-decoration:none}
    .btn.btn-tema{padding:25px}
    .btn.btn-autopromo{display:block;width:120px;}
    .obertura{
        background-repeat: no-repeat;background-position: center bottom;background-color: $blanc;/*overflow: hidden;*/
        .info_slide{
            margin:0 auto;display: table;
            @media only screen and (max-width: $tall2) {padding:30px 20px;display:block;}
            .e1,
            .e2{margin:30px auto 10px auto}
            .text{
                vertical-align: middle;display: table-cell;max-width:950px;
                @media only screen and (max-width: $tall2) {display:block;max-width:100%}
            }
        }
        &.ranquing{margin-bottom:0}
        h1{padding-bottom: 20px;font-size: 70px}
        h3{ max-width: 900px; margin:35px auto 35px auto;font-size: 22px}
    }
    .img-pregunta{
        max-width:$width;
        @media only screen and (max-width: $tall2) {width:100%}
    }
    .form-preguntes{
        margin-bottom:300px;
        @media only screen and (max-width: $tall2) {padding:0 20px;}
        .pregunta{
            margin-top:200px;
            &#pregunta1{margin-top:100px;}
            ul{
                margin:0px auto; padding:0px; width: $width; margin-bottom:60px;display:flex;flex-wrap:nowrap;align-items:stretch;
                @media only screen and (max-width: $tall2) {flex-wrap:wrap;width:100%}
                /*&.correccio{
                    li{
                        opacity: 0.4;
                        &.marcada{opacity:1}
                    }
                }*/
                &.resposta{
                    li{
                        opacity: 0.4;color:#000 !important;
                        &.marcada{opacity:1;}
                    }
                }
                li {
                    border: 2px solid $negre;cursor:pointer;list-style:outside none none;width:100%;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
                    margin:0px auto;-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;padding:20px;align-items:center;text-align:center;display:grid;vertical-align:middle;
                    box-shadow:0 5px 5px rgba(0,0,0,0.1);
                    @media only screen and (max-width: $tall2){margin:10px 0 !important;}
                    /*&:not(:first-child):not(:last-child):not(.grid-choice){
                        margin:0 10px;
                        @media only screen and (max-width: $tall2) {margin:15px 0;}
                    }*/
                    &.first,
                    &:first-child{
                        margin-right:10px;
                    }
                    &:last-child:not(.grid-choice){
                        margin-left:10px;
                        @media only screen and (max-width: $tall2) {margin:0;}
                    }
                    &.encert{background-color:#a4c639;border-color:#a4c639;color:#fff}
                    &.fallat{background-color: #dd4b39;border-color: #dd4b39;color: #fff}
                    &.resposta{border-color: #a4c639;color: #a4c639}
                    &.hover{ background-color: $negre;color:$blanc;}
                    &.marcada{background-color: $negre;color:$blanc}
                    &.error{background-color: #dd4b39; border-color:#dd4b39;color:#fff;background-image:url(../img/r_ko.png);background-repeat:no-repeat;background-position:center;background-size:55px;}
                    &.correcte,
                    &.correctereal{background-color: #a4c639; border-color:#a4c639; color:#fff;background-image:url(../img/r_ok.png);background-repeat:no-repeat;background-position:center;background-size:55px;}
                    &.correcte{color:#fff}
                    &.explicacio{
                        border:none;line-height: 22px;font-style: italic;display: none;margin-top:10px;
                        a{color:#0175a2;text-decoration:none}
                    }
                }
            }
            .e8{text-align:center}
            .explicacions{
                width:$width;margin:0px auto 100px auto;display:flex;
                @media only screen and (max-width: $tall2) {width:100%}
                .border-left{height:13px;width:50px;border-left: 2px solid $negre;border-bottom:2px solid $negre;margin-right:10px;float:left;margin-top:10px}
                .text-explicacio{
                    float:left;
                    p{
                        span{font-family: "Ringside Narrow Medium"}
                        a{color:$negre;text-decoration: underline}
                        text-align: left;
                        img{width:100%;margin-top:20px}
                    }
                }
            }
            .firma{
                text-align:left; max-width:$width;margin:0 auto 50px auto;
                @media only screen and (max-width: $tall2) {width:100%}
                .e3{margin:20px 0}
                .e4{
                    p{text-align:left}
                }
            }
            .contador{
                font-family: "Ringside Narrow Book Italic"; margin-bottom: 10px;
                span {font-family: "Ringside Narrow Medium"}
            }
            .frase{font-family: Georgia; font-style: italic; margin:10px auto 40px auto; font-size: 20px; line-height: 28px; max-width: 600px; color: #4c4c4c;}
            .foto{display: inline-block;max-width: 1200px; width:100%}
            .msg_resposta2{
                width:$width;margin:0 auto;
                @media only screen and (max-width: $tall2) {width:100%}
            }
        }
    }
    .resultat{
        background-color:#e5e5e5;padding-bottom:70px;
        .e4,
        .e9{color:$negre}
        span,
        a{vertical-align: baseline;}
        .missatge_final{
            padding-top:45px;position:relative;margin-left:20px;margin-right:20px;
            p{color:$negre;margin-top:5px;}
        }
        p{
            &.share{margin-top:40px;}
        }
        .compartir{
            margin-bottom: 40px;margin-top:20px
        }
        .reload{
            margin-top:0;
            &:hover{border-color:$blanc}
        }
    }
    .publicitat{
        display: inline-block;width: 100%;background:red;padding:40px 0;
        @media only screen and (max-width: $tall2) {padding:20px}
        .content{
            width:$width;margin:0 auto;position:relative;
            @media only screen and (max-width: $tall2) {width:100%}
            .text{
                float:left;max-width:70%;
                @media only screen and (max-width: $tall2) {width:100%;float:none;max-width:100%;text-align:center}
                .e12{
                    text-align: left;
                    @media only screen and (max-width: $tall2) {text-align:center;margin-top:30px}
                }
                .e4{
                    text-align:left;
                    @media only screen and (max-width: $tall2) {text-align:center}
                }
                .logo{
                    float:left;margin-top:20px;
                    @media only screen and (max-width: $tall2) {float:none}
                }
            }
            .publi{
                float:right;
                @media only screen and (max-width: $tall2) {float:none}
            }
        }
    }
    .peufoto{
        width: 575px;margin: 0 auto;text-align: right;line-height:20px;
        @media only screen and (max-width: $tall2) {width:100%}
    }
    .final{
        margin: 20px 0; text-align: center;
        h3{margin-bottom:30px}
        p{
            color: #333;  margin-bottom: 20px; font-family: 'Ringside Narrow Book Italic';
            &.titolfinal{ margin: 24px 0; font-family: "Ringside Narrow Medium";}
        }
    }
    .peu{
        font-family:'Ringside Narrow Book Italic';padding:10px 0;
        p{margin:0;}
        a{ color: #000}
    }
    #header,
    #box{
        .wp{
            display:none !important
        }
    }
    small{
        .bases{color:#000;font-size: 80%}
    }
    #basesbox{
        h3{font:18px/28px "Ringside Narrow Book";margin-top:0}
        p{font:13px/13px "Ringside Narrow Book Italic"}
    }
    .ranquing{
        margin-top:105px;padding-top:80px;width:100%;background-color: #c0bbb5;
        .e2{text-align: center;margin:0 0 70px;}
        .llistat{
            width:90%;max-width:350px;margin:0 auto;display: none;
            .pos{
                display: table-row;
                &.punts{text-align: right;}
                .e8{display:table-cell;	border-bottom:1px solid #fff;padding:20px 0;text-align: left}
            }
        }
    }
    .image_result{
        max-width: 150px;margin-top:-150px;mnargin-bottom:20px;
        &.imatge-gif{max-width: 250px}
    }
    .contingut-media{
        width:575px;margin:0 auto;
        @media only screen and (max-width: 650px) {
            width:100%;
        }
        .wrapper_video{
            height: 0;padding-bottom: 56.25%;position: relative;overflow: hidden;width:100%;
            iframe{position:absolute;width:100%;height:100%;left:0;top:0;}
        }
        .peu{text-align:right;padding:3px 0}
    }
}

@media only screen and (max-width: 500px) {
    .pregunta{
        padding:0 10px;
        ul{width:100%}
    }
    #header{
        .dre{
            .wp{display: inline-block !important}
        }
    }
    .peufoto{width: 100%;}
}