@charset "UTF-8";
/* CSS Document */

/* header */

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

.header li a {
  display: block;
  padding: 17px 0 11px 20px;
  text-decoration: none;
	background: #BABABA;
	border: 1px solid #A8A8A8;
	border-bottom: 0;
	font-family: 'Spartan', 'Trebuchet MS', Arial, 'sans-serif';
	font-style: normal;
	font-weight: 500;
	font-size: .7em;
	color: #000;
}
.header li.first {
	margin-left: 0;
}
.header li.last {
	border-bottom: 1px solid #A8A8A8;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #f4f4f4;
}

/* menu */

.header .menu {
  max-height: 0;
	position: relative;
	top: -4px;
	  transform: translate(-150%);
      transition: transform 0.5s ease-in-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  padding: 19px 15px;
  position: relative;
  user-select: none;
	background-color: #662D91;
}

.header .menu-icon .navicon {
  background: #fff;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

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

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

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

/* menu btn */

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

.header .menu-btn:checked ~ .menu {
  max-height: 240px;
	transform: translateX(0);
}

.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;
}
footer ul {
	
}


@media (min-width: 860px) {
	
	
	.header .menu {
		max-height: none;
		position: relative;
		top: 40px;
		background-color: transparent;
		transform: translate(0);
	}
	.header li {
    float: left;
  }
  .header li a {
  margin-left: 20px;
  padding: 0;
  text-decoration: none;
	background-color: transparent;
	border: 0;
	border-bottom: 3px solid #fff;
	color: #555;
}
	.header li.first a {
		margin-left: 0;
	}
	.header li a:hover {
	border-bottom: 3px solid #662D91;
		background: none;
	}
	.header .active a {
	border-bottom: 3px solid #99D26E;
}
	.header .active a:hover {
	border-bottom: 3px solid #662D91;
}
	.header li.last {
	border-bottom: 0;
}
  .header .menu-icon {
    display: none;
  }
	
}

@media (min-width: 1024px) {
	

	.header li a {
		margin-left: 45px;
	}
	
}

@media (min-width: 1280px) {
	
	.header .menu {
		left: 115px;
	}
	
}