* {box-sizing: border-box;} /* W3S: LARGHEZZA BOX EFFETTIVA */ .clearfix::after {content: ""; display: table; clear: both;} /* W3S: MODERN CLEARFIX */ h1, h2, h3, h4, h5, h6 {margin: 0; font-size: 1em; line-height: 1em; font-weight: normal;} /* RESETTO I TITOLI */ p {margin: 0 0 6px 0;} /* PARAGRAFO NORMALE */ .piu {margin-bottom: 15px;} /* PARAGRAFO CON PIU' MARGINE SOTTO */ .evidenza {font-size: 1.2em; line-height: 1.2em; margin-bottom: 0.2em;} /* IN HOME */ .lista {padding-left: 25px; margin: 0 0 15px 0;} /* UL */ .nowrap {white-space: nowrap;} .imm-sx {float: left; margin: 3px 12px 8px 0;} /* RESP 600 */ .imm-dx {float: right; margin: 3px 0 8px 12px;} /* RESP 600 */ .imm-sx-fix {float: left; margin: 3px 12px 8px 0;} .imm-dx-fix {float: right; margin: 3px 0 8px 12px;} .didascalia {display: block; text-align: center; font-style: italic;} body {color: #333; font-family: 'PT Sans', sans-serif; font-size: 1em; line-height: 1.25em; /* DEFAULT: 1em = 16px oppure font-size: 100%;*/ background-image: url(/imm/base/fondale.gif); margin: 10px 0 30px 0;} /* RESP 960 */ a:link {color: #AA0000; font-weight: bold; text-decoration: none;} a:visited {color: #AA0000; font-weight: bold; text-decoration: none;} a:hover {color: RED; font-weight: bold; text-decoration: underline;} .underline a:link {text-decoration: underline;} /* UNDERLINE */ .nobold a:link, .nobold a:visited, .nobold a:hover {font-weight: normal;} /* NO BOLD */ /* =================================================================================== PIU' DI 960px ===== */ #container {max-width: 960px; margin: 0 auto;} #nav1 {height: 40px; background-color: #F2E0C6; border-radius: 16px 16px 0 0; font-size: 1.125em; line-height: 1.125em; display: flex; justify-content: space-between; align-items: center; padding: 0 20px;} /* RESP 960+600+400 */ #home {display: flex; justify-content: space-around; align-items: center; padding-top: 3px; width: 280px;} /* RESP 600 */ .icona {width: 20px; height: 20px;} #lang {display: flex; justify-content: space-between; width: 285px; height: 24px; margin-bottom: 3px;} /* RESP 600 - HEIGHT SERVE PER #nav1 ALIGN-ITEMS: CENTER */ #lang img {width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);} /* CAMBIO BOX-SHADOW ? */ #vista {background-image: url("/imm/base/vista-villaggiocrespidadda-1920-per-960.jpg"); background-position: center top; background-size: 960px; background-color: #CEB99E; padding: 10px 20px 15px 20px;} /* RESP 800+600 */ #unesco {height: 50px; font-size: 1.125em; color: #836952; font-style: italic; text-align: right;} /* RESP 600 */ #unesco a:link, #unesco a:visited, #unesco a:hover {cursor: text; color: #836952; font-weight: normal; text-decoration: none;} #logo {height: 80px;} /* RESP 800 */ #logo img {width: 300px;} /* RESP 800 */ #motto1 {font-size: 1.187em; line-height: 1.187em; font-family: Oswald; } /* CONOSCERE - RESP 800 */ #motto2 {font-size: 1.024em; line-height: 1.024em; font-family: Oswald; margin-top: 6px;} /* DIDATTICA - RESP 800 */ #motto3 {font-size: 1.500em; line-height: 1.000em; font-family: Oswald; } /* stranieri - RESP 800 */ #motto4 {font-size: 1.500em; line-height: 1.200em; font-family: Oswald; } /* stranieri - RESP 800 */ #nav2 {display: flex; justify-content: space-between; margin-top: 60px;} /* RESP 600 */ .tit {background-color: #990000; border-radius: 10px 10px 0 0; font-size: 0.875em; line-height: 1.0em; /* RESP 400 */ color: #F2E0C6; text-align: center; letter-spacing: 2px; padding: 5px 0 3px;} #conosci, #visita, #partecipa {border-radius: 10px 10px 0 0; background-color: #F5E5D5; opacity: 0.9;} /* RESP 800 - COLORA TUTTA L'ALTEZZA */ #conosci, #visita {width: 37%;} /* RESP 800 */ #partecipa {width: 22%;} /* RESP 800 */ .gruppo {display: flex; padding: 8px 5px;} /* RESP 800 */ .pila {width: 50%; font-family: Oswald; font-size: 1.3em; line-height: 1.1em;} /* RESP 800 */ .pila a {display: block; padding: 5px 8px;} /* RESP 800 */ .attivo {text-decoration: underline !important;} #QUI {display: none;} /* RESP 600 */ /* ------- MAIN + ARTICLE -------- */ main {display: flex; background-color: #F5E5D5;} /* RESP 800 */ article {width: 600px; background-color: #F5E5D5; flex-shrink: 0; /* RESP 600 - SEPPIA SOLE24 */ padding: 30px 30px 40px 30px;} /* flex-shrink SERVE PER FAR RESTRINGERE ASIDE E NON ARTICLE */ article h1 {font-weight: bold; margin: 0 0 30px 0; font-size: 1.5em; line-height: 1.2em; background-color: WHITE; font-family: Oswald; border-top: 1px solid #333; border-bottom: 1px solid #333; text-align: center; padding: 10px 0 12px;} article h2 {font-weight: bold; margin: 0 0 20px 0; font-size: 1.4em; line-height: 1.2em; background-color: #FFF5EC; font-family: Oswald; border-top: 1px solid #333; border-bottom: 1px solid #333; text-align: center; padding: 10px 0 12px;} article h3 {font-weight: bold; margin: 0 0 5px 0; font-size: 1.3em; line-height: 1.2em;} article h4 {font-weight: bold; margin: 12px 0 5px 0; font-size: 1.1em; line-height: 1.1em;} /* IN SCUOLE */ article h5 { margin: 12px 0 5px 0; font-size: 1.1em;} /* IN STORIA-APPROF */ article h6 {font-weight: bold;} aside {width: 360px; background-color: #E5D2BE; background-image: linear-gradient(to right, #E5D2BE 0%, #F5E5D5 75%); padding: 40px 45px 30px 60px;} /* RESP 900+800+600 */ #aside-tit {text-align: center; font-size: 1.5em;} aside section {margin-top: 25px;} /* RESP 900+800 */ aside img {width: 108px; float: left; margin: 3px 10px 0 0;} /* RESP 900+800 */ footer {display: flex; justify-content: center; flex-wrap: wrap; background-color: #5E5246; color: #F5E5D5; border-radius: 0 0 16px 16px; padding: 20px;} /* RESP 960 */ footer a:link, footer a:visited, footer a:hover {color: #F5E5D5; font-weight: normal;} footer div {width: 300px;} /* ------- COSAE ------- */ .curioso {max-width: 420px; margin: 30px auto;} .curioso::after {content: ""; display: table; clear: both;} .curioso img {float: left; margin: 3px 12px 2px 0; width: 150px; height: 150px; border: 1px solid #666;} /* ------- STORIA ------ */ #benigni {background-image: url(/imm/storia/benigni600.jpg); background-position: right; width: 100%; height: 300px; position: relative; margin-bottom: 20px;} #benigni-sez {position: absolute; left: 20px; bottom: 20px;} #benigni-sez a {display: block; font-size: 1.3em; text-shadow: 2px 2px 4px #F2E0C6; padding-top: 20px;} /* ------- LUOGHI ------ */ .luogo {margin-top: 30px;} .luogo::after {content: ""; display: table; clear: both;} .luogo img {float: left; margin: 3px 12px 2px 0; width: 50%;} /* ------- VEDUTE ------ */ #vedute img {margin-top: 20px;} #vedute p {text-align: center;} /* ------- VISITE + SCUOLE ------ */ .unito {font-weight: normal;} /* RESP 500 */ .gite p {margin: 10px 0;} .gita {display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 50px;} .gita-sx {width: 55%;} .gita-dx {width: 40%; background-color: #FCF1E8; padding: 10px;} /* COLORE h2 PLUS */ .gita-dx img {width: 100%; height: auto;} .gita-dx p {margin: 0 0 20px;} /* ------- ARRIVA ------ */ #arriva h2 {margin: 30px 0 10px 0;} /* ------- RISTO ------- */ table#risto {border-collapse: collapse; margin-top: 20px;} table#risto td {border-right: 4px solid #F5E5D5; border-bottom: 2px solid #F5E5D5; background-color: #FFF5EC; text-align: center; vertical-align: top; width: 33%; padding: 8px 5px;} table#risto img {display: block; width: 100%; margin-top: 5px;} table#risto h6 {font-size: 1.2em; font-weight: bold; margin: 5px; 0;} /* -------- ADDA ------- */ #adda-imm img {max-width: 100%;} #adda-imm p {margin: -5px 0 10px 0;} /* -------- AMICI ------- */ .immaginette {display: flex; align-items: flex-start; margin-bottom: 20px;} .immaginette img {margin: 3px 12px 0 0;} .immaginette a {display: block;} #lettere-lavatoio p {display: block; background-color: #FFF5EC; font-style: italic; padding: 15px; margin-top: 10px;} /* ------- GAL FOTO + VIDEO ------- */ #foto-video {display: flex; justify-content: space-between;} /* RESP 600 */ #foto {width: 40%;} /* RESP 600 */ #foto h4, #video h4 {text-align: center;} #foto a {display: block; background-color: #f7f4ef; padding: 8px; margin-bottom: 20px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);} /* RGBA DOPPIO? */ #foto img {display: block; width: 100%; margin-top: 5px;} #video {width: 55%;} /* RESP 600 */ .unvideo {background-color: #f7f4ef; padding: 8px 8px 12px 8px; margin-bottom: 20px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);} /* RGBA DOPPIO? */ .unvideo h3 {text-align: center; margin: 10px 0 5px 0;} .unvideo p {text-align: center; margin: 0;} .iframe-box {position: relative; width: 100%; padding-bottom: 56.25%; height: 0;} .iframe-box iframe {position: absolute; top:0; left: 0; width: 100%; height: 100%;} /* ------- GAL FOTO ------- */ .art-gal-foto {width: 100%; background-color: #666; background-image: url(/gal/fondale.gif); padding-bottom: 50px;} #foto-lista {display: flex; justify-content: center; flex-wrap: wrap; line-height: 1.6em;} #foto-lista a {margin: 0 8px;} .foto-attivo {text-decoration: underline !important;} #picture-base {position: relative; height: 580px; margin-top: 50px;} /* RESP 960 */ .picture {border-radius: 4px; box-shadow: 2px 4px 8px BLACK; margin: 0 auto; display: none;} /* HIDDEN BY DEFAULT */ .x1e66 {width: 75.0%; margin: 13% auto 2% auto;} /* 7/4 oriz */ .x1e5 {width: 72.3%; margin: 10% auto 2% auto;} /* 3/2 cuttica oriz BASE */ .x1e33 {width: 68.5%; margin: 7% auto 2% auto;} /* 4/3 iphone oriz */ .x1 {width: 57.5%; margin: 2% auto 2% auto;} /* 1/1 quadrato -- */ .x0e8 {width: 48.0%; margin: 0% auto 2% auto;} /* 4/5 vert */ .x0e75 {width: 44.8%; margin: 0% auto 2% auto;} /* 3/4 iphone vert */ .x0e66 {width: 40%; margin: 0% auto 2% auto;} /* 2/3 cuttica vert */ .prev, .next {position: absolute; cursor: pointer; bottom: 10%; width: auto; color: #AAA; font-weight: bold; font-size: 1.5em; user-select: none; -webkit-user-select: none;} .prev {left: 0; padding: 20% 30% 20% 2%;} .next {right: 0; padding: 20% 2% 20% 30%;} .prev:hover, .next:hover {color: #E8BC9B; text-decoration: none;} #caption {color: #CCC; text-align: center;} #picture-mini {display: flex; flex-wrap: wrap; margin-top: 20px;} img.mini {width: 10%; height: 10%;} .mini:hover {cursor: pointer;} .mini-attivo {border: 5px solid TAN !important; cursor: pointer;} .show {display: block;} /* ---- MODULO CF7 ---- */ .modulo {background-color: #FFF5EC; border: 1px solid #AAA; padding: 25px 30px; margin-top: 30px;} .modulo-tit1 {font-weight: bold; font-family: Oswald; font-size: 1.5em; line-height: 1.2em;} .modulo-tit2 {font-style: italic; border-bottom: 1px solid #666; padding-bottom: 5px; margin: 20px 0;} .modulo-privacy {font-size: 0.8em; line-height: 1.1em; text-align: justify; border-top: 1px solid #000; padding-top: 5px; margin-top: 50px;} .wpcf7-list-item {display: block !important; margin: 5px 0 !important;} /* DATA */ select {font-family: 'PT Sans'; font-size: 1.2em; padding: 10px;} /* PERSONE */ input[type=text] {font-family: 'PT Sans'; font-size: 1.2em; width: 100%; padding: 10px;} /* COGNOME, CITTA, TEL */ input[type=email] {font-family: 'PT Sans'; font-size: 1.2em; width: 100%; padding: 10px;} /* EMAIL */ textarea {font-family: 'PT Sans'; font-size: 1.2em; width: 100%; padding: 10px; line-height: 1.1em;} /* TEXTAREA */ input[type=submit] {padding: 10px; background-color: RED; color: WHITE; border: 1px solid #333;} /* SUBMIT */ .cf7-sez {margin-bottom: 25px;} .cf7-h1 {font-weight: bold;} .cf7-h2 {} .cf7-casella {margin-top: 3px;} .cf7-esempio {margin-top: 3px; color: #999;} .wpcf7-not-valid-tip {display: inline !important; background-color: YELLOW;} /* "COMPILA QUESTO CAMPO" */ /* ======================================================================= RESPONSIVE ========= 0 - 960px ===== */ /* ============================================================================================ 0 - 960px ===== */ @media only screen and (max-width: 960px) { body {margin: 0;} #nav1, footer {border-radius: 0;} #picture-base {height: 60vw; margin-top: 5vw;} } /* ============================================================= 0 - 955px ===== */ @media only screen and (max-width: 955px) { #link-interact {display: none;} /* ELIMINA LA VOCE "MAPPA INTERATTIVA" */ } /* ========================================================== 0 - 900px ===== */ @media only screen and (max-width: 900px) { aside {padding: 35px 0 50px 0;} aside section {width: 150px; text-align: center; margin: 25px auto 0 auto;} aside img {float: none; margin: 0;} } /* ====================================================== 0 - 800px ===== */ @media only screen and (max-width: 800px) { #vista {background-image: url("imm/base/vista-villaggiocrespidadda-1920-per-800.jpg"); background-size: 800px;} #logo {height: 72px;} #logo img {width: 265px;} #motto1 {font-size: 1.040em; line-height: 1.040em; } /* CONOSCERE */ #motto2 {font-size: 0.896em; line-height: 0.896em; margin-top: 7px;} /* DIDATTICA */ #motto3 {font-size: 1.350em; line-height: 1.000em;} /* stranieri */ #motto4 {font-size: 1.350em; line-height: 1.175em;} /* stranieri */ main {flex-direction: column; align-items: center;} aside {width: 600px; background-image: linear-gradient(#E5D2BE 0%, #F5E5D5 90%);} aside section {width: 70%; text-align: left;} aside img {float: left; margin: 3px 10px 0 0;} #conosci, #visita, #partecipa {background: none;} /* ALTRIMENTI NON SI VEDONO LE LINEE DI SEPARAZIONE */ #conosci {width: 32%;} #visita {width: 32%;} #partecipa {width: 32%;} .gruppo {flex-direction: column; padding: 0;} .pila {width: 100%;} .pila a {background-color: #F5E5D5; text-align: center; padding: 12px 5px; margin: 0 0 1px 0;} .art-gal-foto h2 {font-size: 1.2em;} } /* ================================================= 0 - 600px ===== */ @media only screen and (max-width: 600px) { #QUI {display: block;} .imm-sx {float: none; width: 100% !important; margin: 0 0 10px 0;} .imm-dx {float: none; width: 100% !important; margin: 0 0 10px 0;} .via {display: none !important;} /* TOGLIE L'IMMAGINE (IN HOME) */ #nav1 {height: 90px; flex-direction: column-reverse; padding: 0;} #home {width: 100%; padding: 0 0 10px 0;} #home a {margin: 0 10px;} #lang {width: 100%; justify-content: space-between; padding: 5px 15px 10px 15px; background-color: #e5ccb0; height: 40px;} #vista {text-align: center; background-image: url("imm/base/vista-villaggiocrespidadda-1200-per-600.jpg"); background-size: 600px; background-position: center -30px; padding: 15px 10px 10px 10px;} #unesco {display: none;} #nav2 {margin-top: 220px;} article {width: 100%; padding-left: 10px; padding-right: 10px;} aside {width: 100%;} #foto-video {display: block;} #foto, #video {width: 100%;} .mini-attivo {border: 3px solid TAN !important;} } /* =========================================== 0 - 400px ===== */ @media only screen and (max-width: 400px) { #nav1 {font-size: 1.05em;} .unito {display: block;} .tit {font-size: 0.750em; line-height: 1.0em} #risto {font-size: 0.9em;} } /* ---------- INTERACT ---------- */ #interact {position: relative; width: 100%;} #interact a {display: block; line-height: 0.9em ;text-decoration: underline; padding: 4px 0; color: #990000;} #interact a:hover {cursor: pointer; text-decoration: none; color: #333;} .v {position: absolute; visibility: hidden;} #v-fab {top: 0; left: 0; width: 483px; height: 239px; background-image: url('/imm/interact/v/fab.jpg'); } #v-ingresso {top: 47px; left: 254px; width: 75px; height: 119px; background-image: url('/imm/interact/v/ingresso.jpg'); } #v-idro {top: 55px; left: 277px; width: 30px; height: 30px; background-image: url('/imm/interact/v/idro.jpg'); } #v-case {top: 124px; left: 0; width: 682px; height: 181px; background-image: url('/imm/interact/v/case.jpg'); } #v-ville {top: 245px; left: 0; width: 239px; height: 73px; background-image: url('/imm/interact/v/ville.jpg'); } #v-palaz {top: 67px; left: 536px; width: 110px; height: 43px; background-image: url('/imm/interact/v/palaz.jpg'); } #v-castel {top: 26px; left: 473px; width: 37px; height: 47px; background-image: url('/imm/interact/v/castel.jpg'); } #v-scuola {top: 116px; left: 509px; width: 59px; height: 46px; background-image: url('/imm/interact/v/scuola.jpg'); } #v-chiesa {top: 100px; left: 574px; width: 37px; height: 42px; background-image: url('/imm/interact/v/chiesa.jpg'); } #v-dopol {top: 106px; left: 626px; width: 39px; height: 22px; background-image: url('/imm/interact/v/dopol.jpg'); } #v-spaccio {top: 221px; left: 446px; width: 52px; height: 50px; background-image: url('/imm/interact/v/spaccio.jpg'); } #v-ospedale {top: 169px; left: 252px; width: 25px; height: 25px; background-image: url('/imm/interact/v/ospedale.jpg'); } #v-albergo {top: 88px; left: 601px; width: 38px; height: 25px; background-image: url('/imm/interact/v/albergo.jpg'); } #v-bagni {top: 200px; left: 217px; width: 55px; height: 24px; background-image: url('/imm/interact/v/bagni.jpg'); } #v-lava {top: 118px; left: 176px; width: 492px; height: 115px; background-image: url('/imm/interact/v/lava.jpg'); } #v-adda {top: 0; left: 0; width: 601px; height: 114px; background-image: url('/imm/interact/v/adda.jpg'); } #v-martes {top: 0; left: 0; width: 493px; height: 79px; background-image: url('/imm/interact/v/martes.jpg'); } #v-1878 {top: 59px; left: 249px; width: 398px; height: 70px; background-image: url('/imm/interact/v/1878.jpg'); } #v-1894 {top: 24px; left: 70px; width: 612px; height: 184px; background-image: url('/imm/interact/v/1894.jpg'); } #v-1919 {top: 0; left: 0; width: 682px; height: 310px; background-image: url('/imm/interact/v/1919.jpg'); } #v-1930 {top: 0; left: 0; width: 682px; height: 320px; background-image: url('/imm/interact/v/1930.jpg'); } .p {position: absolute; visibility: hidden; background-repeat: no-repeat;} /* PERCHE' LE DIMENSIONI NON SONO PRECISE */ #p-unesco {top: 194px; left: 77px; width: 74px; height: 136px; background-image: url('/imm/interact/p/1unesco.gif'); visibility: hidden;} #p-1878 {top: 0px; left: 380px; width: 302px; height: 146px; background-image: url('/imm/interact/p/1878.gif'); visibility: hidden;} #p-1894 {top: 46px; left: 344px; width: 338px; height: 203px; background-image: url('/imm/interact/p/1894.gif'); visibility: hidden;} #p-1919 {top: 0; left: 0; width: 682px; height: 342px; background-image: url('/imm/interact/p/1919.gif'); visibility: visible;} #p-1930 {top: 64px; left: 130px; width: 243px; height: 192px; background-image: url('/imm/interact/p/1930.gif'); visibility: visible;} #p-fab {top: 32px; left: 262px; width: 299px; height: 163px; background-image: url('/imm/interact/p/fab.gif'); } #p-ingresso {top: 104px; left: 422px; width: 37px; height: 50px; background-image: url('/imm/interact/p/ingresso.gif'); } #p-idro {top: 32px; left: 472px; width: 18px; height: 36px; background-image: url('/imm/interact/p/idro.gif'); } #p-case {top: 158px; left: 310px; width: 301px; height: 110px; background-image: url('/imm/interact/p/case.gif'); } #p-ville {top: 199px; left: 188px; width: 194px; height: 71px; background-image: url('/imm/interact/p/ville.gif'); } #p-palaz {top: 135px; left: 573px; width: 70px; height: 16px; background-image: url('/imm/interact/p/palaz.gif'); } #p-castel {top: 73px; left: 574px; width: 27px; height: 27px; background-image: url('/imm/interact/p/castel.gif'); } #p-scuola {top: 174px; left: 527px; width: 27px; height: 30px; background-image: url('/imm/interact/p/scuola.gif'); } #p-chiesa {top: 176px; left: 563px; width: 23px; height: 25px; background-image: url('/imm/interact/p/chiesa.gif'); } #p-dopol {top: 174px; left: 594px; width: 32px; height: 22px; background-image: url('/imm/interact/p/dopol.gif'); } #p-spaccio {top: 238px; left: 457px; width: 15px; height: 30px; background-image: url('/imm/interact/p/spaccio.gif'); } #p-ospedale {top: 163px; left: 408px; width: 22px; height: 22px; background-image: url('/imm/interact/p/ospedale.gif'); } #p-albergo {top: 158px; left: 594px; width: 38px; height: 18px; background-image: url('/imm/interact/p/albergo.gif'); } #p-bagni {top: 187px; left: 382px; width: 39px; height: 22px; background-image: url('/imm/interact/p/bagni.gif'); } #p-lava {top: 184px; left: 362px; width: 243px; height: 7px; background-image: url('/imm/interact/p/lava.gif'); } #p-cimitero {top: 130px; left: 8px; width: 68px; height: 57px; background-image: url('/imm/interact/p/cimitero.gif'); } #p-adda {top: 0px; left: 0px; width: 689px; height: 47px; background-image: url('/imm/interact/p/adda.gif'); } #p-brembo {top: 292px; left: 0px; width: 68px; height: 54px; background-image: url('/imm/interact/p/brembo.gif'); } #p-derivaz {top: 26px; left: 410px; width: 278px; height: 41px; background-image: url('/imm/interact/p/derivaz.gif'); }