html, 
body { color: #333; font-family: "Roboto", sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; }
.container { padding: 0; width: 100%; }

/* Links */
a { transition: background-color .2s, color .2s; padding: 4px 0; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; }
button { background: #ccc; border: 0; margin: 6px 0 6px; padding: 8px 14px 6px; transition: background .2s, color .2s; }
button:hover { background: #999; }

/* Headers */
h1 { font-size: 1.4em; margin: 0; transition: font-size .4s; }
h2 { font-size: 2.8em; margin: 26px 0; }
h3 { font-size: 2.2em; margin: 46px 0 22px; }
h4 { font-size: 1.6em; margin: 46px 0 12px; }
h5 { font-size: 1.4em; margin: 46px 0 12px; }
h6 { font-size: 1.2em; margin: 46px 0 12px; }

/* Paragraphs & Lists */
p { line-height: 1.6em; margin: 22px 0; }
ul, 
ol { margin: 20px 0; }
li { line-height: 1.6em; margin: 12px 0; }
img { max-width: 100%; }

/* Header */
header { align-items: center; background-color: #F2532C; color: #fff; display: flex; justify-content: space-between; padding: 10px 1.5%; transition: padding .4s; }
header nav ul { list-style: none; margin: 0; padding: 0; }
header nav li { display: inline-block; font-size: 1em; margin: 0; margin-left: 44px; position: relative; transition: font-size .4s, margin .4s; }
header nav li a { color: #fff; display: block; padding: 0; }
header nav li a:hover,
header nav li a:focus { color: #dad; }

#translation-widget img { display: inline-block; }
#translation-widget label { left: -9999px; position: absolute; }
#translation-widget select { background: #F2532C; border: 0; color: #fff; cursor: pointer; display: inline-block; }
#google_translate_element { display: none; }

#skiptocontent { background-color: #fff; border-radius: 8px; box-shadow: 2px 2px 8px 0 #000; font-size: 1.3em; left: -9999px; padding: 6px 12px; position: absolute; top: -9999px; }
#skiptocontent:focus { left: 8px; top: 8px; }

#mobile-menu { background: transparent; border: 0; display: none; margin: 0; padding: 0 4px; }
#mobile-menu .line { background: #fff; display: block; height: 3px; left: 0; margin: 0 0 6px; position: relative; top: 0; transition: .3s; width: 26px; }
#mobile-menu .line.btm { margin: 0; }

.ada-element { left: -9999px; position: absolute; }

/* General Formatting */
#content > section,
footer > section { padding: 48px 8% 60px; }

.row { display: flex; gap: 5%; justify-content: space-between; margin: 0; }
.row:before,
.row:after { display: none; }
#content .row > div { padding: 0; }

/* Footer */
#footer-top { align-items: center; background: #333333; background-image: url("../images/footer-bg.png"); background-size: cover; color: #fff; display: flex; justify-content: space-between; }
#footer-top h2 { font-size: 1.3em; margin: 0 0 5px; }
#footer-top a { color: #fff; }
#footer-top a:hover,
#footer-top a:focus { color: #FF703C; }

#footer-bottom { align-items: center; background: #56803A; color: #fff; display: flex; justify-content: space-between; padding-top: 1px !important; padding-bottom: 1px !important; }
#footer-bottom a:hover img,
#footer-bottom a:focus img { filter: brightness(0); }

/* Homepage */

#page-title { background-color: #000; background-image: url("../images/Images/herobackcropped.jpg"); background-size: cover; padding-top: 0 !important; padding-bottom: 0 !important; }
#page-title div { background-image: linear-gradient( 60deg, rgba(35,35,35,.7), rgba(34,92,89,.8) ); backdrop-filter: blur(6px); opacity: 0; overflow: hidden; padding: 160px 100px; width: 70%; }
#page-title h1 { color: #fff; font-size: 4.4em; font-weight: 900; left: -300px; margin-top: 20px; opacity: 0; position: relative; text-shadow: 0 4px 10px #111; text-transform: uppercase; }
#page-title h1 span { display: block; left: 200px; opacity: 0; position: relative; }
#page-title h1:before { background: #4AC4D6; border-left: 110px solid #20C300; border-right: 35px solid #F2532C; bottom: 100%; box-shadow: 0 4px 10px -2px #111; content: ""; height: 141px; margin-bottom: 10px; opacity: 0; position: absolute; width: 220px; }

#page-title.animate div { opacity: 1; transition: opacity .8s ease-in-out 1.2s; }
#page-title.animate h1 { left: 0; opacity: 1; transition: 1s ease-in-out 1.4s; }
#page-title.animate h1 span { left: 0; opacity: 1; transition: 1.5s ease-in-out 2.2s; }
#page-title.animate h1:before { height: 24px; opacity: 1; transition: 1.8s ease-in-out 2.8s; }

#intro p { color: #0A4968; font-size: 1.3em; }

#projects { background: #086B76; background-image: linear-gradient( 120deg, #086B76, #023C42 ); color: #fff; position: relative; }
#projects > div { width: 50%; }
#projects h2 { font-size: 1.6em; font-weight: 700; }

#omaha-sites h2 { color: #096B76; font-size: 1.3em; font-weight: 700; text-align: center; }
#omaha-sites ul { display: flex; justify-content: space-between; list-style: none; margin: 0 auto; max-width: 1300px; padding: 0; width: 100%; }

/* Tabs */
.hdr-tabs { align-items: flex-start; display: flex; gap: 5%; flex-direction: row-reverse; justify-content: space-between; margin: -54px 0 54px; }
.hdr-tabs .hdr-tablist { display: none; width: 70%; }
.hdr-tabs.has-js .hdr-tablist { display: block; position: relative; }
.hdr-tabs .hdr-tablist > img { width: 100%; }
.hdr-tabs .hdr-tab { background: transparent; height: 9.75%; left: 82.8%; margin: 0; padding: 0; position: absolute; top: 45.2%; width: 5.75%; }
.hdr-tabs .hdr-tab > div { background: #A44128; border-radius: 50%; box-shadow: none; height: 43%; left: 0; position: absolute; top: 0; transition: .4s; width: 43%; }
.hdr-tabs .hdr-tab > div:nth-of-type(2) { left: 52%; }
.hdr-tabs .hdr-tab > div:nth-of-type(3) { top: 52%; transition: .4s ease-in-out .01s; }
.hdr-tabs .hdr-tab > div:nth-of-type(4) { left: 52%; top: 52%; transition: .4s ease-in-out .01s; }
.hdr-tabs .hdr-tab:hover > div,
.hdr-tabs .hdr-tab:focus > div  { background: #FF703C; box-shadow: 0 2px 8px -4px #000; }
.hdr-tabs .hdr-tab[aria-selected="true"] > div { background: #FF703C; box-shadow: 0 0 8px 2px #FF703C; }
.hdr-tabs .hdr-tab:nth-of-type(2) { left: 73.9%; top: 50.5%; }
.hdr-tabs .hdr-tab:nth-of-type(2) > div { background: #289301; }
.hdr-tabs .hdr-tab:nth-of-type(2):hover > div,
.hdr-tabs .hdr-tab:nth-of-type(2):focus > div { background: #45FF00; }
.hdr-tabs .hdr-tab:nth-of-type(2)[aria-selected="true"] > div { background: #45FF00; box-shadow: 0 0 8px 2px #45FF00; }
.hdr-tabs .hdr-tab:nth-of-type(3) { left: 73.9%; top: 60.55%; }
.hdr-tabs .hdr-tab:nth-of-type(3) > div { background: #848408; }
.hdr-tabs .hdr-tab:nth-of-type(3):hover > div,
.hdr-tabs .hdr-tab:nth-of-type(3):focus > div { background: #FFFF40; }
.hdr-tabs .hdr-tab:nth-of-type(3)[aria-selected="true"] > div { background: #FFFF40; box-shadow: 0 0 8px 2px #FFFF40; }
.hdr-tabs .hdr-tab:nth-of-type(4) { left: 76.9%; top: 40.25%; }
.hdr-tabs .hdr-tab:nth-of-type(4) > div { background: #0E5792; }
.hdr-tabs .hdr-tab:nth-of-type(4):hover > div,
.hdr-tabs .hdr-tab:nth-of-type(4):focus > div { background: #6BE4FF; }
.hdr-tabs .hdr-tab:nth-of-type(4)[aria-selected="true"] > div { background: #6BE4FF; box-shadow: 0 0 8px 2px #6BE4FF; }
.hdr-tabs .hdr-tab:nth-of-type(5) { left: 79.9%; top: 55.5%; }
.hdr-tabs .hdr-tab:nth-of-type(5) > div { background: #8F2499; }
.hdr-tabs .hdr-tab:nth-of-type(5):hover > div,
.hdr-tabs .hdr-tab:nth-of-type(5):focus > div { background: #F768FF; }
.hdr-tabs .hdr-tab:nth-of-type(5)[aria-selected="true"] > div { background: #F768FF; box-shadow: 0 0 8px 2px #F768FF; }

.hdr-tabs .hdr-tab[aria-selected="true"] {  }
.hdr-tabs .hdr-tab span { left: -99999px; position: absolute; }

.hdr-tabs .hdr-tabpanel { background: #11838F; border-top: 6px solid #FF703C; flex-shrink: 0; margin: 68px 0 24px; padding: 8px 28px; width: 30%; }
.hdr-tabs .hdr-tabpanel:nth-of-type(3) { border-top-color: #45FF00; }
.hdr-tabs .hdr-tabpanel:nth-of-type(4) { border-top-color: #FFFF40; }
.hdr-tabs .hdr-tabpanel:nth-of-type(5) { border-top-color: #6BE4FF; }
.hdr-tabs .hdr-tabpanel:nth-of-type(6) { border-top-color: #F768FF; }
.hdr-tabs.has-js .hdr-tabpanel { display: none; margin-bottom: 0; opacity: .1; transition: opacity .4s; }
.hdr-tabs.has-js .hdr-tabpanel.active { display: block; }
.hdr-tabs.has-js .hdr-tabpanel.fadein { opacity: 1; }
.hdr-tabs.has-js .hdr-tabpanel h3 { font-size: 1.5em; font-weight: 700; margin-top: 14px; text-transform: uppercase; }
.hdr-tabs.has-js .hdr-tabpanel a { color: #fff; font-size: 1.1em; text-decoration: underline; }
.hdr-tabs.has-js .hdr-tabpanel a:hover,
.hdr-tabs.has-js .hdr-tabpanel a:focus { color: #FFFF40; }
.hdr-tabs.has-js .hdr-tabpanel a img { height: 18px; }

.tab-change { background: transparent; padding: 6px 18px 6px 6px; position: absolute; right: 2.5%; top: 50%; transform: translateY(-50%); transition: padding .4s; }
.tab-change:hover,
.tab-change:focus { background: transparent; padding: 6px 6px 6px 18px; }
.tab-change.prev { left: 2.5%; right: auto; transform: rotate(180deg) translateY(50%); }

/************ Responsive ****************************************************************************************/

@media screen and (min-width: 2030px) {
    html,body { font-size: 19px; }
    p { line-height: 1.8em; margin: 32px 0; }

    .hdr-tabs .hdr-tablist { width: 60%; }
    .hdr-tabs .hdr-tabpanel { width: 40%; }
}

@media screen and (max-width: 1500px) {
    #page-title div { padding: 120px 80px; width: 90%; }
}

@media screen and (max-width: 1240px) {
    #content > section,
    footer > section { padding: 32px 6%; }
    
    #page-title div { padding: 120px 80px; width: 90%; }
    #page-title h1 { font-size: 3.6em; }
    #page-title h1:before { height: 86px; }
    
    #intro p { font-size: 1.1em; }

    #omaha-sites img { height: 90px; }
    
    #projects h2 { font-size: 1.4em; }
    .hdr-tabs .hdr-tabpanel { font-size: .9em; }

    .tab-change { right: 1.25%; padding: 8px 10px 8px 4px; }
    .tab-change:hover,
    .tab-change:focus { padding: 8px 4px 8px 10px; }
    .tab-change img { height: 28px; }
    .tab-change.prev { left: 1.25%; }
}

@media screen and (max-width: 992px) {
    h1 { font-size: 1.2em; }
    h2 { font-size: 1.8em; margin: 16px 0; }
    h3 { font-size: 1.6em; margin: 24px 0 0; }
    h4 { font-size: 1.4em; margin: 24px 0 0; }
    h5 { font-size: 1.2em; margin: 24px 0 0; }
    h6 { font-size: 1.1em; margin: 24px 0 0; }
    p, li { font-size: .9em; line-height: 1.4em; }
    button { font-size: .9em; padding: 4px 10px; }

    #content > section,
    footer > section { padding: 22px 6%; }
    .row { display: block; }
    
    header { padding: 6px 10px; }
    
    #page-title div { padding: 100px 50px; width: 80%; }
    #page-title h1 { font-size: 2.8em; }
    #page-title h1:before { height: 66px; }

    #omaha-sites h2 { font-size: 1.1em; }
    #omaha-sites img { height: 68px; }

    #projects > div { width: 100%; }
    .hdr-tabs { display: block; margin: 32px 0; }
    .hdr-tabs .hdr-tablist { width: 100%; }
    .hdr-tabs .hdr-tabpanel { margin-top: 42px; width: 100%; }

    .tab-change { top: auto; bottom: 95px;  }
}

@media screen and (max-width: 768px) {
    #content > section,
    footer > section { padding: 16px 8%; }
    
    #page-title div { padding: 60px 50px; width: auto; }
    #page-title h1 { font-size: 2em; }
    #page-title.animate h1:before { height: 18px; }
    
    #intro p { font-size: 1em; }

    #omaha-sites ul { display: block; text-align: center; }
    #omaha-sites li { margin: 20px 0; }

    #footer-top { background-position: right; display: block; text-align: center; }
    #footer-top h2 { margin: 16px 0 3px; }
    #footer-top img { max-width: 220px; width: 100%; }
    #footer-bottom p { margin: 14px 0; }
    
    .tab-change { position: static; }
    .tab-change.next { float: right; }
}