@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Bungee&family=Cookie&family=Gabarito:wght@400..900&family=Jersey+10&family=Meow+Script&family=Syne:wght@400..800&display=swap');

html,
body {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100vw;
    min-height: 100vh;
    height: auto;
    /*overflow-x: hidden;*/
    font-family: 'Outfit', sans-serif;
    scroll-behavior: auto;
    user-select: none;
    background: #FFF;
    overflow-x: hidden;
}

html {
    font-size: 16px;
}

body {
    font-size: 1rem;
}

/* Reset general styles */
* {
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}

strong,
span,
em,
br,
a {
    position: unset;
    float: unset;
    margin: unset;
    padding: unset;
}

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

.header {
    width: 100vw;
    max-width: 100vw;
    height: 12vh;
    background: #000;
    border-bottom-left-radius: 120px;
    position: fixed;
    z-index: 999999999;
}

@keyframes headerHidden {
    from {
        transform: translateY(0);
        opacity: 1;
    }

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

@keyframes headerShowed {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

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

.hidden-header {
    animation: headerHidden 0.2s forwards;
}

.showed-header {
    animation: headerShowed 0.2s forwards;
}

/*setting single talent*/
#single-face-data-container {
    width: 100vw;
    min-width: 100vw;
    height: auto;
    min-height: 88vh;
    margin-top: 12vh;
}

.main-img-container {
    display: none;
}

img.single-talent-entry-cover {
    width: 25vw;
    height: 25vw;
    border-radius: 250px;
    object-fit: cover;
    object-position: center;
    position: fixed;
    top: 20vh;
    left: 37.5vw;
    opacity: 1;
}

h1.single-talent-entry-name {
    position: fixed;
    bottom: 15vh;
    width: 25vw;
    left: 37.5vw;
    color: #000;
    font-size: 3rem;
    text-align: center;
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 0.2rem;
}

img.single-talent-main-cover {
    width: 12vw;
    min-width: 12vw;
    max-width: 12vw;
    min-height: 12vw;
    height: 12vw;
    object-position: center;
    object-fit: cover;
    top: 1rem;
    left: calc((25vw - 12vw) / 2);
    z-index: 99999999;
    /*prima: 999999999*/
    border-radius: 15rem;
    position: absolute;
}

img.single-talent-main-cover-mobile {
    display: none;
}

.safe-background {
    display: none;
}

.single-talent-compcard-button {
    background: #FFF;
    color: #000;
    font-family: 'Outfit', sans-serif;
    position: absolute;
    right: 2rem;
    /*left: 37vw;*/
    bottom: 2rem;
    text-transform: uppercase;
    border: none;
    border-radius: 5rem;
    font-weight: 700;
    z-index: 999999999;
    cursor: pointer;
    padding: 0.5rem;
    padding-right: 1rem;
    padding-left: 1rem;
}

.open-portfolio-button {
    background: #FFF;
    color: #000;
    z-index: 999999999;
    cursor: pointer;
    padding: 0.25rem;
    position: absolute;
    top: -6.9vh;
    left: -12.5vw;
    border: none;
    border-radius: 5rem;
}

.single-talent-compcard-button-desktop {
    display: block;
}

.single-talent-compcard-button-mobile,
.single-talent-info-button,
.single-talent-media-button {
    display: none;
}

/*setting datas face*/
.single-talent-general-info-container {
    width: 25vw;
    min-width: 25vw;
    max-width: 25vw;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    background: linear-gradient(-45deg, rgb(0, 0, 0.8) 15%, rgba(51, 103, 175, 0.8) 100%);
    position: absolute;
    left: 0;
    top: -12vh;
    padding: 2rem;
    padding-top: 15vh;
    box-sizing: border-box;
    z-index: 99999;
}

.closing-arrow-container {
    position: absolute;
    right: 0;
    top: 4rem;
    height: 3rem;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #00000080;
    border-radius: 5rem;
}

.show-general-information-arrow-container {
    position: fixed;
    width: 2rem;
    height: 2rem;
    padding: 1rem;
    padding-left: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    left: -5.5rem;
    top: calc(50vh - 3rem);
    border-radius: 15rem;
    cursor: pointer;
    z-index: 99999;
    display: none;
}

.single-talent-datas-container {
    width: calc(25vw - 4rem);
    min-height: auto;
    height: auto;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

.bio-content {
    font-size: 1rem;
    line-height: 1.3rem;
    font-weight: 100;
    letter-spacing: 0.2rem;
    color: #FFF;
    width: calc(100% - 3rem);
    max-height: 20vh;
    /*min-height: 20vh;*/
    overflow-y: scroll;
    padding-bottom: 2rem;
    padding-right: 1rem;
    box-sizing: border-box;
}

.expand-bio-btn-mobile {
    display: none;
}

.single-talent-datas-content {
    width: 30vw;
    position: absolute;
    top: 22rem;
    left: 0;
}

h1.single-talent-main-name {
    position: relative;
    margin-top: 12vw;
    width: 100%;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    height: auto;
    color: #FFF;
    opacity: 1;
    letter-spacing: 0.2rem;
    line-height: 2rem;
    font-family: 'Outfit', sans-serif;
    margin-bottom: 1.5rem;
}

.talent-competence-detail {
    font-size: 1rem;
    letter-spacing: 0.2rem;
    font-weight: 100;
    line-height: 0.9rem;
    opacity: 0.5;
    clear: both;
    width: 100%;
    float: left;
}

h1.single-talent-main-name-mobile {
    display: none;
}

span.reduced-name{
    font-size: 1.7rem;
    line-height: 1.7rem;
}

.social-container {
    width: calc(25vw - 4rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
    height: auto;
    max-height: calc(((25vw - 4rem) / 7) - 2rem);
    overflow: hidden;
}

.social-container-mobile,
.social-arrow-container-mobile {
    display: none;
}

.social-arrow-container {
    width: calc(25vw - 4rem);
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    cursor: pointer;
}

.single-social-container {
    color: #FFF;
    padding: 0.1rem;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1rem;
    width: calc(((25vw - 4rem) / 7) - 2rem);
    height: calc(((25vw - 4rem) / 7) - 2rem);
    margin-right: 0.5rem;
    margin-left: 0.5rem;
    box-sizing: border-box;
    border-radius: 5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
}

.single-social-container svg {
    width: 2rem;
    height: 2rem;
}

.instagram-container-mobile {
    display: none;
}

.share-icon-container {
    width: 3rem;
    height: 3rem;
    border-radius: 10rem;
    position: absolute;
    background: #00000080;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    right: calc(-25vw + 4rem);
    top: 0;
    z-index: 9999;
}

.text-increase-icon-container {
    width: 3rem;
    height: 3rem;
    border-radius: 10rem;
    position: absolute;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    top: calc(12vh + 4rem);
    right: 0;
}

/*GESTIONE SKILLS*/
.single-talent-skills-container {
    width: calc(25vw - 4rem);
    margin-left: 0;
    margin-right: 0;
    height: auto;
    min-height: calc( 30vh - 2rem);
    max-height: calc( 30vh - 2rem);
    overflow-y: scroll;
    padding: 0;
    padding-top: 1rem;
    border-top: 0.5px solid #FFF;
    border-width: 60%;
    box-sizing: border-box;
    margin-top: 1rem;
}

.talent-books-container {
    position: fixed;
    top: 0;
    /*0*/
    left: 25vw;
    width: 100%;
    min-height: 15vh;
    /*auto*/
    height: auto;
    /*auto*/
    min-height: unset;
    z-index: 9999;
    margin-right: 0;
    margin-left: 0;
    padding-top: 1rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 15%, rgba(0, 0, 0, 0) 100%);
}

.talent-skills-list,
.talent-book-list {
    width: 100%;
    max-width: 75vw;
    height: auto;
    list-style: none;
    color: #000;
    margin-top: 1rem;
}

.talent-book-list {
    display: flex;
    /*inline-flex*/
}

.talent-skills-list {
    color: #FFF;
    margin-top: 0rem;
    /*display: none;*/
    /*si attiva con il il toggleClass*/
}

.state-list {
    display: flex;
    align-items: center;
    justify-content: start;
}

.talent-book-list {
    margin-top: 12vh;
    /*0*/
}

.talent-skill-list-title {
    width: auto;
    min-width: 100%;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
    line-height: 1rem;
    clear: both;
    margin-right: 0.5rem;
    margin-top: 0.8rem;
    color: #FFF;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    cursor: pointer;
}

.talent-skill-list-title,
.equipment-sublist-title {
    display: flex;
    align-items: center;
}

.talent-skill-list-title svg,
.equipment-sublist-title svg {
    width: 2rem;
    height: 2rem;
    margin-top: calc((1rem - 2rem / 2));
    display: none;
}

.state-region-icon-container {
    width: 0.8rem;
    height: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.region-skill-list svg {
    width: 1rem;
    height: 1rem;
}

.talent-reference {
    padding: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 5rem;
    background: #FFF;
    color: #000;
    letter-spacing: 0.2rem;
    width: auto;
    min-width: auto;
    cursor: pointer;
}

.equipment-text {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.8rem;
    line-height: 0.8rem;
    font-weight: 200;
    color: #FFF;
}

.equipment-sublist {
    list-style: none;
    width: 100%;
    color: #FFF;
}

.equipment-sublist-title {
    width: 100%;
    font-size: 0.8rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: 0.1rem;
    margin-top: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    cursor: pointer;
}

.talent-skill-list-title,
.equipment-sublist-title {
    display: flex;
}

li.equipment-sublist-item {
    width: 100%;
    font-weight: 200;
    font-size: 0.8rem;
    line-height: 1rem;
    letter-spacing: 0.1rem;
    margin-top: 0.2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
}

li.talent-general-skill-list-item {
    font-size: 0.8rem;
    line-height: 0.8rem;
    font-weight: 200;
    letter-spacing: 0.1rem;
    margin-right: 1rem;
    text-transform: uppercase;
    clear: both;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    padding-right: 1rem;
    padding-left: 1rem;
    box-sizing: border-box;
}

ul.single-talent-menu-container {
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 3rem;
    color: #000;
    font-weight: 300;
    font-size: 1.2rem;
    letter-spacing: 0.2rem;
    list-style: none;
    display: none;
}

.closing-button-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    display: none;
}

.closing-button-container svg {
    padding: 1rem;
    transform: rotate(-90deg);
}

li.single-talent-menu-item {
    margin-right: 3rem;
    text-transform: uppercase;
    opacity: 1;
    cursor: pointer;
    max-width: calc(45vw / 5);
}

.single-talent-menu-item-desktop {
    display: block;
}

.single-talent-menu-item-mobile {
    display: none;
}

span.border-bottom-space-features,
span.border-bottom-space-images {
    width: 0%;
    position: absolute;
    bottom: -0.5rem;
    height: 1px;
    background: #9000FF;
    left: 0;
}

@keyframes border-width {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

.single-talent-menu-item-feature:hover span.border-bottom-space-features,
.single-talent-menu-item-images:hover span.border-bottom-space-images {
    animation: border-width;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

.single-talent-menu-item-selected {
    animation: border-width;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

/*list book*/
.single-talent-book-list {
    width: 100%;
    height: auto;
    /*padding: 1rem;*/
    background: #ffffff80;
    border-radius: 0.5rem;
    backdrop-filter: blur(1rem);
    list-style: none;
    display: none;
}

.single-talent-book-name {
    float: left;
    margin-bottom: 0.2rem;
    list-style: none;
    transition: 0.2s;
    padding: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 0.3rem;
    color: #000;
    background: #FFF;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 5rem;
    cursor: pointer;
    align-content: center;
    justify-content: center;
}

.single-talent-select-book {
    background: #111;
    color: #FFF;
    order: -1;
}

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

ul.single-talent-features-list {
    width: 100%;
    margin-top: 2rem;
    height: auto;
    list-style: none;
}

li.single-talent-feature {
    width: 100%;
    color: #000;
    margin-bottom: 1rem;
    font-size: 1rem;
    letter-spacing: 0.2rem;
    font-weight: 100;
}

p.single-talent-nw-feature-name {
    width: 30%;
    font-size: 1.5rem;
    border-bottom: 0.5px solid #000;
    letter-spacing: 0.2rem;
    padding-bottom: 0.3rem;
    text-align: left;
    margin-right: 2%;
    opacity: 1;
    text-transform: uppercase;
    font-weight: 750;
}

p.single-talent-nw-feature-value {
    letter-spacing: 0;
    text-transform: uppercase;
    opacity: 1;
    font-weight: 3000;
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
}

/*setting container img*/
.single-talent-images-container,
.single-talent-certificate-container {
    width: 75vw;
    min-width: 75vw;
    max-width: 75vw;
    height: calc(85vh + (2rem - 0.2rem));
    min-height: calc(85vh + (2rem - 0.2rem));
    max-height: calc(85vh + (2rem - 0.2rem));
    overflow-y: scroll;
    column-count: auto;
    column-gap: 0.2rem;
    row-gap: 0.2rem;
    position: absolute;
    padding-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0vh;
    /*12vh*/
    top: calc(-2rem + 0.2rem);
    /*-15vh*/
    right: 0;
    left: calc(25vw - 2rem);
}

.single-talent-certificate-container,
.single-talent-bio-container {
    width: 90vw;
    min-width: 90vw;
    max-width: 90vw;
    height: auto;
    min-height: 45vh;
    max-height: unset;
    overflow-y: scroll;
    column-count: auto;
    column-gap: 0.2rem;
    row-gap: 0.2rem;
    padding-top: 7vh;
    top: 0;
    display: none;
}

.single-talents-book-container {
    width: 75vw;
    min-width: 75vw;
    max-width: 75vw;
    height: auto;
    min-height: 85vh;
    max-height: 85vh;
    /*overflow-y: scroll;*/
    position: relative;
    /*absolute*/
    display: none;
    top: 0;
    /*12vh*/
    right: 0;
    padding-top: 0;
    /*4rem*/
    margin-top: 7vh;
    /*12vh*/
}

.single-talents-book-main {
    display: block;
}

.single-talent-select-book {
    display: block;
    font-weight: 900;
}

.single-talents-book-certificate-container,
.single-talents-certificate-content {
    display: block;
}

.single-talents-book-container-Portfolio {
    display: block;
}

.single-talents-book-print-icon-container,
.single-talents-book-download-icon-container {
    position: fixed;
    bottom: 1rem;
    right: 6rem;
    width: 2vw;
    height: 2vw;
    padding: 1rem;
    cursor: pointer;
    z-index: 9999;
    background: #000;
    border-radius: 5rem;
    display: flex;
    align-content: center;
    justify-content: center;
}

.single-talents-book-print-icon-container svg,
.single-talents-book-download-icon-container svg {
    fill: #FFF;
}

.single-talents-book-download-icon-container {
    right: 1rem;
}


img.single-talent-book-single-img {
    width: calc((75vw / 4) - 0.4rem);
    height: calc(((75vw / 6) - 0.4rem) + 4rem);
    object-fit: cover;
    object-position: top;
    opacity: 1;
    cursor: pointer;
}

img.single-talent-book-single-img.single-video {
    width: calc((75vw / 4) - 0.4rem);
    height: calc((75vw / 6) - 0.4rem);
    object-fit: cover;
    object-position: center;
    opacity: 1;
    cursor: pointer;
}

.single-talent-book-single-img-expanded {
    width: calc((100vw / 4) - 0.4rem) !important;
    height: calc((100vw / 4) - 0.4rem) !important;
}

img.single-img-certificate {
    height: calc((45vw / 5) - 1rem);
    width: auto;
    object-fit: contain;
    object-position: center;
    margin: 0.5rem;
    opacity: 1;
    cursor: pointer;
    border: 0.5px solid #afafaf;
}

@keyframes hulk-image {
    from {
        z-index: 1;
        transform: scale(1);
        box-shadow: 0 0 0px rgba(0, 0, 0, 0);
    }

    to {
        z-index: 999;
        transform: scale(1.1);
        box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
    }
}

@keyframes bruce-banner-image {
    from {
        z-index: 10;
        transform: scale(1.1);
        box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
    }

    to {
        z-index: 1;
        transform: scale(1);
        box-shadow: 0 0 0px rgba(0, 0, 0, 0);
    }
}

img.single-talent-book-single-img:hover {
    animation: hulk-image;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

/*GESTIONE DELLE DESCRIZIONI DI OGNI IMMAGINE (DESCRIPTION)*/
.single-img-description-container {
    width: auto;
    max-width: calc((75vw / 4) - 0.4rem);
    height: calc(((75vw / 6) - 0.4rem) + 4rem);
    max-height: calc(((75vw / 6) - 0.4rem) + 4rem);
    min-height: calc(((75vw / 6) - 0.4rem) + 4rem);
    margin: 0.2rem;
    cursor: pointer;
}

.play-video-icon-container,
.camera-icon-container {
    position: absolute;
    right: 0;
    bottom: 4rem;
    width: 4rem;
    height: 4rem;
    background-position: 50%;
    overflow: hidden;
    /*display: none;*/
}

.camera-icon-container {
    bottom: 0;
}

.play-video-icon-container svg,
.camera-icon-container svg {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
}

.play-video-icon-background {
    width: 8rem;
    height: 8rem;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 50%);
    position: absolute;
    bottom: -4rem;
    right: -4rem;
}

.single-img-title {
    position: absolute;
    bottom: 0;
    padding: 0.5rem;
    font-size: 1.1rem;
    line-height: 1.1rem;
    color: #000;
    width: 100%;
    height: auto;
    min-height: 4rem;
    max-height: 4rem;
    box-sizing: border-box;
    /*display: none;*/
}

.single-book-name {
    display: none;
}

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

#certificate-link-button {
    position: absolute;
    bottom: 10vh;
    right: 46vw;
    background: #FFF;
    color: #000;
    border-radius: 1.6rem;
    border: none;
    padding: 0.5rem;
    text-transform: uppercase;
    display: none;
    padding-right: 1rem;
    padding-left: 1rem;
    font-size: 1rem;
    letter-spacing: 0.1rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    border: 0.1px solid #000;
    cursor: pointer;
}

.comeBack-button-container-transparent {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 5vw;
    height: 5vw;
    border: 0.5px solid #000;
    background: rgb(0, 0, 0);
    display: flex;
    align-content: center;
    justify-content: center;
    border-radius: 250px;
    z-index: 99999999;
    font-weight: 100;
}

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

svg.close-explosion-gallery-icon {
    width: 6rem;
    height: 6rem;
}

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

#main-title-space {
    position: absolute;
    bottom: 2.5vh;
    right: 5vw;
    width: 20vw;
    height: 10vh;
    cursor: pointer;
    display: flex;
    align-items: center;
    z-index: 2;
    mix-blend-mode: difference;
}

#main-book-title {
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
    color: #000;
}

#explosion-media-main-text-space {
    width: 50vw;
    max-width: 50vw;
    min-width: 50vw;
    height: 100vh;
    max-height: 100vh;
    min-height: 100vh;
    background: #000000c0;
    backdrop-filter: blur(1rem);
    padding: 5rem;
    padding-right: 10vw;
    padding-left: 10vw;
    box-sizing: border-box;
    text-align: right;
    color: #FFF;
    position: absolute;
    top: 0;
    right: -50vw;
    z-index: 99999999;
    visibility: hidden;
    opacity: 0;
}

#title-hidden-container {
    width: 100%;
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

#main-book-description {
    width: 100%;
    height: 60vh;
    overflow-y: scroll;
    color: #FFF;
    font-weight: 100;
    font-size: 1.2rem;
    line-height: 1.5rem;
}


/*GESTIONE TITOLO DEL BOOK APERTO*/
h1#main-book-title {
    /*display: none !important;*/
    display: block;
}

@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: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    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: 99999;
}

.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: #000;
    text-align: right;
    font-style: italic;
    font-weight: 100;
    font-size: 1.2;
    width: 12vw;
    height: auto;
    max-height: 50vh;
    padding: 10px;
    display: none;
}

/*SHARE CONTAINER SETTING*/
.single-talent-sharing-container {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background: #FFFFFF50;
    backdrop-filter: blur(0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999999;
    display: none;
}

button.close-sharing-panel-button {
    position: absolute;
    width: 7vh;
    height: 7vh;
    padding: 1rem;
    top: 4vh;
    right: 7.5vw;
    background: #333;
    border-radius: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
}

.close-sharing-panel-icon {
    width: 2rem;
    height: 2rem;
}

#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: #000;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: 0.2s;
    font-size: 2em;
    padding: 10px;
    border: 0.5px solid #000;
}

.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: #000;
    text-align: center;
    opacity: 0;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

p.icon-title {
    width: 40vw;
    position: relative;
    top: 0;
    left: 0;
    font-weight: 100;
    font-size: 2.5rem;
    letter-spacing: 0.3rem;
    color: #000;
    text-transform: uppercase;
    text-align: center;
    clear: both;
    margin-bottom: 1.5rem;
}

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

.icons-container {
    width: 40vw;
    margin: 0.5vw;
    margin-right: 30vw;
    margin-left: 30vw;
    height: auto;
    position: absolute;
    top: 0vh;
    left: 0;
    display: block;
    /*flex con align-items: center;*/
    clear: both;
    margin-top: 25vh;
}

.sharing-platform-icon {
    font-size: 2rem;
    padding: 0.3rem;
    box-sizing: border-box;
    color: #FFF;
    background: #000;
    width: calc((40vw / 5) - 3rem);
    height: calc((40vw / 5) - 3rem);
    margin: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rem;
    cursor: pointer;
    opacity: 1;
}

/*gestione messaggio di conferma copia link*/
#status {
    font-size: 0.7rem;
    color: #000;
    background: #FFF;
    border-radius: 0.2rem;
    position: absolute;
    bottom: -7.125em;
    padding: 0.312rem;
    padding-left: 1rem;
    padding-right: 1rem;
    letter-spacing: 0.0625rem;
    font-family: 'Poppins', sans-serif;
    right: 0;
    display: none;
    opacity: 0;
    border: 0.5px solid #000;
}

@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);
}

/*gestione shring by mail*/
#mail-sharing-container {
    position: absolute;
    bottom: 0;
    right: 2.5vw;
    width: 45vw;
    height: 60vh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 99999999991;
}

.mail-sharing-title {
    width: 40vw;
    height: auto;
    color: #FFF;
    text-transform: uppercase;
    font-weight: 100;
    margin-top: 5vh;
    border-bottom: 0.5px solid #9000FF;
    font-family: 'Outfit', sans-serif;
    font-weight: 750;
    padding-left: 4vw;
    padding-bottom: 0.5rem;
}

.mail-sharing-text {
    color: #FFF;
    width: 100%;
    margin-top: 5vh;
    margin-bottom: 2vh;
    letter-spacing: 0.1rem;
    font-weight: 300;
    font-size: 1.2rem;
    margin-left: 2vw;
}

input.emailInputClass {
    padding: 1rem;
    border-radius: 250px;
    border: none;
    width: 20vw;
    font-size: 1rem;
    margin-left: 2vw;
}

.shareMailButton {
    color: #FFF;
    letter-spacing: 0.3rem;
    border-radius: 5px;
    background: #202020;
    padding: 1.5rem;
    font-weight: 500;
    clear: both;
    margin-top: 1.5rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    font-size: 1.1rem;
    cursor: pointer;
    transition: 0.2s;
    margin-left: 2vw;
    font-size: 1.2rem;
}

.shareMailButton:hover {
    background: #101010;
    transition: 0.2s;
}

.validationMessage {
    color: #000;
    width: 50%;
    margin-left: 1.5rem;
    letter-spacing: 0.2rem;
    margin-top: 2.2rem;
    font-weight: 100;
    font-size: 1rem;
    display: none;
}

.validationNegativeMessage {
    color: red;
}

.validationPositiveMessage {
    color: green;
}

.close-email-panel-button {
    color: #000;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(90deg);
    left: 1rem;
    top: 1.5rem;
    cursor: pointer;
}

/********************/
/********************/
/*                  */
/* 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;
    min-width: 100vw !important;
    min-height: 100vh !important;
    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;
    /*999999999999999*/
    display: none;
    /*none*/
    font-family: 'Outfit', sans-serif;
}

.page {
    width: 210mm;
    /* Larghezza A4 */
    height: 297mm;
    /* Altezza A4*/
    /*width: 148mm;*/
    /* Larghezza A5 */
    /*height: 210mm;*/
    /* Altezza A5 */
    /*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: 0px;
    /* Margine inferiore tra le pagine */
    background-color: white;
    overflow: hidden;
}

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

.compositCoverImg {
    width: 50mm;
    height: auto;
    /*height: 50mm;*/
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 10mm;
    margin-right: 10mm;
    margin-top: calc(15mm - 10px);
    border-radius: 10mm;
}

.compositFrontLogo {
    width: 30mm;
    min-width: 30mm;
    max-width: 30mm;
    height: auto;
    margin-top: 2.5mm;
    margin-bottom: 2.5mm;
    margin-right: calc(((210mm - 20px) - 30mm) / 2);
    margin-left: 5mm;
    /*margin-left: calc(((210mm - 20px) - 30mm) / 2);*/
    /*margin-left: calc(((210mm - 20px) - 200mm) / 2);*/
}

.composit-front-site {
    width: 40mm;
    min-width: 40mm;
    max-width: 40mm;
    height: auto;
    margin-top: 2.5mm;
    margin-bottom: 2.5mm;
    margin-right: 5mm;
    margin-left: calc(((105mm - 20px) - 40mm) / 2);
}

h1.compositName {
    width: 100% !important;
    /*15mm sono il margine tra nome e foto*/
    max-height: 20mm !important;
    font-size: 7mm !important;
    line-height: 7mm !important;
    letter-spacing: 0.5mm !important;
    text-align: left !important;
    margin-top: 5mm !important;
    margin-left: 0mm;
    font-weight: 750;
}
.composit-email {
    width: 100%;
    margin-top: 2mm;
    margin-bottom: 2mm;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: end;
    padding-top: 2mm;
    border-top: 0.1mm solid #000;
}

.composit-email span.composit-email-icon {
    width: 4mm;
    height: 4mm;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    margin-right: 3mm;
}

.composit-email span.composit-email-val {
    text-align: right;
    font-size: 4mm;
    line-height: 4mm;
}

.composit-talent-skills-list-basic {
    width: 100% !important;
    /*15mm sono il margine tra nome e foto*/
    list-style: none;
    margin-left: 0;
    margin-top: 5mm !important;
}

.composit-talent-skill-list-title-basic {
    width: auto !important;
    clear: both;
    padding: 1mm;
    font-size: 4.5mm;
    line-height: normal;
    text-align: left;
    font-weight: 200;
    letter-spacing: 0.2mm;
    background: rgb(51, 103, 175);
    color: #FFF;
    margin-right: 2mm;
    display: flex;
    align-content: center;
    justify-content: center;
    border-radius: 1mm;
}

.composit-talent-general-skill-list-item-basic {
    margin-top: 1.5mm;
    font-size: 4mm;
    line-height: 4.5mm;
    text-transform: uppercase;
    margin-right: 2.5mm;
    min-height: 5mm;
    text-align: right;
    width: auto;
}

.composit-talent-skill-list-title {
    width: 66mm;
    margin-top: 5mm;
    /*margin-bottom: 1mm;*/
    margin-left: calc(5mm - 10px);
    margin-right: calc(5mm - 10px);
    font-weight: 500;
    font-size: 4.5mm;
    line-height: 4.5mm;
    /*color: #FFF;*/
    /*#000*/
    text-align: left;
    /*border-bottom: 1px solid #FFF;*/
    background: #FFF;
    color: #000;
    margin-top: 2mm;
    padding: 1mm;
    border-radius: 1mm;
    margin-bottom: 0mm;
}

.single-composit-column {
    width: 110mm;
    height: calc(297mm - 35mm);
    position: relative;
    margin: 0;
}

.composit-sx-column,
.right-column {
    padding-right: 10mm;
    padding-left: 10mm;
    padding-bottom: 10mm;
}

.composit-sx-column {
    padding-right: 20mm;
    width: 60mm;
    background: linear-gradient(-45deg, rgb(0, 0, 0) 15%, rgb(51, 103, 175) 100%);
    border-radius: 5mm;
    height: calc(297mm - 40mm);
    margin-top: 5mm;
}

.right-column {
    width: 94mm;
}

.composit-talent-skills-list {
    width: 66mm;
    list-style: none;
    margin-left: 0;
    margin-right: 0;
}

.composit-talent-general-skill-list-item {
    width: auto;
    max-width: 66mm;
    margin-top: 0.5mm;
    /*2mm*/
    font-size: 3.5mm;
    /*3.5mm*/
    line-height: 4mm;
    /*4mm*/
    color: #FFF;
    /*#000*/
    /*background: #CCC;
    border-radius: 3mm;
    padding: 2mm;*/
    clear: both;
    margin-left: calc(5mm - 10px);
    margin-right: calc(5mm - 10px);
    font-weight: 200;
    letter-spacing: 0.5mm;
}

.composit-bio-container {
    width: 100% !important;
    letter-spacing: 0.5mm !important;
    text-align: right !important;
    margin-top: 15mm !important;
    margin-left: 0;
    font-weight: 250;
    font-size: 4mm !important;
    line-height: 5.5mm !important;
    color: #333;
}

.bio-reduced-size{
    font-size: 3mm !important;
	line-height: 3.5mm !important;
    letter-spacing: 0.2mm !important;
}

span.composit-invite-to-site {
    font-size: 3.2mm;
    line-height: 3.5mm;
    color: #333;
    font-style: italic;
    letter-spacing: 0;
    display: block;
    margin-top: 3mm;
    padding: 2mm;
    background: #00000005;
    border-radius: 1mm;
}

.qr-container {
    position: absolute;
    bottom: 5mm;
    right: 2mm;
    padding: 2mm;
    height: auto;
    width: auto;
    display: flex;
    width: 94mm;
}

.qr-text-container {
    width: 65mm;
    height: auto;
    padding: 2mm;
    background: #FFF;
}

.qr-title {
    padding: 2mm;
    border-radius: 1.5mm;
    background: rgb(51, 103, 175);
    color: #FFF;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.2mm;
    line-height: 3.5mm;
    font-size: 3.5mm;
    margin-bottom: 1mm;
    float: right;
}

.qr-title span{
    display: block;
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2mm;
    width: 3.5mm;
    height: 3.5mm;
}

.qr-title span svg{
    width: 3.5mm;
    height: 3.5mm;
}

.qr-text {
    font-size: 3mm;
    line-height: 3mm;
    letter-spacing: 0.1rem;
    font-weight: 300;
    text-align: right;
    width: 61mm;
    padding: 2mm;
    padding-right: 0;
}

#qr-export {
    width: 20mm;
    height: 20mm;
    padding: 2mm;
    border: 0.5mm solid #000;
    border-radius: 3mm;
    float: right;
}

#qr-export img,
#qr-export canvas {
    width: 20mm;
    height: 20mm;
}

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: calc(210mm - 10px) !important;
    height: auto !important;
    min-width: calc(210mm - 10px) !important;
    min-height: auto !important;
    max-width: calc(210mm - 10px) !important;
    max-height: 206mm !important;
    margin-left: 0;
    margin-right: 0;
    margin-top: 5mm;
}

.composit-main-title {
    width: calc(100% - 4mm);
    font-size: 5mm;
    line-height: 5mm;
    font-weight: 300;
    margin-left: 2mm;
    margin-right: 2mm;
    margin-bottom: 5mm;
    text-align: left;
}

.single-composit-img-container {
    width: calc((210mm / 3) - 4mm);
    height: calc((210mm / 3) - 4mm);
    overflow: hidden;
    display: grid;
}

.single-composit-img-content {
    width: auto;
    height: calc((206mm / 3) - 20mm);
    margin: 1.5mm !important;
    display: flex;
    align-items: start;
    justify-content: center;
}

.singleCompositImg {
    width: auto;
    height: calc((206mm / 3) - 20mm);
    object-fit: cover;
    object-position: top;
    border: none !important;
}

.single-composit-title {
    width: calc((210mm / 3) - 7mm);
    height: 10mm;
    font-size: 3mm;
    line-height: 3mm;
    color: #333;
    font-weight: 300;
    padding: 1.5mm;
    margin: 1.5mm;
}

.composit-style-container {
    width: 100%;
    position: absolute;
    bottom: 57mm;
}

.composit-style-main-title {
    width: calc(100% - 4mm);
    margin: 2mm;
    text-align: left;
    height: auto;
    max-height: 40mm;
    font-size: 5mm;
    font-weight: 500;
}

.composit-syle-main-title {
    width: 100%;
    font-size: 4.5mm;
    line-height: 4.5mm;
    font-weight: 750;
    text-align: right;
    margin-bottom: 5mm;
}

.composit-single-style-title {
    padding: 5mm;
    padding-bottom: 2mm;
    padding-top: 2mm;
    float: left;
    margin-right: 2.5mm;
    text-transform: uppercase;
    background: #CCCCCC30;
    color: #000;
    font-size: 4mm;
    line-height: 4mm;
    border-radius: 5mm;
    font-weight: 200;
    margin-bottom: 2.5mm;
}

.composit-info-container {
    width: calc(100% - 20px);
    position: absolute;
    bottom: 10mm;
}

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

.composit-web-site{
    width: 100%;
    font-size: 3mm;
    line-height: 3mm;
    font-weight: 200;
    letter-spacing: 0.5mm;
    color: #000;
    text-align: center;
}

p.compositLastInfo {
    width: 92mm;
    height: 20mm;
    font-size: 4mm;
    color: rgb(30, 30, 30);
    text-align: center;
    line-height: 4mm;
    margin-left: 5mm;
    margin-right: 5mm;
    margin-top: 1mm;
    margin-bottom: 0mm;
}

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

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

.svg-icon-arrow-preimg {
    transform: rotate(180deg);
}

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

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

.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;
}

/*codice test per avvio video al passaggio del mouse*/
.single-video {
    position: relative;
    overflow: hidden;
}

.video-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 2;
}

.close-explosion-media-main-text-space-container {
    position: absolute;
    height: 100vh;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    border: none;
    top: 0;
    left: 0;
    padding-left: 1.5rem;
}

.video-preview video,
.video-preview iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay-box {
    position: absolute;
    background: transparent;
    min-width: calc((75vw / 4) - 0.4rem);
    max-width: calc((75vw / 4) - 0.4rem);
    min-height: calc((75vw / 6) - 0.4rem);
    max-height: calc((75vw / 6) - 0.4rem);
    top: 0;
    left: 0;
    z-index: 9999;
}

.info-icon-container {
    margin-left: 1rem;
}

.close-explosion-media-main-text-space-container svg {
    width: 3rem;
    height: 3rem;
}

.back-to-top-icon-container {
    position: fixed;
    bottom: 1rem;
    right: 11rem;
    width: 2vw;
    height: 2vw;
    padding: 1rem;
    cursor: pointer;
    z-index: 9999;
    background: #000;
    border-radius: 5rem;
    display: flex;
    align-content: center;
    justify-content: center;
}

.back-to-top-icon-container svg {
    fill: #FFF;
}

/*GESTIONE DEL CONTAINER DELLE REFERENCES E AGENCIES*/

/*GESTIONE REFERENCES E AGENCIES*/
.references-agencies-main-container {
    position: fixed;
    bottom: -100vh;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    min-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    min-height: 100vh;
    background: #FFFFFF80;
    backdrop-filter: blur(1rem);
    z-index: 99999999;
    /*prima: 999999*/
    visibility: hidden;
    opacity: 0;
}

.references-agencies-title {
    width: 100vw;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.4rem;
    text-transform: uppercase;
    margin-top: 2vh;
    font-size: 2.5rem;
}

.close-reference-agency-main-container-button {
    width: 30vw;
    margin-left: 35vw;
    margin-right: 35vw;
    height: 3vh;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 20vh;
    background: transparent;
    border: none;
}

.close-reference-agency-main-container-button svg {
    transform: rotate(90deg);
}

.references-agencies-button-container {
    width: 30vw;
    margin-left: 35vw;
    margin-right: 35vw;
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

.ref-age-button {
    background: transparent;
    border: 0.5px solid #000;
    color: #000;
    padding: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 5rem;
    font-weight: 300;
    text-transform: uppercase;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    letter-spacing: 0.2rem;
    cursor: pointer;
}

.select-ref-age-button {
    background: #000;
    color: #FFF;
}

.ref-agen-container {
    width: 90vw;
    margin-left: 5vw;
    margin-right: 5vw;
    height: 62.3vh;
    margin-top: 2vh;
    padding-bottom: 10rem;
    box-sizing: border-box;
    overflow-y: scroll;
    display: none;
}

.selected-ref-age-container {
    display: block !important;
}

.single-reference-cover-container,
.single-agency-cover-container {
    width: calc((90vw / 5) - 2rem);
    height: 45vh;
    margin: 1rem;
    cursor: pointer;
    visibility: visible;
    opacity: 1;
}

.single-agency-cover-container {
    height: calc((90vw / 5) - 2rem);
}

.single-reference-cover,
.single-agency-cover {
    width: calc((90vw / 5) - 2rem);
    height: 40vh;
    object-fit: contain;
    object-position: center;
    visibility: visible;
    opacity: 1;
}

.single-agency-cover {
    width: calc(((90vw / 5) - 2rem) / 2);
    height: calc(((90vw / 5) - 2rem) / 2);
    margin-left: calc(((90vw / 5) - 2rem) / 4);
    margin-right: calc(((90vw / 5) - 2rem) / 4);
    margin-top: calc(((90vw / 5) - 2rem) / 4);
    object-fit: cover;
    filter: invert(100%);
}

.single-reference-cover-detail {
    width: calc((90vw / 5) - 2rem);
    height: 40vh;
    padding: 1rem;
    box-sizing: border-box;
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    backdrop-filter: blur(1rem);
}

.single-reference-cover-detail p,
.single-agency-cover-detail p {
    position: absolute;
    bottom: 0;
    left: 0;
    height: auto;
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    background: #00000080;
    color: #FFF;
    font-size: 1.1rem;
    line-height: 1.3rem;
    font-weight: 100;
}

.single-agency-description-container,
.single-references-description-container {
    width: calc((90vw / 5) - 2rem);
    height: 7vh;
    padding: 1rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
}

.single-references-title,
.single-agency-title {
    width: calc((90vw / 5) - 5rem);
    font-size: 1.2rem;
    line-height: 1rem;
    color: #333;
    min-height: 5vh;
    position: absolute;
    bottom: 0;
    text-align: center;
}

.single-references-title,
.single-agency-title {
    text-align: center;
    font-size: 1.2rem;
    line-height: 1rem;
    width: calc(100% - 2rem);
}

.single-agency-title {
    font-weight: 300;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
}

.author-detail {
    font-size: 1rem;
    opacity: 0.8;
    line-height: 1rem;
}

/*GESTIONE DELL'IFRAME*/
.single-agency-iframe {
    position: absolute;
    width: 100vw;
    height: 100vh;
    padding: 0rem;
    box-sizing: border-box;
    background: #CCC;
    box-shadow: 0 0 2rem #333;
    z-index: 999999999;
    bottom: 0;
    left: 0;
    display: none;
}

.single-agency-iframe-close-button {
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: #00000080;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    border-radius: 5rem;
    z-index: 9999999999999;
}

#agency-iframe-id {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}

.expand-media-container,
.expand-media-container-Digitals {
    display: none;
}

#main-book-title .single-book-name {
    font-size: 1.2rem;
    letter-spacing: 0.2rem;
    color: #444;
    font-weight: 100;
}

#main-book-title .image-title {
    font-size: 1.2rem;
    line-height: 1.2rem;
    margin-top: 1rem;
    font-weight: 500;
}

#explosion-media-main-text-space .single-book-name {
    position: absolute;
    top: 1rem;
    right: 0rem;
    font-weight: 100;
    font-size: 1rem;
    letter-spacing: 0.1rem;
}

/*formati desktop*/
@media (min-width: 1024px) and (max-width: 1279px) {
    html {
        font-size: 10px;
    }
}

@media (min-width: 1280px) and (max-width: 1365px) {
    html {
        font-size: 11px;
    }
}

@media (min-width: 1366px) and (max-width: 1439px) {
    html {
        font-size: 11px;
        /*prima 12px*/
    }
}

@media (min-width: 1440px) and (max-width: 1679px) {
    html {
        font-size: 14px;
    }
}

@media (min-width: 1680px) and (max-width: 1919px) {
    html {
        font-size: 14px;
    }
}


/*mobile*/

/*GESTIONE CARATTERI MOBILE*/
@media (min-width: 279px) and (max-width: 319px) {
    html {
        font-size: 10px;
    }
}

@media (min-width: 320px) and (max-width: 359px) {
    html {
        font-size: 10.5px;
    }
}

@media (min-width: 360px) and (max-width: 389px) {
    html {
        font-size: 11px;
    }
}

@media (min-width: 390px) and (max-width: 413px) {
    html {
        font-size: 12.75px;
    }
}

@media (min-width: 414px) and (max-width: 429px) {
    html {
        font-size: 13px;
    }
}

@media (min-width: 430px) and (max-width: 479px) {
    html {
        font-size: 13.25px;
    }
}

@media (min-width: 480px) and (max-width: 539px) {
    html {
        font-size: 13.5px;
    }
}

@media (min-width: 540px) and (max-width: 599px) {
    html {
        font-size: 13.75px;
    }
}

@media (min-width: 600px) and (max-width: 679px) {
    html {
        font-size: 13.875px;
    }
}

@media (min-width: 680px) and (max-width: 767px) {
    html {
        font-size: 13.95px;
    }
}

@media (min-width: 768px) and (max-width: 823px) {
    html {
        font-size: 14px;
    }
}

@media (min-width: 279px) and (max-width: 823px) {

    /*setting principale*/
    html,
    body {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100vw;
        min-height: 100vh;
        height: auto;
        /*overflow-x: hidden;*/
        font-family: 'Outfit', sans-serif;
        scroll-behavior: auto;
        user-select: none;
        /*background: #FFFFFF50; /////////////////////////////////////////////////////////////////////////////////////////////////////MODIFICATO//////////////*/
        background: transparent;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    /*gestione dimensioni banner logo testa*/
    .header {
        height: 6vh;
        background: transparent;
    }

    /*gestione logo e icone navigazione*/
    /*
    .main-logo {
        position: absolute;
        width: 35vw;
        top: 2vw;
        left: 1rem;
        filter: invert(100%);
    }
    .menu-icon {
        position: absolute;
        top: 1.5vw;
        right: 2vw;
        cursor: pointer;
        color: #000;
        font-size: 1rem;
    }
    .menu-bar {
        width: 3rem;
        height: 3rem;
        fill: #FFF;
    }
    .back-icon {
        position: absolute;
        top: 1.5vw;
        right: calc(2vw + 6vw + 1rem);
        cursor: pointer;
        color: #000;
        font-size: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .back-icon-container {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        fill: #FFF;
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 99999999999;
        background: #0000002c;
        border-radius: 5rem;
        padding: 1rem;
    }
    .back-icon-container svg {
        fill: #FFF;
        left: 0.4rem;
    }
    */
    /*gesitone data container*/
    #single-face-data-container {
        min-height: 100vh;
        margin-top: 0;
    }

    /*gestione elementi apertura pagina*/
    img.single-talent-entry-cover {
        width: 80vw;
        height: 80vw;
        left: 10vw;
        z-index: 1;
    }

    h1.single-talent-entry-name {
        bottom: 28vh;
        width: 100%;
        left: 0;
        font-size: 2rem;
        opacity: 1;
        z-index: 99;
    }

    .instagram-container-desktop {
        display: none;
    }

    .instagram-container-mobile {
        display: block;
        padding: 0.5rem;
        border: 0.5px solid #FFF;
        color: #FFF;
        font-size: 1.5rem;
        text-align: center;
        width: 40vw;
        margin-left: calc((50vw - 2rem) - 20vw);
        border-radius: 5rem;
        display: flex;
        margin-bottom: 1rem;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    /*gestione elementi pagina*/
    img.single-talent-main-cover {
        display: none;
    }

    img.single-talent-main-cover-mobile {
        display: block;
        width: calc(100vw - 4rem);
        min-width: calc(100vw - 4rem);
        max-width: calc(100vw - 4rem);
        min-height: auto;
        height: calc(100vw - 4rem);
        object-position: center;
        object-fit: cover;
        /*
            top: 19vh;
            left: 5vw;
        */
        z-index: 999999;
        border-radius: 2rem;
        position: absolute;
        top: 0;
        left: 0;
    }

    .safe-background {
        position: fixed;
        bottom: 0;
        left: 0;
        min-width: 100vw;
        min-height: 100vh;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
        z-index: 10;
        display: block;
    }

    .single-talent-general-info-container {
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        height: auto;
        min-height: 100vh;
        max-height: unset;
        background: linear-gradient(-45deg, rgb(0, 0, 0.8) 15%, rgba(51, 103, 175, 0.8) 100%);
        top: 0;
    }

    .single-talent-datas-container {
        position: relative;
        /*absolute*/
        width: 100%;
        min-height: unset;
        /*80vh*/
        height: auto;
        margin: unset;
        bottom: unset;
        top: unset;
        margin-right: 0;
        right: 0;
        margin-top: 5vh;
        /*27.5vh*/
        /*background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255, 0.5) 15%);*/
        background: transparent;
        padding-top: 2vh;
        /*8vh*/
        box-sizing: border-box;
        z-index: 999999;
    }

    .text-increase-icon-container {
        display: none;
    }

    h1.single-talent-main-name {
        display: none;
    }

    .talent-skills-list {
        color: #FFF;
        margin-top: 0rem;
        display: none;
        /*si attiva con il il toggleClass*/
    }

    h1.single-talent-main-name-mobile {
        display: block;
        width: 100%;
        position: relative;
        margin-top: -8vh;
        text-align: center;
        font-size: 2.7rem;
        /*font-size: 2.5rem;*/
        letter-spacing: 0rem;
        line-height: 2.3rem;
        /*line-height: 2.1rem;*/
        margin-bottom: 2vh;
        /*15vh*/
        margin-top: -4vh;
        color: #FFF;
    }

    .talent-competence-detail {
        font-size: 1.2rem;
        letter-spacing: 0.5rem;
        line-height: 2.3rem;
        font-weight: 100;
        opacity: 0.7;
        margin-top: 0.5rem;
    }

    .single-role-linkable{
        padding: 0.2rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        line-height: 1rem;
    }

    .single-talent-main-img-container {
        position: relative;
        width: calc(100vw - 4rem);
        height: calc(100vw - 4rem);
    }

    .bio-content {
        font-size: 1.7rem;
        line-height: 1.8rem;
        font-weight: 100;
        letter-spacing: 0.2rem;
        color: #FFF;
        width: 100%;
        max-height: calc(25vh + 2rem);
        min-height: calc(25vh + 2rem);
        overflow-y: hidden;
        /*scroll*/
        padding-bottom: 2rem;
        box-sizing: border-box;
        padding-bottom: 2rem;
        padding: 0;
        padding-right: 0;
        margin-bottom: 2rem;
        padding-bottom: 3rem;
    }

    .expand-bio-btn-mobile {
        display: relative;
        width: 60vw;
        margin-left: calc(20vw - 2rem);
        margin-right: calc(20vw - 2rem);
        padding: 1rem;
        box-sizing: border-box;
        border: none;
        border-radius: 5rem;
        background: #dedede;
        color: #000;
        text-transform: uppercase;
        font-weight: 300;
        letter-spacing: 0.25rem;
        line-height: 1.5rem;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 3rem;
        text-align: center;
    }

    /*GESTIONE DEI CONTAINER SKILLS E MEDIA*/
    .single-talent-skills-container,
    .talent-books-container {
        width: 100%;
        /*calc(100% - 4rem)*/
        margin-left: 0;
        margin-right: 0;
        min-height: unset;
        /*20vh*/
        /*5vh*/
        max-height: unset;
        padding: 0rem;
        box-sizing: border-box;
        position: relative;
        top: unset;
        z-index: 1;
        /*999999999*/
        padding-top: 0;
        border-top: none;
    }

    .talent-books-container {
        display: block;
        width: 100%;
        margin-bottom: 0rem;
        margin-top: 0rem;
        padding-bottom: 1rem;
        height: 0;
        overflow: hidden;
        background: transparent;
        left: 0;
    }

    .single-talent-book-name {
        float: left;
        margin-bottom: 0.2rem;
        list-style: none;
        transition: 0.2s;
        padding: 1em;
        padding-top: 1em;
        padding-bottom: 1em;
        border-radius: 5rem;
        color: #000;
        background: #FFF;
        border: none;
        margin: 0.5rem;
        font-size: 1.5rem;
        line-height: 1.5rem;
        clear: both;
    }

    .equipment-sublist {
        display: none;
    }

    

    .talent-skill-list-title svg,
    .equipment-sublist-title svg {
        display: block;
    }

    .talent-skill-list-title,
    .equipment-sublist-title {
        width: 100%;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1rem;
        font-size: 1.5rem;
        line-height: 1.8rem;
        margin-right: 1.5rem;
        clear: both;
        margin-bottom: 0.5rem;
        margin-top: 1.5rem;
    }

    .talent-network-button {
        width: 50vw;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1rem;
        font-size: 1.5rem;
        line-height: 1.8rem;
        margin-right: 1.5rem;
        clear: both;
        margin-bottom: 0.5rem;
        margin-top: 1.5rem;
        text-align: center;
        justify-content: center;
        left: calc(25vw - 3rem);
    }

    .talent-skill-list-title svg,
    .equipment-sublist-title svg {
        width: 2rem;
        height: 2rem;
    }

    .closing-button-container {
        margin-top: 5rem;
        width: 30vw;
        margin-left: calc(35vw - 2rem);
        margin-right: calc(35vw - 2rem);
        border-radius: 5rem;
        background: #dedede;
        display: flex;
    }

    .closing-button-container svg {
        padding: 1rem;
        width: 2rem;
        height: 2rem;
        transform: rotate(-90deg);
    }

    .state-region-icon-container {
        width: 1.6rem;
        height: 1.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .region-skill-list svg {
        width: 1.5rem;
        height: 2rem;
    }

    li.talent-general-skill-list-item,
    li.equipment-sublist-item {
        font-size: 1.5rem;
        line-height: 1.8rem;
        padding: 1.1rem;
        padding-bottom: 0.4rem;
        padding-top: 0.4rem;
        background: #afafaf20;
        border-radius: 5rem;
        margin: 0rem;
        /*prima: 0.2rem*/
        margin-bottom: 1rem;
    }

    .equipment-text {
        font-size: 1.5rem;
        line-height: 1.8rem;
    }

    .single-talent-compcard-button-desktop {
        display: none;
    }

    .single-talent-compcard-button-mobile,
    .single-talent-info-button,
    .single-talent-media-button {
        display: block;
    }

    .single-talent-compcard-button-mobile,
    .single-talent-info-button,
    .single-talent-media-button {
        padding: 0.5rem;
        background: #FFF;
        color: #000;
        font-family: 'Outfit', sans-serif;
        left: unset;
        right: unset;
        bottom: unset;
        text-transform: uppercase;
        border: none;
        border-radius: 5rem;
        font-weight: 700;
        z-index: 99999999999;
        cursor: pointer;
        width: 5rem;
        height: 5rem;
        margin-bottom: 2vh;
        /*border: 0.5px solid #000;*/
        font-size: 1.5rem;
        position: absolute;
        top: 0;
        /*-3rem*/
        letter-spacing: 0.1rem;
        margin-left: 25vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .single-talents-icons-container {
        position: absolute;
        bottom: -2.5rem;
        left: 0;
        width: calc(100vw - 4rem);
        height: 5rem;
    }

    .single-talent-compcard-button-mobile svg,
    .single-talent-info-button svg,
    .single-talent-media-button svg {
        width: 2rem;
        height: 2rem;
    }

    .single-talent-compcard-button-mobile {
        right: calc(((((100vw - 4rem) - 20rem) / 8) * 7) + 15rem);
    }

    .single-talent-info-button {
        right: calc(((((100vw - 4rem) - 20rem) / 8) * 3) + 5rem);
    }

    .single-talent-media-button {
        right: calc(((100vw - 20rem) / 8) * 1);
    }

    .share-icon-container {
        position: absolute;
        bottom: unset;
        width: 5rem;
        height: 5rem;
        border-radius: 10rem;
        background: #FFF;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 99999999999;
        top: 0;
        /*-3rem*/
        right: calc(((((100vw - 4rem) - 20rem) / 8) * 5) + 10rem);
        /*border: 0.5px solid #000;*/
        margin-bottom: 2vh;
        margin-top: 0;
    }

    .share-icon-container svg {
        width: 2rem;
        height: 2rem;
        fill: #000;
    }

    .show-general-information-arrow-container,
    .closing-arrow-container {
        display: none;
    }

    .open-portfolio-button {
        position: relative;
        top: unset;
        right: unset;
        left: unset;
        top: unset;
        margin: unset;
        float: left;
        margin-top: calc(-2.5rem - 2vh);
        margin-right: unset;
        padding: 0.5rem;
        border: 0.5px solid #000;
        margin-left: calc(50vw - 1.25rem);
    }

    ul.single-talent-menu-container {
        width: 100vw;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    li.single-talent-menu-item {
        margin-right: 0.5rem;
        margin-left: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: calc((100vw / 3) - 1rem);
        /*calc((100vw / 5) - 1rem)*/
    }

    .single-talent-menu-item-desktop {
        display: none !important;
    }

    .single-talent-menu-item-mobile {
        display: block;
        width: calc((100vw / 3) - 1rem);
        /*calc((100vw / 5) - 1rem)*/
    }

    .single-talent-menu-item-mobile-x4 {
        width: calc((100vw / 4) - 1rem);
        /*calc((100vw / 5) - 1rem)*/
    }

    .single-talent-menu-icon-container {
        width: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .single-talent-menu-icon-container svg {
        width: 2.5rem;
        height: 2.5rem;
    }

    /*GESTIONE DIFFERENTE SOTTOMENU BOOK*/
    .single-talent-book-list {
        /*different layout*/
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 1.5rem;
        left: calc(((100vw / 3) + 0.5rem) * -1);
        padding: 1rem;
        box-sizing: border-box;
        background: #ffffff80;
        border-radius: 0rem;
        backdrop-filter: blur(1rem);
        font-size: 1.5rem;
    }

    .single-talent-datas-content {
        width: 90vw;
        position: relative;
        /*absolute*/
        top: 0;
        /*35vh*/
        /*25vh*/
        left: 5vw;
        right: 5vw;
    }

    .single-talent-share-container {
        margin-top: 0;
        /*7vh*/
        background: #FFF9;
    }

    ul.single-talent-features-list {
        margin-top: 0;
        padding-top: 7vh;
    }

    p.single-talent-nw-feature-name {
        width: 40%;
        font-family: 'Outfit', sans-serif;
        font-weight: 750;
        font-size: 1.5rem;
        /*font-size: 1rem;*/
    }

    p.single-talent-nw-feature-value {
        letter-spacing: 0;
        text-transform: uppercase;
        opacity: 1;
        font-weight: 200;
        font-family: 'Outfit', sans-serif;
        font-size: 1.6rem;
        /*font-size: 1.2rem;*/
    }

    .single-talent-images-container {
        position: relative;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: auto;
        min-height: unset;
        max-height: unset;
        overflow-y: visible;
        top: 0;
        left: 0;
        right: 0;
        display: block;
        padding: 0;
        padding-top: 1rem;
        padding-bottom: 4rem;
        /*prima 2rem*/
    }

    .single-talents-book-container,
    .single-talent-certificate-container,
    .single-talent-bio-container {
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        height: auto;
        min-height: 45vh;
        max-height: unset;
        /*solo su mobile per permettere di vedere anche la bio, segue un pulsante che compare solo se soddisfa se il container supera una determinata altezza*/
        overflow-y: scroll;
        column-count: auto;
        column-gap: 0.2rem;
        row-gap: 0.2rem;
        padding-top: 2.5vh;
        /*7vh -> aumentato a 11 per lasciare spazio ad icone - 2025/06 -> rese icone fixed in basso a dx*/
        top: 0;
        padding-bottom: 10vh;
    }

    .single-talents-book-print-icon-container,
    .single-talents-book-download-icon-container {
        position: fixed;
        /* absolute*/
        top: unset;
        /*0*/
        bottom: 3rem;
        /*prima impostazione assente*/
        z-index: 9999;
        /*prima impostazione assente*/
        right: 1rem;
        width: 4vh;
        height: 4vh;
        padding: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0.5px solid #000;
        border-radius: 5rem;
        background: #FFF;
        backdrop-filter: blur(1rem);
    }

    .single-talents-book-download-icon-container {
        /*right: calc(0rem + 4vh + 1rem);*/
        right: calc(0rem + 4vh + 2.5rem);
        background: #FFF;
        border: 0.5px solid #000;
        border-radius: 5rem;
        display: flex;
        align-items: center;
        padding: 0.5rem;
    }

    .single-talents-book-container {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: auto;
        min-height: unset;
        max-height: 30vh;
        /*solo su mobile per permettere di vedere anche la bio, segue un pulsante che compare solo se soddisfa se il container supera una determinata altezza*/
        overflow-y: hidden;
        column-count: auto;
        column-gap: 0.2rem;
        row-gap: 0.2rem;
        padding-top: 0;
        /*2.5vh*/
        top: 0;
        padding-bottom: 2vh;
        margin-left: 0;
        margin-right: 0;
        position: relative;
    }

    .single-talents-book-main {
        display: block;
    }

    .single-img-description-container {
        width: calc(100vw - 4rem);
        max-width: calc(100vw - 4rem);
        height: calc(15vh + 2rem);
        min-height: calc(15vh + 2rem);
        max-height: calc(15vh + 2rem);
        margin: 0rem;
        background: linear-gradient(307deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.95) 48%, rgba(0, 0, 0, 0.41) 85%, rgba(0, 0, 0, 0) 100%);
        border-radius: 0.5rem;
        margin-left: 0vh;
        margin-top: 1rem;
    }

    .play-video-icon-container,
    .camera-icon-container {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 4rem;
        height: 4rem;
        background-position: 50%;
        overflow: hidden;
        background: linear-gradient(307deg, rgb(60, 7, 101) 0%, rgba(144, 0, 255, 1) 100%);
        border-top-left-radius: 1rem;
        /*display: none;*/
    }

    .play-video-icon-container svg,
    .camera-icon-container svg {
        position: absolute;
        right: 0.5rem;
        bottom: 0.5rem;
        width: 3rem;
        height: 3rem;
        opacity: 0.85;
    }

    img.single-talent-book-single-img.single-video {
        width: calc(100vw - 2rem);
        height: 20vh;
        margin: 0rem;
        width: 15vh;
        height: 15vh;
        border-radius: 1rem;
        position: absolute;
        top: 1rem;
        left: 1rem;
    }

    img.single-talent-book-single-img {
        width: calc(100vw - 2rem);
        height: 20vh;
        margin: 0rem;
        width: 15vh;
        height: 15vh;
        border-radius: 1rem;
        position: absolute;
        top: 1rem;
        left: 1rem;
    }

    .icons-container {
        width: calc(100vw - 10vw);
        margin-right: 5vw;
        margin-left: 5vw;
        left: 0;
        display: flex;
        margin-top: 40vh;
    }

    .single-img-title {
        width: calc(100vw - 5rem - 15vh);
        font-size: 1.6rem;
        line-height: 1.6rem;
        color: #FFF;
        max-height: calc(15vh + 2rem);
        bottom: unset;
        min-height: calc(15vh + 2rem);
        display: flex;
        align-items: end;
        left: calc(15vh + 1rem);
        padding: 2rem;
        font-weight: 900;
        padding-left: 1rem;
        padding-bottom: 4rem;
    }

    span.single-book-name {
        display: block;
        font-size: 1rem;
        font-weight: 100;
        color: #cccccc80;
        letter-spacing: 0.2rem;
        clear: both;
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

    .overlay-box {
        width: calc(100vw - 4rem);
        min-width: calc(100vw - 4rem);
        max-width: calc(100vw - 4rem);
        height: 20vh;
        min-height: 20vh;
        max-height: 20vh;
        display: none;
    }

    .single-talent-icon,
    .single-talents-book-download-icon-container svg,
    .single-talents-book-print-icon-container svg {
        fill: #000;
    }

    .sharing-platform-icon {
        font-size: 3rem;
        font-size: 3rem;
        width: calc((100vw/ 5) - 1rem);
        height: calc((100vw / 5) - 1rem);
        margin: 0.5rem;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        margin-bottom: 0.5rem;
        margin-bottom: -17vh;
        background: transparent;
        color: #000;
        margin-top: 7rem;
    }

    #status {
        font-size: 1.2rem;
        bottom: -12rem;
    }

    li.single-talent-menu-item-images {
        display: block;
        align-items: unset;
        justify-content: unset;
    }

    /*gestione della galleria*/
    #main-book-img-container {
        height: 90vh;
        min-height: 90vh;
        max-height: 90vh;
        width: 100vw;
    }

    /*pulsante chiusura della gallery*/
    svg.close-explosion-gallery-icon {
        width: 3rem;
        height: 3rem;
    }

    .comeBack-button-container-transparent {
        top: 1.5rem;
        right: 1.5rem;
        width: calc(15vh - 4.5rem);
        /*width: 23vw;*/
        height: calc(15vh - 4.5rem);
        /*height: 23vw;*/
        display: flex;
        align-items: center;
        justify-content: center;
    }

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

    .prevImg-button,
    .nextImg-button {
        font-weight: 500;
        color: #9000FF;
        font-size: 5em;
        cursor: pointer;
        margin-bottom: 7rem;
        background: #00000050;
        border-radius: 50rem;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .svg-icon-arrow {
        width: 2.5rem;
        height: 2.5rem;
        padding: 0.7rem;
        fill: #FFF;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /*sharing panel*/
    p.icon-title {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        font-weight: 100;
        font-size: 2rem;
        /*font-size: 1.5rem;*/
        letter-spacing: 0.3rem;
        color: #000;
        text-transform: uppercase;
        text-align: center;
        font-family: 'Outfit', sans-serif;
        line-height: 1.2rem;
    }

    #mail-sharing-container {
        z-index: 9999999999; /*prima: 99999 - finiva sotto il container dello share*/
        position: absolute;
        bottom: 0;
        right: 0vw;
        width: 100vw;
        height: 60vh;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(5px);
        padding: 2rem;
        box-sizing: border-box;
    }

    .mail-sharing-title {
        width: 80vw;
        margin-top: 5vh;
        border-bottom: 0.5px solid #9000FF;
        font-size: 2.5rem;
    }

    .mail-sharing-text {
        font-size: 2rem;
        line-height: 1.9rem;
    }

    input.emailInputClass {
        padding: 1rem;
        border-radius: 250px;
        border: none;
        width: 75vw;
        font-size: 1.5rem;
        /*font-size: 1rem;*/
    }

    .shareMailButton {
        font-size: 2rem;
    }

    .validationMessage {
        font-weight: 200;
        font-size: 1.8rem;
        line-height: 1.8rem;
    }

    .close-email-panel-button {
        color: #000;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 9vw;
        top: 1.5rem;
    }

    #certificate-link-button {
        bottom: 8vh;
        right: 30vw;
    }

    .single-talen-talb-claim {
        position: fixed;
        color: #000;
        text-transform: uppercase;
        font-size: 0.8rem;
        line-height: 1rem;
        text-align: right;
        bottom: calc(1rem + 3vh + 0.4rem);
        right: 1rem;
        font-family: 'Outfit', sans-serif;
        letter-spacing: 0.1rem;
        font-weight: 200;
        cursor: pointer;
        z-index: 99999999;
    }

    .single-talent-tlab-claim-logo {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        height: 4vh;
        z-index: 999;
    }

    .talent-book-list {
        margin-top: 1rem;
        display: block;
    }

    /*GESTIONE DELLA SINGOLA IMMAGINE ESPLOSA*/
    #main-title-space {
        position: absolute;
        bottom: unset;
        right: unset;
        width: 60vw;
        height: 10vh;
        cursor: pointer;
        display: flex;
        align-items: center;
        left: 0;
        padding: 1rem;
        box-sizing: border-box;
        top: 0vh;
        z-index: 99999;
        mix-blend-mode: normal;
    }

    #main-book-title {
        font-size: 1.5rem;
        letter-spacing: 0;
        color: #555;
        line-height: 1.5rem;
    }

    #main-book-title .image-title {
        font-size: 1.2rem;
        line-height: 1.2rem;
        margin-top: 1rem;
        font-weight: 500;
        color: #777;
    }

    #main-book-title .single-book-name {
        font-size: 1.2rem;
        letter-spacing: 0.2rem;
        color: #555;
        font-weight: 100;
        position: relative;
        margin-left: 1rem;
    }

    .info-icon-container svg {
        width: 2.5rem !important;
        height: 2.5rem !important;
        fill: #333;
    }

    #explosion-media-main-text-space {
        width: 100vw;
        max-width: 100vw;
        min-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        min-height: 100vh;
        background: #000000c0;
        backdrop-filter: blur(1rem);
        padding: 5rem;
        padding-right: 10vw;
        padding-left: 10vw;
        box-sizing: border-box;
        text-align: right;
        color: #FFF;
        position: absolute;
        top: 0;
        right: -100vw;
        z-index: 99999999;
        visibility: hidden;
        opacity: 0;
    }

    #title-hidden-container {
        width: 100%;
        font-size: 3rem;
        margin-bottom: 1.5rem;
        margin-top: 2rem;
    }

    .close-explosion-media-main-text-space-container {
        position: absolute;
        height: 3rem;
        width: 3rem;
        border-radius: 5rem;
        display: block;
        align-items: unset;
        justify-content: unset;
        border: none;
        top: 0;
        right: 0.5rem;
        padding-left: 0;
        padding: 2rem;
        left: unset;
        min-width: 3rem;
        min-height: 3rem;
        display: flex;
        align-content: center;
        justify-content: center;
        box-sizing: content-box;
    }

    .close-explosion-media-main-text-space-container svg {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    .back-to-top-icon-container {
        position: fixed;
        top: unset;
        bottom: 3rem;
        z-index: 9999;
        right: calc(0rem + 8vh + 4rem);
        width: 4vh;
        height: 4vh;
        padding: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0.5px solid #000;
        border-radius: 5rem;
        background: #FFF;
        backdrop-filter: blur(1rem);
        z-index: 999;
    }

    .back-to-top-icon-container svg {
        fill: #000;
    }

    /*GESTIONE SOCIAL*/
    .social-container,
    .social-arrow-container {
        display: none;
    }

    .single-social-container {
        color: #FFF;
        padding: 0.1rem;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        line-height: 1rem;
        width: calc(((100vw - 4rem) / 6) - 1rem);
        height: calc(((100vw - 4rem) / 6) - 1rem);
        margin-right: 0.5rem;
        margin-left: 0.5rem;
        box-sizing: border-box;
        border-radius: 5rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.7;
    }

    .single-social-container svg {
        width: 2.5rem;
        height: 2.5rem;
    }

    .social-container-mobile,
    .social-arrow-container-mobile {
        display: block;
        width: calc(100vw - 4rem);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        margin-bottom: 1rem;
        height: auto;
        max-height: 3.5rem;
        overflow: hidden;
    }

    /*GESTIONE REFERENCE AND AGENCIES*/
    .close-reference-agency-main-container-button {
        margin-top: 10vh;
    }

    .single-reference-cover-container {
        width: calc((90vw / 2) - 2rem);
        height: 35vh;
        margin: 1rem;
        cursor: unset;
    }

    .single-reference-cover {
        width: calc((90vw / 2) - 2rem);
        height: 26vh;
        object-fit: contain;
    }

    .single-references-description-container {
        width: calc((90vw / 2) - 2rem);
        height: 4vh;
        padding: 0.5rem;
        box-sizing: border-box;
        color: #FFF;
        font-size: 1.1rem;
        line-height: 1rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
        text-align: center;
        text-transform: uppercase;
    }

    .agencies-container {
        padding-top: 3rem;
    }

    .single-agency-cover-container {
        width: calc(90vw - 0.5rem);
        height: 10vh;
        margin: 0;
        margin-bottom: 1rem;
        cursor: unset;
    }

    .single-agency-cover {
        width: 8vh;
        height: 8vh;
        margin: 1vh;
        object-fit: cover;
        object-position: center;
        border-radius: 20rem;
    }

    .single-references-title {
        width: 100%;
    }

    .single-agency-description-container {
        width: calc(90vw - 10vh - 1rem);
        height: 10vh;
        margin-top: 0;
        padding: 0.5rem;
        font-size: 1.2rem;
        line-height: 1.2rem;
        font-weight: 100;
        text-transform: uppercase;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        top: unset;
    }

    .single-agency-title {
        width: 100%;
        height: 10vh;
        position: relative;
        letter-spacing: 0.1rem;
        display: grid;
        align-content: center;
        font-weight: 500;
    }

    .expand-media-container {
        position: absolute;
        width: 50vw;
        left: calc(25vw - 2rem);
        right: calc(25vw - 2rem);
        top: 2.5rem;
        background: #000;
        z-index: 999999999999999999;
        padding: 0.5rem;
        border: none;
        font-size: 1rem;
        border-radius: 5rem;
        padding: 1rem;
        box-sizing: border-box;
        border: none;
        border-radius: 5rem;
        font-weight: 750;
        line-height: 1.5rem;
        font-size: 1.5rem;
        display: none;
        color: #FFF;
        text-transform: uppercase;
    }

    .expand-media-container-Digitals {
        display: block;
    }

    /*GESTIONE DELLE ICONE INTELIGENTE*/
    /*restano nascoste fino a quando il book non è visibile*/
    .single-talents-book-print-icon-container,
    .single-talents-book-download-icon-container,
    .back-to-top-icon-container {
        visibility: hidden;
        opacity: 0;
    }
}