html, body {
    margin: 0%;
    padding: 0%;
}

* {
    box-sizing: border-box;
    margin: 0%;
    padding: 0%;
    font-family: "LatoRegular";
}

@font-face {
    font-family: "LatoRegular";
    src: url("../fonts/Lato-Regular.ttf") format("truetype");
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family: "LatoThin";
    src: url("../fonts/Lato-Thin.ttf") format("truetype");
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family: "AmericanTypewriterMedium";
    src: url("../fonts/AmericanTypewriter_Medium.ttf") format("truetype");
    font-weight:normal;
    font-style:normal;
}

/* @font-face {
	font-family: 'LatoRegular';
	src: url('../fonts/Lato-Regular.eot');
	src: local('LatoRegular'), url('../fonts/Lato-Regular.woff') format('woff'), url("../fonts/Lato-Regular.ttf") format("truetype");
    font-weight:normal;
    font-style:normal;
} */

.wrapper {
    /* border:solid 3px red; */
    background: #fff;
}

/*--------------- header --------------- */

.header {
    /* border: solid 3px cyan; */
    position:relative;
    background: #fff;
}

@media(max-width: 900px) {
}

/*--------------- navigation --------------- */

/*
    has duplicate bar with same max height content as primary bar to push content down properly
    menu gets hidden on smaller res devices and replaced with menu button and menu selection overlay
    logo image will get hidden when scrolled and bar will be shrunk to just have menu
*/

.nav {
    /* border: solid 3px blue; */
    background-color: #92308b;
    width: 100%;
}

.nav #bar, .nav #bar2 {
    /* border: solid 3px pink; */
    background-color: #92308b;
    width: 100%;
    position: fixed;
    z-index:2;
}

.nav #bar2 {
    position: relative;
    z-index:0;
}

.nav #bar img, .nav #bar2 img {
    /* border: solid 3px orange; */
    margin-top:2%;
    margin-bottom:2%;
    margin-left:40px;
    max-width:40%;
}

.nav #bar #menu {
    /* border: solid 3px green; */
    top: 40%;
    right: 30px;
    position: absolute;
    /* width:60%; */
}

.nav #bar #menu li {
    /* border: solid 3px green; */
    padding-left: 30px;
    display: inline-block;
    transition: all 500ms ease-out;
}

.nav #bar #menu li a {
    font-family: LatoRegular !important;
    font-size: 20px;
    text-transform: uppercase;
    color: #fff;
    transition: all 500ms ease-out;
    padding:5px 5px 5px 5px;
}

.nav #bar #menu li a.selected {
    background-color: #90a23a;
    transition: all 500ms ease-out;
}

.nav #bar #menu li a:hover {
    background-color: #90a23a;
    text-decoration: underline;
    /* transition: all 500ms ease-out; */
}

.nav #bar #menu_button {
    top: 15px;
    right: 20px;
    position: absolute;
    transition: all 0.3s ease-out;
    visibility: hidden;
    opacity: 0;
}

.nav #bar #menu_button .menu-btn {
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 1px;
}

.nav.scrolled {
    background-color: #92308b !important;
    transition: background-color 500ms linear;
}

.nav.scrolled #bar {
    height: 60px !important;
}

.nav.scrolled #bar img {
    visibility: hidden;
    opacity: 0;
    /* transition: all 0.3s ease-out; */
}

.nav.scrolled #bar #menu {
    top: 20%;
}

#nav_overlay {
    position: fixed;
    right: 0px;
    top: 0px;
    background: #92308b;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    transition: all 1s ease-out;
    z-index:2;
}

#nav_overlay .close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 1px;
}

#nav_overlay #menu {
    height: 90px;
    position: absolute;
    left: 45%;
    transform: translateX(-40%);
    text-align: center;
    display: table-cell;
    vertical-align: center;
}

#nav_overlay #menu li {
    display: block;
    text-align: center;
    padding: 10px 0;
    font-size: 50px;
    font-weight: bold;
    text-transform: uppercase;
    min-height: 50px;
    transition: all 0.3s ease-out;
}

#nav_overlay #menu li a {
    color: #fff;
    padding: 5px 5px 5px 5px;
}

#nav_overlay #menu li a.selected {
    background-color: #90a23a;
}

#nav_overlay #menu li a:hover {
    text-decoration: underline;
}

#nav_overlay li:nth-child(1) {
    margin-top: 140px;
}

#nav_overlay.active {
    visibility: visible;
    opacity: 1;
}

@media(max-width: 900px) {
    .nav #bar img {
        width:50%;
        margin-left:20px;
    }

    .nav #bar #menu {
        display: none;
    }

    .nav #bar #menu_button {
        visibility: visible;
        opacity: 1;
    }

    #nav_overlay ul li a {
        font-size: 15px;
        font-family: LatoRegular !important;
        color: #fff !important;
        transition: all 500ms ease-out;
    }
}

/*--------------- content --------------- */

.content {
    /* border: solid 3px black; */
    position: relative;
    width: 100%;
}

.content img {
    max-width: 100%;
}

.emphasis {
    color: #1675a9;
    font-weight: bolder;
}

.spacer {
/*    border: solid 3px yellow;*/
    flex-grow: 1;
    min-width:20px;
}

.divider {
    background-color: #4b4b4d;
    height:20px;
}

.divider_partial {
    background-color: #4b4b4d;
    height:20px;
    max-width: 70%;
    margin-left:auto;
    margin-right:auto;
    margin-top: -30px;
    margin-bottom: 30px;
}

@media(max-width: 900px) {
}

/*--------------- section --------------- */

section {
    /* border: solid 3px blue; */
    padding: 0px 0px 0px 0px;
}

.section-heading {
    /* border: solid 3px blue; */
    color: #92308b;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-family: LatoThin !important;
    font-size: 48px;
    font-weight: bold;
    text-align:center;
    padding-bottom:30px;
}

.section-heading-contrast {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-family: LatoThin !important;
    font-size: 48px;
    font-weight: bold;
    text-align:center;
    padding-bottom:30px;
}

.section-info {
    color: #3d3935;
    font-family: LatoThin !important;
    font-size: 24px;
    font-weight: bold;
}

.section-button {
    display: flex;
    background-color: #90a23a;
    padding:5px 0px 5px 0px;
    width:220px;
    margin-left:auto;
    margin-right:auto;
}

.section-button a, .section-button a:link, .section-button a:active, .section-button a:hover {
    color:#fff;
    font-family: LatoRegular !important;
    font-size: 24px;
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 2px;
    margin-left:auto;
    margin-right:auto;
}

/*--------------- footer --------------- */

.footer {
    /* border: solid 3px white; */
    position: relative;
    background:#92308b;
    padding-top:30px;
    padding-bottom:120px;
}

.footer .phone {
    /* border:solid 3px yellow; */
    margin-left:50px;
    color: #fff !important;
    text-transform: uppercase;
    font-size: 20px;
    padding-top:20px;
}

.footer .email {
    /* border:solid 3px yellow; */
    margin-left:50px;
    color: #fff !important;
    text-transform: uppercase;
    font-size: 20px;
    padding-top:20px;
}

.footer .email a {
    font-family: LatoRegular !important;
    color: #fff !important;
    transition: all 500ms ease-out;
}

.footer #links {
    /* border:solid 3px yellow; */
    margin-left:50px;
    text-transform: uppercase;
}

.footer #links li {
    padding-left: 30px;
    font-size: 20px;
    display: inline-block;
    transition: all 500ms ease-out;
}

.footer #links li a {
    font-family: LatoRegular !important;
    color: #fff !important;
    transition: all 500ms ease-out;
}

.footer #links li a:hover {
    text-decoration: underline;
    color: #fff !important;
    transition: all 500ms ease-out;
}

@media(max-width: 700px) {
    .footer #links, .footer .email, .footer .phone {
        margin-left:30px;
    }

    .footer #links li {
        padding-left:0px;
        padding-bottom:20px;
        display: block;
        font-size: 14px;
        transition: all 500ms ease-out;
        text-align:left;
    }
}