@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');

/*SETTING BASIC*/
html {
    font-size: 16px;
}

body {
    font-size: 1rem;
}

#data-container {
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    height: auto;
    min-height: 100vh;
    max-height: 100vh;
    position: relative;
    margin-top: 0vh;
    /*VALORE PRECEDENTE -12VH - CORRISPONDE A ALTEZZA HEADER BASIC*/
}

/*SETTING TORNA PULSANTE INDIETRO*/
.back-to-history-button {
    color: #FFF;
    background: #6500B4;
    border-radius: 50px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
}

/*SETTING ELEMENTI NASCOSTI NELLA PAGINA (USATI SOLO A SCOPO TECNICO)*/
#follower-id-space {
    display: none !important;
}

/*SETTING INFLUENCER TEMPLATE*/
.influencer-header {
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    height: 30vh;
    background: #180027;
    box-shadow: 0 0 25px #BC00FF;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom-right-radius: 120px;
    z-index: 99999;
}

.influencer-header-content {
    height: 30vh;
    width: 80vw;
    min-width: 80vw;
    max-width: 80vw;
    margin-left: 10vw;
    margin-right: 10vw;
}

h1.influencer-title {
    width: 20vw;
    font-size: 5em;
    font-weight: 900;
    color: #FFF;
    position: absolute;
    bottom: 2vw;
    left: 2vw;
    line-height: 1em;
    cursor: pointer;
}

span.influencer-search-icon {
    fill: #BC00FF;
    color: #BC00FF;
    position: absolute;
    bottom: 2.5vw;
    left: 25vw;
    font-size: 3em;
    line-height: 1em;
    cursor: pointer;
    transition: 0.2s;
    display: none;
}

span.influencer-search-icon:hover {
    transition: 0.2s;
    transform: scale(1.2);
}

span.influencer-filter-icon {
    fill: #480080;
    color: #480080;
    background: #BC00FF;
    padding: 10px;
    border-radius: 50px;
    position: absolute;
    bottom: 2.5vw;
    right: 0vw;
    cursor: pointer;
    transition: 0.2s;
    display: none;
}

span.influencer-filter-icon:hover {
    transition: 0.2s;
    transform: scale(1.2);
}

/*MESSAGGIO INIZIALE*/
#start-choice {
    width: 60vw;
    min-width: 60vw;
    max-width: 60vw;
    height: 40vh;
    min-height: 40vh;
    max-height: 40vh;
    position: absolute;
    top: 40vh;
    left: 20vw;
    color: #FFF;
    z-index: 9999;
    background: radial-gradient(rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 70%);
}

h1.start-choice-title {
    width: 100%;
    font-size: 7em;
    line-height: 0.9em;
    font-weight: 900;
    text-align: center;
    text-shadow: 0 10px 30px #000;
}

ul.start-choice-list {
    list-style: none;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.start-choice-item {
    min-width: calc(30vw / 5);
    background: rgba(255, 255, 255, 0.7);
    color: #101010;
    font-size: 1em;
    font-weight: 300;
    border-radius: 50px;
    padding: 15px;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
    transition: 0.5s;
}

li.start-choice-item:hover {
    transition: 0.2s;
    transform: scale(1.2);
    background: #FFF;
}

/*********************************/
/* GESTIONE CONTAINER INFLUENCER */
/*********************************/
.influencer-container {
    width: 80vw;
    float: left;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 40vh;
    margin-top: 5vh;
    /*background: rgb(10,10,10);*/
}

.single-influencer-space {
    width: 80vw;
    height: auto;
    min-height: 80vh;
    float: left;
    clear: both;
    /*margin-bottom: 10vh;*/
}

@keyframes let-me-appear {
    from {
        opacity: 0;
        transform: scale(5);
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.appear-influencer-pic {
    animation: let-me-appear;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.influencer-pic-container {
    /*settting della influencer-pic, passati al suo container*/
    position: absolute;
    top: 5vh;
    left: 0;
    overflow: hidden;
    z-index: 999;
    opacity: 0;
    box-shadow: 0 0 15px rgb(40, 40, 40);
    /*fine dei setting influencer-pic passati al suo container*/
    width: 40vh;
    height: 40vh;
    border-radius: 50rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(225deg, rgba(207, 3, 200, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
}

.influencer-pic-content {
    width: calc(39vh - 0.5rem);
    height: calc(39vh - 0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF;
    border-radius: 50rem;
}

img.influencer-pic {
    width: calc(38vh - 1rem);
    height: calc(38vh - 1rem);
    border-radius: 50rem;
    /*border-radius: 25px;*/
    object-fit: cover;
    object-position: top center;
}

.influencer-info-container-background {
    width: 75vw;
    height: 50vh;
    float: right;
    margin-left: 5vw;
    border-radius: 60px;
    background-position: 60% 40% !important;
    background-size: 120% !important;
    background-repeat: no-repeat !important;
    overflow: hidden;
}

.influencer-info-container {
    width: 75vw;
    position: absolute;
    width: 75vw;
    height: 50vh;
    left: 5vw;
    border-radius: 25px;
    background: linear-gradient(90deg, rgba(30, 30, 30, 0.7) 0%, rgba(30, 30, 30, 0) 90%);
    overflow: hidden;
}

@keyframes influencer-general-container-appear-animation {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.influencer-general-container-appear {
    animation: influencer-general-container-appear-animation;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

.influencer-general-container {
    width: 50vw;
    height: auto;
    margin-left: 5vw;
    margin-right: 1vw;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
}

.influencer-icon-container {
    height: 50vh;
    width: 5vh;
    margin-left: 0;
    margin-right: 0vw;
    margin-top: 0vh;
    margin-bottom: 0;
    padding-left: 2.5vh;
    position: absolute;
    left: -9vh;
    top: 5vh;
}

@keyframes move-sector-icon {
    from {
        opacity: 0;
        transform: translateX(10vw);
    }

    to {
        opacity: 1;
        transform: translateX(3vw);
    }
}

.sector-icon-moving {
    animation: move-sector-icon;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.sector-icon {
    width: 3.5vh;
    height: 3.5vh;
    margin-top: 0.5vh;
    margin-bottom: 0.5vh;
    margin-right: 10px;
    padding: 15px;
    border-radius: 30px;
    margin-left: -5vw;
    background: #FFF;
    border: 1px solid #9000FF;
    transform: translateX(-20vw);
    opacity: 0;
    float: left;
    clear: both;
}

h1.influencer-name {
    height: 7vh;
    width: calc(50vw - (40vh - 5vw) - 5vw);
    margin-left: 0;
    margin-right: 0vw;
    margin-top: 0;
    margin-bottom: 0.5vh;
    font-size: 3em;
    line-height: 0.8em;
    font-weight: 100;
    letter-spacing: -1px;
    text-transform: uppercase;
    color: #9000FF;
    opacity: 0;
}

h1.influencer-follower {
    height: 17vh;
    width: calc(95vw - (40vh - 5vw) - 5vw);
    margin-left: 0;
    margin-right: 0vw;
    margin-bottom: 0.5vh;
    font-weight: 900;
    font-size: 10em;
    line-height: 0.8em;
    text-transform: uppercase;
    color: #9000FF;
    opacity: 0;
}

.influencer-platform {
    height: 3vh;
    width: auto;
    clear: both;
    max-width: calc(45vw - (40vh - 5vw) - 5vw);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0.5vh;
    color: #9000FF;
    padding: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 50px;
}

.social-platform-icon {
    width: 1.8vh;
    height: 1.8vh;
    margin-right: 10px;
    margin-top: 0.6vh;
}

.influencer-tecnical-info {
    width: calc(21.5vw - 2.5vw);
    height: 50vh;
    background: linear-gradient(-90deg, rgba(24, 0, 39, 0.8) 0%, rgba(24, 0, 39, 0) 100%);
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

ul.influencer-tecnical-info-list {
    width: 15vw;
    min-width: 15vw;
    max-width: 15vw;
    height: auto;
    max-height: 40vh;
    list-style: none;
    color: #FFF;
}

li.influencer-tecnical-info-item {
    width: 100%;
    line-height: 1.2em;
    margin-bottom: 15px;
    text-shadow: 0 0 15px rgb(40, 40, 40);
}

span.strong-white {
    font-weight: 900;
}

.social-icon {
    width: 10px;
    height: 10px;
    color: #FFF;
    font-weight: 1em;
    line-height: 1em;
    margin-right: 10px;
}

span.influencer-share-icon {
    position: absolute;
    right: -1.5vw;
    border: 3px solid #9000FF;
    background-color: #480080;
    font-size: 1.5em;
    color: #FFF;
    padding: 10px;
    top: 5vh;
    border-radius: 50px;
    font-weight: 100;
    cursor: pointer;
    transition: 0.2s;
    z-index: 999;
}

span.influencer-share-icon:hover {
    transition: 0.2s;
    transform: scale(1.1);
}

p.influencer-call-to-action {
    width: 4vw;
    padding: 10px;
    position: absolute;
    bottom: 5vh;
    right: -2.5vw;
    color: #FFF;
    border: 3px solid #9000FF;
    background-color: #480080;
    border-radius: 50px;
    text-align: center;
    letter-spacing: 2.5px;
    cursor: pointer;
    transition: 0.2s;
    z-index: 999999;
}

p.influencer-call-to-action:hover {
    transition: 0.2s;
    transform: scale(1.1);
}

/*impostazione filtri*/
.influencer-filter-container {
    width: 15vw;
    height: 30vh;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #FFF;
    position: absolute;
    right: 120px;
    top: -30vh;
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: none;
}

@keyframes influencer-filter-container-animation-open {
    from {
        top: -30vh;
    }

    to {
        top: calc(30vh - 1px);
    }
}

@keyframes influencer-filter-container-animation-close {
    from {
        top: calc(30vh - 1px);
    }

    to {
        top: -30vh;
    }
}

.influencer-filter-animation-open {
    animation: influencer-filter-container-animation-open;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.influencer-filter-animation-close {
    animation: influencer-filter-container-animation-close;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.influencer-filter-content {
    width: 15vw;
    height: 30vh;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    align-content: center;
    z-index: 99999;
}

ul.influencer-main-parameter {
    height: 20vh;
    width: calc(5vw - 15px);
    color: #FFF;
    list-style: none;
    display: grid;
    padding-top: 2.5vh;
    padding-bottom: 2.5vh;
    border-right: 1px solid #FFF;
}

li.influencer-main-parameter-item {
    width: calc(100% - 0.5vw);
    clear: both;
    height: 2vh;
    line-height: 1em;
    font-size: 0.8em;
    text-transform: uppercase;
    text-align: right;
    padding-right: 0.5vw;
    cursor: pointer;
    font-weight: 300;
    opacity: 0.4;
}

li.influencer-selected-filter {
    opacity: 1;
}

li.influencer-main-parameter-item:hover {
    transition: 0.2s;
    opacity: 1;
}

li.influencer-close-filter-button {
    opacity: 1;
}

span.influencer-close-filter {
    border: 2px solid #FFF;
    border-radius: 50px;
    padding: 10px;
    margin-top: 5px;
    transform: rotate(90deg);
    cursor: pointer;
    transition: 0.2s;
}

span.influencer-close-filter:hover {
    transition: 0.2s;
    transform: translateY(-5px) rotate(90deg);
}

.influencer-filter-list {
    height: 25vh;
    width: calc(10vw - 20px);
    color: #FFF;
    list-style: none;
    padding-left: 10px;
    opacity: 0;
    display: none;
}

.influencer-location-list {
    height: 25vh;
    min-height: 25vh;
    max-height: 25vh;
    overflow-y: scroll;
}

.influencer-selected-filter-list {
    display: grid;
    opacity: 1;
}

.influencer-filter-item {
    width: 100%;
    font-size: 0.8em;
    text-transform: uppercase;
    color: #FFF;
    opacity: 0.4;
    transition: 0.2s;
    font-weight: 300;
    cursor: pointer;
    text-align: center;
    align-content: center;
}

.influencer-gender-item {
    height: calc(25vh / 4);
}

.influencer-sector-item {
    height: calc(25vh / 5);
}

.influencer-location-item {
    height: calc(25vh / 5);
}

.influencer-follower-item {
    height: calc(25vh / 6);
}

span.influencer-follower-definition {
    font-size: 0.7em;
    opacity: 0.4;
    letter-spacing: 0.5px;
}

.influencer-gender-item:hover {
    transition: 0.2s;
    opacity: 1;
}

.influencer-gender-selected,
.influencer-sector-selected,
.influencer-follower-selected,
.influencer-location-selected {
    opacity: 1;
}

#points {
    transform: rotate(-90deg);
    position: absolute;
    top: 8.5vh;
    /*metà altexxa + 1 come margine*/
    width: 15vh;
}

.influencer-range-text-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-top: 15px;
    height: 5vh;
}

.influencer-follower-range-title {
    font-weight: 300;
    width: 100%;
    letter-spacing: 1px;
    font-size: 0.9em;
    color: #FFF;
    text-align: center;
    height: 2.5vh;
    min-height: 2.5vh;
    max-height: 2.5vh;
    display: flex;
    justify-content: center;
    align-content: center;
}

#influencer-follower-range {
    text-align: center;
    color: #FFF;
    width: 100%;
    font-weight: 300;
    font-size: 1em;
    height: 2.5vh;
    min-height: 2.5vh;
    max-height: 2.5vh;
    display: flex;
    justify-content: center;
    align-content: center;
}

/*SETTING SINGLE INFLUENCER INFO*/
.single-influencer-data-container {
    position: absolute;
    top: 0;
    right: 0;
    height: 50vh;
    background: transparent;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    z-index: 999;
    width: 80vw;
    height: auto;
    min-height: 80vh;
    float: left;
    clear: both;
    margin-bottom: 10vh;
    /*top: calc((100vh - 50vh) / 3);*/
    left: 10vw;
}

@keyframes open-data-container {
    from {
        width: 0;
    }

    to {
        /*width: calc(21.5vw - 2.5vw);*/
        width: calc(50vw - 5vw);
    }
}

@keyframes close-data-container {
    from {
        /*width: calc(21.5vw - 2.5vw);*/
        width: calc(50vw - 5vw);
    }

    to {
        width: 0;
    }
}

.opening-single-influencer-data {
    animation: open-data-container;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.close-single-influencer-data {
    animation: close-data-container;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.info-container {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: auto;
}

ul.info-list {
    width: auto;
    /*max-width: calc(50vw - 7.5vw - 30px);*/
    width: calc(45vw - 2.5vw);
    min-width: calc(45vw - 2.5vw);
    max-width: calc(45vw - 2.5vw);
    height: calc(10vh - 30px);
    position: absolute;
    top: 0;
    right: 2.5vw;
    margin: 20px;
    margin-left: 0;
    list-style: none;
    display: inline;
    justify-content: right;
}

li.info-list-item {
    width: auto;
    margin-right: 10px;
    border-radius: 50px;
    color: #FFF;
    text-transform: uppercase;
    font-weight: 300;
    background: rgba(90, 90, 90, 0.4);
    padding: 15px;
    font-size: 0.7em;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.2s;
    opacity: 0;
}

.single-talent-share-icon {
    width: auto;
    margin-right: 10px;
    border-radius: 50px;
    color: #FFF;
    text-transform: uppercase;
    font-weight: 100;
    background: rgba(90, 90, 90, 0.4);
    padding: 8.5px;
    font-size: 1.7em;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.2s;
    opacity: 0;
}

.compcard-button {
    position: absolute;
    right: 0;
    top: 0;
    background: #000;
    color: #FFF;
    width: auto;
    margin-right: 10px;
    border-radius: 50px;
    text-transform: uppercase;
    font-weight: 300;
    padding: 15px;
    font-size: 0.7em;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.2s;
    opacity: 0;
}

.compcard-button:hover {
    transition: 0.2s;
    transform: scale(1.1);
}

.single-talent-share-icon:hover {
    transition: 0.2s;
    transform: scale(1.1);
}

li.info-list-item:hover {
    transition: 0.2s;
    transform: scale(1.1);
}

.selected-info-list-item {
    background: rgba(255, 255, 255, 0.7) !important;
    color: #000;
}

#hidden-influencer-datas {
    display: none !important;
}

.influencer-data {
    height: 40vh;
    min-height: 40vh;
    max-height: 40vh;
    width: calc(45vw - 2.5vw);
    min-width: calc(45vw - 2.5vw);
    max-width: calc(45vw - 2.5vw);
    margin-top: 10vh;

    /*setting posizionamento*/
    position: absolute;
    top: 0;
    right: 0;
}

.info-data-disclaimer {
    position: absolute;
    bottom: calc(-5vh - 1rem);
    right: 0rem;
    color: #FFFFFF50;
    font-size: 0.7rem;
    line-height: 0.7rem;
    padding: 0.3rem;
    font-weight: 100;
    width: 30vh;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-self: center;
    border-radius: 0.2rem;
}

.basic-info-container,
.deep-info-container {
    top: 5vh;
    width: calc((45vw - 7.5vw) / 2);
    min-width: calc((45vw - 7.5vw) / 2);
    max-width: calc((45vw - 7.5vw) / 2);
    margin: 2.5vw;
    margin-top: 0;
    margin-bottom: 5vh;
    height: auto;
}

.basic-info-container {
    margin-right: 0;
}

/* LAYOUT DATI SOCIAL BLADE */
.info-section-specific-platform {
    display: none;
}

/* titolo info section specific */
.info-section-specific-title-platform {
    height: 2.5vh;
    width: auto;
    clear: both;
    color: #FFF;
    padding: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 50px;
    position: absolute;
    top: 0rem;
    right: 0.0;
    display: flex;
    align-items: center;
}

.info-section-specific-title-platform svg {
    margin-right: 0.2rem;
}

.info-section-specific-platform-icon {
    width: 1.8vh;
    height: 1.8vh;
    margin-right: 10px;
}

.info-section-specific-social-platform-name {
    font-size: 1em;
    font-weight: 500;
    line-height: 3vh;
    margin-right: 0.2rem;
    letter-spacing: 0.1rem;
    font-size: 1.2rem;
    text-transform: uppercase;
}

.info-section-instagram {
    display: block;
}

.social-platform-container {
    width: 15rem;
    margin-left: calc(100% - 15rem);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 3 colonne di uguale larghezza che si adattano allo spazio disponibile */
    gap: 0.5rem;
    margin-top: 1rem;
    height: 3rem;
}

.vote-rank-container {
    width: 30vh;
    height: 38vh;
    position: absolute;
    top: 0;
    left: calc(-30vh - 1rem);
    background: #FFFFFF19;
    border-radius: 2rem;
    padding: 1rem;
    box-sizing: border-box;
}

.no-desk-item {
    display: none;
}

.instagram-vote-rank-container {
    visibility: hidden;
}

.vote-container {
    width: 15vh;
    height: 15vh;
    margin-left: calc(15vh - 2rem);
    font-weight: 900;
    background: #9000FF;
    border-radius: 1rem;
    color: #FFF;
    font-size: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

span.vote-title {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: 0.8rem;
    width: 100%;
    text-align: right;
    text-transform: uppercase;
    font-weight: 400;
    background: #9000FF;
    padding: 0.2rem;
    border-radius: 0.2rem;
    color: #FFF;
    width: fit-content;
}

.rank-container {
    margin-top: 1rem;
    color: #FFF;
}

.rank-list {
    width: 100%;
    list-style: none;
}

span.rank-item-title {
    font-weight: 400;
    color: #FFF;
    background: #9000FF;
    text-align: right;
    font-size: 0.7rem;
    line-height: 1rem;
    text-transform: uppercase;
    padding: 0.2rem;
    border-radius: 0.2rem;
    margin-bottom: 0.5rem;
    margin-right: 0.3rem;
    letter-spacing: 0;
}

.rank-item {
    width: 100%;
    float: left;
    clear: both;
    font-weight: 300;
    color: #FFF;
    margin-top: 0.5rem;
    letter-spacing: 0.1rem;
    font-size: 1rem;
}

/* LAYOUT DATI SOCIAL BLADE */

.deep-info-container {
    margin-left: 0;
}

.single-platform-space {
    width: 3rem;
    height: 3rem;
    background: #FFFFFF10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.2rem;
    cursor: pointer;
    transition: 0.2s;
}

.single-platform-space-selected {
    background: #9000FF;
    transition: 0.2s;
}

.follower-container,
.engagement-container {
    width: calc((45vw - 7.5vw) / 2);
    min-width: calc((45vw - 7.5vw) / 2);
    max-width: calc((45vw - 7.5vw) / 2);
    text-align: left;
    opacity: 0;
    height: 15vh;
}

h1.follower-title,
h1.engagement-title {
    width: 100%;
    font-size: 0.9em;
    color: #FFF;
    letter-spacing: 5px;
    font-weight: 100;
}

h1.engagement-title {
    text-align: right;
}

h1.follower-value {
    font-size: 7em;
    letter-spacing: -5px;
    color: #FFF;
    line-height: 0.8em;
    font-weight: 900;
}

h1.engagement-value {
    width: 100%;
    font-size: 5em;
    letter-spacing: -5px;
    color: #FFF;
    line-height: 1.2em;
    font-weight: 900;
    text-align: right;
}

.mediaFollowing-container,
.mediaComments-container {
    width: calc((50vw - 7.5vw) / 2);
    min-width: calc((50vw - 7.5vw) / 2);
    max-width: calc((50vw - 7.5vw) / 2);
    margin-top: 25px;
    opacity: 0;
}

.media-upload-container,
.following-container,
.media-likes-container,
.media-comments-container {
    width: calc((50vw - 7.5vw) / 4);
    min-width: calc((50vw - 7.5vw) / 4);
    max-width: calc((50vw - 7.5vw) / 4);
}

h1.media-upload-title,
h1.following-title,
h1.media-likes-title,
h1.media-comments-title {
    width: 100%;
    font-size: 0.8em;
    color: #FFF;
    letter-spacing: 5px;
    font-weight: 100;
}

h1.media-likes-title,
h1.media-comments-title {
    text-align: right;
}

h1.media-upload-value,
h1.following-value,
h1.media-likes-value,
h1.media-comments-value {
    width: 100%;
    font-size: 2.5em;
    letter-spacing: -1.5px;
    color: #FFF;
    line-height: 1.2em;
    font-weight: 900;
}

h1.media-likes-value,
h1.media-comments-value {
    text-align: right;
}

/*test*/
#particles-js {
    position: fixed;
    top: 0vh;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #101010;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

@keyframes appear-from-bottom {
    from {
        opacity: 0;
        transform: translateY(10vh);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes appear-from-top {
    from {
        opacity: 0;
        transform: translateY(-10vh);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes disappear-from-bottom {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(10vh);
    }
}

@keyframes disappear-from-top {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10vh);
    }
}

.appear-from-down-animation {
    animation: appear-from-bottom;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.appear-from-up-animation {
    animation: appear-from-top;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.disappear-from-down-animation {
    animation: disappear-from-bottom;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.disappear-from-up-animation {
    animation: disappear-from-top;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

/*GESTIONE DEI PANNELLI PER MODEL INFO*/
.info-section {
    position: absolute;
    top: 0;
    right: 0;
}

/*GESTIONE PANNELLO MODEL-INFO*/
.model-info {
    height: 40vh;
    min-height: 40vh;
    max-height: 40vh;
    width: calc(45vw - 2.5vw);
    min-width: calc(45vw - 2.5vw);
    max-width: calc(45vw - 2.5vw);
    margin-top: 10vh;

    /*setting posizionamento*/
    position: absolute;
    top: 0;
    right: 0;
}

.model-features-list {
    width: calc(45vw - 5vw);
    max-height: calc(45vh - 5vw);
    padding-top: 1vw;
    padding-bottom: 1vw;
    list-style: none;
    overflow-y: scroll;
}

li.single-model-nw-feature {
    width: 100%;
    margin: 10px;
    padding: 15px;
    border-radius: 10px;
    box-sizing: border-box;
    width: calc(((45vw - 5vw) / 3) - 20px);
    min-width: calc(((45vw - 5vw) / 3) - 20px);
    max-width: calc(((45vw - 5vw) / 3) - 20px);
    height: calc(((45vh - 7vw) / 3) - 20px);
    min-height: calc(((45vh - 7vw) / 3) - 20px);
    max-height: calc(((45vh - 7vw) / 3) - 20px);
    background: linear-gradient(45deg, rgba(157, 0, 255, 0.5200280795912116) 0%, rgba(24, 0, 39, 0.3211485277704832) 100%);
    opacity: 0;
    overflow-y: scroll;
    overflow-x: hidden;
}

p.single-nw-feature-name,
p.single-nw-feature-value {
    width: 100%;
    clear: both;
    font-size: 0.8em;
    font-weight: 300;
    color: #FFF;
}

p.single-nw-feature-name {
    position: absolute;
    top: 10px;
    left: 10px;
    text-align: left;
}

p.single-nw-feature-value {
    font-size: 2.3em;
    font-weight: 700;
    line-height: 0.8em;
    text-align: right;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

p.bio-text-fetaure-value {
    font-size: 1em !important;
    font-weight: 100;
    line-height: 1.2em;
    text-align: right;
    position: relative !important;
    bottom: 10px;
    right: 10px;
    width: calc(100% - 110px);
    /* considera anche il 10px di posizionamento absolute*/
    padding-left: 100px;
    padding-top: 75px;
    height: auto;
}

.bio-feature {
    width: 100%;
    margin: 10px;
    padding: 15px;
    border-radius: 10px;
    box-sizing: border-box;
    width: calc(((45vw - 5vw) / 1) - 20px) !important;
    min-width: calc(((45vw - 5vw) / 1) - 20px) !important;
    max-width: calc(((45vw - 5vw) / 1) - 20px) !important;
    height: calc(((45vh - 7vw) / 1) - 20px) !important;
    min-height: calc(((45vh - 7vw) / 1) - 20px) !important;
    max-height: calc(((45vh - 7vw) / 1) - 20px) !important;
    background: linear-gradient(45deg, rgba(157, 0, 255, 0.5200280795912116) 0%, rgba(24, 0, 39, 0.3211485277704832) 100%);
    opacity: 0;
}

/*GESTIONE PANNELLO MODEL-BOOKS*/
/*.model-books{
    width: calc(45vw - 5vw);
    min-width: calc(45vw - 5vw);
    max-width: calc(45vw - 5vw);
    height: calc(45vh - 5vw); sottratta la somma dei margini (in questo caso superiore e inferiore)
    margin: 2.5vw;
    position: absolute;
    top: 5vh;
    display: none;
}
*/
.model-books {
    height: 40vh;
    min-height: 40vh;
    max-height: 40vh;
    width: calc(45vw - 2.5vw);
    min-width: calc(45vw - 2.5vw);
    max-width: calc(45vw - 2.5vw);
    margin-top: 10vh;
    display: none;

    /*setting posizionamento*/
    position: absolute;
    top: 0;
    right: 0;
}

.book-name-container {
    width: 10vw;
    min-width: 10vw;
    max-width: 10vw;
    height: auto;
    max-height: calc(45vh - 5vw);
    min-height: calc(45vh - 5vw);
    overflow-y: scroll;
}

@keyframes move-book-title {
    from {
        opacity: 0;
        transform: translateX(-5vw);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.single-book-name-animation {
    animation: move-book-title;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

.single-book-name {
    width: auto;
    max-width: 10vw;
    font-size: 0.9em;
    letter-spacing: 2px;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 0.9em;
    cursor: pointer;
    transition: 0.2s;
    clear: both;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.5);
    padding: 10px;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
    opacity: 0;
    border: 0.5px solid #FFF;
    border-radius: 50px;
    overflow: hidden;
}

.button-decoration {
    width: 0px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(255, 255, 255, 0.2);
    transition-duration: 0.2s;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.single-book-name:hover .button-decoration {
    width: 100%;
    transition-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.single-book-name:hover {
    transition: 0.2s;
    transform: translateX(10px);
    color: #FFF;
}

.selected-book-name {
    font-weight: 900;
}

.book-container {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(30vw - 25px);
    min-width: calc(30vw - 25px);
    min-width: calc(30vw - 25px);
    height: auto;
    max-height: calc(70vh - 5vw);
    min-height: calc(40vh - 5vw);
    margin-left: 25px;
    overflow: hidden;
    overflow-y: scroll;
    padding-bottom: 25px;
    box-sizing: border-box;
    display: none;
    margin-top: 5vh;
}

/*SETTING SECTION DOWNLOAD AND PRINT*/
.print-and-download-container {
    width: calc(30vw - 25px);
    min-width: calc(30vw - 25px);
    max-width: calc(30vw - 25px);
    height: 3.5vh;
    min-height: 3.5vh;
    max-height: 3.5vh;
    margin-top: 0.75vh;
    margin-bottom: 0.75vh;
    position: absolute;
    top: 0vh;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: right;
    display: none;
}

p.donwload-print-button {
    width: auto;
    height: 3.5vh;
    min-height: 3.5vh;
    max-height: 3.5vh;
    margin-left: 0.5vw;
    border-radius: 50px;
    color: #FFF;
    color: calc(255, 255, 255, 0.7);
    background: rgba(90, 90, 90, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 0.8em;
    letter-spacing: 3px;
    font-weight: 100;
}

i.download-and-print-icon {
    transition: 0.2s;
    margin-right: 5px;
}

p.donwload-print-button:hover i.download-and-print-icon {
    transition: 0.2s;
    transform: translateY(-2.5px);
}

@keyframes single-img-zoom-out {
    from {
        opacity: 0;
        transform: scale(5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.single-img-animation {
    animation: single-img-zoom-out;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}


.single-img,
.single-video {
    /*
        width: calc(((30vw - 25px) / 4) - 10px);
        min-width: calc(((30vw - 25px) / 4) - 10px);
        max-width: calc(((30vw - 25px) / 4) - 10px);
        height: calc(((30vw - 25px) / 4) - 10px);
        min-height: calc(((30vw - 25px) / 4) - 10px);
        max-height: calc(((30vw - 25px) / 4) - 10px);
        margin: 5px;
        */
    width: calc(((70vw - 25px) / 5) - 10px);
    min-width: calc(((70vw - 25px) / 5) - 10px);
    max-width: calc(((70vw - 25px) / 5) - 10px);
    height: calc(((70vw - 25px) / 5) - 10px);
    min-height: calc(((70vw - 25px) / 5) - 10px);
    max-height: calc(((70vw - 25px) / 5) - 10px);
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    margin: 1px;
    cursor: pointer;
    transition: 0.5s;
    opacity: 0;
}

/**********************/
/**********************/
/**********************/
/*                    */
/*                    */
/*  img social style  */
/*                    */
/*                    */
/**********************/
/**********************/
/**********************/

.slider-img-view {
    width: calc(((30vw - 25px) / 1) - 10px);
    min-width: calc(((30vw - 25px) / 1) - 10px);
    max-width: calc(((30vw - 25px) / 1) - 10px);
}

/**********************/
/**********************/
/**********************/
/*                    */
/*                    */
/*  img social style  */
/*                    */
/*                    */
/**********************/
/**********************/
/**********************/

.single-img:hover {
    transition: 0.2s;
    object-fit: 150vw;
}

.selected-book {
    background: rgba(255, 255, 255, 0.15);
    color: #FFF;
    padding: 10px;
    font-weight: 300;
    border-radius: 50px;
}

.visible-book {
    display: block;
}

.visible-book-tools {
    display: block;
}

/*setting view tool*/
.container-visualization-tool {
    position: absolute;
    top: 32vh;
    right: 10vw;
    width: 100px;
    height: 40px;
    margin-bottom: 25px;
    align-content: center;
    justify-content: center;
    display: none;
}

.view-setting-button {
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.4);
    color: #101010;
    padding: 5px;
    border-radius: 25px;
    opacity: 0.7;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

/*SHARE CONTAINER SETTING*/
#share-container {
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    position: fixed;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(15px);
    z-index: 999999999;
    top: 0;
    left: 0;
    display: none;
}

.sharing-container {
    width: 30vw;
    height: 30vh;
    border-radius: 25px;
    box-sizing: border-box;
    position: absolute;
    left: 35vw;
    top: 35vh;
}

.closing-sharing-button {
    position: absolute;
    top: -2.5vh;
    right: -2.5vh;
    border-radius: 50px;
    color: #FFF;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: 0.2s;
    font-size: 2em;
    padding: 10px;
    border: 0.5px solid #FFF;
}

.closing-sharing-button:hover {
    transition: 0.2s;
    transform: scale(1.1);
}

#hidden-id-to-share {
    display: none;
}

.icons-container {
    width: 20vw;
    margin: 5vw;
    height: auto;
    position: absolute;
    top: 3vh;
    left: 0;
    display: flex;
    align-items: center;
}

/*GESTIONE BIG GALLERY*/
#main-img-zoomed-container {
    background: rgba(0, 0, 0, 0.45);
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    display: none;
}

.comeBack-button-container-transparent {
    position: absolute;
    top: calc(12vh + 25px);
    right: 25px;
    width: 5vw;
    height: 5vw;
    border: 0.5px solid #FFF;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-content: center;
    justify-content: center;
    border-radius: 250px;
    z-index: 99999999;
}

span.close-explosion-gallery {
    font-size: 6em;
    font-weight: 500;
    color: #FFF;
    transition: 0.2s;
    cursor: pointer;
}

span.close-explosion-gallery:hover {
    transition: 0.2s;
    transform: rotate(-90deg);
}

/*GESTIONE TITOLO DEL BOOK APERTO*/
h1#main-book-title {
    position: absolute;
    top: 25px;
    left: 25px;
    font-size: 1.4em;
    font-weight: 400;
    color: #FFF;
    background: #9000FF;
    padding: 20px;
    font-family: 'Bungee', sans-serif;
    border-radius: 25px;
    transform: translateX(-20vw);
    z-index: 1;
}

@keyframes animated-main-title {
    from {
        opacity: 0;
        transform: translateX(-20vw);
    }

    to {
        opacity: 1;
        transform: translateX(0vw);
    }
}

h1.animated-main-book-title {
    animation: animated-main-title;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.68, -0.85, 0.265, 1.55);
}

#main-book-img-container {
    height: 90vh;
    min-height: 90vh;
    max-height: 90vh;
    width: auto;
    object-fit: contain;
}

.prev-arrow-container,
.next-arrow-container {
    height: 100vh;
    width: 5vw;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.prev-arrow-container {
    left: 0;
}

.next-arrow-container {
    right: 0;
}

.prevImg-button,
.nextImg-button {
    font-weight: 500;
    color: #9000FF;
    transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    font-size: 5em;
    cursor: pointer;
}

.prev-arrow-container:hover {
    transform: translateX(-0.5vw);
    transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.next-arrow-container:hover {
    transform: translateX(0.5vw);
    transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

/*gestione riquadro descrizioni*/
#description-container {
    position: absolute;
    bottom: 50px;
    right: 150px;
    color: #FFF;
    text-align: right;
    font-style: italic;
    font-weight: 100;
    font-size: 1.2;
    width: 12vw;
    height: auto;
    max-height: 50vh;
    padding: 10px;
}

/*SHARE CONTAINER SETTING*/
#share-container {
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    position: fixed;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(15px);
    z-index: 999999999;
    top: 0;
    left: 0;
    display: none;
}

.sharing-container {
    width: 35vw;
    height: 30vh;
    border-radius: 25px;
    box-sizing: border-box;
    position: absolute;
    left: calc((100vw - 35vw) / 2);
    top: 35vh;
}

.closing-sharing-button {
    position: absolute;
    top: -2.5vh;
    right: -2.5vh;
    border-radius: 50px;
    color: #FFF;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: 0.2s;
    font-size: 2em;
    padding: 10px;
    border: 0.5px solid #FFF;
}

.closing-sharing-button:hover {
    transition: 0.2s;
    transform: scale(1.1);
}

#hidden-id-to-share {
    display: none;
}

@keyframes sharing-title-move {
    from {
        opacity: 0;
        transform: translateY(-5vh);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sharing-title-animation {
    animation: sharing-title-move;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

h1.sharing-title {
    width: 100%;
    font-size: 3em;
    letter-spacing: 3px;
    font-weight: 900;
    color: #FFF;
    text-align: center;
    opacity: 0;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sharing-text {
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
    font-size: 0.9em;
    color: #FFF;
    margin-top: 25px;
    font-weight: 100;
    letter-spacing: 2px;
    text-align: center;
    opacity: 0;
}

.icons-container {
    width: 30vw;
    margin: 5vw;
    height: auto;
    position: absolute;
    top: 7vh;
    left: 0;
    display: flex;
    align-items: center;
}

.sharing-platform-icon {
    font-size: 1.5em;
    padding: 5px;
    box-sizing: border-box;
    color: #FFF;
    background: rgba(255, 255, 255, 0.1);
    width: calc((25vw / 5) - 30px);
    height: calc((25vw / 5) - 30px);
    margin: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    transition: 0.2s;
    cursor: pointer;
    opacity: 0;
}

.sharing-platform-icon:hover {
    transition: 0.2s;
    transform: scale(1.1);
}

/*gestione messaggio di conferma copia link*/
#status {
    font-size: 0.7em;
    color: #FFF;
    background: rgba(30, 30, 30, 0.5);
    border-radius: 10px;
    position: absolute;
    bottom: -50px;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    letter-spacing: 5px;
    font-family: 'Poppins', sans-serif;
    right: 3.5vw;
    display: none;
    opacity: 0;
}

@keyframes move-and-appear {
    0% {
        opacity: 0;
        transform: translateY(0px);
    }

    30% {
        opacity: 1;
        transform: translateY(-30px);
    }

    60% {
        opacity: 1;
        transform: translateY(-30px);
    }

    100% {
        opacity: 0;
        transform: translateY(-30px);
    }
}

.status-animation {
    animation: move-and-appear;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

/******************************************/
/******************************************/
/*                                        */
/*   SETTING IMPOSTAZIONE BOOK DOWNLOAD   */
/*                                        */
/******************************************/
/******************************************/

/*layout book*/
.downloadedBook {
    z-index: 0;
    position: fixed;
    left: -10000vw;
}

.pageA4 {
    width: calc(210mm - 20px);
    /* Larghezza A4 */
    height: calc(297mm - 20px);
    /* Altezza A4 */
    /*margin: 20px; /* Margini esterni */
    padding: 10px;
    /* Spaziatura interna */
    box-sizing: border-box;
    page-break-before: always;
    /* Inizia una nuova pagina per ogni blocco con classe 'page' */
    margin-bottom: 20px;
    /* Margine inferiore tra le pagine */
    background-color: white;
}

.singleImgBook {
    width: calc(210mm - 7mm) !important;
    height: calc(297mm - 7mm) !important;
    margin: 3.5mm !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    background-size: contain !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
}

/********************/
/********************/
/*                  */
/* SETTING COMPOSIT */
/*                  */
/********************/
/********************/
/*popup esportazione composit pdf*/
.compositGenerationPopUp {
    position: fixed;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 15px rgb(90, 90, 90);
    backdrop-filter: blur(5px);
    width: 20vw;
    height: 10vh;
    left: 40vw;
    top: 45vh;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    display: none;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
}

.compositGenerationTxt {
    font-size: 0.9em;
    letter-spacing: 2px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    color: rgb(30, 30, 30);
    font-weight: 200;
    width: 40vw;
    height: 20vh;
    position: absolute;
    top: 40vh;
    left: 30vw;
}

/*gestione layout Composit*/
#composit {
    z-index: 0;
    display: none;
}

.page {
    width: 148mm;
    /* Larghezza A5 */
    height: 210mm;
    /* Altezza A5 */
    /*margin: 20px; /* Margini esterni */
    padding: 5mm;
    /* Spaziatura interna prima: 10px*/
    box-sizing: border-box;
    page-break-before: always;
    /* Inizia una nuova pagina per ogni blocco con classe 'page' */
    margin-bottom: 0px;
    /* Margine inferiore tra le pagine */
    background-color: white;
    background: url('/assets/media/img/influencer-composit-img/background.jpg');
    background-size: auto !important;
    background-position: center !important;
    font-family: 'Outfit', sans-serif;
}

.background-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    min-height: 210mm !important;
    max-height: 210mm !important;
    height: 210mm !important;
    min-width: 148mm !important;
    max-width: 148mm !important;
    width: 148mm !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0.3;
}

.compositFront,
.compositBack {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.left-side {
    width: 100mm;
    height: 180mm;
    min-width: 100mm;
    min-height: 180mm;
    max-width: 100mm;
    max-height: 180mm;
    margin-right: 2.5mm;
}

.right-side {
    width: 30mm;
    height: 200mm;
    min-width: 30mm;
    min-height: 200mm;
    max-width: 30mm;
    max-height: 200mm;
    background: #FFF;
    padding: 2.5mm;
    border-radius: 5mm;
    box-shadow: 0 0 10mm #000;
}

h1.compositName {
    width: 100mm !important;
    max-height: 15mm !important;
    font-size: 15mm !important;
    line-height: 15mm !important;
    text-align: center !important;
    margin-top: 0mm !important;
    font-weight: 900;
    color: #6500B4;
}

.compositCover {
    width: 100mm !important;
    height: 100mm !important;
    min-width: 100mm !important;
    min-height: 100mm !important;
    max-width: 100mm !important;
    max-height: 100mm !important;
    margin-left: 0mm !important;
    margin-right: 0mm !important;
    margin-top: 5mm !important;
    margin-bottom: 5mm !important;
    background-color: grey;
    background-size: cover !important;
    background-repeat: no-repeat;
    background-position: center top !important;
    border-radius: 50mm;
}

.follower-total-amount-title {
    width: 100mm;
    height: 4mm;
    font-size: 4mm;
    line-height: 0mm;
    letter-spacing: 1mm;
    color: #666;
}

.follower-total-amount {
    width: 100mm;
    height: 20mm;
    font-size: 20mm;
    line-height: 15mm;
    color: #222;
    font-weight: 900;
}

.bio-influencer-text {
    width: 100mm;
    min-width: 100mm;
    max-width: 100mm;
    height: 35mm;
    min-height: 35mm;
    max-height: 35mm;
    font-size: 4mm;
    line-height: 2.5mm;
    padding: 3mm;
    background: #FFF;
    box-sizing: border-box;
    border-radius: 3mm;
    margin-left: 1.5mm;
}

.compositFrontLogo {
    width: 30mm;
    min-width: 30mm;
    max-width: 30mm;
    height: auto;
    margin-top: 2.5mm;
    margin-bottom: 2.5mm;
}

/*SETTING FRONT RIGHT SIDE*/

.single-social-container {
    width: 30mm;
    height: 30mm;
    margin-top: 5mm;
}

.single-social-icon {
    width: 15mm;
    height: 15mm;
    margin-left: 15mm;
}

.single-social-data-title,
.single-social-data-title,
.single-social-data-value,
.single-social-data-value {
    width: 30mm;
    text-align: right;
}

.single-social-data-title,
.single-social-data-title {
    font-size: 3mm;
    line-height: 3mm;
    color: #999;
    font-weight: 300;
    margin-top: 0.5mm;
}

.single-social-data-value,
.single-social-data-value {
    font-size: 4mm;
    line-height: 4mm;
    color: #000;
    font-weight: 700;
}

ul.compositFeatureList {
    width: 130mm !important;
    height: 7mm !important;
    min-width: 130mm !important;
    min-height: 7mm !important;
    max-width: 130mm !important;
    max-height: 7mm !important;
    list-style: none !important;
    margin-left: calc(9mm - 10px);
    margin-right: calc(9mm - 10px);
}

li.compositSingleFeature {
    width: calc((130mm / 7) - 3mm);
    height: 7mm !important;
    min-width: calc((130mm / 7) - 3mm);
    min-height: 7mm !important;
    max-width: calc((130mm / 7) - 3mm);
    max-height: 7mm !important;
    margin-left: 1.5mm;
    margin-right: 1.5mm;
    font-size: 0.6em;
    text-align: center;
}

span.compositFeatureName {
    font-weight: 600;
}

.singleCompositImgContainer {
    width: 138mm !important;
    height: 65mm !important;
    min-width: 138mm !important;
    min-height: 65mm !important;
    max-width: 138mm !important;
    max-height: 65mm !important;
    margin-left: 0;
    margin-top: 5mm;
}

.singleCompositImg {
    width: calc((138mm / 2) - 5mm);
    height: 30mm;
    margin: 2.5mm !important;
    position: relative;
    background-size: contain !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
}


img.singleCompositImg {
    height: 100%
}

.firstCompositImg {
    top: 0;
    left: 0;
}

.secondCompositImg {
    top: 0;
    right: 0;
}

.thirdCompositImg {
    bottom: 0;
    left: 0;
}

.fourthCompositImg {
    bottom: 0;
    right: 0;
}

/*SETTING COVER REEL*/

.reel-cover-container-title {
    width: 138mm;
    font-size: 10mm;
    line-height: 10mm;
    color: #480080;
    font-weight: 800;
    letter-spacing: 1mm;
    text-align: center;
    margin-bottom: 2.5mm;
    margin-top: 2.5mm;
}

.reel-conver-container {
    width: 138mm;
    height: 70mm;
    min-height: 70mm;
    min-width: 138mm;
    max-width: 138mm;
    max-height: 70mm;
    margin-top: 15mm;
}

.single-composit-reel-cover {
    width: calc((138mm / 3) - 5mm) !important;
    height: 70mm !important;
    min-width: calc((138mm / 3) - 5mm) !important;
    min-height: 70mm !important;
    max-width: calc((138mm / 3) - 5mm) !important;
    max-height: 70mm !important;
    border-radius: 3mm;
    margin-left: 2mm;
    margin-right: 2mm;
    position: relative;
}


.single-composit-reel-cover-img {
    width: calc((138mm / 3) - 5mm) !important;
    height: 70mm !important;
    min-width: calc((138mm / 3) - 5mm) !important;
    min-height: 70mm !important;
    max-width: calc((138mm / 3) - 5mm) !important;
    max-height: 70mm !important;
    border-radius: 3mm;
    margin-left: 2mm;
    margin-right: 2mm;
    position: relative;
    object-fit: contain;
}

.single-composit-reeel-text-container {
    position: absolute;
    top: 40mm;
    width: calc((138mm / 3) - 5mm);
    height: auto;
}

.single-composit-reel-title {
    width: calc((138mm / 3) - 5mm);
    height: 7mm;
    background: #6500B4;
    color: #FFF;
    margin-left: -2.5mm;
    font-size: 4mm;
    line-height: 4mm;
    text-align: right;
    font-weight: 500;
    padding: 1.5mm;
    border-radius: 2mm;
    box-sizing: border-box;
}

.single-composit-reel-description {
    width: calc((138mm / 3) - 8mm);
    height: auto;
    background: #FFF;
    color: #222;
    margin-left: -2.5mm;
    font-size: 3mm;
    line-height: 3mm;
    text-align: left;
    font-weight: 500;
    padding: 1.5mm;
    border-radius: 2mm;
    box-sizing: border-box;
}

.compositRearlogo {
    width: 30mm;
    min-width: 30mm;
    max-width: 30mm;
    height: auto;
    margin-top: 25mm;
    margin-bottom: 1.5mm;
    margin-right: calc((138mm - 30mm) / 2);
    margin-left: calc((138mm - 30mm) / 2);
}

p.compositLastInfo {
    /* OLD SETTING 
    width: 90mm;
    height:10mm;
    font-size: 3mm;
    color: rgb(30,30,30);
    text-align: center;
    line-height: 1.1em;
    margin-left: calc((140mm - 90mm) / 2);
    margin-right: calc((140mm - 90mm) / 2);
    margin-top: 1mm;
    margin-bottom: 0mm;
    */
    width: 47mm;
    height: 10mm;
    font-size: 2mm;
    color: rgb(30, 30, 30);
    text-align: center;
    line-height: 1.1em;
    margin-left: 10mm;
    margin-right: 10mm;
    margin-top: 1mm;
    margin-bottom: 5mm;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.composit-influencer-data {
    width: 140mm;
    min-width: 140mm;
    max-width: 140mm;
    height: 70mm;
    min-height: 70mm;
    max-height: 70mm;
}

.composit-influencer-data-title {
    width: calc(100% - 6mm);
    height: 10mm;
    font-weight: bold;
    font-size: 10mm;
    background: #6500B4;
    color: #FFF;
    padding: 3mm;
    font-family: 'Bungee', sans-serif;
    border-radius: 3mm;
    text-align: center;
    margin-top: 80mm;
}

.composit-engagement-container {
    width: 100%;
    height: 15mm;
    margin-top: 3mm;
}

.composit-engagement-value {
    color: #33005A;
    font-size: 13mm;
    font-weight: 900;
    letter-spacing: -1.5mm;
    opacity: 0.5;
    position: absolute;
    bottom: 0mm;
    right: 2mm;
}

.composit-engagement-title {
    font-size: 7mm;
    font-weight: bold;
    position: absolute;
    top: 0mm;
    left: 2mm;
    text-align: right;
    color: #6500B4;
    font-weight: 100;
    box-sizing: border-box;
}

.composit-media-likes-container {
    margin: 0;
    padding: 0;
    width: calc(100mm - 40mm);
    margin-right: 35mm;
    margin-left: 5mm;
    height: 10mm;
    display: inline;
}

.composit-media-likes-title,
.composit-media-comments-title,
.composit-media-comments-value,
.composit-media-likes-value {
    width: auto;
    float: left;
}

.composit-media-comments-value,
.composit-media-likes-value {
    margin: 0;
    padding: 0;
    font-size: 5mm;
    text-align: right;
    color: #6500B4;
    margin-right: 3mm;
}

.composit-media-likes-title,
.composit-media-comments-title {
    margin: 0;
    padding: 0;
    font-weight: 100;
    text-align: left;
    font-size: 3mm;
    color: #6500B4;
}

/*GESTIONE CONDIVISIONE EMAIL*/
.mail-sharing-container {
    width: 30vw;
    height: 25vh;
    position: fixed;
    bottom: 0;
    left: calc(50vw - 15vw);
    right: calc(50vw - 15vw);
    background: linear-gradient(180deg, #33005A 0%, #6500B4 100%);
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    z-index: 99999;
    padding-bottom: 20vh;
    z-index: 999999999;
}

.close-email-panel-button {
    position: absolute;
    top: 10px;
    right: 10px;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50px;
    padding: 10px;
    font-size: 1.4em;
    font-weight: 100;
    transition: 0.5s;
    cursor: pointer;
    z-index: 99999;
    transform: rotate(90deg);
}

.close-email-panel-button:hover {
    transition: 0.2s;
    transform: scale(1.1) rotate(90deg);
    ;
}

.mail-sharing-icon {
    width: 20vw;
    height: auto;
    transform: rotate(-5deg);
    position: absolute;
    top: -5vw;
    left: -5vw;
}

h1.mail-sharing-title {
    width: 25vw;
    min-width: 25vw;
    max-width: 25vw;
    padding-right: 5vw;
    margin-top: 2.5vh;
    color: #FFF;
    text-align: right;
    font-weight: 900;
    font-size: 3em;
    letter-spacing: -2px;
    line-height: 0.9em;
}

.mail-sharing-content {
    width: 20vw;
    height: auto;
    margin-left: 5vw;
    margin-top: 5vh;
}

p.mail-sharing-text {
    width: 100%;
    font-size: 1.2em;
    font-weight: 300;
    color: #FFF;
    text-align: right;
    line-height: 1.2em;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

input.emailInputClass {
    margin-left: 0 !important;
    width: calc(100% - 30px);
    padding: 15px;
    text-align: center;
    border: none;
    background: #33005A;
    color: #FFF;
}

.shareMailButton {
    background: #9100FF;
    color: #FFF;
    font-size: 1.2em;
    letter-spacing: 1px;
    border-radius: 5px;
    position: absolute;
    bottom: 5vw;
    right: 5vw;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
    transition: 0.2s;
}

.shareMailButton:hover {
    transition: 0.2s;
    transform: scale(1.2);
}

.validationMessage {
    width: 10vw;
    min-width: 10vw;
    max-width: 10vw;
    position: absolute;
    bottom: 5vw;
    left: 5vw;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 1.5px;
    border-radius: 50px;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    display: none;
}

.validationNegativeMessage {
    background: rgb(170, 20, 20);
    color: #FFF;
}

.validationPositiveMessage {
    background: rgb(11, 179, 48);
    color: rgb(5, 77, 21);
}

/*impostazioni per elementi desktop*/
.book-name-container-mobile,
.open-book-popup-mobile {
    display: none;
}


/*SETTING DESKTOP DEVICE*/
@media (min-width: 1024px) and (max-width: 1279px) {

    h1.follower-title,
    h1.engagement-title {
        font-size: 0.85em;
        letter-spacing: 2px;
    }

    h1.follower-value {
        font-size: 4.5em;
    }

    h1.engagement-value {
        font-size: 4.5em;
        line-height: 0.8em;
    }

    h1.media-upload-title,
    h1.following-title,
    h1.media-likes-title,
    h1.media-comments-title {
        font-size: 0.7em;
        letter-spacing: 1px;
    }

    h1.media-upload-value,
    h1.following-value,
    h1.media-likes-value,
    h1.media-comments-value {
        font-size: 2em;
    }

    .influencer-general-container {
        width: 40vw;
    }

    h1.influencer-name {
        height: 4vh;
        width: calc(40vw - (40vh - 5vw) - 5vw);
        font-weight: 100;
        font-size: 1.8em;
    }

    h1.influencer-follower {
        font-size: 8em;
        width: calc(60vw - (40vh - 5vw) - 5vw);
    }

    li.info-list-item {
        padding: 10px;
        font-size: 0.65em;
        letter-spacing: 2px;
    }

    .single-talent-share-icon {
        padding: 3.2px;
    }

    .compcard-button {
        margin-right: 5px;
        padding: 10px;
        font-size: 0.65em;
    }

    .icons-container {
        top: 17vh;
    }

    li.single-model-nw-feature {
        margin: 7px;
        padding: 10px;
        width: calc(((45vw - 5vw) / 3) - 14px);
        min-width: calc(((45vw - 5vw) / 3) - 14px);
        max-width: calc(((45vw - 5vw) / 3) - 14px);
        height: calc(((45vh - 7vw) / 3) - 14px);
        min-height: calc(((45vh - 7vw) / 3) - 14px);
        max-height: calc(((45vh - 7vw) / 3) - 14px);
    }

    p.single-nw-feature-name {
        top: 5px;
        left: 5px;
    }

    p.single-nw-feature-value {
        font-size: 1.5em;
        bottom: 5px;
        right: 5px;
    }

    p.bio-text-fetaure-value {
        font-size: 0.8em !important;
        line-height: 1em;
        width: calc(100% - 70px);
        padding-left: 60px;
        padding-top: 75px;
        height: auto;
    }

    .single-book-name {
        font-size: 0.75em;
        letter-spacing: 1px;
        margin-bottom: 15px;
        padding: 5px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .single-img,
    .single-video {
        width: calc(((30vw - 25px) / 3) - 10px);
        min-width: calc(((30vw - 25px) / 3) - 10px);
        max-width: calc(((30vw - 25px) / 3) - 10px);
        height: calc(((30vw - 25px) / 4) - 10px);
        min-height: calc(((30vw - 25px) / 3) - 10px);
        max-height: calc(((30vw - 25px) / 3) - 10px);
        margin: 5px;
    }

    span.close-explosion-gallery {
        font-size: 3.2em;
    }

    .prevImg-button {
        padding-left: 50px;
    }

    .nextImg-button {
        padding-right: 15px;
    }
}

@media (min-width: 1280px) and (max-width: 1365px) {
    .single-book-name {
        font-size: 0.8em;
        letter-spacing: 1px;
        margin-bottom: 15px;
        padding: 5px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .single-img,
    .single-video {
        width: calc(((30vw - 25px) / 3) - 10px);
        min-width: calc(((30vw - 25px) / 3) - 10px);
        max-width: calc(((30vw - 25px) / 3) - 10px);
        height: calc(((30vw - 25px) / 4) - 10px);
        min-height: calc(((30vw - 25px) / 3) - 10px);
        max-height: calc(((30vw - 25px) / 3) - 10px);
        margin: 5px;
    }

    h1.influencer-follower {
        font-size: 8.5em;
    }

    h1.influencer-name {
        height: 4vh;
        width: calc(60vw - (40vh - 5vw) - 5vw);
        font-size: 2em;
        line-height: 0.8em;
    }

    h1.follower-title,
    h1.engagement-title {
        font-size: 0.85em;
        letter-spacing: 2px;
    }

    h1.follower-value {
        font-size: 5em;
        line-height: 1.2em;
    }

    h1.engagement-value {
        font-size: 4.5em;
        line-height: 1.2em;
    }

    h1.media-upload-title,
    h1.following-title,
    h1.media-likes-title,
    h1.media-comments-title {
        font-size: 0.7em;
        letter-spacing: 1px;
    }

    h1.media-upload-value,
    h1.following-value,
    h1.media-likes-value,
    h1.media-comments-value {
        font-size: 2em;
    }

    .icons-container {
        top: 10vh;
    }

    li.single-model-nw-feature {
        margin: 7px;
        padding: 10px;
        width: calc(((45vw - 5vw) / 3) - 14px);
        min-width: calc(((45vw - 5vw) / 3) - 14px);
        max-width: calc(((45vw - 5vw) / 3) - 14px);
        height: calc(((45vh - 7vw) / 3) - 14px);
        min-height: calc(((45vh - 7vw) / 3) - 14px);
        max-height: calc(((45vh - 7vw) / 3) - 14px);
    }

    span.close-explosion-gallery {
        font-size: 4em;
    }

    p.single-nw-feature-value {
        font-size: 1.4em;
        line-height: 0.8em;
    }

    p.bio-text-fetaure-value {
        font-size: 0.9em !important;
        line-height: 1.3em;
        width: calc(100% - 70px);
        padding-left: 60px;
    }

    .prevImg-button {
        padding-left: 45px;
    }
}

@media (min-width: 1366px) and (max-width: 1439px) {
    .single-book-name {
        font-size: 0.8em;
        letter-spacing: 2px;
        padding: 5px;
        padding-right: 10px;
        padding-left: 10px;
    }

    h1.follower-value {
        font-size: 5em;
        line-height: 1.2em;
    }

    li.single-model-nw-feature {
        margin: 7px;
        padding: 10px;
        width: calc(((45vw - 5vw) / 3) - 14px);
        min-width: calc(((45vw - 5vw) / 3) - 14px);
        max-width: calc(((45vw - 5vw) / 3) - 14px);
        height: calc(((45vh - 7vw) / 3) - 14px);
        min-height: calc(((45vh - 7vw) / 3) - 14px);
        max-height: calc(((45vh - 7vw) / 3) - 14px);
    }

    .influencer-general-container {
        width: 40vw;
        margin-left: 5vw;
        margin-right: 1vw;
    }

    h1.influencer-name {
        height: 5vh;
        font-size: 2.5em;
    }

    p.single-nw-feature-value {
        font-size: 2em;
        line-height: 0.8em;
    }

    p.bio-text-fetaure-value {
        font-size: 0.9em !important;
        line-height: 1.3em;
        width: calc(100% - 70px);
        padding-left: 60px;
    }

    span.close-explosion-gallery {
        font-size: 4.3em;
    }

    .prevImg-button {
        padding-left: 45px;
    }
}

@media (min-width: 1440px) and (max-width: 1679px) {
    p.single-nw-feature-value {
        font-size: 2em;
    }

    span.close-explosion-gallery {
        font-size: 4.6em;
    }

    .prevImg-button {
        padding-left: 40px;
    }
}

@media (min-width: 1680px) and (max-width: 1919px) {
    .influencer-general-container {
        width: 40vw;
        margin-left: 5vw;
        margin-right: 1vw;
        bottom: 9vh;
    }

    h1.influencer-name {
        height: 3vh;
        font-size: 2.5em;
    }

    p.single-nw-feature-value {
        font-size: 2em;
        line-height: 0.8em;
    }

    p.bio-text-fetaure-value {
        font-size: 1em !important;
        line-height: 1.5em;
        width: calc(100% - 110px);
        padding-left: 100px;
    }

    span.close-explosion-gallery {
        font-size: 5.3em;
    }

    .prevImg-button {
        padding-left: 45px;
    }

    h1.influencer-follower {
        height: 12vh;
        font-size: 10em;
    }
}




/************************************/
/************************************/
/************************************/
/*SETTING SEZIONE MOBILE SOCIAL VIEW*/
/************************************/
/************************************/
/************************************/

.media-container-social-view {
    position: relative;
    width: 80vw;
    max-width: 80vw;
    min-width: 80vw;
    height: auto;
    min-height: 40vh;
    padding: 2rem;
    border-radius: 2rem;
    margin-top: 2rem;
    background: transparent;
    box-sizing: border-box;
}


.book-name-container-social-view {
    height: auto;
    width: 10vw;
    min-width: 10vw;
    max-width: 10vw;
    height: auto;
    max-height: calc(55vh - 5vw);
    min-height: calc(55vh - 5vw);
    overflow-y: scroll;
    margin-left: calc(-10vw - 2rem);
}

.single-book-name-container-social-view {
    color: #FFF;
    width: auto;
    max-width: 10vw;
    font-size: 1em;
    letter-spacing: 0.1rem;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 0.9em;
    cursor: pointer;
    clear: both;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.5);
    padding: 10px;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
    border: 0.5px solid #FFF;
    border-radius: 50px;
    transition: 0.2s;
    overflow: hidden;
    opacity: 1;
}

.book-container-social-view {
    position: relative;
    width: 70vw;
    min-width: 70vw;
    max-width: 70vw;
    height: auto;
    max-height: unset;
    min-height: 40vh;
    background: transparent;
    box-sizing: border-box;
    margin-left: unset;
    padding-bottom: unset;
    padding: 2rem;
    box-sizing: border-box;
    display: none;
    margin-top: unset;
    margin-right: calc(5vw - 2rem);
    margin-left: calc(5vw - 2rem);
}

.visible-book-social-view {
    display: none;
}

.visible-book-social-view.visible-book {
    display: block;
}

.single-img-visible-social-view {
    opacity: 1;
}

.single-round-img-influencer-container {
    width: 15vw;
    height: 15vw;
    min-width: 15vw;
    min-height: 15vw;
    max-width: 15vw;
    max-height: 15vw;

    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(225deg, rgba(207, 3, 200, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
    border-radius: 50rem;
    clear: both;
}

.single-round-img-influencer-content {
    width: calc(15vw - 0.5rem);
    height: calc(15vw - 0.5rem);
    min-width: calc(15vw - 0.5rem);
    min-height: calc(15vw - 0.5rem);
    max-width: calc(15vw - 0.5rem);
    max-height: calc(15vw - 0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF;
    border-radius: 50rem;
}

.single-round-img {
    width: calc(15vw - 1rem);
    height: calc(15vw - 1rem);
    min-width: calc(15vw - 1rem);
    min-height: calc(15vw - 1rem);
    max-width: calc(15vw - 1rem);
    max-height: calc(15vw - 1rem);
    border-radius: 50rem;
    object-position: top center;
}

.profile-img-and-tecnical-info {
    width: calc(70vw - 2rem);
    min-width: calc(70vw - 2rem);
    max-width: calc(70vw - 2rem);
    position: relative;
    margin-top: 2rem;
    margin-left: calc(5vw - 1rem);
    margin-right: calc(5vw - 1rem);
    padding: 2rem;
    box-sizing: border-box;
}

.slider-img-view {
    width: calc(70vw - 2rem);
    min-width: calc(70vw - 2rem);
    max-width: calc(70vw - 2rem);
    height: 31vw;
    min-height: 31vw;
    max-height: 31vw;
    object-fit: cover;
    object-position: center;
    border: 1px solid #FFF;
    margin: 0;
    margin-top: -1px;
    box-sizing: border-box;
}

.slider-img-view-contains {
    width: calc(70vw - 2rem);
    min-width: calc(70vw - 2rem);
    max-width: calc(70vw - 2rem);
    height: 22vw;
    min-height: 22vw;
    max-height: 22vw;
    object-fit: contain;
    object-position: center;
    border: 1px solid #FFF;
    margin: 0;
    margin-top: -1px;
    box-sizing: border-box;
    background: #FFF;
    padding: 1rem;
    box-sizing: border-box;
}

/*GESTIONE DELLE TECNICAL INFO*/
.tecnical-info {
    width: calc((70vw - 6rem) - 15vw - 2rem);
    margin-left: 2rem;
    height: 15vw;
    min-height: 15vw;
    max-height: 15vw;
    padding: 1rem;
    color: #FFF;
    position: relative;
    top: unset;
    /*2rem*/
    right: unset;
    /*2rem*/
    text-align: left;
    /*filter: invert(100%);*/
    padding-top: 3rem;
    padding-bottom: 3rem;
    box-sizing: border-box;
}

.tecnica-info-name {
    font-size: 1.8rem;
    line-height: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.1rem;
    float: left;
    clear: both;
}

.tecnica-info-link-main-profile {
    font-size: 1.2rem;
    line-height: 1.2rem;
    font-weight: 300;
    letter-spacing: 0.1rem;
    text-transform: lowercase;
    opacity: 0.8;
    margin-top: 0rem;
    float: left;
    clear: both;
}

.tecnical-datas-container {
    width: calc(((70vw - 4rem) - 15vw - 2rem) - 2rem);
    margin-top: 1rem;
}

.tecnical-data-content {
    float: left;
    margin-right: 1.5rem;
}

.tecnical-data-value {
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
    line-height: 1.2rem;
    font-weight: 700;
    margin-right: 0.2rem;
}

.tecnical-data-value span {
    font-weight: 100;
    letter-spacing: 0.1rem;
}

.tecnical-data-label {
    font-size: 1rem;
    letter-spacing: 0.1rem;
    line-height: 1.2rem;
    font-weight: 300;
}

.tecnical-data-location {
    width: 100%;
    text-align: left;
    margin-top: 2rem;
    font-size: 1rem;
    line-height: 1.2rem;
    font-weight: 300;
    letter-spacing: 0.1rem;
    text-transform: lowercase;
    opacity: 0.8;
}


/*POPUP RIHIESTA AUTORIZZAZIONE*/
.popup-request-access-to-profile {
    position: sticky;
    width: 30vw;
    padding: 0.5rem;
    height: auto;
    min-height: auto;
    margin-top: calc(25vh - 7vh);
    color: #222;
    border-radius: 1.5rem;
    box-shadow: 0 0 2rem #000000c8;
    bottom: 0;
    background: linear-gradient(243deg, rgba(151, 63, 251, 1) 0%, rgba(252, 112, 70, 1) 100%);
    box-sizing: border-box;
    display: block;
    bottom: 25vh;
    left: 38vw;
    box-shadow: inset 0 0 15rem #FFFFFF;
    font-family: 'Outfit', sans-serif;
    display: none;
}

.popup-request-access-to-profile-content {
    position: relative;
    margin: 0rem;
    width: calc(30vw - 1rem);
    height: auto;
    min-height: calc(30vh - 1rem);
    max-height: unset;
    border-radius: 1rem;
    background: #FFFFFFb5;
    padding: 2rem;
    box-sizing: border-box;
}

button.popup-request-access-to-profile-closing-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
}

.popup-request-access-to-profile-title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.2rem;
    line-height: 2rem;
    text-align: center;
    margin-top: 2rem;
}

.popup-request-access-to-profile-title span {
    width: 100%;
    float: left;
    text-align: center;
    display: block;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.popup-request-access-to-profile-text {
    font-size: 1rem;
    line-height: 1rem;
    letter-spacing: 0.2rem;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 100%;
}

.popup-request-access-to-profile-button-container {
    width: 100%;
    margin: 0;
}

.popup-request-access-to-profile-button,
.popup-request-access-to-profile-button-request,
.popup-request-access-to-profile-button-abort {
    width: calc(50% - 2rem);
    height: auto;
    font-size: 1rem;
    line-height: 1rem;
    text-transform: uppercase;
    border: none;
    border-radius: 10rem;
    padding: 1rem;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    margin: 1rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: 0.1rem;
    cursor: pointer;
    transition: 0.2s;
    margin-bottom: 0;
}

.popup-request-access-to-profile-button-request {
    background: #222;
    color: #FFF;
}

.popup-request-access-to-profile-button-request:hover {
    background: #000;
    color: #FFF;
    transition: 0.2s;
}

.popup-request-access-to-profile-button-abort {
    background: #c5c5c5;
    color: #222;
}

.popup-request-access-to-profile-button-abort:hover {
    background: #FFF;
    color: #000;
}

/*GESTIONE FORM RICHIESTA*/

#requestForm {
    position: relative;
    float: right;
    width: calc(30vw - 1rem);
    min-height: calc(30vh - 1rem);
    padding: 2rem;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
}

.form-input {
    position: relative;
    width: 100%;
    clear: both;
    border: none;
    border-radius: 5rem;
    line-height: 1rem;
    font-size: 0.9rem;
    height: 1rem;
    color: #000;
    padding: 0.5rem;
}

.form-label {
    position: relative;
    width: 100%;
    clear: both;
    margin-top: 0.5rem;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    font-size: 1rem;
    line-height: 1rem;
    margin-bottom: 0.2rem;
}

.checkbox-group-title {
    margin-top: 1rem;
}

.checkbox-group {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: calc(1rem / 2);
    row-gap: 0.5rem;
    margin-top: 0.5rem;
}

.pill {
    width: calc(100% - (1rem / 3));
    height: 1rem;
    font-size: 0.9rem;
    line-height: 1rem;
    letter-spacing: -0.05rem;
}

.pill span,
input#other_text {
    font-size: 0.9rem;
    line-height: 1rem;
    letter-spacing: -0.05rem;
}

.pill input[type=checkbox] {
    line-height: 1.5rem;
    width: 1rem;
    height: 1rem;
    margin-right: 0.1rem;
}

#requestForm button {
    border: none;
    border-radius: 0.5rem;
    background: #222;
    color: #FFF;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    font-size: 1rem;
    line-height: 1rem;
    font-family: 'Outfit', sans-serif;
    padding: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    float: right;
    margin-top: 1.5rem;
    cursor: pointer;
    transition: 0.2s;
}

#requestForm button:hover {
    background: #000;
    transition: 0.2s;
}

.check-box-label {
    width: 90%;
    margin-left: 0.5rem;
    float: right;
    text-transform: lowercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

.first-check-box-label {
    margin-top: 1rem;
}

.check-box-input {
    width: 1rem;
    height: 1rem;
    margin-left: calc(10% - 1.5rem);
}

/*SETTING ERROR PANEL/MESSAGE*/

#risultatoForm-Id {
    bottom: unset;
    right: unset;
    background: transparent;
    color: #000;
    font-size: 0.9rem;
    line-height: 1rem;
    border: 0.5px solid #000;
    padding: 0.5rem;
    border-radius: 0.5rem;
    display: none;
    position: relative;
    margin-left: 0rem;
    margin-left: calc(15vw - (10vw - 2rem));
    width: calc(20vw - 4rem);
    margin-bottom: 5vh;
    position: fixed;
    background: #FFF;
    bottom: unset;
    top: 30vh;
    right: unset;
    font-size: 1.5rem;
    line-height: 1.7rem;
    padding: 1rem;
    box-shadow: 0 0 1rem #00000080;
    padding-bottom: 3rem;
    z-index: 9;
    font-family: 'Outfit', sans-serif;
}

.success-button {
    padding: 1rem;
    background: #ffc400;
    color: #000;
    font-weight: 900;
    font-size: 1.2rem;
    border-radius: 0.5rem;
    color: #000;
    width: calc(100% - 2rem);
    text-align: center;
    border: none;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.success-button span {
    font-weight: 200;
    letter-spacing: 0.15rem;
}

/*animazione buffering php richiesta profilo ig*/
.sending-message {
    text-align: center;
    font-size: 16px;
    padding: 20px;
}

.sending-message .dots {
    display: inline-block;
    width: 1.5em;
    text-align: left;
    animation: dots 1.5s infinite steps(3, end);
}

@keyframes dots {
    0% {
        content: '';
    }

    33% {
        content: '.';
    }

    66% {
        content: '..';
    }

    100% {
        content: '...';
    }
}


/*gestione pannello x messaggi errre*/
.error-message {
    color: red !important;
    border: 0.5px solid red !important;
}

p.errorMessage {
    margin-top: 1rem;
}

/*GESTIONE MESSAGGIO DI SUCCESSO*/
.popup-confirm.success p {
    width: calc(100% - 2rem);
    height: auto;
    font-size: 1rem;
    letter-spacing: 0.1rem;
    line-height: 1.2rem;
    color: #222;
    margin: 1rem;
}

.popup-confirm.success button {
    width: calc(100% - 2rem);
    margin: 1rem;
    padding: 1rem;
    background: #ffc400;
    color: #333;
    border-radius: 0.5rem;
    text-transform: uppercase;
    font-weight: 800;
    border: none;
    cursor: pointer;
    transition: 0.2s;
}

.popup-confirm.success button:hover {
    background: #ffae00;
    color: #000;
    transition: 0.2s;
}

/* GESTIONE BIO */
.bio-container {
    position: fixed;
    width: 40vw;
    height: 80vh;
    top: 15vh;
    left: 30vw;
    border-radius: 1rem;
    background: #3338;
    backdrop-filter: blur(1rem);
    color: #FFF;
    padding: 2rem;
    box-sizing: border-box;
    z-index: 9999999999;
    display: none;
}


/***********************/
/***********************/
/***********************/
/***********************/
/*setting mobile device*/
/***********************/
/***********************/
/***********************/
/***********************/
@media (min-width: 279px) and (max-width: 823px) {

    /* momentaneo */


    .info-section-specific-title-platform {
        display: none;
    }

    .info-section-tiktok,
    .info-section-youtube,
    .info-section-facebook,
    .info-section-twitch {
        display: none;
    }

    /* momentaneo */

    /* gestione pannello social */
    .social-platform-container {
        display: block;
        width: calc(95vw - 2rem);
        margin-left: 1rem;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: auto;
        margin-top: 1rem;
        height: 3rem;
    }

    /* gestione del pannello con valutazione sb */
    .vote-rank-container {
        width: 100vw;
        min-height: 50vh;
        height: auto;
        position: fixed;
        top: unset;
        bottom: 0;
        left: 0;
        background: #FFFFFF19;
        backdrop-filter: blur(1rem);
        border-radius: 0;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        padding: 2rem;
        box-sizing: border-box;
        z-index: 99999999999;
        padding-top: 5rem;
        visibility: hidden;
        opacity: 0;
        display: none;
    }

    .no-desk-item {
        display: block;
    }

    .closing-vote-rank-container {
        width: 2rem;
        height: 2rem;
        background: #9000FF;
        border-radius: 5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 1rem;
        right: 2rem;
    }

    .rank-icon-container {
        position: absolute;
        margin-right: 10px;
        border-radius: 50px;
        color: #FFF;
        text-transform: uppercase;
        font-weight: 100;
        background: rgba(90, 90, 90, 0.4);
        padding: 0.7rem;
        font-size: 1.7em;
        letter-spacing: 2px;
        top: -28vh;
        left: 0;
    }

    span.vote-title {
        top: 2rem;
        left: 2rem;
    }

    .vote-container {
        width: 15vh;
        height: 15vh;
        margin-left: calc(100vw - 4rem - 30vh);
        font-weight: 900;
        background: #9000FF;
        border-radius: 1rem;
        color: #FFF;
        font-size: 6rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .single-platform-space {
        border-radius: 0.5rem;
    }

    .reduced-social-icon svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .back-to-history-button {
        width: 38px;
        height: 38px;
        margin-top: 5px;
    }

    .single-influencer-data-container {
        position: absolute;
        top: 0;
        right: 0;
        height: 50vh;
        background: transparent;
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
        z-index: 999;
        width: 100vw;
        /*prima: 95vw*/
        height: auto;
        min-height: 80vh;
        margin-bottom: 10vh;
        /*top: calc((100vh - 50vh) / 3);*/
        left: 0;
        /*prima 2.5vw*/
    }

    .single-influencer-space {
        width: 95vw;
        min-height: 80vh;
        margin-bottom: 2rem;
        /*prima: 70vh - prima ancora: 10vh*/
    }

    .influencer-pic-container {
        /*settting della influencer-pic, passati al suo container*/
        z-index: 999;
        opacity: 0;
        /*fine dei setting influencer-pic passati al suo container*/
        width: 70vw;
        height: 70vw;
        border-radius: 50rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(225deg, rgba(207, 3, 200, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
        top: -7.5vh;
        /*top: -2.5vh;*/
        left: calc((95vw - 70vw) / 2);
        /*left: calc((95vw - 60vw) / 2);*/
    }

    .influencer-icon-container {
        top: -7.5vh;
    }

    .influencer-pic-content {
        width: calc(70vw - 0.5rem);
        height: calc(70vw - 0.5rem);
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FFF;
        border-radius: 50rem;
    }

    img.influencer-pic {
        width: calc(70vw - 1rem);
        height: calc(70vw - 1rem);
        border-radius: 50rem;
    }

    .influencer-info-container {
        width: 95vw;
        height: auto;
        min-height: 80vh;
        max-height: 80vh;
        left: 0vw;
        border-radius: 25px;
        background: linear-gradient(0deg, rgba(30, 30, 30, 0.7) 0%, rgba(30, 30, 30, 0) 90%);
        overflow: hidden;
        padding-bottom: 0.5rem;
    }

    .info-container {
        /*
        top: 25vh;
        */
        top: 48vh;
        right: 0;
    }

    ul.info-list {
        width: auto;
        width: calc(95vw - 5vw);
        min-width: calc(95vw - 5vw);
        max-width: calc(95vw - 5vw);
        height: calc(10vh - 30px);
        top: 0;
        right: 2.5vw;
        margin: 0px;
        margin-left: 0px;
        margin-top: 10px;
    }

    .downloadedBook {
        z-index: 0;
        position: fixed;
        left: 10000vw;
    }

    .info-section {
        position: absolute;
        top: 0;
        right: 0;
    }

    .influencer-data {
        /*
        height: 40vh;
        min-height: 40vh;
        max-height: 40vh;
        width: calc(95vw - 0vw);
        min-width: calc(95vw - 0vw);
        max-width: calc(95vw - 0vw);
        margin-top: 10vh;
        position: absolute;
        top: 0;
        right: 0;
        */
        height: 25vh;
        min-height: 25vh;
        max-height: 25vh;
        width: calc(95vw - 0vw);
        min-width: calc(95vw - 0vw);
        max-width: calc(95vw - 0vw);
        margin-top: 7vh;
        position: absolute;
        top: 0;
        right: 0;
    }

    .basic-info-container {
        margin-right: 0;
    }

    .info-data-disclaimer {
        position: absolute;
        bottom: calc(-6vh - 1rem);
        right: 0rem;
        color: #FFFFFF50;
        font-size: 0.7rem;
        padding: 0.3rem;
        font-weight: 100;
        width: 92vw;
        height: 5vh;
        display: flex;
        align-items: center;
        justify-self: center;
        border-radius: 0.2rem;
        line-height: 0.7rem;
        letter-spacing: 0.05rem;
    }

    .info-section-specific-platform {
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;
    }

    .basic-info-container,
    .deep-info-container {
        top: 0;
        /*valore precedente 5vh per creare distanza tra voci menu e dati*/
        width: calc(((95vw - 20px) / 2) - 1rem);
        min-width: calc(((95vw - 20px) / 2) - 1rem);
        max-width: calc(((95vw - 20px) / 2) - 1rem);
        /* vecchie misure */
        /* width: calc((95vw - 20px) / 2);
        min-width: calc((95vw - 20px) / 2);
        max-width: calc((95vw - 20px) / 2); */
        margin: 0;
        margin-top: 0;
        margin-bottom: 5vh;
        height: auto;
        margin: 5px;
    }

    .follower-container,
    .engagement-container {
        width: calc((47.5vw - 7.5vw) / 1);
        min-width: calc((47.5vw - 7.5vw) / 1);
        max-width: calc((47.5vw - 7.5vw) / 1);
        text-align: left;
        opacity: 0;
        height: 5vh;
    }

    h1.follower-title,
    h1.engagement-title {
        width: 100%;
        font-size: 0.9em;
        color: #FFF;
        letter-spacing: 0.5px;
        font-weight: 100;
    }

    h1.follower-value {
        font-size: 2.5em;
        letter-spacing: 0;
        line-height: 0.8em;
        font-weight: 900;
    }

    .mediaFollowing-container,
    .mediaComments-container {
        width: calc((47.5vw - 5vw) / 1);
        min-width: calc((47.5vw - 5vw) / 1);
        max-width: calc((47.5vw - 5vw) / 1);
        margin-top: 25px;
        opacity: 0;
    }

    .media-upload-container,
    .following-container,
    .media-likes-container,
    .media-comments-container {
        width: calc((47.5vw - 5vw) / 2);
        min-width: calc((47.5vw - 5vw) / 2);
        max-width: calc((47.5vw - 5vw) / 2);
    }

    h1.media-upload-title,
    h1.following-title,
    h1.media-likes-title,
    h1.media-comments-title {
        width: 100%;
        font-size: 0.8em;
        color: #FFF;
        letter-spacing: 0.5px;
        font-weight: 100;
    }

    h1.media-upload-value,
    h1.following-value,
    h1.media-likes-value,
    h1.media-comments-value {
        width: 100%;
        font-size: 1em;
        letter-spacing: 0;
        color: #FFF;
        line-height: 1.2em;
        font-weight: 900;
    }

    h1.engagement-value {
        width: 100%;
        font-size: 2.5em;
        letter-spacing: 0;
        color: #FFF;
        line-height: 0.8em;
        font-weight: 900;
        text-align: right;
    }

    .influencer-general-container {
        /*
        width: 90vw;
        margin-left: 4vw;
        margin-right: 1vw;
        position: absolute;
        bottom: 0;
        left: 0;
        opacity: 0;
        */
        width: 90vw;
        margin-left: 4vw;
        margin-right: 1vw;
        position: absolute;
        bottom: unset;
        left: 0;
        opacity: 0;
        top: 28vh;
    }

    h1.influencer-name {
        height: 4vh;
        width: 95vw;
        margin-bottom: 0.5vh;
        font-size: 1.8em;
        font-weight: 100;
        letter-spacing: -1px;
    }

    h1.influencer-follower {
        height: 7vh;
        width: 95vw;
        margin-bottom: 0.5vh;
        font-weight: 900;
        font-size: 3em;
        /*prima 5rem*/
        line-height: 1.8em;
        /*prima 0.8rem*/
        text-transform: uppercase;
        color: #9000FF;
    }

    li.info-list-item {
        padding: 10px;
    }

    .influencer-platform {
        height: 3vh;
        width: auto;
        clear: both;
        max-width: calc(50vw - 5vw);
        margin-left: 0;
        margin-right: 0;
        margin-top: 10px;
        margin-bottom: 0.5vh;
        color: #9000FF;
        padding: 15px;
        padding-top: 5px;
        padding-bottom: 5px;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 50px;
    }

    .social-platform-icon {
        width: 1.8vh;
        height: 1.8vh;
        margin-right: 10px;
        margin-top: 0.6vh;
    }

    .social-platform-name {
        font-size: 1em;
        letter-spacing: 2px;
        font-weight: 500;
        line-height: 3vh;
    }

    .single-talent-share-icon {
        position: absolute;
        margin-right: 10px;
        border-radius: 50px;
        color: #FFF;
        text-transform: uppercase;
        font-weight: 100;
        background: rgba(90, 90, 90, 0.4);
        padding: 8.5px;
        font-size: 1.7em;
        letter-spacing: 2px;
        top: -28vh;
        right: -15px;
    }

    .model-info {
        height: 28vh;
        min-height: 28vh;
        max-height: 28vh;
        width: calc(95vw - 0vw);
        min-width: calc(95vw - 0vw);
        max-width: calc(95vw - 0vw);
        margin-top: 7vh;
        position: absolute;
        top: 0;
        right: 0;
    }

    .model-features-list {
        width: calc(95vw - 0vw);
        /*max-height: calc(95vw - 0vw);*/
        max-height: unset;
        padding-top: 1vw;
        padding-bottom: 1vw;
        list-style: none;
    }

    li.single-model-nw-feature {
        width: 100%;
        margin: 5px;
        padding: 5px;
        padding-bottom: 45px;
        border-radius: 10px;
        box-sizing: border-box;
        width: calc((95vw / 3) - 10px);
        min-width: calc((95vw / 3) - 10px);
        max-width: calc((95vw / 3) - 10px);
        height: calc((28vh / 3) - 10px);
        min-height: calc((28vh / 3) - 10px);
        max-height: calc((28vh / 3) - 10px);
    }

    .bio-feature {
        width: 100%;
        margin: 5px;
        padding: 5px;
        padding-bottom: 45px;
        border-radius: 10px;
        box-sizing: border-box;
        width: calc((95vw / 1) - 10px) !important;
        min-width: calc((95vw / 1) - 10px) !important;
        max-width: calc((95vw / 1) - 10px) !important;
        height: auto !important;
        min-height: calc((28vh / 1) - 10px) !important;
        max-height: unset !important;
    }

    p.single-nw-feature-name {
        top: 5px;
        left: 5px;
    }

    p.single-nw-feature-value {
        font-size: 1.2em;
        font-weight: 500;
        bottom: 5px;
        right: 5px;
    }

    p.bio-text-fetaure-value {
        font-size: 1em !important;
        font-weight: 100;
        line-height: 1.2em;
        text-align: right;
        position: relative !important;
        bottom: 10px;
        right: 10px;
        width: calc(100% - 90px);
        padding-left: 90px;
        padding-top: 75px;
        height: auto;
    }

    .compcard-button {
        position: absolute;
        right: -8px;
        top: -8vh;
        background: #000;
        color: #FFF;
        width: auto;
        margin-right: 10px;
        border-radius: 50px;
        text-transform: uppercase;
        font-weight: 300;
        padding: 10px;
        font-size: 0.7em;
        letter-spacing: 2px;
        cursor: pointer;
        transition: 0.2s;
        opacity: 0;
        bottom: unset;
        z-index: 99999999999999;
    }

    .model-books {
        height: 28vh;
        min-height: 28vh;
        max-height: 28vh;
        width: 90vw;
        min-width: 90vw;
        max-width: 90vw;
        margin-top: 7vh;
        margin-left: 2.5vw;
        margin-right: 2.5vw;
    }

    .book-name-container {
        width: 25vw;
        min-width: 25vw;
        max-width: 23vh;
        max-height: 23vh;
        min-height: 23vh;
        margin-top: 5vh;
        /*display: none;*/
    }

    .single-book-name {
        width: auto;
        max-width: 25vw;
        font-size: 0.75em;
        letter-spacing: 0;
        font-weight: 300;
        margin-bottom: 20px;
        padding: 10px;
        padding-right: 7px;
        padding-left: 7px;
    }

    .book-container {
        width: calc(95vw - 20px);
        min-width: calc(95vw - 20px);
        min-width: calc(95vw - 20px);
        height: auto;
        min-height: calc(23vh - 5vw);
        margin-left: 0px;
        margin-right: 0px;
        padding-bottom: 15vh;
        margin-top: 10vh;
    }

    .single-img,
    .single-video {
        /*
        width: calc(((95vw - 20px) / 3) - 5px);
        min-width: calc(((95vw - 20px) / 3) - 5px);
        max-width: calc(((95vw - 20px) / 3) - 5px);
        height: calc(((95vw - 20px) / 3) - 5px);
        min-height: calc(((95vw - 20px) / 3) - 5px);
        max-height: calc(((95vw - 20px) / 3) - 5px);
        object-fit: cover;
        object-position: center;
        overflow: hidden;
        margin: 2.5px;
        */
        width: calc(((96vw - 2rem) / 3) - 2px);
        min-width: calc(((96vw - 2rem) / 3) - 2px);
        max-width: calc(((96vw - 2rem) / 3) - 2px);
        height: calc(((95vw - 20px) / 3) - 5px);
        min-height: calc(((95vw - 20px) / 3) - 5px);
        max-height: calc(((95vw - 20px) / 3) - 5px);
        object-fit: cover;
        object-position: center;
        overflow: hidden;
        margin: 1px;
    }

    .print-and-download-container {
        display: none !important;
    }

    /*gestione dei book in mobile*/
    .book-name-container-mobile {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.85);
        width: 100vw;
        height: 100vh;
        z-index: 9999999999999;
        opacity: 1;
        align-items: center;
        justify-content: center;
        opacity: 0;
        display: none;
    }

    .book-name-content {
        width: 80vw;
        height: auto;
        display: grid;
        align-items: center;
        justify-content: center;
    }

    .single-book-name {
        width: 80vw;
        min-width: 80vw;
        max-width: 80vw;
        font-size: 1em;
        letter-spacing: 0;
        font-weight: 300;
        margin-bottom: 20px;
        padding: 0px;
        padding-right: 0;
        padding-left: 0;
        opacity: 1;
        text-align: center;
        border: none;
        color: #FFF;
        padding: 10px;
    }

    .open-book-popup-mobile {
        max-width: calc(30vw - 2px);
        min-width: calc(30vw - 2px);
        width: calc(30vw - 2px);
        display: block;
        border: 0.5px solid #FFF;
        padding: 10px;
        padding-top: 7px;
        padding-bottom: 7px;
        border-radius: 50px;
        font-size: 0.8em;
        letter-spacing: 2px;
        font-weight: 100;
        color: #FFF;
        text-transform: uppercase;
        box-sizing: border-box;
        text-align: center;
        z-index: 999999999999999999999999;
    }

    .showed-book-name-mobile {
        max-width: calc(60vw - 12px);
        min-width: calc(60vw - 12px);
        width: calc(60vw - 12px);
        text-align: right;
        display: block;
        border-radius: 50px;
        font-size: 0.8em;
        letter-spacing: 2px;
        font-weight: 100;
        color: #FFF;
        text-transform: uppercase;
        margin-left: 10px;
        margin-top: calc((5vh - 2em) / 2);
    }

    .book-container-closing-button {
        position: fixed;
        top: 10vh;
        right: 25px;
        color: #FFF;
    }

    @keyframes mobile-book-container-appear {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .opening-book-container-mobile {
        animation: mobile-book-container-appear;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }

    @keyframes move-sector-icon {
        0% {
            opacity: 0;
            transform: translateX(100vw);
        }

        80% {
            opacity: 0;
            transform: translateX(50vw);
        }

        to {
            opacity: 1;
            transform: translateX(16vw);
        }
    }

    .sector-icon-moving {
        animation: move-sector-icon;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }

    .sector-icon {
        width: 2vh;
        height: 2vh;
        margin-top: 0.5vh;
        margin-bottom: 0.5vh;
        margin-right: 10px;
        padding: 15px;
        border-radius: 30px;
        margin-left: 0vw;
        /*prima -5vw*/
        background: #FFF;
        border: 1px solid #9000FF;
        transform: translateX(100vw);
        opacity: 0;
    }

    /*settaggio gallery*/
    h1#main-book-title {
        top: 15vw;
        /*15px*/
        left: 15px;
        font-size: 1em;
        font-weight: 400;
        padding: 15px;
    }

    .comeBack-button-container-transparent {
        top: 15vw;
        /*15px*/
        right: 15px;
        width: 13vw;
        height: 13vw;
    }

    span.close-explosion-gallery {
        font-size: 3em;
    }

    #main-book-img-container {
        height: 80vw;
        min-height: 80vw;
        max-height: 80vw;
    }

    .prev-arrow-container,
    .next-arrow-container {
        width: 15vw;
        z-index: 1;
    }

    .prev-arrow-container {
        padding-left: 1rem;
        box-sizing: border-box;
    }

    .prevImg-button,
    .nextImg-button {
        font-size: 3em;
    }

    #description-container {
        position: absolute;
        bottom: 50px;
        right: 10vw;
        font-size: 1.2;
        width: calc(80vw - 20px);
        max-height: 50vh;
        padding: 10px;
    }

    /*GESTIONE SHARING PANNEL*/
    .sharing-container {
        width: 90vw;
        height: auto;
        border-radius: 25px;
        box-sizing: border-box;
        position: absolute;
        left: 5vw;
        top: 25vh;
        min-height: 50vh;
    }

    .closing-sharing-button {
        position: fixed;
        top: 2.5vh;
        right: 2.5vh;
        border-radius: 50px;
        color: #FFF;
        background: rgba(255, 255, 255, 0.1);
        cursor: pointer;
        transition: 0.2s;
        font-size: 2em;
        padding: 10px;
        border: 0.5px solid #FFF;
    }

    .sharing-text {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        font-size: 1.5rem;
        margin-top: 1.5rem;
        letter-spacing: 0.05rem;
        opacity: 0;
        line-height: 1.5rem;
        margin-bottom: 2.5rem;
    }

    .icons-container {
        width: 90vw;
        margin: 5vw;
        height: auto;
        position: relative;
        top: unset;
        left: unset;
        margin: 0;
    }

    .sharing-platform-icon {
        font-size: 2.4rem;
        padding: 0;
        box-sizing: border-box;
        color: #FFF;
        background: transparent;
        width: calc((90vw / 5) - 0.2rem);
        height: calc((90vw / 5) - 0.2rem);
        margin: 0.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50px;
        transition: 0.2s;
        cursor: pointer;
        opacity: 0;
    }

    .mail-sharing-container {
        width: 90vw;
        height: 45vh;
        left: 5vw;
        right: 5vw;
        border-top-left-radius: 2rem;
        border-top-right-radius: 2rem;
        padding-bottom: 20vh;
    }

    .close-email-panel-button {
        top: 1rem;
        right: 1rem;
        border-radius: 15rem;
        padding: 0.7rem;
        font-size: 2em;
    }

    h1.mail-sharing-title {
        width: 60vw;
        min-width: 60vw;
        max-width: 60vw;
        padding-right: 20vw;
        margin-top: 8.5vh;
        letter-spacing: -0.02rem;
        padding-left: 10vw;
        text-align: left;
    }

    .mail-sharing-content {
        width: 80vw;
        height: auto;
        margin-left: 5vw;
        margin-top: 3vh;
    }

    p.mail-sharing-text {
        width: 80vw;
        font-size: 1.5rem;
        text-align: right;
        line-height: 1em;
        letter-spacing: 0.02rem;
        margin-bottom: 0.7rem;
    }

    input.emailInputClass {
        margin-left: 0 !important;
        width: calc(80vw - 1.4rem);
        padding: 0.7rem;
        text-align: center;
        border: none;
        background: #33005A;
        color: #FFF;
        margin-top: 1rem;
        font-size: 1rem;
    }

    .validationMessage {
        width: 70vw;
        min-width: 70vw;
        max-width: 70vw;
        position: relative;
        bottom: -2.5vh;
        left: 5vw;
        text-transform: uppercase;
        font-size: 0.9em;
        letter-spacing: 0.07rem;
        border-radius: 10rem;
        padding: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        display: none;
        font-weight: 250;
    }

    .mail-sharing-icon {
        width: 60vw;
        height: auto;
        transform: rotate(-5deg);
        position: absolute;
        top: -14vw;
        left: -10vw;
    }

    .shareMailButton {
        bottom: 25vw;
    }

    /*NUOVO SETTING PER LA SOCIAL VIEW IN Ver MOBILE*/

    .media-container-social-view {
        position: relative;
        width: 95vw;
        max-width: 95vw;
        min-width: 95vw;
        height: auto;
        min-height: 40vh;
        padding: 0.5rem;
        border-radius: 2rem;
        margin-top: 2rem;
        background: transparent;
        box-sizing: border-box;
    }


    .book-name-container-social-view {
        height: auto;
        width: 96vw;
        max-width: 96vw;
        min-width: 96vw;
        height: auto;
        padding: 1rem;
        box-sizing: border-box;
        margin-left: 0;
        margin: 0;
        margin-left: 2.5vw;
    }

    .single-book-name-container-social-view {
        color: #FFF;
        width: auto;
        max-width: 10vw;
        font-size: 1em;
        letter-spacing: 0.1rem;
        font-weight: 300;
        text-transform: uppercase;
        line-height: 0.9em;
        cursor: pointer;
        clear: both;
        margin-bottom: 15px;
        color: rgba(255, 255, 255, 0.5);
        padding: 10px;
        padding-right: 15px;
        padding-left: 15px;
        box-sizing: border-box;
        border: 0.5px solid #FFF;
        border-radius: 50px;
        transition: 0.2s;
        overflow: hidden;
        opacity: 1;
    }

    .book-container-social-view {
        width: calc(96vw - 1rem);
        min-width: calc(96vw - 1rem);
        max-width: calc(96vw - 1rem);
        padding: 0.5rem;
        margin-top: unset;
        margin-right: 0;
        margin-left: 0;
        display: none;
    }

    .visible-book-social-view {
        display: none;
    }

    /* impostiamo il book Digitals come visibile */
    .visible-book-social-view.visible-book {
        display: block;
    }

    .profile-img-and-tecnical-info {
        width: calc(96vw - 1rem);
        min-width: calc(96vw - 1rem);
        max-width: calc(96vw - 1rem);
        position: relative;
        margin-top: 2rem;
        margin-left: unset;
        margin-right: unset;
        padding: 0.5rem;
        box-sizing: border-box;
    }

    .single-img-visible-social-view {
        opacity: 1;
    }

    .single-round-img-influencer-container {
        width: 25vw;
        height: 25vw;
        min-width: 25vw;
        min-height: 25vw;
        max-width: 25vw;
        max-height: 25vw;

        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(225deg, rgba(207, 3, 200, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
        border-radius: 50rem;
        clear: both;
    }

    .single-round-img-influencer-content {
        width: calc(25vw - 0.5rem);
        height: calc(25vw - 0.5rem);
        min-width: calc(25vw - 0.5rem);
        min-height: calc(25vw - 0.5rem);
        max-width: calc(25vw - 0.5rem);
        max-height: calc(25vw - 0.5rem);
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FFF;
        border-radius: 50rem;
    }

    .single-round-img {
        width: calc(25vw - 1rem);
        height: calc(25vw - 1rem);
        min-width: calc(25vw - 1rem);
        min-height: calc(25vw - 1rem);
        max-width: calc(25vw - 1rem);
        max-height: calc(25vw - 1rem);
        border-radius: 50rem;
        margin-bottom: unset;
        clear: both;
    }

    .slider-img-view {
        width: calc(96vw - 2rem);
        min-width: calc(96vw - 2rem);
        max-width: calc(96vw - 2rem);
        height: 39vw;
        min-height: 39vw;
        max-height: 39vw;
        margin-top: -2px;
        background-color: #FFF;
    }

    .slider-img-view-contains {
        width: calc(96vw - 2rem);
        min-width: calc(96vw - 2rem);
        max-width: calc(96vw - 2rem);
        height: 22vw;
        min-height: 22vw;
        max-height: 22vw;
        margin-top: -2px;
        box-sizing: border-box;
        padding: 0.5rem;
    }

    /*GESTIONE DELLE TECNICAL INFO*/
    .tecnical-info {
        width: calc((96vw - 2rem) - 25vw - 1rem);
        margin-left: 2rem;
        height: 15vw;
        min-height: 15vw;
        max-height: 15vw;
        padding: 1rem;
        color: #FFF;
        position: absolute;
        top: 1rem;
        right: 1rem;
        text-align: left;
        padding-top: 0;
        padding-bottom: 0;
        box-sizing: border-box;
    }

    .tecnica-info-name {
        font-size: 1rem;
        line-height: 1rem;
    }

    .tecnica-info-link-main-profile {
        font-size: 0.8rem;
        line-height: 0.8rem;
        margin-top: 0.1rem;
    }

    .tecnical-datas-container {
        width: calc(((96vw - 1rem) - 25vw - 2rem) - 2rem);
        margin-top: 0.5rem;
    }

    .tecnical-data-content {
        float: left;
        margin-right: 1rem;
        width: auto;
        max-width: calc((((96vw - 1rem) - 25vw - 2rem) - 3.5rem) / 3);
    }

    .tecnical-data-value {
        font-size: 0.7rem;
        line-height: 0.7rem;
        margin-right: 0rem;
        clear: both;
    }

    .tecnical-data-label {
        font-size: 0.6rem;
        line-height: 0.6rem;
        clear: both;
    }

    .tecnical-data-location {
        width: 100%;
        text-align: left;
        margin-top: 0.5rem;
        font-size: 0.7rem;
        line-height: 0.7rem;
    }


    /*POPUP RIHIESTA AUTORIZZAZIONE*/
    .popup-request-access-to-profile {
        width: calc(96vw - 1rem);
        padding: 0.5rem;
        margin-top: calc(30vh - 7vh);
        background: linear-gradient(243deg, rgba(151, 63, 251, 1) 0%, rgba(252, 112, 70, 1) 100%);
        bottom: 25vh;
        left: 38vw;
    }

    .popup-request-access-to-profile-content {
        width: calc(96vw - 2rem);
        min-height: calc(30vh - 1rem);
        padding: 1.2rem;
        padding-top: 2rem;
    }

    button.popup-request-access-to-profile-closing-button {
        position: absolute;
        top: 0;
        right: 0;
        padding: 1.5rem;
        background: transparent;
        border: none;
        cursor: pointer;
    }

    .popup-request-access-to-profile-title {
        font-size: 2rem;
        line-height: 1.7rem;
        margin-top: 2.5rem;
        text-align: center;
    }

    .popup-request-access-to-profile-title span {
        width: 100%;
        float: left;
        text-align: center;
        display: block;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .popup-request-access-to-profile-text {
        font-size: 1rem;
        line-height: 1rem;
        letter-spacing: 0.2rem;
        text-align: center;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .popup-request-access-to-profile-button-container {
        width: 100%;
        margin: 0;
    }

    .popup-request-access-to-profile-button,
    .popup-request-access-to-profile-button-request,
    .popup-request-access-to-profile-button-abort {
        width: calc(50% - 2rem);
        height: auto;
        font-size: 1rem;
        line-height: 1rem;
        text-transform: uppercase;
        border: none;
        border-radius: 10rem;
        padding: 1rem;
        padding-left: 0;
        padding-right: 0;
        text-align: center;
        margin: 1rem;
        font-family: 'Outfit', sans-serif;
        font-weight: 700;
        letter-spacing: 0.1rem;
        cursor: pointer;
        transition: 0.2s;
        margin-bottom: 0;
    }

    .popup-request-access-to-profile-button-request {
        background: #222;
        color: #FFF;
    }

    .popup-request-access-to-profile-button-request:hover {
        background: #000;
        color: #FFF;
        transition: 0.2s;
    }

    .popup-request-access-to-profile-button-abort {
        background: #c5c5c5;
        color: #222;
    }

    .popup-request-access-to-profile-button-abort:hover {
        background: #FFF;
        color: #000;
    }




    /*GESTIONE FORM RICHIESTA*/

    #requestForm {
        position: relative;
        float: right;
        width: calc(96vw - 1rem);
        min-height: calc(30vh - 1rem);
        height: auto;
        padding: 0.5rem;
        box-sizing: border-box;
        font-family: 'Outfit', sans-serif;
    }

    .form-input {
        position: relative;
        width: calc(100% - 2rem);
        clear: both;
        border: none;
        border-radius: 5rem;
        line-height: 2rem;
        font-size: 1rem;
        height: 2rem;
        color: #000;
        padding: 0.5rem;
    }

    .form-label {
        position: relative;
        width: calc(100% - 2rem);
        clear: both;
        margin-top: 0.5rem;
        text-align: right;
        text-transform: uppercase;
        letter-spacing: 0.1rem;
        font-size: 1.2rem;
        line-height: 1.2rem;
        margin-bottom: 0.2rem;
    }

    .checkbox-group-title {
        margin-top: 1rem;
    }

    .checkbox-group {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 0rem;
        row-gap: 1rem;
        margin-top: 0.5rem;
    }

    .pill {
        width: calc(100% - 1rem);
        height: 1.2rem;
        font-size: 1.2rem;
        line-height: 1.2rem;
        letter-spacing: -0.05rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .pill span,
    input#other_text {
        width: calc(100% - 2rem) !important;
        font-size: 1.2rem;
        line-height: 1.2rem;
        letter-spacing: -0.05rem;
    }

    .pill input[type=checkbox] {
        line-height: 1.2rem;
        width: 1.2rem;
        height: 1.2rem;
        margin-right: 0.5rem;
    }

    #requestForm button {
        padding-top: unset;
        padding-bottom: unset;
        margin-top: unset;
        cursor: pointer;
        transition: 0.2s;
        width: calc(100% - 2rem);
        margin: 1.5rem;
        padding: 1rem;
        font-size: 1.5rem;
        font-weight: 900;
    }

    #requestForm button:hover {
        background: #000;
        transition: 0.2s;
    }

    .check-box-label {
        width: calc(100% - 1rem);
        margin-left: unset;
        margin-right: 1.5rem;
        float: right;
        text-transform: lowercase;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .first-check-box-label {
        margin-top: 1rem;
    }

    .check-box-input {
        width: 1.2rem;
        height: 1.2rem;
        margin-left: calc(10% - 1.5rem);
    }

    /*SETTING ERROR PANEL/MESSAGE*/

    #risultatoForm-Id {
        bottom: unset;
        right: unset;
        background: transparent;
        color: #000;
        font-size: 0.9rem;
        line-height: 1rem;
        border: 0.5px solid #000;
        padding: 0.5rem;
        border-radius: 0.5rem;
        display: none;
        position: relative;
        margin-left: 0rem;
        margin-left: calc(15vw - (10vw - 2rem));
        width: calc(20vw - 4rem);
        margin-bottom: 5vh;
        position: fixed;
        background: #FFF;
        bottom: unset;
        top: 30vh;
        right: unset;
        font-size: 1.5rem;
        line-height: 1.7rem;
        padding: 1rem;
        box-shadow: 0 0 1rem #00000080;
        padding-bottom: 3rem;
        z-index: 9;
        font-family: 'Outfit', sans-serif;
    }

    .success-button {
        padding: 1rem;
        background: #ffc400;
        color: #000;
        font-weight: 900;
        font-size: 1.2rem;
        border-radius: 0.5rem;
        color: #000;
        width: calc(100% - 2rem);
        text-align: center;
        border: none;
        margin-bottom: 1rem;
        margin-top: 1rem;
    }

    .success-button span {
        font-weight: 200;
        letter-spacing: 0.15rem;
    }

    /*animazione buffering php richiesta profilo ig*/
    .sending-message {
        text-align: center;
        font-size: 16px;
        padding: 20px;
    }

    .sending-message .dots {
        display: inline-block;
        width: 1.5em;
        text-align: left;
        animation: dots 1.5s infinite steps(3, end);
    }

    @keyframes dots {
        0% {
            content: '';
        }

        33% {
            content: '.';
        }

        66% {
            content: '..';
        }

        100% {
            content: '...';
        }
    }


    /*gestione pannello x messaggi errre*/
    .error-message {
        color: red !important;
        border: 0.5px solid red !important;
    }

    p.errorMessage {
        margin-top: 1rem;
    }

    /*GESTIONE MESSAGGIO DI SUCCESSO*/
    .popup-confirm.success p {
        width: calc(100% - 2rem);
        height: auto;
        font-size: 1rem;
        letter-spacing: 0.1rem;
        line-height: 1.2rem;
        color: #222;
        margin: 1rem;
    }

    .popup-confirm.success button {
        width: calc(100% - 2rem);
        margin: 1rem;
        padding: 1rem;
        background: #ffc400;
        color: #333;
        border-radius: 0.5rem;
        text-transform: uppercase;
        font-weight: 800;
        border: none;
        cursor: pointer;
        transition: 0.2s;
    }

    .popup-confirm.success button:hover {
        background: #ffae00;
        color: #000;
        transition: 0.2s;
    }

    #risultatoForm-Id {
        width: calc(100% - 1rem);
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        font-size: 1.8rem;
        line-height: 1.6rem;
        font-weight: 100;
        top: 40vh;
        margin-left: 0;
        box-sizing: border-box;
    }
}