/* General CSS */
html {overflow-y:scroll; position:relative; min-height:100%;}
body {font-family:Helvetica Neue, Helvetica, Arial, sans-serif !important; font-size:16px; min-height:100vh; display:flex; flex-direction:column;}

h1 {font-size:40px; font-weight:500; text-align:center; padding:22px 0;}
h2 {font-size:21px; font-weight:500; margin:0 0 30px 0; padding:8px 20px; line-height:1.15em; color:#666; background:#e0e0e0; animation:none !important;}
h2::after {content:""; display:block; width:0; height:0; margin:-27px -23.5px; border-right:23.5px solid transparent; border-bottom:27px solid transparent; border-left:23.5px solid transparent; border-top:27px solid #e0e0e0; position:relative; bottom:-35px; left:3.5px; z-index:-10;}

a {color:#1b8fae;}
a:hover {background:#d6f6ff;}
b {font-weight:bold;}
i {font-style:italic;}
input {min-width:56px;}
blockquote {font-weight:bold; background:#eee; padding:10px; margin:0 36px 0 36px; border-left:4px solid #ccc; color:#666; line-height:1.6;}
td {vertical-align:middle; padding:0 3px; font-size:16px;}
ol {color:#666; margin-top:0; margin-bottom:0; padding:10px 20px; font-size:16px; line-height:24px; list-style-type:decimal;}
hr {margin-top:1em; margin-bottom:0; color:#bbb; border:1px solid #bbb; height:0;}

.no-script-alert {font-size:16px; color:#000; font-weight:bold; text-align:center; horiz-align:center; margin:0 auto; display:block;}
.blockquote-source {text-align:right; padding-top:0; padding-left:46px; padding-right:46px; font-size:80%; font-style:normal;}

header {padding:0; margin:0; min-height:60px; width:100%; z-index:1000; display:flex; overflow:hidden; flex-direction:column; background:url(../img/header-bg-min.jpg) no-repeat center 0 #1b8fae; background-size:cover;}
header > nav {height:auto; min-height:40px; background:#1b8fae; border-bottom:1px solid #aaa; overflow:visible;}
nav a {font-weight:normal; padding: 10px 20px; display:block; color:#fff !important; font-size:21px; line-height:24px; height:24px; text-decoration:none;}
nav a.selected, nav a:hover {color:#666 !important; background:#acebfb !important;}
nav li {width:100%;}
.navbar {width:100%; padding:0 !important; margin:auto; display:table; clear:both; height:auto; min-height:40px; list-style:none;}
.navbar > li {float:left; vertical-align:baseline; box-sizing:border-box; max-height:44px;}
header > .title {width:100%; padding:0; min-height:90px; margin:auto; background:transparent;}
header > .title h1 {font-size:40px; line-height:normal; padding:22px 20px; background:none; color:#fff;}
header > .title h1 > span {font-family:Cambria,"Hoefler Text","Liberation Serif",Times,"Times New Roman",serif; font-weight:normal; font-style:italic; font-size:110%; line-height:44px !important;}
header > .title h1 a {color:white; text-decoration:none; background:none !important;}
header > .title h1 a:link {background:none !important;}
header > .title h1 a:hover {text-decoration:underline; background:none !important;}

article {min-height:100%;}
article p {color:#666; margin-bottom:0; margin-top:0; padding:10px 20px; font-size:16px; line-height:24px;}
section {margin:0 auto; padding:10px 20px;}
article section p {padding:10px 0;}
.content {position:relative; width:100%; height:100%; min-height:available; transition:height 200ms; padding:0 0 2em; margin:0 auto auto; }
.tabs {margin:0 auto; padding:0; border:none; float:none;}
.tab-content {min-height:auto;}
.tab-content > li {display:none;}
.tab-content > li > article > * {animation:fadeEffect 0.2s;}
.tab-content > .selected {display:block;}

.sub-nav {height:auto; background:#666; border-bottom:1px solid #bbb; overflow:hidden; font-size:0;}
.sub-nav a {color:#eee !important;}
.sub-nav a.sub-selected, .sub-nav a:hover {color:#fff !important; background:#888 !important;}
.sub-navbar {margin:0; padding:0; display:flex; align-items:stretch; align-content:stretch; flex-flow:row wrap;
    height:auto; list-style:none; horiz-align:center; overflow:hidden;}
.sub-navbar > li {display:inline-block; vertical-align:baseline; box-sizing:border-box; max-height:44px; text-align:center;}
.sub-tabs {padding:0; margin:0;}
.sub-tab-content {min-height:auto;}
.sub-tab-content > li {display:none;}
.sub-tab-content > li > article > * {animation:fadeEffect 0.2s;}
.sub-tab-content > .sub-selected {display:block;}

footer {position:relative; width:100%; height:auto; background-color:#262626; color:#C7C7C7; align-self:flex-end; border-top:1px solid #bbb;}
.footer {padding-right:15px; padding-left:15px;}
.footer-text::selection {color:#666; background:#D1D3D4;}
.footer-text {margin:16px 0; text-align:center; font-size:16px; line-height:30px;}
.footer-text > a:link {color:#1b8fae;}
.footer-text > a:hover {color:#EEF1F2 !important; background:#423F40 !important;}
.footer-text > a[href^="mailto"] {color:#1b8fae; white-space:nowrap;}
.footer-small > .footer > .footer-text {line-height:24px; margin:10px auto;}

.no-transition {transition-property:none !important; transform:none !important; animation:none !important;}

.iframe-container {overflow:hidden; padding-top:56.25%; position:relative;}
.iframe-container iframe {border:0; height:100%; left:0; position:absolute; top:0; width:100%;}
.iframe-container-4x3 {padding-top:75%;}

/* CSS specific to the home pages (warning: THESE CLASSES PROBABLY OVERWRITE A LOT OF THINGS) */
.home-content {width:calc(100% - 20px) !important; padding-bottom:0;}
.home-title {max-width:1000px !important;}
.home-links {max-width:100%; display:flex; flex-flow:row wrap; justify-content:center; padding:10px;}
.home-links a {width:calc(100% - 40px); max-width:420px; background:white !important; margin:10px 18px; padding:2px; overflow:hidden; display:flex; flex-flow:row nowrap; align-items:center; text-decoration:none; border:1px dashed #ccc;}
.home-links a:hover {border:1px solid #333;}
.home-links a:hover > p {text-decoration:underline;}
.home-links a > p {width:100%; height:auto; padding:8px 12px; font-size:24px; font-weight:500; text-align:right;}
.home-links a > img {min-height:80px; height:80px; padding:4px;}
.home-links-small a > p {font-size:20px}

.home-nav-boxes {width:100%; margin:0; padding:0; display:flex; flex-flow:row wrap; justify-content:center; align-content:center;}
.home-nav-boxes > a {display:flex; flex-flow:row nowrap; margin:20px 20px; background:#eee; color:#fff; min-width:220px; max-width:300px; width:auto; height:max-content; font-size:28px; text-decoration:none; overflow:hidden; outline:0 solid #fff; transition:outline 0.2s ease;}
.home-nav-boxes > a > img {width:calc(100% + 10px); height:calc(100% + 10px); min-width:calc(100% + 10px); min-height:calc(100% + 10px); filter:blur(3px) brightness(80%); transition:filter 0.4s ease; margin:-5px;}
.home-nav-boxes > a > p {text-align:center; transition:font-size 0.4s ease; box-sizing:border-box; width:100%; flex:none; margin:auto auto auto -100%; z-index:100; text-shadow:#000 0 1px 8px;}
.home-nav-boxes > a:hover {outline:1px solid #333;}
.home-nav-boxes > a:hover > p {font-size:110%;}
.home-nav-boxes > a:hover > img {filter:blur(1px) brightness(100%);}
.home-nav-boxes > h1 {width:100%; margin-top:-30px; text-align:center;}

/* CSS specific to index pages */
.index-body {background:#4CACB8;}
.index-header {background:rgba(0,0,0,.5) !important;}
.index-footer {background:rgba(0,0,0,.5) !important; border:none; color:#fff;}
.index-footer a {color:#fff !important;}

.index-subtitle {width:100%; text-align:center; font-size:28px; color:white; margin-bottom:8px;}
.index-links {padding:0; margin-top:8px; display:flex; flex-flow:row wrap; align-content:center;}
.index-item {background:rgba(255,255,255,.6); width:calc(100% - 32px); margin:8px auto; display:flex; color:#333; text-decoration:none; overflow:hidden; border-radius:4px; border:1px solid rgba(0,0,0,0) !important; height:84px;}
.index-item:hover {background:rgba(255,255,255,.85); border:1px solid #333 !important;}
.index-item:hover .index-title {text-decoration:underline;}
.index-image {padding:0 !important; margin:-4px; max-width:none; min-width:88px !important; width:88px !important; height:88px !important;}
.index-label {padding:4px; align-self:baseline; padding-left:14px;}
.index-title {font-size:21px; font-weight:500; padding-bottom:8px; line-height:1.15em;}

/* less than 320px */
@media only screen and (max-width:320px) {
    .home-links a > img {display:none;}
    br {display:none;}
}

/* 450px and up */
@media only screen and (min-width:450px) {
    header > .title {width:100%; padding:0;}
    .navbar, .content {width:calc(100% - 40px);}

    .index-links {padding:10px;}

    .home-links a {width:calc(50% - 50px);}

    h1 {max-width:100%;}
    nav li {max-height:40px; width:max-content;}
    nav a {font-size:18px; line-height:20px; font-weight:normal; padding-left:20px; padding-right:20px; height:20px;}
}

/* 600px and up */
@media only screen and (min-width:600px) {
    header > .title {width:calc(100% - 60px); padding:0 15px;}
    .navbar, .content {width:calc(100% - 60px);}

    .index-links {padding:20px;}

    nav a {font-size:16px; line-height:21px; font-weight:bold; padding-left:30px; padding-right:30px;}
}

/* 768px and up */
@media only screen and (min-width:768px) {
    header > .title {
        width:calc(100% - 80px);
        background:url(../img/fmnhs-logo-min.png) no-repeat right 30px center;
    }

    h1 {text-align:left; padding:22px 30px; max-width:100%;}

    .navbar, .content {width:calc(100% - 80px);}

    .index-item {width:calc(50% - 32px); margin:16px auto;}
}

/* 992px and up */
@media only screen and (min-width:992px) {
    header > .title {width:calc(100% - 100px); max-width:1140px;}
    .navbar, .content {width:calc(100% - 100px); max-width:1140px;}
}

/* 1240px and up */
@media only screen and (min-width:1240px) {
    header > .title {width:1140px;}
    .navbar, .content {width:1140px;}
}

/* animations */
@keyframes fadeEffect {
    from {opacity:0;}
    to {opacity:1;}
}