body {
  background-color: #222;
}

.field{
  stroke-dasharray: 1070;
  stroke-dashoffset: 0;
  -webkit-animation: strokeField 3s ease-out;
  -moz-animation: strokeField 3s ease-out;
  animation: strokeField 3s ease-out;
}

.castle{
  stroke-dasharray: 130;
  stroke-dashoffset: 0;
  -webkit-animation: strokeCastle 10s ease-in-out;
  -moz-animation: strokeCastle 10s ease-in-out;
  animation: strokeCastle 10s ease-in-out;
}


@-webkit-keyframes strokeCastle {
  from {
    stroke-dashoffset:130;
    stroke-opacity:.5;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@-moz-keyframes strokeCastle {
  from {
    stroke-dashoffset:130;
    stroke-opacity:.5;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes strokeCastle {
  from {
    stroke-dashoffset:130;
    stroke-opacity:.5;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes strokeField {
  from {
    stroke-dashoffset: 1070;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes strokeField {
  from {
    stroke-dashoffset: 1070;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes strokeField {
  from {
    stroke-dashoffset: 1070;
  }
  to {
    stroke-dashoffset: 0;
  }
}

h1{
  position:absolute;
  width:100%;
  margin-left: -50%;
  text-align:center;
  color:#BB994D;
  top:50%;
  margin-top:-25px;
  left:50%;
  font-family: Helvetica, Arial, Sand-serif;
  font-size:1em;
  font-weight:normal;  
}
svg {
  position: absolute;
  height:90%;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  
}