/* nunito-sans-regular - latin */
@font-face {
    font-display: swap; 
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/nunito-sans-v15-latin-regular.woff2') format('woff2'); 
  }
  /* nunito-sans-800 - latin */
  @font-face {
    font-display: swap; 
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/nunito-sans-v15-latin-800.woff2') format('woff2'); 
  }


:root {
    --black:    #2E2A2A;
    --dblau:    #212C55;
    --gruen:    #A4C61A;
    --weiss:    #FCFAFA;
 
  }

html, body {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 18px;
    line-height: 1.3;
    color: var(--black);
    scroll-behavior: smooth;
    background-color: var(--weiss);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
*:focus, .btn.focus, .btn:focus, button:focus {
    outline: 0 none;
    border: 0;
    border-color: transparent;
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0)!important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0)!important;
}
::-webkit-scrollbar {
    width: 6px
}
::-webkit-scrollbar-track {
    background:var(--weiss);
    border-radius: 0px
}
::-webkit-scrollbar-thumb {
    background: var(--gruen);
    border-radius: 0px
}

::selection {
    background: var(--gruen);
    color: var(--weiss);
}
::-moz-selection {
    background: var(--gruen);
    color: var(--weiss);
}

a {
    color: var(--black);
    text-decoration: none;
}
a:hover {
    color: var(--dblau);
}
figure {
    margin: 0;
    padding: 0;
}
h1, .h1, h2, .h2, h3, h4, h5, h6, strong, nav a {
    font-weight: 800;
}

h1, .h1, h2, .h2 {
    font-size: 44px
}

h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-size: 28px
}

nav.fixed-top {
    transition: background-color 0.3s ease;
}

.sectionpadding {
    padding-top: 80px;
    padding-bottom: 80px;
}

.sectionpadding-bottom{
    padding-bottom: 80px;
}

.bg-dblau {
    background-color: var(--dblau);
    color: var(--weiss);
}

.bg-dblau a {
    color: var(--weiss);
    text-decoration: underline;
}

.bg-dblau a:hover {
    color: var(--weiss);
    text-decoration: none;
}

.bg-dblau strong {
    color: var(--gruen);
}

h3 {
    display: inline-block;
    background-color: var(--gruen);
    color: var(--weiss);
    padding: 10px 25px;
    margin: 0;
}


.card {
    border-radius: 0;
    border: none;
    background-color: transparent;
}


@media (min-width: 1px) and (max-width: 767px) {

    nav a {
        font-size: 14px;
    }

    .sectionpadding {
        padding-top: 40px;
        padding-bottom: 100px;
    }
    
    .sectionpadding-bottom{
        padding-bottom: 60px;
    }

    .top-85 {
        position: relative;
        margin-top: -72px;
    }
    .card-img-overlay {
        position: relative!important;
        padding-left: 0;
        padding-right: 0;
    }
    .top-15, h2 {
        display: none;
    } 
}


@media (min-width: 768px) and (max-width: 991px) {
    .top-15 {
        position: absolute;
        z-index: 10;
        top: -410px;
        left: 3%;
    }
    
    .top-85 {
        position: relative;
        margin-top: -120px;
    }
    .card-img-overlay {
        position: relative!important;
    }
    h2 {
        font-size: 28px;
        width: calc(100% - 12%);
    }    

}


@media (min-width: 992px) and (max-width: 1199px) {
    .top-15 {
        position: absolute;
        top: 5%;
        left: 3%;
    }
    
    
    .top-85 {
        position: absolute;
        top: 25%;
        left: 50%;
    }
}


@media (min-width: 1200px) and (max-width: 1399px) {
    .top-15 {
        position: absolute;
        top: 5%;
        left: 3%;
    }
    
    
    .top-85 {
        position: absolute;
        top: 45%;
        left: 50%;
    }
}


@media (min-width: 1400px) {
    .top-15 {
        position: absolute;
        top: 5%;
        left: 3%;
    }
    
    
    .top-85 {
        position: absolute;
        top: 60%;
        left: 50%;
    }
}

aside {
    background-color: #162041;
    color: #fff;
}
aside a {
    color: #fff;   
}
aside a:hover {
    color: var(--gruen);
}