body { padding: 0; margin: 0; overflow: hidden; font-family: sans-serif; }


#underlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

#cams {  }

#overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;  
  z-index: 3;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 100vh;
}

.wrapper div {
	height: 33.3333333vh;
	width: 33.3333333vw;
}

#overlay .meta {
	background: white;
}

.meta {	
	display: flex;
	align-items: center;
	justify-content: center;
	background: white;
}

.meta img {
	height: 180px;
	margin-top: -30px;
	width: auto;
}

.meta p {
	margin: 20%;
	font-size: 1.5rem;
}

.cam {
	width: 100%;
	height:100%;
	position:relative;
	overflow: hidden;
	text-align: center;
	background: black;
}

.cam iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.mainimage {
	object-fit: cover;
	width: 100%;
	height: 100%;
	animation: 30s linear infinite alternate kenBurns;
}

.location { opacity: 0.7; color: white; position: absolute; top: 1.15vh; left: 1.15vh; height: 2vh; width: auto; text-shadow: #000 2px 0 3px; font-size: 1.1rem; }
.live { position: absolute; top: 1vh; right: 1vh; height: 2vh; width: auto; }

@keyframes kenBurns {
  0% {
    transform-origin: bottom left;
    transform: scale(1.0);
  }
  100% {
    transform: scale(1.2);
  }
}