@keyframes rotation {
    0%      {transform: rotate(0deg);}
    100%    {transform: rotate(360deg);}
}

@-webkit-keyframes rotation {
    0%      {-webkit-transform: rotate(0deg);}
    100%    {-webkit-transform: rotate(360deg);}
}

@-ms-keyframes rotation {
    0%      {-ms-transform: rotate(0deg);}
    100%    {-ms-transform: rotate(360deg);}
}

@-moz-keyframes rotation {
    0%      {-moz-transform: rotate(0deg);}
    100%    {-moz-transform: rotate(360deg);}
}

@-o-keyframes rotation {
    0%      {-o-transform: rotate(0deg);}
    100%    {-o-transform: rotate(360deg);}
}

.spiralContainer {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 360px;
    max-height: 360px;
}

.spiralContainer img {
    width: 100%;
    height: auto;
}
  
.spiral {
    width: 100%;
    -webkit-animation: rotation 30s linear 0s infinite normal;
    -moz-animation: rotation 30s linear 0s infinite normal;
    -ms-animation: rotation 30s linear 0s infinite normal;
    -o-animation: rotation 30s linear 0s infinite normal;
    animation: rotation 30s linear 0s infinite normal
}
      
.spiral-static {
    top: 0;
    left: 0;
    width: 100%;
}

@media (min-width: 768px) {

    .spiralContainer {
        width: 120px;
        height: 120px;
    }
}


@media (min-width: 992px) {

    .spiralContainer {
        width: 180px;
        height: 180px;
    }    
}    

@media (min-width: 1200px) {

    .spiralContainer {
        width: 220px;
        height: 220px;
    }    
}

@media (min-width: 1440px) {

    .spiralContainer {
        width: 240px;
        height: 240px;
    } 
}