/**
 * Error Page Styles untuk perkakasku
 *      Menuggunakan metode Mobile First dalam penulisannya.
 *      Jadi urutan style ditulis pada bagian atas untuk device mobile lalu mengurut kebawah untuk device yang lebih besar.
 *      Warna:
 *          (1) Biru: HEX #0077AC; RGB (0, 119, 172)
 *          (2) Orange: HEX #FF9F37; RGB (255, 159, 55)
 *
 * @author Fajar <fajar@perkakasku.co.id>
 *
 */

/* PRE & DEP */

.error-wrapper {
    width: 90%;
    margin: 50px auto;
    padding: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-align: center;
}
.error-wrapper h1 {
    font-family: 'Exo2 Bold';
    font-size: 40px;
    -webkit-animation: color-changer 10s infinite ease-in-out;
    animation: color-changer 10s infinite ease-in-out;
    color: #4CA0C4;
}
.error-wrapper h4 {
  font-size: 25px;
  font-weight: normal;
}
.error-wrapper p {
    font-size: 13px;
}
.link-button {
    display: inline-block;
    width: auto;
    padding: 5px 25px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-align: center;
    border: 1px solid #0077AC;
    background: #FFF;
    outline: 0;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    color: #0077AC;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.link-button:hover {
    border: 1px solid #0077AC;
    background: #0077AC;
    color: #FFF;
}

@-webkit-keyframes color-changer {
  0% { color: #4CA0C4; }
  10% { color: #80A7AC; }
  20% { color: #A7AE9B; }
  30% { color: #CFB488; }
  40% { color: #FEBB73; }
  50% { color: #CFB488; }
  60% { color: #A7AE9B; }
  70% { color: #80A7AC; }
  80% { color: #4CA0C4; }
}

@keyframes color-changer {
  0% { color: #4CA0C4; }
  10% { color: #80A7AC; }
  20% { color: #A7AE9B; }
  30% { color: #CFB488; }
  40% { color: #FEBB73; }
  50% { color: #CFB488; }
  60% { color: #A7AE9B; }
  70% { color: #80A7AC; }
  80% { color: #4CA0C4; }
}