@charset "utf-8";

/* CSS Document */

/*Scrollbar styling*/
::-webkit-scrollbar

{

  width: 4px;  /* for vertical scrollbars */

  height: 4px; /* for horizontal scrollbars */

}



::-webkit-scrollbar-track

{

  background: rgba(0, 0, 0, 0);

}



::-webkit-scrollbar-thumb

{

  background: rgba(255, 255, 255, 0.6);

}
@-moz-keyframes spin {
   from {

    transform:rotate(0deg);

  }
    to {

    transform:rotate(360deg);

  }
}
@-o-keyframes spin {
   from {

    transform:rotate(0deg);

  }
    to {

    transform:rotate(360deg);

  }
}
@keyframes spin {
   from {

    transform:rotate(0deg);

  }
    to {

    transform:rotate(360deg);

  }
}
@-webkit-keyframes spin {

  from {

    -webkit-transform:rotate(0deg);

  }



  to {

    -webkit-transform:rotate(360deg);

  }

}
@-moz-keyframes counterspin {
from {

   transform:rotate(0deg);

  }



  to {

    transform:rotate(-360deg);

  }
}
@-o-keyframes counterspin {
from {

   transform:rotate(0deg);

  }



  to {

    transform:rotate(-360deg);

  }
}
@keyframes counterspin {
from {

   transform:rotate(0deg);

  }



  to {

    transform:rotate(-360deg);

  }
}
@-webkit-keyframes counterspin {

  from {

    -webkit-transform:rotate(0deg);

  }



  to {

    -webkit-transform:rotate(-360deg);

  }

}
@-o-keyframes pulsate {
	0% {filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));}

    50% {filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.5));}

	100% {filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));}
}
@keyframes mspulsate {
	0% {}

	100% {}

}
@keyframes pulsate {
	0% {filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));
	-webkit-filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));}

    50% {filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.5));
	-webkit-filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.5));}

	100% {filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));
	-webkit-filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));}
}
@-moz-keyframes pulsate {
	 0% {filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));}

    50% {filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.5));}

	100% {filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));}
}
@-webkit-keyframes pulsate {

    0% {-webkit-filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));}

    50% {-webkit-filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.5));}

	100% {-webkit-filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));}

}
@-o-keyframes firsthover {
	0% {filter:drop-shadow(0px 0px 10px 5px rgba(220, 0, 50, 0.3));}

    50% {filter:drop-shadow(0px 0px 5px 5px rgba(220, 0, 50, 1));}

	100% {filter:drop-shadow(0px 0px 10px 5px rgba(220, 0, 50, 0.3));}
}
@keyframes firsthover {
	0% {filter:drop-shadow(0px 0px 10px 5px rgba(220, 0, 50, 0.3));}

    50% {filter:drop-shadow(0px 0px 5px 5px rgba(220, 0, 50, 1));}

	100% {filter:drop-shadow(0px 0px 10px 5px rgba(220, 0, 50, 0.3));}
}
@-moz-keyframes firsthover {
	0% {filter:drop-shadow(0px 0px 10px 5px rgba(220, 0, 50, 0.3));}

    50% {filter:drop-shadow(0px 0px 5px 5px rgba(220, 0, 50, 1));}

	100% {filter:drop-shadow(0px 0px 10px 5px rgba(220, 0, 50, 0.3));}
}
@-webkit-keyframes firsthover {

	0% {-webkit-filter:drop-shadow(0px 0px 10px 5px rgba(220, 0, 50, 0.3));}

    50% {-webkit-filter:drop-shadow(0px 0px 5px 5px rgba(220, 0, 50, 1));}

	100% {-webkit-filter:drop-shadow(0px 0px 10px 5px rgba(220, 0, 50, 0.3));}

}
@-o-keyframes firstpulsate {
    0% {filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));
	-webkit-filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));}

    50% {filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.8));
	-webkit-filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.8));}

	100% {filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));
	-webkit-filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));}

}
@keyframes firstpulsate {
    0% {filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));
	-webkit-filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));}

    50% {filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.8));
	-webkit-filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.8));}

	100% {filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));
	-webkit-filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));}

}
@-moz-keyframes firstpulsate {
    0% {filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));}

    50% {filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.8));}

	100% {filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));}

}
@-webkit-keyframes firstpulsate {

    0% {-webkit-filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));}

    50% {-webkit-filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.8));}

	100% {-webkit-filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));}


}
@-o-keyframes boxpulsate {
 	0% {box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.3);}

    50% {box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.8);}

	100% {box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.3);}

}
@keyframes boxpulsate {
	0% {box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.3);}

    50% {box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.8);}

	100% {box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.3);}

}
@-moz-keyframes boxpulsate {
	0% {box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.3);}

    50% {box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.8);}

	100% {box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.3);}
}
@-webkit-keyframes boxpulsate {

	0% {box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.3);}

    50% {box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.8);}

	100% {box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.3);}


}
@-webkit-keyframes boxpulsate {

	0% {box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.3);}

    50% {box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.8);}

	100% {box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.3);}

}
@-webkit-keyframes boxpulsate {

	0% {box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.3);}

    50% {box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.8);}

	100% {box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.3);}

}

html {

	background-color:#000;

}

body {

	margin:0px;

	overflow:hidden;

	background-color:#000!important;

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;

}

h1 {

	font-size:24px;

	color:#7a7777;

	font-weight:300;

	letter-spacing:1px;

	font-family: 'Patua One', cursive;

}

h2 {

	font-size:16px;

	font-family: 'Lato', sans-serif;

	display:inline;

	font-weight:100;

}

h4 {

	font-family: 'Patua One', cursive;

	font-weight:300;

	font-size:22px;

	color:white;

	margin: 0 auto;

	letter-spacing:2px;

}
#Screen01container {
	cursor:url('cursors/magnifyingicon.png') 15 25, auto;
}
#Screen01container .clickableobjects{
	cursor:url('cursors/magnifyingicon.png') 15 25, auto;
}
#Screen03container .clickableobjects{
	cursor:url('cursors/fingericon.png') -5 10, auto;
}
#Screen03container {
	cursor:url('cursors/fingericon.png') -5 10, auto;
}
#Screen01container #introtext, Screen02container #introtext{
	background-color:rgba(0,0,0,0.60);
}
#landing {

	background-image:url("images/lilctitle.jpg");

	background-size:cover;

	background-position:right;

}

#endvideo {

	display:none;

}

.content {
	position: absolute;

	width: 100%;

	height: 100%;

	display:block;

z-index:1;

}

.contactlinks img{

	width:15%;

	margin: 5%;

	-ms-transition:all 0.6s ease;

	-moz-transition:all 0.6s ease;

	-o-transition:all 0.6s ease;

	-webkit-transition:all 0.6s ease;

}

.contactlinks img:hover {

	-webkit-transition: all 200ms ease-in;

    -webkit-transform: scale(1.2);

    -ms-transition: all 200ms ease-in;

    -ms-transform: scale(1.2);   

    -moz-transition: all 200ms ease-in;

    -moz-transform: scale(1.2);

    transition: all 200ms ease-in;

    transform: scale(1.2);

}

.contactlinks {

	width:50%;

	margin:12% auto;

	text-align:center;

}

.lastcontent {

	position: absolute;

	width: 100%;

	height: 100%;

	display:none;

	background-size: contain;

	background-repeat: no-repeat;

	background-attachment: fixed;

	background-position: top;

	z-index: 1;

}

.landingcontent {

	position: absolute;

	width: 100%;

	height: 100%;

	display:none;

	z-index: 1;

}

.learnmore {

	text-align: center;

    font-size: 18px;

    padding: 10px;

    color: #c43635;

    cursor: pointer;

    cursor: hand;

    margin-top: 40px;

    margin-bottom: 40px;

    border: solid 1px #c43635;

}

#imagemap {
	left: 0px;
    top: 0px;
    width: 100%;
    object-fit: cover;
    object-position: 0 0;
    min-height: 100vh;
    min-width: 100%;

}

/*UI Styling*/

#leftmenu, #lastleftmenu {

	position:absolute;

	width:450px;

	height:125px;

	bottom:40px;

	left:-425px;

	-ms-transition:all 1.2s ease;

	-moz-transition:all 1.2s ease;

	-o-transition:all 1.2s ease;

	-webkit-transition:all 1.2s ease;

	z-index:9999999;

}

#rightmenu, #lastrightmenu {

	position:absolute;

	width:150px;

	height:125px;

	bottom:40px;

	right:-125px;

	-ms-transition:all 0.8s ease;

	-moz-transition:all 0.8s ease;

	-o-transition:all 0.8s ease;

	-webkit-transition:all 0.8s ease;

	z-index:999999;

}

#rightmenu a, #lastrightmenu a {
    display: block;
    position: relative;
    color: #dddddd!important;
    text-decoration: none;
    padding-left: 40px;
    font-size: 14px;
    margin-top: -5px;
    padding-bottom: 10px;
    text-transform: uppercase;

}

#rightmenu a:hover, #lastrightmenu a:hover {

	color:#c43635!important;

	-ms-transition:all 0.5s ease;

	-moz-transition:all 0.5s ease;

	-o-transition:all 0.5s ease;

	-webkit-transition:all 0.5s ease;

}

#rightmenu a:visited, #lastrightmenu a:visited {

	color:#dddddd;

}

#menutoggle, #lastmenutoggle {

	position:relative;

	left:-15px;

	width:40px;

	top:40px;

	float:left;

	z-index:9999;

	cursor:pointer;

	cursor:hand;

	-webkit-transition: all 200ms ease;

    -ms-transition: all 200ms ease;

    -moz-transition: all 200ms ease;

    transition: all 200ms ease;

}

#maptoggle, #lastmaptoggle {

	position:relative;

	right:-15px;

	width:40px;

	top:40px;

	float:right;

	z-index:9999;

	cursor:pointer;

	cursor:hand;

	-webkit-transition: all 200ms ease;

    -ms-transition: all 200ms ease; 

    -moz-transition: all 200ms ease;

    transition: all 200ms ease;

}

#maptoggle:hover, #lastmaptoggle:hover, #menutoggle:hover, #lastmenutoggle:hover {

	-webkit-transition: all 200ms ease-in;

    -webkit-transform: scale(1.2);

    -ms-transition: all 200ms ease-in;

    -ms-transform: scale(1.2);   

    -moz-transition: all 200ms ease-in;

    -moz-transform: scale(1.2);

    transition: all 200ms ease-in;

    transform: scale(1.2);

}

.rightmenuon {

	right:0px!important;

}

.leftmenuon {

	left:0px!important;

}

#minimap {
top:0px;
height: 125px;
width: 100px;
position: absolute;
background-image: url("images/minimap.png");
background-size: 100px auto;
background-repeat: no-repeat;
margin-left: 10px;
background-position: 50% 50%;

}

#minimapdescription {

	width:65%;

	height:100%;

	right:0px;

	top:0px;

	position:absolute;

	padding-top:10px;

	padding-right:25px

}

#minimapdescription h1 {

	margin:0;

}

#minimapdescription p {

	margin:0;

}

.ui {

	z-index:20;

	Background-color: rgba(0,0,0,0.50);

	color:#dddddd;

	font-family: 'Lato', sans-serif;

	font-size:14px;

	line-height:20px;

}

.textbox {

	padding: 20px;

	margin:0;

	overflow:auto;

	position:absolute;

	max-width:600px;

	min-width:200px;

	font-size:14px;

	font-family: 'Lato', sans-serif;

}

/*The float box is styled like a tetxbox, but is designed to remain visible when the close function is used*/

.floatbox {

	padding: 20px;

	margin:0;

	overflow:auto;

	position:absolute;

	max-width:600px;

	font-family: 'Lato', sans-serif;

}

.textbox h1{

	padding-left:20px;

}

.map1:before, .map2:before, .map3:before, .map4:before, .map5:before {

	position:absolute;

	content:'.';

	font-size:72px;

}

.map1:before {

    top: 15px;

    left: 12px;

}

.map2:before {

    top: 0px;

    right: 15px;

}

.map3:before {

    bottom: 45px;

    left: 13px;

}

.map4:before {

    bottom: 46px;

    right: 13px;

}

.map5:before {

    top: 35px;

    left: 50px;

}

ul {

	padding-left:20px;

}

li {

	padding-bottom:20px;

}

.introhead {
margin-top:0px;
font-size: 20px;
line-height:1.1em;
    color: #7a7777;
    font-weight: 300;
    font-family: 'Patua One', cursive;

}

.firstshadow {

	-webkit-animation:none!important;
	animation:none!important;
	-o-animation:none!important;
	-moz-animation:none!important;
	-ms-animation:none!important;
	-webkit-animation-iteration-count: infinite;

	-webkit-filter: drop-shadow(0px 0px 10px rgba(230, 0, 0, 0.3))!important;

	filter: drop-shadow(0px 0px 10px rgba(230, 0, 0, 0.3))!important;

	-webkit-transition: all 0.5s ease;

	-o-transition: all 0.5s ease;

	transition: all 0.5s ease;

}

.boxshadow {

	filter: box-shadow(0px 0px 10px rgba(230, 0, 0, 0.3))!important;

	-webkit-animation: none!important;
	animation: none!important;
	-moz-animation: none!important;
	-o-animation: none!important;
	-ms-animation: none!important;

    -webkit-animation-iteration-count: infinite; 

	box-shadow: 0px 0px 10px 5px rgba(230, 0, 0, 0.5);

	-webkit-transition: all 0.5s ease;

	-o-transition: all 0.5s ease;

	transition: all 0.5s ease;

}

.header {

    margin: 0 auto;

    background-image: url("images/lilcheader.png");

    width: 100%;

    height: 15em;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

}
#share .introhead {
	    margin: 20px 0;
}
.options {
    position: absolute;
    left: 10px;
    bottom: 200px;
    z-index: 999999999;
}

#mute {

	height:32px;

	width:32px;

	margin-bottom:20px;

	cursor:pointer;

	cursor:hand;

	z-index:99999;

	background-image:url(images/mute.png);

	background-size:contain;

}

.muted {

	background-image:url(images/muted.png)!important;

}

#introtext {

	color:#c7c2c2;

	font-size:16px;

	position: absolute;

    padding: 20px;

	margin:0;

    left: 275px;

    max-width: 33%;

    top: 50px;

	background-color:rgba(0,0,0,0.8);

	max-height:40%;
	min-height:150px;

	overflow:auto;

	

}

#Screen03container #introtext {

	max-height:30vw;

}

#introtext p {

	margin-bottom:0px;

}

.borderbox {

	position: absolute;

    top: 20%;

    left: 25%;

    width: 50%;

    height: 60%;

    opacity: 0.6;

    border-top: solid 1px #ddd;

    border-bottom: solid 1px #ddd;

	-webkit-animation-name: counterspin;

   -webkit-animation-duration: 40000ms;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-timing-function: linear;

    -moz-animation-name: counterspin;

    -moz-animation-duration: 40000ms;

    -moz-animation-iteration-count: infinite;

    -moz-animation-timing-function: linear;

    -ms-animation-name: counterspin;

    -ms-animation-duration: 40000ms;

    -ms-animation-iteration-count: infinite;

    -ms-animation-timing-function: linear;
	-o-animation-name: counterspin;

    -o-animation-duration: 40000ms;

    -o-animation-iteration-count: infinite;

    -o-animation-timing-function: linear;

}

.instructions {

  position: absolute;

  line-height:1.8em;

  font-family: 'Comfortaa', cursive;

  display: inline-block;

  height: 0;

  color:#c7c2c2;

  width:200px;

  padding-top:100px;

  padding-bottom:100px;

  top:50px;

  left:50px;

  border-radius: 50%;

  border:solid 1px #dddddd;

  font-size: 14px;

  text-align: center;

  background-color:rgba(0,0,0,1)!important;

  -webkit-animation-name: spin;

   -webkit-animation-duration: 40000ms;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;

    -moz-animation-duration: 40000ms;

    -moz-animation-iteration-count: infinite;

    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;

    -ms-animation-duration: 40000ms;

    -ms-animation-iteration-count: infinite;

    -ms-animation-timing-function: linear;
	animation-name: spin;
	animation-duration:40000ms;
	animation-iteration-count: infinite;
    animation-timing-function: linear;

}

.instructions p:before {

	border-top:solid 1px #ddd;

}

.instructionmargin{

	margin-top: -12%;

	margin-bottom:0;

	margin-right:auto;

	margin-left:auto;

	width: 90%;

	-webkit-animation-name: counterspin;

   -webkit-animation-duration: 40000ms;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-timing-function: linear;

    -moz-animation-name: counterspin;

    -moz-animation-duration: 40000ms;

    -moz-animation-iteration-count: infinite;

    -moz-animation-timing-function: linear;

    -ms-animation-name: counterspin;

    -ms-animation-duration: 40000ms;

    -ms-animation-iteration-count: infinite;

    -ms-animation-timing-function: linear;
		animation-name: counterspin;
	animation-duration:40000ms;
	animation-iteration-count: infinite;
    animation-timing-function: linear;

}
 .page5instructions .instructionmargin {

	margin-top: -20%;

}

.instructionmargin p{

	margin:0;

}

.instructions p{

	margin:0;

}

.instructions:after {

	background-image: url(images/triangle.png);

    content: "";

    font-size: 19px;

    position: absolute;

    z-index: 9999;

    font-weight: 100;

    text-align: center;

    width: 15px;

    height: 15px;

    color: #dddddd;

    margin-bottom: -19px;

    background-size: cover;

    bottom: 14px;

    left: 46%;

}

.instructions:before {

	background-image: url(images/triangle.png);

    content: "";

    font-size: 19px;

    position: absolute;

    z-index: 9999;

    font-weight: 100;

    text-align: center;

    width: 15px;

    height: 15px;

    color: #dddddd;

    margin-bottom: -19px;

    background-size: cover;

    top: -5px;

    left: 46%;

    -moz-transform: scaleY(-1);

    -o-transform: scaleY(-1);

    -webkit-transform: scaleY(-1);

    transform: scaleY(-1);

    filter: FlipV;

    -ms-filter: "FlipV";

}

#next {

	z-index:999;

	position:absolute;

	right:50px;

	top:45%;

	width:80px;

	height:60px;

	background-image:url(images/nextarrow.png);

	background-size: contain;

	background-repeat:no-repeat;

	opacity:0.2;

	-webkit-transition: all 0.5s ease;

	-o-transition: all 0.5s ease;

	transition: all 0.5s ease;

	-webkit-filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));

}

#next:hover {

	-webkit-filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.5));

}

#previous {

	z-index:999;

	position:absolute;

	left:50px;

	top:45%;

	width:80px;

	height:60px;

	background-image:url(images/nextarrow.png);

	background-size: contain;

	background-repeat:no-repeat;

	opacity:1;

	-webkit-transition: all 0.5s ease;

	-o-transition: all 0.5s ease;

	transition: all 0.5s ease;

	-webkit-filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));

	-moz-transform: scaleX(-1);

        -o-transform: scaleX(-1);

        -webkit-transform: scaleX(-1);

        transform: scaleX(-1);

        filter: FlipH;

        -ms-filter: "FlipH";

}

#previous:hover {

	-webkit-filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.7));

}

/*Object styling*/

.clickableobjects:hover {
	position:absolute;
	-webkit-animation: pulsate 3s linear;
	-moz-animation:   pulsate 3s linear;
  -o-animation:      pulsate 3s linear;
  animation: pulsate 3s linear;
  -ms-animation:pulsate 3s linear;
    -webkit-animation-iteration-count: infinite; 
	-moz-animation-iteration-count: infinite; 
	-o-animation-iteration-count: infinite; 
	animation-iteration-count: infinite; 
	

	cursor:pointer;

	cursor:hand;

}
.firstclick {
	position:absolute;
	-webkit-animation: firstpulsate 3s linear;
	-moz-animation:   firstpulsate 3s linear;
  -o-animation:      firstpulsate 3s linear;
  animation: firstpulsate 3s linear;
  -ms-animation:firstpulsate 3s linear;
    -webkit-animation-iteration-count: infinite; 
	-moz-animation-iteration-count: infinite; 
	-o-animation-iteration-count: infinite; 
	animation-iteration-count: infinite; 
}
/*Screen 1 Objects*/

#mat {

position: absolute;
    top: 782px;
    width: 825px;
    left: 10px;
    z-index: 10;

}

#mattext {

	position:absolute;

  	width:30%;

  	max-height:66%;

	padding:20px;

	left:20%;

	top:0px;

	display:none;

}

#bowl {

position: absolute;
    top: 829px;
    width: 170px;
    left: 820px;
    z-index: 10;

}

#bowltext {

	position:absolute;

  	width:30%;

	max-height:66%;

	padding:20px;

	left:45%;

	top:0px;

	display:none;

}

#tian {

position: absolute;
    top: 805px;
    width: 980px;
    left: 170px;
    z-index: 9;

}

#tiantext {

	position:absolute;

	padding:20px;

	left:35%;

 	width:33%;

	top:0px;

	max-height:66%;

	display:none;

}

#prisoner2 {

    position: absolute;
    top: 634px;
    width: 670px;
    left: 1250px;
    z-index: 8;

}

#prisonertext {

	position:absolute;

	padding:20px;

	right:200px;

  width:33%;

  max-height:66%;

	top:0px;

	display:none;

}

/*Screen 2*/

#halloweenbox {

	position: absolute;
    top: 603px;
    width: 240px;
    height: 104px;
    left: 590px;
    z-index: 10;


}

#halloweenboxtext2 {

	position:absolute;

	padding:20px;

	left:50%;

	display:none;

  	width:30%;

	top:0;

	height:100%;

}

#letter {

	position:absolute;

	padding:20px;

	left:50%;

  width:30%;

    opacity:0;

	top:-100px;

	display:none;

	height:100%;

}

#letter img {

	top: 20px;

    position: relative;

    width: 100%;

    display: block;

    margin: 0 auto;

}

/*Screen 3*/

#reeducationtext {

	position: absolute;

    padding: 20px;

    left: 300px;

    top: 45%;

	max-width: 225px;

	height:250px;

    margin-top: -100px;

}

#remote1 {


		z-index:999;


}

#remote2 {

	z-index:999;


}

#remote3 {

		z-index:999;


}

#remote4 {

	z-index:999;

}
.button:hover, .firstbutton {
		filter: box-shadow(0px 0px 10px rgba(255, 255, 255, 0.5));

	-webkit-animation: boxpulsate 3s linear; 
	-moz-animation:   boxpulsate 3s linear;
  -o-animation:      boxpulsate 3s linear;
  animation: boxpulsate 3s linear;
    -webkit-animation-iteration-count: infinite; 
	-moz-animation-iteration-count: infinite; 
	-o-animation-iteration-count: infinite; 
	animation-iteration-count: infinite; 
}
.button {
	position: absolute;
}
#projector {

	width:100%;

	height:100%;

	position:absolute;

	display:none;

	z-index:9999;

	background-color:rgba(0,0,0,0.90);

}

.projectorclose, .videoclose, .lastvideoclose {

	position:absolute;

	z-index:99999;

	font-size:40px;

    right: .5em;

    top: .5em;

	color:white;

	text-decoration:none;

	font-family:'Open Sans';

}

.projectorvideo {

	display:none;

	width:100%;

}

.projectorscreen {

	margin: 0 auto;

    width: 75%;

}

/*Screen 4*/

.left_gate {

  position: absolute;

  bottom: 0; right: 0; left: 0; top: 0;

  -webkit-transition: all 1s ease;

  -moz-transition: all 1s ease;

  -ms-transition: all 1s ease;

  -o-transition:all 1s ease;

  transition: all 1s ease;

}

.slide_in {
	z-index:9;
    background-color: #000;
    overflow: hidden;
    position: absolute;

}

.slide_in .left_gate {

  background-size:cover;

  background-position:right;

  background-repeat:no-repeat;

  background-image:url(images/Screen04door.jpg);

}

#lockdrop {
    position: absolute;

}

#key1, #key2, #key3, #key4 {
	position: absolute;

	 -webkit-transition: none;

  -moz-transition: none;

  -ms-transition: none;

  -o-transition: none;

  transition: none;

}

#key1 {
    z-index: 10;

}

#key2 {
    z-index: 10;
	-webkit-animation: firstpulsate 3s linear;
	-moz-animation:   firstpulsate 3s linear;
  -o-animation:      firstpulsate 3s linear;
  animation: firstpulsate 3s linear;
  -ms-animation:firstpulsate 3s linear;
    -webkit-animation-iteration-count: infinite; 
	-moz-animation-iteration-count: infinite; 
	-o-animation-iteration-count: infinite; 
	animation-iteration-count: infinite; 

}

#key3 {
    z-index: 11;

}

#key4 {
    z-index: 11;

}

#asset1, #asset2, #asset3, #asset4 {

	width:100%;

	height:100%;

	position:absolute;

	z-index:10;

	background-size:auto 100%;

	display:none;

	background-repeat:no-repeat;

	background-position:center;

	box-shadow: inset 0px 5px 15px 5px #000;

}

#asset1 {

	background-image:url(images/t3_Torture_of_a_Woman.jpg);

}

#asset2 {

	background-image:url(images/t3_Like_a_Stone.jpg);

}

#grouptorture, #tortureofawoman, #likeastone, #tigerbench {

	height: 100%;

    margin: auto 0;

    width: auto;

}

#asset4 {

	background-image:url(images/t3_Tiger_Bench.jpg);

}

#torturetext {

	max-width: 30%;

    max-height: 50%;

    margin-top: 20%;

    left: 30%;

}

.torturecaption {

	position: absolute;

    padding: 0 20px;

    bottom: 0px;

    width: auto;

	background-color:rgba(0,0,0,0.85);

}

/*Screen 5*/

#bar1 {

position: absolute;
    z-index: 10;

}

#bar2 {

position: absolute;
    z-index: 10;

}

#bar3 {

position: absolute;
    z-index: 10;

}

#bar4 {

position: absolute;
    z-index: 10;

}

#bar1text {

	position: absolute;

    top: -100px;

	bottom:100px;


    left: 16%;

	display:none;

	opacity:0;

	overflow:auto;
	max-width: 25%;

}

#bar2text {

	position:absolute;

    top: -100px;

	bottom:100px;

    left: 20%;

	opacity:0;

	display:none;

	overflow:auto;
	max-width: 25%;

}

#bar3text {

	position: absolute;

    bottom: 100px;

	top:-100px;
    left: 38%;

	opacity:0;

	display:none;

	overflow:auto;
	max-width: 25%;

}

#bar4text {

    position: absolute;
    bottom: 100px;
	top:-100px;
    right: 12%;
    opacity: 0;
    display: none;
    overflow: auto;
    max-width: 25%;

}

/*Page styling*/

#nexttext {

	position:absolute;

	border-radius:500%;

	width:200px;

	height:200px;

	padding:60px;

	left:30%;

	bottom:30%;

	display:none;

	border:solid 1px #fff;

}

.background {
	
    left: 0px;
    top: 0px;
    width: 100%;
	height:auto;
    object-fit: cover;
    object-position: 0 0;
}

/*Fancy transition thing*/

.introslide {

	position:absolute;

	width:100%;

	height:100%;

	z-index:9999999999999;

}

.trans {

	height:100%;

	background-color:black;

	width:25%;

	top:0;

	float:left;

	position:relative;

	z-index:999999;

	display:inline-block;

}

#introvideo {

	position:absolute;

	top:0px;

	left:0px;

	width:100%;

	height:100%;

	z-index:999;

}

#endvideo {

    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 999;
	display:none;

}

.gateclose {

	position:absolute;

	z-index:99999;

	font-size:40px;

    right: .5em;

    top: .5em;

	color:white;

	text-decoration:none;

	font-family:'Open Sans';

}

/*Radial Progress*/

.radial-progress {

  margin: 50px;

  width: 120px;

  height: 120px;

  background-color: rgba(0, 0, 0, 1)!important;

  border-radius: 50%;

  right:0px;

    border:solid 1px rgba(0,0,0,0.85);

  position:absolute;

  z-index:999;

}

.radial-progress .inset {

	box-shadow: 0px 0px 30px #fff!important;

    border-radius: 50%;

}

#progressmask {

	width: 110px;

	height:109px;

    left: -5px;

    position: absolute;

    z-index: 9;

    top: -4px;

    opacity: 0.85;

}

.close {

	position: absolute;

    z-index: 99999;

    font-size: 30px;

	opacity:0.5;

    right: .5em;

    top: .5em;

    color: white!important;

    text-decoration: none;

    font-family: 'Open Sans';

}

.logo {

    background-image: url(images/lilcheader.png);

    background-size: contain;

    background-repeat: no-repeat;

    width: 300px;

    height: 100px;

    right: 20px;

    bottom: 20px;

    position: absolute;

}

#about, #lastabout, #contactus, #lastcontactus, #getinvolved, #lastgetinvolved {

	display:none;

	opacity:0;



}

.supersharelinks {

    margin-top: 20px;

	margin-bottom:20px;
	text-align:center;

}

.supersharelinks img{
		width:64px;
			-webkit-transition: all 200ms ease-in;

    -ms-transition: all 200ms ease-in;

    -moz-transition: all 200ms ease-in;

    transition: all 200ms ease-in;
	margin-right:20px;
}

.linebreak {

	border-bottom:solid 1px #fff;

	width:75%;

	margin:20px auto;

}

.supersharelinks img:hover{

	-webkit-transition: all 200ms ease-in;

    -webkit-transform: scale(1.1);

    -ms-transition: all 200ms ease-in;

    -ms-transform: scale(1.1);   

    -moz-transition: all 200ms ease-in;

    -moz-transform: scale(1.1);

    transition: all 200ms ease-in;

    transform: scale(1.1);

	filter: none; 

}

#share {

	width: 50%;

	font-size:16px;

	padding:20px;

    position: absolute;

    z-index: 999;

    margin-left: 25%;

    top: 50px;

	bottom:50px;

	overflow:auto;

	background-color:rgba(0,0,0,0.92)!important;

}

.menubox {

	width: 50%;

	font-size:16px;

	padding:20px;

    position: absolute;

    z-index: 999;

    margin-left: 25%;

    top: 50px;

	bottom:50px;

	overflow:auto;

	background-color:rgba(0,0,0,0.92)!important;

}

.menubox h1{

	text-align:center;

}

#about a:link, #lastabout a:link {

	color:#c43635;

	text-decoration:none;

}

#contactus a:link, #lastconactus a:link {

	color:#c43635;

	text-decoration:none;

}

#getinvolved a:link, #lastgetinvolved a:link {

	color:#c43635;

	text-decoration:none;

	font-weight:900;

}

#getinvolved p, #lastgetinvolved p {

	text-align:center;

}

#getinvolved ul, #lastgetinvolved ul {

	width:50%;

	margin: 0 auto;

}

#getinvolved li, #lastgetinvolved li {

	width:90%;

	margin: 0 auto;

}

#about a:visited, #lastabout a:visited {

	color:#c43635;

}

#contactus a:visited, #lastcontactus a:visited {

	color:#c43635;

}

#getinvolved a:visited, #lastgetinvolved a:visited{

	color:#c43635;

}

#contactus > p >*, #lastcontactus > P > * {

	display:block;

	text-align:left;

	padding:20px;

}

#share {

	display:block;

	background-color:rgba(0,0,0,0.92)!important;

}

.sharelinks img {

	width: 48px;

    margin-right: 2.5%;

}

/*Landing page styling*/

#landinglinks a:link,#landinglinks a:visited {

	display:block;

	padding-bottom:20px;

	text-decoration:none;

	color:#c7c2c2;

}

#landinglinks a img{

	margin-bottom:-10px;

}

#landinglinks {

	text-align:right;

	top:55%;

	font-size:24px;

	position:absolute;

	right:11vh;

	color:#c7c2c2;

	font-family:'Lato';

	text-transform:uppercase;
	margin-left:75%;

}
/*Media Queries*/
@media screen and (max-aspect-ratio: 16/9) {
	.background, .video1, .lastvideo {
    left: 0px;
    top: 0px;
    height:100vh!important;
	width:auto!important;
}
	#halloweenbox {
position: absolute;
    top: 56vh;
    width: 23vh;
	height:10vh;
    left: 54vh;
    z-index: 10;
}
#prisoner2 {
position: absolute;
    top: 58.6vh;
    width: 62vh;
    left: 115.6vh;
    z-index: 8;
}
#tian {
position: absolute;
    top: 74.7vh;
    width: 90.2vh;
    left: 16.2vh;
    z-index: 9;
}
#bowl {
    position: absolute;
    top: 76.6vh;
    width: 16.3vh;
    left: 75.5vh;
    z-index: 10;
}
#mat {
    position: absolute;
    top: 72.3vh;
    width: 77vh;
    left: 0.5vh;
    z-index: 10;
}
#remote {
	    position: absolute;
    top: 54vh;
    left: 141vh;
    width: 24.2vh;
    height: 20vh;
}
#remote1 {
	position: absolute;
        width: 7.2vh;
        height: 4.5vh;
    margin-left: 4.5vh;
    margin-top: 2.4vh;
}
#remote2 {
	position: absolute;
   width: 7vh;
    height: 4.6vh;
    margin-left: 13vh;
    margin-top: 2.3vh;
}
#remote3 {
	position: absolute;
width: 7.2vh;
    height: 4.7vh;
    margin-left: 4.6vh;
    margin-top: 10.5vh;
}
#remote4 {
	position: absolute;
    width: 7.1vh;
    height: 4.6vh;
    margin-left: 13vh;
    margin-top: 10.5vh;
}
.slide_in {
	height: 76.2vh;
    width: 102.6vh;
    top: 14.3vh;
    left: 38.2vh;
}
/*Page 3*/
#lockdrop {
	width: 15vh;
    height: 15vh;
    top: 47vh;
    left: 120vh;
}
#key1 {
	width: 10vh;
    top: 53.9vh;
    left: 14.8vh;
}
#key2 {
	width: 6.9vh;
    top: 53.8vh;
    left: 21.3vh;
}
#key3 {
	width: 7.8vh;
    top: 53.5vh;
    left: 25.7vh;
}
#key4 {
	width: 7.4vh;
    top: 53.3vh;
    left: 13.9vh;
}
#bar1 {
	    top: 0vh;
    left: 19.5vh;
    height: 100vh;
}
#bar2 {
	    top: 0vh;
    left: 54.4vh;
    height: 100vh;
}
#bar3 {
	top: 0vh;
    left: 94.2vh;
    height: 100vh;
}
#bar4 {
	top: 0vh;
    left: 135.7vh;
    height: 100vh;
}
}
@media screen and (min-aspect-ratio: 16/9) {
	.background, .video1, .lastvideo {
    left: 0px;
    top: 0px;
    height:auto!important;
	width:100vw!important;
}
	#halloweenbox {
    position: absolute;
    top: 31.6vw;
    width: 12vw;
    height: 5.3vw;
    left: 31vw;
    z-index: 10;
}
#prisoner2 {
position: absolute;
    top: 33vw;
    width: 35vw;
    left: 65vw;
    z-index: 8;
}
#tian {
    position: absolute;
    top: 42vw;
    width: 50.9vw;
    left: 9vw;
    z-index: 9;
}
#bowl {
    position: absolute;
    top: 43.2vw;
    width: 9vw;
    left: 42.6vw;
    z-index: 10;
}
#mat {
position: absolute;
    top: 40.8vw;
    width: 43vw;
    left: 0.4vw;
    z-index: 10;
}
#remote {
position: absolute;
    top: 30vw;
    left: 79vw;
    width: 14vw;
    height: 10vw;
}
#remote1 {
position:absolute;
    width: 4.1vw;
    height: 2.8vw;
    margin-left: 2.8vw;
    margin-top: 1.6vw;
}
#remote2 {

    width: 4vw;
    height: 2.7vw;
    margin-left: 7.7vw;
    margin-top: 1.65vw;
}
#remote3 {

   width: 4.0vw;
    height: 2.7vw;
    margin-left: 2.9vw;
    margin-top: 6.3vw;
}
#remote4 {

    width: 4vw;
    height: 2.7vw;
    margin-left: 7.7vw;
    margin-top: 6.3vw;
}
/*Page 3*/
.slide_in {
	width: 57.8vw;
    height: 43vw;
    top: 8vw;
    left: 21.4vw;
}
#lockdrop {
	width: 10vw;
    height: 10vw;
    left: 67vw;
    top: 26vw;
}
#key1 {
	width: 5.5vw;
    top: 30.6vw;
    left: 8.4vw;
}
#key2 {
	width: 3.95vw;
    top: 30vw;
    left: 12vw;
}
#key3 {
	width: 4.4vw;
    top: 30vw;
    left: 14.5vw;
}
#key4 {
	width: 4.1vw;
    top: 30vw;
    left: 7.9vw;
}
#bar1 {
	top: 0vw;
    left: 12.2vw;
	    height: 56vw;
}
#bar2 {
	left: 30.5vw;
	    height: 56vw;
}
#bar3 {
	    top: 0vw;
    left: 53vw;
	    height: 56vw;
}
#bar4 {
	top: 0vw;
    left: 76vw;
    height: 56vw;
}
}
/*MS compat glows*/
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
	.firstclick {
		animation: mspulsate 1s ease infinite;
  -ms-animation:mspulsate 1s ease infinite;
	}
	.clickableobjects:hover {
	animation: mspulsate 1s ease infinite;
  -ms-animation:mspulsate 1s ease infinite;
	}

}
@font-face {
    font-family:'NotoSans';
    src:url("fonts/NotoSans-Regular.ttf");
}
.mandarin *{
    font-family:NotoSans!important;
}