@import "public/framework/bootstrap.less";


@import "shared/formtastic.less";






@main-color : black;
@font1 :  Times, Arial, sans-serif;
@font2: Times, Arial, sans-serif;

@font_title : "Gondola SD", Arial, sans-serif;



body{
  font-family :@font1;
  
  
  #background1 {
  position: fixed;
  top: 0; left: 0; 
  height:100%;
  overflow:hidden;
  width:100%;
  	z-index: 1;
    img{
    
    position:absolute;
    top:-100px;
    }
    
  }
  
  #background {
  	background: url(/background.png) repeat 5% 5%;
  	position: fixed;
  	top: 0; left: 0; right: 0; bottom: 0;
  	z-index: 1;
    opacity:0.2;
  }

  #midground {
  	background: url(/midground.png) repeat 20% 20%;
  	position: fixed;
  	top: 0; left: 0; right: 0; bottom: 0;
  	z-index: 1;
    opacity:0.2;
  }

  #foreground {
  	background: url(/foreground.png) repeat 90% 110%;
  	position: fixed;
  	top: 0; left: 0; right: 0; bottom: 0;
  	z-index: 2;
    opacity:0.2;
  }
  
  
  #wrapper {
    height:600px;
    overflow: hidden;
  }
  
  #carousel img {
    border: none;
    display: block;
    max-width:100%;
    margin: 0px 10px;
    float: left;

  }


  ul#portfolio-filter{ 
  margin: -20px 0; 
  margin-top:0px;
  padding: 0; 
  height: 64px; 
  padding-left: 0px; 
  line-height: 64px; 
  
  li{ display: inline;margin:0px; }
  
  a{ margin-right: 15px;; padding: 0.5em 1em; text-decoration: none;border-radius:20px; }
  
  a:hover, ul#portfolio-filter a.current{ background: rgba(66,66,67,1); color: white;}
  a.current{ background: rgba(66,66,67,1); color: white; }
  
  
  }
  
  
  ul#portfolio-list{ 
  
  margin: 2em 0 0 0; padding: 0; list-style: none; 
  
  li{ max-width:180px;
    max-height:180px;display: block; float: left; 
    margin:0px;
    margin:10px;
    
  
    a{ display: block;
     
    text-align:center;
    img{
  
    max-width:180px;
    max-height:180px;
    
    }
    
    }
  }
  

  
  }


  
  
  font-size:100%;

  color:black;

  background :black ;
  .row-fluid{

  
  }
  .fond-gris{
  background :image-url("front/fond-gris.png");
  color:white;
  padding:0.5em 0;
  margin:1em 0;
  h1,h2,h3{
  color:white;
  }
  
  }
  
  .fond-bleu{
  background :image-url("front/fond-bleu.png") ;
  color:white;
  padding:1em 0;
  margin:1em 0;
  }

  #top_anchor{
    position:absolute;
    top:0px;
    left:0px;
    display:none;
  }

  
  
  
  #top{
    z-index:4;
    background :rgba(255,255,255,0.8);
    width:100%;
    height:60px;
    margin:auto;
    box-shadow:0px 0px 5px rgba(0,0,0,0.5);
    position:fixed;
  
  
    top:0px;
    left:0px;
  
    #logo{
  
      display:block;
      float:left;
      margin-top:13px;
      margin-left:20px;
      height:50px;
    }
    
    #menu_top{
      text-align:center;
      float:right;
      font-family:@font_title;
      
      .active{
        color:rgba(0,136,188,1);
        border-bottom:1px solid rgba(0,136,188,1);
      }
      margin:0px;
      margin-top:8px;
      margin-right:20px;

      text-align:center;
      padding:1px;
      a{
        display:inline-block;
        padding:2px 5px -2px 5px;
        margin-top:15px;
        color:black;
        text-decoration:none;
  
        border-bottom:1px solid rgba(234,234,234,1);


  
      }
    }
  
  
  }
  
  
  
  #accueil{
  position:absolute; 
  z-index:3;
  bottom:1em;
  right:1em;
  background:rgba(255,255,255,0.95);
  padding:1em;
  margin-left:460px;
  h3{
  margin-top:0px;
  }
  
  }
  
  
  
  
  .row-fluid{

  margin:auto;

  
  }
  

  #main{
  max-width:1060px;

  position:absolute;
  z-index:3;
  top:130px;
  left:450px;
  right:50px;
  min-height:100%;
  background:rgba(255,255,255,0.95);
  box-shadow:0px 0px 5px rgba(0,0,0,0.5);
  
  .row-fluid{
  
  margin:0 2.5%;
  width:95%;

  
  }

  
  .eight{
  
  padding:0 5em 0 3em;
  }

    
  .sidebar{
  background:#208dbb;
  }
  
  }

  
  
    .menu{
    
    .active{
    font-weight:bold;
    }
    color:white;
    h3{
    a{
    color:white;
    }
    }
      ul{
      a{
      color:white;
      
      &:hover{
        color :#00ade2;
      
      }
      }
      padding-left:1em;
      list-style-type:circle;
      }
  
    }
  
  
  
    h1 {
      color: (@main-color*30);
      font: 2.5em; 
      font-color:@font_title;
      font-weight:normal;
      letter-spacing: 0.05em;
      word-wrap: break-word;
      margin: 0.8em 0 0.6em; 
      font-family:@font_title;
      }



    h2 {
  
      font:1.8em ;
      letter-spacing: 0;
      margin: 1.3333em 0 0;
      padding: 0.3333em 0; 
      font-weight:normal;
      font-family:@font_title;
      }


    h3 {
      color: (@main-color*30);
      font: 1.125em;
      font-family:@font_title;
      margin: 1em 0 0;
      border-top: 0 none;
      font-weight:normal;
       }

    h4 {
      color: (@main-color*40);
      font: 1em;
      font-family:@font2;
      margin: 1.5em 0 0; }





    p, pre, blockquote, ul, ol, dl, figure, figcaption, table, fieldset {
      font-size: 1em;
      line-height: 1.5;
      margin: 0.5em 0; }

    hr {
      font: 2em ;
      font-color:@font2;
      text-align: center;
      margin: 1em 0 2em;
      border: 0;
      padding: 0;
      height: 0;
      clear: both;
      display: block;
      &::after {
        content: "···";
        color: (@main-color*150);
        letter-spacing: 1em;
        padding-left: 1em;
        height: 0; } }

    pre {
      margin: 0.5em 0 0.5em 1.5em;
      white-space: pre;
      white-space: pre-wrap;
      white-space: pre-line;
      word-wrap: break-word; }

    blockquote {
      color: (@main-color*60);
      font: 1em;
      font-family:@font2;
      border-left: 4px solid (@main-color*235);
      margin: 1.0667em 0 1.6em;
      padding: 0 1.6em 0 1.334em; }

    blockquote p {
      line-height: 1.6;
      margin: 0.5333em 0; }



    ul li {

      margin-left: 1.5em; }

    ul li ul li {
      list-style-type: circle; }

    ol li {
      list-style-type: decimal;
      margin-left: 1.5em; }

    li {
      ul li, ol li {
        margin: 0 0 0 1.5em; } }

  


    a {
      color: #17b;
      &:hover, &:active {
        color: #39e;
        background-color: none;
        outline: none; }
      &:link, &:visited, &:hover {
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease; }
      &:active {
        color: #b41;
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none; } }

    em {
      font: italic 1em @font1;
      a {
        font: italic 1em @font1 } }

    i, var, samp, cite, cite a {
      font: italic 1em @font1 }

    strong, b {
      color: (@main-color*30);
      font: strong 1em @font2;
      font-weight:strong;
      
       }



    small {
      font-size: 0.8125em;
      line-height: 1.2308;
      display: inline-block;
      opacity: 0.9; }

    abbr {
      font-size: 0.875em;
      line-height: 90%;
      letter-spacing: 0.0357em;
      opacity: 0.9; }

    h1 abbr, h2 abbr, h3 abbr, strong abbr {
      font-weight: 300;
      line-height: 10%;
      opacity: 1; }

    abbr[title]:hover, dfn[title] {
      border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
      cursor: help; }


    code {
      font: 0.875em "Monaco", "Courier New", Courier, monospace;
      color: #abd37f;
      &.comment {
        color: #888; } }

    kbd {
      color: (@main-color*60);
      font: normal 300 0.875em @font2;
      background-color: #fcfcfc;
      margin: 0 0.25em;
      border: 1px solid #e6e6e6;
      border-radius: 4px;
      padding: 0.1429em 0.4286em; }

    sub {
      font-size: smaller;
      line-height: 90%;
      vertical-align: sub; }

    sup {
      font-size: smaller;
      line-height: 90%;
      vertical-align: super; }

    mark {
      background-color: #fff9dd;
      line-height: 90%;
      padding: 0 0.125em; }

    ins {
      background-color: #fff9dd;
      line-height: 90%;
      padding: 0 0.125em;
      background-color: #f0f0f0; }

    del, s {
      line-height: 90%;
      text-decoration: line-through; }

    table {
      color: (@main-color*50);
      font: 300 1em @font2;
      font-variant-numeric: lining-nums tabular-nums;
      margin: 1.1429em 0;
      border-collapse: collapse;
      border-spacing: 0; }

    caption {
      color: (@main-color*60);
      font: 300 1em @font2;
      caption-side: bottom;
      padding: 1.1429em 0 0.5714em; }

    td {
      text-align: left;
      border-bottom: 1px solid #eee;
      padding: 0.2667em 1.0667em 0.2em 0;
    vertical-align: top;
     }

    th {
      text-align: left;
      border-bottom: 1px solid #eee;
      padding: 0.2667em 1.0667em 0.2em 0;
      color: (@main-color*60);
      font: 600 1em @font2;
      border-bottom-color: #ccc; }






    ol {
      &.code {
        color: (@main-color*90);
        font: 0.875em Menlo, Monaco, "Courier New", Courier, monospace;
        margin: 1.1429em 0 1.1429em 2.8571em; }
      &.code li {
        list-style: decimal-leading-zero;
        background: #f0f0f0;
        margin: 0 0 -1px 0;
        border-top: 1px solid #fff;
        padding: 0 0.5em; }
      &.code li code {
        font-size: 1em; }
     }
  
  
  
  
  
    table{
    td{
    border:1px solid black;
    }
    }
  

}