@font-face {
    font-family: 'Patron';
    src: url('fonts/Patron-Bold.woff2') format('woff2'),
        url('fonts/Patron-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Patron';
    src: url('fonts/Patron-Regular.woff2') format('woff2'),
        url('fonts/Patron-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Patron';
    src: url('fonts/Patron-Medium.woff2') format('woff2'),
        url('fonts/Patron-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}



html{width: 100%; font-size: 62.5%;}
body{width: 100%; margin: 0; position: absolute; color: #000000; overflow-x: hidden; font: normal normal 1.5rem/1.5rem 'Patron'; background-color: #FFD3AE;}

.clear{clear: both;}
::selection {background: #000000; color: #FFFFFF; text-shadow: none; outline: none !important;}
h1, h2, h3, h4, h5, p{font-size: unset; -webkit-margin-before: 0.0em; -webkit-margin-after: 0.0em;}
ul, menu, dir {display: block; list-style-type: disc; -webkit-margin-before: 0em; -webkit-margin-after: 0em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 0px;}
img{max-width: 100%;}
a, a:active, a:hover, a:visited, a:focus{text-decoration: none; color: #000000; cursor: pointer;}

.vs-section{position: fixed; top: 0; right: 0; left: 0; width: 100%; height: auto; margin: auto; will-change: transform; pointer-events: auto;}
.vs-scrollbar {display: block;position: absolute;transition: transform .6s;}
.ie-section{position: absolute !important}
/* SCROLL BAR */
.vs-scrollbar {top: 0; right: 0px; bottom: 0;width: 5px; height: 100%; background:rgba(0, 0, 0, 0);transform: translate3d(0px,0,0); z-index: 997;}
.vs-scrollbar.vs-horizontal {bottom: 0px; left: 0; right: 0;width: 0%; height: 15px;transform: translate3d(0,0px,0);}
.is-dragging .vs-scrollbar.vs-horizontal,
.is-dragging .vs-scrollbar.vs-vertical,
.vs-scrollbar.vs-horizontal:hover,
.vs-scrollbar.vs-vertical:hover {transform: none;}
.vs-scrollbar .vs-scrolldrag {width: 100%;height: auto; background: #121212;}
.vs-scroll-view {position: relative;width: 1px;}
.ie{overflow-y: visible !important; }

header{position: fixed; top: 2.8125vw; left: 5.078125vw; width: calc(100% - (5.078125vw * 2)); display: flex; justify-content: space-between; align-items: center; z-index: 1000;}
#logo{width: 8.75vw; height: auto;}
nav ul li{display: inline; margin: 0 1.187571vw; cursor: pointer;}
nav ul li:last-child{margin-right: 0;}

#intro{position: relative; width: calc(100% - 7.8125vw - (5.078125vw * 2)); display: block; margin-top: 17.96875vw; margin-left: calc(7.8125vw + 5.078125vw); margin-bottom: 10.546875vw;}
#intro h1{font: bold normal 4.5rem/4.5rem 'Patron';}
#intro h2{font: 500 normal 4.5rem/4.5rem 'Patron';}
#intro h3{margin-top: 3.90625vw; margin-left: 15.234375vw; width: 43.75vw; font: normal normal 2.4rem/3.1rem 'Patron';}
.intro-line{position: absolute; right: 0; bottom: 0; background-image: url('img/horizontal-line.svg'); background-size: cover; width: 7.109375vw; height: 2.03125vw; margin-bottom: 2.03125vw; transform: rotate(90deg); transform-origin: right;}

#auteurs{position: relative; margin-left: 0; width: calc(100% - 5.078125vw); margin-bottom: 12.578125vw; display: block;}
.auteur-line{position: absolute; top: 3.4375vw; left: 5.078125vw; margin-bottom: 0 !important;}
.title-auteurs{font: bold normal 14.5rem/14.5rem 'Patron'; text-align: right; width: 46.015625vw;}
.grid-auteurs{margin-top: -11.328125vw; display: flex; flex-flow: row wrap; width: calc(100% - 5.078125vw); margin-left: 5.078125vw; justify-content: space-between;}
.img-auteur{margin-bottom: 1.71875vw; background-size: cover; background-position: 50% 50%; height: 28.515625vw;}

.grid-auteurs .item{flex: 0 0 39.0625vw; margin-bottom: 2.65625vw;}

.grid-auteurs .item:nth-child(odd){z-index: 1; align-self: flex-end;}
.grid-auteurs .item:nth-child(even){z-index: 3; align-self: start; margin-top: -15.3125vw;}

.grid-auteurs .item:first-child{margin-top: 15.3125vw}
.grid-auteurs .item:nth-child(2){margin-top: 0}

.grid-auteurs .item:last-child{margin-left: auto; margin-top: -15.3125vw;}

.grid-auteurs img{width: 100%;}
.nom-auteur{font: 500 normal 3.0rem/3.0rem 'Patron';}
.oblique-line{position: absolute; top: 50%; left: 50%; transform: translate(calc(-50% + 5.078125vw / 2), calc(-50% + 16vw)) rotate(120deg); background-image: url('img/horizontal-line.svg'); background-size: cover; width: 7.109375vw; height: 2.03125vw; margin-bottom: 3.90625vw;}

#contacts{position: relative; width: calc(100% - 7.8125vw - (5.078125vw * 2)); margin-left: calc(7.8125vw + 5.078125vw); margin-bottom: 10.3125vw;}
.wrapper-contacts{position: relative; padding-top: 6.640625vw; margin-left: 15.234375vw; width: 44.453125vw; display: flex; justify-content: space-between; flex-flow: row wrap;}
.contact-line, .auteur-line{background-image: url('img/horizontal-line.svg'); background-size: cover; width: 7.109375vw; height: 2.03125vw; margin-bottom: 3.90625vw;}
.title-contacts{font: bold normal 4.5rem/4.5rem 'Patron'; margin-top: -6.640625vw;}
.grp-contacts{position: relative; margin-top: 6.640625vw;}
.grp-contacts::before{content: ""; background-image: url('img/vertical-line.png'); background-size: cover; width: 2.03125vw; height: 7.109375vw; position: absolute; left: 0;}
.contact{font: 500 normal 2rem/2.2rem 'Patron'; margin-bottom: 0.78125vw; margin-left: calc(3.90625vw + 2.03125vw);}
.contact a{font: normal normal 1.6rem/2.2rem 'Patron'; display: block;}

@media screen and (max-width: 700px) {
     header{align-items: flex-start;}
     #logo{width: 70px;}
     nav ul li{display: block; padding: 3px 0;}
     #intro, #auteurs, #contacts{padding-top: 15vh; width: calc(100% - (5.078125vw * 2)); margin-left: 5.078125vw}
     .intro-line, .auteur-line, .oblique-line, .contact-line{display: none;}
     #intro h1{font: bold normal 3rem/3rem 'Patron';}
     #intro h2{font: 500 normal 3rem/3rem 'Patron';}
     #intro h3{padding-top: 5vh; margin-left: 0; width: 80%; font: normal normal 2rem/2.6rem 'Patron';}

     #auteurs{padding-top: 10vh;}
     .title-auteurs{font: bold normal 7rem/7rem 'Patron'; text-align: left; width: 100%; margin-bottom: 30px;}
     .grid-auteurs{margin-top: 0; width: 100%; margin-left: 0;}
     .grid-auteurs .item{flex: 0 0 100%; margin-top: 0 !important; margin-bottom: 30px;}
     .nom-auteur{font: 500 normal 3.0rem/3.6rem 'Patron';}
     .img-auteur{height: 380px;}

     .wrapper-contacts{width: 100%; margin-left: 0; flex-flow: column;}
     .contact{margin-bottom: 20px; margin-left: 0;}
     #contacts{margin-bottom: 40px;}
     .grp-contacts::before{content: none;}
}