/*
Theme Name: Casa Lucia
Theme URI: https://github.com/samuloop/casa-lucia-wordpress-theme
Author: Samuele Palazzi
Author URI: https://samuloop.site
Description: A theme for the landing page for a vacancy apartment reservation
Version: 1.0.0
License: GNU Affero General Public License v3 or later
License URI: https://www.gnu.org/licenses/agpl-3.0.en.html
*/
@import url('includes/fonts/fonts.css');
@import url('includes/cursors/cursors.css');
@import url('includes/framework/framework.css');
@import url('includes/framework/framework-grids.css');
*{padding-inline-start: 0; box-sizing: border-box;}
/**,html,body{font-family: 'Source Sans 3', Arial;}*/
:root{
    --colore1: #FCF8DD;
    --colore2: #252a31;
    --colore3: #8B8481;
    --colore4: #C2B7AE;
    --colore5: #F9F9F7;
    --colore6: #FCF8DD;
    --colore7: #FFD700;
    --colore8: #D3AF37;
    --colore9: #00809D;
    --primary: #00809D;
    --muro: #FCF8DD;
   --evidenziatore: #FFD700;
    --tagline: #C2B7AE;
    --h1: #00809D;
    --standard: #181516;
    --link: #00809D;
    --sfondo: #FCF8DD;
    --linkLight: #F9F9F7;
    --grigio: #F9F9F7;
    --grigio-scuro:#362D2B;
    --bottone: #FFD700;
    --font1: rita;
    --font2: "Victor Mono", "Work Sans";
    --font3: system-ui, -apple-system, Helvetica, sans-serif;
    --font4: "Roboto Condensed";
    --font5: arial;
}
.wrapper{margin:0 auto; padding: 0 36px; }
*:not(h2,h3,h4,.cta,.cta a,strong,li){font-family:var(--font1); font-size:15px; line-height:1.55; font-weight:300;}
ul{list-style-type:disc;} ul li{padding-left:15px; margin:15px; }
* a:not(header a, .hero_content a, .cta){color: var(--link) !important; font-weight:400 !important; text-decoration:underline !important;}
body{background-color:var(--colore5); padding:0; margin:0; overflow-x:hidden;}
/*.hero {margin:0; margin-top:87.5px; position: relative; background-image: url("/foto/appartamento-da-lucia-fano.jpg");  background-size: cover;  background-repeat: no-repeat; color:var(--colore1);  background-position: center;  width: 100vw; height: 880px; z-index:1; font-family:var(--font4);}*/
.hero {margin:0; margin-top:10px; color:var(--colore2); width: 100vw; padding:55px; z-index:1; font-family:var(--font1); margin-bottom:55px; box-shadow:1px 1px 6px silver; background-color: var(--muro); opacity:1;}
.hero .wrapper{ z-index:3; }
.hero_content {text-align: left; margin-top: 75px;}
.hero_content h1 {font-size: 36px;  margin: 0;  font-weight: 700; color:var(--h1);}
.hero_content h2 {font-size: 22px;  margin: 1rem 0;  font-weight: 500; color:var(--colore2);}
.hero_content p.tagline{font-family: var(--font1); font-size: 18px; font-weight: 300; text-decoration: none; line-height: 1.42; }
.hero_datePicker{background-color:transparent;  color:var(--colore2);}
.cta,.hero_datePicker .passaggio1{background-color: var(--bottone); font-weight:bold; color: var(--colore2); border:1px solid var(--colore2);}
.cta{padding:8px; cursor:hand; cursor:pointer;}
a.cta{text-decoration:none !important; color:var(--colore2) !important; font-weight:bold !important;}
.hero_datePicker form{background:none; padding:1rem; border:none;}
@media (min-width: 1280px){
.hero_datePicker form{margin-left:315px;} 
.hero_datePicker #form_blocco_1{padding-top:25px;} 
#servizi.wrapper,#gps.wrapper,#orari.wrapper,#altreinfo.wrapper,#contatti.wrapper,#tariffe.wrapper{width: 1024px !important;}
}
@media all and (max-width: 1090px) {
.hero .wrapper{} 
.hero_datePicker{width:100%; }
}
.hero_datePicker form label{padding:0.567em 0; }
.hero_datePicker form input[type="submit"]{margin-top:25px; }
.hero_datePicker form legend{text-decoration:none; display:none; border-bottom:none !important; color:var(--colore5);}

#section_recensioni{text-align:center; margin:35px; margin-top:55px;} 
#section_recensioni .wrapper{padding:15px;}
#section_recensioni p{margin-bottom:55px;}
.desc{padding:15px 75px;}
#orari{font-family:var(--font1); font-size:15px; line-height:1.55; font-weight:200; margin:55px auto;}
#gps{font-family:var(--font1); font-size:15px; line-height:1.55; font-weight:200; margin:55px auto;}
@media all and (max-width: 1090px) {
.hero_content h1 {
    font-size: 24px;
margin:5px 0;
  }
.hero_content h2 {
    font-size: 14px;
margin:5px 0;
  }
.hero_content p.tagline{
      font-size: 10px;
margin:5px 0;
}
section h2{font-size:22px !important;}
.hero{padding:20px 6px;}
#section_recensioni{margin:5px; margin-top:5px;} 
#section_recensioni{text-align:center; margin:5px; margin-top:5px;} 
#section_recensioni .wrapper{padding:5px;}
#section_recensioni p{margin-bottom:4px;}
section figure{margin:15px 0 !important;}
.desc{padding:5px;}
#orari{margin:15px auto;}

}

/* .wrapper{margin:0 auto; padding:0;} */
@media all and (min-width: 240px) and (max-width: 699px){


}
@media all and (min-width: 1055px) and (max-width: 1319px){
    .wrapper{width: calc(98vw - 72px) !important;}   

}
@media all and (min-width: 1320px){
   .wrapper{ width: calc(80vw - 72px) !important;}   

}
footer{background-color: var(--colore2); padding:55px 0; font-weight:400;}
footer a{font-size:0.835rem; color:var(--colore1); font-weight: 400; text-transform: lowercase;}
footer p{ color:var(--colore1); font-size:0.75rem; justify-content: center; align-items: center; padding: 0; text-align: center;}
.homehero{width:calc(100vw - 12px); padding:55px 0; align-items: center; justify-items: center; background: rgb(255,242,239); background: linear-gradient(90deg, rgba(255,242,239,1) 0%, rgba(255,242,239,1) 50%, rgba(255,242,239,1) 100%);}

@media all and (max-width:1024px){
    .espace{margin-top:55px; text-align: center; vertical-align: middle;}
}

.servizio{
color: var(--colore2); 
font-family: var(--font1); padding:14px;
  line-height:1.55;
font-size:0.9rem;
 .title {
    font-size: 1.2rem;
    font-weight: 700;
    word-break: break-all;
    clear:both;
margin-top:8px;
     color: var(--colore2);
position:relative;
  }
.icon {
     margin: 0; padding:0; height:24px; position: relative;
  }
.icon img{height:24px; padding:0; margin:0; width:auto; position:relative;  background-color: transparent;}
.title::after{ 
content: '';
    position: absolute;
    left: 0;
    right: 0;
 
   bottom: 0; 
width:75%;
z-index:9;
    height: 20px; /* Altezza della linea */
    background-color: var(--evidenziatore); 
opacity: 0.2;
  }
}
section h2{font-size:2.1rem; font-weight:900; color:var(--h1);}
#tariffe{font-family:var(--font1); font-size:15px; line-height:1.55; font-weight:200; }
#tariffe figure{width: 100%;
  max-height: 300px;
  margin: 55px;
  position: relative;}
#tariffe figure figcaption{display:none;}
#tariffe figure img,#tariffe figure iframe{
border-radius: 1rem;
  display: block;
  position: relative;
width: 100%;
}
#tariffe figure::before {
  content: "";
  background: var(--colore2);
  background: linear-gradient(90deg,var(--colore8),var(--colore6));
  transform-origin: 40% 80%;
  border-radius: 1rem;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(5deg);}

#orari figure{width:100%;
  max-height: 300px;
  margin: 0 155px 0 0;
  position: relative;}
#orari figure figcaption{display:none;}
#orari figure img{
border-radius: 1rem;
  display: block;
  position: relative;
width: 100%;
}
#orari figure::before {
  content: "";
  background: var(--colore2);
  background: linear-gradient(90deg,var(--colore8),var(--colore6));
  transform-origin: 40% 80%;
  border-radius: 1rem;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(5deg);}

#gps figure{width:100%;
  max-height: 300px;
  margin: 0 155px 0 0;
  position: relative;}
#gps figure figcaption{display:none;}
#gps figure img{
border-radius: 1rem;
  display: block;
  position: relative;
width: 100%;
}
#gps figure::before {
  content: "";
  background: var(--colore2);
  background: linear-gradient(90deg,var(--colore8),var(--colore6));
  transform-origin: 40% 80%;
  border-radius: 1rem;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(5deg);}


dialog {
        padding: 20px;
        border: none;
        border-radius: 5px;
		position: fixed;
		left:calc(25% - 75px);
		top: calc(25%);
		width: 500px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
		background-color: var(--colore2);

      }
	  #messag{color: var(--colore6);
		font-weight: 100;
		font-size: 1.55rem;
		height: 80px;
		text-align: center;
}
      #x{position: absolute; right: 12px; top:6px;
        top: 12px; font-size: 1.78rem; text-shadow: 2px 2px 4px #F2F3F2;
		color: #F2F2F2; background: none; border: 1px solid #F2F2F2; border-radius:3px; padding:6px 12px; cursor:pointer;  cursor: hand;
      }