pendragon_app/app/assets/stylesheets/public.scss

$orange: rgba(251,163,58,1);

@import "jquery.bxslider";

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

@import "public/menu_item_link_contents";
@import "public/menus";
@import "public/slippry";
@import "public/timeline";
@import "public/articles";
@import "public/bottom";
@import "public/dons";
@import "public/press_release";

@import "public/flexslider";
@import "public/label";

@import "shared/formtastic";
@import "bootstrap/bootstrap";

$blue :#568196;

.clear{
  clear:both;
}

body{
  font-family:"raleway", Arial, sans-serif;
  
  line-height:1.4em;
  text-align:left;
  font-weight:300;
  padding:0;
  margin:0;

  background:white;
  font-size: 16px;
  line-height: 22px;
  color: #8d8d8d;
  font-weight: 300;
  
  
}
.center{
  max-width:900px;
  margin:auto;
}

h1,h2,h3{
  text-transform:uppercase;
  font-weight:normal;
  color:$blue;
  
}
.top{
  height:100px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.11);
  background:white;
  
  position:relative;
  z-index:2;
  #logo{
    margin:25px;
    height:50px;
  }
  .menu{
    float:right;
    
    font-weight:bold;
    text-transform:uppercase;
    font-size:13px;
    padding-right:15px;
    
    a{
      color:#696969;
      text-decoration:none;
      display:inline-block;
      padding:0 10px;
      line-height:100px;
      
      &.active, &:hover{
        color:$blue;
        
      }
      
    }
    ul{
      display:inline;
      li{
        display:inline;
      }
    }
    
    
  }
}

.bottom{
  
  padding: 20px 10px 10px;
  background-color: #3d4c53;
  font-size:0.9em;
  position:relative;
  #certif{
    width:300px;
    position:absolute;
    bottom:0;
    right:0;
    
  }
  .logo{
    height:50px;
  }
  #contact_card{
    
    height:150px;
  }
  p{
    margin-top:0;
    color:white;
  }
}

.menu_item_top{
  background:center center no-repeat;
  background-size:100%;
  background-size:cover;
  min-height:450px;
  position:relative;
  margin-bottom:30px;
  h1{
    color:white;
    position:absolute;
    bottom:50px;
    right:20px;
    left:20px;
    text-align:center;
  
    
  }
  &.principal{
    
    //min-height:600px;
  }
}

#home_slider{
  
  
  .inner{
    background:black center center no-repeat;
    background-size:100%;
    background-size:cover;
    overflow:hidden;
   
   
  }
}
#slider_bottom{
  position:relative;
  
  height:55px;
  background:#5d5d5d;
  
  
  .bouvier-signa{
    position:absolute;
    bottom:10px;
    height:35px;
    left:10px;
    z-index:100;
  }
  .certif{
    position:absolute;
    z-index:100;
    bottom:2px;
    width:230px;
    right:0px;
    
    
    &:hover{
      opacity:1;
    }
    
  }
  
}

.q_counter_holder{
  text-align:center;
  
  p{
    margin-top:10px;
  }
  
}

.socials_links{
  text-align:right;
  margin-right:10px;
  position:absolute;
  right:10px;
  top:20px;
  a, .top_link{
    display:inline-block;
    padding:10px 0px;
    text-align:center;
    width:45px;
    color:white;
    border: 2px solid white;
    margin:10px 5px;
    cursor:pointer;
    &:hover{
      background:white;
      color:white;
      
    }
  }
  .top_link{
  
    //display:inline;
  }
}

.tag-gal{
  .element{
    float:left;
    width:16%;
    margin:2%;
    text-align:center;
    min-height:230px;
  }
  img{
    width:100%;
    border-radius:50%;
    
  }
  p{
    margin:0;
  }
  
}
.realisation_list{
  padding-left:0px;

  margin-right:-25px;
  margin-bottom:-25px;
.realisation{
  padding-right:25px;
  padding-bottom:25px;
    width:33%;
    float:left;
    box-sizing: border-box;
  
  .img{
    height:250px;
    overflow:hidden;
    width:100%;
    background: no-repeat center center;
    background-size:100%;
    background-size:cover;
  }
  color:#8d8d8d;
}}

.contact_form{

  padding-bottom:2em;
#form{
h3, p{
text-align:left;
}

}
.label{
  font-weight:normal;
width:120px;
float:left;

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

.btn{
width:auto;
background:#dd7425;
border:2px solid #dd7425;
border-radius:0;
color:white;

text-transform:uppercase;
padding:10px 20px;
&:hover{
  color:#dd7425;
  background:white;
  
  
  
  
}
float:left;

}
}

.article_large{
  
  .date{
    width:25%;
    float:left;
    border-right:1px solid #8d8d8d;
    text-align:right;
    margin-top:20px;
    box-sizing:border-box;
    padding-right:20px;
    min-height:240px;
  }
  .description{
    
    margin-left:25%;
    padding-left:20px;
    p{
      max-width:70%;
    }
  }
}

#articles{
  margin-bottom:100px;
  margin-top:40px;
}

.langs{
  position:absolute;
  top:5px;
  right:10px;
  ul, li{
    display:inline;
    padding:0;
    margin:0;
  }
}

.row{
  margin:0;
}


@media screen and (max-width:1000px) {
  
  
  .top{  
    #logo{
      margin-bottom:0;
    }
    text-align:center;
    height:auto;
    ul{
      margin:none;
    }
    .menu{
    float:none;
    width:auto;
    text-align:center;
      a{
    
      
      }
    }}
  
  
}



@media screen and (max-width:600px) {
  
  
  .top{  
    
    height:auto;
    ul{
      margin:none;
    }
    .menu{
    float:none;
    width:auto;
      a{
        line-height:1.5em;
        padding:10px;
        display:block;
      }
    }}
  
  
}