body {
  background-color: black;
}
#wrapper {
  max-width: 1010px;
  margin: 0 auto;
  position: relative;
  top: 75px;
}
#intro {
  position: absolute;
  top: -70px;
  color: red;
  width: 100%;
  margin: 0 auto;
}
#intro p {
  margin-top: 7px;
  margin-bottom: 2px;
  font-size: 21px;
  text-align: center;
  height: 18px;
}
a {
  color: red;
  text-decoration: none;

}
a:hover {
  color: white;
}
#reload {
  color: red;
  position: absolute;
  top: 130px;
  width: 100%;
  margin: 0 auto;
}
#reload p {
  font-size: 30px;
  text-align: center;
  z-index: 10;
  animation-name: reloadFade;
  animation-duration: 134s;
}
@keyframes reloadFade {
  0% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
/*LOGO*/
.logo {
  margin: 0 43%;
  width: 200px;
  position: absolute;
  z-index: 1;
}
.logo img {
  max-width: 200px;
  animation-name: logoScale;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 130s;
  animation-fill-mode: forwards;
  position: absolute;
}
@keyframes logoScale {
  0% {width: 200px;
      height: 195px;
      top: 100px;
      left: 0px;
  }
  1% {
    width: 90px;
    height: 88px;
    top: 380px;
    left: 428px;
  }
  98% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    width: 90px;
    height: 88px;
    top: 380px;
    left: 428px;
    opacity: 0;
  }
}





/*MAIN IMAGE*/

@keyframes imageAnimation {
  0% {
    opacity: 0;
  }
  1.67% {
    opacity: 1;
    animation-timing-function: ease-in;
  }
  8.33% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#gallery img{
    background: skyblue;
    animation-timing-function: ease-in-out;
    animation-name: imageAnimation;
    animation-delay: 1.5s;
    animation-duration: 120s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    position: absolute;
    top: 1px;
    backface-visibility: hidden;
    opacity: 0;
}
#gallery > img:nth-child(1) {
  background-image: url('../main/1a.jpg');
}
#gallery > img:nth-child(2) {
  background-image: url('../main/1b.jpg');
  animation-delay: 5s;
}
#gallery > img:nth-child(3) {
  background-image: url('../main/2a.jpg');
  animation-delay: 10s;
}
#gallery > img:nth-child(4) {
  background-image: url('../main/2b.jpg');
  animation-delay: 15s;
}
#gallery > img:nth-child(5) {
  background-image: url('../main/3a.jpg');
  animation-delay: 20s;
}
#gallery > img:nth-child(6) {
  background-image: url('../main/3b.jpg');
  animation-delay: 25s;
}
#gallery > img:nth-child(7) {
  background-image: url('../main/4a.jpg');
  animation-delay: 30s;
}
#gallery > img:nth-child(8) {
  background-image: url('../main/4b.jpg');
  animation-delay: 35s;
}
#gallery > img:nth-child(9) {
  background-image: url('../main/5a.jpg');
  animation-delay: 40s;
}
#gallery > img:nth-child(10) {
  background-image: url('../main/5b.jpg');
  animation-delay: 45s;
}
#gallery > img:nth-child(11) {
  background-image: url('../main/6a.jpg');
  animation-delay: 50s;
}
#gallery > img:nth-child(12) {
  background-image: url('../main/6b.jpg');
  animation-delay: 55s;
}
#gallery > img:nth-child(13) {
  background-image: url('../main/1a.jpg');
  animation-delay: 60s;
}
#gallery > img:nth-child(14) {
  background-image: url('../main/1b.jpg');
  animation-delay: 65s;
}
#gallery > img:nth-child(15) {
  background-image: url('../main/2a.jpg');
  animation-delay: 70s;
}
#gallery > img:nth-child(16) {
  background-image: url('../main/2b.jpg');
  animation-delay: 75s;
}
#gallery > img:nth-child(17) {
  background-image: url('../main/3a.jpg');
  animation-delay: 80s;
}
#gallery > img:nth-child(18) {
  background-image: url('../main/3b.jpg');
  animation-delay: 85s;
}
#gallery > img:nth-child(19) {
  background-image: url('../main/4a.jpg');
  animation-delay: 90s;
}
#gallery > img:nth-child(20) {
  background-image: url('../main/4b.jpg');
  animation-delay: 95s;
}
#gallery > img:nth-child(21) {
  background-image: url('../main/5a.jpg');
  animation-delay: 100s;
}
#gallery > img:nth-child(22) {
  background-image: url('../main/5b.jpg');
  animation-delay: 105s;
}
#gallery > img:nth-child(23) {
  background-image: url('../main/6a.jpg');
  animation-delay: 110s;
}
#gallery > img:nth-child(24) {
  background-image: url('../main/6b.jpg');
  animation-delay: 115s;
}
/*MAIN TEXT*/


/*IBOXES*/
@keyframes iBoxAnimation {
  0% {
    opacity: 0;
  }
  1.67% {
    opacity: 1;
    animation-timing-function: ease-in;
  }
  8.33% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

#iBox1 > img:nth-child(1) {
  background-image: url('../Main/0101.jpg');
}
#iBox1 > img:nth-child(2) {
  animation-delay: 5s;
  background-image: url('../Main/0102.jpg');
}
#iBox1 > img:nth-child(3) {
  animation-delay: 10s;
  background-image: url('../Main/0103.jpg');
}
#iBox1 > img:nth-child(4) {
  animation-delay: 15s;
  background-image: url('../Main/0104.jpg');
}
#iBox1 > img:nth-child(5) {
  animation-delay: 20s;
  background-image: url('../Main/0105.jpg');
}
#iBox1 > img:nth-child(6) {
  animation-delay: 25s;
  background-image: url('../Main/0106.jpg');
}
#iBox1 > img:nth-child(7) {
  animation-delay: 30s;
  background-image: url('../Main/0107.jpg');
}
#iBox1 > img:nth-child(8) {
  animation-delay: 35s;
  background-image: url('../Main/0108.jpg');
}
#iBox1 > img:nth-child(9) {
  animation-delay: 40s;
  background-image: url('../Main/0109.jpg');
}
#iBox1 > img:nth-child(10) {
  animation-delay: 45s;
  background-image: url('../Main/0110.jpg');
}
#iBox1 > img:nth-child(11) {
  animation-delay: 50s;
  background-image: url('../Main/0111.jpg');
}
#iBox1 > img:nth-child(12) {
  animation-delay: 55s;
  background-image: url('../Main/0112.jpg');
}
#iBox1 > img:nth-child(13) {
  background-image: url('../Main/0113.jpg');
  animation-delay: 60s;
}
#iBox1 > img:nth-child(14) {
  animation-delay: 65s;
  background-image: url('../Main/0114.jpg');
}
#iBox1 > img:nth-child(15) {
  animation-delay: 70s;
  background-image: url('../Main/0115.jpg');
}
#iBox1 > img:nth-child(16) {
  animation-delay: 75s;
  background-image: url('../Main/0116.jpg');
}
#iBox1 > img:nth-child(17) {
  animation-delay: 80s;
  background-image: url('../Main/0117.jpg');
}
#iBox1 > img:nth-child(18) {
  animation-delay: 85s;
  background-image: url('../Main/0118.jpg');
}
#iBox1 > img:nth-child(19) {
  animation-delay: 90s;
  background-image: url('../Main/0119.jpg');
}
#iBox1 > img:nth-child(20) {
  animation-delay: 95s;
  background-image: url('../Main/0120.jpg');
}
#iBox1 > img:nth-child(21) {
  animation-delay: 100s;
  background-image: url('../Main/0121.jpg');
}
#iBox1 > img:nth-child(22) {
  animation-delay: 105s;
  background-image: url('../Main/0122.jpg');
}
#iBox1 > img:nth-child(23) {
  animation-delay: 110s;
  background-image: url('../Main/0123.jpg');
}
#iBox1 > img:nth-child(24) {
  animation-delay: 115s;
  background-image: url('../Main/0124.jpg');
}
#iBox1 img{
    animation: iBoxAnimation 120s;
    animation-iteration-count: 1;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    color: transparent;
    position: absolute;
    backface-visibility: hidden;
    opacity: 0;
    top: 215px;
    left: 93px;
}
@keyframes iBox2Animation {
  0% {
    opacity: 0;
  }
  1.67% {
    opacity: 1;
    animation-timing-function: ease-in;
  }
  8.33% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

#iBox2 > img:nth-child(1) {
  background-image: url('../Main/0117.jpg');
}
#iBox2 > img:nth-child(2) {
  animation-delay: 6.3s;
  background-image: url('../Main/0118.jpg');
}
#iBox2 > img:nth-child(3) {
  animation-delay: 11.3s;
  background-image: url('../Main/0119.jpg');
}
#iBox2 > img:nth-child(4) {
  animation-delay: 16.3s;
  background-image: url('../Main/0120.jpg');
}
#iBox2 > img:nth-child(5) {
  animation-delay: 21.3s;
  background-image: url('../Main/0121.jpg');
}
#iBox2 > img:nth-child(6) {
  animation-delay: 26.3s;
  background-image: url('../Main/0122.jpg');
}
#iBox2 > img:nth-child(7) {
  animation-delay: 31.3s;
  background-image: url('../Main/0123.jpg');
}
#iBox2 > img:nth-child(8) {
  animation-delay: 36.3s;
  background-image: url('../Main/0124.jpg');
}
#iBox2 > img:nth-child(9) {
  animation-delay: 41.3s;
  background-image: url('../Main/0101.jpg');
}
#iBox2 > img:nth-child(10) {
  animation-delay: 46.3s;
  background-image: url('../Main/0102.jpg');
}
#iBox2 > img:nth-child(11) {
  animation-delay: 51.3s;
  background-image: url('../Main/0103.jpg');
}
#iBox2 > img:nth-child(12) {
  animation-delay: 56.3s;
  background-image: url('../Main/0104.jpg');
}
#iBox2 > img:nth-child(13) {
  background-image: url('../Main/0105.jpg');
  animation-delay: 61.3s;
}
#iBox2 > img:nth-child(14) {
  animation-delay: 66.3s;
  background-image: url('../Main/0106.jpg');
}
#iBox2 > img:nth-child(15) {
  animation-delay: 71.3s;
  background-image: url('../Main/0107.jpg');
}
#iBox2 > img:nth-child(16) {
  animation-delay: 76.3s;
  background-image: url('../Main/0108.jpg');
}
#iBox2 > img:nth-child(17) {
  animation-delay: 81.3s;
  background-image: url('../Main/0109.jpg');
}
#iBox2 > img:nth-child(18) {
  animation-delay: 86.3s;
  background-image: url('../Main/0110.jpg');
}
#iBox2 > img:nth-child(19) {
  animation-delay: 91.3s;
  background-image: url('../Main/0111.jpg');
}
#iBox2 > img:nth-child(20) {
  animation-delay: 96.3s;
  background-image: url('../Main/0112.jpg');
}
#iBox2 > img:nth-child(21) {
  animation-delay: 101.3s;
  background-image: url('../Main/0113.jpg');
}
#iBox2 > img:nth-child(22) {
  animation-delay: 106.3s;
  background-image: url('../Main/0114.jpg');
}
#iBox2 > img:nth-child(23) {
  animation-delay: 111.3s;
  background-image: url('../Main/0115.jpg');
}
#iBox2 > img:nth-child(24) {
  animation-delay: 116.3s;
  background-image: url('../Main/0116.jpg');
}
#iBox2 img{
    animation: iBox2Animation 120s;
    animation-iteration-count: 1;
    animation-delay: 1.3s;
    animation-fill-mode: forwards;
    color: transparent;
    position: absolute;
    backface-visibility: hidden;
    opacity: 0;
    top: 132px;
    left: 167px;
}

@keyframes iBox3Animation {
  0% {
    opacity: 0;
  }
  1.67% {
    opacity: 1;
    animation-timing-function: ease-in;
  }
  8.33% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#iBox3 > img:nth-child(1) {
  background-image: url('../Main/0109.jpg');
}
#iBox3 > img:nth-child(2) {
  animation-delay: 6.6s;
  background-image: url('../Main/0110.jpg');
}
#iBox3 > img:nth-child(3) {
  animation-delay: 11.6s;
  background-image: url('../Main/0111.jpg');
}
#iBox3 > img:nth-child(4) {
  animation-delay: 16.6s;
  background-image: url('../Main/0112.jpg');
}
#iBox3 > img:nth-child(5) {
  animation-delay: 21.6s;
  background-image: url('../Main/0113.jpg');
}
#iBox3 > img:nth-child(6) {
  animation-delay: 26.6s;
  background-image: url('../Main/0114.jpg');
}
#iBox3 > img:nth-child(7) {
  animation-delay: 31.6s;
  background-image: url('../Main/0115.jpg');
}
#iBox3 > img:nth-child(8) {
  animation-delay: 36.6s;
  background-image: url('../Main/0116.jpg');
}
#iBox3 > img:nth-child(9) {
  animation-delay: 41.6s;
  background-image: url('../Main/0117.jpg');
}
#iBox3 > img:nth-child(10) {
  animation-delay: 46.6s;
  background-image: url('../Main/0118.jpg');
}
#iBox3 > img:nth-child(11) {
  animation-delay: 51.6s;
  background-image: url('../Main/0119.jpg');
}
#iBox3 > img:nth-child(12) {
  animation-delay: 56.6s;
  background-image: url('../Main/0120.jpg');
}
#iBox3 > img:nth-child(13) {
  animation-delay: 61.6s;
  background-image: url('../Main/0121.jpg');
}
#iBox3 > img:nth-child(14) {
  animation-delay: 66.6s;
  background-image: url('../Main/0122.jpg');
}
#iBox3 > img:nth-child(15) {
  animation-delay: 71.6s;
  background-image: url('../Main/0123.jpg');
}
#iBox3 > img:nth-child(16) {
  animation-delay: 76.6s;
  background-image: url('../Main/0124.jpg');
}
#iBox3 > img:nth-child(17) {
  animation-delay: 81.6s;
  background-image: url('../Main/0101.jpg');
}
#iBox3 > img:nth-child(18) {
  animation-delay: 86.6s;
  background-image: url('../Main/0102.jpg');
}
#iBox3 > img:nth-child(19) {
  animation-delay: 91.6s;
  background-image: url('../Main/0103.jpg');
}
#iBox3 > img:nth-child(20) {
  animation-delay: 96.6s;
  background-image: url('../Main/0104.jpg');
}
#iBox3 > img:nth-child(21) {
  animation-delay: 101.6s;
  background-image: url('../Main/0105.jpg');
}
#iBox3 > img:nth-child(22) {
  animation-delay: 106.6s;
  background-image: url('../Main/0106.jpg');
}
#iBox3 > img:nth-child(23) {
  animation-delay: 111.6s;
  background-image: url('../Main/0107.jpg');
}
#iBox3 > img:nth-child(24) {
  animation-delay: 116.6s;
  background-image: url('../Main/0108.jpg');
}
#iBox3 img{
    animation: iBox3Animation 120s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 1.6s;
    color: transparent;
    position: absolute;
    backface-visibility: hidden;
    opacity: 0;
    top: 61px;
    left: 53px;
}

/*BOTTOM DETAILS*/

#HFSName {
  position: absolute;
  width: 170px;
  top: 470px;
  left: 822px;
}
@keyframes HFSfade {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  3% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  98% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#HFSName img{
  animation-name: HFSfade;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-duration: 129s;
  animation-delay: 1s;
  opacity: 0;
}
#contact > img:nth-child(1) {
  background-image: url('../main/HFSTele.png');
}
/*#contact > img:nth-child(2) {
  background-image: url('../main/HFSEmail.png');
  animation-delay: 6s;
}
#contact > img:nth-child(3) {
  background-image: url('../main/HFSTele.png');
  animation-delay: 11s;
}
#contact > img:nth-child(4) {
  background-image: url('../main/HFSEmail.png');
  animation-delay: 16s;
}
#contact > img:nth-child(5) {
  background-image: url('../main/HFSTele.png');
  animation-delay: 21s;
}
#contact > img:nth-child(6) {
  background-image: url('../main/HFSEmail.png');
  animation-delay: 26s;
}
#contact > img:nth-child(7) {
  background-image: url('../main/HFSTele.png');
  animation-delay: 31s;
}
#contact > img:nth-child(8) {
  background-image: url('../main/HFSEmail.png');
  animation-delay: 36s;
}
#contact > img:nth-child(9) {
  background-image: url('../main/HFSTele.png');
  animation-delay: 41s;
}
#contact > img:nth-child(10) {
  background-image: url('../main/HFSEmail.png');
  animation-delay: 46s;
}
#contact > img:nth-child(11) {
  background-image: url('../main/HFSTele.png');
  animation-delay: 51s;
}
#contact > img:nth-child(12) {
  background-image: url('../main/HFSEmail.png');
  animation-delay: 56s;
}
#contact > img:nth-child(13) {
  background-image: url('../main/HFSTele.png');
  animation-delay: 61s;
}
#contact > img:nth-child(14) {
  background-image: url('../main/HFSEmail.png');
  animation-delay: 66s;
}
#contact > img:nth-child(15) {
  background-image: url('../main/HFSTele.png');
  animation-delay: 71s;
}
#contact > img:nth-child(16) {
  background-image: url('../main/HFSEmail.png');
  animation-delay: 76s;
}
#contact > img:nth-child(17) {
  background-image: url('../main/HFSTele.png');
  animation-delay: 81s;
}
#contact > img:nth-child(18) {
  background-image: url('../main/HFSEmail.png');
  animation-delay: 86s;
}
#contact > img:nth-child(19) {
  background-image: url('../main/HFSTele.png');
  animation-delay: 91s;
}
#contact > img:nth-child(20) {
  background-image: url('../main/HFSEmail.png');
  animation-delay: 96s;
}
#contact > img:nth-child(21) {
  background-image: url('../main/HFSTele.png');
  animation-delay: 101s;
}
#contact > img:nth-child(22) {
  background-image: url('../main/HFSEmail.png');
  animation-delay: 106s;
}
#contact > img:nth-child(23) {
  background-image: url('../main/HFSTele.png');
  animation-delay: 111s;
}
#contact > img:nth-child(24) {
  background-image: url('../main/HFSEmail.png');
  animation-delay: 116s;
}*/
@keyframes telefade {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  3% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  98% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#contact img {
  animation: telefade 129s;
  animation-iteration-count: 1;
  animation-delay: 1s;
  color: transparent;
  position: absolute;
  top: 488px;
  left: 815px;
  backface-visibility: hidden;
  opacity: 0;
}





/*#tele {
  position: absolute;
  width: 120px;
  top: 490px;
  left: 860px;
}
@keyframes telefade {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  99.8% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#tele img{
  animation-name: telefade;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-duration: 127s;
  animation-delay: 1s;
  opacity: 0;
}*/
#email {
  position: absolute;
  width: 200px;
  top: 507px;
  left: 808px;
}
@keyframes emailfade {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  3% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  98% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#email img{
  animation-name: emailfade;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-duration: 129s;
  animation-delay: 1s;
  opacity: 0;
}
#textL {
  position: absolute;
  width: 642px;
  top: 475px;
  left: 5px;
}
@keyframes textLfade {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  98% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#textL img{
  animation-name: textLfade;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-duration: 124s;
  animation-delay: 1s;
  opacity: 0;
}
/*#iBox1 {

}
#iBox2 {
  z-index: 3;
  position: absolute;
  width: 200px;

}
#iBox3 {
  z-index: 4;
  position: absolute;
  width: 200px;
  top: 61px;
  left: 53px;
}*/
/*REFERENCE
.crossfade > figure {
  animation: imageAnimation 72s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 360px;
  opacity: 0;
  position: absolute;
  top: 85px;
  left: 12.57%;
  width: 74.87%;
  z-index: 0;
}*/