/*
*  To create a new theme copy this file and then adjust the campaign specifics accordingly
*/

$gyyo_white: #fff;
$gyyo_light_grey: #f1f1f1;
$gyyo_darker_grey: #ababab;
$gyyo_red: #e12b26;
$gyyo_black: #1b1b1b;
$m700: 'Arial';
$campaignfolder: 'get-your-you-on';

.#{$campaignfolder} {
    background-color: $gyyo_light_grey; padding: 10px 0 0;
    @media only screen and (min-width: 768px)
    {
        padding-top: 40px;
    }
    @media only screen and (min-width: 1024px)
    {
        padding-top: 10px;
    }

    .quiz__campaign__endpoint-title, .quiz__campaign__endpoint_article-content .quiz__campaign__endpoint-subtitle {
        @media only screen and (min-width: 768px){
            font-size: 21px; margin-bottom: 30px; z-index: 50; position: relative;
        }
    }

    .quiz__campaign-page {
        margin: 0 auto;
        @media only screen and (min-width: 768px) {
            padding-bottom: 100px;
        }
    }

    .quiz__campaign-button {
        background-color: black; box-shadow: rgba(0,0,0,0.4) 0 5px 10px 0; display: block; color: $gyyo_white; text-transform: uppercase; padding: 18px; font-weight: 700; font-size: 14px; margin-bottom: 40px;
        span, strong { color:$gyyo_red; font-size: 21px; text-transform: uppercase; font-weight: 400; }
        &:link, &:visited { color: $gyyo_white; }
    }
    .quiz__camapign__landing-title { display: none; }
    .quiz__campaign__landing {
        text-align: center; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 30px;
        &-header {
            padding: 0 10px;
            @media only screen and (min-width: 768px)
            {
                padding: 15px 0; max-width: 960px; width: 100%;
            }
        }
        &-text { max-width: 520px; width: 100%; margin: 0 auto; }
        .quiz__campaign-button {  max-width: 260px; margin: 0 auto; text-align: left; position: relative;
            &::after { background-image: url('https://cdn-img.remington-europe.com/manager/remington-europe_com/quiz-campaigns/get-your-you-on/small_arrow-right.png'); content: ''; display: block; position: absolute; transform: translateY(-50%);  right: 19px; top: 50%; width: 30px; height: 30px; background-size: 15px 12px; background-position: center; background-repeat: no-repeat; }
        }
        h1, h2 { font-size: 23px; line-height: 30px; font-weight: 400; max-width: 260px; margin: 0 auto 15px; text-transform: none; letter-spacing: normal; }
        p { color: $gyyo_darker_grey; font-size: 13px; line-height: 1.92em; margin: 0 20px 1.92em; text-transform: none; font-weight: 700;
            strong { color: $gyyo_red; }
        }
        &-title { display: none; }
        &-content { position: relative; }
        &-decoration { display: none; }
        @media only screen and (min-width: 768px)
        {
            padding-bottom: 313px;
            h1, h2 { font-size: 50px; line-height: 55px; font-weight: 400; max-width: 100%; }
            p { font-size: 15px; }

        }
        @media only screen and (min-width: 1024px)
        {
            &-decoration { display: block; pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
                &-image_1 {
                   position: absolute; right: calc(100% + 5vw); top: 3vw; display: block; width: 100%; height: auto; max-width: 300px;
                }
                &-image_2 {
                   position: absolute; left: calc(100% + 5vw); top: -3vw; display: block; width: 100%; height: auto; max-width: 300px;
                }
            }
        }
        .quiz__campaign-question {
        padding: 15px 0; overflow: hidden; display: none; opacity: 0; transition: 0.4s; transform: translateY(50px); margin: 0 auto;
        &-block[style] { background-image: none; }
        &-active { transform: translateY(0); opacity: 1; transition: 0.4s; display: block; }
        &-image { width: calc(100% - 20px); height: auto; margin: 0 10px 25px; display: block;
            @media only screen and (min-width: 768px)
            {
                max-width: 960px; width: 100%; margin: 0 auto 25px;
            }
        }
        &-text { font-family: $m900; font-size: 23px; line-height: 25px; text-align: center; margin: 0 35px 25px; text-transform: none;
            em { color: $gyyo_red; font-style: normal; }
            @media only screen and (min-width: 768px) {
                font-size: 50px; line-height: 55px; max-width: 60%; margin: 0 auto 40px;
            }
        }
        &-number { display:none; }
    }

    .quiz__campaign-answer {
        background-color: $gyyo_white; border: 2px solid $gyyo_light_grey;
        &-active {
            border: 2px solid $gyyo_red;
            .quiz__campaign-answer-text {
                &::after { background-color: black; background-image: url('/images/tick-white.svg'); }
            }
        }
        &-text {
            background-color: $gyyo_white;
            &::after { background-color: #f6f6f6; }
        }
        &-image {
            background-color: #d3d3d3;
        }
    }
    .quiz__campaign-next {
        background-color: #e4271b; display: block; padding-right: 72px; float: right; margin-top: 15px; margin-right: 140px; opacity: 0; transition: 0.4s; position: relative;
        &::after { position: absolute; right: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-image: url('https://cdn-img.remington-europe.com/manager/remington-europe_com/quiz-campaigns/get-your-you-on/small_arrow-right.png'); background-position: right; background-repeat: no-repeat; content: ''; display: block; width: 15px; height: 12px; background-size: 15px 12px; }
        &-active { opacity: 1; transition: 0.4s; }
    }
    .article-box-modal::-webkit-scrollbar-track { border: none; }
}