
<br/>
(image: 002.jpg)
(image: 01.jpg)
(image: 02.jpg)
(image: 03.jpg)
(image: 04.jpg)
(image: 05.jpg)
(image: 06.jpg)
(image: 07.jpg)
(image: 08.jpg)
(image: 09.jpg)
(image: 10.jpg)
(image: 11.jpg)
(image: 12.jpg)
(image: 13.jpg)
(image: 14.jpg)
(image: 15.jpg)
(image: 16.jpg)
(image: 17.jpg)

<br/>/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :)
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; */


/* currently ems cause chrome bug misinterpreting rems on body element
  line-height: 1.6;
  font-weight: 400;
  font-family: "IBM Plex Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }


*/


/*Header/Footer
-------------------------------------------------- */

::selection {
    color: #fff;
    background: #6DA1C0;
}

body {
    background-color: #FFFFFF;
    max-width: 1500px;
    margin: 0 auto !important;
}

-------------------------------------------------- */ *,
*:before,
*:after {
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ul {
    -webkit-padding-start: 0px;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

p {
    margin: 2%;
}


.nom p {
    font-size: 1.0em;
    line-height: 1.9em;
    font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
}


#marge {

    margin-top: 100px;


}

.years h2 {
text-align: center;
margin-top: -40px;
    margin-bottom: 40px;
}

.years img{
  margin: auto;
}

@media screen and (min-width: 450px) {
    #marge {

        margin-top: 120px;
    }


}

@media screen and (min-width: 850px) {
    #marge {

        margin-top: 140px;
    }

  
}

@media screen and (min-width: 1200px) {
  

main {
      margin-left: 4%;
    }
  

}

.margin {
    padding-bottom: 5em;
}


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 0px;
    padding-top: 0px;
    box-sizing: border-box;
}

.column,
.columns {
    width: 100%;
    float: left;
    box-sizing: border-box;
}

.header {
    width: 100%;
    text-align: center;
    position: fixed;
    max-width: 1500px;
}


/* For devices larger than 400px */

@media (min-width: 400px) {
    .header {
        text-align: center;
        position: fixed;
        width: 100%;
    }
    .container {
        width: 100%;
        padding-bottom: 0px;
        padding-top: 0px;
    }
}


/* For devices larger than 850px */

@media (min-width: 850px) {
    .header {
        position: fixed;
        width: 95%;
    }
    .container {
        width: 95%;
    }

    .column,
    .columns {
        margin-left: 1%;
        margin-right: 1%;
    }
    .column:first-child,
    .columns:first-child {
        margin-left: 1%;
        margin-right: 1%;
    }

    .one.column,
    .one.columns {
        width: 4.66666666667%;
    }
    .two.columns {
        width: 13.3333333333%;
    }
    .three.columns {
        width: 22%;
    }
    .four.columns {
        width: 30.6666666667%;
    }
    .five.columns {
        width: 39.3333333333%;
    }
    .six.columns {
        width: 48%;
    }
    .seven.columns {
        width: 56.6666666667%;
    }
    .eight.columns {
        width: 65.3333333333%;
    }
    .nine.columns {
        width: 74.0%;
    }
    .ten.columns {
        width: 82.6666666667%;
    }
    .eleven.columns {
        width: 91.3333333333%;
    }
    .twelve.columns {
        width: 100%;
        margin-left: 0;
    }
    .one-third.column {
        width: 30.6666666667%;
    }
    .two-thirds.column {
        width: 65.3333333333%;
    }

    .one-half.column {
        width: 48%;
    }

    /* Offsets */
    .offset-by-one.column,
    .offset-by-one.columns {
        margin-left: 8.66666666667%;
    }
    .offset-by-two.column,
    .offset-by-two.columns {
        margin-left: 17.3333333333%;
    }
    .offset-by-three.column,
    .offset-by-three.columns {
        margin-left: 26%;
    }
    .offset-by-four.column,
    .offset-by-four.columns {
        margin-left: 34.6666666667%;
    }
    .offset-by-five.column,
    .offset-by-five.columns {
        margin-left: 43.3333333333%;
    }
    .offset-by-six.column,
    .offset-by-six.columns {
        margin-left: 52%;
    }
    .offset-by-seven.column,
    .offset-by-seven.columns {
        margin-left: 60.6666666667%;
    }
    .offset-by-eight.column,
    .offset-by-eight.columns {
        margin-left: 69.3333333333%;
    }
    .offset-by-nine.column,
    .offset-by-nine.columns {
        margin-left: 78.0%;
    }
    .offset-by-ten.column,
    .offset-by-ten.columns {
        margin-left: 86.6666666667%;
    }
    .offset-by-eleven.column,
    .offset-by-eleven.columns {
        margin-left: 95.3333333333%;
    }

    .offset-by-one-third.column,
    .offset-by-one-third.columns {
        margin-left: 34.6666666667%;
    }
    .offset-by-two-thirds.column,
    .offset-by-two-thirds.columns {
        margin-left: 69.3333333333%;
    }

    .offset-by-one-half.column,
    .offset-by-one-half.columns {
        margin-left: 52%;
    }
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.videoWrapperx4 {
    position: relative;
    padding-bottom: 40%;
    /* 16:9 */
    padding-top: 5px;
    height: 0;
}

.videoWrapperx4 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 40%;
}

.videoWrapperleft {
    float: left;
}

.videoWrapperright {
    float: right;
}

.videoWrapper2 {
    position: relative;
    padding-bottom: 55%;
    /* 9:16 */
    padding-top: 25px;
    height: 0;
}

.videoWrapper2 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 70%;
}

#containerrotate {

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */

p {
    font-size: 1.0em;
    font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
    line-height: 1.3em;
       -webkit-margin-before: 0.2em;
    -webkit-margin-after: 0.2em;
}

#projtitle {
    font-size: 1.0em;
     margin: 2%;
}

h1 {
    font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: normal;
}

h2 {
    font-size: 1.0em;
    font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: normal;
}

h4 {
    font-size: 1.0em;
    line-height: 1.6em;
    letter-spacing: 0;
    font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: normal;
}

h5 {
    font-size: 1.0em;
    line-height: 1.6em;
    letter-spacing: 0;
    font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
    font-weight: normal;
    -webkit-margin-before: 1.0em;
    -webkit-margin-after: 1.0em;
}

h6 {
    font-size: 0.9em;
    line-height: 1em;
    letter-spacing: 0;
    font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
    font-weight: normal;
}


/*h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 0.5; letter-spacing: -.08rem; }
h5 { font-size: 1.0rem; line-height: 1.3;  letter-spacing: -.05rem; }*/


/* Larger than phablet */

@media (min-width: 550px) {
    p {
        font-size: 1.0em;
        font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
        line-height: 1.3em;
    }
    #projtitle {
        font-size: 1.0em;
        line-height: 1.6em;
    }
    h1 {
        font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
        text-transform: uppercase;
    }
    h2 {
        font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
        text-transform: uppercase;
        font-weight: normal;
        font-size: 1.0em;
    }
    .years h2 {
        font-size: 1.0em;
        min-height: 40px;
        font-weight: normal;
        -webkit-margin-before: 0em;
        -webkit-margin-after: 0em;

margin-top: -40px;
margin-bottom: 40px;

    }
    h4 {
        font-size: 1.0em;
        line-height: 1.6em;
        letter-spacing: 0;
        font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
        text-transform: uppercase;
    }

    h5 {
        font-size: 1.0em;
        line-height: 1.6em;
        font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
        font-weight: normal;
        -webkit-margin-before: 1.0em;
        -webkit-margin-after: 1.0em;
    }

    h6 {
        font-size: 0.9em;
    line-height: 1em;
        font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
        font-weight: normal;
    }
}


/*
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 1.4rem; }*/


/* Links
-------------------------------------------------- */

a {
    text-decoration: none;
}


/* unvisited link */

a:link {
    color: #323C42;
}


/* visited link */

a:visited {
    color: #323C42;
}


/* mouse over link */

a:hover {
    color: #6DA1C0;
}


/* selected link#58CEF5 */

a:active {
    color: #6DA1C0;
}

ul {
    text-decoration: none;
    display: inline;
}

li {
    text-decoration: none;
    margin-bottom: 0.5rem;
    list-style: none;
    display: inline;
}


/* Pix
-------------------------------------------------- */

img {
    display: block;
    max-width: 100%;
}


/* Navigation
-------------------------------------------------- */

.header {
    top: 0;
    margin: auto;
    background-color: #FFFFFF;
    z-index: 5;
    
    padding-bottom: 10px;
}

.header:after {
    content: "";
    display: table;
    clear: both;
}

.submenuwrap {
    margin-bottom: 50px;
    margin-top: 25px;

}

.menu {
    font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
    font-size: 1.0em;
    line-height: 1.6em;
    list-style: none;
    text-align: center;
}

.menu .active {
    color: black;
}

.projet-submenu {
    font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
    font-size: 0.9em;
    text-decoration: none;
    line-height: 1.0em;

}


.submenu {
    position: absolute;
    z-index: 1;
    display: none;
    left: 1em;

}

.submenu:before {
    position: absolute;
    z-index: -1;
    content: '';
    top: -.5em;
    left: 0;
    border-top: .5em solid transparent;
    border-bottom: .5em solid transparent;
    border-left: .5em solid #222;
}

.submenu li {
    border-bottom: 1px solid #444;
    color: grey;
}

.submenu a {
    padding: .2em 1.5em;
    font-size: 0.9em;

    white-space: nowrap;
    color: grey;
}

.submenu a:hover {}

.projet-submenu li {
    float: none;
    display: inline;
    border-right: 1px solid grey;
    margin-right: 5px;
    font-size: 0.9em;
    
}

.galerie li {
    display: inline;
}


.image {
    float: left;
    margin-bottom: 6em;
}

figure {
    margin: 0 0 1em 0 !important;
}

.years img:last-of-type {
    margin-bottom: 50px;
}


.footer {
    
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #FFFFFF;
    padding-top: 0.5em;
    padding-bottom: 0.2em;
   margin: 0 auto !important;
    font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
}

@media screen and (min-width: 850px) {
    .logo {
        float: center;
    }
    .menu {
        float: center;
    }


    .projet-submenu li {
        float: none;
        display: block;
        border-right: none;

    }

    .menu>li {
        float: center;
    }
    .menu>li>a {
        padding: .5em .1em;
        border: 0;
    }
    .menu>li:hover .submenu {
        display: block;
    }
    .footer {
        width: 95%;
        font-size: 1.0em;
    }
}


/* Spacing
––––––––––––––––––––––––––––––––––––––––––––––––––
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }
*/


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.u-full-width {
    width: 100%;
    box-sizing: border-box;
}

.u-max-full-width {
    max-width: 100%;
    box-sizing: border-box;
}

.u-pull-right {
    float: right;
}

.u-pull-left {
    float: left;
}


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Self Clearing Goodness */

.container:after,
.row:after,
.u-cf {
    content: "";
    display: table;
    clear: both;
}


/*Button filter*/

.buttons-filter-wrapper {
    margin: 2em 0;
    text-align: center;
}


/*teaser elements*/

.years .mix {
    /*used with the mixitup javascript plugin: filter will not work whithout it*/
    display: none;
}

.maincarousel {
    margin-bottom: 5em;
}

.menu li:first-child:after{
  content:" - ";
}

nav {
padding-left: 2%;
 padding-right: 2%;

}