.grid-rotator{display:grid;grid-template-columns:repeat(6,1fr);grid-gap:0}.grid-item{width:100%;height:200px;overflow:hidden;position:relative;z-index:0!important;perspective:400px;margin:0;padding:0;float:left;display:block;transition:opacity 0.5s}.grid-item:hover{opacity:.5}.slide-effect{transform:translateX(50%);opacity:0}.rotate-effect{transform:rotateY(180deg)}.rotating-left-right{animation:rotate-left-right 2s ease-in-out forwards}@keyframes rotate-left-right{0%{transform:rotateY(-90deg);opacity:0}50%{transform:rotateY(0deg);opacity:1}100%{transform:rotateY(90deg);opacity:0}}@keyframes rotate-right-to-left{0%{transform:rotateY(-90deg);opacity:0}50%{transform:rotateY(0deg);opacity:.5}100%{transform:rotateY(90deg);opacity:0}}@keyframes rotate-bottom-to-top{0%{transform:rotateX(90deg);opacity:0}50%{transform:rotateX(0deg);opacity:.5}100%{transform:rotateX(-90deg);opacity:0}}@keyframes rotate-top-to-bottom{0%{transform:rotateX(-90deg);opacity:0}50%{transform:rotateX(0deg);opacity:.5}100%{transform:rotateX(90deg);opacity:0}}@keyframes slide-left-right{0%{transform:translateX(100%);opacity:0}50%{transform:translateX(0);opacity:1}100%{transform:translateX(-100%);opacity:0}}@keyframes slide-right-left{0%{transform:translateX(100%);opacity:0}50%{transform:translateX(0);opacity:1}100%{transform:translateX(-100%);opacity:0}}@keyframes slide-top-bottom{0%{transform:translateY(-100%);opacity:0}50%{transform:translateY(0);opacity:1}100%{transform:translateY(100%);opacity:0}}@keyframes slide-bottom-top{0%{transform:translateY(100%);opacity:0}50%{transform:translateY(0);opacity:1}100%{transform:translateY(-100%);opacity:0}}.new-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;backface-visibility:hidden;transform-style:preserve-3d;opacity:5}.grid-item img{position:absolute;width:100%;height:100%;object-fit:cover;transition:opacity 0.5s ease;backface-visibility:hidden;transition:1200ms linear;backface-visibility:hidden;transform-style:preserve-3d}img.slide-left-right-out{animation:slide-left-right-out 1.5s forwards}img.slide-left-right-in{animation:slide-left-right-in 1.5s forwards}img.slide-right-left-out{animation:slide-right-left-out 1.5s forwards}img.slide-right-left-in{animation:slide-right-left-in 1.5s forwards}@keyframes slide-in-left{0%{transform:translateX(100%);opacity:0}100%{transform:translateX(0);opacity:1}}@keyframes slide-out-left{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-100%);opacity:0}}@keyframes slide-in-right{0%{transform:translateX(100%);opacity:0}100%{transform:translateX(0);opacity:1}}@keyframes slide-out-right{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-100%);opacity:0}}.new-image.rotate-effect.to-left{animation:rotate-in-left 1s forwards}img.rotate-effect.to-left{animation:rotate-out-left 1s forwards}.new-image.rotate-effect.to-right{animation:rotate-in-right 1s forwards}img.rotate-effect.to-right{animation:rotate-out-right 1s forwards}@keyframes rotate-in-left{0%{transform:rotateY(-90deg);opacity:0}100%{transform:rotateY(0deg);opacity:1}}@keyframes rotate-out-left{0%{transform:rotateY(0deg);opacity:1}100%{transform:rotateY(90deg);opacity:0}}@keyframes rotate-in-right{0%{transform:rotateY(90deg);opacity:0}100%{transform:rotateY(0deg);opacity:1}}@keyframes rotate-out-right{0%{transform:rotateY(0deg);opacity:1}100%{transform:rotateY(-90deg);opacity:0}}.new-image.rotate-effect.diagonal{animation:rotate-in-diagonal 1.2s forwards}img.rotate-effect.diagonal{animation:rotate-out-diagonal 1.2s forwards}@keyframes rotate-in-diagonal{0%{transform:translate(-100%,100%) rotate(-90deg);opacity:0}100%{transform:translate(0,0) rotate(0deg);opacity:1}}@keyframes rotate-out-diagonal{0%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(100%,-100%) rotate(90deg);opacity:0}}@media (max-width:768px){.grid-rotator{grid-template-columns:repeat(3,1fr)}.grid-item{width:100%;height: 93px;}}@media (max-width:361px){.grid-rotator{grid-template-columns: 1fr}.grid-item{width:100%;height:220px}}@media(min-width:362px) and (max-width:480px){.grid-rotator{grid-template-columns:1fr 1fr}.grid-item{width:100%;height:170px}}@media (min-width:769px) and (max-width:1025px){.grid-rotator{grid-template-columns:repeat(4,1fr)}}