
@import "superslides";

@import "fontawesome/font-awesome";

iframe{
  margin:auto;
  width:100%;
  
}
.slider{

overflow:hidden;
position:relative;
width:100%;

-webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  
  li{
  position:relative;
    
  
    
    .desc{
    position:absolute;
    bottom:50px;
    right:40px;
    
    text-transform:uppercase;
    color:black;
    padding:10px 20px;
    font-size:20px;
    background:rgba(250,250,250,0.95);
    margin:0;
    }
  
    h3{
      font-weight:400;
      
      display:inline;
    }
    
    
    
    
    
    
  }
  

  
}
a{
  img{
    
    border:0;
  }
  
}
#corps.dds{
  color:#F2F2F2;
  background:rgba(40,40,40,1);
}
body{
  font-family:Lato;
  font-weight:300;
  line-height:1.62;
  text-align:justify;
  background:#F2F2F2;
  padding:0;
  margin:0;
  font-size:14px;
  color:#333333;
  
  
}

img{
  max-width:100%;
  margin-bottom:6px;
}
 
a{
  color:rgba(66,139,202,1);
  text-decoration:none;
  
  &:hover{
  color:#68b9ff;

  }
 
}

.clear{
  clear:both;
}
 
#large{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.8);
  z-index:10;

   h3{
     color:white;
     text-align:center;
     margin-top:5px;
     margin-bottom:0;
     font-weight:300;
     font-size:0.95em;
 
   }
  .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.9);
      display:block;
      margin:auto;
    }
  }
}



.rea-gal{
  padding-left:0px;

  margin-right:-5px;
  margin-bottom:-5px;
  img{
  padding-right:5px;
  padding-bottom:5px;
    width:200px;
    float:left;
    box-sizing: border-box;
    &:hover{
      opacity:0.8;
      
    }
  }
}


 





.row{

margin:auto;
//max-width:1100px;
display:block;


&:after{
content: "";
  display: table;
  clear: both;

}

.columns{


display:block;

box-sizing: border-box;
float:left;
display:inline-block;
padding:0 5px;

&:first-child{
padding-left:0px;

}
&:last-child{
padding-right:0px;

}

&.span_12{
width:100%;

}

&.span_11{
width:100/12*11;

}
&.span_10{
width:percentage(1/12*10);

}
&.span_9{
width:percentage(1/12*9);

}
&.span_8{
width:percentage(1/12*8);

}
&.span_7{
width:percentage(1/12*7);

}

&.span_6{
width:percentage(1/12*6);

}
&.span_5{
width:percentage(1/12*5);

}
&.span_4{
width:percentage(1/12*4);

}
&.span_3{
width:percentage(1/12*3);

}
&.span_2{
width:percentage(1/12*2);

}

&.span_1{
width:percentage(1/12*1);

}


}
}
.main{
width:100%;
max-width:1020px;
position:relative;
margin:auto;

}


#logo{
height:120px;
position:absolute;
right:-10px;
top:13px;
padding-top:5px;
max-width:inherit;

}
.contact{
  img{
    width:21px;
    margin-right:3px;
    position:relative;
    top:5px;
    margin-bottom:0;
  }
  
  color:#F2F2F2;
  text-align:left;
  font-size:14px;
  p{
    margin:0;
    margin-bottom:0px;
    
  }
  a{
    color:#F2F2F2;
    
  }
  
  
  
}
.top{
  position:relative;
  z-index:3;
  box-shadow:0 0 15px rgba(0,0,0,0.8);
  background-image:url("/fond-beton-5.jpg");
  .contact{
    position:absolute;
    top:60px;
    left:10px;
    
    p{
      display:inline-block;
      margin-right:20px;
      
    }
    
  }
  
}
.menu_background{
  background:rgba(20,20,20,0.7);
  
  padding-top:1px;
  text-shadow:0 0 3px black;
}
#menu{
  

font-size:14px;
a{
  margin:0;
display: inline-block;
color:#F2F2F2;
text-decoration: none;
h4{
  text-align:left;
  font-weight:400;
  font-size:16px;
  text-transform:uppercase;
  margin:0px;
  padding:0;
  line-height:1em;
  
}
line-height:1.7em;
padding: 16px 10px;
padding-bottom:20px;
margin-right:5px;
border-bottom:5px solid transparent;

&:hover, &.active{
  border-color:#666666;
  
}

&:last-child{
  padding-right:0;
  
}


}
}
.top_background{
  
  
  min-height:150px;
  ;
  
}
.dark_background{
background:rgba(40,40,40,1);
padding-top:3em;
color:#F2F2F2;
}

.gray_light_background{
background:rgba(91,92,94,1);
}


.blue_background{
background:rgba(0,162,216,1);
}

.yellow_background{
background:rgba(248,164,40,1);
}

.green_background{
background:rgba(176,201,49,1);
}

.rose_background{
background:rgba(230,0,125,1);
}
.content_center{
text-align:center;
}



.beton{
  
  border-left:17px solid #333333;
  background:url("/fond-beton.jpg") ;
  background-size:1000px;
    box-shadow:0 0 15px rgba(0,0,0,0.8);
}

h1,h2,h3,h4{
  text-align:left;
font-weight: 400;

}
h1{
  
  text-transform:uppercase;
}

.cristal-protect_menu h4{
  text-transform:none !important;
  
}
.cristal-protect{
  h1{
    text-transform:none !important;
    
  }
  
}
.bottom_image{
  position:absolute;
  bottom:-3px;
  left:0px;
  margin:0;
  
}



.bottom{
  position:relative;
  box-shadow:0 0 15px rgba(0,0,0,0.8);
  background-image:url("/fond-beton-5.jpg");
  color:#E6E6E6;
  margin-top:120px;
}
.infos{
  position:relative;
  
  border-bottom:3px solid #f39200; 
  .main{
    position:static;
    
  }
   .address{
     float:left;
     margin:20px 0;
     margin-left:550px;
     font-size:14px;
     position:relative;
     h4{
       margin:0;
       padding:0;
       text-transform:uppercase;
       text-align:left;
       font-weight:400;
     }
    
    
  }
  .contact{
    
    float:left;
    margin:20px 0;
    margin-top:24px;
    margin-left:100px;
    
    
    
    
  }
  
}
.legals{
  position:relative;
  background:#1A1A1A;
  a{
    color:#EEEEEE;
    
  }
  img{
    position:absolute;
    
    right:3px;
    height:19px;
    margin:0;
    margin-right:10px;
    
  }
  

  font-size:12px;
  padding:8px;
  
}

.cristal-protect .main.principal{
  background:url("/fond-ligne.jpg")  no-repeat;
  background-size:contain;
  
  
  
}
.close_link{
  position:fixed;
  top:10px;
  right:10px;
  width:40px;
  cursor:pointer;
  
}