/*==============================
=            Header            =
==============================*/
.front header .logo {
    margin: 4em 4% 0;
    padding: 0;
    width: auto;
    font-family: 'Oswald',sans-serif;
    text-align: center;
}

.front header .logo ul {
    margin-left: -2%;
    margin-right: -2%;
    font-size: 1.11em;
    display: none;
}

.front header .logo.hover ul/*,
.front header .logo:hover ul*/ {
    display: block;
}

.front header .logo ul li {
    background: rgba(255,255,255,0.6);
    color: #3a3a3a;
    text-transform: uppercase;
    vertical-align: middle;
    padding: 10px;
    margin: 0.5em 2%;
}

@media (max-width: 767px) {
    .front header .logo.hover + .cta/*,
    .front header .logo:hover + .cta*/ {
        display: none;
    }
}

@media (min-width:768px) {
    .front header .logo ul {
        font-size: 1em;
    }

    .front header .logo ul .thirds {
        width: 29.3333%;
    }

    .front header .logo ul li {
        height: 86px;
    }
}

@media (min-width: 1093px) {
    .front header .logo ul {
        font-size: 1.11em;
    }
}

@media (min-width: 1280px) {
    .front header .logo ul li {
        height: auto;
    }
}

@media (min-width: 1348px) {
    .front header .logo ul li.second,
    .front header .logo ul li.third {
        line-height: inherit;
    }
}

.front header .logo ul li a {
}

.front header .metro-container {
    overflow: visible;
}

.front header .hero img {
    width: 100%;
}

.front header .cta {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.front header .cta > div {
    background: rgba(170,28,42,0.85);
    padding: 1.13em 0;
}

.front header .cta > div + div {
    background: rgba(0,93,140,0.85);
}

.front header .cta a {
    padding: 0.40em 0.56em;
    border: 3px solid #ffffff;
    background: rgba(255,255,255,0.1);
    width: 62.933%;
    margin: 0 auto;
    display: block;
    font-family: 'Oswald',sans-serif;
    font-size: 1.6em;
    letter-spacing: 6px;
}

.front header .cta a:hover {
    background: none;
}

@media (min-width:768px) {
    .front header .logo {
        width: 62.36%;
        margin: 2.8em auto 0;
    }

    .front header .cta a {
        padding: 0.18em 0.56em 0.13em;
    }
}

@media (min-width: 960px) {
    .front header .logo {
        margin-top: 3.9em;
        padding-bottom: 60px;
    }

    .front header .cta > div {
        padding: 2.15em 0;
    }

    .front header .cta a {
        font-size: 2em;
        letter-spacing: 4px;
    }
}

@media (min-width: 1280px) {
    .front header .logo {
        width: 62.36%;
        margin: 5.8em auto 0;
    }

    .front header .cta a {
        width: 43.4%;
    }

    .front header .cta .first a {
        margin-right: 19.7%;
    }

    .front header .cta .second a {
        margin-left: 19.7%;
    }
}

/*===============================
=            Content            =
===============================*/
.front .metro {
    opacity: 0.6;
}

.front #content-wrapper {
    padding: 0;
}

/*----------  4 Boxes  ----------*/
#missions .metro-container.hover img.metro/*,
#missions .metro-container:hover img.metro*/ {
    opacity: 0.85;
}

#missions .metro-content {
    font-family: 'Muli',sans-serif;
    font-size: 1.8em;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
}

#missions .metro-content:before {
    content: " ";
    height: 100%;
    vertical-align: middle;
    width: 1px;
    display: inline-block;
}

#missions .metro-content div {
    vertical-align: middle;
    display: inline-block;
    letter-spacing: 7px;
    text-align: left;
}

#missions .metro-content > div > a {
    font-size: 1.333em;
    font-family: 'Oswald',sans-serif;
    display: block;
    margin-top: 5px;
    letter-spacing: 5px;
}

#missions .metro-content > div > a:before {
    content: "";
    display: block;
    width: 80%;
    height: 1px;
    background: #ffffff;
}

    #missions .metro-content > div.hover > a:before/*,
    #missions .metro-content > div:hover > a:before*/ {
        width: 100%;
    }

#missions .metro-content ul {
    display: none;
}

#missions .metro-content > div.hover ul/*,
#missions .metro-content > div:hover ul*/ {
    display: block;
}

#missions .metro-content ul li {
    text-align: right;
    margin: 15px 0;
    font-size: 1.111rem;
    line-height: 1;
}

#missions .metro-content > div.hover > a,
/*#missions .metro-content > div:hover > a,*/
#missions .metro-content ul li a {
    background: rgba(255,255,255,0.6);
    color: #000000;
    padding: 0 10px;
}

#missions .metro-content ul li a {
    text-transform: none;
    font-family: 'Oswald',sans-serif;
    text-align: right;
    letter-spacing: 0;
    border: 0;
    display: inline;
    padding: 10px;
}

#missions .metro-content ul li a:after {
    content: "\f105";
    font-family: 'FontAwesome',sans-serif;
    font-weight: 300;
    padding-left: 8px;
    line-height: 1;
    font-size: 1.7em;
    vertical-align: sub;
}

@media (min-width:768px) {
    #missions .metro-content {
        font-size: 1.6em;
    }

    #missions .metro-content ul li {
        padding: 0;
    }

    #missions .metro-content ul li a {
        padding: 5px 10px;
    }
}

@media (min-width: 960px) {
    #missions .metro-content {
        font-size: 2em;
    }
}

@media (min-width: 1280px) {
    #missions .metro-content div {
    padding: 50px;
    }
}

/*----------  Duty Quote  ----------*/
#quote {
    background: #3a3a3a;
    text-transform: uppercase;
    font-family: 'Muli',sans-serif;
    font-weight: 300;
    overflow: auto;
    position: relative;
    padding: 2.65em 13% 1.7em 12.3%;
    text-align: center;
}

#quote h2 {
    font-size: 1.4em;
    font-weight: lighter;
    letter-spacing: 8px;
    margin: 0;
    display: inline-block;
}

#quote:before,
#quote:after {
    content: url('/Sitefinity/WebsiteTemplates/GenJTemplate/App_Themes/GenJ/Images/icon_star.png');
    position: absolute;
    top: 50%;
    margin-top: -15px;
}

#quote:before {
    left: 4%;
}

#quote:after {
    right: 4%;
}

#quote .author {
    font-size: 0.7143em;
    text-align: center;
    font-style: italic;
    letter-spacing: 5px;
    margin-top: 32px;
    display: block;
}

@media (min-width:768px) {
    #quote h2 {
        font-size: 2em;
        letter-spacing: 7px;
    }

    #quote .author {
        text-align: right;
        padding-right: 90px;
        margin-top: 7px;
    }
}

@media (min-width: 960px) {
    #quote {
        text-align: center;
        padding: 4.25em 13% 2.5em;
    }

    #quote:before {
        left: 10%;
    }

    #quote:after {
        right: 10%;
    }

    #quote h2 {
        margin-left: 30px;
        margin-right: 30px;
    }
}

/*----------  Latest BLogs  ----------*/
#latest-blogs {
    margin: 3.9em 4% 4.1em;
}

#latest-blogs h2 {
    text-transform: uppercase;
    font-family: 'Muli',sans-serif;
    font-size: 1.3333em;
    font-weight: bold;
    letter-spacing: 4.86px;
    border-bottom: 1px solid #3a3a3a;
    padding-bottom: 25px;
    margin-bottom: 1.8em;
}

#latest-blogs article {
    margin-bottom: 3.6em;
}

#latest-blogs h3 {
    font-family: 'Oswald',sans-serif;
    font-size: 1.2em;
    font-weight: 400;
    margin-top: 1.4em;
    letter-spacing: 2.45px;
    margin-bottom: 0.3em;
}

#latest-blogs p {
    margin: 0;
    line-height: 1.5;
    letter-spacing: 0;
}

#latest-blogs p a {
    color: #aa1c2a;
    text-decoration: underline;
}

@media (min-width: 768px) and (max-width: 959px) {
    #latest-blogs p {
        display: none;
    }
}

#latest-blogs .btn {
    display: block;
    margin: 3.9em auto 0;
    width: 82.8%;
    padding: 0.6em;
    font-size: 1.2em;
}

@media (min-width: 768px) {
    #latest-blogs {
        padding: 2em;
        margin: 0;
    }

    #latest-blogs h2 {
        letter-spacing: 3.56px;
        padding-bottom: 13px;
        margin-bottom: 1em;
        font-size: 1.2667em;
    }

    #latest-blogs article {
        margin-bottom: 1.8em;
    }

    #latest-blogs h3 {
        letter-spacing: 0.65px;
        margin-bottom: 0.1em;
        font-size: 1.4em;
    }

    #latest-blogs p {
        line-height: inherit;
        letter-spacing: inherit;
    }

    #latest-blogs .btn {
        font-size: 1.4777em;
        width: 60%;
        margin-top: 59px;
        padding: 13px;
    }
}

@media (min-width: 960px) {
    #latest-blogs h2 {
        font-size: 1.6667em;
    }

    #latest-blogs .btn {
        font-size: 1.6777em;
        width: 54%;
    }
}

@media (min-width: 1280px) {
    #latest-blogs {
        padding-left: 10.2%;
        padding-right: 2.8%;
    }

    #latest-blogs h3 {
        font-size: 1.5em;
    }
}

@media (min-width: 1440px) {
    #latest-blogs {
        padding-left: 14.2%;
    }
}

/*----------  Find a club  ----------*/
.front #get-connected {
}

.front #get-connected div {
    padding: 25% 0;
}

@media (min-width: 768px) {
    .front #get-connected .metro {
        height: 100%;
        display: none;
    }

    .front #get-connected {
        background: url("/Sitefinity/WebsiteTemplates/GenJTemplate/App_Themes/GenJ/Images/bg_map_d.jpg");
        background-size: cover;
    }

    .front #get-connected div {
        padding: 25% 0;
    }
}

@media (min-width: 960px) {
    .front #get-connected h3 {
        font-size: 1.889em;
        padding-left: 18.5%;
        text-align: left;
    }

    .front #get-connected h2 {
        font-size: 2.5em;
        padding: 0.45em 7.71% 0.75em;
    }
}

@media (min-width: 1280px) {
    .front #get-connected h2 {
        padding: 0.45em 18.71% 0.75em;
    }
}

/*----------  Sign Up Form  ----------*/
.front #SignUp {
    margin: 2.9em 1em;
}

@media (min-width: 768px) {
    .front #SignUp {
        background: url("/Sitefinity/WebsiteTemplates/GenJTemplate/App_Themes/GenJ/Images/bg_signup.jpg") top center no-repeat;
        background-size: cover;
        padding: 66px 7.65% 54px;
        margin: 0;
    }

    .front #SignUp h2 {
        letter-spacing: 3px;
    }

    .front #SignUp h3 {
        margin-top: 0;
        padding-top: 18px;
        margin-bottom: 0;
    }
}

@media (min-width: 1280px) {
    .front #SignUp {
        padding: 66px 15.65% 54px;
    }
}

/*----------  Adjustments for small small screens  ----------*/
@media (max-width: 480px) {
    #missions .metro-content {
        font-size: 1.5em;
    }

    #missions .metro-content ul {
        margin-top: 10px;
    }

    #missions .metro-content ul li {
        margin: 5px 0;
        font-size: 0.8rem;
    }
    
    #missions .metro-content ul li a {
        padding: 5px;
    }

    .front header .cta a {
        letter-spacing: 0;
    }

    #quote h2 {
        letter-spacing: 2px;
    }
}