html, 
body { color: #4f4f4f; font-family: "verdana-pro", sans-serif; font-size: 18px; -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: 3.4em; margin: 0; }
h2 { color: #70281F; font-size: 2.2em; font-weight: 700; margin: 46px 0 24px; }
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.8em; margin: 26px 0; }
ul, 
ol { margin: 20px 0; }
li { line-height: 1.6em; margin: 12px 0; }
img { max-width: 100%; }

/* Header */
header { background-color: #333; color: #fff; 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; }
header nav li ul { box-shadow: 0 3px 16px -4px #333; opacity: .2; position: absolute; right: 99999px; top: -4000px; width: 240px; z-index: 1; }
header nav li:hover ul,
header nav li ul.on-focus { right: -20px; opacity: 1; top: 100%; transition: 0s, opacity .4s; }
header nav li ul li { margin: 0 !important; width: 100%; }
header nav li ul li a { background: #555; border-bottom: 1px solid #fff; line-height: 1.3em; padding: 12px 18px; }
header nav li ul li a:hover { background: #222; }
header nav li ul li:last-of-type a { border: 0; }

header.scrolled { position: fixed; padding: 18px 1.5%; width: 100%; z-index: 1; }
header.scrolled h1 { font-size: 1.2em; }
header.scrolled nav li { font-size: .9em; margin-left: 34px; }

#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; }

header { background-image: url("../images/Images/heroback.jpg"); border-bottom: 20px solid #CA9260; background-position: center; background-size: cover; position: relative; }
header:before,
header:after { background: #b15c12; bottom: -20px; content: ""; height: 20px; left: 0; position: absolute; width: 33.3333%; }
header:after { background: #F8D6B9; left: auto; right: 0; }
header section { display: flex; justify-content: space-between; padding: 34px 3%; text-align: right; width: 100%; }
header section > img { width: 220px; }
header h1 { font-size: 4.2em; font-weight: 600; line-height: 1.25em; padding: 40px 10% 78px; text-shadow: 2px 3px 8px #222; }

#translation-widget { width: 100%; }
#translation-widget img { height: 16px; }
#translation-widget label { left: -9999px; position: absolute; }
#translation-widget select { background: transparent; border: 0; cursor: pointer; margin-bottom: 8px; } 
#translation-widget option { color: #000; }
#google_translate_element { display: none; }

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

/* General Formatting */
#content > section { padding: 48px 10% 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-color: #70281F; color: #fff; display: flex; justify-content: space-between; padding: 50px 10% 42px; }
#footer-top h2 { color: #fff; font-size: 1.2em; margin: 0; }
#footer-top p { line-height: 1.5em; margin: 12px 0; }
#footer-top strong { color: #FFE100; }
#footer-top > div { width: 380px; }
#footer-top img { width: 260px; }
#footer-bottom { align-items: center; background: #2D1D0F; color: #fff; display: flex; justify-content: space-between; padding: 14px 10% 16px; }
#footer-bottom p { margin: 0; }
#footer-bottom a { color: #fff; }
#footer-bottom a:hover { color: #ffe100; }


/* Homepage */

.dot-paragraph span { background: #B15C12; border-radius: 50%; display: block; height: 26px; margin-bottom: 16px; position: relative; width: 26px; }
.dot-paragraph span:before,
.dot-paragraph span:after { background: #D29642; border-radius: 50%; content: ""; display: block; height: 26px; left: 33px; position: absolute; width: 26px; }
.dot-paragraph span:after { background: #70281F; left: 66px; }

#timeline { display: flex; gap: 3px; list-style: none; padding: 0; }
#timeline li { color: #70281f; width: 16.6667%; }
#timeline li h3 { background: #70281F; color: #fff; font-size: 1.1em; font-weight: 600; margin: 0 0 3px; padding: 8px 12px 6px; }
#timeline li span { background: #FFF5EE; display: block; line-height: 1.3em; padding: 4px 12px 10px; }
#timeline strong { display: block; font-weight: 400; margin-top: 24px; padding: 4px 10px 0; position: relative; text-align: center; }
#timeline strong:before { border: 6px solid transparent; border-width: 12px 7px; border-bottom-color: #70281f; bottom: 100%; content: ""; left: 50%; position: absolute; }

#purpose { background-image: url("../images/Images/stamp_back.jpg"); background-position: center; background-size: cover; }
#purpose ul { list-style: none; padding: 0; }
#purpose li { align-items: center; background: #fff; border-radius: 6px; display: flex; gap: 16px; }
#purpose li div { background: #B15C12; border-radius: 6px 0 0 6px; flex-shrink: 0; height: 100%; padding: 14px; }
#purpose li img { width: 36px; }
#purpose li span { line-height: 1.3em; padding: 10px 18px 10px 0; }

#img-slideshow { background: #FFF6EE; padding: 68px 10% 74px !important; position: relative; }
#img-slideshow > div { display: flex; gap: 20px; opacity: 0; transition: opacity .3s; }
#img-slideshow > div.animate { opacity: 1; }
#img-slideshow > div:last-of-type { display: none; }
#img-slideshow > div > div { width: 33.333%; }
#img-slideshow > button { background: transparent; left: 92%; padding: 0; position: absolute; top: 50%; transform: translateY(-50%); }
#img-slideshow > .prev-btn { left: auto; right: 92%; transform: rotate(180deg) translateY(50%); }
#img-slideshow > button span { left: -9999px; position: absolute; }
#img-slideshow > .prev-btn span { left: auto; right: -9999px; position: absolute; }
#img-slideshow.show-other > div:first-of-type { display: none; }
#img-slideshow.show-other > div:last-of-type { display: flex; }

#mailinglist-form label { left: -9999px; position: absolute; }
#mailinglist-form { align-items: center; display: flex; width: 100%; }
#mailinglist-form input { background: transparent; border: 1px solid #fff; border-radius: 6px 0 0 6px; color: #fff; height: 44px; padding: 0 10px;  }
#mailinglist-form button { background: transparent; border-radius: 0 6px 6px 0; flex-shrink: 0; padding: 0; }
#mailinglist-form button img { height: 44px; padding: 0; width: auto; }
#form-error { display: none; font-size: .85em; }

/* Lightbox */
.hdr-lightbox img { width: 100%; }
.hdr-lightbox a { display: block; padding: 0; }
.hdr-lightbox a img:first-of-type { display: none; }
.hdr-lightbox > button { background-color: rgba(0,0,0,.75); border: 0; cursor: pointer; display: none; height: 0; left: -9999px; margin: 0; position: absolute; top: 0; transition: 0s; width: 100%; }
.hdr-lightbox button span { left: -9999px; position: absolute; }
.hdr-lightbox > div { top: 80px; }
.hdr-lightbox > div .hdr-close-lightbox { background: 0; border: 0; color: transparent; font-size: 3em; display: none; line-height: .6em; padding: 6px 8px; position: fixed; right: 14px; top: 6px; }
.hdr-lightbox em { display: block; margin-top: 10px; }

.showing-hdr-lightbox { overflow: hidden; }
.hdr-lightbox.enhanced a img:first-of-type { display: block; }
.hdr-lightbox.enhanced a img:last-of-type { display: none; }
.hdr-lightbox.enhanced { height: 100%; left: 0; position: fixed; top: 0; width: 100% !important; z-index: 5555; }
.hdr-lightbox.enhanced > button { display: block; height: 100%; left: 0; transition: height .6s, left 0s; }
.hdr-lightbox.enhanced > div { background-color: #fff; border: 1px solid #333; box-shadow: 4px 13px 28px 0 #111; left: 6%; margin: 0; max-height: 80%; overflow: auto; position: absolute; top: 40px; transition: .8s; width: 86%; }
.hdr-lightbox.enhanced > div .hdr-close-lightbox { display: block; }
.hdr-lightbox.enhanced > div .hdr-close-lightbox:focus { border: 1px solid #aaa; color: #aaa; }

@media screen and (max-width: 992px) {
    .hdr-lightbox > div .hdr-close-lightbox { font-size: 2em; right: 6px; top: 2px; }
    .hdr-lightbox.enhanced img { max-width: 555%; width: 992px; }
}

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

@media screen and (min-width: 2030px) {
    html,body { font-size: 22px; }
    header h1 { padding: 60px 14% 88px; }
    p { line-height: 1.8em; margin: 32px 0; }
    #content > section { padding: 48px 14% 60px; }
    #img-slideshow { padding: 78px 14% 74px !important }
    #footer-top { padding: 60px 14% 52px; }
    #footer-bottom { padding: 10px 14% 12px; }
}

@media screen and (max-width: 1300px) {
    #content > section { padding: 42px 8%; }
    header h1 { font-size: 3em; padding: 28px 8% 60px; }
    h2 { font-size: 1.6em; }

    #timeline { flex-wrap: wrap; gap: 1%; }
    #timeline li { width: 32.333%; }
}

@media screen and (max-width: 992px) {
    h1 { font-size: 1.2em; }
    h2 { font-size: 1.4em; margin: 26px 0 14px; }
    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 { padding: 12px 6%; }
    .row { display: block; }

    /* Header */
    #mobile-menu { display: block; }
    .menu-opened #mobile-menu .line.top { top: 8px; transform: rotate(45deg); }
    .menu-opened #mobile-menu .line.mid { opacity: 0; transform: rotate(90deg); }
    .menu-opened #mobile-menu .line.btm { top: -10px; transform: rotate(-45deg); }
    
    header { border-bottom-width: 14px; }
    header:before,
    header:after { bottom: -14px; height: 14px; }
    header section > img { width: 150px; }
    #translation-widget { font-size: .8em; }
    header h1 { font-size: 2.2em; padding: 10px 6% 48px; }
    header nav { position: relative; }
    header nav ul { background-color: #333; box-shadow: 2px 4px 8px -4px #000; margin-top: 8px; opacity: 0; position: absolute; right: 9999px; top: 100%; width: 220px; z-index: 1; }
    header nav li { border-top: 1px solid #fff; display: block; margin: 0; text-align: center; width: 100%; }
    header nav li a { padding: 8px; }
    header nav li ul { margin: 0; padding: 0; position: static; width: 100%; }
    header nav li ul li { margin: 0 ; padding: 0; }
    header nav li ul li a { border: 0; padding: 7px; }
    .menu-opened header nav ul { opacity: 1; right: 0; transition: right 0s, opacity .2s; }

    header.scrolled { padding: 12px 8px 12px 16px; }
    header.scrolled h1 { font-size: 1em; }

    .dot-paragraph span { height: 20px; margin-bottom: 10px;width: 20px; }
    .dot-paragraph span:before,
    .dot-paragraph span:after { height: 20px; left: 26px; width: 20px; }
    .dot-paragraph span:after { left: 52px; }

    #timeline { margin-top: 2%; }
    #timeline li { width: 48%; }

    #img-slideshow { padding: 38px 6% 34px !important; text-align: center; }
    #img-slideshow > button { margin: 18px 22px 0; position: static; transform: none; }
    #img-slideshow > .prev-btn { transform: rotate(180deg); }
    #img-slideshow > button img { height: 36px; }

    #footer-top img { width: 160px; }
    #footer-top { padding: 36px 6% 22px; }
    #footer-bottom { font-size: .9em;  padding: 6px 6% 8px; }
}

@media screen and (max-width: 768px) {
    #content > section { padding: 16px 6%; }
    header section { display: block; padding: 22px 12px 0; text-align: center; }
    #translation-widget { margin-top: 16px; }
    header h1 { font-size: 1.6em; padding: 10px 6% 28px; }

    #purpose li { font-size: .8em; }

    #footer-top { display: block; padding: 25px 6% 22px; text-align: center; }
    #footer-top > div { margin: 0 auto 18px; max-width: 350px; width: 100%; }
    #footer-bottom { display: block; padding: 18px; text-align: center; }
    #footer-bottom > a { display: block; margin-top: 6px; }

    #mailinglist-form { display: block; }
    #mailinglist-form input { border-radius: 6px; font-size: .8em; width: 100%; }
    #mailinglist-form button img { border-radius: 8px !important; height: 32px; }
}