/*
Theme Name: AutoElite
Theme URI: https://autoelitebrescia.com
Author: AutoElite
Author URI: https://autoelitebrescia.com
Description: Our fantastic theme
Tags: one-column
Version: 1.0
Requires at least: 5.0
Tested up to: 7.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: autoelite
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.
*/


/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/montserrat-v31-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/montserrat-v31-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/montserrat-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/montserrat-v31-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/montserrat-v31-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


:root{
  --white: #fff;
  --whitelo: #ffffff1a;
  --black: #000;
  --transparent: transparent;

  --green: #04FE00;
  --grey: #333;
  --dark-grey: #222;
  --background: #000;
  --orange: #ff7a00;
  --blue: #018CD1;

  --green-selection: #04FE0026;
  --green-lo: #04FE0026;
  --green-mo: #04FE0073;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-3: clamp(1.4rem, 2.2vw, 2rem);
  --font-intermediate: clamp(1.2rem, 1.8vw, 1.6rem);
  --font-p: clamp(1rem, 1.2vw, 1.2rem);
  --font-button: clamp(1rem, 1.3vw, 1.3rem);

  --letter-spacing: 0.02rem;

  --max-width: 100rem;

  --padding: clamp(1rem, 1.5vw, 1.8rem);
  --padding-medium: clamp(2rem, 3vw, 3.4rem);
  --padding-big: clamp(3rem, 5vw, 4.6rem);
  --margin: 2vw;
  --gap-05: 0.5rem;
  --gap-1: 1rem;
  --gap-2: 2rem;
  --gap-25: 2.5rem;
  --gap-3: 3rem;
  --gap-4: 4rem;
  --gap-7: 7rem;

  --spacer: clamp(8rem, 12vw, 12rem);

  --padding-y-buttons: clamp(0.75rem, 1vw, 0.85rem);
  --padding-x-buttons: clamp(1.8rem, 2.5vw, 2.7rem);
  --border: 0.23rem;
  --border-images: 0.5rem;
  --border-radius: 0.5rem;

  --border-radius-images: clamp(1rem, 1.5vw, 1.8rem);

  --logo-height: clamp(3.2rem, 4.4vw, 3.8rem);
  --mini-icons: 0.8rem;
  --icons: 1.3rem;
  --icons-medium: 2rem;
  --icons-big: 3rem;
  --icons-giant: clamp(4rem, 6vw, 7rem);
}

/* ! Reset */

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; word-wrap: break-word;}
h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0;padding: 0;}
ol,ul{list-style-type: none;}
img{height: auto;}
a{text-decoration: none;}
hr{border:none; border-bottom: 1px solid var(--grey)}
figure{margin: 0; padding: 0;}


/* ! Title system */
::selection{background-color: var(--green-selection)!important;}
input, textarea{accent-color: var(--white)!important; color: var(--white)!important; caret-color: var(--white)!important;}
input[type="checkbox"]{height: var(--icons)!important; width: var(--icons)!important;}

.text-big{font-size: clamp(4rem, 10.4vw, 9rem); font-family: 'Montserrat', sans-serif;}
h1, .text-1{font-size: clamp(2.1rem, 4.2vw, 4rem); font-weight: var(--font-bold);}
h2, .text-2{font-size: clamp(1.8rem, 3.4vw, 3.2rem); font-weight: var(--font-bold); line-height: 1.15;}
h3, .text-3{font-size: var(--font-3); font-weight: var(--font-bold);}
.text-intermediate{font-size: var(--font-intermediate); font-weight: var(--font-semibold);}
h4, p, .text-4, li{font-size: var(--font-p); font-weight: var(--font-normal);}
.text-4{font-family: 'Montserrat', sans-serif;}
.text-mini{font-size: calc(var(--font-p) * 0.8);}

body{font-family: 'Montserrat', sans-serif; background-color: var(--background);}
html{scroll-behavior: smooth;}
html *{scroll-margin-top: var(--spacer);}

h1,h2,h3{margin: 0; padding: 0; letter-spacing: var(--letter-spacing); line-height: 1.2; color: var(--white);}
h4, p, ol, ul{line-height: 1.5;}

p, label, li, h5, h6 {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  max-width: 750px;
}

a{color: var(--green);}
p{color: var(--white);}

li{list-style-position: inside;}

.spaced{letter-spacing: 2px;}

figcaption{font-size: 12px; text-align: center;}


/* ! Button system */

.button{text-transform: uppercase; font-size: var(--font-p); font-weight: var(--font-semibold); background: var(--green)!important; color: var(--black)!important; border-radius: 0!important; padding: var(--padding-y-buttons) var(--padding-x-buttons)!important; border: none; transition: all 0.3s cubic-bezier(.215, .61, .355, 1);}
.button:hover{background: var(--white)!important;}

.button--outline{background: var(--transparent)!important; color: var(--green)!important; border: var(--border) solid var(--green); padding: calc(var(--padding-y-buttons) - var(--border)) calc(var(--padding-x-buttons) - var(--border))!important;}
.button--outline:hover{background: var(--transparent)!important; color: var(--white)!important; border-color: var(--white);}

.button.button-white{background: var(--white)!important; color: var(--black)!important;}
.button.button-white:hover{background: var(--green)!important;}

.button.call{position: relative; padding: var(--padding-y-buttons) var(--padding-x-buttons) var(--padding-y-buttons) calc(var(--padding-x-buttons) * 1.8)!important;}
.button.call:before{content: ' '; position: absolute; height: var(--icons); width: var(--icons); top: 50%; left: 14%; transform: translateY(-50%); background-image: url('icons/call-black.svg'); background-size: cover; background-repeat: no-repeat; background-position: center center;}

.button--outline.call{position: relative; padding: calc(var(--padding-y-buttons) - var(--border)) calc(var(--padding-x-buttons) - var(--border)) calc(var(--padding-y-buttons) - var(--border)) calc((var(--padding-x-buttons) - var(--border)) * 1.8)!important;}
.button--outline.call:before{content: ' '; position: absolute; height: var(--icons); width: var(--icons); top: 50%; left: 14%; transform: translateY(-50%); background-image: url('icons/call.svg'); background-size: cover; background-repeat: no-repeat; background-position: center center;}
.button--outline.call:hover:before{filter: brightness(0) invert(1);}
@media (max-width: 1200px) {
  .button--outline.call{position: relative; padding: calc(var(--padding-y-buttons) - var(--border)) calc(var(--padding-x-buttons) - var(--border)) calc(var(--padding-y-buttons) - var(--border)) calc((var(--padding-x-buttons) - var(--border)) * 2)!important;}
  .button--outline.call:before{left: 12%;}
}

.button.arrow, .button.facebook, .button.instagram{position: relative; padding: var(--padding-y-buttons) calc(var(--padding-x-buttons) * 1.9) var(--padding-y-buttons) var(--padding-x-buttons)!important;}
.button.arrow:before{content: ' '; position: absolute; height: var(--icons); width: var(--icons); top: 50%; left: 83%; transform: translateY(-50%) rotate(-90deg); background-image: url('icons/chevron-down-outline.svg'); background-size: cover; background-repeat: no-repeat; background-position: center center;}
.button.facebook:before{content: ' '; position: absolute; height: var(--icons); width: var(--icons); top: 50%; left: 83%; transform: translateY(-50%); background-image: url('icons/logo-facebook-white.svg'); background-size: cover; background-repeat: no-repeat; background-position: center center;}
.button.instagram:before{content: ' '; position: absolute; height: var(--icons); width: var(--icons); top: 50%; left: 83%; transform: translateY(-50%); background-image: url('icons/logo-instagram-white.svg'); background-size: cover; background-repeat: no-repeat; background-position: center center;}


/* ! Header */
/*----------------------------------------------------------------------------------- */

/* ! Header */
.header-container{position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; padding: var(--padding) 0; transition: all 1s cubic-bezier(.215, .61, .355, 1);}
body:not(.home) .header-container{background: var(--background);}
.scroll-down .header-container{box-shadow: 0px 10px 10px var(--green-lo); background: var(--background); padding: calc(var(--padding) / 1.1) 0;}
.header{display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: var(--max-width); gap: var(--gap-2);}
.navquick{display: flex; gap: var(--gap-2);}

.header-navigation{display: flex; text-transform: uppercase;}
.header__menu{margin-bottom: 0; display: flex; align-items: center; gap: var(--padding-medium);}
.header__menu li{margin-bottom: 0; list-style-type: none; font-weight: var(--font-normal); transition: all 0.3s cubic-bezier(.215, .61, .355, 1);}
.header__menu a{transition: all 0.3s cubic-bezier(.215, .61, .355, 1); color: var(--white);}
.header__menu a:hover, .header__menu a:hover p{color: var(--green);}

.header__logo img{height: var(--logo-height); transition: all 1s cubic-bezier(.215, .61, .355, 1);}

.scroll-down .header__logo img{height: calc(var(--logo-height) * 0.8);}

.quick{display: flex; justify-content: flex-end;}


.sub-menu{display: none; position: absolute; top: 100%; width: 100%; left: 0;}

.submenu-open .header__menu > li .sub-menu{display: flex;}
.header__menu > li .sub-menu li{flex-basis: 33.33%; text-align: center; padding: var(--padding-medium);}
.header__menu > li .sub-menu li:nth-child(even){background: var(--dark-grey);}
.header__menu > li .sub-menu li:nth-child(odd){background: var(--grey);}
.sub-menu li a{display: flex; flex-flow: column; justify-content: center; align-items: center; gap: var(--gap-2);}
.img-submenu{max-width: 250px; height: auto;}

li:has(.sub-menu) a span{display: inline-block; font-size: 10px; transition: all 0.1s cubic-bezier(.215, .61, .355, 1);}
.submenu-open li:has(.sub-menu) a span{transform: rotate(180deg);}


@media (max-width: 1200px) {

  .scroll-down.menu-open .header-container{box-shadow: none;}

  .header-navigation{position: absolute; top: 80px; left: 0; width: 100%; height: 95vh; background: var(--background); overflow: scroll; transition: all 0.8s cubic-bezier(.215, .61, .355, 1); transform: translateX(101%); padding: var(--padding-medium) var(--padding-medium) var(--padding-big) var(--padding-medium);}
  .home.menu-open .header-container{background: var(--background);}
  .scroll-down .header-navigation{top: 70px;}

  .header__menu{flex-flow: column; gap: var(--padding-medium); justify-content: flex-start; height: 100%; align-items: flex-start; overflow: scroll;}
  .header__menu li{font-weight: var(--font-semibold); font-size: var(--font-intermediate);}
  .header__menu li:last-child{padding-bottom: var(--padding);}
  .menu-open .header-navigation{box-shadow: 0px 10px 10px var(--green-lo); transform: translateX(60%);}

  /* .menu-open{overflow: hidden;} */

  .sub-menu{position: static;}
  .sub-menu img{display: none;}
  .submenu-open .header__menu > li .sub-menu{display: flex; flex-flow: column; height: auto; padding-top: var(--gap-05);}
  .header__menu > li .sub-menu li{text-align: left; padding: var(--gap-05) var(--padding);}
  .header__menu > li .sub-menu li{background: var(--transparent)!important;}
  .header__menu > li .sub-menu li:not(:last-child){border-bottom: 1px solid var(--green);}
  .sub-menu li a{align-items: flex-start;}


  .header__hamburger{display: none;}

  .header__hamburger{display: flex; width: var(--icons-medium); aspect-ratio: 1 / 1; justify-content: center; align-items: flex-end; flex-flow: column; gap: calc(var(--padding) / 2); transition: all 0.3s cubic-bezier(.215, .61, .355, 1);}
  .header__hamburger span{height: var(--border); background: var(--white); display: block; transition: all 0.3s cubic-bezier(.215, .61, .355, 1);}

  .header__hamburger span:nth-child(1){width: 100%;}
  .header__hamburger span:nth-child(2){width: 75%;}
  .header__hamburger span:nth-child(3){width: 100%;}

  .menu-open .header__hamburger{transform: rotate(-180deg);}
  .menu-open .header__hamburger span:nth-child(1){transform: translateY(6.2px) rotate(45deg);}
  .menu-open .header__hamburger span:nth-child(2){transform: translateY(-6.2px) rotate(-45deg); width: 100%;}
  .menu-open .header__hamburger span:nth-child(3){display: none;}

}

@media (max-width: 781px) {
  .menu-open .header-navigation{transform: translateX(30%);}
  .scroll-down .header-navigation{top: 68px;}
}
@media (max-width: 550px) {
  .header__logo img{height: calc(var(--logo-height) * 0.8);}
  .header-navigation{top: 66px;}
}
@media (max-width: 450px) {
  .header__logo img, .scroll-down .header__logo img{height: calc(var(--logo-height) * 0.7);}
  .menu-open .header-navigation{transform: translateX(10%);}
  .navquick{gap: var(--gap-1);}
  .header-navigation{top: 64px;}
  .scroll-down .header-navigation{top: 63px;}
}
@media (max-width: 380px) {
  .quick-mobile{display: none!important;}
}

@media (max-width: 350px) {
  .header__hamburger{width: calc(var(--icons-medium) / 1.5); gap: calc(var(--padding) / 2.5);}
  .header__hamburger span{height: calc(var(--border) / 1.5);}
  .menu-open .header__hamburger span:nth-child(1){transform: translateY(4.4px) rotate(45deg);}
  .menu-open .header__hamburger span:nth-child(2){transform: translateY(-4.4px) rotate(-45deg);}
}


/* ! Index */
/*----------------------------------------------------------------------------------- */


/* ! Single */
/*----------------------------------------------------------------------------------- */


/* ! Footer */
/*----------------------------------------------------------------------------------- */

.footer a:not(.orange){color: var(--white);}

.footer{background: var(--grey);}
.footer-bottom{background: var(--dark-grey);}
.footer-inner{padding: var(--padding-big) 0;}
.footer-container{gap: 5%;}

.footer-column{justify-content: space-between; gap: var(--padding-big);}
.footer-column:nth-child(1) a{display: flex; align-items: center;}

.footer__logo img{height: var(--logo-height);}
.footer-icons-container, .footer-icons-container a{display: flex;}

.footer-icons-container, .double-line{gap: var(--padding-big);}
.double-line div{gap: var(--gap-1);}
.double-line p{overflow-wrap: anywhere; text-align: center;}


.footer-bottom div div{padding: var(--padding-medium) 0; gap: var(--gap-1);}

@media (max-width: 781px) {
  .footer-container{gap: calc(var(--padding-big) * 2);}
  .footer-column:nth-child(1){align-items: center; text-align: center;}
  .footer-bottom div div{text-align: center; flex-flow: column; gap: var(--gap-1);}
}


/* ! Grid system */
/*----------------------------------------------------------------------------------- */

.grid{display: flex; flex-wrap: wrap; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--padding-medium);}

.grid--small{max-width: 52rem;}
.grid--medium{max-width: 60rem;}
.grid--wide{max-width: 80rem;}
.grid--center{justify-content: center;}
.grid--full{max-width: 100%;}

.col-10{width: 10%;}
.col-15{width: 15%;}
.col-20{width: 20%;}
.col-25{width: 25%;}
.col-30{width: 30%;}
.col-33{width: 33.33%;}
.col-35{width: 35%;}
.col-40{width: 40%;}
.col-45{width: 45%;}
.col-50{flex-basis: 50%;}
.col-55{width: 55%;}
.col-65{width: 65%;}
.col-60{width: 60%;}
.col-66{width: 66.66%;}
.col-70{width: 70%;}
.col-75{width: 75%;}
.col-80{width: 80%;}
.col-90{width: 90%;}
.col-100{width: 100%;}


@media (max-width: 1100px) {
  .grid{padding: 0 var(--padding);}
}

@media (max-width: 781px) {
  .col-50{flex-grow: 1;}
  [class*='col-']{width: 100%;}

  .smart-25{width: 25%;}
  .smart-30{width: 30%;}
  .smart-33{width: 33.33%;}
  .smart-50{width: 50%;}
}


/* ! Helpers */
/*----------------------------------------------------------------------------------- */

.wp-block-spacer{height: var(--spacer);}

.spacer{height: var(--spacer); width: 100%;}
.spacer-2{height: calc(var(--spacer) / 2); width: 100%;}
@media (max-width: 781px) {
  .spacer.spacer-mobile{height: calc(var(--spacer) * 1.5);}
}

.gap-05{gap: var(--gap-05);}
.gap-1{gap: var(--gap-1);}
.gap-1-2{gap: var(--gap-1) var(--gap-2);}
.gap-2{gap: var(--gap-2);}
.gap-3{gap: var(--gap-3);}
.gap-7{gap: var(--gap-7);}

.img-resp{width: 100%;}
.img-resp-75{width: 75%}
.video-resp{width: 100%; height: 100%; overflow: hidden;}
.video-resp--small{width: 100%; height: 70vh; overflow: hidden;}
.video-resp video{width: 100%; height: 100%; object-fit: cover;}

.overflow{overflow: hidden;}

.text-center{text-align: center;}
.text-left{text-align: left;}
.text-right{text-align: right;}
.capitalized{text-transform: capitalize;}
.line-height-1{line-height: 1;}

.small-image{width: 150px; height: auto;}
.icons{height: var(--icons); width: var(--icons);}
.icons-medium{height: var(--icons-medium); width: var(--icons-medium);}
.icons-big, .icons-big img{height: var(--icons-big); width: var(--icons-big);}
.icons-giant img{height: var(--icons-giant); width: var(--icons-giant);}

.white{color: var(--white);}
.black{color: var(--black);}

.green{color: var(--green);}
.green-mo{color: var(--green-mo);}
.green-lo{color: var(--green-lo);}
.grey{color: var(--grey);}
.orange{color: var(--orange);}
.bg-blue{background: var(--blue);}

.flex{display: flex;}
.flex-column{display: flex; flex-flow: column;}
.v-center{display: flex; flex-flow: column; justify-content: center;}
.center{display: flex; flex-flow: column; justify-content: center; align-items: center;}

.font-normal{font-weight: var(--font-normal);}
.font-medium{font-weight: var(--font-medium);}
.font-semibold{font-weight: var(--font-semibold);}
.font-bold{font-weight: var(--font-bold);}
.font-extrabold{font-weight: var(--font-extrabold);}
.font-serif{font-family: 'DM Serif Text', serif;}

.uppercase{text-transform: uppercase;}

.none{display: none;}

@media (min-width: 782px) and (max-width: 1200px) {
  .tablet-none{display: none;}
}

@media (max-width: 781px) {
  .smart-none{display: none;}
}

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