* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

::-moz-selection { color: #fff; background-color:#000; }
::selection { color: #fff; background-color:#000; }


#error-container a:link {color:#fff;text-decoration:none;}
#error-container a:visited {color:#fff;text-decoration:none;}
#error-container a:hover {text-decoration:underline;}

#error-container {
  position: relative;
  height: 100vh;
}

#error-container .error-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(/public/assets/built-in/backgrounds/ServerError.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color:#000;
}

#error-container .error-bg:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(17,17,17,0.5);
}

#error-container .error {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.error {
  max-width:910px;
  width: 100%;
  line-height: 1.4;
  text-align: center;
}

.error .error-code {
  position: relative;
  height: 200px;
}

.error .error-code h1 {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 8em;
  font-weight: 900;
  margin: 0px;
  color: #fff;
font-family: Helvetica;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
  text-transform: uppercase;
  letter-spacing: 10px;
}

.error h2 {
font-family: Helvetica;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
   -webkit-text-stroke: 1px black;
   color: white;
   text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
  margin-top: 20px;
  margin-bottom: 50px;
}

.error a.back-btn, .error a.home-btn {
  color:#ccc;
  font-family: Helvetica;
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  background-color: transparent;
  border: 2px solid transparent;
  text-transform: uppercase;
  padding: 13px 25px;
  font-size: 18px;
  border-radius: 40px;
  margin: 7px;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}

.error a.back-btn:hover, .error a.home-btn:hover {
  opacity: 0.9;
}

.error a.back-btn , .error a.home-btn {
  border: 2px groove rgba(255, 255, 255, 0.9);
  color: rgba(255, 255, 255, 0.9);
}



.error a.back-btn:hover , .error a.home-btn:hover{
  color: rgba(170,170,170,0.7);
  background-color: transparent;
  border: 2px groove rgba(68,68,68,0.9);
}


.error-social {
  margin-top: 50px;
  padding:5px;
  border-top: 2px groove rgba(68,68,68,0.7);
}

.error-social>a {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  width: 40px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0px 6px;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}
.error-social>a:hover {
  color:  rgba(68,68,68,0.9) !important;
  background-color: #fff;
  border-radius: 50%;
}

@media only screen and (max-width: 767px) {
  .error .error-404 h1 {
    font-size: 6em;
  }
}

@media only screen and (max-width: 480px) {
  .error .error-code {
    height: 146px;
  }
  .error .error-code h1 {
    font-size: 4em;
  }
  .error h2 {
    font-size: 16px;
  }
  .error a.back-btn, .error a.home-btn {
    font-size: 14px;
  }
}