html {
  scroll-behavior: smooth;
}
#sp-logo { opacity: 0;}
#sp-header {
	background-color: transparent;
    height: 70px;
    left: 0;
   /* position: absolute;*/
      width: 100%;
    z-index: 98;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.001);
 }
.viewport-1 {
    background-size: cover;
    background-image: url("images/Sfondo_intro_1920_933.jpg");
height: 101vh;
width:100vw;
z-index: 99;
margin-top:-70px;;
}
@media (min-width: 1281px) {
	.inner-div {
    padding-top: 100px;
    margin: 0 auto;
    max-width: 590px;
    font-family: georgia;
    font-size: 2vw;
position: absolute;
        top: 4%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
text-align: center;
}
.innertext1  {
font-family: georgia;
font-size: 1.1vw
}
.innertext2  {
font-family: georgia;
font-size: 1.1vw
}
.scroll {/*triplo chevron animato*/
  position: absolute;
  top: 160%;
    left:50%;
  transform: translate(-50%,-50%);
  }
.scroll span {
  display: block;
  width: 20px;
  height: 20px;
  border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
  margin: -15px;
  animation-name: animate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  }
.scroll span:nth-child(2)
{
  animation-delay: -0.2s;
  }
.scroll span:nth-child(3)
{
  animation-delay: -0.4s;
}
@keyframes animate {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-20px,-20px);
  }
  50%{
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(20px,20px);
  }
}
.logomio {
   position: absolute;
  top: 4%;
  left: 30%;
transform: translate(-30%, -10%);
 }
}
@media (min-width: 1025px) and (max-width: 1280px) {
.inner-div {
    padding-top: 100px;
    margin: 0 auto;
    max-width: 590px;
    font-family: georgia;
    font-size: 3vw;
position: absolute;
        top: 4%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
text-align: center;
}
.innertext1  {
font-family: georgia;
font-size: 1.4vw
}
.innertext2  {
font-family: georgia;
font-size: 1.4vw
}
.scroll {/*triplo chevron animato*/
  position: absolute;
  top: 160%;
    left:50%;
  transform: translate(-50%,-50%);
  }
.scroll span {
  display: block;
  width: 20px;
  height: 20px;
  border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
  margin: -15px;
  animation-name: animate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  }
.scroll span:nth-child(2)
{
  animation-delay: -0.2s;
  }
.scroll span:nth-child(3)
{
  animation-delay: -0.4s;
}
@keyframes animate {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-20px,-20px);
  }
  50%{
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(20px,20px);
  }
}/* fine triplo chevron animato*/
.logomio {
max-width: 130px;
   position: absolute;
  top: 4%;
  left: 25%;
transform: translate(-30%, -10%);
 }
}
@media (min-width: 768px) and (max-width: 1024px) {
	/*.viewport-1 {
    background-size: cover;
    background-image: url("images/Sfondo_intro_1024_933.jpg");
height: 100vh;
width:100vw;
z-index: 99;
margin-top:-35px;;
}*/
  .inner-div {
    padding-top: 100px;
    margin: 0 auto;
    max-width: 380px;
    font-family: georgia;
    font-size: 3.4vw;
position: absolute;
        top: 4%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
		text-align: center;
}
.innertext1  {
font-family: georgia;
font-size: 1.5vw
}
.innertext2  {
font-family: georgia;
font-size: 1.5vw
}
.scroll {/*triplo chevron animato*/
  position: absolute;
  top: 160%;
    left:50%;
  transform: translate(-50%,-50%);
  }
.scroll span {
  display: block;
  width: 20px;
  height: 20px;
  border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
  margin: -15px;
  animation-name: animate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  }
.scroll span:nth-child(2)
{
  animation-delay: -0.2s;
  }
.scroll span:nth-child(3)
{
  animation-delay: -0.4s;
}
@keyframes animate {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-20px,-20px);
  }
  50%{
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(20px,20px);
  }
}/* fine triplo chevron animato*/
.logomio {
max-width: 110px;
   position: absolute;
  top: 4%;
  left: 23%;
transform: translate(-30%, -10%);
      }
}

@media (min-width: 481px) and (max-width: 767px) {
	/*	.viewport-1 {
    background-size: cover;
    background-image: url("images/Sfondo_intro_1024_933.jpg");
height: 100vh;
width:100vw;
z-index: 99;
margin-top:-35px;;
}*/
  .inner-div {
    padding-top: 20px;
    margin: 0 auto;
    max-width: 380px;
    font-family: georgia;
    font-size: 4.5vw;
position: absolute;
        top: 4.5%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
		text-align: center;
}
.innertext1  {
font-family: georgia;
font-size: 2.1vw
}
.innertext2  {
font-family: georgia;
font-size: 2.1vw
}
.logomio {
max-width: 140px;
   position: absolute;
  top: 2%;
  left: 45%;
transform: translate(-30%, -10%);
      }
}
@media (min-width: 320px) and (max-width: 480px) {
	 .inner-div {
    padding-top: 4px;
    margin: 0 auto;
    max-width: 320px;
    font-family: georgia;
    font-size: 7vw;
position: absolute;
        top: 4.5%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
		text-align: center;
}
.innertext1  {
font-family: georgia;
font-size:3vw
}
.innertext2  {
font-family: georgia;
font-size: 3vw
}
.logomio {
max-width: 90px;
 position: absolute;
  top: 2%;
  left: 45%;
transform: translate(-30%, -10%);
         }
}
@media (max-width: 319px) {
.inner-div {
    padding-top: 1px;
    margin: 0 auto;
    max-width: 310px;
    font-family: georgia;
    font-size: 10vw;
position: absolute;
        top: 4.5%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
		text-align: center;
}
.innertext1  {
font-family: georgia;
font-size:4vw
}
.innertext2  {
font-family: georgia;
font-size: 4vw
}
.logomio {
max-width: 0px;
 position: absolute;
  top: 1%;
  left: 45%;
transform: translate(-30%, -10%);
         }
}
/*contenitore barra adress iniziale*/
.container1 {
	background-color: #141414;
		text-align:center;
		 padding: 15px 5px 15px 10px;
	}
	/*formattazione massima ampiezza testi*/
	.widthText {
		max-width: 75%;
	}
	.article-list .article {
  margin-bottom: 30px;
  padding: 20px;
  border: 0px solid #f5f5f5;
  border-radius: 0px;
}
	/*formattazione altezze vh delle singole sezioni citate per id*/
#sp-about-us-il-nostro-lavoro-punto-2 {
	height: 62vh;
	min-height: 420px;
}
#sp-main-body {
	height: 50vh;
}
#sp-le-nostre-fiere {
	/* height: 20vh;	*/
	 min-height: 220px;
}
#sp-pannello-fiera-vicenza-e-monaco {
	/* height: 50vh;*/	
	 min-height: 320px;
}
#sp-intro-sezione-le-informazioni-e-i-link-tecnici {
	/*height: 20vh;*/
	min-height: 200px;
}
#sp-sezione-link-info-e-tecnici {
   /* height: 50vh;	*/
	min-height: 585px;
}
/*formattazione overlay colorato sui parallax citandoli per id position ATTENZIONE SONO DA AGGIRNARE QUANDO CAMBI POSITION NEL TEMPLATE*/
#sp-position16 {
	background: 
       linear-gradient(
      rgba(0, 0, 0, 0.30), 
      rgba(22, 22, 22, 0.30)
    );
}
#sp-position2 {
	background: 
       linear-gradient(
      rgba(0, 0, 0, 0.50), 
      rgba(22, 22, 22, 0.50)
    );
}
#sp-position6 {
	background: 
       linear-gradient(
      rgba(0, 0, 0, 0.30), 
      rgba(22, 22, 22, 0.30)
    );
}
#sp-position9 {
	background: 
       linear-gradient(
      rgba(0, 0, 0, 0.30), 
      rgba(22, 22, 22, 0.30)
    );
}
#sp-position21 {
	background: 
       linear-gradient(
      rgba(0, 0, 0, 0.30), 
      rgba(22, 22, 22, 0.30)
    );
}
/*formattazione parallax altezza etc e testo in overlay nei parallax*/
.userparallax {
	height:25vh;
	min-height: 100px;
	}
.testoinoverlay {/*testo overlay su prallax*/
     text-align: center;
	 color: white;
	 margin: 0;
     transform: translate(-50%, -50%);
     position: absolute;
     top: 50%;
     left: 50%;
	}
	/*formattazione bottone per aprire galleria*/
	.stileopengallery {
		width: 85vw;
		display: inline-block;
		background-color: #f4f1eb;
  color: black;
  border: 1px solid #555555;
  padding: 5%;
  text-align: center;
  text-decoration: none;
   font-size: 16px;
   letter-spacing: 2px;
   margin-left: 50%;
  transform: translate(-50%, 0);
  transition-duration: 0.4s;
  opacity: 0.6;
  	}
	.stileopengallery:hover {
  background-color: #5b544f;
  color: #f4f1eb;
  opacity: 1;
}
/*formattazione bottone aprire articolo link tecnici*/
.stileopenlink {
	width: 100%;
	margin-top: 10%;
		display: inline-block;
		background-color: #f4f1eb;
   border: 1px solid #555555;
  padding: 5%;
  text-align: center;
  text-decoration: none;
       font-weight: normal;
   letter-spacing: 2px;
   margin-left: 50%;
  transform: translate(-50%, 0);
  transition-duration: 0.4s;
  opacity: 0.6;
  	}
	.stileopenlink:hover {
  background-color: #5b544f;
  color: #f4f1eb;
  opacity: 1;
}


/*formattazione grafica dei titoli*/
.titolosinistra {
   /* font-weight: 800;
    font-size: 36px;*/
    border-bottom: 1px solid #b3b3b3;
    padding-bottom: 5px;
    margin-right: 10px;
    position: relative;
    display: inline-block;
    color: #151d2a;
}
 .titolosinistra::before {
    content: "";
    position: absolute;
    width: 25%;
    height: 2px;
    background: #151d2a;
    bottom: -1px;
    right: 0;
}
.titolodestra {
	margin-left: 0.6%;
    display: inline-block;
    color: #151d2a;
}
/*container per slider1
.container3 {
	width:100%;
	max-width:250px;
	max-height:250px;
	overflow: hidden;
}*/
/*slider1 puro CSS
#slider1 {
overflow: hidden;
}
#slider1 figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 15s slider infinite;
}
#slider1 figure img {
width: 20%;
float: left;
}
@keyframes slider  { 
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}*/

/*contenitore formattazione moduli fiere*/
.container2 {
	padding-left: 15%;
	border-left: 3px #eee solid;
	margin-bottom: 5%;
	
}
#sp-main-body {/*questo controlla posizione main body contenuto*/
  padding: 10px 0;
}
/*formattazione moduli della sezione taglieria*/
.container4 {
	min-height: 100%;
	padding-top: 5%;
	padding-left: 10%;
	padding-right: 10%;
	 border: 2px solid #eee;
/*border-left: 3px #eee solid;*/
		margin-bottom: 5%;
}
.container4inner {
	padding-top: 5%;
	text-align: justify;
  text-justify: inter-word;
}
/*formattazione link tecnici e altri in accordion*/
@media screen and (max-width: 900px) {
  div.hideitemtext {
    display: none;
}
  div.listitem {
  margin-top: 15px;
  }
}
.allinea {
		  min-width: 100px;
   text-align: left;
  float:left;
  padding-top: 5%;
  /*margin-bottom: 1%;
margin-left:2%;*/
  letter-spacing: 0px;
background-color:#fff;
/*border-left: 3px #eee solid;*/
overflow: hidden;
}
.listitem {
  font-weight: bold;
  margin-top: 0px;
   /* margin-left: 10%;*/
 }
/*formattazione classe contactcustom per form contatti*/
.contactcustom {
	color: #5b544f;
	font-family: Open sans;
	font-size: 14px;
}
.rapid_contact .form-control {/*modifiche su mudulo rapid contact*/
	width: 100%;
}
.contactcustom .intro_text {/*testo sopra contact form*/
	text-align: left;
} 
.btn-primary, .sppb-btn-primary .contactcustom {/*per rapid contatact cambio colore bottone"*/
    border-color: #423F40;
    background-color: #C8BBBE;
} 
/* modulo mappa google inserita con iframe */
.mappaemessage {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
		-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	
  margin-top:1.5em;
  position: relative;
  padding-bottom: 50%;
  height:0;
  overflow: hidden;
}
.mappaemessage:hover {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
	 }
.mappaemessage > iframe {
  position: absolute;
  top: 0;
  left: 0;
   width: 100%!important;
   height: 100% !important;
}
/* classe formattazione modulo testo vicino a mappa*/
.testovicinomappa {
	text-align:justify;
	  margin-top:9%;
   margin-right: 15%;
}
/*formattazione barra adress sotto img apertura*/
.allineaadress {
		  min-width: 100px;
          text-align: left;
          float:left;
          margin-top: 1%;
          margin-left:5%;
		   letter-spacing: 1px;
background-color:#fff;
border-left: 3px #eee solid;
/*overflow: hidden;*/
}
.listitemadress {
	color: #746361;
    padding-left: 5%;
  margin-top: 3%;
    margin-left: 3%;
 }
 #sp-sezione-adress-sotto-immagine-apertura {
 border-bottom: 1px #eee solid;
 }
 /*formattazione zona footer mappa*/
 .footerstyle {
	 margin-right: 4%;
 }
 /*modifiche all offcanvas menu */
.offcanvas-menu .offcanvas-inner .sp-module ul > li a,
.offcanvas-menu .offcanvas-inner .sp-module ul > li span { 
font-family: open sans;
font-size: 15px;
color: #463636;
 }
.offcanvas-menu  { background: #f4f1eb;}/*colore background striscia off canvas*/
 .offcanvas-menu .offcanvas-inner .sp-module ul > li.current.active,
.offcanvas-menu .offcanvas-inner .sp-module ul > li:hover,
.offcanvas-menu .offcanvas-inner .sp-module ul > li:focus,
.offcanvas-menu .offcanvas-inner .sp-module ul > li:hover a,
.offcanvas-menu .offcanvas-inner .sp-module ul > li:focus a
{color: #746361;}/*colore on hover dell item di menu*/
/*sconosciuto per barra scorrimento extra*/
.body-innerwrapper {
	overflow: visible;
}