/* CSS Resets */
@import url("reset.css");

/* MAIN BODY */
html {position: relative; min-height: 100%; min-width:333px}
body {font-family: 'Roboto', sans-serif; font-size:0.85em; margin:0 0 8.5em; padding:0; color:#444; line-height:1.5em; font-weight:lighter; background-color:#EAEAEA; font-size:.95rem;}

#main {margin:1em 15px;}
.home #main {margin-top:0em;}
body.home, body.dashboard {background-color:#EAEAEA;}
.clear {clear: both;}


/* PARAGRAPH SETTINGS */
a, .link {color:#006EA3; text-decoration: none; cursor: pointer;}
a:hover, .link:hover {text-decoration: underline; color:#005882}
p {margin-bottom:1em; text-align:justify; line-height: 200%}


/* HEADER AND FOOTER */
#footer {padding: 1.2em 15px 0 15px}
#header {padding: 2em 15px 2em 15px; border-top:2px solid #235889}
#nav, .fnav {margin-top:6px; float:right; position:relative; text-align:center;}
ul#nav li, ul.fnav li {margin:0 0.5em 0 0; float:left; position:relative; display:block; padding-top:10px;}
ul#nav li:last-child,  ul.fnav li:last-child {margin:0;}

#footer ul {margin:0;}
#footer ul li {padding:0;}
#footer {position: absolute; bottom: 0; width:100%; height: 4em}
#footer p {display:inline-block}

#header, #footer {background-color:#EAEAEA;}

/* HEADERS */
h1 {margin-bottom: 1.5em; border-bottom: 1px solid #DDD; padding: 0; color:#555; font-size: 1.3em;  line-height: 2em; font-weight:bold}
h1 span {border-bottom: 3px solid #006EA3; padding-bottom:6px}
h2, h3, h4 {font-weight:normal; font-size: 1.2em; line-height:1.5em; margin-bottom:0.5em;}
h2 {color: #246591}

/* CSS Grid */
* {box-sizing: border-box;}

.message-area {
    display:flex; justify-content:center; padding:2rem;
}

.message-area .inner {
    max-width:560px; 
    width:100%; 
    background:#fff; 
    border:1px solid #e6e6e6;  
    padding:2rem; text-align:center;
    border-radius:8px; 
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
}

.homepage-grid .grid-item {
    background-color:#fff;
    padding: 5em 2em 2em 2em;
    border-radius:8px; 
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
    min-width:268px;
    min-height:268px;

    display: flex;              /* enable flexbox */
    flex-direction: column;     /* stack children vertically */
    justify-content: center;    /* center vertically */
    align-items: center;        /* center horizontally */
    text-align: center;         /* keep text centered */
}
.homepage-grid {
    max-width: 940px;
    margin: 0 auto; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    grid-gap: 10px;
    grid-auto-rows: minmax(auto, auto);
}

.cta-button {
    border: 1px solid #006EA3;
    color: #006EA3;
    text-decoration: none;
    display: inline-block;
    border-radius:6px;
    font-weight:600;
    padding:.65rem 1.1rem;
}

.cta-button:hover {
    text-decoration: none;
    color: white;
    background-color: #006EA3;
    
}

.grid-item img {
    max-width: 210px;
    height: auto;
}

@media only screen and (max-width: 586px) {
    .homepage-grid #features {grid-column: span 1;}
    #features, ul#nav .welcome, #notifications {display:none}
    .fnav {float:left; display:block; margin-right:1em !important;}
	.fnav:after {content: ''; display: block; clear: both;}
    #footer p {display:inline-block}
    #footer {height:6.8em}
}

@media only screen and (max-width: 775px) {
    .attention {float:none; width:100%; margin-left:0}
    p {text-align:left; display:block}
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(latin-ext_roboto.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(latin_roboto.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* FONTS */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(latin-ext_roboto.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(latin_roboto.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* BROWSER FIX CSS */
@supports (-ms-accelerator:true) {
   /* IE Edge 12+ CSS */
    html {min-width:980px;}
    .homepage-grid .grid-item {width:305px; height: 310px; float:left; margin-right:12px;}
    .homepage-grid .grid-item:nth-of-type(5), .homepage-grid .grid-item:nth-of-type(8) {margin-right:0;}
    .grid-item, #notifications, #features {margin-bottom:12px}
    #features {width: 622px; float:left; margin-right:12px}
    #notifications {width:305px; float:left;}
}

@supports (-ms-ime-align:auto) {
    /* IE Edge 16+ CSS */
    html {min-width:980px;}
    .homepage-grid .grid-item {width:305px; height: 310px; float:left; margin-right:12px;}
    .homepage-grid .grid-item:nth-of-type(5), .homepage-grid .grid-item:nth-of-type(8) {margin-right:0;}
    .grid-item, #notifications, #features {margin-bottom:12px}
    #features {width: 622px; float:left; margin-right:12px}
    #notifications {width:305px; float:left;}
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* IE 11/11 CSS */
    html {min-width:980px;}
    .homepage-grid .grid-item {width:305px; height: 310px; float:left; margin-right:12px;}
    .homepage-grid .grid-item:nth-of-type(5), .homepage-grid .grid-item:nth-of-type(8) {margin-right:0;}
    .grid-item, #notifications, #features {margin-bottom:12px}
    #features {width: 622px; float:left; margin-right:12px}
    #notifications {width:305px; float:left;}
}