:root {

    --bg-color: #FAFAFA;

    --text-color: #08285A;

    --border-color: #9A9A9A;

    --bg-secondary-color: #DADADA;

    --bg-secondary-color: #28446F;

    --primary-color: rgba(0, 0, 0, 1);

    --secondary-color: rgba(0, 0, 0, 0.5);

    --secondary-mobile-color: rgba(255, 255, 255, 0.5);

    --light-bg-color: rgba(0, 0, 0, 0.1);

    --dark-bg-color: rgba(255, 255, 255, 0.1);

    --light: #FAFAFA;

    --dark: #303030;

    --dark: #08285A;

    --orange: #DE761B;

    --orange-transparent: rgba(222, 118, 27, 0.4);

    --orange-vuoto: rgba(222, 118, 27, 0.3);

    --bg-shadow: rgba(250, 250, 250, 0.2);

    --text-shadow: rgba(8, 40, 90, 0.2);

}



[data-theme="light"] {

    --bg-color: #FAFAFA;

    --text-color: #08285A;

    --border-color: #9A9A9A;

    --bg-secondary-color: #DADADA;

    --primary-color: rgba(0, 0, 0, 1);

    --secondary-color: rgba(0, 0, 0, 0.5);

    --secondary-mobile-color: rgba(255, 255, 255, 0.5);

    --light-bg-color: rgba(0, 0, 0, 0.1);

    --dark-bg-color: rgba(255, 255, 255, 0.1);

    --light: #FAFAFA;

    --dark: #08285A;

    --dark: #303030;

    --orange: #DE761B;

    --orange-transparent: rgba(222, 118, 27, 0.4);

    --orange-vuoto: rgba(222, 118, 27, 0.3);

    --bg-shadow: rgba(250, 250, 250, 0.2);

    --text-shadow: rgba(8, 40, 90, 0.2);

}



[data-theme="dark"] {

    --bg-color: #08285A;

    --text-color: #FAFAFA;

    --border-color: #9A9A9A;

    --bg-secondary-color: #28446F;

    --primary-color: rgba(255, 255, 255, 1);

    --secondary-color: rgba(255, 255, 255, 0.5);

    --secondary-mobile-color: rgba(0, 0, 0, 0.5);

    --light-bg-color: rgba(255, 255, 255, 0.1);

    --dark-bg-color: rgba(0, 0, 0, 0.1);

    --light: #FAFAFA;

    --dark: #08285A;

    --orange: #DE761B;

    --orange-transparent: rgba(222, 118, 27, 0.4);

    --orange-vuoto: rgba(222, 118, 27, 0.4);

    --bg-shadow: rgba(8, 40, 90, 0.2);

    --text-shadow: rgba(250, 250, 250, 0.2);

}



* {

    box-sizing: border-box;

    outline: 0;

    border: 0;

    font-family: 'Poppins', sans-serif;

}



.cursorClick {

    cursor: pointer;

}



::-webkit-scrollbar {

    width: 5px;

}



/* Track */

::-webkit-scrollbar-track {

    border-radius: 10px;

}



/* Handle */

::-webkit-scrollbar-thumb {

    background: var(--orange);

    border-radius: 10px;

}



    /* Handle on hover */

    ::-webkit-scrollbar-thumb:hover {

        background: var(--orange);

    }



.orange {

    color: var(--orange);

}



.hoverOrange:hover {

    color: var(--orange) !important;

    opacity: 1 !important;

}



.hoverBorderOrange:hover {

    border: 2px solid var(--orange);

    opacity: 1 !important;

}



.hoverShadowOrange:hover {

    -webkit-box-shadow: 0 8px 12px -4px rgb(222 118 27 / 20%);

    box-shadow: 0 8px 12px -4px rgb(222 118 27 / 20%);

}



.weight100 {

    font-weight: 100;

}



.weight200 {

    font-weight: 200;

}



.weight300 {

    font-weight: 300;

}



.weight400 {

    font-weight: 400;

}



.weight500 {

    font-weight: 500;

}



.weight600 {

    font-weight: 600;

}



.weight700 {

    font-weight: 700;

}



.weight800 {

    font-weight: 800;

}



.weight900 {

    font-weight: 900;

}



.sizeBig {

    font-size: 30px;

}



.sizeMediumBig {

    font-size: 25px;

}



.sizeMedium {

    font-size: 20px;

}



.sizeMediumSmall {

    font-size: 18px;

}



.sizeNormal {

    font-size: 16px;

}



.sizeSmallNormal {

    font-size: 12px;

}



.sizeSmall {

    font-size: 10px;

}



.primaryButton {

    background-color: var(--orange);

    color: var(--light);

    padding: 3px 25px;

    border-radius: 10px;

    border: 2px solid var(--text-color);

}



.secondaryButton {

    background-color: var(--text-color);

    color: var(--bg-color);

    padding: 5px 15px;

    border-radius: 10px;

    border: 2px solid var(--orange);

}



.centerText {

    text-align: center;

}



/*************/

/*  LAYOUT   */

/*************/



body {

    margin: 0;

    padding: 0;

    width: 100vw;

    height: 100vh;

    overflow: hidden;

    overflow-y: auto;

    background-color: var(--bg-color);

    color: var(--text-color);

    font-weight: 500;

    font-size: 16px;

    transition: all 0.2s;

    animation: fadein 0.2s;

    -webkit-tap-highlight-color: transparent;

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    user-select: none;

}



.section {

    opacity: 0.5;

}



a, a:hover, a:visited, a:focus {

    text-decoration: none;

    color: var(--text-color);

}



.accedi {

    width: 100vw;

    height: 100vh;

    z-index: 100;

    position: fixed;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background-color: var(--bg-color);

    overflow: hidden;

}



.esciAccedi {

    position: absolute;

    top: 5vh;

    right: 5vh;

}



.logoAccedi {

    height: 20vh;

    font-size: 30px;

    display: flex;

    flex-direction: row;

    justify-content: flex-start;

    align-items: center;

}



    .logoAccedi img {

        margin-left: 2vmin;

        height: 50%;

    }



.containerAccedi {

    width: 20%;

}



.floatingAccedi {

    width: 100%;

    margin: 2vmin 0;

}



.floatingAccediField {

    border-radius: 5px;

    font-size: 16px;

    height: 45px !important;

    color: var(--dark) !important;

}



    .floatingAccediField:focus {

        color: var(--dark) !important;

        background-color: var(--light) !important;

        border-color: var(--orange) !important;

        outline: 0;

        box-shadow: 0 0 0 0.25rem rgb(222 118 27 / 25%) !important;

    }



.labelAccediField {

    font-size: 16px;

    font-weight: 400;

    color: var(--dark) !important;

}



.form-floating > .form-control:focus ~ label {

    opacity: .75 !important;

    transform: scale(.70) translateY(-0.5rem) translateX(0.15rem);

}



.form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {

    opacity: .75 !important;

    transform: scale(.70) translateY(-0.5rem) translateX(0.15rem) !important;

}



.endingAccedi {

    margin-top: 4vmin;

    width: 100%;

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    align-items: center;

}



.oscurante, .testoOscuranteVerticale, .testoOscuranteOrizzontale {

    display: none;

}



nav {

    height: 10%;

    width: 80%;

    margin: 0 auto;

    display: flex;

    flex-direction: row;

    justify-content: flex-start;

    align-items: center;

}



.linkHome {

    height: 100%;

    width: 21%;

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    align-items: center;

    overflow: hidden;

}



    .linkHome img {

        display: block;

        margin-left: 1%;

        margin-right: 1%;

        height: 70%;

    }



.logoHome {

    height: 100%;

    display: flex;

    flex-direction: row;

    justify-content: flex-start;

    align-items: center;

}



    .logoHome img {

        margin-left: 1%;

        margin-right: 8%;

        height: 50%;

    }



.menu {

    height: 100%;

    width: 75%;

    display: flex;

    flex-direction: row;

    justify-content: space-around;

    align-items: center;

}



.itemWithSubmenu {

    position: relative;

}



.submenu {

    position: absolute;

    top: 25px;

    width: 200px;

    color: var(--bg-color);

    background: var(--text-color);

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    border-radius: 5px;

    border: 1px solid var(--bg-color);

    z-index: 100;

}



.submenuItem {

    width: 90%;

    padding: 10px 10px;

    border-bottom: 1px solid var(--bg-color);

    color: var(--bg-color);

    margin: 0 auto;

}



    .submenuItem:hover {

        color: var(--orange);

    }



.sectionSelected {

    opacity: 1 !important;

    color: var(--text-color);

    font-weight: 700;

}



.spacer {

    width: 8%;

}



.endNav {

    height: 70%;

    display: flex;

    flex-direction: row;

    justify-content: flex-start;

    align-items: center;

}



.social {

    height: 100%;

    padding-right: 2vmin;

    border-right: 1px solid var(--border-color);

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    gap: 10px;

}



.socialIcon {

    font-size: 30px;

}



.darkThemePortfolio {

    height: 100%;

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    border-right: 1px solid var(--border-color);

}



    .darkThemePortfolio i {

        margin: 0 10px;

    }



.theme-switch {

    position: relative;

    display: flex;

    width: 30px;

    height: 16px;

    margin-top: 4px;

}



    .theme-switch input {

        display: none;

    }



    .theme-switch::before {

        padding-left: 30px;

        cursor: pointer;

    }



.slider {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    border-radius: 12px;

    background-color: var(--light-bg-color);

    cursor: pointer;

    transition: all 0.2s;

}



    .slider:hover:before {

        background: var(--secondary-color);

    }



    .slider:active:before {

        background: var(--secondary-color);

    }



    .slider:before {

        position: absolute;

        bottom: 0;

        left: 0;

        width: 16px;

        height: 16px;

        border-radius: 12px;

        background-color: var(--secondary-color);

        content: "";

        transition: all 0.2s;

    }



input:checked + .slider {

    background-color: var(--light-bg-color);

}



    input:checked + .slider:before {

        transform: translateX(15px);

    }



.login {

    padding: 0 2vmin;

}



    .login .socialIcon {

        text-align: center;

    }



.iconMenuMobile {

    display: none;

}



.menuMobile {

    display: none;

}



.separator {

    width: 100%;

    height: 2px;

    background-color: var(--text-color);

    margin: 1.5vmin 0;

}



article {

    width: 80%;

    min-height: 90%;

    margin: 0 auto;

    padding: 0;

}



footer {

    width: 100%;

    /* height: 43%; */

    background-color: var(--text-color);

    border-top: 2px solid var(--bg-color);

    color: var(--bg-color) !important;

    position: relative;

    padding: 1vmin;

}



.nameFooter {

    width: 100%;

    height: 20%;

    text-align: center;

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

}



.socialFooter {

    width: 100%;

    height: 15%;

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

}



    .socialFooter a, .socialFooter a:hover, .socialFooter a:visited, .socialFooter a:focus {

        text-decoration: none;

        color: var(--bg-color) !important;

        margin: 0 2vmin;

    }



.infoFooter {

    width: 100%;

    height: 55%;

    display: flex;

    flex-direction: row;

    justify-content: space-around;

    padding-top: 0.5%;

}



.infoGym, .infoContacts {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: center;

}



.infoTitle {

    margin-bottom: 10px;

}



.gym, .contact {

    text-align: center;

    margin-bottom: 8px;

    font-weight: 200;

}



.bottomInfo {

    width: 100%;

    height: 15%;

    margin-bottom: 5px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



.legalInfo {

    width: 100%;

    text-align: center;

    color: gray;

    margin-bottom: 5px;

}



.property {

    width: 100%;

    text-align: center;

    color: gray;

}



    .property span {

        color: var(--bg-color);

    }



.noBorder {

    border: 0;

}



.nascondiOverflow {

    overflow: hidden;

}



/* Smartphones Portrait */

@media (min-width: 320px) and (max-width: 480px) {

    .hideMobilePort {

        display: none !important;

    }



    nav {

        width: 90%;

        margin: 0 auto;

        display: flex;

        flex-direction: row;

        justify-content: space-between;

        align-items: center;

    }



    .linkHome {

        width: 80%;

    }



    .menu, .endNav, .spacer {

        display: none;

    }



    .iconMenuMobile {

        display: block;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

    }



    .menuMobile {

        width: 100%;

        height: 90%;

        background-color: var(--bg-color);

        position: absolute;

        top: 10%;

        left: 0;

        display: flex;

        flex-direction: column;

        justify-content: flex-start;

        align-items: center;

        z-index: 100;

    }



    .voceMenuMobile {

        min-height: 10%;

        width: 90%;

        margin: 0 auto;

        padding: 10px;

        color: var(--text-color);

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        border-bottom: 1px solid var(--text-color);

    }



    .voceSocialMobile {

        min-height: 15%;

        width: 90%;

        margin: 0 auto;

        padding: 10px;

        color: var(--text-color);

        display: flex;

        flex-direction: row;

        justify-content: center;

        align-items: center;

        gap: 30px;

    }



    .sezioneMenuMobile {

        margin-bottom: 2vmin;

    }



    .sottoMenuMobile div {

        text-align: center;

        margin: 1vmin 0;

    }



    .socialMobile {

        height: 100%;

        width: 33%;

        border-right: 1px solid var(--text-color);

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        flex-wrap: wrap;

    }



        .socialMobile .socialIcon {

            margin: 0 2vmin;

        }



            .socialMobile .socialIcon i {

                color: var(--text-color);

            }



    .darkThemeMobile {

        height: 100%;

        width: 45%;

        border-right: 1px solid var(--text-color);

        display: flex;

        flex-direction: row;

        justify-content: center;

        align-items: center;

    }



        .darkThemeMobile i {

            margin: 0 10px;

        }



        .darkThemeMobile .theme-switch {

            position: relative;

            display: flex;

            width: 30px;

            height: 16px;

            margin-top: 4px;

        }



            .darkThemeMobile .theme-switch input {

                display: none;

            }



            .darkThemeMobile .theme-switch::before {

                padding-left: 30px;

                cursor: pointer;

            }



        .darkThemeMobile .slider {

            position: absolute;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            border-radius: 12px;

            background-color: var(--light-bg-color);

            cursor: pointer;

            transition: all 0.2s;

        }



            .darkThemeMobile .slider:hover:before {

                background: var(--secondary-color);

            }



            .darkThemeMobile .slider:active:before {

                background: var(--secondary-color);

            }



            .darkThemeMobile .slider:before {

                position: absolute;

                bottom: 0;

                left: 0;

                width: 16px;

                height: 16px;

                border-radius: 12px;

                background-color: var(--secondary-color);

                content: "";

                transition: all 0.2s;

            }



    input:checked + .slider {

        background-color: var(--light-bg-color);

    }



    input:checked + .darkThemeMobile .slider:before {

        transform: translateX(15px);

    }



    .login {

        padding: 0 2vmin;

    }



        .login .socialIcon {

            text-align: center;

        }



    article {

        width: 90%;

    }



    .nameFooter {

        height: 10%;

        font-size: 22px !important;

    }



    .socialFooter {

        height: 10%;

    }



        .socialFooter .socialIcon .sizeBig {

            font-size: 20px;

        }



    footer {

        padding: 0 10px;

        height: 65%;

    }



    .infoFooter {

        display: flex;

        flex-direction: column;

        justify-content: flex-start;

        align-items: center;

    }



    .infoGym {

        margin-top: 2vmin;

    }



    .infoContacts {

        display: none;

    }



    .gym {

        font-size: 12px;

    }



    .noBorder {

        border: 0 !important;

    }

}



/* Smartphones Landscape */

@media (min-width: 481px) and (max-width: 767px) {

    body {

        overflow: hidden;

    }



    .endNav {

        display: none;

    }



    .oscurante {

        width: 100%;

        height: 100%;

        z-index: 100;

        position: fixed;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        background-color: var(--bg-color);

    }



    .logoOscurante {

        height: 20vh;

        font-size: 30px;

        display: flex;

        flex-direction: row;

        justify-content: flex-start;

        align-items: center;

    }



        .logoOscurante img {

            margin-left: 2vmin;

            height: 50%;

        }



    .testoOscuranteOrizzontale {

        font-size: 24px;

        padding: 0 25px;

        text-align: center;

        display: block;

    }

}



/* Tablet Portrait */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

    body {

        overflow: hidden;

    }



    .oscurante {

        width: 100%;

        height: 100%;

        z-index: 100;

        position: fixed;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        background-color: var(--bg-color);

    }



    .logoOscurante {

        height: 20vh;

        font-size: 30px;

        display: flex;

        flex-direction: row;

        justify-content: flex-start;

        align-items: center;

    }



        .logoOscurante img {

            margin-left: 2vmin;

            height: 50%;

        }



    .testoOscuranteVerticale {

        font-size: 24px;

        padding: 0 25px;

        text-align: center;

        display: block;

    }

}



/* Tablet Landscape */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    .oscurante {

        display: none !important;

    }



    nav {

        width: 90%;

    }



    .linkHome {

        width: 45%;

    }



    .spacer {

        width: 5%;

    }



    article {

        width: 90%;

    }



    .nameFooter {

        height: 17%;

    }

}



/* Small Laptop and Big Tablet Landscape */

@media (min-width: 1025px) and (max-width: 1280px) and (orientation: landscape) {

    .oscurante {

        display: none !important;

    }



    nav {

        width: 90%;

    }



    .linkHome {

        width: 35%;

    }



    .spacer {

        width: 10%;

    }



    article {

        width: 90%;

    }

}



/**************/

/*  ANIMATION */

/**************/



@keyframes slideFromTop {

    0% {

        transform: translateY(-100%);

    }



    100% {

        transform: translateY(0);

    }

}



@keyframes slideFromBottom {

    0% {

        transform: translateY(100%);

    }



    100% {

        transform: translateY(0);

    }

}



@keyframes slideFromLeft {

    0% {

        transform: translateX(-100%);

    }



    100% {

        transform: translateX(0);

    }

}



@keyframes slideFromRight {

    0% {

        transform: translateX(100%);

    }



    100% {

        transform: translateX(0);

    }

}