@charset "utf-8";
/* CSS Document */

@keyframes slide-right {
  from {
    margin-left: -200%;
    width: 100%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }

  }
  
body { margin: 0; padding: 0;     font-size: 19px;
    margin-bottom: 1.2em;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #3a454e;}
a {color: #3a454e;}
img { max-width: 100%; color: #100E0F; }

h1 {
 font-size: 20px;
}
p { line-height: 32px;  }
#pjCF_container_2 .pjCF-form-field {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    background-color: #fdfdfd !important;
    font-weight: normal;
    height: 40px;
    box-shadow: 0px 2px 2px 0px rgba(142, 142, 142, 0.1), 0px 2px 2px 0px rgba(142, 142, 142, 0.1) inset;
}
#pjWrapperContactForm_1 .pjCF-form label.cf-heading-small {
    font-size: 18px;
    background: #585858;
    margin-bottom: 40px;
    text-align: left;
    color: white;
}
label.col-sm-12.cf-heading.cf-heading-small {
    height: 50px;
    background: darkgrey;
    font-size: 18px;
    line-height: 50px;
    color: white;
      margin-bottom: 30px;
    margin-top: 30px;
    width: 100%;
    text-align:left;
}
[id^=pjWrapper] .form-group {
    margin-top: 30px;
}
#conteneur { width:100%; float: left; }

#haut { width:100%; float: left; }
#logo { width:100%; float: left; text-align:center; }
#menu { width:100%; float: none ; padding-top:0px; margin-bottom:20px; display: inline-block; text-align:center; }

.lien{overflow:hidden;float:none;}
.lien a{float:left;display:block;font-size:18px;text-align:center;color:#cccccc;padding:0px; margin-right:26px; margin-left: 26px; 
text-decoration:none; font-weight: bold; text-transform:uppercase;  
color: #ff3300;    line-height: 30px;
}
.lien a:hover{	
color: #ff3300;
	transition: all 0.2s ease-in;
 
	-webkit-transition-duration: 0.2s;
}
.lien .icon{display:none;}

.titre {font-size: 25px; text-align:center;    margin-bottom: 10px; }
.titred {font-size: 25px; text-align:left; }


#image { width:100%; float: left; background-image:none;     background: #242424;  background-size: cover; height:120px; background-position:center; }

.headertxt {
    position: relative;
    margin: 0;
    padding: 0;
    top: 0%;
    left: 0%;
    width: 100%;
}


.headtxt1 {
	font-size: 38px;
 font-weight: bold;
	color: #ffffff;
	animation: 1s slide-right ease;
	margin:0;
	padding: 0;
 display: none;
	 text-align:center;
  line-height:1.7;
  

}
.rouge { color: #ff3300; }


.headtxt2 {
	font-size: 25px;
	color: #ffffff;
	animation: 1.2s slide-right ease;
 text-align:center;
 margin: 20px 0px 20px 0px;
 display: none;
}
.btnb {
padding-top: 40px;
animation: 1.4s slide-right ease;
text-align:center;
	}

.btnb a {
    padding: 9px 20px 9px 20px;
    font-size: 20px;
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
	background-color: #ff3300;
	-webkit-border-radius: 10px;

}


#milieu { width:100%; float: left; }

#bloca { width:100%; float: left; padding-top:20px; padding-bottom:100px; }
.cotea { float: left; width:100%; margin-right: 0%; padding-top:10px; }
.coteb { float: left; width:100%; }

.coteai { float: left; width:100%; margin-right: 0%; padding-top:10px; }
.cotebi { float: left; width:100%; }

.cotec { float: left; width:100%; }



[id^=pjWrapper] .col-sm-12 {
    text-align: center;
}

#blocb {
    width: 100%;
    padding-top: 40px;
    float: left;
    background-color:#242424;
    background-image: none;
}
#blocb h2 { color:#FFF; font-size: 25px;}
.titreb { text-align: center; font-size: 30px; font-weight: bold; margin:0 0 70px 0;
 padding: 0;
  }
.site { color: #666666;    font-size: 17px;
    line-height: 24px;
    margin-right: 20px;
    margin-left: 20px; }

#blocba { width:100%; float: left; text-align:center;}
#blocbb{ width:100%; float: left; margin-left: 0%; margin-right: 0%; text-align:center;}
#blocbc { width:100%; float: left; text-align:center;  }

.titrec {
    font-size: 30px;
    text-align: center;
    line-height: 1;
}
.realisationtexte { text-align: center; font-weight: bold; }
.bouton a { padding: 15px 20px 15px 20px; background:#ff3300; text-decoration: none; color: #FFF; border-radius:10px;}
.bouton a:hover { background: #DB2F04; }

#bloccc { width:100%; float: left; padding-top:100px; padding-bottom:100px; }
.texteac { line-height: 28px;font-size: 18px; }
#blocca { width:100%; float: left; padding-top:20px; padding-bottom:0px; }
#bloccb { width:100%; float: left; padding-top:20px; padding-bottom:20px; }

.logoclient { width:100%; float: left; text-align:center;}
.logob { float: left; }
.texteb { font-size:22px; }
.photoclient { float: left; width:100%; margin-right:0%; text-align:center}
.texteclient { float: left; width:100%; }

#bas { width: 100%; float: left; padding-top: 100px; padding-bottom: 100px; background-color: #100E0F;   }
h3 { color: #ff3300; font-size: 18px; margin:0; padding:0; }

#bas p { color: #666666;font-size: 16px;
    line-height: 24px; }

#basa { width:100%; float: left; }
#basb{ width:100%; float: left; margin-right: 0%; margin-left: 0%;  }
#basc { width:100%; float: left; }

#basb a { color:#666666; text-decoration: none;     font-size: 16px;
    line-height: 28px;}
#basc a { color:#666666; text-decoration: none; font-size: 16px;
    line-height: 28px;}


.boutonb a { padding: 15px 20px 15px 20px; background:#ff3300; text-decoration: none; color: #FFF; border-radius:10px;}
.boutonb a:hover { background: #DB2F04; }

.numero { text-align: center;  }

.numero a { text-align: center; text-decoration: none; color:#ededed; font-size: 23px;}

.centre {width:90%; margin-right: auto; margin-left: auto;}
.centred {width:90%; margin-right: auto; margin-left: auto; text-align:center; margin-bottom: 10px;}
.centrei {width:90%; margin-right: auto; margin-left: auto;}


.centreclient {width:90%; margin-right: auto; margin-left: auto;     margin-bottom: 30px;
    margin-top: 30px;}

.texteclient li { margin-top:10px;}

.centrel {width:80%; margin-right: auto; margin-left: auto; border-top:1px solid #333333; }
.centreb { border-bottom:1px solid #f5f5f5; float:left; margin-bottom:40px; width:100%; }

#createur { float: left; width:100%;  background-color: #100E0F; }
.createura { color:#666666;     font-size: 16px;
    font-weight: bold;}


#pagea { float: left; width:100%;  }
#pageb{ float: left; width:100%;  }
.orangebloc { line-height:50px; background:#ff3300; color:#FFF; text-align:center; }
#pagec { float: left; width:100%;  }
.paged { float: left; width:100%; padding-top: 50px; padding-bottom:250px;  }
#pagerealisation { float: left; width:100%; padding-top: 20px; padding-bottom: 200px;  }

#separation { float: left; width:100%; height:100px; padding-top: 20px; background: #0f0a07;}
#separa { float: left; width:100%;}
#separb { float: left; width:100%; display:none;}


.tsepar { color: #FFF; font-size: 23px; font-weight: bold; margin: 0; text-align:center;}
.ssepar {color: #5f5f5f; font-size: 18px; margin:10px 0 0 0; font-style: oblique; text-align: center; }
.boutonc  a { padding: 14px 40px 14px 40px; background:#ff3300; text-decoration: none; color: #FFF; border-radius:10px; float: none; text-align:center; display:none;}

.pagecotea { width:100%; float: left;}
.pagecotea h2 { font-size: 35px; margin:0; font-weight:bold;}

.pagecoteb {     width: 100%;
    float: left;
    margin-left: 0%;}
p.boutonc {
 margin-top: 50px;
    text-align: center;
}

.plein { float: left; width: 100%; text-align: left; }

.paged li::before {
    content: "•";
    font-weight: bold;
    font-size: 25px;
    color: #ff3300;
    display: inline-block;
    width: 1em;
    margin-bottom: 10px;
    margin-left: 20px;

}
.paged li {
 margin-bottom: 10px;

}
  ul {list-style: none;    margin: 0;
    padding: 0;}

#basb li { list-style-type:none; margin:0; color: #666666; line-height: 28px;
    font-size: 16px;}
#basc li {}

.blocp { width:100%; float: left; margin-top:30px; background:#DEDEDE; border-radius:30px}
.imagep { width:30%; margin-right:5%; float: left; }
.textep { width: 60%; float: left; margin-right:5%;}


.blocforfait { width:100%; float: left ;}
.forfait { width:30%; float: left; }
.forfaitespace { float: left; width:30%; margin-right: 5%; margin-left: 5%;}

.imagetrois { float: left; width:100%;}
.textetrois {float: left; width:100%; height:240px;}
.boutontrois {float: left; width:100%; margin-bottom: 50px;}


@media only screen and (min-width:481px){}
@media only screen and (min-width:769px){
 #basa { width:100%; float: left; }
#basb{ width:40%;  margin-right: 10%; margin-left: 0%;  }

#basc { width:50%; }
.logoclient { width:50%; }
.boutonc  a { display:block;}
.headtxt1 {
 display: none;
}
#image { height:120px;  }
.textetrois {float: left; width:100%; height:150px;}
}
@media screen and (max-width:1024px){
 
  .lien a:not(:first-child){display:none;}
.lien a.icon{float:none;display:block;width:100%;}
.lien a{display:none;padding:0px 0px;   margin-right:auto; margin-left: auto;    }
.lien.responsive{position:relative;}
.lien.responsive a.icon{right:0;top:0;display:none;}
.lien.responsive a{float:left;display:block;width:100%;text-align:center; border:none;     color: #262626;}
.textetrois {float: left; width:100%; height:210px;}

}

@media only screen and (width:1024px){
  .lien{overflow:hidden;float:none; display:none; text-align:center; }
.lien a{float:left;display:none;}

}

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

 
.lien{overflow:hidden;float: none;
    display: inline-block;
    text-align: center;}
.lien a{float:left;font-size:14px;text-align:center;color:#262626;padding:0px ; text-decoration:none; line-height: 50px;  }
.lien a:hover{	
}

#blocba { width:30%;  }
#blocbb{ width:30%; margin-left: 5%; margin-right: 5%;}
#blocbc { width:30%;   }
#separation { padding-top: 100px; background-image:url(images/creation-site-web.jpg); height:200px; }

.ssepar {font-size: 25px;}
.tsepar { font-size: 35px; }
#separb {   display:none;}
.titre {font-size: 42px;     margin-bottom: 60px;  }
.titred {font-size: 42px;  }
.centre {width:80%; }
.centrei {width:70%; }
.centred {width:50%; margin-bottom: 30px;}

#pagerealisation { padding-top: 100px; padding-bottom: 200px;  }


.pagecotea { width:50%; }
.pagecoteb { width: 30%; margin-left: 10%;}
.paged li::before {

    margin-left: -1em;

}

.titreb { font-size: 40px; }

.headtxt1 {
	font-size: 48px;
 display: block;
}

#image { width:100%; float: left; background-image:url(images/creation-site-web.jpg);     background-color: none;  background-size: cover; height:568px; background-position:center; }

.headtxt2 {
 display: block;
}
#bloca {padding-top:100px; }
#blocca {  padding-top:100px; }
.titrec { font-size: 40px; }

#blocb {   
    background: url(images/arriere.jpg);
    background-size: 100%;
    padding-top: 60px;
    padding-bottom: 60px;
    background-repeat: no-repeat;
    background-size: cover;
}
#bloccb {  padding-top:100px; padding-bottom:100px; }
.headertxt {
    top: 100px;

}

.btnb a {
	padding: 18px 40px 18px 40px;
	font-size: 22px;
}

h1 {
 font-size: 35px;
}

.textetrois { height:270px;}
.photoclient {  width:30%; margin-right:5%; text-align:left;}
.texteclient { width:65%; }

.centreclient {width:60%;     margin-bottom: 100px;
    margin-top: 100px;}
.texteb { font-size:24px; }

}
@media only screen and (min-width:1200px){
 #separation { padding-top: 100px; }

 #logo { width:30%; text-align:left;  }
#menu { width:70%; padding-top: 20px; margin-bottom:0px; }

#separa {  width:50%;}
#separb {  width:50%;  display:block;}

.tsepar { text-align:left;}
.ssepar { text-align:left; }
.boutonc  a { padding: 14px 40px 14px 40px; background:#ff3300; text-decoration: none; color: #FFF; border-radius:10px; float: right; text-align: center; font-weight:bold;  }
p.boutonc {
 margin-top: 0px;
 text-align: center;
}

#basa { width:30%; }
#basb {
    width: 25%;
    margin-right: 10%;
    margin-left: 15%;
}
#basc { width:20%;  }

.cotea { width:40%; margin-right: 10%; padding-top:30px; }
.coteb { width:49%; }
.cotec { width:49%; margin-bottom: 80px; margin-top: 80px; }


.coteai { width: 45%;
    margin-right: 15%; }
.cotebi { width:39%; }

.logoclient { width:25%; float: left; margin-bottom: 40px;}
.lien{ float: right;}
.headertxt {
    top: 120px;

}
.headtxt1 {
	font-size: 68px;
}
.headtxt2 {
 display: block;
}

#blocb {   
    background: url(images/arriere.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-size: cover;

}

.textetrois { height:250px;}


 
.lien{overflow:hidden;float: right;
    display: inline-block;
    text-align: center;}
.lien a{float:left;display:block;font-size:14px;text-align:center;color:#666666;padding:0px ; margin-right:26px; margin-left: 26px; text-decoration:none; line-height: 50px;}
}
@media only screen and (min-width:1400px){
 .textetrois { height:190px;}
 .headertxt {
    top: 115px;

}
}
@media only screen and (min-width:1232px){}
@media only screen and (min-width:1400px){}