/* Posiziona @font-face all'inizio del tuo CSS */
@font-face {
    font-family: 'My Font';
    src: url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap') format('woff2');
    font-display: optional 1s 3s;
}
/*importazione font google*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
html, body{
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(0,0,0);
    width: 100vw;
    height: auto;
    min-height: 100vh;
    /*overflow: hidden;*/
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    overflow-y: hidden;
    user-select: none;
}
*{
    margin: 0;
    padding: 0;
    position: relative;
    float: left;
}
span, br, strong, em, a{
    
    margin: unset;
    padding: unset;
    position: unset;
    float: unset;
}
.fontWeightMarked{
    font-weight: 400 !important;
}
@keyframes appearMe{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@keyframes moveMeAndLetMeAppear{
    from{
        opacity: 0;
        transform: translateX(0);
    }
    to{
        opacity: 1;
        transform: translateX(-150px);
    }
}
@keyframes moveMe{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-250px);
    }
}
@keyframes moveMeUp{
    from{
        transform: translateY(0);
    }
    to{
        transform: translateY(-30vh);
    }
}
@keyframes genderSettingContainerMoving {
    from{
        position: fixed;
        top: calc(60vh + 75px);
        right: 40px;
        width: 24px;
        height: calc((24px * 4) + 15px);
        box-sizing: border-box;
    }
    to{
    }
}
@keyframes pulseMe{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(2.5);
    }
    100%{
        transform: scale(1);
    }
}
@keyframes blurMeOut{
    from{
        opacity: 1;
        filter: blur(0);
    }
    to{
        opacity: 0;
        filter: blur(15px);
    }
}
@keyframes shakeCan{
    0%{
        transform: rotate(5deg);
    }
    40%{
        transform: rotate(-5deg);
    }
    50%{
        transform: rotate(5deg);
    }
    60%{
        transform: rotate(-5deg);
    }
    70%{
        transform: rotate(5deg);
    }
    80%{
        transform: rotate(-2.5deg);
    }
    90%{
        transform: rotate(2.5deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
@keyframes showMe{
    from{
        display: none;
        opacity: 0;
    }
    to{
        display: block;
        opacity: 1;
    }
}
@keyframes modelContainerAppear{
    from{
        height: 75vh;
    }
    to{
        height: 95vh;
    }
}
@keyframes modelContainerDisappear{
    from{
        height: 95vh;
    }
    to{
        height: 75vh;
    }
}
@keyframes modelContainerAppearMobile{
    from{
        height: 80vh;
    }
    to{
        height: 80vh;
    }
}
@keyframes modelContainerDisappearMobile{
    from{
        height: 80vh;
    }
    to{
        height: 80vh;
    }
}
@keyframes filterAppearMoving{
    from{
        top: 20vh;
    }
    to{
        top: 1vh;
    }
}
@keyframes filterDisappearMoving{
    from{
        top: 1vh;
    }
    to{
        top: 20vh;
    }
}
@keyframes filterDisappearMovingMobile{
    from{
        top: -25vh;
    }
    to{
        top: 16.8vh;
    }
}
@keyframes filterAppearMovingMobile{
    from{
        top: 16.8vh;
    }
    to{
        top: -25vh;
    }
}
@keyframes intownAppearMoving{
    from{
        top: 21vh;
        left: calc(2vw + 35px);
    }
    to{
        top: 1.5vh;
        left: calc(12vw + 35px);
    }
}
@keyframes intownDisappearMoving{
    from{
        top: 1.5vh;
        left: calc(12vw + 35px);
    }
    to{
        top: 21vh;
        left: calc(2vw + 35px);
    }
}

@keyframes intownAppearMovingMobile{
    from{
        top: 3.5vh;
        left: 5vw;
    }
    to{
        top: 6.5vh;
        left: 5vw;
    }
}
@keyframes intownDisappearMovingMobile{
    from{
        top: 1.5vh;
        left: 5vw;
    }
    to{
        top: 21.5vh;
        left: 5vw;
    }
}
.modelContAppear{
    animation: modelContainerAppear;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}
.modelContDisappear{
    animation: modelContainerDisappear;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}
.modelContAppearMobile{
    animation: modelContainerAppearMobile;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}
.modelContDisappearMobile{
    animation: modelContainerDisappearMobile;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}
.filterAppearAnim{
    animation: filterAppearMoving;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}
.filterDisappearAnim{
    animation: filterDisappearMoving;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}
.inTownAppearAnim{
    animation: intownAppearMoving;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}
.inTownDisappearAnim{
    animation: intownDisappearMoving;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}
.loaderContainer{
    width: 100vw;
    min-height: 40vh;
    height: 100%;
    padding-left: 10vw;
    padding-right: 10vw;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: rgba(220,220,220,0.6);
    backdrop-filter: blur(20px);
    z-index: 9999999;
}
.loader-logo{
    width: 5vw;
    animation: pulseMe;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.loaderContainerBlurred{
    animation: blurMeOut;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
/*setting loader*/
.loader {
    text-align: center;
    font-size: 2.5em;
    font-family: 'Tw Cen MT', sans-serif;
    font-weight: 500;
    letter-spacing: 2px;
    color: rgb(0,0,0);
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    margin: 7% 50%;
}
.loader::after {
    width: 100%;
    text-align: center;
    content: 'GIOMONTE';
    position: absolute;
    left: 0;
    top: 0;
    color: rgb(255,255,255);
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    animation: animloader 3s linear infinite;
}
@keyframes animloader {
    0% {
        height: 100%;
    }
    100% {
        height: 0%;
    }
}
.hideMe{
    display: none !important;
}
.genderHideMe{
    display: none !important;
}
.divisionHideMe{
    display: none !important;
}
.inTownHideMe{
    display: none !important;
}
.container{
    width: 100vw;
    height: auto;
    max-height: 100vh;
    min-height: 100vh;
    min-width: 100vw;
    max-width: 100vw;
}
.content{
    width: 100vw;
    height: auto;
    max-height: 100vh;
    min-height: 100vh;
    min-width: 100vw;
    max-width: 100vw;
    z-index: 5;
    position:absolute;
    top: 0;
}
.introVideo{
    min-height: 100vh;
}
img.mainLogo{
    width: 400px;
    position: absolute;
    left: calc(50vw - 200px);
    top: 45vh;
    cursor: pointer;
    opacity: 1;
    z-index: 10;
    filter: invert(100%);
}
p.payOff{
    width: 200px;
    position: absolute;
    left: calc(50vw - 100px);
    top: 53vh;
    cursor: pointer;
    opacity: 1;
    z-index: 10;
    color: rgb(255,255,255);
    font-size: 1em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 200;
}
.payOffAppeared{
    animation: appearMe;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}
.mainLogoAppear{
    animation: appearMe;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
.mainLogoTranslated{
    animation: moveMe;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 1;
    cursor: pointer;
}
.payOffTranslated{
    animation: moveMeUp;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
ul.countryList{
    position: absolute;
    width: calc(50vw - 50px);
    min-width: calc(50vw - 50px);
    max-width: calc(50vw - 50px);
    height: 40vh;
    min-height: 40vh;
    max-height: 40vh;
    top: 30vh;
    list-style: none;
    left: 50vw;
    opacity: 0;
    border-left: 1px solid rgb(255,255,255);
    padding-left: 49px;
    z-index: 1;
}
.countryListAppeared{
    animation: appearMe;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    color: rgb(255,255,255);
}
li.countryListItem{
    font-weight: 800;
    font-size: 8vh;
    line-height: 1em;
    margin-top: 1vh;
    margin-bottom: 1vh;
    text-align: left;
    text-transform: uppercase;
    clear: both;
    margin-left: 150px;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}
.countryListItemAppeared{
    animation: moveMeAndLetMeAppear;
    animation-duration: 0.5s;
    animation-fill-mode: forwards; 
}
.countryListItemAppeared:nth-child(1){
    animation-delay: 0.5s;
}
.countryListItemAppeared:nth-child(2){
    animation-delay: 0.7s;
}
.countryListItemAppeared:nth-child(3){
    animation-delay: 0.9s;
}
.countryListItemAppeared:nth-child(4){
    animation-delay: 1.1s;
}

/*gestione singole country*/
.singleCountryContainer{
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.singleCountryContainerAppeared{
    animation: appearMe;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
    display: block;
}
.backgroundContainer{
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    top: 0;
    left: 0;
    background-position: center bottom !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}
.bgMilano{
    background-image: url('/imgSystem/background_index/milano_bg.jpg');
}
.bgPadova{
    background-image: url('/imgSystem/background_index/padova_bg.jpg');
}
.bgTirana{
    background-image: url('/imgSystem/background_index/tirana_bg.jpg');
}
.bgToronto{
    background-image: url('/imgSystem/background_index/toronto_bg.jpg');
}
p.addressInfo{
    position: absolute;
    bottom: 25px;
    left: calc(5em + 25px);
    font-size: 1.2em;
    font-weight: 300;
}
.locationIcon{
    position: absolute;
    bottom: 25px;
    left: 25px;
    font-size: 5em;
}
img.secondLogo{
    position:absolute;
    top: 50px;
    right: 50px;
    width: 150px;
    mix-blend-mode: difference;
    cursor: pointer;
}
h1.countryTitle{
    position: absolute;
    width: 100vw;
    top: 25vh;
    font-weight: 800;
    font-size: 10em;
    text-align: center;
    text-transform: uppercase;
    color: rgb(255,255,255);
    text-shadow: 0 0 15px rgb(200,200,200);
}
p.visitAgencyButton{
    width: 300px;
    font-size: 1em;
    color: white;
    background: rgb(0,0,0);
    padding: 25px;
    padding-bottom: 5px;
    padding-top: 5px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 200;
    letter-spacing: 2px;
    border-radius: 50px;
    top: 47vh;
    left: calc(50vw - 175px);
    transition: 0.2s;
    cursor: pointer;
}
.visitAgencyButton:hover{
    transition: 0.2s;
    letter-spacing: 5px;
}

.homeSlider{
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    z-index: 0 !important;

}
.singleHomeimgBg{
    background-position: bottom center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}
/*setting models container*/

#modelContainer{
    width: 100vw;
    position: absolute;
    height: 75vh;
    bottom: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    box-shadow: inset 0px 20px 40px rgba(220,220,220,0.6);
    padding-top: 50px;
    padding-bottom: 50px;
    box-sizing: border-box;
    padding-left: 1vw;
    padding-right: 1vw;
    transition: opacity 0.5s ease-in-out;
}

/*setting single model space*/
.singleModelSpace{
    width: calc(98vw / 10);
    max-height: 30vh;
    min-height: 30vh;
    padding: 5px;
    cursor: pointer;
    transition: 0.2s;
    box-sizing: border-box;
    filter: contrast(100%);
    margin-bottom: 5px;
}
.singleModelSpaceResized{
    width: calc(98vw / 5);
    max-height: 50vh;
    min-height: 50vh;
    padding: 5px;
    cursor: pointer;
    transition: 0.2s;
    box-sizing: border-box;
    filter: contrast(100%);
    margin-bottom: 25px;
}
.singleModelSpaceWithoutPic{
    width: calc(98vw / 10);
    max-height: 5vh;
    min-height: 5vh;
    padding: 5px;
    cursor: pointer;
    transition: 0.2s;
    box-sizing: border-box;
    filter: contrast(100%);
}
.singleModelSpaceWithoutPicResized{
    width: calc(98vw / 5);
    max-height: 5vh;
    min-height: 5vh;
    padding: 5px;
    cursor: pointer;
    transition: 0.2s;
    box-sizing: border-box;
    filter: contrast(100%);
}
.singleModelSpace:hover{
    filter: contrast(150%);
    opacity: 0.5;
    transition: 0.2s;
}
/*setting model cover*/
.singleModelCoverContainer{
    width: 100%;
    max-height: 25.5vh;
    min-height: 25.5vh;
    box-sizing: border-box;
    margin-left: 0%;
    margin-right: 0%;
    /*display: none;*/
}
/*setting per contenitore immagine modella/o quando apro la schermata in fullscreen*/
.singleModelCoverContainerResized{
    width: 100%;
    max-height: 45vh;
    min-height: 45vh;
    box-sizing: border-box;
    /*display: none;*/
}
.featuresPreviewContainerAppeared{
    display: block;
}
.featuresPreviewContainerAppeared:hover{
    animation: appearMe;
    animation-duration: 0.7s;
    animation-fill-mode: forwards;
}
/*single model senza immagini*/
.singleModelCoverContainerResizedNoImg{
    width: calc(98vw / 5);
    max-height: 5vh;
    min-height: 5vh;
    padding: 15px;
    cursor: pointer;
    transition: 0.2s;
    box-sizing: border-box;
    filter: contrast(100%);
}
/*gestione apparizione o meno del unchecked models*/
.singleModelCoverContainer:hover > .backgroundContainer{
}
/*gestione delle immagini in prev modalità lista attiva*/
.singleModelCoverContainerPrev{
    width: calc(98vw / 5);
    position: absolute;
    display: block;
    max-height: 45vh;
    min-height: 45vh;
    box-sizing: border-box;
    display: none;
    top: -5vh;
    left: -50%;
}
.singleModelCoverPrev{
    width: 70%;
    max-height: 45vh;
    min-height: 45vh;
    margin-left: 15%;
    margin-right: 15%;
    object-fit: cover;
    object-position: center;
    box-sizing: border-box;
}
/*setting immagine singola modella*/
.singleModelCover{
    width: 100%;
    max-height: 25.5vh;
    min-height: 25.5vh;
    margin-left: 0%;
    margin-right: 0%;
    object-fit: cover;
    object-position: center;
    box-sizing: border-box;
}
/*setting per immagine modella/o quando apro la schermata in fullscreen*/
.singleModelCoverResized{
    max-height: 45vh;
    min-height: 45vh;
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    object-fit: cover;
    object-position: center;
    box-sizing: border-box;
}
/*setting model name*/
h1.modelName{
    height: 4vh;
    margin-top: 1vh;
    margin-bottom: 0;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    text-align: left;
    color: rgb(100,100,100);
    text-transform: uppercase;
    font-weight: 300;
    font-size: 1em;
    line-height: 1em;
    transition: 0.2s;
    display: flex;
    vertical-align: center;
    justify-content: left;
}
.markedName{
    transition: 0.2s;
    color: rgb(26, 192, 252) !important;
}
.favoriteIcon{
    position: absolute;
    bottom: -7px;
    right: 2.5px;
    transform: scale(0.8);
    fill: rgb(255,255,255) !important;
    color: rgb(255,255,255);
    z-index: 99999;
    cursor: pointer;
    transition: 0.2s;
    padding: 10px;
    box-sizing: border-box;
}
.favoriteIcon:hover{
    transition: 0.2s;
    transform: scale(1);
}
.favoriteIconChecked{
    font-variation-settings: 'FILL' 1 !important;
}
.favoriteIconResized{
    bottom: 5px;
    transform: scale(0.7);
}
/*setting model name quando apro la schermata in fullscreen*/
h1.modelNameResized{
    font-size: 1.1em;
}
/*setting class for longer model name*/
  
/*setting filter in-town*/
/*in town filter*/
p.inTownFilter{
    position: absolute;
    top: 21vh;
    left: calc(2vw + 35px);
    width: 80px;
    height: 20px;
    font-size: 0.7em;
    font-weight: 200;
    color: rgb(100,100,100);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: 0.2s;
}
/*setting view wall*/
.disabledWall{
    opacity: 0.2;
    cursor:not-allowed !important;
}
.fullScreenButton{
    font-variation-settings:
    'FILL' 0,
    'wght' 200,
    'GRAD' 0,
    'opsz' 24;
    cursor: pointer;
    transition: 0.2s;
    float: left;
    width: 24px;
    height: 24px;
    margin-bottom: 5px;
    border-radius: 5px;
}
.fullScreenButton:hover{
    transition: 0.2s;
    opacity: 0.5;
}
.viewSettingIcon {
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 24;
  cursor: pointer;
  transition: 0.2s;
  float: left;
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
  border-radius: 5px;
  margin-left: 10px;
}
.viewSettingIcon:hover{
    transition: 0.2s;
    opacity: 0.5;
}
.prePicIcon{
    display: none;
}
.listPicIcon{
    display: block;
}
.flexDisplay{
    display: flex !important;
}
/*setting filter*/
.filterContainer{
    position: absolute;
    top: 20vh;
    right: 25px;
}
/*setting genderFilter Container*/
.genderSettingContainer{
    position: absolute;
    top: 20vh;
    right: 25px;
    width: auto;
    height: 25px;
    box-sizing: border-box;
}
.genderFilterIcon{
    font-variation-settings:
    'FILL' 0,
    'wght' 200,
    'GRAD' 0,
    'opsz' 24;
    cursor: pointer;
    transition: 0.2s;
    float: left;
    width: 24px;
    height: 24px;
    margin-bottom: 5px;
    border-radius: 5px;
    margin-left: 10px;
}
.genderFilterIcon{
    transition: 0.2s;
    opacity: 0.5;
}
.removeGenderFilterButton{
    display: none;
}
.selectedGender{
    background: rgb(30,30,30);
    color: rgb(250,250,250);
    opacity: 0.8;
}
/*delete filter*/
.deletePrivateList{
    background: rgb(90,90,90);
    color: rgb(255,255,255);
    opacity: 1;
}
.animatedDeleteListIcon{
    animation: shakeCan;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.closePrivateListButton{
    position: absolute;
    text-align: center;
    font-size: 0.8em;
    top: 15px;
    left: 15px;
    color: rgb(30,30,30);
    border: 1px solid rgb(30,30,30);
    padding: 10px;
    border-radius: 5px;
    background: rgb(255,255,255);
    cursor: pointer;
    transition: 0.2s;
}
/*gestione del private-model-list*/
#privateListContainer{
    position: fixed;
    width: 25vw;
    height: 100%;
    max-height: 60vh;
    bottom: 50px;
    padding-left: 1vw;
    padding-right: 1vw;
    overflow-y: scroll;
    overflow-x: hidden;
    box-shadow: 0px 20px 40px rgba(220,220,220,0.6);
    padding-top: 50px;
    padding-bottom: 50px;
    box-sizing: border-box;
    right: 7.5vw;
    background: rgb(255,255,255);
    display: none;
}
.privateListTitle{
    width: 80%;
    margin-top: -25px;
    margin-bottom: 25px;
    font-size: 1.2em;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 200;
    margin-right: 10%;
    margin-left: 10%;
    box-sizing: border-box;
    padding: 5px;
}
input.name-list{
    border: none;
    border-bottom: 0.5px solid rgb(90,90,90);
}
input.name-list::placeholder{
    font-size: 0.5em;
    color: rgb(120,120,120);
}
#setting-name-list-container{
    display: none;
}
.privateListOpenPagButton{
    position: absolute;
    text-align: center;
    font-size: 0.8em;
    top: 15px;
    right: 15px;
    color: rgb(30,30,30);
    border: 1px solid rgb(30,30,30);
    padding: 10px;
    border-radius: 5px;
    background: rgb(255,255,255);
    cursor: pointer;
    transition:0.2s;
    display: none;
}
.privateListOpenPagButton:hover{
    transition: 0.2s;
    transform: scale(1.1);
}
.privateListSingleChoice{
    float: right;
    width: 23vw;
    height: 6vw;
    box-sizing: border-box;
    padding: 1vw;
    max-height: 12vw;
    position: relative;
    padding-bottom: calc(0.5vw + 25px);
    margin-bottom: calc(0.5vw + 25px);
    border-bottom: 0.5px solid rgb(30,30,30);
}
.container-img-listed-model{
    width: 10vw;
    margin-left: 1vw;
    margin-right: 1vw;
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
}
img.private-list-model-img{
    width: 5vw;
    height: 5vw;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5vw;
}
h1.private-list-model-name{
    width: 13vw;
    position: absolute;
    top: 1vw;
    right: 1vw;
    color:rgb(100,100,100);
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 0px;
    font-size: 1.2em;
    text-align: right !important;
}
.removeModelButton{
    position: absolute;
    bottom: 1vw;
    right: 1vw;
    background: rgb(230, 136, 136);
    border: 1px solid rgb(230, 136, 136);
    color: rgb(255,255,255);
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 1.5px;
    border: none;
    border-radius: 5px;
    padding: 5px;
    transition: 0.2s;
    cursor: pointer;
}
.removeModelButton:hover{
    transition: 0.2s;
    background: rgb(195, 72, 72);
}
.viewModelButton{
    position: absolute;
    bottom: 1vw;
    right: 5vw;
    border: 1px solid rgb(30,30,30);
    background: rgb(30,30,30);
    color: rgb(255,255,255);
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 1.5px;
    border: none;
    border-radius: 5px;
    padding: 5px;
    transition: 0.2s;
    cursor: pointer;
}
.viewModelButton:hover{
    transition: 0.2s;
    background: rgb(255,255,255);
    color: rgb(30,30,30);
}
.refreshMessage{
    position: fixed;
    bottom: 20px;
    right: 8vw;
    font-size: 0.6em;
    letter-spacing: 2px;
    color: rgb(120,120,120);
    height: 20px;
    padding: 5px;
    cursor: pointer;
    display: none;
}
.refreshMessageIcon{
    font-size: 1.5em;
}
/*gestione dei vecchi cookie conservati*/
#resumedCookieValueContainerId{
    z-index: 9999999;
    position: absolute;
    bottom: 25px;
    left: 25px;
    width: 15vw;
    height: 12vh;
    display: none;
}
.resumedCookieValueContainer{
    position: absolute;
    width: 15vw;
    height: 12vh;
    box-sizing: border-box;
    padding: 20px;
    background: rgba(255,255,255,0.7);
    box-shadow: 0 0 15px rgb(100,100,100);
    backdrop-filter: blur(5px);
    border-radius: 5px;
    top: 0;
    left: 0;
}
.resumedCookieValueText{
    font-size: 0.7em;
    color: rgb(30,30,30);
    text-align: left;
    line-height: 1em;
    letter-spacing: 2px;
}
.leaveResumedValueButton, .deleteResumedValueButton{
    position: absolute;
    padding: 5px;
    padding-top: 2.5px;
    padding-bottom: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 2px;
    font-size: 0.8em;
    border-radius: 5px;
    color: rgb(255,255,255);
}
.leaveResumedValueButton{
    background: rgb(30,30,30);
    bottom: 20px;
    left: 25px;
}
.deleteResumedValueButton{
    bottom: 20px;
    right: 25px;
    background: rgb(173, 83, 83);
}

/*setting contracted searchbar*/
.contractedSearchContainer{
    width: calc(5vh - 10px);
    height: calc(5vh - 10px);
    border-radius: 50px;
    color: rgb(30,30,30);
    cursor: pointer;
    display: none;
}
@keyframes expandContractedSearchBarAnim {
    from{
        width: 24px;
        padding: unset;
    }
    to{
        width: 150px;
        padding: 5px;
        padding-left: 24px;
    }
}
@keyframes expandContractedSearchBarAnimMobile {
    from{
        width: 24px;
        padding: unset;
    }
    to{
        width: 97vw;
        padding: 5px;
        padding-left: 24px;
    }
}
.expandContractedSearchBar{
    animation: expandContractedSearchBarAnim;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}
input.contractedSearchBarClass{
    position: absolute;
    float: left;
    width: 24px;
    height: 24px;
    border-radius: 50px;
    background: rgb(245,245,245);
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
.input.contractedSearchBarClass::placeholder{
    display: none;
}
.searchContractIcon{
    position: relative;
    width: 24px;
    height: 24px;
    font-size: 0.9em;
    display: flex;
    justify-content: center;
    align-items: center;
}
#progressBarContainer{
    position: fixed;
    width: 200px;
    min-height: 50px;
    height: auto;
    padding: 15px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.3);
    backdrop-filter: blur(15px);
    border-radius: 5px;
    box-shadow: 0 0 25px rgb(120,120,120);
    top: calc(50vh - 37.5px);
    left: calc(50vw - 100px);
    z-index: 10000000;
    text-align: center;
    font-weight: 300;
    letter-spacing: 0.5px;
    font-size: 0.8em;
    display: none;
    color: rgb(120,120,120);
}
#progressBar {
    width: 100%;
    height: 20px;
    text-align: center;
}
#progressBar::-webkit-progress-value {
    background-color: rgb(26, 192, 252); /* Colore verde */
    height: 5px;
}
#progressBar::-moz-progress-bar {
    background-color: rgb(26, 192, 252); /* Colore verde */
    height: 5px;
}
#progressBar {
    width: 100%;
    height: 5px;
    -webkit-appearance: none;
    appearance: none;
}
#progressBar::-webkit-progress-bar {
    background-color: transparent;
    border-radius: 5px;
    box-shadow: none;
}
/*gestione pannello nessun risultato search*/
.any-model-available{
    width: 30vw;
    height: 20vh;
    border-radius: 5px;
    position: fixed;
    top: 40vh;
    left: 35vw;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(5px);
    color: rgb(40,40,40);
    align-items: center;
    justify-content: center;
    box-shadow: 0 0px 15px rgb(40,40,40,0.3);
    text-align: center;
    letter-spacing: 3px;
    z-index: 9999;
    display: none; /*andremo a lavorare su questo parametro*/
    opacity: 0;
}
/* gestione query per le varie versioni DESKTOP */
@media (min-width: 1024px) and (max-width: 1279px){
    .genderSettingContainer{
        margin-top: -5px;
    }
    li.divisionItem {
        height: 15px;
        font-size: 0.5em;
        letter-spacing: 0px;
    }
    .clearDivisionFilterButton {
        width: 60px;
        font-size: 0.6em;
    }
    h1.modelName {
        font-size: 0.6em;
    }
    .modelNameResized{
        font-size: 1em !important;
    }
    .favoriteIcon {
        bottom: -10px;
        right: -7px;
        transform: scale(0.5);
    }
    p.inTownFilter {
        font-size: 0.6em;
    }
    .switchButtonIcon {
        transform: scale(0.7) !important;
    }
    .genderSettingContrainer{
        margin-top: -4px !important;
    }
    #privateListContainer {
        width: 25vw;
        padding-left: 0.5vw;
        padding-right: 0.5vw;
        padding-top: 25px;
        padding-bottom: 25px;
    }
    .privateListSingleChoice {
        width: 25vw;
        height: 6vw;
        padding: 0.5vw;
        max-height: 20vw;
    }
    .privateListTitle {
        font-size: 1em;
        padding-top: 10px;
    }
    h1.private-list-model-name {
        font-size: 0.8em;
    }
    .viewModelButton {
        font-size: 0.4em;
        letter-spacing: 0;
    }
    .removeModelButton {
        font-size: 0.5em;
        letter-spacing: 0;
    }
    .resumedCookieValueText {
        font-size: 0.45em;
        letter-spacing: 1px;
    }
    .leaveResumedValueButton, .deleteResumedValueButton {
        padding: 5px;
        padding-top: 1.5px;
        padding-bottom: 1.5px;
        letter-spacing: 1px;
        font-size: 0.45em;
    }
    .resumedCookieValueContainer {
        padding: 12.5px;
    }
    .leaveResumedValueButton {
        bottom: 10px;
    }
    .deleteResumedValueButton{
        bottom: 10px;
    }
}
@media (min-width: 1280px) and (max-width: 1365px){
    li.divisionItem {
        height: 15px;
        font-size: 0.5em;
        letter-spacing: 0px;
    }
    .clearDivisionFilterButton {
        width: 60px;
        font-size: 0.6em;
    }
    h1.modelName {
        font-size: 0.8em;
    }
    .singleModelSpace{
        margin-bottom: 10px;
    }
    h1.modelNameResized {
        font-size: 1.1em;
    }      
    .favoriteIcon {
        bottom: -5px;
        right: 0px;
    }
    #privateListContainer {
        width: 25vw;
        padding-left: 0.5vw;
        padding-right: 0.5vw;
        padding-top: 25px;
        padding-bottom: 25px;
    }
    .privateListSingleChoice {
        width: 25vw;
        height: 6vw;
        padding: 0.5vw;
        max-height: 20vw;
    }
    .privateListTitle {
        font-size: 1em;
        padding-top: 10px;
    }
    .privateListOpenPagButton {
        font-size: 0.6em;
        top: 7px;
        right: 7px;
        padding: 5px;
    }
    h1.private-list-model-name {
        font-size: 0.8em;
    }
    .removeModelButton {
        font-size: 0.5em;
        letter-spacing: 0;
    }
    .resumedCookieValueText {
        font-size: 0.45em;
        letter-spacing: 1px;
    }
    .leaveResumedValueButton, .deleteResumedValueButton {
        padding: 5px;
        padding-top: 1.5px;
        padding-bottom: 1.5px;
        letter-spacing: 1px;
        font-size: 0.45em;
    }
    .resumedCookieValueContainer {
        padding: 12.5px;
    }
    .leaveResumedValueButton {
        bottom: 10px;
    }
    .deleteResumedValueButton{
        bottom: 10px;
    }
}
@media (min-width: 1366px) and (max-width: 1439px){
    li.divisionItem {
        height: 15px;
        font-size: 0.5em;
        letter-spacing: 0px;
    }
    .clearDivisionFilterButton {
        width: 60px;
        font-size: 0.6em;
    }
    h1.modelName {
        font-size: 0.8em;
    }
    h1.modelNameResized {
        font-size: 1.1em;
    }      
    .favoriteIcon {
        bottom: -5px;
        right: 0px;
    }
    #privateListContainer {
        width: 25vw;
        padding-left: 0.5vw;
        padding-right: 0.5vw;
        padding-top: 25px;
        padding-bottom: 25px;
    }
    .privateListSingleChoice {
        width: 25vw;
        height: 6vw;
        padding: 0.5vw;
        max-height: 20vw;
    }
    .privateListTitle {
        font-size: 1em;
        padding-top: 10px;
    }
    .privateListOpenPagButton {
        font-size: 0.6em;
        top: 7px;
        right: 7px;
        padding: 5px;
    }
    h1.private-list-model-name {
        font-size: 0.8em;
    }
    .removeModelButton {
        font-size: 0.5em;
        letter-spacing: 0;
    }
    .resumedCookieValueText {
        font-size: 0.45em;
        letter-spacing: 1px;
    }
    .leaveResumedValueButton, .deleteResumedValueButton {
        padding: 5px;
        padding-top: 1.5px;
        padding-bottom: 1.5px;
        letter-spacing: 1px;
        font-size: 0.45em;
    }
    .resumedCookieValueContainer {
        padding: 12.5px;
    }
    .leaveResumedValueButton {
        bottom: 10px;
    }
    .deleteResumedValueButton{
        bottom: 10px;
    }
}
@media (min-width: 1440px) and (max-width: 1679px){
    li.divisionItem {
        height: 20px;
        font-size: 0.6em;
        letter-spacing: 0px;
    }
    .clearDivisionFilterButton {
        width: 60px;
        font-size: 0.6em;
    }
    h1.modelName {
        font-size: 0.8em;
    }
    h1.modelNameResized {
        font-size: 1.1em;
    }
    .favoriteIcon {
        bottom: -10px;
        right: 0px;
    }
    #privateListContainer {
        width: 25vw;
        padding-left: 0.5vw;
        padding-right: 0.5vw;
        padding-top: 25px;
        padding-bottom: 25px;
    }
    .privateListSingleChoice {
        width: 25vw;
        height: 6vw;
        padding: 0.5vw;
        max-height: 20vw;
    }
    .privateListTitle {
        font-size: 1em;
        padding-top: 10px;
    }
    h1.private-list-model-name {
        font-size: 0.8em;
    }
    .viewModelButton {
        font-size: 0.4em;
        letter-spacing: 0;
    }
    .removeModelButton {
        font-size: 0.5em;
        letter-spacing: 0;
    }
    .resumedCookieValueText {
        font-size: 0.45em;
        letter-spacing: 1px;
    }
    .leaveResumedValueButton, .deleteResumedValueButton {
        padding: 5px;
        padding-top: 1.5px;
        padding-bottom: 1.5px;
        letter-spacing: 1px;
        font-size: 0.45em;
    }
    .resumedCookieValueContainer {
        padding: 12.5px;
    }
    .leaveResumedValueButton {
        bottom: 10px;
    }
    .deleteResumedValueButton{
        bottom: 10px;
    }
}
@media (min-width: 1680px) and (max-width: 1919px){
    li.divisionItem {
        height: 20px;
        font-size: 0.6em;
        letter-spacing: 0px;
    }
    .clearDivisionFilterButton {
        width: 60px;
        font-size: 0.6em;
    }
    h1.modelName {
        font-size: 0.9em;
    }
    h1.modelNameResized {
        font-size: 1.3em;
    }
    .favoriteIcon {
        bottom: -10px;
        right: 0px;
    }
    #privateListContainer {
        width: 25vw;
        padding-left: 0.5vw;
        padding-right: 0.5vw;
        padding-top: 25px;
        padding-bottom: 25px;
    }
    .privateListSingleChoice {
        width: 25vw;
        height: 6vw;
        padding: 0.5vw;
        max-height: 20vw;
    }
    .privateListTitle {
        font-size: 1em;
        padding-top: 10px;
    }
    h1.private-list-model-name {
        font-size: 0.8em;
    }
    .viewModelButton {
        font-size: 0.4em;
        letter-spacing: 0;
    }
    .removeModelButton {
        font-size: 0.5em;
        letter-spacing: 0;
    }
    .resumedCookieValueText {
        font-size: 0.45em;
        letter-spacing: 1px;
    }
    .leaveResumedValueButton, .deleteResumedValueButton {
        padding: 5px;
        padding-top: 1.5px;
        padding-bottom: 1.5px;
        letter-spacing: 1px;
        font-size: 0.45em;
    }
    .resumedCookieValueContainer {
        padding: 12.5px;
    }
    .leaveResumedValueButton {
        bottom: 10px;
    }
    .deleteResumedValueButton{
        bottom: 10px;
    }
}
/**********/
/* mobile */
/**********/
@media (min-width: 279px) and (max-width: 823px) {
    #modelContainer {
        padding-top: 25px;
        padding-bottom: 30vh; /*25px*/
    }
    .singleModelSpace {
        width: calc(98vw / 3);
        max-height: 30vh;
        min-height: 30vh;
        padding: 5px;
    }
    .singleModelCover, .singleModelCoverContainerResized{
        width: 100%;
        max-height: 25vh;
        min-height: 25vh;
        box-sizing: border-box;
        /*display: none;*/
    }
    .favoriteIcon {
        bottom: -7px;
        right: -5px;
        transform: scale(0.9);
    }
    h1.modelName {
        font-size: 0.8em;
    }
    /*pulsanti feature*/
    .fullScreenButton, .viewSettingIcon {
        display: none !important;
    }
    .openPrivateListBtn, .deletePrivateList{
        position: fixed;
        bottom: 2.5vh;
        left: 2.5vh;
        transform: scale(1.2);
        padding: 5px;
        border-radius: 50px;
        background: rgb(255,255,255);
        z-index: 9999;
        opacity: 1;
        margin: 0;
    }
    .deletePrivateList{
        bottom: 10vh;
        background: rgb(90,90,90);
    }
    .inTownAppearAnim{
        animation: intownAppearMovingMobile;
        animation-duration: 0.2s;
        animation-fill-mode: forwards;
        z-index: 9999;
    }
    .inTownDisappearAnim{
        animation: intownDisappearMovingMobile;
        animation-duration: 0.2s;
        animation-fill-mode: forwards;
        z-index: 999999999;
    }
    .genderSettingContainer{
        top: 16.8vh;
    }
    .filterDisappearAnimMobile{
        animation: filterDisappearMovingMobile;
        animation-duration: 0.2s;
        animation-fill-mode: forwards;
    }
    .filterAppearAnimMobile{
        animation: filterAppearMovingMobile;
        animation-duration: 0.2s;
        animation-fill-mode: forwards;
    }
    .loader-logo{
        width: 25vw;
        animation: pulseMe;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }
    .expandContractedSearchBarMobile{
        animation: expandContractedSearchBarAnimMobile;
        animation-duration: 0.2s;
        animation-fill-mode: forwards;
    }
    input.contractedSearchBarClass{
        position: absolute;
        float: left;
        width: 24px;
        height: 24px;
        border-radius: 50px;
        background: rgb(245,245,245);
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        right: -19vw;
    }
    
    /*gestione setting nome lista mobile*/
    #setting-name-list-container{
        display: block;
        width: 80vw;
        height: 80vw;
        top: calc(50vh - 40vw);
        left: 10vw;
        position: fixed;
        box-sizing: border-box;
        padding: 20px;
        background: rgba(255,255,255,0.85);
        backdrop-filter: blur(5px);
        border-radius: 20px;
        box-shadow: 0 0 15px rgb(100,100,100);
        z-index: 99999999;
        align-items: inherit;
        display: none;
    }
    .closing-setting-name-list-container{
        position: absolute;
        top: 0;
        right: 0;
        color: rgb(0,0,0);
        padding: 10px;
        font-size: 1.5em;
        text-align: right;
    }
    p.setting-name-list-text{
        width: 100%;
        text-transform: uppercase;
        font-size: 1em;
        color: rgb(100,100,100);
        margin-top: 15px;
        margin-bottom: 15px;
    }
    input.name-list{
        width: 100%;
        text-transform: uppercase;
        font-size: 1em;
        color: rgb(0,0,0);
        margin: 0;
    }
    input.name-list::placeholder{
        font-size: 1em;
    }
    p.go-to-private-list-button{
        text-align: center;
        color: rgb(255,255,255);
        background: rgb(26, 192, 252);
        border-radius: 5px;
        display: grid;
        align-items: center;
        justify-items: center;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 2px;
    }
    /*gestione pannello assenza news (anno e country incrociati)*/
    .any-model-available{
        width: 80vw;
        height: 20vh;
        border-radius: 5px;
        position: fixed;
        top: 40vh;
        left: 10vw;
        background: rgba(255,255,255,0.7);
        backdrop-filter: blur(5px);
        color: rgb(40,40,40);
        align-items: center;
        justify-content: center;
        box-shadow: 0 0px 15px rgb(40,40,40,0.3);
        text-align: center;
        letter-spacing: 3px;
        z-index: 9999;
        display: none; /*andremo a lavorare su questo parametro*/
        opacity: 0;
    }
}