/* ! Font-family from Google */
/* ---------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Montserrat+Alternates:ital@1&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
.font-1 {
  font-family: "Cedarville Cursive", cursive !important;
  font-weight: 400;
  font-style: normal;
}

.font-2 {
  font-family: "Montserrat", sans-serif !important;
  font-optical-sizing: auto;
  font-style: normal;
}

.font-3 {
  font-family: "Montserrat Alternates", sans-serif !important;
  font-style: italic;
}

/* ! Base Style System */
/*------------------------------------------------------------------*/
body{ background-image: url(img/background.png);  font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;}
p{line-height: 1.3;}

/* ! Title System */
/*------------------------------------------------------------------*/
.text-0{font-size: 5rem;}
h1, .text-1{font-size: 3.4rem;}
h2, .text-2{font-size: 2.2rem;}
h3, .text-3{font-size: 1.5rem;}
h4, p, .text-4{font-size: 1rem;}

h1, h2, h3, h4, p, ol, ul{margin-bottom: 1rem;}

@media (max-width: 768px) {
  .text-0{font-size: 4rem}
}

/* ! Button system */
/*------------------------------------------------------------------*/

/* Con wp-block... andiamo ad impostare lo stile di default dei bottoni in wordpress */
.button, 
.wp-block-button__link{
    font-size: 1.2rem; background: #333; 
    color:#fff; padding: 14px 25px;
    display: inline-block;border-radius: 4px
}

.button:hover, 
.wp-block-button__link:hover{background: #000;}

.wp-block-media-text>.wp-block-media-text__content{padding: 0 15%;}

/* ! Margin bottom per widget recensioni Google */
.ti-widget.ti-goog .ti-reviews-container {margin-bottom: 50px !important;}

/* ! CSS Personalizzato */
/*------------------------------------------------------------------*/

/* -------------------------------------------------------------------------------- */
/* ! Header */
/* -------------------------------------------------------------------------------- */
.header-container{background: #ffffffe6;; position: fixed;top:0;z-index: 9999;width: 100%; max-width: 1450px; box-shadow: 0px 5px 5px 0px black;}
.logged-in .header-container{top:30px;}
/*.header-content{width: 100%; margin: 0 auto; display: flex; justify-content: space-between; padding: 10px 0; position: relative;}*/
.header{ display: flex; justify-content: space-between;width: 100%;max-width: 1450px;margin: 0 auto; height: 100px;}
.header li a{color:black; font-weight: bold; padding: 5px; border-radius: 25px; display: block; font-size: 14px; font-family: "Montserrat", sans-serif;}
.header li a:hover{background-color: #C4A9EF; color: white;  border-radius: 25px; transition: 0.3s; transform: scale(1.2);}


.header__menu{margin-bottom: 0;}
.header__menu li{display: inline-block;}
.header a.header__logo { font-weight: bold; padding: 0; }
.header__logo img{height: 150px; margin: -25px 10px 0px 10px; width: 200px;}
.header__hamburger{display: none;}

.pad_landing li{padding: 0px 10px;}


@media (max-width: 768px) {
  .header__hamburger{
    width: 50px; height: 27px; display: block; position: relative; z-index: 100;
    margin-right: 20px; background: #c4a9ef; border-color: #8d7aac; box-sizing: content-box; border-radius: 50%;
    text-indent: 100%; color: transparent; white-space: nowrap; cursor: pointer; overflow: hidden; outline: 0;
  }
    .hamburger-menu-button-open {
      top: 50%;
      margin-top: -1px;
      left: 50%;
      margin-left: -12px;
    }
    .hamburger-menu-button-open, 
    .hamburger-menu-button-open::before, 
    .hamburger-menu-button-open::after {
      position: absolute;
      width: 24px;
      height: 2px;
      background: #fff;
      border-radius: 4px;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
    }
    .hamburger-menu-button-open::before, 
    .hamburger-menu-button-open::after {
      left: 0;
      content: "";
    }
    .hamburger-menu-button-open::before {
      top: 6px;
    }
    .hamburger-menu-button-open::after {
      bottom: 6px;
    }

    .menu-open .hamburger-menu-button-close {
      background: transparent;
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }
    .menu-open .hamburger-menu-button-close::before {
      -webkit-transform: translateY(-6px) rotate(45deg);
              transform: translateY(-6px) rotate(45deg);
    }
    .menu-open .hamburger-menu-button-close::after {
      -webkit-transform: translateY(6px) rotate(-45deg);
              transform: translateY(6px) rotate(-45deg);
    }

  .header__logo img{margin-top: 15px !important;}
  /*.header__hamburger span{width: 33px;height: 2px;background: #C4A9EF;margin-top: 8px;display: block;transition: all 0.15s cubic-bezier(.215, .61, .355, 1);}*/
  .header{align-items: center !important;}
  .header li a:hover{border-radius: 0px; }
  .header__menu{position:absolute;top:46px; left:0; width: 100%;background: #fff;height: 0;overflow: hidden; transition: all 1s cubic-bezier(.215, .61, .355, 1); margin-top: 54px;}
  .header__menu li{display: block; border-bottom: 1px solid #C4A9EF;}

  .menu-open .header__menu{height: 100vh;}
  .menu-open{overflow:hidden;}

  /* ! In caso di doppio menu */
  .second_menu_landing{
    z-index: 1;
    margin-top: 200px;
  }
  .pad_landing li{padding:10px !important;}

}

/* -------------------------------------------------------------------------------- */
/* ! CSS Pagina Landing */
/* -------------------------------------------------------------------------------- */
.grid--slide{display: flex; flex-wrap: wrap; max-width: 1450px; margin: 0 auto;}
.wpcp-carousel-section .wpcp-swiper-dots{margin-top: 30px;}

.p-pers h3{font-size: 24px !important; color: #AF93EC; }
.p-pers figure{padding: 0px 50px 50px 50px;}

.rett-lilla{margin: 20px -10px 5rem -10px !important; box-shadow: 0px 1px 5px 0px black; background-color: #AF93EC;}
.rett-lilla .absolute-left{position: absolute; top: 15px; }
.rett-lilla .absolute-right{position: absolute; right: 100; top: 15px;}
.rett-lilla h2{font-size: 45px; color: white; letter-spacing: 2px; }

.media-esp h2{margin-bottom: 10px; font-size: 34px !important; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; text-decoration-color: #AF93EC;}
.media-esp h3{color: #AF93EC;font-size: 26px !important; letter-spacing: 1px;}
.left figure{box-shadow: 4px 4px 20px 10px darkgray; transform: rotate(-2deg);}
.right figure{box-shadow: 4px 4px 20px 10px darkgray; transform: rotate(2deg);}
.mt-neg{margin-top: -40px;}

.scotch-left figure{position: absolute; top: -40px; left: 7%; margin: 0 !important; box-shadow: none !important;}
.scotch-right figure{position: absolute; top: -40px; right: 7%; margin: 0 !important; box-shadow: none !important; z-index: 1;}
.scotch-up-right figure{position: absolute; top: -5px; left: 23%; margin: 0 !important; box-shadow: none !important; transform: rotate(45deg);}
.scotch-down-left figure{position: absolute; bottom: -25px; left: -6%; margin: 0 !important; box-shadow: none !important; transform: rotate(45deg);}

.testo-pers{font-size: 23px; display: flex; text-align: center;}
.testo-pers span{display: contents;}
.button-lilla a{background-color: #AF93EC; padding: 20px 55px; border-radius: 10px; box-shadow: 0px 2px 5px 0px black; text-transform: none; color: white; font-size: 22px;font-weight: bold; font-family: "Montserrat", sans-serif; }
.button-lilla a:hover{transition: 0.5s; font-size: 24px; letter-spacing: 1.5px; padding: 25px 60px; }
.button-white a{background-color: white; padding: 20px 55px; border-radius: 10px; box-shadow: 0px 2px 5px 0px black; text-transform: none; color: #af93eb; font-size: 22px;font-weight: bold; font-family: "Montserrat", sans-serif;}
.button-white a:hover{transition: 0.5s; font-size: 26px; letter-spacing: 1.5px; padding: 25px 60px; color: white; }
.freccia-conosciamoci{top: -75px; left: -75px;}

.cornice{position: absolute; top: -30px; left:55px;}
.gruppo_ritratto{background-color: black; color: white; margin: 20px -10px;}
.gruppo_ritratto h3{font-size: 30px;}
.gruppo_card{padding: 20px 30px;}
.gruppo_card h2{padding: 20px; }
.gruppo_card hr{width: 50%; margin: 2rem auto;}
.gruppo_card figure{margin: 20px auto;}

.ritratto hr{margin-bottom: 20px; color: #AF93EC;}
.ritratto h3{color: #AF93EC;}
.ritratto figure{box-shadow: 7px 7px 20px 3px #767676;}

.cornice_2{position: absolute; top: -525px; left: -115px; z-index: -1;}

.card_bio{border: 3px solid black; padding: 20px; box-shadow: 25px 25px 0 0px #af93ec, 25px 25px 0 3px black;}
.card_bio h2{color: #AF93EC; font-size: 30px; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; text-decoration-color: #AF93EC;}
.fb-40{flex-basis: 40% !important;}

.faq_container{background-color: black; color: white; padding: 5% 10%;}
.faq_text p{margin: 30px;}
.icon_faq{ position: absolute; top: 20.5%; left: 3.5%;}
.icon_faq_1{position: absolute; top: 22%; left: 3.7%;}
.icon_faq_5{position: absolute; top: 20%; left: 1.8%;}
.icon_faq_pers{position: absolute; top: 0%; left: 3.5%;}
.faq-icon-container{max-width: 1300px; margin: 0 auto;}
.faq-icon-container p{margin-bottom: 0 !important;}

.banner_andre{background-color: black; padding: 40px; color: white; border-radius: 15px;}

.card_mappa{box-shadow: 5px 5px 15px 4px darkgray; border-radius: 25px; overflow: auto;}

.form_container{text-align: center; background-color: #af93eb; padding: 40px; border-radius: 25px; width: 70%; margin: 0 auto; border: 2px solid black; }
.form_container p{text-align: left;}
.form_container label{color: white; margin-left: 10px;}
.form_container i{margin-left: 5px;}
.form_container input, .form_container textarea{transition: all ease-in-out .15s; border: none !important; padding: 15px !important; border-radius: 25px !important; width: 70%; margin: 10px 15px 10px 20px;}
.form_container input:focus,.form_container textarea:focus {outline: none; border: 2px solid black !important;}


.form .rotateY figure{transform: rotateY(180deg);}

.form p, .form h2{color: black !important;}

.button_container p{text-align: center;}
.form_button{
  background: linear-gradient(180deg, rgba(158, 150, 242, 1) 0%, rgba(198, 157, 223, 1) 100%) !important; border: none !important; 
  color: white; padding: 10px 20px !important; border-radius: 25px !important; font-size: 18px; cursor: pointer; font-family: "Montserrat", sans-serif;
}

.form_button:hover{
  background: linear-gradient(0deg, rgba(158,150,242,1) 0%, rgba(198,157,223,1) 100%) !important;
  transform: scale(1.2);
  transition: 0.3s;
}

.dove_trovarmi h2{margin-bottom: 3.3rem; color: black !important;}
 
.wpcf7 form.invalid .wpcf7-response-output{
  border-color: red;
  background: #ff00003d;
  border-radius: 25px;
  padding: 20px;
  text-align: center;
  font-weight: bold;
}

.wpcf7 form.sent .wpcf7-response-output{
  border-color: green;
  background: rgba(0, 128, 0, 0.3);
  border-radius: 25px;
  padding: 20px;
  text-align: center;
  font-weight: bold;
  color: green;
}

.mappa{border: 2px solid black !important; border-radius: 25px; overflow: auto;}

/* -------------------------------------------------------------------------------- */
/* ! Smartphone responsive Landing */
/* -------------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .wp-block-media-text__content{padding: 1rem !important;}

  .p-pers figure{padding: 15px 65px;}
	
  /* ! Gruppo Esperienza - sotto banner lilla - */
  .sma-media-esp figure{width: 300px; margin: 30px auto !important;}
  .sma-scotch-up-right figure{width: 200px; left: 50%; top: -20px;}
  .sma-scotch-down-left figure{width: 200px; left: -10px; top: 345px;}
  .sma-scotch-pers figure{left: 20%; top: -45px;}
  .sma-media-esp h2{font-size: 31px !important;}
  .sma-media-esp h3{font-size: 24px !important;}

  .conosciamoci{display:flex}
  .col-button{order: 2;}
  .testo-pers{display: flex; flex-direction: column-reverse; margin-left: 0px !important;}
  
  .gruppo_ritratto h2{font-size: 31px !important;}

  .ritratto h2{font-size: 31px !important;}

  .img-bio figure{width: 250px;}
  
  .cards-bio{width: 90%; margin-left: 10px;}

  .sma-interr{display: flex;}
  .sma-interr figure{width: 100px;}
  
  .s-icon{top: 20% !important; left: 46% !important;}
  .s-icon-1{top: 23% !important; left: 46% !important;}
  .s-icon-2{left: 45% !important;}
  .s-icon_faq_pers{position: absolute; left: 46% !important;}

  .s-form_container{width: 100%   !important;}
  .frecce_sx figure, .frecce_dx figure{margin: -2.5em 1em .5em 0 !important;}

}