/* QUIZ STYLES */
/* Styles to prettify the quiz page */

html {
    /* background: #000; */
}

body {
     /* max-width: 1080px;
     height: 1920px; */
     margin: 0 auto;
     font-family: 'Titillium Web', sans-serif;      

}

::-moz-selection {background-color: transparent;}
::selection { background-color: transparent;}

h2,h3,h4,h5,h6 {font-weight: bold;}


h2 {
    font-size: 34px;
    /*margin: 15px 0;*/
    margin-bottom: 24px;
}
h3 {
    font-size: 18px;
    margin: 15px 0 10px;
}
h4 {
    font-size: 16px;
    margin: 10px 0;
}
h5 {
    font-size: 14px;
    margin: 10px 0 5px;
}
h6 {
    font-size: 12px;
    margin: 5px 0;
}
img{border:0;}

strong { font-weight: bold; }
em { font-style: italic; }
ul { list-style-type: circle; }
ol { list-style-type: decimal; }
ol li { list-style-type: decimal; margin-left: 20px; }

/*preloader*/

#loader-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* background: #000; */
  /* display: none; */
}

.load {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    /* display: none; */
}
 
.load hr {
    border: 0;
    margin: 0;
    width: 40%;
    height: 40%;
    position: absolute;
    border-radius: 50%;
    animation: spin 2s ease infinite;
}
 
.load :first-child {
    background: #f8c740;
    animation-delay: -1.5s;
}
 
.load :nth-child(2) {
    background: #f8da89;
    animation-delay: -1s;
}
 
.load :nth-child(3) {
    background: #fede4a;
    animation-delay: -0.5s;
}
 
.load :last-child {
    background: #f8da89;
}
 
@keyframes spin {
    0%, 100% {
        transform: translate(0)
    }
    25% {
        transform: translate(160%)
    }
    50% {
        transform: translate(160%, 160%)
    }
    75% {
        transform: translate(0, 160%)
    }
}

/*quiz styles*/

.quiz-app {    
    width: 100%;
    max-width: 100%;
}

/* .logo {
    position: absolute;
    left: 50%;
    top: 1840px;
    transform: translateX(-50%);
    width: 256px;
}

.new-quiz {
    position: absolute;
    top: 1820px;
    width: 280px;
    height: 80px;
} */

.new-quiz i {
    color: #fede4a;
    font-size: 96px;
    position: absolute;
}

.new-quiz img {
    width: 96px;
    height: 96px;
    position: absolute;
}

.new-quiz span {
    color: #b3b3b3;
    font-size: 32px;
    font-weight: 700;
    text-decoration: none;
    position: absolute;
    left: 80px;
    top: 28px;
}

/* .large-bottom-hero {
    width: 1080px;
    height: 1377px;
    margin: 0 auto;
    position: relative;
} */

.bg-image {    
    position: absolute; 
    z-index: -1;
    max-width: 100%
}

.quiz-info {    
    width: 100%;
    color: #f8c740;
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 6px;
    line-height: 56px;
}

.slick-quiz {
    max-width: 620px;
    margin: 0 auto;
    border-top: none;
    background: transparent;    
    font-size: 16px;
    color: #000;
    line-height: 1.5em;
    height: 600px;
}

.button {
    padding: 14px 60px;
    color:#010207;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    background-color: #fede4a;
	text-decoration: none;
    transition: .3s background-color ease-in;
    text-transform: uppercase;
    margin-left: 30%;    
}
.button:hover, .button:focus {
    background-color:#f8c740;
}

.startQuiz {
     margin-top: 40px; 
}

.quizDescription {
     margin-bottom: 80px;
}

.tryAgain {
    float: none;
    margin: 20px 0;
}

/* clearfix */
.quizArea, .quizResults {
    zoom: 1;
}
.quizArea:before, .quizArea:after, .quizResults:before, .quizResults:after {
    content: "\0020";
    display: block;
    height: 0;
    visibility: hidden;
    font-size: 0;
}
.quizArea:after, .quizResults:after {
    clear: both;
}

.questionCount {
    font-size: 28px;
    font-weight: 300;
    text-align: left;
    margin-bottom: 34px;
}

.questionCount::before {
    content: '';
    background-color:  #f8c740;
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-right: 29px;
    position: relative;
    top: 2px;
}



ol.questions {
    margin-top: -60px;
    /* margin-left: 78px; */
}
ol.questions li {
    margin-left: 0;
    margin-bottom: 36px;
    position: relative;
}

.question h3 {
    font-size: 22px;
    font-weight: 400;
    text-align: left;
    line-height: 30px;
    letter-spacing: 1px;
    font-weight: 600;
}

.question-photo {
    max-width: 100%;
}

ul.answers {
    margin-left: 0;
    font-size: 22px;
    font-weight: 400;
    text-align: left;
    margin-top: 40px;
    margin-bottom: 60px;
}

ul.responses li {
    margin-top: 72px;
    color: #000;
    font-size: 38px;
    font-weight: 400;
    text-align: left;
    line-height: 48px;
}

ul.responses li p  {
    line-height: 56px;
    letter-spacing: 2px;
}
.complete ul.answers li.correct, ul.responses li.correct p span {
    color: #6C9F2E;
}
ul.responses li.incorrect p span {
    color: #B5121B;
}

.quizResults {
    font-size: 38px;
    font-weight: 400;
    text-align: left;       
}

.quizScore {
    font-size: 28px;
    font-weight: 300;
}

.quizScore__score {
    color: #fede4a;
}

.quizLevel {
    font-size: 22px;
    font-weight: 400;     
    line-height: 28px;
    margin-top: 48px;
    text-align: justify;
}

.quizLevel strong {
    font-weight: 800;
    font-size: 26px;
    line-height: 28px;
    display: block;
    text-align: center;
}

.quizLevel p {
    margin-top: 12px;
}

.quizResultsCopy {
    color: #fede4a;
    margin-top: 64px;
    text-align: center;
    line-height: 48px;
}

.quizResultsCopy p {
    margin-top: 64px;
}

.try-again {
    margin-left: auto;
}

.difficult-levels {
    height: 360px;
    width: 400px;
    border-left: 1px solid #f8c740;
    position: relative;
    left: 95px;
    top: -50px;
}

.difficult-levels__level {
    border-bottom: 1px solid #f8c740;
    width: 370px;
    height: 119px; 
    position: relative;
}

.level-btn {
    color: #010207;
    font-size: 38px;
    font-weight: 400;
    line-height: 56px;
    width: 350px;
    text-align: center;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 90px;
    left: 46px;
    text-transform: none;
    z-index: 10;
}

.level-btn--easy {
    background-color: #fff;
}

.level-btn--easy:hover {
    background-color: #fff;
} 

.level-btn--medium {
    background-color: #f8da89;
}

.level-btn--medium:hover {
    background-color: #f8da99;
}

.level-btn--hard {
    background-color: #f8c740;
}

.level-btn--hard:hover {
    background-color: #f8c740;
}

.prevent-unanswered {
    color: #f8c740;
    font-size: 22px;
    margin: 30px auto;
    /* width: 360px; */
    letter-spacing: 2px;
    text-align: center;
}

.checkAnswer {
    display: block;
    margin: 0px auto !important;
    width: 240px;
    height: 70px;
    line-height: 70px;
    font-size: 26px;
    padding: 0;
}

@media (max-width: 992px) {
    body {
        height: auto;
    }
    .logo {        
        left: 70%;
    }

    .quiz-app {
        top: 0;
    }

    ol.questions {
        /* margin-left: 10px; */
        /* margin-right: 10px; */
    }

    .quiz-app {
        zoom: 1;
    }

    .new-quiz span {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .quizLevel {
        font-size: 16px;
        line-height: 24px;
        margin-top: 20px;
    }
    .question h3 {
        font-size: 22px;
    }

    ul.answers {
        font-size: 14px;
        margin-top: 16px;
        margin-bottom: 16px;
    }

    ol.questions li {        
         margin-bottom: 32px;         
    }
    

    .button {
    font-size: 18px;
}
}

@media (max-width: 480px) {    
    
    .button {
    margin-left: 15%;
}
}