$orange: #FF931E;

$blue: #2BAADA;
$dark_orange: #E94F25;
$title_font : "Lato", sans-serif;
$sans_serif_font:"Lato", Arial, sans-serif;
$serif_font : "Roboto Slab", serif;
$cursive_font : 'Galada', cursive;

@import "jquery.bxslider";

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



body{
  color: white;
  padding:0;
  font-family:lato;
  font-weight: 300;
  font-size: 20px;
  width:100%;
  margin:0;
  text-align: center;
  h2{
    text-transform: uppercase;
    font-size: 22px;
    font-weight: 300;
    margin: -20px;
  }
  h3{
    font-size: 20px;
    font-weight: 300;
  }
  p{
    font-size: 17px;
    font-weight: 300;
  }
}

//owen capital : header
#logo{
  width: 90%;
  max-width:400px;
}

#logo-technos{
  width: 90%;
  max-width:450px;
  margin-top:20px;
}

#header {
  background: url('/arbol.jpg') no-repeat center center;
  background-size:cover;
  padding: 70px;
  padding-bottom:150px;
  position: relative;
  #b1{
    position: absolute;
    display: block;
    z-index: 1;
    left: 0;
    right: 0;
    height: 250px;
    bottom: -1px;
  }
  padding-left:0;
  padding-right:0;
}

#menu{
  text-align:center;
  
  .burger{
    display:none;
  }
  
  a{
    display:inline-block;
    padding:25px 10px;
    color: white;
    font-weight: 300px;
    text-decoration: none;
  }
  position: relative;
  z-index: 2;
}

//discours début
#intro {
  position: relative;
  color: black;
  padding:80px 10px;
  p{
    font-size: 22px;
  }
  padding-bottom: 0;
  padding-top: 80px;
  
  padding-left:0;
  padding-right:0;
}

.center{
  max-width: 550px;
  margin: auto;
}

//pour la partie projets du site
#projets{
  position: relative;
  background: url('/tronc.jpg') no-repeat center center;
  background-size:cover; 
  padding: 80px;
  padding-top: 250px;
  p{
    padding:10px;
  }
  #b2{
    position: absolute;
    display: block;
    z-index: 1;
    left: 0;
    right: 0;
    height: 200px;
    top: -1px;
  }
  padding-top: 250px;
  padding-bottom: 150px;
  padding-left:0;
  padding-right:0;
}

#b1,#b2,#b3,#b4,#b5,#b6{
  width:100%;
}

.projs{
  max-width: 1000px;
  margin: auto;
  margin-top: 40px;
  .colonne{
    width: 33.33%;
    float: left;
  }
  .proj{
    max-width: 250px;
    margin: auto;
    height: 300px;
    background: white;
    color: black;
  }
  h3{
    font-weight: 300;
  }
}

.img2{
  background: url('/arbol.jpg') no-repeat center center;
  background-size: cover;
  height: 230px;
}


#res{
  color: blue;
}

#tout{
  
}

//partie vision
#vision{
  position: relative;
  background-color: white;
  padding: 100px;
  color: black;
  padding-left:0;
  padding-right:0;
  h2{
    padding-bottom: 20px;
  }
  #b3_container{
    position: absolute;
    display: block;
    z-index: 1;
    left: 0;
    right: 0;
    height: 70px;
    top: -60px;
  }
  #b3{
    position: absolute;
    display: block;
    z-index: 1;
    left: 0;
    width:100%;
    min-width:1100px;
    height: 70px;
    top: 0px;
    bottom:0;
  }
  padding-top: 120px;
}
//partie stratégie
#strat{
  #b4{
    position: absolute;
    display: block;
    z-index: 1;
    left: 0;
    right: 0;
    height: 30px;
    top: -2px;
  }
  position: relative;
  background: url('/orab.jpg') no-repeat center center;
  background-size: cover;
  padding: 120px;
  h2{
    padding-bottom: 20px;
  }
  padding-left:0;
  padding-right:0;
}

//partie presse du site
#presse{
  
  #b5{
    position: absolute;
    display: block;
    z-index: 1;
    left: 0;
    right: 0;
    height: 25px;
    top: -24px;
  }
  position: relative;
  h2{
    padding-bottom: 20px;
  }
  color: black;
  padding: 90px;
  background-color: #f2f2f2;
  padding-top: 90px;
  padding-bottom: 50px;
  padding-left:0;
  padding-right:0;
}

.presses{
  max-width: 1000px;
  margin: auto;
  .colonne{
    width: 33.33%;
    float: left;
  }
  .presse{
    max-width: 250px;
    margin: auto;
    height: 300px;
    background: white;
   
  }
}
//presse : les 3 colonnes
.img {
  background: url('/arbol.jpg') no-repeat center center;
  background-size: cover;
  height: 150px;
}

.desc{
  padding: 7px;
}


.clear{
  clear: both;
}
//partie contact
#footer{
   padding:90px 0;
  #b2{
    position: absolute;
    display: block;
    z-index: 1;
    left: 0;
    right: 0;
    height: 200px;
    top: -1px;
  }
  padding-top: 250px;
  position: relative;
  h2{
    padding-bottom: 20px;
  }
  .center{
    max-width:600px;
  }

 
  background: url('/arbol.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:12px 15px;
    font-size:15px;
    width:100%;
    border:0;
    background: transparent;
    border: 1px solid white;
    color: white;
    
    &::placeholder{
      color:white;
    }
    
    
  }
  .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;
  }
  
  
  padding-left:0;
  padding-right:0;
}

#menu_container{
  height:60px;
  
}

#menu.move_menu{
  position:fixed;
  //pour que ça prenne toute la place (que ça se colle haut, gauche, droite)
  top:0;
  left:0;
  right:0;
  background:rgba(255,255,255,0.97);
  box-shadow:0 0 10px rgba(0,0,0,0.5); // Ombre portée
  padding:0px 10px;
  a{
    color:rgba(0,0,0,0.9);
    font-size:15px;
    padding-top:15px;
    padding-bottom:15px;
  }
}




#presse{
  .center{
    max-width:900px;
  }
}
.person{
  .img{
    max-width:170px;

    background:no-repeat center center;
    background-size:cover;
    border-radius:50%;
    display:block;
    margin:auto;
  }
  
  h3{
    margin-bottom:0px;
    padding-bottom:0px;
    margin-top:8px;
    
  }
  
  .desc{
    font-size:0.85em;
  }
  
  
}
.presses{
  .colonne{
    width:25%;
  }
  padding-top:30px;
}


.group{
  padding-top:30px;
  a{
    width:50%;
    box-sizing:border-box;
    float:left;
    text-align:center;
    padding:30px;
    img{
      width:100%;
      max-width:300px;
    }
  }
}


@media screen and (max-width:800px){
  .menu_inner{
    display:none;
  }
  #menu{
    display:none;
    
    &.move_menu{
      display:block;
      
      .burger{
        text-align:right;
        padding:5px;
        padding-bottom:8px;
        font-size:25px;
        display:block;
        color:rgba(0,0,0,0.4);
      }
    }
    
    a{
      display:block;
      border-bottom:1px solid rgba(0,0,0,0.1);
    }
    
  }
  .projs .colonne{
    float:none;
    width:auto;
    padding:0px 20px;
    padding-bottom:40px;
  }
  
  .presses .colonne{
      float:none;
      width:auto;
      padding:0px 20px;
      padding-bottom:40px;
    }
  
  .center{
    padding-left:40px;
    padding-right:40px;
  }
  #header{
    padding-bottom:50px;
    #b1{
      height:100px;
    }
  }
  
  #intro{
    padding-top:60px;
    padding-bottom:0px;
    
  }
  #projets{

    #b2{
      height:90px;
    }
    padding-top:150px;
    padding-bottom:70px;
  
  }
  #footer{
    
    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%;
            
          }
}