/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require superslides
 *= require lightSlider
 *= require jquery.bxslider

 *= require_self
 */
 
 
.sub_menu{
text-align:center;
background:rgba(31,31,31,1);
padding-top:70px !important;
a{
  color:white;
  display:inline-block;
  padding:12px 20px;
  
}  
  
}


h1{
  font-size: 40px;
  font-weight: 300;
  margin-top:20px;
  margin-bottom:10px;
  
  
}
 
h2{
  font-size: 25px;
  font-weight: 300;
  margin-top:10px;
  margin-bottom:30px;
  
  
}
 a{
 color:rgba(66,139,202,1);
 text-decoration:none;
 
 &:hover{
 color:#68b9ff;

 }
 
 }
 #slider_content{
   ul{
     margin:0;
     padding:0;
     img{
       min-width:100%;
       
     }
   }
   
   
 }
 #large{
 display:none;
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
  text-align:center;
 
 background:rgba(0,0,0,0.8);//rgba(132,187,64,0.8);
 z-index:30;

 h3{
 color:white;
 text-align:center;
 margin-top:5px;
 margin-bottom:0;
 font-weight: 400;
 font-size: 18px;
 text-transform: uppercase;
 color: black;
 padding: 4px 10px;
 background: rgba(250,250,250,0.7);
 display:inline;
 margin-top:10px;
 
 }
  .next, .prev{
  width:20px;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;


  }
  .prev{
  left:15px;
  }
  .next{
  right:15px;
  }
 
 .img_container{
 height:100%;
 width:100%;


 box-sizing: border-box;
 
   .large-img{
   cursor:pointer;
   padding:10px;
   background:rgba(250, 250, 250, 0.95);
   
   display:block;
   margin:auto;
   margin-bottom:8px;
   }
 }
 }
 body{
 font-family:Lato;
 font-weight:400;
 line-height:1.62;
 text-align:justify;
 background:#f4f6f6;
 padding:0px;
 margin:0px;
 
 overflow: scroll; height: 100%; width: 100%;
 
 }
 #rea-gal{
 //background:white;
 padding-left:5px;
 img{
 padding-right:5px;
 padding-bottom:5px;
 width:200px;
 float:left;
 
 &:hover{
 
 opacity:0.8;
 }
 }
 }
 hr{
 border:0px;
 border-bottom:1px solid rgba(250,250,250,0.6);

 }
 
 .gal{
 li{
 height:540px;
 text-align:center;
 }
 img{
 height:500px;
 margin:auto;
 }
 
 
 
 }
 
 #brainstorming{
   
   
   
   font-size:1.6em;
   text-align:center;
   
 background:url("/ardoise.jpg") fixed;
 min-height:1100px;
 background-size:cover;
 box-sizing: border-box;
 color:white;
 padding-bottom:1px;

 font-family:"felt-tip-roman";
 font-weight:normal;

 ul{
   list-style:none;
   font-size:1.6em;
   line-height:1.2em;
   li{

 
     
     
     a{
       color:white;
       
       
     }
     
   }
   
 }
 p{
 
 text-align:center;
 max-width:400px;
 float:left;
  position:relative;
  margin:1em;
 }
 .brain-title{
  margin-top:60px;
  margin-bottom:10px;
  text-align:center;
 font-size:3em;
 height:80px;

 position:relative;
 
 }
 
 }
 
 #logo{
 position:absolute;
 top:50%;
 left:100px;
z-index:100;
width:722px;
opacity:0.9;

 }
 
 
 
 #baseline{
 position:absolute;
 top:50%;
 left:100px;
z-index:100;
width:722px;
text-align:center;
padding:20px 0px;
height:60px;
img{
width:560px;
}

 }
 .slider{
 width:100%;
 height:300px;
 overflow:hidden;
 position:fixed;
 top:0;
 left:0;
 right:0;

 
 
 }
 #slider_content {
   width: 100%;


   position:absolute;

   top:0px;
   left:0px;
   right:0px;
   
   
   li{
     top:0px;
     left:0px;
     right:-10px;
     background-repeat:no-repeat;
     background-position: center center;
     background-size: cover;
     z-index:2;
     
     img{
       
       margin-top:-300px;
           vertical-align: middle;
           display: inline-block;
           float: none !important;
           max-width:inherit;
      
       
     }
     
   }
 }
 
 #test{
 
 
 -webkit-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
 }
 #menu-container{
  height:50px;
  position:absolute;
  left:0px;
  width:100%;
  z-index:11;
 }
 #main{
 position:absolute;
 z-index:10;
 width:100%;
 .center{
 margin:auto;
 max-width:1000px;
 padding:0 1em;
 
 }
 
 .infos-button{
 margin:auto;
 width:200px;
 border: 1px solid white;
 padding:1em;
 font-size:1.1em;
 cursor:pointer;
 margin-top:60px;
 margin-bottom:60px;
 }
 
 #about, #cristal-protect, #my-strat, #realisations, #contact{


 text-align:center;

 .infos{

 -webkit-transition-duration: display 5s; /* Safari */
     transition : display 5s;
 
 background:rgba(250,250,250,0.90);
 color : rgba(10,10,10, 1);
 //color:rgba(231,22,103,1);
 text-align:left;
 padding:1em 0;
 font-size:0.9em;
 margin-bottom:0px;
 
 h3{
 font-weight:500;
 }
 
 }
 .icons{

 max-width:100%;
 max-height:115px;
 
 }
 

 p{
 font-size:1.1em;
 }
 
 }
 
 #contact{

  padding-bottom:20px;
 }
 #cristal-protect, #my-strat{
 padding-bottom:0px;
 


 
 }
 .more{
 padding:0.5em 0;
 display:inline-block;

 text-align:left;
 .span{
 float:left;
 padding:0 10px;
 max-width:370px;
 
 }
 img{
 width:140px;
 margin:32px 0px;
 margin-right:20px;
 
 float:left;
 }
 }
 #realisations{
 color:white;
background:rgba(132,187,64,1);

 

 
 
 }
 #about{
 padding-top:70px;
 position:relative;
 z-index:10;
  text-align:left;
  color:white;
  background:rgba(40,40,40,1);
 h2{
 text-align:center;
 font-size:2em;
 margin-bottom:0;
 font-weight:500;
  
 }
 h3{
  margin-top:0px;
   padding-top:0px;
  padding-bottom:30px;
  text-align:center;
   font-weight:500;
   font-size:1.6em;
 }
 
 }
 #cristal-protect, #cristal-protect .more{
   color:white;
  background:#ec4585;
  
  a{
   
    color:white;
   
  }
  
 }
 #my-strat, #my-strat .more{
 background:#26B8BC;
 color:white;
 
 
 
 }
 
 
 }
 #menu{
 
 
 height:50px;
 background:rgba(0,0,0,0.9);
 text-align:right;
 font-family:Lato;
 font-weight:400;
 text-decoration:none;
 position:relative;
 z-index:4;
 top:0px;
 left:0px;
 right:0px;
// border-bottom:1px solid white;
// border-color:rgba(250,250,250,0.4);
 box-shadow:0 0 5px rgba(0,0,0,0.9);
 #logo-min{
   position:absolute;
   top:5px;
   left:10px;
   height:40px;
   display:none;
 
  z-index:100;


 }
 
 a{
 display:inline-block;
 color:rgba(250,250,250,0.9);
text-decoration:none;
font-size:16px;
padding:7px 10px;
 }
 a:last-child{
 margin-right:10px;
 
 }
 
 }
 
 #legals{
 background:rgba(0,0,0,0.8);

 text-align:center;
 color:white;
position:relative;
 font-size: 13px;
 padding: 8px;
 a{
   
   color:white;
 }
 
 img{
   position: absolute;
   right: 3px;
   height: 19px;
   margin: 0;
   margin-right: 10px;
   
 }
 }
 .clear{
 clear:both;
 
 }
 
 strong{
   
   font-weight:400;
   
 }
 
 .actu_intro{
   margin:10px 0;
  
   clear:both;
   background:#F3F2F2;
   display:block;
     font-weight:400;
   color:black;
   
   h2, .secteurs{
     margin:0;
     padding:10px;
     
   }
   h2{
     
     font-weight:400;
     font-size:18px;
     padding-bottom:0;
   }
   .img{
     height:300px;
     background:center center;
     background-size:cover;
     float:left;
     margin-right:10px;
     width:50%;
   }
   
  
   
   &:hover{
    color:black; 
    .desc{
      background:rgba(250,250,250,0.9);
      
    } 
   }
 }
 
 .top-padding{
   padding-top:100px;
 }
 #menu{
   position:fixed;
   height:70px;
   
   #logo-min{
     position:absolute;
     top:10px;
     left:20px;
     height:50px;
     display:none;

    z-index:100;


   }

   a{
   display:inline-block;
   color:rgba(250,250,250,0.9);
  text-decoration:none;
  font-size:16px;
  padding:20px 10px;
  
   }




   ul{
     display:inline;
     padding-right:20px;
     li{
       list-style:none;
       display:inline-block;
       position:relative;
       &:hover{
         ul{display:block;}
         
       }
       ul{
         display:none;
         position:absolute;
         top:60px;
         background:rgba(0,0,0, 0.8);
         padding:0;
         text-align:left;
         
         li{
           display:block;
           width:150px;
           a{
             display:block;
             padding:5px 10px;
             
           }
         }
         
       }
     }
     
     
     
   }
   
  
}


 #secteurs{
   
   .secteur{
     
     float:left;
     width:50%;

     
     
     
     .desc{
       .img2{
         height:230px;
         background:center center;
         background-size:cover;
         
         margin:-10px;
         margin-bottom:0;
         padding:0;
       }
       background:#F3F2F2;
       margin-top:10px;
       margin-left:10px;
       
       padding:10px;
       
       height:500px;
     }
   }
 }
 
 #brainstorming{
   
   img{
     height:110px;
     border:5px solid white;
     box-shadow:0 0 10px rgba(0,0,0,0.8);
     margin:10px;
   }
 }
 
 
 @media screen and (min-width: 1000px) {
   #brain_content{
   
     width:1000px;
     margin:auto;
  
     position:relative;
   
     div{
     
       position:absolute;

     

       a{
       
         position:absolute;
         transform: rotate(-5deg);
         transition-duration: 0.2s;
         &:hover{
          transform: rotate(2deg); 
           transform: scale(1.25);
         }
         &:nth-child(even){
         transform: rotate(5deg);
         
         &:hover{
          transform: rotate(-2deg); 
          transform: scale(1.25);
           
         }
         }
       }
     }
   }
 

 }