/*
Theme Name: WD Theme
Theme URI: https://www.websitedelivery.nl
Description: Website delivery | WordPress webdesign & Grafische vormgeving
Version: 1.0
Author: Alexander van der Kamp
Author URI: https://www.websitedelivery.nl
*/


@media only screen and (max-width: 1200px) { 
	button#responsive-menu-button{
		padding: 0;
		top: 58px;
		color: #444;
		right: 4%;
		height: auto;
		width: auto;
	}
	.responsive-menu-inner, 
	.responsive-menu-inner::before, 
	.responsive-menu-inner::after{
		border-radius: 2px;
	}
	#responsive-menu{
		z-index: 10000;
		box-shadow: none;
	}
	#responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-1 a.responsive-menu-item-link{
		padding: 4px 0 4px 10%;
		width: 90%;
		font-size: 14px;
		line-height: 20px;
	}
}



@media only screen and (max-width: 1060px) { 
	header .inner, nav ul, main, footer .inner{
		width: 92%;
		margin-left: 4%;
		margin-right: 4%;
	}
}



@media only screen and (max-width: 800px) { 
	main section{
		width: 100%;
	}
	main aside{
		display: none;
	}
	header ul.social-icons{
		display: none;
	}
	.google-maps{
		height: 300px;
	}	
	header .inner{
		padding: 30px 0;
	}
}



@media only screen and (max-width: 600px) {
	input[type="text"], 
	input[type="email"], 
	input[type="tel"], 
	select, 
	textarea{
		width: 90%;
		padding: 12px 5%;
	}
	input[type="submit"]{
		padding: 12px 5%;
	}
	header .logo img{
		height: 60px;
		width: auto;
	}
	header .site-title{
		margin: 8px 0 0 22px;
	}
	button#responsive-menu-button{
		top: 48px;
	}
	header .inner,
	header .site-title span{
		line-height: 22px;
	}
	header .site-title span{
		font-size: 24px;
	}
	header .site-title span.subtitle{
		font-size: 16px;
	}
}



@media only screen and (max-width: 500px) { 
	header .inner, nav ul, main, footer .inner{
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
	}
	#responsive-menu li a{
		width: 90%;
		padding-left: 10%;
	}
	#responsive-menu li li a{
		width: 85%;
		padding-left: 15%;
	}
	.google-maps{
		height: 200px;
	}
	main{
		margin: 40px auto;
	}
	h1{ 
		font-size: 28px; 
	}
	h2{ 
		font-size: 24px; 
	}
	h3{ 
		font-size: 20px;
	}
	footer .inner{
		padding: 20px 0;
		font-size: 13px;
		line-height: 22px;
	}
	.responsive-menu-inner, 
	.responsive-menu-inner::before, 
	.responsive-menu-inner::after{
		width: 28px;
		height: 5px;
	}
	.responsive-menu-inner{
		margin-top: -8px;
	}
	.responsive-menu-inner::before{
		top: -8px;
	}
	.responsive-menu-inner::after{
		bottom: -8px;
	}
	header .logo img{
		height: 40px;
	}
	header .site-title{
		margin: 3px 0 0 15px;
	}
	header .inner,
	header .site-title span{
		line-height: 17px;
	}
	header .site-title span{
		font-size: 17px;
	}
	header .site-title span.subtitle{
		font-size: 11px;
	}
	button#responsive-menu-button{
		top: 40px;
	}	
}



@media only screen and (max-width: 400px) {
	body{
		font-size: 15px;
		line-height: 24px;
	}
	#responsive-menu{
		width: 70%;
	}
	ul.children .comment,
	ul.children .children .comment{
		margin: 15px 0;
		padding: 0 0 0 10px;
	}
}



@media only screen and (max-width: 350px) {
	header .site-title{
		display: none;
	}
}