@media   (min-width: 280px) {

.slider-container {
  position: absolute;
    perspective: 40px;
    transform-style: preserve-3d;
    left: 6px;
    top: 886px;
    z-index: 999;
}
.widthgg{
    width: 248px;
}
.carousel-3d-item {
    position: absolute;
    top: 50%;
    left:20%;
    outline: 1px solid transparent;
}

}

@media  (min-width: 320px) {

.slider-container {
  position: absolute;
  perspective: 147px;
  transform-style: preserve-3d;
  left: 0%;
  top: 910px;
  z-index: 999;
}
.widthgg{
    width: 300px;
}
.carousel-3d-item {
    position: absolute;
    top: 50%;
    left:20%;
    outline: 1px solid transparent;
}

}

@media (min-width: 360px) {

.slider-container {
  position: absolute;
  perspective: 74px;
  transform-style: preserve-3d;
  left: -1%;
  top: 964px;
  z-index: 999;
}
.widthgg{
    width: 343px;
}
.carousel-3d-item {
    position: absolute;
    top: 50%;
    left:20%;
    outline: 1px solid transparent;
}

}

@media (min-width: 375px) {

.slider-container {
    position: absolute;
    perspective: 200px;
    transform-style: preserve-3d;
    left: 0%;
    top: 987px;
    z-index: 999;
}
.widthgg{
    width: 350px;
}
.carousel-3d-item {
    position: absolute;
    top: 50%;
    left:20%;
    outline: 1px solid transparent;
}

}



@media (min-width: 411px) {

.slider-container {
        position: absolute;
    perspective: 300px;
    transform-style: preserve-3d;
    left: -1%;
    top: 1039px;
    z-index: 999;
}
.widthgg{
    width: 388px;
}
.carousel-3d-item {
    position: absolute;
    top: 50%;
    left:20%;
    outline: 1px solid transparent;
}

}

@media (min-width: 414px) {

.slider-container {
    position: absolute;
    perspective: 254px;
    transform-style: preserve-3d;
    left: 1%;
    top: 1044px;
    z-index: 999;
}
.widthgg{
    width: 385px;
}
.carousel-3d-item {
    position: absolute;
    top: 50%;
    left:20%;
    outline: 1px solid transparent;
}

}


@media (min-width: 450px) {

.slider-container {
      position: absolute;
    perspective: 300px;
    transform-style: preserve-3d;
    left: 0%;
    top: 1216px;
    z-index: 999;
}
.widthgg{
    width: 514px;
}
.carousel-3d-item {
    position: absolute;
    top: 50%;
    left:20%;
    outline: 1px solid transparent;
}

}


@media (min-width: 568px) {
    .slider-container {
        position: absolute;
    perspective: 300px;
    transform-style: preserve-3d;
    left: 0%;
    top: 1256px;
    z-index: 999;
}
.widthgg{
    width: 545px;
}
.carousel-3d-item {
    position: absolute;
    top: 50%;
    left:20%;
    outline: 1px solid transparent;
}
}

@media (min-width: 600px) {

.slider-container {
  position: absolute;
    perspective: 300px;
    transform-style: preserve-3d;
    left: 9%;
    top: 1258px;
    z-index: 999;
}
.widthgg{
    width: 500px;
}
.carousel-3d-item {
    position: absolute;
    top: 50%;
    left:20%;
    outline: 1px solid transparent;
}

}

@media (min-width: 667px) {
    .slider-container {
        position: absolute;
    perspective: 300px;
    transform-style: preserve-3d;
    left: 12%;
    top: 1244px;
    z-index: 999;
}
.widthgg{
    width: 529px;
}
.carousel-3d-item {
    position: absolute;
    top: 50%;
    left:20%;
    outline: 1px solid transparent;
}
}

@media (min-width: 736px) {
    .slider-container {
        position: absolute;
    perspective: 300px;
    transform-style: preserve-3d;
    left: 15%;
    top: 1246px;
    z-index: 999;
}
.widthgg{
    width: 505px;
}
.carousel-3d-item {
    position: absolute;
    top: 50%;
    left:20%;
    outline: 1px solid transparent;
}
}

@media (min-width: 768px) {
    .slider-container {
        position: absolute;
    perspective: 300px;
    transform-style: preserve-3d;
    left: 3%;
    top: 1489px;
    z-index: 999;
}
.widthgg{
    width: 705px;
}
.carousel-3d-item {
    position: absolute;
    top: 50%;
    left:20%;
    outline: 1px solid transparent;
}

}

@media (min-width: 823px) {
    .slider-container {
        position: absolute;
    perspective: 300px;
    transform-style: preserve-3d;
    left: 6%;
    top: 1495px;
    z-index: 999;
}
.widthgg{
    width: 695px;
}
.carousel-3d-item {
    position: absolute;
    top: 50%;
    left:20%;
    outline: 1px solid transparent;
}

}

@media (min-width: 960px) {
    .slider-container {
        position: absolute;
    perspective: 300px;
    transform-style: preserve-3d;
    left: 30%;
    top: 466px;
    z-index: 999;
}
.widthgg{
    width: 150px;
}
.carousel-3d-item {
    position: absolute;
    top: 50%;
    left:20%;
    outline: 1px solid transparent;
}
}

@media (min-width: 1024px) {
    .slider-container {
    position: absolute;
    perspective: 1000px;
    transform-style: preserve-3d;
    left: 29%;
    top: 1677px;
    z-index: 999;
}
.widthgg{
    width: 405px;
}
.carousel-3d-item {
    position: absolute;
    top: 50%;
    left:20%;
    outline: 1px solid transparent;
}

}


@media (min-width: 1200px) {
    .slider-container {
        position: absolute;
        perspective: 1841px;
        transform-style: preserve-3d;
        left: 29%;
        top: 1068px;
        z-index: 999;
    }
    .widthgg{
        width: 490px;
    }
    .carousel-3d-item {
        position: absolute;
        top: 50%;
        left:20%;
        outline: 1px solid transparent;
    }

}

@media (min-width: 1366px) {
    .slider-container {
        position: absolute;
        perspective: 1841px;
        transform-style: preserve-3d;
        left: 29%;
        top: 1068px;
        z-index: 999;
    }
    .widthgg{
        width: 490px;
    }
    .carousel-3d-item {
        position: absolute;
        top: 50%;
        left:20%;
        outline: 1px solid transparent;
    }

}

@media (min-width: 1400px) {

    .slider-container {
        position: absolute;
        perspective: 1841px;
        transform-style: preserve-3d;
        left: 33%;
        top: 1211px;
        z-index: 999;
    }
    .widthgg{
        width: 525px;
    }
    .carousel-3d-item {
        position: absolute;
        top: 50%;
        left:20%;
        outline: 1px solid transparent;
    }


}

@media (min-width: 1500px) {

    .slider-container {
        position: absolute;
        perspective: 1841px;
        transform-style: preserve-3d;
        left: 33%;
        top: 1211px;
        z-index: 999;
    }
    .widthgg{
        width: 525px;
    }
    .carousel-3d-item {
        position: absolute;
        top: 50%;
        left:20%;
        outline: 1px solid transparent;
    }


}





#carousel-3d-controller-2 ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-1 ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-2 ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-1 ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-2 ~ .carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-1 ~ .carousel-3d-item:nth-of-type(3),
{
  transition: all 2s cubic-bezier(.48, .16, .15, .98);
}

.carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(1) {
  transform: translateX(-175px) translateZ(-130px);
  opacity: .9;
  transition: all 2s cubic-bezier(.48, .16, .15, .98);
}

.carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(3) {
  transform: translateX(0) translateZ(0);
  opacity: 1;
  transition: all 2s cubic-bezier(.48, .16, .15, .98);
}

.carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(2) {
  transform: translateX(175px) translateZ(-130px);
  opacity: .9;
  transition: all 2s cubic-bezier(.48, .16, .15, .98);
}