@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(''),
       url('https://www.cantinaperfetta.it/wp-content/uploads/fonts/bitter-v26-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://www.cantinaperfetta.it/wp-content/uploads/fonts/bitter-v26-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* bitter-500 - latin */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local(''),
       url('https://www.cantinaperfetta.it/wp-content/uploads/fonts/bitter-v26-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://www.cantinaperfetta.it/wp-content/uploads/fonts/bitter-v26-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* bitter-600 - latin */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local(''),
       url('https://www.cantinaperfetta.it/wp-content/uploads/fonts/bitter-v26-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://www.cantinaperfetta.it/wp-content/uploads/fonts/bitter-v26-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(''),
       url('https://www.cantinaperfetta.it/wp-content/uploads/fonts/open-sans-v28-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://www.cantinaperfetta.it/wp-content/uploads/fonts/open-sans-v28-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-500 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local(''),
       url('https://www.cantinaperfetta.it/wp-content/uploads/fonts/open-sans-v28-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://www.cantinaperfetta.it/wp-content/uploads/fonts/open-sans-v28-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local(''),
       url('https://www.cantinaperfetta.it/wp-content/uploads/fonts/open-sans-v28-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://www.cantinaperfetta.it/wp-content/uploads/fonts/open-sans-v28-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

:root {
  --clr-title: #313335;
  --white: #fff;
  --clr-text: #313335;
  --clr-dark: #313335;

  --yellow: #f1b209;
  --powder: rgb(240, 240, 240)/*#e8f3ff*/;

  --border-rad-btn: 0.25rem;
  --border-rad-img: 4px;

  --text: 'Open sans', sans-serif;
  --title: 'Bitter', sans-serif;

  --top: 75px;

  --bg-overlay: linear-gradient(135deg, rgba(25, 25, 25, 0.95), rgba(25, 25, 25, 0.4));
  --bg-vertical-overlay: linear-gradient(0deg, rgba(25, 25, 25, 1), transparent);

  --bg-blue-gradient: linear-gradient(135deg, #161c26, #162131, #13273d, #0d2c49, #003256);
}

::-moz-selection { /* Code for Firefox */
  color: var(--text);
  background: var(--yellow);
}

::selection {
  color: var(--text);
  background: var(--yellow);
}




/*** RESET
******************************************************************************/

*, *::before, *::after {
  box-sizing: border-box;
  text-decoration: inherit;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img, picture {
  max-width: 100%;
  display: block;
  height: auto;
  border-radius: var(--border-rad-img);
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  color: var(--clr-text);
}

input, button, textarea, select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

em {
  font-style: normal;
}


/** DA SPOSTARE
****************************************************************************/

u{
  border-bottom: 3px solid var(--yellow);
 }

strong{
  color:#222;
  letter-spacing: -0.02rem;
}


.no-top{
  padding-top: 0 !important;
}

.no-margin-top{
  margin-top: 0 !important;
}


/** BACKGROUNDS
****************************************************************************/


.bg-cream{
  background: var(--cream);
}

.bg-dark{
  background: linear-gradient(-115deg,#003256,#161c26);
  position: relative;
  height: 100%;
}

.bg-grey{
  background-color: var(--powder);
}

/*** STRUTTURA BASE
******************************************************************************/

body {
  font-family: var(--text);
  font-size: 1.12rem;
  color: var(--clr-text);
  letter-spacing: -0.01rem;
  line-height: 1.45;
  font-weight: 400;
}

@media screen and (min-width: 769px){
  body{
    font-size: 1.05rem;
    line-height: 1.55;
  }
}

@media screen and (min-width: 993px){
  body{
    font-size: 1.05rem;
  }
}

@media screen and (min-width: 1281px){ /** Vecchi desktop **/
  body{
    font-size: 1.02rem;
  }
}

@media screen and (min-width: 1441px){
  body{
    font-size: 1.15rem;
    line-height: 1.5;
  }
}

@media screen and (min-width: 1441px) and (-webkit-device-pixel-ratio: 1.25){
  body{
    font-size: 1.18rem;
    line-height: 1.5;
    letter-spacing: -0.02rem;
  }
}

/***
******************************************************************************/

.wrapper {
  width: 90vw;
  max-width: 1080px;
  margin: 0 auto;
}

.no-margin{
  margin: 0 !important;
}

mark{
  background: linear-gradient( to bottom, transparent 50%, var(--yellow) 50%);
}


.sidebar .wrapper li{
  margin: 16px 0;
  line-height: 1;
}

.sidebar .wrapper li:before{
  margin-right: 14px;
    width: 7px;
    height: 7px;
    background-size: 7px;
}

.sidebar h5{
  font-size: 1.35rem;
}

@media screen and (min-width: 1441px) {
  .wrapper {
    max-width: 1250px;
  }
}

/*** TIPOGRAFY
******************************************************************************/

/*** --- TITLES --- ***/

h1, h2, h3, h4 {
  font-family: var(--title);
  font-weight: 600;
  letter-spacing: 0.01rem;
  position: relative;
  color: var(--clr-title);
  position: relative;
}

h2 {
  font-size: 1.6rem;
  line-height: 1.2;
  margin-bottom: 2.4rem;
  letter-spacing: 0;
}

/***

.progettazione h2, .formazione h2 {
  padding-left: 82px;
  display: flex;
  align-items: center;
}



.progettazione h2::before{
  position: absolute;
  left: 0;
  content: "";
  width: 72px;
  height: 72px;
  background-image: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 19.05 19.05' xmlns='http://www.w3.org/2000/svg'%3E%3Cg style='display:inline;opacity:1'%3E%3Cpath style='fill:%23f1b209;fill-opacity:1;stroke:%232a2e2a;stroke-width:.79375;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:3;stroke-dasharray:none;stroke-opacity:1' d='M9.393.397v2.646h2.646' transform='translate(2.91)'/%3E%3Cpath style='fill:none;fill-opacity:1;stroke:%232a2e2a;stroke-width:.793746;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3;stroke-dasharray:none;stroke-opacity:1' d='M12.039 4.389v-1.61L9.657.396H.926v16.14h11.113v-4.102' transform='translate(2.91)'/%3E%3Cpath style='fill:%23f1b209;fill-opacity:1;stroke:%232a2e2a;stroke-width:.793748;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:3;stroke-dasharray:none;stroke-opacity:1' d='M2.249 4.101H4.63v2.381H2.25Z' transform='translate(2.91)'/%3E%3Cpath style='display:inline;fill:%23f1b209;fill-opacity:1;stroke:%232a2e2a;stroke-width:.79375;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:3;stroke-dasharray:none;stroke-opacity:1' d='M2.249 8.07H4.63v2.381H2.25ZM2.249 12.039H4.63v2.38H2.25z' transform='translate(2.91)'/%3E%3Cpath style='fill:none;stroke:%232a2e2a;stroke-width:.79375;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:3;stroke-dasharray:none;stroke-opacity:1' d='M5.953 4.366h4.498v0M5.953 5.689H8.6' transform='translate(2.91)'/%3E%3Cpath style='display:inline;fill:none;stroke:%232a2e2a;stroke-width:.79375;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:3;stroke-dasharray:none;stroke-opacity:1' d='M5.894 8.334h3.823v0M5.953 9.657H8.6' transform='translate(2.91)'/%3E%3Cpath style='fill:%23f1b209;fill-opacity:1;stroke-width:.79375;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none' d='M13.23 3.043V2.38h1.851v1.323H13.23z' transform='rotate(45 12.448 7.908)'/%3E%3Cpath style='fill:none;stroke:%232a2e2a;stroke-width:.79375;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' d='m15.266 3.822.978.042.028 4.206v0m-3.064-4.248 1.609.014v0m-1.702-1.605 2.087.03-.03 11.383-1.028 1.029-1.03-1.03z' transform='rotate(45 12.448 7.908)'/%3E%3Cpath style='fill:%23f1b209;stroke-width:.79375;stroke-linejoin:round' d='M14.023 4.233h.794v8.202h-.794z' transform='rotate(45 12.448 7.908)'/%3E%3Cpath style='fill:none;fill-opacity:1;stroke:%232a2e2a;stroke-width:.79375;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:3;stroke-dasharray:none;stroke-opacity:1' d='M1.19 2.514h-3.174v15.875H9.128V16.8' transform='translate(2.91)'/%3E%3C/g%3E%3C/svg%3E");
}

.formazione h2::before{
  position: absolute;
  left: 0;
  content: "";
  width: 72px;
  height: 72px;
  background-image: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 19.05 19.05' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill:%23fff;stroke:%232a2e2a;stroke-width:.793751;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:3;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1' d='M11.51 10.98h6.614V.926H.926V10.98h6.615'/%3E%3Cpath style='fill:none;stroke:%232a2e2a;stroke-width:.79375;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1' d='M5.424 18.389c0-2.338 1.836-4.234 4.101-4.234 2.265 0 4.101 1.896 4.101 4.234zm9.922-2.91c-.86 0-1.627.408-2.136 1.05.266.56.416 1.192.416 1.86h4.498c0-1.608-1.244-2.91-2.778-2.91zm-11.642 0c-1.534 0-2.778 1.302-2.778 2.91h4.498c0-.668.15-1.3.416-1.86a2.725 2.725 0 0 0-2.136-1.05z'/%3E%3Ccircle style='fill:none;stroke:%232a2e2a;stroke-width:.793744;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' cx='3.704' cy='13.494' r='1.455'/%3E%3Ccircle style='fill:none;stroke:%232a2e2a;stroke-width:.793744;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' cx='15.346' cy='13.494' r='1.455'/%3E%3Ccircle style='fill:none;stroke:%232a2e2a;stroke-width:.793745;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' cx='9.525' cy='11.642' r='1.984'/%3E%3Cpath style='fill:none;stroke:%23f1b209;stroke-width:.529166;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1' d='M2.646 3.969h6.879'/%3E%3Cpath style='fill:none;stroke:%23f1b209;stroke-width:.529167;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1' d='M2.646 4.763h6.879M2.646 5.556h6.879M2.646 6.35h6.879M2.646 7.144h6.879'/%3E%3Cpath style='fill:none;stroke:%23f1b209;stroke-width:.529166;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1' d='M2.646 7.938h3.44'/%3E%3Cpath style='fill:%232a2e2a;fill-opacity:1;stroke:none;stroke-width:.79375;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' d='M16.354 3.64a2.646 2.646 0 0 0-3.39-.64 2.646 2.646 0 0 0-.968 3.615 2.646 2.646 0 0 0 3.256 1.14l-.818-1.416a1.058 1.058 0 0 1-1.063-.518 1.058 1.058 0 0 1 .388-1.446 1.058 1.058 0 0 1 1.18.083Z'/%3E%3Cpath style='fill:%23f1b209;fill-opacity:1;stroke:none;stroke-width:.79375;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' d='m16.752 4.327-1.416.818a1.058 1.058 0 0 1-.215.797l.818 1.416a2.646 2.646 0 0 0 .813-3.03Z'/%3E%3C/svg%3E");
}

***/

h3 {
  font-size: 1.6rem;
  line-height: 1.2;
  margin-bottom: 2.1rem;
  letter-spacing: 0;
}

h2:after, h3:after {
  position: absolute;
  display: block;
  width: 7rem;
  content: '';
  height: 4px;
  background: var(--yellow);
  bottom: -1.1rem;
}

@media screen and (min-width: 1441px) {
  h2:after, h3:after {
    bottom: -1.1rem;
  }
}


h4 {
  font-size: 1.45rem;
  line-height: 1.2;
  margin-top: 1rem;
  margin-bottom: 1.3rem;
}

h4 span{
  color: var(--yellow);
  margin-right: 0.2rem;
}

.col3 h4:after {
  position: absolute;
  display: block;
  width: 7rem;
  content: '';
  height: 4px;
  bottom: -0.9rem;
  transform: scaleX(0.5);
  left: 0;
  background-color: var(--yellow);
  transform-origin: bottom left;
  transition: transform 0.250s ease;
}

h4:hover:after {
  transform: scaleX(1);
}

h5{
  font-size: 1.35rem;
  font-weight: 600;
  margin-top: 2rem;
  display: block;
  letter-spacing: 0.01rem;
  margin-bottom: 0;
  line-height: 1.35;
  font-family: var(--title);
}

.team .col3 h3 {
  font-size: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 0;
  text-align: center;
  line-height: 1;
  display: block;
}

.team .col3 h3:after {
  content: none;
}

.team .col3 p {
  margin-top: 7px;
  text-align: center;
  line-height: 1;
}

.team .col3{
  grid-column-gap: 1rem;
}

h1 span {
  display: inline-block;
}

.hero__underline{
  display: none;
}

@media screen and (min-width: 769px) {
  h1 em {
    position: relative;
    z-index: 1;
    display: inline-block;
  }

  .hero__underline{
    display: inline;
    position: absolute;
    bottom: -7px;
    left: 0px;
    width: 97%;
    min-height: 8px;
    overflow: visible;
    pointer-events: none;
    z-index: 1
  }


  h2{
    line-height: 1.1;
    font-size: 1.5rem;
    letter-spacing: 0;
  }

  h3{
    line-height: 1.15;
    font-size: 1.5rem;
    letter-spacing: 0.01rem;
    text-align: left;
  }

  h3::after{
    margin-top: 0.7rem;
  }

  h3 span {
    position: relative;
    z-index: 1;
    display: inline-block;
  }
}

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

  h2{
    font-size: 1.6rem;
    line-height: 1.15;
    position: relative;
    letter-spacing: 0rem;
  }

  h3{
    font-size: 1.6rem;
    line-height: 1.15;
    letter-spacing: 0rem;
  }



  .sidebar a.btn{
    margin-top: 1.5rem;
  }

  .sidebar h3 {
    font-size: 1.65rem;
    margin-top: 3rem;
  }

  .sidebar .col3{
    text-align: center;
    grid-column-gap: 1.8rem;
  }

  .sidebar svg{
    margin: 0 auto;
  }

  h4 {
    font-size: 1.32rem;
  }
}

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

  h2 {
    font-size: 1.6rem;
    position: relative;
    margin-bottom: 2.8rem;
  }

  h3 {
    font-size: 1.6rem;
    line-height: 1.15;
  }



  .sidebar a.btn{
    margin-top: 1.5rem;
  }

  .servizi a.btn{
    margin-top: 1rem;
  }

  .sidebar h3 {
    font-size: 1.65rem;
    margin-top: 3rem;
  }

  .sidebar .col3{
    text-align: center;
  }

  .sidebar svg{
    margin: 0 auto;
  }

  h4 {
    font-size: 1.35rem;
  }

}

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

  h2 {
    font-size: 1.85rem;
    letter-spacing: 0rem;
  }

  h3{
    font-size: 1.85rem;
    margin-bottom: 2.5rem;
    letter-spacing: -0.01rem;
  }



  .sidebar a.btn{
    margin-top: 1.5rem;
  }

  .sidebar h3 {
    font-size: 1.5rem;
    margin-top: 3rem;
  }

  .sidebar .col3{
    text-align: center;
  }

  .sidebar svg{
    margin: 0 auto;
  }

  h4{
    font-size: 1.48rem;
  }
}

@media screen and (min-width: 1441px) and (-webkit-device-pixel-ratio: 1.25){

  h2 {
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: 0.01rem;
  }



  h3{
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: 0.01rem;
  }


  .sidebar a.btn{
    margin-top: 1.5rem;
  }

  .sidebar h3 {
    font-size: 1.5rem;
    margin-top: 3rem;
  }

  .sidebar .col3{
    text-align: center;
  }

  .sidebar svg{
    margin: 0 auto;
  }

  h4{
    font-size: 1.5rem;
  }
}


/*** TOP NAVIGATION
******************************************************************************/

.top {
  display: flex;
  align-items: center;
  height: var(--top);
  width: 100%;
  background-color: var(--white);
  z-index: 999;
}

@media only screen and (max-width: 992px) {
  .top {
    position: fixed;
    top:0;
    left: 0;
    box-shadow:0 2px 7px 0 rgba(32, 33, 36, 0.28);
  }
}

/** MAIN MENU
*******************************************************************/

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}

.nav-menu li {
  display: inline-block;
  padding: 10px 20px;
}

.nav-logo{
  display: flex;
}

.nav-menu li a {
  font-size: 1.05rem;
  font-weight: 500;
}

.hamburger {
  display: none;
}

.bar {
  width: 30px;
  height: 3px;
  background-color: var(--clr-title);
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 992px) {
  .nav-menu {
    position: fixed;
    left: -100%;
    top: var(--top);
    flex-direction: column;
    background-color: rgba(22, 28, 38, 0.8);
    width: 100%;
    height: 100vh;
    padding: 0;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    z-index: 999;
  }

  .nav-menu li {
    display: block;
    background-color: #fff;
    color: #fff;
    border-bottom: 1px solid #ccc;
    padding: 0;
  }

  .nav-menu li a{
    padding: 15px 0 15px 10vw;
    display: block;
    width: 100%;
    height: 100%;
  }

  .nav-menu li:last-child{
    border-bottom: 5px solid var(--yellow);
  }

  .nav-menu.active {
    left: 0;
  }

  .hamburger {
    display: block;
    cursor: pointer;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-menu li a {
    font-size: 1.1rem;
    letter-spacing: -0.02rem;
  }

}

@media screen and (min-width: 993px){
  .nav-menu li a {
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: -0.02rem;
  }
}

@media screen and (min-width: 1441px){
  .nav-menu li a {
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 600;
  }
}



/** SERVIZI
*******************************************************************/

.servizi .col2 .wrapper {
  grid-row-gap: 0;
  align-items: baseline;
  justify-items: start;
}

.servizi .col2 .wrapper .service-text {
  order: 3;
}

.servizi .col2 .wrapper .service-image{
  order: 2;
  margin-bottom: 1.5rem;
}

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

  .servizi .col2 .wrapper {
    grid-column-gap: 3rem;
    grid-template-columns: 55% 1fr;
    grid-template-rows: min-content 1fr;
	align-items: center;
  }

  .servizi .col2 .wrapper .service-text p {
    margin-top: 0;
  }

  .servizi .col2 .wrapper .service-image{
    grid-row: 1 /span 2;
    grid-column: 2;
    margin-bottom: 0;
  }

  .servizi .col2.col2.text-right .wrapper .service-image{
    grid-row: 1 /span 2;
    grid-column: 1;
    margin-top: 0;
  }

}













/**** HERO
****************************************************************************/

#hero {
  display: grid;
  grid-template-areas: "hero";
  place-items: center;
  background: var(--bg-overlay);
  overflow: hidden;
  margin-top: var(--top);
}

#hero > * {
  grid-area: hero;
}

#hero img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  z-index: -1;
}

#hero, #hero img{
  height: 52vh;
}

#hero h1 {
  font-size: 1.85rem;
  font-weight: 500;
  color: var(--powder);
  letter-spacing: 0.01rem;
  line-height: 1.15;
  max-width: 26ch;
}

#hero h4 {
  font-size: 1.25rem;
  color: var(--yellow);
  letter-spacing: 0.01rem;
  margin: 0 0 0.3rem 0;
  font-weight: 600;
}

#hero a.btn {
  margin-top: 2rem;
  letter-spacing: 0;
}

/**** HERO [769]
****************************************************************************/

@media screen and (min-width: 769px){
  #hero, #hero img {
    height: calc(75vh - var(--top));
  }

  #hero h1 {
    font-size: 2.35rem;
    line-height: 1.15;
  }

  #hero p {
    font-size: 1.35rem;
  }

  #hero a.btn{
    margin-top: 4.5rem;
    letter-spacing: -0.01rem;
  }

  #hero h4 {
    font-size: 1.25rem;
    color: var(--yellow);
    letter-spacing: 0.01rem;
    margin: 0 0 0.3rem 0;
    font-weight: 600;
  }

}

/**** HERO [993] HEADER NO MORE FIXED
****************************************************************************/


@media screen and (min-width: 993px){
  #hero {
    margin-top: 0;
  }

  #hero h1 {
    font-size: 2.1rem;
    line-height: 1.15;
    font-weight: 500;
    max-width: 28ch;
  }

  #hero h4 {
    font-size: 1.05rem;
    color: var(--yellow);
    letter-spacing: 0.01rem;
    margin: 0 0 0.3rem 0;
  }
}





/**** HERO [1281]
****************************************************************************/

@media screen and (min-width: 1281px){
  #hero h1 {
    font-size: 2.15rem;
    line-height: 1.15;
    letter-spacing: 0;
  }
}

/**** HERO [1441]
****************************************************************************/

@media screen and (min-width: 1441px) {
  #hero h1 {
    font-size: 2.6rem;
    line-height: 1.15;
    letter-spacing: -0.02rem;
  }

  #hero h4 {
    font-size: 1.35rem;
    color: var(--yellow);
    letter-spacing: 0.01rem;
    margin: 0 0 0.3rem 0;
  }
}

@media screen and (min-width: 1441px) and (-webkit-device-pixel-ratio: 1.25){
  #hero, #hero img {
    height: calc(100vh - var(--top));
  }

  #hero h1 {
    font-size: 2.7rem;
    line-height: 1.18;
    letter-spacing: -0.01rem;
    max-width: 28ch;
    font-weight: 500;
  }

  #hero h4 {
    font-size: 1.3rem;
  }
}


/**** LINK BUTTON YELLOW
****************************************************************************/

a.btn {
  display: inline-flex;
  align-items: center;
  padding: 19px 13px 19px 20px;
  position: relative;
  font-size: 0.85rem;
  font-weight: 600;
  color: #3f3f3f;
  letter-spacing: -0.02rem;
  line-height: 1;
  background: var(--yellow);
  margin-top: 2.5rem;
  text-transform: uppercase;
  background-image: radial-gradient(100% 100% at 100% 0, #fad05a 0, #d1a424 100%);
  cursor: pointer;
  border-radius: 5px;
  box-shadow: rgb(45 35 66 / 40%) 0 1px 5px, rgb(45 35 66 / 30%) 0 4px 13px -3px, rgb(58 65 111 / 32%) 0 -2px 0 inset;
  justify-content: center;
  justify-content: space-between;
  min-width: 200px;
  z-index: 2;
}

a.btn::after{
  display: block;
  content: ' ';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.134 24'%3E%3Cpath d='M13.497 10.464c.848.848.848 2.143 0 2.993l-.043.037-9.859 9.902a2.149 2.149 0 0 1-2.987 0 2.137 2.137 0 0 1 0-2.987l8.484-8.447L.688 3.554a2.104 2.104 0 0 1 0-2.95 2.104 2.104 0 0 1 2.95 0z' fill='%233f3f3f'/%3E%3C/svg%3E ");  
  height: 24px;
  width: 12px;
  height: 12px;
  margin-left: 2.5rem;
  background-repeat: no-repeat;
}

a.btn.download::after{
  display: block;
  content: ' ';
  height: 28px;
  width: 28px;
  background-size: 28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 482.14 482.14' style='enable-background:new 0 0 482.14 482.14' xml:space='preserve'%3E%3Cpath d='M142.024 310.194c0-8.007-5.556-12.782-15.359-12.782-4.003 0-6.714.395-8.132.773v25.69c1.679.378 3.743.504 6.588.504 10.449 0 16.903-5.279 16.903-14.185zM202.709 297.681c-4.39 0-7.227.379-8.905.772v56.896c1.679.394 4.39.394 6.841.394 17.809.126 29.424-9.677 29.424-30.449.126-18.063-10.458-27.613-27.36-27.613z'/%3E%3Cpath d='M315.458 0H121.811c-28.29 0-51.315 23.041-51.315 51.315v189.754h-5.012c-11.418 0-20.678 9.251-20.678 20.679v125.404c0 11.427 9.259 20.677 20.678 20.677h5.012v22.995c0 28.305 23.025 51.315 51.315 51.315h264.223c28.272 0 51.3-23.011 51.3-51.315V121.449L315.458 0zM99.053 284.379c6.06-1.024 14.578-1.796 26.579-1.796 12.128 0 20.772 2.315 26.58 6.965 5.548 4.382 9.292 11.615 9.292 20.127 0 8.51-2.837 15.745-7.999 20.646-6.714 6.32-16.643 9.157-28.258 9.157-2.585 0-4.902-.128-6.714-.379v31.096h-19.48v-85.816zm286.981 166.334H121.811c-10.954 0-19.874-8.92-19.874-19.889v-22.995h246.31c11.42 0 20.679-9.25 20.679-20.677V261.748c0-11.428-9.259-20.679-20.679-20.679h-246.31V51.315c0-10.938 8.921-19.858 19.874-19.858l181.89-.19V98.5c0 19.638 15.934 35.587 35.587 35.587l65.862-.189.741 296.925c0 10.97-8.904 19.89-19.857 19.89zm-211.969-80.912v-85.422c7.225-1.15 16.642-1.796 26.58-1.796 16.516 0 27.226 2.963 35.618 9.282 9.031 6.714 14.704 17.416 14.704 32.781 0 16.643-6.06 28.133-14.453 35.224-9.157 7.612-23.096 11.222-40.125 11.222-10.198 0-17.423-.646-22.324-1.291zm140.827-50.575v15.996h-31.23v34.973h-19.74v-86.966h53.16v16.122h-33.42v19.875h31.23z' fill='%233f3f3f' /%3E%3C/svg%3E")
}

@media screen and (min-width: 769px){
  a.btn{
    font-size: 0.85rem;
    padding: 15px 10px 15px 15px;
    letter-spacing: 0rem;
    margin-top: 2.8rem;
  }

  a.btn.download{
    font-size: 0.9rem;
    letter-spacing: -0.01rem;
    padding: 11px 14px 10px 18px;
    width: 100%;
  }
}

@media screen and (min-width: 1281px){
  a.btn{
    font-size: 0.85rem;
    padding: 16px 13px 16px 16px;
    letter-spacing: 0rem;
  }

  a.btn.download{
    font-size: 0.9rem;
    letter-spacing: -0.01rem;
    padding: 11px 14px 10px 18px;
    width: 100%;
  }
}

@media screen and (min-width: 1441px){
  a.btn{
    font-size: 0.85rem;
    padding: 18px 13px 18px 22px;
    letter-spacing: 0rem;
  }

  a.btn.download{
    font-size: 0.9rem;
    letter-spacing: -0.01rem;
    padding: 12px 15px 11px 19px;
    width: 100%;
  }

  .hero__underline {
    bottom: -12px;
  }
}

@media screen and (min-width: 1441px) and (-webkit-device-pixel-ratio: 1.25){
  
  .hero__underline {
    bottom: -12px;
  }
  
  a.btn{
    font-size: 0.9rem;
    letter-spacing: -0.01rem;
    padding: 19px 14px 19px 23px;
  }

  a.btn.download{
    font-size: 0.9rem;
    letter-spacing: -0.01rem;
    padding: 13px 16px 12px 20px;
    width: 100%;
  }

  
}

/** SIDE IMAGE (BORDO GIALLO RETTANGOLARE)
*************************************************************************************************************/

.side-img{
  position: relative;
}

.side-img-brd{
    display: none;
}

@media screen and (min-width: 769px){
  .side-img-brd{
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 6px solid var(--yellow);
    top: 30px;
    left: 30px;
    z-index: -1;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
  }
}


/** SECTIONS
*************************************************************************************************************/

section{
  padding: 3rem 0;
}

section p{
  margin-top: 0.5rem;
}

.formula p{
  margin-top: 1.1rem;
}

.width60{
  max-width: 60%;
}

@media screen and (min-width: 769px){
  section{
    padding: 5rem 0;
  }

  section p{
    margin-top: 0.5rem;
  }

}

@media screen and (min-width: 1441px){
  section{
    padding: 6.5rem 0;
  }
}

.news-home{
  background-color: var(--cream);
}

/** FOOTER
*************************************************************************************************************/

footer{
  padding: 4rem 0 1.5rem;
  background: var(--bg-blue-gradient);
}

footer .wrapper {
  display: grid;
  grid-row-gap: 2.5rem;
}

footer .legal span:not(:first-child):before {
  content: " | ";
  padding: 0 8px;
}

footer li, footer p, footer a {
  font-size: 1.05rem;
  font-weight: 400;
  margin: 3px 0;
  color: #fffb;
  letter-spacing: 0.01rem;
}

.col2 li, footer li, .sidebar li{
  display: flex;
  align-items: center;
  margin: 0;
}

@media screen and (min-width: 769px) {
  .col2 li, .sidebar li, footer li{
    align-items: center;
  }
}

.col2 li::before, footer li::before, .sidebar li:before {
  display: inline-block;
  content: ' ';
  background-size: 6px 6px;
  height: 6px;
  width: 6px;
  margin-right: 11px;
}

footer li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' xml:space='preserve'%3E%3Ccircle cx='60' cy='60.834' r='54.167' fill='%23fff'/%3E%3C/svg%3E");
}



.sidebar ul{
  margin: 1.5rem 0 1.5rem 1.5rem;
}

.col2 ul{
  margin: 2rem;
}

.col2 li {
  margin: 4px 0;
}


.col2 li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' xml:space='preserve'%3E%3Ccircle cx='60' cy='60.834' r='54.167' fill='%23444'/%3E%3C/svg%3E");
  height: 7px;
  width: 7px;
  height: 7px;
  background-size: 7px 7px;
}

.sidebar li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' xml:space='preserve'%3E%3Ccircle cx='60' cy='60.834' r='54.167' fill='%23444'/%3E%3C/svg%3E");
}





footer li a:hover, footer .privacy a:hover {
  color: var(--yellow);
}

footer h4{
  font-weight: 500;
  letter-spacing: 0.01rem;
  margin-bottom: 1rem;
  color: #fff;
}

@media screen and (min-width: 481px) {
  footer h4{
    margin-bottom: 1.2rem;
  }
}



footer .privacy{
  font-size: 0.8rem;
  font-weight: 400;
  color: #fff7;
  letter-spacing: 0.01rem;
  justify-content: space-between;
  align-items: center;
  display:flex;
  padding-top: 1.2rem;
  border-top: 1px solid #fff2;
  margin-top: 2rem;
}

footer a, .navbar a{
  display: inline-block;
  position: relative;
}

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

  footer a:after, .navbar a:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--yellow);
    transform-origin: bottom right;
    transition: transform 0.40s ease-out;
  }

  .navbar .current-menu-item a:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--yellow);
    transform: scaleX(1);
  }

  @media screen and (min-width: 993px) and (-webkit-device-pixel-ratio: 1.25){
    .navbar a:after {
      bottom: -2px;
    }

    footer a:after, .navbar a:after, .navbar .current-menu-item a:after {
      bottom: -2px;
    }
  }

  .navbar a:after {
    height: 2px;
  }

  footer a:hover:after, .navbar a:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }

}

footer .privacy a{
  color: #fff7;
  font-size: 0.8rem;
  letter-spacing: 0.01rem;
}

@media screen and (min-width: 993px) {
  footer .wrapper {
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 1rem;
    position: relative;
  }

  footer li, footer p, footer a {
    font-size: 0.9rem;
  }
}

@media screen and (min-width: 1441px) {
  footer li, footer p, footer a {
    font-size: 1rem;
  }
}


@media screen and (min-width: 993px) and (-webkit-device-pixel-ratio: 1.25){
  .navbar .current-menu-item a:after, .navbar a:after {
    bottom: -2px;
  }
}

@media screen and (min-width: 1441px) and (-webkit-device-pixel-ratio: 1.25){
  footer li, footer p, footer a {
    font-size: 1.02rem;
  }

  footer .privacy{
    font-size: 0.8rem;
  }
}

/*** GRIGLIA 2 COLONNE - .col2
**********************************************************************************************/


.col2 .wrapper {
  display: grid;
  grid-row-gap: 2rem;
  /*justify-items: center;*/
}

@media screen and (min-width: 993px) {
  .col2 .wrapper {
    grid-column-gap: 3rem;
    grid-template-columns: 54% 1fr;
    align-items: center;
   }

  .webform .wrapper{
    align-items: start;
  }

  .sidebar .wrapper {
    grid-column-gap: 3.8rem;
    grid-template-columns: 75% 1fr;
    align-items: start;
  }

  .col2.text-right .wrapper {
    grid-column-gap: 3.8rem;
    grid-template-columns: 1fr 58%;
  }

  .progettazione .wrapper, .formazione .wrapper{
    position: relative;
  }

  .servizi  main .col2 .wrapper {
    grid-column-gap: 3rem;
    grid-template-columns: 58% 1fr;
    align-items: center;
  }

  .formazione .service-image, .progettazione .service-image{
    z-index: 1;
  }

  .col2 li {
    margin: 5px 0;
  }



  .banner.col2 .wrapper, .call-to .wrapper {
    place-items: center;
  }

  .col2 h2+p {
    margin-top: 0;
  }


}

/** CALL-TO-ACTION - BANNER
****************************************************************************/

.banner{
  margin-top: var(--top);
  padding: 4rem 0;
}

.banner img{
  max-height: 302px;
  justify-self: left;
}

.call-to, .banner{
  background: var(--bg-blue-gradient);
  position: relative;
}

.call-to .wrapper, .wrapper .banner {
  grid-row-gap: 1.5rem;
  justify-items: center;
}

.call-to .wrapper div, .wrapper .banner div {
  display: grid;
  text-align: center;
}

.call-to h3, .banner h3 {
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--powder);
  letter-spacing: 0rem;
  margin-bottom: 1rem;
  order: 2;
}

@media screen and (max-width: 460px) {
  .call-to h3 {
    width: 90%;
    margin: 0 auto;
  }

  .call-to p {
    display: none;
  }
}

.call-to p, .banner p {
  font-family: var(--title);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--yellow);
  letter-spacing: 0.01rem;
  margin: 0 0 0.3rem;
}

.call-to h3:after, .banner h3:after {
  content: none;
}

.call-to a.btn {
  margin: 0;
  z-index: 999;
}

.call-to h3 span, .banner h3 span {
  color: var(--yellow);
}

@media screen and (min-width: 769px) {
  .call-to{
    padding: 4rem 0;
  }

  .call-to .wrapper > div, .banner .wrapper > div {
    text-align: left;
    padding: 1rem 0 1rem 1.5rem;
    border-left: 6px solid var(--yellow);
  }

  .call-to .wrapper{
    align-items: center;
  }

  .call-to h3, .banner h3 {
    font-size: 1.9rem;
    letter-spacing: -0.01rem;
    margin: 0;
  }



  .call-to p, .banner p {
    font-size: 1rem;
  }
}

@media screen and (min-width: 993px){
  .banner {
    margin-top: 0;
  }

  .call-to h3, .banner h3 {
    font-size: 1.8rem;
    letter-spacing: 0.01rem;
    margin: 0;
  }
}

@media screen and (min-width: 1441px){
  .call-to h3, .banner h3{
    font-size: 2.2rem;
    letter-spacing: 0.01rem;
  }

  .call-to p, .banner p {
    font-size: 1.3rem;
  }
}

@media screen and (min-width: 1441px) and (-webkit-device-pixel-ratio: 1.25){
  .call-to h3{
    font-size: 2.15rem;
  }

  .banner h3{
    font-size: 2.2rem;
  }

  .call-to p, .banner p {
    font-size: 1.3rem;
  }
}


/*** GRIGLIA 3 COLONNE .col3
**********************************************************************************************/


.col3 {
  display: grid;
  position: relative;
  grid-row-gap: 3.5rem;
  margin-top: 2.5rem;
}

.col3 a > div {
  display: grid;
}

.col3 .img-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-rad-img);
  order: 1;
  grid-row: 1 / span 2;
}

.col3 .img-wrapper p{
  position: absolute;
  top: 14px;
  right: 18px;
  background: var(--yellow);
  padding: 7px 14px;
  line-height: 1;
  font-size: 0.85rem;
  border-radius: var(--border-rad-btn);
  font-weight: 600;
  letter-spacing: -0.01rem;
}

.col3 img {
  transition: all .7s;
}

.col3 img:hover {
  transform: scale(1.1);
}

.col3 h4 {
  order: 2;
  margin-top: 1rem;
}

.col3 p {
  order: 3;
  line-height: 1.45;
  margin-top: 0.3rem;
  margin-bottom: 0;
}


@media screen and (min-width: 481px) {
  .col3 a > div {
    display: grid;
    grid-template-columns: 40% auto;
    grid-template-rows: 25px 1fr;
    column-gap: 1rem;
    row-gap: 0;

  }

  .col3 .img-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-rad-img);
    order: 1;
    grid-row: 1 / span 2;
  }

  .col3 h4 {
    margin-top: 0;
  }
}

@media screen and (min-width: 993px) {
  .col3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 1.05rem;
    position: relative;
  }

  .col3 a > div {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content;
    column-gap: 1rem;
    row-gap: 0;
  }

  .sidebar .col3 a > div{
    display: flex;
    flex-direction: column;
  }

  .sidebar svg{
    margin-bottom: 10px;
    margin-top: 10px;
  }


  .sidebar .col3 p{
    font-size: 1.05rem;
  }

  .col3 h4 {
    margin-top: 1rem;
  }
}


/*** TIPOGRAFY - margins - padding - line-height
******************************************************************************/

s {
  background: linear-gradient(to top, yellow 20%, transparent 50%);
}




/*** AZIENDA
*******************************************************************************/
.col2-20 {
    display: grid;
    grid-template-columns: 20% 1fr;
    align-items: baseline;
}

/*** SCROLLBAR
******************************************************************************/


::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 3px rgb(40 40 40 / 60%);
  background-color: #ccc;
}

/**** CF7
****************************************************************************/

.webform{
  padding-top: 2.5rem;
}

.wpcf7-form {
  display: grid;
  width: 100%;
  grid-row-gap: 1.3rem;
  margin-top: 2.5rem;
}

.wpcf7-form p{
  margin-top: 0;
  line-height: 1.25rem;
}

.wpcf7-form > div {
  display: grid;
  line-height: 1;
  grid-row-gap: 0.3rem;
}

label{
  font-weight: 600;
}

input,
textarea,
button {
  font-family: inherit;
  font-size: 100%;
}

textarea {
  resize: none;
  height: 170px;
}

::placeholder {
  color: inherit;
  /*Fix opacity issue on Firefox*/
  opacity: 1;
}


input[type=text],input[type=email],input[type=tel], textarea{
  width: 100%;
  line-height: 1.5;
  padding: 11px 8px;
  border: 1px solid var(--clr-dark);
  color: var(--clr-text);
  background-color: var(--white);
  transition: background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25),
  transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);
  border-radius: 2px;
  outline: none;
  font-size: 1.1rem;
}

input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus, input[type=text]:focus-visible, textarea:focus, textarea:focus-visible {
  background-color: var(--powder);
  border: 2px solid var(--clr-dark);
  transform: scale(1.02);
  outline: none;
}

.wpcf7-validates-as-required{
  background-repeat: no-repeat;
  background-position: center right 12px;
  background-size: 9px 9px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 209.172 209.172' style='enable-background:new 0 0 209.172 209.172' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m198.855 132.631-43.571-28.045 43.571-28.044c4.701-3.026 6.064-9.312 3.038-14.013l-18.726-29.094a10.105 10.105 0 0 0-8.533-4.652c-1.945 0-3.84.558-5.48 1.614l-37.128 23.898V10.139C132.025 4.549 127.477 0 121.886 0h-34.6c-5.591 0-10.139 4.549-10.139 10.139v44.155L40.019 30.396a10.106 10.106 0 0 0-5.48-1.614 10.102 10.102 0 0 0-8.532 4.652L7.279 62.528c-3.026 4.701-1.663 10.987 3.038 14.013l43.571 28.044-43.571 28.045c-4.701 3.026-6.064 9.312-3.038 14.013l18.726 29.093a10.106 10.106 0 0 0 8.533 4.653c1.945 0 3.84-.558 5.48-1.614l37.128-23.898v44.154c0 5.591 4.549 10.139 10.139 10.139h34.6c5.591 0 10.139-4.549 10.139-10.139v-44.154l37.128 23.898a10.106 10.106 0 0 0 5.48 1.614h.001c3.467 0 6.657-1.739 8.532-4.653l18.726-29.093c3.027-4.7 1.664-10.986-3.036-14.012z' style='fill:%23f1b209;fill-opacity:1'/%3E%3C/svg%3E");
}

.form-control {
  line-height: 1;
  display: grid;
  grid-template-columns: 1em auto;
  gap: 1.5rem;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.1;
}

input[type="checkbox"] {
  appearance: none;
  background-color: #fff;
  margin: 0;
  font-size: 16px;
  color: currentColor;
  width: 24px;
  height: 24px;
  border: 1px solid var(--clr-dark);
  border-radius: 2px;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
  padding: 0;
  line-height: 1;
  margin-top: 4px;;
}

input[type="checkbox"]::before {
  content: "";
  width: 16px;
  height: 16px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--yellow);
  line-height: 1;
  margin: 0;
  padding: 0;
  border-radius: 1px;
  background-color: var(--yellow);
  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}



input[type="submit"] {
  background: var(--yellow);
  border: none;
  width: 220px;
  padding: 19px 13px 19px 20px;
  border-radius: 3px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  background-image: radial-gradient(100% 100% at 100% 0, #fad05a 0, #d1a424 100%);
  cursor: pointer;
  border-radius: 5px;
  box-shadow: rgb(45 35 66 / 40%) 0 1px 5px, rgb(45 35 66 / 30%) 0 4px 13px -3px, rgb(58 65 111 / 32%) 0 -2px 0 inset;
  justify-content: center;
  justify-content: space-between;
  min-width: 200px;
  z-index: 2;
  margin-top: 2rem;;
}


input[type="submit"]::after {
  display: block;
  content: ' ';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.134 24'%3E%3Cpath d='M13.497 10.464c.848.848.848 2.143 0 2.993l-.043.037-9.859 9.902a2.149 2.149 0 0 1-2.987 0 2.137 2.137 0 0 1 0-2.987l8.484-8.447L.688 3.554a2.104 2.104 0 0 1 0-2.95 2.104 2.104 0 0 1 2.95 0z' fill='%233f3f3f'/%3E%3C/svg%3E ");  
  height: 24px;
  width: 12px;
  height: 12px;
  margin-left: 2.5rem;
  background-repeat: no-repeat;
}

.webform ul{
  margin-bottom: 1.6rem;
}

.webform .side ul:last-child{
  margin-top: 3.2rem;
}

.webform li {
  margin: 1px 0;
}

.webform li.user-name {
  margin: 7px 0;
}

.webform li:before{
  background-image: none;
  margin-right: 0;
  width: 0;
}


.webform li.user-tel:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M30.89 421.9c-8.054 0-14.582-6.53-14.582-14.582V55.108c0-30.388 24.723-55.112 55.111-55.112h229.92c30.389 0 55.112 24.724 55.112 55.112v228.57c0 8.052-6.528 14.582-14.582 14.582s-14.582-6.53-14.582-14.582V55.108c0-14.309-11.641-25.949-25.949-25.949H71.428c-14.308 0-25.947 11.639-25.947 25.949v352.21c0 8.054-6.53 14.582-14.582 14.582z' fill='%23333'/%3E%3Cpath d='M30.889 402.59v54.302c0 22.385 18.146 40.531 40.531 40.531h229.92c22.385 0 40.531-18.146 40.531-40.531V402.59H30.891' fill='%23f1b209'/%3E%3Cg fill='%23333'%3E%3Cpath d='M301.33 512H71.41c-30.389 0-55.111-24.724-55.111-55.112v-54.302c0-8.052 6.528-14.582 14.582-14.582h310.98c8.054 0 14.582 6.53 14.582 14.582v54.302C356.442 487.276 331.72 512 301.329 512zM45.47 417.168v39.72c0 14.309 11.639 25.949 25.947 25.949h229.92c14.308 0 25.949-11.639 25.949-25.949v-39.72H45.476z'/%3E%3Cpath d='M210.42 464.34h-46.834c-8.054 0-14.582-6.53-14.582-14.582s6.528-14.582 14.582-14.582h46.834c8.054 0 14.582 6.53 14.582 14.582 0 8.053-6.529 14.582-14.582 14.582zM341.86 435.34c-8.054 0-14.582-6.53-14.582-14.582v-66.792c0-8.052 6.528-14.582 14.582-14.582s14.582 6.53 14.582 14.582v66.793c0 8.051-6.528 14.581-14.582 14.581zM443.39 348.65a14.547 14.547 0 0 1-11.16-5.188c-5.188-6.159-4.401-15.358 1.759-20.547a92.62 92.62 0 0 0 5.812-5.327c35.657-35.657 35.657-93.679-.001-129.34-5.694-5.694-5.694-14.928 0-20.623 5.694-5.693 14.926-5.691 20.622 0 47.028 47.031 47.028 123.55 0 170.58a122.355 122.355 0 0 1-7.645 7.01 14.53 14.53 0 0 1-9.387 3.429z'/%3E%3Cpath d='M403.4 328.19a14.554 14.554 0 0 1-11.46-5.553c-4.987-6.323-3.904-15.492 2.421-20.479a63.767 63.767 0 0 0 5.553-4.93c24.431-24.432 24.431-64.19-.003-88.622-5.694-5.694-5.694-14.928 0-20.623 5.694-5.693 14.928-5.693 20.623 0 35.805 35.805 35.805 94.064 0 129.87a92.732 92.732 0 0 1-8.112 7.202 14.52 14.52 0 0 1-9.022 3.134z'/%3E%3C/g%3E%3C/svg%3E");  height: 24px;
  width: 24px;
  height: 24px;
  background-size: 24px 24px;
  margin-right: 10px;
}


.webform li.user-email:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M468.48 451.49h-59.412c-7.906 0-14.317-6.41-14.317-14.317s6.411-14.317 14.317-14.317h59.412c8.208 0 14.886-6.679 14.886-14.886V104.02c0-8.209-6.679-14.886-14.886-14.886H43.52c-8.208-.001-14.886 6.677-14.886 14.886v303.95c0 8.209 6.679 14.886 14.886 14.886h299.56c7.906 0 14.317 6.41 14.317 14.317s-6.411 14.317-14.317 14.317H43.52C19.524 451.489.001 431.965.001 407.97V104.02c0-23.997 19.523-43.521 43.519-43.521h424.96c23.997 0 43.52 19.523 43.52 43.519v303.95c0 23.997-19.522 43.521-43.519 43.521z' fill='%23333'/%3E%3Cpath d='M480.55 125.36 271.48 284.77a25.534 25.534 0 0 1-30.968 0L31.442 125.36c-19.435-14.819-8.955-45.846 15.483-45.846h418.14c24.44 0 34.92 31.027 15.485 45.846z' fill='%23f1b209'/%3E%3Cpath d='M256 304.32c-8.68 0-17.263-2.898-24.165-8.162l-209.07-159.41C8.947 126.211 3.611 108.766 9.173 92.302c5.561-16.464 20.381-27.101 37.758-27.101h418.14c17.377 0 32.198 10.637 37.758 27.101 5.561 16.464.225 33.91-13.594 44.446l-209.07 159.41c-6.902 5.262-15.485 8.162-24.165 8.162zM46.93 93.83c-7.473 0-10.026 5.841-10.63 7.631s-2.116 7.983 3.827 12.514l209.07 159.41a11.13 11.13 0 0 0 6.803 2.298c2.478 0 4.832-.795 6.803-2.298l209.07-159.41c5.943-4.531 4.434-10.723 3.828-12.514-.604-1.79-3.158-7.631-10.631-7.631H46.93z' fill='%23333'/%3E%3C/svg%3E ");  width: 24px;
  height: 24px;
  background-size: 24px 24px;
  margin-right: 10px;
}

.wpcf7-not-valid-tip{
    color: red;
    font-weight: 600;
    font-size: 1rem;
    padding-top: 5px;
}

.wpcf7 .wpcf7-response-output{
  font-weight: 600;
  font-size: 1.1rem;
  padding-top: 5px;
  margin-top: 1.5rem;
  text-decoration: underline;
  text-underline-offset: 1px;
  line-height: 1.4rem;
}

.screen-reader-response {
  display: none;
}

.wpcf7-form.invalid .wpcf7-response-output, .wpcf7-form.unaccepted .wpcf7-response-output {
	color: red;
}