@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"); :root { --font:             'DM Sans';
--titoli:           'Jost';
--hand:             ''; --maincolor:        #00A098;
--second:           #113E6A;
--fontcolor:        #333;
--grey:             #F3F1F1;
--bianco:           #fff; --transition:       250ms ease;
} html, body              { overflow-x: hidden; width: 100%;}
html, body              { font-size: 16px !important; font-size: 100%;  }
body            		{ font-family: var(--font), Serif;  font-weight: 400;  color: #111;  }
section#catalogo        { background-color: var(--grey); }
.grey                   { background-color: var(--grey); }
.container-fluid        { padding: 0; }
.site-title             { background-image: url(//www.studiobellancacirio.com/wp-content/themes/StudioBellancaCirio/img/logo.svg); text-indent: -9999px; display: block; }   
.site-description       { display: none; }
.pagina                 { padding: 40px 0; }
footer                  { display: block; padding: 50px 0; background-color: var(--second); }
.credit                 { margin:40px 0 20px 0; }
.credit img             { width: 65px; height: auto; }
.free                   { width:70px; height:auto; margin: 40px 0; }
#mapid                  { width: 100%; height: 550px; }
.mission                { padding: 100px 0; } .hero       { position: relative; background-image: url(//www.studiobellancacirio.com/wp-content/themes/StudioBellancaCirio/img/hero-prova.webp;); background-size: cover; display: flex;  align-items: center;}
#overlay    { position: absolute; top: 0; left: 0; background-color: rgba(0, 160, 152, 0.4); display: block; width: 100vw; height: 100%; }
.hero h2    { color: var(--bianco); z-index: 9999;  font-size: 4em; } #contatti       { width: 100vw;  color: var(--bianco); font-size: 1.2em; font-weight: 600; border-top: 1px solid #fff; }
#contatti i     { margin-right: 15px; font-size: 24px; }
#contatti a     { color: var(--bianco); text-decoration: none; width:100%;    height:100%; }
#contatti > .row div                    { border-right: 1px solid #fff; padding: 20px 0; }
#contatti > .row div:last-child         { border-right: 0 !important; }
#contatti > .row div:hover              { background-color: #fff; color: var(--second); }
#contatti > .row div:hover a            { color: var(--second); } a, input, submit, textarea, button   { transition: all 0.3s ease-out 0.1s; }
.reveal         { position: relative; transform: translateY(150px); opacity: 0; transition: 2s all ease;}
.reveal.active  { transform: translateY(0); opacity: 1;} #icone h4       { color: var(--second); font-weight: 600; margin:0 0 0 20px; }
#icone img      { height: 50px; width: auto; }
#icone a        { color: var(--second); text-decoration: none; display: flex; align-items: center; }
#icone a:hover h4    { color: var(--maincolor); }
#icone .col                     { transition: opacity 0.3s ease, transform 0.3s ease; } #icone .row:hover .col          { opacity: 0.3; } #icone .row:hover .col:hover    { opacity: 1; transform: scale(1.05); z-index: 1; } .staff          { padding: 80px 40px; }
.staff img      { margin-bottom: 20px; }
.staff h4       { font-weight: 600; font-size: 18px; }
.staff h6       { color: var(--second); font-size: 14px; font-weight: 400; text-transform: uppercase;}
.staff a        { text-decoration: none; }
.card-body { padding: 0;}
.card               { transition: transform 0.3s ease, box-shadow 0.3s ease; border: none; }
.card:hover         { transform: translateY(-5px) scale(1.02); z-index: 2; }
.card:hover h4      { color: var(--second) }
.staff .owl-stage-outer  { padding: 30px 0; } 
.staff .owl-dots         { text-align: center; }
.staff .card           { min-height: 400px !important; margin: 0 20px; border: 0; padding: 0; } 
.staff #copertina      { height: 200px; max-height: 285px; } 
.staff #copertina      { overflow: hidden; width: 100%; position: relative; display: block; }
.staff .owl-dots span { position: relative; height: 10px; width: 10px; border-radius: 50%; display: block; background: var(--green); margin: 0 5px; }
.staff .owl-dots .active                { box-shadow: none; }
.staff .owl-dots .active span           { background: var(--red); box-shadow: none; height: 12px; width: 12px; margin-bottom: -1px; }
.owl-theme .owl-nav                     { margin-top: 0 !important; text-align: left !important; }
.owl-theme .owl-nav [class*='owl-']     { color: var(--blu) !important; font-size: 40px !important; background: transparent !important; }
.owl-next:hover i, .owl-prev:hover i    { color:var(--giallo); transform: scale(1.4); }
.owl-next:focus, .owl-prev:focus        { outline: none; }
.disabled                               { display: none; }
.owl-item               { max-height: 350px; overflow: hidden; }
.owl-nav  i             { font-size: 45px; color: var(--second);}
.owl-nav  i:hover       {  color: var(--maincolor);} .form           { background-color: #EEEEEE; padding: 100px 80px; background-image: url(//www.studiobellancacirio.com/wp-content/themes/StudioBellancaCirio/img/back-form.png); background-repeat: no-repeat; background-position: bottom left; }
.form h3        { font-size: 2.5em; line-height: 110%; color: var(--second);  } .blog h4        { font-size: 1.2em; line-height: 120%; }
.blog h5        { font-size: 0.9em; line-height: 120%; color: var(--second); margin: 30px 0 10px 0; font-weight: 700;  }
.blog p         { line-height: 150% !important;  }
#cosa   {  background-image: url(//www.studiobellancacirio.com/wp-content/themes/StudioBellancaCirio/img/cosa-facciamo.webp); background-repeat: no-repeat; background-size: cover;  }
#come   {  background-image: url(//www.studiobellancacirio.com/wp-content/themes/StudioBellancaCirio/img/come.webp); background-repeat: no-repeat; background-size: cover;  }
.dz-btn {
position: absolute;
bottom: 0;
right: 20%;
background-color: #fff;
padding: 12px 12px 0 12px;
border-radius: 50px 50px 0 0;
z-index: 1;
color: var(--bs-secondary);
}
.dz-btn a {
font-size: 24px;
border-radius: 60px !important;
}
.dz-btn::before,  .dz-btn::after {
content: "";
width: 40px;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M0 0V50H50C22.3858 50 0 27.6142 0 0Z' fill='white'/></svg>");
height: 40px;
position: absolute;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
transform: rotate(270deg);
left: -37px;
bottom: 0;
}
.dz-btn::after {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M0 0V50H50C22.3858 50 0 27.6142 0 0Z' fill='white'/></svg>");
left: auto;
right: -37px;
bottom: 0;
transform: rotate(0deg)
}
.wp-block-navigation .wp-block-navigation-item { display: inherit !important; position: relative;}
.wp-block-navigation__responsive-container-content   { margin: 100px 0;}
ul.wp-block-navigation__container   { }
ul li.wp-block-navigation-item   { display: block; width: 30%; background-color: var(--maincolor) !important; padding: 40px; height: 140px; text-align: left; border-radius: 8px; }
ul li.wp-block-navigation-item a   { font-family: var(--titoli); font-size: 24px; color: #fff !important; } .post-navigation { border-top: 1px solid #ddd; position: relative; margin: 80px 0;  }
.post-navigation-inner {  max-width: 100%; padding: 30px 0; margin: 0 auto; }
.post-navigation-inner::after {  content: ""; clear: both; display: block; }
.post-nav-prev,.post-nav-next { display: block; float: left; width: 35%}
.post-navigation p { display: inline-block; padding-bottom: 2px; border-bottom: 2px solid var(--secondcolor); margin-bottom: 8px; font-size: 0.8em; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color:var(--secondcolor); }
.post-navigation h4 { display: block; font-size: 0.8em; font-weight: 600; line-height: 130%; margin: 0}
.post-navigation h4 a { color: var(--maincolor); text-decoration: none }
.post-navigation h4 a:hover     { color: var(--secondcolor);}
.post-nav-next                  { float: right}
.post-nav-next,.post-nav-next h4 { text-align: right} html 				  { text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;} 
body 				  { *zoom: 1; text-align: left; overflow-x: hidden; -ms-word-wrap: break-word; word-wrap: break-word; } h1, h2, h3,h4, h5, h6    { font-family: var(--titoli), 'serif'; color:var(--maincolor); font-weight: 500; font-style: normal; text-transform: uppercase; line-height: 120%;  }
h5.tagline      {  font-size: 0.7em; color: var(--second); font-weight: 500; letter-spacing: 2px;  }
.singolo h4     { margin: 60px 0 20px 0;}
.pagina h4      { margin: 60px 0 20px 0;} p    { font-family: var(--font), sans-serif;  margin-bottom: 20px;  line-height: 180%; }
p.sottotitolo         { font-family: var(--titoli), 'serif'; color:var(--second); text-transform: uppercase; font-size: 1.4em; font-weight: 800; line-height: 140%; margin: 40px 0;}
footer p              { color: var(--bianco); font-size: 14px; line-height: 150% }
footer h3             { font-size: 18px; color:#fff; font-weight: 800;  }
footer h4             { font-size: 21px; color:var(--maincolor); font-weight: 600; margin: 0 0 20px 0; }
footer a, a#cookie    { color: var(--bianco); font-style: normal; text-decoration: underline; text-underline-offset: 8px; text-decoration-color: rgba(238, 238, 238, 0.5); }
footer a:hover        { color: var(--bianco); opacity: 0.8;   }
footer img            { width: 100px; height: auto; margin:0 0 20px 0; }
a#cookie              { font-size: 14px; }
a                     { }
a:link                { }
a:focus               { outline: 0;}
a:hover               { text-decoration:none; }
ul                    { }
ul li                 { padding: 2px 0; }
.widget ul                { margin:20px 0;; padding: 0; list-style-type: none; }
.widget ul li             { border-bottom: 1px solid #eee;  padding: 10px 0; }
.widget ul li a           { font-size: 14px; font-weight: 400; color: #086F38; }
.widget ul li a:hover     { color:#222; }
.footwid ul                { margin:0; padding: 0; list-style-type: none; }
.footwid ul li             {  }
.footwid ul li a           { font-size: 14px; }
ul.sitemap          { columns: 2; -webkit-columns: 2; -moz-columns: 2; list-style-type: none; padding: 0 !important; margin: 40px 0;  column-gap: 40px;}
ul.sitemap li       { line-height: 30px; }
ul.sitemap li a     { color: var(--gold); text-decoration: none; border-bottom: 1px dotted rgba(212, 165, 53, 0.5); padding-bottom: 1px; }
ul.sitemap li a:hover     { color: var(--maincolor);  }
ul.lista-blocchi {
display: flex;
flex-wrap: wrap; gap: 20px; padding: 0 !important;
margin: 0;
list-style: none; }
ul.lista-blocchi li {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 150px;
text-decoration: none;
color: var(--second);
font-size: 1.3rem;
font-weight: 800;
background: #fff;
box-shadow: 0px 0px 9px -3px rgba(0, 0, 0, 0.4);
transition: transform 0.2s ease, box-shadow 0.2s ease;
border-radius: 20px;
width: calc(33% - 20px); box-sizing: border-box;
border-bottom: 2px solid var(--maincolor);
line-height: 24px;
padding: 20px 40px; }
ul.lista-blocchi li:hover {
transform: translateY(-5px);
box-shadow: 0px 12px 20px -5px rgba(0, 0, 0, 0.25);
}
ul.lista-blocchi li a {
text-decoration: none;
color: inherit;
width: 100%;
height: 100%;
display: flex;
align-items: center; justify-content: flex-start; text-align: left;
box-sizing: border-box;
}
.pagina p       { text-align: justify!important; hyphens: auto; }
strong          { color: var(--maincolor); }
.gut-10         { margin-top: 100px;}
#cosa ul, #come ul                  { list-style: none; padding: 0; margin:40px 0; }
#cosa ul li, #come ul li            { font-weight: 600;   }
#cosa ul li a, #come ul li a        { color: #fff; text-decoration: none;   }
#cosa ul li a:hover, #come ul li a:hover        {  color: var(--second);  }
ul.lista li, ul.lista li                    { transition: opacity 0.3s ease, transform 0.3s ease; transform-origin: left; opacity: 1;}
.lista:hover li, .lista:hover li              { opacity: 0.3;}
.lista:hover li:hover, .lista:hover li:hover  { opacity: 1; transform: scale(1.05); z-index: 1;}
ul.services                  { list-style: none;  margin: 20px 0; }
ul.services li               { padding: 10px 0; }
ul.services li a { color: var(--second); text-decoration-line: underline; text-decoration-color: var(--second); text-decoration-thickness: 0.02em; text-underline-offset: 5px; }
ul.services li a:hover       { color: var(--maincolor); text-decoration-color: var(--maincolor); } #crumbs                 { color: #FFF; }
#crumbs a                 { color: #FFF; text-decoration: underline; text-underline-offset: 5px; } span.wpcf7-list-item { margin: 0;} .alignwide { margin: 32px calc(25% - 25vw); max-width: 100vw; width: 100vw; } 
.alignfull { margin: 32px calc(50% - 50vw); max-width: 100vw; width: 100vw; }
@media (max-width: 920px) {
.alignwide { margin: 32px calc( ( 767px - 920px ) / 2 ); max-width: 920px; width: 920px; }
}
.alignleft,.alignright  { margin-bottom: 20px;    width: 40%; }
.alignleft              { float: left;	margin: 5px 40px 30px 0; }
.wp-block-cover .wp-block-cover-image-text, .wp-block-cover .wp-block-cover-text, .wp-block-cover h2, .wp-block-cover-image .wp-block-cover-image-text, .wp-block-cover-image .wp-block-cover-text, .wp-block-cover-image h2 {  font-size: 28px; color: #fff; font-weight: 200; letter-spacing: 4px; text-transform: uppercase; }
.wp-block-cover, .wp-block-cover-image { min-height: 500px;}
.wp-block-image img {    height: auto;    width: 100%; } .btn        { font-size: 16px; font-weight: 700; padding: 10px 25px; letter-spacing: 1px; text-transform: uppercase; } .btn-primary        { background-color: var(--maincolor); border-color: var(--maincolor); color: #fff;  }
.btn-primary:hover  { background-color: var(--second); border-color: var(--second); color: #fff; }
.btn-primary.disabled, .btn-primary:disabled { color: var(--maincolor); background-color: #eee; border-color: #eee;} .btn-outline-primary {
color: var(--maincolor);
border-color:var(--maincolor);
text-transform: uppercase; font-size: 11px; letter-spacing: 1px; font-weight: 600;
padding: 8px 10px;
}
.btn-outline-primary:hover {
background-color: var(--second);
border-color: var(--second);
color: #fff;
} .navbar         { padding: 0 !important;  }
.navbar-light .navbar-nav .nav-link { font-size: 16px; font-weight: 600; }
.nav-link { font-family:var(--font), 'serif'; font-weight: 600; font-style: normal; text-transform: uppercase; color: var(--second);  }
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { color: var(--maincolor); }
.navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link { color: var(--rosa); font-weight: 700; }
.navbar-expand-md .navbar-nav .dropdown-menu        { top: 108px; border: none; border-radius: 0; }
.navbar-expand-md .navbar-nav .dropdown-menu li     { border-bottom: 1px solid #eee; }
.navbar-expand-md .navbar-nav .dropdown-menu li:last-child     { border-bottom: none; }
.dropdown-menu.show {
min-width: auto !important; width: auto; white-space: nowrap; } @media (max-width: 767px) {
.row > .col {
flex: 0 0 100%; max-width: 100%; }
} @media all and (max-width: 986px) {
header          { padding: 0; margin-bottom: 20px; }
section         { padding: 0px 20px !important;}
#menu-icon      { display:block; }
.positioning    { position: absolute; left: 0; bottom:0; width: 100vw; }
.titolo h2       { font-size:28px; text-align: center; margin: 20px 40px; } 
.single-post .titolo h2       { font-size:21px; } 
.pagina         { padding: 30px 15px; }
.dropdown-menu { border: 0; text-align: center; background-color: #f4f4f4;}
.dropdown-menu li:last-child { border: 0 !important; }
.dz-btn { display: none; }
.post-navigation h4 a { font-size: 13px;  }
.form       { padding: 40px 20px; background-size: contain; background-position: bottom left; }
.form h3    { font-size: 1.5em; margin-top: 40px; }
.hero       {  width: 100%; height: 300px; background-position: right top; }
.hero h2    { font-size: 2em; position: absolute; bottom: 0; left: 50%; text-align: center; transform: translateX(-50%); }
#contatti           { display: none; }
#contattimob        { }
#contattimob a      { font-size: 30px; color: var(--maincolor);}
ul.lista-blocchi li { width: 100%;  }
.pagina ul      { padding: 0 0 0 40px;   }
#icone          { margin: 40px 0; padding: 0 20px;  }
#icone .col     { margin: 20px 0; padding-left: 10vw;   }
#cosa, #come                { margin: 40px 0; padding: 40px 0 !important;}
#cosa ul li, #come ul li    { font-size: 15px; }
} @media all and (min-width: 986px) {
html, body { overflow-x: hidden; width: 100%;}
header                { padding: 30px; }
section               { padding: 80px 0; }
section.titolo         { padding: 0; }
#icone                { margin: 150px 0 40px 0; padding: 0 80px;  }
.hero                  { height: calc( 100vh - 155px ); min-height: 600px; }
section.preventivo     { padding: 0 0 80px 0 !important; }
.navbar-expand-md .navbar-nav .dropdown-menu a.nav-link     { padding: 5px 16px !important; }
.positioning    { position: absolute; left: 40px; top:50%; transform: translateY( -50%); }
.titolo_staff    { position: absolute; left: 40px; bottom:40px;  text-align: left;}
.img-testata { position: relative } 
.img-opacity { background-color: rgba(231,247,247,.65); height: 300px; position: absolute; top: 0; width: 100%; z-index: 1 }
.img-title-single-page  { overflow: hidden; position: relative; max-height: 750px } 
.img-title-staff        { overflow: hidden; position: relative; max-height: 750px } 
.img-title-single-page img                  { width: 100%; }
.pagina ul  { padding: 0 0 0 80px;   }
.single-post .img-title-single-page         {  background-color: var(--second); } 
.single-post .img-title-single-page h2      {  font-size:36px;  } 
.single-post .img-title-single-page img     {  margin-top: -200px; mix-blend-mode: luminosity;  } 
#contatti       { background-color: rgba(17, 62, 106, 0.2);  }
#contattimob    { display: none !important; }
#cosa, #come               { min-height: 100vh; }
#cosa ul li, #come ul li   { font-size: 21px; } h3              {  font-size: 2.2em; }
h4              {  font-size: 1.7em;  }
.titolo h2       { color: #fff; font-weight: 500; text-shadow: 0px 0px 4px var(--second);  } 
.hero h2        { margin-left: 40px; padding-bottom: 300px; }
.img-title-staff h2     { font-size:40px;  } 
.img-title-single-page h2   {  font-size:60px;  } 
} @media (max-width: 480px) {
.site-title             { background-size: cover;  width: 280px; height: 70px; margin: 20px auto; }   
.site-title a           { display: block; height: 70px; width: 280px; }
.menunav                { padding-bottom: 40px; background-color: transparent; }
.navbar-toggler         { margin: 0px auto; border-color:transparent !important; }
.navbar-nav             { text-align: center; margin-bottom: 40px; }
.navbar-nav li          { border-bottom: 1px solid #ededed;  }
footer                  { text-align: center; }
footer h4               {  margin: 40px 0 20px 0;}
.navbar-light .navbar-nav .nav-link     { color:var(--maincolor); }
.scelta                 { text-align: center; }
.scelta .icona          { margin: 20px 0; }
.singolo, .preventivo   { padding: 20px !important; }
.titolo                  { padding: 0 !important; min-height: 310px; position: relative; }
.single-post .titolo     { min-height: 430px !important; }
.img-title-single-page  img         { height: 200px; width: auto;  position: absolute; right: 0;  }
img.testata                         { height: 300px;  width: 100% !important; object-fit: cover;  }
#crumbs                 { margin-bottom: 20px; }
#contatti               { font-size: 16px; }
#contatti .row > div    { margin: 5px 0; }
.servizi > div          { margin: 5px 0; }
.call                   { margin: 20px 0;}
.slide-item {
font-size: 1.2rem; min-height: 120px; padding-left: 15px; }
#crumbs                 { display: none; }
.post-navigation-inner  {  padding: 30px 20px;  }
} @media (min-width: 480px) and (max-width: 760px) {
.site-title             { background-size: cover; height: 85px; width: 300px; margin: 50px 0; }   
.site-title a           { display: block; height: 85px; width: 300px; }
} @media (min-width: 768px) and (max-width: 1024px) {
.site-title             { background-size: cover; width: 290px; height: 70px;  margin: 10px 0; }   
.site-title a           { display: block; width: 290px; height: 70px; }
.hero h2                { font-size: 3em;}
.navbar-light .navbar-nav .nav-link { font-size: 13px; font-weight: 500; }
#contatti               { font-size: 0.8em; }
#contatti i             { font-size: 18px; }
#icone                  { padding: 0 20px; }
#icone h4               { font-size: 1em; }
.staff #copertina       { height: 100px; max-height: 194px; }
} @media (min-width: 1025px) and (max-width: 1280px) {
.site-title             { background-size: cover; height: 85px; width: 300px; margin: 10px 0; }   
.site-title a           { display: block; height: 85px; width: 300px; }
.titolo                  { height: 80px; line-height:80px; padding: 0 20px;}
} @media (min-width: 1280px) {
.site-title             { background-size: cover; width: 400px; height: 95px;  margin:0; }   
.site-title a           { display: block; width: 400px; height: 95px; }
.nav-link               { padding:18px !important;  }
.footwid ul             { max-width: 70%; }
.scelta                 { display: inline-block; margin-bottom: 60px;  }
.scelta h4              { margin-bottom: 20px;  }
.scelta p               { display: block;  float: left; margin: 0 0 0 30px; width: 250px;  }
.scelta .icona          { display: block; vertical-align: middle; float: left; width: 50px;}
.singolo               { padding: 80px 0; }
.titolo                 { min-height: 500px; padding: 0; }
}