﻿.big-question > h4 {
    text-shadow: 1px 1px 2px #000;
    text-transform: uppercase;
    color: #FFCC00;
}
.question{
    padding-top:1%;
    width:100%;
}
    .question > input{
        display:none;
    }
    .question > .question-header {
        width: 100%;
        background-image: url('../assets/faq/question_top.svg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position-y: bottom;
        box-sizing: border-box;
        padding: .5% 2% 0 0;
        font-size: min(2.1vw, 22px);
        text-shadow: 1px 1px 2px #000;
        text-transform: uppercase;
        color: #FFCC00;
        max-height: 70px;
        height: 7.5vw;
        white-space: nowrap;
    }
    .question > .question-header > .list-icon {
        content: url('../assets/faq/List.png');
        height: 80%;
        padding: 0.5% 0.5% 0 1.5%;
    }
    .question > .question-header > .arrow-icon {
        content: url('../assets/faq/Arrow.png');
        height: 55%;
        padding: 0.5% 1% 0.5% 1%;
        float:right;
    }
    .question > .answer {
        width: 100%;
        background-image: url('../assets/faq/Body_Gradient.svg');
        background-size: 100% 100%;
        background-repeat: repeat-y;
        font-size: min(2.5vw, 16px);
        box-sizing: border-box;
        padding: 0 2% 0 7%;
        display:none;
    }
    .question > .question-footer {
        width: 100%;
        background-image: url('../assets/faq/question_bottom.svg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding-top: 2%;
    }
    .question > input:checked ~ .answer {
        display: block;
    }
    .question > input:checked ~ .question-header {
        background-image: url('../assets/faq/Top_Gradient.svg');
    }
    .question > input:checked ~ .question-footer {
        background-image: url('../assets/faq/Bottom_Gradient.svg');
    }
    .question > input:checked ~ .question-header > .arrow-icon {
        -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
    }
.main-section {
    width: 102%;
    background-image: url('../assets/faq/yoda.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 35%;
    margin-top:-2%;
    box-sizing:border-box;
    padding-top:2%;
}

.yoda {
    width: 35%;
    padding-top: 41%;
    float: right;
}