ul.carouselPlaceholder{
    margin:0;
    padding:0;
    list-style: none;

}
ul.carouselPlaceholder {
    position:absolute;
}
ul.carouselPlaceholder > li{
    display:none;
    
    /* height:100vh; */
    position: relative;
    left:0;
    right:0;
    top:0;
}

ul.carouselPlaceholder > li img, ul.carouselPlaceholder > li video{

    object-fit: cover;
    position: relative;

    z-index:0;

    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    right: 0;
    bottom: 0;

    left: 50%;
    transform: translate(-50%,0);
    /* display: block; */
    /* height: 100%; */
    
}


.carouselVideo video{
    object-fit: cover;
    position: absolute;
    z-index:-2;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    right: 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0);

}

.with-gradient {

    position:absolute;
    /* left:0;
    top:0; */

    z-index: -1;
    width:100%; height:100%;


    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(35, 35, 35,0.70) 25%, rgba(35, 35, 35,0.98) 80%, rgba(35, 35, 35, 1) 85%);

  }


ul.carouselPlaceholder > li:first-child {
    display: block;
}
[data-carousel-content] > li {
    display: none;
}
[data-carousel-content] > li.current {
    display: block;
}


ul.carouselContent{
    margin:0;
    padding:0;
    list-style: none;

    min-height: 30px;
    position: relative;
}

ul.carouselContent > li{
    display: none;
    left:0;
    right:0;
    text-align: center;
}

ul.carouselContent > li.current {
    display: block;
    position: relative;
}

ul.carouselContent > li img, ul.carouselContent > li video {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
    max-width: 320px;
    border-radius: 10px;
    box-shadow: 0 0 40px 15px rgba(255, 255, 255, 0.4);
    position: relative;
    z-index: 1;
}


/* Import button overlay */
.carouselImportBtn {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    background: rgba(255, 224, 50, 0.9);
    color: #000;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: 0.2s ease all;
    z-index: 10;
    pointer-events: none;
}



ul.carouselContent:hover + .carouselImportBtn,
.carouselImportBtn:hover {
    opacity: 1;
    pointer-events: auto;
}

.carouselImportBtn:hover {
    background: rgba(255, 224, 50, 1);
    transform: translate(-50%, -50%) scale(1.05);
}

ul.carouselContent > li p {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 14px;
    text-align: center;
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 6px;
    font-size: 12px;
    opacity: 0;
    transition: 0.2s ease all;
    pointer-events: none;
    z-index: 5;
}

ul.carouselContent > li:hover p {
    opacity: 1;
    pointer-events: auto;
}
/* :first-child */




ul.carouselDots{
    padding:0;
    list-style: none;
    width:50%;

    margin:0 auto;
}

ul.carouselDots li{
    display: inline-block;
    width: 12px;
    height: 5px;
    padding:3px;
    margin:3px;

    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    transition:0.3s ease all;
}

ul.carouselDots li.current,
ul.carouselDots li:hover{
    cursor:pointer;
    background-color: rgba(255, 224, 50, 0.8);
}


.carouselButtons{
    
    z-index:2;
    display:block;
    width:35px;
    height: 35px;
    top:40%;
    position:absolute;
    /* margin:20px; */
    transition:0.3s ease all;
    opacity:0.4;
    margin-top:30px;
    margin-left:15px;
    margin-right: 15px;
    
}

h3.carouselHeader{
    text-align: center;
    font-size:16px;
    font-weight: 600;
}

.carouselButtons:hover{
    cursor:pointer;
}

.carouselButtons.l {
    background: url('../img/icons/slider/swipe_left.svg') no-repeat;
    background-size: contain;
    /* float:left; */
    left:30px;
}
.carouselButtons.l:hover{
    transform: translateX(5px);
    opacity:1;
}
.carouselButtons.r {
    background: url('../img/icons/slider/swipe_right.svg') no-repeat;
    background-size: contain;
    /* float:right; */
    right:30px;
}
.carouselButtons.r:hover{
    transform: translateX(-5px);
    opacity:1;
}



.itemIcons{
    display:block;
    width:65px;
    height: 65px;
    background-size: contain;
    background-repeat: no-repeat;
    margin:10px auto;
}

.itemIcons.perspective {
    background-image: url('../img/icons/extra/photo-animator/perspective.svg') ;
}
.itemIcons.behance {
    background-image: url('../img/icons/extra/photo-animator/behance.svg') ;
}


.centerCarousel{
    z-index:1;
    margin: auto;
    position: relative;
    /* top: 50%; */
    top:12vh;


    /* left: 50%;
    transform: translate(-50%, -50%) */
}

