@charset "utf-8";
/* CSS Document */


main#carousel {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 600px;
  --items: 4;
  --middle: 3;
  --position: 1;
  pointer-events: none;
}

div.item {
  position: absolute;
  width: 200px;
  height: 283px;
  background-color: #FFF;
  --r: calc(var(--position) - var(--offset));
  --abs: max(calc(var(--r) * -1), var(--r));
  transition: all 0.25s linear;
  transform: rotateY(calc(0deg * var(--r)))
    translateX(calc(-300px * var(--r)));
  z-index: calc((var(--position) - var(--abs)));
}

div.item img{ margin-top:6px;}

div.item:nth-of-type(1) {  --offset: 1;}
div.item:nth-of-type(2) {  --offset: 2;}
div.item:nth-of-type(3) {  --offset: 3;}
div.item:nth-of-type(4) {  --offset: 4;}


input:nth-of-type(1) {  grid-column: 2 / 3;  grid-row: 2 / 3;}
input:nth-of-type(1):checked ~ main#carousel {  --position: 2.5;}

input:nth-of-type(2) {  grid-column: 3 / 4;  grid-row: 2 / 3;}
input:nth-of-type(2):checked ~ main#carousel {  --position: 3.5;}

input:nth-of-type(3) {  grid-column: 4 /5;  grid-row: 2 / 3;}
input:nth-of-type(3):checked ~ main#carousel {  --position: 4.5;}

input:nth-of-type(4) {  grid-column: 5 / 6;  grid-row: 2 / 3;}
input:nth-of-type(4):checked ~ main#carousel {  --position: 5.5;}


@media screen and (min-width: 1024px) and (max-width: 1199px) {
input:nth-of-type(1) {  grid-column: 2 / 3;  grid-row: 2 / 3;}
input:nth-of-type(1):checked ~ main#carousel {  --position: 2;}

input:nth-of-type(2) {  grid-column: 3 / 4;  grid-row: 2 / 3;}
input:nth-of-type(2):checked ~ main#carousel {  --position: 3;}

input:nth-of-type(3) {  grid-column: 4 /5;  grid-row: 2 / 3;}
input:nth-of-type(3):checked ~ main#carousel {  --position: 4;}

input:nth-of-type(4) {  grid-column: 5 / 6;  grid-row: 2 / 3;}
input:nth-of-type(4):checked ~ main#carousel {  --position: 5;}

}

@media screen and (min-width: 800px) and (max-width: 1024px) {
input:nth-of-type(1) {  grid-column: 2 / 3;  grid-row: 2 / 3;}
input:nth-of-type(1):checked ~ main#carousel {  --position: 2;}

input:nth-of-type(2) {  grid-column: 3 / 4;  grid-row: 2 / 3;}
input:nth-of-type(2):checked ~ main#carousel {  --position: 3;}

input:nth-of-type(3) {  grid-column: 4 /5;  grid-row: 2 / 3;}
input:nth-of-type(3):checked ~ main#carousel {  --position: 4;}

input:nth-of-type(4) {  grid-column: 5 / 6;  grid-row: 2 / 3;}
input:nth-of-type(4):checked ~ main#carousel {  --position: 5;}

}


@media screen and (min-width: 600px) and (max-width: 799px) {
input:nth-of-type(1) {  grid-column: 2 / 3;  grid-row: 2 / 3;}
input:nth-of-type(1):checked ~ main#carousel {  --position: 1.5;}

input:nth-of-type(2) {  grid-column: 3 / 4;  grid-row: 2 / 3;}
input:nth-of-type(2):checked ~ main#carousel {  --position: 2.5;}

input:nth-of-type(3) {  grid-column: 4 /5;  grid-row: 2 / 3;}
input:nth-of-type(3):checked ~ main#carousel {  --position: 3.5;}

input:nth-of-type(4) {  grid-column: 5 / 6;  grid-row: 2 / 3;}
input:nth-of-type(4):checked ~ main#carousel {  --position: 4.5;}

}


@media screen and (min-width: 480px) and (max-width: 599px) {
main#carousel {
  width: 100%;
  height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 600px;
  --items: 4;
  --middle: 3;
  --position: 1;
  pointer-events: none;
}

input:nth-of-type(1) {  grid-column: 2 / 3;  grid-row: 2 / 3;}
input:nth-of-type(1):checked ~ main#carousel {  --position: 1;}

input:nth-of-type(2) {  grid-column: 3 / 4;  grid-row: 2 / 3;}
input:nth-of-type(2):checked ~ main#carousel {  --position: 2;}

input:nth-of-type(3) {  grid-column: 4 /5;  grid-row: 2 / 3;}
input:nth-of-type(3):checked ~ main#carousel {  --position: 3;}

input:nth-of-type(4) {  grid-column: 5 / 6;  grid-row: 2 / 3;}
input:nth-of-type(4):checked ~ main#carousel {  --position: 4;}

}

@media screen and (min-width: 320px) and (max-width: 479px) {
	
main#carousel {
  width: 100%;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 600px;
  --items: 4;
  --middle: 3;
  --position: 1;
  pointer-events: none;
}

input:nth-of-type(1) {  grid-column: 2 / 3;  grid-row: 2 / 3;}
input:nth-of-type(1):checked ~ main#carousel {  --position: 1;}

input:nth-of-type(2) {  grid-column: 3 / 4;  grid-row: 2 / 3;}
input:nth-of-type(2):checked ~ main#carousel {  --position: 2;}

input:nth-of-type(3) {  grid-column: 4 /5;  grid-row: 2 / 3;}
input:nth-of-type(3):checked ~ main#carousel {  --position: 3;}

input:nth-of-type(4) {  grid-column: 5 / 6;  grid-row: 2 / 3;}
input:nth-of-type(4):checked ~ main#carousel {  --position: 4;}


div.item img{ margin-top:6px; width:160px}
}