/* header */

.header {
	background-color: #fff;
	position: fixed;
	width: 100%;
	height: auto;
	margin: auto;
	z-index: 100;
	top: 0;
}

.header ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}

.header li a {
	display: block;
	padding: 20px 20px;
	text-decoration: none;
  	font-family: Montserrat, sans-serif;
  	color: #000;
  	padding: 15px 18px;
  	text-decoration: none;
  	font-size: 16px;
  	text-transform: uppercase;
}

.header .logo {
	color: #333;
	display: block;
	float: left;
	font-size: 1.5em;
	text-decoration: none;
	text-align: centerl
}	

/* menu */
.menu-wrapper { max-width: 1200px;}

.header .menu {
	clear: both;
	max-height: 0;
	transition: max-height .5s ease-out;
}

.navbar {
  overflow: hidden;
  margin: auto;
  width:80%;
}

.navbar a:hover { color: #636363 !important; }

.navbar li a.active {
	background-color:#fff;
	color: #e27d23;	
}
/* menu icon */

.header .menu-icon {
	cursor: pointer;
	display: inline-block;
	padding: 10px;
	position: relative;
	user-select: none;
	height: auto;
	top: 15;
	margin: 10px 0;
	float:left;
}

.header .menu-icon .navicon {
	display: block;
	height: 5px;
	position: relative;
	transition: background .5s ease-out;
	width: 16px;
}

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

.header .menu-icon .navicon:before { top: 5px; }

.header .menu-icon .navicon:after { top: -5px;}


/* menu btn */

.header .menu-btn { display: none; }

.header .menu-btn:checked~.menu { max-height: 400px;}

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

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

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

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

.header sup {
    top: -0.2rem;
    padding-left: .125em;
    font-size: .75em;
    vertical-align: baseline;
    position: relative;
}


/* Responsive */

@media only screen and (max-width: 768px) {
	.menu-wrapper {width:100%;}
	.header{position: initial; }
	
	.header ul { background-color: #fff;}
	.header ul li {border-bottom: 1px solid #eaeaea;}
	.header li a {
		padding: 15px;
		font-family: 'Montserrat','san-serif';
		font-size: 13px;
		text-transform:none;
	}

}

@media only screen and (min-width: 769px) {
	.menu-wrapper {
		background: #fff;
		/*height: 55px;*/
		line-height: 2rem;
		width: 80%;
	}

	.header li { float: left;}
	.header .logo {line-height: 1; padding:20px 0 20px 0;}

	.header li a {
		color: #333;
		padding: 0px 15px;
	}
	
	.header .menu {
		clear: none;
		float: right;
		max-height: none;
	}
	.header .menu-icon {
		display: none;
		float:left;
	}
}


@media only screen and (max-width: 600px) {
	.logo {padding:0px;}
}

@media screen and (max-width: 880px) {
	.navbar {
		overflow: hidden;
		margin: auto;
		width:100%;
		padding-top: 5px;
	}	  
}