/* page-espositori.php */

/* =========================================================

RESET / BASE

========================================================= */

.th-expo-page {

width: 100%;

margin: 0;

padding: 0;

font-family: inherit;

color: #07516a;

overflow: hidden;

}

.th-expo-page * {

box-sizing: border-box;

}

.th-expo-page .th-container {

width: 100%;

max-width: 1180px;

margin: 0 auto;

padding-left: 20px;

padding-right: 20px;

}

/* =========================================================

HERO

========================================================= */

.th-expo-hero {

position: relative;

width: 100%;

min-height: 560px;

display: flex;

align-items: center;

background-image:

linear-gradient(

90deg,

rgba(4,67,86,.98) 0%,

rgba(4,67,86,.92) 35%,

rgba(4,67,86,.38) 67%,

rgba(4,67,86,.05) 100%

),

url("https://www.tuttohotel.info/wp-content/uploads/2026/07/banner\_sito\_th277-2048x819.jpg.webp");

background-size: cover;

background-position: center center;

overflow: hidden;

}

.th-expo-hero:after {

content: "";

position: absolute;

width: 600px;

height: 600px;

right: -280px;

top: -280px;

border: 1px solid rgba(255,255,255,.10);

border-radius: 50%;

}

.th-expo-hero-inner {

position: relative;

z-index: 2;

width: 100%;

max-width: 1180px;

margin: 0 auto;

padding: 90px 40px;

}

.th-expo-hero-content {

width: 52%;

max-width: 590px;

}

.th-expo-eyebrow {

display: block;

margin-bottom: 16px;

color: #18b7d9;

font-size: 10px;

line-height: 1;

font-weight: 800;

letter-spacing: 2.3px;

text-transform: uppercase;

}

.th-expo-hero h1 {

margin: 0 0 22px;

color: #fff;

font-size: clamp(48px, 5.2vw, 72px);

line-height: .98;

font-weight: 800;

letter-spacing: -2.5px;

}

.th-expo-hero h1 span {

color: #18b7d9;

}

.th-expo-hero p {

max-width: 510px;

margin: 0 0 30px;

color: rgba(255,255,255,.84);

font-size: 15px;

line-height: 1.7;

}

.th-expo-hero-btn {

display: inline-flex;

align-items: center;

gap: 18px;

min-height: 52px;

padding: 0 24px;

background: #18b7d9;

color: #fff !important;

text-decoration: none !important;

font-size: 10px;

font-weight: 800;

letter-spacing: 1px;

text-transform: uppercase;

transition: .25s ease;

}

.th-expo-hero-btn:hover {

background: #fff;

color: #07516a !important;

transform: translateY(-2px);

}

/* =========================================================

INTRO

========================================================= */

.th-expo-intro {

width: 100%;

padding: 90px 0;

background: #fff;

}

.th-expo-intro-grid {

display: grid;

grid-template-columns: 35% 65%;

align-items: center;

gap: 55px;

}

.th-expo-intro-title .th-expo-eyebrow {

margin-bottom: 12px;

}

.th-expo-intro-title h2 {

margin: 0;

color: #07516a;

font-size: 40px;

line-height: 1.05;

font-weight: 800;

letter-spacing: -1.2px;

}

.th-expo-intro-title h2 span {

color: #18b7d9;

}

.th-expo-intro-text p {

margin: 0 0 17px;

color: #60747c;

font-size: 14px;

line-height: 1.8;

}

.th-expo-intro-text p:last-child {

margin-bottom: 0;

}

/* =========================================================

PUBBLICO

========================================================= */

.th-expo-audience {

width: 100%;

padding: 90px 0;

background: #f2f6f7;

}

.th-expo-section-head {

max-width: 760px;

margin: 0 auto 50px;

text-align: center;

}

.th-expo-section-head .th-expo-eyebrow {

margin-bottom: 12px;

}

.th-expo-section-head h2 {

margin: 0 0 14px;

color: #07516a;

font-size: 40px;

line-height: 1.05;

font-weight: 800;

letter-spacing: -1px;

}

.th-expo-section-head p {

max-width: 680px;

margin: 0 auto;

color: #60747c;

font-size: 14px;

line-height: 1.7;

}

.th-expo-audience-grid {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 0;

background: #fff;

}

.th-expo-audience-card {

min-height: 170px;

padding: 28px 25px;

border-right: 1px solid #dce7ea;

border-top: 2px solid #18b7d9;

transition: .25s ease;

}

.th-expo-audience-card:last-child {

border-right: 0;

}

.th-expo-audience-card:hover {

background: #fafdfe;

transform: translateY(-3px);

}

.th-expo-audience-number {

display: block;

margin-bottom: 18px;

color: #18b7d9;

font-size: 9px;

font-weight: 800;

letter-spacing: 1.8px;

}

.th-expo-audience-card h3 {

margin: 0 0 10px;

color: #07516a;

font-size: 15px;

line-height: 1.2;

font-weight: 800;

}

.th-expo-audience-card p {

margin: 0;

color: #71848b;

font-size: 11px;

line-height: 1.55;

}

/* =========================================================

PERCHÉ PARTECIPARE

========================================================= */

.th-expo-benefits {

width: 100%;

padding: 90px 0 100px;

background: #064b60;

}

.th-expo-benefits .th-expo-section-head {

margin-bottom: 55px;

}

.th-expo-benefits .th-expo-section-head h2 {

color: #fff;

}

.th-expo-benefits .th-expo-section-head p {

color: rgba(255,255,255,.70);

}

.th-expo-benefits-grid {

display: grid;

grid-template-columns: repeat(5, 1fr);

border-top: 1px solid rgba(255,255,255,.15);

border-bottom: 1px solid rgba(255,255,255,.15);

}

.th-expo-benefit {

min-height: 270px;

padding: 30px 25px;

border-right: 1px solid rgba(255,255,255,.14);

}

.th-expo-benefit:last-child {

border-right: 0;

}

.th-expo-benefit-number {

display: block;

margin-bottom: 30px;

color: rgba(24,183,217,.55);

font-size: 42px;

line-height: 1;

font-weight: 800;

}

.th-expo-benefit h3 {

margin: 0 0 13px;

color: #fff;

font-size: 16px;

line-height: 1.1;

font-weight: 800;

}

.th-expo-benefit p {

margin: 0;

color: rgba(255,255,255,.65);

font-size: 11px;

line-height: 1.65;

}

/* =========================================================

VIDEO

========================================================= */

.th-expo-videos {

width: 100%;

padding: 90px 0;

background: #fff;

}

.th-expo-video-grid {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 14px;

}

.th-expo-video {

background: #07516a;

overflow: hidden;

transition: .25s ease;

}

.th-expo-video:hover {

transform: translateY(-4px);

box-shadow: 0 15px 35px rgba(0,0,0,.12);

}

.th-expo-video-frame {

position: relative;

width: 100%;

aspect-ratio: 16 / 9;

background: #063f52;

}

.th-expo-video-frame iframe {

position: absolute;

inset: 0;

width: 100%;

height: 100%;

border: 0;

}

.th-expo-video-title {

min-height: 70px;

padding: 17px 18px;

color: #fff;

font-size: 11px;

line-height: 1.35;

font-weight: 800;

}

/* =========================================================

FORM SECTION

========================================================= */

.th-expo-form-section {

width: 100%;

padding: 95px 0 105px;

background: #f2f6f7;

}

.th-expo-form-head {

max-width: 800px;

margin: 0 auto 45px;

text-align: center;

}

.th-expo-form-head .th-expo-eyebrow {

margin-bottom: 12px;

}

.th-expo-form-head h2 {

margin: 0 0 15px;

color: #07516a;

font-size: 42px;

line-height: 1.05;

font-weight: 800;

letter-spacing: -1.2px;

}

.th-expo-form-head p {

margin: 0 auto;

color: #60747c;

font-size: 14px;

line-height: 1.7;

}

/* =========================================================

CONTACT FORM 7

========================================================= */

.th-expo-form-wrap {

width: 100%;

padding: 42px 45px 48px;

background: #fff;

border-top: 3px solid #18b7d9;

box-shadow: 0 15px 45px rgba(6,63,82,.08);

}

/* forza CF7 */

.th-expo-form-wrap .wpcf7 {

width: 100%;

}

.th-expo-form-wrap form {

width: 100%;

}

.th-expo-form-wrap p {

margin: 0;

}

/* due colonne */

.th-expo-form-wrap .form-row {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 18px;

margin-bottom: 18px;

}

/*

Se il tuo CF7 non usa .form-row,

la struttura sottostante permette comunque

di organizzare i campi attraverso i wrapper.

*/

.th-expo-form-wrap label {

display: block;

color: #07516a;

font-size: 9px;

font-weight: 800;

letter-spacing: .5px;

text-transform: uppercase;

}

.th-expo-form-wrap input:not([type="submit"]):not([type="checkbox"]),

.th-expo-form-wrap select,

.th-expo-form-wrap textarea {

width: 100%;

margin-top: 7px;

padding: 14px 15px;

background: #f5f8f9;

border: 1px solid #dce6e9;

border-radius: 0;

color: #375762;

font-family: inherit;

font-size: 12px;

outline: none;

transition: .2s ease;

}

.th-expo-form-wrap input:not([type="submit"]):not([type="checkbox"]) {

height: 46px;

}

.th-expo-form-wrap select {

height: 46px;

cursor: pointer;

}

.th-expo-form-wrap textarea {

min-height: 150px;

resize: vertical;

}

.th-expo-form-wrap input:focus,

.th-expo-form-wrap select:focus,

.th-expo-form-wrap textarea:focus {

background: #fff;

border-color: #18b7d9;

box-shadow: 0 0 0 2px rgba(24,183,217,.08);

}

/* campi full width */

.th-expo-form-wrap .full-width {

grid-column: 1 / -1;

}

/* privacy */

.th-expo-form-wrap .privacy-row {

margin-top: 20px;

color: #60747c;

font-size: 10px;

line-height: 1.5;

}

.th-expo-form-wrap .privacy-row label {

display: flex;

align-items: flex-start;

gap: 8px;

color: #60747c;

font-size: 9px;

font-weight: 500;

text-transform: none;

letter-spacing: 0;

}

.th-expo-form-wrap input[type="checkbox"] {

width: 14px;

height: 14px;

margin: 0;

accent-color: #18b7d9;

}

/* bottone */

.th-expo-form-wrap input[type="submit"],

.th-expo-form-wrap button[type="submit"] {

display: inline-flex;

align-items: center;

justify-content: center;

min-width: 130px;

min-height: 48px;

margin-top: 22px;

padding: 0 28px;

background: #18b7d9;

border: 0;

border-radius: 0;

color: #fff;

font-family: inherit;

font-size: 10px;

font-weight: 800;

letter-spacing: 1px;

text-transform: uppercase;

cursor: pointer;

transition: .25s ease;

}

.th-expo-form-wrap input[type="submit"]:hover,

.th-expo-form-wrap button[type="submit"]:hover {

background: #07516a;

transform: translateY(-2px);

}

/* messaggi CF7 */

.th-expo-form-wrap .wpcf7-response-output {

margin: 25px 0 0 !important;

padding: 13px 15px !important;

border: 1px solid #18b7d9 !important;

color: #07516a;

font-size: 11px;

}

/* =========================================================

CTA FINALE

========================================================= */

.th-expo-final {

position: relative;

width: 100%;

padding: 100px 20px;

background: #063f52;

overflow: hidden;

text-align: center;

}

.th-expo-final:before {

content: "";

position: absolute;

width: 650px;

height: 650px;

right: -320px;

top: -300px;

border: 1px solid rgba(24,183,217,.22);

border-radius: 50%;

}

.th-expo-final:after {

content: "";

position: absolute;

width: 420px;

height: 420px;

right: -200px;

top: -180px;

border: 1px solid rgba(255,255,255,.07);

border-radius: 50%;

}

.th-expo-final-inner {

position: relative;

z-index: 2;

}

.th-expo-final .th-expo-eyebrow {

margin-bottom: 15px;

}

.th-expo-final h2 {

max-width: 900px;

margin: 0 auto 20px;

color: #fff;

font-size: clamp(36px, 5vw, 58px);

line-height: 1.02;

font-weight: 800;

letter-spacing: -1.7px;

}

.th-expo-final p {

max-width: 650px;

margin: 0 auto 30px;

color: rgba(255,255,255,.75);

font-size: 14px;

line-height: 1.7;

}

.th-expo-final-btn {

display: inline-flex;

align-items: center;

gap: 20px;

min-height: 50px;

padding: 0 25px;

background: #18b7d9;

color: #fff !important;

text-decoration: none !important;

font-size: 10px;

font-weight: 800;

letter-spacing: 1px;

text-transform: uppercase;

transition: .25s ease;

}

.th-expo-final-btn:hover {

background: #fff;

color: #07516a !important;

transform: translateY(-2px);

}

/* =========================================================

TABLET

========================================================= */

@media (max-width: 900px) {

.th-expo-hero {

min-height: 500px;

background-position: 65% center;

}

.th-expo-hero-content {

width: 65%;

}

.th-expo-intro-grid {

grid-template-columns: 1fr;

gap: 30px;

}

.th-expo-audience-grid {

grid-template-columns: repeat(2, 1fr);

}

.th-expo-audience-card:nth-child(2) {

border-right: 0;

}

.th-expo-benefits-grid {

grid-template-columns: repeat(3, 1fr);

}

.th-expo-benefit:nth-child(3) {

border-right: 0;

}

.th-expo-benefit:nth-child(4),

.th-expo-benefit:nth-child(5) {

border-top: 1px solid rgba(255,255,255,.14);

}

.th-expo-video-grid {

grid-template-columns: repeat(2, 1fr);

}

}

/* =========================================================

MOBILE

========================================================= */

@media (max-width: 600px) {

.th-expo-page .th-container {

padding-left: 15px;

padding-right: 15px;

}

.th-expo-hero {

min-height: 620px;

align-items: flex-end;

background-position: 68% center;

background-image:

linear-gradient(

180deg,

rgba(4,67,86,.18) 0%,

rgba(4,67,86,.72) 48%,

rgba(4,67,86,.98) 100%

),

url("https://www.tuttohotel.info/wp-content/uploads/2026/07/1-2048x819.jpg.webp");

}

.th-expo-hero-inner {

padding: 55px 25px;

}

.th-expo-hero-content {

width: 100%;

max-width: none;

}

.th-expo-hero h1 {

font-size: 43px;

letter-spacing: -1.5px;

}

.th-expo-hero p {

font-size: 13px;

}

.th-expo-intro,

.th-expo-audience,

.th-expo-videos {

padding: 60px 0;

}

.th-expo-benefits {

padding: 65px 0;

}

.th-expo-section-head h2,

.th-expo-form-head h2 {

font-size: 32px;

}

.th-expo-intro-title h2 {

font-size: 34px;

}

.th-expo-audience-grid {

grid-template-columns: 1fr;

}

.th-expo-audience-card {

border-right: 0;

border-bottom: 1px solid #dce7ea;

}

.th-expo-benefits-grid {

grid-template-columns: 1fr;

}

.th-expo-benefit {

min-height: auto;

border-right: 0;

border-bottom: 1px solid rgba(255,255,255,.14);

}

.th-expo-benefit:last-child {

border-bottom: 0;

}

.th-expo-video-grid {

grid-template-columns: 1fr;

}

.th-expo-form-section {

padding: 65px 0 70px;

}

.th-expo-form-wrap {

padding: 28px 18px 32px;

}

.th-expo-form-wrap .form-row {

grid-template-columns: 1fr;

gap: 15px;

margin-bottom: 15px;

}

.th-expo-form-wrap .full-width {

grid-column: auto;

}

.th-expo-form-wrap input[type="submit"],

.th-expo-form-wrap button[type="submit"] {

width: 100%;

}

.th-expo-final {

padding: 70px 15px;

}

}

/* =========================================================

SMALL MOBILE

========================================================= */

@media (max-width: 380px) {

.th-expo-hero h1 {

font-size: 37px;

}

}

/* page-visitatori.php */

/* =========================================================

RESET LOCALE

========================================================= */

.th-visitors-page,

.th-visitors-page * {

box-sizing: border-box;

}

.th-visitors-page {

width: 100%;

margin: 0;

padding: 0;

color: #07516a;

font-family: inherit;

overflow: hidden;

}

/* =========================================================

CONTAINER

========================================================= */

.th-visitors-container {

width: 100%;

max-width: 1180px;

margin: 0 auto;

padding: 0 20px;

}

/* =========================================================

HERO

========================================================= */

.th-visitors-hero {

position: relative;

width: 100%;

height: min(46vw, 590px);

min-height: 390px;

overflow: hidden;

background: #063f52;

}

.th-visitors-hero img {

display: block;

width: 100%;

height: 100%;

object-fit: cover;

object-position: center;

margin: 0 !important;

}

.th-visitors-hero:after {

content: "";

position: absolute;

inset: 0;

background:

linear-gradient(

90deg,

rgba(3,43,57,.70) 0%,

rgba(3,43,57,.30) 48%,

rgba(3,43,57,.05) 100%

);

}

.th-visitors-hero-content {

position: absolute;

z-index: 2;

left: 50%;

top: 50%;

width: 100%;

max-width: 1180px;

transform: translate(-50%, -50%);

padding: 0 40px;

}

.th-visitors-eyebrow {

display: block;

margin-bottom: 16px;

color: #18b7d9;

font-size: 11px;

font-weight: 800;

letter-spacing: 2.5px;

text-transform: uppercase;

}

.th-visitors-hero h1 {

max-width: 700px;

margin: 0 0 20px;

color: #ffffff;

font-size: clamp(42px, 5.2vw, 70px);

line-height: 1.02;

font-weight: 800;

letter-spacing: -2px;

}

.th-visitors-hero p {

max-width: 570px;

margin: 0;

color: rgba(255,255,255,.86);

font-size: 16px;

line-height: 1.7;

}

/* =========================================================

INTRO

========================================================= */

.th-visitors-intro {

padding: 95px 0 90px;

background: #ffffff;

}

.th-visitors-intro-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 75px;

align-items: center;

}

/* IMAGE */

.th-visitors-image {

position: relative;

overflow: hidden;

background: #f2f6f7;

}

.th-visitors-image img {

display: block;

width: 100%;

height: auto;

margin: 0 !important;

transition: transform .5s ease;

}

.th-visitors-image:hover img {

transform: scale(1.025);

}

/* DECORAZIONE */

.th-visitors-image:after {

content: "";

position: absolute;

width: 80px;

height: 80px;

right: -1px;

bottom: -1px;

border-left: 2px solid #18b7d9;

border-top: 2px solid #18b7d9;

pointer-events: none;

}

/* TESTO */

.th-visitors-intro-text {

max-width: 540px;

}

.th-visitors-label {

display: block;

margin-bottom: 12px;

color: #18b7d9;

font-size: 10px;

font-weight: 800;

letter-spacing: 2px;

text-transform: uppercase;

}

.th-visitors-intro-text h2 {

margin: 0 0 24px;

color: #07516a;

font-size: 42px;

line-height: 1.08;

font-weight: 800;

letter-spacing: -1px;

}

.th-visitors-intro-text p {

margin: 0 0 18px;

color: #60727a;

font-size: 15px;

line-height: 1.75;

}

.th-visitors-intro-text strong {

color: #07516a;

}

/* =========================================================

ACCESSO / ACCREDITO

========================================================= */

.th-visitors-access {

position: relative;

width: 100%;

padding: 95px 0 100px;

background: #063f52;

overflow: hidden;

}

/* CERCHI DECORATIVI */

.th-visitors-access:before {

content: "";

position: absolute;

width: 600px;

height: 600px;

right: -280px;

top: -300px;

border: 1px solid rgba(24,183,217,.18);

border-radius: 50%;

}

.th-visitors-access:after {

content: "";

position: absolute;

width: 390px;

height: 390px;

right: -175px;

top: -195px;

border: 1px solid rgba(255,255,255,.08);

border-radius: 50%;

}

/* HEADER */

.th-visitors-access-head {

position: relative;

z-index: 2;

max-width: 850px;

margin: 0 auto 55px;

text-align: center;

}

.th-visitors-access-head .th-visitors-label {

color: #18b7d9;

}

.th-visitors-access-head h2 {

margin: 0 0 20px;

color: #ffffff;

font-size: 43px;

line-height: 1.08;

font-weight: 800;

letter-spacing: -1px;

}

.th-visitors-access-head p {

max-width: 700px;

margin: 0 auto;

color: rgba(255,255,255,.74);

font-size: 15px;

line-height: 1.7;

}

/* =========================================================

INFO ACCESSO

========================================================= */

.th-visitors-access-grid {

position: relative;

z-index: 2;

display: grid;

grid-template-columns: .9fr 1.1fr;

gap: 55px;

align-items: start;

}

/* INFO */

.th-visitors-info {

padding: 35px;

background: rgba(255,255,255,.045);

border: 1px solid rgba(255,255,255,.12);

border-top: 2px solid #18b7d9;

}

.th-visitors-info h3 {

margin: 0 0 22px;

color: #ffffff;

font-size: 23px;

line-height: 1.2;

font-weight: 800;

}

.th-visitors-info p {

margin: 0 0 18px;

color: rgba(255,255,255,.72);

font-size: 14px;

line-height: 1.7;

}

/* LISTA */

.th-visitors-steps {

margin: 25px 0 0;

padding: 0;

list-style: none;

}

.th-visitors-steps li {

position: relative;

padding: 15px 0 15px 45px;

border-top: 1px solid rgba(255,255,255,.10);

color: rgba(255,255,255,.76);

font-size: 13px;

line-height: 1.6;

}

.th-visitors-steps li:last-child {

border-bottom: 1px solid rgba(255,255,255,.10);

}

.th-visitors-steps li span {

position: absolute;

left: 0;

top: 14px;

width: 27px;

height: 27px;

display: flex;

align-items: center;

justify-content: center;

border: 1px solid #18b7d9;

color: #18b7d9;

font-size: 10px;

font-weight: 800;

}

/* =========================================================

DATI FIERA

========================================================= */

.th-visitors-details {

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 1px;

background: rgba(255,255,255,.12);

border: 1px solid rgba(255,255,255,.12);

}

.th-visitors-detail {

min-height: 125px;

padding: 25px;

background: #063f52;

}

.th-visitors-detail-label {

display: block;

margin-bottom: 9px;

color: #18b7d9;

font-size: 9px;

font-weight: 800;

letter-spacing: 1.8px;

text-transform: uppercase;

}

.th-visitors-detail strong {

display: block;

color: #ffffff;

font-size: 15px;

line-height: 1.45;

font-weight: 700;

}

/* =========================================================

FORM AREA

========================================================= */

.th-visitors-form-wrap {

position: relative;

z-index: 2;

margin-top: 60px;

padding: 50px;

background: #ffffff;

}

.th-visitors-form-title {

margin-bottom: 35px;

text-align: center;

}

.th-visitors-form-title span {

display: block;

margin-bottom: 9px;

color: #18b7d9;

font-size: 10px;

font-weight: 800;

letter-spacing: 2px;

text-transform: uppercase;

}

.th-visitors-form-title h3 {

margin: 0;

color: #07516a;

font-size: 30px;

line-height: 1.15;

font-weight: 800;

}

/*

QUI INSERIAMO IL CONTACT FORM 7

*/

.th-visitors-form {

width: 100%;

}

/* =========================================================

CTA

========================================================= */

.th-visitors-cta {

padding: 75px 20px;

background: #f2f6f7;

text-align: center;

}

.th-visitors-cta h2 {

margin: 0 0 15px;

color: #07516a;

font-size: 34px;

line-height: 1.1;

font-weight: 800;

}

.th-visitors-cta p {

max-width: 650px;

margin: 0 auto 25px;

color: #60727a;

font-size: 14px;

line-height: 1.7;

}

.th-visitors-btn {

display: inline-flex;

align-items: center;

justify-content: center;

gap: 20px;

min-height: 52px;

padding: 0 28px;

background: #12b4d4;

color: #ffffff !important;

text-decoration: none !important;

font-size: 11px;

font-weight: 800;

letter-spacing: 1px;

text-transform: uppercase;

transition: all .25s ease;

}

.th-visitors-btn:hover {

background: #07516a;

transform: translateY(-2px);

}

/* =========================================================

TABLET

========================================================= */

@media (max-width: 900px) {

.th-visitors-hero {

height: 55vw;

min-height: 350px;

}

.th-visitors-hero-content {

padding: 0 30px;

}

.th-visitors-intro {

padding: 70px 0;

}

.th-visitors-intro-grid {

gap: 45px;

}

.th-visitors-intro-text h2 {

font-size: 35px;

}

.th-visitors-access {

padding: 70px 0 75px;

}

.th-visitors-access-grid {

grid-template-columns: 1fr;

gap: 30px;

}

.th-visitors-info {

padding: 30px;

}

.th-visitors-form-wrap {

padding: 35px;

}

}

/* =========================================================

MOBILE

========================================================= */

@media (max-width: 650px) {

.th-visitors-container {

padding: 0 15px;

}

.th-visitors-hero {

height: 115vw;

min-height: 430px;

}

.th-visitors-hero img {

object-position: center;

}

.th-visitors-hero:after {

background:

linear-gradient(

180deg,

rgba(3,43,57,.20) 0%,

rgba(3,43,57,.75) 75%,

rgba(3,43,57,.90) 100%

);

}

.th-visitors-hero-content {

left: 0;

top: auto;

bottom: 45px;

transform: none;

padding: 0 20px;

}

.th-visitors-hero h1 {

font-size: 40px;

letter-spacing: -1px;

}

.th-visitors-hero p {

font-size: 14px;

}

.th-visitors-intro {

padding: 55px 0;

}

.th-visitors-intro-grid {

grid-template-columns: 1fr;

gap: 35px;

}

.th-visitors-intro-text h2 {

font-size: 32px;

}

.th-visitors-intro-text p {

font-size: 14px;

}

.th-visitors-access {

padding: 55px 0 60px;

}

.th-visitors-access-head {

margin-bottom: 35px;

}

.th-visitors-access-head h2 {

font-size: 32px;

}

.th-visitors-access-head p {

font-size: 14px;

}

.th-visitors-info {

padding: 25px 20px;

}

.th-visitors-details {

grid-template-columns: 1fr;

}

.th-visitors-detail {

min-height: auto;

padding: 20px;

}

.th-visitors-form-wrap {

margin-top: 35px;

padding: 28px 20px;

}

.th-visitors-form-title h3 {

font-size: 25px;

}

.th-visitors-cta {

padding: 55px 15px;

}

.th-visitors-cta h2 {

font-size: 29px;

}

}

/* =========================================================

MOBILE PICCOLO

========================================================= */

@media (max-width: 380px) {

.th-visitors-hero h1 {

font-size: 34px;

}

.th-visitors-intro-text h2,

.th-visitors-access-head h2 {

font-size: 29px;

}

}

/* page-tuttohotel-award-2027.php */

/* =========================================================

RESET LOCALE

========================================================= */

.th-award-page,

.th-award-page * {

box-sizing: border-box;

}

.th-award-page {

width: 100%;

margin: 0;

padding: 0;

color: #07536a;

font-family: inherit;

overflow: hidden;

}

.th-award-container {

width: 100%;

max-width: 1180px;

margin: 0 auto;

padding-left: 20px;

padding-right: 20px;

}

/* =========================================================

HERO

========================================================= */

.th-award-hero {

position: relative;

width: 100%;

min-height: 500px;

display: flex;

align-items: center;

overflow: hidden;

background:

linear-gradient(

90deg,

rgba(3,57,74,.97) 0%,

rgba(3,57,74,.91) 35%,

rgba(3,57,74,.40) 65%,

rgba(3,57,74,.08) 100%

),

url("https://www.tuttohotel.info/wp-content/uploads/2026/07/1-scaled.jpg.webp")

center center / cover no-repeat;

}

.th-award-hero-inner {

position: relative;

z-index: 2;

width: 100%;

max-width: 1180px;

margin: 0 auto;

padding: 85px 40px;

}

.th-award-eyebrow {

display: block;

margin-bottom: 14px;

color: #18b7d9;

font-size: 11px;

font-weight: 800;

letter-spacing: 2.5px;

text-transform: uppercase;

}

.th-award-hero h1 {

max-width: 680px;

margin: 0 0 22px;

color: #fff;

font-size: clamp(46px, 6vw, 78px);

line-height: .96;

font-weight: 800;

letter-spacing: -2.5px;

}

.th-award-hero h1 span {

color: #18b7d9;

}

.th-award-hero-text {

max-width: 600px;

margin-bottom: 30px;

color: rgba(255,255,255,.86);

font-size: 15px;

line-height: 1.7;

}

.th-award-hero-button {

display: inline-flex;

align-items: center;

justify-content: center;

min-height: 50px;

padding: 0 25px;

background: #18b7d9;

color: #fff !important;

text-decoration: none !important;

font-size: 11px;

font-weight: 800;

letter-spacing: .8px;

text-transform: uppercase;

transition: .25s ease;

}

.th-award-hero-button:hover {

background: #fff;

color: #07536a !important;

}

/* =========================================================

INTRO

========================================================= */

.th-award-intro {

padding: 80px 20px 75px;

background: #fff;

text-align: center;

}

.th-award-intro-inner {

max-width: 850px;

margin: 0 auto;

}

.th-award-intro .th-award-eyebrow {

margin-bottom: 10px;

}

.th-award-intro h2 {

margin: 0 0 20px;

color: #07536a;

font-size: clamp(30px, 4vw, 44px);

line-height: 1.1;

font-weight: 800;

letter-spacing: -1px;

}

.th-award-intro h2 span {

color: #18b7d9;

}

.th-award-intro p {

max-width: 760px;

margin: 0 auto 15px;

color: #60747c;

font-size: 15px;

line-height: 1.75;

}

/* =========================================================

CATEGORIE

========================================================= */

.th-award-categories {

width: 100%;

padding: 85px 0 95px;

background: #f2f6f7;

}

.th-award-section-head {

max-width: 760px;

margin: 0 auto 45px;

text-align: center;

}

.th-award-section-head .th-award-eyebrow {

margin-bottom: 10px;

}

.th-award-section-head h2 {

margin: 0 0 15px;

color: #07536a;

font-size: 40px;

line-height: 1.1;

font-weight: 800;

}

.th-award-section-head p {

margin: 0 auto;

max-width: 680px;

color: #60747c;

font-size: 14px;

line-height: 1.7;

}

/* =========================================================

CAROSELLO

========================================================= */

.th-award-carousel-wrap {

position: relative;

width: 100%;

padding: 0 55px;

}

.th-award-carousel {

width: 100%;

overflow: hidden;

}

.th-award-track {

display: flex;

gap: 20px;

width: max-content;

transition: transform .6s ease;

}

.th-award-slide {

flex: 0 0 260px;

width: 260px;

background: #fff;

overflow: hidden;

box-shadow: 0 8px 25px rgba(6,63,82,.08);

}

.th-award-slide a {

display: block;

width: 100%;

}

.th-award-slide img {

display: block;

width: 100%;

height: auto;

aspect-ratio: 1 / 1;

object-fit: cover;

transition: transform .4s ease;

}

.th-award-slide:hover img {

transform: scale(1.035);

}

/* =========================================================

FRECCE

========================================================= */

.th-award-arrow {

position: absolute;

top: 50%;

width: 42px;

height: 42px;

margin-top: -21px;

display: flex;

align-items: center;

justify-content: center;

border: 0;

border-radius: 50%;

background: #18b7d9;

color: #fff;

font-size: 25px;

line-height: 1;

cursor: pointer;

z-index: 5;

transition: .25s ease;

}

.th-award-arrow:hover {

background: #07536a;

transform: scale(1.06);

}

.th-award-prev {

left: 0;

}

.th-award-next {

right: 0;

}

/* =========================================================

DOTS

========================================================= */

.th-award-dots {

display: flex;

align-items: center;

justify-content: center;

gap: 7px;

margin-top: 28px;

}

.th-award-dot {

width: 7px;

height: 7px;

padding: 0;

border: 0;

border-radius: 50%;

background: #b8c9ce;

cursor: pointer;

transition: .25s ease;

}

.th-award-dot.active {

width: 24px;

border-radius: 10px;

background: #18b7d9;

}

/* =========================================================

CANDIDATURA

========================================================= */

.th-award-apply {

width: 100%;

padding: 90px 20px 100px;

background: #063f52;

}

.th-award-apply-inner {

width: 100%;

max-width: 1180px;

margin: 0 auto;

}

/* TESTO SOPRA FORM */

.th-award-apply-head {

max-width: 850px;

margin: 0 auto 50px;

text-align: center;

}

.th-award-apply-head .th-award-eyebrow {

color: #18b7d9;

}

.th-award-apply-head h2 {

margin: 0 0 18px;

color: #fff;

font-size: clamp(34px, 5vw, 54px);

line-height: 1.05;

font-weight: 800;

letter-spacing: -1.5px;

}

.th-award-apply-head p {

max-width: 760px;

margin: 0 auto;

color: rgba(255,255,255,.78);

font-size: 15px;

line-height: 1.75;

}

/* =========================================================

FORM A PIENA PAGINA

========================================================= */

.th-award-form {

width: 100%;

padding: 45px;

background: #fff;

box-shadow: 0 18px 50px rgba(0,0,0,.14);

}

.th-award-form-title {

margin-bottom: 30px;

color: #07536a;

font-size: 26px;

font-weight: 800;

}

.th-award-form-subtitle {

margin: -20px 0 30px;

color: #60747c;

font-size: 13px;

line-height: 1.6;

}

/*

* STILI CONTACT FORM 7

*/

.th-award-form .wpcf7 form {

width: 100%;

}

.th-award-form .wpcf7-form-control-wrap {

display: block;

width: 100%;

}

.th-award-form .wpcf7 input[type="text"],

.th-award-form .wpcf7 input[type="email"],

.th-award-form .wpcf7 input[type="tel"],

.th-award-form .wpcf7 input[type="url"],

.th-award-form .wpcf7 select,

.th-award-form .wpcf7 textarea {

width: 100%;

min-height: 48px;

padding: 13px 15px;

border: 1px solid #dce5e8;

border-radius: 0;

outline: none;

background: #f5f8f9;

color: #07536a;

font-family: inherit;

font-size: 13px;

transition: .2s ease;

}

.th-award-form .wpcf7 textarea {

min-height: 150px;

resize: vertical;

}

.th-award-form .wpcf7 input:focus,

.th-award-form .wpcf7 select:focus,

.th-award-form .wpcf7 textarea:focus {

border-color: #18b7d9;

background: #fff;

}

.th-award-form .wpcf7 input[type="submit"] {

min-height: 50px;

padding: 0 30px;

border: 0;

background: #18b7d9;

color: #fff;

font-family: inherit;

font-size: 11px;

font-weight: 800;

letter-spacing: .8px;

text-transform: uppercase;

cursor: pointer;

transition: .25s ease;

}

.th-award-form .wpcf7 input[type="submit"]:hover {

background: #07536a;

}

.th-award-form .wpcf7 acceptance {

font-size: 11px;

}

.th-award-form .wpcf7-not-valid-tip {

margin-top: 5px;

font-size: 11px;

}

.th-award-form .wpcf7-response-output {

margin: 20px 0 0 !important;

padding: 12px 15px !important;

font-size: 12px;

}

/* =========================================================

NOTA FORM

========================================================= */

.th-award-form-note {

margin-top: 25px;

padding-left: 15px;

border-left: 3px solid #18b7d9;

color: #60747c;

font-size: 12px;

line-height: 1.65;

}

/* =========================================================

RESPONSIVE TABLET

========================================================= */

@media (max-width: 900px) {

.th-award-hero {

min-height: 460px;

}

.th-award-hero-inner {

padding: 70px 30px;

}

.th-award-categories {

padding: 70px 0 80px;

}

.th-award-slide {

flex-basis: 230px;

width: 230px;

}

.th-award-form {

padding: 35px;

}

}

/* =========================================================

MOBILE

========================================================= */

@media (max-width: 600px) {

.th-award-container {

padding-left: 15px;

padding-right: 15px;

}

.th-award-hero {

min-height: 560px;

background:

linear-gradient(

90deg,

rgba(3,57,74,.94),

rgba(3,57,74,.72)

),

url("https://www.tuttohotel.info/wp-content/uploads/2026/07/1-scaled.jpg.webp")

center center / cover no-repeat;

}

.th-award-hero-inner {

padding: 55px 20px;

}

.th-award-hero h1 {

font-size: 45px;

}

.th-award-hero-text {

font-size: 14px;

}

.th-award-intro {

padding: 60px 18px;

}

.th-award-intro h2 {

font-size: 31px;

}

.th-award-intro p {

font-size: 14px;

}

.th-award-categories {

padding: 60px 0 70px;

}

.th-award-section-head {

padding: 0 20px;

margin-bottom: 30px;

}

.th-award-section-head h2 {

font-size: 32px;

}

.th-award-carousel-wrap {

padding: 0 42px;

}

.th-award-slide {

flex-basis: calc(100vw - 84px);

width: calc(100vw - 84px);

max-width: 360px;

}

.th-award-arrow {

width: 36px;

height: 36px;

margin-top: -18px;

font-size: 21px;

}

.th-award-apply {

padding: 60px 15px 70px;

}

.th-award-apply-head {

margin-bottom: 35px;

}

.th-award-apply-head h2 {

font-size: 34px;

}

.th-award-apply-head p {

font-size: 14px;

}

.th-award-form {

padding: 25px 18px;

}

.th-award-form-title {

font-size: 23px;

}

}

/* =========================================================

MOBILE PICCOLO

========================================================= */

@media (max-width: 380px) {

.th-award-hero h1 {

font-size: 40px;

}

.th-award-section-head h2 {

font-size: 29px;

}

}

/* page-contatti.php */

/* =========================================================

HERO

========================================================= */

.th-contact-hero {

position: relative;

width: 100%;

min-height: 430px;

display: flex;

align-items: flex-end;

background-image:

linear-gradient(

90deg,

rgba(3,48,64,.88) 0%,

rgba(3,48,64,.62) 48%,

rgba(3,48,64,.18) 100%

),

url("https://www.tuttohotel.info/wp-content/uploads/2026/06/cover-slide-sito-th27-provvisoria.png");

background-size: cover;

background-position: center;

box-sizing: border-box;

}

.th-contact-hero-inner {

width: 100%;

max-width: 1180px;

margin: 0 auto;

padding: 75px 20px;

box-sizing: border-box;

}

.th-contact-eyebrow {

display: block;

margin-bottom: 14px;

color: #18b7d9;

font-size: 10px;

font-weight: 800;

letter-spacing: 2.4px;

text-transform: uppercase;

}

.th-contact-hero h1 {

margin: 0 0 18px;

color: #fff;

font-size: clamp(42px, 6vw, 68px);

line-height: 1;

font-weight: 800;

letter-spacing: -1.8px;

}

.th-contact-hero p {

max-width: 560px;

margin: 0;

color: rgba(255,255,255,.82);

font-size: 16px;

line-height: 1.7;

}

/* =========================================================

CONTENUTO

========================================================= */

.th-contact {

width: 100%;

padding: 90px 20px 100px;

background: #fff;

box-sizing: border-box;

}

.th-contact-container {

width: 100%;

max-width: 1180px;

margin: 0 auto;

box-sizing: border-box;

}

/* =========================================================

GRID PRINCIPALE

========================================================= */

.th-contact-grid {

display: grid;

grid-template-columns: 360px 1fr;

gap: 80px;

align-items: start;

}

/* =========================================================

COLONNA INFO

========================================================= */

.th-contact-info {

padding-top: 5px;

}

.th-contact-info-eyebrow {

display: block;

margin-bottom: 12px;

color: #18b7d9;

font-size: 10px;

font-weight: 800;

letter-spacing: 2px;

text-transform: uppercase;

}

.th-contact-info h2 {

margin: 0 0 20px;

color: #07536a;

font-size: 38px;

line-height: 1.08;

font-weight: 800;

}

.th-contact-info > p {

margin: 0 0 35px;

color: #60747c;

font-size: 14px;

line-height: 1.7;

}

/* =========================================================

DATI CONTATTO

========================================================= */

.th-contact-details {

border-top: 1px solid #dce5e8;

}

.th-contact-detail {

padding: 20px 0;

border-bottom: 1px solid #dce5e8;

}

.th-contact-detail-label {

display: block;

margin-bottom: 7px;

color: #18b7d9;

font-size: 9px;

font-weight: 800;

letter-spacing: 1.8px;

text-transform: uppercase;

}

.th-contact-detail a,

.th-contact-detail strong {

color: #07536a;

font-size: 17px;

line-height: 1.4;

font-weight: 700;

text-decoration: none;

}

.th-contact-detail a:hover {

color: #18b7d9;

}

/* =========================================================

FORM

========================================================= */

.th-contact-form-wrap {

padding: 42px;

background: #f3f6f7;

border-top: 3px solid #18b7d9;

box-sizing: border-box;

}

.th-contact-form-head {

margin-bottom: 30px;

}

.th-contact-form-head span {

display: block;

margin-bottom: 9px;

color: #18b7d9;

font-size: 9px;

font-weight: 800;

letter-spacing: 2px;

text-transform: uppercase;

}

.th-contact-form-head h2 {

margin: 0;

color: #07536a;

font-size: 29px;

line-height: 1.15;

font-weight: 800;

}

/* =========================================================

CONTACT FORM 7

========================================================= */

.th-contact-form-wrap .wpcf7 form {

margin: 0;

}

.th-contact-form-wrap .wpcf7-form-control-wrap {

display: block;

width: 100%;

}

.th-contact-form-wrap .th-form-row {

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 15px;

margin-bottom: 15px;

}

.th-contact-form-wrap .th-form-field {

width: 100%;

}

.th-contact-form-wrap input[type="text"],

.th-contact-form-wrap input[type="email"],

.th-contact-form-wrap input[type="tel"],

.th-contact-form-wrap textarea {

width: 100%;

padding: 15px 16px;

border: 1px solid #d6e0e3;

border-radius: 0;

background: #fff;

color: #07536a;

font-family: inherit;

font-size: 13px;

outline: none;

box-sizing: border-box;

transition:

border-color .2s ease,

box-shadow .2s ease;

}

.th-contact-form-wrap input:focus,

.th-contact-form-wrap textarea:focus {

border-color: #18b7d9;

box-shadow: 0 0 0 2px rgba(24,183,217,.08);

}

.th-contact-form-wrap textarea {

min-height: 145px;

resize: vertical;

}

.th-contact-form-wrap input::placeholder,

.th-contact-form-wrap textarea::placeholder {

color: #7c8d93;

}

.th-contact-form-wrap .th-form-message {

margin-bottom: 15px;

}

.th-contact-form-wrap .th-form-privacy {

margin: 20px 0;

color: #718188;

font-size: 11px;

line-height: 1.6;

}

.th-contact-form-wrap .th-form-privacy a {

color: #07536a;

font-weight: 700;

}

.th-contact-form-wrap input[type="submit"] {

min-height: 52px;

padding: 0 30px;

border: 0;

background: #18b7d9;

color: #fff;

font-family: inherit;

font-size: 11px;

font-weight: 800;

letter-spacing: 1px;

text-transform: uppercase;

cursor: pointer;

transition: all .25s ease;

}

.th-contact-form-wrap input[type="submit"]:hover {

background: #07536a;

transform: translateY(-2px);

}

/* =========================================================

MOSTRA D'OLTREMARE

========================================================= */

.th-contact-location {

margin-top: 80px;

padding-top: 55px;

border-top: 1px solid #dce5e8;

}

.th-contact-location-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 60px;

align-items: center;

}

.th-contact-location h2 {

margin: 0 0 15px;

color: #07536a;

font-size: 34px;

line-height: 1.1;

font-weight: 800;

}

.th-contact-location p {

max-width: 520px;

margin: 0;

color: #60747c;

font-size: 14px;

line-height: 1.7;

}

.th-contact-location-label {

display: block;

margin-bottom: 10px;

color: #18b7d9;

font-size: 10px;

font-weight: 800;

letter-spacing: 2px;

text-transform: uppercase;

}

.th-contact-location-box {

min-height: 190px;

display: flex;

align-items: center;

justify-content: center;

padding: 35px;

background: #063f52;

box-sizing: border-box;

text-align: center;

}

.th-contact-location-box strong {

display: block;

color: #fff;

font-size: 23px;

line-height: 1.3;

font-weight: 800;

}

.th-contact-location-box span {

display: block;

margin-top: 8px;

color: rgba(255,255,255,.7);

font-size: 12px;

}

/* =========================================================

TABLET

========================================================= */

@media (max-width: 900px) {

.th-contact-hero {

min-height: 380px;

}

.th-contact-grid {

grid-template-columns: 1fr;

gap: 50px;

}

.th-contact-info {

max-width: 700px;

}

.th-contact-form-wrap {

padding: 35px;

}

}

/* =========================================================

MOBILE

========================================================= */

@media (max-width: 600px) {

.th-contact-hero {

min-height: 350px;

background-position: center;

}

.th-contact-hero-inner {

padding: 55px 18px;

}

.th-contact-hero h1 {

font-size: 42px;

}

.th-contact-hero p {

font-size: 14px;

}

.th-contact {

padding: 60px 15px 70px;

}

.th-contact-grid {

gap: 40px;

}

.th-contact-info h2 {

font-size: 32px;

}

.th-contact-form-wrap {

padding: 25px 18px;

}

.th-contact-form-head h2 {

font-size: 25px;

}

.th-contact-form-wrap .th-form-row {

grid-template-columns: 1fr;

gap: 12px;

margin-bottom: 12px;

}

.th-contact-location {

margin-top: 55px;

padding-top: 40px;

}

.th-contact-location-grid {

grid-template-columns: 1fr;

gap: 30px;

}

.th-contact-location h2 {

font-size: 30px;

}

}



/* v1.35 - HTML conversion cleanup */

.th-native-rendered-page { width:100%; margin:0; padding:0; }

.th-native-rendered-page iframe { max-width:100%; border:0; }

.th-native-rendered-page img { max-width:100%; }

.th-expo-video-frame iframe { width:100%; min-height:315px; display:block; }

@media (max-width: 767px){

  .th-expo-video-frame iframe { min-height:220px; }

}