html, body{
  overflow: hidden;
}

body{height:100%;padding:0;margin:0;background:black;}

.parent{
	width:100vw;
	height:100vh;
	padding:0;
	margin:0;
}
.parent span {
	position: absolute;
	overflow:hidden;
    left:0;
    top:0;
	margin:0;
	padding:0;
	height:100vh;
	width:400vh;
    animation: move 32s linear 0s alternate infinite;
}

#contact{position:absolute;padding:10px;10px;top:0;right:0;background:blue;font-family:sans-serif;font-weight:regular;font-size:1.8em;color:white;}
#contact a{color:white;}



#layer0{left:0;top:0;position:absolute;height:100vh;}

#layer1{position:absolute;left:0;bottom:0;height:50vh;z-index:2;}
#layer2{position:absolute;left:12%;top:5%;height:75vh;z-index:3;}
#layer3{position:absolute;left:12%;bottom:5%;height:50vh;z-index:4;}
#layer4{position:absolute;left:25%;top:0;height:45vh;z-index:1;}
#layer5{position:absolute;left:30%;top:30%;height:40vh;z-index:1;}
#layer6{position:absolute;left:38%;top:25%;height:70vh;z-index:1;}
#layer7{position:absolute;left:52%;top:2%;height:30vh;z-index:1;}
#layer8{position:absolute;left:65%;top:5%;height:50vh;z-index:1;}
#layer9{position:absolute;left:60%;top:40%;height:50vh;z-index:1;}
#layer10{position:absolute;right:0;top:10%;height:70vh;z-index:1;}
#layer11{position:absolute;right:5%;bottom:0%;height:40vh;z-index:1;}
video{position:absolute;right:10%;top:10%;width:40vh;height:40vh;}
.layer {transition: transform 1s;}


.layer:hover {
  transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}


.container {
  overflow: hidden;
  white-space: nowrap;
  position:absolute;bottom:0;left:0;color:white;text-transform:uppercase;Font-family:sans-serif;background:#000;marign:0;padding:10px;font-size:1.6em;
  width:100vw;
}
.scrolling{
 /* Starting position */
  display:box-inline;
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: example1 20s linear infinite;
 -webkit-animation: example1 20s linear infinite;
 animation: example1 20s linear infinite;
}


@keyframes move {
  0% {
    transform: translate(0,0);
  }
  100% {
    transform: translate(calc(100vw - 400vh),0);
  }
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}

.phone {
  height: 60px;
  width: 40px;
  border: 3px solid blue;
  border-radius: 10px;
  animation: rotate 1.5s ease-in-out infinite alternate;
  display:none;
}

.message {
  color: white;
  font-size: 1em;
  margin-top: 40px;
 
}

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

@media only screen and (max-device-width: 812px) and (orientation: landscape) {
  .phone, .message {
    display: block;
  }
}
#warning{left:30px;top:20px;position:absolute;}