/* your custom styling */

body {
    background-image: url(../img/joab-logo-pattern.svg);
    background-size: 75px, 50px;
    background-color: #c7d7cf;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.header-strip {
    background-color: #556688 !important;
    border-bottom: .75rem #ddaa22 solid;

}

.logo {
    border-radius: 0;
}

h1 {
    font-family: 'apotek-extended', sans-serif;
    font-weight: bold;
    color: #ddaa22;
}

h2 {
    padding: .75rem .5rem .25rem;
    font-size: 2.75rem;
    font-family: 'apotek-extended', sans-serif;
    color: #223355;
    background-color: #ddaa22;
    border-bottom-left-radius: .5rem;
}

h3 {
    padding: 0 .25rem;
    margin: .75rem 0;
    font-family: 'apotek-extended', sans-serif;
    color: #ddaa22;
    background-color: #556688 !important;
    border-radius: .5rem;
}

h4 {
    margin: .75rem .25rem;
    font-family: 'apotek-extended', sans-serif;
    color: #445577;
}

h4:nth-last-child(6) {
    margin: 0 .25rem .75rem;
}

p {
    margin: 0 .5rem .5rem;
    font-family: 'itc-avant-garde-gothic-pro', sans-serif;
    font-size: 1.125rem;
    color: #223355;
}

a {
    margin: 0 .25rem;
    text-decoration: none;
    color: #33bbbb;
    font-weight: 500;
}

.contact-link {
    margin: 0 .5rem;
    text-decoration: none;
    color: #33bbbb;
}

.wrapper {
    margin: 0rem 1rem 0;
    padding: 0rem .5rem .75rem;
    background-color: #e7f7ef99;
}

.wrapper-head {
    margin: 0rem 1rem 0;
    background-color: #e7f7ef99;
}

.navbar-div {
    padding: .5rem 0rem .5rem;
}

.navbar {
    background-color: #556688 !important;
    /* border-bottom: .75rem #ddaa22 solid; */
    padding: 0;
}

.nav-link {
    font-family: 'apotek-extended', sans-serif;
    color: #00d7d7;
}

.nav-link:hover {
    font-family: 'apotek-extended', sans-serif;
    color: #00ffff;
}

.nav-link.active {
    color: #00ffff !important;
}

.navbar-toggler-icon {
    background-image: url(../img/hamburger.svg);
}

.navbar-tab {
    top: -100%;
    position: absolute;
    background-color: #556688;
    border-right: .75rem #ddaa22 solid;
    border-bottom: .75rem #ddaa22 solid;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}
    .stc {
        padding: 0rem .75rem;
        font-size: 1rem;
    }

    .decor-top {
        padding: 1rem 0 0 0;
        border-left: .75rem #ddaa22 solid;
    }

.navbar-tab:focus {
    margin-top: 11.5rem;
    left: 4%;
    color: #00cccc !important;
}

.navbar-toggler {
    background-color: #556688;
    border: none;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler,
.navbar-toggler .navbar-toggler-icon,
.navbar-toggler .navbar-toggler-icon:focus,
.navbar-toggler {
    background-color: #556688;
    border: none !important;
    border-color: white;
    outline: none !important;
    box-shadow: none;
}

.colapse {
    border: none;
}

img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto .75rem;
    border-radius: .5rem;
}

.decor-wrap {
    padding: 2.5rem 0 0;
    background-color: #f0fff0;
    border-right: .75rem #ddaa22 solid;
    border-bottom: .75rem #ddaa22 solid;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}

.decor-wrap:first-child {
    padding: 0rem 0 0;
}

.row {
    margin: 1rem 0 0;
    border-bottom: .75rem #ddaa22 solid;
    border-bottom-left-radius: .5rem;
}

.row:first-child {
    margin: 0;
}

article:last-child {
    border-bottom: 0;
} 

.decor {
    padding: 3rem 0 0 0;
    border-left: .75rem #ddaa22 solid;
}

footer {
    background-color: #556688;
    margin: 0 1rem;
    padding: .5rem 1rem .25rem;
}

.footer{
    color: #f0fff0;
}

@media screen and (max-width:575px) {

    h2 {
        font-size: 1.5rem;
    }

    p {
        font-size: .9rem;
    }

    .logo{
        width: 230px;
    }

    .container {
        padding: .5rem 0rem 1rem 1rem;
    }

    .decor-wrap {
        padding: 2.5rem 0 0;
    }

    .wrapper {
        margin: 0rem 0 0;
    }

    footer {
        margin: 0 0;
    }
}

@media screen and (min-width:575px) {

    p {
        font-size: .9rem;
    }

    h2 {
        font-size: 2rem !important;
    }

    .wrapper {
        margin: 0rem 1rem 0;
        flex-direction: column !important;
    }

    footer {
        margin: 0 1rem;
    }
}

@media screen and (min-width:992px) {

    p {
        font-size: 110%;
    }

    h2 {
        font-size: 2rem;
    }

    .wrapper {
        margin: 0rem 3rem 0;
    }

    footer {
        margin: 0 3rem;
    }
}

@media screen and (min-width:1200px) {
    p {
        font-size: 115%;
    }

    .wrapper {
        margin: 0rem 4rem 0;
    }

    footer {
        margin: 0 4rem;
    }
}