@font-face {
  font-family: 'gotham_boldregular';
  src: url('../fonts/gotham-bold-webfont.woff2') format('woff2'),
       url('../fonts/gotham-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
    font-family: 'gotham_bookregular';
    src: url('../fonts/gotham-book-webfont.woff2') format('woff2'),
         url('../fonts/gotham-book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body{background: #000;margin: 0px;}

.animatedLogo{
      position: absolute;
    z-index: 100;
    text-align: center;
    width: 100%;
    background: #000;
    height: 100%;
    display: none;
}
.centerAnimation{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.whiteSquare{width: 150px; height: 150px; background: #fff;position: relative;overflow: hidden;margin: auto auto 0px auto;}

.whiteSquare .columLetter{background: #000; position: absolute; width: 35px; height: 0px;left: 35px;}

.whiteSquare .columLetter.showColumn{height: 150px;transition: height 0.5s linear;-webkit-transition:height 0.5s linear;    z-index: 1;}

.whiteSquare .circle{height: 30px;border: 35px #000 solid;border-left: transparent;border-radius: 100px;}
.logo, .logo.show{text-align: center;position: relative;width: 650px;margin: 0 auto;}
.logo:before{content:"";position: absolute;width: 50%; height: 100%;top: 0;left: 0;background: #000;z-index: 2;}
.logo:after{content:"";position: absolute;width: 50%; height: 100%;top: 0;right: 0;background: #000;z-index: 2;}

.logo.show:before{width: 0%;transition: width 0.8s linear;-webkit-transition:width 0.8s linear;}
.logo.show:after{width: 0%;transition: width 0.8s linear;-webkit-transition:width 0.8s linear;}
.logo h1{font-family: 'gotham_boldregular';color: rgba(255, 255, 255, 0.6);   margin: 0;font-size: 40px;}
.logo h4{color: rgba(255, 255, 255, 0.6);font-family: 'gotham_bookregular';font-weight: normal;    margin: 0;font-size: 22px;opacity: 0;}

.animatedLogo .left{width: 70px; background: #fff;position: absolute;height: 100%;}
.animatedLogo .top{width: 100%;height: 45px;background: #fff;position: absolute;}
.line{width: 0px;height: 15px;left: 50px;position: absolute;background: #000;z-index: 5;top: 30px;}
.line.show{width: 35px; left: 0px; transition: all 0.5s linear;-webkit-transition:all 0.5s linear;}

.triangle{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 105px 145px 0 0;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 45px;
  left: 70px;
  transition: transform 1s linear;
  transform-origin: top left;
  transform-style: preserve-3D;
  transform: rotate(0deg);
}

.triangle.rotate{transform: rotate(-180deg);}


.shine {
  background: #000 -webkit-gradient(linear, left top, right top, from(#000), to(#000), color-stop(0.1, #fff)) 0 0 no-repeat;
  background-size: 120px;
  -webkit-background-size: 120px;
  background-clip: text;
  -webkit-background-clip: text;
  animation-name: shine;
  -webkit-animation-name: shine;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  text-shadow: 0 0px 0px rgba(255, 255, 255, 0.5);
}

@media(max-width: 767px){

  .whiteSquare{width: 110px;height: 110px;}
  .animatedLogo .left{width: 50px;}
  .line{top: 25px;}
  .line.show{width: 25px;}
  .whiteSquare .columLetter.showColumn{height: 110px;}
  .whiteSquare .columLetter{left: 25px;width: 25px;}
  .whiteSquare .circle{height: 25px;    border: 25px #000 solid;}
  .triangle{left: 50px;}



  .logo, .logo.show{width: auto;}

  .logo h1{font-size: 40px;line-height: 40px;margin-bottom: 10px;margin-top: 10px;}
  .logo h4{font-size: 30px;line-height: 30px;}
}

@media(max-width: 480px){

  .logo h1{font-size: 28px;line-height: 30px;margin-bottom: 0px;margin-top: 10px;}
  .logo h4{font-size: 20px;line-height: 30px;}
}



/*************************************
            ANIMATION
*************************************/
@keyframes shine {
  0%, 10% {
    background-position: top left;
    
  }
  100% {
    background-position: top right;
    
  }
}
@-webkit-keyframes shine {
  0%, 10% {
    background-position: top left;
    
  }
  100% {
    background-position: top right;
    
  }
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* fadeIn */

.fadeIn {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  }

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}