/* Définitions générales par défaut */

* {
    margin: 0;
    padding: 0;
}

body
{
    font-family: sans-serif;
}

#main_wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bleu
{
    color: rgb(50,150,185);
    /* #5cadd3 */
}

.blanc {
    color: #ffffff;
}

.gris {
    color: grey;
}


/* Définition des polices personnalisées */

@font-face
{
    font-family: 'fontawesomewebfont';
    src: url('../fonts/fontawesomewebfont.eot');
    src: url('../fonts/fontawesomewebfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/fontawesomewebfont.woff') format('woff'),
         url('../fonts/fontawesomewebfont.ttf') format('truetype'),
         url('../fonts/fontawesomewebfont.svg#fontawesomewebfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Section HEADER */

header {

    margin: 0px;
    padding: 0px;
    position: fixed;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: white;
    width: 100%;
    height: 85px;
    align-items: center;
    z-index: 4;
    top :0;
    
}

header nav ul
{
    list-style-type: none;
    display: flex;
    color: grey;
}

header nav ul li
{
    margin-right: 15px;
}

header nav ul li a
{
    color: grey;
    text-decoration: none;
}

header nav ul li a:hover
{
    color: rgb(50,150,185);
    border-top: 2px solid rgb(50,150,185);
    padding-top: 25px;
}

.nav-icon {
    display: none;
    margin: 1em;
    width: 40px;
}

.nav-icon::after, 
.nav-icon::before, 
.nav-icon div {

  background-color: #5cadd3;
  -o-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  content: '';
  display: block;
  height: 5px;
  margin: 7px 0;
  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.nav-icon:hover:before {
  transform: translateY(12px) rotate(135deg);
  -moz-transform: translateY(12px) rotate(135deg);
  -webkit-transform: translateY(12px) rotate(135deg);
}

.nav-icon:hover:after {
  transform: translateY(-12px) rotate(-135deg);
  -moz-transform: translateY(-12px) rotate(-135deg);
  -webkit-transform: translateY(-12px) rotate(-135deg);
}

.nav-icon:hover div {
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
}
/* FIN  Section header */


/* Section 1 Carroussel */

section#carroussel
{
    top: 85px;
    position: relative;
    margin: auto;
    width: 100%;
    max-width: 1600px;         
    /*height: 550px; height: auto;*/         
    overflow: hidden;      
    
}

#img_carroussel
{
    /*display: inline-flex;*/
    
    display: flex;
    transition-property: transform;
    transition-duration: 1s;
    transition-timing-function: ease; /* Transition de type ease */ 

}
#img_bg1, #img_bg2 {
    /*width: 1600px;
    height : 550px; 
     margin-top: 85px;
    background-image: url('../images/slider/bg1_2.jpg');
    background-size: auto;
    background-position: center center;
    background-repeat: no-repeat;*/
    
}


#img_carroussel:hover
{
    transform: translateX(-1600px); /* On déplace l'objet -100% */
}



#text_carroussel
{
    position: absolute;
    top: 30%;
    left: 10%;
    height: 50%;
    /*background-color: grey;*/
    align-items: center;
}
#text_carroussel h2
{
    font-size: 1em;
    margin: 15px 0px 15px 0px;
}
#text_carroussel h1
{
    margin: 15px 0px 15px 0px;
    font-size: 2em;
}

.fa-angle-left {
    
    position: absolute;
    top: 250px;
    left: 0px;
    color: white;
    padding: 1em 0.5em 1em 0.5em;
    background-color: grey;
    border-radius: 0em 2em 2em 0em;
    opacity: 0.8;

}
/* fleche droite et gauche caroussel */
.fa-angle-left:active {
}

.fa-angle-right {
    position: absolute;
    top: 250px;
    right: 0px;
    color: white;
    padding: 1em 0.5em 1em 0.5em;
    background-color: grey;
    border-radius: 2em 0em 0em 2em;
    opacity: 0.8;
}

 #lisere {
     position: absolute;
     display: flex;
     background-color: #5cadd3;
     bottom: 4px;
     left: 0px;
     width: 20%;
     height: 1%;
 }


/* SECTION 2 nos services */
 
#services{
     display: flex;
     position: relative;
     margin-bottom: 50px;
     padding-top: 100px;
     margin-left: auto;
     margin-right: auto;
     
     flex-direction: column;
     justify-content: center;
     align-items: center;
}
 
#services h1
{
    font-family: sans-serif, 'fontawesomewebfont';
    /*font-weight: bold;*/
    font-size: 2.5em;
    /*word-spacing: 3px;*/
}

.icotitre::before {
     position: relative;
     color: #5cadd3;
     background: white;
     font-family: FontAwesome; /* 'fontawesomewebfont' */
     content: "\f111";
     font-size: 1em;
     padding: 4px;
     margin-top: -3px;
}

.fa-home::before {
    font-family: FontAwesome;
    content: '\e800';
}
  .icotitre {
     width: 120px;
     height: 1px;
     border-top: 1px solid grey;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 20px;
     margin-bottom: 20px;
     margin-left: auto;
     margin-right: auto;
 }

#services #soustitre {
     text-align: center;
     max-width: 70%;
     margin: auto;
     margin-bottom: 50px;
     color: grey;
 }
 
 #contenerService {
    
    display: flex;
    width: 100%;
    flex-direction: row;
 }
  
 #contenerServiceImage {
    /*background-color: #ffe0ff; rose*/
     /*background-color: #f2f2f2; gris clair */
     display: flex;
     width: 50%;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }
 
 #contenerServiceImage img {
     /*margin-right: 10%;*/
     margin-top: 10px;
     
 }

 #contenerServiceTexte {
    /*background-color: #ffffe0;  jaune */
     display: flex;
     position: relative;
     width: 50%;
     flex-direction: column;
     justify-content: flex-end;
     align-items: flex-start;
     padding-top: 65px;
}

.contenerServiceTexteArticle {
    /*background-color: #ffefff;  rose pale */
    width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: flex-start;
 }
 
 .texteService {
    /* background-color: #e0ffff; */
     padding-top: 8px;
     padding-left: 10px;
 }
 
 .texteService>p {
     color: grey;
     font-weight: normal;
 }
 
 .descriptionTexteService {
    /*background-color: #efe0ff;  rose sale */
     text-align: justify;
     padding-right: 10%;
 }

 #services h2{
    font-size: 1.2em;
    padding: 0px 0px 5px 0px;
 }

 
 .texteService strong {
     font-weight: bold;
 }

 /* icones service */
 .logoService {
     min-width: 115px;
     height: 90px;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
 }

 .icocube,
 .icochart,
 .icograph {
     width: 60px;
     height: 60px;
     border: 1px solid grey;
     border-radius: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .icocube::before {
     color: #5cadd3;
     font-family: FontAwesome;
     content: "\f1b3";
     font-size: 1.5em;
 }
 
 .icochart::before {
     color: #5cadd3;
     font-family: FontAwesome;
     content: "\f200";
     font-size: 1.5em;
 }
 
 .icograph::before {
     color: #5cadd3;
     font-family: FontAwesome;
     content: "\f201";
     font-size: 1.5em;
 }
 
 .bubble::before {
     position: relative;
     right: 12px;
     color: #5cadd3;
     background: white;
     font-family: FontAwesome;
     content: "\f111";
     font-size: 1em;
     padding: 4px;
 }





/* Portfolio section Projets */

#nosprojets .icotitre::before {
    background: #f5f5f5;
}
  

#nosprojets h1
{
    font-family: sans-serif, 'fontawesomewebfont';
    /*font-weight: bold;*/
    font-size: 2.5em;
    /*word-spacing: 3px;*/
}

section#nosprojets
{
    padding-top: 30px;
    position: relative;
    text-align: center;
    background-color: #f5f5f5;
}

 /* menu section projets */

 #containerMenuProjets ul {
     font-size: 0;
 } 
 #menuProjets {
    margin-top: 32px;
    margin-bottom: 39px;
    height: 37px;
 }

 #menuProjets a {
     display: block;
     text-decoration: none;
 }
 
.extremiteGauche a, .extremiteDroite a,.menuCentralCorporate a, .menuCentralCreative a {
     color: grey;
 }
  
.extremiteGauche, .extremiteDroite,.menuCentralCorporate, .menuCentralCreative {
     background-color: #e5e5e5;
     border-bottom: 3px solid #e5e5e5;
     color: grey;
 }     
.extremiteGauche_active {
    border-radius: 5px 0px 0px 5px;
}
 
 .extremiteDroite {
     border-radius: 0px 5px 5px 0px;
 }
 
 
 .fleche {
     position: relative;
     top: 3px;
     left: calc(50% - 7px);
     width: 0;
     height: 0;
     border: 7px solid transparent;
     border-top-color: #f5f5f5;
     border-right-color: transparent;
     border-bottom-color: transparent;
     background: transparent;
 }

 #menuProjets>li {
     display: inline-block;
     height: 35px;
     width: 88px;
     text-align: center;
     line-height: 35px;
     font-size: 13px;
     font-weight: bold;
     color: grey;
     cursor: default;
 }


 
#menuProjets>li:hover {
    background-color: #5cadd3;
    border-bottom: 3px solid #468CAD;
}
 /* fleche dessous bouton menu projet (affichage fleche au passage sur li) */
 
 #menuProjets>li:hover .fleche {
     border-top-color: #468CAD;
 }
 
 #menuProjets>li:hover a {
     color: white;
     cursor: default;
 }

  /* on active par defaut le menu gauche suite à soutenance */
  .fleche_active {
     position: relative;
     top: 3px;
     left: calc(50% - 7px);
     width: 0;
     height: 0;
     border: 7px solid transparent;
     border-top-color: #468CAD;
     border-right-color: transparent;
     border-bottom-color: transparent;
     background: transparent;
 }
 .extremiteGauche_active {
    background-color: #5cadd3;
    border-bottom: 3px solid #468CAD;
    border-top-color: #468CAD;
    color: white;
}
.extremiteGauche_active a {
    color: white;
    cursor: default;
}
/* fin on active .. */

/* FIN menu section projets */



.portfolio {
     width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     flex-wrap: wrap;
 }
 
.portfolioImg {
     position: relative;
     margin-bottom: 30px;
     width: calc(20% - 15px);
     min-width: 200px;
     max-width: 400px;
     margin-right: 15px;
     margin-left: 15px;
     display: block;
 }
 /* images du portfolio  */
 
 .portfolioImg img {
     width: 100%;
     height: auto;
 }
 /* encart des images dans portfolio  */
 
 .encartPortfolio {
     position: absolute;
     bottom: 4px;
     left: 0px;
     margin: 0;
     width: 100%;
     height: 35%;
     background-color: rgba(0, 0, 0, 0.3);
     display: none;
 }

 
 .portfolioImg:hover .encartPortfolio {
     display: block;
 }
 
 .encartPortfolio .titre {
     color: white;
     font-size: 18px;
     font-weight: bold;
     letter-spacing: normal;
     padding-left: 10px;
 }
 
 .encartPortfolio .texte {
     color: white;
     font-size: 14px;
     font-weight: bold;
     letter-spacing: normal;
     word-spacing: normal;
     padding-left: 10px;
 }
 
 
 .cyclope {
     position: absolute;
     width: 36px;
     height: 36px;
     border: 2px solid white;
     border-radius: 100%;
     background-color: #5DAED3;
     color: white;
     right: 10px;
     top: -18px;
 }
 
 .cyclope::before {    /*pseudo-élément css3 */
    font-family: FontAwesome;
    content: "\f06e"; /* fa-eye code unicode de la font Fontawesome */
    text-decoration: none;
    color: white;
    vertical-align: -40%;
    font-size: 1em;
 }

/*FIN Container de l'ensemble portfolio section Projets */
/* Section 4 Plan + contact info */

section#contact
{
    position: relative;
    margin-top: 50px;
    width: 100%;
   
}
.maps {
    /*display: flex;
    width: 100%;*/
    height: 600px;
    
    background-image: url('../images/blue_maps.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

}
 /*
 .calquebleu {

    background-color: rgb(77, 178, 213);
    background-position: center;
    height: 600px;
    width: 100%;
    max-width: 1418px; 
    opacity: 0.2;
   position: relative;
   
 
    
}
*/
#formulaire {
    position: absolute;
    top: 10%;
    right: 10%;
    width: 315px;
    background-color: rgba(255,255,255, 0.6);
    border: 0.2px solid black;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    z-index: 2;
    border: none;

}
form textarea {
    width: 300px;
    height: 110px;
}
form #name, #email, #subject{
    padding: 0.5em;
    width: 286px;
}


/* Section 4 - bouton en css CSS-tricks*/

form input[type="submit"] 
{
   border-top: 1px solid #65a9d7;
   background: #65a9d7;
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
 
   color: white;
   font-size: 15px;
   font-family: sans-serif;
   text-decoration: none;
   vertical-align: middle;
   font-weight: bold;
}

form input[type="submit"]:hover
{
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
}

form input[type="submit"]:active
{
   border-top-color: #1b435e;
   background: #1b435e;
}


/* Media queries */
/* Sur les tablettes, quand la largeur de la fenêtre fait au maximum 991px */

@media all and (max-width: 991px)
{
    /*suppression de l'image Mac + centrage du texte */
    #contenerServiceImage{
        display: none;
    }
     #contenerServiceTexte {

     width: 100%;
 }
}

/* Téléphones mobiles et très petits écrans */

@media all and (max-width: 768px)
{
    /* passage du menu horizontal au hamburger vertical 
    header nav {
        display: none;
    }*/
    /*.nav-icon {
        display: block;
    }
    */
    header nav ul li a:hover {
    color: rgb(50,150,185);
    border-top: none;
}
    header nav ul{
        flex-direction: column;
    }        
    /* centrage du formulaire*/
    #formulaire {
        position: absolute;
        top: 10%;
        margin-right: auto;
        margin-left: auto;
        width: 80%;
    }

    form textarea {
    width: calc(92% + 12px);
    height: 110px;
    }

    form #name, #email, #subject{
        padding: 0.5em;
        width: 92%;
    }

}