@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');






/*   TYPOS UTILISÉES   */


    * 
    { 
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', sans-serif; color:#9d9d9d;
    }


body 
    {
    margin: 0;
    padding: 0;
    background-color: #292929
    }


ul{padding-left: 20px;}




.chapeau b {color: white;}


a       
    {
    text-decoration: none;
    -webkit-text-decoration: none;
    }


strong {        font-weight: bolder; color:white;
}


h1, h2, h3, h4, h5, h6 
    {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #F29400;
    }

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong 
    {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #F29400;
        font-weight: bolder;

    }


/*   FIN DE FTYPOS UTILISÉES   */



/* DÉBUT DU CSS DU NAV*/

nav {
    transform: translate(0,-5px); 
    width: 100; 
    }

ul.topnav 
    { 
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #292929;
    }

ul.topnav li 
    {
    float: left;
    }

ul.topnav li a 
    {
    display: inline-block;
    color: #f2f2f2;
    text-align: left;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
    width: 20vw;
    }

ul.topnav li a:hover 
    {
    color: #f29400;
    }

ul.topnav li.icon 
    {
    display: none;
    }





@media screen and (max-width:549px) 

{

  ul.topnav li:not(:first-child) 
    {
    display: none;
    }

  ul.topnav li.icon 
    {
    float: right;
    display: inline-block;
    }

  ul.topnav.responsive 
    {
    position: relative;
    }
  ul.topnav.responsive li.icon 
    {
    position: absolute;
    right: 0;
    top: 0;
    }
  ul.topnav.responsive li 
    {
    float: none;
    display: inline;
    }
  .responsive .menu
    {
    display: block;
    text-align: left;
    width: 60vw;
    }

  
}

/* FIN DU CSS DU NAV */



/* CSS POUR IMAGE LOGO 6PO SUR HORIZON */

#logo6po2, #logo6po3

    {
    display: none;
    }



@media screen and (min-width: 550px) and (max-width: 1240px) 

{


 #logo6po1, #logo6po3

    {
    display: none;
    }

#logo6po2

    {
    display: block;
    }



}


@media screen and (max-width: 549px) 


{

  #logo6po1, #logo6po2

    {
    display: none;
    }

#logo6po3

    {
    display: block;
    }




}





/* CSS POUR IMAGE LOGO 6PO SUR HORIZON */




    /*CSS POUR LE RECOMMANDER*/





  .adresse    
    { width: 50%             
     background: -webkit-linear-gradient(#d4d2c9, white, #d4d2c9);
     background: -o-linear-gradient(#d4d2c9, white, #d4d2c9);
     background: linear-gradient(#d4d2c9, white, #d4d2c9);
    } 

   .ok         
    { 
    width: 120%             
    background: -webkit-linear-gradient(#f29400, #ffaf30, #f29400);
    background: -o-linear-gradient(#f29400, #ffaf30, #f29400);
    background: linear-gradient(#f29400, #ffaf30, #f29400);
    } 

/*Changer la taille des bloc*/

  .Conteneurrecommander  
    {
    background-color: #292929;  
    width: 100%;
    margin: 0;
    display:flex;
    /*Autoprefixer*/
    display:-webkit-box;
    display:-ms-flexbox;

    flex-direction: row;
    /*Autoprefixer*/
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;

    }

    .recommanderTexte 
    {
    width: 80% 
    }

    .recommanderForm 
    {
    width: 20% 
    }

  .recommanderTexte p
    {
    text-align: right; padding: 10px; 
    }

    .recommanderForm form
    {
    text-align: left;
    }


  .recommanderForm table
    {
    padding: 10px;
    text-align: left;
    margin: auto
    }

  .Conteneurrecommander input 
    {
    border: 1px #d4d2c9 solid; 
    border-radius: 10px; 
    padding: 3px 15px ;
    } 

   
    form input 
    {color : #292929;}


@media screen and (min-width: 550px) and (max-width: 1240px) 

{

    .recommanderTexte 
    {
    width: 75% 
    }

    .recommanderForm 
    {
    width: 25% 
    }



}




@media screen and (max-width: 600px) 

{

  .Conteneurrecommander 
    {
    width: 100%;
    height: auto;
    
    display: flex;
    /*Autoprefixer*/
    display: -webkit-box;
    display: -ms-flexbox;    

    flex-direction: column;
    /*Autoprefixer*/
    -webkit-box-orient: vertical;    
    -webkit-box-direction: normal;    
    -ms-flex-direction: column;    

    padding-bottom: 20px
    }


    .recommanderTexte 
    {
    width: 100%; 
    }

    .recommanderForm 
    {
    width: 100%; padding: 3; 

    }

    .recommanderTexte p 
    {
    text-align: center;    
    }

    .recommanderForm form
    {
    margin: auto; text-align: center;

    }




}

/*FIN DU CSS POUR LE RECOMMANDER*/



/*CSS POUR LE FOOTER*/


  #footer a       
    {
    text-decoration: none;
    color: rgb(77,150,161);
    -webkit-text-decoration: none;
    font-size: 15px;
    }

    #footer a:hover 
    {
    color: white;
    }

  #footer p 
    {
    margin: 0;
    padding: 0;
    }

  .footerbox1, .footerbox2, .footerbox3, .footerbox4, 
    {
    margin: 0; 
    max-width: 15%;
    }

  #footer 
    { 
    background:url(images/ombreFooter.jpg)no-repeat;
    background-size: 100%;
    width:100%;
    padding: 15px;
    
    
    display: flex;
    /*Autoprefixer*/
    display: -webkit-box;    
    display: -ms-flexbox;    

    flex-direction: row;
    /*Autoprefixer*/
    -webkit-box-orient: horizontal;    
    -webkit-box-direction: normal;    
    -ms-flex-direction: row;    




    margin: 0;  
    }

  #footer .footerbox1 
    {
    flex: 2;
    /*Autoprefixer*/
    -webkit-box-flex: 2;
    -ms-flex: 2;   

    } 
  
  #footer .footerbox2 
    {
    flex: 1; 
    /*Autoprefixer*/
    -webkit-box-flex: 1;    
    -ms-flex: 1;    

    border-left: 1px solid #656565 ; 
    padding-left:1vw;
    } 
                  
  #footer .footerbox3 
    {
    flex: 1; 
    /*Autoprefixer*/
    -webkit-box-flex: 1;    
    -ms-flex: 1;

    border-left: 1px solid #656565; 
    padding-left:1vw; 
    } 
                    
  #footer .footerbox4 
    {
    flex: 1; 
    /*Autoprefixer*/
    -webkit-box-flex: 1;    
    -ms-flex: 1;

    border-left: 1px solid #656565; 
    padding-left:1vw;
    } 

  #footer .footerorange 
    {
    font-size: 15px; 
    color : #f29400;
    }
                    
  #footer .footergris 
    {
    color: #656565;
    font-size: 12px;
    }

@media screen and (min-width: 550px) and (max-width: 1240px) 

{

  .footerbox1 
    {
    flex: 1; 
    /*Autoprefixer*/
    -webkit-box-flex: 1;    
    -ms-flex: 1;
     
    margin-right: 5vw;
    } 

  #footer .footergris 
    {
      font-size: 10px;
    }


}


@media screen and (max-width: 549px) 

{

  #footer 
    {
    display: flex;
    /*Autoprefixer*/
    display: -webkit-box;
    display: -ms-flexbox;

    flex-direction: column;
    /*Autoprefixer*/
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    }

  #footer .footergris 
    {
    font-size: 13px;
    }

  .footerbox1,.footerbox2, .footerbox3, .footerbox4
    
    {
    margin-top: 2vh;
    }


}

/*FIN DU CSS POUR LE FOOTER*/



/* DÉBUT DU CSS POUR LES PICTOS  */




.galeriepicto       
    {width: 100%;text-align: center; }


.conteneurPICTO:hover .picto {    -webkit-filter: sepia(50%) blur(1px)  ;
    filter: sepia(50%) blur(1px)  ;
}
   

.picto {width: 15%;margin: 10vh 0}

.conteneurPICTO .picto:hover 
    { 
    -webkit-filter: blur(0px);
    filter:  blur(0px);
    transform: scale(1.1); 
    transition: all 0.5s; 

    }







@media screen and (min-width: 500px) and (max-width: 700px) 

{



.picto {width: 28%; margin: 2vh 0}





}




@media screen and (max-width:500px) 

{


.picto {width: 45%; margin: 2vh 0}






}







/* FIN DU CSS POUR LES PICTOS  */



/*SCC ENTREPRISE*/



.box1entreprise, .box2entreprise
    {
    height: 80%;
    }

.titreEntreprise {text-align: left; font-size: 5vw}


#contententreprise 
    {
    width: 80vw;
    display: flex;
    /*Autoprefixer*/
    display: -webkit-box;
    display: -ms-flexbox;    

    flex-direction: row;
    /*Autoprefixer*/
    -webkit-box-orient: horizontal;    
    -webkit-box-direction: normal;    
    -ms-flex-direction: row;   


    margin: 10%;
   
    transform: translate(0,-5px) 
    }

.box1entreprise 
    { 
    flex: 2;
    /*Autoprefixer*/
    -webkit-box-flex: 2;
    -ms-flex: 2;   
    
    flex-direction: column;
    /*Autoprefixer*/
    -webkit-box-orient: vertical;    
    -webkit-box-direction: normal;    
    -ms-flex-direction: column;    

    height: auto;

    margin : 20px; 
    padding: 30px;


    } 



.box2entreprise 
    {
    flex: 1;
    /*Autoprefixer*/
    -webkit-box-flex: 1;
    -ms-flex: 1;    
    margin : 20px; 

    } 


.chapeauEntreprise p, .chapeauEntreprise ul, .chapeauEntreprise strong, .chapeauEntreprise b
    {    
    color: #7f746e;
    font-size: 20px;
    text-align: left;
    }




/*   RESPONSSIVE   */





@media screen and (max-width:800px) 

{
  #contententreprise 
    {
    width: 90%;    

    display: flex;
    /*Autoprefixer*/
    display: -webkit-box;
    display: -ms-flexbox;

    flex-direction: column;
    /*Autoprefixer*/
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
            
    }


    .box1entreprise 
    { 
    padding: 0;
	}


.titreEntreprise {text-align: center; font-size: 15vw}

.chapeauEntreprise p, .chapeauEntreprise ul
    {    
    font-size: 18px;
    }


.box2entreprise .chapeauEntreprise 
    {
    font-size: 10px;
    }

}

  /* FIN SCC ENTREPRISE*/








  /*     PARTIE SERVICES    */

  
   



.fiche_complete div 
    { 
    text-align: justify;
    }


  
.chapeau 
    {    
    padding: 0 10vw 0 20vw;
    color: #7f746e;
    font-size: 20px;
    text-align: right;
    }

.PREMIER_texte 
    {
    font-size: 15px;
    padding: 5vw 10vw; 
    height: 100%
    }

.bouton_haut 
    { 
    margin:auto;
    margin-right:10vw;
    text-align: right;
    margin-bottom: 5vw;
    }

.text_bouton_haut 
    {
    color:white; 
    background: #F29400;
    padding:5px 15px;
    margin: 0;   
    border-radius: 0  0 30px 0; 
    }


.fiche_complete
    {  
    border-bottom: 5px #f29400 solid;
    margin:10vw 10vw 0 10vw;
    text-align: center;
    }

.fiche_services 
    { 
    width: 100%;
    
    display: flex;
    /*Autoprefixer*/
    display: -webkit-box;
    display: -ms-flexbox;            

    flex-direction: column;
    /*Autoprefixer*/
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    }


.fiche_galerie 
    {
    width: 100%; 
    margin: 0;
    }

.PictoFiche
	{
	margin: auto; 
	margin-top: 40px; 
	width: 20%

	}


 .OmbreFiche {width: 50%; 
    margin: 0}


.PictoPlastif {max-width :20%;margin: auto;}



/*   RESPONSSIVE   */


@media screen and (min-width: 450px) and (max-width: 1240px) 

{

    h1 
    {
    font-size: 8vw; 
    text-align: center;
    margin:0
    }

.chapeau 
    {    
    font-size: 18px;
    text-align: right;
    }
        
    .PREMIER_texte 
    {
    margin:0; 
    height: 100%
    }

}


.PictoFiche
	{
	margin-top: 20px; 
	width: 40%

	}

 .OmbreFiche 
    {
    width: 75%; 
    }

.PictoPlastif {max-width :25%;}

@media screen and (max-width:449px) 

{

h2, h3, h4, h5, h6 
    {
    text-align: left    
    }


.PictoFiche
	{
	margin: auto; 
	margin-top: 10px; 
	width: 50%
	}

 .OmbreFiche {width: 100%; 
    }

.PictoPlastif {max-width :35%;}

    .chapeau 
    {
    padding: 0 5vw ; 
    margin:0; 
    height: 100%;    
    font-size: 18px;
    text-align: left;

    }

 

    .PREMIER_texte 
    {
    padding: 5vw 5vw; 
    height: 100%;
    font-size: 13px;
    }

    .fiche_services 
    { 
    width: 100%;

    display: flex;
    /*Autoprefixer*/
    display: -webkit-box;
    display: -ms-flexbox;
    
    flex-direction: column;
    /*Autoprefixer*/
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    
    }


    .fiche_complete
    { 
    margin:5vw;
    }

    h1 
    {
    font-size: 12vw; 
    text-align: center; 
    margin-top: 5vh
    }

}





/*CSS Pour galerie de Photos
*/



    .galerie 
    {
    width: 100%;
    height: 100%;
    transform: translate(0,5px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }


.galerie img
    {
    width: 19%;
    height: 21%;
    margin-top: 1vh;
   
    }


  .galerie:hover img 
    {

 opacity: 0.2 ;




    }





    .galerie img:hover 
    {
    opacity: 1 ;


     -webkit-transform: scale(2.5);
     -moz-transform: scale(2.5);
      -ms-transform: scale(2.5);
       -o-transform: scale(2.5);
          transform: scale(2.5);




    z-index: 100;
    transition: all 1s;
    }



    .galerie .photo1:hover {-webkit-transform-origin: 0 0;     /*Autoprefixer*/
 transform-origin: 0 0;}
    .galerie .photo2:hover {-webkit-transform-origin: 50% 0;     /*Autoprefixer*/
 transform-origin: 50% 0;}
    .galerie .photo3:hover {-webkit-transform-origin: 50% 0;     /*Autoprefixer*/
 transform-origin: 50% 0;}
    .galerie .photo4:hover {-webkit-transform-origin: 50% 0;     /*Autoprefixer*/
 transform-origin: 50% 0;}
    .galerie .photo5:hover {-webkit-transform-origin: 100% 0;     /*Autoprefixer*/
 transform-origin: 100% 0;}
    .galerie .photo6:hover {-webkit-transform-origin: 0 50%;     /*Autoprefixer*/
 transform-origin: 0 50%;}
    .galerie .photo7:hover {-webkit-transform-origin: 50% 50%;     /*Autoprefixer*/
 transform-origin: 50% 50%;}
    .galerie .photo8:hover {-webkit-transform-origin: 50% 50%;     /*Autoprefixer*/
 transform-origin: 50% 50%;}
    .galerie .photo9:hover {-webkit-transform-origin: 50% 50%;     /*Autoprefixer*/
 transform-origin: 50% 50%;}
    .galerie .photo10:hover {-webkit-transform-origin: 100% 50%;     /*Autoprefixer*/
 transform-origin: 100% 50%;}
    .galerie .photo11:hover {-webkit-transform-origin: 0 100%;     /*Autoprefixer*/
 transform-origin: 0 100%;}
    .galerie .photo12:hover {-webkit-transform-origin: 50% 100%;     /*Autoprefixer*/
 transform-origin: 50% 100%;}
    .galerie .photo13:hover {-webkit-transform-origin: 50% 100%;     /*Autoprefixer*/
 transform-origin: 50% 100%;}
    .galerie .photo14:hover {-webkit-transform-origin: 50% 100%;     /*Autoprefixer*/
 transform-origin: 50% 100%;}
    .galerie .photo15:hover {-webkit-transform-origin: 100% 100%;     /*Autoprefixer*/
 transform-origin: 100% 100%;}




@media screen and (min-width: 450px) and (max-width: 1240px) 

{
    .galerie img:hover 
    {
    -webkit-transform: scale(3);       /*Autoprefixer*/
   transform: scale(3);
    }
      

}


@media screen and (max-width: 449px) 

{
    .galerie img:hover 
    {
    -webkit-transform: scale(3.4);        /*Autoprefixer*/
  transform: scale(3.4);
    }
   

    .galerie img
    {
    min-width:27vw;
    min-height: 27vw;
    margin-top: 1vh;
    }



    .galerie .photo1:hover {-webkit-transform-origin: 0% 0%;     /*Autoprefixer*/
 transform-origin: 0% 0%;}
    .galerie .photo2:hover {-webkit-transform-origin: 50% 0%;     /*Autoprefixer*/
 transform-origin: 50% 0%;}
    .galerie .photo3:hover {-webkit-transform-origin: 100% 0%;     /*Autoprefixer*/
 transform-origin: 100% 0%;}
    .galerie .photo4:hover {-webkit-transform-origin: 0% 0%;     /*Autoprefixer*/
 transform-origin: 0% 0%;}
    .galerie .photo5:hover {-webkit-transform-origin: 50% 0%;     /*Autoprefixer*/
 transform-origin: 50% 0%;}
    .galerie .photo6:hover {-webkit-transform-origin: 100% 0%;     /*Autoprefixer*/
 transform-origin: 100% 0%;}
    .galerie .photo7:hover {-webkit-transform-origin: 0% 50%;     /*Autoprefixer*/
 transform-origin: 0% 50%;}
    .galerie .photo8:hover {-webkit-transform-origin: 50% 0%;     /*Autoprefixer*/
 transform-origin: 50% 0%;}
    .galerie .photo9:hover {-webkit-transform-origin: 100% 50%;     /*Autoprefixer*/
 transform-origin: 100% 50%;}
    .galerie .photo10:hover {-webkit-transform-origin: 0% 50%;     /*Autoprefixer*/
 transform-origin: 0% 50%;}
    .galerie .photo11:hover {-webkit-transform-origin: 50% 50%;     /*Autoprefixer*/
 transform-origin: 50% 50%;}
    .galerie .photo12:hover {-webkit-transform-origin: 100% 50%;     /*Autoprefixer*/
 transform-origin: 100% 50%;}
    .galerie .photo13:hover {-webkit-transform-origin: 0% 100%;     /*Autoprefixer*/
 transform-origin: 0% 100%;}              
    .galerie .photo14:hover {-webkit-transform-origin: 50% 100%;     /*Autoprefixer*/
 transform-origin: 50% 100%;}
    .galerie .photo15:hover {-webkit-transform-origin: 100% 100%;     /*Autoprefixer*/
 transform-origin: 100% 100%;} 


}









  /*<!-- CSS PARTIE CONTACT --*/





  .box1contact, .box2contact,  
    {
    width: 100%;
    height: 100%;
    }


  .box1contact 
    {
    min-width: 250px; 
    max-width: 350px;
    }

  #coordonnees 
    {
    width: 100%;
    
    display: flex;
    /*Autoprefixer*/
    display: -webkit-box;
    display: -ms-flexbox;   
    
    flex-direction: row;
    /*Autoprefixer*/
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;    



    background: url(images/entree.jpg)no-repeat center;
    background-size: cover;
    }

  .box1contact 
    { 
    flex: 1;
    /*Autoprefixer*/
    -webkit-box-flex: 1;
    -ms-flex: 1;   

    } 
  .box2contact 
    {
    flex: 3;
    /*Autoprefixer*/
    -webkit-box-flex: 3;
    -ms-flex: 3;   
    } 



    #coordonnees a:hover 
    {
    color: #F29400;
    }





  .entree_carre 
    {
    display:none;
    }


  img 
    {
    vertical-align:middle;
    }






  /*   RESPONSSIVE   */


  #coordonnees2 
    {
    display:none;
    } 




  @media screen and (max-width:500px) 

{


  .box2contact 
    {
    display:none;
    } 

  .entree_carre 
    {
    display:block;
    }
  
  #coordonnees      
    {
    width: 100%;
   
    display: flex;
    /*Autoprefixer*/
    display: -webkit-box;
    display: -ms-flexbox;
            
    flex-direction: column;
    /*Autoprefixer*/
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    }


  .box1contact 
    {
    display:none;
    } 

  .box2contact 
    {
    display:none;
    } 


}
    /*<!-- FIN CSS PARTIE CONTACT -->*/