body {
    background: #fff;
}

.fp-bg {
    color: #000;
}

/* Menu */
#menu #sideMenu {
    background: rgba(255, 255, 255, 0);
}

#menu #sideMenu:hover,
#menu #sideMenu.toggleON {
    background: rgba(255, 255, 255, 0.2);
}

#menu #sideMenu #headerLogo-white {
    visibility: hidden;
    opacity: 0;
}

#menu #sideMenu #headerLogo {
    visibility: visible;
    opacity: 1;
}


#menu #sideMenu ul li a span span {
    background: #000;
}

#menu #sideMenu #ig i,
#menu #sideMenu #ig p,
#menu #sideMenu ul li a p,
#menu #projectMenu ul li a p {
    color: #000;
}

body.fp-viewing-Interface #menu #projectMenu:hover ul li:nth-child(1) a p,
body.fp-viewing-Charging #menu #projectMenu:hover ul li:nth-child(2) a p,
body.fp-viewing-Speaker #menu #projectMenu:hover ul li:nth-child(3) a p,
body.fp-viewing-Lens #menu #projectMenu:hover ul li:nth-child(4) a p,
body.fp-viewing-ExplodedView #menu #projectMenu:hover ul li:nth-child(5) a p,
body.fp-viewing-Ghost0 #menu #projectMenu:hover ul li:nth-child(6) a p,
body.fp-viewing-Ghost1 #menu #projectMenu:hover ul li:nth-child(6) a p,
body.fp-viewing-Ghost2 #menu #projectMenu:hover ul li:nth-child(6) a p,
body.fp-viewing-Ghost3 #menu #projectMenu:hover ul li:nth-child(6) a p,
body.fp-viewing-Ghost4 #menu #projectMenu:hover ul li:nth-child(6) a p,
body.fp-viewing-Strap #menu #projectMenu:hover ul li:nth-child(7) a p,
body.fp-viewing-Warning #menu #projectMenu:hover ul li:nth-child(8) a p,
body.fp-viewing-Turntable #menu #projectMenu:hover ul li:nth-child(9) a p,
#menu #projectMenu ul li a:hover p {
    color: #4cd8bd !important;
    opacity: 1;
}

#menu #projectMenu ul li a span span {
    background: #4cd8bd;
    border-color: #4cd8bd;
}

body.fp-viewing-Interface #menu #projectMenu ul li:nth-child(1) a span span,
body.fp-viewing-Charging #menu #projectMenu ul li:nth-child(2) a span span,
body.fp-viewing-Speaker #menu #projectMenu ul li:nth-child(3) a span span,
body.fp-viewing-Lens #menu #projectMenu ul li:nth-child(4) a span span,
body.fp-viewing-ExplodedView #menu #projectMenu ul li:nth-child(5) a span span,
body.fp-viewing-Ghost0 #menu #projectMenu ul li:nth-child(6) a span span,
body.fp-viewing-Ghost1 #menu #projectMenu ul li:nth-child(6) a span span,
body.fp-viewing-Ghost2 #menu #projectMenu ul li:nth-child(6) a span span,
body.fp-viewing-Ghost3 #menu #projectMenu ul li:nth-child(6) a span span,
body.fp-viewing-Ghost4 #menu #projectMenu ul li:nth-child(6) a span span,
body.fp-viewing-Strap #menu #projectMenu ul li:nth-child(7) a span span,
body.fp-viewing-Warning #menu #projectMenu ul li:nth-child(8) a span span,
body.fp-viewing-Turntable #menu #projectMenu ul li:nth-child(9) a span span {
    width: 10px;
    height: 10px;
    background: rgba(76, 216, 189, 0);
    border-width: 2px;
}

#langSwitch .checkLayer {
    background-color: rgba(76, 216, 189, 0) !important;
}

#langSwitch:hover .checkLayer {
    background-color: rgba(76, 216, 189, 1) !important;
}

body.fp-viewing-Interface .loaded #introProject {
    opacity: 0;
    filter: blur(50px);
    transition: all 0.75s ease-in-out;
    transform: scale(0.85);
    bottom: 15vh;
}

.ip-header .ip-loader svg path.ip-loader-circle {
    stroke: #4cd8bd;
}

#sectionZetaID .fp-bg,
#sectionNextProject .fp-bg,
#sectionNewProject .fp-bg,
#zProject #sectionNextProject video,
body.fp-viewing-NextProject,
body.fp-viewing-NewProject {
    background: #000;
}

#zProject video {
    background: #fff;
    height: 100vh;
}

body.fp-viewing-Interface #sectionProject h2:nth-child(1),
body.fp-viewing-Charging #sectionProject h2:nth-child(2),
body.fp-viewing-Speaker #sectionProject h2:nth-child(3),
body.fp-viewing-Lens #sectionProject h2:nth-child(4),
body.fp-viewing-ExplodedView #sectionProject h2:nth-child(5),
body.fp-viewing-Ghost0 #sectionProject h2:nth-child(6),
body.fp-viewing-Ghost1 #sectionProject h2:nth-child(6),
body.fp-viewing-Ghost2 #sectionProject h2:nth-child(6),
body.fp-viewing-Ghost3 #sectionProject h2:nth-child(6),
body.fp-viewing-Ghost4 #sectionProject h2:nth-child(6),
body.fp-viewing-Strap #sectionProject h2:nth-child(7),
body.fp-viewing-Warning #sectionProject h2:nth-child(8),
body.fp-viewing-Turntable #sectionProject h2:nth-child(9) {
    transform: translateX(0%);
    clip-path: inset(0 0 0 0%);
    opacity: 1;
}

body.fp-viewing-Interface #elementsProject .elementsCanvas #elementsSection1,
body.fp-viewing-Charging #elementsProject .elementsCanvas #elementsSection2,
body.fp-viewing-Speaker #elementsProject .elementsCanvas #elementsSection3,
body.fp-viewing-Lens #elementsProject .elementsCanvas #elementsSection4,
body.fp-viewing-Strap #elementsProject .elementsCanvas #elementsSection5 {
    opacity: 1;
    transition: all 1s ease-in-out;
}

body.fp-viewing-Interface .elementsCanvas #elementsSection1 .element,
body.fp-viewing-Charging .elementsCanvas #elementsSection2 .element,
body.fp-viewing-Speaker .elementsCanvas #elementsSection3 .element,
body.fp-viewing-Lens .elementsCanvas #elementsSection4 .element,
body.fp-viewing-Strap .elementsCanvas #elementsSection5 .element {
    opacity: 1;
    filter: blur(0);
    transition: all 1.2s .7s ease-in-out;
}

.elementsCanvas div .element {
    background-color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.075);
}

.elementsCanvas #elementsSection1 .element {
    left: 10%;
    bottom: 10%;
    width: 30%;
}

.elementsCanvas #elementsSection2 .element,
.elementsCanvas #elementsSection3 .element {
    right: 10%;
    top: 30%;
    width: 25%;
    bottom: unset;
}

.elementsCanvas #elementsSection4 .element {
    right: 10%;
    bottom: 10%;
    width: 30%;
}

.elementsCanvas #elementsSection5 .element {
    left: 18%;
    top: 20%;
}

#sectionProject h2 {
    color: #000
}

#mouse .light {
    display: none;
}

#mouse .dark {
    display: unset;
}


/* Tablet landscape */
@media screen and (max-width: 1180px) and (orientation: landscape) {

    #sectionSpeaker .fp-bg {
        display: flex;
        align-items: flex-end;
    }

    #sectionSpeaker .fp-bg img {
        object-fit: unset !important;
        max-height: unset;
        height: unset;
        width: 100vw !important;
    }

    #sectionLens .fp-bg img {
        object-fit: cover !important;
    }

    .elementsCanvas #elementsSection1 .element {
        left: unset;
        bottom: 0%;
        width: 50%;
    }

    .elementsCanvas #elementsSection3 .element {
        top: 20%;
    }

    .elementsCanvas #elementsSection4 .element {
        top: unset;
        bottom: 10%;
    }
}

/* Tablet portrait */
@media screen and (max-width: 850px) and (orientation: portrait) {

    #sectionSpeaker .fp-bg,
    #sectionLens .fp-bg,
    #sectionGhost0 .fp-bg {
        display: flex;
        align-items: flex-end;
    }

    #sectionSpeaker .fp-bg img,
    #sectionLens .fp-bg img {
        object-fit: unset !important;
        max-height: unset;
        height: unset;
        width: 100vw !important;
    }

    [id*="sectionGhost"] .fp-bg img {
        object-fit: cover !important;
    }

    #sectionGhost1 .fp-bg img {
        object-position: 15w;
    }

    #sectionWarning .fp-bg video {
        width: 90vw !important;
        height: unset !important;
    }

    .elementsCanvas {
        height: 100vh;
    }

    .elementsCanvas #elementsSection1 .element,
    .elementsCanvas #elementsSection2 .element,
    .elementsCanvas #elementsSection5 .element {
        left: unset;
        right: unset;
        top: unset;
        bottom: 10%;
        width: 75%;
    }

    .elementsCanvas #elementsSection3 .element,
    .elementsCanvas #elementsSection4 .element {
        right: unset;
        width: 50%;
        top: 30%;
        bottom: unset;
    }

    .elementsCanvas .element p {
        text-align: center;
    }
}

/* Phone landscape */
@media screen and (max-width: 700px) and (orientation: landscape) {
    .elementsCanvas #elementsSection1 .element {
        width: 60%;
        bottom: 15%;
    }
}

/* Phone portrait */
@media screen and (max-width: 500px) and (orientation: portrait) {
    #sectionGhost1 .fp-bg img {
        object-position: 27vw;
    }
}