html
{
    -moz-user-select     : none;
    -khtml-user-select   : none;
    -webkit-user-select  : none;
    -o-user-select       : none;
    user-select          : none;
}
#simscreen
{
	position: relative;
	left:0px;
	top:0px;
	height: 600px; 
	width:800px;
	border:solid 1px;
}

#title{
	position:relative;
	left: 0px;
	top: 0px;
	height:40px;
	font-size: 22px;
	text-align:center;
	background-color: black;
	font-family: verdana;
	color: White;
	text-transform: uppercase; 
}

#title h3
{
	padding-top:2px;
	margin:0px;
}	

.simsubscreen
{
	position:absolute;
	left:50px;
	top:50px;
	height:530px;
	width:745px;
}

.incanvas
{
	margin:5px 0 0 5px;
	padding:0;
}

#nextButton
{
	position:absolute;
	left:750px;
	top:530px;
	cursor:pointer;
}

.circlebg
{
	border-radius:100%;
	font-size:25px;
	color:#fff;
	text-align:center;
	background:#000
}

.steptext
{
	display:inline;
	font-size:14px;
}

#copyright{
	position: absolute;
	left:60px;
	top: 580px;
	font-size:12px
}

@-webkit-keyframes drop1 {
  0% {
    transform: scale3d(0.01,0.01,0.01) translateY(0) rotate(-45deg)
  }
  10% {
    transform: scale3d(1,1,1) rotate(-45deg)
  }
  44% {
    transform: scale3d(1,1,1) translateY(135px) rotate(-45deg)
  }
  100% {
    transform: scale3d(1,1,1) translateY(135px) rotate(-45deg)
  }
}
@keyframes drop1 {
  0% {
    transform: scale3d(0.01,0.01,0.01) translateY(0) rotate(-45deg)
  }
  10% {
    transform: scale3d(1,1,1) rotate(-45deg)
  }
  44% {
    transform: scale3d(1,1,1) translateY(135px) rotate(-45deg)
  }
  100% {
    transform: scale3d(1,1,1) translateY(135px) rotate(-45deg)
  }
}

@-webkit-keyframes colourChange1
{
	0% { background-image:linear-gradient(#ffe1f0 ,#ffe1f0 )}
	10% { background-image:linear-gradient(#ffe1f0 ,#fb483a 1%)}
	20% { background-image:linear-gradient(#ffe1f0 ,#fb483a 2% )}
	30% { background-image:linear-gradient(#ffe1f0 ,#fb483a 3% )}
	40%{background-image:linear-gradient(#ffe1f0 ,#fb483a 4%  )} 
	50%{background-image:linear-gradient(#ffe1f0 , #fb483a 5%  )} /*darkorchid-#9932CC*/
	60%{background-image:linear-gradient(#ffe1f0 , #fb483a 6%)}
	70%{background-image:linear-gradient(#ffe1f0, #fb483a 7%)} 
	80%{background-image:linear-gradient(#ffe1f0, #fb483a 80%)}
	90%{background-image:linear-gradient(#ffe1f0, #fb483a  90%)}
	100%{background-image:linear-gradient(#fb483a,#fb483a )}
}

@keyframes colourChange1
{
	0% { background-image:linear-gradient(#ffe1f0 ,#ffe1f0 )}
	10% { background-image:linear-gradient(#ffe1f0 ,#fb483a 1%)}
	20% { background-image:linear-gradient(#ffe1f0 ,#fb483a 2% )}
	30% { background-image:linear-gradient(#ffe1f0 ,#fb483a 3% )}
	40%{background-image:linear-gradient(#ffe1f0 ,#fb483a 4%  )} 
	50%{background-image:linear-gradient(#ffe1f0 , #fb483a 5%  )} /*darkorchid-#9932CC*/
	60%{background-image:linear-gradient(#ffe1f0 , #fb483a 6%)}
	70%{background-image:linear-gradient(#ffe1f0, #fb483a 7%)} 
	80%{background-image:linear-gradient(#ffe1f0, #fb483a 80%)}
	90%{background-image:linear-gradient(#ffe1f0, #fb483a  90%)}
	100%{background-image:linear-gradient(#fb483a,#fb483a )}
}

@-webkit-keyframes colourChange2
{
	0% { background-image:linear-gradient(#fb483a, #fb483a )}
	10%{ background-image:linear-gradient(#FFFFE5, #fb483a 30%)}
	30%{ background-image:linear-gradient(#FFFFE5, #fb483a 50%)}
	50%{background-image:linear-gradient(#FFFFE5, #fb483a 70%)}
	70%{background-image:linear-gradient(#FFFFE5, #fb483a 90%)} 
	90%{background-image:linear-gradient(#FFFFE5, #FFFFE5)}
	100%{background-image:linear-gradient(#FFFFE5, #FFFFE5)}
}

@keyframes colourChange2
{
	0% { background-image:linear-gradient(#fb483a, #fb483a )}
	10%{ background-image:linear-gradient(#FFFFE5, #fb483a 30%)}
	30%{ background-image:linear-gradient(#FFFFE5, #fb483a 50%)}
	50%{background-image:linear-gradient(#FFFFE5, #fb483a 70%)}
	70%{background-image:linear-gradient(#FFFFE5, #fb483a 90%)} 
	90%{background-image:linear-gradient(#FFFFE5, #FFFFE5)}
	100%{background-image:linear-gradient(#FFFFE5, #FFFFE5)}
}

@-webkit-keyframes tilttopfilter {
    from { -webkit-transform: rotateY(0deg);}
    to   { -webkit-transform: rotateY(-10deg); }
  }

  /* all other browsers */
  @keyframes tilttopfilter {
    from {
      -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
    to {
      -moz-transform: rotateY(-10deg);
      -ms-transform: rotateY(-10deg);
      transform: rotateY(-10deg);
    }
  }
  @-webkit-keyframes tilttopfilter1 {
    from { -webkit-transform: rotateY(-10deg);}
    to   { -webkit-transform: rotateY(10deg); }
  }

  /* all other browsers */
  @keyframes tilttopfilter1 {
    from {
      -moz-transform: rotateY(-10deg);
      -ms-transform: rotateY(-10deg);
      transform: rotateY(-10deg);
    }
    to {
      -moz-transform: rotateY(10deg);
      -ms-transform: rotateY(10deg);
      transform: rotateY(10deg);
    }
  }
  
@-webkit-keyframes rotateBeaker1
{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(-90deg);}
}

@keyframes rotateBeaker1
{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(-90deg);}
}
@-webkit-keyframes rotateBeaker2
{
	0%{transform:rotate(-90deg);}
	100%{transform:rotate(0deg);}
}

@keyframes rotateBeaker2
{
	0%{transform:rotate(-90deg);}
	100%{transform:rotate(0deg);}
}


/* canvas 5 */
.door
{

  background-color: white;
  position:absolute;
  top:158px;
  left:20px;
  width:200px;
  height:175px;
  /* border: 10px solid grey; */
  border: 5px double black;
  transform-origin: right;
  /*Speed of the Door animation*/
  transition: all 1.5s ease-in-out;
}
.doorOpen
{
  /*prespectiv creates the door open effect*/
  transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(125deg);
}/* canvas 5 */

/* canvas 6 */
@-webkit-keyframes rotatefilter1
{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(90deg);}
}

@keyframes rotatefilter1
{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(90deg);}
}
/* canvas 6 */
@-webkit-keyframes rotatefilter2
{
	0%{transform:rotate(90deg);}
	100%{transform:rotate(0deg);}
}

@keyframes rotatefilter2
{
	0%{transform:rotate(90deg);}
	100%{transform:rotate(0deg);}
}

.door6-1
{

  background-color: white;
  position:absolute;
  top:158px;
  left:20px;
  width:200px;
  height:175px;
  /* border: 10px solid grey; */
  border: 5px double black;
  transform-origin: right;
  /*Speed of the Door animation*/
  /* //transition: all 1.5s ease-in-out; */
}

.door6-2
{

  background-color: white;
  position:absolute;
  top:158px;
  left:20px;
  width:200px;
  height:175px;
  /* border: 10px solid grey; */
  border: 5px double black;
  transform-origin: right;
  /*Speed of the Door animation*/
  transition: all 1.5s ease-in-out;
}
.doorOpen
{
  /*prespectiv creates the door open effect*/
  transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(125deg);
}/* canvas 5 */


.door8-1
{

  background-color: white;
  position:absolute;
  top:158px;
  left:20px;
  width:200px;
  height:175px;
  /* border: 10px solid grey; */
  border: 5px double black;
  transform-origin: right;
  /*Speed of the Door animation*/
  transition: all 1.5s ease-in-out;
}
.door8-2
{

  background-color: white;
  position:absolute;
  top:158px;
  left:270px;
  width:200px;
  height:175px;
  /* border: 10px solid grey; */
  border: 5px double black;
  transform-origin: right;
  /*Speed of the Door animation*/
  transition: all 1.5s ease-in-out;
}

.doorOpen
{
  /*prespectiv creates the door open effect*/
  transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(125deg);
}/* canvas 5 */


.door12-1
{

  background-color: white;
  position:absolute;
  top:155px;
  left:85px;
  width:85px;
  height:90px;
  /* border: 10px solid grey; */
  border: 5px double black;
  transform-origin: right;
  /*Speed of the Door animation*/
  transition: all 0.75s ease-in-out;
}

.doorOpen12
{
  /*prespectiv creates the door open effect*/
  transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(125deg);
}/* canvas 5 */

@-webkit-keyframes rotateKnotch
{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(-90deg);}
}

@keyframes rotateKnotch
{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(-90deg);}
}

@-webkit-keyframes rotateKnotch2
{
	0%{transform:rotate(-90deg);}
	100%{transform:rotate(0deg);}
}

@keyframes rotateKnotch2
{
	0%{transform:rotate(-90deg);}
	100%{transform:rotate(0deg);}
}