@charset "UTF-8";
/* CSS Document */

body{
    margin: 0;
    overflow: hidden;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"
}
canvas{
    width: 100%;
    height: 100%
}
#helper{
	position: fixed;
	padding:0.2% 0.5%;
	background-color: #FFFFFF;border: 0.2vw solid #0A692D;
	border-radius: 1vw;
	transition: 0.5s;
	text-align: center;
	z-index: 100;
	filter: drop-shadow(0px 0px 6px #0A692D);
}
#helper a{color: #0A692D;text-decoration: none;}
#helper ul,#helper ol{
	text-align: left;
}
.helperPos0{
	top:110vh;
	left:35vw;
	width:30%;
}
.helperPos1{
	top: 2vw;
    left: 15vw;
    width: 70%;
}
.helperPos2{
	top:4vw;
	left:20vw;
	width:60%;
	
}
.textContent{max-height: 80vh;overflow: auto;}
.openVideo,.openVideoBack {
	display: inline-block;
	padding:0.2vw 1.5vw;
	background-color: #0A692D;
	color: #FFF!important;
	text-decoration: none;
	border-radius: 1vw;
}
.openVideoBack {
	background-color: #444;	
}

.contLeft{display: inline-block;width:50%;vertical-align: top;font-size: 1.5vw}
.contRight{display: inline-block;width:35%;text-align: center;vertical-align: top;}
.contRight img{width:80%;border-radius: 2vw;filter: drop-shadow(0px 0px 6px #111111);}


.homevideo{position:relative;top:0;width:70vw;height:39.5625vw;z-index: 1;background-color: #111;}
.homevideo iframe{position:relative;top:0;width:70vw;height:39.5625vw;z-index: 1;}
.animation{position: absolute;top:0;left:0;width:70vw;height:39.5625vw;z-index: 2;}

h1{padding: 0.1vw 0;margin: 1.1vw 0;}
h2{padding: 0.1vw 0;margin: 1.1vw 0;}
p{padding: 0.1vw 0;margin: 1.1vw 0;}

.panelleft{display: inline-block;width:30%;}
.panelleft img{width:100%;transform: scale(1.5);transform-origin: 113% 32%;}
.panelright{display: inline-block;width:65%;padding: 0 2%;}

.footer{
	position: fixed;
	top:100vh;
	left: 0vw;
	width:100%;
	margin-top: -10vw;
}
.footer img{width:100%;}

.play1{position: fixed;top:2vw;left:2vw;display: none;}
.play1 img{width:10vw;height:10vw;}

.phoneMovement1{position: fixed;top:2vw;left:90vw;}
.phoneMovement1 img{width:8vw;height:8vw;}
 
#captions{font-size: 3vw;    color: #FFF;position: absolute;top:100vh;margin-top:-50vh;;width:100%;text-align: center;background-color: #00000099;}

.typing-effect {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2vw solid rgba(51,131,91,1.00); /* Cursor effect */
  width: 0;
  animation: typing 3s steps(40, end) forwards, blink 0.5s infinite;
}
.playBTN{position: fixed;    top: 5vw;    left: 40vw;    width: 20vw;    height: 15vw;    padding-top: 5vw;    border-radius: 50%;    background-color: #FFF;    border: 1px solid #000;    color: #222;    font-size: 3vw;    text-align: center;    text-decoration: none;}
.innervideo{
	position:fixed;
	top:3vw;
	left:15vw;;z-index: 1000;
}
.videoBG{position: fixed;    top: 0vw;    left: 0vw;    width:100vw;    height: 100vh; background-color: rgba(0,0,0,0.80)}
#closeVideo{text-align: center;width:100%;margin-top: 1vw;color: #FFF;display: none;}

@keyframes typing {
  from { width: 0; }
  to { width: 80%; }
}

@keyframes blink {
  50% { border-color: transparent; }
  100% { border-color: rgba(51,131,91,1.00); }
}


@media screen and (max-width:982px){
	.innervideo {    top: 10vh;		transform: scale(1.25);}
	#captions {		font-size: 5vw;}
	#helper{width:90vw;}
	#helper iframe{    width: 90vw!important;    height: 50vw!important;}
	.helperPos0{
		top:110vh;
		left:35vw;
		width:30%;
	}
	.helperPos1{    
		top: 1vw;
        left: 1vw;
        width: 97vw !important;
	}
	.helperPos2{
		top:1vw;
		left:5vw;	
		width:30vw;
	}
	.panelleft{display: inline-block;width:15%;}
	.contLeft {    width: 96%;		font-size: 3.5vw;}
	.contRight {  width: 60%;	margin: 5%;}
	.footer img{    transform: scale(2);    transform-origin: 50% 105%;}
}
@media screen and (max-width:500px){
	.innervideo {    top: 40vh;		transform: scale(2.5);}
}