@import url(../colorVariables.css);




.section-gallery{
    /*min-height: 100vh;*/
}


.gallery-buttons{

    top: 0;
    left: 0;
    height: 55px;
    width: auto;
    z-index: 10;

}

.top-to-down-gallery{
    top: 0;
    animation: 1.5s linear top-to-down-gallery;
    --default-borders: 2px solid var(--site-secondary);
    /*border-bottom: var(--default-borders);*/
    /*border-left: var(--default-borders);*/
    /*border-right: var(--default-borders);*/
}

.gallery-button{
    width: auto !important;
}

.gallery-button a{
    color: var(--site-primary);
    background-color: rgba(185, 171, 135, 0.8);
    transition: 250ms all ;
    /*min-width: 100px;*/

}

.gallery-buttons a:hover{
    color: var(--site-secondary);
    background-color: var(--site-primary);

}

.gallery-container{
    margin-top: 70px;
}


 .image{
    width: 100%
}
.image{
    height: 100%
}

.image{
    object-fit: cover;
}

 .comma-small, .comma-big{
    position: absolute;
}


.image-paginating{
    width: 100%;
    height: 87%;
    transition: 250ms left,250ms opacity;
}


.back-image-right{
    position: absolute;
    width: 40%;
    z-index: -1;
    height: 100%;

}

.back-image-left{
    position: absolute;
    width: 40%;
    /*transform: rotateZ(180deg);*/
    z-index: -1;
    height: 100%;
}

.back-image-left img{
    transform: rotateZ(180deg);
}

 .back-image-left, .back-image-right, .comma-small, .comma-big{
    transform: translate(-50%, -50%);
}

.back-image-right, .back-image-left{
    top: 50%;
}

.back-image-right{
    left:100%;
}
.back-image-left{
    left: 0%;
}

.comma-small{
    top: 15%;
    left: 8%;
    font-size: calc(150px + 1.5vw);
    color: var(--site-secondary);
    z-index: 10;
    animation: 6s comma_small infinite;
}

.comma-big{
    left: 93%;
    bottom: -10%;
    font-size: calc(200px + 4.5vw);
    color: var(--site-secondary);
    opacity: .4;
    z-index: 10;
    animation: 6s comma_big infinite;
}


#button-chevron-left, #button-chevron-right,#right-button-modal,#left-button-modal{
    cursor: pointer;
    width: 50px;
    height: 50px;
    font-size: calc(15px + 1vw);
    background-color: var(--site-primary);
    color: var(--site-secondary);
    transition: 250ms color, 250ms background;
}

#button-chevron-left:hover, #button-chevron-right:hover,#right-button-modal:hover,#left-button-modal:hover{
    background-color: var(--site-secondary);
    color: var(--site-primary);
}

#button-chevron-left:active, #button-chevron-right:active,#right-button-modal:active,#left-button-modal:active{
    background-color: var(--site-primary);
    color: var(--site-secondary);
}


#image-showing-modal{
    position: fixed;
    width: 100%;
    height: 100%;
    background: var(--site-primary-op-1);
    z-index: 100;
    top: 0;
    left: 0;
    display: none;
    opacity: 0;
    transition: 250ms opacity;
}

#image-showing-container{
    top:0;
    left:0;
    width: 100%;
    height: 100%;

}

#image-showing-close{
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
}





.image-container{
    min-width: 400px;
    height: 95%;
    transition: 250ms left, 250ms right ;
    /*background: white;*/
}

.bottom-pagination{
    bottom: 35px;
}

.image-button{
    /*padding: 10px;*/
    overflow: hidden;
    cursor: pointer;
    /*background-color: var(--secondary-first-der);*/
    /*color: var(--site-secondary) !important;*/
    transition: 250ms box-shadow,250ms background-color;
    /*border: 1px solid var(--site-secondary);*/
}

.images-container{
    min-height: 1880px
}

.interior-dimensions{
    width: 600px;
    height: 400px;
}

.gallery-images-container{
    min-height: calc(100vh - 100px);
}
.gallery-dimensions{
    width: auto;
    height: 300px;
}

.image-dimension-horizontal{
    width: 30%;
    height: 350px;
}

.image-dimension-vertical{
    width: 30%;
    height: 800px;
}


.image-button:hover{
    /*box-shadow: var(--site-secondary) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;*/
    /*background-color: var(--secondary-second-der);*/
}

.images-paginating-container{
    min-height: inherit;
}


.image-appearing-animation{
    animation: image_appearing 600ms ease-in;
}




@keyframes top-to-down-gallery {
    0%{
        top: -55px;
    }
    100%{
        top: 0;
    }
}

@media screen  and (min-width: 400px) and (max-width: 680px) {
    .image-dimension-horizontal {
        width: 45% !important;
        height: 250px !important;
    }

    .image-dimension-vertical {
        width: 45% !important;
        height: 450px !important;
    }
}


@media screen  and (min-width: 0) and (max-width: 400px) {
    .image-dimension-horizontal {
        width: 95% !important;
        height: 250px !important;
    }

    .image-dimension-vertical {
        width: 95% !important;
        height: 450px !important;
    }
}

@media screen  and (min-height: 1px) and (max-height: 680px){

    .images-container{
        height: 1000px;
    }

    .gallery-images-container{
        min-height: 100px;
    }


    .images-paginating-container{
        height: 100%;
    }
    .gallery-dimensions{
        width: auto;
        height: 200px;
    }

    .interior-dimensions{
        width: 600px;
        height: 400px;
    }


    .bottom-pagination{
        bottom: 40px !important;
    }
}


@media screen and (min-height: 680px) and (max-height: 950px){
    /*.images-container{*/
    /*    min-height: 900px;*/
    /*}*/
    .gallery-dimensions{
        width: auto;
        height: 200px;
    }

    .interior-dimensions{
        width: 600px;
        height: 400px;
    }

    .bottom-pagination{
        bottom: 40px;
    }
}



@media screen and (max-width: 1140px) and (min-width: 400px){
    .images-paginating-container{
        padding-top: 0!important;
    }
    .images-container{
        min-height: 1400px;
    }

    .gallery-dimensions{
        width: auto;
        height: 300px;
    }

    .interior-dimensions{
        width: 600px;
        height: 400px;
    }

    .bottom-pagination{
        bottom: 50px;
    }
}

@media screen and (min-width: 1250px) and (max-width: 1600px) {
    .images-container{
        min-height: 1880px;
    }
}

@media screen and (min-width: 0px) and (max-width: 1250px) {
    .images-container{
        min-height: 3800px !important;
    }
}

@media screen and (min-width: 0px) and (max-width: 850px) {
    .section{
        height: 1700px;
    }
    .image-paginating .image-container{
        flex-wrap: wrap;
        flex-direction: row !important;
        height: 1700px;
    }

    .image-paginating .image-container button{
        width: 95%;
        /*background: rgba(0, 0, 0, 0.62);*/
    }

}

@media screen and (min-width: 0px) and (max-width: 600px) {
    .gallery-button a{
        width: auto !important;
        font-size: 15px !important;
    }

    .gallery-button{
        width: auto !important;
    }

}

@media screen and (min-width: 0px) and (max-width: 400px) {
    .image-container{
        min-width: 280px;
        height: 75%;
    }
    .section{
        height: 1700px;
    }
    .image-paginating .image-container{
        flex-wrap: wrap;
        flex-direction: row !important;
        height: 1700px;
    }

    .gallery-dimensions{
        width: auto;
        height: 200px;
    }

    .interior-dimensions{
        width: 300px;
        height: 200px;
    }

    .image-paginating .image-container button{
        width: 95%;
        /*background: rgba(0, 0, 0, 0.62);*/
    }

}



@keyframes image_appearing {
    0%{
        opacity: 0;
    }100%{
          opacity: 1;
         }
}

@keyframes comma_small {
    0%{
        top: 15%;
    }50%{
         top:25%;

     }100%{
          top: 15%;
      }
}
@keyframes comma_big {
    0%{
        bottom: -10%;
    }50%{
             bottom: 0;
     }100%{
                   bottom: -10%;
      }
}