@import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600,800|Roboto:400,500,900&display=swap');
:root {
    --line-white: rgba(255, 255, 255, 0.1);
    --yellow-text: #d7b137;
    --yellow-text-t: rgba(215, 177, 55, 0.54);
    --heigth-main-body: 70vh;
    --width-main-body: 80vw;
}

.popup {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: 9999999;
    background-color: rgba(0, 0, 0, 0.8);
}

.popup .wrap {
    width: 30%;
    height: 30%;
    /* border: 2px solid; */
    background-color: #d7b13780;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.popup .wrap div {
    margin: 5px 0px;
    text-align: center;
}

html,
body {
    position: fixed;
    padding: 0;
    margin: 0;
    background-color: black;
    overflow: hidden;
    font-family: 'Roboto';
    width: 100vw;
    height: 100%;
}

body {
    opacity: 0;
}

* {
    box-sizing: border-box;
}

a,
a:hover,
a:visited {
    color: inherit;
    text-decoration: none;
}

button {
    background: transparent;
    border: none;
}

p,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}

p {
    margin-bottom: 20px;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
    background-color: #d7b137;
    outline: #c3980e;
    background-color: rgba(215, 177, 55, 0.66);
    outline: rgb(224, 171, 0);
}

.bg--dotted-3x3:before {
    content: "";
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: url('/wp-content/themes/photoNC/images/3x3-black.gif');
    background-repeat: repeat;
    background-position: 50% 0;
    z-index: 1;
}

#flash-photo {
    width: 100vw;
    height: 100vh;
    z-index: -1;
    position: absolute;
    opacity: 0;
    background: white;
}

#middle-logo {
    position: absolute;
    width: 25%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    opacity: 0.1;
}

#middle-logo img {
    width: 100%;
}

#background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#background .image {
    background: url('/wp-content/themes/photoNC/images/background/01.jpg');
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    transform: scale(1.2);
    /* animation : scaledown 20s cubic-bezier(0.39, 0.575, 0.565, 1) infinite; */
    /* opacity: 0.5; */
}


/* cubic-bezier(0.39, 0.575, 0.565, 1);*/

#nav {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    z-index: 9999;
}

#nav #main-logo {
    position: absolute;
    top: 38px;
    left: 44px;
    z-index: 2;
}

#nav #main-logo img {
    width: 10vw;
    min-width: 80px;
    max-width: 100px;
}

#nav .wrap-menu {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    list-style: none;
    right: 9%;
    margin-top: 2%;
    z-index: 25;
}

#nav .link-footer {
    display: none;
}

#nav .wrap-menu li {
    padding: 0px 20px
}

#nav .wrap-menu a {
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    cursor: pointer;
    text-transform: uppercase;
}

#nav #bars-menu,
#nav #icon-close {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    width: 5vw;
    height: 5vw;
    min-width: 30px;
    min-height: 30px;
}

#nav #bars-menu {
    transform: translateX(0vw);
    transition: 0.5s;
}

#nav #bars-menu.active {
    transform: translateX(100vw);
    transition: 0.3s;
}

#nav #icon-close {
    transform: translateY(-50vh);
    transition: 0.3s;
}

#nav #icon-close.active {
    transform: translateY(0vh);
    transition: 0.5s;
}

#nav #icon-mobile {
    display: none;
    position: absolute;
    width: 30px;
    height: 30px;
    top: 22px;
    right: 0;
    margin-right: 2.5%;
    cursor: pointer;
}

.coin {
    position: absolute;
    width: 20%;
    height: 30%;
    z-index: 4;
}

.coin.left-top {
    left: 0;
    top: 0;
    border-top: 1px solid var(--line-white);
    border-left: 1px solid var(--line-white);
}

.coin.left-bottom {
    left: 0;
    bottom: 0;
    border-bottom: 1px solid var(--line-white);
    border-left: 1px solid var(--line-white);
}

.coin.right-top {
    right: 0;
    top: 0;
    border-top: 1px solid var(--line-white);
    border-right: 1px solid var(--line-white);
}

.coin.right-bottom {
    right: 0;
    bottom: 0;
    border-bottom: 1px solid var(--line-white);
    border-right: 1px solid var(--line-white);
}

.hr {
    margin-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 1);
    width: 0px;
    opacity: 0;
    margin: auto;
}


/***
*
*  ACCUEIL
*
*/

#menu-categorie {
    display: block;
    z-index: 22;
}

#menu-categorie.active-menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: absolute;
    width: 82vw;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
}

#menu-categorie .big-btn {
    position: absolute;
    cursor: pointer;
    display: flex;
    padding: 18vh 12vw;
}

#menu-categorie .big-btn.active-menu[data-id] {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    flex-direction: row;
    padding: 0;
}

#menu-categorie .big-btn h2 {
    font-family: 'Roboto';
    text-transform: uppercase;
    font-size: 3vw;
    margin: 0px;
    color: white;
    margin-top: -5px;
    transition: .5s;
}

#menu-categorie .big-btn h2.active-menu {
    font-size: 2vmax;
}

#menu-categorie .big-btn h3 {
    font-family: 'Roboto';
    text-transform: uppercase;
    font-size: 1.3vw;
    margin: 0px;
    color: white;
    text-indent: 3px;
    transition: .5s;
}

#menu-categorie .big-btn h3.active-menu {
    font-size: 0.8vmax;
}

#menu-categorie .big-btn[data-id="impressions"] {
    left: 0;
    top: 0;
    flex-direction: row;
}

#menu-categorie .big-btn[data-id="books"] {
    left: 0;
    bottom: 0;
    flex-direction: row;
}

#menu-categorie .big-btn[data-id="gifts"] {
    right: 0;
    top: 0;
    flex-direction: row-reverse;
}

#menu-categorie .big-btn[data-id="photos"] {
    right: 0;
    bottom: 0;
    flex-direction: row-reverse;
}

#menu-categorie .big-btn[data-id="impressions"] .title,
#menu-categorie .big-btn[data-id="books"] .title {
    padding-left: 20px;
}

#menu-categorie .big-btn[data-id="photos"] .title,
#menu-categorie .big-btn[data-id="gifts"] .title {
    padding-right: 20px;
}

#menu-categorie .big-btn.active-menu[data-id] .title {
    padding-left: 20px;
    padding-right: 20px;
}

#menu-categorie .big-btn img {
    width: 10vw;
    height: 10vw;
    max-width: 75px;
    max-height: 75px;
    min-width: 50px;
    min-height: 50px;
    margin-top: -12px;
}

#menu-categorie .big-btn {
    z-index: 5;
}

#menu-categorie .big-btn:hover>.title h2,
#menu-categorie .big-btn:hover>.title hr,
#menu-categorie .big-btn:hover>.title h3 {
    color: var(--yellow-text) !important;
}

#menu-categorie .big-btn:hover>.title h2 {
    transition: .3s;
    transform: translateX(20px);
}

#menu-categorie .big-btn:hover>.title h3 {
    transition: .7s;
    transform: translateX(-20px);
}

#menu-categorie .big-btn:hover>.title .hr {
    transition: .3s;
    width: 100%;
    opacity: 1;
    border-top: 1px solid var(--yellow-text);
}

#menu-categorie .big-btn:hover>img {
    transform: scale(0.9);
    transition: .3s;
}

@media only screen and (max-width: 1190px) {
    #menu-categorie .big-btn {
        padding: 18vh 4vw;
    }
    #menu-categorie {
        display: flex;
        flex-direction: column;
        top: 50%;
        transform: translateY(-50%);
        position: relative;
        padding: 10px;
        height: 100%;
        justify-content: space-evenly;
    }
    #menu-categorie.active-menu {
        top: unset;
        height: auto;
    }
    #menu-categorie .big-btn img {
        width: 10vw;
        height: 10vw;
        max-width: 75px;
        max-height: 75px;
        min-width: 40px;
        min-height: 40px;
        margin-top: -12px;
    }
    #menu-categorie .big-btn h2 {
        font-size: 3.8vw;
    }
}

@media only screen and (max-width: 1024px) {
    #menu-categorie {
        height: 75vh;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    #menu-categorie.active-menu {
        width: 100%;
        bottom: 0;
    }
    #menu-categorie .big-btn {
        position: relative;
        right: unset;
        bottom: unset;
        top: unset;
        left: unset;
        padding: 0 4vw;
        cursor: pointer;
        flex-direction: row!important;
        width: 100%;
        margin-bottom: 10px;
    }
    #menu-categorie .big-btn.active-menu {
        flex-direction: column!important;
        align-items: center;
    }
    #menu-categorie .big-btn h2 {
        font-size: 6vw;
    }
    #menu-categorie .big-btn h2.active-menu {
        margin-top: 5px;
        text-align: center;
    }
    #menu-categorie .big-btn h3 {
        font-size: 2vw;
        margin-bottom: 5px;
    }
    #menu-categorie .big-btn h3.active-menu,
    #menu-categorie .active-menu .hr {
        display: none;
    }
    #menu-categorie .big-btn[data-id="impressions"] .title,
    #menu-categorie .big-btn[data-id="books"] .title,
    #menu-categorie .big-btn[data-id="photos"] .title,
    #menu-categorie .big-btn[data-id="gifts"] .title {
        padding-left: 20px;
        padding-right: 0px;
    }
    #menu-categorie .big-btn img {
        width: 12vw;
        height: 12vw;
        margin: 0px 0px;
    }
}

@media only screen and (max-width: 520px) {
    #menu-categorie .big-btn img {
        width: 10vw;
        height: 10vw;
        margin: 0px 0px;
    }
    #menu-categorie .big-btn img {
        FONT-WEIGHT: 300;
        width: 10vw;
        height: 10vw;
        max-width: 75px;
        max-height: 75px;
        min-width: 30px;
        min-height: 30px;
        margin-top: -12px;
    }
    #menu-categorie .big-btn h2.active-menu {
        font-size: 11px;
        font-weight: 500;
    }
}


/***
*
*  TITLE PAGES
*
*/

#title-page-categorie {
    position: absolute;
    top: 50%;
    left: -50%;
    z-index: 20;
    transform: rotateZ(-90deg);
    width: 100%;
    z-index: 20
}

#title-page-categorie h2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(-30%);
    opacity: 0;
    font-size: 7vh;
    text-align: center;
    color: var(--yellow-text);
    text-transform: uppercase;
    transition: 0.5s;
}

#title-page-categorie h2.visible {
    opacity: 1;
    transition: 0.5s;
    transform: translateY(30%);
}

#title-page-categorie .image {
    transition: .5s;
    transform: translate(50vw, 8vw) rotateZ(90deg);
    opacity: 0;
    position: absolute;
    left: 0;
    top: 50%;
    min-width: 30px;
    width: 5vw;
    max-width: 75px;
}

#title-page-categorie .image.visible {
    transition: 0.5s;
    /* transform: translateX(0%); */
    opacity: 1;
}

@media only screen and (max-width: 1190px) {
    #title-page-categorie {
        transform: rotateZ(0deg) translateX(-50%);
        left: 50%;
        top: 18vh;
    }
    #title-page-categorie h2 {
        font-size: 7vw;
    }
    #title-page-categorie h2.visible {
        transform: translateY(-5vh);
    }
    #title-page-categorie .image {
        opacity: 0;
        transform: translate(0) rotateZ(0deg);
        margin: 2vw 4vw;
        display: none;
    }
}

@media only screen and (max-width: 1024px) {
    #title-page-categorie h2 {
        font-size: 5vw;
    }
}

@media only screen and (max-width: 990px) {
    #title-page-categorie h2 {
        font-size: 7vw;
    }
}


/***
*
*  PAGES
*
*/

#main-body {
    position: absolute;
    max-width: var(--width-main-body);
    max-height: var(--heigth-main-body);
    z-index: 3;
    width: 100%;
    height: 75vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#page-categorie {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 5;
}

#page-categorie .page {
    position: absolute;
    width: 100%;
    transform: translateY(-200vh);
    perspective-origin: center;
    perspective: 1200px;
    height: var(--heigth-main-body);
}

#page-categorie .page h2.title {
    font-family: 'Roboto';
    text-transform: uppercase;
    font-size: 9vh;
    margin: 0px;
    color: var(--yellow-text);
    transition: .5s;
    transform: rotateZ(-90deg) translateY(-130%) translateX(-100%);
    position: absolute;
    transform-origin: left;
    opacity: 0;
    transition: 0.5s;
}

#page-categorie .page h2.title.active-page {
    opacity: 1;
    transition: 0.5s;
    transform: rotateZ(-90deg) translateY(-100%) translateX(-100%);
    margin: 0;
}

#page-categorie .page[data-id="books"] h2 {
    font-size: 7vh;
}

#page-categorie .page[data-id="gifts"] h2 {
    font-size: 8vh;
}

#page-categorie .page img.active-page {
    opacity: 1;
    transition: 5s;
}

#page-categorie .page.active-page {
    transform: translateY(0);
}

#page-categorie .page h5 {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    color: white;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    /* margin-top: -15px; */
    opacity: 0;
    transition: 0.5s;
    text-align: center;
    /* bottom: 0; */
}

#page-categorie .page .subtitle.active-page {
    opacity: 1;
    transition: 0.5s;
}

#page-categorie .page .subtitle.active-page.subpage {
    opacity: 0;
    transition: 0.5s;
}

#page-categorie .page .info .title {
    opacity: 0;
    transition: 0.5s;
    font-size: 20px;
    color: var(--yellow-text);
    transform: translateX(-50%) translateY(-50px);
}

#page-categorie .page .info .title.subpage {
    opacity: 1;
    transition: 1s;
    font-size: 36px;
    color: var(--yellow-text);
    transform: translateX(-50%) translateY(0px);
}

#page-categorie .page.active-page .wrap li[data-subpage-id] {
    transition: 0.5s;
    opacity: 1;
    transform: translateY(0px);
}

@media only screen and (max-width: 1190px) {
    #main-body {
        height: 65vh;
    }
    #page-categorie .page {
        overflow-y: scroll;
        overflow-x: hidden;
        height: 65vh;
        padding: 0px 10px;
    }
    .wrap {
        flex-direction: column;
        flex-wrap: wrap;
    }
}

@media only screen and (max-width:1024px) {
    #page-categorie .page {
        overflow-y: unset;
        overflow-x: unset;
    }
    #page-categorie .wrap li[data-subpage-id] {
        margin: 0px auto 10px auto;
    }
    #page-categorie .wrap li[data-subpage-id] div {
        font-size: 16px;
        border: 1.5px solid var(--yellow-text);
    }
}

@media only screen and (max-width: 990px) {
    #page-categorie .page {
        /* overflow-y: scroll; */
        /* overflow-x: hidden; */
        height: 65vh;
        padding: 0px 10px;
    }
}


/***
*
*  SUB PAGE
*
*/

.wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    transition: 0.5s;
}

.wrap.subpage {
    transition: 0.3s;
    transform: rotateY(73deg) translateZ(-567px) !important;
    opacity: 0;
}

.wrap ul {
    list-style: none;
    padding: 30px 0px;
    text-align: center;
    width: 100%;
    max-width: 400px;
}

.wrap li {
    position: relative;
}

.wrap li.title {
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 500;
    text-transform: uppercase;
    color: white;
    padding-bottom: 25px;
    position: relative;
}

.wrap li[data-subpage-id] {
    position: relative;
    text-align: center;
    margin: 0px auto 20px auto;
    cursor: pointer;
    opacity: 0;
    transition: 0.5s;
    transform: translateY(-20px);
    width: 100%;
    max-width: 360px;
    z-index: 10;
    transition: 0.5s;
}

.wrap li[data-subpage-id] div {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--yellow-text);
    border: 3px solid var(--yellow-text);
    background-image: url('/wp-content/themes/photoNC/images/3x3-black.gif');
    background-repeat: repeat;
    background-position: 50% 0;
    height: 100%;
    padding: 8px 10px;
    border-radius: 5px;
}

.wrap li[data-subpage-id] div:before {
    content: " ";
    position: absolute;
    width: 50px;
    height: 50px;
    border: 5px solid white;
    top: -27px;
    left: -27px;
    z-index: 5;
    opacity: 0;
}

.wrap li[data-subpage-id] div:hover:before {
    opacity: 1;
    transition: 1s;
    transition-delay: 0.1s !important;
}

.wrap li[data-subpage-id] div:hover {
    transition: 0.5s;
    background: var(--yellow-text-t);
    transition-delay: 0s !important;
    color: black;
    transform: translateY(0px) skew(10deg) !important;
}

@media only screen and (max-width: 1024px) {
    #page-categorie .wrap li.title {
        font-size: 3vmax;
        padding-bottom: 10px;
    }
}

@media only screen and (max-width: 768px) {
    #main-body .wrap li[data-subpage-id] div {
        font-size: 2v2.4vwmax;
        padding: 1vh;
    }
}

@media only screen and (max-width: 768px) {
    #page-categorie .page h5 {
        position: relative;
        margin: 20px 0px;
    }
    .wrap {
        position: relative;
        overflow-y: scroll;
        overflow-x: hidden;
        max-height: 55vh;
        flex-wrap: wrap;
        padding: 0 10px;
    }
    .wrap ul {
        padding: 0;
    }
}


/***
*
*  INFOS
*
*/

#page-categorie .info {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 0%;
    height: 0%;
    z-index: 9;
    opacity: 0;
    transform: translateX(200vw);
}

#page-categorie .info.active-info {
    opacity: 1;
    width: 100%;
    height: var(--heigth-main-body);
    transform: translateX(0);
}

#page-categorie .info [data-slug] {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: translateX(105vw);
    transition: 1s;
}

#page-categorie .info [data-slug].active-info {
    transform: translateX(0vw);
    transition: .3s;
}

#page-categorie .info .textfield {
    position: relative;
    width: 65%;
    height: 75%;
    /* border: 1px solid var(--yellow-text); */
    overflow-y: scroll;
    /* margin: auto; */
    position: relative;
    margin-top: 4%;
    left: 50%;
    transform: translate(-50%) scale(0.5);
    opacity: 0;
    padding: 20px 30px;
    font-family: 'Montserrat', sans-serif;
    color: white;
    /* text-transform: uppercase; */
    background: #d7b13757;
    background-image: url('/wp-content/themes/photoNC/images/3x3-black.gif');
    background-repeat: repeat;
    background-position: 50% 0;
}

#page-categorie .info .textfield a {
    text-decoration: underline;
}

#page-categorie .info .textfield p {
    font-size: 16px!important;
}

#page-categorie .info .textfield h3 {
    font-size: 24px;
    font-weight: 500;
}

#page-categorie .info .textfield li {
    margin-bottom: 20px;
    font-size: 18px;
}

#page-categorie .info .textfield.subpage {
    transition: 0.5s;
    transform: translate(-50%) scale(1);
    opacity: 1;
}
#page-categorie .info .textfield.subpage img{
    border-radius: 6px;
    box-shadow: 3px 6px 12px #000000bf;
    margin-bottom: 15px;
    margin-left: 15px;
}
#page-categorie .info .textfield.subpage * {
    position: relative;
}

#page-categorie .info .button {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    bottom: 0px;
    width: 65%;
    left: 50%;
    transform: translate(-50%) translateY(60px);
    opacity: 0;
}

#page-categorie .info .button * {
    margin: 10px 0px;
}

#page-categorie .info .button.subpage {
    transition: 0.5s;
    transform: translate(-50%) translateY(0);
    opacity: 1;
}

#page-categorie .info .button .right,
#page-categorie .info .button .left {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    max-width: 320px;
    width: 100%;
    text-align: center;
    color: var(--yellow-text);
    border: 3px solid var(--yellow-text);
    background-image: url(/wp-content/themes/photoNC/images/3x3-black.gif);
    background-repeat: repeat;
    background-position: 50% 0;
    height: 100%;
    padding: 15px 10px;
    cursor: pointer;
    border-radius: 7px;
    overflow: hidden;
}

#page-categorie .info .button .left {
    padding: 15px 50px 15px 100px;
}

#page-categorie .info .button .left:before {
    content: "";
    position: absolute;
    width: 55px;
    height: 55px;
    background: var(--yellow-text);
    top: 0;
    left: 0;
}

#page-categorie .info .button .left:after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background: url(/wp-content/themes/photoNC/images/step.png);
    background-repeat: no-repeat;
    top: 11px;
    left: 12px;
    transform: rotate(180deg);
    background-size: contain;
}

#page-categorie .info .button .left:hover:after {
    transform: rotate(180deg);
}

#page-categorie .info .button .right {
    padding: 15px 100px 15px 50px;
}

#page-categorie .info .button .right:before {
    content: "";
    position: absolute;
    width: 61px;
    height: 53px;
    background: var(--yellow-text);
    top: 0;
    right: 0;
}

#page-categorie .info .button .right:after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background: url('/wp-content/themes/photoNC/images/step.png');
    background-repeat: no-repeat;
    background-size: contain;
    top: 11px;
    right: 12px;
}

#page-categorie .info .image {
    position: absolute;
    right: 1vw;
    top: 12vh;
}

@media only screen and (max-width:1440px) {
    #page-categorie .page .info .title.subpage {
        font-size: 16px;
    }
    #page-categorie .info .textfield,
    #page-categorie .info .button {
        width: 95%;
    }
    #page-categorie .info .image {
        right: 1vw;
        top: 15vh;
    }
}

@media only screen and (max-width:1024px) {
    #page-categorie .info .textfield {
        height: 65%;
    }
}

@media only screen and (max-width:768px) {
    #page-categorie .info .image {
        display: none;
    }
    #page-categorie .info .button .right,
    #page-categorie .info .button .left {
        max-width: 42vw;
        font-size: 3vw;
    }
    #page-categorie .info .button .left {
        padding: 15px 50px 15px 100px;
    }
    #page-categorie .info .button .left:before,
    #page-categorie .info .button .left:after,
    #page-categorie .info .button .right:before,
    #page-categorie .info .button .right:after {
        display: none;
    }
    #page-categorie .info .button .right,
    #page-categorie .info .button .left {
        padding: 10px 0;
        border: 1.5px solid var(--yellow-text);
    }
    #page-categorie .info .textfield h2 {
        font-size: 16px;
    }
}


/***
*
*  PAGE PACKS
*
*/

#info-pack ul,
#menu-pack ul {
    display: flex;
    flex-direction: row;
    font-family: 'Roboto';
    text-transform: uppercase;
    font-size: 2vw;
    color: white;
    font-weight: 500;
    list-style: none;
    padding: 0;
    margin: 0;
}

#menu-pack ul {
    position: absolute;
    top: 20vh;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 99;
    justify-content: center;
    font-size: 1.8vw;
}

#info-pack ul .btn-pack-menu,
#menu-pack ul .btn-pack-menu {
    position: relative;
    padding: 0px 30px;
    cursor: pointer;
}

#info-pack ul .btn-pack-menu:after,
#menu-pack ul .btn-pack-menu:after {
    content: "|";
    position: absolute;
    right: 0;
    margin-top: -4px;
    color: var(--yellow-text);
    font-weight: bold;
}

#info-pack ul .btn-pack-menu:last-child:after,
#menu-pack ul .btn-pack-menu:last-child:after {
    display: none;
}

#info-pack ul .btn-pack-menu:hover,
#menu-pack ul .btn-pack-menu:hover {
    color: var(--yellow-text);
    /* border-bottom: 3px solid var(--yellow-text); */
}

#info-pack ul .btn-pack-menu.active,
#menu-pack ul .btn-pack-menu.active {
    color: var(--yellow-text);
}

#wrap-info-packs {
    position: absolute;
    width: var(--width-main-body);
    height: var(--heigth-main-body);
    z-index: 10;
}

#info-pack {
    display: block;
}

#info-pack h2.title {
    font-family: 'Roboto';
    text-transform: uppercase;
    font-size: 45px;
    margin: 0px;
    color: white;
    margin-top: -22px;
    transition: .5s;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    font-weight: 200;
}

#info-pack h3.subtitle {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 19px;
    color: var(--yellow-text);
    transition: .5s;
    position: absolute;
    left: 50%;
    bottom: -10%;
    transform: translate(-50%);
    font-weight: 400;
}

#info-pack .wrap-menu-pack {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    margin-top: 50px;
    z-index: 12;
}

#wrap-info-packs .info-pack {
    transform: translateX(100vw);
}

#wrap-info-packs .info-pack.active {
    transform: translateX(0);
}

#wrap-info-packs .info-pack h2.title {
    font-family: 'Roboto';
    text-transform: uppercase;
    font-size: 4vmax;
    font-weight: bold;
    margin: 0px;
    color: var(--yellow-text);
    margin-top: -5px;
    transition: .5s;
    transform: rotateZ(-90deg) translateY(-50%);
    position: absolute;
    transform-origin: left;
    margin-left: -54%;
    margin-top: 68.5%;
    opacity: 0;
    transition: 0.5s;
    text-align: center;
    width: var(--width-main-body);
}

#wrap-info-packs .info-pack.active h2.title {
    opacity: 1;
    margin-left: -52%;
    transition: 3s;
    transform: rotateZ(-90deg) translateY(-50%);
}

#wrap-info-packs .achat,
#wrap-info-packs .info {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-top: 10%;
    width: 100%;
    perspective-origin: center;
    perspective: 1200px;
}

#wrap-info-packs .info {
    position: absolute;
    transform: translateX(0vw);
    transition: 0.5s;
}

#wrap-info-packs .info.active {
    transform: translateX(-100vw);
    transition: 0.5s;
}

#wrap-info-packs .achat {
    position: absolute;
    transform: translateX(100vw);
    transition: 0.5s;
}

#wrap-info-packs .achat.active {
    transform: translateX(0vw);
    transition: 0.5s;
}

#wrap-info-packs .achat .retour {
    position: absolute;
    left: 0;
    padding-left: 2%;
    cursor: pointer;
}

#wrap-info-packs .info-pack.active .info .image {
    opacity: 1;
    transform: translateX(0px);
    transition: .7s;
    width: 25%;
}

#wrap-info-packs .info-pack.active .info .image p {
    font-size: 14px;
    text-transform: initial;
    margin-bottom: 7px;
}

#wrap-info-packs .info-pack .info .image {
    opacity: 0;
    transform: translateX(-150px);
    transition: .5s;
}

#wrap-info-packs .info .commande {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotateX(90deg);
    transition: .5s;
    opacity: 0;
}

#wrap-info-packs .info-pack.active .info .commande {
    opacity: 1;
    transform: rotateX(0deg);
    transition: 1s;
}

#wrap-info-packs .commande .title {
    font-family: 'Roboto', sans-serif;
    font-size: 3.5vw;
    font-weight: bold;
    margin-bottom: 12%;
}

#wrap-info-packs .commande .price {
    display: flex;
    flex-direction: row;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: var(--yellow-text);
    margin-bottom: 2%;
}

#wrap-info-packs .commande .price span:nth-child(1) {
    font-size: 100px;
}

#wrap-info-packs .commande .price span:nth-child(2) {
    font-size: 60px;
}

#wrap-info-packs .commande .text {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    margin-bottom: 12%;
}

#wrap-info-packs .button .right {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    /* max-width: 320px; */
    width: 100%;
    text-align: center;
    color: var(--yellow-text);
    border: 3px solid var(--yellow-text);
    background-image: url(/wp-content/themes/photoNC/images/3x3-black.gif);
    background-repeat: repeat;
    background-position: 50% 0;
    height: 100%;
    padding: 15px 10px;
    cursor: pointer;
}

#wrap-info-packs .button .right {
    padding: 15px 100px 15px 50px;
}

#wrap-info-packs .button .right:before {
    content: "";
    position: absolute;
    width: 55px;
    height: 55px;
    background: var(--yellow-text);
    top: 0;
    right: 0;
}

#wrap-info-packs .button .right:after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background: url(/wp-content/themes/photoNC/images/step.svg);
    top: 13px;
    right: 10px;
}

#wrap-info-packs .details {
    position: relative;
    width: 27%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    padding: 30px 15px;
    text-align: center;
    max-height: 470px;
    overflow-y: scroll;
}

#wrap-info-packs .details li {
    padding: 0px 5%;
}

#wrap-info-packs .formulaire {
    width: 25%;
}

#wrap-info-packs .formulaire ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
}

#wrap-info-packs .formulaire ul li {
    margin-bottom: 20%;
}

#wrap-info-packs .formulaire input {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    /* max-width: 320px; */
    width: 100%;
    color: var(--yellow-text);
    border: 3px solid var(--yellow-text);
    background: rgba(215, 177, 55, 0.19);
    height: 100%;
    padding: 15px 10px;
    cursor: pointer;
}

#wrap-info-packs .formulaire input::placeholder {
    color: white;
}

#wrap-info-packs .description {
    width: 25%;
    position: relative;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    padding: 30px 15px;
    text-align: center;
    max-height: 470px;
    overflow-y: scroll;
}

#wrap-info-packs .format {
    width: 25%;
    position: relative;
    height: 100%;
    background-color: rgba(218, 218, 218, 0.14);
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    padding: 30px 15px;
    text-align: center;
    max-height: 470px;
    overflow-y: scroll;
}

#wrap-info-packs .format .format-col {
    display: flex;
    flex-direction: column;
}

#wrap-info-packs .format .format-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 5%
}

#wrap-info-packs .format .format-col ul:nth-child(1) li {
    font-size: 18px !important;
}

#wrap-info-packs .format .format-row li:nth-child(1),
#wrap-info-packs .format .format-row li:nth-child(3) {
    width: 40%;
    font-size: 14px;
    font-weight: 300;
    ;
}

#wrap-info-packs .format .format-row li:nth-child(1) {
    text-align: left;
}

#wrap-info-packs .format .format-row li:nth-child(3) {
    text-align: right;
}

#wrap-info-packs .format hr {
    width: 50px;
    height: 2px;
    margin: 0px 10px;
    margin-top: 10px;
}

@media only screen and (max-width: 1440px) {
    #wrap-info-packs {
        overflow-y: scroll;
        overflow-x: hidden;
    }
    #wrap-info-packs .achat,
    #wrap-info-packs .info {
        flex-wrap: wrap;
    }
    #wrap-info-packs .info .image {
        width: 50%;
        order: 0;
    }
    #wrap-info-packs .info .commande {
        order: 1;
        width: 50%;
    }
    #wrap-info-packs .info .format {
        width: 100%;
        order: 2;
        margin: 30px 0px;
        max-height: none;
    }
    #menu-pack ul {
        bottom: 10vh;
        top: unset;
    }
    #wrap-info-packs .info-pack.active h2.title {
        display: none;
    }
    #wrap-info-packs .achat {
        padding: 20px;
    }
    #wrap-info-packs .formulaire {
        width: 100%;
        order: 0;
        margin-bottom: 15px;
    }
    #wrap-info-packs .description,
    #wrap-info-packs .details {
        width: 50%;
        order: 1;
        margin-bottom: 15px;
    }
    #wrap-info-packs .formulaire ul li {
        margin-bottom: 15px;
    }
}

@media only screen and (max-width: 1190px) {
    #wrap-info-packs {
        height: 60vh;
        width: 100%;
        margin: 30px 0px 00px 0px;
        padding: 0px 20px;
    }
    #wrap-info-packs .achat,
    #wrap-info-packs .info {
        margin-top: 30px;
    }
    #info-pack h2.title {
        font-size: 5vw;
    }
}

@media only screen and (max-width: 990px) {
    #wrap-info-packs .commande .price span:nth-child(1) {
        font-size: 80px;
    }
    #menu-pack ul {
        font-size: 2.5vw;
        text-align: center;
    }
    #wrap-info-packs .info .image {
        width: 100%;
        order: 1;
        margin: 30px 0px;
    }
    #wrap-info-packs .info .commande {
        order: 0;
        width: 100%;
        margin: 30px 0px;
    }
    #wrap-info-packs .commande .title {
        font-size: 7vw;
        margin: 30px 0px;
    }
    #wrap-info-packs .commande .text {
        margin: 30px 0px;
    }
    #wrap-info-packs .info-pack.active .info .image {
        width: 100%;
        text-align: center;
    }
    #wrap-info-packs .commande .price {
        font-size: 7vw;
    }
    #wrap-info-packs .commande .price span {
        font-size: 5vw;
    }
    #wrap-info-packs .description,
    #wrap-info-packs .details {
        width: 100%;
    }
    #wrap-info-packs .details,
    #wrap-info-packs .description {
        overflow-y: unset;
        max-height: unset;
    }
    #wrap-info-packs .achat {
        padding: 0px;
    }
}

@media only screen and (max-width: 600px) {
    #menu-pack ul {
        font-size: 4vw;
        bottom: 5vh;
    }
    #wrap-info-packs .achat,
    #wrap-info-packs .info {
        margin: 0;
    }
    #wrap-info-packs .commande .title {
        font-size: 10vw;
        margin: 20px 0px 10px 0px;
    }
    #wrap-info-packs .commande .price {
        font-size: 10vw;
    }
    #wrap-info-packs .commande .text {
        text-align: center;
    }
}


/**
*   BOUTIQUE
*
*/

#menu-boutique {
    position: relative;
    z-index: 6;
    height: 100%;
    width: 100%;
}

#menu-boutique h2.title {
    font-family: 'Roboto';
    text-transform: uppercase;
    font-size: 45px;
    margin: 0px;
    color: white;
    margin-top: -22px;
    transition: .5s;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    font-weight: 200;
    z-index: 10;
    text-shadow: 4px 6px 9px black;
}

#menu-boutique .content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}

#menu-boutique .content .wrap-content {
    display: grid;
    grid-template-columns: 45% 45%;
    grid-template-rows: 50%;
    gap: 15px;
    padding: 50px 20px 0px;
}

#menu-boutique .content .item-content {
    position: relative;
    /* border: 3px solid #ffd331; */
    padding: 10px;
    /* text-shadow: 1px 3px 6px black; */
    /* background: #ffffff; */
    color: white;
    backdrop-filter: blur(6px);
}

#menu-boutique .content .item-content:before {
    content: "";
    top: 0;
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 300px 300px 0 0;
    border-color: #464651 transparent transparent transparent;
    z-index: 0;
}

#page-categorie .info .textfield:before {
    content: "";
    top: 0;
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 300px 300px 0 0;
    border-color: #464651 transparent transparent transparent;
    z-index: 0;
}

#menu-boutique .wrap-content-item {
    position: relative;
    height: 100%;
    width: 100%;
    color: white;
    padding: 15px;
}

#menu-boutique .wrap-content-item .background {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 40vh;
    /* filter: brightness(1.4); */
    box-shadow: 4px 2px 14px 3px #00000069;
    border-radius: 5px;
}

#menu-boutique .wrap-content-item a img {
    box-shadow: none;
}

#menu-boutique .wrap-content-item img {
    /* border: 3px solid #ffd331; */
    position: relative;
    top: 0;
    z-index: -1;
    overflow: hidden;
    box-shadow: 3px 5px 10px 4px #000000bd;
    filter: brightness(1.2);
    transition: 0.3s;
    margin: 5px 5px 20px 5px;
    object-fit: cover;
    aspect-ratio: 16/9;
    height: max-content;
}

#menu-boutique .wrap-content-item img:hover {
    filter: brightness(1);
    transition: 0.3s;
}

#menu-boutique .wrap-content-item h3 {
    padding-bottom: 20px;
    font-size: 30px;
    color: white;
    text-transform: uppercase;
    color: #ffd331;
}

#menu-boutique .wrap-content-item p {
    font-size: 16px;
    line-height: 22px;
    position: relative;
}

@media(max-width: 960px) {
    #menu-boutique .content .wrap-content {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: unset;
        gap: 0%;
        padding: 0;
    }
    .wrap-content-item img {
        max-width: unset;
        width: 100%;
    }
    #menu-boutique h2.title {
        font-size: 5vw;
    }
}


/**
*   CONTACT
*
*/

#menu-contact {
    position: relative;
    z-index: 6;
}

#menu-contact h2.title {
    font-family: 'Roboto';
    text-transform: uppercase;
    font-size: 45px;
    margin: 0px;
    color: white;
    margin-top: -22px;
    transition: .5s;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    font-weight: 200;
    z-index: 10;
}

#wrap-contact {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-content: stretch;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    perspective-origin: center;
    perspective: 1200px;
}

#wrap-contact .map,
#wrap-contact .formulaire-contact,
#wrap-contact .info {
    position: relative;
    top: 0;
    left: 0;
    width: 33%;
}

#wrap-contact:nth-child(1) {
    order: 1;
    flex: 1 1 auto;
    align-self: stretch;
}

#wrap-contact:nth-child(2) {
    order: 2;
    flex: 1 1 auto;
    align-self: stretch;
}

#wrap-contact:nth-child(3) {
    order: 3;
    flex: 1 1 auto;
    align-self: stretch;
}

#wrap-contact .info {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    list-style: none;
    ;
    margin: 0;
    padding: 0;
    transform: rotateY(0deg);
    transition: 0.3s;
    order: 0;
}

#wrap-contact .info:hover {
    transition: 1s;
    transform: rotateY(24deg);
}

#wrap-contact .info ul:nth-child(1) li:nth-child(n+2) {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: white;
}

#wrap-contact .info ul:nth-child(2) li:nth-child(1) {
    font-family: 'Montserrat', sans-serif;
    font-size: 2vw;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}

#wrap-contact .info ul:nth-child(2) li:nth-child(n+2) {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: white;
}

#wrap-contact .info ul:nth-child(2) li span:nth-child(12) {
    text-align: left;
}

#wrap-contact .info ul:nth-child(2) li span:nth-child(2) {
    text-align: left;
    width: 180px;
}


/* #wrap-contact .info ul:nth-child(2) li:nth-child(n+2) span {
    padding: 0px 20px;
} */

#wrap-contact .info ul:nth-child(2) li:nth-child(n+2) {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#wrap-contact ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    list-style: none;
    ;
    margin: 0;
    padding: 50px 20px;
}

#wrap-contact .info,
#wrap-contact .map,
#wrap-contact .formulaire-contact {
    margin: 0px 20px;
}

#wrap-contact .map {
    order: 1;
}

#wrap-contact .formulaire-contact {
    order: 2;
}

#wrap-contact input,
#wrap-contact textarea {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    /* max-width: 320px; */
    width: 100%;
    color: var(--yellow-text);
    border: 3px solid var(--yellow-text);
    background: rgba(215, 177, 55, 0.19);
    height: 100%;
    padding: 15px 10px;
    cursor: pointer;
}

#wrap-contact textarea::placeholder,
#wrap-contact input::placeholder {
    color: white;
}

#wrap-contact .button .right {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    /* max-width: 320px; */
    width: 100%;
    text-align: center;
    color: var(--yellow-text);
    border: 3px solid var(--yellow-text);
    background-image: url(/wp-content/themes/photoNC/images/3x3-black.gif);
    background-repeat: repeat;
    background-position: 50% 0;
    height: 100%;
    padding: 15px 10px;
    cursor: pointer;
}

#wrap-contact .map-image {
    position: relative;
    /* background-image: url(/wp-content/themes/photoNC/images/3x3-black.gif); */
    background-repeat: repeat;
    background-position: 50% 0;
}

#wrap-contact .map-image .carte {
    width: 100%;
    animation: rotate360 30s linear infinite;
    /* transform: rotateX(63deg) rotateZ(0deg); */
}

#wrap-contact .map-image .marker {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 45%;
    top: 37%;
    color: white;
    fill: white;
}

#wrap-contact .formulaire-contact ul li:nth-child(1) {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: white;
    text-align: center;
}

#wrap-contact .formulaire-contact {
    display: grid;
    grid-auto-flow: row;
    align-items: center;
    transform: rotateY(0deg);
    background-image: url(/wp-content/themes/photoNC/images/3x3-black.gif);
    background-repeat: repeat;
    background-position: 50% 0;
    transition: 0.3s;
}

#wrap-contact .formulaire-contact:hover {
    /* transition: 1s;
    transform: rotateY(-24deg); */
}

#wrap-contact .formulaire-contact ul li {
    margin-bottom: 20px;
}

#wrap-contact .formulaire-contact ul li:nth-child(2) {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: white;
}

@media only screen and (max-width: 1440px) {
    #wrap-contact {
        justify-content: flex-start;
        flex-direction: row;
        overflow-y: scroll;
        overflow-x: hidden;
        height: 65vh;
        flex-wrap: wrap;
    }
    #wrap-contact .info img {
        width: 100%;
        max-width: 384px;
    }
    #wrap-contact .info ul:nth-child(2) {
        max-width: 500px;
        left: 50%;
        transform: translateX(-50%);
        position: relative;
    }
    #wrap-contact .info ul:nth-child(2) li:nth-child(1) {
        margin-bottom: 20px;
    }
    #wrap-contact .map,
    #wrap-contact .formulaire-contact,
    #wrap-contact .info {
        width: 100%;
        margin: 0px 0px;
    }
    #menu-contact h2.title {
        font-size: 4vw;
    }
    #wrap-contact .info {
        margin-top: 50px;
        order: 1
    }
    #wrap-contact .info li {
        text-align: center;
    }
    #wrap-contact .formulaire-contact {
        order: 2
    }
    #wrap-contact .map {
        order: 3
    }
}

@media only screen and (max-width: 768px) {
    #wrap-contact .info ul:nth-child(2) li:nth-child(1) {
        font-size: 20px;
    }
}

.closeWindow {
    position: absolute;
    width: 50px;
    height: 50px;
    background-image: url('/wp-content/themes/photoNC/images/retour.svg');
    background-repeat: repeat;
    background-position: 50% 0;
    margin: 30px 30px;
    cursor: pointer;
    z-index: 10;
}

#page-paiement h2 {
    font-family: 'Roboto';
    text-transform: uppercase;
    font-size: 45px;
    margin: 0px;
    color: white;
    margin-top: -22px;
    transition: .5s;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    font-weight: 200;
}

@media (max-width: 768px) {
    #page-paiement h2 {
        font-size: 4vw;
    }
}

#page-paiement .info-client {
    color: var(--yellow-text);
}

#page-paiement p {
    margin-top: 20px;
}

#page-paiement .btn-paiement {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    max-width: 320px;
    width: 100%;
    text-align: center;
    color: var(--yellow-text);
    border: 3px solid var(--yellow-text);
    background-image: url(/wp-content/themes/photoNC/images/3x3-black.gif);
    background-repeat: repeat;
    background-position: 50% 0;
    height: 100%;
    padding: 15px 10px;
    cursor: pointer;
    background-color: transparent;
    transition: .5s;
}

#page-paiement .btn-paiement:hover {
    color: #ffffff;
    background-color: var(--yellow-text-t);
    border: 3px solid #ffffff;
    transition: .5s;
}

@media (max-width: 768px) {
    #page-paiement .btn-paiement {
        padding: 6px 10px;
    }
    #page-paiement p {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

#page-paiement .info-client {
    position: absolute;
    width: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: var(--yellow-text-t);
    color: white;
    padding: 20px;
}

@media (max-width: 768px) {
    #page-paiement .info-client {
        width: 90%;
    }
}


/** FOOTER */

footer {
    position: absolute;
    bottom: 0;
    z-index: 999;
    width: 100%;
}

footer ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: auto;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    padding: 10px 0px;
    ;
}

footer ul li {
    padding: 0px 30px;
}

footer #social {
    position: absolute;
    display: flex;
    flex-direction: row;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: white;
    width: 300px;
    align-items: center;
    margin-left: 50px;
    margin-top: -40px;
    cursor: pointer;
}

footer #social span {
    padding-left: 20px;
}

#icon-footer {
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 50px;
    height: 50px;
    transform: translateX(-50%) translateY(0);
    color: white;
    display: none;
    z-index: 9999;
    transition: 0.3s;
}

#icon-footer.active {
    transform: translateX(-50%) translateY(-215px);
    transition: 0.3s;
}


/** LOADER */

#loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999999;
}

#loader .left {
    position: absolute;
    top: 0;
    left: 0;
    width: 50vw;
    height: 100vh;
    background: rgb(0, 0, 0);
    z-index: 9999999999;
}

#loader .right {
    position: absolute;
    top: 0;
    right: 0vw;
    width: 50vw;
    height: 100vh;
    background: rgb(0, 0, 0);
    z-index: 9999999999;
}

#loader .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Roboto', sans-serif;
    font-size: 50px;
    font-weight: bold;
    color: white;
    z-index: 99999999999;
}

#loader .text.off {
    opacity: 0;
    transition: 0.5s;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}


/* Animation */

.scaledown {
    animation: scaledown 30s cubic-bezier(0.39, 0.575, 0.565, 1);
    animation-fill-mode: forwards;
}

@keyframes rotate360 {
    0% {
        transform: rotateX(63deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(63deg) rotateZ(360deg);
    }
}

@keyframes scaledown {
    0% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.fadeOut {
    animation: fadeOut 1s linear;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.fadeIn {
    animation: fadeIn 1s linear;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

[data-delay="100"] {
    transition-delay: .1s !important;
}

[data-delay="200"] {
    transition-delay: .2s !important;
}

[data-delay="300"] {
    transition-delay: .3s !important;
}

[data-delay="400"] {
    transition-delay: .4s !important;
}

[data-delay="500"] {
    transition-delay: .5s !important;
}

[data-delay="600"] {
    transition-delay: .7s !important;
}

[data-delay="700"] {
    transition-delay: .7s !important;
}

[data-delay="800"] {
    transition-delay: .8s !important;
}

[data-delay="900"] {
    transition-delay: .9s !important;
}

[data-delay="1000"] {
    transition-delay: 1s !important;
}

.bigtest {
    width: 100%;
    height: 500px;
}

@media (max-width: 1200px) {
    /* #main-body .big-btn img {
        margin: 0px 10px;
    } */
}

@media only screen and (max-width: 1190px) {
    #main-body {
        max-width: 95vw;
    }
    #nav #main-logo {
        top: 10px;
        left: 20px;
        z-index: 99999;
    }
    #nav .link-footer {
        display: block;
    }
    #nav .link-footer.copyrigth {
        position: absolute;
        bottom: 30px;
    }
    #nav .link-footer.copyrigth a {
        font-size: 10px;
    }
    #nav #bars-menu {
        display: block;
    }
    #nav #icon-mobile {
        display: block;
    }
    #nav #main-logo img {
        width: 10vw;
        min-width: 80px;
        max-width: 100px;
    }
    #nav .wrap-menu a {
        font-size: 3.5vw;
    }
    #nav .wrap-menu {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: start;
        list-style: none;
        z-index: 25;
        width: calc(100vw - 60px);
        height: 100vh;
        background: black;
        top: 0;
        left: 0;
        align-items: flex-start;
        padding-left: 15%;
        margin: 0;
        transform: translateX(-100vw);
        transition: 0.5s;
        padding-top: 15vh;
    }
    #nav .wrap-menu li {
        margin: 15px 0px;
        min-width: 400px;
    }
    #nav .wrap-menu.active {
        transform: translateX(0vw);
        transition: 0.5s;
    }
    #page-categorie .page h5 {
        font-size: 12px;
    }
    /* #icon-footer {
        display: block
    } */
    footer {
        display: none;
    }
    footer {
        transform: translateY(100vw);
        transition: 0.3s;
        position: absolute;
        bottom: 0px;
    }
    footer.active {
        transform: translateY(0);
        transition: 0.3s;
    }
    footer #main-footer {
        display: flex;
        flex-direction: column-reverse;
        padding: 20px 0px;
        background: rgba(0, 0, 0, 0.95);
    }
    footer #social {
        position: relative;
        margin: 0;
        width: 170px;
        left: 50%;
        transform: translateX(-50%);
    }
    footer ul {
        flex-direction: column;
        font-size: 15px;
        text-align: center;
    }
    footer ul li {
        margin-bottom: 10px;
    }
}

@media (max-width: 425px) {
    #nav .wrap-menu li {
        min-width: 250px;
    }
    #nav #icon-mobile {
        margin-right: 4%;
    }
    #nav .wrap-menu {
        padding-left: 1%;
    }
}

@media (max-height: 400px) {
    #page-categorie .page h2.title.active-page {
        margin-left: -22vw;
    }
    #page-categorie .page h2.title {
        font-size: 38px !important;
    }
    #page-categorie .page img {
        margin-left: -18px;
        width: 35px;
    }
}