/* ###############################################################
##################################################################

1.1 Header Struktur
1.3 Logo
1.2 Burger Menu Struktur
1.3 Main Menu

##################################################################
############################################################### *

1.1 Header Struktur
##################################################### */

header {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 999;
    transition: all 0.5s ease;
    background-color: #fff;
}

header .container{
    padding-top: 110px;
    padding-bottom: 90px;
    transition: all 0.5s ease;
}

header.header-scroll .container{
    padding-top: 22.5px;
    padding-bottom: 22.5px;
}

@media screen and (max-width:1199px) {
    header .container{
        padding-top: 60px;
        padding-bottom: 60px;
        transition: all 0.5s ease;
    }
}

@media screen and (max-width:991px) {
    header .container,
    header.header-scroll .container{
        padding-top: 22.5px;
        padding-bottom: 22.5px;
    }
}

@media screen and (max-width:767px) {
    header .container,
    header.header-scroll .container{
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

/* 1.2 Logo
##################################################### */

.logo-font{
    transition: 0.5s all;
}

.header-scroll .logo-font{
    opacity: 0;
}

#logo{
    position: relative;
    z-index: 1;
}

#logo svg{
    height: 110px !important;
    width: auto !important;
    display: inline-table;
    position: relative;
    transition: 0.5s all;
}

.header-scroll #logo svg{
    height: 80px !important;
}

header.opened svg path,
header.opened svg circle,
header.opened svg rect{
    fill: var(--lightColor) !important;
}

@media screen and (max-width:1199px) {
    #logo svg{
        height: 90px !important;
    }
    
    .header-scroll #logo svg{
        height: 60px !important;
    }
}

@media screen and (max-width:991px) {
    #logo svg{
        height: 60px !important;
    }
    
    .header-scroll #logo svg{
        height: 40px !important;
    }
}

@media screen and (max-width:767px) {
    #logo svg{
        height: 50px !important;
    }
    
    .header-scroll #logo svg{
        height: 50px !important;
    }
}

/* 1.3 Burger Menu Struktur
##################################################### */

.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
   background-color: #02737D !important;
}

header input[type='checkbox'],
.lbl-toggle {
    display: none;
}

.lbl-toggle {
    display: none;
    /*display: inline-block;*/
    cursor: pointer;
    transition: .35s all;
    position: absolute;
    right: 25px;
    top: 20px;
    z-index: 1;
    -webkit-tap-highlight-color: transparent !important;
}

.header-scroll .lbl-toggle {
   top: 15px;
}

.collapsible-content {
    transition: opacity 0s;
    width: 100vw;
    overflow-y: scroll;
    position: fixed;
    right: 0;
    background: #02737D;
    top: 0;
    pointer-events: none;
    opacity: 0;
}

#expand-wrap {
    height: 100vh;
}

#expand-wrap.opened {
    height: 100vh;
    padding-top: 315px;
    padding-bottom: 45px;
}

.collapsible-content.opened {
    opacity: 1;
    pointer-events: all;
}


@media screen and (max-width:1199px) {
    .header-scroll .lbl-toggle {
       top: 6.5px;
    } 

    #expand-wrap.opened {
        padding-top: 235px;
    }
}

@media screen and (max-width:991px) {
    .lbl-toggle,
    .header-scroll .lbl-toggle {
       top: 3.5px;
    } 

    #expand-wrap.opened {
        padding-top: 185px;
    }
}

@media screen and (max-width:767px) {
    .lbl-toggle,
    .header-scroll .lbl-toggle {
       top: 1.5px;
    } 

    #expand-wrap.opened {
        padding-top: 135px;
    }
}

/* 1.4 Main Menu
##################################################### */

header #menu li {
    display: block;
    margin: 5px 0;
}

header #menu li a{
    color: var(--lightColor);
    font: normal 500 var(--secondaryHead) 'Ubuntu', sans-serif;
}

header #menu li a:hover{
    opacity: 0.5;
}