@font-face {
  font-family: "hattonBold";
  src: url("../font/Hatton-Bold-700.otf");
}

.nankar {
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.brothers {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.heading {
  top: 60%;
  left: 48%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.heading h1{
 font-size: 18px;
 color: #fff;
 text-transform: uppercase;
 font-family: "hattonBold"
}

.bar1 {
  width: 2px;
  height: 74px;
  background: #05a2f3;
  display: inline-block;
  transform-origin: bottom center;
  animation: loader 2s linear infinite;
}
.bar2 {
  width: 2px;
  height: 74px;
  background: #05a2f3;
  display: inline-block;
  transform-origin: bottom center;
  animation: loader 2s linear infinite;
  position: relative;
  left: -2px;
}
.bar3 {
  width: 2px;
  height: 74px;
  background: #05a2f3;
  display: inline-block;
  transform-origin: bottom center;
  animation: loader 2s linear infinite;
  position: relative;
  left: -3px;
}

.bar4 {
  width: 2px;
  height: 20px;
  background: #05a2f3;
  display: inline-block;
  transform-origin: bottom center;
  animation: loader 2s linear infinite;
  position: relative;
    top: -54px;
    left: -5px;
}
.bar5 {
  width: 2px;
  height: 20px;
  background: #05a2f3;
  display: inline-block;
  transform-origin: bottom center;
  animation: loader 2s linear infinite;
  position: relative;
top: -47px;
left: -7px;
}
.bar6 {
  width: 2px;
  height: 20px;
  background: #05a2f3;
  display: inline-block;
  transform-origin: bottom center;
  animation: loader 2s linear infinite;
  position: relative;
top: -37px;
left: -8px;
}
.bar7 {
  width: 2px;
  height: 20px;
  background: #05a2f3;
  display: inline-block;
  transform-origin: bottom center;
  animation: loader 2s linear infinite;
  position: relative;
top: -28px;
left: -10px;
}
.bar8 {
  width: 2px;
  height: 20px;
  background: #05a2f3;
  display: inline-block;
  transform-origin: bottom center;
  animation: loader 2s linear infinite;
  position: relative;
top: -18px;
left: -12px;
}
.bar9 {
  width: 2px;
  height: 20px;
  background: #05a2f3;
  display: inline-block;
  transform-origin: bottom center;
  animation: loader 2s linear infinite;
  position: relative;
top: -10px;
left: -13px;
}

.bar10 {
  width: 2px;
  height: 20px;
  background: #05a2f3;
  display: inline-block;
  transform-origin: bottom center;
  animation: loader 2s linear infinite;
  position: relative;
top: 0px;
left: -15px;
}

.bar11 {
  width: 2px;
  height: 74px;
  background: #05a2f3;
  display: inline-block;
  transform-origin: bottom center;
  animation: loader 2s linear infinite;
  position: relative;
  top: 0px;
  left: -17px;
}
.bar12 {
  width: 2px;
  height: 74px;
  background: #05a2f3;
  display: inline-block;
  transform-origin: bottom center;
  animation: loader 2s linear infinite;
  position: relative;
top: 0px;
left: -19px;
}
.bar13 {
  width: 2px;
  height: 74px;
  background: #05a2f3;
  display: inline-block;
  transform-origin: bottom center;
  animation: loader 2s linear infinite;
  position: relative;
  top: 0px;
  left: -20px;
}


.bar1-animation {
  animation-delay: 0.1s;
}
.bar2-animation {
  animation-delay: 0.2s;
}
.bar3-animation {
  animation-delay: 0.3s;
}
.bar4-animation {
  animation-delay: 0.4s;
}




.hbar1 {
  width: 50px;
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: -39px;
left: 0px;
}
.hbar2 {
  width: 55px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: -35px;
left: 0px;
}
.hbar3 {
  width: 60px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: -31px;
left: 0px;
}
.hbar4 {
  width: 63px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: -27px;
left: 0px;
}

.hbar5 {
  width: 15px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: -23px;
left: 0px;
}

.hbar6 {
  width: 24px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: -23px;
left: 41px;
}

.hbar7 {
  width: 15px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: -19px;
left: 0px;
}

.hbar8 {
  width: 21px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: -19px;
left: 44px;
}

.hbar9 {
  width: 15px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: -15px;
left: 0px;
}

.hbar10 {
  width: 21px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: -15px;
left: 45px;
}

.hbar11 {
  width: 15px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: -11px;
left: 0px;
}

.hbar12 {
width: 24px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
position: fixed;
top: -11px;
left: 41px;
}

.hbar13 {
  width: 63px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: -7px;
left: 0px;
}


.hbar14 {
  width: 60px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: -3px;
left: 0px;
}

.hbar15 {
  width: 63px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: 1px;
left: 0px;
}

.hbar16 {
  width: 15px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: 5px;
left: 0px;
}

.hbar17 {
  width: 24px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: 5px;
left: 42px;
}

.hbar18 {
  width: 15px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: 9px;
left: 0px;
}

.hbar19 {
  width: 21px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: 9px;
left: 46px;
}

.hbar20 {
  width: 15px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: 13px;
left: 0px;
}

.hbar21 {
  width: 21px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: 13px;
left: 46px;
}

.hbar22 {
  width: 15px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: 17px;
left: 0px;
}

.hbar23 {
width: 24px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: 17px;
left: 42px;
}


.hbar24 {
  width: 63px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: 21px;
left: 0px;
}

.hbar25 {
  width: 60px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: 25px;
left: 0px;
}


.hbar26 {
  width: 55px;  
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: 29px;
left: 0px;
}


.hbar27 {
  width: 50px;
  height: 2px;
  background: #ff5f23;
  display: inline-block;
  transform-origin: bottom left;
  animation: run 2s linear infinite;
  position: fixed;
top: 33px;
left: 0px;
}


@keyframes loader {
  0% {
    transform: scaleY(0.1);
    background: none;
  }
  50% {
    transform: scaleY(1);
    background: #05a2f3;
  }
  100% {
    transform: scaleY(0.1);
    background: transparent;
  }
}

@-webkit-keyframes run {
  0% {
    transform: scaleX(0);
    background: none;
  }
  50% {
    transform: scaleX(1);
    background: #ff5f23;
  }
  100% {
    transform: scaleX(0.1);
    background: transparent;
  }
}