.arimo { font-family: "Arimo", serif; }

.logo { height: 64px; }

.highlight-red { color: red; }
.highlight-green { color: green; }

.min-w-5 { min-width: 5%; }
.min-w-10 { min-width: 10%; }
.min-w-25 { min-width: 25%; }
.min-w-30 { min-width: 30%; }
.min-w-45 { min-width: 45%; }
.min-w-75 { min-width: 75%; }
.min-w-95 { min-width: 95%; }

.absolute-center { top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); }
.absolute-25 { top: 25%; left: 50%; transform: translateY(-50%) translateX(-50%); }

@media screen and (max-width: 30em) {
    .dn-s { display: none; }
    .flex-wrap-s { flex-wrap: wrap; }
}

.spinner {
    width: 32px;
    height: 32px;
    background-color: #000;

    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    } 50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    } 100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

.sl > path { fill: none; stroke-width: 1; }
.volume { opacity: 0.1 }
