@import url('https://fonts.googleapis.com/css?family=Pacifico|Open+Sans');
@font-face {
    font-family: 'Brannboll';
    src: url('../fonts/Brannboll.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Brannboll.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/Brannboll.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/Brannboll.woff') format('woff'), /* Pretty Modern Browsers */
    url('../fonts/Brannboll.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('../fonts/Brannboll.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'License Plate';
    src: url('../fonts/License Plate.eot'); /* IE9 Compat Modes */
    src: url('../fonts/License Plate.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/License Plate.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/License Plate.woff') format('woff'), /* Pretty Modern Browsers */
    url('../fonts/License Plate.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('../fonts/License Plate.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'Modules';
    url('../fonts/modules.ttf')  format('truetype'), /* Safari, Android, iOS */;

}

body, html {
    overflow: hidden;
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', Arial, sans-serif;
}

a {
    color: #ea0c71;
}

ul li ul li {
    margin-left: 50px;
}

.half_row {
    float: left;
    width: 48%;
}

.half_row ul {
    margin-left: 40px;
    margin-top: -10px;
}

.half_row ul li ul {
    margin-top: 0px;
}

.logo, .name {
    display: inline-block;
}

.logo {
    margin-right: 1em;
}

.name {
    position: relative;
    top: -2em;
}

.wrap {         
    perspective: 1px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.wrap {
    perspective-origin-x: 100%;
}
.parallax__layer {
    transform-origin-x: 100%;
}

.block {
    padding-top: 0%;
    margin-left: auto;
    margin-right: auto; 
    width: 1110px; 
}

.contacts > .block, .aboutus > .block, .mission > .block {
    padding: 1%;
}

.contacts > .block h2, .aboutus > .block h2, .mission > .block h2 {
    text-align: center;
    color: white;
    margin: 0;
}

.contacts > .block .row {
    overflow: hidden;
}

.contacts > .block .row .column {
    float: left;
    width: 31%;
    text-align: center;
    padding: 1%;
}

.aboutus > .block .row .column {
    float: left;
    width: 18%;
    text-align: center;
    padding: 1%;
}

.aboutus > .block p {
    text-align: center;
    padding: 1%;
    font-size: 1.4em;;
}

.member {
    text-align: left;
}

.member h4 {
    text-align: center;
    font-size: 1.12em;
}

.mission p {
    font-size: 1.3em;
    line-height: 1.5em;
    text-align: center;
    margin: 20px;
}

.parallax__layer--back.purple {
    background-color: #ea0c71;
    width: 100%;
    height: 100%;
}

img.member {
    width: 257px;
    height: 193px;
}

p.member_position {
    font-size: 0.95em !important;;
    color: #676767;
    text-align: center;
    height: 35px;
}

ul.member_social {
    margin-top: 5px;
    padding: 0;
    list-style-type: none !important;
    margin-bottom: 20px;
    text-align: center;
}

ul.member_social li {
    display: inline-block;
    margin-right: 0px;
}

ul.member_social li a {
    display: inline-block;
    position: relative;
    color: white;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    transition: color 300ms ease 0s
}

ul.member_social li a {
    
}

.member .bio {
    text-align: left;
    width: 257px;
}

.facebook_icon:before {
    
}

.parallax__layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.parallax__layer--base {
    transform: translateZ(0);
    border-top: 5px solid white;
    background-color: #ea0c71;
}
.parallax__layer--back {
    transform: translateZ(-1px) scale(2);
}

.parallax__group {
    position: relative;
    height: 120vh;
    
    transform-style: preserve-3d;
}

/*.parallax__group {
    transform: translate3d(700px, 0, -800px) rotateY(30deg);
    }*/

    h1 span {
        font-family: 'Brannboll', Arial, sans-serif;
        font-size: 4.0em;
        color: #ea0c71;
    }

    h1 {
        font-family: 'License Plate', Arial, sans-serif;
        font-size: 6.0em;
        margin-bottom: -0.75em;
        margin-top: 0.5em;
    }

    h2 {
        font-family: 'Open Sans', Arial, sans-serif;
        font-size: 4.0em;
        margin-top: 0.5em;
        margin-left: 1em;
    }

    h2 span {
        color: #ea0c71;
        font-size: 1.50em;
    }

    .contacts, .aboutus, .mission {
        background-color: #b7fffc;
        color: black; 
        overflow: hidden;
        border-top: 7px solid #ea0c71;
        height: 75%;
    }

    .contacts {
        height: 98%;
    }

    footer {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 1em;
        color: #cccccc;
        text-align: center;
        font-family: 'Open Sans', Arial, sans-serif;
        font-size: 0.75em;
    }
    

    @media screen and (max-width: 1120px) {
        
        
        .parallax__group {
            height: 140vh;
        }
        
        .block { margin-left: auto; margin-right: auto; width: 100%; height:auto; padding-top: 10%;}
        h1 { font-size: 5.0em;}
        h2 { font-size: 3.5em;}
    }

    @media screen and (max-width: 732px) {
        
        
        .parallax__group {
            height: 300vh;
        }


        .block { margin-left: auto; margin-right: auto; width: 100%; height:auto; padding-top: 10%;}
        .contacts > .block { width: 100%; height:auto; padding: 5px;}
        .contacts > .block h2 {font-size: 2.5em;}
        .contacts p { padding-right: 15px;}

        .mission > .block { width: 100%; height:auto; padding: 5px;}
        .mission > .block h2 {font-size: 2.5em;}
        .mission p { padding-right: 15px;font-size: 1.15em;}
        .mission {height: 90%;}

        .aboutus > .block { width: 100%; height:auto; padding: 5px;}
        .aboutus > .block h2 {font-size: 2.5em;}
        .aboutus p { padding-right: 15px;font-size: 1.15em;}
        .aboutus {height: 90%;}


        h1 {text-align: center; line-height: 2.5em; font-size: 5em;}
        h2 {text-align: center; line-height: 2.5em; font-size: 4.0em; margin-top: 1em; line-height: 1.4em;}

        .parallax__layer--base {
            transform: translateZ(0) scale(1);
        }
        .parallax__layer--back {
            transform: translateZ(-1px) scale(1);
        }

        .contacts > .block .row .column {
            float: left;
            width: 100%;
            text-align: center;
            padding: 1%;
        }

        .mission > .block .row .column {
            float: left;
            width: 100%;
            text-align: center;
            padding: 1%;
        }
    }

    @media screen and (max-width: 412px) {
        
        
        .parallax__group {
            height: 300vh;
        }


        .block { margin-left: auto; margin-right: auto; width: auto; height:auto;padding-top: 10%;}
        .contacts > .block { width: 100%; height:auto; padding: 5px;}
        .contacts > .block h2 {font-size: 2.4em;}
        .contacts p { padding-right: 15px;}

        .mission > .block { width: 100%; height:auto; padding: 5px;}
        .mission > .block h2 {font-size: 2.4em;}
        .mission p { padding-right: 15px; font-size: 1.0em;}
        .mission {height: 96%;}

        .aboutus > .block { width: 100%; height:auto; padding: 5px;}
        .aboutus > .block h2 {font-size: 2.4em;}
        .aboutus > .block p { padding-right: 15px; font-size: 1.0em;}
        .aboutus {height: 96%;}
        .aboutus .column {display: none;}

        h1 {text-align: center; line-height: 2.5em; font-size: 5em; margin-left: -1em;}
        h2 {text-align: center; line-height: 2.5em; font-size: 4.0em; margin-top: 1em; line-height: 1.5em; margin-left: -1em;}

        .parallax__layer--base {
            transform: translateZ(0) scale(1);
        }
        .parallax__layer--back {
            transform: translateZ(-1px) scale(1);
        }

        .contacts > .block .row .column {
            float: left;
            width: 100%;
            text-align: center;
            padding: 1%;
        }
    }

    @media screen and (max-width: 320px) {
        
        .parallax__group {
            height: 160vh;
        }

        .block { margin-left: auto; margin-right: auto; width: 100%; height:auto; padding-top: 10%;}
        
        .contacts > .block { width: 100%; height:auto; padding: 5px;}
        .contacts > .block h2 {font-size: 2.4em;}
        .contacts p { padding-right: 15px;}

        .mission > .block { width: auto; height:auto; padding: 5px;}
        .mission > .block h2 {font-size: 2.4em;}
        .mission p { padding-right: 15px; font-size: 1.0em;}
        .mission {height: 96%;}

        .aboutus > .block { width: 100%; height:auto; padding: 5px;}
        .aboutus > .block h2 {font-size: 2.4em;}
        .aboutus > .block p { padding-right: 15px; font-size: 1.0em;}
        .aboutus {height: 70%;}
        .aboutus .column {display: none;}

        h1 {text-align: center; line-height: 2.5em; font-size: 4em; margin-left: -1em;}
        h2 {text-align: center; line-height: 2.5em; font-size: 4.0em; margin-top: 1em; line-height: 1.5em; margin-left: -1em;}

        .parallax__layer--base {
            transform: translateZ(0) scale(1);
        }
        .parallax__layer--back {
            transform: translateZ(-1px) scale(1);
        }

        .contacts > .block .row .column {
            float: left;
            width: 100%;
            text-align: center;
            padding: 1%;
        }
    }

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

    @media screen and (max-height: 780px){
        
    }