@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: 18;
  --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;}
div.item:nth-of-type(5) {  --offset: 5;}
div.item:nth-of-type(6) {  --offset: 6;}
div.item:nth-of-type(7) {  --offset: 7;}
div.item:nth-of-type(8) {  --offset: 8;}
div.item:nth-of-type(9) {  --offset: 9;}
div.item:nth-of-type(10) {  --offset: 10;}
div.item:nth-of-type(11) {  --offset: 11;}
div.item:nth-of-type(12) {  --offset: 12;}
div.item:nth-of-type(13) {  --offset: 13;}
div.item:nth-of-type(14) {  --offset: 14;}
div.item:nth-of-type(15) {  --offset: 15;}
div.item:nth-of-type(16) {  --offset: 16;}
div.item:nth-of-type(17) {  --offset: 17;}
div.item:nth-of-type(18) {  --offset: 18;}

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;}

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

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

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

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

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

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

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

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

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

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

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

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

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

input:nth-of-type(18) {  grid-column: 19 / 20;  grid-row: 2 / 3;}
input:nth-of-type(18):checked ~ main#carousel {  --position: 19.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;}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@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: 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;}

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

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

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

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

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

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

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

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

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

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

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

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

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

input:nth-of-type(18) {  grid-column: 19 / 20;  grid-row: 2 / 3;}
input:nth-of-type(18):checked ~ main#carousel {  --position: 18.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;}

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

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

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

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

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

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

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

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

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

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

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

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

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

input:nth-of-type(18) {  grid-column: 19 / 20;  grid-row: 2 / 3;}
input:nth-of-type(18):checked ~ main#carousel {  --position: 18.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: 18;
  --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;}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@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: 18;
  --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;}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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