.civi-image-rotate{width:100%}.civi-image-rotate .layer{position:absolute;width:100%;height:100%;-webkit-transition:all .6s ease-in-out;-moz-transition:all .6s ease-in-out;-o-transition:all .6s ease-in-out;transition:all .6s ease-in-out;text-align:center;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.civi-image-rotate .content-wrap{height:230px;-webkit-perspective:1000px;perspective:1000px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}.civi-image-rotate .civi-image{-webkit-transform:none;-ms-transform:none;transform:none;z-index:1;animation-duration:15s;animation-delay:4s;animation-duration:12s;animation-delay:1s;animation-iteration-count:infinite}.civi-image-rotate .civi-image img{height:230px;width:100%;object-fit:cover}.civi-image-rotate .content{animation-duration:15s;animation-delay:4s;animation-duration:12s;animation-delay:1s;animation-iteration-count:infinite;background:var(--civi-color-accent);color:#fff;padding:16px}.civi-image-rotate .content .title{color:#fff}.civi-image-rotate.postion-top .civi-image{animation-name:rotateUp}.civi-image-rotate.postion-top .content{animation-name:rotateDown}.civi-image-rotate.postion-left .civi-image{animation-name:rotateLeft}.civi-image-rotate.postion-left .content{animation-name:rotateRight}@keyframes rotateLeft{0%{-webkit-transform:rotateY(0);-moz-transform:rotateY(0);-o-transform:rotateY(0);-ms-transform:rotateY(0);transform:rotateY(0)}30%{-webkit-transform:rotateY(0);-moz-transform:rotateY(0);-o-transform:rotateY(0);-ms-transform:rotateY(0);transform:rotateY(0)}50%{-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg)}65%{-webkit-transform:rotateY(-190deg);-moz-transform:rotateY(-190deg);-o-transform:rotateY(-190deg);-ms-transform:rotateY(-190deg);transform:rotateY(-190deg)}80%{-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg)}100%{-webkit-transform:rotateY(0);-moz-transform:rotateY(0);-o-transform:rotateY(0);-ms-transform:rotateY(0);transform:rotateY(0)}}@keyframes rotateRight{0%{-webkit-transform:rotateY(190deg);-moz-transform:rotateY(190deg);-o-transform:rotateY(190deg);-ms-transform:rotateY(190deg);transform:rotateY(190deg)}15%{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg)}30%{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg)}50%{-webkit-transform:rotateY(-10deg);-moz-transform:rotateY(-10deg);-o-transform:rotateY(-10deg);-ms-transform:rotateY(-10deg);transform:rotateY(-10deg)}65%{-webkit-transform:rotateY(0);-moz-transform:rotateY(0);-o-transform:rotateY(0);-ms-transform:rotateY(0);transform:rotateY(0)}80%{-webkit-transform:rotateY(0);-moz-transform:rotateY(0);-o-transform:rotateY(0);-ms-transform:rotateY(0);transform:rotateY(0)}100%{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg)}}@keyframes rotateUp{0%{-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-o-transform:rotateX(0);-ms-transform:rotateX(0);transform:rotateX(0)}30%{-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-o-transform:rotateX(0);-ms-transform:rotateX(0);transform:rotateX(0)}50%{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);-o-transform:rotateX(180deg);-ms-transform:rotateX(180deg);transform:rotateX(180deg)}65%{-webkit-transform:rotateX(170deg);-moz-transform:rotateX(170deg);-o-transform:rotateX(170deg);-ms-transform:rotateX(170deg);transform:rotateX(170deg)}80%{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);-o-transform:rotateX(180deg);-ms-transform:rotateX(180deg);transform:rotateX(180deg)}100%{-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-o-transform:rotateX(0);-ms-transform:rotateX(0);transform:rotateX(0)}}@keyframes rotateDown{0%{-webkit-transform:rotateX(-190deg);-moz-transform:rotateX(-190deg);-o-transform:rotateX(-190deg);-ms-transform:rotateX(-190deg);transform:rotateX(-190deg)}15%{-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);-o-transform:rotateX(-180deg);-ms-transform:rotateX(-180deg);transform:rotateX(-180deg)}30%{-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);-o-transform:rotateX(-180deg);-ms-transform:rotateX(-180deg);transform:rotateX(-180deg)}50%{-webkit-transform:rotateX(10deg);-moz-transform:rotateX(10deg);-o-transform:rotateX(10deg);-ms-transform:rotateX(10deg);transform:rotateX(10deg)}65%{-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-o-transform:rotateX(0);-ms-transform:rotateX(0);transform:rotateX(0)}80%{-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-o-transform:rotateX(0);-ms-transform:rotateX(0);transform:rotateX(0)}100%{-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);-o-transform:rotateX(-180deg);-ms-transform:rotateX(-180deg);transform:rotateX(-180deg)}}