/* 
 * HTML Tags 
 */

body {
    background-color: #002754;
    color: #333333;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
}


/* 
 * Colors 
 */

.blueBackground { background-color: #2D68B1; }
.darkBlueBackground { background-color: #002754; }
.darkGrayBackground { background-color: #6b6e71; }
.greenBackground { background-color: #a9c67f; }
.grayBackground { background-color: #DFDFD0; }
.whiteBackground { background-color: #FFFFFF; }


.black-bg { background-color: black; }
.gray-bg { background-color: gray; }
.green-bg { background-color: green; }
.red-bg { background-color: red; }
.white-bg { background-color: white; }

.gray-hr { border-color: gray; }
.white-hr { border-color: white; }
/*.gray-hr, .white-hr { margin: 15px; } */

.black-text { color: black; }
.blue-text { color: #2D68B1; }
.gray-text { color: gray; }
.white-text { color: white; }

a.whit-link {
    color: #FFFFFF;
    text-decoration: none;
}
a.whit-link:hover {
    color: #D88824;
    text-decoration: none;
}


/* 
 * Layout 
 */

.inner-padding-15 { padding: 15px; }
.inner-padding-15-30 { padding: 15px 30px 15px 30px; }
.inner-padding-15-45 { padding: 15px 45px 15px 45px; }
.inner-padding-l-15 { padding-left: 15px; }
.outer-margin-15 { margin: 15px; }
.outer-margin-b-15 { margin-bottom: 15px; }
.outer-margin-l-r-15 { margin: 0 15px 0 15px; }
.outer-margin-l-r-30 { margin: 0 30px 0 30px; }
.outer-padding-t-b-45 { padding: 55px 0 55px 0; }


/* 
 * Tile Links 
 */

a .tileLink { color: white; }

.tileLink:link, .tileLink:visited {
    background-color: blue;
    cursor: pointer;
    display: block;
    transition: 0.3s;
}

.tileLink:link:active, .tileLink:visited:active { color: white; }

.tileLink:hover { background-color: #D88824; }


/* 
 * Header 
 */

#PageHeader {
    background-color: #FFFFFF;
    background-image: url('../images/green-stripe.png');
    background-position: bottom;
    background-repeat: repeat-x;
    height: 140px;
}


/* 
 * Nav 
 */

#DesktopNavLinks {
    position: relative;
    top: 20px;
}
#DesktopNavLinks a {
    color: #2D68B1;
    font-size: 16px;
    text-decoration: none;
    margin-left: 18px;
}
#DesktopNavLinks a:hover,
#DesktopNavLinks a:focus {
    color: #D88824;
}

#MobileNav {
    background-color: #002754;
    height: 100%;
    overflow-x: hidden;
    position: fixed;
    right: 0;
    top: 0;
    transition: 0.3s;
    width: 0;
    z-index: 1;
}

#MobileNavLinks a {
    color: white;
    font-size: 20px;
    transition: 0.3s;
    text-decoration: none;
}

#MobileNavLinks a:hover,
#MobileNavLinks a:focus {
    color: #D88824;
}

#OpenMobileNavIcon {
    font-size: 50px;
    text-decoration: none;
}

#CloseMobileNavIcon {
    font-size: 60px;
    text-decoration: none;
}


/* 
 * Hero
 */
#DefaultHero {
    background-image: url('../images/001.jpg');
    background-position: center;
    height: 300px;
}

#OverviewHero {
    background-image: url('../images/002.jpg');
    background-position: top;
    height: 200px;
}

#ProjectsHero {
    background-image: url('../images/003.jpg');
    background-position: center;
    height: 200px;
}

#ProjectHero {
    background-image: url('../images/004.jpg');
    background-position: top;
    height: 200px;
}

#ClaimsHero {
    background-image: url('../images/005.jpg');
    background-position: center;
    height: 200px;
}

#DefaultHero,
#OverviewHero,
#ProjectsHero,
#ProjectHero, 
#ClaimsHero {
    background-repeat: no-repeat;
    background-size: cover;
}


/* 
 * Footer
 */

#Footer {
    color: #DFDFD0;
    font-size: .8em;
}


/* 
 * Contacts
 */
.contactLogo {
    height: 130px;
    margin-bottom: 45px;
    width: auto;
}


/* 
 * Links
 */
.darkBlueLink, .darkBlueLink:link, .darkBlueLink:visited {
    background-color: #2D68B1;
    color: #FFFFFF;
    display: inline-block;
    padding: 10px;
    text-decoration: none;
}
.darkBlueLink:active, .darkBlueLink:visited:active {
    background-color: #2D68B1;
    color: #FFFFFF;
}
.darkBlueLink:hover {
    background-color: #002754;
    color: #FFFFFF;
}


/* 
 * HTML Tags
 */
a {
    text-decoration: none;
}
a:hover {
    color: #D88824; 
    text-decoration: none;
}

h1 { 
    font-size: 3em; 
    font-weight: bold;
}
h1 { font-weight: bold; }
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0px;
    margin-top: 0px;
}

a.noUnderline {
    text-decoration: none;
}
a.noUnderline:hover {
    text-decoration: none;
}


/* 
 * sm 
 */

@media screen and (min-width: 768px) {
    #Header {
        height: 100px;
    }
}


/* 
 * md 
 */

@media screen and (min-width: 992px) {
}


/* 
 * lg 
 */

@media screen and (min-width: 1200px) {
}