body{
		font-size: 16px;
		font-family: 'Roboto Condensed', sans-serif;
		line-height: 1.5;
		padding-left:250px;
		background-image:url(../img/dark_brick_wall_2X.png);
		color:#333;
	}

html,body{
		height:100%;
		}

h1,h2,h3,h4,h5,h6,p,ul,ol{
	margin-bottom:20px;
	}

h1{font-size:400%;}
h2{font-size:300%;}
h3{font-size:250%;}

/****** WRAPPER *******/

.wrapper{
	max-width:1000px;
	margin: 0 auto;
	padding:60px 20px 20px 20px;
}

a{
	text-decoration: none;
	color:white;
}

.wrapper article ul{
	padding-top: 10px;
}

.wrapper article ul li{
	background-image:url("../img/puce.gif");
	background-repeat: no-repeat;
	background-size: 8px;
	background-position: left 7px;
	padding-left: 20px;
	display:block;
	font-size:100%;
}

.wrapper article ul li:not(:last-child){
	padding-bottom:20px;
}

.burgerBtn{
	background-color:transparent;
	font-size:250%;
	color:#73ec42;
	padding:20px;
	display:block;

	position:fixed;
	top:0;
	right:-100%;
	display:block;
	transition: linear 500ms;
}

.btnTop span{
	display:none;
}

.btnTop{
	display:none;
	position:fixed;
	bottom:10px;
	right:10px;
	width:42px;
	line-height: 42px;
	color:#73ec42;
	font-size:300%;
	z-index:999;
}

.btnTop.on{
	display:block;
}

.btnTop.on:hover{
	color:#73ec42;
	text-decoration:none;
}

/***** colonnes *****/

.col{
	float:left;
}

.left{
	float:left;
}

.right{
	float:right;
}


.col-md-8{
	width:66.6666%;
}

.col-md-4{
	width:33.3333%;
}

.col-md-6{
	width:50%;
}

.col-md-5{
	width:47%;
}

.col-md-7{
	width:53%;
}

/***** Navigation  *******/

nav{
	position:fixed;
	top:0;
	left:0;
	height:100%;
	width:250px;
	background-color:#2c2c2c;
	color:white;
	text-align:center;
}

nav::after{
	content:"";
	display:block;
	width:16px;
	height:100%;
	position:absolute;
	top:62px;
	left: -26px;
	border-left: 1px solid rgba(255,255,255,0.2);
	border-right:1px solid rgba(255,255,255,0.2);
	z-index:-1;
}

nav.on::after{
	top:82px;
	right:48px;
	left:auto;
}

nav .animCordiste{
	position:absolute;
	top:352px;
	left:-100%;
	display:block;
	width:75px;
}

nav.on .animCordiste{
	right:1px;
	left:auto;
}

nav .logo
{
	display:inline-block;
	width:250px;
	padding:40px;
	text-decoration: none;
}

nav .logo img{
	display:block;
	width:100%;
}

nav ul li{
	text-align: left;
	position:relative;
}

nav ul li a{
	display:block;
	text-decoration: none;
	text-transform: uppercase;
	color:white;
	padding:20px;
	font-size:100%;
	transition:500ms;
}

nav ul li a::after{
	content:"";
	display:block;
	position:absolute;
	top:0;
	right:0;
	height:100%;
	width:7px;
	border-radius:2px;
	transition:500ms;
	transform:scaleY(0);
	background-color:#73ec42;
}

nav ul li a:hover::after{
	transform:scaleY(1);
}

nav ul li a:hover{
	padding-left:40px;
	color:white;
	text-decoration:none;
}

/****** Header ****/

header{
	position:relative;
	text-align: center;
	height:722px;
	background-image: url("../img/bg-header-acrowatt.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center top;
}

header .logo
{
	display:inline-block;
	width:100%;
	max-width:600px;
	padding:0 40px;
	margin-bottom:20px;
	text-decoration: none;
}

header .logo img{
	display:block;
	width:100%;
}

header h1{
	font-size : 160%;
	color:white;
	text-shadow:black 2px 2px 4px;
	margin:0;
}

header .bandeau{
	position:absolute;
	width:600px;
	top:50%;
	left:50%;
	margin-left:-300px;
	margin-top:-143px;
}

/***** section *****/

section{
	background-color:#333;
	margin-bottom:60px;
	color:white;
	border-radius:5px;
	overflow:hidden;
	padding: 30px;
}

section.row{
	padding:0;
	margin-right:0;
	margin-left:0;
}

section.row:last-child{
	margin-bottom: 0;
}

section .col-md-8
{
	padding : 20px;
}

section .col-md-6,
section .col-sm-12
{
	padding: 0;
	margin:0;
}

section .col-md-4{
	margin : 0;
	padding : 0;
}

section img.imgVt{
	display:block;
	width:100%;
}

section img.imgHz{
	display:none;
	/*width:100%;*/
}

section img.imgVt:hover{
	opacity:0.5;
	width:100%;
}

section p{
	text-align: justify;
}

section h2{
	font-size:200%;
	padding-left:10px;
	border-left: 5px solid #73ec42;
}

section h3{
	font-size:150%;
	padding-left:10px;
	border-left: 5px solid rgba(115,236,66,0.5);
}

section ul{
	margin-bottom: 0;
}

/******* section acceuil ******/

#accueil .col-md-6
{
	padding:20px;
}

#accueil .col-md-6 p
{
	margin-bottom:0px;
	text-align: left;
}

#travaux-acces-difficile .col:last-child,
#travaux-electricite .col.left
{
	margin : 0;
	padding: 20px 30px;
}

/******* formulaire *******/

.form_contact label,.form_contact input, .form_contact textarea, .form_contact select{
	display:block;
	width:90%;
	border:none;
	outline:none;
	border-radius:5px;
	padding:5px;
	font-size: 14px;
	font-family: 'Roboto Condensed', sans-serif;
}

.form_contact textarea{
	height:130px;
	margin-bottom:20px;
}

.form_contact input.btn_form{
	/*background-color:#73ec42;*/
	font-weight:bold;
	text-transform: uppercase;
	border:none;
	outline:none;
	height:35px;
	color:#333;
}

.form_contact p{
	margin-bottom:5px;
}

.message_erreur{
	color: #73ec42;
	font-style: italic;
}

/*******Coordonnées **********/

.coordonnees{
	position:relative;
	padding:20px;
}

.fa .fa-phone{
	font-size:230%;
}

.coordonnees a.btnFb{
	display: block;
	width:30px;
	line-height:30px;
	color:white;
	font-size:230%;
	transition:500ms;
	position:absolute;
	top:-6px;
	right:0;
}

.coordonnees a.btnFb:hover{
	color:white;
	opacity:0.5;
}

/***** footer *****/

footer{
	color:white;
	text-align:center;
	padding:10px 0;
}

footer a{
	text-decoration: none;
	color:white;
}

footer p{
	margin-bottom:0;
}

/* Mobile en mode portrait*/
@media screen and (max-width:1024px){
	#travaux-acces-difficile .col:last-child,
	#travaux-electricite .col.left
	{
		margin : 0;
		padding: 30px;
	}

	#me-contacter .col-md-6,
	section .col-md-4,
	section .col-md-8,
	section .col-md-5,
	section .col-md-7
	{
		width:100%;
	}

	#me-contacter .col-md-6{
		margin-bottom:40px;
	}

	body{
		padding-left: 0;
	}

	nav{
		position:fixed;
		width:100%;
		height:100%;
		transform:scaleX(-1);
		transform-origin: left center;
		transition: linear 500ms;
		z-index:99;
		overflow:scroll;
	}

	nav .logo
	{
		width:50%;
		padding:40px;
	}

	nav.open{
		transform:scaleX(1);
	}

	nav::after{
		display:none;
	}

	nav .animCordiste
	{
		display:none;
		left :-110px;
	}

	.form_contact label,.form_contact input, .form_contact textarea, .form_contact select{
		width:100%;
	}

	.burgerBtn{
		right:0;
		z-index:999; /* comme on a la nav et le burger button en position:fixed, il faut être sur que le burgerBtn sera toujours devant*/
	}

	nav ul li{
		text-align: center;

	}

	nav ul li a{
		padding:30px;
		font-size:130%;
	}

	section img.imgHz{
		display:block;
		width:100%;
	}

	section img.imgVt{
		display:none;
	}

	section img.imgHz:hover{
		opacity:0.5;
		width:100%;
	}
}

@media screen and (max-width:768px){
	#accueil .col-md-6{
		width:100%;
	}

	nav .logo{
		width:60%;
	}
}

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

	nav .logo{
		width:70%;
	}

	header .bandeau{
		margin-left: -250px;
		width:500px;
		margin-top:-140px;
	}
}

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

	nav .logo{
		width:80%;
	}

	header .bandeau{
		margin-left: -200px;
		width:400px;
		margin-top:-120px;
	}

	header .bandeau h1{
		padding:0 20px;
		font-size:130%;
	}

	header .bandeau a{
		padding:0 20px;
	}

	body{
		font-size: 14px;
	}

	#accueil{
		padding:0;
	}
}

@media screen and (max-width:400px){
	header .bandeau{
		margin-left: -150px;
		width:300px;
		margin-top:-104px;
	}

	header .bandeau a{
		padding:0 10px;
	}
}

@media screen and (max-width:360px){
	nav .logo{
		width:80%;
	}
}

@media screen and (max-width:320px){
	header .bandeau{
		margin-left: -140px;
		width:280px;
		margin-top:-104px;
	}

	header .bandeau h1{
		font-size:120%;
	}
}