html, body{
/* impostazione pagine */
margin-left: 0%; /* SPAZIO A SINISTRA */
margin-right: 0%; /* SPAZIO A DESTRA */
margin-top: 0%; /* DISTANDA DAL PARAGRAFO PRECEDENTE */
margin-bottom: 0%; /* DISTANDA DAL FINE PAGINA */
padding: 0;
font-family: 'Shanti', Arial, Helvetica, sans-serif;
font-size: 14px; /* carattere standard per testo */
color: #3a3b41;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.left{
float: left;
}
.right{
float: right;
}
.center{
float: center;
}
.justify{
float: justify;
}
.clear{
clear: both;
}
a, a:visited{
text-decoration: none;
color: #000;
}
a:hover{
text-decoration: underline;
}
.bigger{
font-size: 1.3em;
}
.smaller{
font-size: 0.8em;
}
/* h vanno da 1 a 6 */
h1{
font-family: 'Shanti', Arial, Helvetica, sans-serif;
font-size: 28px;
padding: 0;
margin: 0;
margin-left: 29px;
}
h2{
font-family: 'Shanti', Arial, Helvetica, sans-serif;
font-size: 25px;
padding: 0;
margin: 0;
margin-left: 29px;
margin-top: 10px;
margin-bottom: -30px;
}
h3 { /* TESTO SOPRA IMMAGINE */
margin: 0px;
background-image: url() ;/*url('images/NON_sento-vedo-parlo.jpg');*/
image : 800px;
background-repeat: no-repeat;
color: #FFFFFF;
background-color: white; /* colore sfondo timeline in Venanzio - curriculum */
font-size: 2000%;
font-weight: normal;
text-align: center;
}
h5{
font-family: 'Shanti', Arial, Helvetica, sans-serif;
font-size: 14px;
margin-left: 5%; /* SPAZIO A SINISTRA */
margin-right: 10%; /* SPAZIO A DESTRA */
margin-top: 2%; /* DISTANDA DAL PARAGRAFO PRECEDENTE */
margin-bottom: 1%; /* DISTANDA DAL FINE PAGINA */
}
#header{/* è la fascia in alto dove c'é il logo e le lingue */
background-color: #ffffff;
height: 60px; /*b altezza banne top */
width: auto;
margin: 0 auto;
}
#header #logo{/* è la fascia in alto dove c'é il logo e le lingue */
margin-top: 1px;
margin-left: 20px;
}
#header #lingue{/* è la fascia in alto dove c'é il logo e le lingue */
float: left;
padding: 0;
margin: 0;
}
/* inizio linguette per lingue */
#header #lingue li{/* è la fascia in alto dove c'é il logo e le lingue */
float: left;
list-style: none;
background-color: #008b8b;
padding-top: 20px;
padding-bottom: 7px;
margin-left: 8px;
width: 50px;
text-align: center;
}
#header #lingue li a{/* è la fascia in alto dove c'é il logo e le lingue */
color: #fff;
font-size: 20px;
font-weight: bold;
}
/* fine linguette per lingue */
.sezione{
width: 100%;
background: url(images/bg_sezione.gif) repeat-x top;
background-position: 0 23px;
padding-top: 2px;
}
.sezione_inner{
width: 800x; /* 1150px */
margin: 0 auto;
/* background: url(images/section_inner_bg.png) no-repeat bottom; /* 882x1400 */
padding:0 29px 42px 25px; /* 0px spazio sopra il banner, 29px spazio a dx del testo, 42px spazio sotto il testo, 25px spazio a sx del testo */
}
.sezione_inner_VeBi{ /* per credits di fine pagina */
width: 0px;
margin: 0 left;
padding:0px 0px 0px 0px; /* 0px spazio sopra il banner, 29px spazio a dx del testo, 42px spazio sotto il testo, 25px spazio a sx del testo */
}
.sezione_innerwide{
width: auto;
margin: 0 auto;
margin-left: 10px;
padding:0 29px 42px 25px; /* 0px spazio sopra il banner, 29px spazio a dx del testo, 42px spazio sotto il testo, 25px spazio a sx del testo */
}
.sezione_Xinhongdingmei{
width: 1150px;
margin: 0 auto;
margin-left: 10px;
padding:0 29px 42px 25px; /* 0px spazio sopra il banner, 29px spazio a dx del testo, 42px spazio sotto il testo, 25px spazio a sx del testo */
}
.sezione_innerC{ /* per pagina colorata */
width: 780px;
margin: 0 auto;
background-color: #19a868; /* #ff6347 = arancione*/
padding: 5px 25px 42px 25px; /* 0px spazio sopra il banner, 29px spazio a dx del testo, 42px spazio sotto il testo, 25px spazio a sx del testo */
}
.sezione_inner_prodotti{
width: 829px;
margin: 0 auto;
background: url(images/section_inner_bg.png) no-repeat bottom; /* 882x1400 */
padding:15px 29px 42px 25px; /* 0px spazio sopra il banner, 29px spazio a dx del testo, 42px spazio sotto il testo, 25px spazio a sx del testo */
}
.sezione_inner-long{
width: 829px;
margin: 0 auto;
background: url(images/section_inner-long_bg.png) no-repeat bottom; /* 880x2480 */
padding:0 29px 42px 25px;
}
.sezione_innerplus{
width: 829px;
margin: 0 auto;
background: url(images/section_innerplus_bg.png) no-repeat bottom; /* 880x4000 */
padding:0 29px 42px 25px;
}
.sezione_inner-iper{
width: 829px;
margin: 0 auto;
background: url(images/section_inneriper_bg.png) no-repeat bottom; /* 880x8000 */
padding:0 29px 42px 25px;
}
.sezione_inner-iperplus{
width: 829px;
margin: 0 auto;
background: url(images/section_inneriperplus_bg.png) no-repeat bottom; /* 880x10000 */
padding:0 29px 42px 25px;
}
h1.caption{
height: 27px;
background-color: #184b64;
font-family: 'Shanti', Arial, Helvetica, sans-serif;
font-size: 13px;
color: #fff;
margin: 0;
margin-bottom: 21px;
padding:22px 29px 10px 29px;
width: 771px;
}
h2.caption{
height: 27px;
background-color: #184b64;
font-family: 'Shanti', Arial, Helvetica, sans-serif;
font-size: 20px;
color: #fff;
margin: 0;
margin-bottom: 21px;
padding:22px 29px 10px 29px;
width: 771px;
}
h3.caption{
height: 10px;
background-color: #008b8b;
font-family: 'Shanti', Arial, Helvetica, sans-serif;
font-size: 12px;
color: #fff;
margin: 0;
margin-bottom: 10px; /* spazio sotto */
padding: 5px 29px 10px 29px; /* 0px spazio sopra il banner, 29px spazio a dx del testo, 42px spazio sotto il testo, 25px spazio a sx del testo */
width: 400px; /* Larghezza della strsiscia con il credits*/
}
.nav_menu_container{
height: 25px;
width: auto;
margin: 0 auto;
}
/*inizio menu con allineamento a destra */
.nav_menu{
padding: 0;
margin: 0;
float: right;
}
.nav_menu li{
float: left;
list-style: none;
margin: 0;
margin-left: 32px;
padding: 0;
}
.nav_menu li a{
font-family: 'Shanti';
font-size: 12px;
color: #192257;
}
/*fine menu con allineamento a destra */
/*inizio menu con allineamento a sinistra */
.nav_menusx{
background-color: #ffffff;
padding: 0;
margin: 0;
margin-left: 50px;
float: left;
}
.nav_menusx li{
float: left;
list-style: none;
margin: 0;
margin-left: 0px; /*margine sinstro */
padding: 5px;
}
.nav_menusx li a{
font-family: 'Shanti';
font-size: 16px;
color: #192257;
}
/*fine menu con allineamento a sinistra */
.sezione_inner p{
margin-left: 29px;
margin-top: 40px;
}
.sezione_inner-long p{
margin-left: 29px;
margin-top: 40px;
}
.sezione_innerplus p{
margin-left: 29px;
margin-top: 40px;
}
#pic_bg{
height: 500px;
background: url(images/Brand_E2S3-Vuoto.jpg) bottom right no-repeat;
}
#pic_bgAreaRis{
height: 430px;
background: url(images/LogoAreaRiservata.png) bottom center no-repeat;
}
#timeline-embed{
margin:0px !important;
border:0px solid #CCC !important;
padding:0px !important;
-webkit-border-radius:0px !important;
-moz-border-radius:0px !important;
border-radius:0px !important;
-moz-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;
-webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;
box-shadow:0px 0px 0px rgba(0, 0, 0, 0.25) !important;
}
#bio_container{
height: 355px;
width: 772px;
padding-right: 20px;
overflow: auto;
margin-bottom: 20px;
}
#sezione_inner_contatti_container{
margin: 0 auto;
width: 873px;
height: 400px;
}
/* script per far girare le parole */
.sezione_inner_contatti{
width: 220px; /* larghezza contenitore */
height: 250px; /* altezza contenitore */
float: left;
background-color: #d5e1e7; /* colore della casella */
/* background: url('images/contatti_bg.png') no-repeat bottom; */
margin: 0 8px;
padding: 0 27px;
position: relative;
}
.sezione_inner_contatti h1{
width: 188px; /* larghezza fascia */
height: 10px; /* altezza fascia */
background-color: #298ec1; /* colore fascia */
font-family: 'Shanti', Arial, Helvetica, sans-serif;
font-size: 12px; /* dimensione carattere */
color: #fff; /* colore carattere */
margin: 0;
margin-bottom: 0px; /* margine sotto la fascia */
padding:5px 30px 10px 29px; /* 0px spazio sopra il banner, 0px spazio a dx del testo, 0px spazio sotto il testo, 00px spazio a sx del testo */
margin-left: 0px;
}
p.contatti{
font-size: 16px;
text-align: center;
}
/* fine script per far girare le parole */
#partners li{
list-style: none;
line-height: 2.5em;
}
#partners li a{
color: #3a3b41;
text-decoration: none;
font-size: 15px;
}
#credits{
width: auto;
margin: 0 auto;
text-align: left;
color: #008b8b;
padding-bottom: 30px;
}
#credits a{
color: #008b8b;
}
#creditsVeBi{
height: 12px;
background-color: #ffffff;
font-family: 'Shanti', Arial, Helvetica, sans-serif;
font-size: 12px;
color: #008b8b;
margin: 0;
margin-bottom: 21px;
padding:22px 29px 10px 29px;
width: 771px;
}
#contatto{
width: 420px;
height: 380px;
position: relative;
border: 1px #ddd solid;
}
.info textarea{
width: 400px;
height: 250px;
margin: 5px;
font-family: Arial, Helvetica, sans-serif;
}
.info input[type=text]{
width: 400px;
margin: 5px;
}
.info input[type=button], button{
background: #184C64;
cursor: pointer;
border: 0;
width: 150px;
height: 35px;
color: #fff;
font-size: 1.2em;
font-weight: bold;
position: absolute;
bottom: 30px;
right: 10px;
}
#grazie{
margin: 10px;
}
#myCanvasContainer, #myCanvasContainer2{
width: 219px;
height: 250px;
}
.margin_p
{
margin-left:30px;
}
/* inizio menu con sottomenu a tendina */
nav
{
background: #000; /* colore sfondo menu #000 = nero #32cd32=VERDE */
height: 47px; /* altezza fascia menù */
width: 100%;
position: relative; /* fixed pone la barra in alto */
top: 0;
left: 0;
}
nav ul /* menu normale */
{
list-style: none;
margin: 0px; /* originale auto */
padding: 0;
width: 100%;
max-width: 1400px; /* largezza massima del menu*/
}
nav ul ul /* sottomenu a tendina */
{
display: none; /* significa che il menu a tendina non sarà più visibile se non al passaggio del mouse */
position: static; /* caratteristica delle tendina; absolute= non sposto le immagini sotto; */
top: 100%; /* sempre necessario per menu a tendina */
left: 0;
width: 100%;
}
nav ul li
{
position: relative;
float: left; /* allineamento del menu sx o dx */
width: 15%; /* è la divisione dello spazio della barra menu in percentiale rispetto alle voci di menù */
text-align: center; /* tesrto ventrato nel suo spazio */
}
nav ul li:hover ul /* ovvero cosa succede al passaggiodel cursore sopra la voce di menù */
{
display: block; /* significa che il menu a tendina sarà visibile al passaggio del mouse */
}
nav ul li li
{
position: relative;
float: none; /* allineamento del menu sx o dx o nessuno */
width: 100%; /* è la divisione dello spazio della barra menu in percentiale rispetto alle voci di menù */
border: none; /* bordo della casella di sottomenu */
}
nav ul li a /* menu principale */
{
display: block;
text-decoration: none;
color: #ffffff; /* colore caratteri banner menu - #ffffff= bianco */
padding: 15px 25px;
font-size: 1.0em; /* dimensione caratteri */
box-sizing: border-box;
border-right: solid 0px #000;/* spessore e colore bordo destro menu a tendina */
border-left: solid 0px #000; /* spessore e colore bordo sinistro menu a tendina */
}
nav ul ul li a /* sotto menu a tendina */
{
font-size: 1rem;
border-bottom: solid 0px #000; /* spessore e colore interlinea menu a tendina */
}
nav ul ul li:first-child a /* cambiamento di colore dellla casella al passaggio del mouse */
{
border-top: solid 0px #000; /* spessore e colore bordo in alto, ovvero inizio menu a tendina */
}
nav ul li:hover a /* ovvero cosa succede al passaggio del cursore sopra la voce di menù */
{
background: #fff; /* al passaggio del mouse lo sfondo diventa bianco */
color: #000; /* al passaggio del mouse il testo diventa nero #000 #32cd32=verde */
text-decoration: none;
transition: 0.5s; /*il cambiamento doi colore non sarà istantaaneo ma in 0.5 secondi */
}
nav ul li li:hover a /* ovvero cosa succede al passaggio del cursore sopra la voce di menù */
{
background: #000; /* al passaggio del mouse lo sfondo diventa bianco */
color: #fff; /* al passaggio del mouse il testo diventa nero */
}
/* fine menu con sottomenu a tendina */
/* immagine adattiva */
#padre {
width: auto;
height: auto;
left: 0px;
}
#padre img{
width: 100%;
height: 100%;
left: 0px;
object-fit: contain; /* L’immagine viene riadattata (manenendo le proporzioni) per occupare tutto lo spazio del contenitore, senza lasciare alcuno spazio vuoto in esso. Questa soluzione però può portare al ritaglio di parte dei bordi dell’immagine (detto “crop” o ritaglio). */
/* object-fit: contain; /* L’immagine viene riadattata (mantenendo le proporzioni) per occupare tutto lo spazio dato dal contenitore, ma garantendo che l’immagine sia completamente visibile. Questa soluzione può generare però degli spazi vuoti nel contenitore */
}
/*fine immagine adattiva */
/* scritta sopra un'immagine */
.caption {
font-family: Verdana, sans-serif;
font-size: 15px;
float: left;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
.caption img {
float: left;
margin: 0;
padding: 0;
background: #fff;
border: none;
}
.caption span {
float: left;
margin: 0;
padding: 10px;
width: 100%;
color: #dedede;
background: #222; /* browser che non supportano rgba */
background: rgba(0,0,0,0.7);
position: absolute;
left: 0;
bottom: 0;
}
.caption span strong {
font-weight: bold;
font-size: 22px;
text-transform: uppercase;
display: block;
padding-bottom: 5px;
}
/* fine scritta sopra un'immagine */
/* inizio didascalia a scomparsa su foto */
.classe_img_con_didascalia {
float: left;
position: relative;
overflow: hidden;
}
.classe_img_con_didascalia p {
position: absolute;
left: 4px;
bottom: 0;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
font-size: 15px;
color: #ffff00;/* colore del test */
display: none;
width: 100%;
padding: 10px;
}
.classe_img_con_didascalia:hover p {
display:block;
}
/* fine didascalia a scomparsa su foto */
/* inizio didascalia a scomparsa per landingpage */
.classe_img_con_didascaliaLP {
float: left;
position: relative;
overflow: hidden;
}
.classe_img_con_didascaliaLP p {
position: absolute;
left: 4px;
bottom: 0;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
font-size: 15px;
color: #FFFFFF;/* colore del test */
display: none;
width: 100%;
padding: 10px;
}
.classe_img_con_didascaliaLP:hover p {
display:block;
}
/* fine didascalia a scomparsa per landingpage */
/* inizio didascalia a scomparsa per Pagine Valentina in Spagnolo */
.classe_img_con_didascaliaVaBi {
float: left;
position: relative;
overflow: hidden;
}
.classe_img_con_didascaliaVaBi p {
position: absolute;
left: 16px; /* margine inizio scritta a sinistra */
bottom: 0;
background: none repeat scroll 0 0 rgba(230, 157, 13, 0.7);
font-size: 12px; /* dimensione del testo */
color: #FFFFFF;/* colore del testo */
display: none;
width: 100%;
padding: 10px;
}
.classe_img_con_didascaliaVaBi:hover p {
display:block;
}
/* fine didascalia a scomparsa per landingpagePagine Valentina in Spagnolo
/* inizio didascalia a scomparsa su prodotti */
.classe_img_con_didascaliaP {
float: left;
position: relative;
overflow: hidden;
}
.classe_img_con_didascaliaP p {
position: absolute;
left: 4px;
bottom: 0;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
font-size: 15px;
color: #ffff00;/* colore del test */
display: none;
width: 100%;
padding: 10px;
}
.classe_img_con_didascaliaP:hover p {
display:block;
}
/* fine didascalia a scomparsa su foto */
/* inizio didascalia fissa su immagini */
.classe_img_con_didascaliafissa {
float: left;
position: relative;
/* overflow: hidden;*/
}
.classe_img_con_didascaliafissa p {
position: absolute;
left: 170px; /* posione testo da bordo sinistra */
right: 50px;
top: 80px; /*posione testo dall'alto */
/* bottom: 65px; posione testo dal basso */
/*background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);*/
font-size: 20px;
color: #0000cd;/* colore del test */
/* display: none; */
width: 100%;
padding: 10px;
}
.classe_img_con_didascaliafissa:hover p {
display:block;
}
/* fine didascalia a scomparsa su foto */
/* inizio dati per linea di separazione
*/
hr {
width: 430px; /* larghezza linea in pixel o in % sulla dimensione della pagina */
height: 20px; /* altezza linea */
float: left; /* allinamento linea ---- se si usa questo campo non funiona più lo spazio sotto la linea */
background-color:#008b8b; /* volore linea */
margin-right: auto; /* margine destro */
margin-left: auto; /* margine sinistro */
margin-top: 15px; /* spazio sopra la linea */
margin-bottom: 15px; /* spazio sotto la linea */
border-width: 2px; /* spessore del bordo */
border-color: #008b8b; /* colore del bordo */
}
/* fine dati per linea di separazione
*/
/* Inizio istruzioni per fare girare immagini */
.item{ width: 100%; height: 400px; background: red;} /* dimensioni e sfondo settore scorrimento immagini */
/* inizio istruzioni per le due freccia a dx e a SX per lo scorrimento */
.owl-prev{ /* vai a foto precedente freccia di SX */
background-color: red !important; /* colore sfondo tasto freccia*/
width: 50px !important; /*dimesione, altezza, dello spazio in cui è inserita la freccia"*/
height: 50px !important;/*dimesione, altezza, dello spazio in cui è inserita la freccia"*/
color: #fff !important; /* colore freccia*/
font-size: 40px !important; /* dimensione freccia*/
top: 180px !important; /* spazio sopra la preccia */
left: 5px !important; /* spazio a sx della preccia */
}
.owl-next{ /* vai a foto successiva freccia di DX */
background-color: red !important; /* colore sfondo tasto freccia*/
width: 50px !important; /*dimesione, altezza, dello spazio in cui è inserita la freccia"*/
height: 50px !important;/*dimesione, altezza, dello spazio in cui è inserita la freccia"*/
color: #fff !important; /* colore freccia*/
font-size: 40px !important; /* dimensione freccia*/
top: 180px !important; /* spazio sopra la preccia */
right: 0px: !important; /* spazio a dx della preccia */
}
/* fine istruzioni per le due freccia a dx e a SX per lo scorrimento */