/*
Theme Name: Riccardo Alberti
Theme URI: https://www.riccardoalberti.it/
Author: darfil

*/

@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,500;0,700;1,500;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@font-face {
  font-family: "indovina";
  src:
    url("fonts/indovina.woff?4") format("woff"),
    url("fonts/indovina.ttf?4") format("truetype"),
    url("fonts/indovina.svg#indovina?4") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

BODY {font-family: 'Open Sans', sans-serif;font-weight:400; font-size:100%; color: #444; margin: 0;padding:0;background:#fff; text-align:justify; line-height:1.7; -webkit-text-size-adjust: 100%}
a:link, a:visited, a:before, a:after, a *, a *:before, a *:after, input {text-decoration:none;-webkit-transition: all 0.2s linear; transition: all 0.2s linear}
a:link, a:visited, .home h2 a:hover {color:#025380; display:block}
a:hover, .home h2 a {color:#000}
 .home h2 a {display:inline-block}

.content a {display: inline}
.content a.wp-block-button__link {display:inline-block; margin-top:30px}
.content h2, .content h3, .content h4 {text-align: left;margin-top:40px}

/* form e img */
header, main, footer, figure, blockquote {display:block;margin:0}

body > header, main, #footer {position:relative;padding:0; margin:0 auto; text-align:center}
body > header, footer, main {min-width:320px}
main, body > header {margin:0 auto}

#cmplz-document {max-width: 100% !important}
.grecaptcha-badge {display:none !important}
.recaptcha {font-size:10px}

*, *:after, *:before {-webkit-box-sizing: border-box; box-sizing: border-box;-webkit-font-smoothing: antialiased;-webkit-appearance:none}
input[type="checkbox"] {-webkit-appearance:checkbox}
input[type="radio"] {-webkit-appearance:radio}
p {margin:10px 0}
.imgdx {float:right;margin:5px 0 0 5px}
.imgsx {float:left;margin:8px 5px 0 0}
h1, h2, h3, h4 {position: relative;margin:0;font-weight:600; line-height: 1.2; color:#025380; font-family: 'Alegreya Sans', sans-serif}
.home h1, .home h2 {font-size: 30px; text-align: center;}
.home h2 {margin:40px auto}

h2 {font-size:30}
h3 {font-size:22px}
h4 {font-size:16px}
h1.entry-title {margin-bottom:20px}
div.wpcf7 {margin-bottom:30px}
.wpgmza_map {margin-top:10px}

b, strong {font-weight: 700}
img {border:0;display:block}
form {margin:0}
ul {margin:0; padding:0; list-style:none}
.content ul {margin:10px; padding:10px; list-style:initial;text-align: left}
.content ul li, .content ol li {margin-top:20px}
.content img {max-width:100%; height:auto}
*:focus {outline:none}
.clearfix:after {content: ""; display: table; clear: both;*zoom: 1}
.center {text-align:center; clear:both}
.owl-stage {margin:0 auto}

#cmplz-document {max-width: 100% !important}
.metaslider .caption {display:none !important}
#blogbreadcrumb {margin-bottom:20px}

#hblog h2 a {display: inline-block; margin:0 auto}

@media screen and (max-width: 782px) {
.admin-bar #menu {top: 46px}
}
@media screen and (min-width: 783px) and (max-width: 1199px) {
.admin-bar #menu {top: 32px}
}

#gallery-2 .gallery-item img {border: 1px solid #cfcfcf}

.pagination {margin-top:50px}
.pagination .nav-links {display: flex; justify-content: center}
.pagination .nav-links > * {width:40px; height:40px; line-height:40px; border-radius: 50%; display:block; background: #EBF1EE; color:#333; margin:0 5px; font-weight:500; text-align: center}
.pagination .nav-links > .current, .pagination .nav-links a:hover {background: #025380; color:#fff}

input[type="text"], input[type="number"], input[type="email"], input[type="submit"], textarea, select  {font-family: Lato, sans-serif; font-size:15px; margin:0; padding:0; border:0; color:#333}
input[type="text"], input[type="email"], input[type="number"], select, textarea {border-radius:10px; padding:10px; background: #fff}
input[type="text"], input[type="email"], input[type="number"] {height:40px}

#contattic {background: #f5f5f5; padding:30px; border-radius: 10px; font-size: 85%}
.contatti {text-align: left; margin-bottom:20px}
label {text-align: left; display: inline-block;}
.contatti > div {margin-bottom:10px}
.contatti > div input[type="text"], .contatti > div input[type="email"], textarea {width:100%; margin-top:3px}
.contatti > p {clear:both;width:94%;margin:3%}

#policy {font-size:80%; margin:20px 0}

span.wpcf7-list-item {margin: 0 !important;}

input[type="submit"] {border:0;height:40px;padding:0 15px; border-radius:5px; font-size:18px; text-transform:uppercase; cursor:pointer; background:#025380; color:#fff; font-weight:600}
input[type="submit"]:disabled, input[type="submit"]:disabled:hover, input[type="submit"]:disabled:hover {background:#C1CFDB;color:#fff;cursor:text}
input[type="submit"]:hover {background:#025380}
input[type="submit"]:active {background:#025380;}
::-webkit-input-placeholder {color: #999; font-style: italic}

.submit {position:relative; display:inline-block; height: 34px}
.submit input[type="submit"] {padding-right:25px}
.submit:after {font-family:indovina; content:'q'; display:block; color:#fff; font-size:15px; position:absolute; top:0; right:10px; line-height:34px; pointer-events: none}

span.wpcf7-not-valid-tip {color: #C62E1F !important; font-size: 15px !important}
div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {background:#D1AA66 !important}
div.wpcf7-mail-sent-ok {background:#025380 !important}

.content {margin:0 auto; max-width: 1200px; text-align: justify; padding:0 20px}

#top {width:100%;padding:15px;text-align: left; position:relative; background:#025380;display: flex; justify-content: space-between; align-items: center}
#logo, #slide {position:relative}
#logo {width:140px}
#logo a {display:block}
#logo a img{width: 100%;height: auto}
#headerimg img {width: 100%;height: 300px}

.objectfit img {
	object-fit: cover;
	min-width: 100%;
	min-height: 100%;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

#slide {margin:0 auto}
#slide figure > div {height:550px}
#slide img {object-fit: cover; min-width: 100%; min-height: 100%; width: 100%; height: auto; max-width: 100%; max-height: 100%}
#slide figcaption {position: absolute; bottom:5%; left:50%; transform:translateX(-50%); background: rgba(255, 255, 255, .6); padding: 30px; border-radius: 8px; width: 90%; max-width: 500px}
#slide h1 {color:#025380;font-size: 24px; width:100%; line-height: 1}
#slide figcaption a {display: inline-block;color:#025380; border: 2px solid #025380; border-radius: 8px; height:40px; line-height:36px; padding:0 20px; font-weight: 700}
#slide figcaption a:hover {color:#fff; background: #025380}

body > header > img {width:100%; height: auto}

.home body > header:before {height:70px}

a#toggle {width: 40px; height: 40px; text-align: center; display: none; transition: all ease-out 0.3s;}
a#toggle:before {display:block;font-family:indovina; content:'M';font-size:22px; width:40px;height:40px;line-height:40px; color:#fff; text-align:center}

.open-menu a#toggle:before {content:'X';color:#fff; font-size:20px}
a#toggle:hover:before {color:#31B1C2}

footer {position:relative; width:100%; text-align:left;margin-top: 50px}

#footer {background: #025380; color:#fff; padding: 50px 0}
#footer > div {margin:0 auto; max-width: 1360px; padding:0 20px; font-size: 18px}
#footer a {color:#fff}
#footer a:hover, #footer a:hover:before {color:#eee}

#footer a, #credits a{display:inline-block}
#credits {max-width: 1360px; text-align: center; padding:10px 7%;margin: 0 auto}

#tel a {color:#fff;display:inline-flex; justify-content: space-between; align-items:flex-end;text-align: right}
#tel a:before {font-family: indovina;content:'t'; font-size: 100px;height:100px;line-height:100px; color:#fff;margin-right: 10px}
#tel a span {display:block; font-size: 25px; font-weight: 500; line-height: 35px; color:#fff}
#tel a span:last-child {font-size: 40px; font-weight: 700; border-bottom: 2px solid #fff; line-height: 50px}
#tel a:hover span:last-child {border-bottom: 2px solid #025380}

ul.social {display: inline-flex; justify-content: center; align-items: center; flex-wrap: wrap}
ul.social li a {display:block; text-align: center}
ul.social li span {position: absolute; top:-999999px; left:-999999px}
ul.social li a:before {display:block; font-family: 'indovina'; color:#fff; width:34px; height:34px;line-height:34px; font-size:20px}
ul.social li.fb a:before {content:'F'}
ul.social li.instagram a:before {content:'I';font-size: 19px;line-height: 36px}

#recatpcha {font-size: 12px}

#welcome, #homeboxes, #hlongtext > div {text-align: justify; position: relative;padding:0 7%}
#welcome, #homeboxes {margin: 0 auto; max-width: 1600px}
#welcome h2 {text-align: left}
#welcome {padding-top: 60px; padding-bottom: 80px}
.testo-homepage h1 {margin-bottom: 24px}
.testo-homepage p {margin-bottom: 24px}
#homeboxes img {margin:0 auto; border-radius: 8px; max-width: 100%; height:auto}

#hlongtext {position:relative;margin:50px auto;background: url(images/bghomelongtext.jpg) no-repeat bottom center; background-size: cover; color:#fff;}
#hlongtext:after {content:''; width: 100%; height:100%; position: absolute; top:0; left:0; background:rgba(2, 83, 128,.65)}
#hlongtext > div {position: relative; z-index: 1;padding:50px 7%; max-width: 1600px}
#hlongtext h2 {margin-top:0; color:#fff}

#hblog {position: relative}
#hblog h2{text-align: center; margin-bottom: 50px}
.blog article > div {width:320px;margin:0 auto}
.blog a:hover img {opacity:0.7}

.blog figure {margin:0 auto}
.blog figure img {width:100%; height:auto; border-radius: 8px}
.blog a div {font-size: 19px; color:#025380; text-align: left;padding:10px;font-weight: 500}
.blog a:hover div {color:#025380}

#blogcat article {margin:5% auto 0 auto}

@media screen and (max-width: 359px) {

 }
@media screen and (min-width: 360px) {
  .blog a div {padding:10px 0}
}

@media screen and (max-width: 479px) {
    #gallery-2.gallery .gallery-item {width:100%; max-width: 100%}
}

@media screen and (min-width: 480px) {
  #logo {width:220px}
  .contatti, #hformazione > div > div:last-of-type {display: flex; justify-content: space-between}
  .contatti > div {width:30%}

  #gallery-2.gallery .gallery-item {padding:10px}
}

@media screen and (max-width: 639px) {
  #footer > div > div > span > span {display: block}

  .readmore{position:relative; height: 230px;z-index: 2}
  .readmore > div {height: 140px; overflow: hidden}
  .readmore, .readmore:before {overflow:hidden}
  .readmore:after, #welcome:before{position:absolute}
  .readmore.open:after{content:none}
  .readmore.open, .readmore.open > div {height:auto}
  .readmore.open {padding-bottom: 90px}
  .readmore .readmorebtn {position:absolute; bottom:20px; cursor: pointer; font-size:20px; z-index:2; height:40px; line-height:38px; padding:0 60px; border-radius: 20px;color:#025380; display: inline-block; text-transform: uppercase; text-align:center;border:1px solid #025380; white-space: nowrap; left: 50%;  transform: translateX(-50%);}
    .readmore .readmorebtn:after {content:'più'}
    .readmore.open .readmorebtn:after {content:'meno'}
  .readmore.open .readmorebtn {top:auto; bottom:20px}

.content {margin-top:50px}
}

@media screen and (min-width: 640px) {
  #footer > div > div > span  {display: block}
  #footer > div > div > span > span:last-child:before {content:'- '}


  .readmore .readmorebtn {display:none}

  main {padding-top:50px}
  #slide h1 {font-size: 30px}

  #contattic {padding:40px}
  .contatti {display: -webkit-flex; display: flex; -webkit-justify-content:space-between; justify-content: space-between}
  .contatti > div {width:30%}

  h1, .home h2 {font-size: 40px}
  }


  @media screen and (max-width: 767px) {
    .alignright, .alignleft {clear: both;display: block;	margin:20px auto !important; float:none !important}
    #homeboxes > div {padding-top:50px}
  }
@media screen and (min-width: 768px) {
  main {padding-top:70px}
  #welcome {padding: 0 7% 100px 7%}

  footer {margin-top:100px}

  #blogcat {display: flex;justify-content: flex-start;flex-wrap: wrap}
  #blogcat article {width:50%}

  /* Alignment */
  .alignleft {margin-right: 4% !important}
  .alignright {margin-left: 4% !important}
}

@media screen and (min-width: 768px) and (max-width: 899px) {
  #homeboxes {display: flex; justify-content: center}
  #homeboxes > div {margin:0 2%}
}

@media screen and (min-width: 840px) {
#headerimg img {height: 450px}

}
@media screen and (max-width: 899px) {

}

@media screen and (min-width: 900px) {
  main {padding:50px 0 0 0}

  #homeboxes > div {display: flex; justify-content: space-between;align-items: center;padding-bottom: 100px}
  #homeboxes > div:nth-child(even) {flex-direction: row-reverse}
  #homeboxes > div > * {width:44%}
  #homeboxes img {margin:0}
  #homeboxes h2 {text-align: left; margin-top:0}
  #hlongtext {margin:50px auto 90px auto}
  #hlongtext > div {padding: 100px 7%}

}

@media screen and (max-width: 1023px) {

}

@media screen and (min-width: 1024px) {
  #footer {padding:100px 50px}

  #homeboxes article > div {column-count: 2; column-gap: 10%}
  #welcome article > div p {margin: 0 0 20px 0}

  footer {margin-top:150px}

  #hblog {max-width: 1280px; margin:0 auto}
  .blog {display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .blog > article {width:320px; margin:0 calc((33.3333% - 320px) / 2)}
  #blogcat:after {content: '';flex: auto}

  #blogcat article {width:33.3333%}
}

@media screen and (min-width: 1100px) {

}

@media screen and (max-width: 1199px) {
  .overlaybg {height:100%; width:100%; position:fixed;left:0;	top:0;z-index:4 !important;background:rgba(35,31,32,0.85)}
  /* push menu*/
  .menu {-webkit-transition: all 0.2s linear; transition: all 0.2s linear;position: fixed;  overflow: hidden; overflow-y: auto;height: 100%; top: 0; background-color: #fff; z-index: 10;opacity: 1; text-align:left; right: -250px;  width: 250px}

  /* push menu*/
  /* push menu*/
  .menu ul {list-style: none; margin: 0;padding: 0}
  .menu > ul a {padding:0 20px; color: #025380; font-size: 18px; display: block;line-height:50px; text-decoration: none;position:relative;text-transform: uppercase; border-bottom: 1px solid #eee; font-weight: 400}
  .menu ul li.open ul li a {background:#F7F7F7;color:#333; line-height:40px;text-transform: none}
  .menu ul li.open ul li a:hover {background:#025380;color:#fff}

  .menu > ul {list-style: none; margin: 0;padding: 0}
  .menu > ul > li > a:hover, .menu > ul > li.open > a {background:#025380;color:#fff; }
  .menu > ul li.menu-item-has-children > a:after {position:absolute; top:4px;right:20px; line-height:40px;height:40px; font-family:indovina; font-size:8px; content:'A'; text-transform: none}
  .menu > ul li.menu-item-has-children.open > a:after {transform: rotate(180deg)}
  .menu > ul > li.open > a:after {color:#fff}
  .menu > ul li.menu-item-has-children a:hover:after {color:#fff}

  .menu > ul li ul {display: none; position: static; width: 100%}
  .menu > ul li:hover > ul { display: none}
  .menu > ul li.open > ul { display: block}

  html.open-menu a#toggle {right:250px}
  a#toggle {position:absolute; display: block;z-index:5; top:10px;right:10px}
  a#toggle span, nav.fmenu {position: absolute; top: -999999px; left: -999999px}

  html.open-menu {overflow: hidden;}
  html.open-menu nav.menu {z-index: 4; right:0}

  #copyright > div:last-child {margin:50px auto}
}

@media screen and (min-width: 1200px) {
  h1, .home h2 {font-size: 50px}
  body {font-size: 120%}
  .overlaybg {display:none !important}

  nav.menu > ul {position: relative;line-height: 60px;display: -webkit-flex; display: flex;-webkit-justify-content:center; justify-content: center}
  nav.menu > ul > li > a {position: relative; color:#fff;font-size: 17px; display: block; text-decoration: none; line-height:34px; padding:0 15px; border-top: 1px solid transparent; display: flex; justify-content: space-between; align-items: center}
  nav.menu > ul > li > a:hover, nav.menu > ul > li.menu-item-has-children:hover > a {color:#fff;border-top: 1px solid #fff}
  nav.menu > ul > li.menu-item-has-children > a:after {content:'A'; font-family: indovina; font-size: 8px;color:#fff; margin-left: 10px}
  nav.menu > ul li ul {display:none; text-align: left;position: absolute; top: 35px;background:#f7f7f7}
  nav.menu > ul li:hover ul {display:block; z-index:2; border-radius: 5px}
  nav.menu > ul li ul li a {color:#025380;font-size:15px; line-height: 40px; display: block;padding:0 20px;}
  nav.menu > ul li ul li a:hover {color:#2c2c2c}

  #footer > div {display:flex; justify-content: space-between;align-items: center;text-align: left}
  #footer > div#copyright {flex-direction: row-reverse}

  #slide figure > div {height: calc(100vh - 102px)}

  #hlongtext h2 {text-align:left}
  #hlongtext > div > div {text-align:left; margin-left:0}
}


@media screen and (max-width: 1279px) {

}

@media screen and (min-width: 1280px) {
  BODY {line-height: 1.9}

  nav.menu > ul > li > a {padding:0 20px}

  #welcome {padding-top: 40px}
  #hlongtext {min-height:730px; display: flex; align-items: center}

  #slide figcaption {top:50%; bottom:auto; left:5%; transform: translate(0, -50%)}

}
@media screen and (min-width: 1360px) {
}

@media screen and (min-width: 1400px) {

}
#prima-visita {padding: 80px 7%; max-width: 1600px; margin: 0 auto}
#prima-visita h2 {text-align: center; margin-bottom: 50px}
#prima-visita .step {background: #eaf3f8; border-left: 4px solid #025380; border-radius: 8px; padding: 24px 30px; margin-bottom: 20px; box-shadow: 0 2px 6px rgba(0,0,0,.06)}
#prima-visita .step h3 {color: #025380; margin-top: 0; margin-bottom: 10px}
#prima-visita .step p {margin: 0}
#prima-visita > div > p:last-child {text-align: center; margin-top: 40px}
#prima-visita > div > p:last-child a {display: inline-block; background: #025380; color: #fff; padding: 14px 32px; border-radius: 6px; font-weight: 700; text-decoration: none}

#recensioni {background: #f5f9fb; padding: 80px 7%}
#recensioni h2 {text-align: center; margin-bottom: 20px}
#recensioni > div > p:first-of-type {text-align: center; margin-bottom: 40px}
#recensioni .recensione {background: #fff; border-radius: 8px; padding: 24px 30px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.08)}
#recensioni .recensione p {margin: 0; font-style: italic}
#recensioni > div > p:last-child {text-align: center; margin-top: 30px}

#dove-siamo {padding: 80px 7%; max-width: 1600px; margin: 0 auto}
#dove-siamo h2 {text-align: center; margin-bottom: 30px}
#dove-siamo > div > p {text-align: center; margin: 0 0 10px}
#dove-siamo iframe {display: block; margin: 30px auto; border-radius: 8px}
#dove-siamo > div > p:last-child a {display: inline-block; background: #025380; color: #fff; padding: 12px 28px; border-radius: 6px; font-weight: 700; margin: 0 8px; text-decoration: none}