.overlayme {position: absolute; width: 100%; background-color: black; color: white; height: 1000px; text-align: center; padding-top: 25%; transform-origin: right; z-index: 1000;}



.slide-in-bck-center{-webkit-animation:slide-in-bck-center 6s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-bck-center 6s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes slide-in-bck-center{0%{-webkit-transform:translateZ(600px);transform:translateZ(600px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes slide-in-bck-center{0%{-webkit-transform:translateZ(600px);transform:translateZ(600px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}


.fade-in-left{-webkit-animation:fade-in-left 2s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in-left 2s cubic-bezier(.39,.575,.565,1.000) both}

@-webkit-keyframes fade-in-left{0%{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-left{0%{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}


.scaleme {
	
} 

.moving-squares {
  margin: auto;
  width: 180px;
  height: 180px;
  overflow: hidden;
  position: absolute;
scale: 2.0; left: 20%;
	margin-top: 70px;
}

.moving-squares2 {
  margin: auto;
  width: 180px;
  height: 180px;
  overflow: hidden;
  position: absolute;
scale: 2.0; left: 70%;
	margin-top: 100px;
	bottom: -20;
transform: rotate(90deg);
}

.moving-squares3 {
  margin: auto;
  width: 180px;
  height: 180px;
  overflow: hidden;
  position: absolute;
scale: 2.0; left: 10%;
	margin-top: 100px;
	bottom: 0;
transform: rotate(180deg);

}

.square {
  position: absolute;
}

.square:first-of-type {
  background-color: #dedede;
  animation: bigsquare 8s 5 ease;
animation-iteration-count:infinite;
}

.square:nth-of-type(2) {
  background-color: transparent; border: .3px solid #dedede;
  animation: mediumsquare 4s reverse 5 ease ;
	animation-iteration-count:infinite;
}

.square:last-of-type {
  background-color: #c10000; opacity: 75%;
  animation: smallsquare 8s 5 alternate;
	animation-iteration-count:infinite;
}


.borderbox1 {animation-iteration-count:infinite; border: .3px solid #dedede; animation: bigsquare 8s 5 ease; background-color: transparent !important;}
.borderbox2 {animation-iteration-count:infinite; border: .3px solid #dedede; animation: mediumsquare 4s reverse 5 ease; background-color: #dedede !important;}
.borderbox3 {animation-iteration-count:infinite; border: .3px solid #dedede; animation: smallsquare 10s 5 alternate; background-color: transparent !important;}



@keyframes smallsquare {
  0% {
    top: 90px;
    right: 90px;
    bottom: 70px;
    left: 70px;
  }
  12.5% {
    top: 70px;
    bottom: 70px;
  }
  25% {
    right: 90px;
    bottom: 90px;
  }
  37.5% {
    right: 70px;
    left: 70px;
  }
  50% {
    bottom: 90px;
    left: 90px;
  }
  62.5% {
    top: 70px;
    bottom: 70px;
  }
  75% {
    top: 90px;
    left: 90px;
  }
  87.5% {
    right: 70px;
    left: 70px;
  }
  100% {
    top: 90px;
    right: 90px;
    bottom: 70px;
    left: 70px;
  }
}

@keyframes mediumsquare {
  0% {
    top: 110px;
    right: 110px;
    bottom: 40px;
    left: 40px;
  }
  12.5% {
    top: 40px;
    bottom: 40px;
  }
  25% {
    right: 110px;
    bottom: 110px;
  }
  37.5% {
    right: 40px;
    left: 40px;
  }
  50% {
    bottom: 110px;
    left: 110px;
  }
  62.5% {
    top: 40px;
    bottom: 40px;
  }
  75% {
    top: 110px;
    left: 110px;
  }
  87.5% {
    right: 40px;
    left: 40px;
  }
  100% {
    top: 110px;
    right: 110px;
    bottom: 40px;
    left: 40px;
  }
}

@keyframes bigsquare {
  0% {
    top: 140px;
    right: 140px;
    bottom: 0px;
    left: 0px;
  }
  12.5% {
    top: 0px;
    bottom: 0px;
  }
  25% {
    right: 140px;
    bottom: 140px;
  }
  37.5% {
    right: 0px;
    left: 0px;
  }
  50% {
    bottom: 140px;
    left: 140px;
  }
  62.5% {
    top: 0px;
    bottom: 0px;
  }
  75% {
    top: 140px;
    left: 140px;
  }
  87.5% {
    right: 0px;
    left: 0px;
  }
  100% {
    top: 140px;
    right: 140px;
    bottom: 0px;
    left: 0px;
  }
}










#containme {
  width: 500px;
  height: 300px;
  position: relative;
}




.grid {
  height: 650px;
  width:  100%;
 bottom: 0;
left: 0;
 /* box-shadow: 0 0 15px #9a962f;  yes or no? */
  border-radius: 0px; /* or 35px? */
  margin: 0px auto;
  position: absolute;
	}





.padme {margin-top: 25px;}


.wall-1 {
  width: 4%;
  height: 7%;
  position: absolute;
  top: 51%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  border: 2px solid #dedede;

  animation: wall-1 8s infinite linear; 
}



.wall-2 {
  width: 12%;
  height: 23%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #dedede;

  animation: wall-2 8s infinite linear; 
}


.wall-3 {
  width: 27%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #dedede;

 animation: wall-3 8s infinite linear; 
}


.wall-4 {
  width: 54%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #dedede;

 animation: wall-4 8s infinite linear; 
}



.wall-5 {
  width: 96%;
  height: 125%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #dedede;

  border-bottom: transparent;
  animation: wall-5 8s infinite linear; 

}







@keyframes l-to-r {
  from {left: -125px;}
  to {left: 131px;}
}

@keyframes r-to-l {
  from {right: -125px;}
  to {right: 131px;}
}


@keyframes wall-1 {

  from {
    width: 4%;
    height: 7%;
	
   }
   to {
    height: 0; 
    width: 0; 
	 
   }
}

@keyframes wall-2 {

  from {
   width: 12%;
    height: 23%; 
   }
   to {
   width: 4%;
   height: 7%;
   }
}

@keyframes wall-3 {

   from {
     width: 27%;
    height: 50%;
   }
   to {
   width: 12%;
    height: 23%;
   }
}

@keyframes wall-4 {

  from {
   width: 54%;
    height: 100%; 
   }
   to {
   width: 27%;
   height: 50%;
   }
}

@keyframes wall-5 {

  from {
    width: 100%;
   height: 100%;
   }
  to {
   width: 54%;
    height: 100%;
   }
}