@charset "utf-8";
/* CSS Document */
#hideAll
 {
   position: fixed;
   left: 0px; 
   top: 0px; 
   width:100%;
   height:100%;
   background-color: white;
   z-index: 999; /* Higher than anything else in the document */
 }
/*---------------------------------------------------------------*/
/*----------------    BASE    --------------------------------*/
/*---------------------------------------------------------------*/
.left{text-align:left}
.right{text-align:right}
.center{text-align:center}
.justify{ text-align:justify}


/*---------------------------------------------------------------*/
/*----------------    GENERAL    --------------------------------*/
/*---------------------------------------------------------------*/
html {}

body{
	margin:0;
	font-size:16px; font-size: 1em;
	font-family: 'Lato', sans-serif;
	color:#6f6f6f;
	}
	
header{}
	
h1{margin:0;font-size:28px; font-family: 'Oswald', sans-serif; font-size:3em; font-weight:normal;}
h2{margin:0;font-size:22px; font-size:2.4em; color:#191919; font-family: 'Oswald', sans-serif; font-weight:normal}
h3{margin:0;font-size:20px; font-size:1.8em;}


.big{font-size:22px; font-size:1.4em; font-weight:bold}
.bigH1{font-family: 'Oswald', sans-serif; font-size:3em; font-weight:normal;}
.bigger{font-family: 'Oswald', sans-serif; font-size:2.5em; font-weight:normal;}
.bigss{font-size:28px; font-size:3em; font-weight:bold}
.small{font-size:14px; font-size:0.8em}
.smaller{font-size:12px; font-size:0.75em}
.oswald{font-family: 'Oswald', sans-serif; font-weight:normal}
.bigletterspacing{letter-spacing:5px}
.biglinespacing{line-height:60px}
.td25{width:25%}
.td33{width:33%}
.td40{width:40%}
.td50{width:50%}

nav{position:relative; z-index:120; font-weight:bold; padding-right:20vw; text-align:right}
table{width:100%}
table td {vertical-align:top}

.td_top{vertical-align:top}
.td_middle{vertical-align:middle}

a{text-decoration:none; color:#fff}
img{border:0;width:100%; height:auto}
.lignegrise{color: #e6e6e6; background-color: #e6e6e6; height: 1px; border:0}
.blanc{color:#FFF}
.bleu{color:#0055a5}
.grisfonce{color:#3c3c44;}
.orange{color:#f17830}
.bgvert{background-color:#97bc23}
.bgblanc{background-color:#FFF}
.bggris{background-color:#3c3c44}
.bgnoir{background-color:#000}
.bgbleu{background-color:#0055a5}
.bggris2{background-color:#f0f0f0}
.bigpadleft{padding-left:80px}
.noir{color:#333333}
.gris{color:#3c3c44}
.copyright{color:#999999}
.textLH{line-height:30px;}

.floatR{float:right}
.whiteLine {
    border: 0;
  	width: 90%;
	color: #FFF;
	background-color: #FFF;
	height: 1px;
}

.grayLine {
    border: 0;
	color: #585858;
	background-color: #585858;
	height: 1px;
	margin:0px;
}


.smallLine {
    border: 0;
  	width: 60px;
	color: #f17830;
	background-color: #f17830;
	height: 4px;
}
.verticalgreenLine {
    border-right: thick solid #97bc23;
}

.pad_little{padding:10px 10px 10px 10px}
.contenu{width:60%; margin:auto}
.section_pad{padding-top:90px; padding-bottom:90px}
.small_section_pad{padding-top:45px; padding-bottom:45px}
.rsmall_section_pad{padding-top:20px; padding-bottom:20px}
.squarepad{padding:30px 30px 30px 30px}
.courrier{font-family: Courier, monospace;}


nav ul {
	  text-align: left;
	  display: inline;
	  margin: 0;
	  list-style: none;
	  min-height:0px;
	}
	
nav ul li {
	  display: inline-block;
	  position: relative;
	  text-align:center;
	  margin-left:35px;
	  padding-top:10px;
	  padding-bottom:22px;
	  font-weight:normal;
	  font-family: 'Roboto', sans-serif;
	}

nav ul li:hover {color:#f17830;}


nav a{text-decoration:none; color:#3c3c44}

.menuWidth1{width:20%}
.menuWidth2{width:80%}
#uMenu li:hover {
	padding-bottom:38px;
	color:#f17830;
	border-bottom:5px solid #FFF;
	}

#uMenu li:hover:before {
  content : "";
  position:absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom  : 0;
  height  : 5px;
  width   : 60px;
  bottom:-5px;
  border-bottom:5px solid #f17830;
}

.ligne{	padding-bottom:38px;
	color:#f17830;
	border-bottom:5px solid #FFF;}
	
.ligne:before{	content : "";
  position:absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom  : 0;
  height  : 5px;
  width   : 60px;
  bottom:-5px;
  border-bottom:5px solid #f17830;}

#menumobile{display:none; padding-bottom:50px;}
#menumobile ul{
	display:list-item;
	margin:0;
	padding:0;
	list-style-type: none;
}
#menumobile li{
	list-style: none;
	padding: 10px 0px 10px 10px;
	border-bottom: 1px solid #999;
	color:#333;
}
#menumobile a:hover{font-weight:bold;}


a.button-orange  {
	background-color:#f17830;
    color: #FFF !important;
    padding: 10px 20px 10px 20px !important;
    text-align:center !important;
	text-decoration: none !important;
    text-transform: uppercase !important;
    display:inline-block;
}

a.button-noir  {
	background-color:#3c3c44;
    color: #FFF !important;
    padding: 10px 20px 10px 20px !important;
    text-align:center !important;
	text-decoration: none !important;
    text-transform: uppercase !important;
    display:inline-block;
}
a.button-noir:hover{background-color:#f17830;}

.overlay {
   background:transparent; 
   position:relative; 
   width:100%;
   height:500px; /* your iframe height */
   top:500px;  /* your iframe height */
   margin-top:-500px;  /* your iframe height */
}
/*---------------------------------------------------------------*/
/*----------------    SPECIFIC    --------------------------------*/
/*---------------------------------------------------------------*/
#bandemenu {
	height: 0;
	border-top: 45px solid #3c3c44;
	border-left: 45px solid transparent;

}

.top_accueil{ 
background-image:url(../img/travaux-peinture-qualite.jpg);
background-repeat:no-repeat;
background-size:100% auto;
}

.top_pr{ 
background-image:url(../img/peinture-residentielle.jpg);
background-repeat:no-repeat;
background-size:100% auto;
}

.top_pc{ 
background-image:url(../img/peinture-commerciale.jpg);
background-repeat:no-repeat;
background-size:100% auto;
}

.top_contact{ 
background-image:url(../img/solution-peintre.jpg);
background-repeat:no-repeat;
background-size:100% auto;
}

.ban_titre{ 
 padding-left:20vw}
 
#ban_accueil_bas{
	background-image:url(../img/peinture-haut-de-gamme.jpg);
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	min-height:500px;
}

#top_info{	
position:relative;
top:-40px;
text-align:right;
padding-right:20vw;
padding-top:5px}

.smallpad_top_bottom_right{padding-top:20px; padding-bottom:20px; padding-right:20px}

#accServDesign{
	background-image:url(../img/gris_op.png);
	padding:40px 30px 30px 40px;
	max-width:780px;
	margin:auto;
}

#liServices li{padding-bottom:20px}


input[type="text"] {
    width: 90%;
	height:45px;
	margin-bottom:20px;
	background-color:#FFF;
	border: 0px solid #eeeeee;
	padding-left:10px;
	color:#000;
	font-size:1em;
}
	
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #787878;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #787878;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #787878;
}
:-moz-placeholder { /* Firefox 18- */
  color: #787878;
}

textarea {
    width: 99%;
	height:250px;
	background-color:#FFF;
	border: 0px solid #eeeeee;
	padding-left:10px;
	padding-top:10px;
	font-size:14px;
	font-size:1em;
	color:#000;
	font-family: 'Poppins', sans-serif;
}

#tForm{width:40%;}

#tab_texte{
	-moz-animation-name: dropHeader;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 1s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 1s;

    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
	}


@media only screen
and (max-width : 1565px)
and (min-width : 1280px) {
.menuWidth1{width:10%}
.menuWidth2{width:90%}
.contenu{width:80%; margin:auto}
}

@media only screen
and (max-width : 1280px)
and (min-width : 1150px) {
	
.menuWidth1{width:1%}
.menuWidth2{width:99%}
.contenu{width:98%; margin:auto}
	
}

@media only screen
and (max-width : 1150px)
and (min-width : 480px)
{
	#menu{display:none}
	#menumobile{display:block}

	.contenu{width:98%; margin:auto}
	.td_logo_header{width:50%}
	.txt_ban{font-size:18px; font-size:1.6em}
	
	.big{font-size:22px; font-size:1.2em}
	
	.tablemob tr{display:block}
	.tablemob td{display:block;}
	.mob_top_space{padding-top:20px}
	.td25{width:100%}
	.td33{width:100%}
	.td40{width:100%}
	.td50{width:100%}
	
	.bigpadleft{padding-left:20px}
	.midhide{display:none}
	.ban_titre{padding-left:10vw}
	h1{font-size:2em;}
	.bigH1{font-size:2em;}
	#tForm{width:80%;}
	.centremobile{text-align:center}
	.margincentremobile{margin:auto}
}

@media only screen
and (max-width : 480px)
{
	body{
		margin:0;
		font-size:16px; font-size: 1.2em;
	}
	
	#menu{display:none}
	#menumobile{display:block}
	
	.td_logo_header{width:50%}
	.txt_ban{font-size:18px; font-size:1.5em}
	.big{font-size:22px; font-size:1.2em}
	
	.tablemob tr{display:block}
	.tablemob td{display:block;}
	.td25{width:100%}
	.td33{width:100%}
	.td40{width:100%}
	.td50{width:100%}

	.right{text-align:left}
	.mob_top_space{padding-top:20px}
	
	.midhide{display:none}
	.mobhide{display:none}
	.contenu{width:98%; margin:auto}
	.bigpadleft{padding-left:20px}
	#tForm{width:98%;}
	.centremobile{text-align:center}
	.margincentremobile{text-align:center}
}

@-moz-keyframes dropHeader {
    0% {
        -moz-transform: translateX(-400px);
		opacity: 0;
    }
    100% {
        -moz-transform: translateX(0);
		opacity: 1;
    }
}
@-webkit-keyframes dropHeader {
    0% {
        -webkit-transform: translateX(-400px);
		opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
		opacity: 1;
    }
}
@keyframes dropHeader {
    0% {
        transform: translateX(-400px);
		opacity: 0;
    }
    100% {
        transform: translateX(0);
		opacity: 1;
    }
}