/*Seite~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

html, body {
    font-family: 'Open Sans';
    background-color: #F5F3E9;
    height: 100%;
    }

        * {
    margin: 0;
    padding: 0;
    }

.seite {
    position: relative;
    min-height: 220%;
    width: 75%;
    margin: 0 auto;
    background-color: #F5F3E9;
    }

.inhalt {
    background-color: #F5F3E9;
    padding-bottom: 60px;
    }

.footer-container {
    position:absolute;
    bottom: 0;
    width: 100%;
    background-color:#F5F3E9;
    color:#344E38;
    height: 40px;
    font-size: 16px;
    font-weight: 500;
    line-height: 30px;
    }

.footer {
    display: grid;
    grid-template-columns: 10% 30% 10% 40% 5% 5%;
    align-items: center;
}

a.footer {
    font-size: 16px;
    color:#344E38;
    font-weight: 500;
    line-height: 30px;
    }
.footer-image {
    padding: 10px;
}

.pdf {
    display: flex;
    justify-content: left;
    align-items: center;
}

hr {
    border:#F5F3E9 solid 1px;
}

hr.header {
    border: #344E38 solid 1px;
}

.text-container {
    color: #344E38;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 35px; 
    margin-top: 20px;
    margin-bottom: 20px;
}

.link-footer {
    text-align: center;
}

.navbar-botton {
    display: flex;
    justify-content:center;
    align-items: baseline;
    margin: 0px;
    
}

/*animation~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.animated-image {
    height: 500px;
    justify-self: center;
    align-self: center;
}

.animation {
    display: grid;
    grid-template-columns: 50% 50%;
    text-align: center;
    align-items: center;
}

.move-up {
    animation: moveUp 6s linear infinite;
  }
  
  @keyframes moveUp {
    0% {
      transform: translateY(0) translateX(0); /* Startposition */
    }
    50% {
      transform: translateY(-23px) translateX(23px); /* Endposition */
    }

    60% {
        transform: translateY(-23px) translateX(23px); /* Endposition */
      }

    100% {
        transform: translateY(0) translateX(0); /* Startposition */
      }

  }
  

/*header~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.header-container {
    display: flex; 
    justify-content: space-between;
    align-items: center;
    width: 100%; 
    padding-bottom: 0px; 
    margin-bottom: 0px;
    margin-top: 10px;
}

.header-container-mobile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    display: none;  
}

.headerimage-container {
    width: 100%;
 }

.red-headline {
    color: #CC986C;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    align-items: baseline;
}

.navbar{
    color:#CC986C;
    margin-bottom: 0px;
    }

a {
    color: #344E38;
    text-decoration: none;
    margin-left: 5px;
    margin-right: 5px;
    font-weight: 600;
    font-size: 23px;
    line-height: 33px;
}

a:hover {
    text-decoration: underline;
}

a.text-link:hover {
    text-decoration: underline;
}
 
.logo {
    display: flex;
    align-items:center;
    padding-top: 10px;
}

.logo-image {
    width: 50px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    align-items: baseline;
}

/*headline~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.headline {
    color: #344E38;
    font-weight: 700;
    font-size: 60px;
    line-height: 80px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.middle-headline {
    color: #344E38;
    font-style: normal;
    font-weight: 700;
    font-size: 35px;
}

.small-headline {
    color: #344E38;
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
}

 /*seitenmenü~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+*/
.sidebar-container {
    display:block;
    float:left;
    margin-left: 0px;
    padding-left: 0px;
    position: fixed;
    z-index: 3;
}

.sidebar {
    width: 100%;
    display: flex;
    flex-direction:row;
    align-items: center;
    margin-top: 20px;
}

input.side {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

input:checked~label.side img {
    transform: translate(0, -50%) rotate(180deg);
}

input:checked~.content-sidebar {
    height: 250px;
    opacity: 1;
    transform: translate(0, 0);
    z-index: 3;
}

label.side {
    width: 40px;
    height: 250px;
    background-color: #344E38;
    color: #F5F3E9;
    font-size: 20px;
    font-weight: 700;
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 150ms;
    position: relative; 
    z-index: 2; 
}

label.side:hover {
    transform: scale(1.01);
}

.pfeil-sidebar {
    color: #F5F3E9;
    width: 16px;
    position: absolute;
    top: 50%;
    right: 5px;
    rotate: 90deg;
    transform: translate(0, -50%);
    transition: all 350ms;
}

.content-sidebar {
    color:#F5F3E9;
    background-color: #344E38;
    border: #F5F3E9 2px solid;
    text-align: center;
    border-radius: 10px;
    margin-left: 10px;
    margin-top: 0px;
    margin-bottom: 10px;
    padding: 10px;
    font-weight: 500;
    font-size: 20px;
    line-height: 35px; 
    width: 100%;
    position: relative;
    z-index: 3;
    transform: translate(0, -20%);
    height: 0;
    opacity: 0;
    transition: all 350ms;
    overflow: hidden;
}

p {
padding: 5px;
margin: 0;
}

.table-sidebar {
    text-align: left;
    margin-left: 30px;
    margin-top: 10px;
    font-size: 16px;
}

.table-sidebar-center {
    text-align: center;
    margin-left: 60px;
    margin-top: 10px;
    font-size: 16px;
}

hr {
    color: #F5F3E9;
}

a.sidebar-link {
    color: #F5F3E9;
    font-size: 16px;
}

/*sonstiges~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.half-mobile {
    display: grid;
    grid-template-columns: 45% 50%;
    grid-column-gap: 5%;
}

.half {
    display: grid;
    grid-template-columns: 45% 50%;
    grid-column-gap: 5%;
}

.drittel {
    display: grid;
    grid-template-columns: 55% 40%;
    grid-column-gap: 5%;
}


.image-container {
    padding: 10px;
    width: 100%;
}

.image-container-half {
    padding: 10px;
    width: 100%;
}

a.text-link {
    color: #344E38;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 35px; 
    text-decoration:underline; 
    text-decoration-style: dotted;
    text-decoration-thickness: 2px;
}
.info-container {
    position: relative;
    display: block;
    padding-left: 50px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    margin-left: 25px;
    margin-top: 15px;
    margin-bottom: 15px;
    background: #d6e3daff;
    border-radius: .3em;   
}

.info-headline {
    background: #344E38;
    color: #F5F3E9;
    font-size: 20px;
    padding: 5px;
    
    font-weight: 700;
    border-radius: .3em;
}

.info-headline-red {
    background:#CC986C;
    color: #F5F3E9;
    padding: 5px;
    width: fit-content;
    font-weight: 700;
    border-radius: .3em;
}

.green-container {
    position: relative;
    display: block;
    padding: 30px;
    height: fit-content;
    margin-right: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    border: 3px solid #344E38;
    border-radius: .3em;   
}

.green-container-tax {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 30px;
    height: fit-content;
    margin-right: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    border: 3px solid #344E38;
    border-radius: .3em;   
}

.red-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 30px;
    height: fit-content;
    margin-right: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    border: 3px solid #CC986C;
    border-radius: .3em;   
}

.red-container-filled {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 30px;
    height: fit-content;
    margin-right: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    background-color:  #C6775A;
    color: #F5F3E9;
    font-weight: 600;
    border-radius: .3em;   
}

figcaption {
    font-size: 16px;
    color: #344E38;
    padding-left: 10px;
    padding-right: 20px;
}

 .button {
    background: #344E38;
    color: #F5F3E9;
    font-size: 20px;
    font-weight: 700;
    padding: 10px;
    border-radius: 3px;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 150ms; 
}

.button:hover {
    transform: scale(1.02);
}

a.button {
    color: #F5F3E9;
    text-decoration: none;
    margin-right: 16px;
    font-weight: 700;
    font-size: 23px;
    line-height: 33px;
}

a.button:hover {
    text-decoration: none;
}

a.extern {
    font-weight: 700;
    font-size: 20px;
    text-decoration: underline;
}

.extern-button {
    width: 17px;
}

.extern-button-small {
    width: 12px;
}

ul {
    list-style-type: square;
    margin-left: 20px;
}

ul.index {
    margin-left: 40px;
    list-style-type: none;
}

ul.datenschutz {
    margin-left: 40px;
    list-style-type: circle;
}

  
 /*video~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+*/
 .video-container-klein {
    display: block;
    align-items: center;
    padding: 20px;
    padding-left: 60px; 
}

.video-container {
    width: fit-content;
    background-color: #C7D9CC;
    display: block;
    padding: 10px;
    height: fit-content;
    margin-right: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 0px;
    border-radius: 5px;
}

.video-container-red {
    width: fit-content;
    background-color: rgb(238, 225, 207);
    display: block;
    padding: 30px;
    height: fit-content;
    margin-right: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 15px;
    border-radius: 5px;
}


video {
    width: 100%;
    border-radius: 10px;
}

a.ref {
    color: #344E38;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 35px; 
    text-decoration: underline; 
}

figcaption {
    font-size: 14px;
    color:#344E38;
    line-height: 25px;
}

.video-container-anleitung {
    display: block;
    align-items: center;
    padding: 20px;
    padding-left: 60px; 
}

.video-anleitung {
    width: 90%;
}

 /*audio~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+*/
 audio {
    width: 200px;
    border-radius: 10px;
}

.audio-container {
    align-items: center;
    color: #F5F3E9;
    font-weight: 700;
    width: 220px;
    height: fit-content;
    background-color: #344E38;
    border-radius: 10px;
}

.audio-text {
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 500;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    line-height: normal;
}

/*accordion~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+*/
.list{
    display: block;
    width: 100%;
}

.list-half {
    display: grid;
    grid-template-columns: 47% 47%;
    column-gap: 5%;
    width: 100%;
}

.accordion {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

input:checked~label img {
    transform: translate(0, -50%) rotate(180deg);
}

input:checked~.content {
    height: auto;
    opacity: 1;
    z-index: 1;
    transform: translate(0, 0);
}

label {
    width: 100%;
    background-color: #344E38;
    color: #F5F3E9;
    font-size: 20px;
    font-weight: 700;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 150ms;
    position: relative; 
    z-index: 2; 
}

label:hover {
    transform: scale(1.01);
}

.pfeil {
    color: #F5F3E9;
    width: 16px;
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translate(0, -50%);
    transition: all 350ms;
}

.content {
    color: #344E38;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 35px; 
    width: 100%;
    position: relative;
    z-index: 1;
    transform: translate(0, -20%);
    height: 0;
    opacity: 0;
    transition: all 350ms;
    overflow: hidden;
    }

p {
padding: 5px;
margin: 0;
}

/*Mini- accordion~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+*/
.list-mini{
    display: block;
    width: 100%
}

.accordion-mini {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

input:checked~label img {
    transform: translate(0, -50%) rotate(180deg);
}

input:checked~.content-mini {
    height: auto;
    opacity: 1;
    z-index: 1;
    transform: translate(0, 0);
}

label.mini {
    width: 80%;
    background-color: #344E38;
    color: #F5F3E9;
    font-size: 14px;
    font-weight: 600;
    padding: 1px;
    margin-bottom: 5px;
    margin-left: 10%;
    border-radius: 3px;
    cursor: pointer;
    transition: all 150ms;
    position: relative; 
    z-index: 2; 
}

label:hover {
    transform: scale(1.01);
}

.pfeil-mini {
    color: #F5F3E9;
    width: 10px;
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translate(0, -50%);
    transition: all 350ms;
}

.content-mini {
    color: #344E38;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 25px; 
    width: 80%;
    margin-left: 10%;
    position: relative;
    z-index: 1;
    transform: translate(0, -20%);
    height: 0;
    opacity: 0;
    transition: all 350ms;
    overflow: hidden;
    }
.mini-container {
    border: #344E38 solid 2px;
    padding: 5px;
}

.mini-images {
    width: 90%;
}
/*quellen~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+*/

label.quellen {
    width: 100%;
    background-color:#547c58ff;
    color: #F5F3E9;
    font-size: 20px;
    font-weight: 700;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 150ms;
    position: relative; 
    z-index: 2; 
}

table.quellen, td.quellen {
   margin: 10px;
   padding: 5px;
   font-size: 20px;
}
/*Button~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+*/
.animated-button {
    border-radius: 3px;
    position: relative;
    display: inline-block;
    padding: 16px 28px;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    color: #F5F3E9;
    text-align: center;
    text-decoration: none;
    background-color: #344E38;
    /* border-radius: 40px; */
    overflow: hidden;
    border: none;
    z-index: 1;
  }
  
  .animated-button:before {
    transition: 1s;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: #F5F3E9;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    z-index: -1;
  }
  
  .animated-button:hover:before {
    width: 300px;
    height: 300px;
    opacity: 0.4;
    transition: all 0.5s ease-out;
  }
  
  .animated-button:hover {
    background-color: #F5F3E9;
    color: #344E38;
    transition: all 0.5s ease-out;
  }
  
  .animated-button:hover:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: #547c58ff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -2;
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0% {
      width: 0;
      height: 0;
      opacity: 0.5;
    }
  
    100% {
      width: 200px;
      height: 200px;
      opacity: 0;
    }
  }
  
/*karte~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+*/
.extrem {
    display: none;
}

.kugel_extrem:hover ~ .extrem {
    display: block;
}

.laerche {
    display: none;
}

.kugel_laerche:hover ~ .laerche {
    display: block;
}

.schlank {
    display: none;
}

.kugel_schlank:hover ~ .schlank {
    display: block;
}

.schweizer {
    display: none;
}

.kugel_schweizer:hover ~ .schweizer {
    display: block;
}

.buche {
    display: none;
}

.kugel_buche:hover ~ .buche {
    display: block;
}

.eibe {
    display: none;
}

.kugel_eibe:hover ~ .eibe {
    display: block;
}

.tulpen {
    display: none;
}

.kugel_tulpen:hover ~ .tulpen {
    display: block;
}

.mistel {
    display: none;
}

.kugel_mistel:hover ~ .mistel {
    display: block;
}

.zeisig {
    display: none;
}

.kugel_zeisig:hover ~ .zeisig {
    display: block;
}

.bruecke {
    display: none;
}

.kugel_bruecke:hover ~ .bruecke {
    display: block;
}

.kastanie {
    display: none;
}

.kugel_kastanie:hover ~ .kastanie {
    display: block;
}

.efeu {
    display: none;
}

.kugel_efeu:hover ~ .efeu {
    display: block;
}


/*responsive elemente~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media (max-width: 500px) {
    body{background-color:#F5F3E9;}
    .text-container{
        font-size: 13px;
        line-height: 20px;
        margin: 0px;
        margin-right: 10px;
        margin-top: 10px;}
    .headline{font-size: 35px;
        line-height: 25px;
        margin-top: 30px;}
    .small-headline {
        font-size: 20px;}
    .header-container{ 
        flex-direction: column;}
    
    .red-headline{display: none;}
    a{  font-size: 16px;
        margin-right: 5px;
        font-weight: 600;}
    a.extern {
        font-size: 15px;
        font-weight: 600;
    }
    .extern-button {
        width: 12px;
    }
    a.text-link {
        font-size: 15px;}
    .logo-image {
        width: 70px;
    }
    .content {font-size: 15px;
        line-height: 25px;}
    .half {display: block;
    flex-direction: column;}
    .drittel {display: block;
        flex-direction: column;}
    .half-mobile {display: block;
        flex-direction: column;}
    table {font-size: 12px;}
    table.quellen, td.quellen {
        font-size: 13px;
     }
    .seite {
        width: 90%;
        margin-left: 35px;
        margin-right: 40px;}
    label.side {
        width: 15px;
        font-size: 16px;}
    label.mini {font-size: 10px;}
    .image-container {
        max-width: 90%;
    }
    .headerimage-container {
        max-width: 98%;
    }
    .video-container {
        max-width: 90%;
    }
    .video-container-red {
        max-width: 100%;
        padding: 5px;
        margin: 0px;
    }
    .video-anleitung {
        width: 250px;
    }
    .video-container-anleitung {
        padding-left: 10px;
    }
    .image-container-half {
        max-width: 90%;
    }
    .list {width: 80%;
        margin-left: 30px;}
    .list-half {display: block;
    flex-direction: column;
    width: 80%;
    margin-left: 30px;}
    label {font-size: 15px;}
    label.quellen {font-size: 15px;}
    .green-container-tax {
        display: block;
    flex-direction: column;
    }
    .red-container {
        display: block;
    flex-direction: column;   
    }
    .footer {
        display: block;
        text-align: center;}
        a.footer {
            font-size: 12px;
        }
    .footer-container {
        font-size: 12px;
    }
    figcaption {
        font-size: 10px;
        line-height: 20px;
    }

    a.ref {
        font-size: 10px;
        line-height: 20px;
    }

    .info-container {padding-left: 20px;
    padding-right: 5px;
    margin-right: 0px;
    margin-left: 0px;}

    .info-headline {
        font-size: 13px;
        font-weight: 600;
    }
    
    
}

@media screen and (min-width: 501px) and (max-width: 1105px) {
    body{background-color:#F5F3E9;}
    .seite {
        width: 90%;
        margin-left: 50px;
        margin-right: 50px;}
    .text-container{
            font-size: 16px;
            line-height: 25px;
            margin-right: 30px;}
    .headline{font-size: 50px;
        line-height: 35px;
        margin-top: 30px;
        margin-bottom: 10px;}
    .small-headline {
        font-size: 40px; }
    .red-headline{display: none;}
    a{  font-size: 16px;
        margin-right: 5px;}
    a.text-link {
        font-size: 16px;}
    a.extern {
        font-size: 16px;
        font-weight: 600;
    }
    .extern-button {
        width: 12px;
    }
    .content {font-size: 16px;
        line-height: 25px;}
    .half {display: contents;}
    .drittel {display: block;
        flex-direction: column;}
    .half-mobile {display: block;
        flex-direction: column;}
    table {font-size: 12px;}
    table.quellen {
        font-size: 16px; }
    label.side {
        width: 20px;}
    .image-container {
        max-width: 70%;
        }
    .headerimage-container {
            max-width: 98%;
        }
    .video-container {
        max-width: 70%;
        }
    .image-container-half {
        max-width: 70%;
        }
    .list-half {display: block;
        flex-direction: column;
        width: 85%;
        margin-left: 30px;}
    .list {width: 90%;
            margin-left: 10px;}
    label {font-size: 16px;}
    label.quellen {font-size: 16px;}
    .video-anleitung {
        width: 80%;
    }
    .image-container-half {
        width: 90%;
    }
    .red-container {
        display: block;
    flex-direction: column;   
    }
    .footer {
        display: block;
    }
}

@media screen and (min-width: 1106px) and (max-width: 1500px) {
    body{background-color:#F5F3E9;}
    .seite {width: 80%;}
    .text-container{
        flex-direction: column;}
    .image-container {
        width: 50%;
    }
    .video-container {
        width: 50%;
    }
    .headline{font-size: 70px;
        line-height: 40px;
        margin-top: 30px;}
        .header-container{ 
            flex-direction: column;}
    a{  font-size: 20px;
        margin-right: 5px;}
    
    .drittel {display: block;
        flex-direction: column;}
    table {font-size: 12px;}
    table.quellen {
        font-size: 20px; }
    .video-anleitung {
        width: 80%;
    }
    .image-container-half {
        width: 90%;
    }
}

@keyframes shake {
10%, 90% {
transform: translateX(-1px);
}

20%, 80% {
transform: translateX(2px);
}

30%, 50%, 70% {
transform: translateX(-4px);
}

40%, 60% {
transform: translateX(4px);
}
}


/* open-sans-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
    src: url('/fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('assets/fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('assets/fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('assets/fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('assets/fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  
  /* open-sans-italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: url('/fonts/open-sans-v34-latin-italic.eot'); /* IE9 Compat Modes */
    src: url('/fonts/open-sans-v34-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/open-sans-v34-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('/fonts/open-sans-v34-latin-italic.woff') format('woff'), /* Modern Browsers */
         url('/fonts/open-sans-v34-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/fonts/open-sans-v34-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  
  /* open-sans-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/open-sans-v34-latin-500.eot'); /* IE9 Compat Modes */
    src: url('/fonts/open-sans-v34-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/open-sans-v34-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
         url('/fonts/open-sans-v34-latin-500.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-500.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  
  /* open-sans-500italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 500;
    src: url('/fonts/open-sans-v34-latin-500italic.eot'); /* IE9 Compat Modes */
    src: url('/fonts/open-sans-v34-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/open-sans-v34-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('/fonts/open-sans-v34-latin-500italic.woff') format('woff'), /* Modern Browsers */
         url('/fonts/open-sans-v34-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/fonts/open-sans-v34-latin-500italic.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  
  /* open-sans-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('/fonts/open-sans-v34-latin-600.eot'); /* IE9 Compat Modes */
    src: url('/fonts/open-sans-v34-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/open-sans-v34-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
         url('/fonts/open-sans-v34-latin-600.woff') format('woff'), /* Modern Browsers */
         url('/fonts/open-sans-v34-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/fonts/open-sans-v34-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  
  /* open-sans-600italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 600;
    src: url('/fonts/open-sans-v34-latin-600italic.eot'); /* IE9 Compat Modes */
    src: url('/fonts/open-sans-v34-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/open-sans-v34-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('/fonts/open-sans-v34-latin-600italic.woff') format('woff'), /* Modern Browsers */
         url('/fonts/open-sans-v34-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/fonts/open-sans-v34-latin-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  
  /* open-sans-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/open-sans-v34-latin-700.eot'); /* IE9 Compat Modes */
    src: url('/fonts/open-sans-v34-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('/fonts/open-sans-v34-latin-700.woff') format('woff'), /* Modern Browsers */
         url('/fonts/open-sans-v34-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/fonts/open-sans-v34-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  
  /* open-sans-700italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 700;
    src: url('/fonts/open-sans-v34-latin-700italic.eot'); /* IE9 Compat Modes */
    src: url('/fonts/open-sans-v34-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/open-sans-v34-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('/fonts/open-sans-v34-latin-700italic.woff') format('woff'), /* Modern Browsers */
         url('/fonts/open-sans-v34-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/fonts/open-sans-v34-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */
  }