.rotation-360 {
    margin: 0 auto;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    cursor: move;
    position: relative;
}
.rotation-360:before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 16px;
    transform: translate(-50%,0);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    background-color: rgba(255,255,255,0.8);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 75%;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjgiIGhlaWdodD0iNDUiIHZpZXdCb3g9IjAgMCA2OCA0NSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMV8yKSI+PHBhdGggZD0iTTQyLjMyMDMgMzguNzEwOUM0MS4zNDMxIDM4LjcxMDkgNDAuNDk1MyAzNy45ODgzIDQwLjM2ODYgMzYuOTk4OUM0MC4yMzE2IDM1LjkyNTIgNDAuOTk0OSAzNC45NDQ0IDQyLjA3MzYgMzQuODA3NkM0OC4yOTc2IDM0LjAxODcgNTMuODcxMyAzMi4zNDA4IDU3Ljc2NzYgMzAuMDgyMkM2MS4zMzEgMjguMDE3IDYzLjI5MyAyNS41ODkgNjMuMjkzIDIzLjI0NTdDNjMuMjkzIDIwLjY2MyA2MC45OTcxIDE4LjU0OTkgNTkuMDcwNSAxNy4yMzEyQzU4LjE3NDQgMTYuNjE3OSA1Ny45NDc2IDE1LjM5ODIgNTguNTY0MiAxNC41MDYyQzU5LjE4MDcgMTMuNjE0NyA2MC40MDcyIDEzLjM4OTIgNjEuMzAzMyAxNC4wMDI1QzY1LjE4MjIgMTYuNjU3MSA2Ny4yMzI0IDE5Ljg1MzIgNjcuMjMyNCAyMy4yNDYyQzY3LjIzMjQgMjcuMDk2OSA2NC42NDU2IDMwLjYzMTggNTkuNzUxMSAzMy40Njg2QzU1LjM0NTUgMzYuMDIyMSA0OS40MDUxIDM3LjgyOTYgNDIuNTcxNiAzOC42OTU2QzQyLjQ4NyAzOC43MDU4IDQyLjQwMjkgMzguNzEwOSA0Mi4zMjAzIDM4LjcxMDlaIiBmaWxsPSJibGFjayIvPjxwYXRoIGQ9Ik0zMy4xMzYxIDM1LjkwNDJMMjcuODgzNiAzMC42Nzg4QzI3LjExNDEgMjkuOTEzMyAyNS44NjcyIDI5LjkxMzMgMjUuMDk3OCAzMC42Nzg4QzI0LjMyODkgMzEuNDQzNyAyNC4zMjg5IDMyLjY4NDcgMjUuMDk3OCAzMy40NDk3TDI2LjYzMjUgMzQuOTc2NUMyMC43NDggMzQuMzcxOCAxNS40MDIxIDMzLjAwODggMTEuMjYyNyAzMS4wMjgzQzYuNjA4NzUgMjguODAxOSAzLjkzOTQgMjUuOTY1MiAzLjkzOTQgMjMuMjQ2M0MzLjkzOTQgMjAuOTQwMyA1Ljg1MDYyIDE4LjU0MzQgOS4zMjA2OCAxNi40OTcyQzEwLjI1NjggMTUuOTQ1NSAxMC41NjU2IDE0Ljc0MzMgMTAuMDExMSAxMy44MTI1QzkuNDU2MSAxMi44ODEyIDguMjQ3NiAxMi41NzQgNy4zMTIgMTMuMTI1NkMxLjI2ODUxIDE2LjY4OTUgMCAyMC41OTY0IDAgMjMuMjQ2M0MwIDI3LjU5NCAzLjM5MzYzIDMxLjYxMjEgOS41NTU2MSAzNC41NjA2QzE0LjMzODMgMzYuODQ4MiAyMC41MjQ5IDM4LjM4MDcgMjcuMjY1IDM4Ljk3MzZMMjUuMDk3OCA0MS4xMjk2QzI0LjMyODkgNDEuODk0NiAyNC4zMjg5IDQzLjEzNTYgMjUuMDk3OCA0My45MDFDMjUuNDgyNSA0NC4yODMyIDI1Ljk4NjcgNDQuNDc0NiAyNi40OTA5IDQ0LjQ3NDZDMjYuOTk0NiA0NC40NzQ2IDI3LjQ5ODkgNDQuMjgzMiAyNy44ODM2IDQzLjkwMUwzMy4xMzYxIDM4LjY3NTZDMzMuOTA1IDM3LjkxMDIgMzMuOTA1IDM2LjY2OTEgMzMuMTM2MSAzNS45MDQyWiIgZmlsbD0iYmxhY2siLz48cGF0aCBkPSJNNTcuNTU1IDUuNDk3MDdDNTYuMTUwNiA1LjQ5NzA3IDU1LjAwODMgNC4zNjA0MyA1NS4wMDgzIDIuOTYzMzhDNTUuMDA4MyAxLjU2NjMzIDU2LjE1MDYgMC40Mjk2ODggNTcuNTU1IDAuNDI5Njg4QzU4Ljk1OTIgMC40Mjk2ODggNjAuMTAxNyAxLjU2NjMzIDYwLjEwMTcgMi45NjMzOEM2MC4xMDE3IDQuMzYwNDMgNTguOTU5MiA1LjQ5NzA3IDU3LjU1NSA1LjQ5NzA3Wk01Ny41NTUgMi4xMTg4MkM1Ny4wODY4IDIuMTE4ODIgNTYuNzA2MSAyLjQ5Nzc3IDU2LjcwNjEgMi45NjMzOEM1Ni43MDYxIDMuNDI5MjEgNTcuMDg2OCAzLjgwNzk0IDU3LjU1NSAzLjgwNzk0QzU4LjAyMyAzLjgwNzk0IDU4LjQwMzkgMy40MjkyMSA1OC40MDM5IDIuOTYzMzhDNTguNDAzOSAyLjQ5Nzc3IDU4LjAyMyAyLjExODgyIDU3LjU1NSAyLjExODgyWiIgZmlsbD0iYmxhY2siLz48cGF0aCBkPSJNMjIuOTgyNyAxMS4xMTU4QzI0LjIwOTQgMTEuMzE1OCAyNS4xNDk0IDExLjc3NTggMjUuODAyNyAxMi40OTU4QzI2LjQ1NiAxMy4yMDI0IDI2Ljc4MjcgMTQuMDgyNCAyNi43ODI3IDE1LjEzNThDMjYuNzgyNyAxNS45NDkxIDI2LjU2OTQgMTYuNzAyNCAyNi4xNDI3IDE3LjM5NThDMjUuNzE2IDE4LjA3NTggMjUuMDYyNyAxOC42MjI0IDI0LjE4MjcgMTkuMDM1OEMyMy4zMTYgMTkuNDQ5MSAyMi4yNDk0IDE5LjY1NTggMjAuOTgyNyAxOS42NTU4QzE5Ljk5NiAxOS42NTU4IDE5LjAyMjcgMTkuNTI5MSAxOC4wNjI3IDE5LjI3NThDMTcuMTE2IDE5LjAwOTEgMTYuMzA5NCAxOC42MzU4IDE1LjY0MjcgMTguMTU1OEwxNi45MDI3IDE1LjY3NThDMTcuNDM2IDE2LjA3NTggMTguMDQ5NCAxNi4zODkxIDE4Ljc0MjcgMTYuNjE1OEMxOS40NDk0IDE2LjgyOTEgMjAuMTY5NCAxNi45MzU4IDIwLjkwMjcgMTYuOTM1OEMyMS43MTYgMTYuOTM1OCAyMi4zNTYgMTYuNzgyNCAyMi44MjI3IDE2LjQ3NThDMjMuMjg5NCAxNi4xNTU4IDIzLjUyMjcgMTUuNzA5MSAyMy41MjI3IDE1LjEzNThDMjMuNTIyNyAxMy45ODkxIDIyLjY0OTQgMTMuNDE1OCAyMC45MDI3IDEzLjQxNThIMTkuNDIyN1YxMS4yNzU4TDIyLjMwMjcgOC4wMTU3N0gxNi4zNDI3VjUuNDE1NzdIMjYuMTQyN1Y3LjUxNTc3TDIyLjk4MjcgMTEuMTE1OFoiIGZpbGw9ImJsYWNrIi8+PHBhdGggZD0iTTM0LjkxODYgMTAuNjM1OEMzNS44MTIgMTAuNjM1OCAzNi42MjUzIDEwLjgxNTggMzcuMzU4NiAxMS4xNzU4QzM4LjA5MiAxMS41MzU4IDM4LjY3MiAxMi4wNDkxIDM5LjA5ODYgMTIuNzE1OEMzOS41MjUzIDEzLjM2OTEgMzkuNzM4NiAxNC4xMjkxIDM5LjczODYgMTQuOTk1OEMzOS43Mzg2IDE1LjkyOTEgMzkuNTA1MyAxNi43NDkxIDM5LjAzODYgMTcuNDU1OEMzOC41NzIgMTguMTYyNCAzNy45MzIgMTguNzA5MSAzNy4xMTg2IDE5LjA5NThDMzYuMzE4NiAxOS40NjkxIDM1LjQyNTMgMTkuNjU1OCAzNC40Mzg2IDE5LjY1NThDMzIuNDc4NiAxOS42NTU4IDMwLjk0NTMgMTkuMDU1OCAyOS44Mzg2IDE3Ljg1NThDMjguNzMyIDE2LjY1NTggMjguMTc4NiAxNC45NDI0IDI4LjE3ODYgMTIuNzE1OEMyOC4xNzg2IDExLjEyOTEgMjguNDc4NiA5Ljc2OTExIDI5LjA3ODYgOC42MzU3OEMyOS42Nzg2IDcuNTAyNDUgMzAuNTEyIDYuNjQyNDUgMzEuNTc4NiA2LjA1NTc4QzMyLjY1ODYgNS40NjkxMSAzMy45MDUzIDUuMTc1NzggMzUuMzE4NiA1LjE3NTc4QzM2LjA2NTMgNS4xNzU3OCAzNi43Nzg2IDUuMjYyNDUgMzcuNDU4NiA1LjQzNTc4QzM4LjE1MiA1LjU5NTc4IDM4LjczODYgNS44MjkxMSAzOS4yMTg2IDYuMTM1NzhMMzguMDE4NiA4LjUxNTc4QzM3LjMyNTMgOC4wNDkxMSAzNi40NTIgNy44MTU3OCAzNS4zOTg2IDcuODE1NzhDMzQuMjEyIDcuODE1NzggMzMuMjcyIDguMTYyNDUgMzIuNTc4NiA4Ljg1NTc4QzMxLjg4NTMgOS41NDkxMiAzMS41MTIgMTAuNTU1OCAzMS40NTg2IDExLjg3NThDMzIuMjg1MyAxMS4wNDkxIDMzLjQzODYgMTAuNjM1OCAzNC45MTg2IDEwLjYzNThaTTM0LjI1ODYgMTcuMjM1OEMzNC45NTIgMTcuMjM1OCAzNS41MTIgMTcuMDQ5MSAzNS45Mzg2IDE2LjY3NThDMzYuMzc4NiAxNi4zMDI0IDM2LjU5ODYgMTUuNzk1OCAzNi41OTg2IDE1LjE1NThDMzYuNTk4NiAxNC41MTU4IDM2LjM3ODYgMTQuMDA5MSAzNS45Mzg2IDEzLjYzNThDMzUuNTEyIDEzLjI0OTEgMzQuOTM4NiAxMy4wNTU4IDM0LjIxODYgMTMuMDU1OEMzMy41MTIgMTMuMDU1OCAzMi45MzIgMTMuMjU1OCAzMi40Nzg2IDEzLjY1NThDMzIuMDI1MyAxNC4wNDI0IDMxLjc5ODYgMTQuNTQyNCAzMS43OTg2IDE1LjE1NThDMzEuNzk4NiAxNS43NjkxIDMyLjAxODYgMTYuMjY5MSAzMi40NTg2IDE2LjY1NThDMzIuODk4NiAxNy4wNDI0IDMzLjQ5ODYgMTcuMjM1OCAzNC4yNTg2IDE3LjIzNThaIiBmaWxsPSJibGFjayIvPjxwYXRoIGQ9Ik00Ni44MTMgMTkuNjU1OEM0NS42NTMgMTkuNjU1OCA0NC42MTk3IDE5LjM2OTEgNDMuNzEzIDE4Ljc5NThDNDIuODA2MyAxOC4yMjI0IDQyLjA5MyAxNy4zOTU4IDQxLjU3MyAxNi4zMTU4QzQxLjA2NjMgMTUuMjIyNCA0MC44MTMgMTMuOTIyNCA0MC44MTMgMTIuNDE1OEM0MC44MTMgMTAuOTA5MSA0MS4wNjYzIDkuNjE1NzggNDEuNTczIDguNTM1NzhDNDIuMDkzIDcuNDQyNDUgNDIuODA2MyA2LjYwOTExIDQzLjcxMyA2LjAzNTc4QzQ0LjYxOTcgNS40NjI0NSA0NS42NTMgNS4xNzU3OCA0Ni44MTMgNS4xNzU3OEM0Ny45NzMgNS4xNzU3OCA0OS4wMDYzIDUuNDYyNDUgNDkuOTEzIDYuMDM1NzhDNTAuODE5NyA2LjYwOTExIDUxLjUyNjMgNy40NDI0NSA1Mi4wMzMgOC41MzU3OEM1Mi41NTMgOS42MTU3OCA1Mi44MTMgMTAuOTA5MSA1Mi44MTMgMTIuNDE1OEM1Mi44MTMgMTMuOTIyNCA1Mi41NTMgMTUuMjIyNCA1Mi4wMzMgMTYuMzE1OEM1MS41MjYzIDE3LjM5NTggNTAuODE5NyAxOC4yMjI0IDQ5LjkxMyAxOC43OTU4QzQ5LjAwNjMgMTkuMzY5MSA0Ny45NzMgMTkuNjU1OCA0Ni44MTMgMTkuNjU1OFpNNDYuODEzIDE2LjkxNThDNDcuNjY2MyAxNi45MTU4IDQ4LjMzMyAxNi41NDkxIDQ4LjgxMyAxNS44MTU4QzQ5LjMwNjMgMTUuMDgyNCA0OS41NTMgMTMuOTQ5MSA0OS41NTMgMTIuNDE1OEM0OS41NTMgMTAuODgyNCA0OS4zMDYzIDkuNzQ5MTEgNDguODEzIDkuMDE1NzhDNDguMzMzIDguMjgyNDUgNDcuNjY2MyA3LjkxNTc4IDQ2LjgxMyA3LjkxNTc4QzQ1Ljk3MyA3LjkxNTc4IDQ1LjMwNjMgOC4yODI0NSA0NC44MTMgOS4wMTU3OEM0NC4zMzMgOS43NDkxMSA0NC4wOTMgMTAuODgyNCA0NC4wOTMgMTIuNDE1OEM0NC4wOTMgMTMuOTQ5MSA0NC4zMzMgMTUuMDgyNCA0NC44MTMgMTUuODE1OEM0NS4zMDYzIDE2LjU0OTEgNDUuOTczIDE2LjkxNTggNDYuODEzIDE2LjkxNThaIiBmaWxsPSJibGFjayIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwXzFfMiI+PHJlY3Qgd2lkdGg9IjY4IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ3aGl0ZSIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==");
}
.rotation-360:hover:before {
    opacity: 0;
}
.rotation-360 img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
@media screen and (min-width: 768px) {
    .rotation-360:before {
        top: 50%;
        left: 50%;
        bottom: auto;
        transform: translate(-50%,-50%);
        width: 68px;
        height: 68px;
    }
}