Sindbad~EG File Manager

body{ background-color: transparent; font-family: Manrope, Helvetica, sans-serif; font-weight:600; }
h2{ color:#fff; font-size: 26px; line-height: 26px; padding-left:30px; padding-bottom:50px}
a{ text-decoration: none; font-size: 15px}

.card{ background-color:transparent; border:none;}
.card:hover{ opacity:0.7}
.card-img{ display:flex; justify-content:center}
.carousel-caption{ position: initial; padding-top: 0.50rem; padding-bottom: 0; max-width:200px; width:100%; margin:auto}
.carousel-caption a{ color:#fff}
.carousel-control-prev{justify-content:left; width:initial; margin-bottom: 32px; height: 150px}
.carousel-control-next{justify-content:right; width:initial; margin-bottom: 32px; height: 150px}

.col-12{ max-width: 100%;}


@media only screen and (min-width: 897px) and (max-width: 1115px/*1199px*/){
    /* Show 5th slide on lg if col-lg-3*/
    .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item{ position: absolute; top: 0; right: -25%; z-index: -1; display: block; visibility: visible;}
}
@media only screen and (min-width: 645px) and (max-width: 896px){
    /* Show 4th slide on md if col-md-4*/
    .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item{ position: absolute; top: 0; right: -33.3333%; z-index: -1; display: block; visibility: visible;}
}
@media only screen and (min-width: 480px) and (max-width: 644px){
    /* Show 3rd slide on sm if col-sm-6*/
    .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item{ position: absolute; top: 0; right: -50%; z-index: -1; display: block; visibility: visible;}
}
@media only screen and (min-width: 480px){
    .carousel-item{ margin-right: 0;}
    
    /* show 2 items */
    .carousel-inner .active + .carousel-item{ display: block;}
    .carousel-inner .carousel-item.active:not(.carousel-item-end):not(.carousel-item-start),
    .carousel-inner .carousel-item.active:not(.carousel-item-end):not(.carousel-item-start) + .carousel-item{ transition: none;}
    .carousel-inner .carousel-item-next{ position: relative; transform: translate3d(0, 0, 0);}
    
    /* left or forward direction */
    .active.carousel-item-start + .carousel-item-next.carousel-item-start,
    .carousel-item-next.carousel-item-start + .carousel-item,
    .carousel-item-next.carousel-item-start + .carousel-item + .carousel-item{ position: relative; transform: translate3d(-100%, 0, 0); visibility: visible;}
    
    /* farthest right hidden item must be also positioned for animations */
    .carousel-inner .carousel-item-prev.carousel-item-end{ position: absolute; top: 0; left: 0; z-index: -1; display: block; visibility: visible;}
    
    /* right or prev direction */
    .active.carousel-item-end + .carousel-item-prev.carousel-item-end,
    .carousel-item-prev.carousel-item-end + .carousel-item,
    .carousel-item-prev.carousel-item-end + .carousel-item + .carousel-item{ position: relative; transform: translate3d(100%, 0, 0); visibility: visible; display: block;}
    
    .col-sm-6{max-width: 50%;}
}
/* MD */
@media only screen and (min-width: 645px){
    /* show 3rd of 3 item slide */
    .carousel-inner .active + .carousel-item + .carousel-item { display: block;}
    .carousel-inner .carousel-item.active:not(.carousel-item-end):not(.carousel-item-start) + .carousel-item + .carousel-item{ transition: none;}
    .carousel-inner .carousel-item-next{ position: relative; transform: translate3d(0, 0, 0); }
    
    /* left or forward direction */
    .carousel-item-next.carousel-item-start + .carousel-item + .carousel-item + .carousel-item{ position: relative; transform: translate3d(-100%, 0, 0); visibility: visible;}
    
    /* right or prev direction */
    .carousel-item-prev.carousel-item-end + .carousel-item + .carousel-item + .carousel-item{ position: relative; transform: translate3d(100%, 0, 0); visibility: visible; display: block;}
    
    .col-md-4{max-width: 33.333333%;}
}
/* LG */
@media only screen and (min-width: 897px){
    /* show 4th item */
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item{ display: block;}
    .carousel-inner .carousel-item.active:not(.carousel-item-end):not(.carousel-item-start) + .carousel-item + .carousel-item + .carousel-item{ transition: none;}
    .carousel-inner .carousel-item-next{ position: relative; transform: translate3d(0, 0, 0); }
    
    /* left or forward direction */
    .carousel-item-next.carousel-item-start + .carousel-item + .carousel-item + .carousel-item + .carousel-item{ position: relative; transform: translate3d(-100%, 0, 0); visibility: visible; }
    
    /* right or prev direction //t - previous slide direction last item animation fix */
    .carousel-item-prev.carousel-item-end + .carousel-item + .carousel-item + .carousel-item + .carousel-item{ position: relative; transform: translate3d(100%, 0, 0); visibility: visible; display: block;}
    
    .col-lg-3{max-width: 25%;}
}

@media only screen and (min-width: 1116px){
	/* show 5th item */
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item{ display: block;}
    .carousel-inner .carousel-item.active:not(.carousel-item-end):not(.carousel-item-start) + .carousel-item + .carousel-item + .carousel-item + .carousel-item{ transition: none;}
    .carousel-inner .carousel-item-next{ position: relative; transform: translate3d(0, 0, 0); }
    
    /* Show 6th slide on lg if colxl */
    .carousel-inner .active.colxl.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item{ position: absolute; top: 0; right: -20%; z-index: -1; display: block; visibility: visible;}
    
    /* left or forward direction */
    .carousel-item-next.carousel-item-start + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item{ position: relative; transform: translate3d(-100%, 0, 0); visibility: visible; }
    
    /* right or prev direction //t - previous slide direction last item animation fix */
    .carousel-item-prev.carousel-item-end + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item{ position: relative; transform: translate3d(100%, 0, 0); visibility: visible; display: block;}

	.colxl{ max-width: 20%}
}