/*Navigation Responsive*/
#menubuttons a{
	display: block;
	background-color: blue;
	color: #fff;
	
}


#menubuttons{
	
	display: none;
}
#menubuttons .close{
	display: none;
}

@media screen and (max-width: 1024px){
	.wrapper{
		width: 100%;
	}

.box, .inline{
	margin: auto;
	width: 100%;
		
}



}


@media screen and (max-width: 800px){
	
	#navcontainer{
	position: absolute;
	left: 100px;
	right: 20px;} 
	
	#navcontainer ul{
	display: none;	
	background-color: #fff;
	position: static;
	
}

	#menubuttons {
	display: block;
	}
	
	
	#responsive:target #menubuttons .open{
	display: none;
	}
	
	
	
	#responsive:target #navcontainer ul{
	display: block;
	}
	
	#navcontainer li{	
	float: none;
		
}
	
	#responsive:target #menubuttons .close{
	display: block;
	}
	
	#navcontainer  >ul >li{
	float: none;
	
}	
	
	header nav ul ul {
    padding: 0 70px;
	
}
	
.wrapper{
	width: 100%;
	}
	
	.box, .inline{
	margin: auto;
	width: 100%;
	}
	
#sec1 article{
		width: 100%;
		float: none;
		
	}
	
#sec2 .middle{
		margin-left: 0;
		margin-right: 0;
	}
	
	#sec2 article{
		width: 100%;
		float: none;
		
	}
	
#sec2 .middle{
		margin-left: 0;
		margin-right: 0;
	}
	
	#sec3 div div{
	width: 100%;
	height: auto;
	margin: 0;
}	
}


@media screen and (max-width: 600px){
header {
    line-height: 60px;
	
}
#sec1, #sec2{
	background: linear-gradient(70deg, #fff, rgba(100, 206, 209, 0.6));
}

header nav ul ul {
    padding: 0 20px;
	
}

#navcontainer{
	position: absolute;
	left: 60px;
	right: 20px;
} 
header nav li li{	
	line-height: 15px;
}
header nav li{	
	line-height: 25px;
}
h1{
	margin-top: 20px;
}
h2{
	padding-top: 20px;
}
}

@media screen and (max-width: 400px){

h1, h2, h3, h4, span{
	font-size: 100%;
	}
		
header span{
	font-size: 100%;
}

}