﻿/** INDEX CAMERE **/
#page_indexcamere .camere-index{margin-top: 0px;margin-bottom: 10px;padding-right: 0;padding-left: 0;}
#page_indexcamere .gruppo-camere{margin-top: 10px;margin-bottom: 10px;margin-left: 15px !important;margin-right: 15px !important;width: calc(100% - 30px);}
#page_indexcamere .gruppo-camere .nome-gruppo{text-align: left; font-size: 2.2em; text-transform: uppercase; color: #008bd2;}

#page_indexcamere .gruppo-camere .contenuto-camera{margin: 10px 0}
#page_indexcamere .gruppo-camere .contenuto-camera .foto-background{position:relative; min-height: 600px; height: auto; padding:0; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; overflow: hidden;}
#page_indexcamere .gruppo-camere .contenuto-camera div.mask-anteprimacamera{position: absolute;top: 0;left: 0;right: 0;bottom: 0;transition: all 0.5s ease;margin: 30px;backdrop-filter: contrast(100%);border: 2px solid #e9e3d7;background: #3c3c3c78;}
#page_indexcamere .gruppo-camere .contenuto-camera span.labelhoverimg {color: #fff;position: absolute;left: 50%;font-size: 3em;padding: 0;top: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);font-weight: 200;font-size: 1.6em;text-transform: uppercase;letter-spacing: 0.1em;width: 100%;text-align: center;display: none;}
#page_indexcamere .gruppo-camere .contenuto-camera div.mask-anteprimacamera:hover {opacity: 1;}
#page_indexcamere .gruppo-camere .contenuto-camera .interno-foto h4{
    position: absolute;
    width: 100%;
    text-align: center;
    color: #222229;
    top: 33%;
    text-transform: uppercase;
    font-size: 2em;
    /* text-shadow: 1px 1px 3px #333; */
    letter-spacing: 0.1em;
    font-weight: 300;
    padding: 40px;
    color: #fff;
}
#page_indexcamere .gruppo-camere .contenuto-camera .interno-foto h4 span {
    font-family: 'Mrs Saint Delafield';
    text-transform: capitalize;
    font-weight: 100;
    letter-spacing: 0;
    font-size: 1.6em;
    line-height: 1.2em;
}

#page_indexcamere .gruppo-camere .contenuto-camera .interno-foto .bottone_scopri{
    background: #ccae62;
    color: #ffffff;
    width: 300px;
    padding: 15px;
    position: absolute;
    /* bottom: 0; */
    font-weight: 600;
    z-index: 1;
    font-size: 1em;
    text-transform: uppercase;
    text-align: center;
    margin-left: -150px;
    left: 50%;
    margin-top: 0;
    top: 58%;
    letter-spacing: 1px;
    border-radius: 0;
    letter-spacing: 0.1em;
}

.contenuto-camera h4 b {
    font-size: 0.7em;
    font-weight: 400;
    text-transform: uppercase;
}

#page_indexcamere .gruppo-camere .contenuto-camera .interno-foto .bottone_scopri:hover{
    background: #cc8e35;
    /* color: #686161; */
    /* border: 4px solid #cda64e; */
    color: #ffffff;
}

.bottone_scopri {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    z-index: 1;
    width: 280px;
    left: 50%;
    margin-left: -140px;
    margin-top: 10px;
    font-size: 16px;
}

#page_indexcamere .gruppo-camere .contenuto-camera .bottone_scopri.sovrapponi{padding-top: 10px;padding-bottom: 10px;border-bottom: 2px solid #fff;}

#page_indexcamere .gruppo-camere .contenuto-camera .bottone_scopri.sovrapponi a{color: #3b3b3b;text-transform: uppercase;letter-spacing: 0.1em;}

#page_indexcamere .gruppo-camere .contenuto-camera .bottone_scopri.sovrapponi:hover{background: #535353;}
#page_indexcamere .gruppo-camere .contenuto-camera .bottone_scopri.sovrapponi:hover > a{color: #fff;}

#page_indexcamere .gruppo-camere .contenuto-camera h4.sovrapponi {position: relative;text-align: center;color: #505050;text-transform: uppercase;font-size: 2em;font-weight: 300;margin-top: 20px;letter-spacing: 0.3em;margin-bottom: 15px;}

#page_indexcamere .gruppo-camere .contenuto-camera .descrizione-camera{height: auto;overflow: hidden;padding: 10px;text-align: justify;position: absolute;top: 40%;color: #fff;}

/** CAROUSEL CAMERE **/
#carousel-camere{margin: 0px 0;}
#carousel-camere .conten_camere{padding: 1px;/* background-color: #f2f2f2; */min-height: 150px;}
#carousel-camere .conten_camere .conten_foto{padding: 0; margin: 0}
#carousel-camere .conten_camere span.labelhoverimg{color: #fff;position: absolute;left: 50%;font-size: 1.2em;padding: 10px;top: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
#carousel-camere .conten_camere .conten_testo{font-size: 1em;}
#carousel-camere .conten_camere span.titolocamera {text-align: center; float: left; display: block; width: 100%; font-size: 1.5em;padding: 10px 0;text-transform: uppercase;}
#carousel-camere .conten_camere .testosovrapposto span.titolocamera {text-align: center;float: none;position: absolute;top: 33%;min-height: 60px;display: block;width: auto;left: 0;right: 0;font-weight: 300;font-size: 6em;text-transform: none;letter-spacing: 0em;font-family: "Italiana", sans-serif;font-family: 'Mrs Saint Delafield';}
#carousel-camere .conten_camere span.datablog {display: block; width: 100%; padding-left: 0; padding-right: 0; margin-top: 5px; color: #9e9e9e;}
#carousel-camere .conten_camere .testosovrapposto{position: absolute;top: 0;left:0px;right: 0px;padding: 10px;height: 100%;color: #fff;text-align: center;background-color: rgba(0, 0, 0, 0.06);}
#carousel-camere .conten_camere .bottonecamera a {color: #fff;background: #ff5252;padding: 5px 10px;text-align: center;margin-top: 0;}
#carousel-camere .conten_camere .bottonecamera a:hover{background-color: #ff5252;}
#carousel-camere .conten_camere .testosovrapposto .bottonecamera{
    color: #ffffff;
    background: rgba(132, 132, 132, 0);
    padding: 10px;
    text-align: center;
    position: absolute;
    bottom: 0;
    left:0;
    right: 0;
    font-size: 1.3em;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.2em;
    padding-top: 100px;
    padding-bottom: 20px;
     /* Safari prior 6.1 */
    transition: all 0.5s ease;
    background: rgba(255,255,255,0);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.42) 43%, rgba(0,0,0,0.75) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(43%, rgba(0,0,0,0.42)), color-stop(100%, rgba(0,0,0,0.75)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.42) 43%, rgba(0,0,0,0.75) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.42) 43%, rgba(0,0,0,0.75) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.42) 43%, rgba(0,0,0,0.75) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(0,0,0,0.42) 43%, rgba(0,0,0,0.75) 100%);
     /* Safari prior 6.1 */
}
#carousel-camere .conten_camere .testosovrapposto .bottonecamera:hover{letter-spacing: 0.5em; /* Safari prior 6.1 */transition: all 0.5s ease;color: #d09f31;}
#carousel-camere .conten_camere div.mask-anteprimacamera{position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 0;background-color: rgba(0,0,0,0.5);transition: all 0.5s ease;}
#carousel-camere .conten_camere span.labelhoverimg {color: #fff;position: absolute;left: 50%;font-size: 1.2em;padding: 10px;top: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
#carousel-camere .conten_camere div.mask-anteprimacamera:hover {opacity: 1;}
#carousel-camere .conten_camere .conten_testo .titolocamera{font-size: 2em;text-align: left;padding: 10px;padding-left: 5%;}
#carousel-camere .conten_camere .conten_testo .testocamera{text-align: left; text-align: center; padding: 10px}
#carousel-camere .conten_camere .conten_testo .bottonecamera{font-size: 1em;margin-top: 10px;}
#carousel-camere .conten_camere .conten_testo .bottonecamera a:link{text-decoration: none}
#carousel-camere .conten_camere .fianco.conten_testo .titolocamera{font-size: 1.3em; text-align: center; padding: 10px}
#carousel-camere .conten_camere .fianco.conten_testo .testocamera{text-align: left; text-align: center; padding: 10px}
#carousel-camere .conten_camere .fianco.conten_testo .bottonecamera{font-size: 1.3em; margin-top: 10px}
#carousel-camere .conten_camere .fianco.conten_testo .bottonecamera a:link{text-decoration: none}

#camereindex-home{margin-top: 0px}


/** CAROUSEL CAMERE **/
.carousel-camere{/* margin: 10px 0; */}
.carousel-camere .conten_camere{/* padding: 10px; *//* background-color: #ffffff; */min-height: 150px;}
.carousel-camere .conten_camere .conten_foto{padding: 0;margin: 0;border-radius: 5px;position: relative;overflow: hidden;}
.conten_foto img {
    transition: transform 0.5s ease-in-out; /* Transizione morbida per l'effetto di zoom */
    width: 100%; /* Assicura che l'immagine occupi l'intero contenitore */
    height: auto; /* Mantiene le proporzioni dell'immagine */
    border-radius: 5px; /* Aggiungi il border-radius all'immagine per mantenerlo durante lo zoom */
    
}

.conten_foto:hover img {
    transform: scale(1.05); /* Aumenta la dimensione dell'immagine al passaggio del mouse */
}
.carousel-camere .conten_camere span.labelhoverimg{color: #fff;position: absolute;left: 50%;font-size: 1.2em;padding: 10px;top: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
.carousel-camere .conten_camere .conten_testo{font-size: 1em;/* background: #ffffff; */height: 100%;}
.carousel-camere .conten_camere span.titolocamera {text-align: center; float: left; display: block; width: 100%; font-size: 1.5em;padding: 10px 0;text-transform: uppercase;}
.carousel-camere .conten_camere .testosovrapposto span.titolocamera {text-align: center;float: none;position: absolute;top: 40%;min-height: 60px;display: block;width: auto;left: 0;right: 0; font-weight: 500;font-size: 1.8em;text-transform: uppercase;}
.carousel-camere .conten_camere span.datablog {display: block; width: 100%; padding-left: 0; padding-right: 0; margin-top: 5px; color: #9e9e9e;}
.carousel-camere .conten_camere .testosovrapposto{position: absolute; top: 0; left:0px; right: 0px; padding: 10px; height: 100%; color: #fff;text-align: center; background-color: rgba(0,0,0,0.3)}
.carousel-camere .conten_camere .bottonecamera a {color: #FFF;padding: 5px 20px;text-align: center;margin-top: 0;width: auto;text-transform: uppercase;border-radius: 4px;font-size: 16px;font-weight: 600;/* cursor: url(https://www.iltuonerd.it/produzione/trianon-group/data/cursor-2.svg), auto; */cursor: url('https://www.iltuonerd.it/produzione/tritone-popolo/data/cursor2.svg'), auto; /* Cursor personalizzato per hover */font-family: "Lexend Exa", serif;}
.carousel-camere .conten_camere .bottonecamera a:hover{/* color: #fff; */}





#carousel-camere-42 .conten_camere .testosovrapposto span.titolocamera {
    text-align: center;
    float: none;
    position: absolute;
    top: 65%;
    min-height: 60px;
    display: block;
    width: auto;
    left: 0;
    right: 0;
    font-weight: 200;
    font-size: 3.5em;
    text-transform: none;
    letter-spacing: 0.1em;
    font-family: "Lexend Exa", serif;
    text-transform: uppercase;
    font-family: playfair display, serif;
}


#carousel-camere-42 .conten_camere .testosovrapposto {
    position: absolute;
    top: 0;
    left: 0px;
    right: 0px;
    padding: 0;
    height: 100%;
    color: #fff;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.06);
}

#carousel-camere-42 .conten_camere .testosovrapposto .bottonecamera {
    color: #ffffff;
    background: rgba(132, 132, 132, 0);
    padding: 10px;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 1.3em;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.2em;
    padding-top: 100px;
    padding-bottom: 20px;
    transition: all 0.5s ease;
    background: rgba(255,255,255,0);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.42) 43%, rgba(0,0,0,0.75) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(43%, rgba(0,0,0,0.42)), color-stop(100%, rgba(0,0,0,0.75)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.42) 43%, rgba(0,0,0,0.75) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.42) 43%, rgba(0,0,0,0.75) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.42) 43%, rgba(0,0,0,0.75) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(0,0,0,0.42) 43%, rgba(0,0,0,0.75) 100%);
}

#carousel-camere-42 .conten_camere .testosovrapposto .bottonecamera:hover {
    letter-spacing: 0.5em;
    transition: all 0.5s ease;
    color: #d09f31;
}

#carousel-camere-42 .conten_camere .conten_foto {
    padding: 0;
    margin: 0;
}

#carousel-camere-42 .conten_camere {
    padding: 1px;
}

#page_indexcamere .gruppo-camere .contenuto-camera:last-child {
    padding-right: 0;
}


#page_indexcamere .gruppo-camere .row.rigarow:nth-of-type(3) .contenuto-camera{
    width:100%;
}

.width33{width: 33.33%!important}
.width50{width: 50%!important}

.widthmeta{width: auto;}

#page_indexcamere .gruppo-camere {
    display: flex;
    flex-direction: column-reverse;
}

/************** RESPONSIVE ******************/
@media (max-width: 1800px) {
    #page_indexcamere .gruppo-camere .contenuto-camera .interno-foto h4 {font-size: 35px;}
}
@media (max-width: 1600px){
    #page_indexcamere .gruppo-camere .contenuto-camera .interno-foto h4 {font-size: 32px;letter-spacing: 0.08em;top: 25%;}
    #carousel-camere .conten_camere .testosovrapposto span.titolocamera {font-size: 5.5em;letter-spacing: 0.08em;}
    #carousel-camere .conten_camere .testosovrapposto .bottonecamera {font-size: 1.2em; letter-spacing: 0.18em;}
    #page_indexcamere .gruppo-camere .contenuto-camera h4.sovrapponi {font-size: 2em;letter-spacing: 0.2em; }
    #page_indexcamere .gruppo-camere .contenuto-camera .foto-background {min-height: 420px;}
    .descrizione-camera p {padding-left: 10%; padding-right: 10%;}
    #page_indexcamere .gruppo-camere .contenuto-camera .interno-foto .bottone_scopri {font-size: .8em; width: 260px; margin-left: -130px;}
    #page_indexcamere .camere-index, #page_indexcamere .gruppo-camere .contenuto-camera {margin-bottom: 0;}
    
}
@media (max-width: 1400px){
    #carousel-camere .conten_camere .testosovrapposto span.titolocamera {font-size: 4.5em;letter-spacing: 0.07em;}
    .bottonecamera {font-size: 1.1em; letter-spacing: 0.18em;}
    #carousel-camere .conten_camere .testosovrapposto .bottonecamera:hover {letter-spacing: 0.3em;}
    #page_indexcamere .gruppo-camere .contenuto-camera h4.sovrapponi {font-size: 2em;}
    #page_indexcamere .gruppo-camere .contenuto-camera .interno-foto .bottone_scopri {width: 250px; margin-left: -125px;}
    #page_indexcamere .gruppo-camere .contenuto-camera div.mask-anteprimacamera {margin: 15px;}
    #page_indexcamere .gruppo-camere .contenuto-camera .interno-foto h4 {letter-spacing: 0.05em;}
    #page_indexcamere .gruppo-camere .contenuto-camera .interno-foto h4 {font-size: 30px;}
}
@media (max-width: 1200px){
    #page_indexcamere .gruppo-camere .contenuto-camera .interno-foto h4 {font-size: 27px;letter-spacing: 0.05em;}
    #carousel-camere .conten_camere .testosovrapposto span.titolocamera {font-size: 4em; letter-spacing: 0.06em;}
    #carousel-camere .conten_camere .testosovrapposto .bottonecamera {font-size: 1.1em; letter-spacing: 0.13em;}
    #page_indexcamere .gruppo-camere .contenuto-camera h4.sovrapponi {font-size: 1.8em; letter-spacing: 0.15em;}
    #page_indexcamere .gruppo-camere .contenuto-camera .bottone_scopri.sovrapponi a {font-size: .9em;}
    #page_indexcamere .gruppo-camere .contenuto-camera .foto-background {min-height: 325px;}
    .descrizione-camera p {padding-left: 5%; padding-right: 5%;}
    #page_indexcamere .gruppo-camere .contenuto-camera .descrizione-camera {top: 38%;}
    #page_indexcamere .gruppo-camere .contenuto-camera .interno-foto .bottone_scopri {font-size: .8em; letter-spacing: 2px;}
    #page_indexcamere .gruppo-camere .contenuto-camera div.mask-anteprimacamera {margin: 21px;}
    #page_indexcamere .gruppo-camere .contenuto-camera {
        width: 100%;
    }
    #page_indexcamere .gruppo-camere .contenuto-camera .interno-foto h4 {top: 19%;}
    #page_indexcamere .gruppo-camere .contenuto-camera .interno-foto .bottone_scopri {top: 55%;}
    #page_indexcamere .gruppo-camere .contenuto-camera {padding-right: 0;}
}

@media (max-width: 1024px){
    #page_indexcamere .gruppo-camere .contenuto-camera h4.sovrapponi {font-size: 2.2em; letter-spacing: 0.1em;}
}

@media (max-width: 1008px) {
    #carousel-camere .conten_camere .testosovrapposto span.titolocamera {font-size: 7em;}
    #page_indexcamere .gruppo-camere .contenuto-camera h4.sovrapponi {font-size: 2.6em;}
    #page_indexcamere .gruppo-camere .contenuto-camera {width: 100%; padding: 0;}
    #page_indexcamere .gruppo-camere .contenuto-camera .interno-foto h4 {font-size: 22px;}
    .descrizione-camera p {text-align: center;}
    .width33 {width: 100% !important;}
    #page_indexcamere .camere-index {padding-right: 0;}
    #page_indexcamere .gruppo-camere .contenuto-camera:last-child {
        padding-right: 0;
    }
    .col-xs-12.col-md-5.conten_foto {
        padding-left: 0;
        padding-right: 0;
    }
    #page_indexcamere .camere-index {margin-top: 15px;}
    #carousel-camere .conten_camere .conten_testo .titolocamera {
        padding-left: 10px;
    }
}

@media (max-width: 767px){
	#page_indexcamere .gruppo-camere .nome-gruppo {font-size: 2em;}
	#page_indexcamere .camere-index {padding-left: 0;padding-right: 0;/* margin-top: 0; */}
    #page_indexcamere .gruppo-camere .contenuto-camera .interno-foto .bottone_scopri {font-size: 1.05em; letter-spacing: 1px;}
    #carousel-camere .conten_camere .testosovrapposto span.titolocamera {font-size: 2.4em;}
    #carousel-camere .conten_camere .testosovrapposto .bottonecamera {background: none;}
    #carousel-camere .conten_camere .testosovrapposto span.titolocamera {font-size: 4.8em;}
    #page_indexcamere .gruppo-camere .contenuto-camera h4.sovrapponi {font-size: 2.2em;}
    #page_indexcamere .gruppo-camere .contenuto-camera .interno-foto .bottone_scopri {
        width: 200px;
        margin-left: -100px;
        padding: 15px;
    }
    #page_indexcamere .gruppo-camere {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
    }
    #camereindex-home {
        margin-top: -15px;
    }
}

@media(max-width: 420px){
    #page_indexcamere .gruppo-camere .contenuto-camera .interno-foto .bottone_scopri {
        top: 55%;
    }
}

@media (max-width: 375px){
    #page_indexcamere .gruppo-camere .contenuto-camera .interno-foto h4 {font-size: 1.6em;}
}

@media (max-width: 320px){
	#page_indexcamere .gruppo-camere .contenuto-camera .interno-foto .bottone_scopri {font-size: 0.95em;}
	#page_indexcamere .gruppo-camere {padding-left: 10px; padding-right: 10px;}
    #carousel-camere .conten_camere .testosovrapposto span.titolocamera {font-size: 3.8em;top: 30%;}
    #page_indexcamere .gruppo-camere .contenuto-camera div.mask-anteprimacamera {margin: 10px;}
}