.header{
	background-color: #FFFFFF;
	height: 160px;
	/*border:solid 1px black;*/
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	padding: 10px;
	transition: 0.4s;
}
.name{
	font-size: 50px;	
	transition: 0.4s;
	font-family: 'Arvo', serif;
}
.options{
	display: flex;
	flex-direction: row;
	align-items: center;
	transition: 0.4s;
	justify-content: space-around;
	/*border:solid 1px black;*/
}
.icon,.icont{
	padding: 15px;
	font-size: 30px;
	font-family: 'Arvo', serif;
	color: black;
}
.icon a, #name a, .icont a{
	transition: 0.4s;
	color: black;
}
.iconline i{
	transition: 0.4s;
	color: black;
}
.icon a:hover, .iconline i:hover{
	color: #8CCFFF;
	transition: 0.4s;
}
.icont{
	display: none;
	transition: 0.4s;
}

@media only screen and (max-width: 750px){
	.name{
		transition: 0.4s;
		font-size: 40px;
	}
	.icon{
		display: none;
		transition: 0.4s;
	}
	.icont{
		display: block;
		transition: 0.4s;
		font-size: 25px;
		/*position: absolute;*/
	}
  /*.options.responsive {position: relative;}
  .options.responsive .icont {
    position: absolute;
  }
  .options.responsive .icon a {
    float: none;
    display: block;
    /*text-align: left;*/
    .options.responsive{
		transition: 0.4s;
    	flex-direction: column;
    }
    .options.responsive .icon{
    	display: block;
		transition: 0.4s;
    	font-size: 25px;
    }
    .header{
    	padding: 20px;
		transition: 0.4s;
    	height: auto;
    }
}
@media screen and (max-width: 400px){
	.name{
		font-size: 33px;
		transition: 0.4s;
	}
	.icont{
		font-size: 20px;
		transition: 0.4s;
	}
}