/* colors ref */
.blue{ color:#25408F; }

/* structure */
html, body{
    margin:0; padding:0;
    height:100%;
}
header, #main, footer{
    width:100%;
}
header{ background-color:#ffffff; color:#4A4A4D; min-height:84px; }
#main{  background-color:#ffffff; color:#4A4A4D; }
footer{ background-color:#25408F; color:#ffffff; }

.inner{
    max-width:1168px; /* 1200 -16px each side */
    margin:0 auto;
    overflow:auto;
    position:relative;
}
    header .inner{
        overflow:visible;
        padding:1em 2em;
    }
    #hero .inner{
        display:table-cell;
        vertical-align:middle;
        padding:20px 0;
        height:400px;
    }
    #intro .inner{
        padding:3em 2em;
    }
    #cards .inner{
        padding:4em 2em 2em 2em;
    }
    footer .inner{
        padding:2em 2em;
    }

/* sticky footer */
html, body{
    display: flex;
    flex-direction: column;
}
#main{
    flex: 1 0 auto;
}
footer{
    flex-shrink: 0;
}

/* sections */
header{}
#logo{
    float:left;
}
#login{
    float:right;
    position:absolute;
    top:2em; right:2em;
    z-index:99;
}
#login ul, #login li{
    display:block;
    margin:0;
    padding:0;
}
#login>ul{ }
#login>ul>li{ text-align:right; }
#login ul li ul{ display:none; }



.links{
    position:absolute;
    top:3em;
    right:0;
    background-color:#fff;
    text-align:left;
    overflow:auto;
}
.links a{
    display:block;
    font-size:14px;
    line-height:18px;
    text-decoration:none;
    margin:1.25em;
    min-width:15.75em;
}

@media only screen and (min-width: 375px) {
    .links a{
        min-width:19.5em;
    }
}

@media only screen and (min-width: 768px) {
    .links{
        position:relative;
        top:auto;
        left:auto;
        right:auto;
        min-width:auto;
    }
}

#hero{
    display:table;
    width:100%;
    
    text-align:center;
    background-color:#25408F;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    
    color:#fff;
    align-items: center;
    justify-content: center;
}

img.responsive{
    display:block;
    width:100%;
    height:auto;
}

#cards{
    background-color:#f2f2f4;
}
.card{
    margin:0 .5em 2em .5em;
    box-shadow: 0px 4px 10px #0000001A;
}
.card>div{
    text-align:center;
    overflow:auto;
}
.card-image img{
    display:block;
    width:100%;
    height:auto;
    background-color:#fff;
    padding-bottom:1em;
}
.card-top, .card-middle, .card-bottom{
    background-color:#fff;
    padding:0 2em 1em 2em;
}
@media only screen and (max-width: 1199px) {
    .card-top, .card-middle{ height:auto !important; }
}

/* typography */
body{
    font-family: 'Open Sans', Arial, sans-serif;
    font-size:16px;
    line-height:24px;
    font-weight:400;
    color:#4A4A4D;
}
h1{
    font-size:40px;
    line-height:55px;
    font-weight:100;
    max-width:85%;
    margin:auto;
}
h2{
    font-size:18px;
    line-height:24px;
    font-weight:600;
    color:#25408F;
}
p.intro{
    font-size:18px;
    line-height:30px;
    text-align:center;
}
p.note{
    color:#4A4A4D;
    font-size:12px;
    line-height:16px;
    font-style:italic;
}

footer p{
    font-size:12px;
    line-height:24px;
    font-weight:100;
}
@media only screen and (min-width: 768px) {
    h1, p.intro{ margin-left:auto; margin-right:auto; }
    h1{ max-width:650px; }
    p.intro{ max-width:700px; } 
    footer p{ display:inline; }
    footer p.copy{ margin-left:1em; }
}

/* misc */
a{
    color:#25408F;
    text-decoration:underline;
}
h2 a{ text-decoration:none; }
a.cta{
    color:#25408F;
    text-transform:uppercase;
    text-decoration:none;
    letter-spacing:1.2px;
    font-weight:700;
    font-size:12px;
    line-height:20px;
}
a.cta span{
    font-size:20px;
    line-height:20px;
}
button, .button{
    display:inline-block;
    background-color:#fff;
    padding:15px 30px;
    border-radius:100px;
    border:0;
    
    color:#25408F;
    text-transform:uppercase;
    text-decoration:none;
    letter-spacing:1.2px;
    font-weight:700;
    font-size:12px;
    line-height:20px;
}
.hidden{
    display:none;
}
img.center{
    display:block;
    margin:0 auto;
}
br.no-mob, br.no-mob-desk{
    display:none;
}
@media only screen and (min-width: 768px) {
    br.no-mob{
        display:inline;
    }
}
@media only screen and (min-width: 1200px) {
    br.no-mob-desk{
        display:inline;
    }
}

/* responsive */
.one-third, .two-thirds{
    width:100%;
}
@media only screen and (min-width: 768px) {
    .cols{
        text-align:center;
    }
    .col{
        display:inline-block;
        vertical-align:top;
    }
    .one-third{
        width:66%;
    }
    .two-thirds{
        width:66%;
    }
}
@media only screen and (min-width: 1200px) {
    .one-third{
        width:33%;
    }
    .two-thirds{
        width:66%;
    }
}