a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    border: 0;
    font-size: 100%;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline
}

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

body {
    line-height: 1
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: "";
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

a,
del,
ins {
    text-decoration: none
}

a {
    color: inherit
}

button,
label {
    cursor: pointer
}

html {
    box-sizing: border-box
}

*,
:after,
:before {
    box-sizing: inherit
}

button,
input {
    outline: 0
}

@font-face {
    font-family: jet;
    font-style: normal;
    font-weight: 300;
    src: url(https://romance-with-a-bird.olymperacanaweiler.com/assets/fonts/JetBrainsMono-ExtraLight.woff2), url(https://romance-with-a-bird.olymperacanaweiler.com/assets/fonts/JetBrainsMono-ExtraLight.otf) format("opentype")
}

html {
    position: relative
}

body {
    color: #363a3f;
    font-family: jet, sans-serif;
    font-size: 10px;
    line-height: 14.5px;
    text-transform: uppercase
}

@media screen and (max-width:800px) {
    body {
        font-size: 10.4px
    }
}

.cursor {
    color: #363a3f;
    left: -100px;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    text-shadow: #fff 0 0 15px;
    top: -100px;
    transition: opacity .3s ease;
    will-change: left, top;
    z-index: 10000
}

.cursor .message {
    mix-blend-mode: difference
}

.cursor .bul {
    background-attachment: fixed;
    background-size: cover;
    border-radius: 50%;
    display: block;
    height: 500px;
    pointer-events: none;
    position: absolute;
    width: 500px
}

.cursor.show {
    opacity: 1
}

#app {
    font-size: 1.2em;
    margin: 1em;
    text-align: center
}

.header,
header {
    left: 0;
    margin: 30px;
    position: fixed;
    text-transform: uppercase;
    top: 0;
    width: calc(100vw - 60px);
    z-index: 1
}

@media screen and (max-width:1000px) {

    .header,
    header {
        margin: 0;
        width: 100vw
    }
}

.header .nav,
header .nav {
    display: flex;
    justify-content: space-between
}

.header .nav .logo,
header .nav .logo {
    cursor: pointer;
    text-align: center
}

@media screen and (max-width:1000px) {

    .header .nav .logo,
    header .nav .logo {
        padding: 30px
    }
}

.header .nav_item,
header .nav_item {
    cursor: pointer;
    text-shadow: #fff 0 0 15px;
    width: 100px
}

@media screen and (max-width:1000px) {

    .header .nav_item,
    header .nav_item {
        padding: 30px 0 30px 30px;
        width: 150px
    }
}

@media screen and (max-width:800px) {

    .header .nav_item,
    header .nav_item {
        padding: 30px 0 30px 30px;
        width: 80px
    }
}

.header .nav_item>div,
header .nav_item>div {
    display: inline-block
}

.header .nav_item.close,
header .nav_item.close {
    opacity: 0;
    pointer-events: none;
    text-align: right;
    transition: opacity .4s ease;
    z-index: 1000
}

@media screen and (max-width:1000px) {

    .header .nav_item.close,
    header .nav_item.close {
        padding-left: 0;
        padding-right: 30px
    }
}

.header .nav_item.close.optioned,
header .nav_item.close.optioned {
    opacity: 1;
    pointer-events: auto
}

.header .nav_item .tiret,
header .nav_item .tiret {
    background-color: #363a3f;
    border: none;
    display: inline-block;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    text-shadow: #fff 0 0 15px;
    transform: translateY(2px);
    transition: width .3s ease, opacity .3s ease, margin .3s ease;
    width: 0
}

.header .nav_item.active .tiret,
.header .nav_item:hover .tiret,
header .nav_item.active .tiret,
header .nav_item:hover .tiret {
    margin-right: 10px;
    opacity: 1;
    width: 25px
}

@media screen and (max-width:800px) {

    .header .nav_item.active .tiret,
    .header .nav_item:hover .tiret,
    header .nav_item.active .tiret,
    header .nav_item:hover .tiret {
        margin-right: 5px;
        width: 21px
    }
}

.mobile .nav_item:hover .tiret,
.tablet .nav_item:hover .tiret {
    margin-right: 0;
    width: 0
}

.footer,
footer {
    bottom: 15px;
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 30px
}

@media screen and (max-width:800px) {

    .footer,
    footer {
        bottom: 0;
        flex-direction: row;
        justify-content: space-between;
        width: calc(100% - 60px)
    }
}

.footer_item,
footer_item {
    cursor: pointer;
    text-align: right;
    text-shadow: #fff 0 0 15px;
    width: 100px
}

@media screen and (max-width:800px) {

    .footer_item:first-child,
    footer_item:first-child {
        text-align: left
    }
}

@media screen and (max-width:1000px) {

    .footer_item,
    footer_item {
        padding: 20px 0
    }
}

.footer_item>div,
footer_item>div {
    display: inline-block
}

.footer_item .tiret,
footer_item .tiret {
    background-color: #363a3f;
    border: none;
    display: inline-block;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    text-shadow: #fff 0 0 15px;
    transform: translateY(2px);
    transition: width .3s ease, opacity .3s ease, margin .3s ease;
    width: 0
}

.footer_item.active .tiret,
.footer_item:hover .tiret,
footer_item.active .tiret,
footer_item:hover .tiret {
    margin-right: 10px;
    opacity: 1;
    width: 25px
}

.home_band {
    display: flex;
    flex-wrap: wrap;
    height: 100vh;
    width: 1240vw
}

@media screen and (max-width:1000px) {
    .home_band {
        flex-direction: column;
        flex-wrap: nowrap;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content
    }
}

.home_band .home_item {
    padding-top: 9.5vh;
    transition: opacity .4s ease;
    width: 60vw
}

@media screen and (max-width:1000px) {
    .home_band .home_item {
        width: 100vw
    }
}

@media screen and (max-width:800px) {
    .home_band .home_item {
        height: calc(var(--vh)*100 - 75px);
        padding-top: 75px
    }
}

.home_band .home_item.first {
    margin-left: 20vw
}

@media screen and (max-width:1000px) {
    .home_band .home_item.first {
        margin-left: 0
    }
}

.home_band .home_item.last {
    margin-right: 20vw
}

@media screen and (max-width:1000px) {
    .home_band .home_item.last {
        margin-right: 0
    }
}

.home_band .home_item .wrapper_image {
    height: calc(100vh - 145px);
    margin: auto;
    position: relative;
    width: 80%
}

@media screen and (max-width:1000px) {
    .home_band .home_item .wrapper_image {
        height: calc(var(--vh)*80);
        width: 80%
    }
}

@media screen and (max-width:800px) {
    .home_band .home_item .wrapper_image {
        height: calc(var(--vh)*75);
        padding-top: 15px
    }
}

.home_band .home_item .wrapper_image img {
    cursor: pointer;
    -moz-filter: blur(55px);
    -ms-filter: blur(55px);
    filter: blur(55px);
    height: 100%;
    margin-bottom: 18px;
    -o-object-fit: contain;
    object-fit: contain;
    opacity: .9;
    transition: filter .3s ease, opacity .9s ease, padding .9s ease;
    width: 100%;
    will-change: filter
}

.home_band .home_item .wrapper_image img.med {
    padding: 50px
}

@media screen and (max-width:1700px) {
    .home_band .home_item .wrapper_image img.med {
        padding: 70px
    }
}

@media screen and (max-width:1300px) {
    .home_band .home_item .wrapper_image img.med {
        padding: 50px
    }
}

.home_band .home_item .wrapper_image img.small {
    padding: 70px
}

@media screen and (max-width:1700px) {
    .home_band .home_item .wrapper_image img.small {
        padding: 100px
    }
}

@media screen and (max-width:1300px) {
    .home_band .home_item .wrapper_image img.small {
        padding: 70px
    }
}

@media screen and (max-width:1000px) {
    .home_band .home_item .wrapper_image img {
        -moz-filter: blur(45px);
        -ms-filter: blur(45px);
        filter: blur(45px);
        margin-bottom: 14px;
        transition: opacity .9s ease;
        will-change: filter;
        will-change: opacity
    }
}

.home_band .home_item .wrapper_image:hover img {
    -moz-filter: blur(0);
    -ms-filter: blur(0);
    filter: blur(0);
    opacity: 1
}

.home_band .home_item .wrapper_image .legend {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    left: 50%;
    opacity: 1;
    position: absolute;
    text-align: center;
    text-shadow: hsla(0, 0%, 100%, .289) 0 0 15px;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .3s ease
}

@media screen and (max-width:800px) {
    .home_band .home_item .wrapper_image .legend {
        text-align: center;
        width: calc(100% - 127px)
    }
}

.home_band .home_item .wrapper_image .zoom_button,
.home_band .home_item .wrapper_image:hover .legend {
    opacity: 0
}

.home_band .home_item.hide {
    opacity: 0;
    pointer-events: none
}

.projet_select {
    overflow-x: hidden
}

@media screen and (max-width:1000px) {
    .projet_select {
        overflow-x: hidden;
        overflow-y: hidden
    }
}

.projet_select .home_band {
    width: 30000px !important
}

@media screen and (max-width:1000px) {
    .projet_select .home_band {
        width: -webkit-fit-content !important;
        width: -moz-fit-content !important;
        width: fit-content !important
    }
}

.projet_select .select .wrapper_image .tableau,
.projet_select .select .wrapper_image .tableau.med,
.projet_select .select .wrapper_image .tableau.small {
    -moz-filter: blur(0);
    -ms-filter: blur(0);
    filter: blur(0);
    opacity: 1;
    padding: 0
}

.projet_select .select .wrapper_image .legend {
    opacity: 0
}

@media screen and (max-width:1000px) {
    .projet_select .select .wrapper_image .legend {
        bottom: -75px;
        opacity: 1 !important;
        top: unset !important;
        transform: translate(-50%);
        width: 69%
    }
}

.projet_select .select:hover .tableau {
    -moz-filter: blur(55px);
    -ms-filter: blur(55px);
    filter: blur(55px);
    opacity: .8
}

@media screen and (max-width:1000px) {
    .projet_select .select:hover .tableau {
        -moz-filter: blur(0) !important;
        -ms-filter: blur(0) !important;
        filter: blur(0) !important
    }
}

.projet_select .select:hover .legend {
    opacity: 1
}

.projet_select.zoomed {
    overflow-y: scroll
}

@media screen and (max-width:1000px) {
    .projet_select.zoomed {
        overflow: hidden
    }

    .projet_select.zoomed .home_band {
        overflow: hidden !important
    }
}

.projet_select.zoomed .home_band .home_item.select {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    overflow: hidden;
    padding-top: 0;
    position: relative;
    width: 100vw !important
}

@media screen and (max-width:1000px) {
    .projet_select.zoomed .home_band .home_item.select {
        height: 100vh !important;
        overflow: visible;
        width: auto !important
    }
}

.projet_select.zoomed .home_band .home_item.select .wrapper_image {
    height: calc(var(--height)) !important;
    width: 100% !important
}

@media screen and (max-width:1000px) {
    .projet_select.zoomed .home_band .home_item.select .wrapper_image {
        height: 100vh !important;
        padding-top: 0;
        position: relative
    }
}

.projet_select.zoomed .home_band .home_item.select .wrapper_image img {
    -moz-filter: blur(55px) !important;
    -ms-filter: blur(55px) !important;
    filter: blur(55px) !important;
    margin-bottom: 0
}

@media screen and (max-width:1000px) {
    .projet_select.zoomed .home_band .home_item.select .wrapper_image img {
        -moz-filter: blur(45px) !important;
        -ms-filter: blur(45px) !important;
        filter: blur(45px) !important;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%
    }
}

@media screen and (max-width:800px) {
    .projet_select.zoomed .home_band .home_item.select .wrapper_image img {
        -moz-filter: blur(30px) !important;
        -ms-filter: blur(30px) !important;
        filter: blur(30px) !important
    }
}

.projet_select.zoomed .home_band .home_item.select .wrapper_image .legend {
    display: none
}

.projet_select.zoomed .home_band .home_item.select .wrapper_image .zoom_button {
    opacity: 0 !important
}

.projet_select.zoomed .bul {
    background-attachment: fixed;
    background-size: cover;
    border-radius: 50%;
    height: 300px;
    pointer-events: none;
    position: absolute;
    width: 300px
}

@media screen and (max-width:1000px) {
    .projet_select.zoomed .bul {
        height: 150px;
        width: 150px
    }
}

.in_action .home_item {
    cursor: auto !important;
    overflow: visible !important
}

.in_action .select img:hover {
    -moz-filter: blur(0);
    -ms-filter: blur(0);
    filter: blur(0) !important;
    will-change: filter
}

.cv {
    height: 0;
    overflow: hidden;
    pointer-events: none
}

.archives .archive_item,
.cv {
    opacity: 0;
    transition: opacity .3s ease
}

.archives_page_init .home_item .wrapper_image img,
.cv_page_init .home_item .wrapper_image img {
    -moz-filter: blur(55px);
    -ms-filter: blur(55px);
    filter: blur(55px) !important;
    opacity: .8
}

.archives_page_init .home_item .wrapper_image .legend,
.cv_page_init .home_item .wrapper_image .legend {
    opacity: 0 !important
}

.archives_page_init .path-archives .archives,
.cv_page_init .path-archives .archives {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    left: 0;
    pointer-events: auto;
    position: fixed;
    top: 0;
    width: 100%
}

.archives_page_init .path-archives .archives .archive_item,
.cv_page_init .path-archives .archives .archive_item {
    display: flex;
    justify-content: space-between;
    opacity: 0;
    text-align: right;
    width: 300px
}

.archives_page_init .path-archives .archives .archive_item .date,
.cv_page_init .path-archives .archives .archive_item .date {
    overflow: hidden;
    text-align: left;
    transition: width .4s ease;
    width: 0
}

@media screen and (max-width:1000px) {

    .archives_page_init .path-archives .archives .archive_item .date,
    .cv_page_init .path-archives .archives .archive_item .date {
        width: 40px
    }
}

.archives_page_init .path-archives .archives .archive_item:hover .date,
.cv_page_init .path-archives .archives .archive_item:hover .date {
    width: 40px
}

.archives_page_init .path-cv .cv,
.cv_page_init .path-cv .cv {
    height: 100vh;
    left: 0;
    opacity: 1;
    overflow: scroll !important;
    padding-bottom: 40px;
    padding-top: 100px;
    pointer-events: auto;
    position: fixed;
    top: 0;
    width: 100%
}

@media screen and (max-width:800px) {

    .archives_page_init .path-cv .cv,
    .cv_page_init .path-cv .cv {
        height: calc(var(--vh)*100)
    }
}

.archives_page_init .path-cv .cv .table,
.cv_page_init .path-cv .cv .table {
    margin: auto;
    width: 300px
}

@media screen and (max-width:800px) {

    .archives_page_init .path-cv .cv .table,
    .cv_page_init .path-cv .cv .table {
        width: 314px
    }
}

.archives_page_init .path-cv .cv .table .contact,
.cv_page_init .path-cv .cv .table .contact {
    margin-top: 10px
}

.archives_page_init .path-cv .cv .table .first_part,
.cv_page_init .path-cv .cv .table .first_part {
    margin-bottom: 30px
}

.archives_page_init .path-cv .cv .table .second_part,
.cv_page_init .path-cv .cv .table .second_part {
    margin-bottom: 15px
}

.archives_page_init .path-cv .cv .table li,
.cv_page_init .path-cv .cv .table li {
    margin-left: 0
}

.archives_page_init .path-cv .cv .table i,
.cv_page_init .path-cv .cv .table i {
    font-style: italic
}

.mobile .scrolling .tableau,
.tablet .scrolling .tableau {
    -moz-filter: blur(45px) !important;
    -ms-filter: blur(45px) !important;
    filter: blur(45px) !important;
    opacity: .9 !important;
    will-change: filter !important
}

.mobile .scrolling .legend,
.tablet .scrolling .legend {
    opacity: 1 !important
}

.mobile .scrolling.archives_page_init .legend,
.mobile .scrolling.cv_page_init .legend,
.tablet .scrolling.archives_page_init .legend,
.tablet .scrolling.cv_page_init .legend {
    opacity: 0 !important
}

.mobile .unscrolling .home_band .tableau,
.tablet .unscrolling .home_band .tableau {
    -moz-filter: blur(0) !important;
    -ms-filter: blur(0) !important;
    filter: blur(0) !important;
    opacity: 1 !important;
    will-change: filter !important
}

.mobile .unscrolling .home_band .legend,
.tablet .unscrolling .home_band .legend {
    opacity: 0 !important
}

.mobile .unscrolling.projet_select .home_band .legend,
.tablet .unscrolling.projet_select .home_band .legend {
    opacity: 1 !important
}

.mobile .unscrolling.projet_select .home_band .zoom_button,
.tablet .unscrolling.projet_select .home_band .zoom_button {
    opacity: 1 !important;
    text-align: center;
    transition: opacity .3s ease
}

.mobile .path-archives .archives .date,
.tablet .path-archives .archives .date {
    width: 40px
}

.mobile .archive_item,
.tablet .archive_item {
    padding-bottom: 10px;
    padding-top: 10px
}

.in_action .home_band {
    transition: margin-left .5s ease
}

.in_action .home_band .home_item {
    transition: padding-top .5s ease, width .5s ease, opacity .4s ease
}

.in_action .home_band .home_item img {
    opacity: 1 !important;
    transition: width .5s ease, filter .3s ease, padding .9s ease, opacity .9s ease;
    will-change: filter
}

@media screen and (max-width:1000px) {
    .in_action .home_band .home_item img {
        transition: width .5s ease, padding .9s ease, opacity .3s ease;
        will-change: unset
    }
}

.in_action .home_band .home_item .legend {
    opacity: 0 !important
}

@media screen and (max-width:1000px) {
    .in_action .home_band .home_item .legend {
        opacity: 1 !important
    }
}

.records {
    margin: 70px 30px 30px;
    vertical-align: top
}

.records .groupe_year .year {
    opacity: 0;
    padding-top: 30px;
    vertical-align: top;
    width: 140px
}

@media screen and (max-width:800px) {
    .records .groupe_year .year {
        width: 55px
    }
}

.records .groupe_year .tableaux {
    display: flex;
    flex-wrap: wrap;
    opacity: 0
}

.records .groupe_year .tableaux .wrapper_image {
    padding: 30px
}

.records .groupe_year .tableaux .wrapper_image img {
    -moz-filter: blur(25px);
    -ms-filter: blur(25px);
    filter: blur(25px);
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
    transition: filter .2s ease;
    width: 70px;
    will-change: filter
}

.records .groupe_year .tableaux .wrapper_image .legend {
    bottom: 30px;
    left: 200px;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity .2s ease
}

.records .groupe_year .tableaux .wrapper_image .zoom_button {
    opacity: 0 !important
}

.records .groupe_year .tableaux .wrapper_image.showed img {
    -moz-filter: blur(0);
    -ms-filter: blur(0);
    filter: blur(0)
}

.records .groupe_year .tableaux .wrapper_image.over .legend {
    opacity: 1
}

.mobile .tableaux .wrapper_image img,
.tablet .tableaux .wrapper_image img {
    -moz-filter: blur(0);
    -ms-filter: blur(0);
    filter: blur(0) !important
}

.preloader {
    background-color: #fff;
    height: 100vh;
    left: 0;
    opacity: 1;
    position: fixed;
    top: 0;
    transition: opacity 2s ease .5s;
    width: 100vw;
    z-index: 1000
}

@media screen and (max-width:1000px) {
    .preloader {
        height: calc(var(--vh)*100)
    }
}

.preloader img {
    -webkit-animation: waiting 30s linear 0s infinite;
    animation: waiting 30s linear 0s infinite;
    filter: blur(4.1vw);
    height: 400vh;
    left: -90%;
    opacity: .5;
    position: absolute;
    top: -90%;
    transform: rotate(0deg);
    transform: translate(-50%, -50%);
    transform-origin: center;
    width: 400%;
    will-change: filter
}

@media screen and (max-width:1000px) {
    .preloader img {
        top: -100%
    }
}

@media screen and (max-width:800px) {
    .preloader img {
        top: -140%
    }
}

.preloader .wrapper_text {
    bottom: 30px;
    left: 50%;
    margin: auto auto 40px;
    opacity: 0;
    position: absolute;
    transform: translate(-50%);
    transition: opacity .3s ease;
    width: 300px;
    word-break: break-all;
    z-index: 100
}

@media screen and (max-width:800px) {
    .preloader .wrapper_text {
        width: 314px
    }
}

@-webkit-keyframes waiting {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes waiting {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}