/* defaults */

body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-size: 10pt !important;
    line-height: 1.2 !important;
    font-family: Next !important;
}

::selection {
    background-color: rgba(0, 0, 0, 0.25);
    color: white;
}

::-moz-selection {
    background-color: rgba(0, 0, 0, 0.25);
    color: white;
}

ol,
ul {
    list-style: none;
}

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

a :hover {
    z-index: 10000000;
}

.hidden {
    height: 0;
    display: none;
}

/* ———————————— FLEXBOX ———————————— */
.flex_container {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
    overflow-y: hidden;
    overflow-x: hidden;
}

/* A/MENU */
.flex_box_A {
    box-sizing: border-box;
    flex: 1 3 auto;
    width: 100vw;
    transition: 0.7s cubic-bezier(.6,.15,.16,1.01);
}

.logo_active {
    position: relative !important;
    transition: 0.7s cubic-bezier(.6,.15,.16,1.01);
    height: 98% !important;
    width: 98% !important;
    left: 0 !important;
    top: 0 !important;
    padding: 10px 10px 0;
}

/* B/RSF */
.flex_box_B {
    box-sizing: border-box;
    flex: 3 1 auto;
    width: 100vw;
    height: 100%;
    transition: 0.7s cubic-bezier(.6,.15,.16,1.01);
}

/* ———————————— CSSGRID ———————————— */
/* B/FACESHIFTER */
.grid_container_B {
    height: -webkit - calc(100% - 90px);
    height: calc(100% - 90px);
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr 1fr;
    gap: 5px 0;
    grid-template-areas: "INSTRUCTION-1 INSTRUCTION-2" "PANNELS FACES" "PANNELS FACES";
    margin-top: 10px;
}

.FACES {
    grid-area: FACES;
    position: relative;
    margin: 5px;
    opacity: 100%;
}

.FACES img {
    transition: 0.5s cubic-bezier(.6,.15,.16,1.01);
}

.FACES .translucent {
    opacity: 0;
    transition: 0.5s cubic-bezier(.6,.15,.16,1.01);
}

.PANNELS {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 50% 50%;
    gap: 0 0;
    grid-template-areas: "PANNEL-1 PANNEL-3" "PANNEL-2 PANNEL-3";
    grid-area: PANNELS;
    height: -webkit - calc(100% - 5px);
    height: calc(100% - 5px);
    position: relative;
}

.PANNEL-1 {
    grid-area: PANNEL-1;
    height: 100%;
}

.PANNEL-2 {
    grid-area: PANNEL-2;
    height: 100%;
}

.PANNEL-3 {
    grid-area: PANNEL-3;
    height: 100%;
}

.grey button:hover {
    background: rgba(0, 0, 0, 0.80);
    color: white;
    box-shadow: 0 0 0 transparent;
    border: 0 solid transparent;
    text-shadow: 0 0 0 transparent;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

.orange button:hover {
    background: rgba(255, 109, 0, 1);
    color: white;
    box-shadow: 0 0 0 transparent;
    border: 0 solid transparent;
    text-shadow: 0 0 0 transparent;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

.green button:hover {
    background: rgba(0,170,49, 1);
    color: white;
    box-shadow: 0 0 0 transparent;
    border: 0 solid transparent;
    text-shadow: 0 0 0 transparent;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

.INSTRUCTION-1 {
    grid-area: INSTRUCTION-1;
}
.INSTRUCTION-2 {
    grid-area: INSTRUCTION-2;
}

/* A/MENU */
.grid_container_A {
    display: grid;
    height: calc(100% - 40px);
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0 0;
    grid-template-areas: "LOGO" "MENU";
    align-content: space-between;
}
.LOGO {
    grid-area: LOGO;
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0 0;
    grid-template-areas: "img_logo";
    height: 100%;
}

.LOGO img {
    left: 5%;
    top: calc(5% + 20px);
    width: 90%;
    height: 90%;
    object-fit: contain;
    position: absolute;
    grid-area: img_logo;
}

.MENU {
    grid-area: MENU;
    align-self: end;
}

/* A/MENU */
.grid_container_C {
    background-color: white;
    margin-top: 10px;
    margin-right: 10px;
    display: grid;
    gap: 10px 10px;
    height: calc(100% - 90px);
    grid-template-columns: auto auto auto auto auto auto auto;
    overflow-y: scroll;
    overflow-x: hidden;

}

.grid_container_C img {
    width: 100%;
    cursor: pointer;
}

/* A/PROFILES_PANNEL */
.grid_container_pannel {
    position: absolute;
    transform: translate3d(-50%,-50%,0);
    top: 50%;
    left: 50%;
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 40px 1fr 1fr 1fr;
    gap: 0 0;
    grid-template-areas:
                        "HEADER HEADER"
                        "PANNEL_PORTRAIT PANNEL_INFO" 
                        "PANNEL_PORTRAIT PANNEL_INFO"
                        "PANNEL_ID PANNEL_ID";
    background-color: white;
    width: 55%;
    height: 75%;
    padding: 10px;
    z-index: 1000;
    opacity: 100%;
    transition: 0.5s cubic-bezier(.6,.15,.16,1.01);
}

.HEADER {
    grid-area: HEADER;
}

.PANNEL_PORTRAIT {
    grid-area: PANNEL_PORTRAIT;
    position: relative;
}

.PANNEL_PORTRAIT img {
    grid-area: PANNEL_PORTRAIT;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

.PANNEL_INFO {
    grid-area: PANNEL_INFO;
    margin: 5px;
}

.PANNEL_ID {
    grid-area: PANNEL_ID;
    margin-top: 5px;
    font-size: 3.7rem;
    align-self: end;
    text-align: center;
}

.grid_container_pannel img {
    width: 100%;
}

.profiles_pannel {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.blur_bg {
    position: fixed;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: 0.8s cubic-bezier(.6,.15,.16,1.01);
}

.orange_box {
    border: solid 1px rgba(255, 109, 0);
}

.green_box {
    border: solid 1px rgba(0,170,49);
}

.profiles_pannel header {
    position: absolute;
    top: -30%;
    left: -10px;
    width: calc(100% + 10px);
    z-index: 1001;
}

.profiles_pannel button {
    position: absolute;
    right: 12px;
    top: 12px;
}

.pannel_box {
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: 100%;
    top: 0;
    transition: 0.8s cubic-bezier(.6,.15,.16,1.01);
}

.hidden_pannel {
    top: 200%;
    transition: 0.8s cubic-bezier(.6,.15,.16,1.01);
    overflow: hidden;
    max-height: 0;
}

.hidden_blur {
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
}

.close {
    cursor: pointer;
}

/* —————— HANDLER —————— */
.handler {
    width: 0;
    padding: 0;
    flex: 0 0 auto;
}

.handler:before {
    font-size: 0;
    content: '';
    display: block;
    width: 0;
    height: 100vh;
    background: lightgray;
    transition: 0.7s cubic-bezier(.6,.15,.16,1.01);
}

.handler-active {
    padding-left: 10px;
}

/* ———————————— OTHER ———————————— */
p {
    display: inline;
}

button {
    color: inherit;
    font-family: inherit;
    text-align: inherit;
    font-size: inherit;
    margin: inherit;
    padding: inherit;
    background: transparent;
    box-shadow: 0 0 0 transparent;
    border: 0 solid transparent;
    text-shadow: 0 0 0 transparent;
    padding: 1px;
    display: inline;
    background: rgba(0, 0, 0, 0);
    transition: 0.2s ease-in-out;
}

button:active {
    outline: none;
    border: none;
}

.active_button_orange {
    background-color: rgba(255, 109, 0);
    color: white;
}

.active_button_green {
    background-color: rgba(0,170,49);
    color: white;
}

.active_button_grey {
    background-color: rgba(0, 0, 0, 0.80);
    color: white;
}

button:focus {
    outline: 0;
}

.box_hidden {
    width: 0;
}

header {
    background-color: black;
    color: white;
    align-self: flex-start;
    padding-top: 15px !important;
    padding-left: 10px !important;
    padding-bottom: 5px !important;
    height: 20px;
    width: 100%;
    cursor: crosshair;
}

.enter {
    position: absolute;
    transform: translate3d(-50%, -50%, 0);
    top: calc(50% + 20px);
    left: 50%;
    background-color: black;
    color: white;
    align-self: flex-start;
    padding: 12px 10px 11px;
    width: auto;
    cursor: crosshair;
    z-index: 1002;
    transition: 0.5s cubic-bezier(.6,.15,.16,1.01);
    opacity: 100%;
    animation-name: enter;
    animation-duration: 3s;
}

.enter:hover {
    background-color: rgba(0,170,49);
}

.enter_active {
    filter: blur(50px);
    transform: scale(0.1);
    opacity: 0;
    pointer-events: none;
    transition: 0.7s cubic-bezier(.6,.15,.16,1.01);
}

.pannel_header {
    color: rgba(0, 0, 0, 0.25);
    height: auto;
    width: auto;
    margin-top: 5px;
    margin-left: 5px !important;
    padding-top: 8px;
    margin-bottom: 10px;
    text-align: center;
    border: 1px solid;
    border-bottom: 0;
}

.overflow_menu {
    overflow-y: scroll;
    height: -webkit - calc(100% - 40px);
    height: calc(100% - 40px);
    margin-left: 5px;
}

.button_about_RIO {
    cursor: pointer;
}

.text_about_RIO {
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
    max-height: 10%;
    opacity: 100%;
    transition: 0.7s cubic-bezier(.6,.15,.16,1.01);
}

.text_hidden {
    height: 0;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0;
    transition: 0.7s cubic-bezier(.6,.15,.16,1.01);
    font-size: 1px;
}

.accordion_content {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    display: none;
    overflow-y: scroll;
}

/* ———————————— PORTRAIT/FACESHIFTER ———————————— */
.FACES img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    mix-blend-mode: darken;
}

/* ———————————— COLOR ———————————— */
/* BACKGROUND */
.orange_bg {
    background-color: rgba(255, 109, 0);
    transition: 0.7s cubic-bezier(.6,.15,.16,1.01);
}

.orange_bg_10 {
    background-color: rgba(255, 109, 0, 0.10);
    transition: 0.7s cubic-bezier(.6,.15,.16,1.01);
}

.green_bg {
    background-color: rgba(0,170,49);
}

.green_bg_10 {
    background-color: rgba(0,170,49, 0.10);
    transition: 0.7s cubic-bezier(.6,.15,.16,1.01);
}

.grey_bg {
    background-color: rgba(0, 0, 0, 0.80);
    transition: 0.7s cubic-bezier(.6,.15,.16,1.01);
}

.black_bg {
    background-color: black;
    color: white;
    transition: 0.7s cubic-bezier(.6,.15,.16,1.01);
}

/* COLOR */

.grey {
    color: rgba(0, 0, 0, 0.80);
}

.orange {
    color: rgba(255, 109, 0);
}

.green {
    color: rgba(0,170,49);
}

/* ———————————— FONT STYLE ———————————— */
.XS {
    font-family: Unica;
    font-weight: 500;
    font-size: 1rem;
}

/* ———————————— FONTS ———————————— */
@font-face {
    font-family: Next;
    src: url("../fonts/NEXTPanMonoThin.otf") format("opentype");
}

@font-face {
    font-family: Unica;
    src: url("../fonts/Unica77LL-Regular.otf") format("opentype");
    font-weight: 400;
}

@font-face {
    font-family: Unica;
    src: url("../fonts/Unica77LL-Medium.otf") format("opentype");
    font-weight: 500;
}

/* ———————————— ANIMATION ———————————— */

.overflow_menu p {
    animation-name: id_fade_in_out;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.logo_layer1_animation {
    animation-name: logo_1;
    animation-duration: 3s;
    animation-timing-function: cubic-bezier(.6,.15,.16,1.01);
}

.logo_layer2_animation {
    animation-name: logo_2;
    animation-duration: 3s;
    animation-timing-function: cubic-bezier(.6,.15,.16,1.01);
}

@keyframes id_fade_in_out {
    0% {
        opacity: 100%;
    }

    50% {
        opacity: 10%;
    }

    100% {
        opacity: 100%;
    }
}

@keyframes logo_1 {
    0% {
        opacity: 1%;
        filter: blur(40px);
        transform: scale(7) rotate(60deg);

    }

    80% {
        opacity: 100%;
        filter: blur(0px);
    }
}

@keyframes logo_2 {
    0% {
        opacity: 1%;
        filter: blur(30px);
        transform: scale(4) rotate(40deg);
    }

    80% {
        opacity: 100%;
        filter: blur(0px);
    }
}

@keyframes enter {
    0% {
        opacity: 1%;
        filter: blur(20px);
        transform: scale(20) rotate(30deg);

    }
    40% {
        opacity: 1%;
        filter: blur(20px);
        transform: scale(5) rotate(30deg);

    }

    100% {
        opacity: 100%;
        filter: blur(0px);

    }
}

@media only screen and (max-width : 1120px) {
    .grid_container_C {
        grid-template-columns: auto auto auto auto auto;
    }
}

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

    body {
        font-size: 8pt !important;
    }

    .grid_container_B {
        height: auto;
        grid-template-columns: auto;
        grid-template-rows: auto auto 100vh;
        grid-template-areas:"INSTRUCTION-1" "INSTRUCTION-2"
        "FACES";
    }

    .handler {
        display: none;
    }

    .PANNELS {
        grid-area: FACES;
        margin: 5px;
    }

    .FACES {
        position: static;
        margin: 0;
    }

    .FACES img {
        width: 100%;
        height: 111%;
        z-index: -1;
    }

    .flex_container {
        flex-direction: column;
        width: 100vw;
        overflow: unset;

    }

    .flex_box_A {
        width: auto;
    }

    .flex_box_B {
        height: auto;

    }

    .pannel_header {
        color: black;
        height: auto;
        width: auto;
        margin-top: 5px;
    }

    header {
        padding-left: 10px !important;
        width: auto;
    }

    .PANNELS .orange {
        color: black;
    }

    .PANNELS .grey {
        color: black;
    }

    .PANNELS .green {
        color: black;
    }

    .active_button_orange {
        background-color: black;
        color: white;
    }

    .active_button_green {
        background-color: black;
        color: white;
    }

    .box_hidden {
        width: unset;
    }

    .hidden {
        display: block;
        height: initial;
    }

    .overflow_menu .hidden {
        display: none;
        height: 0;
    }

    .logoimg {
        position: relative !important;
    }

    .LOGO {
        height: 50%;
    }

    .LOGO img {
        padding: 5px;
        height: 97% !important;
        width: 97% !important;
        left: 0 !important;
        top: 0 !important;
        padding: 5x 5px 0;
        object-fit: contain;
        position: relative;
        grid-area: img_logo;
    }

    .XS {
        margin: 10px;
        font-size: 0.8rem;
    }

    .flex_box_A .black_bg {
        background-color: rgba(255, 109, 0);
    }

    .mobile_bg {
        background-color: rgba(255, 109, 0);
    }

    .grey button:hover {
        background: black;
    }

    .orange button:hover {
        background: black;
    }

    .green button:hover {
        background: black;
    }

    .logo_layer1_animation {
        animation-name: none;
    }

    .logo_layer2_animation {
        animation-name: none;
    }

    .grid_container_C {
        height: auto;
        grid-template-columns: auto auto auto;
        overflow: unset;
        margin-left: 10px;
    }

    .pannel_box {
        position: fixed;
        z-index: 10002;
    }

    .grid_container_pannel {
        width: 90%;
        height: 90%;
        top: calc(50% + 40px);
    }

    .PANNEL_ID {
        font-size: 2rem;
        margin-bottom: 5%;
    }

    .enter {
        display: none;
    }
}