* {
   padding: 0;
   margin: 0;
}

html, body {
   height: 100%;
   font-family: Georgia, serif;
}

body {
   margin: 0;
   padding: 0;
   display: flex;
   min-height: 100vh;
   flex-direction: column;
   background-color: #050505;
}

a:link {
    color: #DDDDDD;
}

a:visited {
    color: #DDDDDD;
}

a img {
    border: none;
}

#wrap {
   flex: 1;
}

#overview_main {
   width: 1005px;
   text-align: left;
   color: #DDDDDD;
   margin-left: auto;
   margin-right: auto;
}

#banner {
   width: 100%;
   height: 200px;
   margin-bottom: 15px;
   margin-top: 15px;
   position: relative;
   overflow: hidden;
}

#banner-image {
    display: block;
    position: absolute;
}

#banner-gradient {
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: linear-gradient(295deg, black 40%, transparent 50%);
}

#banner-text {
    position: absolute;
    right: 10px;
    bottom: 0px;
    font-size: 3em;
}

#main {
   width: 1040px;
   text-align: left;
   color: #DDDDDD;
   margin-left: auto;
   margin-right: auto;
}

#left{
   width: 40px;
   float: left;
   margin-left: auto;
   margin-right: auto;
}

#center{
   width: 960px;
   margin-left: auto;
   margin-right: auto;
}

#right{
   width: 40px;
   float: right;
   margin-left: auto;
   margin-right: auto;
}

#box1 {
   width: 960px;
   height: 640px;
   background-color: #252525;
}

#box2 {
   width: 960px;
   height: 174px;
   background-image: linear-gradient(to bottom, #252525, transparent);
   font-size: 0.83em;
   color: #DDDDDD;
   text-align: left;
}

#image {
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   line-height: 640px;
   font-size: 0em;
}

#image img {
   vertical-align: middle;
}

#description_left {
   width: 390px;
   height: 174px;
   float: left;
   padding-left: 15px;
   padding-top: 13px;
}

#description_center {
   width: 300px;
   height: 174px;
   float: left;
   padding-left: 15px;
   padding-top: 13px;
}

#description_right {
   width: 225px;
   height: 174px;
   float: left;
   padding-left: 15px;
   padding-top: 13px;
}

.settings {
   width: 115px;
   float: left;
}

#previous {
   width: 32px;
   height: 50px;
   padding-right: 8px;
   margin-top: 365px;
   float: left;
}

#next {
   width: 32px;
   height: 50px;
   padding-left: 8px;
   margin-top: -477px;
   float: right;
}

#return_link {
   display: block;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   font-size: 0.83em;
   color: #888888;
   clear: both;
}

#return_link a {
   color: #888888;
}

#footer {
   margin-top: 10px;
   margin-bottom: 10px;
   width: 1005px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   font-size: 0.75em;
   color: #888888;
}

#footer a {
   color: #888888;
}

.thumbnail {
   position: relative;
   width: 240px;
   height: 160px;
   margin-right: 15px;
   margin-bottom: 15px;
   float: left;
}

.thumbnail:nth-of-type(4n) {
   margin-right: 0px;
}

.thumbnail .image {
   position: absolute;
   -webkit-transition: opacity ease 3s;
   -moz-transition: opacity ease 3s;
   -o-transition: opacity ease 3s;
   transition: opacity ease 3s;
   z-index: 1;
   opacity: 0;
}

.thumbnail .image.active {
   z-index: 2;
   opacity: 1;
}

.clearfix:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

.thumbnail .category {
   position: absolute;
   z-index: 3;
   width: 240px;
   height: 160px;
   margin-left: 8px;
   margin-top: 5px;
   font-size: 1.6em;
   color: #FFF;
   text-shadow: black 0 0 4px, black 0 0 4px, black 0 0 4px, black 0 0 4px;
}