/* roboto-slab-300 - 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: 'Roboto Slab';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/roboto-slab-v34-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-slab-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: 'Roboto Slab';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-slab-v34-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-slab-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: 'Roboto Slab';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/roboto-slab-v34-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-slab-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: 'Roboto Slab';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/roboto-slab-v34-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  /* roboto-condensed-300 - 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: 'Roboto Condensed';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/roboto-condensed-v27-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-condensed-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: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-condensed-v27-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-condensed-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: 'Roboto Condensed';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/roboto-condensed-v27-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

html, body{
    font-family: "Roboto Slab", Arial, sans-serif;
    font-size:14px;
    line-height:20px;
    color:#4d4e4d !important;
}

html{
    overflow-x: hidden;
}

header{
    font-size:18px;
    line-height:22px;
    color:#4d4e4d !important;
}



 .footer{
    font-size:16px;
    line-height:22px;
    color:#4d4e4d !important;
}

header a, .footer a{
    color:#4d4e4d !important;
    font-weight: 600 !important;
}

header a:hover, .footer a:hover{
    color: #FAC800 !important;
 }

header h5, .footer h5{
    font-size:18px;
    line-height:22px;
    color:#4d4e4d !important;
    font-weight: 600 !important;
    margin-top:16px;
    margin-bottom:0px;
}

header table, .footer table{
    font-size:14px;
    line-height:17px;
    color:#4d4e4d !important;
}

header .h_zusatz, .footer .h_zusatz{
    font-size:14px;
    line-height:17px;
    color:#4d4e4d !important;
    margin-top:16px;
    margin-bottom:0px;
}

.navbar-nav{
    margin-right:0px;
    padding-right: 0px;
}

nav{
    height:80px;
    border-bottom: 2px solid #FAC801;
}

.nav-link{
    font-size:22px;
    line-height:22px;
    color:#4d4e4d !important;
    border-bottom:2px solid #fff;
    display: inline-block;
    padding:0px !important;
}


.nav-item{
    padding:2px 34px 0px 34px;
}

.nav-item:last-child{
    padding:0px 0px 0px 34px;
}

.dropdown-menu{
    border: none !important; 
    margin-left:40px !important;
    padding-top:25px !important;
    border-radius: 0px !important;
    text-align:center;
    
    
}
.dropdown-menu ul {
    list-style:none;
    border-width: 2px !important;
    border-style: solid !important;
    border-image: 
    linear-gradient(
      to bottom, 
      #FAC800, 
      rgba(0, 0, 0, 0)
    ) 1 100% !important;
    margin:0px;
    padding:0px;
}

.dropdown-item{
    
    border-bottom: 2px solid #fff;
    font-size:18px !important;
    padding:4px 16px !important;
    margin:0px !important;
}

.dropdown-item:hover{
    background: #fff !important;
}

#nav_kassenleistungen span:hover{
   background:  #1eb478 !important;
   color:#fff;

}

#nav_massage span:hover{
    background:  #3CA0D2 !important;
    color:#fff;

}

#nav_heilg span:hover{
    background:  #dc151d !important;
    color:#fff;
}

#nav_ordi span:hover{
    background:  #FAC800 !important;
    color:#fff;
}

.card{
    border: none !important;
    border-radius: 0px !important;
}

.card:hover{
    cursor:pointer;
}

.massageHeader{
    background: url(../img/heilg_header.png) right top !important;
    border: none !important;
    border-radius: 0px 0px 0px 10px !important;
    color:#fff;
    padding-top:40px;
    padding-bottom:12px;
    margin-bottom:2px;
    margin-top:5px;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 400;
    z-index:2000;
    border-bottom:2px solid #fff !important;
}

.heilgHeader{
    background: url(../img/massage_header.png) right top !important;
    border: none !important;
    border-radius: 0px 0px 0px 10px !important;
    color:#fff;
    padding-top:40px;
    padding-bottom:12px;
    margin-bottom:2px;
    margin-top:5px;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 400;
    z-index:2000;
    border-bottom:2px solid #fff !important;
}

.ordiHeader{
    background: url(../img/ordi_header.png) right top !important;
    border: none !important;
    border-radius: 0px 0px 0px 10px !important;
    color:#fff;
    padding-top:40px;
    padding-bottom:12px;
    margin-bottom:2px;
    margin-top:5px;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 400;
    z-index:2000;
    border-bottom:2px solid #fff !important;
}

header .card:hover>.massageHeader, header .card:hover>.heilgHeader, header .card:hover>.ordiHeader{
    margin-top:0px;
}




.massageHBody{
    border: none !important;
    border-radius: 0px 0px 0px 0px !important;
    padding:0px !important;
    margin:-14px 0px 0px 0px!important;
    
}

.massageBg{
    position:absolute !important;
    background: url(../img/heilg_bg.png) no-repeat right bottom !important;


    border-radius: 0px 0px 15px 0px !important;
}

.massageBgHover{
    background: url(../img/heilg_bg2.png) no-repeat right bottom !important;
}

.heilgBg{
    position:absolute !important;
    background: url(../img/massage_bg.png) no-repeat right bottom !important;
    border-radius: 0px 0px 15px 0px !important;
}

.heilgBgHover{
    position:absolute !important;
    background: url(../img/massage_bg2.png) no-repeat right bottom !important;
}

.ordiBg{
    position:absolute !important;
    background: url(../img/ordi_bg.png) no-repeat right bottom !important;
    border-radius: 0px 0px 15px 0px !important;
}

.ordiBgHover{
    position:absolute !important;
    background: url(../img/ordi_bg2.png) no-repeat right bottom !important;
}

.massageBodyImage{
    position:absolute;
    background: url(../img/knoll_massage_2_2x.jpg) no-repeat; 
    background-size: cover;
}

.massageBodyImage2{
    position:absolute;
    background: url(../img/knoll_massage_3_2x.jpg) no-repeat; 
    background-size: cover;
}

.massageBodyImage3{
    position:absolute;
    background: url(../img/knoll_massage_1_2x.jpg) no-repeat; 
    background-size: cover;
}

.heilgBodyImage{
    position:absolute;
    background: url(../img/knoll_heilgymnastik_1_2x.jpg) no-repeat; 
    background-size: cover;
}

.heilgBodyImage2{
    position:absolute;
    background: url(../img/knoll_heilgymnastik_2_2x.jpg) no-repeat; 
    background-size: cover;
}

.heilgBodyImage3{
    position:absolute;
    background: url(../img/knoll_heilgymnastik_3_2x.jpg) no-repeat; 
    background-size: cover;
}

.ordiBodyImage{
    position:absolute;
    background: url(../img/knoll_sonstiges_1_2x.jpg) no-repeat; 
    background-size: cover;
}

.ordiBodyImage2{
    position:absolute;
    background: url(../img/knoll_sonstiges_2_2x.jpg) no-repeat; 
    background-size: cover;
}

.ordiBodyImage3{
    position:absolute;
    background: url(../img/knoll_sonstiges_3_2x.jpg) no-repeat; 
    background-size: cover;
}

.carousel-item{
    width:100%;
    height:100%;
}


h2{
    font-size:36px;
    line-height:40px;
    font-weight: 600;
}

h3{
    font-size:36px;
    line-height:43px;
    font-weight: 600;
    margin-bottom:8px;
}

h4{
    font-size:24px;
    line-height:43px;
    font-weight: 400;
}

h5{
    font-size:18px;
    line-height:25px;
    font-weight: 600;
}

h6{
    font-size:18px;
    line-height:25px;
    font-weight: 600;
}

ul.arrowList{
    list-style:none;
    margin:0px 0px 0px 10px;
    padding:0px;
}

ul.arrowList li{
    list-style:none;
    list-style-type: "> ";
    color:#1eb478;
}

ul.arrowList.massage li{
    list-style:none;
    list-style-type: "> ";
    color:#3CA0D2;
}

ul.arrowList.heilg li{
    list-style:none;
    list-style-type: "> ";
    color:#dc151d;
}

ul.arrowList.ordi li{
    list-style:none;
    list-style-type: "> ";
    color:#FAC800;
}

ul.arrowList li span{
    color:#4d4e4d;
}

.xsmall{
    font-size:10px;
    line-height:11px !important;
    padding:0px !important;
    margin:0px !important;
    display: inline-block;
}

section{
    padding-top:60px !important;
}

.isKasse{
    color: #1eb478;
}

.isKasseIntro{
    background:  url(../img/knoll_kassenleistung_2x.jpg) no-repeat center center;
    border-radius: 10px 0px 10px 0px;
    height:100%;
    width:100%;
    background-size: cover;
}

.col.isKasse div{
    background: #EBF7F2 !important;
    color:#4d4e4d !important;
    border-radius: 0px 10px 0px 10px;
    height:100%;
    padding:20px;
}

hr.isKasse{
    border:1px solid #1eb478;
    box-shadow: none !important;
    opacity: 1 !important;
}

.isMassage{
    color: #3CA0D2;
}

hr.isMassage{
    border:1px solid #3CA0D2;
    box-shadow: none !important;
    opacity: 1 !important;
}

.isHeilg{
    color: #dc151d;
}

hr.isHeilg{
    border:1px solid #dc151d;
    box-shadow: none !important;
    opacity: 1 !important;
}

.isOrdi{
    color: #FAC801 ;
}

hr.isOrdi{
    border:1px solid #FAC801;
    box-shadow: none !important;
    opacity: 1 !important;
}

.isFrage, .isUeberuns, .isKontakt{
    color: #FAC801;
}

hr.isFrage, hr.isUeberuns, hr.isKontakt{
    border:1px solid #FAC801;
    box-shadow: none !important;
    opacity: 1 !important;
}


#intro h2::before, #intro h2::after{
    content: "\0022";
    color: #FAC801;
}

.accordion, .accordion-item{
    border-radius: 0px !important; 
    border: none !important;
}

.accordion-item{
    margin-bottom:2px !important;
}

.accordion-button:after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
    background-position: 0px 0px;
    margin-right: 1rem;
  }

.accordion-button.isMassage{
    background:  url(../img/heilg_acc_bg_a.png) right top no-repeat !important;
    border: 0px !important;
    color:#fff;
    font-size:18px;
    line-height:18px;
    font-weight: 600;
    border-radius: 0px 0px 0px 10px !important; 
    padding:8px 12px !important;
}

.accordion-button.isMassage.collapsed{
    background:  url(../img/heilg_acc_bg.png) right top no-repeat !important;
    
}

.accordion-button.isMassage:focus, .accordion-button.isMassage:active, .accordion-button.isMassage:not(.collapsed) {
    color:#fff !important;
    outline: none !important;
    box-shadow: none !important;
}

.accordion-body.isMassage {
    font-family: "Roboto Condensed", Arial, sans-serif;
    background:  #EDF6FA url(../img/heilg_acc_bg2.png) right top repeat-y !important;
    border-radius: 10px 0px 10px 0px;
    border: none !important;
    color:#4d4e4d !important;
}


.accordion-button.isHeilg{
    background:  url(../img/massage_acc_bg_a.png) right top no-repeat !important;
    border: 0px !important;
    color:#fff;
    font-size:18px;
    line-height:18px;
    font-weight: 600;
    border-radius: 0px 0px 0px 10px !important; 
    padding:8px 12px !important;
}

.accordion-button.isHeilg.collapsed{
    background:  url(../img/massage_acc_bg.png) right top no-repeat !important;
    
}

.accordion-button.isHeilg:focus, .accordion-button.isHeilg:active, .accordion-button.isHeilg:not(.collapsed) {
    color:#fff !important;
    outline: none !important;
    box-shadow: none !important;
}

.accordion-body.isHeilg {
    font-family: "Roboto Condensed", Arial, sans-serif;
    background:  #FCEBEB url(../img/massage_acc_bg2.png) right top repeat-y !important;
    border-radius: 10px 0px 10px 0px;
    border: none !important;
    color:#4d4e4d !important;
}

.accordion-button.isOrdi{
    background:  url(../img/ordi_acc_bg_a.png) right top no-repeat !important;
    border: 0px !important;
    color:#fff;
    font-size:18px;
    line-height:18px;
    font-weight: 600;
    border-radius: 0px 0px 0px 10px !important; 
    padding:8px 12px !important;
}

.accordion-button.isOrdi.collapsed{
    background:  url(../img/ordi_acc_bg.png) right top no-repeat !important;
    
}

.accordion-button.isOrdi:focus, .accordion-button.isOrdi:active, .accordion-button.isOrdi:not(.collapsed) {
    color:#fff !important;
    outline: none !important;
    box-shadow: none !important;
}

.accordion-body.isOrdi {
    font-family: "Roboto Condensed", Arial, sans-serif;
    background:  #FEFAEC url(../img/ordi_acc_bg2.png) right top repeat-y !important;
    border-radius: 10px 0px 10px 0px;
    border: none !important;
    color:#4d4e4d !important;
}


.fragezeichen {
    line-height: 400px;
    font-weight: 600;
    color: #FAC800;
    font-size: 400px;
}

div.isUeberuns{
    border-radius:0px 10px 0px 10px;
    height:100%;
    width:100%;
    min-height:160px;
}

div.isUeberuns1{
    background:  #FCEBEB url(../img/knoll_praxis_2_2x.jpg) center center no-repeat !important;
    background-size: cover !important;
}

div.isUeberuns2{
    background:  #FCEBEB url(../img/knoll_praxis_3_2x.jpg) center center no-repeat !important;
    background-size: cover !important;
}

div.isUeberuns3{
    background:  #FCEBEB url(../img/knoll_praxis_1_2x.jpg) center center no-repeat !important;
    background-size: cover !important;
}

.warum_header{
    font-size:72px;
    line-height:72px;
    font-weight:600;
}

.warum_body{
    font-size:16px;
    line-height:22px;
    font-weight: 400 !important;
    margin-left:0px;
}

.warum_body h3{
    font-size:36px !important;
    line-height:43px !important;
    font-weight: 600 !important;
    color: #FAC800;
    margin:0px !important;
}

#ueberuns b{
    font-size:18px;
    line-height: 25px;
}

.footer .left{
    font-size:14px !important;
    line-height:20px !important;
}

footer{
    background:#f0f0f0;

}

footer .h_zusatz{
    margin-top: 10px;
}

footer a{
    color:#4d4e4d !important;
}

footer a:hover{
    color: #FAC800 !important;
}

#stickyPhone{
    position:fixed;
    z-index:1000;
    top:110px;
    right: -109px;
    cursor:pointer;
    transition: right .7s;
    display:none;
}

#stickyPhone:hover{
    
    right: 0px;
}

#stickyPhone img{
    height:30px;
}

#stickyTop{
    position:fixed;
    z-index:1000;
    top:160px;
    right: 5px;
    cursor:pointer;
    display:none;
    background: #FAC800;
    border-radius: 60px;
    height:32px;
    width:32px;
    padding:2px 2px 2px 7px;
    border:4px solid #fff;
}

#stickyTop:hover{
    
    opacity:.6;
}

#stickyTop img{
    height:14px;
}

ul.isModal li{
    color:#4d4e4d !important;
    margin-left:20px;
}


.modal-body a {
    color:#4d4e4d !important;
}

.modal-body a:hover {
    color: #FAC800 !important;
}

.card-header{
    text-decoration: none !important;
}

.footerLogo{
    margin-left:0px;
}

#gmap_canvas_fake{
    font-size:14px;
  }
  
  #gmap_canvas_fake .btn {
    color: #fff !important;
    background: #FAC800 !important;
    font-size: 18px;
    border-radius: 0px;
    margin-bottom: 10px;
  }

  #gmap_canvas_fake .btn:hover {
    color: #000 !important;
  }

  h1.footerSign{
    margin-top:10px;
    font-size: 24px !important;
    line-height: 34px !important;
}

a.esp{
    background: linear-gradient(98deg, rgba(181,228,121,1) 20%, rgba(255,142,202,1) 47%, rgba(252,144,202,1) 48%, rgba(92,227,227,1) 100%) !important;
    color: #000 !important;
    padding: 4px;
    margin-top: 8px;
    display: inline-block;
    font-weight: 700;
}

a.esp:hover{
    
    color: #fff !important;
}

.carousel-item {
    transition: transform 3s ease-in-out;
  }
  .carousel-fade .active.carousel-item-start,
  .carousel-fade .active.carousel-item-end {
    transition: opacity 0s 3s;
  }

@media (min-width: 1200px) {
    .container{
        max-width: 990px !important;
    }

   

  }

  @media (max-width: 1200px) {

    .nav-item{
        padding:2px 30px 0px 30px;
    }
    
    .nav-item:last-child{
        padding:0px 0px 0px 30px;
    }

    .carousel-item{
        border-bottom-right-radius:  20px !important;
    }

  }  

  @media (max-width: 1024px) {

    
    .massageHBody{
        border: none !important;
        border-radius: 0px 0px 0px 0px !important;
        padding:0px !important;
        margin: -10px 0px 0px 0px!important;
        
    }
   

    #intro h2{
        font-size:26px;
        line-height:30px;
        font-weight: 600;   
    }

    .massageHeaderMobile{
        background: url(../img/heilg_header.png) right top !important;
        border: none !important;
        border-radius: 0px 0px 0px 10px !important;
        color:#fff;
        padding:30px 0px 12px 10px;
       
        margin-bottom:2px;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 400;
    }
    
    .heilgHeaderMobile{
        background: url(../img/massage_header.png) right top !important;
        border: none !important;
        border-radius: 0px 0px 0px 10px !important;
        color:#fff;
        padding:30px 0px 12px 10px;
       
        margin-bottom:2px;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 400;
    }
    
    .ordiHeaderMobile{
        background: url(../img/ordi_header.png) right top !important;
        border: none !important;
        border-radius: 0px 0px 0px 10px !important;
        color:#fff;
        padding:30px 0px 12px 10px;
       
        margin-bottom:2px;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 400;
    }
    
    .fragezeichen {
        font-family: Roboto Slab, serif;
        background-color: transparent;
        line-height: 200px;
        min-height: 170x;
        font-weight: 600;
        color: #FAC800;
        font-size: 250px;
        margin-left: 0px;
    }


    .warum_header{
        font-size:52px;
        line-height:52px;
        font-weight:600;
    }
    
    .warum_body{
        font-size:14px;
        line-height:18px;
        font-weight: 400 !important;
        margin-left:10px;
    }
    
    .warum_body h3{
        font-size:18px !important;
        line-height:28px !important;
        font-weight: 600 !important;
        color: #FAC800;
        margin:0px !important;
    }

    section{
        padding-top:40px !important;
    }

    .section-header a{
        text-decoration: none !important;
    }

    .footerMobileTxt{
        font-size:14px;
    }

    .accordion-button{
        font-size: 16px !important;
    }

    .footerLogo{
        margin-left:-0px;
        margin-bottom:20px;
    }

     h1.footerSign{
        margin-top:10px;
        font-size: 20px !important;
        line-height: 20px !important;
    }

    .section-header{
        padding-top:86px !important;
    }

    #intro{
        padding-top:0px !important;
    }

  }

  @media (max-width: 992px) {

    

    .navbar-nav{
        margin-right:0px;
        padding-right: 0px;
        margin-top:2px;
        padding-top:0px !important;
        padding-bottom:0px !important;
    }

    .navbar{
        padding-top:0px !important;
        padding-bottom:0px !important;
    }
    
    nav{
        height:70px;
        border-bottom: 0px !important;
    }

    .bg-light{
        background: #FAC801 !important;
    }
    
    .nav-link{
        font-size:22px;
        line-height:22px;
        color:#fff !important;
        border-top:1px solid #fff;
        border-bottom:0px solid #fff;
        display: inline-block;
        padding:10px !important;
        text-transform:uppercase;
        font-family:  Arial, serif;
    }

    .nav-link:hover{
        opacity:.6;
    }

    .nav-link.nav_kasse{
        background: #1eb478;
    }

    .nav-link.nav_heilg{
        background: #3CA0D2;
    }

    .nav-link.nav_massage{
        background: #dc151d;
    }

    .nav-link.nav_ordi{
        background: #FAC800;
    }
    
    .nav-item{
        padding:2px 30px 0px 30px;
    }
    
    .nav-item:last-child{
        padding:0px 0px 0px 30px;
    }

    .navbar-toggler {
        box-shadow: none !important;
        border: none !important;
      }
     
      
      .navbar-toggler span {
          display: block;
          background: url(../img/burgerline.svg) !important;
          color:#fff !important;
          height: 3px;
          width: 25px;
          margin-top: 5px;
          margin-bottom: 5px;
          position: relative;
          left: 0;
          opacity: 1;
          transition: all 0.35s ease-out;
          transform-origin: center left;
          border-radius:4px !important;
        }
      
        .navbar-toggler span:nth-child(1) {
          transform: translate(0%, 0%) rotate(0deg);
        }
        
        .navbar-toggler span:nth-child(2) {
          opacity: 1;
        }
        
        .navbar-toggler span:nth-child(3) {
          transform: translate(0%, 0%) rotate(0deg);
        }
        
        .navbar-toggler span:nth-child(1) {
          margin-top: 0.3em;
        }
        
        .navbar-toggler:not(.collapsed) span:nth-child(1) {
          transform: translate(15%, -33%) rotate(45deg);
        }
        
        .navbar-toggler:not(.collapsed) span:nth-child(2) {
          opacity: 0;
        }
        
        .navbar-toggler:not(.collapsed) span:nth-child(3) {
          transform: translate(15%, 33%) rotate(-45deg);
        }

    

  }