@font-face{
	font-family: JamesAlmacen;
	src: url(/assets/font/JamesAlmacen.ttf);
}

@font-face{
	font-family: JonathanBall;
	src: url(/assets/font/JonathanBall-Acre-Medium.otf);
}

@font-face{
	font-family: LingLengLang;
	src: url(/assets/font/LingLengLang.otf);
}

@font-face{
	font-family: MyriadPro;
	src: url(/assets/font/MyriadPro-Regular.otf);
}

@font-face{
	font-family: Candara;
	src: url(/assets/font/Candara.ttf);
}



body{
	background: #E4DBD4;
}

button:focus{
	box-shadow: none !important;
	outline: none !important;
}

/*
input{
	font-family: sans-serif
}
*/

.neve{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.lettera{
	position: relative;
}

.lettera > img:first-of-type, .lettera > img:nth-of-type(2){
	position: absolute;
    top: -20px;
    left: 50%;
    width: 97%;
    transform: translateX(-49%);
}

.lettera > img.cerchio{
	width: 70%;
}

.lettera .row{
	width: 70%;
	margin: auto;
	padding-top: 200px;
}

.benvenuto{
	margin-top: 25px;
	width: 100%;
}

.lettera input{
	margin-left: 10px;
	border: 0;
	border-bottom: 1px solid #000;
}

.terreno{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

.terreno > img{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

.terreno > img:first-of-type{
	bottom: 50px;
    width: 98%;
    left: 50%;
    transform: translateX(-50%);
}

.terreno > img:nth-of-type(2){
	width: auto;
    z-index: 4;
    bottom: 84px;
    left: 113px;
}

.terreno .cartello{
	width: 100%;
    bottom: 80px;
    z-index: 2;
}

.terreno .cartello a{
	cursor: pointer;
	text-decoration: none;
    position: absolute;
    bottom: 203px;
    right: 0;
    transform: translateX(-50%);
    z-index: 6;
    font-family: LingLengLang;
    font-size: 38px;
}

.terreno .cartello a.vediamo{
	font-size: 20px;
    right: -17px;
    bottom: 215px;
}

.terreno .cartello a.vediamo p{
	padding: 0;
}

.terreno .cartello a p{
    margin: 0;
    padding: 0px 23px;
    color: #000;
}

.terreno .cartello img{
	position: absolute;
    right: 20px;
    bottom: 70px;
}

.terreno > img:last-of-type{
	z-index: 3;
}

.lettera h1.title{
	text-transform: uppercase;
	position: absolute;
	top: 111px;
	left: 50%;
	transform: translateX(-50%);
	color: #AF332F;
	font-family: LingLengLang;
	font-size: 60px;
}

.lettera.regno h1.title{
	font-size: 30px;
}

.lettera h1.title.circle{
	top: 300px;
}

.lettera p.punteggio{
	position: absolute;
    top: 380px;
    left: 50%;
    transform: translateX(-50%);
}

@media (min-width: 1200px){
	.lettera h5.risultato{
		position: absolute;
	    top: 430px;
	    left: 50%;
	    transform: translateX(-50%);
	}
}

.lettera #video{
	width: 100%;
	height: 300px;
	background: #000;
}

.lettera ol{
/* 	margin-top: 30px; */
	padding-left: 20px;
}

.lettera ol li{
	padding: 10px 0;
	font-size: 20px;
	padding-left: 15px;
}

.lettera ol li.active{
	background: #AF332F;
	color: #fff;
	margin-left: -20px;
}

.lettera ol li.active label{
	color: #fff;
}

.lettera ol li label{
	margin-bottom: 0;
	cursor: pointer;
}

.colonna{
	width: calc(100% / 5);
	padding: 0 8px;
	position: relative;
}

.colonna img{
	width: 100%;
}

.colonna div.image{
   width: 191px;
/*     height: 164px; */
    position: absolute;
}

#candy div.input{
	position: absolute;
    top: 405px;
    padding: 0 31px 0 20px;
}

#ginger div.input{
	position: absolute;
    top: 595px;
    padding: 0 31px 0 20px;
}

#rudolf div.input{
	position: absolute;
    top: 344px;
    padding: 0 31px 0 20px;
}

#santa div.input{
	position: absolute;
    top: 550px;
    padding: 0 31px 0 20px;
}

#snow div.input{
	position: absolute;
    top: 354px;
    padding: 0 31px 0 20px;
}

.colonna div.input label{
	margin-bottom: 0px;
	font-size: 17px;
	font-weight: bold;
	font-family: LingLengLang;
}

.colonna div.input input{
	border: 0;
	border-bottom: 1px solid #000;
	background: none;
	font-size: 13px;
	padding: 0;
	transform: translateY(-8px);
}

.colonna div.input input:focus{
	box-shadow: none;
	outline: none;
}

#candy div.image{
	top: 234px;
    left: 27px;
}

#ginger div.image{
	top: 428px;
    left: 26px;
}

#rudolf div.image{
	top: 177px;
    left: 28px;
}

#santa div.image{
	top: 384px;
    left: 27px;
}

#snow div.image{
	top: 183px;
    left: 27px;
}

#menu_btn_open{
	font-size: 20px;
	border: 0;
	background: none;
	position: absolute;
	bottom: 50%;
	right: 50%;
	transform: translate(50%, 50%);
	display: none;
}

#menu_btn_close{
	font-size: 20px;
	border: 0;
	background: none;
	position: absolute;
	bottom: 50%;
	right: 50%;
	transform: translate(50%, 50%);
	display: none;
}

#menu_btn_open.active, #menu_btn_close.active{
	display: block;
}

#menu_manage{
	display: none;
	position: fixed;
	bottom: 125px;
	right: 50px;
}

#menu_manage.active{
	display: block;
}
#menu_manage button{
	background: #fff;
	border: 1px solid #AF332F;
	color: #AF332F;
}
#menu_manage button.active{
	background: #AF332F;
	color: #fff;
}

.progress-bar{
	background-color: #AF332F;
	height: 10px;
}

#wizzard .step{
	display: none
}

#wizzard .step.active{
	display: block;
}

.progress{
	position: absolute;
    top: 0;
    left: 50%;
    z-index: 7;
    height: 20px;
    width: 100%;
    transform: translateX(-50%);
    display: none;
    height: 10px;
}

img.res{
	display: none;
}

#timer{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
}

#timer-message{
	font-family: LingLengLang;
}


.result .alert {
	position: absolute;
    top: 530px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
}

@media (max-width: 1199px){
	.terreno > img:nth-of-type(2){
		bottom: 42px;
	}
	.lettera #video{
		height: 200px;
	}
	.result .alert {
	    top: 475px;
	}
}

@media (max-width: 991px) and (min-width: 769px){
	.lettera #video{
		height: 100px;
	}
	.terreno > img:nth-of-type(2){
		left: 50px;
		bottom: 10px;
	}
	.terreno > img:first-of-type{
		bottom: 30px;
	}
	.terreno .cartello img{
		bottom: 40px;
	}
	.terreno .cartello a.vediamo{
		bottom: 184px;
	}
	#quiz .result .alert {
	    top: 300px;
	}
	#quiz .lettera.result h1.circle{
		top: 164px;
		font-size: 50px;
	}
	#quiz .lettera.result p.punteggio{
		top: 215px;
	}
	#quiz .lettera.result h5.punteggio{
		top: 260px;
	}

}

@media (max-width: 768px){
	.lettera .row{
		padding-top: 180px;
	}
	.lettera.title_res .row{
		padding-top: 200px;
	}
	.lettera > img.cerchio{
		width: 100%;
	}
	img.benvenuto{
		margin: 0;
		margin-bottom: 25px;
	}
	img.desk{
		display: none;
	}
	img.res{
		display: block;
	}
	.lettera input{
		margin-left: 0;
		width: 100%;
		margin-bottom: 25px;
	}
	.terreno > img:nth-of-type(2){
		bottom: 5px;
		left: 40px
	}
	.terreno .cartello img{
		bottom: 10px;
	}
	.terreno .cartello a{
		bottom: 143px;
	}
	.terreno > img:first-of-type{
		bottom: 30px;
	}
	.lettera #video{
		height: 200px;
	}
	.terreno .cartello a.vediamo{
		bottom: 157px;
	}
	#quiz .result .alert {
	    top: 465px;
	}
	#quiz .lettera.result h1.circle{
		top: 225px;
		font-size: 50px;
		text-align: center;
	}
	#quiz .lettera.result p.punteggio{
		top: 345px;
	}
	#quiz .lettera.result h5.punteggio{
		top: 400px;
	}

}

@media (max-width: 425px){
	.lettera .row{
		padding-top: 80px;
	}
	.lettera.result .row{
		width: 90%;
	}
	.lettera.title_res .row{
		padding-top: 135px;
	}
	.lettera.title_res input{
		margin-bottom: 10px
	}
	.terreno .cartello img{
		bottom: 0;
	}
	.terreno .cartello a{
		bottom: 134px;
	}
	.terreno > img:nth-of-type(2){
		bottom: -22px;
	    left: -27px;
	    transform: scale(0.6);
	}
	.terreno > img:first-of-type{
		bottom: 18px;
	}
	#formLogin div.d-flex{
		flex-direction: column;
	}
	.terreno .cartello a.vediamo{
		bottom: 146px;
	}
	.lettera h1.title{
		top: 50px;
	}
	.lettera p.punteggio{
		width: 70%;
	    font-size: 30px !important;
	    top: 220px;
	    text-align: center
	}
	.lettera h1.title.circle{
		font-size: 40px;
		text-align: center;
		top: 115px;
	}
	.lettera h5.risultato{
		top: 270px;
	}
}

@media
  only screen and (-webkit-min-device-pixel-ratio: 2.0),
  only screen and (min--moz-device-pixel-ratio: 2.0),
  only screen and (-o-min-device-pixel-ratio: 2.0/1),
  only screen and (min-device-pixel-ratio: 2.0),
  only screen and (min-resolution: 227dpi),
  only screen and (min-resolution: 2.0dppx) {

	body{
		zoom: 75%;
	}
}

@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape) {

  	body{
		zoom: 100%;
  	}
    .colonna div.input label{
	    font-size: 14px;
    }
    #candy div.input{
	    position: absolute;
		top: 315px;
		left: 4px;
    }
    #ginger div.input{
	    position: absolute;
		top: 475px;
		left: 4px;
    }
    #rudolf div.input{
	    position: absolute;
		top: 265px;
		left: 4px;
    }
    #santa div.input{
	    position: absolute;
		top: 440px;
		left: 4px;
    }
    #snow div.input{
	    position: absolute;
		top: 270px;
		left: 4px;
    }
    #immagine-1, #immagine-2, #immagine-3, #immagine-4, #immagine-5{
	    width: 155px;
	    height: 100px;
    }
    #immagine-1{
	    transform: translate(-1px, -30px);
    }
    #immagine-2{
	    transform: translate(-1px, -55px);
    }
    #immagine-3{
	    transform: translate(-1px, -25px);
    }
    #immagine-4{
	    transform: translate(-1px, -50px);
	}
	#immagine-5{
	    transform: translate(-1px, -20px);
	}
    .image.box.allegati label{
	    font-size: 14px;
    }
    .colonna div.image{
	    background: none;
    }
    #quiz .result .alert {
	    top: 450px;
	}
	#quiz .lettera.result h1.circle{
		top: 235px;
	}
	#quiz .lettera.result p.punteggio{
		top: 300px;
	}
	#quiz .lettera.result h5.punteggio{
		top: 370px !important;
	}
	#wizardForm h5{
		font-size: 16px;
		margin: 0 !important;
	}
	#quiz .quiz h1.title{
		top: 90px;
	}
	#quiz .step{
		transform: translate(0, -25px);
	}
}