/*per "fluidificare" il layout della pagina il più possibile
cerchiamo di utilizzare le percentuali per: width, margin e padding.
APPROCCIO "WEB DESIGN REATTIVO": Prima di tutto costruiamo una BASE
PER TUTTI I DISPOSITIVI - obiettivo del sito è di risultare leggibile, 
su un'unica colonna. Il sito, così sarà accessibile per tutti i dispositivi
vecchi e nuovi ... con qualche differenza ... ma ce lo aspettiamo*/


/*per evitare lo scroll orizzontale a seguito inserimento colore sfondo
sezione paragrafi ... vedi in seguito*/
html, body {
overflow-x: hidden;
}

/*
header {
   position:absolute;
   top:0;
   bottom:auto;
   left:0;
   right:0;
   margin:auto;
   width:100%;
   height:auto;
   z-index: 999999;
   
   
}
*/
header {
    height: 100px;
    width: 100%;
    position: absolute;
    z-index: 3;
    background-color: #2c3e50;
}

/*MENU*/
@import url(http://fonts.googleapis.com/css?family=Lato:700);
.container_menu  {
    width: 1170px;
    margin: 0 auto;
}

.logo_menu {
    float: left;
    margin-top: 10px;
}

h1 {
    color: #FFF;
    text-align: center;
    font-family: Lato;
    text-transform: uppercase;
}

.toggle_menu {
    display: none;
    padding: 0;
    border-top: 0;
}

.toggle_menu:hover {
    padding: 0;
    border-top: 0;
}

.toggle_menu i {
    font-size: 40px;
    margin-top: 30px;
}

.container_menu nav {
    float: right;
    margin-top: 10px;
    margin-right: 40px;
    background-color: #2c3e50;
}

.container_menu nav li {
    float: left;
}

.container_menu nav a {
    font-family: Lato;
    font-weight: 700;
    text-transform: uppercase;
    padding: 10px;
    display: block;
    margin-top: 20px;
}

.container_menu span {
    color: #FFF;
    padding-top: 3px;
    padding-bottom: 3px;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    -webkit-transition: 0.3s;
}

.container_menu span:hover {
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 2px solid #FFF;
    -webkit-transition: 0.3s;
}

.container_menu span::before {
    content: attr(data-hover);
    position: absolute;
    color: #ecf0f1;
    opacity: 0;
    margin-top: 10px;
    -webkit-transition: 0.3s;
}

.container_menu span:hover::before {
    margin-top: 0;
    -webkit-transition: 0.3s;
    opacity: 1;
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
 
 .container_menu {
     width: 980px;
 }
 
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
 
 .container_menu {
     width: 700px;
 }
 
 
}

@media screen and (max-width: 768px) {
 
 .container_menu {
     width: 400px;
 }
 
 .container_menu nav {
     display: none;
     position: absolute;
     top: 90px;
     left: 0px;
     width: 100%;
     padding-bottom: 40px;
 }
 
 .container_menu nav li {
     float: none;
     list-style-type: none;
     padding-left: 20px;
 }
 
 .toggle_menu {
     display: block;
     float: right;
 }
 
}
/**/

body {
color: grey;
font-size: 17px;
font-family: Raleway , Arial ;
}

.responsive_immagine {
 max-width: 100%;
 height: auto;
}

.focus {
margin-left: 5px;
margin-right: 5px;
}

.tabella td
{
	border-bottom: thin;
	border-bottom-color: #666;
	border-bottom-width: 1px;
}
.tabella tr:nth-child(odd){ 
background-color: #F2F2F2;
}

.tabella th{ 
background-color: #00aeef;
	color: #FFF;
	padding: 2px;
}


/* per eventuali personalizzazione link
/* unvisited link 
a:link {
color: black;
text-decoration: none;
}

/* visited link 
a:visited {
color: grey;
}

/* mouse over link 
a:hover {
color: #00aeef;
text-decoration: underline;
}

/* selected link 
a:active {
color: grey;
}
fine eventuali personalizzazioni link*/


/*con questa classe blocco la testatina comprendente il logo*/
.logo{
float:left;
	/*display: block;*/
margin-left: auto;
margin-right: auto;
	margin-top: 2px;
}
.distanziatore
{
display: block;
	width: 100%;
	height: 2px;
margin-left: auto;
margin-right: auto;
}


/*con questa classe blocco l'immagine "lista" nella sezione vantaggi*/
.lista{
display: block;
margin-left: auto;
margin-right: auto;
}


/*inizio sezione bottoni call to action homepage*/
/*blocco div immagini bottone a inizio sito*/
#images{
text-align:center;
margin-top: 40px;
}


img.botton {
margin: 10px 10px;
display: inline-block;
margin-left: auto;
margin-right: auto;
}

img.botton { 
opacity: 1; filter: alpha(opacity=100); 
} 


img.botton:hover { 
opacity: 0.3; filter: alpha(opacity=30); 
}
/* fine sezione bottoni call to action */


/*blocco div immagini bottone prima del modulo contatti*/
.images{
text-align:center;
margin-top: 40px;
}


h2, h3,h4 {
/*color: #00aeef;*/
	color: #666;
text-align: center;
font-weight: lighter;
}


h1 {
font-size:35px;
text-align: center;
color: #00aeef;
}


h2 {
font-size:27px;
}


h3 {
font-size:24px;
}


h5 {
font-size:18px;
}


h4 {
font-size:18px;
}

p {
/*color: #00aeef;*/
	color: #666;

}


/*instruzioni per linea di separazione orizzontale*/
.linea {
margin-left: auto;
margin-right: auto;
width: 30%;
}


#wrapper{
width:100%;
height:auto;
background-color: white;
}
/*l'altezza dell'immagine inserita in testata è della
stessa altezza della sezione "wrapper.
per aumentare o diminuire la distanza tra l'h1
sotto l'immagine ed il primo h2 delle vaie pag. intervengo
sul wrapper - vedi QUERY MULTIMEDIALI*/



#container {
width: 100%;
height: auto;
/*max-width:1870px;*/
	/*max-width: 1950px;*/
/* se inserisco "auto", relativamente a "width" ed a "height" la larghezza e
l'altezza dell'area del contenuto viene decisa dal browser in automatico */
/*margin: 0.1em auto;*/ /*1.25em = 20px*/
/* primo valore: marg. sup. + inf.; secondo valore: marg. sin. + dest.(auto)
per far si che la pag. sia centrata orizzontalmente nel browser*/
/*padding: 0.625em 0.625em 0em 0.625em;*/
padding: 0;
	margin: 0;
	
}
/*il padding è assegnato in senso orario: alto, des, sin, basso */


img {
  max-width: 100%;
  height: auto;
}


/*anche le immagini sono "fluide" con il valore in %*/
img.displayed {
display: block;
margin-left: auto;
margin-right: auto;
}
/*con questa classe blocco l'immagine di testata*/


/*se voglio posizionare le immagini della pagina a sinistra
img.left {
max-width: 100%;    
float: left;
margin: 10px 10px 10px 10px;
}
*/
    

/*SPECIFICHE MENU' NAVIGAZIONE*/
.topnav {
  overflow: hidden;
  /*background-color: #EEEEEE;*/
  margin-bottom: 20px;
	margin-top:  20px;
}

.topnav a {
  float: left;
  display: block;
  /*color: grey;*/
	/*color: #666;*/
	color:#fff;
  text-align: center;
  padding: 14px 16px;
  margin-left:30px;
  text-decoration: none;
  font-size: 17px;
  font-weight: bold;
}

.topnav a:hover {
 /* background-color: #00aeef;*/
 /* color: black;*/
	color: #000;
	text-decoration: underline;
}

.topnav .icon {
  display: none;
}
/*FINE SPECIFICHE MENU' NAVIGAZIONE*/


/*contento giocare sulla percentuale per allargare o stringere
l'area del contenuto. Il "content" è il 90% del 100% che è il container*/
#content {
width: 99%;
/*margin: 0 auto;*/
	margin: 0;
padding-top:10px;
height: auto;
	
}

#testata {
width: 90%;
margin: 0 auto;
padding-top:2px;
	min-height: 100px;
/*height: auto;*/
	
}


/*contento giocare sulla percentuale per allargare o stringere
l'area del contenuto. l'"inner content" è IL 70% DEL 100% che è il container*/
#innerContent {
width: 70%;
padding-top:0px;
margin: 0 auto;
/*padding-top:10px;*/
height: auto;
text-align: justify;
}
#innerContent p {
color: #666;
}
/*fine per larghezza contenuto*/


/*sezione contatti inserisco immagine sfondo viola*/
#contatti {
background: url(https://agenzia-marketing.net/miosito/immagine-sfondo-modulo-contatti.jpg) ;
width:100%;
height: auto;
}


/*parametri per estendere il background div a tutto schermo
vedi: https://css-tricks.com/full-browser-width-bars/ */
.paragrafo1 {
margin: 0 -9999rem;
  /* add back negative margin value */
  padding: 0.25rem 9999rem;
  background: #dedede;
}


/*parametri per estendere il background div a tutto schermo*/
.paragrafo3 {
margin: 0 -9999rem;
  /* add back negative margin value */
  padding: 0.25rem 9999rem;
  background: #dedede;
}



/*Sezione inizio form contatti*/
.contenitore {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}


/*FORM RICERCA PROPDOTTI*/
#ricerca input[type="text"],
#ricerca button[type="submit"] {
  font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}
#ricerca {
  /*background: #F2F2F2;*/
  padding: 5px;
  margin: 5px 0;
  /*box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);*/
}
#ricerca h3{
  font-size: 16px;
	text-align: left;
	
}
#ricerca fieldset {
  border: medium none !important;
  margin: 0 0 2px;
  min-width: 98%;
  padding: 5;
  width: 98%;
}
#ricerca input[type="text"]
{
  width: 92%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 2px;
  padding: 5px;
}
#ricerca label{
	text-align: left;
}
#ricerca button[type="submit"] {
  cursor: pointer;
  width: 100%;
  border: none;
  background: #00aeef;
  color: #FFF;
  margin: 0 0 2px;
  padding: 5px;
  font-size: 15px;
}

#ricerca button[type="submit"]:hover {
  background: #43A047;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}


/**/

#contact input[type="text"],
#contact input[type="password"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
  font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}

#contact {
  background: #F9F9F9;
  padding: 25px;
  margin: 20px 0;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

#contact h3 {
  display: block;
  font-size: 30px;
  font-weight: 300;
  margin-bottom: 10px;
}

#contact h4 {
  margin: 5px 0 15px;
  display: block;
  font-size: 13px;
  font-weight: 400;
}

fieldset {
  border: medium none !important;
  margin: 0 0 10px;
  min-width: 90%;
  padding: 0;
  width: 90%;
}

#contact input[type="text"],
#contact input[type="password"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
  width: 100%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;
}

#contact select {
  width: 100%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;
}

#contact input[type="text"]:hover,
#contact input[type="password"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #aaa;
}

#contact textarea {
  height: 100px;
  max-width: 100%;
  resize: none;
}

#contact button[type="submit"] {
  cursor: pointer;
  width: 100%;
  border: none;
  background: #00aeef;
  color: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
}

#contact button[type="submit"]:hover {
  background: #43A047;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.copyright {
  text-align: center;
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #aaa;
}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}

/*fine sezione form contatti*/

/*sezione pagina prodotti*/
#pagina_prodotti 
{
	width: 100%;
	height: auto;
}
#pagina_prodotti .container
{
	width: 100%;
	height: auto;
}

#pagina_prodotti .prodotti
{
	float: left;
	width: 80%;
	height: auto;

}
#pagina_prodotti .barra
{
	float: left;
	width: 20%;
	height: auto;
	list-style: url(img/puntatore.jpg);
	
}

#pagina_prodotti .elenco
{
	
	/*list-style: url(img/puntatore.jpg);*/
	list-style: url(img/puntatore.jpg);
	padding: 5px;
	
	
}

#pagina_prodotti .elenco ul
{
	
	padding-left: 5px;

	
}


#pagina_prodotti .elenco li
{
	
	
	padding: 5px;
	margin-left: 12px;
	

	
}


/**/


/*aggiungiamo una sezione servizi, sotto contenuto principale
all'interno della quale inseriamo icone servizi*/
#vetrina_scorrevole {
width: 100%;
height:auto;
text-align: center;
color: grey;
margin: 0 -9999rem;
/* add back negative margin value */
padding: 0rem 9999rem;
/*background-color: #EEEEEE;*/
/*aggiungiamo un margine inferiore per creare un po'
di spazio dal paragrafo successivo*/
margin-bottom: 50px;
}
#brand {
width: 100%;
height:auto;
text-align: center;
color: grey;
margin: 0 -9999rem;
/* add back negative margin value */
padding: 0rem 9999rem;
/*background-color: #EEEEEE;*/
/*aggiungiamo un margine inferiore per creare un po'
di spazio dal paragrafo successivo*/
margin-bottom: 2px;
	background-color: #EEEEEE;
}
#servizi {
width: 100%;
height:auto;
text-align: center;
color: grey;
margin: 0 -9999rem;
/* add back negative margin value */
padding: 0.25rem 9999rem;
background-color: #EEEEEE;
/*aggiungiamo un margine inferiore per creare un po'
di spazio dal paragrafo successivo*/
margin-bottom: 50px;
}
#servizi p{
	color: #666;
}


/*parametri per estendere il background div a tutto schermo*/
.icone_servizi {
width:25%;
float: left;
padding-bottom: 20px;
}


/*IMMAGINI SERVIZI*/
img.servizi {
height: 150px;
width: 150px;
margin: 10px 10px;
display: inline-block;
margin-left: auto;
margin-right: auto;
}

img.servizi { 
opacity: 1; filter: alpha(opacity=100); 
} 

img.servizi:hover { 
opacity: 0.3; filter: alpha(opacity=30); 
}
/* FINE SPECIFICHE IMMAGINE SERVIZI */



/*paragrafo testo servizi*/
.paragrafo {
margin:5px;
}
/*fine paragrafo testo servizi*/



/*bottone servizi*/
.btn {
  background: white;
  background-image: -webkit-linear-gradient(top, #00aeef, #157fbd);
  background-image: -moz-linear-gradient(top, #00aeef, #157fbd);
  background-image: -ms-linear-gradient(top, #00aeef, #157fbd);
  background-image: -o-linear-gradient(top, #00aeef, #157fbd);
  background-image: linear-gradient(to bottom, #00aeef, #157fbd);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  font-family: raleway;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
/*fine bottone servizi*/



/*inseriamo piccole sezioni rispettivamente a sinistra e
a destra dell'immagine vantaggi*/
#vantaggi {
width: 100%;
height:auto;
text-align: center;
/*aggiungiamo un margine inferiore per creare un po'
di spazio dal paragrafo successivo*/
margin-bottom: 50px;
}

.vantaggi {
width:33%;
float: left;	
padding-bottom: 10px; 
}


/*aggiungiamo due sezioni marketing strategico e operativo, sotto contenuto
principale all'interno della quale inseriamo icone servizi*/

#focus_servizio_1 {
width: 100%;
height:auto;
margin: 0 -9999rem;
/* add back negative margin value */
padding: 0.25rem 9999rem;
/*aggiungiamo un margine inferiore per creare un po'
di spazio dal paragrafo successivo*/
margin-bottom: 50px;
}
#focus_servizio_1 p{
	color: #666;
}

/*parametri per estendere il background div a tutto schermo*/
.focus_servizio_1 {
width:47%;
margin-right:1px;
margin-left:2px;
float: left;	
padding-bottom: 20px;
}

.img_strategico {
width:50%;
float: right;	
padding-bottom: 20px; 
}

#focus_servizio_3 {
width: 100%;
height:auto;
margin: 0 -9999rem;
/* add back negative margin value */
padding: 0.25rem 9999rem;
/*aggiungiamo un margine inferiore per creare un po'
di spazio dal paragrafo successivo*/
margin-bottom: 50px;
}
#focus_servizio_3 p{
	color: #666;
}

/*parametri per estendere il background div a tutto schermo*/
.focus_servizio_3 {
width:47%;
margin-right:1px;
margin-left:2px;
float: left;	
padding-bottom: 20px;
}

.img_strategico3 {
width:50%;
float: right;	
padding-bottom: 20px; 
}


#focus_servizio_2 {
width: 100%;
height:auto;
margin: 0 -9999rem;
/* add back negative margin value */
padding: 0.25rem 9999rem;
/*aggiungiamo un margine inferiore per creare un po'
di spazio dal paragrafo successivo*/
margin-bottom: 50px;
}
#focus_servizio_2 p{
	color: #666;
}

/*parametri per estendere il background div a tutto schermo*/
.focus_servizio_2 {
width:47%;
float: right;	
padding-bottom: 20px; 
margin-right:1px;
margin-left:1px;
}

.img_operativo {
width:50%;
float: left;	
padding-bottom: 20px; 
}




/*aggiungiamo una sezione risorse, sotto contenuto principale*/
#risorse {
width: 100%;
height:auto;
/*background-color: #EEEEEE;*/
background-color: #666;
text-align: center;
color: grey;
font-size: small;
}

#risorse h3,p,a {
	color: #F3F3F3;
	text-decoration: none; 
}
#risorse a:hover {
	color: #F3F3F3;
	text-decoration: underline; 
}



/*rendiamo i "3 box" centrati con una istruzione float
a sinistra e massimizzando le areee con 33%*/

section {
width:33%;
float: left;	
padding-bottom: 10px; 
}




/*ricoloriamo h1 della sezione "risorse"*/
h2#risorse_marketing {
color: #00aeef;
font-size:30px;
text-align:center;
background-color: white ;
width:100%;
text-align: center;
}



/*ricoloriamo h3 della sezione "informazioni"*/
h3#informazioni {
color: #00aeef;
font-size:25px;
text-align:center;
background-color: #F0F0F0 ;
width:100%;
text-align: center;
}



/*se vogliamo aggiungere aggiungiamo anche
una nuova sezione "footer widget" ...

#footer-widget{
width:100%;
height:auto;
background-color: #FFFF99;
color: grey;
text-align: center;
font-size: small;
}
.......................................*/



#footer {
text-align: center;
color:white;
clear: both;
margin-top: 1.25em;
}
/*la propriet� clear indica che il footer non deve "fluire" intorno
all'elemento flottante ma essere visualizzato dopo l'elemento*/



.prova2{
font-size:x-small;
}



/*footer*/

#footer-wrapper{
width:100%;
height:150px;
/*background-color:#00aeef;*/
background-color:#333;
}

/*BLOCCO PRODOTTI SLIDER IN VETRINA*/

.prodotto_slider_container{
	width: 100%;
	max-width: 250px;
	height: auto;
	max-height: 280px;
}
.prodotto_slider_img{
	width: 100%;
	max-width: 250px;
	height: auto;
	max-height: 200px;
}
.prodotto_slider_text{
	width: 100%;
	max-width: 250px;
	height: auto;
	max-height: 50px;
	color: #666;
}



/**/

/*BLOCCO PAGINA PRODOTTI*/
#prodotti {
width: 100%;
height:auto;
margin: 0 -9999rem;
/* add back negative margin value */
padding: 0.25rem 9999rem;
/*aggiungiamo un margine inferiore per creare un po'
di spazio dal paragrafo successivo*/
margin-bottom: 50px;
}
.prodotti_container {
width:100%;
margin-right:1px;
margin-left:2px;
float: left;	
padding-bottom: 20px;
}

.prodotti_paginazione {
width:100%;
margin-right:1px;
margin-left:2px;
float: left;	
padding-bottom: 20px;
}

.barra_laterale {
width:15%;
float: left;	
padding-bottom: 20px; 
	
}


.barra_laterale h5 {
text-align: left;
	margin-top: 0;
	margin-bottom: 0px;
}

.prodotto_container{
	float: left;
	width: 100%;
	max-width: 230px;
	height: auto;
	height: 280px;
	border: solid;
	border-color: #F2F2F2;
	margin: 5px;
	
}

.prodotto_container_pulsante{
	  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  visibility: hidden;
  opacity: 0;
font-size: 50px;
Text-align:center;
 
  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}


.prodotto_container:hover  {
	border-color: #000;
	opacity: 0.3;
	

	
}



.prodotto_img{
	
	width: 230px;
	height: auto;
	height: 200px;
	text-align: center;
	
	
}
.prodotto_text{
	width: 100%;
	max-width: 230px;
	/*height: auto;*/
	height: 40px;
	color: #666;
	text-align: center;
	font-size: 14px;
}
.prodotto_prezzo{
	width: 100%;
	max-width: 230px;
	height: auto;
	max-height: 40px;
	color: #333;
	text-align: center;
	font-size: 24px;
}


/**/

/*PAGINAZIONE*/
.box_numerico_sel
{
	text-align: center;
}
.box_numerico_sel
{
	float: left;
	width: 20px;
	height: 20px;
	margin: 5px;
	background-color: #999;
	border:solid;
	border-color: #333;
	border-size: 1px;
	text-align: center;
	color: #FFF;
	
}
.box_numerico
{
	float: left;
	width: 20px;
	height: 20px;
	margin: 5px;
	border:solid;
	background-color: #999;
	border-color: #999;
	text-align: center;
}
/**/

/*DISPONIBILITA OPRODOTTI*/
.widget_comando_riferimento{float:left;   width: 100%; height: 20px; line-height: 20px; text-align:center; border: solid; border-color:#F2F2F2;}
.widget_comando_dispo{float:left;   width: 100%; height: 20px; line-height: 20px; text-align:center; background-color: #328903; color: #FFF; }
.widget_comando_ndispo{float:left;   width: 100%; height: 20px; line-height: 20px; color: #FFF; text-align:center; background-color: #EF1F23; }
.widget_comando_ldispo{float:left;   width: 100%; height: 20px; line-height: 20px; color: #FFF; text-align:center; background-color: #ED7E14; }
/**/

.intesta_logo
{
	/*border:solid;*/
	float:left;
	width:30%;
	
}
.intesta_menu
{
	/*border:solid;*/
	float:left;
	width:68%;
	;
}

  .descri_header_sx{ float:left; width:68%; margin-top:5px; }
  .descri_header_dx{ float:left; width:30%; margin-top:5px;  }

/*specifiche per menù responsive*/

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  
  .intesta_logo{border:solid; float:left; width:30%; }
  .intesta_menu{border:solid; float:left; width:60%; }
  .descri_header_sx{display:none; }
  .descri_header_dx{display:none; }
  
  header {
   position:absolute;
   top:0;
   bottom:auto;
   left:0;
   right:0;
   margin:auto;
   width:100%;
   height:auto;
   max-height:30px;
   z-index: 999999;
}
  
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

}

/*specifiche per menù responsive*/


/*Da qui in poi sfrutteremo le QUERY MULTIMEDIALI per per
definire ciascun breakpoint della pagina ... ovvero ciascuna
larghezza per la quale al contenuto gioverebbe un aggiustamento*/

/*ottimizzazione "budget Android" - 240*/
@media only screen and (max-width: 240px){


body {
color:GREY;
font-size: 80%;
font-family:  Raleway, Arial;
}



h1 {
font-size:16px;
}


h2 {
font-size:15px;
color: #009bcd;
}


h3 {
font-size:14px;
color: #009bcd;
}



#wrapper{
width:100%;
height:auto;
background-color: white;
}


#content {
width: 90%;
margin: 0 auto;
padding-top:10px;
height: auto;
}


#innerContent {
float: none;
width: 900%;
padding-top:10px;
text-align: justify;
}



#sidebar {
display: none;
}


/*stili per la navigazione*/
/*
nav {
width:95%;
padding: 5px;
position: absolute;
top: 0px;
right: 0px;
}


nav a {
font-size:50%;
color: #009cda;
padding-right:10px;
padding-left:2px;
}
*/

/*footer*/
#footer-wrapper{
width:100%;
height:120px;
background-color: #009cda;
}

/*per centrare i 2 box sopra il footer nei dispositivi più piccoli*/
section {
width:100%;
float: left;
padding-bottom: 10px; 
}


/*posiziono le immagini della pagina al centro per i dispositivi più piccoli*/
img.left {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/*le icone sercìvizi si posizionano una sopra l'altra sui dispositivi più piccoli*/
.servizi {
width:100%;
padding-bottom: 10px; 
}

/*i blocchi focus servizi 1/2 si posizionano una sopra l'altra sui dispositivi più piccoli*/
.marketing_strategico {
width:100%;
padding-bottom: 10px; 
}

.marketing_operativo {
width:100%;	
padding-bottom: 10px; 
}

.img_strategico {
width:100%;
float: left;	
padding-bottom: 10px; 
}

.img_operativo {
width:100%;
	
padding-bottom: 10px; 
}

/*i blocchi vantaggi e servizi si posizionano una sopra l'altra sui dispositivi più piccoli*/
.icone_servizi {
width:100%;	
padding-bottom: 10px; 
}

.vantaggi {
width:100%;	
padding-bottom: 10px; 
}

/*elimino immagine "lista" sui dispositivi più piccoli*/
.lista {
display:none
}
}







/*ottimizzazione per iPhone 5 portrait � width: 320px*/
@media only screen  and (max-width: 320px) {

/*con questa classe blocco la testatino comprendente il logo*/
.logo{
display: block;
margin-left: auto;
margin-right: auto;
}

h1 {
font-size:18px;
}

h2 {
font-size:18px;
color: #009bcd;
}


h3 {
font-size:16px;
color: #009bcd;
}


#wrapper{
width:100%;
height:auto;
background-color: white;
}


#content {
width: 90%;
margin: 0 auto;
padding-top:30px;
height: auto;
}


#innerContent {
float: none;
width: 90%;
padding-top:10px;
text-align: justify;
}


#sidebar {
display: none;
}


/*stili per la navigazione*/

nav {
width:95%;
padding: 5px;
position: absolute;
top: 2px;
right: 0px;
}

nav a {
font-size:40%;
color: #009cda;
padding-right:0px;
padding-left: 15px;
}


/*footer*/

#footer-wrapper{
width:100%;
height:120px;
background-color: #009cda;
}


/*per centrare i 2 box sopra il footer nei dispositivi più piccoli*/
section {
width:100%;
float: left;
padding-bottom: 10px; 
}


/*posiziono le immagini della pagina al centro per i dispositivi più piccoli*/
img.left {
  display: block;
  margin-left: auto;
  margin-right: auto;
}



section {
width:100%;
float: left;
padding-bottom: 10px; 
}


/*le icone servizi si posizionano una sopra l'altra sui dispositivi più piccoli*/
.servizi {
width:100%;	
padding-bottom: 10px; 
}
	



/*i blocchi focus servizi 1/2 si posizionano una sopra l'altra sui dispositivi più piccoli*/
.focus_servizio_1 {
width:100%;
padding-bottom: 10px; 
}

.focus_servizio_2 {
width:100%;	
padding-bottom: 10px; 
}

.img_strategico {
width:100%;
float: left;	
padding-bottom: 10px; 
}

.img_operativo {
width:100%;
padding-bottom: 10px; 
}

/*i blocchi vantaggi e servizi si posizionano una sopra l'altra sui dispositivi più piccoli*/
.icone_servizi {
width:100%;	
padding-bottom: 10px; 
}

.vantaggi {
width:100%;	
padding-bottom: 10px; 
}

/*elimino immagine "lista" sui dispositivi più piccoli*/
.lista {
display:none
}
}



/*ottimizzazione per iPhone (landscape)*/
@media only screen  and (min-width: 321px) and (max-width: 479px) {

/*con questa classe blocco la testatino comprendente il logo*/
.logo{
display: block;
margin-left: auto;
margin-right: auto;
}

h1 {
font-size:18px;
}


h2 {
font-size:16px;
color: #009bcd;
}


h3 {
font-size:16px;
color: #009bcd;
}



#wrapper{
width:100%;
height:auto;
background-color: white;
}



#content {
width: 90%;
margin: 0 auto;
padding-top:10px;
height: auto;
}


#innerContent {
float: none;
width: 90%;
padding-top:10px;
text-align: justify;
}


#sidebar {
display: none;
}


/*stili per la navigazione*/
nav {
width:50%;
padding: 5px;
position: absolute;
top: 10px;
right: 0px;
}


nav a {
font-size:50%;
color: #009cda;
padding-right:10px;
padding-left:2px;
}



/*footer*/
#footer-wrapper{
width:100%;
height:auto;
background-color: #009cda;
}


/*per centrare i 2 box sopra il footer nei dispositivi più piccoli*/
section {
width:100%;
float: left;
padding-bottom: 10px; 
}

/*posiziono le immagini della pagina al centro per i dispositivi più piccoli*/
img.left {
  display: block;
  margin-left: auto;
  margin-right: auto;
}



/*le icone sercìvizi si posizionano una sopra l'altra sui dispositivi più piccoli*/
.servizi {
width:100%;
padding-bottom: 10px; 
}

/*i blocchi focus servizio 1 e focus servizio 2 si posizionano una sopra l'altra sui dispositivi più piccoli*/
.focus_servizio_1 {
width:100%;
padding-bottom: 10px; 
}

.focus_servizio_2 {
width:100%;	
padding-bottom: 10px; 
}

.img_strategico {
width:100%;
float: left;	
padding-bottom: 10px; 
}

.img_operativo {
width:100%;
padding-bottom: 10px; 
}

/*i blocchi vantaggi e servizi si posizionano una sopra l'altra sui dispositivi più piccoli*/
.icone_servizi {
width:100%;	
padding-bottom: 10px; 
}

.vantaggi {
width:100%;	
padding-bottom: 10px; 
}

/*elimino immagine "lista" sui dispositivi più piccoli*/
.lista {
display:none
}
}





/*ottimizzazione iPhone 6-8 Plump landscape · width: 736px*/
@media only screen  and (min-width: 480px) and (max-width: 736px) {

h1 {
font-size:22px;
}


h2 {
font-size:20px;
color: #009bcd;
}


h3 {
font-size:16px;
color: #009bcd;
}


#wrapper{
width:100%;
height:auto;
background-color: white;
}


#content {
width: 90%;
margin: 0 auto;
padding-top:10px;
height: auto;
}

#innerContent {
float: none;
width: 90%;
padding-top:10px;
text-align: justify;
}


#sidebar {
display: none;
}


/*stili per la navigazione*/
nav {
width: 40%;
padding: 5px;
background-color:white;
position: absolute;
top: 10px;
right: 50px;
}


nav a {
font-size:80%;
color: #00aeef;
padding-right:0px;
padding-left:30px;
}


/*footer*/
#footer-wrapper{
width:100%;
height:auto;
background-color: #009cda;
}

section {
width:100%;
float: left;
padding-bottom: 10px; 
}

/*posiziono le immagini della pagina al centro per i dispositivi più piccoli*/
img.left {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*le icone sercvizi si posizionano una sopra l'altra sui dispositivi più
piccoli*/
.servizi {
width:100%;
padding-bottom: 10px; 
}




/*i blocchi focus servizi 1/2 si posizionano una sopra l'altra sui dispositivi più piccoli*/
.focus_servizio_1 {
width:100%;
padding-bottom: 10px; 
}


.focus_servizio_2 {
width:100%;	
padding-bottom: 10px; 
}


.img_strategico {
width:100%;
float: left;	
padding-bottom: 10px; 
}


.img_operativo {
width:100%;
padding-bottom: 10px; 
}


/*i blocchi vantaggi e servizi si posizionano una sopra l'altra sui dispositivi più piccoli*/
.icone_servizi {
width:100%;	
padding-bottom: 10px; 
}


.vantaggi {
width:100%;	
padding-bottom: 10px; 
}
}




/*iPad portrait · width: 768px e iPad landscape · width: 1024px*/
@media (min-width: 768px) and (max-width: 1024px) {
#wrapper {
width:100%;
height:auto;
background-color: white;
}

/*contento
giocare sulla percentuale
per allargare o stringere
l'area del contenuto*/
#content {
width: 90%;
margin: 0 auto;
padding-top:10px;
height: auto;
}


/*ALLARGHIAMO LA PERCENTUALE DI SPAZIO DEDICATA AL CONTENUTO*/
#innerContent {
width: 100%;
padding-top:10px;
margin: 0 auto;
padding-top:10px;
height: auto;
text-align: justify;
}
/*fine nuove specifiche per contenuto*/


/*paragrafo testo servizi*/
.paragrafo {
margin: 5px;
height: 120px;
}
/*fine paragrafo testo servizi*/

/*stili per la navigazione*/
nav {
width: 30%;
padding: 5px;
background-color:white;
position: absolute;
top: 10px;
right: 50px;
}


nav a {
font-size:90%;
color: #00aeef;
padding-right:0px;
padding-left:30px;
}
}

@media (min-width: 1024px) and (max-width: 1366px) {
	h5 {
font-size:14px;
}
	.icone_servizi p
	{
		font-size: 14px;
	}
	
	.topnav a {
  
  padding: 3px 4px;
		font-size: 14px;
 
}
	
}