body {
    margin: 30px 15px 15px 15px; padding: 0;
    text-align: center;
    font-family: 'Exo', sans-serif; font-size: 1em;
    color: #252d30;
    background-image: linear-gradient( 180deg, #00619f, #46bcef, #00619f );
}


.container { margin: auto; display: block; max-width: 100%; }

h1 { font-size: 4em; color: #FFFFFF; text-shadow: 2px 2px #000000; }
#goman { color: #ffb80c; }

#center { margin: auto; width: auto; text-align:center; }

.box { width: 20%; display: inline-block; margin: 0 25px; position: relative; }

.box img { border: 0; opacity: 1; height: auto; max-width: 100%; }
.box img:hover { opacity: 1; }

.image { display: block; width: 100%; height: auto; }

.overlay {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  height: 100%; width: 100%;
  opacity: 0; transition: .5s ease;
  background-color: #000000; 
}

.box:hover .overlay { opacity: 0.75; }

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}


#gomanga { }
#sevenseas { }
#shinobi7 { }
#wavesofcolor { }

#footer { clear: both; color: #FFFFFF; text-align: center; margin: 25px auto 15px auto; }



@media (max-width:800px) {
.container { margin: auto; display: block; max-width: 95%; }
h1 { font-size: 2em; }
.box { width: 40%; display: inline-block; margin: 0 auto; position: relative; }
.text { display: none; }
.overlay { display: none; }
}