@charset "UTF-8";
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2019-03-16 11:35:46
 * @version $Id$
 */


.topimg {    
    overflow: hidden;
    width: 100%;
    max-width: 788px;
    margin-top:2em;
}

.topimg img {
    width: 100%;
    max-width: 788px;
    margin-top: -1vw;
}


.gallery .topimg {
    margin-top: -1.5em;
    max-width: 646px;
    height: 12vw;
    width: 99%;
    border-radius: 6px;
    opacity: 1;
    margin-bottom: 3%;
    background: #00e5ff;
}

.gallery .topimg a {
    width: 100%;
    float: none;
    display: inline-block;
    max-width: none;
}

.gallery {
    margin-top: 2em;
}

.gallery span {
    display: inline-block; 
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in;
}

.gallery:hover span {
    max-height: 100px;
    transition: all 0.3s ease-in 1.5s;
    padding-bottom: 3em;    
    padding-top: 1.3em;    
}

.gallery span a {
    float: none;    
    background: none;
    display: inline;
    text-decoration: underline;
    margin: 0;    
    } 

.gallery span a::after, .gallery span a::before { 
        content: ''; 
    }

    .gallery a {
        display: block;
        float: left;
        width: 31%;
        margin-right: 3%;
        margin-bottom: 3%;
        height: auto;
        /*max-width: 200px;*/
        border-radius: 6px;
        /*background: #00e5ff;*/
        position: relative;
        overflow: hidden;
        text-decoration: none;
        padding-bottom: 15%;
        background-size: cover;
        background-repeat: no-repeat;
    }

/*.gallery a.third {
    margin-right: 0;
}
*/
.gallery a img {
    border: none;
    width: 100%;
    height: auto;
    opacity: 0.9;
    border-radius: 6px;
    margin-bottom: -5px;
    filter: saturate(1.2);
}

.gallery a, .gallery a img, .gallery a::before, .gallery a::after, .gallery .topimg  {
    transition: all 0.11s ease-in;
}

.gallery  a:hover, .gallery a:hover img, .gallery a:hover::before, .gallery a:hover:after, .gallery .topimg:hover {
    transition: all 0.22s ease;
}

.gallery > a:hover {
    box-shadow: 3px 6px 13px 1px rgba(245, 227, 203, 0.88);
    transform: skew(-2deg, -2deg) scale(0.965, 0.965);
    /*background: rgb(70, 70, 70);  */
}

.gallery .topimg:hover {
    box-shadow: 3px 5px 13px 1px rgba(0, 49, 49, 0.88);
    transform: skew(-1.6deg, -1deg) scale(0.99, 0.96);
    background: rgb(70, 70, 70); 
}

.gallery .topimg:hover a {
    background: rgb(70, 70, 70); 
}

.gallery a:hover img {
    opacity: 1;
    filter: saturate(1);    
}

.gallery a::before {
    content: '';
    position: absolute;
    transform: translate(-30%,-30%);
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: none;
}

.gallery > a:hover::before  {
    background: linear-gradient(155deg, rgba(191,252,255,0.33) 0%,rgba(212,253,255,0.22) 23%,rgba(216,253,255,0) 36%);    
    transform: translate(-1%,-1%);
}

.gallery .topimg:hover a::before  {
    background: linear-gradient(160deg, rgba(191, 237, 255, 0.33) 0%,rgba(212,253,255,0.23) 18%,rgba(216,253,255,0) 36%);    
    transform: translate(-1%,-1%);
}

.gallery a:hover:after  {
    opacity: 0.9;
}

.gallery a::after {
    content: '»';     
    position: absolute;
    top:-0.1em;
    right: 0.3em;
    color: white;
    transform: rotate(-45deg);
    font-size: 144%;
    font-family: 'Times New Roman', Arial, sans-serif;
    opacity: 0.66;
    /*text-shadow: 0 0 6px #000000, 0 0 6px #000000, 0 0 9px #000000, 0 0 9px #000000, 0 0 9px #000000, 0 0 13px #000000, 0 0 13px #000000, 0 0 19px #000000, 0 0 19px #000000;*/
}   


@media(min-width: 1440px){
	.gallery a{
		width: 21%;

	}
}