/*
	Z-RTV / Mamble Easy_web HTML5/CSS3 Layout
	Oktober 2013
	Basic HTML5/CSS3 layout / responsive framework
	Heleen Schaapman
	www.zrtv.nl
	
	color: #48443F; donker bruin
	color: #5E5952; licht bruin
	color: #95A153; groen
	color: #E8EBF4; ijswit
	
*/





/************************************************************************************
smaller than  1024px
*************************************************************************************/
@media \0screen {
  img { 
  	width: auto; /* for ie 8 */
  }
}

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

.body {
	width: 100%;
	max-width: 978px; 
	min-width: 650px;
       
}
    
#wrapper { margin: 0 3em 0 0;}

p.center {
	font-size: 60%;
	padding: 10% ;
}

p.home {
	padding: 40px 20px 0 0;
}


img {
	max-width: 100%;
	height: auto;
}


.mainHeader { padding-right: 1.5em;margin-right: 0;
	font-size: 78%; ;
	/*margin-right: 10px;*/
}
	

nav li {
	padding: 0 3px;
}
nav li a {
	padding: 0 3px;
}


    .menu {padding-right: 1em;margin-right: 0em;
    }
/********/

.content_full {
	width: 94%;
	padding-bottom: 4%;
	padding-left: 4%;
	padding-right: 2%;
}

/****/

.content_res {
	width: 66%;
	padding: 4%;
	float: left;

}



/********/

.content {
	width: 44%;
	overflow: hidden;
	padding: 3%;
}


.hometop {
	height: 100%;
	margin-bottom: 30px;

}

.homebottom {
	height: 100%;
}



/********/

.sidebar {
	width: 50%;
	height: 100%;
    overflow:hidden;
    position:relative;
}

.left-sidebar {
	width: 48%;
	float: left;
}

.right-sidebar {
	width: 52%;
	float: right;
}


/****/

.mainFooter {
	height: 100px;
}

.mainFooter img {
	padding: 14px 0 0 20px;
}

.mainFooter p {
float: right;
padding-top: 2%;
}

}




    
   
    



/************************************************************************************
smaller than 768px
*************************************************************************************/
@media screen and (max-width: 768px) { 
	/* disable webkit text size adjust (for iPhone) */
	html {
		-webkit-text-size-adjust: none;
	}
 #wrapper { margin: 0 3em 0 1em ;}
    
    
.body {
	width: 100%;
	max-width: 650px; min-width: 480px;
	font-size: 95%;

}

p.home {
	padding: 20px 10px 0 10px;
}



.mainHeader {
	font-size: 58%;
	text-align: center;
	clear: both;
	
}
	
.mainHeader h2 {
	font-size: 1.8em;
}
	
/********/

.content {
	width: 90%;
	overflow: hidden;
	text-align: center;
	padding: 5%;
	margin: 0;
}

/********/

.sidebar {
	display: none;
}

/***/


.content_res {
	width: 99%;
	text-align: center;
}

/********/

.sidebar-contact {
	width: 100%;
	float: right;
	text-align: center;
}

.sidebar_res {
	width: 100%;
	background-color: #616f77;	
}
.sidebar_res p{
	font-size: 150%;
	width: 60%;
	float: center;
}

.sidebar_res img {
	width: 99%;
	float: center;
}

.reserveer {width: 90%;
	float: left;}


/****/



/****/

	nav {
		border-bottom: 0;
	}
	nav ul {
		display: none;
		height: auto;
		padding-top:10px;
	}
	nav a#pull {
		display: block;
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		background: url('../img/nav-icon.png') no-repeat;
		width: 15px;
		height: 15px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 0px;
	}
	nav li {
		display: block;
		width: 99%;
		float: left;
		height: 30px;
	}
	nav li a {
		border-bottom: 1px solid #E8EBF4;
		border-right: none;
		line-height: 29px;
		font-size: 1.4em;
	}




/***/

	
.mainFooter {
text-align: center;
font-size: 85%;
}


}

/************************************************************************************
smaller than 480px
*************************************************************************************/
@media screen and (max-width: 320px) { 

	
.body {
	max-width: 320px; min-width: 0px;
}

	
.mainHeader { padding-right: 2em; margin-right: 0; padding-left: 3em;;

    font-size: 40%; ;
}
	
.mainHeader h2 {
	font-size: 3em;
}

.mainHeader h1 {
	padding-top: 1em;
}    
    .mainContent {padding: 2em 1em 3em 1em ;}
/********/

/*.content {
	width: 100%;
}*/

.sidebar_res p{
	font-size: 99%;
	width: 90%;

}

.content_full h3 { font-size: 80%;}
input[type="text"],input[type=password],textarea{width:150px;}
.reserveer {float: left;}

}