/* CSS Document */
.clearFix {
    clear: both;
}

.navMain {
    width: 100%;
    min-width: 200px;
    float: left;
    font-family: MontserratExtraLight, serif;
}

.headerLogo {
/*    display: none;
    color: #0ff;
    font-size: 16pt;
    width: 20%;
    min-width: 200px;
    float: left;
    padding: 15px;*/
}

.headerBar {
/*    position: inherit;
    background: #6794b2;
    min-height: 60px;
    margin: auto;
    max-width: 1200px;*/
    display:none;
}


.mainImage {
    position: relative;
}

.menuButtonHolder img {
    width: 50px;
    height: 50px;
}


.menuHolder {
/*    width: 100%;
    !* adjust the width to the size of the  number of menu items so that they stay within the navMain div.  this is only needed if you want them to float to the right.  If they float to the left they the width can match that of navMain*!
!*    padding: 5px;*!
    z-index: 10;
    float: left;*/
}

.menuButtonHolder {
    display: none;
}

.menuItem {
    float: left;
    padding: 6px;
    text-transform: uppercase;
    margin: 5px;
}

.menuHolder a {
    font-family: Oswald;
    font-size: 20px;
    letter-spacing: 1.2px;

    color: #ffffff;
}

.clearFix {
    clear: both;
}

.active {


}

@media (max-width: 1090px) {
    .menuHolder {
        position: relative;
        width: 100%;
    }
}

@media (min-width: 811px) {
    .menuHolder {
        display: block !important;
    }
}

@media (max-width: 810px) {

    .navMain {
        width: 100%;
        float: none;
        text-align: left;
        clear: both;
        z-index: 20;
    }


    .menuHolder {
        position: inherit;
        width: 100%;
        padding: 0%;
        display: none;
        padding: 1% 0%;
        z-index: 10;
        float: left;

    }

    .menuHolder a {
        font-family: Oswald;
        font-size: 20px;
        letter-spacing: 1.2px;
        color: #ffffff;

    }

    .menuButtonHolder {
        display: block;
        z-index: 100;
        width: 100px;
    }

    .menuButtonHolder img {
        width: 50px;
        height: 50px;
    }

    .menuItem {
        float: none;
        width: 90%;
        padding: 12px;
        text-transform: uppercase;
    }


    .headerLogo {
        display: none;
        color: #0ff;
        font-size: 16pt;
        width: 20%;
        min-width: 200px;
        float: left;
        padding: 15px
    }


}

/***************************************************************************/
/***************************************************************************/
/****************page CSS as opposed to menu CSS****************************/
/****************Use this if you are placing a header image*****************/
/****************that the menus sits on top of******************************/
/***************************************************************************/
/***************************************************************************/
.overlayHomeHeader {
    position: absolute;
    bottom: calc(5% + 100px);
}

.overlayHomeHeader {
    position: absolute;
    bottom: calc(88% - 200px);
    text-align: left;
    margin-left: 10px;
}

.overlayHomeHeader p {
    margin: 25px 0 0 0;
    width: 50%;
}

.overlayHomeHeader H1 {
    color: #ffffff;
    font-size: 24pt;
    line-height: 1;
}

.overlayHomeHeader H4 {
    color: #ffffff;
    font-size: 20pt;
    line-height: 1;
}