@charset "UTF-8";

.threesixty-frame {
    cursor: -webkit-grab;
    transition: all 0.2s ease-in-out;
}
@-webkit-keyframes ui-spinner-rotate-right {
    0% {
        -webkit-transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(180deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    75% {
        -webkit-transform: rotate(360deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes ui-spinner-rotate-left {
    0% {
        -webkit-transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    75% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes ui-spinner-rotate-right {
    0% {
        -moz-transform: rotate(0deg);
    }
    25% {
        -moz-transform: rotate(180deg);
    }
    50% {
        -moz-transform: rotate(180deg);
    }
    75% {
        -moz-transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-moz-keyframes ui-spinner-rotate-left {
    0% {
        -moz-transform: rotate(0deg);
    }
    25% {
        -moz-transform: rotate(0deg);
    }
    50% {
        -moz-transform: rotate(180deg);
    }
    75% {
        -moz-transform: rotate(180deg);
    }
    100% {
        -moz-transform: rotate(360deg);
    }
}

@keyframes ui-spinner-rotate-right {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(180deg);
    }
    50% {
        transform: rotate(180deg);
    }
    75% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes ui-spinner-rotate-left {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    75% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.ui-spinner {
    position: relative;
    border-radius: 100%;
}
.ui-spinner .side {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
}
.ui-spinner .side .fill {
    border-radius: 999px;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}
.ui-spinner .side-left {
    left: 0;
}
.ui-spinner .side-left .fill {
    left: 100%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-animation-name: ui-spinner-rotate-left;
    -moz-animation-name: ui-spinner-rotate-left;
    -ms-animation-name: ui-spinner-rotate-left;
    -o-animation-name: ui-spinner-rotate-left;
    animation-name: ui-spinner-rotate-left;
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    transform-origin: 0 50%;
}
.ui-spinner .side-right {
    left: 50%;
}
.ui-spinner .side-right .fill {
    left: -100%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    -webkit-animation-name: ui-spinner-rotate-right;
    -moz-animation-name: ui-spinner-rotate-right;
    -ms-animation-name: ui-spinner-rotate-right;
    -o-animation-name: ui-spinner-rotate-right;
    animation-name: ui-spinner-rotate-right;
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}
@font-face {
    font-family: "SSPika";
    src: url("ss-pika.eot");
    src: url("ss-pika.eot?#iefix") format("embedded-opentype"), url("ss-pika.woff") format("woff"), url("ss-pika.ttf") format("truetype"), url("ss-pika.svg#SSPika") format("svg");
    font-weight: normal;
    font-style: normal;
}
.ui {
    width: 100%;
    position: relative;
    margin: 0;
    position: absolute;
    top: 50%
}
.ui .next {
    width: 25px;
    height: 25px;
    line-height: 25px;
    position: absolute;
    right: -20px;
    cursor: pointer;
    background-image: url(../images/arrow-right.svg);
    background-repeat: no-repeat;
    background-position: center;
}
.ui .prev {
    width: 20px;
    height: 25px;
    line-height: 25px;
    position: absolute;
    left: -20px;
    cursor: pointer;
    background-image: url(../images/arrow-left.svg);
    background-repeat: no-repeat;
    background-position: center;
}
.ui-spinner {
    width: 46px;
    height: 46px;
    background: #dddddd;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 170px;
}
.ui-spinner .side .fill {
    background: #3c76ca;
    -webkit-animation-duration: 3s;
    -moz-animation-duration: 3s;
    -ms-animation-duration: 3s;
    -o-animation-duration: 3s;
    animation-duration: 3s;
    opacity: 0.8;
}
.ui-spinner:after {
    content: "";
    background: transparent;
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    top: 9px;
    left: 9px;
    display: block;
}