.flip180{aspect-ratio:2/1;perspective:1000px}
.flip180>div{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 1s}
.flip180:hover>div{transform:rotateX(180deg);z-index:100;}
.flip180>div>div{position:absolute;width:100%;height:100%;backface-visibility:hidden;transition:transform 1s,z-index 0s 0.5s;z-index:1}
.flip180>div>div:nth-child(1){transform:translateZ(6px);z-index:3}
.flip180>div>div:nth-child(2){transform:rotateX(180deg) translateZ(-6px);display:flex;align-items:center;justify-content:center}
.flip180>div>div:nth-child(2)>*{transform:rotateX(180deg)}
.flip180:hover>div>div:nth-child(1){transform:translateZ(-6px);z-index:1}
.flip180:hover>div>div:nth-child(2){transform:rotateX(180deg) translateZ(6px);z-index:3;transition:z-index 0s}
.flip180:not(:hover)>div>div:nth-child(1){z-index:3;transition:z-index 0s}
.flip180>div>div:nth-child(n+3):nth-child(-n+6){transition:z-index 0s 0.5s;z-index:3}
.flip180:hover>div>div:nth-child(n+3):nth-child(-n+6){z-index:1;transition:z-index 0s}
.flip180>div>div:nth-child(3),.flip180>div>div:nth-child(4){background:#272727;height:12px;width:100%;left:0;transform:rotateX(90deg) translateZ(12px);transform-origin:center}
.flip180>div>div:nth-child(3){top:0px}
.flip180>div>div:nth-child(4){top:100%;transform:rotateX(-90deg) translateZ(-12px);}
.flip180>div>div:nth-child(5),.flip180>div>div:nth-child(6){background:#313131;width:12px;height:100%;top:0;transform:rotateY(90deg) translateZ(-6px);transform-origin:center}
.flip180>div>div:nth-child(5){left:0px}
.flip180>div>div:nth-child(6){left:100%;transform:rotateY(-90deg) translateZ(6px);}

.flip180>div>div:nth-child(1) , .flip180>div>div:nth-child(2) {background-color:transparent;transition:all 1s ease-in;box-shadow: 0px 0px 0px -20px #202020;}
.flip180:hover >div>div:nth-child(1) ,.flip180:hover >div>div:nth-child(2)  {box-shadow: 0px 0px 64px 0px #202020;}
.flip180>div>div:nth-child(1) {background-color: #272727;border: 1px solid #424242;justify-content: center;display: flex;align-items: center;}
.flip180:hover >div>div:nth-child(1) {background-color:#272727;}
.flip180>div>div:nth-child(2) {background-color:#272727;}
.flip180:hover >div>div:nth-child(2) {background-color:#313131;}


/*
<div class="flip180">
  <div>
    <div>Přední strana</div>
    <div>Zadní strana</div>
    <div>Horní hrana</div>
    <div>Dolní hrana</div>
    <div>Levá hrana</div>
    <div>Pravá hrana</div>
  </div>
</div>
*/
.flip-wrap-3 {display:flex;flex-wrap:wrap;gap:18px;padding-top:36px;padding-bottom:36px;}
.flip-wrap-3 > .flip180 {flex: 1 1 30.3333%;display:flex;}


.square {aspect-ratio:1/1;}

.scroll-active.info-fixed {position:fixed;top:74px;left:0px;z-index:111;border-bottom:0;}
.scroll-active.menu-sc .menu-a-1 {}




/* svg product */


svg > g > * {transition: all 300ms linear;}
.str0 {stroke:#aaaaaa;stroke-width:52.92;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:22.9256}
.str1 {stroke:#aaaaaa;stroke-width:52.92;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:22.9256}
g.active > * {fill:#12345655;stroke:#00A0E3;stroke-width:52.92;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:22.9256}
.killed {opacity:0;}
.fil0 {fill:none}
.fil1 {fill:#272727;}
.fil2 {fill:#272727;fill-rule:nonzero}

.active-next {transform:translateX(1500px);opacity:0.2;}