* { background-color:#FFFFFF; color:#000; font-family: 'Abel', sans-serif; }

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

@font-face {
  font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
  src: url(abel.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.pepe {
    text-align:center;
}

#header ul {
    list-style: none;
    display: block;
    text-align: center;
    padding:0px;
}

#header ul li {
    display: inline-block;
    position: relative;
    padding:10px 10px;
    font-size: 12px;
    letter-spacing: 0.2em;
}

#header ul li a {
    text-decoration: none;
}


#banner-desktop {
    display:block;
    width:100%;
    height:315px;
    margin-top:40px;
}

#banner-mobile {
    display:none;
    width:100%;
}


#gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width:100%;
}

#gallery .imgbox {
    overflow:hidden;
    padding:10px;
    text-align:center;
    max-width:22%;
    width:22%;
    flex: 22%;
}

#gallery.homepage .imgbox {
    max-width:15%;
        width:15%;
        flex: 15%;
}

#gallery .imgbox img {
    width: 100% !important;
    height: auto !important;
    transition: transform 5s;
}

#gallery .imgbox img:hover {
    transform: scale(1.25);
}



@media (max-width: 800px) {

    #banner-desktop {display:block; }
    #banner-mobile  {display:none; }

    #gallery .imgbox{
        max-width:30%;
            width:30%;
            flex: 30%;
    }

    #gallery.homepage .imgbox{
        max-width:30%;
            width:30%;
            flex: 30%;
    }
}

@media (max-width: 500px) {

    #banner-desktop {display:block; }
    #banner-mobile  {display:none; }

    #gallery .imgbox{
        max-width:45%;
            width:45%;
            flex: 45%;
    }

    #gallery.homepage .imgbox{
        max-width:45%;
            width:45%;
            flex: 45%;
    }
}

@media (max-width: 400px) {

    #banner-desktop {display:none; }
    #banner-mobile  {display:block; }

    #gallery.homepage .imgbox{
        max-width:90%;
            width:90%;
            flex: 90%;
    }

    #gallery .imgbox{
        max-width:90%;
            width:90%;
            flex: 90%;
    }
}