html{background:rgb(22, 22, 22);}

body{margin:0px;padding:0px;border:0px;min-width:320px;width:100%; height:100%; color:#fff;background-color:rgb(220, 220, 220);}	

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900&subset=latin-ext');

*{font-family: 'Source Sans Pro', sans-serif; color:#555}
.clear{clear:both;}

#all_header{margin:0px auto;padding:0px;border:0px;z-index:999;position:fixed;top:0px;display: block;width: 100%;background: #23a0c6;}

#header{margin:0px auto;padding:0px;border:0px;max-width:1024px;min-width:320px;width:100%;height:120px;display:block;position:relative;}
.box_logo{margin:0;padding:0;border:0;display:block;width:100%;max-height:80px; padding:1%; float:left }
.box_logo img{max-width:80px;max-height:80px; margin:0 auto;display: block;}
.fb-like{position:absolute;top:0;left:0;float: left;}

/*    ---------------  FIN STYLE HEADER    ------------------    */


/*    ---------------  STYLE MENU    -------------------    */
#navigation{width:100%;background:#222222;z-index:99999999999999; position: fixed;top:0px;}
#menu{max-width:1024px;min-width:320px;width:100%;background:#222222;margin:0px auto;height:50px;padding-top:0px;padding-bottom:0px;vertical-align:text-bottom;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease;}
#menu ul {display:block;margin:0px auto;padding:0px;height:50px;border:0px;max-width:1024px;min-width:320px;width:100%;list-style-type:none;text-align:center;position:absolute;z-index:1000;}
#menu ul li {float:left;padding:0;height:50px;line-height:50px;display:block;text-decoration: none;text-align:center;color:#ffffff; text-transform:uppercase;width:20%;display: block; font-size:12px !important; font-weight:500;}
#menu ul li a {padding:0;height:50px;display:block;color:#ffffff;text-decoration:none;background-color:#222222; font-size:14px !important; font-weight:500;}
#menu ul li a:hover{padding:0;height:50px;background:#000000;color:#fff; font-size:14px !important; font-weight:500;}

#menu ul .modifiermonsite{background:rgb(207, 0, 30) !important; font-weight:600}
#menu ul .modifiermonsite a{background:rgb(207, 0, 30) !important; font-weight:600}
#menu ul .modifiermonsite a:hover{background:rgb(143, 21, 26) !important; font-weight:600}

#menu a{background:#222222;}
#menu a:active{background:#222222;}
a {text-decoration: none;color:#fff;}

.carentrerajamais {display: none;font-size: 14px;color: white;font-weight: bold;text-decoration: underline;}

/*    ---------------  FIN STYLE MENU    ------------------    */



/*    ---------------  STYLE HOSTING  & COPY  ----------------    */

#all_hosting{position:fixed;display:block;bottom:0px;float:left;background:#FFF;margin:0px auto auto auto;border:0px;width:100%;padding:0px;height:40px;-moz-box-shadow:   0px 0px 10px rgba(0, 0, 0, 0.5);-webkit-box-shadow:  0px 0px 10px rgba(0, 0, 0, 0.5);box-shadow:  0px 0px 10px rgba(0, 0, 0, 0.5);text-align:center;z-index:2 !important;}


#copyright{margin:0px auto;padding:0px;border:0px;min-width:320px;max-width:1024px;width:100%;height:40px;line-height:40px;font-weight:400;color:#000;font-size:12px !important;text-align:center;text-transform:uppercase;}
#copyright a{;margin:0px;padding:0px;border:0px;min-width:320px;max-width:1024px;width:100%;height:40px;color:#000;text-transform:uppercase;font-size:12px !important;}
#copyright a:hover{margin:0px;padding:0px;border:0px;min-width:320px;max-width:1024px;width:100%;height:40px;color:#111;text-transform:uppercase;font-size:12px !important;}
/*    ---------------  FIN STYLE HOSTING    -----------------    */






/*    ---------------  STYLE FONTS    ------------------    */
h1,h2,h3,h4, h2 >a{text-align:center;}
h2 a{color:#23A0C6}
h4 a{color:#000}

h1{border:0;padding:0;margin:5px 0; font-weight:600 !important; font-size: 22px !important; text-align:center; color:white !important}
h2{border: 0;padding: 0;margin: 25px 0;font-weight: 800 !important;font-size: 22px;;}
h3{border: 0;padding: 0;margin: 5px 0;font-weight: 700 !important;font-size: 28px;color: #23A0C6 !important;text-decoration: underline;}
h4{border:0;padding:0;margin:5px 0; font-weight:600 !important; font-size: 14px;}
p{border:0;padding:0;margin:0; font-weight:600 !important; font-size: 14px;}
li{border:0;padding:0;margin:0; font-weight:600 !important; font-size: 18px;text-align: justify;}


.important{text-decoration:underline;text-outline:rgb(83, 207, 244) !important; background:none !important;color:rgb(83, 207, 244) !important;}

/*    ---------------    FIN STYLE FONTS    ------------------    */
#pages{width: 100%;margin-bottom:40px;margin-top: 170px;padding: 0; height: auto;display: block;background: url(../images/bg.jpg) no-repeat fixed ; background-size: cover;}

.page{width:100%;margin:0;height: auto !important;background-color: rgba(0,0,0,0);padding: 0px 0px;}

.page:nth-child(3n) {} 
.page:nth-child(3n+1) {} 
.page:nth-child(3n+2) {} 


#separate {height: 0px;}

.page > div{width: auto;max-width: 100%;min-width: 300px;height: 100%;min-height: auto;margin: auto;padding: 120px 0;}
.page > div ul {width:auto; padding:0}
.page > div ul li {list-style-type: none;}

.pageicone{max-height:150px !important; display:block !important; width:auto !important; margin:auto !important}

.page > div > form{ margin: auto;width: calc(94% - 2px);border-radius: 8px;border: 1px solid #D3D3D3;padding: 3%;background: rgba(0,0,0,0.2);}

.page > div > form > label{font-size: 16px;}
input,select,textarea {width: calc(100% - 20px);font-size: 20px;height: 25px;border-radius: 4px;border: 1px solid #D3D3D3;height: 25px;background-color: white;color: grey;height: 40px;font-size: 18px;margin: auto; margin-bottom:10px; padding:0 10px}
input.checkbox {border-radius: 8px;height: 25px;width: 25px;clear: left;}
select{font-size: 18px;width: 100% !important}
#submitlogin {width: 100% !important;
background: rgb(21, 116, 142);
color: white !important;
font-size: 20px !important;
font-weight: 600 !important;
border-radius: 0 !important;
border: 0 !important;}
#submit{width: 100% !important;
background: rgb(21, 116, 142);
color: white !important;
font-size: 20px !important;
font-weight: 600 !important;
border-radius: 0 !important;
border: 0 !important;}



#home > div{ background: url(../images/home.png) rgba(30,30,30,1) !important; padding-top:0 !important; background-size: contain !important; background-repeat:no-repeat !important}
#fonctionnement > div{ background:rgba(220,220,220,1) !important; background-size: cover !important;}
#creer > div{ background:rgba(150,150,150,1) !important; background-size: cover !important;}
#login > div{ background:rgba(80,80,80,1) !important; background-size: cover !important;}
#realisations > div{ background:rgba(40,40,40,1) !important; background-size: cover !important;}
#editeur > div{ background:rgba(150,150,150,1) !important; background-size: cover !important;}
#paypal > div{ background:rgba(150,150,150,1) !important; background-size: cover !important;}

.page .content{max-width: 1100px;
background: rgba(245,245,245,1);
color: grey;
margin: 0 auto;
margin-top: 15px;
position: relative;
display: block;
padding: 20px;
box-shadow: 0px 0px 60px rgba(0,0,0,0.2); border-radius:0px}

.page #home{margin:0 auto;}

#home.page > div #avantage ul li {list-style-type: none;margin: auto;width: 31.333%;height: 190px;float: left;padding: 1%;}

#home.page > div #avantage ul li div {width: 100%;height: auto; max-height: 220px;min-height: 60px;min-width:40px;display: block;margin: auto;text-align: center;}
#home.page > div #avantage ul li div img:hover{opacity: 1;box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.5);}

#home.page > div #avantage ul li div img{border-radius: 0px;width: 96%;height: 100%;max-width: 150px;max-height: 150px;margin:auto;background-color: white;opacity: .9;box-shadow:  5px 5px 19px 0px rgba(0,0,0,0.5); padding:2%}

/* #home.page > div ul li:nth-child(3n){clear: both;margin-bottom: 50px;} */
#home.page > div  #avantage h3 {text-align: center;margin-top: 2px;}
#home.page > div  #avantage ul li div h3 {text-align: center;}
#home.page > div > h1 {text-align: left;}
#home.page > div > h2 {text-align: justify;margin: 15px;}

ul#avantage{max-width:700px; margin:0 auto}
ul#avantage li{width: calc(31.333% - 40px) !important;
padding: 20px;
display: block;
float: left;
box-shadow: 0 0 0px 1px rgba(0,0,0,0.2);
margin: 1%;
height: auto !important;
background: rgba(240,240,240,1);}
ul#avantage li img{width:calc(100% - 40px); padding:20px !important;}
ul#avantage li h3{width:100%; text-align:center !important; font-size:20px; color:#555 !important; font-weight:600 !important; text-decoration:none !important; height:40px !important}


#cgu {height: 200px;overflow-y: scroll;width: 98%;margin: 1% 0;padding: 1%;border: 1px solid rgba(30,30,30,0.2);background: rgba(200,200,200,0.3);}
#cgu ul li {text-align: justify; font-size:15px; list-style:none !important}
#cgu ul li  {list-style-type: circle;}
#cgu h2{background:rgb(20,20,20) !important; color:rgba(255,255,255,0.7) !important; font-size:22px !important; font-weight:600 !important; padding:3px !important; border-radius:0px !important}
#cgu a{color:black !important; text-decoration:underline !important}
#cgu p{color: white!important;}


#fonctionnement > div > div{background: rgba(245,245,245,1);
margin: auto;
max-width: 1100px;
text-align: justify !important;
text-align: left;
display: block;
padding: 20px;
box-shadow: 0px 0px 70px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,1);
border-radius: 0px;}
#fonctionnement > div > img{border-radius: 100px;background-color: white;width: 30%;max-width: 150px;}
#fonctionnement.page > div  ul li {text-align: center; margin: 5px;}
#fonctionnement h2{background:rgb(35, 160, 198); color:rgba(255,255,255,1); font-size:30px; font-weight:600; padding:10px; border-radius:3px}



#realisations > div > div{background: rgba(245,245,245,1);
margin: auto;
max-width: 1100px;
text-align: justify !important;
text-align: left;
display: block;
padding: 20px;
box-shadow: 0px 0px 70px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,1);
border-radius: 0px;}
#realisations h2{background:rgb(35, 160, 198); color:rgba(255,255,255,1); font-size:30px; font-weight:600; padding:10px; border-radius:3px}
#realisations.page > div ul {margin: auto;width: 100%; padding:0}
#realisations.page > div ul li {list-style-type: none;margin: 0.5%;width: calc(31.333% - 2px);height: 40px;border: 1px dotted grey;text-align: center;line-height: 40px;overflow: hidden;padding: 0.5%;float: left;color: grey !important;}
#realisations.page a{font-size: 16px;color: grey !important;}




#creer.page > div > img{border-radius: 100px;background-color: white;width: 30%;max-width: 150px;}
#creer h2{background:rgb(35, 160, 198); color:rgba(255,255,255,1); font-size:30px; font-weight:600; padding:10px; border-radius:3px}
#creer > div > div{background: rgba(245,245,245,1);
margin: auto;
max-width: 1100px;
text-align: justify !important;
text-align: left;
display: block;
padding: 20px;
box-shadow: 0px 0px 70px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,1);
border-radius: 0px;}



#login > div > div{background: rgba(245,245,245,1);
margin: auto;
max-width: 1100px;
text-align: justify !important;
text-align: left;
display: block;
padding: 20px;
box-shadow: 0px 0px 70px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,1);
border-radius: 0px;}
#login input,#login  select,#login  textarea{text-align: center !important;}
#login.page > div > img{border-radius: 100px;background-color: white;width: 30%;max-width: 150px;}
#login.page > div  ul li {text-align: center; margin: 5px;}
#login h2{background:rgb(35, 160, 198); color:rgba(255,255,255,1); font-size:30px; font-weight:600; padding:10px; border-radius:3px}

#login input,select,textarea {width: calc(50% - 20px);
display: table-caption;
min-width: 300px;}

#login label{text-align:center; display:block}


#editeur > div > div{background: rgba(245,245,245,1);
margin: auto;
max-width: 1100px;
text-align: justify !important;
text-align: left;
display: block;
padding: 20px;
box-shadow: 0px 0px 70px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,1);
border-radius: 0px;}

#editeur a {color: #000;}

#editeur h2{background:rgb(35, 160, 198); color:rgba(255,255,255,1); font-size:30px; font-weight:600; padding:10px; border-radius:3px}
#editeur h2 >span{color: inherit;}
#editeur ul li{text-align: center;line-height: 25px;}

#paypal > div > div{background: rgba(245,245,245,1);
margin: auto;
max-width: 1100px;
text-align: justify !important;
text-align: left;
display: block;
padding: 20px;
box-shadow: 0px 0px 70px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,1);
border-radius: 0px;}

#paypal a {color: #000;}

#paypal h2{background:rgb(35, 160, 198); color:rgba(255,255,255,1); font-size:30px; font-weight:600; padding:10px; border-radius:3px}
#paypal h2 >span{color: inherit;}
#paypal ul li{text-align: center;line-height: 25px;}

#paypal .details > h3{text-align: right;color: brown !important;font-size: 18px;margin: 8px;text-decoration: none;}
#paypal input.submit{color: brown;border-color: #000;}




@media only screen and (max-width: 1028px) {
	#menu a{font-size: 14px;}
}



@media only screen and (max-width: 800px) {
	#menu a{font-size: 10px;}
	h1{font-size: 26px;}	
	h2{font-size: 24px;}	
	h3{font-size: 22px;}	
	h4,input,label,li{font-size: 18px;}	
	
	#realisations.page > div ul li {width: calc(48% - 2px)}
ul#avantage li img{width: 100%;
padding: 0px !important;}
}

@media only screen and (max-width: 650px) {
#pages{margin-top: 80px !important;}
	#menu a{font-size: 7px;}
	h1{font-size: 22px;}	
	h2{font-size: 20px !important;}	
	h3{font-size: 18px;}	
	h4,input,label,li,select{font-size: 14px;}	
	#all_header{position: fixed;}
	#all_hosting{position: fixed;}
	#pages{margin-top: 50px;margin-bottom: 40px;}
	ul#avantage li{width: calc(31.333% - 10px) !important; padding: 5px !important;}
	
	#menu{max-height:30px !important; line-height:30px !important}
	#menu ul{max-height:30px !important; line-height:30px !important}
	#menu ul li{display:content !important; max-height:30px !important; line-height:30px !important; width: 25% !important;}
	#menu ul li a{max-height:30px !important; line-height:30px !important; font-size:10px !important}
	#menu ul li a:hover{max-height:30px !important; line-height:30px !important; font-size:10px !important}
	.bx-wrapper{display:none !important}
	.page > div{padding:0 !important}
	#header{max-height:50px}
	.box_logo img{max-height:40px;max-width:40px}
	.pageicone {max-height: 80px !important;}
	#cgu h2{font-size:20px !important}
}


@media only screen and (max-width: 480px) {
	#realisations.page > div ul li {width: calc(98% - 2px)}
	ul#avantage li h3{font-size: 12px !important}	
}


@media only screen and (max-width: 400px) {
	#menu a{font-size: 7px;}
	h1{font-size: 20px;}	
	h2{font-size: 18px;}	
	h3{font-size: 16px;}	
	h4,input,label,li{font-size: 12px;}	
	#copyright a {font-size: 12px;}
	#all_header{position: fixed;}
	#header{display: none;}
	#all_hosting{position: relative;}
	#pages{margin-top: 50px;margin-bottom:0px;}
	.carentrerajamais {display: block;}

}