/* ==========================================================================
   STILI GENERICI
   ========================================================================== */
   audio, canvas, iframe, img, svg, video {
	vertical-align: middle;
  }
  textarea {
	resize: vertical;
  }
  /*questo sotto non somma il padding*/
  * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
  }
  /* ==========================================================================
	 STILI SITO
	 ========================================================================== */
  * {
	margin: 0;
	padding: 0;
  }
  :root {
    --principale: #ee2835;
    --error: red;
    --bianco: #fff;
    --nero: #000;
    --grigio: #f3f3f3;
}
  body {
	font-family: "Roboto", serif;
	font-size: 19px;
	line-height: 24px;
	font-weight: 400;
	margin: 0px;
	padding: 0px;
  background-color: #FFF;
  }
  .wrapper {
	width: 90%;
	margin: 0 5%;
  }
  img {
	height: auto;
	max-width: 100%;
	width: auto;
  }

  a {
	text-decoration: none;
	color: var(--principale);
	font-weight: 600;
  }
  h1 {
	font-size: 60px;
	line-height: 70px;
	margin-top: 0px;
	font-weight: 900;
	background-image: url(../images/linea-tit.png);
	background-repeat: no-repeat;
  }
  h1 span{
	font-size: 30px;
	line-height: 40px;
	margin-top: 0px;
	font-weight: 100;
  }
  
  h2 {
	font-weight: 900;
	font-size: 36px;
	line-height: 40px;
	padding-top: 15px;
	padding-bottom: 15px;
	background-image: url(../images/linea-tit.png);
	background-repeat: no-repeat;
  }
  h3 {
	font-weight: 700;
	font-size: 24px;
	line-height: 28px;
  }
  h3 span{
	font-weight:400;
	font-size: 18px;
	line-height: 22px;
  }

  /*SPAZIATURE*/
  .tp60{
	padding: 60px 0;
  }
  .p60{
	padding: 0 0 60px 0;
  }
  ol{
	padding-left: 25px;
  }
  section .wrapper ul{
	padding-left: 20px;
  }
  /*PULSANTI*/
  .pulsante {
	border: solid 1px var(--principale);
	color: var(--principale);
	margin: 10px 0;
	padding: 12px 30px;
	font-size: 18px;
	font-weight: 400;
	  display: inline-block;
	  text-transform: uppercase;
  }
  .pulsante-pieno {
	background-color: var(--principale);
	color: var(--bianco);
	margin: 10px 0;
	padding: 12px 30px;
	font-size: 18px;
	font-weight: 400;
	  display: inline-block;
	  text-transform: uppercase;
  }
  .pulsante-download{
	background: url(../images/ico-download.png) no-repeat top left;
	color: var(--nero);
	padding: 0 0 5px 40px;
	font-weight: 400;
	display: block;
	text-decoration: underline;
	
  }
  .pulsante-download em{
	text-decoration: none !important;
	display: inline-block;
}
  .pulsante-grafici{
	background: url(../images/ico-grafici.png) no-repeat top left;
	color: var(--nero);
	padding: 0 0 5px 40px;
	font-weight: 400;
	display: block;
  }
  /*SFONDI E BOX*/
  .bg-grigio{
	background-color: var(--grigio);
  }
  .box{
	border-radius: 20px;
	margin-bottom: 50px;
	box-shadow: 0px 6px 14px 4px rgba(0,0,0,0.15);
	text-align: center;
	padding-top: 0 !important;
  }
  .box:hover {
	box-shadow: 0px 6px 14px 4px rgba(0,0,0,0.70);;
  }
  .box h3{
	text-align: center;
	background-color: var(--principale);
	color: var(--bianco);
	border-bottom-right-radius: 18px;
	border-bottom-left-radius: 18px;
	padding: 20px 0;
  }
  .box h3 span{
	font-size: 16px;
	font-weight: 100;
  }
  /*FLEX*/
  .flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
  }
  .flex-nowrap {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
  }
  .flex20, .flex25, .flex30, .flex40, .flex50, .flex60, .flex70, .flex80 {
	flex: 0 1 100%;
	padding-top: 20px;
  }
  .flex-align-center{
	align-items: center;
  }
  .colonneDue{
    column-count: 1;
    column-gap: 60px
}
/*ALLINEAMENTI*/
.t-center{
	text-align: center;
}
  /*MOSTRA-NASCONDI*/
  .hide-mobile{
	display: none;
}
.show-mobile{
	display: inline-block;
		
	}
	/* TO TOP */
#toTop {
	width: 50px;
	height: 50px;
	position: fixed;
	bottom: 15px;
	right: 10px;
	background: url(/images/freccia-top.png)no-repeat;
	z-index: 100;
	display: none;
  }
  /* HEADER
---------------------------------------------------------------------------*/
header .logo {
	flex: 0 1 50%;
  }
  header .ico-contatti {
	text-align: right;
	color: var(--nero);
	font-weight: 100;
  }
  header .ico-contatti img {
	padding-right: 10px;

  }
  header .flex-align-center{
	padding: 20px 0;

  }


  /*MENU
---------------------------------------------------------------------------*/
.nav-container{
	border-top: solid 1px  #d9d9d9;
}
nav.menu-container ul li.current-menu-item {
	color: #525252;
  }
  nav.menu-container ul li {
	display: inline-block;
	float: none;
	position: relative;
  }
  nav.menu-container ul li a {
	display: block;
	width: 100%;
	text-align: center;
	text-decoration: none;
	padding: 10px 4px;
	font-size: 16px;
	color: var(--nero) !important;
	text-transform: uppercase;
	font-weight: 400;
  }
  nav.menu-container ul li span {
	display: block;
	width: 100%;
	text-align: center;
	text-decoration: none;
	padding: 10px 4px;
	font-size: 16px;
	text-transform: uppercase;
  }
  nav.menu-container ul li.voce_on a {
	color: var(--principale) !important;
  }
  nav.menu-container ul li:hover a {
	color: var(--principale);
	transition-property: color;
	transition-duration: 1s;
  }
  nav.menu-container ul li ul {
	background-color: rgba(255, 255, 255, 1) !important;
	position: absolute;
	display: none;
	top: 100%;
	border-right: none;
	z-index: 50;
	padding-top: 0px;
  }
  nav.menu-container ul li:hover ul {
	display: block;
  }
  nav.menu-container ul li ul li {
	width: 100%;
	min-width: 330px;
	position: relative;
	background: none;
	text-transform: lowercase;
	height: auto;
	border-bottom: 1px solid #ccc;
  }
  nav.menu-container ul li ul li a {
	padding: 0px;
	padding: 10px;
	text-align: left;
	font-size: 15px;
	height: auto;
	color: var(--nero) !important;
	display: block;
	text-transform: uppercase;
  }
  nav.menu-container ul li ul li.voce_on a {
	color: var(--bianco) !important;
	background-color: var(--principale);
  }
  nav.menu-container ul li ul li a:hover {
	color: #fff !important;
	background-color: var(--principale);
	transition-property: color;
	transition-duration: 1s;
  }
  
  /*HOME
  ---------------------------------------------------------------------------*/
/*SLIDER*/
.slider{
	background: url("../images/slide.jpg") no-repeat top center;
	background-size: cover;
	text-align: center;
	padding: 90px 0;
}
.slider h1{
	color: var(--bianco);
	font-size: 3em;
	line-height: 0.9em;
	background-image: url(../images/linea-tit.png);
	background-repeat: no-repeat;
	background-position: bottom center;
}
.slider h1 span{
	color: var(--nero);
	font-size: 0.5em;
	
}
/*PRODOTTI*/
.prodotti .wrapper{
	border-top-right-radius: 18px;
	border-top-left-radius: 18px;
	background-color: var(--bianco);
	margin-top: -50px;
	padding: 40px;
}
  /*GRAFICI*/
  .h-grafici{
	padding: 60px 0;
  }
  /*TOKEN*/
  .h-token{
	/*background-color: #c7cace;*/
	padding-bottom: 30px;
  }
  .h-token h2{
	background: none;
  }
  .h-token p{
	font-size: 1.1em;
  }
    /* TITOLO
---------------------------------------------------------------------------*/
.titolo{
	color: var(--bianco);
	padding: 60px 0;
	background: url("../images/power-commander-bg.jpg") no-repeat top center;
	background-size: cover;
}
  /* FIRMWARE
---------------------------------------------------------------------------*/
.firmware em{
	font-weight: 100;
}


  /* GRAFICI 
---------------------------------------------------------------------------*/
.grafici a{
 border-bottom: solid 1px #ccc;
margin-top: 10px;
padding-bottom: 10px;
}
  /* POWER COMMANDER 
---------------------------------------------------------------------------*/
.manuali .flex70 a{
	width: 100%;
	display: block;
}
  
  /* Style the buttons that are used to open the tab content */
  .tab button {
	background-color: inherit;
	border: none;
	outline: none;
	cursor: pointer;
	transition: 0.3s;
	display: none;
  }
  
  
  /* Create an active/current tablink class */
  .tab button.active {
	box-shadow: 0px 6px 14px 4px rgba(0,0,0,0.70);
  }
  
  /* Style the tab content */
  .tabcontent {
	/*display: none;*/
	margin-top: 70px;
  }
  .tabcontent {
	animation: fadeEffect 1s; /* Fading effect takes 1 second */
  }
  
  /* Go from zero to full opacity */
  @keyframes fadeEffect {
	from {opacity: 0;}
	to {opacity: 1;}
  }

  /*POWER COMMANDER FAQ*/
  summary{
	cursor: pointer;
	border-top: 1px solid #ccc;
	padding: 10px;
	margin: 0;
	font-weight: 600;
}
details div{
	padding: 10px 0 50px 30px;
	
}
details[open] > summary:before { transform: rotate(90deg);
}
 
details[open] summary ~ * {
  animation: sweep 0.5s ease-in-out;
}
@keyframes sweep {
  0% {opacity: 0; transform: translateX(-10px)}
  100% {opacity: 1; transform: translateX(0)}
}
  /* FOOTER 
---------------------------------------------------------------------------*/
footer {
	background: url("../images/footer-bg.jpg") no-repeat top center;
	background-size: cover;
	padding: 30px 0 0 0;
	font-size: 16px;
	font-size: 400;
	color: #fff;
  }
  footer a {
	color: #fff;
	font-weight:400 ;
  }
  footer strong{
	font-size: 18px;
  }
  footer span{
	font-weight: 100;
  }
  address {
	font-style: normal;
  }
  footer .link{
	width: 100%;
	padding: 20px 0;
	margin-top: 40px;
	border-top: solid 1px #78787a;
  }
  footer .hotnrare{
	color: var(--nero);
	background-color: var(--bianco);
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	text-align: center;
	margin-top: 40px;
  }
  footer .hotnrare p{
	padding-top: 10px;
  }
  /* GOOGLE MAP 
  ---------------------------------------------------------------------------*/
  /* Wrap responsive */
  .videoWrapper {
    position: relative;
    height: 0;
    padding-bottom: 56.25%
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
  /* ==========================================================================
	  MEDIA QUERIES
	 ========================================================================== */
  @media only screen and (min-width: 768px) {
  
	  .hide-mobile{
		  display: inline-block;
  }
	  .show-mobile{
		  display: none !important;
		  
	  }
	  .flex20 {
		flex: 0 1 20%;
	  }
	  .flex25 {
		flex: 0 1 23%;
	  }
	.flex30 {
	  flex: 0 1 25%;
	}
		.flex40 {
	  flex: 0 1 35%;
	}
			.flex50 {
	  flex: 0 1 47%;
	}
	.flex60 {
	  flex: 0 1 60%;
	}
		.flex70 {
	  flex: 0 1 70%;
	}
	.flex80 {
		flex: 0 1 75%;
	  }
	  .colonneDue {
        column-count: 2;
        column-gap: 60px
    }
	/*POWER COMMANDER*/
	.tab button {
		display: inline-block;
	  }
	  .tabcontent {
		display: none;
	  }
}
@media only screen and (min-width: 1366px) {
  .wrapper {
    width: 1296px;
    margin: 0px auto;
  }



  
}
/* ==========================================================================
   Helper classes
   ========================================================================== */
.clearfix:before, .clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}
.clearfix:after {
  clear: both;
}