@font-face{
	font-family:'Graphik';
	src:url('../fonts/Graphik-Medium');
	src:url('../fonts/Graphik-Medium.eot?#iefix') format('embedded-opentype'),
			 url('../fonts/Graphik-Medium.woff') format('woff'),
			 url('../fonts/Graphik-Medium.ttf') format('truetype'),
			 url('../fonts/Graphik-Medium.svg#Graphik') format('svg'); font-weight:normal; font-style:normal}
@font-face{
	font-family:'Graphik-Light';
	src:url('../fonts/Graphik-Light.eot');
	src:url('../fonts/Graphik-Light?#iefix') format('embedded-opentype'),
			 url('../fonts/Graphik-Light.woff') format('woff'),
			 url('../fonts/Graphik-Light.ttf') format('truetype'),
			 url('../fonts/Graphik-Light.svg#Graphik') format('svg'); font-weight:normal; font-style:normal}

* { box-sizing: border-box;}
a, a:hover, a:focus, a:active{ text-decoration: none}
body{/* width: 100vw; height: 100vh; overflow:hidden;*/ margin: 0px; font-family: 'Graphik', sans-serif; position: relative;}
body .container-fluid{ width: 100vw; margin: 0 auto; max-width: 1143px}
.bg-home{ }
.bg-home{ background-image: url(../imgs/home-bg.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center;}
.bg-ranking{ background-image: url(../imgs/ranking-bg.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center;}


main{ height: 78vh; position: relative; max-height: 78vh; overflow: hidden; padding: 50px; }
.bg-ranking main{ display: flex;justify-content: center; align-items: center;}

.bg-home main{ padding: 0px 50px; display: flex; align-items: center; justify-content: center;}

.clickable{cursor: pointer;}
.ruleta-box--elements {	display: flex; flex-direction: row;	align-items: center; justify-content: center;}

.round-box{ display: flex; justify-content: center; align-items: center;}
	.round-box img{ max-width: 700px; width: 100%;}
	
	.ruleta-boxed{ z-index: 99}
	.power_controls{ z-index: 9999}
.power_controls img#spin_button.btn-desktop{ max-width: 225px;}
.power_controls img#spin_button.btn-mobile{ max-width: 100px;}

.logo-box { display: flex; justify-content: center; margin-bottom: 75px}
	.logo-box img{ max-width: 200px}

.results-box{ max-width: 745px; margin: 0 auto; display: flex;}
	.results-box .results-box--round{ margin: 0px 6px}
	.results-box .results-box--round2{ display: flex;}
	.results-box .results-box__1,
	.results-box .results-box__3{ background-color: #002855; padding:15px 15px 0px 15px; color: #00F0BE; display: flex; flex-flow: column; align-items: center;}
	.results-box .results-box__1{ font-size: 26px; justify-content: flex-end;}
	.results-box .results-box__1 img{ max-width: 60px; margin-top: 22px}
	.results-box .results-box__2{ display: flex; flex-direction: column;}
	.results-box .results-box__3{ border-radius: 0px 0px 50px 0px; padding: 11px 30px; align-items: flex-start; justify-content: space-around;}
	.results-box .results-box__21{margin-bottom: 12px}
	.results-box .results-box__21,
	.results-box .results-box__22{ background-color: #EDEDED; color: #002855; flex: 1; font-size: 24px; line-height: 32px; padding: 30px;}
	.results-box__3__ranking11, 
	.results-box__3__ranking21{ padding-right: 17px;}
	.results-box__3__ranking1{ margin-bottom: 12px}
	.results-box__3__ranking1,
	.results-box__3__ranking2{ display: flex; justify-content: space-around; align-items: center; width: 100%;}
	.results-box-puntuacion { border-radius: 45%; border: 5px solid; border-color: #00F0BE; height: 80px; width: 80px;   background-color: #fff; text-align: center; color: #002855; font-size: 28px; padding: 5px; align-items: center; display: flex;}
	.results-box__3__ranking12 img{ max-width: 40px;}
	.results-box__3__ranking22 img{ max-width: 54px;}

.head__box{display: flex; flex-flow: row; position: relative; align-content: center; justify-content: space-between; align-items: center; padding-bottom: 25px}
	.head__box #paginacio { /*position: absolute; top: 0px;*/ padding-top: 30px; padding-left: 35px; /*background-image: url(../imgs/boleta-preguntas-1.png); background-repeat: no-repeat; */width: 145px; height: 147px; color: #fff; font-size: 50px; /*background-size: cover;*/ background-color: #002855; border-radius: 45%;}
	.head__box #paginacio span{ font-size: 75px;}
	.head__box #quesitos { text-align: right;}
	.head__box #quesitos img{ max-width: 567px; width: 100%;}

.question__box{ padding-right: 65px; height: auto;}
.question__box::-webkit-scrollbar,
.question__box::-moz-scrollbar { display: none; }
	.question__box #enunciat{ font-size:37px; line-height: 42px; color: #002855; padding-bottom: 26px}
	.question__box #respostes { padding-left: 100px;}
	.question__box #respostes span{ color: #6f6f6f; font-size: 26px; line-height: 31px; font-family: 'Graphik-Light', sans-serif; padding-left: 25px}
	.question__box #respostes ul{ padding: 0px}
	.question__box #respostes ul li{ list-style: none; display: flex; padding-bottom: 35px; align-items: center;}
	.question__box #respostes .img-pregunta-ico{ max-width: 34px}
/*------------------ ranking-general ------------------*/
.ranking--general { display: flex; justify-content: center; align-items: center; color: #00f0be; font-size: 41px }
.ranking--general a, .ranking--general a:hover{ color: #00f0be}
.ranking--general a{ background-image: url(../imgs/bg-ranking-general.png); background-color:#002855; padding: 150px 100px 50px; border-radius: 0px 0px 50px 0px; background-size: cover; background-repeat: no-repeat; background-position: center center; align-items: center; display: flex;}
.ranking--general a img{ max-width: 54px; margin-right: 25px}
/*------------------ final.php -----------------------*/
.page-final{ color: #002855; text-align: center;}
/*.page-final .intro-box { display: inline-flex; flex-direction: column;}*/
.page-final .intro-box h1{ font-size: 80px; line-height: 86px; margin: 0px; letter-spacing: -1.5px;}
.page-final .intro-box p{ font-size: 30px; font-family: 'Graphik-Light', sans-serif; margin: 32px 0px 5px 0px}
.page-final .intro-box p strong{ font-family: 'Graphik', sans-serif;}
.page-final .intro-box a{ font-family: 'Graphik-Light', sans-serif; font-size: 20px; padding: 14px 17px; background-color: #EDEDED; color: #002855; border-radius: 0px 0px 25px 0px; margin-top: 10px; display: inline-block;}
.page-final a:hover{ color: #002855}
.page-final .imgs-box img.imgs-box--left{ max-width: 228px; margin-right: 15px }
.page-final .imgs-box img.imgs-box--right{ max-height: 50px; margin-bottom: 50px;}
.page-final .imgs-box { display: flex; flex-direction: row; justify-content: center; padding-top: 20px; align-items: flex-end;}

/*------------------ pre footer ----------------------*/
footer{ height: 20vh; height: 22vh; position: relative; max-height: 22vh; overflow: hidden;}

.pre--footer{ display: flex; flex-direction: row; padding-bottom: 40px; justify-content: space-between; align-items: center;}
	.pre--footer .pre--footer__imgleft{ padding-left: 50px; flex: 1}
	.pre--footer .pre--footer__imgright{ padding-right: 50px; flex: 1; justify-content: flex-end; display: flex;}
	.pre--footer .pre--footer__imgleft img{ height: 36px}
	.pre--footer .pre--footer__imgright img{ height: 43px}
	
.footer{ background-color: #002855; color: #00f0be; border-radius: 0px 0px 25px 0px; display: flex; flex-flow: row; justify-content: space-between; font-size: 17px; }
.footer .footer__left{ padding: 7px 20px; display: flex; align-items: center; justify-content: flex-end; flex-grow: 1;}
	.footer .footer__left .footer__icon{ padding-left: 30px;}
	.footer .footer__left .footer__validar{ }
	.footer .footer__left .footer__volverajugar{}
	.footer .footer__left .footer__ranking{ }

	.footer .footer__left .footer__ranking a,
	.footer .footer__left .footer__volverajugar a,
	.footer .footer__left .footer__validar a{ color: #00f0be; display: flex; align-items: center; }
	.footer .footer__left .footer__ranking a img,
	.footer .footer__left .footer__volverajugar a img,
	.footer .footer__left .footer__validar a img{ margin-right: 15px; max-width: 39px;}
	.footer .footer__left .footer__ranking.footer__ranking--final a img{ max-width: 66px; }
	.footer .footer__right{ background-color: #00f0be; border-radius: 0px 0px 25px 0px; display: flex;		align-items: center; }
	.footer .footer__right .footer__salir { color: #002855; padding: 17px 50px;}
	.footer .footer__right .footer__salir a{ color: #002855;}
	
/*------------------ feedbackpop-up ----------------------*/
#feedbackpop { position: absolute; background-color: #fff; opacity: 0.8; width: 100vw; height: 100vh; z-index: 100; text-align: center; overflow: hidden;	top: 0px; left: 0px; right: 0px; bottom: 0px;}
#feedbackimg { position: absolute; z-index: 100; }
#feedbackimg2 { position: absolute; z-index: 100;}
.feedback-popup{ border-radius: 0px 0px 50px 0px;  background-color: #002855; display: flex; flex-direction: column; align-items: center; padding: 50px; color: #fff; font-size: 66px; max-width: 800px; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.feedback-popup img{ max-width: 180px}
.feedback-popup p{ margin: 25px 0px 10px 0px;}
#popupranking{ position: absolute; z-index: 100; } 
.ranking-popup{ border-radius: 0px 0px 50px 0px;  background-color: #002855; display: flex; flex-direction: column; align-items: center; padding: 15px 100px 0px 100px; color: #fff; font-size: 60px; right: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); justify-content: center;text-align: center; line-height: 100px; width: 100%; max-width: 900px; width: 90%;}
.ranking-popup p{ margin: 0px}
.ranking-popup p span.puntuacion--1{ border-radius: 46%; border: 8px solid; border-color: #00F0BE; height: 80px; width: 80px;   background-color: #fff; text-align: center; color: #002855; font-size: 95px; padding: 12px;/* align-items: center; display: flex;*/}
.ranking-popup p span.puntuacion--2{ color: #00F0BE; font-family: 'Graphik-Light', sans-serif; font-size: 125px}
.ranking-popup img{ max-width: 181px}



@media (max-width: 1270px){
	.question__box{ padding-right: 0px}
	.question__box #enunciat{ font-size: 22px; line-height: 28px; padding-bottom: 13px;}
	.question__box #respostes { padding-left: 0px;	}
	.question__box #respostes ul li{ padding-bottom: 20px}
	.question__box #respostes span{ font-size: 18px; line-height: 24px;}
	
	.head__box #paginacio{ padding: 20px; width: 100px; height: 100px; font-size: 35px}
	.head__box #paginacio span{ font-size: 50px }
	
	.results-box .results-box__3{ padding: 10px 10px;}
	.logo-box{ margin-bottom: 25px;}

	.page-final .intro-box h1{ font-size: 40px; line-height: 48px;}
	.page-final .intro-box p{ font-size: 18px; margin: 16px 0px 5px 0px;}
	.page-final .intro-box a{ font-size: 16px; text-align: left; padding: 12px;}
	.page-final .imgs-box img.imgs-box--left{ max-width: 150px}
	
	
}

@media (max-width: 1143px){
	body .container-fluid{ width: 90vw}

}


@media only screen and (max-device-width: 640px) and (orientation: landscape) {
	main{ height: auto; max-height: inherit; padding: 15px 0px;}
	footer{ height: auto;	max-height: inherit; padding-bottom: 25px; }
	.question__box #enunciat { font-size: 16px; line-height: 20px; padding-bottom: 20px;}
	.question__box #respostes span { font-size: 14px; line-height: 18px;}
	.pre--footer .pre--footer__imgleft{ padding-left: 0px;}

}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)  { .power_controls img#spin_button.btn-desktop {   max-width: 80px;}}

@media (min-width: 768px){
	.btn-desktop{ display: block}
	.btn-mobile{ display: none}
}

@media (max-width: 767px)  {
.ruleta-box--elements{ flex-direction: column;}
.btn-desktop{ display: none}
.btn-mobile{ display: block}
}

@media (max-width: 550px)  {
	main{ padding: 15px 0px; height: 75vh; max-height: 75vh}
	footer { height: 25vh; max-height: 25vh}
	.bg-home main { padding: 15px 0px;}
	.ruleta-box--elements {	flex-direction: column;}
	.home{ }
	.head__box{ padding-bottom: 15px}
	.head__box #paginacio{ padding: 15px 10px 8px 15px;width: auto; height: auto; font-size: 22px;}
	.head__box #paginacio span { font-size: 36px;}
	.question__box { padding-right: 0px;}
	.question__box #enunciat{ font-size: 16px; line-height: 20px; padding-bottom: 20px}
	.question__box #respostes{ padding-left: 0px}
	.question__box #respostes span{ font-size: 14px; line-height: 18px; padding-left: 20px;}
	.question__box #respostes .img-pregunta-ico{ max-width: 25px}
	.question__box #respostes ul li{ padding-bottom: 20px}
	.question__box #respostes ul{ margin: 0px}

	.results-box{ flex-direction: column; }
	.results-box .results-box--round2{ margin-top: 12px}
	.results-box .results-box__1 { font-size: 18px; justify-content: flex-end; flex-direction: row-reverse;}
	.results-box .results-box__1 img { margin-right: 60px; margin-top: 0px;}
	.results-box .results-box__21, 
	.results-box .results-box__22{ font-size: 14px; line-height: 20px; padding: 15px;}
	.results-box .results-box__3{ padding: 10px 15px}
	.results-box-puntuacion{ height: 44px; width: 44px; font-size: 15px; padding: 1px; }
	.results-box__3__ranking12 img{ max-width: 23px;}
	.results-box__3__ranking22 img { max-width: 30px;}


	.logo-box{ margin-bottom: 25px; }
	.logo-box img { max-width: 100px; }

	.feedback-popup{ width: 90vw; font-size: 48px;}
	.feedback-popup img { max-width: 120px;	}

	.ranking--general { color: #00f0be; font-size: 22px;}
	.ranking--general a{ padding: 50px 50px 50px;}

	.ranking-popup{  padding: 10px 20px 0px 20px; font-size: 25px; line-height: 45px;}
	.ranking-popup p span.puntuacion--1{ font-size: 40px; border: 4px solid; border-color: #00f0be; padding: 8px 17px;}
	.ranking-popup p span.puntuacion--2{ font-size: 52px}
	.ranking-popup img {max-width: 75px;}

	.page-final .intro-box h1{ font-size: 28px; line-height: 33px;}
	.page-final .intro-box p{ font-size: 15px; margin: 16px 0px 5px 0px;}
	.page-final .intro-box a{ font-size: 12px; text-align: left; padding: 12px;}
	.page-final .imgs-box { flex-direction: column; align-items: center;}
	.page-final .imgs-box img.imgs-box--left{ max-width: 100px}
	.page-final .imgs-box img.imgs-box--right { max-height: 30px; margin-bottom: 0px; margin-top: 20px;}

	.pre--footer{ padding: 15px 0px 15px 0px}
	.pre--footer .pre--footer__imgleft{ padding-left: 0px}
	.pre--footer .pre--footer__imgleft img{ width: 100%; height: auto;}	
	.pre--footer .pre--footer__imgright{ padding-right: 0px; padding-left: 25px}

	.footer{ font-size: 12px}
	.footer .footer__left{ flex: 2; padding: 7px 10px; justify-content: flex-end;}
	.footer .footer__left .footer__ranking a, 
	.footer .footer__left .footer__volverajugar a, 
	.footer .footer__left .footer__validar a{ flex-direction: column; text-align: center;}
	.footer .footer__left .footer__icon{ padding: 0px; padding-left: 10px;}
	.footer .footer__left .footer__ranking a img, 
	.footer .footer__left .footer__volverajugar a img, 
	.footer .footer__left .footer__validar a img{ margin-right: 0px; margin-bottom: 5px; max-width: 24px}
	.footer .footer__left .footer__ranking.footer__ranking--final a img{ max-width: 38px;}

	.footer .footer__right{ flex:1}
	.footer .footer__right .footer__salir{ padding: 15px 25px}
	
}
@media (max-width: 550px){
	.head__box #quesitos img{ max-width: 200px;}
	.power_controls img#spin_button.btn-mobile { max-width: 60px; }
	/*.ruleta-boxed{ height: 50vh;}*/
	.pre--footer .pre--footer__imgright img { height: 20px}

}