@font-face {
    font-family: 'LemonMilk';
    src: local('Lemon\/Milk'), url('../font/LemonMilkbold.woff') format('woff'), url('../font/LemonMilkbold.otf') format('opentype');
}

@font-face {
    font-family: 'LemonMilk Light';
    src: local('Lemon\/Milk light'), url('../font/LemonMilklight.woff') format('woff'), url('../font/LemonMilklight.otf') format('opentype');
}

@font-face {
    font-family: 'AvenirNext-Regular';
    src: local('AvenirNext-Regular'), url('../font/AvenirNext-Regular.woff') format('woff');
}

@font-face {
    font-family: 'AvenirNext-Bold';
    src: local('AvenirNext-Bold'), url('../font/AvenirNext-Bold.woff') format('woff');
}

html, body {
    font-size: calc(1em + 1vw);
}

:root {
    --blue-subtext-font-size-m: 2.5vh;
    --blue-subtext-font-size: 0.75em;
    --header-letter-spacing: 0.25vw;
    --paragragh-font-size: 0.5em;
    --blue-subtext-letter-spacing: 0.1vw;
    --header-font-size: 1em;
    --section-padding: 3em;
    --atp-blue: #768a9f;
    --atp-black: #383838;
    --atp-grey: #dddddd;
}

p {
    font-family: AvenirNext-Regular,serif;
    font-weight: 400;
    font-size: var(--paragragh-font-size);
    color: var(--atp-black);
}

h1 {
    text-transform: uppercase;
    font-family: 'LemonMilk Light', serif;
    font-weight: 400;
    font-size: var(--header-font-size);
    letter-spacing: var(--header-letter-spacing);
    color: var(--atp-black);
}

h2 {
    text-transform: uppercase;
    font-family: 'LemonMilk Light', serif;
    font-weight: 400;
    font-size: var(--blue-subtext-font-size);
    letter-spacing: var(--blue-subtext-letter-spacing);
    color: var(--atp-blue);
}

/*----General CSS Classes----*/
.remove {
    display: none;
}


.preamble__container--video, .preamble__container--picture {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -100;
}

.opening__row, .mission__row {
    background-color: #fff;
}

.mission__div--btn {
    background-color: var(--atp-blue);
    border-radius: 50px;
    margin-top: 0.5em;
    padding: 1em 2em;
    color: #fff;
    text-transform: uppercase;
    font-family: 'LemonMilk Light', serif;
    font-weight: 600;
    font-size: 3vh;
    letter-spacing: 4px;
}

    .mission__div--btn:hover {
        background-color: var(--atp-black);
        color: var(--atp-grey);
    }

.why__row {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 20em;
}

.why__circle {
    display: block;
    padding: 12.5% 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: var(--atp-black);
    border: 2px solid #fff;
    text-decoration: none;
    color: #fff;
    -moz-transition: all 0.6s ease-in-out 0.1s;
    -o-transition: all 0.6s ease-in-out 0.1s;
    -webkit-transition: all 0.6s ease-in-out 0.1s;
    transition: all 0.6s ease-in-out 0.1s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

    .why__circle * {
        pointer-events: none;
    }

    .why__circle div {
        position: absolute;
        top: 0;
        display: flex;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        padding: 3rem;
        height: 100%;
        width: 100%;
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .why__circle h1 {
        font-family: 'LemonMilk Light', serif;
        font-weight: 400;
        font-style: normal;
        text-transform: uppercase;
        letter-spacing: 5px;
        margin: 0;
        font-size: var(--paragragh-font-size);
        color: #fff;
    }

.back {
    -moz-transform: rotate3d(1,1,0,180deg);
    -ms-transform: rotate3d(1,1,0,180deg);
    -o-transform: rotate3d(1,1,0,180deg);
    -webkit-transform: rotate3d(1,1,0,180deg);
    transform: rotate3d(1,1,0,180deg);
}

    .back p {
        font-family: AvenirNext-Regular,serif;
        font-style: normal;
        font-weight: 600;
        margin: 0;
        color: var(--atp-black);
        text-transform: uppercase;
    }

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

    :root {
        --paragragh-font-size: 0.65em;
        --header-font-size: 1.1em;
    }

    .preamble__row {
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
        padding:var(--section-padding);
    }

    .preamble__svg {
        display: none;
    }

    .preamble__div {
/*        font-family: 'LemonMilk Light', serif;
        font-weight: 400;
        text-align: left;
        position: relative;*/
    }

        .preamble__div h1 {
            color: #fff;
            font-size: 1.25em;
            letter-spacing: 4px;
            text-align: center;
            text-shadow: 1px 1px 5px #000;
        }

            .preamble__div h1:nth-child(2) {
                margin-top: 2em !important;
                margin-bottom: 2em !important;
            }

    .opening__row, .mission__row {
        display: flex;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        padding: var(--section-padding);
        margin-left: -15px;
        margin-right: -15px;
        -webkit-align-items: center;
        align-items: center;
        text-align: center;
    }

        .opening__div h1 {
/*            font-family: 'LemonMilk Light', serif;
            font-weight: 400;
            text-transform: uppercase;
            margin-bottom: 5vh;
            font-size: 3vh;*/
        }

    .why__row {
        background: url(../images/Why_Background@M.jpg) no-repeat center center fixed;
    }

    .why__row {
        padding: var(--section-padding);
        height:unset;
    }

        .why__row .col {
            display: flex;
            -ms-flex-direction: column;
            -webkit-flex-direction: column;
            flex-direction: column;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-align-items: center;
            align-items: center;
            text-align: center;
        }

    .why__circle {
        width: 10em;
        height: 10em;
    }

        .why__circle:hover {
            background: #fff;
            color: #fff;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            -webkit-transform: none;
            transform: none;
        }

    .why__col .why__circle:nth-child(2) {
        margin-top: 2em;
        margin-bottom: 2em;
    }

    .mission__div--btn {
        background-color: var(--atp-blue);
        border-radius: 50px;
        margin-top: 0.5em;
        padding: 1em 1.75em;
        color: #fff;
        text-transform: uppercase;
        font-family: 'LemonMilk Light', serif;
        font-weight: 600;
        font-size: var(--paragragh-font-size);
        letter-spacing: 4px;
    }

        .mission__div--btn:hover {
            background-color: var(--atp-black);
            color: var(--atp-grey);
        }
}

@media only screen and (min-width: 720px) {
    .preamble__row {
        height: 16em;
    }

    .preamble__svg {
        width: 130%;
        position: absolute;
        top: -55%;
        left: -20%;
        fill: var(--atp-black);
        z-index: -100;
    }

    .preamble__div {
        font-family: 'LemonMilk Light', serif;
        font-weight: 400;
        /*text-transform: uppercase;*/
        text-align: left;
        position: absolute;
        bottom: 0;
        padding-bottom: 15px;
        /*margin-left:3%;*/
        /*letter-spacing: 0.6rem;*/
    }

        .preamble__div h1 {
            color: #fff;
            font-size: 1em;
            /*line-height: 1.5em;*/
            letter-spacing: 0.05em;
            /*text-shadow: 1px 1px 5px #000;*/
        }

    .opening__row, .mission__row {
        display: flex;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        padding: var(--section-padding);
        margin-left: -15px;
        margin-right: -15px;
        -webkit-align-items: center;
        align-items: center;
        text-align: center;
    }

        .opening__row h1, .mission__row h1 {
            color: var(--atp-blue);
        }

        .opening__row p, .mission__row p {
            width: 65%;
        }

            .opening__row p:last-of-type {
                margin-bottom: 0;
            }

    .why__row {
        background: url(../images/Why_Background@0.75x.jpg) no-repeat center center fixed;
    }

    .why__row {
        padding: var(--section-padding);
    }

        .why__row .col {
            display: flex;
            -ms-flex-direction: row;
            -webkit-flex-direction: row;
            flex-direction: row;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-align-items: center;
            align-items: center;
            text-align: center;
        }

    .why__circle:hover {
        background: #fff;
        color: #fff;
        -moz-transform: rotate3d(1,1,0,180deg);
        -ms-transform: rotate3d(1,1,0,180deg);
        -o-transform: rotate3d(1,1,0,180deg);
        -webkit-transform: rotate3d(1,1,0,180deg);
        transform: rotate3d(1,1,0,180deg);
    }

    .why__circle {
        width: 25%;
        height: 0;
    }

    .whyatpintro__row {
        background-color: #fff;
        padding: 0 5vw 15vh 5vw;
    }
}

@media only screen and (min-width: 2560px) {
    .why__row {
        background: url(../images/Why_Background.jpg) no-repeat center center fixed;
    }
}