* {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
  box-sizing: border-box;
  font-family: sans-serif;
  list-style: none;
}

a,
a:hover,
a:visited,
a:active {
  color: inherit;
  text-decoration: none
}

.red {
  border: solid 1px red
}

body {
  width: 100%;
	height: 200vh;
	
  
}

/********** header *******************/

.header{
	width: 100%;
	display: flex;
	align-items: center;
	position: fixed;
	top: 0px;
	box-shadow: 2px 2px 2px rgba(10,10,10,0.4);
	background: #ffffff;
	
	
}
.logo{
	flex-grow: 1;
	display: flex;
	justify-content: center;
	

}
.logo img{
	height: 80px;
	margin: 10px 15px;
	
}

.top_middle{
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.top_tittle{
	display: flex;
	flex-direction: column;
  font-family: 'Caveat';


}

.top_tittle span{
	align-self: flex-end;
	color: #333333;
	font-size: 0.7em;
}
.menu{
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.menu_item{
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin: 5px 10px;
	padding: 5px;
	border-bottom: solid 3px #ffffff;
}

.menu_item:hover{
	border-bottom: solid 3px #a0c216;
}


.menu_item i{
	margin: 5px;
	color: #80b25d;
}

.top_right {
  background: #ffffff;
  display: flex;
  flex-wrap: wrap;
  width: 100px;
	min-width: 100px;
	height: 100px;
	box-sizing: border-box;
	
}

.cubc {
  
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2.5px;
  font-size: 1.5em;
  color: #ffffff;
  cursor: pointer;
}

.cubc span{
  display: none;
}

.cubc1 {
  background: #148460;
}

.cubc2 {
  background: #80b25d;
}

.cubc3 {
  background: #a0c216;
}

.cubc4 {
  background: #ddeccf;
}

.color1{
	background: #ddeccf;
	color: #80b25d;
	border-color: #80b25d;
}
.color2{
	background: #80b25d;
	color: #ddeccf;
	border-color: #ddeccf;
}