/*Fichier CSS principal de six3ml*/
/*Auteur: Sebastien Noel*/
/*Mise a jour : 35 mars 2108*/

/* Proprietes generales */

img, div, body {
   border: none;
   padding: 0;
   margin: 0;
   
}

a {
   outline: none;
   }

body {
   background-color: white;
   font-family: sans-serif;
   font-size: 0.8em;
}

#pict-profil, #pict-profil1, #pict-profil2, .left-services, #web-services, .right-services {
   width: 786px;
   height: 294px;
}

.roll-inbetween {
   width: 1572px;
   height: 294px;
}


#main {
   position: relative;
   width: 944px;
   margin-left: auto;
   margin-right: auto;
}

#main-box {   
   width: 800px;   
   margin-left: auto;
   margin-right: auto;   
}

#main-box2 {
   height: 306px;
   background-color: transparent;   
   margin-left: 0px;
}

#logo {
   width: 122px;
   height: 39px;   
   padding-left: 25px;   
   padding-bottom: 10px;
}

#base {
   width: 944px;
   height: 132px;
   

}

#main-bouton {
   margin-left: 0px;

}

#main-bouton div {

   z-index: 9 !important;
}

#main-bouton img {
   position: relative;
   z-index: 8 !important;
}

#main-bouton img {
   vertical-align: top;
}
   
#wrap-boite-base {
   position: absolute;
   z-index: 10;

   
}

#boite-base {
   position: relative;
   bottom: 27px;
   

}

div#pict-centre {
   width: 786px;
   height: 294px;
   z-index: 6;
   padding: 7px;
   
   position: absolute;
   
   
   background-color: black;   
}


/* Le contenu principal du site
  *****************************
  *****************************
  *****************************
  *****************************/

#wrap-content {
   position: absolute;
   z-index: 7;
}

#content {
   position: relative;
   width: 800px;
   
}

#main-bouton img {
   cursor: pointer;
}


/* Super Kwicks ***********************
  ***********************************
  ***********************************
  ***********************************
  ***********************************
  ***********************************
  ***********************************
  ***********************************
  ***********************************/

#wrap-folio {
   position: absolute;
}

#boite-folio {
   margin-left: 7px;
   top: 6px;
   position: relative;
}

.kwicks{  
     list-style: none;  
     position: relative;  
     margin: 0;  
     padding-left: 0;  
 }  
 .kwicks li {  
     display: block;  
     overflow: hidden;  
     padding: 0;  
     cursor: pointer;
     border: 1px solid black;
     width: 56px;
     height: 49px;
 }
 
 #wrap-barre-bleue {
   position: absolute;
   height: 1px;
   padding: 0px;
   margin: 0px;
 }
 
 div#wrap-barre-bleue img#barre-bleue {
   position: relative;
   width: 143px;
   height: 1px;
   padding: 0px;
   margin: 0px;
   top: 1px;
   
   z-index: 9 !important;
   display: block;
   left: 43px;
   
   
 }
 
 #wrap-global {
   width: 792px;   
   overflow: hidden;
   position: absolute;
   height: 294px;
   top: 7px;
   
   
   
   
 }
 
  #wrap-wrap-global {   
   position: absolute;
   
   
   
 }
 
 #wrap-profil {
   position: absolute;
   width: 786px;
   height: 294px;
   
   
   }

#profil {
   margin-left: 7px;   
   width: 786px;
   height: 294px;  
}

#wrap-contact {
   position: absolute;
   
   left: 9432px;
}

#boite-contact {
   margin-left: 7px;
   
   position: relative;
   
   
}

#img-contact {
   width: 787px;
   height: 294px;
}

 #wrap-entre-profil-services {
   position: absolute;
   width: 1572px;
   height: 294px;
   
   left: 786px;
   }

#entre-profil-services {
   margin-left: 7px;   
   width: 786px;
   height: 294px;  
}

 #wrap-services {
   position: absolute;
   width: 786px;
   height: 294px;
   
   left: 2358px;

}

#services {
   margin-left: 7px;   
   width: 786px;
   height: 294px;  
}

 #wrap-entre-services-equipe {
   position: absolute;
   
   width: 1572px;
   left: 3144px;
}

 #wrap-equipe {
   position: absolute;
   /*top: -93px;*/
   width: 786px;
   height: 294px;
   
   left: 4716px;
}

#equipe {
   
   /*margin-left: 7px;
   margin-left: 15px;*/ 
   width: 786px;
   height: 294px;   
   background-color: #ffffff;
}





#wrap-entre-equipe-folio {
   position: absolute;
   /*top: -93px;*/
   width: 1572px;
   left: 5502px;
}

#wrap-entre-folio-contact {
   position: absolute;
   /*top: -93px;*/
   width: 1572px;
   left: 7870px;
}

#wrap-folio {
   position: absolute;
   top: -7px;
   left: 7074px;
   
   
}




#membres-equipe {
   margin-left: auto;
   margin-right: auto;
   
   width: 674px;
   padding-right: 10px;
   padding-top: 44px;   
   
}


#noms, #noms img {
   position: absolute;
   z-index: 40;
}

#nom-alex {
   
   top: -10px;
   left: 65px;
   background-color: white;
   width: 156px;
   height: 22px;
}

#nom-sam {
   
   top: -10px;
   left: 210px;
   background-color: white;
   width: 120px;
   height: 25px;
}

#nom-charles {
   
   top: -10px;
   left: 313px;
   background-color: white;
   width: 143px;
   height: 23px;
}

#nom-seb {
   
   top: -10px;
   left: 456px;
   background-color: white;
   width: 111px;
   height: 23px;
}

#nom-jo {
   
   top: -10px;
   left: 580px;
   background-color: white;
   width: 129px;
   height: 23px;
}

.equipe-change {
   display: inline;
   top: -10px;
   left: -5px;
   
   
}



.equipe-change2 {
   display: inline;
   top: -10px;
   left: 155px;
}

.equipe-change3 {
   display: inline;
   top: -10px;
   left: 280px;
}

.equipe-change4 {
   display: inline;
   top: -10px;
   left: 400px;
}

.equipe-change5 {
   display: inline;
   top: -10px;
   left: 525px;
}

#transi1 {
   width: 13276px;
   height: 294px;
}

#facebook {
   position: relative;
   left: 800px;
   top: -60px;
   z-index: 4;
   cursor: pointer;
   width: 66px;
   height: 26px;
}

#wrap-facebook {
   position: absolute;
   width: 66px;
   
}

ul.kwicks img {
   width: 96px;
   height: 48px;
}

#alex {
   width: 157px;
   height: 194px;
   
   
}

#sam {
   width: 122px;
   height: 194px;
}

#jo {
   width: 150px;
   height: 193px;
}

#charles {
   width: 122px;
   height: 194px;
}

#seb {
   width: 123px;
   height: 196px;
}

#btn-precedent {
   width: 43px;
   height: 59px;
}

#btn-profil, #btn-equipe, #btn-contact {
   width: 144px;
   height: 59px;
}

#btn-services, #btn-portfolio {
   width: 143px;
   height: 59px;
}


#btn-suivant {
   width: 39px;
   height: 59px;
}
#wrap-edge-blur {
   position: absolute;
   z-index: 20;
}

div.wrap-blur {
   z-index: 20;
   position: absolute;
   
}

#wrap-edge-blur img {   
   position: relative;
   z-index: 20;
}

#edge-blur1 {
   width: 11px;
   height: 294px; 
   
   
   border-left: 7px solid black;
   top: 7px;
   left: 0px;
}

#edge-blur2 {
   width: 759px;
   height: 15px;
   
   
   top: 7px;
   left: 18px;
}

#edge-blur3 {
   width: 20px;
   height: 294px;

   
   top: 7px;
   left: 777px;
}

#edge-blur4 {
   width: 759px;
   height: 16px;
   
   top: 285px;
   left: 18px;
}



#btns-service {
   position: absolute;

}

.btn-service {
   width: 129px;
   height: 17px;
   position: relative;
   cursor: pointer;
}



#c-visuelle {
   top: 120px;
   left: 36px;
}

#c-web {
   
   top: 120px;
   left: 41px;
}

#c-photographie {
   top: 145px;
   left: -230px;
}

#c-pub {
   top: 145px;
   left: -225px;
}

.boite-service-texte {
   width: 299px;
   height: 200px;
}

.wrap-details-servs {
   position: absolute;
   z-index: 40;
   top: 42px;
   left: 404px;
}

.details-servs {
   position: relative;
   
}

.details-servs ul {
   position: absolute;
   left: 27px;
   top: 60px;
   color: white;
   font-size: smaller;
   list-style: none;
   
}

.details-servs ul li span {
   border-bottom: 1px dotted #828282;
   
   
}

.details-servs ul li {
   margin-bottom: 5px;
   padding: 0px 0px 0px 10px;
   background: url('../images/bullet_services.png') no-repeat left center;
   width: 200px;
}

#wrap-form {
   position: absolute;
}

#wrap-form form {
   position: relative;
   left: 25px;
   top: 93px;
   width: 380px;
}

input, textarea {
   border: 1px solid #A8AEC8;
   color: #35434E;
   opacity: 0.7;
}

textarea {
   width: 366px;
}

#name, #email {
   width: 179px;
   margin-top: 20px;
}

input {
   text-align: center;
}

.merci-contact {
   font-size: 1.6em;
   width: 300px;
   color: #00111F;
}

#contact-info {
   position: absolute;
   left: 30px;
   top: 226px;
   font-size: 9px;
   font-weight: normal;
   color: #595C7D;
   z-index: 1;
}

#contact-info a {
   text-decoration: none;
   color: #595C7D;
   border-bottom: 1px dotted #595C7D;
}

#loading{
	/* the loading gif is hidden on page load */
	position:relative;
	bottom:9px;
	visibility:hidden;
}

#wrap-form h1 {
   position: absolute;
   top: 101px;
   left: 30px;
   color: #1F1F1F;
   width: 400px;
   font-size: 15px;
}