html, body{ width: 100%; height: 100%; background: #dbd4cc!important; margin: 0px; padding: 0px; overflow-x: hidden; font-family: 'Roboto', sans-serif; cursor: none;}
::selection {
  color: #fff;
  background: #dbd4cc;
}

b{font-weight: 400;}
label{ position:relative; float:left; font-family: 'Iskry'; width:100%; color: #2e251f; font-size: 2.4vw; font-weight: 275; line-height: 1.2; letter-spacing: -2.16px; margin: 30px 0%; }
input{ position: relative; text-align: left; margin: auto; width: 100%; border-radius:0px!important; border: 0px!important; border-bottom: 1px solid #2e251f!important; line-height: 1.5rem; font-size: 1rem!important; padding: 1rem 1rem!important; background-color: transparent; transition: ease-in-out, width .35s ease-in-out; color: #2e251f!important; font-style: italic;}
textarea{ position: relative; text-align: left; margin: auto; height: 200px; width: 100%; border-radius:0px!important; border: 1px solid #2e251f!important; line-height: 1.5rem; font-size: 1rem!important; padding: 1rem 1rem!important; background-color: transparent;
  transition: ease-in-out, width .35s ease-in-out; color: #2e251f!important; font-style: italic; }


/*
 *  HEADER + MENU
 */


#logo { position: fixed; width:120px; top: 0px; left:90px; z-index: 10;  padding: 17px 21px; background-color:#dbd4cc; }
#logo img{width:100%;}

#icon-menu{position: fixed; top: 30px; right: 30px; z-index: 10; background-color:#2e251f;}

.menu-toggle{ position:relative; flex:0 0 auto; width:90px; height:90px; }
#chiudi{ position:fixed; width:100px; height:100px; top: 60px; right: 90px; z-index:100; display:none;}

.hamburger{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.hamburger span{  position:relative; display:block; width:38px; height:2px; margin-bottom:8px; overflow:hidden;}
.hamburger span:last-child{ margin:0;}
.hamburger span:before,.hamburger span:after{ content:""; position:absolute; width:100%; height:100%; background-color:rgb(255,255,255); transform:translateX(-200%); transition:transform ease 300ms}
.hamburger span:after{transform:translateX(0);}
.hamburger span:nth-child(2):before,.hamburger span:nth-child(2):after{transition-delay:75ms;}
.hamburger span:last-child:before,.hamburger span:last-child:after{transition-delay:150ms;}
.menu-toggle:hover .hamburger span:before{transform:translateX(0);}
.menu-toggle:hover .hamburger span:after{transform:translateX(200%);}
.menu-toggle.active .hamburger span:before{transform:translateX(100%);}
.menu-toggle.active .hamburger span:after{transform:translateX(200%);}

.cross{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.cross span{display:block; width:38px; height:2px; background-color:rgb(255,255,255); transform:translateY(50%) rotate(45deg) scaleX(0); transition:transform ease 200ms;}
.cross span:last-child{transform:translateY(-50%) rotate(-45deg) scaleX(0);}

.menu-toggle.active .cross span{ transition-delay:450ms; transform:translateY(50%) rotate(45deg) scaleX(1);}
.menu-toggle.active .cross span:last-child{ transform:translateY(-50%) rotate(-45deg) scaleX(1);}

.inv-recaptcha-holder { visibility: hidden;}


#menu-top{ position: fixed; width: 100%; height: 0; left: 0px; top: 0px; background-color: #2e251f; z-index: 9; }

#cont-menu{
  position: absolute;
  width: 60%;
  left: 20%;
  top: 90px;
  transform: translate(0%, -50%);
  opacity: 0;
  list-style: none;
  display:none;
  text-align:center;}
  #cont-menu li {
	  display:inline-flex;
	  margin: 0px 50px;}
    #cont-menu li a{
      color: #6c655f;
      font-size:16px;
      font-weight: 200;
      line-height: 1;
      letter-spacing: 2.16px;
      width: auto;
      text-decoration:none;}
      #cont-menu li a:hover{
        color: #fff; cursor:none;
}

#cont-menu-cat{
  position: absolute;
  width: 60%;
  left: 20%;
  top: 55%;
  margin:0px;
  transform: translate(0%, -50%);
  opacity: 0;
  list-style: none;
  display:none;
  text-align:center;}
    #cont-menu-cat li {
      padding:10px 50px;
      display:inline-flex;}
        #cont-menu-cat li a{
          font-family: 'Iskry';
          color: #6c655f;
          font-size: 2.4vw;
          line-height: 1.8;
          letter-spacing: -2.16px;
          width: auto;
          text-decoration:none;}
          #cont-menu-cat li a:hover{
            color: #fff; cursor:none;
}



/*
 * CONTENT
 */

.contenitore-main{ position: relative; float: left; width: 100%; }
.contenitore-full{ position: relative; float: left; width: 100%; padding:100px 10%; }
.contenitore{ position: relative; width: 100%;  float: left;  height: auto;  overflow: hidden; box-sizing: border-box; padding:200px 20%; }

#cont-moretti{ width: 60%; }
#cont-moretti-chisiamo{ width: 100%; }
#cont-lavoro{width:40%; margin-top: 25%; text-align: center; margin-left: 10%;}
.cont-descr{width: 50%;}
.cont-progetto{position: relative; width: 42%; float: left;}
.cont-subdescr{position: relative; width: 30%; float: left; clear: left;}

#contenitore-titolo{ position: relative; width: 100%;  float: left;  height: auto; border:10px solid #2e251f; overflow: hidden; box-sizing: border-box; padding:200px 0px; margin-bottom: 100px;}
#contenitore-titolo h2{ text-align:center;}

.contenitore-prodotti{ position: relative; width: 100%;  float: left;  height: auto;  overflow: hidden; box-sizing: border-box; padding:100px 0px; }
.contenitore-50{position: relative; width: 50%; float: left; padding:0px 4%;}

#scroll-down{ position: absolute; bottom: 110px; left: 30px;}
#scroll-down img{ position: absolute; bottom: -30px; left: -2px; }
#scroll-down h4{ position: relative; float: left; transform: rotate(-90deg); transform-origin: left; color: #fff; font-size: 15px; font-weight: 300; line-height: 18px; letter-spacing: -0.375px; margin-top: 2px; margin-left: 10px;}
#coordinate svg{ position: relative; float: left; color: #fff;}

#cont-lista-prodotti{
	display:none;
  position: relative;
  float:left;
  width: 100%;
  list-style: none;
  text-align:center;
	margin:0px;}
  #cont-lista-prodotti li{
	  display:inline-flex;
	  margin: 0px 50px;}
    #cont-lista-prodotti li a{
      background: #2e251f;
      color: #fff;
      padding: 20px 50px;
      margin-top: 30px;
      font-weight: bold;
      text-decoration:none;}
      #cont-menu li a:hover{
        color: #fff; cursor:none;
}

/*
 * PRIMO CONTENITORE
 */

.primo-contenitore{ position: relative; float: left; width: 100%;}
#bg-home{ background-image: url("https://www.morettipavimenti.com/wp-content/uploads/2021/04/home.jpeg"); background-position:center center; background-size:cover;}
#chi-siamo{ background-image: url("https://www.morettipavimenti.com/wp-content/uploads/2021/09/moretti.jpg"); background-position:center center; background-size:cover;}
#bg-realizzazioni{ background-image: url("https://www.morettipavimenti.com/wp-content/uploads/2021/10/ss-anteprima.jpg"); background-position:center center; background-size:cover;}

.shadow{position:absolute; width:100%; height:100%; background-color:#000; opacity:0.6;}

#slogan{ position: absolute; width: 80%; left: 15%; top: 50%; margin:0px; transform: translate(0%, -50%); color: #ffffff; font-family: 'Iskry'; font-size: 7vw; font-weight: 400; line-height: 7vw;}
#slogan-chisiamo{ position: absolute; width: 80%; left: 10%; top: 50%; margin:0px; transform: translate(0%, -50%); color: #ffffff; font-family: 'Iskry'; font-size: 6vw; font-weight: 400; line-height: 6vw; text-align:center;}
.sottotitolo-realizzazioni-home{ font-family: 'Roboto', sans-serif; font-weight: 300; color: #000; background-color: #fff; font-size: 18px; line-height: 14px; letter-spacing: 1px; padding: 20px 25px;}

.partner{ font-family: 'Iskry'; color: #fff; font-size: 10vw; font-weight: 275; line-height: 200px; text-align: center; letter-spacing: -7.2px; white-space: nowrap; margin-left: -30%; opacity:0.3;  margin:0px;}

.descrizione-prodotti { position:relative; float:left; margin-top:50px!important; margin-bottom:30px!important; color: #1f1f1f; font-size: 16px; font-weight: 300; line-height: 38px; opacity: 0; -webkit-transform: translateY(10vh); -moz-transform: translateY(10vh); -ms-transform: translateY(10vh); transform: translateY(10vh); text-align:left; width:78%; }



/*
 * HOME
 */


#cont-scritta{ position: relative; float: left; width: 100%; padding: 50px 0px; padding-bottom: 0px;}

/*
 * CHI SIAMO
 */

.nomi{
    position: relative;
    float: left;
    font-family: 'Iskry';
    width: 100%;
    color: #2e251f;
    font-size: 2.4vw;
    font-weight: 275;
    line-height: 1.2;
    letter-spacing: -2.16px;
    margin: 30px 0%;}
	.nomi span{
    position: relative;
    float: left;
    font-family: 'Iskry';
    width: 100%;
    color: #fff;
    font-size: 25px;
    font-weight: 275;
    line-height: 1.2;
    letter-spacing: 0px;
    margin: 10px 0%;}

#immagine-chisiamo{width:100%; margin-top:50px;}


/*
 * TEXT
 */

.titolo { position:relative; float:left; font-family: 'Iskry'; margin:0px; font-size: 6vw; font-weight: 400; line-height: 5vw; width: 100%; opacity: 0; color: #1f1f1f; letter-spacing:-5px; -webkit-transform: translateY(10vh); -moz-transform: translateY(10vh); -ms-transform: translateY(10vh); transform: translateY(10vh); }
.sottotitolo { position: relative; float: left; width: 100%; margin-bottom:50px; height: auto; color: #fff; font-weight:200; font-size: 20px; line-height: 14px; letter-spacing: 1px; opacity: 0; -webkit-transform: translateY(10vh); -moz-transform: translateY(10vh); -ms-transform: translateY(10vh); transform: translateY(10vh); }
.descrizione { position: relative; float: left; width: 100%; margin-top:30px; color: #1f1f1f; font-size: 16px; font-weight: 300; line-height: 38px; opacity: 0; -webkit-transform: translateY(10vh); -moz-transform: translateY(10vh); -ms-transform: translateY(10vh); transform: translateY(10vh); text-align:left;}
.descrizione a{ color: #b7b7b7; text-decoration: none;}
.link-full{text-decoration:none;}


/*** REALIZZAZIONI ***/


.titolo-realizzazioni { font-family: 'Iskry'; font-size: 6vw; font-weight: 400; line-height: 5vw; width: 100%; opacity: 0; color: #1f1f1f; letter-spacing:-5px; -webkit-transform: translateY(10vh); -moz-transform: translateY(10vh); -ms-transform: translateY(10vh); transform: translateY(10vh); margin:50px 0px;}
.sottotitolo-realizzazioni { height: auto; color: #1f1f1f; font-size: 16px; font-weight: 300; line-height: 38px; opacity: 0; -webkit-transform: translateY(10vh); -moz-transform: translateY(10vh); -ms-transform: translateY(10vh); transform: translateY(10vh); text-align: left;}

.descrizione-realizzazioni { margin-top:50px; color: #1f1f1f; font-size: 16px; font-weight: 300; line-height: 38px; opacity: 0; -webkit-transform: translateY(10vh); -moz-transform: translateY(10vh); -ms-transform: translateY(10vh); transform: translateY(10vh); text-align:left;}

.descrizione-realizzazioni a{ color: #b7b7b7; text-decoration: none;}
.realizzazioni-bottone{	background: #2e251f; color: #fff; padding: 20px 50px; margin-top: 50px; font-weight: bold; }
.realizzazioni-blocco{ position:relative; float:left; width:100%; margin-top:100px;}

.titolo-articolo{ font-family: 'Iskry'; font-size: 6vw; font-weight: 400; line-height: 5vw; width: 100%; opacity: 0; color: #1f1f1f; letter-spacing:-5px; -webkit-transform: translateY(10vh); -moz-transform: translateY(10vh); -ms-transform: translateY(10vh); transform: translateY(10vh); margin:50px 0px; text-align:center;}

.contenitore-blocco{ position:relative; float:left; width:100%;}
.realizzazione{	width:100%!important; }
.realizzazione h1{ font-family: 'Iskry'; font-size: 4vw; font-weight: 400; line-height: 10vw; width: 100%; color: #1f1f1f; letter-spacing:-5px; margin:50px 0px; text-align:center;}
.realizzazione p{ color: #1f1f1f; font-size: 16px; font-weight: 300; line-height: 38px; text-align:left;}
.realizzazione figure img{ width:100%!important; }


/** CONTATTI**/

#contattaci{}
#contattaci h1{text-align: center;}
#contattaci svg{position: absolute; width: 30%; top: 50px; left: 35%; z-index: -1;}


/*
 * SWIPER
 */

.swiper-container { width: 100%; height: 100%; }
.swiper-container{}
.swiper-slide {
	text-align: center; 
	font-size: 18px;
	/* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-slide h2{
    position: absolute;
	width: 90%;
	left: 5%;
	top:45%;
	transform: translate(0%, 0%);
	color: #ffffff;
	font-family: 'Iskry';
	font-size: 3vw;
	font-weight: 400;
	z-index:3;
}

.swiper-slide h3{
    position: absolute;
	width: 90%;
	left: 5%;
	top:40%;
	transform: translate(0%, 0%);
	color: #ffffff;
	background-color: rgba(37, 24, 16, 0.6);
	font-family: 'Iskry';
	font-size: 22px;
	padding:15px 0px;
	line-height:1;
	font-weight: 400;
	z-index:3;
}


.overlay{ position: absolute; width: 100%; height: 100%; background: #000; opacity: 0.3; z-index: 1;}
.swiper2{}
.swiper2 img{position:relative; float:left; width:100%;   flex-flow: column wrap;}
#gallery-mobile{display:none;}

/*
 * FORM 
 */

.form-section{ position:relative; float:left; width:48%; margin-top: 10px;}
#invia{ position: relative; text-align: center; margin: auto; width: 100%; border: 0px; border-bottom: 1px solid #ddd; line-height: 1.5rem; font-size: 1rem!important; padding: 1rem 0px!important; background-color: #fff; transition: ease-in-out, width .35s ease-in-out; color: #fff!important; background-color: #2e251f;}

div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing { display:none!important;}	


/******* CURSOR POINTER ********/

.cursor { position: absolute; background-color: #2e251e; width: 20px; height: 20px; border-radius: 100%; z-index: 1; transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity; user-select: none; pointer-events: none; z-index: 10000; transform: scale(1);}

.cursor-follower { position: absolute; background-color: #1b1b1b; opacity: 0.3; width: 10px; height: 10px; border-radius: 100%; z-index: 1; transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity; user-select: none; pointer-events: none; z-index: 10000; transform: translate(5px, 5px);}
.cursor-active{ background-color: #000; opacity: 0.7; transform: scale(2); }
.none{ display: none; }
.c-scrollbar{}
.c-scrollbar_thumb{background-color: #2e251f; opacity: 1; border-radius: 0px;}


/*
 * FOOTER
 */

#footer{ position: relative; float: left; width: 100%; height: auto; }
#footer p{ margin: 10px 0px; font-weight: normal; font-style: normal; font-size: 14px; line-height: 21px; color: #333; }
#footer p a { font-weight: bold; text-decoration: none; color: #333; }
#footer-left{ position: relative; float:left; margin: 10px 30px;}
#footer-right{position: relative; float:right; margin: 10px 30px;}
#footer-right a svg{ width: 30px; height: 30px; fill: #000; margin-top: 11px;}


/*
 * RESIZE
 */

@media only screen and (max-width:1280px) {

	
  #logo { left: 20px; width: 90px; padding: 7px 10px;}
  #icon-menu{right:20px; top:0px;}
  #line-red{width: 400px; height: 400px; top: 0px; left: -1px;}
  #line-red-2{display: none;}
  #chiudi{ top: 0px; right: 20px; z-index:100; display:none;}
#chi-siamo{ background-image: url("https://www.morettipavimenti.com/wp-content/uploads/2021/12/chisiamo-mobile.jpg"); background-position:center center; background-size:cover;}

#cont-menu{
	position: absolute;
    width: 90%;
    left: 0%;
    top: 60px;
    transform: translate(0%, 0%);
    opacity: 0;
    list-style: none;
    display: none;
    text-align: center;}
  #cont-menu li {
	  display:inline-flex;
	  margin: 15px 0px;
	width:90%;
	text-align:center;}
    #cont-menu li a{
			font-family: 'Iskry';
		width:90%;
      color: #6c655f;
	  text-align:center;
      font-size:22px;
      font-weight: 200;
      line-height: 1;
      letter-spacing: 2.16px;
      text-decoration:none;}
      #cont-menu li a:hover{
        color: #fff; cursor:none;
}

#cont-menu-cat li{
	display:none;
}
	
	#cont-lista-prodotti{display:inline;}
  #cont-lista-prodotti li{ width:100%; display:inline-flex; margin: 0px 0px;}
  #cont-lista-prodotti li a{ width:100%; margin-top:15px;}

   .contenitore-50{position: relative; width: 100%; float: left; padding:0px;}

  .cont-subdescr{width: 100%; margin-left: 0px!important;}
  .cursor, .cursor-follower, .cursor-active{display: none;}
  #cont-scritta{padding-bottom:0px; }
  .cont{position: relative; float: left; width: 100%;}
  .contenitore-full { position: relative; float: left; width: 100%; padding: 30px 4%;}
  #cont-vualab{ width: 100%; }
  #cont-lavoro{width:100%; margin-top: 5%; text-align: left; margin-left: 0%;}
  .cont-descr{width: 100%;}
  .cont-progetto{width: 100%;}
  #game{width: 100%; height: 280px; margin-top: 50px;}
  #text-grafico{ width: 100%; margin-top: 50px;}
  #text-grafico h1{ font-size: 65px;}
  #contenitore-titolo{ border:5px solid #2e251f; padding: 50px 0px; margin: 100px 0px; margin-bottom: 50px;}
  .titolo { font-size: 45px; line-height:0.9; letter-spacing:0px;}
  .sottotitolo{ font-size: 16px; }
  .nomi{font-size: 30px; letter-spacing:0px;}
  .realizzazioni-blocco{ margin-bottom:60px;}

  .titolo-articolo { font-size: 45px; line-height:0.9; letter-spacing:0px;}
  .realizzazione h1 { font-size: 45px; letter-spacing:0px;}
  .titolo-realizzazioni {  font-size: 45px; letter-spacing:0px; margin: 20px 0px; margin-top: 50px; }
  .sottotitolo-realizzazioni {}
  .realizzazioni-bottone { margin-top: 30px;}
  .frase{font-size: 60px; margin-top: 80px;}
  .partner{font-size: 70px; letter-spacing:-3px;}
  #contattaci svg { width: 90%; top: -28px; left: 30px;}
  label { font-size:35px; letter-spacing:0px; margin: 15px 0px;}
  .servizi-button{width: 50px; height: 50px;}
  .servizi-button svg { margin-top: -10px; margin-left: -10px; width: 20px; height: 20px;}
  .form-section{ width:100%;}
  #section-tel{margin-left: 0%;}
  #slogan { position: absolute; left: 10%; width:80%; font-size: 60px; line-height:0.9; text-align: left; }
  #scroll-down{left: 10px;} 
  #verde, #giallo, #rosso, #celeste{display: none;}
  #progetto-grafico{margin-left: 0%; margin-top: 50px;}
  #descr-progetto-grafico{ clear:left; margin-left:0%;}
  #form {width: 100%; margin-left: 0px;}
  #cont-moretti{ width: 100%; }
  .descrizione { width:100%; line-height:20px;}
  .descrizione-prodotti { width:100%; line-height:20px;}
  .contenitore-prodotti{padding:50px 0px;}
  #slogan-chisiamo{ position: absolute; width: 80%; left: 10%; top: 50%; margin:0px; transform: translate(0%, -50%); color: #ffffff; font-family: 'Iskry'; font-size: 60px; line-height:0.9; font-weight: 400; text-align:center;}
  .sottotitolo-realizzazioni-home{font-size:14px;}
  .swiper-slide h2{ font-size: 30px; letter-spacing:0px; line-height:1;}
  #footer-left{ position: relative; float:left; width:90%; text-align:center; margin: 0px 5%; }
  #footer-right{position: relative; float:right; width:90%; text-align:center; margin: 0px 5%; }
	
  #gallery-mobile{display:inline;}
  #gallery{display:none;}
	
}