.wrapper-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
}

.wrapper-navigation li a {
  display: block;
  padding: 20px 20px;
 /* border-right: 1px solid #f4f4f4;*/
  text-decoration: none;
}

.wrapper-navigation li a:hover,
.wrapper-navigation .menu-btn:hover {
 /*background-color: #f4f4f4;*/
}


/* menu */

.wrapper-navigation .menu-burger {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.wrapper-navigation .menu-icon {
  cursor: pointer;
  display: inline-block;
  /*float: right;*/
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.wrapper-navigation .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 40px;
}

.wrapper-navigation .menu-icon .navicon:before,
.wrapper-navigation .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.wrapper-navigation .menu-icon .navicon:before {
  top: 10px;
}

.wrapper-navigation .menu-icon .navicon:after {
  top: -10px;
}

/* menu btn */

.wrapper-navigation .menu-btn {
  display: none;
}

.wrapper-navigation .menu-btn:checked ~ .menu-burger {
  max-height: 300px;
}

.wrapper-navigation .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.wrapper-navigation .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.wrapper-navigation .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.wrapper-navigation .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.wrapper-navigation .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}





.wrapper-navigation {position:absolute; top:70px; right:0; z-index:999; /* background:rgba(0,0,0, 0.6);mix-blend-mode: multiply; width: fit-content;*/ }

.fix-nav .wrapper-navigation {	position:fixed; top:0; background:rgba(255,255,255, 0.94);mix-blend-mode: unset; width:100%; /* text-align:right;*/ z-index:999;
								animation: hassenAnimation .5s;
								animation-fill-mode: both;
								
								box-shadow: 0 1px 0 rgba(12,13,14,0.1), 0 1px 3px rgba(12,13,14,0.1), 0 4px 20px rgba(12,13,14,0.035), 0 1px 1px rgba(12,13,14,0.025);}




@keyframes hassenAnimation {
    from {
        transform:scale(0.7);
        opacity:0
    }
    to {
        transform: scale(1);
        opacity:1
    }
}




/*
.fix-nav .wrapper-navigation:before { 
    content:"\A";
    border-style: solid;
    border-width: 0px 32px 78px 0px;
    border-color: transparent rgba(255,255,255, 0.9) transparent transparent;
    position: absolute;
    left: -32px; top:0; }
*/

/***************************************/
nav > ul > li { display:inline-block; cursor:default}


/*******************************************/

.fix-nav nav li a,
.fix-nav nav > a { color:#034278; }

.fix-nav nav li a { top: 7px; }

/* ---  ----*/
nav > ul > li > a,
nav > a {
	position: relative;
	display: inline-block;
	margin: 15px 25px;
	outline: none;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 900;
	/*text-shadow: 0 0 1px rgba(255,255,255,0.3);*/
	font-size: 0.8em;
	/*text-shadow: 0px 0px 20px rgba(0, 0, 0, 1), 0px 0px 40px rgba(0, 0, 0, 1), 0px 0px 60px rgba(0, 0, 0, 1);*/ }

nav > ul > li > a:hover,
nav > ul > li > a:focus,

nav > a:hover,
nav > a:focus {	outline: none; color:#ff5722;text-shadow: none; }

/* Effect 4: bottom border enlarge */
.cl-effect-4 > ul > li > a,
.cl-effect-4 > a {	padding: 0 0 10px; width:fit-content;}

.cl-effect-4 > ul > li > a::after,
.cl-effect-4 > a::after {
	position: absolute;
	top: 120%;
	left: 0;
	width: 100%;
	height: 1px;
	background: #ff5722;
	content: '';
	opacity: 0;
	-webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
	transition: height 0.3s, opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);}

.cl-effect-4 > ul > li > a:hover::after,
.cl-effect-4 > ul > li > a:focus::after,

.cl-effect-4 > a:hover::after,
.cl-effect-4 > a:focus::after {
	height: 4px;
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px); }
	
/******************************************/
/******** RESPONSIVE **********************/		
/******************************************/	
.cl-effect-4 a.icon {display: none;}



/**********************************
***** SUB MENU ********************
**********************************/
nav li li a,
.fix-nav nav li li a { color:#393939; }

nav li ul { display:none; position:absolute; background:#fff; padding:20px; box-shadow: 0 1px 0 rgba(12,13,14,0.1), 0 1px 3px rgba(12,13,14,0.1), 0 4px 20px rgba(12,13,14,0.035), 0 1px 1px rgba(12,13,14,0.025);}

nav li li {	display: block; padding:10px; border-bottom:thin solid #ddd;  text-align:left; font-size:0.8em; }
nav li li:hover, nav li li:last-child:hover { background:#eee; border-bottom:thin solid #b62d2c;}
nav li li:last-child {	border-bottom:none}

nav ul li:hover ul { display:block;  }



	
/* 48em = 768px */

@media (min-width: 1199px) {
	.wrapper-navigation ul {  background-color: transparent;
}
  .wrapper-navigation li {
    float: left;
  }
  .wrapper-navigation li a {
    padding: 20px 30px;
  }
  .wrapper-navigation .menu-burger {
    clear: none;
    float: right;
    max-height: none;
  }
  .wrapper-navigation .menu-icon {
    display: none;
  }
}
	
	
	
@media screen and (max-width:1199px) {	
	
.wrapper-navigation { top:10px; right:auto; }	

.wrapper-navigation ul {  background-color: transparent;}

nav > ul > li { display:block; margin:30px 0}
   

}