/* BARRIOTHEME > CUSTOM CSS */

/* =========================================================================================================== */
/*
    IIIIII   NN   NN   IIIIII   TTTTTTT
      II     NNN  NN     II       TT
      II     NN N NN     II       TT
      II     NN  NNN     II       TT
    IIIIII   NN   NN   IIIIII     TT
*/

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;400&family=Roboto+Slab&display=swap");

/* font family custom */
/* @font-face {
  font-family: "FiraSans-Book";
  src: url("/wp-content/themes/barriotheme/font/FiraSans-Book.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
} */

/* =========================================================================================================== */
/*
    RRRRRR     OOOOO     OOOOO    TTTTTTTT
    RR   RR   OO   OO   OO   OO      TT
    RRRRRR    OO   OO   OO   OO      TT
    RR  RR    OO   OO   OO   OO      TT
    RR   RR    OOOO0     OOOO0       TT
*/

:root {
  /* set rem = 10px */
  font-size: 62.5%;

  /* ===================================== */
  /* colors */

  /* #077032 _____________________________ */
  --verde-rgb: 7, 112, 50;
  --verde: rgb(var(--verde-rgb));

  /* #C41617 _____________________________ */
  --rosso-rgb: 196, 22, 23;
  --rosso: rgb(var(--rosso-rgb));

  /* #FFFFFF _____________________________ */
  --bianco-rgb: 255, 255, 255;
  --bianco: rgb(var(--bianco-rgb));

  /* #F5F5F5 _____________________________ */
  --grigio-chiaro-rgb: 245, 245, 245;
  --grigio-chiaro: rgb(var(--grigio-chiaro-rgb));

  /* #D8D8D8 _____________________________ */
  --grigio-rgb: 216, 216, 216;
  --grigio: rgb(var(--grigio-rgb));

  /* #323232 _____________________________ */
  --grigio-scuro-rgb: 50, 50, 50;
  --grigio-scuro: rgb(var(--grigio-scuro-rgb));

  /* #282828 _____________________________ */
  --nero-rgb: 40, 40, 40;
  --nero: rgb(var(--nero-rgb));

  /* #000000 _____________________________ */
  --nero-puro-rgb: 0, 0, 0;
  --nero-puro: rgb(var(--nero-puro-rgb));

  --giallo-rgb: 194, 176, 52;
  --giallo: rgb(var(--giallo-rgb));

  /* others _______________________________ */
  --null: transparent;
  --error: #ba2e2e;
  
  /* ===================================== */

  /* primary */
  --primary-rgb: var(--giallo-rgb);
  --primary: var(--giallo);

  /* secondary */
  --secondary-rgb: var(--rosso-rgb);
  --secondary: var(--rosso);

  /* ===================================== */
  /* Sizes */

  --header-height: 0;
  --distance: 50px;
  --distance-half: calc(var(--distance) / 2);
  --distance-big: calc(var(--distance) * 2);

  /* ===================================== */
  /* z-index */

  --z-header-0: 20;
  --z-header-1: 21;
  --z-header-2: 22;
  --z-header-3: 23;

  --z-super-0: 999;
  --z-super-1: 9999;
}

/* =========================================================================================================== */
/*
      AAA     LL     LL
     AAAAA    LL     LL
    AA   AA   LL     LL
    AAAAAAA   LL     LL
    AA   AA   LLLLL  LLLLL
*/

body,
html {
  font-family: "Oswald", sans-serif;
  /* font-family: "Roboto Slab", serif; */
  margin: 0;
  padding: 0;
  background-color: var(--bianco);
  color: var(--nero);
  overscroll-behavior-block: none;
  /* scroll-behavior: auto !important; <- it removes scroll smooth */
}

.main *,
*::after,
*::before {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

/* __________________________________________________________________________ */
/* no gutter Bootstrap */

/* .row {
  margin: 0;
}

.container-fluid,
.container,
.col,
[class*="col-"] {
  padding: 0;
} */

/* __________________________________________________________________________ */
/* Blockquote */

/* blockquote {
	background: #efefef;
	padding: 20px 30px;
	margin-bottom: 30px;
}

.grecaptcha-badge {
	right: -300px !important;
}*/

/* =========================================================================================================== */
/*
    TTTTTTYT  YY   YY   PPPPPP     OOOOO
       TT     YY   YY   PP   PP   OO   OO
       TT      YYYY     PPPPPP    OO   OO
       TT       YY      PP        OO   OO
       TT       YY      PP         OOOO0
*/

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
ul,
ol {
  margin-bottom: 0;
}

/* ul {
    list-style-type: none;
} */

li {
  margin-bottom: 4px;
}

p a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

b,
strong {
  font-weight: bolder !important;
}

/* __________________________________________________________________________ */
/* custom style */

h1,
h2,
h3,
.titolo {
  font-family: "Roboto Slab", serif;
  font-size: 3.6rem;
  line-height: 4.8rem;
}

h4,
h5,
h6,
.titolo-small {
  font-family: "Roboto Slab", serif;
  font-size: 2rem;
  line-height: 2.6rem;
}

p,
ul,
li,
ul,
ol,
.testo,
div.testo * {
  font-family: "Oswald", sans-serif;
  font-size: 1.6rem;
  line-height: 2.8rem;
  font-weight: 300;
}

.occhiello {
  font-family: "Roboto Slab", serif;
  font-size: 1.8rem;
  line-height: 2.4rem;
  letter-spacing: 20px;
  text-transform: uppercase;
}

.hero .occhiello {
  font-family: "Roboto Slab", serif;
  font-size: 1.2rem;
  line-height: 1.6rem;
  letter-spacing: 5px;
  text-transform: uppercase;
}

.occhiello-small {
  font-family: "Roboto Slab", serif;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 1.67px;
  text-transform: uppercase;
}

/* __________________________________________________________________________ */
/* specials (footer, links, tags, span) */

.link {
  font-family: "Oswald", sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 1.67px;
  text-transform: uppercase;
}

footer .footer-head {
  font-family: "Roboto Slab", serif;
  font-size: 1.5rem;
  line-height: 3.2rem;
  letter-spacing: normal;
  text-transform: uppercase;
}

footer .footer-body * {
  font-family: "Oswald", sans-serif;
  font-size: 1.4rem;
  line-height: 2.6rem;
  letter-spacing: 0.88px;
  font-weight: 300;
}

.sub-footer *,
.sub-footer .menu-footer li {
  font-family: "Oswald", sans-serif;
  font-size: 1.2rem;
  line-height: 1.8rem;
  letter-spacing: 0.5px;
}

.file {
  font-family: "Oswald", sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 1.67px;
  text-transform: uppercase;
}

.slug {
  font-family: "Oswald", sans-serif;
  font-size: 1.2rem;
  line-height: 1.7rem;
  letter-spacing: 13.33px;
  text-transform: uppercase;
}

/* =========================================================================================================== */
/*
      GGGG    EEEEEEE   NN   NN   EEEEEEE   RRRRRR      AAA     LL
     GG  GG   EE        NNN  NN   EE        RR   RR    AAAAA    LL
    GG        EEEEE     NN N NN   EEEEE     RRRRRR    AA   AA   LL
    GG   GG   EE        NN  NNN   EE        RR  RR    AAAAAAA   LL
     GGGGGG   EEEEEEE   NN   NN   EEEEEEE   RR   RR   AA   AA   LLLLL
*/

.wrapper {
  width: calc(100% - 100px);
  max-width: 1400px;
  margin: 0 auto;
}

section {
  padding: var(--distance-big) 0;
  position: relative;
}

.relative {
  position: relative;
}

.uppercase {
  text-transform: uppercase;
}

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

 */

/* .italic {
  font-style: italic;
}

.bold {
  font-weight: 500;
} */

.nowrap {
  white-space: nowrap;
}

/* __________________________________________________________________________ */
/* Distances */

[class*="cont-"] > * {
  margin-bottom: var(--distance-half);
}

[class*="cont-"] > *:last-child {
  margin-bottom: 0;
}

/* __________________________________________________________________________ */
/* colors */

.color-primary {
  color: var(--primary) !important;
}

.color-secondary {
  color: var(--primary) !important;
}

.color-nero {
  color: var(--nero) !important;
}

.color-bianco {
  color: var(--bianco) !important;
}

/* =========================================================================================================== */
/*
    MM    MM   EEEEEEE   DDDDD     IIIIII     AAA
    MMM  MMM   EE        DD  DD      II      AAAAA
    MM MM MM   EEEEE     DD   DD     II     AA   AA
    MM    MM   EE        DD   DD     II     AAAAAAA
    MM    MM   EEEEEEE   DDDDDD    IIIIII   AA   AA

    // Media
*/

.contain {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

section.intro .intro-images img,
section.territorio img {
  min-height: 670px;
}

/* =========================================================================================================== */
/*
    BBBBB     UU   UU   TTTTTTTT   TTTTTTTT    OOOOO    NN   NN    SSSSSS
    BB   B    UU   UU      TT         TT      OO   OO   NNN  NN   SS
    BBBBBB    UU   UU      TT         TT      OO   OO   NN N NN    SSSSS
    BB   BB   UU   UU      TT         TT      OO   OO   NN  NNN        SS
    BBBBBB     UUUUU       TT         TT       OOOO0    NN   NN   SSSSSS
*/

.testo a {
  text-decoration: underline !important;
}

/* __________________________________________________________________________ */
/* File */

a.file {
  display: inline-flex;
  align-items: center;
  color: var(--primary);
  text-decoration: none;
  padding-left: 50px;
  position: relative;
  transition: all 0.2s ease-out;
  cursor: pointer;
}

a.file:hover,
a.file:focus {
  padding-left: 55px;
}

a.file .icona {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

a.file .icona::after {
  content: "";
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
  background-color: var(--primary);
  -webkit-mask: url(../img/icons/icon-file.svg) no-repeat 50% 50%;
  mask: url(../img/icons/icon-file.svg) no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: all 0.2s ease-out;
  position: relative;
  z-index: 2;
}

a.file .icona::before {
  content: "";
  width: 40px;
  height: 40px;
  background-color: rgba(var(--primary-rgb), 0.05);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition: all 0.2s ease-out;
  z-index: 1;
}

a.file:hover .icona::before,
a.file:focus .icona::before {
  transform: translateY(-50%) scale(1.1);
  background-color: rgba(var(--secondary-rgb), 0.1);
}

/* =========================================================================================================== */
/*
    IIIIII   CCCCC   OOOOO    NN   NN    SSSSSS
      II    CC      OO   OO   NNN  NN   SS
      II    CC      OO   OO   NN N NN    SSSSS
      II    CC      OO   OO   NN  NNN        SS
    IIIIII   CCCCC   OOOO0    NN   NN   SSSSSS
*/

/* [class*="icon-"] {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  max-width: 12px;
  max-height: 12px;
  background-color: var(--nero);
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
} */

/* __________________________________________________________________________ */
/* utils */

/* .icon-play-circle {
  -webkit-mask: url(../img/icons/icon-play-circle.svg) no-repeat 50% 50%;
  mask: url(../img/icons/icon-play-circle.svg) no-repeat 50% 50%;
} */

/* =========================================================================================================== */
/*
    EEEEEEE   LL        EEEEEEE   MM    MM   EEEEEEE   NN   NN   TTTTTTTT    SSSSSS
    EE        LL        EE        MMM  MMM   EE        NNN  NN      TT      SS
    EEEEE     LL        EEEEE     MM MM MM   EEEEE     NN N NN      TT       SSSSS
    EE        LL        EE        MM    MM   EE        NN  NNN      TT          SS
    EEEEEEE   LLLLLLL   EEEEEEE   MM    MM   EEEEEEE   NN   NN      TT      SSSSSS
*/

/* =========================================================================================================== */
/* =========================================================================================================== */
/*
    PPPPPP      AAA       GGGG    EEEEEEE    SSSSSS
    PP   PP    AAAAA     GG  GG   EE        SS
    PPPPPP    AA   AA   GG        EEEEE      SSSSS
    PP        AAAAAAA   GG   GG   EE             SS
    PP        AA   AA    GGGGGG   EEEEEEE   SSSSSS
*/

/* __________________________________________________________________________ */
/* HERO */

.hero {
  width: 100%;
  height: 100vh;
  padding: var(--distance-half);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero::after {
  content: "";
  width: 1px;
  height: 50vh;
  position: absolute;
  bottom: -25vh;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--primary);
  z-index: 3;
}

.hero .hero-background {
  width: calc(100% - var(--distance));
  height: calc(100% - var(--distance));
  position: absolute;
  top: var(--distance-half);
  left: var(--distance-half);
  overflow: hidden;
  z-index: 1;
}

.hero .hero-background img {
  width: calc(100% + 100px);
  height: calc(100% + 100px);
  z-index: 1;
}

.hero .hero-background .background-head {
  width: 500px;
  height: 250px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  z-index: 2;
}

.hero .hero-background .background-head::before {
  content: "";
  width: 500px;
  height: 500px;
  background-color: var(--bianco);
  border-radius: 100%;
  transition: all 0.2s ease-out;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.hero .hero-background .background-head .logo {
  width: 200px;
  background-image: url(../img/Famiglia_Rivetti_logo_con_naming.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  z-index: 2;
}

.hero .cont-hero {
  position: relative;
  z-index: 2;
  color: var(--bianco);
}

/* __________________________________________________________________________ */
/* Section: Intro */

section.intro {
  padding-top: calc(var(--distance-big) * 2);
  padding-bottom: calc(calc(var(--distance-big) * 2) + var(--distance-half));
}

section.intro .cont-testo {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: var(--distance);
}

section.intro .cont-testo .occhiello {
  transform: translateX(calc(var(--distance-big) * -1));
  margin-bottom: var(--distance-big);
}

section.intro .cont-testo .testo {
  width: 80%;
}

section.intro .intro-images {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* __________________________________________________________________________ */
/* Section: Vini */

section.vini {
  width: 100%;
  padding-bottom: 0;
  position: relative;
  background-color: rgba(var(--nero-rgb), 0.025);
}

section.vini .vini-head {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

section.vini .vini-head .occhiello {
  position: relative;
  z-index: 2;
}

section.vini .vini-head::before {
  content: "";
  width: 500px;
  height: 500px;
  background-color: var(--grigio-chiaro);
  -webkit-mask: url(../img/Famiglia_Rivetti_logo_nero.svg) no-repeat 50% 50%;
  mask: url(../img/Famiglia_Rivetti_logo_nero.svg) no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: all 0.2s ease-out;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

section.vini .vino-item {
  width: calc(100% - var(--distance));
  height: auto;
  z-index: 3;
  position: relative;
  margin-bottom: var(--distance-big);
}

section.vini .vino-item .cont-img {
  margin-bottom: 25px;
  width: 100%;
  max-height: 450px;
}

section.vini .vino-item .cont-img img {
  width: 100%;
  max-height: 450px;
}

section.vini .vino-item .vino-title {
  min-height: 78px;
}

section.vini .vino-item .vino-title span {
  width: 100%;
  display: block;
  margin-bottom: 5px;
}

section.vini .vino-item .vino-title span:last-child {
  margin-bottom: 0 !important;
}

section.vini .vino-item .dash {
  width: 100%;
  height: 5px;
  border-radius: 5px;
  background-color: var(--primary);
  opacity: 0.1;
  margin: 25px 0 35px;
}

/* __________________________________________________________________________ */
/* Section: Territorio */

section.territorio {
  overflow: hidden;
  padding: calc(var(--distance-big) * 2) 0;
  padding-bottom: var(--distance-big);
}

section.territorio .cont-testo {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: var(--distance-big);
  position: relative;
  z-index: 1;
}

section.territorio .cont-testo .occhiello {
  transform: translateX(calc(var(--distance-big) * -2));
  margin-bottom: var(--distance-big);
}

section.territorio .cont-testo .testo {
  width: 80%;
}

.slugs {
  width: 100%;
  position: relative;
  margin-top: var(--distance-big);
  margin-bottom: calc(var(--distance) * -1);
}

.slugs-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transform: rotate(90deg);
  transform-origin: 100% 50%;
  padding: var(--distance-big) 250px var(--distance-big) var(--distance-big);
  position: absolute;
  bottom: -110px;
  right: 120px;
}

.slugs-container::before {
  content: "";
  width: 60%;
  height: 120%;
  position: absolute;
  top: -20px;
  left: 98%;
  transform: translateX(-100%);
  background-color: var(--grigio-chiaro);
  border-radius: 250px;
}

.slugs-container .slugs-footer {
  content: "";
  width: 230px;
  height: 300px;
  background-image: url(../img/Famiglia_Rivetti_logo_con_naming.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-100%, -50%) rotate(270deg);
}

@keyframes slug-footer-animated {
  0% {
    transform: translate(-100%, -50%) rotate(0);
  }
  100% {
    transform: translate(-100%, -50%) rotate(360deg);
  }
}

.slugs-container .slugs-content {
  display: flex;
  align-items: center;
  position: relative;
  transform: rotate(180deg);
}

.slugs-container .slugs-content .slug + .slug {
  margin-left: 60px;
  position: relative;
}

.slugs-container .slugs-content .slug + .slug::after {
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: 50%;
  left: -37.5px;
  transform: translateY(-50%);
  background-color: var(--primary);
  border-radius: 50%;
}

/* =========================================================================================================== */
/* Page: Coming */

.hero-coming {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--grigio-chiaro);
  overflow: hidden;
}

.hero-coming .cont-hero {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-coming .logo {
  width: 200px;
  background-image: url(../img/Famiglia_Rivetti_logo_con_naming.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  z-index: 2;
}

.hero-coming::before {
  content: "";
  width: 50vh;
  height: 50vh;
  background-color: var(--primary);
  -webkit-mask: url(../img/Famiglia_Rivetti_logo_con_naming.png) no-repeat 50% 50%;
  mask: url(../img/Famiglia_Rivetti_logo_con_naming.png) no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.05;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.page-template-page-coming footer,
.page-template-page-coming .sub-footer {
  display: none;
}

/* =========================================================================================================== */
/* Page: Policy & 404 */

.hero-privacy,
.hero-404 {
  width: 100%;
  position: relative;
  min-height: 50vh;
  background-color: var(--grigio-chiaro);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-privacy::before,
.hero-404::before {
  content: "";
  width: 35vh;
  height: 35vh;
  background-color: var(--primary);
  -webkit-mask: url(../img/Famiglia_Rivetti_logo_nero.svg) no-repeat 50% 50%;
  mask: url(../img/Famiglia_Rivetti_logo_nero.svg) no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.05;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.hero-404 {
  height: 100vh;
}

.hero-privacy a.link,
.hero-404 a.link {
  color: var(--nero);
  padding-left: 15px;
  position: relative;
  text-decoration: none;
  position: absolute;
  top: var(--distance);
  left: var(--distance);
}

.hero-404 a.link {
  position: relative;
  top: unset;
  left: unset;
}

.hero-privacy a.link::after,
.hero-404 a.link::after {
  content: "";
  width: 6px;
  height: 6px;
  min-width: 6px;
  min-height: 6px;
  border-top: 1px solid var(--nero);
  border-left: 1px solid var(--nero);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotate(-45deg);
  transition: all 0.2s ease-out;
}

.hero-privacy a.link:hover:after,
.hero-404 a.link:hover:after {
  border-color: var(--primary);
  left: -5px;
}

.page-policy .cont-testo * * {
  color: var(--nero);
}

.page-policy .cont-testo a {
  text-decoration: underline;
  transition: all 0.2s ease-out;
}

.page-policy a:hover,
.page-policy a:focus,
.page-404 a:hover,
.page-404 a:focus {
  color: var(--primary);
}

.page-policy .cont-testo h1,
.page-policy .cont-testo h2,
.page-policy .cont-testo h3,
.page-policy .cont-testo h4,
.page-policy .cont-testo h5 {
  margin-top: var(--distance-big);
}

.ocm {
  width: 336px;
  height: 46px;
  max-width: 60vw;
  display: block;
  -webkit-mask: url(../img/OCM.svg)no-repeat 50% 50%;
  mask: url(../img/OCM.svg)no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: var(--transition);
  opacity: 1;
  pointer-events: all;
  background-color: var(--bianco);
  padding: 0;
}