@import url('https://fonts.googleapis.com/css?family=Holtwood+One+SC');

body{
  background-color:#fff;
}

.border{
  background-color:#303030;
  position:absolute;
  transform:rotate(45deg);
  left:126px;
  top:78px;
  animation: border .2s;
  animation-delay:3.2s;
  animation-fill-mode: forwards;
}

@keyframes border{
  0%{
  width:0px;
  height:0px;}
  100%{
  width:147px;
  height:147px;}
}

.thR{
  position:absolute;
  background-color:white;
  top:50%;
  right:-10px;
  animation: th .5s;
  animation-delay:2.3s;
  animation-fill-mode: forwards;
}

.th{
  position:absolute;
  background-color:white;
  top:50%;
  left:-10px;
  animation: th .5s;
  animation-delay:2.3s;
  animation-fill-mode: forwards;
}

.thR .f{
  width:100%;
  background-color:#a1a1a1;
  height:25px;
}

.th .f{
  width:100%;
  background-color:#a1a1a1;
  height:25px;
}

@keyframes th{
  0%{
  width:0px;
  height:0px;}
  70%{height:50px;width:0;}
  100%{
  width:140px;
  height:50px;
  border:5px solid #303030;}
}

.main{
  position:Relative; 
  width: 400px;
  margin: auto;
  position: absolute;
  top: 40%; left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

.bottom{
  background-color:#303030;
  height:15px;
  width:400px;
  animation: bottomA .5s;
  position:relative;
  z-index:2;
  animation-fill-mode: forwards;
}

.bottomB{
  background-color:#ececec;
  position:Relative;
  z-index:12;
  margin: 0 auto;
  margin-bottom:3px;
  animation: bottomB .5s;
  animation-delay:.5s;
  animation-fill-mode: forwards;
  position:Relative;
}

.entrance{
  left: 0; 
  right: 0; 
  bottom:0;
  position:absolute;
  margin-left: auto; 
  margin-right: auto; 
  width:137px;
}

.door{
  background-color:#303030;
  width:16px;
  display:inline-block;
  border-top-left-radius:50%;
  border-top-right-radius:50%;
}

.door:nth-child(4){
  animation:door .7s;
  animation-delay:.5s;
  animation-fill-mode: forwards;
}

.door:nth-child(3){
  animation:door .7s;
  animation-delay:.7s;
  animation-fill-mode: forwards;
}

.door:nth-child(5){
  animation:door .7s;
  animation-delay:.7s;
  animation-fill-mode: forwards;
}

.door:nth-child(2){
  animation:door .7s;
  animation-delay:1s;
  animation-fill-mode: forwards;
}

.door:nth-child(6){
  animation:door .7s;
  animation-delay:1s;
  animation-fill-mode: forwards;
}

.door:nth-child(1){
  animation:door .7s;
  animation-delay:1.2s;
  animation-fill-mode: forwards;
}

.door:nth-child(7){
  animation:door .7s;
  animation-delay:1.2s;
  animation-fill-mode: forwards;
}

.rightW{
  position:absolute;
  right:6px;
  bottom:0;
}

.leftW{
  position:absolute;
  left:6px;
  bottom:0;
}

.window{
  display:inline-block;
  background-color:white;
  display:inline-block;
  position:Relative;
}

.tWindow{
  background-color:white;
  position:absolute;
  
}


.leftW .window:nth-child(1){
  animation:windows .5s;
  animation-delay:1.3s;
  animation-fill-mode: forwards;
}

.leftW .window:nth-child(2){
  animation:windows .5s;
  animation-delay:1.2s;
  animation-fill-mode: forwards;
}

.leftW .window:nth-child(3){
  animation:windows .5s;
  animation-delay:1.1s;
  animation-fill-mode: forwards;
}

.leftW .window:nth-child(4){
  animation:windows .5s;
  animation-delay:1s;
  animation-fill-mode: forwards;
}

.rightW .window:nth-child(1) .tWindow{
  animation:tWindow .5s;
  animation-delay:1.3s;
  animation-fill-mode: forwards;
}

.rightW .window:nth-child(2) .tWindow{
  animation:tWindow .5s;
  animation-delay:1.4s;
  animation-fill-mode: forwards;
}

.rightW .window:nth-child(3) .tWindow{
  animation:tWindow .5s;
  animation-delay:1.5s;
  animation-fill-mode: forwards;
}

.rightW .window:nth-child(4) .tWindow{
  animation:tWindow .5s;
  animation-delay:1.6s;
  animation-fill-mode: forwards;
}

.leftW .window:nth-child(4) .tWindow{
  animation:tWindow .5s;
  animation-delay:1.3s;
  animation-fill-mode: forwards;
}

.leftW .window:nth-child(3) .tWindow{
  animation:tWindow .5s;
  animation-delay:1.4s;
  animation-fill-mode: forwards;
}

.leftW .window:nth-child(2) .tWindow{
  animation:tWindow .5s;
  animation-delay:1.5s;
  animation-fill-mode: forwards;
}

.leftW .window:nth-child(1) .tWindow{
  animation:tWindow .5s;
  animation-delay:1.6s;
  animation-fill-mode: forwards;
}

.rightW .window:nth-child(1){
  animation:windows .5s;
  animation-delay:1s;
  animation-fill-mode: forwards;
}

.rightW .window:nth-child(2){
  animation:windows .5s;
  animation-delay:1.1s;
  animation-fill-mode: forwards;
}

.rightW .window:nth-child(3){
  animation:windows .5s;
  animation-delay:1.2s;
  animation-fill-mode: forwards;
}

.rightW .window:nth-child(4){
  animation:windows .5s;
  animation-delay:1.3s;
  animation-fill-mode: forwards;
}

.bottomBar{
  background-color:#303030;
  animation:bottomBa .5s;
  animation-delay:1.3s;
  animation-fill-mode: forwards;
}

.squares{
  position:absolute;
  top:3px;
  left:0;
}

.squareR{
  position:absolute;
  top:3px;
  right:10px;
}

.square{
  background-color:#303030;
  display:inline-block;
  margin-left:10px;
  animation:square .5s;
  animation-delay:1.4s;
  animation-fill-mode: forwards;
}


@keyframes bottomA{
  0%{width:0%;transform:translate(50%);}
  100%{width:400px;transform:translate(0%);}
}

@keyframes bottomB{
  0%{height:0px;width:0px;}
  100%{height:70px;width:350px;}
}

@keyframes door{
  0%{height:0px;}
  100%{height:25px;}
}

@keyframes windows{
  0%{border-top:0;border-bottom:0;}
  100%{border-top:20px solid white;border-right:20px solid #a1a1a1;}
}

@keyframes tWindow{
  0%{top:-20px;width:0;height:0;}
  60%{top:-38px;width:20px;height:10px;}
  100%{top:-35px;width:20px;height:10px;}
}

@keyframes bottomBa{
  0%{width:0%;height:0px;transform:translateY(0px);height:5px;}
  80%{transform:translateY(0px);}
  100%{width:100%;height:5px;transform:translateY(14px);}
}

@keyframes square{
  0%{height:0;width:0px;}
  100%{height:10px;width:10px;}
}

.middle{
  background-color:#ececec;
  position:Relative;
  z-index:11;
  margin: 0 auto;
  animation:middle .5s;
  animation-delay:1.5s;
  animation-fill-mode: forwards;
}

@keyframes middle{
  0%{height:0;width:0;}
  100%{height:60px;width:77%;}
}

.sep{
  background-color:#a1a1a1;
  animation:sep .5s;
  animation-delay:1.5s;
  animation-fill-mode: forwards;
}

@keyframes sep{
  0%{width:0;height:0;}
  100%{width:100%;height:5px;}
}

.anno{
  background-color:white;
  margin: 0 auto;
  position:relative;
  animation:anno .5s;
  animation-delay:1.8s;
  animation-fill-mode: forwards;
}

@keyframes anno{
  0%{height:0px;width:0%;}
  100%{height:70px;width:50%;border:2px solid #303030;}
}

.pillars{
  margin:0 auto;
  text-align:center;
  position:absolute;
  bottom:0;
}

.text{
  text-align:center;
  font-family: 'Holtwood One SC', serif;
  color:#303030;
  font-size:0;
  animation:text .5s;
  animation-delay:2s;
  animation-fill-mode: forwards;
}

@keyframes text{
  0%{font-size:0;}
  100%{font-size:30px;transform:translateY(-14px);margin-top: 8px;}
}

.pillar{
  background-color:#a1a1a1;
  margin-left:15px;
  display:inline-block;
}

.pillars .pillar:nth-child(3){
  animation:pillar .5s;
  animation-delay:1.8s;
  animation-fill-mode: forwards;
}

.pillars .pillar:nth-child(4){
  animation:pillar .5s;
  animation-delay:1.8s;
  animation-fill-mode: forwards;
}

.pillars .pillar:nth-child(2){
  animation:pillar .5s;
  animation-delay:1.9s;
  animation-fill-mode: forwards;
}

.pillars .pillar:nth-child(5){
  animation:pillar .5s;
  animation-delay:1.9s;
  animation-fill-mode: forwards;
}

.pillars .pillar:nth-child(1){
  animation:pillar .5s;
  animation-delay:2s;
  animation-fill-mode: forwards;
}

.pillars .pillar:nth-child(6){
  animation:pillar .5s;
  animation-delay:2s;
  animation-fill-mode: forwards;
}

@keyframes pillar{
  0%{height:0;width:0;}
  80%{border-top:3px solid;}
  100%{height:25px;width:5px;border-top:3px solid;}
}

.middleM{
  position:relative;
}

.leftPillars{
  position:absolute;
  left:-3px;
  bottom:0;
}

.RightPillars{
  position:absolute;
  right:13px;
  bottom:0;
}

.bPillars{
  background-color:#a1a1a1;
  display:inline-block;
  margin-left:16px;
}

.leftPillars .bPillars:nth-child(3){
  animation:bPillar .5s;
  animation-delay:1.8s;
  animation-fill-mode: forwards;
}

.leftPillars .bPillars:nth-child(2){
  animation:bPillar .5s;
  animation-delay:1.9s;
  animation-fill-mode: forwards;
  max-height:50px;
}

.leftPillars .bPillars:nth-child(1){
  animation:bPillar .5s;
  animation-delay:2s;
  animation-fill-mode: forwards;
  max-height:45px;
}

@keyframes bPillar{
  0%{height:0;width:0;}
  70%{height:0;}
  100%{height:55px;width:7px;border-top:2px solid white;}
}

.RightPillars .bPillars:nth-child(1){
  animation:bPillar .5s;
  animation-delay:1.8s;
  animation-fill-mode: forwards;
}

.RightPillars .bPillars:nth-child(2){
  animation:bPillar .5s;
  animation-delay:1.9s;
  animation-fill-mode: forwards;
  max-height:50px;
}

.RightPillars .bPillars:nth-child(3){
  animation:bPillar .5s;
  animation-delay:2s;
  animation-fill-mode: forwards;
  max-height:45px;
}

.rSquare{
  background-color:#303030;
  position:absolute;
  left:20px;
  top:25px;
  animation:rSquare .5s;
  animation-delay:2s;
  animation-fill-mode: forwards;
}

.lSquare{
  background-color:#303030;
  position:absolute;
  right:20px;
  top:25px;
  animation:rSquare .5s;
  animation-delay:2s;
  animation-fill-mode: forwards;
}


@keyframes rSquare{
  0%{height:0;width:0;}
  100%{height:15px;width:50px;}
}

.bTop{
  background-color:#303030;
  position:absolute;
  top:0;
  animation:bTop .5s;
  animation-delay:2s;
  animation-fill-mode: forwards;
}

@keyframes bTop{
  0%{height:0;width:0;}
  100%{height:5px;width:100%;}
}

.top{
  background-color:#ececec;
  position:Relative;
  z-index:10;
  margin:0 auto;
  animation:top .5s;
  animation-delay:2.1s;
  animation-fill-mode: forwards;
}

@keyframes top{
  0%{width:0;height:0;}
  100%{width:60%;height:40px;}
}

.sb{
  text-align:center;
  font-family: 'Holtwood One SC', serif;
  color:#a1a1a1;
  background-color:white;
  border-top-left-radius:40%;
  border-top-right-radius:40%;
  margin:0 auto;
  font-size:0;
  margin-top:15px;
  transform:translateY(5px);
  border-bottom:0;
  animation:sb .5s;
  animation-delay:2.2s;
  animation-fill-mode: forwards;
}

@keyframes sb{
  0%{height:0;width:0;font-size:0;}
  100%{height:40px;width:134px;font-size:15px;
  padding:10px;border:2px solid #303030;}
}

.tri{
  background-color:#ececec;
  margin:0 auto;
  z-index:5;
  animation:tri .5s;
  animation-delay:2.3s;
  animation-fill-mode: forwards;
}

@keyframes tri{
  0%{width:0px; height:0px;transform:rotate(0deg) translate(59px, 59px);}
  100%{width:140px; height:140px;transform:rotate(45deg) translate(59px, 59px);}
}

.circle{
  background-color:#303030;
  border-radius:50%;
  text-align:center;
  font-family: 'Holtwood One SC', serif;
  color:white;
  z-index:3;
  font-size:0;
  line-height:235px;
  position:absolute;
  bottom:-30px;
  left:100px;
  animation:circle .5s;
  animation-delay:2.3s;
  animation-fill-mode: forwards;
}

@keyframes circle{
  0%{height:0px;width:0px;}
  100%{height:150px;width:200px;font-size:20px;}
}

.circle2{
  background-color:rgba(0,0,0,0);
  border-radius:50%;
  height:300px;
  width:300px;
  text-align:center;
  font-family: 'Holtwood One SC', serif;
  color:white;
  z-index:2;
  line-height:235px;
  position:absolute;
  bottom:-40px;
  left:48px;
  border:2px dashed #a1a1a1;
  opacity:0;
  animation:circle2 .5s, rotate 40s infinite;
  animation-delay:2.4s;
  animation-fill-mode: forwards;
}

@keyframes circle2{
  0%{opacity:0;}
  100%{opacity:1;}
}

@keyframes rotate{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}

.backMain{
  position:absolute;
  bottom:0;
  z-index:1;
}

.last{
  margin-left:20px;
  background-color:#303030;
  animation:last .5s;
  animation-delay:2.5s;
  animation-fill-mode: forwards;
}

@keyframes last{
  0%{height:0;width:359px;}
  70%{height:0;width:359px;}
  100%{height:93px;width:359px;}
}

.middleL{
  margin-left:40px;
  background-color:#303030;
  animation:middleL .5s;
  animation-delay:2.6s;
  animation-fill-mode: forwards;
}

@keyframes middleL{
  0%{height:0;width:318px;}
  70%{height:0;width:318px;}
  100%{height:56px;width:318px;}
}

.topL{
  margin-left:75px;
  background-color:#303030;
  animation:topL .5s;
  animation-delay:2.7s;
  animation-fill-mode: forwards;
}

@keyframes topL{
  0%{height:0;width:253px;}
  70%{height:0;width:253px;}
  100%{height:44px;width:250px;}
}

.star{
  position:absolute;
  color:white;
  font-size:30px;
  transform:translate(105px, -60px);
  animation:star .5s;
  animation-delay:2.7s;opacity:0;
  animation-fill-mode: forwards;
}

@keyframes star{
  0%{opacity:0;}
  100%{opacity:1;}
}