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

body {  padding: 0;  margin: 0;}
#notfound {  position: relative;  height: 100vh;    /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left top, right top, from(#002DB2 ), to(#2692FF));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(left, #2692FF, #002DB2 );

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(left, #2692FF, #002DB2 );

  /* IE 10 */
  background: -ms-linear-gradient(left, #2692FF, #002DB2 );

  /* Opera 11.10+ */
  background: -o-linear-gradient(left, #2692FF, #002DB2 );}

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

.notfound { width: 100%;  line-height: 1.4;  text-align: center;}
.notfound .notfound-404 {  position: relative;   margin-bottom: 20px;  z-index: -1;}

.notfound .notfound-404 h1 { display:block;  font-family: 'Roboto', sans-serif;  position: absolute;  left: 50%;  top: 20%;  -webkit-transform: translate(-50% , -50%);      -ms-transform: translate(-50% , -50%);          transform: translate(-50% , -50%);  font-size:60px;
  font-weight: 600;  margin-top:2px;  margin-bottom: 0px;  margin-left: -12px;  color: #FFF; }


.notfound .notfound-404 h2 {display:block;   font-family: 'Roboto', sans-serif;  position: absolute;  left: 50%;  top: 20%;  -webkit-transform: translate(-50% , -50%);      -ms-transform: translate(-50% , -50%);          transform: translate(-50% , -50%);  font-size:30px;
  font-weight: 400;  margin-top: 0px;  margin-bottom: 0px;  margin-left: -12px;  color: #FFF; padding-bottom:150px; }

.notfound a:hover {  color: #8400ff;}

@media only screen and (max-width: 767px) {    .notfound .notfound-404 h2 {        font-size: 24px;    }}

@media only screen and (max-width: 480px) {  .notfound .notfound-404 h1 {      font-size: 30px;  }}