@import "shared/formtastic";

// Core variables and mixins
@import "bootstrap/bootstrap";
@import "superslides";


#large{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.8);
  z-index:10;
  
  background:white;
  background:rgba(255, 255, 255, 0.98);
  .close_link{
    position:fixed;
    top:10px;
    right:10px;
    width:25px;
    cursor:pointer;
  
  }
  

   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{
      box-shadow:0 0 8px rgba(0, 0, 0, 1);
      cursor:pointer;
      
      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;
    height:150px;
  
    box-sizing: border-box;
    &:hover{
      opacity:0.8;
      
    }
  }
}


.info{
  padding:1em;
  background:white;
  border-top:10px solid #e10716;
 
  p{
    max-width:1000px;
    text-align:left;
  }
  a{
   
    
  }
  
}
a{
color:rgba(0,136,204,1);
}

.slider{
width:2000px;
height:300px;
overflow:hidden;
position:relative;
-webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  
  li{
  position:relative;
    h3{
    position:absolute;
    bottom:110px;
    right:30px;
    font-weight:400;
    font-size:2em;
    text-transform:uppercase;
    color:black;
    padding:10px 20px;
    background:rgba(250,250,250,0.95);
    margin:0;
    }
    
    p{
    position:absolute;
    bottom:50px;
    right:30px;
    font-weight:400;
    font-size:1.3em;
    margin:0;
    color:rgba(128,128,128,1);
    padding:10px 20px;
    background:rgba(250,250,250,0.95);
    }
    
    
  }
  
  #logo-miele{
  position:absolute;
  bottom:25px;
  left:40px;
  width:100px;
  z-index:2;
  margin:0;
  }
  
}

#logo-miele{

width:100px;
float:right;
margin:30px 50px;
}

.wide-container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position:absolute;
  
  .slides-pagination{
  position:absolute;
  right:40px;
  bottom:20px;
  width:auto;
  
  a{
  &.current{background:rgba(250,250,250,0.95);}
  border-color:rgba(250,250,250,0.95);
  }
  }
  
}
#logo-home{
position:absolute;
top:0;
right:0;
width:400px;
z-index:2;
}
#slider-bottom{
position:absolute;
bottom:0;
left:0;
width:300px;
z-index:2;
}

#logo{
height:90px;
margin-top:10px;
float:left;
margin-left:10px;
}

#nav-container{

background:rgba(10,10,10,1);
//box-shadow: 0px 0px 6px rgba(0,0,0,0.7);

position:relative;
clear:both;



#nav{
padding-left:12px;
text-align:right;

a{
color:rgba(250,250,250,0.7);
padding:13px 12px;
display:inline-block;
font-size:16px;
//text-transform : uppercase;
}

}

&.accueil{
height:20px;


#nav{
text-align:right;
padding-right:12px;

a{

 }

}



}

}


.header{
padding:1px 0;
height:150px; 
background:rgba(30,30,30,1)
}
body{

width:100%;
font-weight:300;
height:100%;
margin : 0px;
padding : 0px;
font-family:"Lato";
font-size:16px;
color:rgba(62,62,62,1);
//background:rgba(230,230,230,1);
}
img{

max-width:100%;
}
h1, h2, h3, h4, h5{
font-weight:400;
text-align:left;
line-height:1em;

margin: 10px 0;

}
$ratio : 1.4;
h6{
font-size: 1em;

}

h5{
font-size: 1em;

}

h4{
font-size: 1em;

}

h3{
font-size: 1.4em;
text-align:center;
max-width:720px;
margin:auto;

}

h2{
font-size: 1.7em;
text-align:center;
margin-bottom:0.62em;
}

h1{
font-size: 2em;

}
p{
max-width:700px;
margin:auto;
text-align:center;
margin-bottom:1em;
}
h2{
text-align:center;
}
#miele{
background:white;
text-align:center;
padding:2em 1em;


img{
width:150px;


}


}
.clear{
clear:both;

}

#perfect{
background:url('/miele-background.jpg') no-repeat  ;
background-size:cover;

padding:8em 1em;
text-align:center;
h2{
background:rgba(250,250,250,0.9);
display:inline-block;
padding:0.5em 1em;

}

span{
background:rgba(250,250,250,0.9);
line-height:2.7em;
padding:0.5em;


}

}

#environement,#fournisseur,#realisations, #societe, #design, #contact, #miele{
padding:4em 1em;

}

#environement{
background:url('/environement.jpg') no-repeat;
background-size:cover;
padding:8em 1em;

text-align:center;

h2{
background:rgba(250,250,250,0.9);
display:inline-block;
padding:0.5em 1em;

}

span{
background:rgba(250,250,250,0.9);
line-height:2.7em;
padding:0.5em;


}
}

#design{
background:url('/design.jpg') no-repeat 0px ;
background-size:cover;

padding:8em 1em;
text-align:center;
h2{
background:rgba(250,250,250,0.9);
display:inline-block;
padding:0.5em 1em;

}

span{
background:rgba(250,250,250,0.9);
line-height:2.7em;
padding:0.5em;


}

}
#realisations{
  background:black;
  color:white;
  text-align:center;
  
}
#societe, #contact, #realisations{
h3{
margin-bottom:1em;
line-height:1.62em;
}

}
#legals{

background:rgba(55,55,54,1);
color:white;

p{
max-width:3000px !important;
padding:1em;

}

}
.contact_form{
width:900px;
margin:auto;
margin:1em auto;
padding:2em 0;
#form{
h3, p{
text-align:left;
}

}
.label{

width:120px;
float:left;

}
input{
width:450px;
float: right;
}

.btn{
width:auto;
background:rgba(225,7,22,1);
color:white;
float:left;

}
}