.title-over {
	z-index: 20;
	position: relative;
	text-align: left;
	width: 100%; /*450px*/
	height: auto; /*60px*/
 	top: 10px;
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: 40px;
	font-weight: bold;
	font-variant: normal;
	text-transform: uppercase;
	color: #ff8833;
	text-decoration: none;
	margin:0;
	margin-left: 0;/*86px*/
	padding-bottom: 2px;
	text-shadow: 2px 2px 3px #000066;
	/*text-shadow: 1px 1px 2px #223243;*/
}
.container_content {background-color:#000066;width: 100%;max-width:920px;margin: 0 auto;overflow: hidden;}
.cards {display: table;width: 100%;margin-left: 10%;}
.cards.footer {background-color:#000066;background-position:0 70px; background-image: url(/img/linea.gif);background-repeat: repeat-x;overflow: hidden;margin-left: 0;}
.card-container {display: table-cell;width: 33.33333%;box-sizing:border-box;}  
.card-container.title-over {width: 50%;}
.linea_orizz {background-position:0 100px; background-image: url(/img/linea.gif);background-repeat: repeat-x;}
.linea_vert {background-image: url(/img/linea.gif);background-repeat: repeat-y;}
.card-container > .mail {position: relative;top: 100px;left: 40px;}
.card-container > span {top: 100px !important;}
.container_logo img {width: 100%;max-width: 250px;}
/*.cards {
 display: flex;
 display: -webkit-flex;
  flex-flow: row nowrap;
 -webkit-flex-flow: row nowrap;
 align-items: stretch;
 -webkit-align-items: stretch;
 justify-content: space-between;
 -webkit-justify-content: space-between;
 margin-top: 10px;
}
.card-container {
 display: flex;
 display: -webkit-flex;
 flex-direction: column;
 -webkit-flex-direction: column;
 width: 33.3%;
 padding: 0;
}
*/
.container {
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	line-height: 16px;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #ffffff;
	text-decoration: none;
	text-align: justify;
}
.cont_sx {width:34%;float:left;margin-left:2%;margin-right:1%;}
.cont_dx {width:42%;float:left;margin-left:1%;margin-right:10%;}
.container h2 {
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	line-height: 25px;
	font-weight: bold;
	font-variant: normal;
	color: #ffffff;
	text-decoration: none;
	text-align: justify;
	text-transform: uppercase;
	margin:0;
	padding-bottom: 8px;

}

.container hr {
	border-bottom: medium none;
	margin: 12px 0;
	padding-top: 0;
	border-top: 1px solid #e2e2e2;
}

.container a {
	color: #ff8833;
	font-size: 1em;/*11px*/
	text-decoration: underline;
	font-variant: normal;
	font-weight: lighter;
	line-height: 15px;
	list-style-position: outside;
	list-style-type: square;
	margin-left: 0;
	margin-right: 5px;
	margin-top: 5px;
	padding: 0;
}
.container ul{
	margin:0;
	margin-left: 12px;
	padding:0;
	font-style: italic;
}
.container li{
	color: #ff8833;
    font-size: 1em;

    font-variant: normal;
    font-weight: normal;/*lighter*/
    line-height: 15px;
    list-style-position: outside;
    list-style-type: square;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding: 0;
    text-transform: lowercase;
 }
 
.col_dx img{
	width: 50%;
	clear: right;
	float: right;
	margin: 3px 0 6px 6px;
 }
 
.col_sx img{
	width: 100%;
	margin: 0;
 }
 
.slogan {

} 
 
.slogan h3{
	position: absolute; 
	width: 680px; 
	height: 50px; 
 	top: 30px;
	left: 30px;
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-size: 30px;
	font-style: normal;
	line-height: 40px;
	font-weight: bold;
	font-variant: normal;
	text-transform: uppercase;
	color: #ff8833;
	text-decoration: none;
	text-align: right;
	margin:0;
	padding-bottom: 2px;
	text-shadow: 2px 2px 3px #000066;
	/*text-shadow: 1px 1px 2px #223243;*/
}
.slogan2 h3{
	position: absolute; 
	width: 100%; 
	height: 50px; 
 	top: 70px;
	right: 70px;
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-size: 50px;
	font-style: normal;
	line-height: 40px;
	font-weight: bold;
	font-variant: normal;
	text-transform: uppercase;
	color: #ff8833;
	text-decoration: none;
	text-align: right;
	margin:0;
	padding-bottom: 2px;
	text-shadow: 2px 2px 3px #000066;
	/*text-shadow: 1px 1px 2px #223243;*/
}
.slogan h4{	
position: absolute; 
	top: 70px;
	left: 30px;
	width: 680px; 
	height: 60px;

	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: italic;
	line-height: 20px;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #ffffff;
	text-decoration: none;
	text-align: right;
	margin:0;
	padding-bottom: 2px;	
	text-shadow: 2px 2px 3px #000066;
}
.slogan2 h4{	
position: absolute; 
	top: 120px;
	right: 70px;
	width: 100%; 
	height: 60px;
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-size: 28px;
	font-style: italic;
	line-height: 20px;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #ffffff;
	text-decoration: none;
	text-align: right;
	margin:0;
	padding-bottom: 2px;	
	text-shadow: 2px 2px 3px #000066;
}

h1 {
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-style: italic;
	line-height: 20px;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #ffffff;
	text-decoration: none;
	text-align: left;
	margin:0;
	margin-left: 2%;
	padding-bottom: 2px;	
	text-shadow: 1px 1px 2px #000033;
}

h2 {
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: italic;
	line-height: 20px;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #ffffff;
	text-decoration: none;
	text-align: left;
	margin:0;
	margin-left: 2%;
	padding-bottom: 2px;	
	text-shadow: 1px 1px 2px #000033;
}

.btn__in-showcase {
    color: #ff8833;
    display: inline-block;
    height: 32px;
    left: 620px;
    margin-top: 240px !important;
    position: relative;
    border: 1px solid #000066;
    border-radius: 3px;
    box-shadow: 1px 1px 2px #000066;
}
.btn_arrow {
    font-size: 21px;
    font-weight: 700;
    line-height: 21px;
    padding: 12px 0;
    width: 45px;
}
.btn_arrow {
    background: #ff8833 none repeat scroll 0 0;
    box-sizing: border-box;
    color: #000066;
    font-weight: bold;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    left: 0;
    line-height: 13px;
    padding: 9px 0;
    position: absolute;
    text-align: center;
    top: 0;
    transition: all 0.1s linear 0s;
    width: 32px;
    z-index: 10;
    border: 1px solid #ff8833;
    border-radius: 2px;

}
.btn_text {
	color: #000066;
    font-size: 16px;
    font-weight: 700;

    line-height: 16px;
    background: #ffffff none repeat scroll 0 0;
    box-sizing: border-box;
    opacity: 0.6;
    filter: alpha(opacity=70); /* For IE8 and earlier */
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    height: auto;
    line-height: 13px;
    padding: 10px 13px 10px 45px;
    text-align: center;
}
.fa-angle-right::before {
    content: ">"; 
    }
.fa {
    display: inline-block;
}
.no-desktop {display: none;}

 @media only screen and (max-width: 650px) {
  .cont_sx {width:85%;float: none;margin: 0 auto;}
  .cont_dx {width: 85%;float: none;margin: 0 auto;}
  .cards {margin: 0 auto;}
  .cards.footer {background-position: 0 30px;height: 100px;}  
  .card-container.title-over {width: 100%;float: none;}
  .no-mobile {display: none; visibility: hidden;}
  .no-desktop {display:block; }
  .linea_orizz {background: none;}
  .linea_vert {background: none;}
  .card-container.container_logo {margin-top: 30px !important;text-align: center;background: url(/img/linea.gif);background-position-x: 0%;background-position-y: 0%;background-repeat: repeat;background-position-x: 0%;
background-position-y: 0%;background-repeat: repeat;background-repeat: repeat-x;background-position: 30px;display: inline-block;}
  .container_logo {width: 100% !important;margin: auto auto 30px auto;margin-top: auto;}
  .container_logo img {width: 100%;max-width: 210px;}
  .title-over h1 {text-align: center;font-size: 16px;padding-left: 30px;padding-right: 30px;}
  .card-container > .mail {
    position: relative;
    top: 50px;
    left: 25px;
    }
  .card-container > span { 
	 top: 55px !important;
	}
}

@media screen and (min-width: 600px) and (max-width: 800px) {
  .container_logo img {width: 100%;max-width: 210px;}
  .card-container.container_logo {margin-top: 70px !important;}
  .title-over h1 {font-size: 18px;}
}



/**
 * per dispositivi medie e piccoli
 */

@media screen and (min-width: 320px) {
    html,
    body {
      margin: 0;
      overflow-x: hidden;
    }
}

@media screen and (max-width: 320px) {
    html,
    body {
      margin: 0;
      overflow-x: hidden;
    }
    #nav {
      width: 80%;
      box-shadow: none
    }
}

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



/* -----------------Menu nella versione mobile-----------------*/
/**
 * pannello latearle autouscente con navigazione
 * che esce al clic da sinistra
 */

#nav {
    /*  larghezza libera, potrai sperimentare */
    width: 320px;
    min-width: 150px;
    /* fissiamo e indichimo l'altezza massimale  */
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    margin: 0;
    /* spostiamo(nascondimo)il pannello rispetto bordo sinistro della pagina  */
    right: -360px;
    /* spazi interni */
    padding: 15px 20px !important;
    /* regoliamo la uscita del pannello  */
    -webkit-transition: left 0.3s;
    -moz-transition: left 0.3s;
    transition: left 0.3s;
    /* indichiamo il colore dello sfondo del pannello */
    background: #666666;
    /* indichiamo che sara sopra tutti gli altri elementi della pagina  */
    z-index: 2000;
}

#label_nav {
}

/**
 * Bottone interruttore del pannello 
 * tag <label>
 */
.nav-toggle {
    /* posizionamento assoluto*/
    position: absolute;
    /*  spazio rispetto bordo sinistro del pannello  */
    right: 0;
    /* rispetto bordo superiore  */
    top: 1em;
    /* spazi interni  */
    padding: 0.5em;
    /* indichiamo il colore dllo sfondo dell'interruttore
     * di solito corrisponde al colore del pannello 
    */
    background: inherit;
    /* colore del testo */
    color: #dadada;
    /* tipo del cursore */
    cursor: pointer;
    /* altezza del font */
    font-size: 1.5em;
    line-height: 1;
    /* sempre in prima vista rispetto altri elementi della pagina  */
    z-index: 2001;
    /* animazione del colore del testo al hover */
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
}


/* identifichino il testo del bottone interruttore 
 * simbolo Unicode (TRIGRAM FOR HEAVEN)
*/

.nav-toggle:after {
    content: '\2630';
    text-decoration: none;
}


/* colore del testo al hover  */

.nav-toggle:hover {
    color: #f4f4f4;
}


/**
 * Checkbox nascosto
 * invisibile e inaccessibile  :)
 * nome del selettore del attributo del checkbox
 */

[id='nav-toggle'] {
    position: absolute;
    display: none;
}


/**
 * cambiamento della posizione dell'interuttore  
 * in caso di dispositivi mobili
 * quando pannello aperto si trova al interno del pannello */

[id='nav-toggle']:checked ~ #label_nav.nav-toggle {
	 position: fixed;
    left: auto;
    right: 2px;
    top: 1em;
}


/**
 * Quando checkbox selezionato, aprire pannello 
 * usiamo pseudo-classe :checked
 */

[id='nav-toggle']:checked ~ #nav {
    right: 0;
    box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5);
    -moz-box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5);
    -webkit-box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5);
    overflow-y: auto;
}


/* 
 * spostamento del contenuto della pagina 
 * per largezza del pannello ,
 * non e obbligatorio il trucco, ma puoi sempre usarlo
*/

[id='nav-toggle']:checked ~ main > article {
    -webkit-transform: translateX(-320px);
    -moz-transform: translateX(-320px);
    transform: translateX(-320px);
}


/*
 * cambio simbolo del bottone interruttore ,
 * solita croce  (MULTIPLICATION X), 
 * potrai utilizare qualsiasi altro simbolo
*/

[id='nav-toggle']:checked ~ #label_nav.nav-toggle:after {
    content: '\2715';
}


/**
 * prefissi per Android <= 4.1.2
 * 
 */

body {
    -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
    to {
      padding: 0;
    }
}
	
ul#nav li {
	float: none;
	color: inherit;
	font-size: 0.9em;
	font-style: normal;
	line-height: 1.5em;
	list-style: none;
	padding-top: 0.4em;
	padding-bottom: 0.4em;
}

/**
 * Definiamo lo stile del titolo(logo) del pannello  
*/

#nav h2 {
    width: 90%;
    padding: 0;
    margin: 10px 0;
    text-align: center;
    text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
	 font-family: Open Sans, sans-serif;
	 font-weight: lighter;
    font-size: 1.3em;
    line-height: 1.3em;
    opacity: 0;
    transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -webkit-transform: scale(0.1, 0.1);
    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    transition: opacity 0.8s, transform 0.8s;
    -ms-transition: opacity 0.8s, -ms-transform 0.8s;
    -moz-transition: opacity 0.8s, -moz-transform 0.8s;
    -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
}

#nav h2 a {
    color: #dadada;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.5em;
    font-weight: lighter;
    font-family: open sans, sans-serif;
    line-height: 1.3em;
    margin: 0;
}


/*Uscita morbida del titolo(logo) al apertura del pannello  */

[id='nav-toggle']:checked ~ #nav h2 {
    opacity: 1;
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}


/**
 * Decoriamo il menu 
 * usando la lista non numerata per le voci
 * aggiungiamo passaggi morbidi e trasformazioni 
 */

ul#nav {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Open Sans', sans-serif;
}

ul#nav > li{list-style: none;color: #dadada;font-size: 1em;}
ul#nav > li {
    line-height: 2.5;
    opacity: 0;
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
    -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
    -moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
    -ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
    transition: opacity .5s .1s, transform .5s .1s;
}

[id='nav-toggle']:checked ~ ul#nav > li {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}


/* impostiamo intervalli di apparizone dei voci del menu  */

ul#nav > li:nth-child(2) {
    -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
    transition: opacity .5s .2s, transform .5s .2s;
}

ul#nav > li:nth-child(3) {
    -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
    transition: opacity .5s .3s, transform .5s .3s;
}

ul#nav > li:nth-child(4) {
    -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
    transition: opacity .5s .4s, transform .5s .4s;
}

ul#nav > li:nth-child(5) {
    -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
    transition: opacity .5s .5s, transform .5s .5s;
}

ul#nav > li:nth-child(6) {
    -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
    transition: opacity .5s .6s, transform .5s .6s;
}

ul#nav > li:nth-child(7) {
    -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
    transition: opacity .5s .7s, transform .5s .7s;
}


/**
 * decoriamo link delle voci del menu 
 */

ul#nav > li > a {
    display: inline-block;
    position: relative;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 1.3em;
    color: #dadada;
    width: 100%;
    text-decoration: none;
  /* passaggio morbido */
    -webkit-transition: color .5s ease, padding .5s ease;
    -moz-transition: color .5s ease, padding .5s ease;
    transition: color .5s ease, padding .5s ease;
    padding-bottom: 10px !important;
	 border-bottom: 1px solid #dadada;
	 line-height: 1.5em;
}
a.accordion {
    display: inline-block;
    position: relative;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 1.3em;
    color: #dadada;
    width: 100%;
    text-decoration: none;
  /* passaggio morbido */
    -webkit-transition: color .5s ease, padding .5s ease;
    -moz-transition: color .5s ease, padding .5s ease;
    transition: color .5s ease, padding .5s ease;
    padding-bottom: 10px !important;
	 border-bottom: 1px solid #dadada;
	 line-height: 1.5em;
}

/**
 * stato dei link al passaggio del mouse
 */

ul#nav > li > a:hover,
ul#nav > li > a:focus {
    color: white;
    padding-left: 15px;
    border-bottom:1px solid #000066;
}


/**
 * sottolineatura dei link del menu
 */

ul#nav > li > a:before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    -webkit-transition: width 0s ease;
    transition: width 0s ease;
}

ul#nav > li > a:after {
    /*content: '';*/
    display: block;
    position: absolute;
    left: 0;
    top: 0px;
    height: 1px;
    /*width: 100%;
    background: #dadada;
    -webkit-transition: width .5s ease;
    transition: width .5s ease;*/
}


/**
 * animazione delle linea di sottolineatura al hover 
 */

ul#nav > li > a:hover:before {
    width: 0%;
    background: #dadada;
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
}

ul#nav > li > a:hover:after {
    width: 0%;
    background: transparent;
    -webkit-transition: width 0s ease;
    transition: width 0s ease;
}

.nav > ul.panel a {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 1.2em;
	color: #dadada;
	width: 100%;
	text-decoration: none;
}
ul.panel li a:link, ul.panel li a:active, ul.panel li a:visited {
	text-decoration: none;
	color: #dadada !important;
	}
ul.panel li a:hover {color: #fff !important;}
ul.panel li a.active {color: #fff !important;}
ul.panel li a {	
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 1em;
	text-decoration: none;
	color: #dadada;
	/* animazione del colore del testo al hover */
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
	}
ul.panel li {
	font-family: 'Open Sans', sans-serif !important;
	font-weight: 300 !important;
	font-size: 1.2em !important;
	text-decoration: none;
	color: #dadada !important;
	/* animazione del colore del testo al hover */
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out; }
}
/* lo sfondo oscurante della pagina  
 * in questo caso ellementi vengono blocati */


.mask-content {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
}

[id='nav-toggle']:checked ~ .mask-content {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity .5s, visibility .5s;
    transition: opacity .5s, visibility .5s;
}
/*Menu accordion sottomenu*/
.accordion {
  /*background-color: #eee;*/
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
a.accordion, a.accordion:link, a.accordion:active, a.accordion:visited {
    color: #dadada;
    line-height: none;
}
a.accordion:hover {color: #fff !important;}
.active, .accordion:hover {
  /*background-color: #ccc;*/
  color: #fff !important;
}
ul.panel > li.dir > a.accordion:after {  top: 10px;margin-left: 0;}
.accordion:after {
  content: '\002B';
  /*color: #777;
  font-weight: bold;*/
  float: right;
  margin-left: 90%;
  right: -260px;
}
.accordion.noicon:after {
  content: '';
}
.active:after {
  content: "\2212";
}
a.accordion2.imenu:after {
  content: '\00A0\203A';
  color: #ff8833;
}
a:hover.accordion2.imenu::after {
  color: #fff;
}
.active2:after {
  content: "\2212";
}
ul.dropdown li ul a:active{color: red;}
ul#nav > li > ul.panel {
	/* height: 100%; */
  padding: 0 18px;
  background-color: #727272;
  /*border-top: 1px solid #dadada;*/
  /* max-height: 0; */
  overflow: auto;
  transition: max-height 0.2s ease-out;
  color:#dadada;
  list-style: none;
}
ul#nav > li > ul > li > ul.panel {
	/* height: 100%; */
	width: auto;
	padding: 0 18px;
	background-color: #7E7E7E;
	/*border-top: 1px solid #dadada;*/
	/* max-height: 0; */
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	color:#dadada;
	list-style: none;
}
ul.panel {height: 100%;	max-height: 0;}
ul.panel.show {
    max-height: 500px;
}
#nav > ul.panel a:link, a:visited {
	color: #dadada;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 1em;
	}
div.menu, div.menu a {
	color: #dadada;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 1em;
	text-align: left;
	}