/*
Theme Name: S2
Theme URI: https://www.s2dental.it
Author: Riccardo Molti
Author URI: https://www.afterspellstudios.it/chi-siamo
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: S2
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* ! Reset */
html{ scroll-behavior: smooth;}
body, html{ font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; box-sizing: border-box;margin: 0;padding: 0;}
*,*:before,*:after{ box-sizing: border-box; }
h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0;padding: 0;}
ol,ul{padding-left: 20px;}
img{height: auto;}
a{text-decoration: none;}
hr{border:none; border-bottom: 1px solid #000}
address{font-style: normal;}

body.admin-bar .header{top: 32px; z-index: 1000;}


/* ------------------------------------------------------------------------- *
/* 1 Base */
/* ------------------------------------------------------------------------- */

:root {
    --site-bg: #fdfdfd;
    --site-text-color: #444444;

    --primaty-pink: #f1a1b5;
    --primary-dark: #d17a93;
    --secondary-purple: #b284c2;
    --secondary-dark: #8a5da6;
    --text-dark: #2d1b2f;
    --accent: #d16b8b;
    --white: #ffffff;

    --logo_color: #5e5e5e;



    --link-color: #806b8b;
    --link-color-hover: #372e3c;
    --darkblue: #001b35;
}


/* Typography */
body{font-size: 16px; background-color: var(--site-bg); color: var(--site-text-color); font-family: 'Quicksand'; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;}

body.menu-open{overflow: hidden;} /*block scrolling when menu is open*/

/* ! Title System */
h1, h2, h3, h4, h5, h6, p, ol, ul{margin-bottom: 1rem;line-height: 120%}

.text-0{font-size: 5rem; line-height: 100%;}
h1, .text-1{font-size: 3.4rem;}
h2, .text-2{font-size: 2.2rem;}
h3, .text-3{font-size: 1.5rem;}
h4, .text-4{font-size: 1.3rem;}
h5, p, .text-5, ul,li{font-size: 1rem;line-height: 150%}
h6{font-size: 0.8rem;}
.titletext{font-size: 1rem; font-weight: 400;}
.microtitle{resize: 1rem; font-weight: 300; text-transform: uppercase;}
p{text-align: justify;}

.evi a{color:#fff!important; background-color: var(--link-color);border-radius: 100px;padding-left: 20px!important; padding-right: 20px!important;}

@media (max-width: 768px) {
  .text-0{font-size: 42px}
  h1, .text-1{font-size: 3rem;}
  .wp-block-spacer{display: none;}
  .wp-block-media-text__content{padding: 0!important;}
  h2{font-size: 30px;}
}

/* Link color */
a { color: var(--link-color); }
a:focus, a:hover { color: var(--link-color-hover); text-decoration: none; }



/* ! Button System */
/* .wp-block-button__link,
.button{
  background: #ffffff;
  background: transparent;
  color: #8a5da6!important;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 20px;
  border-radius: 4px;
  border: 2px solid #8a5da6;
  padding: 10px 20px!important;
  color: var(--darkblue);
  display: inline-block;
  text-decoration: none;
  transition: all .6s cubic-bezier(.215, .61, .355, 1);
  padding: 10px 20px 5px 20px;
}

.wp-block-button__link:hover,
.button:hover{
  background: #f1a1b5;
  color: #2d1b2f!important;
}

@media (max-width: 768px) {
  .wp-block-button{width: 100%;}
}
 */

/* ! General Tags */
figure{border-radius: 10px; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, .15), 0 8px 40px rgba(0, 0, 0, .25);}
.page-template-home-page-template main{padding: 0!important;}
.page main{padding: 180px 0;}
.single main{padding: 150px 0 0 0;}
.page-template-studio-template main{padding: 50px 0;}

@media (max-width: 768px) {
  .single main{padding: 130px 0 0 0;}
  .page main{padding: 150px 0 0 0;}
  .main-content.mb-4{margin: 0;} 

  .page-template-studio-template main{padding: 50px 0;}

  footer .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{flex-basis: auto!important;}
}

/* ! WordPress Blocks */
.wp-block-media-text{margin: 30px 0;}


/* ! Fonts */
@font-face {
    font-family: 'Quicksand';
    src: url('fonts/Quicksand-Bold.woff2') format('woff2'),
        url('fonts/Quicksand-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('fonts/Quicksand-SemiBold.woff2') format('woff2'),
        url('fonts/Quicksand-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('fonts/Quicksand-Medium.woff2') format('woff2'),
        url('fonts/Quicksand-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('fonts/Quicksand-Light.woff2') format('woff2'),
        url('fonts/Quicksand-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('fonts/Quicksand-Regular.woff2') format('woff2'),
        url('fonts/Quicksand-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}






/* ------------------------------------------------------------------------- *
/* 2.1 Menu */
/* ------------------------------------------------------------------------- */
.topbar{
  width: 100%;
  /* background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(241, 161, 181, 0.2) 50%); */
  /* background: linear-gradient(180deg,rgba(241, 161, 181, .6) 50%, rgba(178, 132, 194, .7) 100%); */
  /* background: linear-gradient(180deg,rgba(240, 201, 211, 1) 50%, rgba(195, 170, 208, 1) 100%); */
  /* background: linear-gradient(180deg, rgba(195, 170, 208, 1) 10%, rgba(240, 201, 211, 1) 50%); */
  /* background: rgba(195, 170, 208, 1); */
  /* background-color: #b999ca; */
  /* background: rgba(240, 201, 211, 1); */
  background: rgba(237, 177, 192, 1);
  color: #333;
  font-weight: 600;
  font-size: 20px;
  padding: 10px 0;
  /* text-shadow: 2px 2px 2px rgba(0, 0, 0, .8); */
}

.topbar a{color: #333;}
.topbar a:hover{text-decoration: underline;}


.topbar .social .icon-small{width: 20px;}
.topbar .social a:hover{text-decoration: none;}

.topbar .social a img{transform: scale(1); transition: all 0.4s cubic-bezier(.215, .61, .355, 1);}
.topbar .social a img:hover{text-decoration: none; transform: scale(1.3);}



.spacer{height: 140px;}

.header{background: rgba(255, 255, 255, .5); position: fixed; top:0;  left:0; z-index: 9999; width: 100%; transition: all .4s cubic-bezier(.215, .61, .355, 1);}
.header__content{width: 1400px;margin: 0 auto; display: flex;justify-content: space-between; align-items: center; padding:10px 0; position: relative;}


.header__logo-img{width: 280px;height: auto;transition: all .6s cubic-bezier(.215, .61, .355, 1);}

.menu,
.menu ul{margin: 0;position: relative;}
.menu li{display: inline-block;position: relative}
.menu li a{color: #333; display: block;padding: 16px;font-size: 16px;font-weight: 500; text-transform: uppercase; transform: scale(1); transition: all .4s cubic-bezier(.215, .61, .355, 1);
}

.menu li a:hover{transform: scale(1.3);}

.current-menu-item a{transform: scale(1.3); border-bottom: 2px solid var(--primaty-pink);}

.icon-hamburger{display: none;}




@media (max-width: 1190px) {

  .topbar .social.text-right,
  .topbar{text-align: center!important;}

  .header__logo-img,
  .scroll-down .header__logo-img{width: 140px!important;height: auto;}

  .menu{   
    position: absolute; top:60px; left:0; right:0; background-color: var(--site-bg); min-width: 100%; 
     height: 100vh; margin: 0 -20px 0 -20px; 
    overflow: auto;transition: all 1s cubic-bezier(.215, .61, .355, 1);padding-left: 0; transform: translateX(-100%);
  }

  .menu li{width: 90%;margin: 0 5%; border-bottom: 1px solid #000}
  .menu li a,
  .menu li a:hover{transform: none;}
  .menu-open .menu{transform: translateX(0%);}
  .menu-open .menu > li:last-child{margin-bottom: 150px;position: relative;}

  .icon-hamburger{height: 50px;width: 50px;margin-left: 20px;position:absolute; top: 10px; right:0; display: block;border:none; background: transparent;z-index: 9999;}
  .icon-hamburger strong{height: 1px;margin-top:-1px; overflow: hidden;width: 1px;display: block;margin: 0;padding: 0;}
  .icon-hamburger span{height: 2px; width: 30px;background: var(--site-text-color);position: relative;display: block;margin-bottom: 11px;transition: all 0.2s cubic-bezier(.215, .61, .355, 1);}
  
  .menu-open .icon-hamburger span:nth-child(2){transform: rotate(45deg) translateY(9px);}
  .menu-open .icon-hamburger span:nth-child(3){transform: rotate(-45deg) translateY(-9px);}
  .header__content{/*padding-right: 50px; height: 60px; */width: 100%; padding: 10px;}

  

}

@media (min-width: 1280px) and (max-width: 1600px) {

  .scroll-down .header{top: -53px!important; background: #fff;}
}


/* Menu Dropdown */
.menu li ul{background: #eee;visibility: hidden; opacity: 0; min-width: 200px; position: absolute; transition: all 0.5s ease; margin-top: 0px;left: 0; display: none;padding: 0;}
.menu li ul > li > a{color:#000}
.menu li ul > li > a:hover {background: #ccc;color:#000}


/* Open Dropdown */
@media (min-width: 1190px) {
  .menu li:hover > ul,
  .menu li ul:hover { visibility: visible; opacity: 1; display: block; }
}
.menu li.open-dropdown ul{visibility: visible; opacity: 1; display: block; }

.menu li ul li { clear: both; width: 100%; }
.menu > li.menu-item-has-children > a{position: relative;padding-right: 30px;}

.menu > li.menu-item-has-children > a::after{
  content:" ";width: 30px;height: 30px; background-size:30px;position: absolute;
  top:50%; right: 0; transform: rotate(90deg);margin-top: -15px;
  background-size:100%;
  background-image: url('data:image/svg+xml;utf8,<svg width="50px" height="50px" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M22.7 34.7l-1.4-1.4 8.3-8.3-8.3-8.3 1.4-1.4 9.7 9.7z"/></svg>');
}

@media (min-width: 1190px) {
  li.menu-item-has-children > a::after{
    background-image: url('data:image/svg+xml;utf8,<svg width="50px" height="50px" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M22.7 34.7l-1.4-1.4 8.3-8.3-8.3-8.3 1.4-1.4 9.7 9.7z"/></svg>');
    filter: invert(1);
  }
}


@media (max-width: 1190px) {

  .menu li ul{position: relative;background: none;}
  .menu li ul li{border:none}
  .menu li ul li a{padding-left: 30px;}
}

@media (min-width: 1601px) {

/* ! Scroll Down */
.scroll-down .header{
  /* top: -85px; */
  top: -53px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15), 0 8px 40px rgba(0, 0, 0, .25);
}
}

.scroll-down .header ul li a{
  color: #333;
}

.scroll-down .header__logo-img{width: 180px;}


/* -------------------------------------------------------------------------------- */
/* ! Cover */
/* -------------------------------------------------------------------------------- */
.cover{
  width: 100vw;
  height: 50vh;
  margin-left: calc( -100vw / 2 + 100% / 2 );
  margin-right: calc( -100vw / 2 + 100% / 2 );
  padding-top: 120px;
  display: block;
  background: #F1A1B5;
  /* background: linear-gradient(90deg, rgba(241, 161, 181, 1) 0%, rgba(178, 132, 194, 1) 100%); */
  background: linear-gradient(90deg, var(--secondary-purple) 0%, var(--primary-dark) 100%);
  position: relative;
  color: var(--white);
  text-shadow: 2px 2px 10px rgba(0, 0, 0, .3);
}

.cover .cover__text {
    max-width: 900px;
    position: absolute;
    bottom: 100px;
    left: 10%;
}

.cover .grid{
  height: 100%;
  align-items: center;
}







/* -------------------------------------------------------------------------------- */
/* ! Hero */
/* -------------------------------------------------------------------------------- */
.hero-video{
  width: 100vw;
  height: 80vh;
  margin-left: calc( -100vw / 2 + 100% / 2 );
  margin-right: calc( -100vw / 2 + 100% / 2 );
  margin-bottom: 50px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
}

#S2Intro{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video__text{
  position: absolute;
  top: 60vh;
  left: 5vw;
  right: 5vw;
  transform: translateY(-50%);
  color: var(--white);
  text-shadow: 2px 2px 10px rgba(0, 0, 0, .2);
}

.hero-video .button,
.wp-block-button__link,
input[type=submit],
#scroll-to-index
{
  border-radius: 4px;
  padding: 10px 20px!important;
  background: var(--primaty-pink)!important;
  /* background: #c4a4d6; */
  color: var(--white)!important;
  font-weight: bold;
  text-transform: uppercase!important;
  font-size: 20px!important;
  display: inline-block;
  text-decoration: none;
  transition: all .4s cubic-bezier(.215, .61, .355, 1);
  border: none;
}


.hero-video .button:hover,
.wp-block-button__link:hover{
  background: var(--primary-dark);
  /* background: #9061ab; */
}


@media (max-width: 768px) {
  .hero-video__text .button,
  input[type=submit]{width: 100%; text-align: center;}
}



/* -------------------------------------------------------------------------------- */
/* ! Storia e Orari */
/* -------------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .storia_home .wp-block-media-text__content,
  .orari .wp-block-media-text__content{margin-top: 30px;}

  .storia_home{margin-top: 0;}
}


/* -------------------------------------------------------------------------------- */
/* ! Pages */
/* -------------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .title_page h1{font-size: 42px;}
}



/* -------------------------------------------------------------------------------- */
/* ! Trattamenti */
/* -------------------------------------------------------------------------------- */
.trattamenti{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colonne */
  gap: 30px; /* spazio tra le card */
}

.card{
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: 10px;
}



.card:hover .card-content{
  transform: scale(1.05);
}

.card-content{
  height: 250px;
  padding: 20px;
  position: relative;
  border-radius: 10px;
  transform: scale(1);
  transition: all .4s cubic-bezier(.215, .61, .355, 1);
}

.card-content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  background-color: rgba(240, 201, 211, 0);
  transition: all .4s cubic-bezier(.215, .61, .355, 1);
}

.card:hover .card-content::before {
  background-color: rgba(240, 201, 211, 0.5);
}

.card-content h2{
  position: absolute;
  bottom: 30px;
  left: 20px;
  font-size: 28px;
}

a .card-content h2{
  color: #fff!important;
  margin: 0;
  z-index: 1;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, .5);
}

.card-content hr{
  position: absolute;
  bottom: 14px;
  left: 10px;
  border-bottom: 3px solid #fff;
  width: 90%;
  opacity: .8;
  z-index: 1;
}






/* ! Template Trattamenti */
.single-trattamenti h1{font-weight: 400; margin: 40px 0;}
.single-trattamenti .trattmenti_img{height: 500px; object-fit: cover; margin-top: 50px; margin-bottom: 50px;}
.single-trattamenti .index{border-right: 1px solid var(--darkblue); padding: 20px 0!important;}
.single-trattamenti .text{padding: 20px 40px!important;}

.single .closing{
  height: 500px;
  width: 100vw;
  margin-left: calc( -100vw / 2 + 100% / 2 );
  margin-right: calc( -100vw / 2 + 100% / 2 );
  margin-top: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  text-align: center;
}

.single .closing a{
  height: auto;
  border-color: #fff;
  color: #fff!important;
}




#content-index .active{font-weight: 700;}
li:has(a.active) {
  background-color: var(--primaty-pink);
}

/* Wrapper due colonne */
.grid.content.two-col {
  display: flex;
  align-items: flex-start; /* colonne allineate in alto */
  gap: 2rem;               /* spazio tra indice e contenuto */
  position: relative;
}

/* Colonna indice */
.col-30.index {
  flex: 0 0 30%;
}

/* Colonna contenuto */
.col-70.page-content {
  flex: 1;
  min-width: 0; /* importante per flexbox */
  padding: 1rem;
}

.content-section {
  /*display: none;*/             /* invisibile di default */
  opacity: 0;                /* trasparente */
  transform: translateY(20px); /* leggero spostamento verso il basso */
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: absolute;
  top: auto;
  left: auto;
  width: 100%;
}

.content-section p{text-align: justify;}

  /* .content-section { opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s; } */
  /* .content-section.active { opacity: 1; visibility: visible;  } */


.content-section.active {
  display: block;            /* visibile */
  opacity: 1;                /* pienamente visibile */
  transform: translateY(0);  /* torna alla posizione originale */
  position: relative;
}

/* Stile elenco indice */
.index ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.index ul li a {
  text-decoration: none;
  display: block;
  padding: 0.5rem 0;
  color: #333;
  cursor: pointer;
}

.index ul li a.active {
  font-weight: bold;
  color: #007BFF;
}


.single-trattamenti #content-index ul{
  list-style-type: none;
  padding: 0;
}


.single-trattamenti #content-index ul li{
  padding: 20px 0;
  margin-right: 10px;
  display: flex;
  align-items: flex-start;
  border-radius: 10px;
}

.single-trattamenti #content-index ul li::before{
  content: "■"; /* il quadrato */
  margin: 0.5em;
  flex-shrink: 0;
}


.single-trattamenti #content-index ul li a{
  color: var(--darkblue);
  font-weight: 500;
}

.single-trattamenti #content-index ul li a:hover{
 text-decoration: underline;
}


.single-trattamenti .two-col{
  display: flex;
  align-items: flex-start;
}

.single-trattamenti .page-content{
  flex: 1;
  padding: 1rem;
} 


.single-trattamenti button{display: none;}


@media (max-width: 768px) {

  .trattamenti{grid-template-columns: 1fr; /* 1 colonna */}
  /* .card{padding: 12px 0!important;} */

  /* .two-col{border: 1px solid red;} */
  .col-30.index{flex: auto;}
  .single-trattamenti #content-index ul li{padding: 10px 0; margin: 0;}
  .single-trattamenti .index{border: none; padding: 0; border-bottom: 1px solid #ddd;}
  .single-trattamenti .text{padding: 10px!important;}
  .single-trattamenti .index{padding: 0!important;}

  /* .content-section{transition: none; position: relative; height: 0;}
  .content-section.active{display: contents; transform: none!important; height: auto;}
 */
  

  .single-trattamenti h1{margin: 20px 0;}
  .single-trattamenti .trattmenti_img{height: 250px;}

  .single-trattamenti button{display: block;}

  .single-trattamenti #scroll-to-index{margin: 0 auto; display: block; margin-top: 30px;}

  .single .closing{margin-top: 100px;}



}



/* Desktop: probabilmente hai già behavior simile */
@media (min-width: 768px) {
  /* .content-section { position: absolute; top: 20px; left: 50px; width: 100%; }
  .content-section { opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s; }
  .content-section.active { opacity: 1; visibility: visible; position: relative; } */
}

/* Mobile: le sezioni devono essere in flow per lo scroll */
@media (max-width: 767px) {
  .content-section {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto;
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    transition: opacity .28s ease, height .28s ease;
  }
  .content-section.active {
    opacity: 1;
    visibility: visible;
    height: auto;
    overflow: visible;
  }

  .content-section.active h3{font-size: 32px;}
}





/* -------------------------------------------------------------------------------- */
/* ! GALLERY */
/* -------------------------------------------------------------------------------- */
.gallery{
  width: 100vw;
  height: 350px;
  margin-left: calc( -100vw / 2 + 100% / 2 );
  margin-right: calc( -100vw / 2 + 100% / 2 );
  background: var(--primaty-pink);
  display: flex;
  align-items: center;
}

.gallery li.splide__slide{
  height: 330px;
  object-fit: contain;
  margin-right: 10px!important;
}

.gallery li.splide__slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .page-template-studio-template .wp-block-media-text__content{margin-top: 30px;}

}


/* -------------------------------------------------------------------------------- */
/* ! TEAM */
/* -------------------------------------------------------------------------------- */
.team .wp-block-column{
  border: 1px solid var(--secondary-dark);
  padding: 20px;
  border-radius: 10px;
}

.team figure{
  box-shadow: 0 8px 10px rgba(0, 0, 0, .15),}

.team h3{margin: 30px 0 20px 0;}
.team p{line-height: 1.6;}
 
.page-id-53 .wp-block-button__link{padding: 10px!important;}

.riccardo,
.mario,
.filippo{display: none;}


/* -------------------------------------------------------------------------------- */
/* ! CONTATTI */
/* -------------------------------------------------------------------------------- */
.page-id-57 h1{display: none;}
.page-id-57 figure{box-shadow: none; border-radius: 0;}
.recapiti .wp-block-columns{margin-bottom: 10px;}
.page-id-57 iframe{width: 100%;}




/* -------------------------------------------------------------------------------- */
/* ! WHATSAPP MOBILE */
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* ! WHATSAPP MOBILE */
/* -------------------------------------------------------------------------------- */
.whastapp__container{display: none;}


@media (max-width: 768px) {
  .whastapp__container{display: block;}

  .whatsapp{
    width: 50px;
    height: 50px;
    background: #25D366;
    border-radius: 10px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .whatsapp img{
    width: 30px;
    height: 30px;
    filter: invert(1);
    margin: 0 0 2px 2px;
  }

}



/* -------------------------------------------------------------------------------- */
/* ! Blank Template */
/* -------------------------------------------------------------------------------- */
.page-template-blank-template header,
.page-template-blank-template footer{display: none!important; padding: 0;}

.page-template-blank-template main{padding: 0; display: flex; height: 100vh; align-items: center; justify-content: center; text-align: center;}
 



/* -------------------------------------------------------------------------------- */
/* ! Footer */
/* -------------------------------------------------------------------------------- */
footer{
  /* background: linear-gradient(180deg,rgba(241, 161, 181, .7) 0%, rgba(178, 132, 194, .8) 100%); */
  /* background: rgba(195, 170, 208, 1); */
  background: linear-gradient(180deg,rgba(240, 201, 211, 1) 0%, rgba(172, 136, 192, 1) 100%);
  padding: 50px 0 0 0;
  color: #333;
 
  /* text-shadow: 2px 2px 3px rgba(0, 0, 0, .5); */
  font-weight: 500;
}

footer figure{box-shadow: none; border-radius: 0;}

footer .col-100 p{text-align: center!important;}

footer a{color: #333;}
footer a:hover{color: #fff; text-decoration: underline;}

.block-21 .wp-block-columns .wp-block-column figure{filter: invert(1);}


@media (max-width: 768px) {
  #block-18 .has-text-align-right,
  #block-19 .has-text-align-right{text-align: left;}
}


/* ! Helpers */

.dnone{display: none;}
.dblock{display: block;}

.br{border: 1px solid red;}
.img-res{width: 100%;}
.video-res{width: 100%;height: 100%;overflow: hidden;}
.video-res video{width: 100%;height: 100%;object-fit: cover}

.mt-0{margin-top: 0;}
.mt-1{margin-top: 1rem;}
.mt-2{margin-top: 2rem;}
.mt-3{margin-top: 3rem;}
.mt-4{margin-top: 4rem;}

.mb-0{margin-bottom: 0;}
.mb-1{margin-bottom: 1rem;}
.mb-2{margin-bottom: 2rem;}
.mb-3{margin-bottom: 3rem;}
.mb-4{margin-bottom: 4rem;}

.text-center{text-align: center}
.text-left{text-align: left}
.text-right{text-align: right}

.center-element{margin: 0 auto;}

.p-0{padding: 0;}
.p-1{padding: 1rem;}
.p-2{padding: 2rem;}
.p-3{padding: 3rem;}
.p-4{padding: 4rem;}

.pt-0{padding-top: 0;}
.pt-1{padding-top: 1rem;}
.pt-2{padding-top: 2rem;}
.pt-3{padding-top: 3rem;}
.pt-4{padding-top: 4rem;}

.pb-0{padding-bottom: 0;}
.pb-1{padding-bottom: 1rem;}
.pb-2{padding-bottom: 2rem;}
.pb-3{padding-bottom: 3rem;}
.pb-4{padding-bottom: 4rem;}


.icon-small{width: 18px; cursor: pointer;}
.icon-big{width: 50px; padding: 0;}
.icon-white{filter: invert(1);}
.bg-dark{background: #000;}
.text-white{color:#fff}
.v-center{display: flex; justify-content: center; flex-flow: column;align-items: flex-start;}

.font-normal{font-weight: 400;}
.z-index-top{z-index:100}

.none{display: none;}
@media (max-width: 768px) {
  .sma-none{display: none;}
}

@media (min-width: 768px) {
  .desktop-none{display: none;}
}














/* --------------------------------------------------------------------------------------------------------------------------- */
/* WordPress Default Styles */
/* --------------------------------------------------------------------------------------------------------------------------- */

@media (max-width: 768px) {
  :where(.wp-block-columns.is-layout-flex){gap: 20px;}
}


/* Pagination */
.pagination { margin: 40px 0 40px 0; padding: 0; width: 100%; }
.pagination span,
.pagination a { float: left; margin: 0 10px 10px 0; padding: 14px 19px; border: 1px solid #ddd; }

.woocommerce nav.woocommerce-pagination ul{border: none;}

.woocommerce nav.woocommerce-pagination ul li{
  border: 1px solid #BDC7CF;
  border-radius: 100%;
  width: 32px;
  height: 32px;
  margin: 30px 10px;
}

.woocommerce nav.woocommerce-pagination ul li a{color: var(--title-color);}
.woocommerce nav.woocommerce-pagination ul li span.current{color: var(--title-color); font-weight: 500; background: #BFDEF8;}

.woocommerce nav.woocommerce-pagination ul li a:hover{color: var(--title-color)!important;}


@media (max-width: 768px) {
  .woocommerce nav.woocommerce-pagination ul li{margin: 3px;}
}



/* Gallery 
.gallery { float: left; margin: 20px 0 20px 0; width: 103.55%; }
.gallery-item { float: left; width: 33.333333%; text-align: center; }
.gallery img { margin: 0 10% 0 0; width: 90%; height: auto; border: none!important; }
.gallery-caption { width: 90%;margin:10px 0 0 0;}
*/

/* Image */
.alignleft { float: left; margin-right: 20px; margin-bottom: 10px; max-width: 97%; height: auto; }
.alignright { float: right; margin-bottom: 10px; margin-left: 20px; max-width: 97%; height: auto; }
.aligncenter { display: block; margin: 0 auto; max-width: 97%; height: auto; }
.alignnone { max-width: 97%; height: auto; }
.alignfull {
    margin-left  : calc( -100vw / 2 + 100% / 2 );
    margin-right : calc( -100vw / 2 + 100% / 2 );
    max-width    : 100vw;
    width: 100vw;
}

/* img responsive */
.img-res{width: 100%;height: auto;}

/* video responsive */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


th, td {border-bottom: none;}

/* Image Caption */
.wp-caption { margin-top: 1.5rem;margin-bottom: 0px; padding: 10px; max-width: 97%; border: 1px solid #ddd; text-align: center; }
.wp-caption img { margin: 0; padding: 0; width: 100%!important; height: auto; border: 0 none; }
.wp-caption p.wp-caption-text { margin: 0; padding: 8px; font-size: 1em; line-height: 17px; }

/* Stiky */
.sticky { border-right: 3px solid #eee; border-bottom: 3px solid #ddd; }

/* Search */
.search-form {background: #eee;}
.search-form input[type=text]{ width: 80%; color: #333; }
.search-form button{float:right;padding:10px 15px 0 0;border: none; background: none;padding: 11px;}

/* Comments */
.comment-form-author,
.comment-form-email,
.comment-form-url { float: left; margin-top: 20px; margin-right: 3%; width: 30.3333333%; }
.comment-form-author input,
.comment-form-email input,
.comment-form-url input { width: 100%; }

ol.commentlist { margin: 0 0 1em; padding: 0; list-style: none; text-indent: 0; }
ol.commentlist li.comment { padding: 1em; border-top: 1px solid #eee; }
ol.commentlist li.comment div.vcard cite.fn { text-transform: uppercase; font-size: 14px; }
ol.commentlist li.comment div.vcard img.avatar { float: left; margin: 6px 1em 1em 0; border-radius: 50px; }
ol.commentlist li.comment div.comment-meta { font-size: 12px; }
ol.commentlist li.comment ul { margin: 0 0 1em 2em; }
ol.commentlist li.comment div.reply { margin-left: 80px; font-size: 11px; }
ol.commentlist li.comment div.reply a { font-weight: bold; }
ol.commentlist li.comment ul.children { margin: 1em 0 0; list-style: none; text-indent: 0; }
ol.commentlist li.comment ul.children li.depth-2 { margin: 0 0 .25em .25em; border-left: 1px solid #eee; }
ol.commentlist li.comment ul.children li.depth-3 { margin: 0 0 .25em .25em; border-left: 1px solid #eee; }
ol.commentlist li.comment ul.children li.depth-4 { margin: 0 0 .25em .25em; border-left: 1px solid #eee; }
ol.commentlist li.even { background: #fff; }
/* ol.commentlist li.odd {background: #f9f9f9;} */
ol.commentlist li.parent { border-left: 1px solid #eee; }
ol.commentlist li.bypostauthor .fn { font-weight: bold; }
ol.commentlist li img{max-width: 97%;}

input[type=text],
input[type=email],
input[type=tel] { width: 96%;margin-right: 10px; padding: 10px; border: none; background: #eee; -webkit-appearance: none; appearance: none; border-radius: 0;font-size: 14px;}
textarea { padding: 10px; width: 98%; border: none; background: #eee; -webkit-appearance: none; appearance: none; border-radius: 0;font-size: 14px;}
input[type=submit] { margin-top: 10px; padding: 15px 20px; color: #fff; text-transform: uppercase; background: #333; border:none; font-size: 14px;}
#comments { width: 100%; }
select{height: 38px;
  padding: 6px 10px;
  background-color: #fcfcfc;
  border: 1px solid #d1d1d1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
  width: 100%;}

.wpcf7-list-item{margin: 0;}










/* ! Grid System */
.grid { margin: 0 auto;display: flex; flex-flow: row; flex-wrap: wrap;width: 100%;max-width: 1400px;}
.grid--center{justify-content: center;}
.col{ flex: 1;}

[class*='col-'] { position: relative;padding: 0 1%;}
.grid .grid [class*='col-'] {padding: 0px;}

.col-10{ width: 10%;}
.col-20{ width: 20%; }
.col-25{ width: 25%; }
.col-30{ width: 30%; }
.col-31{ width: 31%; }
.col-33{ width: 33.33%; }
.col-40{ width: 40%; }
.col-50{ width: 50%; }
.col-60{ width: 60%; }
.col-70{ width: 70%; }
.col-80{ width: 80%; }
.col-90{ width: 90%; }
.col-100{ width: 100%; }

@media (max-width: 991px) {
  .tab-20 { width: 20%; }
  .tab-25 { width: 25%; }
  .tab-33 { width: 33.33%; }
  .tab-50 { width: 50%; }
  .tab-100 { width: 100%; }
}

@media (max-width: 768px) {
  [class*='col-'] { width: 100%; padding: 0 20px;}
  .sma-20 { width: 20%; }
  .sma-25 { width: 25%; }
  .sma-33 { width: 33.33%; }
  .sma-50 { width: 50%; }
  .sma-100 { width: 100%; }
}




/* WordPress Core Styles
-------------------------------------------------------------- */
 .gallery-caption{padding:5px; font-size: 10px;}
 .bypostauthor{border-left: 3px solid #ddd;padding-left: 20px;}

 .alignfull {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	text-align: center;
}

.alignfull img {
	width: 100%;
}

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
        white-space: nowrap;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}