/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
/*ol, ul {
	list-style: none;
}*/
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.fb {
    float: left;
    left: 48.867%;
    position: relative;
    top: -40.6px;
}
img#Pub {
    float: right;
    margin: 8em 0;
    width: 20%;
}
article p{
	padding: 0.5em 0;
}
article ul{
	padding: 2em 0 ;
}
article h2{
	 bottom: 4px;
    font-size: 1.5em;
    position: relative;
    right: 22px;
}
#secteur ul{
	margin: 1em 0 0 0;
}
a{
	 position: relative;
}
ins{
	left: 0;
    position: absolute;
    top: -25px;
}
body footer nav li a:hover{
	text-decoration: none;
}
footer nav li a {
	text-decoration: underline;
}
footer nav li:first-child{
	margin: 0 0 1em 0 
}
footer aside p{
	 float: right;
    margin: 106px 0;
    width: 64.51612903225806%;
}
footer ul{
	width: 17.24137931034483%;
}
footer li{
	display: inherit;
}
footer aside{
	width: 51.66666666666667%;
	float: left;
}
footer nav{
    margin: 106px 0;
	float: left;
    margin: 6em 0 0;
    width: 48.33333333333333%;
}
footer{
	margin: 7em 0 0 0;
	position: relative;
	color: white;

}
body:after, section:after, header:after, #secteur ul::after, footer:after, footer nav:after{
	display: block;
	content: "";
	clear: both;
}
nav#secteur{
	margin: 0 0 104px 0;
}
#logo{
	 float: left;
    margin: 4em 0;
    width: 32.25806451612903%;
}
.fb img{
	float: right;
	width:30px;
}
section#news article{
	width:62.99212598425197%;
	margin: 0 auto;
}
header{
	position: relative;
}
header nav{
	width: 41.6666%;
	text-align: right;
	position: absolute;
	bottom:48px;
	right: 0px;

}
li h2{
	margin: 25px 0;
}
#news h2 {
    color: #514d4e;
}
#news div{
     background-color: #c6ced3;
    position: relative;
    right: 49.25%;
    width: 198.5%;
}
header h1 {
    left: -999px;
    position: absolute;
}
header img {
    width: 41.666%;
}
html {
    background-color: #2a2a2b;
    color: white;
    width: 100%;
    font-family: Eurostile,Gotham;
}
a,ins {
    color: white;
    text-decoration: none;
}

section#news a {
    color: steelblue;
    margin: 5em 19em 0 0;
    text-decoration: underline;

}
section#news a:hover{

    color: white;
    text-decoration: none;

}
#secteur img {
    height: 13.62em;
    width: 13.62em;
}
#secteur img{
	float: right;
}
#secteur li {
    float: left;
    margin: 0 3.0353% 0 0;
    width: inherit;
}
li {
    display: inline;
    width: 50%;
}
body {
    margin: 0 auto;
    width: 992px;/*50.43%;*/
    color: black;
}

#secteur li:last-child{
	margin: 0;
}
 header li a{
	padding: 1em;
}
header li a:hover{
	background-color: white;
}
header li a:hover{
	color: black;
}
#secteur ul li img{
	    -webkit-transition: filter 0.1s; /* Safari */
	    transition: filter 0.5s ease 0s
        filter: brightness(50%);
        -webkit-filter: brightness(50%);
        -moz-filter: brightness(50%);
        -o-filter: brightness(50%);
        -ms-filter: brightness(50%);
}
#secteur ul li img:hover{
        filter: brightness(120%);
        -webkit-filter: brightness(120%);
        -moz-filter: brightness(120%);
        -o-filter: brightness(120%);
        -ms-filter: brightness(120%);
}
/*a.fb img {
    position: absolute;
    right: 374px;
    top: 653px;
   }*/
.fb img {
    float: right;
    width: 30px;
}
section#slideshow{
	margin: 0 -1em 10em 0;
}




/* CONTACT*/
#show{
  float: left;
    margin: 2em;
    width: 20em;
}
#fb img{
color: black;
float: right;
    margin: 5em 19em 0 0;
    text-decoration: underline;
  }


p#contact, #tel {
      color: black;
    float: left;
    margin: 6em 0 0 -1em;
    width: 12em;
   /* position: absolute;
    left: 33.917%;
    top: 97px;*/
}
article aside:after{
	clear: both;
    content: "";
    display: block;
    position: relative;
}
span{
	font-size: 2em;
}
#tel{
	float: left;
    left: 50.9167%;
    margin: 3em 0 0 1em;
}
#news .logo{
    float: left;
    margin: 3em 0;
    width: 17.258%;
}



/*Electricité*/

h4{
   margin: 5em 0 1em 16px;
}
h4.prem{
	margin: 1em 0 1em 16px;
}
body li{
	margin: 0 0 0 1px;
}
h3{
	margin: 3em 0 1em 0;
}
#news li{
	display: list-item;
    margin: 0.5em 0;
    width: inherit;
}
#news ul{
	margin: 0 0 0 32px;
}
#news article article ul{
  	margin: 1em 0 0 32px;
    padding: 0;
} 
#news .autre{
	margin: 0 0 0 32px;
}
#news article#premier{
	padding: 0 0 3em 0;
}


/* Ventilation*/

#news ul{
	margin-bottom: 2em;
}



/* menuiserie*/


/* polices*/

@font-face {
 font-family: 'Gothamy';
 src: local('Gotham Book'), local('Gotham-Book');
 font-weight: normal;
 font-style: normal;
 font-variant: normal;
}
@font-face {
 font-family: 'Gothamy';
 src: local('Gotham Bold'), local('Gotham-Bold');
 font-weight: bold;
 font-style: normal;
 font-variant: normal;
}
@font-face {
 font-family: 'Gothamy';
 src: local('Gotham Book Italic'), local('Gotham-BookItalic');
 font-weight: normal;
 font-style: italic;
 font-variant: normal;
}
@font-face {
 font-family: 'Gothamy';
 src: local('Gotham Bold Italic'), local('Gotham-BoldItalic');
 font-weight: bold;
 font-style: italic;
 font-variant: normal;
}
body {
 font-family: Gothamy, Gotham-Book, Arial, sans-serif;
}
h1,h2,h3,h4,h5,h6{
	font-family: Eurostile , Arial, sans-serif;
	font-style: bold;
}
@font-face {
font-family: 'Eurostile';
font-style: bold;
font-weight: normal;
src: local('Eurostile'), url('eurostile.woff') format('woff');
}


@font-face {
font-family: 'EuroStyle Normal';
font-style: normal;
font-weight: normal;
src: local('EuroStyle Normal'), url('EuroStyle Normal.woff') format('woff');
}


/* entretien et instalation */

#premier img{
	float: right;
	width: 19%;
  margin: 0 0 0 5em;
}
article#premier:after{
	content: "";
	display: block;
	clear: both;
}


/* VIDEO*/

iframe {
    float: right;
    margin: 0 0 0 1em;
}


header #Prem {
	width: 0%;
}



@media screen and (max-width: 861px)
{
  header nav {
    margin: 2em 2em 0;
    position: relative;
    top: -1em;
    width: inherit;
}
header img {
    width: 47%;
}
  
 }

/********* RESPONSIVE*************************************/
@media screen and (max-width: 967px)
{ 
#show {
  margin: 0;
}
img#Pub {
    width: 20%;
}
  header nav {
    top: -2em;
}
  #news img{
      width: 100%;
    }
   
#news #fb img {
    float: right;
    margin: 3em 1em 0 0;
    width: 10%;
}

#news .logo {
    float: left;
    margin: 1em 2em;
    width: 30.258%;
}
  p#contact, #tel {
    color: black;
    left: 33.917%;
    position: inherit;
    top: 97px;
}
p#contact, #tel {
    color: black;
    left: 33.917%;
    position: inherit;
    top: 97px;
}
  section#news article {
    margin: 0 auto;
    width: 88%;
}
  #news div{
    right: inherit;
    width: 100%;
  }
	nav#secteur {
    margin: 0 auto 0;
    width: 88%;
}
   body{
   	width: inherit;
   }
   
header nav {
    position: relative;
    top: 1em;
    width: 22em;
}
   nav#secteur li{
   	  	overflow: hidden;
   }
}
@media screen and (max-width: 522px)
{
nav#secteur li{
   	display: inherit;
	height: 10em;
   	width: 100%
   }
  nav#secteur img{
  	position: relative;
  	top: -16em;
  	height: inherit;
   	width: 100%;
   }
    nav#secteur li{
  	content: "";
  	display: block;
  	margin: 0;
  	width: 44%;
   }
}

@media screen and (max-width: 967px)
{	
	nav#secteur {
    margin: 0 auto 0;
    width: 464px;
}
}

@media screen and (max-width: 522px)
{	
	nav#secteur img{
    margin: 0 auto 104px;
    width: 100%;
    float: left;
    position: inherit;
    top: -80px;

}
	nav#secteur img a:after{
		content: "";
		display: block;
		clear: right;
		overflow: hidden;
	}
	nav#secteur li {
    margin: 1em 0;
    width: 100%;
}
}
@media screen and (max-width: 335px){ 
  
 
 img#Pub {
    float: left;
    margin:inherit;
    width: 11em;
}
}
@media screen and (max-width: 519px){ 
  
 img#Pub {
    float: left;
    margin: 0 0 0 6em;
    width: 11em;
}
header #Prem {
    float: left;
    height: 64px;
    width: 64px;
}
}
@media screen and (max-width: 519px){	
   img#Pub {
    width: 11em;
    float: right;
}
	header img{
		width: 0%;
	}
	header #Prem {
	width: 13%;
}
	footer aside{
		width: 100%;
		margin: 0;
	}
	#logo{
		width: 0%;
	}
	footer{
		margin: 0;
		position: inherit;
	}
	header nav{
		width: 0;
		position: absolute;
		left: -9999px;
	}
	
footer ul {
    margin: 1em 0 1.5em 3em;
    width: 17.2414%;
}
footer nav {
    background-color: black;
    float: inherit;
    font-size: 2em;
    margin: 0;
    position: absolute;
    top: 1px;
    width: 12em;
}
footer nav li a {
    text-decoration: none;
}
footer nav li {
    margin: 0.7em 0 0 1px;
     background-color: #303030;
     padding: 0 0em 0 0;
}
}
/* HTML CONTACT CHANGER*/


/*calc( * 0.43)*/






  @media screen and (max-width: 519px){
    p#contact, #tel {
      margin: inherit;
    }
    footer img#Pub {
    float: inherit;
    margin: inherit;
    padding: 0 2em;
    width: 79%;
}
    ins {
    color: threedhighlight;
    font-size: 3em;
    left: 22px;
    position: sticky;
    top: 1px;
    z-index: 1;
}
    footer nav li:first-child{
      margin: inherit;
    }

  footer nav{
    left: -384px;
    }
    .header {
    left: 58px;
    position: absolute;
    top: 30px;
}
  /* L'icône hamburger, en utilisant le box-shadow */
  .header__icon {
    position: relative;
    display: block;
    float: left;
    width: 50px;
    margin-top: -30px;
    height: 66px;
    cursor: pointer; }
    .header__icon:after {
      content: '';
      position: absolute;
      display: block;
      width: 1rem;
      height: 0;
      top: 16px;
      left: 15px;
      box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white; }

    #menu {
    position: absolute;
    top: 0px;
    /*overflow-y: scroll;*/
    /*-webkit-overflow-scrolling: touch;*/
    transform: translateX(-450px); 
  }
    /* Un lien par ligne */
    #menu a {
      display: block;
      margin: 0 0 0 1em;
     /* border-bottom: 1px solid #303f9f; */
    }
    footer.menu #menu {
      position: absolute;
      left: 450px;
      padding: 1em 0;
      top: 64px;
      z-index: 11;
      width: 100%;
    }
    footer ul{ 
      margin: inherit;
      width: inherit;
    }
    footer li{
      width: inherit;
    }
    footer nav li{
      margin: 0.25em 0 0 1px;
    }
    footer nav {
    background-color: rgba(255, 255, 255, 0.93);
}
    footer nav li {
    background-color: rgba(0, 0, 0, 0.8);
}
header{
  height: 64px;
}
header #Prem {
    width: 64px;
    height: 64px;
}
.fb {
    left: 118px;
    right: inherit;
    position: absolute;
    top: 16px;
}
}





@media screen and (max-width: 1254px){
article h2{
  right: 0;
}
#news div {
    
    position: relative;
    right: 49.25%;
    width: 198.5%;
}
section#news article {

    width: 46.992%;
}
#news article#premier {
    width: 45%;
}


}























/****** RESPONSIVE + GSM*******/