@media (min-width:0px) and (max-width:399px) {     
    #cssdebug{ background-color: lightblue;}

    .menu_1_link_pc{
        display: none;
    }
    #ham-menue {
        position: fixed;
        top: -1px;
        right: -20px;
    }

    
}  





@media (min-width:400px) and (max-width:450px) {     
    #cssdebug{ background-color: blue;}

    .menu_1_link_pc{
        display: none;
    }
    #ham-menue {
        position: fixed;
        top: -1px;
        right: -20px;
    }
}  








@media (min-width:451px) and (max-width:600px) {          
    #cssdebug{ background-color: lightgreen;}

    .menu_1_link_pc{
        display: none;
    }
    #ham-menue {
        position: fixed;
        top: -1px;
        right: -20px;
    }
} 









@media (min-width:601px) and (max-width:768px) {          
    #cssdebug{ background-color: green;}


    .menu_1_link_pc{
        display: none;
    }
    #ham-menue {
        position: fixed;
        top: 9px;
        right: -20px;
    }

} 









@media (min-width:769px) and (max-width:900px) {       
    #cssdebug{ background-color: gray;}

    
    .menu_1_link_pc{
        display: none;
    }
#ham-menue{         
    position: fixed;
        top: 13px;
        right: 0px;
}

} 






@media (min-width:900px) and (max-width:991px) {       
    #cssdebug{ background-color: lightgoldenrodyellow;}

    .menu_1_link_pc{
        display: none;
    }
#ham-menue{         
    position: fixed;
        top: 13px;
        right: 0px;
}
     
} 



@media (min-width:992px) and (max-width:1023px) {       
    #cssdebug{ background-color: lightgray;}

    .menu_1_link_mobile{
        display: none;
    }
.hat-nav{ position:relative; }
} 


















@media (min-width:1024px) and (max-width:1199px) {          
    #cssdebug{ background-color: brown;}

    .menu_1_link_mobile{
        display: none;
    }
.hat-nav{ position:relative; }

    
} 






@media (min-width:1200px) and (max-width:1350px) {          
    #cssdebug{ background-color: white;}

    .menu_1_link_mobile{
        display: none;
    }
.hat-nav{ position:relative; }
    
} 






@media (min-width:1351px) and (max-width:1500px) {          
    #cssdebug{ background-color: orange;}


    .menu_1_link_mobile{
        display: none;
    }
.hat-nav{ position:relative; }
    
} 







@media (min-width:1501px) and (max-width:1750px) {          
    #cssdebug{ background-color:  red;}

    .menu_1_link_mobile{
        display: none;
    }
.hat-nav{ position:relative; }

} 




@media (min-width:1751px) and (max-width:5000px) {      
    #cssdebug{ background-color: black;}

    .menu_1_link_mobile{
        display: none;
    }
.hat-nav{ position:relative; }
    
} 



.hat-nav{
    --hat-nav-dropdown-width: 200px;
    padding-top:33px;
    z-index:100;width:100%}
 
 
.hat-nav>ul:not(.hat-nav-wrapper){display:none}
 
 
.hat-nav-wrapper{padding:0;margin:0;display:block}
 
 
 
.hat-nav-wrapper li{list-style:none}
 
 
.hat-nav-wrapper>li{display:inline-block}
 
 .hat-nav-wrapper span.toggle{transition:all .4s ease;transform:rotate(0)}
 
 .hat-nav-wrapper span.toggle span.default{border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent;width:0;height:0;transition:all .4s ease;transform:rotate(0);display:inline-block;margin-left:.355em;vertical-align:.255em}
 
 .hat-nav-wrapper.hat-hatmenu-list span.toggle span.default{transform:rotate(-90deg)}
 
 .hat-nav-wrapper .dropdown{position:relative}
 
 .hat-nav-wrapper .dropdown ul{padding:0;z-index:10}
 
 .hat-nav-wrapper .dropdown>ul{transition:all .4s ease;position:absolute;top:120%;opacity:0;visibility:hidden;width:var(--hat-nav-dropdown-width)}
 
 .hat-nav-wrapper .dropdown>ul.left,.hat-nav-wrapper .dropdown>ul .left{left:0}
 
 .hat-nav-wrapper .dropdown>ul.right,.hat-nav-wrapper .dropdown>ul .right{left:0}
 
 .hat-nav-wrapper .dropdown>ul ul{transition:all .4s ease;position:absolute;top:20%;opacity:0;visibility:hidden;width:var(--hat-nav-dropdown-width)}
 
 .hat-nav-wrapper .dropdown>ul .dropdown ul.left{left:100%}
 
 .hat-nav-wrapper .dropdown>ul .dropdown ul.right{left:100%}
 
 .hat-nav-wrapper .dropdown>ul .dropdown.show>ul{visibility:visible;opacity:1;top:0}
 
 .hat-nav-wrapper .dropdown.show>ul{visibility:visible;opacity:1;top:100%}
 
 .hat-nav-wrapper .dropdown.show>a span.toggle .default{transform:rotate(-180deg)}
 
 .hat-nav-wrapper .dropdown-mega .dropdown-mega-container{transition:all .4s ease;position:absolute;top:120%;opacity:0;visibility:hidden;left:0;width:100%;min-height:300px}
 
 .hat-nav-wrapper .dropdown-mega.show>a span.toggle{transform:rotate(-180deg)}
 
 .hat-nav-wrapper .dropdown-mega.show>.dropdown-mega-container{visibility:visible;opacity:1;top:100%}
 
 .hat-nav-wrapper.hat-nav-cloned>li{display:block}
 
 .hat-nav-wrapper.hat-nav-cloned .dropdown ul{position:relative;width:100%;height:0;top:0}
 
 .hat-nav-wrapper.hat-nav-cloned .dropdown ul .left,.hat-nav-wrapper.hat-nav-cloned .dropdown ul .right{left:0 !important;top:0 !important}
 
 .hat-nav-wrapper.hat-nav-cloned .dropdown.show>ul{height:initial}
 
 .hat-nav-wrapper.hat-nav-cloned .dropdown-mega .dropdown-mega-container{position:relative;height:0;min-height:0;top:0;display:none}
 
 .hat-nav-wrapper.hat-nav-cloned .dropdown-mega.show .dropdown-mega-container{display:block;height:auto;top:0}
 
 .hat-nav-hover>ul .dropdown:hover>a span.toggle{transform:rotate(-180deg)}
 
 .hat-nav-hover>ul .dropdown:hover>ul{visibility:visible;opacity:1;top:100%}
 
 .hat-nav-hover>ul .dropdown:hover .dropdown:hover>ul{visibility:visible;opacity:1;top:0}
 
 .hat-nav-hover>ul .dropdown-mega:hover .dropdown-mega-container{visibility:visible;opacity:1;top:100%}
 
 .hat-nav-hover>ul .dropdown-mega:hover>a span.toggle{transform:rotate(-180deg)}
 
 .hat-nav-acilirmenu{--hat-acilirmenu-line-width: 35px;--hat-acilirmenu-line-height: 3px;--hat-acilirmenu-line-indent-top: 7px;--hat-acilirmenu-line-color: #333333;display:none;align-items:flex-start}
 
 .hat-nav-acilirmenu--lines{display:inline-flex;align-items:center;justify-content:center;width:var(--hat-acilirmenu-line-width);height:calc(var(--hat-acilirmenu-line-height)*3 + var(--hat-acilirmenu-line-indent-top)*2);position:relative}
 
 .hat-nav-acilirmenu--lines span{background-color:var(--hat-acilirmenu-line-color);height:var(--hat-acilirmenu-line-height);width:var(--hat-acilirmenu-line-width);right:0;cursor:pointer;border-radius:2px;position:absolute;display:block;transition:all .4s ease;transform:rotate(0);opacity:1}
 
 .hat-nav-acilirmenu--lines span:first-child{top:0}
 
 .hat-nav-acilirmenu--lines span:nth-child(2){top:calc(var(--hat-acilirmenu-line-height) + var(--hat-acilirmenu-line-indent-top))}
 
 .hat-nav-acilirmenu--lines span:nth-child(3){top:calc((var(--hat-acilirmenu-line-height) + var(--hat-acilirmenu-line-indent-top))*2)}
 
 .hat-nav-acilirmenu--title{position:relative;display:inline-block;margin-right:3px}
 
 .hat-nav-acilirmenu.hat-sidebar-active .hat-nav-acilirmenu--lines span:first-child{opacity:0}
 
 .hat-nav-acilirmenu.hat-sidebar-active .hat-nav-acilirmenu--lines span:nth-child(2){transform:rotate(45deg)}
 
 .hat-nav-acilirmenu.hat-sidebar-active .hat-nav-acilirmenu--lines span:last-child{transform:rotate(-45deg);top:10px}
 
 @media(max-width: 575.98px){.hat-nav-xs .hat-nav-acilirmenu{display:flex}
 
 .hat-nav-xs>ul{display:none}
 
 }
 
 @media(max-width: 767.98px){.hat-nav-sm .hat-nav-acilirmenu{display:flex}
 
 .hat-nav-sm>ul{display:none}
 
 }
 
 @media(max-width: 991.98px){.hat-nav-md .hat-nav-acilirmenu{display:flex}
 
 .hat-nav-md>ul{display:none}
 
 }
 
 @media(max-width: 1199.98px){.hat-nav-lg .hat-nav-acilirmenu{display:flex}
 
 .hat-nav-lg>ul{display:none}
 
 }
 
 @media(max-width: 1399.98px){.hat-nav-xl .hat-nav-acilirmenu{display:flex}
 
 .hat-nav-xl>ul{display:none}
 
 }
 
 .hat-nav-xxl .hat-nav-acilirmenu{display:flex}
 
 .hat-nav-xxl>ul{display:none}
 
 .hat-nav-noexpand .hat-nav-acilirmenu{display:none !important}
 
 .hat-nav-noexpand>ul{display:flex !important}
 
 .hat-sidebar{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(51,51,51,0);visibility:hidden;transition:all .4s ease;z-index:1041}
 
 .hat-sidebar-content{position:absolute;transition:all .4s ease}
 
 .hat-sidebar.left .hat-sidebar-content{width:320px;height:100%;left:-100%;top:0}
 
 .hat-sidebar.right .hat-sidebar-content{width:320px;height:100%;right:-100%;top:0}
 
 .hat-sidebar.top .hat-sidebar-content{width:100%;height:320px;right:0;top:-100%}
 
 .hat-sidebar.bottom .hat-sidebar-content{width:100%;height:320px;right:0;bottom:-100%}
 
 .hat-sidebar.open{background:rgba(51,51,51,.4);visibility:visible}
 
 .hat-sidebar.open.left .hat-sidebar-content{left:0}
 
 .hat-sidebar.open.right .hat-sidebar-content{right:0}
 
 .hat-sidebar.open.top .hat-sidebar-content{top:0}
 
 .hat-sidebar.open.bottom .hat-sidebar-content{bottom:0}
 
 .hat-sidebar-content{background:rgba(255,255,255,.6)}
 
 .hat-sidebar-content:after{content:"";position:absolute;display:block;top:0;right:0;bottom:0;left:0;backdrop-filter:blur(15px) saturate(2);transition:.3s background-color,.3s backdrop-filter;will-change:background-color,backdrop-filter;z-index:-2}
 
 .hat-sidebar-header{width:100%;padding:15px;border-bottom:1px solid #ccc}
 
 .hat-sidebar-header .hat-sidebar-title{position:relative;font-weight:600;font-size:18px;margin:0}
 
 .hat-sidebar-body{width:100%;height:calc(100% - 59px);overflow-y:auto;padding:15px;font-size:14px}
 
 .hat-sidebar-close{
     position:absolute;right:151px;top:-25px;
     width:10px;height:10px;cursor:pointer;text-decoration:none !important;font-weight:300; font-size: 50px;}
 
 .hat-hatmenu-list{list-style:none;padding:0;margin:0;position:relative;overflow:hidden}
 
 .hat-hatmenu-list a{transition:all .4s ease-in-out}
 
 .hat-hatmenu-list .dropdown,.hat-hatmenu-list .dropdown-mega{position:static}
 
 .hat-hatmenu-list .dropdown>ul,.hat-hatmenu-list .dropdown>div,.hat-hatmenu-list .dropdown-mega>ul,.hat-hatmenu-list .dropdown-mega>div{list-style:none;padding:0;margin:0;width:100%}
 
 .hat-hatmenu-list .dropdown>ul>li>a,.hat-hatmenu-list .dropdown-mega>ul>li>a{display:none}
 
 .hat-hatmenu-list .dropdown>.dropdown-mega-container,.hat-hatmenu-list .dropdown-mega>.dropdown-mega-container{display:none}
 
 .hat-hatmenu-list .dropdown.open>ul>li>a,.hat-hatmenu-list .dropdown-mega.open>ul>li>a{display:block}
 
 .hat-hatmenu-list .dropdown.open>.dropdown-mega-container,.hat-hatmenu-list .dropdown-mega.open>.dropdown-mega-container{display:block}
 
 .hat-hatmenu-list.closed>li>a{display:none}
 
 
 
 
 
 /**
* VGNav THEME
* only css
**/

a {
	transition: all .3s ease;
}

/* main menu */
.hat-nav > ul > li {
	padding: 20px 15px;
}
.hat-nav > ul > li > a {
	font-size: 17px;
	line-height: 1.5;
	display: flex;
	color: #232323;
	text-decoration: none;
	background-color: white;
        font-weight:400;
}

.hat-nav > ul > li.active a, .hat-nav > ul > li a:hover {
	color: #236da9;
}

.hat-nav .dropdown ul {
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 4px 7px rgba(0, 0, 0, .15);
}

.hat-nav .dropdown ul li a {
	text-decoration: none;
	font-size: 15px;
        font-weight: 500;
	display: block;
	padding: 7px;
	color: #232323;
	border: 1px solid rgba(0, 0, 0, .1);
	border-top: none;
        
}

.hat-nav .dropdown ul li:first-child a {
	border: 1px solid rgba(0, 0, 0, .1);
}

.hat-nav .dropdown ul ul {
	background: rgba(255, 255, 255, .9);
}

/* mega menu */
.hat-nav .dropdown-mega .dropdown-mega-container {
	background: rgba(255, 255, 255, .9);
	border: 1px solid rgba(0, 0, 0, .1);
	box-shadow: 0 4px 7px rgba(0, 0, 0, .15);
	padding: 15px;
}

/* sidebar, collapse */
.hat-nav-sidebar .hat-nav-sidebar__content {
	width: 100%;
	padding: 0 20px 20px 20px;
}

.hat-nav-collapse ul {
	width: 100%;
	padding: 20px 0;
}

.hat-nav-sidebar__content > ul > li > a,
.hat-nav-collapse > ul > li > a {
	display: block;
	padding: 10px 0;
	border-bottom: 1px solid #f2f2f2;
	text-decoration: none;
	color: #333333;
}

.hat-nav-sidebar__content > ul ul,
.hat-nav-collapse > ul ul{
	background: rgba(0, 0, 0, .02);
}

.hat-nav-sidebar__content > ul ul li > a,
.hat-nav-collapse > ul ul li > a{
	display: block;
	padding: 10px;
	border-bottom: 1px solid #f5f5f5;
	text-decoration: none;
	color: #333333;
	font-size: .95rem;
}

.hat-nav-sidebar__content .dropdown-mega-container,
.hat-nav-collapse .dropdown-mega-container{
	background: rgba(0, 0, 0, .02);
	border-bottom: 1px solid #f5f5f5;
	padding: 15px;
}



svg#ham-menue {
		fill: white;
		width: 50px;
		height: 50px;
		margin-left: 10px;
		margin-right: 30px;
                background-color: #2b3742;
	}

	.line {
		fill: none;
		stroke: #fff;
		stroke-width: 3;
		transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
                background-color: red;
	}

	.line1 {
		stroke-dasharray: 60 207;
		stroke-width: 4;
	}

	.line2 {
		stroke-dasharray: 60 60;
		stroke-width: 4;
	}

	.line3 {
		stroke-dasharray: 60 207;
		stroke-width: 4;
	}

	.hat-nav-acilirmenu.hat-sidebar-active .line1 {
		stroke-dasharray: 90 207;
		stroke-dashoffset: -134;
		stroke-width: 3;
	}

	.hat-nav-acilirmenu.hat-sidebar-active .line2 {
		stroke-dasharray: 1 60;
		stroke-dashoffset: -30;
		stroke-width: 3;
	}

	.hat-nav-acilirmenu.hat-sidebar-active .line3 {
		stroke-dasharray: 90 207;
		stroke-dashoffset: -134;
		stroke-width: 3;
	}
        
        
        
        .sub-menu .hat-nav-wrapper span.toggle span.default{
            transform: rotate(45deg);
        }
        
        .hat-nav-wrapper .dropdown>ul{
            width:250px;
        }
        .hat-nav-wrapper .dropdown>ul .dropdown>ul{
            width:250px;
        }
        .hat-nav-wrapper .dropdown>ul>li{
            
            
        }
        
        .hat-hatmenu-list--back{
            width: 100%; height: 50px; background-color: #a7f2e94d; font-size:25px; color:#333333;
            padding-top: 4px; padding-left: 20px; text-align: center;
        }
        
        
        .menu_1_link_mobile{
            position: relative;
            width:100%; height: 50px; background:rgba(255,255,255,1); color:#333333; font-size: 17px; font-weight: 500;
            padding-top: 15px; margin-top: 10px; padding-left: 15px;
        }
        
        .menu_1_link_mobile i {
    position: absolute;
    top: 15px;
    right: 10px;
    font-size: 19px;
    color: #373636;
}