@font-face {
    font-family: 'YummyCupcakes';
    src: url('YummyCupcakes.ttf') format('truetype');
    }
	
	
html, body
{
	margin:0px;

    height: 100%;
	width:100%;
	font-family:YummyCupcakes;	
	
	
}

.oldBrowser{
	text-align:center;
	margin:0 auto;
	font-size:200%;
	width:100%;
	height:100%;
	font-family:Verdana, Geneva, sans-serif;	
	z-index:20;
	background-image:url('img/oldBrowser.jpg');
	background-repeat:no-repeat;
	background-position:center;
	background-color:#FFF;
	color:#333;	
}

.mainArea,.loader,.footer{
	position:relative;
	display:block;
	overflow:hidden;
	width:1024px;
	height:768px;
	margin: 0 auto;

}

#shareBt{
position:absolute;
z-index:1000;
right:0;
margin-top:10px;
}


.mainScene{
	display:block;
	overflow:hidden;
	width:100%;
	height:100%;
	position:relative;
	background: url(img/bg.jpg) no-repeat;
	background-size:contain;
	
}

.sequences{
	position:relative;
	width:100%;
	height:100%;

}

.loader{
	
	position:absolute;
	display:none;
	z-index:21;
	background-image:url('img/preloader.gif');
	background-repeat:no-repeat;
	background-position:center;
	background-color:#FFF;
	opacity:0.8;	
	
}

.textInfo{
	position:absolute;
	z-index:20;
	font-size:140%;
	margin-left:6%;
	margin-top:2%;		
	
}


.btClosePop:hover{
	cursor:pointer;	
	
}

.btHome{
	position:absolute;
	background-image:url('img/btHome.png');
	background-repeat:no-repeat;
	background-position:center;
	background-size:90% 90%;
	margin-top:1%;
	margin-left:1%;
	width:4.4%;
	height:5.8%;
	z-index:10;
	position:absolute;
	-webkit-border-radius: 25%;
	-moz-border-radius: 25%;
	border-radius: 25%;
	background-color:#76ab92;
}

.btHome:hover{
	
	cursor:pointer;
	
}

.mainPopup{
	width:100%;
	height:100%;
	display:none;
	position:absolute;
	overflow: hidden;
	
}

.bgPopup{
	display: table;
	font-size:24px;
	padding:2%;
	background-color: rgba(255,255,255,0.96);
	margin:0 auto;
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	border-radius: 14px;
	-webkit-box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.43);
	-moz-box-shadow:    2px 2px 2px rgba(50, 50, 50, 0.43);
	box-shadow:         2px 2px 2px rgba(50, 50, 50, 0.43);
	margin-top:100px;

}


.cutImage{
	display: inline-block;
	float:left;
	width:136px;
	height:360px;	
	margin-top:0px;
	margin-right:20px;
}


.textBoxSala{
	display: inline-block;
	width:300px;
	text-align:left;
	margin-top:20px;
}

.btClosePop{
	margin-top:-30px;
	margin-right:-30px;
	float:right;
	width:40px;
	height:40px;
	text-align:center;
	color:white;
	line-height:40px;
	 -moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	background-color:#76ab92;		
}


.jumpHomeZone{
	margin-top:2%;
	z-index:20;
	position:absolute;
	margin-left:24%;
}

#mainPopup2 .cutImage{
	
	background: url(img/popLuca.png) no-repeat;	
	background-size:contain;
}

#mainPopup1 .cutImage{

	background: url(img/popFabio.png) no-repeat;	
}

#mainPopup3 .cutImage{
	width:222px;
	background: url(img/popMatilde.png) no-repeat;	
}

#mainPopup4 .cutImage{

	background: url(img/popTeresa.png) no-repeat;	
}

#mainPopup5 .cutImage{
	width:176px;
	background: url(img/popLucia.png) no-repeat;	
}

#mainPopup6 .cutImage{
	width:178px;
	background: url(img/popAldo.png) no-repeat;	
}

#mainPopup7 .cutImage{
	width:136px;
	background: url(img/popAlessandro.png) no-repeat;	
}

.bt{
	bottom:0;
	position:absolute;
	height:50%;	
	z-index:10;
	/*background-color:red;
	opacity:0.8;*/
}

.bt:hover{
	cursor: pointer;
}

#bt2{
	width:10%;
	margin-left:1%;
}
#bt3{
	width:16%;	
	margin-left:12%;
}

#bt7 {
	width:14%;
	margin-left:29%;
}

#bt1{
	width:17%;
	margin-left:43.5%;
}

#bt4{
	width:9%;
	margin-left:60.5%;
}

#bt5{
	width:12%;
	margin-left:70%;
}

#bt6{
	width:17%;
	margin-left:82%;
}

.scene{
	width:100%;
	height:100%;
	display:none;
	position:absolute;
	
}

.sceneObj{
	position:absolute;	
	width:100%;
	height:100%;
	
}

.obj{
	position:absolute;
width:100%;
height:100%;	
	
}

.bg{
	
margin:0 auto;
margin-left:-10px;
width:102%	;	
	
}

.imgFrontZone{
	position:absolute;
	width:100%;
	height:100%;		
	
	
}
/*popup Section */
.popup{
	width:57%;
	height:60%;
	position:relative;	
	
}

.imgPopup{
	display:block;
	width:100%;
	height:auto;
	position:absolute;
	background-size:contain;
	margin-top: 26%;
	margin-left:72%;
	
	}


.textZone{
	width:100%;
	position:absolute;
	margin-top:32%;
	margin-left:88%;
		
	
}


#popup2 .imgPopup{
	margin-top:8%;
	margin-left:12%;		
}



#popup2 .textZone{
	margin-top:14%;
	margin-left:20%;		
}

#popup13 .imgPopup{
	margin-top:7%;
		
}

#popup13 .textZone{
	margin-top:20%;
}

/*popupCoord*/


.textPopup{
	width:70%;
	height:auto;
	font-size:155%;
	margin-bottom:4%;
	
	
}

.textPopup:hover{
cursor:pointer;	
	
}

.btPopupImg{
	float:left;
	margin-right:4%;
	
}

.jumpHomeZone:hover{
	cursor: pointer;
}


.btGenPlay{
	width:6%;
	height:10%;
	-webkit-border-radius:30%;
	-moz-border-radius: 30%;
	border-radius:30%;
	padding-bottom:2.2%;
	padding-left:3.2%;
	background-color:#76ab92;
}


.genArrow{
	margin-top:40%;
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	border-left:16px solid white; 	
}


.jumpSequence{
	
	float:left;
}


.btEnter{
	float:left;
	width:88px;
	height:74px;
	z-index:11;
	background: url(img/btEnter.png) no-repeat;	
	
}


.textBtHome{
	float:left;
	width:30%;
	text-align:left;
	font-weight:bold;
	margin-top:10px;
}

.bal{
	position:absolute;
	font-size:34px;
	z-index:100;
	opacity:0;
	width:41.6%;
	height:44.01%;
	background-repeat:no-repeat;
	background-size:contain;
	
}

.textInBal{
	width:100%;
	max-width:90%;
	height:100%;
	text-align:center;
	margin:0 auto;
	margin-top:28%;
	font-size:100%;
	
}

#bal0{
	margin-left:50%;
	margin-top:1%;		
}

#bal1{
	margin-left:48%;
	margin-top:-2%;	
}

#bal2{
	margin-left:2%;
	margin-top:2%;	
	
}
#btDisclaimerText{
z-index:23;	
	
}

.externalText{
	

width:100%;
height:100%;
position:absolute;
z-index:22;
display:none;

	
	
}




.textPop{

	position:relative;
		
	padding:4%;
	overflow:auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	height:90%;
	font-size:100%;
	
	
}

.bgPopupText{
	position:relative;
	font-family:Verdana, Geneva, sans-serif;
	margin:0 auto;
		margin-top:4%;
	margin-bottom:4%;
	max-height:80%;
	width:50%;
	height:75%;
	max-height:75%;
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	border-radius: 14px;
	-webkit-box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.43);
	-moz-box-shadow:    2px 2px 2px rgba(50, 50, 50, 0.43);
	box-shadow:         2px 2px 2px rgba(50, 50, 50, 0.43);
	background-color: rgba(255,255,255,0.96);
	
	
	
}



.externalText .btClosePop{
	float:none;
	z-index:24;
	margin-top:-4%;
	margin-left:-4%;
	position:absolute;
	font-family:YummyCupcakes;
	
}

.footer{
	position:absolute;
	bottom:0;
	font-family:Verdana, Geneva, sans-serif;
	background-color:white;
	opacity:0.8;	
	z-index:23;
	height:auto;
}

.textInsFoot{
	width:52%;
	margin:0 auto;
	font-size:90%;
}


/* ipad */

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


html, body, .mainArea,.loader {
	width:768px;
	min-width:768px; 
	margin:0 auto;
	height:576px;
	min-height:576px;

}

.footer{
	height:auto;
}

.textPopup{

	font-size:120%;
	
}

.textInBal{
	font-size:26px;


	
}

.footer{
	
	width:768px;
	margin:0 auto;
	height:576px;

	position:absolute;
	bottom:0;
	z-index:23;
	height:auto;
}

.textInsFoot{
	width:100%;
	text-align:center;

}


}



@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	
html, body, .mainArea,.loader {
	 
	width:897px;
	min-width:897px; 
	margin:0 auto;
	height:673px;
	min-height:673px;

}

.footer{
	height:auto;
}

 .textPopup{

	font-size:140%;
	
}


.textInBal{
	font-size:30px;

	
}

.footer{
	
	width:897px;
	margin:0 auto;
	height:673px;

	position:absolute;
	bottom:0;
	z-index:23;
	height:auto;
}

.textInsFoot{
	width:100%;
	text-align:center;

}

.textPop{
	


}



}

/*Iphone */


@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px)
{

.bgPopup{
	
	margin-top:20px;
}

.cutImage{	
	margin-right:5px;
	background-size:contain;
	
	
}

.textBoxSala{
	
	margin-top:10px;

}




.btClosePop{
	margin-top:-10px;
	margin-right:-10px;
	width:20px;
	height:20px;
	line-height:20px;
	font-size:14px;
}

.btEnter{
	width:44px;
	height:37px;	
	background-size:contain;
}	




}


@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px)
and (orientation : portrait)
 {

html, body, .mainArea,.loader {
	 
	width:320px;
	min-width:320px; 
	margin:0 auto;
	height:240px;
	min-height:240px;

}

.footer{
	height:auto;
	min-height:auto;
}

.bgPopup{
	width:200px;
	font-size:9px;
}

.cutImage{
	width:49px;
	height:132px;	
}

.textInfo{

	font-size:60%;
	
}

.textBtHome{
	width:40%;

}

.textBoxSala{	
	width:130px;

}

.textPopup{
	font-size:28%;
	margin-bottom:2%;

}

#mainPopup1 .cutImage{
	background-size:contain;
}

#mainPopup2 .cutImage{
	background-size:contain;
}

#mainPopup3 .cutImage{
	width:55px;
	height:120px;
	margin-top:20px;
	background-size:contain;

}

#mainPopup4 .cutImage{
	background-size:contain;
}

#mainPopup5 .cutImage{
	width:55px;
	height:120px;
	margin-top:10px;	
	background-size:contain;

}

#mainPopup6 .cutImage{
	width:55px;
	height:120px;
	margin-top:10px;
	background-size:contain;

}

#mainPopup7 .cutImage{
	width:55px;
	height:150px;
	margin-top:10px;
	background-size:contain;

}

.genArrow{
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent; 
	border-left:5px solid white; 	
}

.textInBal{
	font-size:12px;

	
}

.footer{
	
	width:320px;
	margin:0 auto;
	height:240px;	
	position:absolute;
	bottom:0;
	z-index:23;
	height:auto;
}



.textInsFoot{
	width:60%;
	font-size:3%;
	text-align:center;
}

.textPop{
	width:70%;
	height:auto;
	font-size:25%;	
}



}


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

 html, body, .mainArea,.loader {
	 
	width:426px;
	min-width:426px; 
	margin:0 auto;
	height:320px;
	min-height:320px;

}



.bgPopup{
	width:260px;
	font-size:11px;
}

.cutImage{
	width:70px;
	height:150px;	
}

.textBtHome{
	width:40%;

}

.textInfo{

	font-size:80%;
	
}

.textBoxSala{
	
	width:150px;

}

.textPopup{
	font-size:60%;

}

#mainPopup1 .cutImage{

	background-size: 70px;

}

#mainPopup2 .cutImage{

	background-size: 70px;

}

#mainPopup3 .cutImage{
	width:70px;
	height:150px;
	margin-top:20px;
	background-size: 70px;

}

#mainPopup4 .cutImage{
	background-size: 70px;

}

#mainPopup5 .cutImage{
	width:70px;
	height:150px;
	margin-top:10px;	
	background-size: 70px;
}

#mainPopup6 .cutImage{
	width:70px;
	height:150px;
	margin-top:10px;
	background-size: 70px;
}

#mainPopup7 .cutImage{
	width:70px;
	height:150px;
	margin-top:10px;
	background-size: 70px;
}


.btGenPlay{
	width:4%;
	height:10%;
	-webkit-border-radius:30%;
	-moz-border-radius: 30%;
	border-radius:30%;
	padding-bottom:2.2%;
	padding-left:3.2%;
	background-color:#76ab92;
}


.genArrow{
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent; 
	border-left:4px solid white; 	
}

.textInBal{
	font-size:16px;

	
}


.footer{
	
	width:426px;
	margin:0 auto;
	height:320px;

	
	position:absolute;
	bottom:0;
	z-index:23;
	height:auto;
}



.textInsFoot{
	width:78%;
	font-size:40%;
}

.textPop{
	width:70%;
	height:auto;
	font-size:35%;	
}

}