html, 
body { color: #333; font-family: "Montserrat", 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: #666; border: 0; color: #fff; margin: 6px 0 6px; padding: 8px 14px 6px; transition: background .2s, color .2s; }
button:hover { background: #999; }

/* Headers */
h1 { font-size: 2.4em; margin: 0; }
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: 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; display: flex; justify-content: space-between; padding: 28px 2%; }
header nav ul { list-style: none; margin: 0; padding: 0; }
header nav li { display: inline-block; margin: 0; margin-left: 34px;  }
header nav li a { color: #fff; display: block; padding: 0; }
header nav li a:hover { color: #ddd; }

#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 { 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 { background-color: #333; color: #fff; padding: 8px 3%; }

/* Homepage */

#landing-page { font-size: 18px; }
#landing-page { background-image: url("../images/back_gradient.jpg"); background-position: center; background-size: cover; color: #fff; }
#landing-page #content > section { padding: 108px 14% 120px; }
#landing-page img[src*="logo"] { height: 116px; }
#landing-page h1 { font-size: 3.8em; font-weight: 400; margin-top: 74px; position: relative; }
#landing-page .with-button { align-items: center; display: flex; gap: 26px; }
#landing-page .with-button a { background: #f1ae2c; border-radius: 10px; color: #0B3842; flex-shrink: 0; font-weight: 700; padding: 10px 20px; }
#landing-page .with-button a:hover { background: #d49210; }
#landing-page hr { border: 2px dotted #f1ae2c; border-bottom: 0; margin: 52px 0; }
#landing-page h2 { font-size: 2.4em; }
#landing-page h3 { font-size: 1em; margin: 38px 0 4px; }
#landing-page #contact-methods { list-style: none; margin-top: 8px; padding: 0; }
#landing-page #contact-methods li { display: inline-block; margin-right: 34px; }
#landing-page #contact-methods li a { color: #fff; }
#landing-page #contact-methods li a img { margin-right: 8px; }
#landing-page #contact-methods li a:hover { color: #f1ae2c; }

@media screen and (max-width: 992px) {
    #landing-page #content > section { padding: 78px 11% 68px; }
    #landing-page img[src*="logo"] { height: 78px; }
    #landing-page h1 { font-size: 2.4em; margin-top: 44px; }
    #landing-page h1:before,
    #landing-page h1:after { height: 24px; left: -22px; top: 7px; width: 4px; }
    #landing-page h1:after { left: -35px; }
    #landing-page h2 { font-size: 1.9em; }
}

@media screen and (max-width: 615px) {
    #landing-page #content > section { padding: 38px 10% 24px; }
    #landing-page img[src*="logo"] { height: 78px; }
    #landing-page h1 { font-size: 2em; margin-top: 32px; margin-left: 26px; }
    #landing-page .with-button { display: block; }
    #landing-page .with-button a { display: inline-block; padding: 6px 14px; }
    #landing-page .with-button span { display: block; margin-top: 20px; }
    #landing-page hr { margin: 38px 0; }
    #landing-page h2 { font-size: 1.5em; }
    #landing-page #contact-methods li { text-align: center; width: 100%; }
    #landing-page #contact-methods li a img { display: block; margin: 0 auto 8px; }
}


@media screen and (max-width: 390px) {
    #landing-page h1 { font-size: 1.4em; margin-left: 34px; }
    #landing-page h2 { font-size: 1.15em; }
    #landing-page #contact-methods li a { word-wrap: break-word; }
}

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

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

@media screen and (max-width: 1240px) {
    #content > section { padding: 32px 6%; }

    footer { padding: 1px 3%; }
}

@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 { padding: 22px 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 { padding: 18px 14px 18px 20px; }
    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; padding: 8px 4px; text-align: center; width: 100%; }
    .menu-opened header nav ul { opacity: 1; right: 0; transition: right 0s, opacity .2s; }
}

@media screen and (max-width: 768px) {
    #content > section { padding: 16px 8%; }

    footer { text-align: center; }
}