/* ----------------------------------------------------------
    :: Template Name: Studio - Creative Photography Template
    :: Author: Colorlib
    :: Author URL: https://colorlib.com
    :: Version: 1.0.0
    :: Created: 31 January 2018
    :: Last Updated: 31 January 2018
    ---------------------------------------------------------- */

    /* ============ PLACE YOUR CUSTOM CSS HERE ============ */

    :root {
        --aports-font: 'DM Sans', sans-serif;
        --aports-reey-font: "reeyregular";
        --aports-gray: #87898e;
        --aports-gray-rgb: 135, 137, 142;
        --aports-white: #ffffff;
        --aports-white-rgb: 255, 255, 255;
        --aports-base: #ceae92;
        --aports-base-rgb: 206, 174, 146;
        --aports-black: #32343b;
        --aports-black-rgb: 50, 52, 59;
        --aports-primary: #f4efeb;
        --aports-primary-rgb: 244, 239, 235;
        --aports-bdr-color: #e2dad3;
        --aports-bdr-color-rgb: 226, 218, 211;

    }
    .gallery-three {
        position: relative;
        display: block;
        padding: 0px 0px 110px;
    }

    .gallery-three .container {
        max-width: 1575px;
    }

    .gallery-three .row {
        --bs-gutter-x: 10px;
    }

    .gallery-three__single {
        position: relative;
        display: block;
        margin-bottom: 10px;
    }

    .gallery-three__img {
        position: relative;
        display: block;
        overflow: hidden;
        z-index: 1;
    }

    .gallery-three__img:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: -2px;
        left: 0;
        right: 0;
        background-color: var(--aports-base);
        opacity: 0;
        visibility: hidden;
        -webkit-transform-origin: top center;
        transform-origin: top center;
        -webkit-transform: scaleY(0) translateZ(100px);
        transform: scaleY(0) translateZ(100px);
        -webkit-transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 700ms ease;
        transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 700ms ease;
        transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease;
        transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease, -webkit-transform 700ms ease;
    }

    .gallery-three__single:hover .gallery-three__img:before {
        opacity: .90;
        visibility: visible;
        -webkit-transform: scaleY(1) translateZ(0px);
        transform: scaleY(1) translateZ(0px);
    }

    .gallery-three__img img {
        width: 100%;
    }

    .gallery-three__icon {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        z-index: 2;
    }

    .gallery-three__icon a {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        color: var(--aports-white);
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0;
        -webkit-transition: all 500ms ease;
        transition: all 500ms ease;
        z-index: 2;
    }


    .gallery-three__single:hover .gallery-three__icon a {
        -webkit-transform: scale(1);
        transform: scale(1);
        transition-delay: 500ms;
        opacity: 1;
    }

    .gallery-three__icon a:hover {
        color: var(--aports-black);
    }