@import "/files/customsite/CS_1839/ID_2354/css/extend.css";

#hero {
    min-height: 50vh;
    height: auto;
    display: flex;
    flex-flow: column nowrap;
    padding: 5vmax;
    background-color: rgb(232, 28, 44);
    background-image: url(img/tyopaikatvaihtoon.png);
    background-size: cover;
    background-position: 50% 50%;
}

#hero .header {
    max-width: 66.6%;
    max-height: 40vh;
    width: 1000px;
    margin: auto;
    animation: header 8s linear infinite;
    user-select: none;
    pointer-events: none;
}

@keyframes header {
    0% {transform: rotateZ(0); scale: 0.95}
    6% {transform: rotateZ(-5deg); scale: 1;}
    10%,13%,16% {transform: rotateZ(-20deg);}
    11%,14% {transform: rotateZ(-20.5deg);}
    12%,15% {transform: rotateZ(-19.5deg);}
    20% {transform: rotateZ(370deg);}
    21%, 100% {transform: rotateZ(360deg);}
    22% { scale: 1}
    24%,100% {scale: 0.95}
}

@media screen and (max-width: 600px) {
    #hero {
        padding: 1em;
    }
    #hero .header {
        max-width: 100%;
    }
}

#mechanism {
    background-color: transparent;
}

#mechanism textarea {
    min-height: 4em;
    height: 4em;
}

#mechanism h2 {
    font-size: 1.2em;
}

.sbsform {
    margin-top: 1.5em;
}

.sbs-customsite section.banded > .inner {
    max-width: 1500px;
}

.sbs-customsite h2 {
    color: rgb(232, 28, 44);
}