/*
Theme Name: Cooee
Author: Giorgia Ciresola
Description: Coo'ee Italia custom theme
Version: 1.0
*/
/******************/
/*** VARIABLES ****/
/******************/
/******************/
/***  STYLE  ****/
/******************/
body { background: white; font-family: 'Poppins', sans-serif; line-height: 1.4; min-height: 100vh; }

.boxed { margin-left: auto; margin-right: auto; max-width: 1340px; width: 100%; padding-left: 32px; padding-right: 32px; }

.boxed.grid { padding-left: 16px; padding-right: 16px; }

.smaller-boxed { margin-left: auto; margin-right: auto; max-width: 1024px; width: 100%; }

.boxed-post { margin-left: auto; margin-right: auto; max-width: 820px; width: 100%; }

.boxed-post p, .boxed-post ul { margin-bottom: 40px; line-height: 1.7; color: #7F7F7F; font-weight: 300; font-size: 15px; }

.boxed-post h2 { margin-top: 60px; margin-bottom: 20px; }

.boxed-post .wp-block-image { margin: 0px; }

.boxed-post a { color: #212121; text-decoration: underline; }

.generic-page { word-wrap: break-word; }

a.logo-container { width: 220px; z-index: 9999; background-color: #fff; padding-top: 20px; padding-bottom: 4px; z-index: 0; }

.initial-spacer { height: 0px; }

.header { text-align: right; top: 0; left: 0; right: 0; }

.header.header-mobile { display: none; }

.header .menu-container, .header .menu-menu-1-container { display: inline-block; }

.header .menu li { display: inline-block; margin: 0 20px; }

.header .menu li a { display: inline-block; color: #212121; font-size: 14px; font-weight: 400; letter-spacing: .5px; opacity: 0.65; text-decoration: none; transition: all 300ms ease-in-out; }

.header .menu li a:hover { opacity: 1; }

.header .menu li.current-menu-item a { opacity: 1; }

.header.home { margin-top: 0; }

.footer h2 { font-weight: 300; font-size: 38px; color: #7F7F7F; }

.copyright { background-color: #7F7E7D; }

.copyright p { color: #fff; }

.copyright p span { margin: 0 10px; }

.copyright a { transition: all 300ms ease-in-out; opacity: 1; }

.copyright a:hover { opacity: 0.6; }

/*rows*/
.bg-beige { background-color: #F5F3F0; }

.fake-scatt { position: absolute; left: 0; right: 0; }

.fake-scatt.h100 { height: 100px; }

.fake-scatt.bottom { bottom: 0; }

.fake-scatt.top { top: 0; }

.box-beige { background-color: #F5F3F0; position: absolute; top: 100px; left: 0; right: 0; bottom: 0; }

.persona-initial { height: 400px; }

.persona-descr-row { padding-bottom: 200px; }

.brush { position: relative; }

.brush::before { content: ""; background-image: url("/wp-content/uploads/pennellata.png"); background-size: contain; position: absolute; top: 0; left: 0; right: 0; padding-top: 40%; z-index: -1; }

.hero-left { z-index: -1; }

.hero-left a.link { bottom: 70px; right: 80px; z-index: 999; }

.hero-left a.link a { z-index: 9999; }

.hero-left .hero-content { position: relative; top: -30px; z-index: -9999; }

.hero-left .hero-content h1 { font-size: 54px; }

.hero-left .hero-content h2 { font-size: 35px; }

.c-dark { color: #212121; }

.c-mid { color: #7F7F7F; }

.c-beige { color: #bab4ad; }

/*elements*/
.card-progetto { box-shadow: 0; position: relative; top: 0; transition: all 300ms ease-in-out; }

.card-progetto:hover { top: -8px; box-shadow: 0px 20px 70px 0px rgba(0, 0, 0, 0.15); }

img.fullw { width: 100%; }

img.fit-cover { object-fit: cover; }

img.firma { max-width: 120px; }

img.numero { position: absolute; top: -40px; left: -20px; max-width: 65px; }

.card { position: relative; }

.card img { display: inline-block; width: 100%; }

.box-servizi p { margin-bottom: 0; }

.big-top { top: -200px; }

.small-top { top: -50px; }

.left-60 { left: 60px; }

.z-neg { z-index: -999; }

ul.check li { position: relative; }

ul.check li::before { content: url("/wp-content/uploads/check.svg"); position: absolute; width: 15px; left: -45px; top: 2px; }

ul.check li:last-child { margin-bottom: 0; }

.btn { padding: 20px 30px; border: 2px solid #D0D0D0; border-radius: 3px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }

/*spacing*/
.max-w-620 { max-width: 620px; }

.max-w-540 { max-width: 540px; }

.max-w-490 { max-width: 490px; }

.max-w-420 { max-width: 420px; }

.mt-55 { margin-top: 220px; }

.pt-55 { padding-top: 220px; }

.pb-55 { padding-bottom: 220px; }

.spacer-100 { height: 100px; }

.spacer-55 { height: 220px; }

/*typography*/
h1.title { font-size: 60px; line-height: 70px; font-weight: 700; letter-spacing: 0; }

h1.nome { white-space: nowrap; left: -200px; position: relative; }

h1, h3 { font-weight: 700; }

h3 { font-size: 24px; font-weight: 600; color: #212121; }

h5 { color: #212121; font-size: 12px; line-height: 24px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; }

h2 { font-size: 30px; line-height: 1.3; }

h2.big { font-size: 50px; line-height: 60px; }

p { line-height: 1.5; margin-bottom: 20px; color: #7F7F7F; letter-spacing: 0.3px; font-weight: 300; font-size: 15px; }

.wrapped { max-width: 440px; }

.list-container ul li { line-height: 2.2; }

a { display: inline-block; color: inherit; text-decoration: none; position: relative; }

a.link { font-size: 24px; font-weight: 600; color: #212121; }

a.link .ball { position: absolute; top: -5px; left: -15px; background-color: #fff; width: 50px; height: 50px; border-radius: 50%; z-index: -1; transition: all 400ms ease-in-out; }

a.link .ball.beige { background-color: #F5F3F0; }

a.link:hover .ball { top: -15px; left: -25px; width: 80px; height: 80px; }

a.link.small { font-size: 18px; }

a.link.small .ball { width: 40px; height: 40px; }

a.link.small:hover .ball { top: -15px; left: -20px; width: 60px; height: 60px; }

a.with-chev { display: block; }

a.with-chev::before { content: url("/wp-content/uploads/chev.svg"); width: 6px; margin-right: 15px; display: inline-block; position: relative; transition: all 500ms ease-in-out; }

a.with-chev span { display: inline-block; font-weight: 700; position: relative; transition: all 500ms ease-in-out; }

a.with-chev:hover span { transform: translateX(6px); }

a.with-chev:hover::before { transform: translateX(-4px); }

a.social svg { margin-right: 10px; position: relative; top: 2px; }

a.social span { display: inline-block; position: relative; opacity: 0.4; transition: all 500ms ease-in-out; }

a.social:hover span { opacity: 1; }

a.link-img { position: relative; display: block; }

a.link-img .img-container { position: relative; overflow: hidden; }

a.link-img .img-container img.proj-img { transition: all 500ms ease-in-out; display: block; width: 100%; }

a.link-img .img-container::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 0px solid #fff; outline: 1px solid #fff; transition: all 500ms ease-in-out; }

a.link-img .img-container:hover::after { border: 30px solid #fff; }

a.link-img .img-container:hover img { transform: scale(1.05); }

a.link-img.small .img-container::after { transition: all 300ms ease-in-out; }

a.link-img.small .img-container .proj-img { transition: all 300ms ease-in-out; }

a.link-img.small .img-container:hover::after { border: 10px solid #fff; }

a.button { text-transform: uppercase; font-size: 12px; letter-spacing: 1px; font-weight: 700; }

a.button.white { background-color: #fff; padding: 10px 40px; color: #D0021B; }

.cta h4 { color: #7F7F7F; font-weight: 300; }

.cta .cta-text-box { padding: 30px 100px 40px 100px; }

/*slider*/
.slider-img { opacity: 0; transition: all 1000ms ease-in-out; position: absolute; top: 0; left: 0; }

.slider-img.active { opacity: 1; }

.fake-slider { position: absolute; left: 3rem; bottom: 2.5rem; }

.bullets-container { position: absolute; left: 3rem; bottom: 2.5rem; }

.bullets { display: inline-block; text-align: center; vertical-align: top; cursor: pointer; }

.outer-circle { width: 15px; height: 15px; background-color: transparent; border: 2px solid #fff; border-radius: 50%; position: relative; margin: 0 .5em; text-align: center; }

.bullets.selected .outer-circle { background-color: #fff; }

/*da sistemare*/
.divider { display: block; height: 1px; }

@keyframes pageAnimIn { 0% { transform: translateY(103%); }
  100% { transform: translateY(0);
    display: block; } }

@keyframes pageAnimOut { 0% { transform: translateY(0); }
  100% { transform: translateY(-103%);
    display: none; } }

@keyframes layerAnim { 0% { transform: translateX(-103%); }
  60% { transform: translateX(0); }
  100% { transform: translateX(103%); } }

/* page */
#pageOuter { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; z-index: 999; }

#pageOuter.animeIn, #pageOuter.animeOut { display: block; }

.grigio { position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* background-color: #E3042E; */ background-color: #f7f7f7; transform: translateX(-103%); transition-timing-function: ease-in-out; }

#pageOuter .grigio { background-color: #f7f7f7; transform: translateY(103%); transition-timing-function: ease-in-out; }

#pageOuter.animeIn .grigio { animation-name: pageAnimIn; animation-duration: 1s; }

#pageOuter.animeOut .grigio { animation-name: pageAnimOut; animation-duration: 1s; }

/* img */
img.shadow { box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.16); }

/* animation come in */
.smooth { opacity: 0; }

.come-in { transform: translateY(30px); animation: come-in 1500ms ease forwards; }

.come-in:nth-child(odd) { animation-duration: 1500ms; }

.already-visible { transform: translateY(0); opacity: 1 !important; animation: none; }

@keyframes come-in { to { transform: translateY(0);
    opacity: 1; } }

@media (max-width: 1200px) { h1.title { font-size: 45px; line-height: 1.2; }
  .hero-left .hero-content { top: -10px; }
  .hero-left .hero-content h1 { font-size: 45px; line-height: 1.2; }
  .hero-left .hero-content h2 { font-size: 33px; }
  h2.big { font-size: 40px; line-height: 55px; }
  .footer h2 { font-size: 33px; }
  .big-top { top: -105px; }
  .pb-55.chi-siamo { padding-bottom: 32px; }
  .persona-initial { height: 260px; }
  .fake-scatt.h100 { height: 70px; }
  a.link { font-size: 20px; } }

.filtri-blog { margin-top: 0; }

.filtri-blog ul { padding-left: 0; }

.filtri-blog ul li { padding: 10px 28px; display: inline-block; font-size: 15px; letter-spacing: 0.5px; opacity: 0.4; transition: all ease-in-out .5s; }

.filtri-blog ul li.active { opacity: 1; background-color: #F5F3F0; transition: all ease-in-out .5s; }

.blog-cta { overflow: hidden; position: relative; opacity: 1; transition: all 600ms ease-in-out; }

.blog-cta.hide { opacity: 0; }