/*
 * Style for magnum services page.
 */

section#headerTitle {
    padding-top: 10em;
    margin-left: var(--gutter);
    margin-right: var(--gutter);
    overflow: hidden;
}

section#headerTitle .title {
    margin-bottom: 1em;
}

section#headerTitle .wide > p {
    margin-bottom: 1em;
}

div#filters {
    width: 100%;
    text-align: center;
    padding: 2em 0;
}

div#filters .button {
    border: 1px solid;
    margin: 0 1%;
    cursor: pointer;
    padding: .5em 1em;
    font-size: 1.15em;
    background-color: transparent;
}

/* Outline filter chips — active state set inline by JS */
div#filters a.orange {
    color: var(--teal);
    border-color: var(--teal);
}

div#filters a.blue {
    color: var(--sea);
    border-color: var(--sea);
}

div#filters a.orange:hover {
    background-color: var(--teal);
    color: var(--white);
}

div#filters a.blue:hover {
    background-color: var(--sea);
    color: var(--white);
}

div#call {
    text-align: center;
    padding: 0 15% 15% 15%;
}

section#formsList {
    overflow: hidden;
    margin-bottom: 4em;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

section#formsList div#filters a.button {
    width: 19em;
    margin-bottom: 1em;
}

section#formsList div#filters a.orange:hover {
    background-color: var(--teal);
    color: var(--white);
}

section#formsList div#filters a.blue:hover {
    background-color: var(--sea);
    color: var(--white);
}

section h3, div#call > h3 {
    font-size: 1.5em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
    text-transform: uppercase;
    margin-top: 2em;
    margin-bottom: 1em;
}

section#formsList div.modules {
    width: 90%;
    margin-right: 10%;
}

section#formsList div.modules ul li {
    margin-bottom: 1em;
}

section#formsList div.modules ul li:hover {
    color: var(--teal);
}

section#formsList div.modules ul li i {
    margin-right: .3em;
}

/* Screen size adjustments */
@media screen and (max-width: 780px) {

    section#headerTitle {
        margin-left: 0;
    }

    section#headerTitle div.wide.left {
        margin: 0 3%;
        width: 94%;
    }

    div#filters .button {
        font-size: 1em;
    }

    section .close {
        width: 100%;
    }

    section#formsList div.modules {
        margin: auto;
    }
}

/* Screen size adjustments */
@media screen and (max-width: 500px) {

    div#filters .button {
        font-size: .8em;
    }
}