@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&family=Open+Sans:wght@400;700&display=swap');

body {font-family: "Open Sans", sans-serif; font-size:1rem;  margin: 0px; padding:0px;
    animation: fadein 2s; 
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
	
background-image: url("../img/img-quiz/bg-texture-quiz.jpg");
background-repeat: no-repeat;
background-position: top center;
background-size: contain;
}


body.beije	{background-color:#f3f0eb; }
body.blu	{background-color: #2196f3; }
body.verde 	{ background-color:#388e3c; }

/*  Transizione BODY <<< */
@keyframes fadein { from {opacity:0; }  to {opacity:1; } }
@-moz-keyframes fadein { from {opacity:0; }  to {opacity:1; } }			/* Firefox */
@-webkit-keyframes fadein { from {opacity:0; }  to {opacity:1; } }		/* Safari and Chrome */
@-o-keyframes fadein { from {opacity:0; }  to {opacity:1; } }			/* Opera */
/*  Transizione BODY <<< */

.logo {	max-width: 300px; padding: 25px 0 20px 25px;}

video {	outline: none; border:none;}
#qContainer {position: relative; width: 1400px; background-color: #fff; margin: 0 auto;}
#quiz {box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border: 10px solid #ff674a;
box-shadow: 15px 15px 36px rgb(101 93 93 / 45%);
-webkit-box-shadow: 15px 15px 36px rgb(101 93 93 / 45%); margin:auto;
}

.bordovideo {box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border: 10px solid #ff674a;
box-shadow: 15px 15px 36px rgb(101 93 93 / 45%);
-webkit-box-shadow: 15px 15px 36px rgb(101 93 93 / 45%); margin:auto; width: 100%;
}

#qHeader {width:100%; background-color:#ffffff; display: table; }
img.qHeader {vertical-align:middle;}
p.qHeader {float:right; margin:50px 20px 0 0;
color: #000;
font-family: "Merriweather",sans-serif;
font-size: 40px;
font-weight: 900;
text-align: center;
padding: 0;}
.punto {color: #ff674a;font-family: "Merriweather",sans-serif;}
.titleSmall {
font-size: 25px;color: #000;
font-family: "Merriweather",sans-serif;}

p.titoloVideo {
color: #000;
font-family: "Merriweather",sans-serif;
font-size: 20px;
font-weight: 900;
text-align: left;
margin: 2px 0 18px 0;}

.sottotitoloVideo {
font-size: 15px;font-family: "Merriweather",sans-serif;color: #000;}


.leftImg {position: relative; float: right; left: 20px; bottom: 20;}
.rightImg {position: relative; float: right; left: 195px; bottom: -20;}
.leftTxt { position: relative; }

	
.qFooter {position: absolute; bottom:0; width:100%; height:2rem; text-align:right;}
.qVideo { margin:auto;font-size:1.5rem; color:#000000;   padding: 1rem; display:table;  text-align: center;  }
.vVideo {float:left;}
.qBlocco { margin:auto;color: #000;
font-family: "Merriweather",sans-serif;
font-size: 38px;
font-weight: 900;
text-align: center;
padding: 1.5rem 0 0 0;}

.gamepart {
display: block;
	font-size: 20px;
	margin-bottom: 40px;
	 position: absolute;
	top: 0;
	background: #ff674a;
	padding: 0 10px 5px 5px;
	line-height: 1;
	color: white;
font-family: "Merriweather",sans-serif;}


.gamepart.dx {
right: 0px;
}

.qBlocco.partwrap {position: relative;}

.contenitoreVideo  {width: 1000px; margin: 0 auto;}
.qAudio {font-size:1rem; color:#72787a; font-weight:900; text-align: right; margin: 18px 0 0 0;}
img.qAudio {height:2rem; fill:#5a6770; vertical-align:middle; margin: 0; padding: 0;}


.qRigaCla {padding:1rem;display: flex; border-bottom:1px solid #ccc; margin:auto; }
.qCla {padding:0.5rem; width:25%; color: #72787a;}
.qCla.grass {font-weight:900; color: #8a8069; }
.qPag {padding:1rem;display: block; margin:auto; width: 50%; text-align: center;}
.qPag b {font-size:1.5em; color: #ff674a;}
.qPag a {color: #000; text-decoration: none;}
.punti-totalizzati {color: #ff674a;font-family: "Merriweather",sans-serif;font-size: 30px;font-weight: 700; text-align: center;padding-top: 30px;}


.qRiga {padding:1rem; }
.qRiga.center {width: 20%; text-align:center; margin:auto; }
.qRigaBg {padding:1rem; background-color: #f2f0ea; margin-bottom: 15px; margin-left: 80px; width: 85%; }

.qTxt {font-size:1.7rem; display: inline-block;
padding: 0 0 0 1rem;
margin:auto;
font-family: "Open Sans", sans-serif;
color: #72787a;
font-weight: 900;
text-align: left;
line-height: 29px;
}
.qTxt.center {width: 90%; text-align:center;}
.qTxtV2 {font-size:2rem; display: inline-block; padding: 0 0 1rem 1rem; margin:auto;
font-family: "Merriweather",sans-serif;
color: #000;
font-weight: 900;
width: 90%;
text-align: center;
}

.divcentrare {display: table; height: auto;}
.centrare {display: table-cell; vertical-align: middle;}


.qInvia {display: flex; margin:auto; padding-right:5px;background-color: #ff674a; height: 80px; margin-left: -1px; width: 100%;}
.qIco {height: 2.4rem; margin-bottom: 1rem;}
.qErr {font-size:1.5rem; margin:auto; padding:0; color:red;width: 80%; text-align:center; padding:1rem;}
a.qErr {color:red; }
img.qCerchio { 
	height: 250px;
	width: 250px;
	background-color:#fff;
	object-fit: cover;
	clip-path: circle(50% at 50% 50%);
}
img.qCerchio.sml { 
  height: 100px;
  width: 100px;
  }
div.qCerchio.sml { 
	height: 100px;
	width: 100px;
 	background-color:#ffffff;
	padding: 0;
	object-fit: cover;
	clip-path: circle(calc(50% - 4px) at 50% 50%);}
	
img.qCerchio.mid { 
  height: 180px;
  width: 180px;
  }
div.qCerchio.mid { 
	height: 180px;
	width: 180px;
 	background-color:#ffffff;
	padding: 0;
	object-fit: cover;
	clip-path: circle(calc(50% - 4px) at 50% 50%);}
 
.qScelta {width: 30%;float:left; margin-left: 36px;}
.qScelta.mid {width: 22%;float:left; margin-left: 30px;}

.pScelta {text-align:center ;border-radius: 4rem; font-family: "Open Sans", sans-serif;
color: #72787a;font-weight: 900; cursor: pointer; padding: 0.5rem; font-size: 1.7rem;margin:15px 0 15px 0;}

#punteggio {
background-color: #ffdcd5;
color: #ff674a;
text-align: center;
font-family: "Open Sans", sans-serif;
font-size: 30px;
font-weight: 700;
line-height: 2;
}

#spiegazione {
color: #72787a;
text-align: center;
font-family: "Open Sans", sans-serif;
font-size: 20px;
font-weight: 900;
margin-bottom: 15px;
text-transform: uppercase;
}

.esitopunti {
font-family: "Open Sans", sans-serif;
font-size: 21px;
font-weight: 700;
padding: 20px;
color: #000;
background-color: #f8ebc2;
line-height: 25px;
margin: 0 30px;
}

.esitopunti a {
color: #000;
text-decoration: none;
}

.titoloesitopunti {
font-family: "Merriweather",sans-serif;
font-size: 21px;
font-weight: 700;
color: #ff674a;
text-align: center;
}

.sottotitolo {
color: #72787a;
text-align: center;
font-family: "Open Sans", sans-serif;
font-size: 20px;
font-weight: 900;
margin-bottom: 15px;
text-transform: uppercase;}

input[type=button], input[type=submit] {
	margin:auto; width: 20rem;
	font-weight:700; color: #fff !important; text-transform: uppercase; text-decoration: none;
	background: #000;
	color: #fff;
	padding: 0.5rem;
	border-radius: 3rem;
	display: inline-block;
	border: none;
	outline: none;
	transition: all 0.4s ease 0s;
	font-size: 27px;
	font-weight: 700;
	cursor: pointer;
	margin-top: 16px;
	font-family: "Open Sans", sans-serif;
}

input[type=button]:hover, input[type=submit]:hover  {
	background: #8a8069;
	cursor: pointer;
}

.leftImg {left: 70px; top: -40px; position: relative; }
.centerTxt { margin: auto; width: 20%; text-align: center; color:#ff674a; font-weight:900; font-family: "Open Sans", sans-serif;}
.centerTxtV2 { margin: auto; width: 20%; text-align: center; color:#3aae2a; font-weight:900; font-family: "Open Sans", sans-serif; padding-left:25px; padding-top: 5px; font-size:30px; }

hr {background-color:#f2f0ea; height: 10px; border: 0; width: 96%; margin: 41px auto;}



/* quiz */
.multiple-quiz .qScelta {position: relative}
.multiple-quiz .qIco {position: absolute; right: 10px}
.multiple-quiz .qScelta > p, .multiple-quiz .qScelta > img {cursor: pointer}

#qStopper{ 
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	display: none;}

.feedback-on #qstopper {display: block;
}

.qInvia{ 
	z-index: 2000000;
	position: relative;}

#chiudi { position: absolute; left: 50%;  top: 55%; margin-top: 8rem;margin-left: -1.5rem;
cursor: pointer;
color:#72787a;
height: 3rem; width: 3rem; background-color: #ffffff; z-index:99999;
box-shadow: 0 3px 6px #999;
-webkit-box-shadow: 0 3px 6px #999;
-moz-border-radius: 2rem;
-webkit-border-radius: 2rem;
padding:0.5rem;
font-size:2.3rem;
font-weight:900;
text-align: center;
display: none;
font-family: "Open Sans", sans-serif;
}

#msgbx {
font-size:1.2rem;
color:#72787a;
position: absolute;
left: 50%;
top: 50%;
height: 20rem;
width: 30rem;
margin-top: -10rem;
margin-left: -17rem;
padding: 2rem;
background: #fff;
border: 0;
box-shadow: 0 3px 6px #999;
-webkit-box-shadow: 0 3px 6px #999;
-moz-border-radius: 2rem;
-webkit-border-radius: 2rem;
display: none;
z-index:99998;
font-family: "Open Sans", sans-serif;
font-weight: 400;
}

#msgbx.quiz.big {
text-align:left; 
width: 60rem;
    height: 28rem;
    margin-top: -18rem;
    margin-left: -30rem;
}
#msgbx a { 
text-align: center;
color: #8a8069;
font-weight: 700;
}

#msgbx a:hover {
color: #ff674a;
}

#msgbx.quiz.big li {
margin-bottom:6px;
}

#dettRisp {display: none;background-color: #8a8069;text-align: center; z-index: 30000;
position: relative;}

.feedback-on #dettRisp {display: block;}

#dettRisp a {
color: #f2f0ea;
text-align: center;
font-family: "Open Sans", sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 2;
text-decoration: none;}