/* 
############################################################
#                                                          #
#       #     #     #                                      #
#      # #    #     #                                      #
#      # #    #     #                                      #
#     #   #   #     #                                      #
#     #####   #     #                                      #
#    #     #  #     #                                      #
#    #     #  ####  ####                                   #
#                                                          #
############################################################
*/
main {
    width: 80vw;
    /* float: left; */
    padding: 0px auto;
    margin: 50px auto 0;
    /* background-color: rgba(180,180, 180, .9); */
}
.gallery{
    position: relative;

}
.imgGall {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    border: 3px solid #dbe4ed;
    overflow:hidden;
}
.divGallHedding{
    display: flex;
    width: 100%;
    height: 50px;
    background-color: #dbe4ed;
}
.divGallHedding h2{
    margin: auto 0 auto 15px;
}
/*
#############################################
# #   #  ####   #      ###     #    ###     #
# #   #  #   #  #     ## ##   # #   #  #    #
# #   #  ####   #     #   #   # #   #   #   #
# #   #  #      #     ## ##  #####  #  #    #
#  ###   #      ####   ###   #   #  ###     #
#############################################
*/

.upload_img {
    /* float: left; */
    top: 50px;
    display: none;
    z-index: 10;
    position: fixed;
    height: calc(100vh - 50px);
    width: 100vw;
    background-color: rgba(10, 10, 10, .7);
}
.upload_img form{
    background-color: lightgray;
    display: block;

    margin: 50px auto;
    width: 310px;
}
.exit_gall_button {
    background-color: lightgray;
    position: absolute;
    right: 50px;
    top: 50px;
    width: auto;
    font-size: 50px;
    height: auto;
    user-select: none;
    margin: 20px;
    padding: 1px 10px;
}
/*######################################################
#                                  button for delete img
*/
.delete_gall_img{
    margin: 0;

    user-select: none;
    position: absolute;
    z-index: 11;
    left: 10px;
    top: 10px;
    background-color: red;
    padding: 0 5px;
}
.delete_a {
    position: absolute;
}

.move_gall{
    margin: 0;

    user-select: none;
    position: absolute;
    z-index: 11;
    top: 10px;
    background-color: red;
    padding: 0 5px;
}
.move_left{
    left: 60px;
}
.move_middle{
    left: 90px;
}
.move_right{
    
    left: 120px;
}
/*
#################################################
#  ###     #    #         ####     #    ####    #
# #       # #   #         #   #   # #   #   #   #
# # ###   # #   #         ####    # #   ####    #
# #   #  #####  #         #   #  #####  # #     #
#  ###   #   #  ####      ####   #   #  #  #    #
#################################################
*/
.show_img{
    background-color: rgba(10, 10, 10, .7);
    display: none;
    width: 100vw;
    z-index: 10;
    position: fixed;
}
.img_border{
    position: relative;
    width: 60%;
    margin: 0 auto;
    align-items: center;
}
.img_on_screen, .blured_one{
    z-index: 11;
    display: block;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
}
.blured_one{
    z-index: 10;
}
.divGall {
    float: left;
    display: flex;
}
.img_bar{
    z-index: 50;
    align-items: center;
    height: 50px;
    position: fixed;
    margin: 0 auto;
    left: 50%;
    transform: translate(-50%);
    overflow-x: scroll;
    overflow-y:hidden;
    align-items: baseline;
    white-space: nowrap;
}
.img_bar::-webkit-scrollbar {
    display: none;
}
.img_bar_img {
    max-height: 40px;
    margin: 5px;
    position: static;
    display: inline;
}
.img_bar_img:first-of-type {
    margin-left: 50%;
}
.img_bar_img:last-of-type {
    margin-right: 50%;
}
.bigger_one {
    margin: 0 0 0 0;
    max-height: 50px;
}
/*
########################################################
#  ###     #    #         #   #   ###   #   #  #####   #
# #       # #   #         ## ##  ## ##  #   #  #       #
# # ###   # #   #         # # #  #   #   # #   ###     #
# #   #  #####  #         #   #  ## ##   # #   #       #
#  ###   #   #  ####      #   #   ###     #    #####   #
########################################################
move left and right on showed gallery
*/
.galNext{
    
    transition:.2s;
    position: absolute;
    z-index: 15;
    top: 47%;
    height: 50px;
    width: 50px;
    border-left: solid black 10px;
    border-bottom: solid black 10px;
    opacity: .2;

}
.galDivOut{
    position: absolute;
    height: 100%;
    width: 20%;

    z-index: 22;
}
.galDivOut:hover div{
    transition:.2s;
    opacity: .8;
}
.galLeftDiv{
    left: 0;
}
.galRightDiv{
    right: 0;
}
.galLeft {
    left: 10%;
    rotate: 45deg;
}
.galRight{
    right: 10%;
    rotate: 225deg;
}
.img_border:hover::before,.img_border:hover::after{ 
    position: absolute;
    transition:.2s;
    opacity: .8;
}
.img_border::after,
.img_border::before{
    content: '';
    z-index: 28;
    position: absolute;
    width: 25px;
    height: 25px;
    rotate: 45deg;
    transition:.2s;
    opacity: .2;
}
.img_border::after{
    border-left: solid black 10px;
    border-bottom: solid black 10px;
    top: 15px;
    right: 10px;
}
.img_border::before{
    
    top: 15px;
    
    right: 45px;
    border-top: solid black 10px;
    border-right: solid black 10px;
}
/* 
############################################################
#                                                          #
#   ####     #      ####                                   #
#   #   #          #                                       #
#   #   #    #     #                                       #
#   ####     #     #  ###                                  #
#   #   #    #     #    #                                  #
#   #   #    #     #    #                                  #
#   ####     #      ####                                   #
#                                                          #
############################################################
*/
@media (min-width: 901px){
    .show_img{
        top: 50px;
        height: calc(100vh - 50px);
    }
    .img_border{
        height: calc(100% - 50px);
    }
    .img_on_screen, .blured_one{
        position: absolute;
        height: 100%;
    }
    .blured_one{
        filter: blur(5px);
    }
    .divGall {
        width: min(calc(80vw/5));
        height: min(calc(80vw/5));
    }
    /*###################################################### 
    #                                                img bar 
    */
    .img_bar{
        width: 70%;
        bottom: 0;
    }
}
/* 
############################################################
#                                                          #
#    ####     #     #     #     #     #                    #
#   #         ##   ##    # #    #     #                    #
#   #         # # # #    # #    #     #                    #
#    ####     #  #  #   #   #   #     #                    #
#        #    #     #   #####   #     #                    #
#        #    #     #  #     #  #     #                    #
#    ####     #     #  #     #  ####  ####                 #
#                                                          #
############################################################
*/
@media (max-width: 900px){
    .show_img{
        margin: auto;
        height: 100vh;
    }
    .img_border{
        height: calc(90% - 50px);
    }
    .img_on_screen, .blured_one {

        width: 100vw;
        top: 60%;
        height: auto;
        position: absolute;
        max-height: 100%;
        max-width: 100vw;
    }
    .blured_one{
        filter: blur(2px);
    }
    .divGall {
        width: min(calc(80vw/2));
        height: min(calc(80vw/2));
    }
    /*###################################################### 
    #                                                img bar 
    */
    .img_bar{
        width: 100%;
        bottom: 10%;
    }
}