@charest "utf-8";
/* author Fuba Image == FrameWorkV2 */

@import url("alt-sayfa.css");

section .ust {
    background-image: url(../img/galeri-ust.jpg)
}

section .galeri p {
    font-family: 'Roboto';
    font-weight: 300;
    font-size: 17px;
    color: #022b3f;
    text-align: center;
    margin-bottom: 45px
}

section .galeri .foto {
    position: relative;
    margin-bottom: 40px
}

section .galeri .foto:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    left: -18px;
    top: 20px
}

section .galeri .foto div,
section .galeri .foto iframe {
    height: 490px;
    background-size: cover;
    width: 100%;
    position: relative
}

section .galeri .photos div {
    width: 23.5%;
    height: 196px;
    margin-right: 2%;
    margin-bottom: 25px;
    float: left;
    cursor: pointer;
    position: relative;
    background-size: cover
}

section .galeri .photos div:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    -wekit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

section .galeri .photos div:hover:after {
    opacity: .6;
    -wekit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

section .galeri .photos div:first-of-type {
    width: 49%;
    height: 417px
}

section .galeri .photos div:nth-of-type(3) {
    margin-right: 0
}

section .galeri .photos div:nth-of-type(4n+5) {
    margin-right: 0
}

@media (max-width: 1280px) {}
@media (max-width: 1170px) {}
@media (max-width: 1060px) {}
@media (max-width: 975px) {
    section .galeri .foto div {
        height: 300px
    }
    
    section .galeri .photos div {
        height: 175px
    }
    
    section .galeri .photos div:first-of-type {
        height: 375px
    }
}
@media (max-width: 800px) {
    section .galeri .photos div {
        width: 32%
    }
    
    section .galeri .photos div:first-of-type {
        width: 66%
    }
    
    section .galeri .photos div:nth-of-type(2) {
        margin-right: 0
    }
    
    section .galeri .photos div:nth-of-type(4n+5) {
        margin-right: 2%
    }
    
    section .galeri .photos div:nth-of-type(3n+6) {
        margin-right: 0
    }
}
@media (max-width: 750px) {}
@media (max-width: 700px) {
    section .galeri .foto div {
        height: 200px
    }
}
@media (max-width: 650px) {
    section .galeri .photos div {
        width: 48%;
        height: 150px
    }
    
    section .galeri .photos div:first-of-type {
        width: 100%;
        margin-right: 0;
        height: 250px
    }
    
    section .galeri .photos div:nth-of-type(2),
    section .galeri .photos div:nth-of-type(3n+6) {
        margin-right: 2%
    }
    
    section .galeri .photos div:nth-of-type(2n+1) {
        margin-right: 0
    }
}
    
@media (max-width: 465px) {}