@charset "UTF-8";
*{
  margin: 0;
  box-sizing: border-box;
  font-family: 'Michroma', sans-serif;
  font-family: 'Roboto', sans-serif;
}
a{
  text-decoration: none;
  color: #000;

}
/******************************************menu********************************/
header{
	display: flex;
  margin-bottom: 0px 20px;
}
.menu a {
  list-style: none;
  color: #1a1a1a;
  text-decoration: none;
  margin:20px;
  font-size: 40px;
}
.menu a:hover {
  color: #1a1a1a;
  border-bottom: 1px solid #F7F7F2;
}
.logo h2{
	margin: 0;
}
.contenitore-logo {
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #1a1a1a;
}
.contenitore-menu {
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  overflow-y: scroll;
  position: fixed;
  bottom: 0%;
  left: 0%;
  height: 0px;
  width: 100%;
  transition: all 1s cubic-bezier(.29,.3,.07,1);
  background-color: var(--sfondo);
  z-index: 99999;
}
.freccia iframe {
  border-radius: 50%;
  height: 55px;
  position: fixed;
  right: 0px;
  bottom: 5px;
  margin: 5px;
  border: none;
}
.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.menu_open {
  height: 100% !important;
  width: 100% !important;
  background-color: #F7F7F2;
}
.menu_show {
  opacity: 1 !important;
}
.menu span {
  display: none;
}
.hamburger {
  z-index: 999999;
  cursor: pointer;
  position: relative;
  width: 30px;
  height: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  margin: 15px;
}
.hamburger span {
  position: absolute;
  height: 3px;
  width: 100%;
  border-radius: 2px;
  background-color: #F7F7F2;
  transition: all 1s ease-out;
}
.hamburger span:nth-child(1) {
  transform: translateY(-8px);
}
.hamburger span:nth-child(4) {
  transform: translateY(8px);
}
.animation_1 {
  transform: translateY(0px) scaleY(0%) !important;
}
.animation_2 {
  transform: rotate(315deg);
  background-color: #1a1a1a !important;
    }
.animation_3 {
  transform: rotate(405deg);
  background-color: #1a1a1a !important;
}
.animation_4 {
  transform: translateY(0px) scaleY(0%) !important;
}  
/****************************fine menu********************************/
/****************************carosello cards********************************/
#home {
  overflow: hidden;
  font-family: 'Michroma', sans-serif;
  background: linear-gradient(135deg, #6342279d, #0000008a );    
  filter: alpha(opacity=20);    
}
.opacita{
  background-image: url(../img/logo/1x/sagoma.png); 
  background-repeat: no-repeat;
  background-position: center;
} 
.carousel {
  position: relative;
  z-index: 1;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
} 
.carousel-item {
  --items: 10;
  --width: clamp(150px, 30vw,  300px);
  --height: clamp(200px, 40vw,  400px);
  --x: calc(var(--active) * 800%);
  --y: calc(var(--active) * 200%);
  --rot: calc(var(--active) * 120deg);
  --opacity: calc(var(--zIndex) / var(--items) * 5 - 2);
  overflow: hidden;
  position: absolute;
  z-index: var(--zIndex);
  width: var(--width);
  height: var(--height);
  margin: calc(var(--height) * -0.5) 0 0 calc(var(--width) * -0.5);
  border-radius: 10px;
  top: 50%;
  left: 50%;
  user-select: none;
  transform-origin: 0% 100%;
  box-shadow: 0 10px 50px 10px rgba(0, 0, 0, .5);
  background: black;
  pointer-events: all;
  transform:  translate(var(--x), var(--y)) rotate(var(--rot)) ;
  transition: transform .8s cubic-bezier(0, 1, 0, 1);
} 
.carousel-box {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity .8s cubic-bezier(0, 1, 0, 1);
  opacity: var(--opacity);
  font-family: 'Michroma', sans-serif;
  text-transform: uppercase;
}
.carousel-box:before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5));
}
.title {
  position: absolute;
  z-index: 1;
  color: #F7F7F2;
  bottom: 20px;
  left: 20px;
  transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
  font-size: clamp(20px, 3vw, 30px);
  text-shadow: 0 4px 4px rgba(0, 0, 0, .1);
}
.num {
  position: absolute;
  z-index: 1;
  color: #F7F7F2;
  top: 10px;
  left: 20px;
  transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
  font-size: clamp(20px, 10vw, 80px);
} 
.carousel-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}  
.layout {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.layout:before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 90px;
  width: 10px;
  height: 100%;
  border: 1px solid #F7F7F2;
  border-top: none;
  border-bottom: none;
  opacity: .8;
}  
.box {
  position: absolute;
  bottom: 0;
  left: 30px;
  color: #F7F7F2;
  transform-origin: 0% 10%;
  transform: rotate(-90deg);
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  opacity: 0.8;
} 
.logo {
  position: absolute;
  z-index: 2;
  top: 0px;
  left: 20px;
  margin:5px;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  opacity: .5;
  display: flex;
  pointer-events: all;
  color: black;
  text-decoration: none;
  overflow: hidden;
  padding-bottom: .1em;
}
.logo-text {
  position: absolute;
  z-index: 2;
  top: 45px;
  left: 120px;
  text-decoration: none;
  color: #e7e7e7;
}

.logo_sx {
  z-index: 2;
  top: 0px;
  left: 30px;
  margin:5px;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  display: flex;
  pointer-events: all;
  color: black;
  text-decoration: none;
  overflow: hidden;
  padding-bottom: .1em;
} 
.social {
  position: absolute;
  z-index: 10;
  bottom: 20px;
  right: 25px;
  color: #F7F7F2;
  opacity: .4;
}
.social a {
  display: inline-block;
  margin-left: 3px;
} 
.social img{
  width: 250px;
}
svg {
  --fill: #F7F7F2;
  width: 35px;
  height: 35px;
}  
.cursor {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  --size: 40px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 1px solid rgba(255, 90, 90, 0.76);
  margin: calc(var(--size) * -0.5) 0 0 calc(var(--size) * -0.5);
  transition: transform .85s cubic-bezier(0, 0.02, 0, 1);
  display: none;
  pointer-events: none;
  mix-blend-mode: difference;
}     
@media (pointer: fine) {
  .cursor{display: block;}    
} 
.cursor2 {
  --size: 2px;
  transition-duration: .7s;
  mix-blend-mode: difference;
}   
/***************************Prima fascia pagina prodotti**********************************/
.fascia-intestazione{
  height: 85vh;
  background-color: #1a1a1a;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fascia-intestazione h1{
  font-size: 60px;
  color: #e7e7e7;
  font-family: 'Michroma', sans-serif;
}
.galleria{
  display: flex;
  background-color: #1a1a1a;
}
.col-4{
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.col-4 h4{
  color: #F7F7F2;
  display: flex;
  justify-content: center;
  padding: 15px 5px 25px 5px;
  font-size: 24px;
}
.gpf{
  border-radius: 20px;
  width: 100%;
  padding: 20px 10px;
  border-radius: 50px;
}
.gpv{
  border-radius: 20px;
  width: 70%;
  margin: 5% 0;
}
h2{
  font-size: 45px;
}
.flex{
  display: flex; 
}
.flex-col{
  display: flex;
  flex-direction: column;
  width: 50%;
}
.wrap{
  display: flex;
  flex-wrap: wrap;
}
.immagine-dx img{
  width: 70%;
  margin: 70px 0;
}
.immagine-dx h3{
  padding: 70px 0 0px 0;
  font-size: 24px;
}
/***************************Prima fascia prodotti**********************************/
body.pg-prodotti{
  background: #F7F7F2;
}
.container-descrizione{
  display: flex;
  height: 800px;
  overflow: hidden;
  padding:1%
} 
.container-b {
  margin: 5% 0;
} 
.copertina{
  width: 50%;   
}
.copertina img,
.pin-wrap img{
  width: 100%;
  height: 100%;
  border-radius: 30px;
  box-shadow: 2px 5px 5px #1a1a1a;
}
.box-testo{
  width: 80%;
  padding:5%;
  align-items: center;
  display:flex;
  flex-wrap: wrap;
  align-content: center;
  padding: 350px 0 0 120px;
}
.box-testo p{
font-size: 24px;
margin-top: 30px;
}
button.contatti{
  margin-top: 30px;
  color:#1a1a1a;
  font-size: 20px;
  border-radius: 5px;
  border: none;
  padding: 5px;
}
button.contatti a{
  margin-top: 30px;
  color:#1a1a1a;
  font-size: 20px;
  border-radius: 5px;
  padding: 5px;
  text-decoration: none;
}
button.contatti a:hover{
  margin-top: 30px;
  color:#1a1a1a;
  font-size: 20px;
  border-radius: 5px;
  border: none;
  padding: 5px;
  box-shadow: 2px 5px 5px #1a1a1a;
}
/************************botton PULSE NERO*******************************/
.container-botton {
  width: 100%;
  height: 100%;
  margin: 15% auto 0;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
  display: flex;
  justify-content: center;
}
.pulse-button a{
  display: block;
  width: 100px;
  height: 100px;
  text-decoration: none;
  font-weight: light;
  font-family: 'Trebuchet MS', sans-serif;
  text-transform: uppercase;
  text-align: center;
  line-height: 100px;
  letter-spacing: -1px;
  color: white;
  border: none;
  border-radius: 50%;
  background: #1a1a1a;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(#1a1a1a, .5);
  -webkit-animation: pulse 1.5s infinite;
}
.pulse-button:hover {
  -webkit-animation: none;
}
@-webkit-keyframes pulse {
  0% {
    transform: scale(.9);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 50px rgba(#1a1a1a, 0);
  }
    100% {
    transform: scale(.9);
    box-shadow: 0 0 0 0 rgba(#1a1a1a, 0);
  }
}
/****************************botton*******************************/
/************************botton PULSE BIANCO**********************/
.fascia-intestazione-b {
  height: 95vh;
  background-color: #1a1a1a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.container-botton-b {
  width: 100%;
  height: 100%;
  margin: 15% auto 0;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
  display: flex;
  justify-content: center;

}
.fascia-intestazione-b h1,
.fascia-intestazione-b p,
.fascia-intestazione-b a {
  color: #e7e7e7;
  text-align: center;
  margin-bottom: 30px;
}
.fascia-intestazione-b p,
.fascia-intestazione-b a {
  font-size: 22px;
}
.fascia-intestazione-b h1{
  font-size: 45px;
}
.pulse-button-b a{
  display: block;
  width: 150px;
  height: 150px;
  text-decoration: none;
  font-weight: light;
  font-family: 'Trebuchet MS', sans-serif;
  text-transform: uppercase;
  text-align: center;
  line-height: 150px;
  letter-spacing: -1px;
  color: #1a1a1a;
  border: none;
  border-radius: 50%;
  background: #e7e7e7;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(#1a1a1a, .5);
  -webkit-animation: pulse 1.5s infinite;
}
.pulse-button-b:hover {
  -webkit-animation: none;
}
@-webkit-keyframes pulse {
  0% {
    transform: scale(.9);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 50px rgba(#1a1a1a, 0);
  }
    100% {
    transform: scale(.9);
    box-shadow: 0 0 0 0 rgba(#1a1a1a, 0);
  }
}
/****************************botton*******************************/
/**************************galleria*******************************/
.slids{
  border-radius: 20px;
  width: 70%;
  margin: 5% 0;
}

.owl-carousel .owl-item img {
  display: block;
  width: 100%;
  border-radius: 20px;
}
.owl-nav{
  margin-left: 35%;
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
  font-size: 30px;
  font-weight: bolder;
  margin-right: 10px;
}
/***********************fine galleria*****************************/
/****************************footer*******************************/
.lead{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding: 20px 0;   
  border-top: 1px solid #1a1a1a;
  filter: alpha(opacity=20);
}
.bordo-due{
  border-top: 1px solid #1a1a1a;
  margin-top: 20px;
}

/****************************lavorazioni*******************************/
.immagine-cover img {
  height: 100%;
  object-fit: cover;
}
.desc-lav{
  padding:20px;
}
.desc-lav p{
  font-size: 2rem;
  padding-top: 20px;
}
.col-4 a{
  text-decoration: none;
}
.galleria-testo{
  background-color: #F7F7F2;
  font-size: 100px;
  text-decoration: none;
  color: #1a1a1a;
}
.galleria-testo h2{
  font-size: 60px;
  padding: 5%;
}
.galleria-testo a{
  text-decoration: none;
  color: #1a1a1a;
}


.flex-col-25{
  width: 20%;
  margin: 2.5%;
}
.flex-col-25 .slids{
  width: 100%;
}
.galleria-lavori{
  text-align: center;
}
.testo{
  font-size: 24px;
  padding-left:5%;
  margin-bottom: 100px;
}