/*****************************
*  CREATING ANIMATIONS
******************************/

@keyframes slide {
    0% {
        width: 0px;
    }
    12% {
        width: 0px;
    }
    16% {
        width: 75px;
    }
    20% {
        width: 150px;
    }
    24% {
        width: 225px;
    }
    28% {
        width: 300px;
    }
    100% {
        width: 300px;
    }
}

@keyframes frameThree {
    0% {
        opacity: 0;
    }
    42% {
        opacity: 0;
    }
    47% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes glitch-anim {
   0% {
    clip: rect(150px, 9999px, 113px, 0);
  }
  2.2566% {
    clip: rect(130px, 9999px, 120px, 0);
  }
  4.166666666666666% {
    clip: rect(36px, 9999px, 125px, 0);
  }
  6.42222% {
    clip: rect(54px, 9999px, 119px, 0);
  }
  8.333333333333332% {
    clip: rect(57px, 9999px, 5px, 0);
  }
  10.599% {
    clip: rect(200px, 0px, 11px, 0);
  }
  12.5% {
    clip: rect(110px, 9999px, 84px, 0);
  }
  14.8234% {
    clip: rect(106px, 9999px, 102px, 0);
  }
  16.666666666666664% {
    clip: rect(142px, 9999px, 57px, 0);
  }
  18.7% {
    clip: rect(20px, 9999px, 131px, 0);
  }
  20.833333333333336% {
    clip: rect(74px, 9999px, 23px, 0);
  }
  22.94% {
    clip: rect(113px, 9999px, 14px, 0);
  }
  25% {
    clip: rect(111px, 9999px, 87px, 0);
  }
  26.25% {
    clip: rect(137px, 9999px, 107px, 0);
  }
  29.166666666666668% {
    clip: rect(92px, 9999px, 76px, 0);
  }
  30% {
    clip: rect(69px, 9999px, 60px, 0);
  }
  33.33333333333333% {
    clip: rect(22px, 9999px, 35px, 0);
  }
  36% {

    clip: rect(124px, 0px, 0px, 0);
   /* clip: rect(144px, 9999px, 17px, 0);*/
    }
  /*37.5% {
    clip: rect(38px, 9999px, 33px, 0);
  }
  39.2222% {
    clip: rect(135px, 9999px, 96px, 0);
  }
  41.66666666666667% {
    clip: rect(124px, 0px, 0px, 0);
  }*/

  100% {
    clip: rect(124px, 0px, 0px, 0);
  }
}
@keyframes glitch-anim {
  0% {
    clip: rect(150px, 9999px, 113px, 0);
  }
  2.2566% {
    clip: rect(130px, 9999px, 120px, 0);
  }
  4.166666666666666% {
    clip: rect(36px, 9999px, 125px, 0);
  }
  6.42222% {
    clip: rect(54px, 9999px, 119px, 0);
  }
  8.333333333333332% {
    clip: rect(57px, 9999px, 5px, 0);
  }
  10.599% {
    clip: rect(200px, 0px, 11px, 0);
  }
  12.5% {
    clip: rect(110px, 9999px, 84px, 0);
  }
  14.8234% {
    clip: rect(106px, 9999px, 102px, 0);
  }
  16.666666666666664% {
    clip: rect(142px, 9999px, 57px, 0);
  }
  18.7% {
    clip: rect(20px, 9999px, 131px, 0);
  }
  20.833333333333336% {
    clip: rect(74px, 9999px, 23px, 0);
  }
  22.94% {
    clip: rect(113px, 9999px, 14px, 0);
  }
  25% {
    clip: rect(111px, 9999px, 87px, 0);
  }
  26.25% {
    clip: rect(137px, 9999px, 107px, 0);
  }
  29.166666666666668% {
    clip: rect(92px, 9999px, 76px, 0);
  }
  30% {
    clip: rect(69px, 9999px, 60px, 0);
  }
  33.33333333333333% {
    clip: rect(22px, 9999px, 35px, 0);
  }
  36% {

    clip: rect(124px, 0px, 0px, 0);
   /* clip: rect(144px, 9999px, 17px, 0);*/
    }
  /*37.5% {
    clip: rect(38px, 9999px, 33px, 0);
  }
  39.2222% {
    clip: rect(135px, 9999px, 96px, 0);
  }
  41.66666666666667% {
    clip: rect(124px, 0px, 0px, 0);
  }*/

  100% {
    clip: rect(124px, 0px, 0px, 0);
  }
}
@-webkit-keyframes glitch-anim-2 {
   6.666666666666667% {
    clip: rect(121px, 9999px, 96px, 0);
  }
  7.999% {
    clip: rect(13px, 9999px, 43px, 0);
  }
  10% {
    clip: rect(6px, 9999px, 54px, 0);
  }
  12% {
    clip: rect(41px, 9999px, 75px, 0);
  }
  13.333333333333334% {
    clip: rect(133px, 9999px, 100px, 0);
  }
  15.2% {
     clip: rect(137px, 9999px, 71px, 0);
  }
  16.666666666666664% {
    clip: rect(10px, 9999px, 133px, 0);
  }
  18.1453% {
     clip: rect(69px, 9999px, 9px, 0);
  }
  20% {
    clip: rect(105px, 9999px, 132px, 0);
  }
  21% {
    clip: rect(106px, 9999px, 18px, 0);
  }
  23.333333333333332% {
    clip: rect(36px, 9999px, 60px, 0);
  }
  24.9876% {
    clip: rect(143px, 9999px, 63px, 0);
  }
  26.666666666666668% {
    clip: rect(80px, 9999px, 149px, 0);
  }
  28% {
    clip: rect(71px, 9999px, 6px, 0);
  }
  30% {
    clip: rect(32px, 9999px, 148px, 0);
  }
  33.33333333333333% {
    clip: rect(106px, 9999px, 139px, 0);
  }
  35.1112% {
    clip: rect(97px, 9999px, 148px, 0);
  }
  36.666666666666664% {
    clip: rect(124px, 0px, 0px, 0);
  }

  
  100% {
    clip: rect(124px, 0px, 0px, 0);
  }
}
@keyframes glitch-anim-2 {
    6.666666666666667% {
    clip: rect(121px, 9999px, 96px, 0);
  }
  7.999% {
    clip: rect(13px, 9999px, 43px, 0);
  }
  10% {
    clip: rect(6px, 9999px, 54px, 0);
  }
  12% {
    clip: rect(41px, 9999px, 75px, 0);
  }
  13.333333333333334% {
    clip: rect(133px, 9999px, 100px, 0);
  }
  15.2% {
     clip: rect(137px, 9999px, 71px, 0);
  }
  16.666666666666664% {
    clip: rect(10px, 9999px, 133px, 0);
  }
  18.1453% {
     clip: rect(69px, 9999px, 9px, 0);
  }
  20% {
    clip: rect(105px, 9999px, 132px, 0);
  }
  21% {
    clip: rect(106px, 9999px, 18px, 0);
  }
  23.333333333333332% {
    clip: rect(36px, 9999px, 60px, 0);
  }
  24.9876% {
    clip: rect(143px, 9999px, 63px, 0);
  }
  26.666666666666668% {
    clip: rect(80px, 9999px, 149px, 0);
  }
  28% {
    clip: rect(31px, 9999px, 6px, 0);
  }
  30% {
    clip: rect(72px, 9999px, 148px, 0);
  }
  33.33333333333333% {
    clip: rect(106px, 9999px, 139px, 0);
  }
  35.1112% {
    clip: rect(97px, 9999px, 148px, 0);
  }
  36.666666666666664% {
    clip: rect(124px, 0px, 0px, 0);
  }

  
  100% {
    clip: rect(124px, 0px, 0px, 0);
  }
}


/*****************************
*  DECLARING FONTS
******************************/
@font-face {
  font-family: 'Bourgeois-Book';
  src: url('fonts/Bourgeois-BookCond.eot');
  src: url('fonts/Bourgeois-BookCond.eot?#iefix') format('embedded-opentype'),
       url('fonts/Bourgeois-BookCond.woff') format('woff'),
       url('fonts/Bourgeois-BookCond.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Bourgeois-Bold';
  src: url('fonts/Bourgeois-BoldCond.eot');
  src: url('fonts/Bourgeois-BoldCond.eot?#iefix') format('embedded-opentype'),
       url('fonts/Bourgeois-BoldCond.woff') format('woff'),
       url('fonts/Bourgeois-BoldCond.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}



/*****************************
*  STRUCTURE AND POSITION
******************************/

a,
a:link,
a:hover {
    text-decoration: none;
    color: #ffffff;
}

/* Set height/width of container */
.general {
    height: 600px;
    width: 300px;
    position: relative;
    overflow: hidden;
    background-color: #265c5e
}

p,
.glitch {
    color: #ffffff;
    text-transform: uppercase;
    font-family: 'Bourgeois-Bold', sans-serif;
    font-size: 38px;
    width: 300px;
    text-align: center;
    margin-top: 35px;
    line-height: 31px;
}

.frame1,
.frame2,
.frame3 {
    overflow: hidden;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 600px;

    background-size: 300px 600px;
    background-position: top left;
    background-image: url(images/frame1.png);
}

.frame2,
.frame3 {
    background-image: url(images/frame2.png);
}

.frame2 .glitch,
.frame3 .glitch {
    /*text-shadow: 0px 0px 10px #fcd403;*/
    text-shadow: 1px 1px 5px rgba(0,0,0,.8);
    color: #f9edad;
}
.frame3 .glitch {
  font-size: 35px;
}
.frame3 {
    opacity: 0;
    /*padding-top: 430px;*/
    text-align: center;
}

.frame3 p {
    font-size: 16px;
    line-height: 22px;
    font-family: 'Bourgeois-Book', sans-serif;
    margin-bottom: 14px;
    text-decoration: none;
    position: relative;
    font-family: frank-new, sans-serif;
    font-weight: 700;
    font-style: normal;
    background: #fcd403;
    display: inline;
    padding: 10px 69px;
    border: 3px solid #5C8FB2;
    color: #1D3B4C;
    top: 343px;
}

.frame3 p:after {
    content: '';
    position: absolute;
    right: 23px;
    top: 28px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid #f3ce29;
}

.frame3 img {
  position: relative;
    top:369px;
    /*margin-left: 29px;*/
    /*max-width: 160px;*/
    /*margin-top: 10px;*/
}


/* GLITCH CONTROLS */

/*.glitch-wrapper {
  width: 300px;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}*/
.glitch {
  color: white;
  text-transform: upercase;
  position: relative;
  display: inline-block;
}
/*.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 77%;
  height: 69px;
  padding: 0 35px;
}*/

/*****************************
*  ASSIGNING ANIMATIONS
******************************/

.frame2 { animation: slide 10s 3 linear normal; animation-fill-mode: forwards;}
.frame3 { animation: frameThree 10s 3 linear normal; animation-fill-mode: forwards;}

/*.glitch::before {
  left: 2px;
  text-shadow: -2px 0 #f0de01;
  clip: rect(124px, 0px, 0px, 0);
  animation: glitch-anim-2 10s 3 linear normal;
}
.glitch::after {
  left: -2px;
  text-shadow: -2px 0 #d2af05;
  clip: rect(185px, 0px, 0px, 0);
  animation: glitch-anim 10s 3 linear normal;
}
*/