quartz_app/app/assets/stylesheets/public.scss

$orange: #FF931E;

$blue: #2BAADA;
$dark_orange: #E94F25;
$title_font : "Montserrat", sans-serif;
$sans_serif_font:"Raleway", Arial, sans-serif;
$serif_font : "Lora", "Lato", serif;

@import "jquery.bxslider";

@import "fontawesome/font-awesome";
@import "qi_grids";
@import "popover";

body{
  font-weight: 300;
  width: 100%;
  margin: 0;
  text-align: center;
  h1{
    font-size: 20px;
    font-family: "Raleway";
  }
  h2{
    font-size: 18px;
    font-family: "Lora";
  }
  h3{
    font-size: 17px;
    font-family: "Lora";
  }
  p{
    font-size: 15px;
    font-family: "Lato";
  }
}

#header{
  width:auto;
  background: url('/fd5.jpg') no-repeat center center;
  background-size: cover;
  padding: 200px;
  position: relative;
  h1{
    position:absolute;
    bottom:90px;
    right:0;
    left:0;
    width:auto;
    color:white;
  }
  #b5{
    position: absolute;
    display: block;
    z-index: 1;
    left: 0;
    width:100%;
    height: 50px;
    bottom:0px;
  }
}

.center {

}

#logo1{
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  padding: 20px;
}

#intro{
  padding: 70px 150px;
  text-align: center;

}

#histoire{
  padding: 70px 150px;
  text-align: center;
  p{
    font-size: 20px;
    font-family: "Lora";
    font-style: italic;
  }
  .para{
    position: relative;
    padding:20px;
  }
  .center{
    position: relative;
    width: 70%;
    max-width:600px;
    margin-left: auto;
    margin-right: auto;
    #g1{
      position:absolute;
      top: -40px;
      left: -40px;
      width: 40px;
    }
    #g2{
      position: absolute;
      bottom:-40px;
      right: -40px;
      width: 40px;
    }
  }
}

#conseil{
  position: relative; 
  #b4{
    position: absolute;
    display: block;
    z-index: 1;
    left: 0;
    width:100%;
    height: 70px;
    top:0px;
  }
  #b5{
    position: absolute;
    display: block;
    z-index: 1;
    left: 0;
    width:100%;
    height: 50px;
    bottom:0px;
  }
  background: url('/fond.jpg') no-repeat center center;
  padding: 110px;
  p{
    padding: 10px 150px;
    text-align: center;
    padding-bottom: 0px;
  }
  a{
    text-decoration: none;
    color: black;
    padding: 25px 10px;
    
  }
}

.clear{
  clear:both;
}

#bois {
  position: relative;
  width: 100%;
  background: url('/bois.jpeg') no-repeat center center;
  background-size:cover;
  z-index:0;
  #b4{
    position: absolute;
    display: block;
    z-index: 1;
    left: 0;
    width:100%;
    height: 70px;
    top:0px;
  }
  #b5{
    position: absolute;
    display: block;
    z-index: 1;
    left: 0;
    width:100%;
    height: 50px;
    bottom:0px;
  }
}

#spec {
  position: relative;
  padding: 30px;
  h2{
    font-family: "Montserrat";
    strong{
      font-family: "Raleway";
    }
  }
}

#rea {
  padding: 200px;
  h2{
    font-family: "Montserrat";
    strong{
      font-family: "Raleway";
    }
  }
}


#colonnes{
  background-color: #e4e4e4;
  padding-top: 40px;
  position:relative;
  .col{
    width: 25%;
    padding:20px;
    box-sizing: border-box;//très important pour faire des colonnes
    margin:auto;
    height: 300px;
    float: left;
  }
  #b4{
    position: absolute;
    display: block;
    z-index: 1;
    left: 0;
    width:100%;
    height: 70px;
    top:0px;
  }
  #b5{
    position: absolute;
    display: block;
    z-index: 1;
    left: 0;
    width:100%;
    height: 50px;
    bottom:0px;
  }
}

#rea{
  padding: 70px 150px;
  text-align: center;
}

#footer{
  position: relative;
  #b42{
    position: absolute;
    display: block;
    z-index: 1;
    left: 0;
    height: 70px;
    top:0px;
  }
  #b4{
    position: absolute;
    display: block;
    z-index: 1;
    left: 0;
    width:100%;
    height: 70px;
    top:0px;
  }
  
  #b6{
    position: absolute;
    display: block;
    z-index: 1;
    left: 0;
    right: 0;
    height: 40px;
    top: 0px;
  }
  
  .center{
    padding:20px;
  }
  p{
    color:white;
  }

  h2{
    padding-top: 50px;
    padding-bottom: 20px;
  }
  background: url('/mont.jpg') no-repeat center center;
  background-size: cover;
  font-weight: 300;
  h2{
    color:white;
  }
  
  fieldset{
    border:0;
    padding:0;
    margin:0;
    
  }
  
  table{
    width:100%;

    border-collapse:collapse;
    td{
      padding-bottom:12px;
    }
  }
  
  input, textarea{
    box-sizing:border-box;
    padding:20px 15px;
    font-size:15px;
    border:0;
    background: transparent;
    border: 1px solid white;
    color: white; 
    width:100%;
  }
  .error{
    color:red;
  }
  .submit{
    
    max-width:100%;
    text-align:center;
    padding:12px 0;
    padding-top:0px;
    
    
  }
  
  .btn{
    border-color:white !important;
    background-color: rgba(255,255,255,0.8);
    color: rgba(0,0,0,0.8);  
    display:inline-block;
    width:auto;
    padding:10px 20px;
  }
  
}

@media screen and (max-width:800px) {
  .menu{
    float:none;
  }
  
  #b4, #b5{
    width:100%;
  }
  
  #intro{
    float: none;
    width:auto;
    padding:0;
    p{
      padding:20px;
    }
  }
  
  a{
    float:none;
    width:auto;
    padding:20px;
  }
  
  .menu{
    float:none;
    width:auto;
    padding-top:40px;
  }
  
  #header{
    position:relative;
    width:auto;
    height:300px;
    float:none;
    margin: auto;
    padding:0;
    h1{
      position:absolute;
      float:none;
      width:none;
      padding:20px;
      margin:0;
      bottom:70px;
    }
  }
  
  #colonnes{
    .col{
      float:none;
      width:auto;
      padding:0px 20px;
      padding-bottom:0px;
      height:170px;
    }
  }
  
  #rea{
    padding: 20px;
    float:none;
  }
  #conseil{
    float:none;
    width:auto;
    padding: 30px;
    margin: 0;
    p{
      padding:20px;
    }
  }
  #histoire{
    float:none;
    width: auto;
    padding:0;
    p{
      padding: 30px;
      font-size: 15px;
    }
    #g1, #g2{
      float:none;
      width: auto;
      padding:30px;

    }
  }
  #bois{
    float: none;
    width:auto;
    padding:0;
  }
  
  #spec{
    float:none;
    width:auto;
    padding:1;
    p{
      padding:20px;
    }
  }
  
  #footer{
    width:100%;
    position: relative;
    #bfoot{
      position:absolute;
      top: 0;
      left:0;
      float:none;
      width: 100%;
      padding:0;
      height:70px;
    }
    width:100%;
    table, tr, td,tbody{
      display:block;
      width:auto !important;
      padding: 5px 0 !important;
    }
    tr{
      padding:0 !important;
    }
  }
  
  .group{
    padding-top:40px;
    a{
      display:block;
      box-sizing:border-box;
      float:none;
      padding:20px 0;
      width:auto;
      
    }
  }
  
}
#b3_container{
  overflow:hidden;
}
#b1,#b2,#b3,#b4,#b5,#b6{
  position:relative;

  svg { position: absolute; top: 0; left: 0; right:0; bottom:0; width: 100%; height: 100%;}
  image{
            width:100%;
            height:100%;
            
          }
}

a{
  img{
    border:0;
  }
  
}