@font-face {
  font-family: TradeGothic;
  src: url(../fonts/TradeGothicNextLTPro-Cn.otf) format("opentype");
;
}

        @font-face {
  font-family: TradeGothicBold;
  src: url(../fonts/TradeGothicNextLTPro-Bd.otf) format("opentype");
;
}

@font-face {
  font-family: TradeGothicHVIT;
  src: url(../fonts/TradeGothicNextLTPro-HvIt.otf) format("opentype");
;
}


    #logo{
           	position: absolute;
			top:20px;
			left:20px;
			width: 250px;
			height: 200px;
            z-index: 26;
        }
        

 body{

	background-color: #fcfbf8;
	background:url("../img/bg-quiz.png")no-repeat;
	background-size:cover;
	background-attachment:fixed;
	font-family: 'TradeGothic';
	font-size: 18px;
	color:#1a413e;
 }

.quizArea{
  width: 95%;
 margin: 12% auto;
 padding:10px;
 position: relative;
 text-align: center;
 
 }
.mc_quiz{
	color: #3a5336;
	margin-bottom: 0px;
	font-style:italic;
}

.answerOptions{
    height:100px;
}

.multipleChoiceQues{
  width:90%;
  margin: auto;
  padding: 10px;
   
}
.quizBox
{
	width:90%;
	margin: auto;

}

 #home {
			position: fixed;
			bottom:50px;
			left:50px;
			width: 50px;
			height: 50px;
            cursor:pointer;
            z-index: 30;
			background: url("../img/HOME_ARANCIO.svg");
						background-size: 100%;
			align-items: center;
			
		/*	opacity:0;
			display:none;*/
		}

.question{
	text-align: center;
  font-size: 0.8em;
  margin-bottom:70px;
}

.buttonArea
{
	/*text-align: right;*/
	height: 4.5em;
}

button {
	height: 4em;
	width:150px;
	padding: 1.5em auto;
	margin: 1em auto;
	background-color:#1a413e;
	border:none;
	border-radius: 25px;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.5em;
	transition: all 0.2s cubic-bezier(.4,0,.2,1); 
	cursor:pointer;
	font-family: 'TradeGothic';
}

#next:hover,
#submit:hover,
.viewanswer:hover,
.viewchart:hover,
.backBtn:hover,
.replay:hover {
  letter-spacing: 0.8em;
}
.viewanswer,
.viewchart,
.replay{
	width: 30%;
}

.backBtn{
	width:200px;
	height: 2em;
	font-size: 0.8em;
	margin-left: 70%;
}
#next:active,
#submit:active,
.viewanswer:active,
.viewchart:active,
.backBtn:active,
.replay:active  {
  letter-spacing: 0.3em;
}

.resultArea{
	display: none;
	width:70%;
	margin: auto;
	
	padding: 10px;
	
}

.chartBox{
	width: 60%;
	margin:auto;
}

.resultPage1{
	
	text-align: center;
	
}
.resultBox h1{
	
}

.briefchart
{
	text-align:center;
}

.resultBtns{
	width: 60%;
	margin: auto;
	text-align:center;
}
.resultPage2,
.resultPage3
{
	display: none;
	text-align: center;
}

.allAnswerBox{
	width: 100%;
	margin: 0;
	position: relative;
}

._resultboard{
	position: relative;
	display:inline-block;
	width: 40%;
	padding: 2%;
    height: 190px;
	vertical-align: top;
	border-bottom: 0.6px solid rgba(255,255,255,0.2);
	text-align: left;
	margin-bottom: 4px;
	
}

._resultboard:nth-child(even){
	
	
	margin-left: 5px;
	border-left: 0.6px solid rgba(255,255,255,0.2);
}
._resultboard:nth-last-child(2),
._resultboard:nth-last-child(1){
	border-bottom: 0px;
}

._header{
	font-weight: bold;
    margin-bottom: 8px;
    height: 50px;
}

._yourans,
._correct{
	margin-bottom: 8px;
	position: relative;
	line-height: 2;
	padding: 5px 5px 5px 25px;
	border-radius:25px;
}
._correct{
	background: #f39237 ;
}
.h-correct{
	background: #f39237;

}

/*.h-correct:after,
._correct:after {
  line-height: 1.4;
  position: absolute;
  z-index: 499;
  font-family: 'FontAwesome';
  content: "\f00c";
  bottom: 0;
  right: 7px;
  font-size: 1.9em;
  color: #2dceb1;
}*/
.h-incorrect{
	background: #fde1c6 ;
}
/*
.h-incorrect:after {
  line-height: 1.4;
  position: absolute;
  z-index: 499;
  font-family: 'FontAwesome';
  content: "\f00d";
  bottom: 0;
  right: 7px;
  font-size: 1.9em;
  color: #ff383e;
}*/

.resultPage3 h1,
.resultPage1 h1,
.resultPage2 h1{
	text-align: center;
	padding-bottom: 50px;
   /* border-bottom: 1.3px solid rgba(21, 63, 101,0.9);*/
    color: #3a5336;
    font-style:italic;
}

.my-progress {
  position: relative;
  display: block;
  margin: 3rem auto 0rem;
  width: 100%;
  max-width: 950px;
}

progress {
  display: block;
  position: relative;
  top: -0.5px;
    left: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: #cbbba0 ;
  width: 99%;
  height: 2.5px;
  background: none;
  -webkit-transition: 1s;
  transition: 1s;
  will-change: contents;
}
progress::-webkit-progress-bar {
  background-color: #cbbba0;
}
progress::-webkit-progress-value {
  background-color:#f39237;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.my-progress-indicator {
  position: absolute;
  top: -6px;
  left: 0;
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #fcfbf8;
  border: 3px solid #cbbba0;
  border-radius: 50%;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  -webkit-transition-delay: .3s;
          transition-delay: .3s;
  will-change: transform;
}
.my-progress-indicator.progress_1 {
  left: 0;
}
.my-progress-indicator.progress_2 {
  left: 5.5%;
}
.my-progress-indicator.progress_3 {
  left: 11%;
}
.my-progress-indicator.progress_4{
  left: 16.5%;
}
.my-progress-indicator.progress_5 {
  left: 22%;
}
.my-progress-indicator.progress_6 {
  left: 27.5%;
}
.my-progress-indicator.progress_7 {
  left: 33%;
}
.my-progress-indicator.progress_8 {
  left: 38.5%;
}
.my-progress-indicator.progress_9 {
  left: 44%;
}
.my-progress-indicator.progress_10 {
  left: 49.5%;
}
.my-progress-indicator.progress_11 {
  left: 55%;
}
.my-progress-indicator.progress_12 {
  left: 60.50%;
}

.my-progress-indicator.progress_13 {
  left: 66%;
}

.my-progress-indicator.progress_14 {
  left: 71.5%;
}

.my-progress-indicator.progress_15 {
  left: 77%;
}

.my-progress-indicator.progress_16 {
  left: 82.5%;
}

.my-progress-indicator.progress_17 {
  left: 88%;
}

.my-progress-indicator.progress_18 {
  left: 93.5%;
}

.my-progress-indicator.progress_19 {
  left: 99%;
}
.my-progress-indicator.active {
  -webkit-animation: bounce .5s forwards;
          animation: bounce .5s forwards;
  -webkit-animation-delay: .5s;
          animation-delay: .5s;
  border-color: #f39237 ;
 
}

.animation-container {
  position: relative;
  width: 100%;
  -webkit-transition: .3s;
  transition: .3s;
  will-change: padding;
  overflow: hidden;
}

.form-step {
  position: absolute;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  will-change: transform, opacity;
}

.form-step.leaving {
  -webkit-animation: left-and-out .5s forwards;
          animation: left-and-out .5s forwards;
}

.form-step.waiting {
  -webkit-transform: translateX(400px);
          transform: translateX(400px);
}

.form-step.coming {
  -webkit-animation: right-and-in .5s forwards;
          animation: right-and-in .5s forwards;
}

@-webkit-keyframes left-and-out {
  100% {
    opacity: 0;
    -webkit-transform: translateX(-400px);
            transform: translateX(-400px);
  }
}

@keyframes left-and-out {
  100% {
    opacity: 0;
    -webkit-transform: translateX(-400px);
            transform: translateX(-400px);
  }
}
@-webkit-keyframes right-and-in {
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes right-and-in {
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes bounce {
  50% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes bounce {
  50% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.hidden {
  display: none;
}


ul{
	list-style-type: none;
	width: 60%;
	margin: auto;
	text-align: left;
}


li *{
    	cursor:pointer;
}
li {
	position: relative;
	

	height:auto;
	float:left;
	width:25%;
	padding:7px 0 ;
	text-align:center;
	line-height:25px;
	border:2px solid #f39237;
	border-radius: 65px;
}

.myoptions:first-child{
    margin-right:10%;
}

.myoptions:last-child{
    margin-left:10%;
}

label{
	color: #f39237;
}
/*
label:before {
    content: "";
    width: 15px;
    height: 15px;
    background: #f39237 ;
    position: absolute;
    left: 7px;
		top: calc(50% - 13px);
    box-sizing: border-box;
    border-radius: 50%;
}*/

input[type="radio"] {
	opacity: 0;
	-webkit-appearance: none;
	display: inline-block;
	vertical-align: middle;
	z-index: 100;
	margin: 0;
	padding: 7px 0;
  width: 100%;
	height: auto;
	position: absolute;
	left: 0;
	top: calc(50% - 15px);
	cursor: pointer;
}

.bullet {
    position: relative;
    width: 100.5%;
    height: 100.5%;
    left: 0px;
    top: 0px;
   /* border: 5px solid #f39237 ;*/
   background-color:#f39237;
    opacity: 0;
    border-radius: 25px;
    z-index:-1;
}

input[type="radio"]:checked ~ .bullet {
	position:absolute;
	opacity: 1;
	animation-name: explode;
	animation-duration: 0.350s;
}

input[type="radio"]:checked ~ label{
    color:#fff;
}



input[type="radio"] {
	opacity: 0;
	-webkit-appearance: none;
	display: inline-block;
	vertical-align: middle;
	z-index: 100;
	margin: 0;
	padding: 7px 0;
  width: 100%;
	height: auto;
	position: absolute;
	left: 0;
	top: calc(50% - 15px);
	cursor: pointer;
}
.line {
	position: absolute;
	width: 10px;
	height: 2px;
	background-color: #f39237 ;
	opacity:0;
}

.line.zero {
	left: 11px;
	top: -21px;
	transform: translateY(20px);
	width: 2px;
	height: 10px;
}

.line.one {
	right: -7px;
	top: -11px;
	transform: rotate(-55deg) translate(-9px);
}

.line.two {
	right: -20px;
	top: 11px;
	transform: translate(-9px);
}

.line.three {
	right: -8px;
	top: 35px;
	transform: rotate(55deg) translate(-9px);
}

.line.four {
	left: -8px;
	top: -11px;
	transform: rotate(55deg) translate(9px);
}

.line.five {
	left: -20px;
	top: 11px;
	transform: translate(9px);
}

.line.six {
	left: -8px;
	top: 35px;
	transform: rotate(-55deg) translate(9px);
}

.line.seven {
	left: 11px;
	bottom: -21px;
	transform: translateY(-20px);
	width: 2px;
	height: 10px;
}

input[type="radio"]:checked ~ .bullet .line.zero{
	animation-name:drop-zero;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.one{
	animation-name:drop-one;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.two{
	animation-name:drop-two;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.three{
	animation-name:drop-three;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.four{
	animation-name:drop-four;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.five{
	animation-name:drop-five;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.six{
	animation-name:drop-six;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.seven{
	animation-name:drop-seven;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}

@keyframes explode {
	0%{
		opacity: 0;
		transform: scale(5);
	}
	60%{
		opacity: .5;
		transform: scale(0.5);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes drop-zero {
	0% {
		opacity: 0;
		transform: translateY(20px);
		height: 10px;
	}
	20% {
		opacity:1;
	}
	100% {
		transform: translateY(-2px);
		height: 0px;
		opacity:0;
	}
}

@keyframes drop-one {
	0% {
		opacity: 0;
		transform: rotate(-55deg) translate(-20px);
		width: 10px;
	}
	20% {
		opacity:1;
	}
	100% {
		transform: rotate(-55deg) translate(9px);
		width: 0px;
		opacity:0;
	}
}

@keyframes drop-two {
	0% {
		opacity: 0;
		transform: translate(-20px);
		width: 10px;
	}
	20% {
		opacity:1;
	}
	100% {
		transform: translate(9px);
		width: 0px;
		opacity:0;
	}
}

@keyframes drop-three {
	0% {
		opacity: 0;
		transform: rotate(55deg) translate(-20px);
		width: 10px;
	}
	20% {
		opacity:1;
	}
	100% {
		transform: rotate(55deg) translate(9px);
		width: 0px;
		opacity:0;
	}
}

@keyframes drop-four {
	0% {
		opacity: 0;
		transform: rotate(55deg) translate(20px);
		width: 10px;
	}
	20% {
		opacity:1;
	}
	100% {
		transform: rotate(55deg) translate(-9px);
		width: 0px;
		opacity:0;
	}
}

@keyframes drop-five {
	0% {
		opacity: 0;
		transform: translate(20px);
		width: 10px;
	}
	20% {
		opacity:1;
	}
	100% {
		transform: translate(-9px);
		width: 0px;
		opacity:0;
	}
}

@keyframes drop-six {
	0% {
		opacity: 0;
		transform: rotate(-55deg) translate(20px);
		width: 10px;
	}
	20% {
		opacity:1;
	}
	100% {
		transform: rotate(-55deg) translate(-9px);
		width: 0px;
		opacity:0;
	}
}

@keyframes drop-seven {
0% {
		opacity: 0;
		transform: translateY(-20px);
		height: 10px;
	}
	20% {
		opacity:1;
	}
	100% {
		transform: translateY(2px);
		height: 0px;
		opacity:0;
	}
}


	#lingue{
		    position: fixed;
			bottom: 50px;
			left: 50%;
	    	width:auto;
	    	text-align:center;
	    	z-index:27;
	    	transform:translate(-50%,0);
	    	float:left;
		}
		
		#francese{
		    display:block;
		    width:40px;
		    height:40px;
		    background: url(../img/FRA.svg) no-repeat center center;
		    float:left;
		}
		
		#italiano{
		    display:block;
		    width:40px;
		    height:40px;
		    background: url(../img/ITA.svg) no-repeat center center;
		    float:left;
		    margin:0 10px;
		}
		
		#inglese{
		    display:block;
		    width:40px;
		    height:40px;
		    background: url(../img/ENG.svg) no-repeat center center;
		    float:left;
		    margin:0 10px;
		}
		
		
		 #back {
            font-family: 'TradeGothic';
            letter-spacing: 1.5px;
            position: fixed;
            bottom: 65px;
            right: 50px;
            color: #fff;
            z-index: 20;
            text-decoration: none;
            font-size: 20px;
            cursor:pointer;
            background: #F29138;
            padding:6px 15px;
            font-weight:900;
            font-style:italic;
            border-radius:30px;
            transition: all .3s ease-in-out;
            
        }
        
        #back:hover{
        
            background:#19413E;
        }

        #back a{
            text-decoration: none;
            color: #fff;
            font-weight:bold;
        }
        
        
        		@media all and (max-width: 1280px) {
		    
		     #logo{
        	width: 150px;
			height: 150px;
    }
    
              #lingue, #back, #home {
                bottom:20px;
             }
		}