@charset "UTF-8";

/*///////////////////////    MAIN PAGE CSS    /////////////////////*/

@font-face {
  font-family: "PerfectDOSVGA437";

  src: url("../Assets/fonts/DOS.woff") format("woff"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DS-Digital";

  src: url("../Assets/fonts/DS-DIGI.woff") format("woff"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

body{
	overflow: hidden;
	background-color: black;
}

#body{
	display: none;
	transition: 0.5s;
	opacity: 1;
}

#VideoConference{
	height: 100vh;
	width: 100vw;
	position: absolute;
	opacity:0;
	left:0;
	top: 0;
	z-index: 1;
}

#flipbook, #flipbook2{
	display: none;
	/*width: 785px;
	height: 1227px;*/
	z-index: 200;
	opacity: 0;
	transition: 0.5s;
}

#flipbookcontainer, #flipbookcontainer2{
	margin: auto;
  	width: 50%;
}

#page{
	background-color: white;
}

#NoWifiText{
	z-index: 2;
	opacity: 1;
	position: absolute;
	transform: translate(-50%,-50%);
	left: 50%;
	top: 42%;
	font-family: "PerfectDOSVGA437";
	font-size: 230%;
	color:rgba(155,24,26,1.00);
	-webkit-text-stroke: 1px black;
	transition: 0.2s;
}

#LoadingText{
	display: none;
	z-index: 1;
	opacity: 1;
	position: absolute;
	transform: translate(-50%,-50%);
	left: 50%;
	top: 42%;
	font-family: "PerfectDOSVGA437";
	font-size: 230%;
	color:rgba(155,24,26,1.00);
	-webkit-text-stroke: 1px black;
	transition: 0.2s;
}

#Opening{
	z-index: 2;
	opacity: 1;
	position: absolute;
	transform: translate(-50%,-50%);
	left: 50%;
	top: 42%;
	font-family: "PerfectDOSVGA437";
	font-size: 280%;
	color:rgba(155,24,26,1.00);
	-webkit-text-stroke: 1px black;
	transition: 0.2s;
}

#LogoTut{
	max-width:10%;
    height:auto;
	position: inherit;
	margin-top: 1%;
	margin-left: 1%;
}

#TutorialTxts{
	vertical-align: middle

}

.VideoOff{
	display: none;
}

.Time{
	position: absolute;
	left:5%;
	top: 5%;
	z-index: 2;
	}

.Rec1{
	position: absolute;
	left:3%;
	top: 3%;
	background-image:url("../Assets/Background/Cam.png");
	background-repeat: no-repeat;
	height: 8%;
	width: 10%;
	background-size: 100%;
	animation: blinker 1s cubic-bezier(.5, 0, 1, 1) infinite alternate;
	z-index: 2;
	transition: 0.5s;
}

.Rec2{
	position: absolute;
	left:3%;
	top: 3%;
	background-image:url("../Assets/Background/Cam2.png");
	background-repeat: no-repeat;
	height: 8%;
	width: 10%;
	background-size: 100%;
	animation: blinker 1s cubic-bezier(.5, 0, 1, 1) infinite alternate;
	z-index: 2;
	transition: 0.5s;
}

.Rec3{
	position: absolute;
	left:3%;
	top: 3%;
	background-image:url("../Assets/Background/Cam3.png");
	background-repeat: no-repeat;
	height: 8%;
	width: 10%;
	background-size: 100%;
	animation: blinker 1s cubic-bezier(.5, 0, 1, 1) infinite alternate;
	z-index: 2;
	transition: 0.5s;
}


.Rec4{
	position: absolute;
	left:3%;
	top: 3%;
	background-image:url("../Assets/Background/Cam4.png");
	background-repeat: no-repeat;
	height: 8%;
	width: 10%;
	background-size: 100%;
	animation: blinker 1s cubic-bezier(.5, 0, 1, 1) infinite alternate;
	z-index: 2;
	transition: 0.5s;
}

.Rec6{
	position: absolute;
	left:3%;
	top: 3%;
	background-image:url("../Assets/Background/Cam6.png");
	background-repeat: no-repeat;
	height: 8%;
	width: 10%;
	background-size: 100%;
	animation: blinker 1s cubic-bezier(.5, 0, 1, 1) infinite alternate;
	z-index: 2;
	transition: 0.5s;
}

.ChangePage{
	opacity: 0;
	transition: 0.5s;
}

.BackgroundReception{
	position:absolute;
	left:0;
	top:0;
	background-image: url("../Assets/Background/ReceptionFinal.png");
	background-size: cover;
	height: 120vh;
	width: 120vw;
	transition: 0.5s;
	opacity: 0.8;
}

.BackgroundCasino{
	position:absolute;
	left:0;
	top:0;
	background-image: url("../Assets/Background/CasinoFinal.jpg");
	background-size: cover;
	height: 120vh;
	width: 120vw;
	transition: 0.5s;
	opacity: 0.8;
}

.BackgroundTheatre{
	position:absolute;
	left:0;
	top:0;
	background-image: url("../Assets/Background/TheatreFinal.jpg");
	background-size: cover;
	height: 120vh;
	width: 120vw;
	transition: 0.5s;
	opacity: 0.8;
}

.BackgroundRoom{
	position:absolute;
	left:0;
	top:0;
	background-image: url("../Assets/Background/TheatreFinal.jpg");
	background-size: cover;
	height: 120vh;
	width: 120vw;
	transition: 0.5s;
	opacity: 0.8;
}

.BackgroundLibrary{
	position:absolute;
	left:0;
	top:0;
	background-image: url("../Assets/Background/Library.jpg");
	background-size: cover;
	height: 120vh;
	width: 120vw;
	transition: 0.5s;
	opacity: 0.8;
}

.Disturbo{
	opacity: 1;
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.Start{
	height:100vh;
}

#Up{
	position: absolute;
	right:7%;
	bottom:13%;
	width:2vw;
	height:2vw;
	background-image: url(../Assets/icons/arrow_d.png);
	background-size: contain;
	background-repeat: no-repeat;
	transform: rotate(180deg);
	z-index: 2;
	transition: 0.2s;
	cursor: pointer;
}

#Down{
	position: absolute;
	right:7%;
	bottom:8%;
	width:2vw;
	height:2vw;
	background-image: url(../Assets/icons/arrow_d.png);
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 2;
	transition: 0.2s;
	cursor: pointer;
	opacity: 0.5;
}

#Pianta{
	background-image: url("../Assets/Pianta/Fake.png");
	background-size: contain;
	background-repeat: no-repeat;
}

.Pianta{
	width:20vh;
	height:15.4vh;
	position:absolute;
	right:10%;
	bottom:5%;
	z-index: 2;
	transition: 0.3s;
}

.Pianta:hover {
	width:30vh;
	height:30vh;
}

.Pianta:hover ~ .BackgroundCasino {
	opacity: 0.4;
}

.Pianta:hover ~ .BackgroundReception {
	opacity: 0.4;
}

.Pianta:hover ~ .BackgroundTheatre {
	opacity: 0.4;
}

.Pianta:hover ~ .BackgroundRoom {
	opacity: 0.4;
}

.Pianta:hover ~ .BackgroundLibrary {
	opacity: 0.4;
}

.Pianta:hover > .Reception {
	left:45.6%;
	width:53.6%;
	height:77%;
}

.Pianta:hover > .ReceptionOn {
	left:45.6%;
	width:53.6%;
	height:77%;
}

.Pianta:hover > .Casino {
	left:1%;
	width:43.5%;
	height:46%;
	bottom: 45.5%;
}

.Pianta:hover > .CasinoOn {
	left:1%;
	width:43.5%;
	height:46%;
	bottom: 45.5%;
}

.Pianta:hover > .Theatre {
	left:1%;
	width:43.5%;
	height:30%;
	bottom: 122%;
}

.Pianta:hover > .TheatreOn {
	left:1%;
	width:43.5%;
	height:30%;
	bottom: 122%;
}

.Pianta:hover > .Room {
	left:58.5%;
	width:41%;
	height:38.4%;
	bottom:-39.3%;
}

.Pianta:hover > .RoomOn {
	left:58.5%;
	width:41%;
	height:38.4%;
	bottom:-39.3%;
}

.Pianta:hover > .Library {
	left:1.1%;
	bottom:14%;
	width:43.5%;
	height:53.5%;
}

.Pianta:hover > .LibraryOn {
	left:1.1%;
	bottom:14%;
	width:43.5%;
	height:53.5%;
}

.Reception{
	opacity:0.5;
	position:relative;
	left:44.5%;
	top: 0.6%;
	width:53.5%;
	height:98%;
	background-color: grey;
	transition: 0.3s;
}

.Reception:hover {
	background-color: #39ff14;
	opacity:0.8;
	cursor: pointer;
}

.ReceptionOn{
	opacity:0.5;
	position:relative;
	left:44.5%;
	top: 0.7%;
	width:53.5%;
	height:99%;
	background-color: #39ff14;
	transition: 0.3s;
}

.ReceptionOn:hover {
	opacity:0.8;
	cursor: pointer;
}

.Casino{
	opacity:0.5;
	position:relative;
	left:0.6%;
	bottom: 57.5%;
	width:43%;
	height:59%;
	background-color: grey;
	transition: 0.3s;
}

.Casino:hover {
	background-color: #39ff14;
	opacity:0.8;
	cursor: pointer;
}

.CasinoOn{
	opacity:0.5;
	position:relative;
	left:0.6%;
	bottom: 57.5%;
	width:43%;
	height:59%;
	background-color: #39ff14;
	transition: 0.3s;
}

.CasinoOn:hover {
	background-color: #39ff14;
	opacity:0.8;
	cursor: pointer;
}

.Theatre{
	opacity: 0.5;
	position:relative;
	left:0.6%;
	width:43%;
	bottom: 156%;
	height:38%;
	background-color: grey;
	transition: 0.3s;
}

.Theatre:hover {
	background-color: #39ff14;
	opacity:0.8;
	cursor: pointer;
}

.TheatreOn{
	opacity: 0.5;
	position:relative;
	left:0.6%;
	width:43%;
	bottom: 156%;
	height:38%;
	background-color: #39ff14;
	transition: 0.3s;
}

.TheatreOn:hover {
	background-color: #39ff14;
	opacity:0.8;
	cursor: pointer;
}

.Room{
	opacity: 0.5;
	position:relative;
	left:57%;
	width:41%;
	bottom:-50%;
	height:50%;
	background-color: grey;
	transition: 0.3s;
}

.Room:hover {
	background-color: #39ff14;
	opacity:0.8;
	cursor: pointer;
}

.RoomOn{
	opacity: 0.5;
	position:relative;
	left:57%;
	width:41%;
	bottom:-50%;
	height:50%;
	background-color: #39ff14;
	transition: 0.3s;
}

.RoomOn:hover {
	background-color: #39ff14;
	opacity:0.8;
	cursor: pointer;
}

.NonExistent{
	display: none;
}

.Library{
	opacity:0.5;
	position:relative;
	left:0.6%;
	bottom:19%;
	width:43%;
	height:68%;
	background-color: grey;
	transition: 0.3s;
}

.Library:hover {
	background-color: #39ff14;
	opacity:0.8;
	cursor: pointer;
}

.LibraryOn{
	opacity:0.5;
	position:relative;
	left:0.6%;
	bottom:19%;
	width:43%;
	height:68%;
	background-color: #39ff14;
	transition: 0.3s;
}

.LibraryOn:hover {
	background-color: #39ff14;
	opacity:0.8;
	cursor: pointer;
}


.Testi{
	text-align: center;
	color: rgba(155,24,26,1.00);
	font-size: 10vh;
	z-index: 3;
	top: 30vh;
	transform: translate(-50%);
	left:50%;
	position: absolute;
	transition: 0.2s;
	font-family: "PerfectDOSVGA437";
	opacity: 0;
	cursor: default;
		-webkit-text-stroke: 1px black;
}

#InteractDiv{
	position:absolute;
	left:0;
	top:0;
	height: 100vh;
	width: 100vw;
	transition: 0.5s;
	z-index: 1;
}

#InteractDiv2{
	position:absolute;
	left:0;
	top:0;
	height: 100vh;
	width: 100vw;
	transition: 0.5s;
	z-index: 1;
}

.InteractReception{
	opacity: 1;
}

.InteractNone{
	opacity: 0;
}

.InteractCasino{
	position:absolute;
	left:0;
	top:0;
	height: 120%;
	width: 120%;
	background-image: url("../Assets/Background/Interact/Slot Machine.png");
	background-size: cover;
	transition: 0.3s;
	opacity: 0.6;
}

.InteractCasinoOn{
	opacity: 1;
}

.InteractLibrary{
	position:absolute;
	left:0;
	top:0;
	height: 120%;
	width: 120%;
	background-image: url("../Assets/Background/Interact/Book1.png");
	background-size: cover;
	transition: 0.3s;
	opacity: 0.8;
}

.InteractLibrary2{
	position:absolute;
	left:0;
	top:0;
	height: 120%;
	width: 120%;
	background-image: url("../Assets/Background/Interact/Book2.png");
	background-size: cover;
	transition: 0.3s;
	opacity: 0;
}

.InteractLibraryOn{
	opacity: 1;
}

#InteractHitbox{
	position:absolute;
}

#InteractHitbox2{
	position:absolute;
}

.HitboxCasino{
	position: absolute;
	height: 22vh;
	width:10vw;
	left: 39vw;
	top:42vh;
	cursor: pointer;
	opacity: 1;
	z-index: 4;
	border-radius: 70%;
}

.HitboxLibrary{
	position: absolute;
	height: 33vh;
	width:10vw;
	left: 58vw;
	top:20vh;
	cursor: pointer;
	opacity: 1;
	z-index: 4;
	border-radius: 70%;
}

.HitboxLibrary2{
	position: absolute;
	height: 33vh;
	width:10vw;
	left: 68vw;
	top:20vh;
	cursor: pointer;
	opacity: 0;
	z-index: 4;
	border-radius: 70%;
}

.InteractTextCasino{
	position: absolute;
	left: 50vw;
	top:45vh;
	color: rgba(155,24,26,1.00);
	font-family: "PerfectDOSVGA437";
	font-size: 5vh;
	cursor: default;
	opacity: 0;
	z-index: 4;
	transition: 0.5s;
	-webkit-text-stroke: 1px black;
}

.InteractTextTheatre{
	opacity: 0;
}

.InteractTextReception{
	opacity: 0;
}

.InteractTextRoom{
	opacity: 0;
}

.InteractTextLibrary{
	position: absolute;
	left: 50vw;
	top:45vh;
	color: rgba(155,24,26,1.00);
	font-family: "PerfectDOSVGA437";
	font-size: 5vh;
	cursor: default;
	opacity: 0;
	z-index: 4;
	transition: 0.5s;
	-webkit-text-stroke: 1px black;
}

#clock{
	position: absolute;
	left:3%;
	bottom: 5%;
	z-index: 2;
	color:white;
	font-family: "DS-Digital";
	font-size: 3.8vw;
	transition: 0.5s;
	cursor:default;
	-webkit-text-stroke: 0.5px black;
}

#wi-fi{
	opacity: 0.8;
	position: absolute;
	right: 5%;
	top: 5%;
	height:5vh;
	width:3vw;
	background-image: url(../Assets/icons/wifi-signal.png);
	background-size: 100%;
	background-repeat: no-repeat;
	z-index: 2;
	cursor: pointer;
	transition: 0.3s;
}

#wi-fi:hover{
	height:6vh;
	width:3.5vw;
}

#wi-fi-on{
	opacity: 0.8;
	position: absolute;
	right: 5%;
	top: 5%;
	height:5vh;
	width:3vw;
	background-image: url(../Assets/icons/wifi-signal.png);
	background-size: 100%;
	background-repeat: no-repeat;
	z-index: 3;
	display: none;
	cursor: pointer;
	transition: 0.3s;
}

#wi-fi-on:hover{
	height:6vh;
	width:3.5vw;
}

#credits{
	opacity: 0.8;
	position: absolute;
	right: 5%;
	top: 15%;
	height:5vh;
	width:3vw;
	background-image: url(../Assets/icons/credits.png);
	background-size: 100%;
	background-repeat: no-repeat;
	z-index: 2;
	cursor: pointer;
	transition: 0.3s;
}

#credits:hover{
	height:6vh;
	width:3.5vw;
}

#credits-on{
	opacity: 0.8;
	position: absolute;
	right: 5%;
	top: 15%;
	height:5vh;
	width:3vw;
	background-image: url(../Assets/icons/credits.png);
	background-size: 100%;
	background-repeat: no-repeat;
	z-index: 3;
	display: none;
	cursor: pointer;
	transition: 0.3s;
}

#credits-on:hover{
	height:6vh;
	width:3.5vw;
}

#password{
	color: limegreen;
	background-color: black;
	font-family: "PerfectDOSVGA437";
	position: relative;
	top: 50vh;
	transform: translate(0,-50%);
	opacity: 0;
	transition: 1s;
	height: 7vh;
	width: 30vw;
	font-size: 5vh;
	padding-left: 0.5vw;
}

#ppassword{
	color: white;
	font-family: "PerfectDOSVGA437";
	position: relative;
	top: 45vh;
	transform: translate(0,-50%);
	opacity: 0;
	transition: 1s;
	font-size: 5vh;
	cursor: default;
	margin-bottom: -3vh;
}

#divpassword{
	height: 100vh;
	width:100vw;
	text-align:center;
}

.Videoon{
	display: initial;
}

/*Cookie Consent Begin*/

#cookieConsent {
    background-color: rgba(20,20,20,0.8);
    min-height: 26px;
    font-size: 14px;
    color: red;
    line-height: 26px;
    padding: 8px 0 8px 30px;
    font-family: "PerfectDOSVGA437";
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    z-index: 9999;
}
#cookieConsent a {
    color: #4B8EE7;
    text-decoration: none;
}
#closeCookieConsent {
    float: right;
    display: inline-block;
    cursor: pointer;
    height: 20px;
    width: 20px;
    margin: -15px 0 0 0;
    font-weight: bold;
}
#closeCookieConsent:hover {
    color: #FFF;
}
#cookieConsent a.cookieConsentOK {
    background-color: #F1D600;
    color: #000;
    display: inline-block;
    border-radius: 5px;
    padding: 0 20px;
    cursor: pointer;
    float: right;
    margin: 0 60px 0 10px;
}
#cookieConsent a.cookieConsentOK:hover {
    background-color: #E0C91F;
}

/*Cookie Consent End*/

#Tutorial{
	position: absolute;
	width: 60vw;
	height: 65vh;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 999;
	background-color: black;
	opacity: 0.8;
	border-radius: 3;
	vertical-align: middle;
}

#TestoTutorial{
	margin-top: 8%;
}

.TestoTutorial{
	font-family: "PerfectDOSVGA437";
	position: relative;
	text-align: center;
  	vertical-align: middle; /* center checkbox vertically */
	font-size: 2vw;
	color: white;
	margin: 1vw;
	margin-top: 3vh;
}

@keyframes blinker {
  	0%   {opacity:0;}
    49%  {opacity:0;}
	50%  {opacity:1;}
    100% {opacity:1;}
}

/*Countdown*/

#demo{
	position: absolute;
	transform: translate(-50%,-50%);
	left:50%;
	top:55%;
	font-family: "PerfectDOSVGA437";
	color: #20C20E;
	z-index: 2;
	font-size: 2vw;
	text-align: center;
}

.demo{
	position: absolute;
	transform: translate(-50%,-50%);
	left:50%;
	top:45%;
	font-family: "PerfectDOSVGA437";
	color: #20C20E;
	z-index: 2;
	font-size: 3vh;
	text-align: center;
}

#video{
	z-index: 1;
	position:absolute;
	transform: translate(-50%,-50%);
	left:50%;
	top:40%;
	width:40vh;
}

#TitoloCountdown{
	position: absolute;
	transform: translate(-50%,-50%);
	left:50%;
	top:20%;
	font-family: "PerfectDOSVGA437";
	color: #20C20E;
	z-index: 2;
	font-size: 3vw;
	text-align:center;
}

#TitoloCountdownmobile{
	text-align:center;
	position: absolute;
	transform: translate(-50%,-50%);
	left:50%;
	top:10%;
	font-family: "PerfectDOSVGA437";
	color: #20C20E;
	z-index: 2;
	font-size: 5vh;
}

#CreditsText{
    z-index: 0;
	opacity: 0;
	position: absolute;
	transform: translate(-50%,-50%);
    font-size: 2vw;
	left: 50%;
	top: 50%;
	font-family: "PerfectDOSVGA437";
    transition: 1s;
    color: white;
    text-align: center;
}

.CreditsLink{
    color: lime;
}