.quiz {
    height: 100vh;
	//background:url(../images/startquizbgTEMP.png) no-repeat;
	//background:url(../images/startquizbgTEMP.png) no-repeat;
	background: #4C2F6F url(../images/linesbg.png) no-repeat;
	background-size: cover;

    overflow: hidden;

	@include breakpoint(mobile) {
		background:url(../images/startquizbgmobileTEMP.png) no-repeat;
	    background-size: cover !important;
	}

	@media (max-height: 700px) and (min-width: 769px) {
	  //  height: auto;
	  //  padding-bottom: 14%;
	}

}



.timerwrapper {
    width: 100%;
    position: relative;
    text-align: right;
    top: -50px;

	@include breakpoint(tablet) {
	 	top: -2px;
	}

	@media (max-height: 700px) and (min-width: 769px) {
	  	top: -20px;
	}



	#timer {
		font-size: 28px;
		font-family: proxima_nova_altextrabold;
	    left: 100%;

		@include breakpoint(tablet) {
		 	font-size: 16px;
		}

	}

	#clock {
	    position: absolute;
	    right: 0;
	    top: 5px;

		@include breakpoint(tablet) {
			position: absolute;
			top: 0;
		}

		img {
			width: 28px;
		}

	}

	.currentQ {
	    color: #b3b3b3;
	    font-family: proxima_nova_alt_rgregular;
	    font-size: 28px;
	    position: absolute;
	    left: 0;


		@include breakpoint(tablet) {
		 	font-size: 16px;
		}

	}
}

.quizwave {
	@include breakpoint(mobile) {
		display: none;
	}
}

.timerfix {
	position: relative;
	display: inline-block;
    right: -15px;

	@include breakpoint(tablet) {
    	right: -30px;
	}
}

.question {
	width: 500px;
	max-width: 100%;
	margin: 0 auto;
    padding-top: 55px;

	@include breakpoint(mobile) {
	    padding-top: 0;

	}

	@media (max-height: 700px) and (min-width: 769px) {
	  	padding-top: 0;
	}


	.nextQuestion {
		cursor: pointer;
		border: 3px solid #fff;
		color: #fff;
		display: inline-block;
	    float: right;
	    padding: 10px 24px;
	}
}

.greenFinish {
    position: absolute;
    right: -274px;
    background: RGBA(72,237,174,1);
    width: 469px;
    height: 100vh;
    transform: skew(-27deg);
    overflow: hidden;


	@media (max-height: 700px) and (min-width: 769px) {
		right: -230px;
 	 	height: 1000px;
	}

	@include breakpoint(mobile) {
        right: -397px;
        transform: skew(-22deg);
    }

}

.greenFinish::before {
    content: "";
    position: absolute;
    width: 998px;
    background: url(../images/linesbg.png) no-repeat;
    display: block;
    height: 100vh;
    transform: skew(26.5deg);
    background-size: 181%;
    right: 9px;
    z-index: 1000;
}

.animateQuiz {
    z-index: 5;
    position: relative;

	&.active {
		z-index: 0;
	}

	@include breakpoint(mobile) {
	  	padding-top: 5px;
	}

}

.alternative {
	position: relative;
	color: #fff;
	font-size: 20px;
	text-transform: uppercase;
  	cursor: pointer;
  	transition: .3s opacity ease;


	@include breakpoint(mobile) {
	  	font-size: 16px;
	}

	@include breakpoint(iphone) {
	  	font-size: 11px;
	}


  	.single {
		width: 100%;
    	padding: 15px 16px 13px 25px;
		display: block;
		z-index: 10;
		background: RGBA(44, 43, 52, .9);
	    margin-bottom: 8px;
    	transition: .2s ease;

      	&:hover {
			@media (min-width: 769px) {
	      		color: #322E3B;
		  		background: RGBA(255, 255, 255, .5);
			}
	  	}


		@include breakpoint(mobile) {
	  		padding: 11px 16px 9px 25px;
		}

	    &.singleBool {
    		background: RGBA(44, 43, 52, 0);

    		&:hover {
				color: #fff;
    		}
	    }

		.inner_single {
			position: absolute;
			top: 0;
			bottom: 0;
			width: 0;
			left: 50%;
			z-index: 1;

		  	&.error {
		  		background: RGBA(209, 27, 31, 0.9);
				margin: 0 auto;
				left: 0;
				right: 0;
				width: 100%;
				animation: animateWrongAnswer .8s;
		  	}

		  	&.nonAnswered {
		  		background: RGBA(44, 43, 52, .5) !important;
		  		width: 100%;
		  		left: 0;
		  	}

		  	&.showRightAnswer {
		  		border: 3px solid #568343;
		  		background: RGBA(44, 43, 52, .9) !important;
				left: 0;
				right: 0;
				width: 100%;
				transition: border .5s ease;

				@include breakpoint(mobile) {
				  	border: 2px solid #568343;
				}
		  	}

		  	&.correct {
		  		background: RGBA(86, 131, 67, 0.9);
				margin: 0 auto;
				left: 0;
				right: 0;
				width: 100%;
				animation: animateRightAnswer 1s;
		  	}
		}

  	  	span {
			position: relative;
			display: block;
			z-index: 2;
  	  	}
  	}

}


@keyframes animateWrongAnswer {
	0% {
		width: 0;
	}
	30% {
		width: 100%;
	}
	40% {
		width: 90%;
	}
	50% {
		width: 100%;
	}
	60% {
		width: 90%;
	}
	70% {
		width: 100%;
	}
	90% {
		width: 90%;
	}
	100% {
		width: 100%;
	}
}


@keyframes animateRightAnswer {
	0% {
		width: 0;
	}
	20% {
		width: 100%;
  	}
	40% {
		width: 90%;
  	}
	100% {
		width: 100%;
  	}
}


.yourScore {
	font-size: 28px;
	font-family: proxima_nova_altextrabold;
    text-align: center;
    padding-bottom: 25px;
    position: relative;

	@include breakpoint(mobile) {
	  	font-size: 16px;
	}

	@include breakpoint(mobile) {
	  	padding-bottom: 7px;
	}
}



.noposition {
    padding-top: 100px !important;

	@include breakpoint(mobile) {
  	    padding-top: 80px!important;
	}

	@include breakpoint(iphone) {
  	    padding-top: 65px!important;
	}

}