body, html {
    margin:0;
}

body {background: #e9ebe1}

#universal4o {margin-bottom: 0;}
#universal-account {font-size: 12px;}

#schl3o {
    width: 100%;
}


body.schlCoppa #schlMainContent {
    padding-top: 0px;
}
#schlMainContent {
    width: 100%;
    margin: 0;
}

#schlPageContent, #pageContent {
    background-color: #fff;
    margin: 0;
    padding-bottom: 0px;
    width: 100%;
}


#factsfirst {position:relative; -webkit-font-smoothing:antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; width:932px; margin:70px auto 0 auto; font-family: Arial, "sans-serif";

-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;

-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;

border: 18px solid white;

}

#quiz_holder {position:relative; box-sizing:border-box; height:590px; border-bottom:10px solid #bd3431; border-top:10px solid #bd3431; background:#fff;}
#quiz_holder a#quiz_sound-toggle {display:block; position:absolute; right:0; bottom:12px; width:30px; height:28px; overflow:hidden;}
#quiz_holder a#quiz_sound-toggle img {position:absolute; top:0; left:0; width:30px; height:auto;}
#quiz_holder a#quiz_sound-toggle.quiz_sound-off img {top:-28px;}
.quiz_screen {display:none; text-align:center; position:relative; padding:0;}
#quiz_holder  a.quiz_btn {height:44px; line-height:44px; color:#fff; text-decoration:none; display:inline-block; text-align:center; font-weight:700; padding:0 30px; background:#bd3431; font-size:20px;}
#quiz_holder span.no_br {white-space:nowrap;}

#quiz_title h1 {margin:0 auto; padding:60px 0 30px; text-align:center; color:#000; font-weight:400; font-size:58px; line-height:64px; max-width:750px;}
#quiz_title p {margin:0 auto 20px auto; padding:0; text-align:center; color:#000; font-weight:400; font-size:20px; line-height:32px; max-width:750px;}
#quiz_title p strong {color:#bd3431;}

#quiz_instructions h2 {margin:0 auto; padding:160px 0 20px 0; text-align:center; color:#000; font-weight:400; font-size:58px; line-height:64px; max-width:750px;}
#quiz_instructions p {margin:0 auto 20px auto; padding:0; text-align:center; color:#000; font-weight:400; font-size:20px; line-height:32px; max-width:750px;}
#quiz_holder a#quiz_instructions-next {padding: 0 50px; margin-top: 30px;}

#quiz_holder .quiz_question h2 {color:#bd3431; font-size:20px; line-height:32px; margin:0; padding:60px 0 0 0; text-align:center;}
#quiz_holder .quiz_question p {margin:0 auto 20px auto; padding:0; text-align:center; color:#000; font-weight:400; font-size:20px; line-height:32px; max-width:650px;}

#quiz_holder .quiz_answer h2 {color:#bd3431; font-size:58px; line-height:64px; margin:0; padding:100px 0 50px 0; text-align:center; font-weight:400;}
#quiz_holder .quiz_answer p {margin:0 auto 20px auto; padding:0; text-align:center; color:#000; font-weight:400; font-size:20px; line-height:32px; max-width:750px;}

#quiz_holder #quiz_answer1 p {max-width: 810px;}
#quiz_holder #quiz_question7 p {max-width: 860px;}

.quiz_select-holder {position:absolute; top:250px; left:0; right:0; margin-top: 0;}
.quiz_select {display:inline-block; margin: 0 17px 0 0; width:208px; text-decoration:none; text-align:center; vertical-align: text-top; box-sizing:border-box;}
.quiz_select-holder a:first-child {margin: 0 17px 0 16px;}

#factsfirst .quiz_select:hover {text-decoration:none;}
.quiz_select .quiz_select-text {
	display:block; 
	height:208px; 
	width:208px;
	background-color:#fff; 
	color:#000; 
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 400;
	padding:50px 15px 15px 15px;
	line-height: 20px;
	box-shadow:  0 0 10px  rgba(0,0,0,0.6);
	-moz-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
	-o-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
	box-sizing:border-box;
	position: relative;
}
#factsfirst .quiz_select:hover .quiz_select-text {text-decoration:none;}


.quiz_select .quiz_select-text strong.quiz_select-letter {color:#bd3431; display:block; font-size: 20px; line-height: 32px; position: absolute; top:10px; left:0; right:0; text-align: center;}

.quiz_select-large .quiz_select .quiz_select-text {font-size: 20px; line-height: 30px;}
.quiz_select-center .quiz_select .quiz_select-text {display: table-cell; vertical-align:middle; padding:15px;}



#quiz_wrong {padding: 160px 0 0 0}
#quiz_wrong p {padding:0; margin: 0; font-size: 30px; line-height: 64px;}
#quiz_wrong a#quiz_wrong-btn {margin-top: 30px;}


#quiz_final h2 {margin:0 auto; padding:130px 0 30px; text-align:center; color:#000; font-weight:400; font-size:58px; line-height:64px; max-width:750px; text-transform: uppercase}
#quiz_final p {margin:0 auto 20px auto; padding:0; text-align:center; color:#000; font-weight:400; font-size:20px; line-height:32px; max-width:680px;}
#quiz_final p strong {color:#bd3431;}



/***************************************************************/
/********************** Ian's CSS ******************************/

    .quiz_screen.active { display: block; }
    .quiz_btn span { color: black; }
    .active .quiz_btn { opacity: 0; animation: fadein 1s 0.5s forwards; }
    .active .quiz_select-holder { overflow-y: hidden; padding-top: 10px; padding-bottom: 100px; }
    .active .quiz_select-holder a { transform: translateY(100%); animation: raise-questions 2s forwards; }
	
    #quiz_title.active h1, #quiz_final h2 { position: relative; overflow-y: hidden; }	
    #quiz_title.active h1:after, #quiz_final h2:after { content: "";  position: absolute; top: -25%; bottom: 0; left: 0; right: 0; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 25%); animation: scroll-reveal 4s forwards; }	
    #quiz_title.active p, #quiz_final p { position: relative; overflow-y: hidden; }	
    #quiz_title.active p:after, #quiz_final p:after { content: "";  position: absolute; top: -30%; bottom: 0; left: 0; right: 0; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 25%); animation: scroll-reveal 4s 4s forwards; }
	
    #quiz_title.active p strong, #quiz_final.active p strong { color: rgb(0, 0, 0); font-weight: 400; }
    #quiz_title.active p strong:nth-of-type(1), #quiz_final.active p strong:nth-of-type(1) { animation: strong-reveal 0.33s 6s forwards; }
    #quiz_title.active p strong:nth-of-type(2), #quiz_final.active p strong:nth-of-type(2) { animation: strong-reveal 0.33s 6.33s forwards; }
    #quiz_title.active p strong:nth-of-type(3), #quiz_final.active p strong:nth-of-type(3) { animation: strong-reveal 0.33s 6.66s forwards; }
    #quiz_title.active p strong:nth-of-type(4), #quiz_final.active p strong:nth-of-type(4) { animation: strong-reveal 0.33s 7s forwards; }
    #quiz_title.active p strong:nth-of-type(5), #quiz_final.active p strong:nth-of-type(5) { animation: strong-reveal 0.33s 7.33s forwards; }
    #quiz_title.active p strong:nth-of-type(6), #quiz_final.active p strong:nth-of-type(6) { animation: strong-reveal 0.33s 7.66s forwards; }
    #quiz_title.active a, #quiz_final.active a { opacity: 0; animation: fadein 1s 6s forwards; }
    .quiz_answer.active h2 { transform: scale(1.25, 1.25); }
    .quiz_answer.active p { position: relative; overflow-y: hidden; }
    .quiz_answer.active p:after { content: "";  position: absolute; top: -25%; bottom: 0; left: 0; right: 0; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 25%); animation: scroll-reveal 3s forwards; }
    .quiz_answer.active a { opacity: 0; animation: fadein 1s 2s forwards; }
    @keyframes fadein { to {opacity: 1;} }
	@keyframes scroll-reveal {
		from { top: -25%; }
		  to { top: 100%; }
	}
    @keyframes strong-reveal {
        0% { color: rgb(0, 0, 0); font-weight: 400; }
        90% { color: rgb(0, 0, 0); font-weight: 800; }
        100% { color: rgb(189,52,49); font-weight: 800; }
    }
    @keyframes raise-questions {
        /* from {trans;} */
        to {transform: translateY(0);}
    }
/***************************************************************/
/***************************************************************/