.container {
  position: fixed;
  width: 100%;
  height: 100%;
  padding: 0%;
  z-index: -1;
  top:0px; left: 0px;
}

.scene {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.fill {
  position: absolute;
  bottom: 5%;
  right: 5%;
  left: 5%;
  top: 5%;
}

.expand-width {
  width: 100%;
}


.aspect {
  opacity: 0.2;
}

.layer {
  position: absolute;
  top:0%; left: 0px;
  width: 100%; 
  height: 100%;
}

.layer:nth-child(1) div {
  position: absolute;
  top:0%; left: 30%;
  width: 90px; height: 90px; border: 1px solid #00ADEF; border-radius: 300px;
}

.layer:nth-child(2) div {
  position: absolute;
  top:20%; left: 40%;
  width: 50px; height: 50px; border: 1px solid #00ADEF; border-radius: 300px;
}

.layer:nth-child(3) div {
  position: absolute;
  top:6%; left: 60%;
  width: 30px; height: 30px; border: 1px solid #00ADEF; border-radius: 300px;
}

.layer:nth-child(4) div {
  position: absolute;
  top:20%; left: 80%;
  width: 290px; height: 290px; border: 1px solid #00ADEF; border-radius: 300px;
}

.layer:nth-child(5) div {
  position: absolute;
  top:30%; left: 1%;
  width: 120px; height: 120px; border: 1px solid #00ADEF; border-radius: 300px;
}

.layer:nth-child(6) div {
  position: absolute;
  top:40%; left: 60%;
  width: 210px; height: 210px; border: 1px solid #00ADEF; border-radius: 300px;
}



.layer div span {
    opacity: 0;
    width: 0%;
    height: 0%;
    left: 50%;
    top:50%;
    display: block;
    position: absolute;
    border: 1px solid #00ADEF;
    border-radius: 300px;
	animation: popinout 4s 1;
	-moz-animation: popinout 4s 1;
	-webkit-animation: popinout 4s 1;
	-o-animation: popinout 4s 1;
	animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite;
	-o-animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite;
}

.layer:nth-child(1) div span {-webkit-animation-delay: 0s; animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s;}
.layer:nth-child(2) div span {-webkit-animation-delay: 1s; animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s;}
.layer:nth-child(3) div span {-webkit-animation-delay: 2s; animation-delay: 2s; -moz-animation-delay: 0s; -o-animation-delay: 0s;}
.layer:nth-child(4) div span {-webkit-animation-delay: 250ms; animation-delay: 250ms; -moz-animation-delay: 250ms; -o-animation-delay: 250ms;}
.layer:nth-child(5) div span {-webkit-animation-delay: 140ms; animation-delay: 140ms; -moz-animation-delay: 140ms; -o-animation-delay: 140ms;}
.layer:nth-child(6) div span {-webkit-animation-delay: 3s; animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s;}


/* Animation Keyframes*/
@keyframes popinout {
    0% { opacity: 0; width: 0%; height: 0%; left: 50%; top:50%; position: absolute; }
    20% { opacity: 1; width: 50%; height: 50%; left: 24%; top:24%; position: absolute; }
    30% { opacity: 0; width: 0%; height: 0%; left: 50%; top:50%; position: absolute; }
}

@-moz-keyframes popinout {
    0% { opacity: 0; width: 0%; height: 0%; left: 50%; top:50%; position: absolute; }
    20% { opacity: 1; width: 50%; height: 50%; left: 24%; top:24%; position: absolute; }
    30% { opacity: 0; width: 0%; height: 0%; left: 50%; top:50%; position: absolute; }
}

@-webkit-keyframes popinout {
    0% { opacity: 0; width: 0%; height: 0%; left: 50%; top:50%; position: absolute; }
    20% { opacity: 1; width: 50%; height: 50%; left: 24%; top:24%; position: absolute; }
    30% { opacity: 0; width: 0%; height: 0%; left: 50%; top:50%; position: absolute; }
}

@-o-keyframes popinout {
    0% { opacity: 0; width: 0%; height: 0%; left: 50%; top:50%; position: absolute; }
    20% { opacity: 1; width: 50%; height: 50%; left: 24%; top:24%; position: absolute; }
    30% { opacity: 0; width: 0%; height: 0%; left: 50%; top:50%; position: absolute; }
}

@media screen and (max-width: 840px) {
	
	
	.layer div span {
	    border: 1px solid rgba(0, 172, 240, 0.23);
	}
	.layer:nth-child(1) div {border: 1px solid rgba(0, 172, 240, 0.23);}
	
	.layer:nth-child(2) div {border: 1px solid rgba(0, 172, 240, 0.23);}
	
	.layer:nth-child(3) div {border: 1px solid rgba(0, 172, 240, 0.23);}
	
	.layer:nth-child(4) div {border: 1px solid rgba(0, 172, 240, 0.23);}
	
	.layer:nth-child(5) div {border: 1px solid rgba(0, 172, 240, 0.23);}
	
	.layer:nth-child(6) div {border: 1px solid rgba(0, 172, 240, 0.23);}

	
}
/*
@media screen and (max-width: 480px) {
	.container {
		display: none;
	}
}
*/