@import url(https://fonts.googleapis.com/css2?family=Montserrat&display=swap);
*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}

body{font-family:Montserrat,sans-serif;background-color:#000;color:#fff;min-height:100vh;margin:0;transition:background .2s linear}

#loading_indicator{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;border:10px solid grey;border-radius:50%;border-top:10px solid red;width:100px;height:100px;animation:spinIndicator 1s linear infinite}

@keyframes spinIndicator{100%{transform:rotate(360deg)}}

html::-webkit-scrollbar{width:7px;height:.000000001vw}

html::-webkit-scrollbar-track{box-shadow:inset 0 0 6px rgba(99,8,8,.863)}html::-webkit-scrollbar-thumb{background-color:#e90303;border-radius:15px}


body.dark{background-color:#fff;color:#000}


/**
body.dark .lightbox .wrapper{background-color:#2c2424}
**/
.checkbox{opacity:0}
.checkbox-label{background-color:#111;width:50px;height:26px;border-radius:50px;position:relative;padding:5px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}

.fa-moon{color:#f1c40f}
.fa-sun{color:#f39c12}
.checkbox-label .ball{background-color:#fff;width:22px;height:22px;position:absolute;left:2px;top:2px;border-radius:50%;transition:transform .2s linear}

.checkbox:checked+.checkbox-label .ball{transform:translateX(24px)}

h1{text-align:center;margin-top:50px}

.socialwrapper{display:flex;flex-direction:row;align-items:center;justify-content:center}

.socialwrapper a{text-decoration:none}
.fab{margin:auto}
#pa a{
    margin-right: 45px;
    margin-bottom: 45px;
}
#pa .folo{
    margin-right: 45px;
    margin-bottom: 45px;
}
.social{color:#fff;transition:all .35s;transition-timing-function:cubic-bezier(0.31,-0.105,0.43,1.59)}

.social:hover{text-shadow:0 5px 5px rgba(0,0,0,.3);transition:all ease .5s;-moz-transition:all ease-in .5s;-webkit-transition:all ease-in .5s;-o-transition:all ease-in .5s}

.facebook{color:#4267b2}

.twitter{color:#1da1f2}

.youtube{color:#c4302b}

.instagram{color:transparent;background:radial-gradient(circle at 30% 107%,#fdf497 0,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);background:-webkit-radial-gradient(circle at 30% 107%,#fdf497 0,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);background-clip:text;-webkit-background-clip:text}

.folo{font-weight:400}

.bg-ico{display:flex;background-color:#fff;line-height:90px;margin:0 5px;text-align:center;position:relative;overflow:hidden;border-radius:28%;box-shadow:0 5px 15px -5px rgba(0,0,0,.1);opacity:.99;-webkit-transition:background-color 2s ease-out;-moz-transition:background-color 2s ease-out;-o-transition:background-hxcolor 2s ease-out;transition:background-color 2s ease-out}

.bg-ico:hover{box-shadow:0 5px 5px -5px rgba(0,0,0,.8)}

#facebook:hover{background-color:#4267b2}

#twitter:hover{background-color:#1da1f2}

#youtube:hover{background-color:#c4302b}

#instagram:hover{background:radial-gradient(circle at 30% 107%,#fdf497 0,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);background:-webkit-radial-gradient(circle at 30% 107%,#fdf497 0,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}

.facebook:hover,.instagram:hover,.twitter:hover,.youtube:hover{color:#fff;transform:scale(1.3)}

.wrapper{margin:100px auto;max-width:1100px;overflow-x:scroll}

.wrapper nav{display:flex;justify-content:center}
.wrapper .items{display:flex;max-width:720px;width:100%;justify-content:space-between}

#style-7::-webkit-scrollbar{width:.1em;height:5px}

#style-7::-webkit-scrollbar-track{box-shadow:inset 0 0 6px rgba(99,8,8,.863)}#style-7::-webkit-scrollbar-thumb{background-color:#e90303;border-radius:15px}
.items span{padding:7px 25px;font-size:18px;font-weight:500;cursor:pointer;color:#fff;border-radius:50px;border:2px solid #dc143c;transition:all .3s ease}.items span.active,.items span:hover{color:#000;background:red}

body.dark .items span{color:#000}

body.dark .items span:hover{color:#fff;}


.gallery{display:flex;flex-direction:column;align-items:center;}

.gallery .images{gap:15px;max-width:85%;margin:40px 0;columns:5 110px;list-style:none;}

.gallery .images .img{display:flex;cursor:pointer;overflow:hidden;position:relative;margin-bottom:14px;border-radius:4px;}

.gallery .images img{width:100%;transition:transform .2s ease;}

.gallery .images .img:hover img{transform:scale(1.1)}

.zz{display: block;

    
   
    height:18px ;
    

}



.images .img.hide{display:none}

.images .img.show{animation:animate .4s ease}



.popup{
    background-color: #ffffff;
    width: 450px;
    padding: 30px 40px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    border-radius: 8px;
    font-family: "Poppins",sans-serif;
    display: none;
    text-align: center;
}
.popup button{
    display: block;
    margin:  0 0 20px auto;
    background-color: transparent;
    font-size: 30px;
    color: #c5c5c5;
    border: none;
    outline: none;
    cursor: pointer;
}





.my_bttn{
    height: 45px;
    width: 45px;
    background-color: #F90F60;
    border: none;
    color: white;
    position: fixed;
    bottom: 30px;
    right: 30px;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    display: none;
    
}.my_bttn:hover{
    transform: scale(1.05) 
               translateY(-5px);
}

.is-hidden { display: none; }

/**
.lightbox{left:0;top:0;width:100%;height:100%;z-index:5;position:fixed;visibility:hidden;background:rgba(0,0,0,.65)}.lightbox.show{visibility:visible}

.lightbox button{
    padding:4px;position:absolute;right:5px;bottom: 5px;font-weight:bolder;box-shadow:inset 0 0 100px rgb(151, 224, 202);text-decoration: none;border: none;cursor: pointer;background-color:black;font-size: medium;
}

.lightbox .wrapper{position:fixed;left:50%;top:30%;width:100%;padding:20px;max-width:850px;background:#fff;border-radius:6px;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.9);transition:transform .1s ease}

.lightbox.show .wrapper{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}

.wrapper :where(header,.details){display:flex;align-items:center}

.wrapper header{justify-content:space-between}
header .details i{font-size:1.7rem}

header .details span{font-size:1.2rem;margin-left:10px}

header .buttons i{height:40px;width:40px;cursor:pointer;display:inline-block;color:#fff;margin-left:10px;background:#6c757d;font-size:1.25rem;line-height:40px;text-align:center;border-radius:4px;transition:.2s ease}

header .buttons i:hover{background:#5f666d}

.wrapper .preview-img{display:flex;justify-content:center;margin-top:25px}

.preview-img .img{max-height:60vh}

.preview-img img{width:100%;height:100%;object-fit:contain}

.preview-img .dld a{background-color:black;padding:4px;position:absolute;right:5px;color:#dc143c;text-decoration:none;font-weight:bolder;box-shadow:inset 0 0 100px rgba(219,0,91,.3)}

@media screen and (max-width:688px){.lightbox .wrapper{padding:12px;max-width:calc(100% - 26px)}.wrapper .preview-img{margin-top:15px}.gallery .images{max-width:100%;padding:0 13px;margin-top:20px;columns:5 110px}}
**/
@media screen and (max-width:500px){.gallery .images{max-width:100%;padding:0 13px;margin-top:20px;columns:5 110px}}

@media screen and (max-width:340px){.gallery .images{max-width:100%;padding:0 13px;margin-top:20px;columns:4 0px}}