/* CSS Media Queries */

@media (min-width:768px) and (max-width: 959px) {
	
	/* Menu */
	nav ul {
		width:768px;
	}

	nav ul li a {
		padding:25px 10.5px;
		padding:2.5rem 1.05rem;
		font-size:13px;
		font-size:1.3rem;
	}
	
	#wrapper {
	min-width:100%;
	max-width:100%;
	}
	
		/* Header */
		.header {
			background-size:100%;
			width:auto;
			max-width:100%;
			height:128px;
		}
		
		.free-estimation img {
			width:80%;
		} 
		
		.logos {
		max-width:47%;
		margin-top:20px; }
		
		/* Intro */
		
		.introtxt {
		line-height:1.6;
		font-size:13px;
		font-size:1.3rem;
		color:#4a6470;
		}
		
		/* Service de toiture Page */
		
				#content .right .service2 {
					width:90%;
					padding:30px;
					float:none;
					margin:0 10px 10px 0;
				}
				
				#content .right .service2 img {
					float:left;
					margin:0 15px 0 0;
				}
				
				#content .right .service2 p {
					font-size:15px;
					font-size:1.5rem;
					line-height:1.4;
					color:#0A242A;
					clear:right;
				}
				
				#content .right .service2 h2 {
					font-size:18px;
					font-size:1.8rem;
					padding:0;
					margin:0;
				}
				
				#content .right .service2 a {
					float:right;
					font-size:18px;
					font-size:1.8rem;
					clear:left;
				}
				
				.right .service3 {
					float:none;
					width:90%;
					padding:30px;
					height:auto;
				}
				
				.right .service3 p {
					line-height:1.6;
					font-size:14px;
					font-size:1.4rem;
					color:#586f76;
					text-align:justify;
				}		
				
				img.estimation { display:none; }
				
				.left a.estimation-button { 
		padding:15px 20px;
		font-size:16px;
		font-size:1.6rem;
		}
	
}


@media (max-width: 768px) {
	
	html { overflow-y: scroll;
		overflow-x: hidden; }
		
		#wrapper { border:none; }
	
	/* Menu */
	
	nav { display:none; }

	/* nav select {
		display:inline-block;
		margin:16px;
		padding:11px 5px;
		float:left;
	}*/
	
	body { margin-top:0; }

	
	.slicknav_menu {
	display:block;
	}
	
		/* #menu is the original menu */
		.js #menu {
			display:none;
		}
		
		.js .slicknav_menu {
			display:block;
		}

	
	
	#wrapper {
	min-width:100%;
	max-width:100%;
	}
	
		/* Header */
		.header {
			background-size:190%;
			width:auto;
			max-width:100%;
			height:auto;
			padding-top:30%;
		}
		
		.free-estimation img {
			width:80%;
		} 
		
		.logos {
		display:none; }
		
		
		
		.lang {
		float:right;
		position:absolute;
		top:13px;
		right:0px;
		z-index:999;
		}
		
		.lang img {
			width:80%;
		}
		
		.estimation-button-mobile {
			display:block;
		background:#042846;
		font-size:18px;
		font-size:1.8rem;
		font-weight:bold;
		text-align:center;
		padding:15px 0;
		width:100%;
		color:#ffffff;
		text-decoration:none;
		clear:both;
		}
		
		/* Intro */
		
		.intro {
		height:auto;
		margin:0;
		padding:0;
		clear:both;
		}
	
		.introtxt {
		line-height:1.6;
		font-size:18px;
		font-size:1.8rem;
		text-align:left;;
		color:#4a6470;
		max-width:100%;
		min-width:100%;
		height:auto;
		float:none;
		clear:both;
		}
		
		.introtxt h2 {
			padding:26px;
			text-align:left;
			}
		
		/* Slide_show */
		.fadein { display:none; }
		.fadein-mobile { display:block; margin: 0 0 -10px 0; }
		.fadein-mobile img { width:100%;  clear:both; margin:0;   }
		
		
		
		/* Bar intro */
		.bar {
			height:auto;
			width:100%;
			clear:both;
		}
		
		.bar .left {
			background:url(images/leftbarbg.jpg) repeat-x top left;
			width:100%;
			padding:21px 0;
			float:none;
			text-align:center;
			clear:both;
			margin:0;
		}
		.bar .right {
			background:#1E3846;
			float:none;
			padding:50px 0px;
			font-size:135%;
			width:100%;
			clear:both;
			margin:0;
			font-weight:bold;
			}
		
		/* Content */
		#content {
			margin:10px 0;
			padding-bottom:20px;
			margin-bottom:-15px;
			width:100%;
		}
		
		#content img {
			width:97%;
			height:auto;
		}
		
		
		#content h1 { font-size:19px; font-size:1.9rem; color:#0F324F; font-weight:bold;  }
		#content h2 { font-size:19px; font-size:1.9rem; color:#0F324F; line-height:1.5; font-weight:bold; }
		
		#content .left { display:none; }
		#content .right { width:100%; float:right; }
		.mobile { display:block; }
		
		.right .entry { padding:5px 30px 20px 30px; }
		.right p {font-size:16px; font-size:1.6rem; color:#454545; line-height:1.5; padding:5px 0; }
		#content .right h1 { margin-top:15px; color:#0F324F; clear:none; font-size:19px; font-size:1.9rem; line-height:1.5; font-weight:bold; }
		/* #content .right ul { list-style:inside disc; font-size:12px; font-size:1.2rem; font-weight:bold; color:#333; line-height:2.166; margin:10px 20px;} */
		
		#content .frontlist li {
			font-size:16px;
			font-size:1.6rem;
			line-height:1.6;
		}
		
		#gallery-wrapper {
				background:#e3e3e3;
				border-radius:5px;
				border:1px solid #c2c2c2;
				width:100%;
				margin:0px auto;
				margin-left:0px;
			}
			
		#gallery-wrapper img {
			width:100%;
		}
		
		/* Subnav */
		
		.subnav {
			padding:0 30px;
		}
		.subnav ul {
			padding:0;
			width:100%;
		}
		.subnav ul li a {
			text-transform:none;
			font-size:14px;
			font-size:1.4rem;
		}
		
		.subnav img {
			margin:0 auto;
		}
		
		.subnav .headline3 a {
			 font-size:12px; 
			 font-size:1.2rem;
			 text-transform:uppercase; 
			 padding:7px 0 7px 0;  
			 margin:13px 0 5px 0; 
			 font-family:Arial, Helvetica, sans-serif; 
			 border-bottom:1px dashed #333;
			 font-weight:bold;
			 color:#2c425c;
		}
		
		.subnav .headline3 a:hover {
			 background:#fff;
		}
		
		
		/* Services Page */
		
				#content .right .service2 {
					width:89.9%;
					padding:5%;
					float:none;
					margin:0 10px 10px 0;
				}
				
				#content .right .service2 img {
					float:left;
					margin:0 15px 0 0;
				}
				
				#content .right .service2 p {
					font-size:15px;
					font-size:1.5rem;
					line-height:1.4;
					color:#0A242A;
					clear:right;
				}
				
				#content .right .service2 h2 {
					font-size:18px;
					font-size:1.8rem;
					padding:0;
					margin:0;
				}
				
				#content .right .service2 a {
					float:right;
					font-size:18px;
					font-size:1.8rem;
					clear:left;
				}
				
				.right .service3 {
					float:none;
					width:89.9%;
					padding:5%;
					height:auto;
				}
				
				.right .service3 p {
					line-height:1.6;
					font-size:14px;
					font-size:1.4rem;
					color:#586f76;
					text-align:justify;
				}	
				
		/* Types de toiture */
		
		
		#content .right .type1 img.plus {
					display:none;
				}
				
				#content .type1 h2 {
					padding:15px;
					text-align:center;
				}
		
		
		
				.type1 {
					border:1px solid #323232;
					max-width:100%;
					margin:0 0 10px 0;
					clear:both;
				}
				
				.type1 img {
					float:left;
					padding:0;
					max-width:100%;
					margin:0 15px 15px 0;
				}
				
				#content .right .type1 p {
					margin:0 15px; 
					}
					
				
				
				#content .right .type1 a {
					
				}
				
				#content .right .type1 a:hover {
					text-decoration:none;
				}
				
		
		#footer {
		width:100%;
		background:#D4DFE5;
		font-size:14px;
		font-size:1.4rem;
		color:#63757a;
		margin-bottom:-20px;
		padding:40px 0;
		margin-top:20px;
		}
		
		#footer p {
			margin-bottom:10px;
			padding:0 40px;
			}	
			
		.logosfooter { text-align:Center; padding:0 0 0 30px; }
			
		img.logosfooter { display: block; max-width:100%; }
}

@media (max-width:670px) {
	img.logosfooter { display: block; max-width:85%; }
}

@media (max-width:425px) {
	img.logosfooter { display:none; }
}


@media (min-width: 425px) and (max-width: 768px) {
	#content img {
			width:auto;
		}
		.introtxt {
		line-height:1.6;
		font-size:16px;
		font-size:1.6rem;
		text-align:left;;
		color:#4a6470;
		max-width:100%;
		min-width:100%;
		height:auto;
		float:none;
		clear:both;
		}
	/* html { font-size:75%; }*/
}

/* img on contact page */
@media (max-width:415px) {
	img.contactimg { display:none; }
}
/* Contact form image estimation */
@media (max-width: 620px) {
	img.estimation { display: none; }
}
/* Service de toiture page */
@media (max-width:600px) {
	#sub-content img {
		width:100%;
		height:auto; 
		margin:10px 0;
		float:none;
		clear:both;
	}
	#content .right .service2 {
	width:84%;
	padding:8%;
	}
	#content .right .service2 img {
	float: none;
	margin: 20px 0 0;
	}
	
	#content .right .service3 {
	width:84%;
	padding:8%;
	}
}