new_ads_app/app/assets/stylesheets/application.scss

/*
 * 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
 */
 
 a{
 color:rgba(66,139,202,1);
 text-decoration:none;
 
 &:hover{
 color:#68b9ff;

 }
 
 }
 
 #large{
 display:none;
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:rgba(156,200,102,1);//rgba(132,187,64,0.8);
 z-index:10;
padding:50px;
box-sizing: border-box;
.next, .prev{
width:20px;
position:absolute;
top:50%;
transform:translateY(-50%);
cursor:pointer;


}
.prev{
left:15px;
}
.next{
right:15px;
}
 .large-img{
 cursor:pointer;
 max-height:100%;
 max-width:100%;

 display:block;
 margin:auto;
 }
 
 }
 body{
 font-family:Lato;
 font-weight:300;
 line-height:1.62;
 text-align:justify;
 background:#f4f6f6;
 
 }
 #rea-gal{
 //background:white;
 padding-left:5px;
 img{
 padding-right:5px;
 padding-bottom:5px;
 width:200px;
 float:left;
 
 &:hover{
 
 opacity:0.8;
 }
 }
 }
 .infos{
 h3{
 margin-top:5px;
 
 }
 .samples{
 min-width:400px;
 width:50%;
 float:right;
 
 }
 
 }
 
 
 .gal{
 li{
 height:390px;
 text-align:center;
 }
 img{
 height:350px;
 margin:auto;
 }
 
 
 
 }
 
 #brainstorming{
 background:url("/ardoise.jpg");
 height:800px;
 box-sizing: border-box;
 color:white;
 padding:1px;

 font-family:Felt Tip Roman;
 #myCanvas{

 
 }
 p{
 font-size:1.6em;
 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:2000px;
 height:300px;
 overflow:hidden;
 position:fixed;
 -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   transform-style: preserve-3d;
 
 
 }
 .wide-container {
   width: 110%;
   height: 110%;
   margin: 0 auto;
   position:absolute;
   top:-10px;
   left:-5%;
 }
 
 #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%;
 }
 #main{
 position:absolute;
 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{
 padding:50px 0;
 background:white;
 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;
 
 }
 
 h2{
 font-size:40px;
 font-weight:300;
 margin-top:0;
 }
 p{
 font-size:1.1em;
 }
 
 }
 
 #contact{
 
 padding-bottom:0px;
 }
 #cristal-protect, #my-strat{
 padding-bottom:0px;
 
 .infos{

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

 text-align:left;
 ul{
 margin-left:120px;
 }
 img{
 width:100px;
 margin:40px 10px;
 
 float:left;
 }
 }
 
 }
 .clear{
 clear:both;
 
 }
 #realisations{
 color:white;
background:rgba(132,187,64,1);

 
 padding:0px;
 padding:55px 0px;
 position:relative;
 
 h2{
 background:rgba(132,187,64,0.9);
 position:absolute;
 top:70px;
 padding:10px 20px;
 z-index:2;
 font-size:1.5em;
 
 }
 
 
 
 }
 #about{
 padding-top:70px;
  text-align:left;
 h2{
 text-align:center;
 font-size:2em;
 padding-bottom:30px;
 }
 
 }
 #cristal-protect, #cristal-protect .more{
   color:white;
  background:rgba(231,22,103,1);
  
 }
 #my-strat, #my-strat .more{
 background:rgba(103,184,186,1);
 color:white;
 
 }
 
 
 }
 #menu{
 
 
 height:50px;
 background:rgba(0,0,0,0.9);
 text-align:right;
 font-family:Lato;
 font-weight:200;
 text-decoration:none;
 position:relative;
 z-index:4;
 top:0px;
 left:0px;
 right:0px;
 #logo-min{
 position:absolute;
 top:4px;
 left:10px;
 height:35px;
 display:none;
 
z-index:100;

 }
 
 a{
 display:inline-block;
 color:rgba(250,250,250,0.9);
text-decoration:none;
font-size:18px;
padding:5px 10px;
 }
 a:last-child{
 margin-right:10px;
 
 }
 
 }