﻿
.divPopImage {
    background-color: #fff;
    width: 100% !important;
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100vh;
    overflow: hidden;
    z-index: 10000;
}

.divGalImgIndex {
    color: #2b2726;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: .9em;
}

.divPopImageWrapper {
    /*top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
    /*background-color: #fff;*/
    width: 100%;
    /*max-width: 1280px;*/
    /*position: absolute;*/
    height: 100vh;
    /*background-color: white;*/
}

.divGalSlideImg {
    margin: 15px 15px 15px 15px;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.imgGalImage {
    min-height: 75px;
    /*max-width: 100%;*/
    /*max-height: calc(34vw - 100px);*/
    /*max-height: calc(35vw - 30px);*/
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.divGalCenterText {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28%;
    color: #fff;
}

.divrptcell {
    background-color: #fff !important;
    width: 100% !important;
    overflow: hidden;
    height: 100vh;
    display: table;
}

.divGalImgLeft {
    position: relative;
    background-color: #fff;
    width: 70%;
    float: left;
    overflow: hidden;
    height: 100vh;
}

.divGalContRight {
    background-color: #2b2726;
    width: 30%;
    float: left;
    overflow: hidden;
    height: 100vh;
}

.divGalClosebtn {
    cursor: pointer;
    z-index: 10000;
    position: absolute;
    bottom: 0%;
    left: calc(35% + 30%);
    transform: translateX(-50%);
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    transition: 0.3s;
    opacity: 1;
}

#prevGal {
    cursor: pointer;
    z-index: 10000;
    position: absolute;
    bottom: 0%;
    left: 30%;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    transition: 0.3s;
    opacity: 1;
}

#nextGal {
    cursor: pointer;
    z-index: 10000;
    position: absolute;
    bottom: 0%;
    right: 0%;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    transition: 0.3s;
    opacity: 1;
}

#prevGal:hover {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    transition: 0.3s;
    opacity: 0.7;
}

#nextGal:hover img {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    transition: 0.3s;
    opacity: 0.7;
}

#navGal {
    margin: auto !important;
    display: table;
}

    #navGal div {
        opacity: 1;
    }

        #navGal div:hover {
            opacity: 0.5;
        }

        /*#navGal div:hover, #navGal div:active {
            opacity: 0.5;
        }

        #navGal div.activeSlide {
            opacity: 0.5;
        }*/

    #navGal a:focus {
        outline: none;
    }

/********** Responsive *************/
/*wide width**********************************************/
@media (min-width: 901px) {
}

/*medium width**********************************************/
@media (min-width: 601px) and (max-width: 900px) {

    .divGalSlideImg {
        background-color: #fff;
        margin: 15px 15px 15px 15px;
        max-height: 100vh;
        overflow: hidden;
    }

    #prevGal {
        bottom: 0%;
        left: 30%;
        -webkit-transition-timing-function: ease-out;
        -moz-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        transition: 0.3s;
        opacity: 1;
    }

    #nextGal {
        bottom: 0%;
        right: 0%;
        -webkit-transition-timing-function: ease-out;
        -moz-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        transition: 0.3s;
        opacity: 1;
    }
}

@media (min-width: 401px) and (max-width: 600px) {

    p {
        margin: 0px;
        padding: 0px;
    }

    .divGalImgIndex {
        display: none;
    }

    .divGalDesc {
        display: none;
    }

    .divGalCenterText {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 100%;
        font-size: 90%;
    }

    .divGalClosebtn {
        bottom: 0%;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transition-timing-function: ease-out;
        -moz-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        transition: 0.3s;
        opacity: 1;
    }

    .divPopImageWrapper {
        height: 30vh;
    }

    .divPopImage {
        height: calc(100vh - 50px)
    }

    .divGalSlideImg {
        margin: 0;
        height: 60vh
    }

    .divGalImgLeft {
        background-color: #fff;
        width: 100%;
        float: none;
        height: 70vh;
    }

    .divGalContRight {
        position: relative;
        background-color: #2b2726;
        width: 100%;
        float: none;
        height: 30vh;
    }

    #prevGal {
        bottom: 0%;
        left: 10%;
        -webkit-transition-timing-function: ease-out;
        -moz-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        transition: 0.3s;
        opacity: 1;
    }

    #nextGal {
        bottom: 0%;
        right: 10%;
        -webkit-transition-timing-function: ease-out;
        -moz-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        transition: 0.3s;
        opacity: 1;
    }
}

/* mobile width*******************************************/
@media (max-width: 400px) {

    p {
        margin: 0px;
        padding: 0px;
    }

    .divGalImgIndex {
        display: none;
    }

    .divGalDesc {
        display: none;
    }

    .divPopImageWrapper {
        height: 40vh;
    }

    .divPopImage {
        height: calc(100vh - 50px);
    }

    .divGalSlideImg {
        margin: 0;
        height: 60vh;
    }

    .divGalImgLeft {
        background-color: #fff;
        width: 100%;
        float: none;
        height: 70vh;
    }

    .divGalContRight {
        position: relative;
        background-color: #2b2726;
        width: 100%;
        float: none;
        height: 30vh;
    }

    .divGalCenterText {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 100%;
        font-size: 90%;
    }

    .divGalClosebtn {
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transition-timing-function: ease-out;
        -moz-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        transition: 0.3s;
        opacity: 1;
    }

    #prevGal {
        position: absolute;
        bottom: 0px;
        left: 10%;
        -webkit-transition-timing-function: ease-out;
        -moz-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        transition: 0.3s;
        opacity: 1;
    }

    #nextGal {
        bottom: 0px;
        right: 10%;
        -webkit-transition-timing-function: ease-out;
        -moz-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        transition: 0.3s;
        opacity: 1;
    }
}

/********** End Responsive *************/
