@import "/files/customsite/CS_1358/ID_1709/css/extend.css";

    .sbs-customsite {
        font-size: 20px;
    }

#mechanism {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
}

#mechanism>.image {
    min-height: 60vh;
    flex-basis: 60%;
    flex-shrink: 0;
    background-color: #ddd;
    position: relative;
    background-image: url(/files/customsite/CS_1536/ID_1933/img/hero.jpg);
    background-size: cover;
    background-position: 50% 50%;
}

#mechanism>.inner {
    flex-basis: 40%;
    padding: 2em;
    align-items: center;
    justify-content: center;
    align-self: center;
    max-width: 40em;
}

#mechanism>.inner>.copy {
}

#logo {
    max-width: 100px;
    position: absolute;
    left: 1em;
    top: 1em;
}

#logo>img {
    display: block;
    width: 100%;
}

.parts {
    margin: 2em 0 0 0;
}

.sbs-customsite .button, .sbs-customsite a.button, .sbs-customsite button, section.sbsform input[type="submit"], section.sbsform .form-sendbutton {
    background: #e51b24;
}

.sbs-customsite h1 {font-size: 2.25em;}
.sbs-customsite h2 {font-size: 1.75em;}

@media screen and (max-width: 1080px) {
    #mechanism {
        display: block;
    }
    #mechanism>.inner {
        max-width: 100%;
        padding: 0;
        margin: 2em 0 0 0;
    }
    .sbs-customsite {
        /* font-size: 14px; */
    }
    
}

@media screen and (max-width: 600px) {

    #mechanism>.image {
        background-image: url(/files/customsite/CS_1536/ID_1933/img/hero_s.jpg);
        background-size: cover;
        background-position: 50% 50%;
    }
    .sbs-customsite {
        font-size: 14px;
    }
    
}