@font-face {
    font-family: 'Helvetica';
    src: url('/assets/fonts/NeueHelveticaBQ-Bold.woff2') format('woff2'),
        url('/assets/fonts/NeueHelveticaBQ-Bold.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: 'Helvetica';
    src: url('/assets/fonts/HelveticaNeueLTStd-Roman.woff2') format('woff2'),
        url('/assets/fonts/HelveticaNeueLTStd-Roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


:root {
    --red: #F0282D;
    --green: #00A651;
    --yellow: #FFBB00;
    --blue: #0078D0;
    --grey: #f9f8f3;
    --darkgrey: #666666;
  }

html{
    font-family:'Helvetica', Arial, Helvetica, sans-serif;
    font-size:16px;
    -webkit-font-smoothing : antialiased;
    scrollbar-gutter: stable;
}

#player:hover, footer:hover, #creature:hover, #stop-vynil:hover, #around:hover, section#hero:hover{
    cursor: url("/assets/img/souris-white.png") 10 10, pointer;
}

body{
    margin:0;
}

p{
    font-size: 1rem;
}

h1 {
    font-family: 'Voyage';
    font-size: 17vw;
    line-height: 14vw;
    margin: 0;
}

section#home {
    margin-top: 5rem;
}

h2.title-works {
    font-size: 3.5vw;
    text-transform: inherit;
    line-height: 3.5vw;
    font-weight: 500;
    margin: 0;
    display: inline;
    position: relative;
}

h2.title-works span {
    font-size: 3.5vw;
    text-transform: inherit;
    line-height: 3.5vw;
    margin: 0;
    font-weight: 100;
}

a{
    color:black;
    text-decoration: none;
}

header {
    position: fixed;
    top: 1.5rem;
    left: 0;
    width: 100%;
    z-index: 99999;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav a{
    font-weight: 500;
    font-family: 'helvetica';
    font-size: 1.5rem;
}

nav a{
    margin-left:2rem;
}

h1.page-title {
    text-transform: uppercase;
}

#title {
    position: fixed;
    top: 3.5rem;
    left: 0;
    text-transform: uppercase;
    width: 100%;
    height: 100%;
}

.thumb-work {
    display: inline-block;
    align-items: center;
    justify-content: center;
}

section#works {
    padding-top: calc(20vw + 2rem);
    z-index: 1;
    position: relative;
}

.petit{
    width: 50%;
}

.moyen {
    width: 70%;
}

.grand {
    width: 100%;
}

.nodec{
    margin-top:0;
}

.granddec{
    margin-top:10rem;
}

.moyendec{
    margin-top:7rem;
}

.petidec{
    margin-top:4rem;
}

.title-works img {
    width: 10rem;
    position: absolute;
    right: 0;
    opacity: 0;
}

.link-works:hover > .title-works img {
    opacity: 1;
}

.thumb-work img {
    width: 100%;
    border-radius: 0.2rem;
}
.hover-work {
    min-width: 20px;
    min-height: 20px;
    display:inline-block;
    position: relative;
}

.desc-work {
    top: 0;
    position: absolute;
    padding: 1rem;
    background-color: var(--grey);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #e7e3e3;
    left: 0;
    opacity:0;
    transition: all .1s ease;
    border-radius: 0.2rem;
}

.desc-work:hover{
    opacity:1;
}

.desc-work h3 {
    font-weight: 500;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5rem;
}

.desc-work p {
    font-weight: 100;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5rem;
}

.etq img {
    width: 100%;
}

.plyr__controls {
    display: none!important;
}

button.plyr__control.plyr__control--overlaid {
    background: black;
}

button.plyr__control.plyr__control--overlaid {
    background: black!important;
}

section#work-single {
    height: 100vh;
    width: 100%;
    margin: auto;
}

.row-single{
    height: 100vh;
}

h1.title-single {
    font-family: 'Helvetica';
    font-size: 1rem;
    font-weight: 500;
    line-height: 1rem;
}

p.category-single {
    margin-top: 0.5rem;
    line-height: 1.5rem;
}

.etq {
    position: absolute;
    width: 100%;
}

div#draggableDiv {
    position: absolute;
    background: aliceblue;
    width: 10rem;
    height: 10rem;
    z-index: 999999999;
}

.bx-wrapper {
    max-width: 100%;
    border: none;
    box-shadow: none;
    margin-bottom: 0;
}

.bx-viewport{
    height: 100%!important;
    width: 100%!important;
}

.imgsingle {
    height: 80vh;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

a.bx-next {
    height: 100vh!important;
    width: 50vw!important;
    position: fixed!important;
    right: 0!important;
    top: 0!important;
    background: none!important;
    cursor: e-resize;
}

a.bx-prev {
    height: 100vh!important;
    width: 50vw!important;
    position: fixed!important;
    left: 0!important;
    top: 0!important;
    background: none!important;
    cursor: w-resize;
}

img.etq {
    position: absolute;
    z-index: 99999;
    height: 10vw;
    width: auto;
    bottom:0;
}

.col-thumb {
    margin-bottom: 8vw;
}

.dragme {
    position: relative;
    cursor: move;
}

.col-infos, .col-contact{
    width: 100%;
    height: 100%;
}

#etq01 {
    width: 50vw;
    position: absolute;
    top: 6vw;
}

#etq02 {
    width: 29vw;
    position: absolute;
    top: 17vw;
    transform: rotate(-39deg);
}

#etq03 {
    width: 29vw;
    position: absolute;
    bottom: 0;
    left: 21vw;
}

#etq04 {
    width: 26vw;
    position: absolute;
    bottom: 4vw;
    right: 40vw;
    transform: rotate(11deg);
}

img#etq05 {
    width: 43vw;
    height: auto;
    right: 4vw;
    position: absolute;
    top: 3vw;
}

.text-info p {
    width: 27vw;
    font-size: 1vw;
    text-transform: initial;
    font-weight: 500;
    position: absolute;
    right: 12vw;
    z-index: 1;
    text-align: justify;
}

img#etqcontact01 {
    width: 51vw;
    right: 7vw;
    position: absolute;
    top: 27vw;
}

img#etqcontact02 {
    width: 31vw;
    right: 47vw;
    position: absolute;
    top: 34vw;
    z-index: 1;
    transform: rotate(-16deg);
}

img#etqcontact03 {
    position: absolute;
    width: 9vw;
    right: 51vw;
    top: 52vw;
    z-index: 1;
}

img#etqcontact04 {
    position: absolute;
    width: 29vw;
    right: 43vw;
    top:14vw;
}

img#etqcontact05 {
    position: absolute;
    width: 10vw;
    transform: rotate(73deg);
    top: 43vw;
    right: 71vw;
    z-index: 1;
}

img#etqcontact06 {
    position: absolute;
    width: 30vw;
    top: 7vw;
    right: 1vw;
}

.logo-etiquette {
    width: 25rem;
    transform: rotate(-12deg);
    margin-left: 11rem;
}