*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,
blockquote,pre,hr,a,code,em,img,strong,dl,dt,dd,ol,ul,
li,fieldset,form,label,legend,table,caption,tbody,tfoot,
thead,tr,th,td,article,aside,canvas,figcaption,figure,footer,
header,hgroup,menu,nav,section,time,audio,video
{
margin:0;padding:0
}
/*
@media all and (min-width:600px)
{
body:after{display:none;content:'tablet-desk'}
}
*/
/*------------------------------------*\
  $GRIGLIA 
\*------------------------------------*/

/* .gc = grid container (racchiude gli elementi che compongono la griglia) */
.gc{margin-left:0px; padding:0px 0 0px 0}
.gc--rev .grid{float:right}
.gc>.gc{margin-left:0}
.grid{float:left;padding:10px;position:relative}
/*.grid{float:left;padding-left:25px;position:relative} */
/*------------------------------------*\
  $LARGHEZZE
\*------------------------------------*/
.span-1{width:100%}
.span-1-2,.span-2-4,.span-3-6,.span-4-8,.span-5-10,.span-6-12{width:50%}
.span-1-3,.span-2-6,.span-4-12{width:33.333%}
.span-2-3,.span-4-6,.span-8-12{width:66.666%}
.span-1-4,.span-2-8,.span-3-12{width:25%}
.span-3-4,.span-6-8,.span-9-12{width:75%}
.span-1-5,.span-2-10{width:20%}
.span-2-5,.span-4-10{width:40%}
.span-3-5,.span-6-10{width:60%}
.span-4-5,.span-8-10{width:80%}
.span-1-6,.span-2-12{width:16.666%}
.span-5-6,.span-10-12{width:83.333%}
.span-1-8{width:12.5%}
.span-3-8{width:37.5%}
.span-5-8{width:62.5%}
.span-7-8{width:87.5%}
.span-1-10{width:10%}
.span-3-10{width:30%}
.span-7-10{width:70%}
.span-9-10{width:90%}
.span-1-12{width:8.333%}
.span-5-12{width:41.666%}
.span-7-12{width:58.333%}
.span-11-12{width:91.666%}
/*------------------------------------*\
  $BREAKPOINT E MEDIA QUERY
\*------------------------------------*/
@media only screen and (min-width:480px) and (max-width:600px)
{
.mobile-1{width:100%}
.mobile-1-2,.mobile-2-4,.mobile-3-6,.mobile-4-8,.mobile-5-10,.mobile-6-12{width:50%}
.mobile-1-3,.mobile-2-6,.mobile-4-12{width:33.333%}
.mobile-2-3,.mobile-4-6,.mobile-8-12{width:66.666%}
.mobile-1-4,.mobile-2-8,.mobile-3-12{width:25%}
.mobile-3-4,.mobile-6-8,.mobile-9-12{width:75%}
.mobile-1-5,.mobile-2-12{width:20%}
.mobile-2-5,.mobile-4-10{width:40%}
.mobile-3-5,.mobile-6-10{width:60%}
.mobile-4-5,.mobile-8-10{width:80%}
.mobile-1-6,.mobile-2-12{width:16.666%}
.mobile-5-6,.mobile-10-12{width:83.333%}
.mobile-1-8{width:12.5%}
.mobile-3-8{width:37.5%}
.mobile-5-8{width:62.5%}
.mobile-7-8{width:87.5%}
.mobile-1-10{width:10%}
.mobile-3-10{width:30%}
.mobile-7-10{width:70%}
.mobile-9-10{width:90%}
.mobile-1-12{width:8.333%}
.mobile-5-12{width:41.666%}
.mobile-7-12{width:58.333%}
.mobile-11-12{width:91.666%}
}
@media only screen and (min-width:601px) and (max-width:1023px)
{
.tablet-1{width:100%}
.tablet-1-2,.tablet-2-4,.tablet-3-6,.tablet-4-8,.tablet-5-10,.tablet-6-12{width:50%}
.tablet-1-3,.tablet-2-6,.tablet-4-12{width:33.333%}
.tablet-2-3,.tablet-4-6,.tablet-8-12{width:66.666%}
.tablet-1-4,.tablet-2-8,.tablet-3-12{width:25%}
.tablet-3-4,.tablet-6-8,.tablet-9-12{width:75%}
.tablet-1-5,.tablet-2-12{width:20%}
.tablet-2-5,.tablet-4-10{width:40%}
.tablet-3-5,.tablet-6-10{width:60%}
.tablet-4-5,.tablet-8-10{width:80%}
.tablet-1-6,.tablet-2-12{width:16.666%}
.tablet-5-6,.tablet-10-12{width:83.333%}
.tablet-1-8{width:12.5%}
.tablet-3-8{width:37.5%}
.tablet-5-8{width:62.5%}
.tablet-7-8{width:87.5%}
.tablet-1-10{width:10%}
.tablet-3-10{width:30%}
.tablet-7-10{width:70%}
.tablet-9-10{width:90%}
.tablet-1-12{width:8.333%}
.tablet-5-12{width:41.666%}
.tablet-7-12{width:58.333%}
.tablet-11-12{width:91.666%}
}
@media only screen and (min-width:1024px)
{
.desktop-1{width:100%}
.desktop-1-2,.desktop-2-4,.desktop-3-6,.desktop-4-8,.desktop-5-10,.desktop-6-12{width:50%}
.desktop-1-3,.desktop-2-6,.desktop-4-12{width:33.333%}
.desktop-2-3,.desktop-4-6,.desktop-8-12{width:66.666%}
.desktop-1-4,.desktop-2-8,.desktop-3-12{width:25%}
.desktop-3-4,.desktop-6-8,.desktop-9-12{width:75%}
.desktop-1-5,.desktop-2-12{width:20%}
.desktop-2-5,.desktop-4-10{width:40%}
.desktop-3-5,.desktop-6-10{width:60%}
.desktop-4-5,.desktop-8-10{width:80%}
.desktop-1-6,.desktop-2-12{width:16.666%}
.desktop-5-6,.desktop-10-12{width:83.333%}
.desktop-1-8{width:12.5%}
.desktop-3-8{width:37.5%}
.desktop-5-8{width:62.5%}
.desktop-7-8{width:87.5%}
.desktop-1-10{width:10%}
.desktop-3-10{width:30%}
.desktop-7-10{width:70%}
.desktop-9-10{width:90%}
.desktop-1-12{width:8.333%}
.desktop-5-12{width:41.666%}
.desktop-7-12{width:58.333%}
.desktop-11-12{width:91.666%}
}
/*------------------------------------*\
  $CLEARFIX
\*------------------------------------*/
.cf,.gc,.nav,.media{zoom:1}
.cf:before,.gc:before,.nav:before,.media:before,.cf:after,.gc:after,.nav:after,.media:after{content:" ";display:table}
.cf:after,.gc:after,.nav:after,.media:after{clear:both}
/*------------------------------------
 Stili default del documento.
------------------------------------*/
html {
  font-size: 100%; 
  overflow-y: scroll; 
  -webkit-text-size-adjust: 100%; 
  -ms-text-size-adjust: 100%;
}
body
{
margin: 0px;
position:relative;
background: #002244;
color:#000;
font-weight:300;
font-size:100%;
font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
line-height:1.4;
border-top: 0px solid #6688bb;
}

a{color:#282828; text-decoration: none; background: none;}
a:hover{color:#6688bb;}
a:focus{outline:0;color:#6688bb}

p {
  font-size: 0.875em;
  margin-bottom:17px;
  font-size:16px;
  line-height:1.4;
  margin: 0 0 0.35em 0;
}

ul {
 margin: 0;
 padding: 0;
 list-style: none; /* toglie i punti tra una voce e l'altra del menu */
}

h1,h2,h3,h4,h5,h6 {
  margin-top:10px;
  margin-bottom:10px;
  line-height:1.1;
  text-rendering:optimizeLegibility
}

h1{font-size:36px; font-weight: 600;}
h2{font-size:28px; font-weight: 600;}
h3{font-size:24px; font-weight: 600;}
h4{font-size:20px}
h5{font-size:18px}
h6{font-size:16px}

hr {
  height: 2px;
  border: 1px solid #002244;
}
/*------------------------------------------------------------------------------------------------

 Blocco dei contenuti, si parte con il mobile (mobile first)

--------------------------------------------------------------------------------------------------*/
.cella-01 {
    padding: 0px;      /* distanza dal proprio bordo verso l'interno: alto, destro, basso, sinistro */   
}
.cella-02 {
    float:left;
    position:relative;
    background: none;
    padding:0px 5px 0px 3%;  /* distanza dal proprio bordo verso l'interno: alto, destro, basso, sinistro */
}
.cella-03 {
    padding: 0px;      /* distanza dal proprio bordo verso l'interno: alto, destro, basso, sinistro */  
    float:none;
}

/* class cellatitolo che contiene le intestazioni delle pagine ----- */
.cellatitolo {
    min-height: 50px;
    background: rgb(220, 220, 220);
    padding: 2%;
    box-shadow: 5px 5px 10px 2px #333333;
   -webkit-box-shadow: 5px 5px 10px 2px #333333;
   -moz-box-shadow: 5px 5px 10px 2px #333333;
    border-radius:20px;
   -moz-border-radius:20px;
   -webkit-border-radius:20px;
}
/* Questo class serve per creare uno spazio di alcuni pixel tra una riga e l'altre */
.cellavuota {
    min-height: 10px;
    background: none;
    padding: 5px;
    /*border: 1px solid #000; */
}
/* class mappasito che si trova in fondo poco sopra del piede */
.mappasito {
    display: none;              /* negli smartphone questa classe non è visibile */
    position:relative;
    margin: 0px auto 0px auto;  /* distanza del bordo dai lati verso l'esterno: alto, destro, basso, sinistro */
    padding: 0px 0px 0px 0px;   /* distanza dal proprio bordo verso l'interno: alto, destro, basso, sinistro */
    max-width:1040px; 
    width:100%;
    min-height: 18px;
    background: none;
}
.social {
    display: block;              
    position:relative;
    margin: 0px auto;  /* distanza del bordo dai lati verso l'esterno: alto, destro, basso, sinistro */
    padding: 0 0 0 20px;   /* distanza dal proprio bordo verso l'interno: alto, destro, basso, sinistro */
    max-width:1040px; 
    /*width:100%; */
    /*min-height: 18px;  */
}
.piede {
  margin: 10px auto 0px auto;
  padding: 10px 0px 0px 0px;        /* distanza dal proprio bordo verso l'interno: alto, destro, basso, sinistro */
  min-height: 80px;
  background: #002244;
  border-top: 2px solid #6688bb; 
}

.titolo1 {
  font-size: 0.9em;
  color:#002244;
  line-height:2;
  margin: 0px 0px 10px 0px;  /* distanza dal bordo: alto, destro, basso, sinistro */
  text-align: center;
  font-weight:bold;
}
.titolo1 a        {color: #002244;}
.titolo1 a:hover  {color: #6688bb;}
.titolo1 a:focus  {outline:0;color: #6688bb}

.titolo2 {
  font-size: 0.8em;
  color:#002244;
  line-height:2;
  margin: 0px 0px 5px 0px;  /* distanza dal bordo: alto, destro, basso, sinistro */
  text-align: left;
  font-weight:bold;
}

/* testo1 si usa per tutti i testi del sito -------------- */
.testo1 {
  font-size: 0.75em;
  color: #000000;
  line-height:1.5;
  margin: 5px 0px 10px 0px;  /* distanza dal bordo: alto, destro, basso, sinistro */
  text-align:justify;
}

/* testo2 si usa per i testi del menu piede del sito --------- */
.testo2 {
  font-size: 0.7em;
  color: #aaaaaa;
  margin: 0px 0px 0px 2px; /* distanza dal bordo: alto, destro, basso, sinistro */
  text-align:left;
}

.testo2 a {
  color: #aaaaaa;
}
/* testo3 si usa per oggetti da allineare a destra ----- */
.testo3 {
  font-size: 0.8em;
  line-height:1.5;
  margin: 0px;
  text-align:right;
}
/* textpiede si usa per il testo del nome e indirizzo del piede ---- */
.textpiede {
  font-size: 0.65em;
  color:#aaaaaa;
  text-align:center;
  line-height:1.2;
  margin: 0px auto 0px auto;   /* distanza dal bordo: alto, destro, basso, sinistro */
  padding: 0px 0px 10px 0px;   /* distanza dal proprio bordo verso l'interno: alto, destro, basso, sinistro */
  background: #001d3b;
  border-top: none;
}

/* flex e' la classe dell'immagine che si trova dentro la cella. 100% significa che l'immagine occupa
   tutta la larghezza della cella e l'immagine verra' rimpicciolita insieme con la finestra del browser*/
.flex {max-width: 100%}

/* div wrapper contenitore del blocco dei contenuti: fissa la larghezza massima */
#wrapper{
    position:relative;
    margin:0px;
    padding:5px;
    max-width:1040px;
    width:100%;
    background:#dddddd;
    border: solid 2px #002244;
}.lt-ie9 
 #wrapper{border:1px solid #999}


/* ---------------------------------------------------------------------------------------------------

IPAD PORTRAIT - Le dichiarazioni che seguono si riferiscono alla visualizzazione nei tablet e desktop 

------------------------------------------------------------------------------------------------------ */

@media only screen and (min-width:600px)
{

body{
background-image: url(images/sfondobody.jpg);
padding: 0px 2px 0px 2px;
}

#wrapper{
   margin: 0px auto 0px auto; /* -45px e' la distanza dal bordo superiore: si sovrappone, auto significa che e' centrato rispetto lo schermo */
   padding:10px;
   background: url(images/sfondohome.jpg);
   box-shadow: 0px 0px 20px 5px #333333 inset;  /* ombra: orizzontale, verticale, spessore, sfumatura */
   -webkit-box-shadow: 0px 0px 20px 2px #333333 inset;
   -moz-box-shadow: 0px 0px 20px 2px #333333 inset;
   border-radius: 10px;
   -webkit-box-radius: 10px;
   -moz-border-radius: 10px;
   }

.mappasito{
    display:block;
}

.titolo1 {
  font-size: 1.1em;
  font-weight:200;
  line-height:1.5;
}

.titolo2 {
  font-size: 1em;
  font-weight:200;
  line-height:1.5;
}

.testo1 {
  font-size: 0.8em;
  line-height:1.4;
}

.testo2 {
  font-size: 0.8em;
  line-height:1.4;
}

.textpiede {
  font-size: 0.7em;
  line-height:1.3;
}

/* ----- Dichiariamo che nei tablet e desktop le celle allineate devono avere tutte un'altezza minima --- */
.cella-01 {
   min-height: 250px;
   }
}