iframe.intro-animation-mobile {
	display: none;
	width: 100%;
	height: 100vh;
}

@media only screen and (max-width: 600px) {

	.question-answer-tube.animate-not-selected:nth-child(1) {
		-webkit-animation: tube-left 0.6s ease-in;
		        animation: tube-left 0.6s ease-in;
		animation-fill-mode: forwards;
	}

	.question-answer-tube.animate-not-selected:nth-child(2) {
		-webkit-animation: tube-right 0.6s ease-in;
		        animation: tube-right 0.6s ease-in;
        animation-fill-mode: forwards;
	}

	.question-answer-tube.animate-not-selected:nth-child(3) {
		-webkit-animation: tube-left 0.6s ease-in;
		        animation: tube-left 0.6s ease-in;
        animation-fill-mode: forwards;
	}

	.question-answer-tube.animate-not-selected:nth-child(4) {
		-webkit-animation: tube-right 0.6s ease-in;
		        animation: tube-right 0.6s ease-in;
        animation-fill-mode: forwards;
	}

	.question-answer-tube.animate-selected {
		-webkit-animation: tube-bottom 0.6s ease-in;
		        animation: tube-bottom 0.6s ease-in;
        animation-fill-mode: forwards;
	}

	@keyframes tube-bottom {
	    0% {
	        top: 0;
	    }
	    100% {
	        top: -10%;
	    }
	}


	@keyframes tube-left {
	    0% {
	        left: 0;
	    }
	    100% {
	        left: -120%;
	    }
	}
	@keyframes tube-right {
	    0% {
			left: 0;
	    }
	    100% {
			left: 120%;
	    }
	}
}

@media only screen and (max-width: 600px) {

	.stage-content > div {
	    margin-left: 20px;
	    margin-right: 20px;
		text-align: center;
		width: 100%;
	}

	h1 {
		font-size: 38px;
    	line-height: 52px;
    	margin-bottom: 20px;
	}

	p {
		font-size: 17px;
		line-height: 24px;
	}

	.pdf-logo {
		padding: 10px;
		padding: 10px;
	    bottom: 0;
	    width: 100%;
	    justify-content: center;
	}
	.pdf-logo img {
		max-height: 40px;
	}
	.pdf-logo img.pdf-logo-lvaf {
		max-height: 30px;
	}

	.intro-animation-desktop {
		display: none;
	}
	.intro-animation-mobile {
		display: block !important;
	}

	.next-btn {
		margin-left: auto;
    	margin-right: auto;
	}

	.question-bubble {
	    font-size: 17px;
	    line-height: 24px;
	    margin: 0 !important;

	    padding: 0 10px 60px;

	    background-repeat: no-repeat;
	}
	
	.question-answer {
		font-size: 17px;
		line-height: 24px;
	}

	.thank-you-title {
		font-size: 42px;
		line-height: 60px;
	}

	.section-intro .stage-content {
		align-items: flex-end;
	    padding-bottom: 100px;
	}
	.section-intro h1 {
		margin-bottom: 100px;
	}
	.section-intro .question-start-iframe {
	    right: 0;
	    left: 0;
	    width: 200vw;
    	height: 90vh;
	}

	.results .stage-animation {
	    display: none;
	}

	.results .stage-content {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
    	align-items: flex-start;
	}

	.results .stage-content p {
    	font-size: 14px;
    	line-height: 17px;
	}

	.results .stage-content div {
	    text-align: left;
	}

	.detailed-results {
	    position: absolute;
	    bottom: 50px;
	    height: auto;
	    width: 100%;
	    padding-left: 20px;
	    padding-right: 20px;
		right: 0;
		font-size: 14px;
	}

	.detailed-results .next-btn {
		margin-top: 20px;
	}

	.speech-bubble {
		position: absolute;
	    top: 0;
	    left: 0;
	    font-size: 17px;
	    line-height: 23px;
	    padding: 0 20px;
	    min-height: 100px;
	    margin: 60px 20px 0;
	    width: calc(100% - 40px) !important;
	}

	.stage-content div.question-answers ,
	.stage-content div.question-answers.tube {
		width: calc(100% - 40px);
	    position: absolute;
	    bottom: 40px;
	    left: 20px;
	}

	.question-question-iframe-1-anim, .question-question-iframe-2-anim, .question-question-iframe-3-anim,
	.question-question-iframe-4-anim, .question-question-iframe-5-anim {
	    width: 100vw;
	    height: 50vh;
	    position: ABSOLUTE;
	    top: 100px;
	    left: 0;
	}

	.thank-you-content .question-end-iframe {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100vw;
	    height: 50vh;
	}

	.thank-you-content .stage-content {
	    height: 50vh;
	    position: absolute;
	    bottom: 0;
	    align-items: flex-start;
	}
	.question-answer.question-answer-tube {
		position: relative;
		margin-bottom: 20px;
	    width: 100%;
	}

	.question-popup {
    	position: fixed;
    	margin: 20px;
    	width: calc(100% - 40px);
    	height: calc(100% - 40px);
	}
}
/*dz added*/
 @media (max-width: 499px){
	.stage-content h1{
		font-size: 53px;
	}
	.legend h1{
		font-size: 38px;
	}
	.next-btn{
		width: 149px;
    	height: 49px;
	}
	.question-answer{
		font-size: 24px;
		font-weight: bold;
	}
	.question-answer-circle:nth-child(1), .question-answer-circle-drop:nth-child(1){
		top: 2%;
		left: 1%;
	}
	.question-answer-circle:nth-child(2), .question-answer-circle-drop:nth-child(2){
		top: 2%;
		right: 1%;
	}
	.question-answer-circle:nth-child(3), .question-answer-circle-drop:nth-child(3){
		left: 1%;
	}
	.question-answer-circle:nth-child(4), .question-answer-circle-drop:nth-child(4){
		right: 1%;
	}
	.question-question-iframe-1-anim, .question-question-iframe-2-anim{
		left: -24%;
		top: 13%;
	}
	.question-question-iframe-3-anim{
		left: -20%;
    	transform: rotate(20deg);
	}
	.question-question-iframe-4-anim{
		transform: scaleX(-1);
		top: 135px;
		left: 31%;
	}
	.speech-bubble:after{
		transform: rotate(-90deg) !important;
		left: 0 !important;
		bottom: -34px;
	} 
	
	 .speech-bubble{
		border-radius: 60px 60px 60px 0px;
		font-weight: bold;
		font-size: 20px;
	}

	.speech-bubble div{
		text-align: left;
		padding-left: 9%;
    	padding-right: 4%;
	}
}

@media (max-width: 499px) and (max-height: 737px){
	.stage-content h1 {
		font-size: 42px;
}
	.speech-bubble{
		font-size: 18px;
	}
	.next-btn {
		width: 133px;
		height: 42px;
		font-size: 20px;
	}
	.section-intro .question-start-iframe {
		width: 192vw;
		height: 72vh;
		top: 1%;
}
	.question-question-iframe-1-anim,.question-question-iframe-3-anim{
		height: 37vh;
		left: -30%;
		top: 19%;
	}
	.question-question-iframe-2-anim{
		height: 40vh;
		top: 19%;
	}
	.question-question-iframe-4-anim{
		height: 45vh;
		top: 115px;
	}
	.question-question-iframe-5-anim{
		top: 140px;
		left: 19px;
	}
	.question-answer-circle, .question-answer-circle-drop{
		width: 42%;
	}
	.question-answer-circle:nth-child(1), .question-answer-circle-drop:nth-child(1){
		top: 14%;
		left: 7%;
	}
	.question-answer-circle:nth-child(2), .question-answer-circle-drop:nth-child(2){
		top: 14%;
		right: 7%;
	}
	.question-answer-circle:nth-child(3), .question-answer-circle-drop:nth-child(3){
		left: 7%;
	}
	.question-answer-circle:nth-child(4), .question-answer-circle-drop:nth-child(4){
		right: 7%;
	}
	.question-answer.question-answer-tube{
		padding: 11px 0;
		margin-bottom: 15px;
	}
	.tube .question-answer{
		font-size: 20px;
	}
}
/* results section*/
@media (max-height: 667px) {
	.small-mobile-results {
		/* bottom: 20px; */
		bottom: 23px;
	}
	.small-mobile-results-row {
		margin-bottom: 5px;
	}
	.sm-share {
		margin-top: 13px;
		font-size: 20px;
	}
	.sm-next-btn {
		margin-top: 15px !important;
	}
	.sm-challenge-btn {
		margin-top: 15px !important;
	}
}

@media (max-width: 325px) {

	.stage-content h1 {
		font-size: 27px;
	}

	.small-mobile-results-row {
		margin-bottom: 0;
	}

	.sm-next-btn {
		margin-top: 10px !important;
		font-size: 18px;
	}

	.sm-challenge-btn {
		margin-top: 10px !important;
		font-size: 18px;
	}

	.sm-share {
		font-size: 18px;
	}
	
}

/* LEGEND */
@media (max-width: 376px) {
	.stage-content h1 {
		line-height: 42px;
		font-size: 35px;
	}
	.legend p {
		font-size: 18px;
    	line-height: 25px;
	}
} 

@media (max-height: 640px) and (max-width: 358px) {
	.stage-content h1 {
		font-size: 32px;
    	line-height: 29px;
	}
	.legend p {
		font-size: 15px;
		line-height: 23px;
	}
	.intro .next-btn {
		font-size: 18px;
	}
}

/*results-section fix */

@media (max-width: 1400px) {

	.results-content .stage-content {

		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: static;
		min-height: 100vh;

	}
	
	.results-content .stage-content .detailed-results {

		position: static;
		padding-left: 0;
		padding-bottom: 1.5rem;

	}

	.final {

		overflow: auto;

	}

	.sm-challenge-btn {

		color: #FFF !important;
		text-decoration: none;
	}

	.sm-share {

		color: #000 !important;
		text-decoration: none;

	}

	.results-content .stage-content .detailed-results a {

		text-decoration: none;
	}

	.stage-content__result {

		width: 90% !important;
		margin-left: 11px !important;

	}

	.results-content .stage-animation {

		display: none;

	}

	.stage-content .detailed-results {

		width: 90% !important;
		margin-left: 11px !important;

	}


}


/* make sure results buttons are ok*/

.sm-challenge-btn {

	color: #FFF !important;
	text-decoration: none !important;
}

.sm-share {

	color: #000 !important;
	text-decoration: none !important;

}


@media (max-width: 500px) {

	.stage-content__result, .stage-content .detailed-results {

		margin-left: 20px !important;

	}


}