input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

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

body {
  padding: 0;
  margin: 0;
}

#notfound {
  position: relative;
  height: 100vh;
}

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

.notfound {
  max-width: 767px;
  width: 100%;
  line-height: 1.4;
  text-align: center;
  padding: 15px;
}

.notfound .notfound-404 {
  position: relative;
  height: 220px;
}

.notfound .notfound-404 h1 {
  font-family: 'Kanit', sans-serif;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 186px;
  font-weight: 200;
  margin: 0px;
  background: linear-gradient(130deg, #ffa34f, #ff6f68);
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
  text-transform: uppercase;
}

.notfound h2 {
  font-family: 'Kanit', sans-serif;
  font-size: 33px;
  font-weight: 200;
  text-transform: uppercase;
  margin-top: 0px;
  margin-bottom: 25px;
  letter-spacing: 3px;
}


.notfound p {
  font-family: 'Kanit', sans-serif;
  font-size: 16px;
  font-weight: 200;
  margin-top: 0px;
  margin-bottom: 25px;
}


.notfound a {
  font-family: 'Kanit', sans-serif;
  color: #ff6f68;
  font-weight: 200;
  text-decoration: none;
  border-bottom: 1px dashed #ff6f68;
  border-radius: 2px;
}

.notfound-social>a {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  width: 40px;
  font-size: 14px;
  color: #ff6f68;
  border: 1px solid #efefef;
  border-radius: 50%;
  margin: 3px;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}
.notfound-social>a:hover {
  color: #fff;
  background-color: #ff6f68;
  border-color: #ff6f68;
}


#loginspinner {
  display: none;
}

#regspinner {
  display: none;
}

#regmore {
  display: none;
}

#logout {
  display: none;
}

#signedupicon {
  display: none;
}

#loggedinicon {
  display: none;
}
.material-spinner {
    /* The height and width can be
    whatever you want, so long as
    you adjust the border radius
    to compensate. I added a 
    "max-height" because for some
    reason the spinner was
    "squishing" when I resized the
    screen vertically. "max-height"
    fixed this. */
    height: 50px;
    min-height: 50px;
    width: 50px;
    /* "border-radius" defines how
    much "curve" there is on the
    edge of a square element. If
    you give it enough curve, it
    makes the element appear to be
    circular. */
    border-radius: 100px;
    /* So there's a five pixel
    transparent solid border
    around a 50px square box, which
    has edges curved so much that
    it looks circular... */
    border: 5px transparent solid;
    /* ... with one side, the top
    border, given a color. This
    creates the quarter-circle 
    curve. */
    border-top: 5px #3F51B5 solid;
    /* "animation" specifies an
    animation to use on the element,
    including how long the animation
    should take, how many times it 
    should play, and even whether 
    or not it should ease into the
    different steps of the animation.
    By default the animation eases,
    which is what we want for our
    Google-esque spinner, so we 
    don't need to set that. 
    
    The "material-spinner" part is
    the name of the animation that 
    we want to use. We could've
    called it "funky-bunny" or
    anything else so long as we 
    use the same name when
    specifying the keyframes. */
    animation: material-spinner 4s infinite;
}

@keyframes material-spinner {
    /* "material-spinner" is the name
    of the animation. Each percentage
    represents an individual step
    in the animation. The transform
    rotation needs to increase from
    0 throughout. If you did 
    "rotate(0deg)" then 
    "rotate(180deg)" and then 
    "rotate(0deg)" back again,
    instead of continously spinning
    right, it would spin right,
    then left, then right.*/ 
    0% {
        transform: rotate(0deg);
        border-top: 5px #3F51B5 solid;
    }
    25% {
        transform: rotate(360deg);
        border-top: 5px #F44336 solid;
    }
    50% {
        transform: rotate(720deg);
        border-top: 5px #FFC107 solid;
    }
    75% {
        transform: rotate(1080deg);
        border-top: 5px #4CAF50 solid;
    }
    100% {
        transform: rotate(1440deg);
        border-top: 5px #3F51B5 solid;
    }
}












@media only screen and (max-width: 480px) {
  .notfound .notfound-404 {
    position: relative;
    height: 168px;
  }

  .notfound .notfound-404 h1 {
    font-size: 142px;
  }

  .notfound h2 {
    font-size: 22px;
  }

  #searchbar{
    background: #fff;
    max-width: 90%!important;
    margin-left: 5%!important;
    max-height: 1.5em;
    border-radius: 60px;
  }

  #dsearch {
    font-family: 'Josefin Sans';
    background: transparent;
    border: none;
    font-size: 0.45em;
    padding-left: 20px;
    padding-bottom: 20px;
    width: 85%!important;
  }

  #searchtopimg{
    padding-bottom: 25px!important;
    height: 80px;
  }

  #desktopbannerlogotext{
    display: none;
  }
}