/***
Error Pages
***/

/* 404 page option #1 */

.page-404 {
  text-align: center;
}

.page-404 .number {
  position: relative;
  top: 35px;
  display: inline-block;
  letter-spacing: -10px;
  margin-top: 0px;
  margin-bottom: 10px;
  line-height: 128px;
  font-size: 128px;
  font-weight: 300;
  color: #7bbbd6;
  text-align: right;
}

.page-404 .details {
  margin-left: 40px;
  display: inline-block;
  padding-top: 0px;
  text-align: left;
}

/* 500 page option #1 */
.page-500 {
  text-align: center;
}

.page-500 .number {  
  display: inline-block;
  letter-spacing: -10px;
  line-height: 128px;
  font-size: 128px;
  font-weight: 300;
  color: #ec8c8c;
  text-align: right;
}

.page-500 .details {
  margin-left: 40px;
  display: inline-block;
  text-align: left;
}

/* 404 page option #2*/
.page-404-full-page {
  overflow-x: hidden;
  padding: 20px;
  margin-bottom: 20px;
  background-color: #fafafa !important;
}

.page-404-full-page .details input {
  background-color: #ffffff;
}

.page-404-full-page .page-404 {
  margin-top: 100px;
}

/* 500 page option #2*/
.page-500-full-page {
  overflow-x: hidden;
  padding: 20px;
  background-color: #fafafa !important;
}

.page-500-full-page .details input {
  background-color: #ffffff;
}

.page-500-full-page .page-500 {
  margin-top: 100px;
}

/* 404 page option #3*/

.page-404-3 {
  background: #000 !important ;
} 

.page-404-3 .page-inner img {
  right: 0;
  bottom: 0;
  z-index: -1;
  position: absolute;
}

.page-404-3 .error-404 {
  color: #fff;
  text-align: left;
  padding: 70px 20px 0;
}

.page-404-3 h1 {
  color: #fff;
  font-size: 130px;
  line-height: 160px;
}

.page-404-3 h2 {
  color: #fff;
  font-size: 30px;
  margin-bottom: 30px;
}

.page-404-3 p {
  color: #fff;
  font-size: 16px;
}


@media (max-width: 480px) { 

  .page-404 .number,
  .page-500 .number,
  .page-404 .details,
  .page-500 .details {
    text-align: center;
    margin-left: 0px;
  }

  .page-404-full-page .page-404 {
    margin-top: 30px;
  }

  .page-404-3 .error-404 {
    text-align: left;
    padding-top: 10px;
  }

  .page-404-3 .page-inner img {
    right: 0;
    bottom: 0;
    z-index: -1;
    position: fixed;
  }

}


.glitch {
    color: #7bbbd6;
    /*font-size: 100px;*/
    position: relative;
    /*width: 400px;*/
    margin: 0 auto;
}

@-webkit-keyframes noise-anim {
    0% {
        clip: rect(41px, 9999px, 67px, 0);
    }
    5% {
        clip: rect(47px, 9999px, 49px, 0);
    }
    10% {
        clip: rect(82px, 9999px, 53px, 0);
    }
    15.0% {
        clip: rect(23px, 9999px, 26px, 0);
    }
    20% {
        clip: rect(35px, 9999px, 82px, 0);
    }
    25% {
        clip: rect(64px, 9999px, 93px, 0);
    }
    30.0% {
        clip: rect(85px, 9999px, 79px, 0);
    }
    35% {
        clip: rect(30px, 9999px, 61px, 0);
    }
    40% {
        clip: rect(42px, 9999px, 52px, 0);
    }
    45% {
        clip: rect(33px, 9999px, 81px, 0);
    }
    50% {
        clip: rect(73px, 9999px, 49px, 0);
    }
    55.0% {
        clip: rect(91px, 9999px, 53px, 0);
    }
    60.0% {
        clip: rect(21px, 9999px, 67px, 0);
    }
    65% {
        clip: rect(72px, 9999px, 26px, 0);
    }
    70% {
        clip: rect(8px, 9999px, 90px, 0);
    }
    75% {
        clip: rect(53px, 9999px, 85px, 0);
    }
    80% {
        clip: rect(58px, 9999px, 84px, 0);
    }
    85.0% {
        clip: rect(31px, 9999px, 51px, 0);
    }
    90% {
        clip: rect(57px, 9999px, 75px, 0);
    }
    95% {
        clip: rect(23px, 9999px, 98px, 0);
    }
    100% {
        clip: rect(67px, 9999px, 41px, 0);
    }
}
.glitch:after {
    content: attr(data-text);
    position: absolute;
    left: 1px;
    text-shadow: -1px 0 #2ACC9F;
    top: 0;
    color: #7bbbd6;
    background: #fafafa;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    -webkit-animation: noise-anim 2s infinite linear alternate-reverse;
}

@-webkit-keyframes noise-anim-2 {
    0% {
        clip: rect(65px, 9999px, 79px, 0);
    }
    5% {
        clip: rect(63px, 9999px, 26px, 0);
    }
    10% {
        clip: rect(72px, 9999px, 81px, 0);
    }
    15.0% {
        clip: rect(76px, 9999px, 12px, 0);
    }
    20% {
        clip: rect(95px, 9999px, 91px, 0);
    }
    25% {
        clip: rect(50px, 9999px, 89px, 0);
    }
    30.0% {
        clip: rect(47px, 9999px, 87px, 0);
    }
    35% {
        clip: rect(31px, 9999px, 76px, 0);
    }
    40% {
        clip: rect(82px, 9999px, 13px, 0);
    }
    45% {
        clip: rect(13px, 9999px, 56px, 0);
    }
    50% {
        clip: rect(60px, 9999px, 47px, 0);
    }
    55.0% {
        clip: rect(13px, 9999px, 41px, 0);
    }
    60.0% {
        clip: rect(63px, 9999px, 3px, 0);
    }
    65% {
        clip: rect(26px, 9999px, 86px, 0);
    }
    70% {
        clip: rect(42px, 9999px, 85px, 0);
    }
    75% {
        clip: rect(21px, 9999px, 3px, 0);
    }
    80% {
        clip: rect(40px, 9999px, 58px, 0);
    }
    85.0% {
        clip: rect(1px, 9999px, 56px, 0);
    }
    90% {
        clip: rect(24px, 9999px, 40px, 0);
    }
    95% {
        clip: rect(67px, 9999px, 78px, 0);
    }
    100% {
        clip: rect(41px, 9999px, 92px, 0);
    }
}
.glitch:before {
    content: attr(data-text);
    position: absolute;
    left: -2px;
    text-shadow: 1px 0 #CCEFFD;
    top: 0;
    color: #7bbbd6;
    background: #fafafa;
    overflow: hidden;
    clip: rect(0, 40px, 0, 0);
    -webkit-animation: noise-anim-2 3s infinite linear alternate-reverse;
}

.glitch1 {
    color: black;
    /*font-size: 100px;*/
    position: relative;
    width: 340px;
    margin: 0 auto;
}
.glitch1:before {
    content: attr(data-text);
    position: absolute;
    left: -7px;
    text-shadow: 1px 0 red;
    top: 0;
    color: black;
    background: #fafafa;
    overflow: hidden;
    clip: rect(0, 40px, 0, 0);
    -webkit-animation: noise-anim-2 2s infinite linear alternate-reverse;
}
.glitch1:after {
    content: attr(data-text);
    position: absolute;
    left: 6px;
    text-shadow: -1px 0 blue;
    top: 0;
    color: black;
    background: #fafafa;
    overflow: hidden;
    clip: rect(0, 40px, 0, 0);
    -webkit-animation: noise-anim 3s infinite linear alternate-reverse;
}