@import url('https://fonts.googleapis.com/css?family=Dosis:300,600,700|Open+Sans:300,400,700');
:root {
    --yellowish-tan: #f7f187;
    --yellowish-tan-hov: #fbf141;

    --white: #fefefe;
    --black: #000000;
    --greyish-brown: #414141;
    --black-two: #020202;
    --dark: #161628;
    --purple-brown: #231f20;
    --battleship-grey: #777783;
    --dark-blue-grey: #171f3b;
    --slate-grey: #6a6a77;
}
a, a:visited{
     color: var(--black);
 }
a, a:hover, a:focus, a:hover{
    color: var(--battleship-grey);
    text-decoration: none;
}
p a{
    color: var(--black);
    font-weight: bold;
    border-bottom: 1px solid var(--black);
}
p a:hover{
    color: var(--battleship-grey);
    border-bottom: 1px solid  var(--battleship-grey);
}
.nav>li>a {
    position: relative;
    display: block;
    padding:0
}
.icon-bar{
    background: #0f0f0f;
}
.Text-Style {
  font-family: 'Dosis', sans-serif;
  font-size: 38px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
   color: var(--white);
}
.Text-Style-2 {
  font-family: 'Dosis', sans-serif;
  font-size: 28px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.18;
  letter-spacing: normal;
  text-align: center;
   color: var(--black);
}

.Text-Style-3 {
  font-family: 'Dosis', sans-serif;
  font-size: 38px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
   color: var(--black);
}

.Text-Style-4 {
  font-family: 'Dosis', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.56;
  letter-spacing: normal;
  text-align: left;
   color: var(--black);
}
header .nav>li>a:focus, header .nav>li>a:hover {
    background-color: initial;
    color: #58585c;
}
header{
    background: #FFFFFF;
    height: 90px;
    position: fixed;
    width: 100%;
    z-index: 2000;
    box-shadow: 0px 1px 10px 0 rgba(1, 0, 0, 0.17);
}
header .menu  ul{
    list-style: none;
    margin-top: 10px;
}
header a.logo{
    padding-top: 25px;
    display: block;

}
@media (max-width: 768px) {
    header a.logo {
        padding-top: 5px;
    }
}
@media (max-width: 450px) {
    header a.logo {
        padding-top: 15px;
    }
}

header ul li a,  ul.nav>li>a{
    font-family: 'Dosis', sans-serif;
    font-size: 17px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 0.9px;
    text-align: left;
    color: var(--black);
    padding: 25px 20px 25px 5px;
    display: block;
}
header ul li a:hover header ul li a.selected{
    color: #58585c;
}
header .menu  ul li{
    display: inline-block;
    font-family: 'Dosis', sans-serif;
    font-size: 17px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 0.9px;
    text-align: left;
    color: var(--black);
 }

header .menu ul li.picto img {
    display: block;
    height: 18px;
    width: 18px;
 }
@media (max-width: 992px) {
    header ul.nav li a {
        padding: 25px 14px 25px 5px;
    }
}
@media (max-width:768px) {
    header .menu ul li:not(.picto) {
        display: block;
        width: 100%;
        margin: 10px  ;
        float: left
    }
    header .menu ul li.picto {
        margin: 10px  ;
        float: left
    }
    header .menu ul  {
        display: block;
        width: 100%;
        float: left;
    }
    header .menu   {
        background:#ffffff;
    }
    header ul.nav li a {
        padding: 10px 0 10px 15px;
    }
    header{
        height: 65px;
    }
}
header a.btn{
    margin-top: 22px;
    padding-top: 9px;
    display: block;
    max-width: 100%;
    height: 44px;
    border-radius: 22px;
    background-color: var(--yellowish-tan);
    border: solid 1.5px var(--yellowish-tan);
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 0.7px;
    text-align: center;
    color: var(--dark-blue-grey);

}
header a.btn:hover{
    background-color: #fbf141;
    border: solid 1.5px var(--yellowish-tan);
}
.fond1{
    background: url("../img/fond-1.png");
    background-repeat: no-repeat;
    background-color:#171729;
    background-position: center 57px;
    height: 425px;
}

.fond2{
    background: url("../img/fond-2.png");
    background-repeat: no-repeat;
     background-position: center center;
}
.fond3{
    background: url("../img/fond-3.png");
    background-repeat: no-repeat;
    background-color:#101020;
    background-position: center center;
}
.fond4{
    background: url("../img/fond-4.png");
    background-repeat: no-repeat;
    background-color: #171729;
    background-position: bottom center;
    height: 385px;
}

.fond4.big{
    background-image: none;
    background-position: top center;
    height: auto;
}
.fond5{
    background-color: var(--yellowish-tan);
    height: 395px;
}

.fond h1{
    margin-top: 170px;
}
.fond .btn{
    max-width: 220px;
    margin: 35px auto;
}
.fond4 h1 {
    margin-top: 25px;
}
.yellow-bg{
    padding: 70px 0;
    background-color: var(--yellowish-tan);
}

h1{
    font-family: 'Dosis', sans-serif;
    font-size: 36px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: var(--white);
}
.yellow-bg h1{
    color: var(--black);
}
h2{
    font-family: 'Dosis', sans-serif;
    font-size: 28px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.18;
    letter-spacing: normal;
    text-align: center;
    color: var(--black);
}

a.btn, input.btn{
    display: block;
    max-width: 100%;
    height: 44px;
    border-radius: 22px;
    background-color: var(--yellowish-tan);
    border: solid 1.5px var(--yellowish-tan);
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 0.7px;
    text-align: center;
    color: var(--dark-blue-grey);
    padding-top: 11px;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
a.btn:hover, input.btn:hover {
    background-color: #fbf141;
     border: solid 1.5px var(--yellowish-tan);
}
a.btn.transparent {
    background-color: transparent;
    border: solid 1.5px var(--yellowish-tan);
    color: var(--yellowish-tan);
}
a.btn.transparent:hover {
    background-color: var(--yellowish-tan);
    border: solid 1.5px var(--yellowish-tan);
    color: #000000;
}

a.btn.transparent-black {
    background-color: transparent;
    border: solid 1.5px var(--black);
    color:  var(--black);
    padding-top: 11px;
}
a.btn.transparent-black:hover {
    background-color: var(--yellowish-tan);
    border: solid 1.5px var(--yellowish-tan);
}

a.btn#code:before{
    content: "";
    display:block;
    height:20px;
    width:20px;
    background-size: 20px 20px;
    background-image: url("../img/github.svg");
    background-repeat: no-repeat;
    float: left;
    margin-top: 0px;
    margin-left: 5px;
}
div.spacer{
    width: 100%;
    height: 25px;
}
div.spacer.big{
  height: 50px;
}
.bloc-home {
    border-radius: 10px;
    box-shadow: 0px 1px 10px 0 rgba(1, 0, 0, 0.17);
    background-color: var(--dark);
    border: solid 8px #ffffff;
    margin-bottom: 15px;
}
.bloc-home:hover{
    border: solid 8px var(--yellowish-tan);
     cursor: pointer;
}
.bloc-home a{
    display: block;
    padding: 35px 0 15px;
}
.bloc-home.tall a{
    padding: 90px 0 50px;
}
.bloc-home.middle a{
    padding: 30px 58px 0px;
}
@media (max-width: 776px) {
    .bloc-home.tall a, .bloc-home.middle a{
        padding: 35px 0 15px;
    }
}
.bloc-company {
    border-radius: 10px;
    border: solid 8px rgba(0, 0, 0, 0);
    background-color: var(--light);
    margin-bottom: 15px;
    padding: 25px 10px;
}
.bloc-company:hover{
    border: solid 8px var(--yellowish-tan);
    box-shadow: 0px 1px 10px 0 rgba(1, 0, 0, 0.17);
    cursor: pointer;
}
.bloc-company a img{
    margin: auto;
}
.icon-content{
    text-align: center;
    color: #ffffff;
     font-family: 'Open Sans',sans-serif;
    font-size: 24px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.08;
    letter-spacing: normal;
    display: none;
 }
.icon-content img {
    margin-bottom: 25px;
}
.yellow{
    background: var(--yellowish-tan);
}
.little-spacing{
    height: 4px;
}
.mid-yellow{
     background: linear-gradient(to left,  var(--yellowish-tan) 50%, #ffffff 50%);
}
.mid-yellow h2{
    font-family: 'Dosis', sans-serif;
    font-size: 38px;
    font-weight: 300;
    text-align: left;
    color: var(--black);
}
.mid-yellow p {
    font-family: 'Open Sans',sans-serif;
    font-size: 16px;
    line-height: 1.56;
    text-align: left;
    color: var(--black);
    margin-bottom: 20px;
}
.mid-yellow .item:first-child{
    padding-right: 50px;
}
.mid-yellow .item:last-child{
    padding-left: 100px;
}
a.picto-btn{
    display: block;
    height: 44px;
    width: 44px;
    border:solid 1px var(--black);
    text-align: center;
    border-radius: 25px;
    padding: 12px;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    float: left;
    margin-right: 15px;
}
a.picto-btn:hover{
    background: #58585c;
}
a.picto-btn img{
    display: block;
    height: 18px;
    width: 18px;
}
footer{
    padding: 20px 0 ;
}
@media (max-width:992px){
    .mid-yellow{
        background: #ffffff;
    }
    .mid-yellow .item:first-child{
        background: #ffffff;
    }
    .mid-yellow .item:last-child{
        background: var(--yellowish-tan);
        margin: 0 -30px;
        padding: 45px;
    }
}
@media (max-width:768px) {
    h1{
        font-size:30px
    }
    h2{
        font-size:24px
    }
    .mid-yellow{
        background: #ffffff;
    }
    .mid-yellow .item:first-child{
        background: #ffffff;
    }
    .mid-yellow .item:last-child{
        background: var(--yellowish-tan);
        margin: 0 -30px;
        padding: 45px;
    }
    .fond1{
        height: auto;
    }
}

.petit-titre {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: var(--battleship-grey);
    font-family: 'Open Sans', sans-serif;
    margin: auto;
    margin-top: 140px;
}
.trait {
    width: 45px;
    height: 2px;
    background-color: var(--slate-grey);
    margin: auto;
    margin-top: 10px;
}

.team-intro {
    margin-top: 70px;
}
.team-intro h2 {
    color: var(--black);
    font-size: 36px;
    font-family: 'Dosis', sans-serif;
}
.team-intro-txt {
    font-size: 18px;
    line-height: 1.56;
    font-family: 'Open Sans', sans-serif;
    padding-top: 25px;
    color: var(--black);
}
.team-intro-txt ul {
    padding: 20px;
}
.team-intro-txt ul li {
    margin: 10px 0;
}
.locations {
    margin-top: 75px;
}
.portraits {
    margin-top: 75px;
}
.portraits h3, .fiche h3 {
    font-size: 20px;
    font-family: 'Dosis', sans-serif;
    color: #0e0e0e;
    line-height: normal;
    margin-top: 30px;
    margin-bottom: 0;
}
.portraits h3 a {
    font-weight: bold;
    color: #0e0e0e;
}
.portraits p, .fiche p {
    margin-top: 10px;
    color: #0e0e0e;
    font-size: 16px;
}
.fiche .description {
    padding: 50px;
    font-size: 18px;
}

.portraits .portrait,.portraits .portrait-bis {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 1px 10px 0 rgba(1, 0, 0, 0.17);
    padding: 10px;
    margin-bottom: 25px;
    min-height: 490px;
}
.portraits .portrait-bis div:first-child:hover {
    cursor: pointer;
}
.portraits .portrait-bis a.avatar {
    display: block;
    width: 166px;
    height: 166px;
    border-radius: 50%;
    overflow: hidden;
    margin: -86px auto 0;
}
.avatar {
    filter: grayscale(1);
}
.portraits .portrait-bis div:first-child:hover a.avatar{
    border: solid 3px var(--yellowish-tan);
    padding: -6px;
}
.portraits .portrait-bis div:first-child:hover a.avatar img{
    margin: -3px;
}
.portraits .portrait-bis div:first-child:hover img.fleche {
    content:url("../img/fleche-droite-jaune.svg");
}
.owl-carousel .portrait {
    min-height: 360px;
 }
.portraits .portrait:hover {
    border: solid 3px var(--yellowish-tan);
    padding: 7px;
    cursor: pointer;
}
.portraits .portrait:hover img.fleche {
    content:url("../img/fleche-droite-jaune.svg");
}
.portraits .haut-portrait {
    background-color: var(--yellowish-tan);
    height: 119px;
}

.portraits img.fleche {
    width: 25px;
    margin-top: 18px;
}

.portraits .reseau {
    margin-top: 50px;
}
.portraits img.twi-gith {
    width: 18px;
    margin: 0 4px;
}
@media (max-width: 991px) {
    .portraits .portrait {
        margin-top: 40px;
    }
}
@media (max-width: 475px) {
    .fond4 {
        height: auto;
    }
    .fond4 h1 {
        padding: 30px;
    }
}

.fleche-retour {
    margin-top: 135px;
}
.fleche-retour a span {
    font-size: 16px;
    font-weight: 600;
    color: var(--black);
    font-family: 'Dosis', sans-serif;
    margin-left: 10px;
    line-height: normal;

}
.fleche-retour.y a span{
    color: var(--yellowish-tan);
}
.fleche-retour.y a:hover span{
    color: var(--yellowish-tan);
}
.fleche-retour.y a img{
    fill: var(--yellowish-tan);

}
.fleche-gauche {
    width: 25px;
}
.fiche {
    background-color: #ffffff;
    box-shadow: 0px 1px 10px 0 rgba(1, 0, 0, 0.17);
    border-radius: 10px;
    margin-top: -150px;
    padding: 10px;
}

.fiche .reseau {
    margin-top: 25px;
}
.fiche img.twi-gith {
    width: 18px;
    margin: 0 4px;
}
pre  { background: #272822; color: #f8f8f2 }
div.md h1 img{
    display: none;
}
div.md p:first-of-type{
    display: none;
}
div.md {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.56;
    letter-spacing: normal;
    text-align: left;
    color: var(--black);
}
div.md code {
    color: var(--black);
    font-weight: bold;
    background-color:initial;
}
div.md h2 {
     font-family: 'Dosis', sans-serif;
     font-size: 20px;
     font-weight: bold;
     font-style: normal;
     font-stretch: normal;
     line-height: 1.65;
     letter-spacing: normal;
     text-align: center;
     color: var(--black);
     margin-top: 50px;
     margin-bottom: 35px;
}
div.md pre {
    padding: 25px;
}
 div.md pre code {
     color: #f8f8f2;
     font-size: 16px;
 }
 #tag{
     font-size: 20px;
     font-family: 'Dosis', sans-serif;
     font-weight: bold;
     font-style: normal;
     font-stretch: normal;
     line-height: 1.65;
     letter-spacing: normal;
     text-align: center;
     color: #ffffff;
 }
 .p-head img{
     margin: 50px 0;
 }
 #tag2{
     font-family: 'Dosis', sans-serif;
     font-size: 38px;
     font-weight: 300;
     font-style: normal;
     font-stretch: normal;
     line-height: normal;
     letter-spacing: normal;
     text-align: center;
     color: #ffeaea;
 }

div.md table th, div.md table td {
    padding: 6px 13px;
    border: 1px solid #dfe2e5;
}
div.md table tr:nth-child(2n) {
     background-color: #f6f8fa;
 }

h3.secondaire {
    font-family: 'Dosis', sans-serif;
    font-size: 20px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.65;
    letter-spacing: normal;
    text-align: center;
    color: var(--black);
}

.project-category {
    max-width: 1200px;
    margin: auto;
    margin-bottom: 60px;
}

.owl-item {
    min-height: 360px;
}
.grey-bg {
    background-color: #f4f4f4;;
}

.bloc-contact {
    border-radius: 10px;
    box-shadow: 0px 1px 10px 0 rgba(1, 0, 0, 0.17);
    background-color: #FFFFFF;
    border: solid 8px #ffffff;
    padding: 0;
    margin-bottom: 33px;
}
form.contact-form{
    padding: 35px 25px ;
}
form.contact-form label{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 0.7px;
    text-align: left;
    color: var(--black);
    width: 100%;
    display: block;
    padding-left: 15px;
}

form.contact-form input:not([type="submit"]),form.contact-form textarea{
    border-radius: 22px;
    background-color: #FFFFFF;
    border: solid 1px #a0a0a0;
    height: 44px;
    padding: 5px 15px;
    width: 100%;
}
form.contact-form input[type="submit"]{
    width: 100%;
    max-width: 100%;
    padding-top: 5px;
    margin-bottom: 0;
}

form.contact-form textarea{
    height: 95px;
}
textarea:focus, input:focus{
    outline: none;
}
.bloc-contact p{
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: var(--black);
    margin: 33px 0   ;
}
.bloc-contact img{
    margin: 20px 0 ;
}
.os-section img{
    max-width: 100px;
    margin: 45px auto;
    max-height: 74px;
    width: 100%;
    display: block;
}
.post-card {
    border-radius: 10px;
    box-shadow: 0px 1px 10px 0 rgba(1, 0, 0, 0.17);
    padding: 10px;
}

.post-card:first-child {
    margin-top: 33px;
}

.post-card:hover {
    box-shadow: none;
}

.post-image {
    min-width: 280px;
    max-width: 280px;
    padding: 10px;
}

.post-image > img {
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    filter: grayscale(1);
}

@media (min-width: 768px) {
    .post-image {
        display: table-cell;
        vertical-align: middle;
    }
    .post-card {
        height: 300px;
    }
}
.post-summary {
   font-size: 20px;
}
.post-title h2 {
   text-align: left;
}
.post-authors {
   color: gray;
   font-style: italic;
}
.post-date {
   color: gray;
}
.post-description {
   margin: 14px;
   overflow: hidden;
}