/*
Project: todini.com
Version: 2.0.0
Author: phollidee.com
*/
@import url('vendor/foundation.css');
@import url('vendor/owl.carousel.min.css');
/* general rules ====================================================================== */
body {font-family: Arial,Helvetica Neue,Helvetica,sans-serif; position:relative; color:#4a4a4a;}
h1, h2, h3, h4, h5 {margin: 0; padding: 0; font-weight:normal;}
h1 {font-size:48px; line-height:1.2;}
h2 {font-size:36px; font-weight:bold; line-height:1.2;}
h3 {font-size:30px; font-weight:bold; line-height:1.2;}
ul {list-style-type: none; margin: 0; padding: 0;}
p {margin: 1em 0; line-height: 1.5;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}
.hidden {display:none;}
address {font-style:normal;}
strong {color:inherit;}
/* header & footer ==================================================================== */
.header {height:90px; /*transition: all 300ms ease-in-out 0s;*/ }
.header a.logo {margin-top:10px; background:url("../images/todini_logo.svg"); background-size:154px 67px; width:154px; height:67px; display:block; transition: all 200ms ease-in-out 0s;}
.header a.logo span {display:none;}
.header nav {margin-top:38px;}
.header nav ul li {display:inline-block;}
.header nav li a {color:#4a4a4a; font-size:15px; padding-bottom:3px; text-decoration: none; margin-left:40px; text-transform:uppercase;}
.header nav li a:hover {opacity:.8;}
.header nav li.active a {font-weight:bold; border:0; border-bottom: 1px solid; border-image: linear-gradient(149.03deg, #77BB5B 0%, #197CBE 100%); border-image-slice: 1; }
/* stickytop */
#topbar.stickytop {height:50px; width:100%; position:fixed; top:0; left:0; z-index:999; background:rgba(256,256,256,.9); -webkit-box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.3); box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.3);}
#topbar.stickytop a.logo {margin-top:6px; width:97px; height:35px; background:url("../images/todini_logo.svg") no-repeat; background-size:97px 35px; }
#topbar.stickytop nav {margin-top:13px;}
.footer {background:#F7F7F7; text-align:center; padding:30px 0;}
.footer .policies {position:relative;}
.footer .policies ul {margin-bottom:30px; margin-top:10px;}
.footer .policies ul li {display:inline-block;}
.footer .policies ul li a {color:#4a4a4a; font:13px Arial, sans-serif; font-weight:bold; text-decoration: none; display:inline-block; line-height:30px; padding-left:20px; padding-right:20px; border-right:1px solid #e9e9e9;}
.footer .policies ul li a:hover {color:#111;}
.footer .policies ul li:last-child a {border:0;}
.footer a.logo-footer {display: inline-block; width: 70px; height: 15px; background-image: url("../images/todini_logo_bn.png"); margin-right:15px; line-height:15px; position:relative; bottom:-2px;}
.footer a.logo-footer:hover {background-image: url("../images/todini_logo_colori.png");}
.footer p.policy {font-size:11px; margin-top:15px; line-height:15px;}
.footer p.policy span {display:inline-block; padding-left:20px;}
.footer .flag {position:absolute; right:0; bottom:3px;}
.footer .seo-row {border-bottom:1px solid #E9E9E9; margin-bottom:20px; padding-bottom:20px;}
.footer .ft-col {text-align:left;}
.footer .ft-col h3 {font-weight:bold; font-size:18px; line-height:1.3; padding-right:30px;}
.footer .ft-col h4 {font-weight:bold; font-size:13px;}
.footer .ft-col ul li {display:block; font-size:13px;}
.footer .ft-col ul li a {color:#4a4a4a; text-decoration:none;}
.footer .ft-col ul li a:hover {text-decoration:underline;}
.footer .seo-row .ft-expand {display:inline-block; border-left:1px solid #e9e9e9;}
.footer .seo-row .ft-expand a {display:inline-block; min-height:58px; background-image: url("../images/ft-arrow.png"); background-repeat:no-repeat; padding-left:16px; padding-top:16px; position:relative; left:-1px; color:#ababab; text-decoration:none;}
.footer .seo-row .ft-expand a:after {content:"+"; display:block; width:12px; text-align:center;}
.footer .seo-row .ft-expand.open a:after {content:"-";}
.footer .seo-row .ft-expand a:hover {color:#000;}
/************************************************
* HOMEPAGE *
************************************************/
/* .hp-hero */
.hp-hero-wrapper { height:400px; background:url("../images/bg_hero.png"); background-size:cover; }
.hp-hero { height:400px; color:#fff; text-align:center; display:flex; align-items:center; }
.hp-hero h1 { padding:50px 220px 10px; line-height:1.2; margin:0; }
.hp-hero p { padding:20px 160px; margin:0; }
.hp-hero .button { margin-left:6px; margin-right:6px; }
/* .wall-elementi */
.wall-elementi {padding-top:40px; padding-bottom:60px;}
/* .about-us */
.about-us {text-align:center; color:#fff; padding-top:80px; padding-bottom:80px; background:url("../images/bg_about-us.png"); background-size:cover;}
.about-us .about-item {padding:0 20px;}
.about-us h3 {padding:0; margin:0; font-size:32px; font-weight:normal;}
.about-us p {padding:10px 0px; font-size:16px;}
.about-us .bar {display:block; margin:10px auto; height: 6px; width: 38px; border-radius: 100px; background-color: #6B6B6B;}
/* .help */
.help {padding:50px 0 30px; background-color: #E4E4E4; text-align:center;}
.help h3 {font-weight:normal;}
.help .button {color:#4a4a4a; border-color:#4a4a4a;}
.help .button:hover {}
/************************************************
* COMPONENTI SITO *
************************************************/
/* ====== title-bar & path ========== */
.title-bar {background: linear-gradient(149.03deg, #77BB5B 0%, #197CBE 100%); padding-top:35px; padding-bottom:30px; color:#fff;}
.title-bar h2 {font-size:24px; margin:0; padding:0;}
.title-bar .path {font-size:12px;}
.title-bar .path a {font-size:12px; color:#fff; text-decoration:none;}
/* ====== nav prev/next ========== */
.e-navigation {background-color: #F9F9F9; padding:10px 0;}
.e-navigation a {font-size:13px; color:#000; text-decoration:none; margin-right:30px;}
.e-navigation a:hover {text-decoration: underline;}
.e-navigation span {color:#77BB5B;}
/* ====== main content ========== */
.main-content {padding-top:20px; padding-bottom:20px;}
.main-content h1 {color:#000; font-size:32px; font-weight:bold; margin-bottom:10px;}
.main-content p {margin-top:0;}
/* ====== bottoni ========== */
/* standard */
.button { border:1px solid #fff; display:inline-block; padding:20px 30px; border-radius: 100px; color:#fff; text-decoration: none; font-weight: bold; font-size:15px; }
.button:hover {color: #595A5B; background:#fff;}
/* sfondo bianco */
.button.btn-white {background:#fff; color:#6BADD0}
.button.btn-white:hover {background:transparent; color:#fff;}
.button.btn-grey {background-color: #AEAEAE; color:#fff !important;}
/* ====== form ========== */
form legend {display:none;}
form fieldset {border:0; padding:0; margin:0;}
form p {margin-bottom:8px; margin-top:8px;}
form label {display:block; font-size:13px; margin-bottom:5px;}
form label span.advice {font-weight:bold;}
form label span.nota {font-size:11px;}
[type="text"], [type="password"], [type="email"], [type="date"], [type="number"], [type="search"], [type="tel"], [type="url"] {width:100%; border-radius: 5px; border:1px solid #e2e2e2; height:40px; line-height:40px; padding:0 5px;}
textarea {width:100%; border:1px solid #e2e2e2; padding:10px 5px;}
select {width:100%; border:1px solid #ccc; height:40px; line-height:40px; padding:0 5px;}
input::-moz-placeholder, textarea::-moz-placeholder {color: #222; opacity:1;}
input:focus, select:focus, textarea:focus {outline: none; border-color: #4e8ff3; box-shadow: none;}
select:-moz-focusring {color: transparent; text-shadow: 0 0 0 #000;} /* hack ff */
/* controllo errore */
.state-error [type="text"], .state-error [type="password"], .state-error [type="email"], .state-error [type="date"], .state-error [type="number"], .state-error [type="search"], .state-error [type="tel"], .state-error [type="url"], .state-error textarea, .state-error select {border:1px solid red; color:red;}
.state-error.privacy {border:1px solid red; border-radius: 5px; padding:3px;}
.state-error.privacy:after {content:""; margin:0;}
.state-error span.alert, span.alert {color:red; font-size:13px;}
/* ====== flag ========== */
.flag img {width:30px; height:30px; margin-right:5px;}
.flag span {font-size:11px;}
.flag a {color:#4a4a4a; text-decoration:none;}
/* ====== office ==========
.office img {width:30px; height:30px; margin-right:5px;}
.office span {font-size:11px;}
.office a {color:#4a4a4a; text-decoration:none;}
*/
/************************************************
* ELEMENTI CHIMICI *
************************************************/
/* === nel wall in homepage */
.element {width:268px; border-radius:3px; text-align:left; border:0px solid transparent; position:relative; background:#fff; padding:2px;}
.element a {display:block; width:264px; text-decoration:none; background:#fff; border-radius: 2px; transition: all 500ms;}
.element a:hover, .element.active a {background:transparent;}
.element a:hover, .element a:hover .element-info .desc {color:#fff !important;}
.element a:hover .element-pipe {background:#fff !important;}
.element .element-info {padding:20px 28px; position:relative;}
.element-info .simbolo {font-size:80px; font-weight:bold; letter-spacing:-3px; line-height:1; display:block; margin-bottom:10px; margin-top:10px;}
.element-info h2 {font-size:20px; font-weight:normal; margin:0 0 5px; padding:0px;}
.element-info .element-pipe {display:block; width:30px; height:2px; margin-bottom:10px;}
.element-info .dist {font-size:11px; position:absolute; right:28px; top:28px; text-align:right; width:85px; line-height:1.1; margin:0;}
.element-info .desc {font-size:12px; color:#000;}
/* varienta senza link ma con div */
.element .element-wrap {display:block; width:264px; text-decoration:none; background:#fff; border-radius: 2px; transition: all 500ms;}
.element .element-wrap:hover, .element.active .element-wrap {background:transparent;}
.element .element-wrap:hover, .element .element-wrap:hover .element-info .desc {color:#fff !important;}
.element .element-wrap:hover .element-pipe {background:#fff !important;}
/* === nel group, versione BIG */
.element.big-element {height:268px; width:268px;}
.element.big-element .element-wrap {height:264px;}
.element.big-element .element-wrap .simbolo {margin-top:110px; font-size:100px;}
/* === nel listing prodotti */
.element-list-wrapper {}
.element-list-item {border: 1px solid; border-radius: 2px; margin:20px 0 30px; padding:30px; position:relative;}
.element-list-item:hover {border: 1px solid #EBEDEE !important; box-shadow: 0 0 15px 0 rgba(0,0,0,0.06);}
.element-list-item:hover .symbol h1 {background:transparent; color:#fff;}
.element-list-item h1.e-name {line-height:1.2;}
.element-list-item h1.e-name a {text-decoration:none; color:inherit;}
.element-list-item .symbol {position:absolute; top:30px; right:30px; height: 72px;
width:72px; text-align:center; border-radius: 2px;}
.element-list-item .symbol h1 {font-size:20px; display:block; height:70px; width:70px; margin:1px; line-height:70px; background:#fff;}
.element-list-item p.desc {max-width:750px; color:#000; font-size:13px; margin-top:20px;}
.element-list-item ul {margin:13px 0 0 0;}
.element-list-item li {float:left; color:#000; margin-right:100px; }
.element-list-item li strong {display:block; font-size:16px;}
.element-list-item .button {border: 1px solid #AEAEAE; color: #9B9B9B;}
.element-list-item.highligthed, .element-list-item.highligthed:hover {border-width:4px !important;}
.element-list-item.importance-1, .element-list-item.importance-1:hover {border-bottom-width:4px !important;}
.element-list-item.importance-2, .element-list-item.importance-2:hover {border-bottom-width:3px !important;}
.element-list-item.importance-3, .element-list-item.importance-3:hover {border-bottom-width:2px !important;}
/* === nel listing prodotti in MODALITA CARDS */
.element-card-wrapper .element-list-item:nth-child(odd) {width:49%; float:left;}
.element-card-wrapper .element-list-item:nth-child(even) {width:49%; float:right;}
.element-card-wrapper .element-list-item p.desc {display:none;}
.element-card-wrapper .element-list-item ul {margin-bottom:15px;}
.element-card-wrapper .element-list-item li {float:none; margin-right:0; }
.element-card-wrapper .element-list-item li strong {display:inline-block;}
/* === nello versione SMALL (es. slider) */
.small-elements .element {width:45px;height:45px; text-align:center;}
.small-elements .element a {width:41px;height:41px;}
.small-elements .element .simbolo {display:block; line-height:41px;}
/* Chemical Elements Coloring */
.e-io .element, .e-io .symbol {background: linear-gradient(180deg, #6DD6E0 0%, #3BADBE 100%);}
.e-io .element a, .e-io .element-wrap, .e-io h1.e-color {color:#3BADBE;}
.e-io .element-pipe {background: linear-gradient(90deg, #6DD6E0 0%, #3BADBE 100%);}
.e-io.vip-content h3 {color:#3BADBE;}
.e-io.vip-content .button {color:#3BADBE; border-color:#3BADBE;}
.e-io.vip-content .button:hover {background:#3BADBE;}
.e-io.element-list-item {border-color:#3BADBE;}
.e-co .element, .e-co .symbol {background:linear-gradient(180deg, #25B6EB 0%, #007DD6 100%);}
.e-co .element a, .e-co .element-wrap, .e-co h1.e-color {color:#007DD6;}
.e-co .element-pipe {background: linear-gradient(90deg, #25B6EB 0%, #007DD6 100%);}
.e-co.vip-content h3 {color:#007DD6;}
.e-co.vip-content .button {color:#007DD6; border-color:#007DD6;}
.e-co.vip-content .button:hover {background:#007DD6;}
.e-co.element-list-item {border-color:#007DD6;}
.e-ni .element, .e-ni .symbol {background: linear-gradient(180deg, #A1DD7D 0%, #68B947 100%);}
.e-ni .element a, .e-ni .element-wrap, .e-ni h1.e-color {color:#68B947;}
.e-ni .element-pipe {background:linear-gradient(90deg, #A1DD7D 0%, #68B947 100%);}
.e-ni.vip-content h3 {color:#68B947;}
.e-ni.vip-content .button {color:#68B947; border-color:#68B947;}
.e-ni.vip-content .button:hover {background:#68B947;}
.e-ni.element-list-item {border-color:#68B947;}
.e-se .element, .e-se .symbol {background: linear-gradient(180deg, #E1A8E9 0%, #C06FCE 100%);}
.e-se .element a, .e-se .element-wrap, .e-se h1.e-color {color:#C06FCE;}
.e-se .element-pipe {background: linear-gradient(90deg, #E1A8E9 0%, #C06FCE 100%);}
.e-se.vip-content h3 {color:#C06FCE;}
.e-se.vip-content .button {color:#C06FCE; border-color:#C06FCE;}
.e-se.vip-content .button:hover {background:#C06FCE;}
.e-se.element-list-item {border-color:#C06FCE;}
.e-i .element, .e-i .symbol {background: linear-gradient(180deg, #6DD6E0 0%, #3BADBE 100%);}
.e-i .element a, .e-i .element-wrap, .e-i h1.e-color {color:#3BADBE;}
.e-i .element-pipe {background: linear-gradient(90deg, #6DD6E0 0%, #3BADBE 100%);}
.e-i.vip-content h3 {color:#3BADBE;}
.e-i.vip-content .button {color:#3BADBE; border-color:#3BADBE;}
.e-i.vip-content .button:hover {background:#3BADBE;}
.e-i.element-list-item {border-color:#3BADBE;}
.e-cu .element, .e-cu .symbol {background: linear-gradient(180deg, #E9B89F 0%, #DF885C 100%);}
.e-cu .element a, .e-cu .element-wrap, .e-cu h1.e-color {color:#DF885C;}
.e-cu .element-pipe {background: linear-gradient(90deg, #E9B89F 0%, #DF885C 100%);}
.e-cu.vip-content h3 {color:#DF885C;}
.e-cu.vip-content .button {color:#DF885C; border-color:#DF885C;}
.e-cu.vip-content .button:hover {background:#DF885C;}
.e-cu.element-list-item {border-color:#DF885C;}
.e-sn .element, .e-sn .symbol {background: linear-gradient(180deg, #8885D0 0%, #403E69 100%);}
.e-sn .element a, .e-sn .element-wrap, .e-sn h1.e-color {color:#403E69;}
.e-sn .element-pipe {background: linear-gradient(90deg, #8885D0 0%, #403E69 100%);}
.e-sn.vip-content h3 {color:#403E69;}
.e-sn.vip-content .button {color:#403E69; border-color:#403E69;}
.e-sn.vip-content .button:hover {background:#403E69;}
.e-sn.element-list-item {border-color:#403E69;}
.e-mo .element, .e-mo .symbol {background: linear-gradient(180deg, #D59EB2 0%, #BF557B 100%);}
.e-mo .element a, .e-mo .element-wrap, .e-mo h1.e-color {color:#BF557B;}
.e-mo .element-pipe {background: linear-gradient(90deg, #D59EB2 0%, #BF557B 100%);}
.e-mo.vip-content h3 {color:#BF557B;}
.e-mo.vip-content .button {color:#BF557B; border-color:#BF557B;}
.e-mo.vip-content .button:hover {background:#BF557B;}
.e-mo.element-list-item {border-color:#BF557B;}
.e-v .element, .e-v .symbol {background: linear-gradient(180deg, #FFCB74 0%, #F5A623 100%);}
.e-v .element a, .e-v .element-wrap, .e-v h1.e-color {color:#F5A623;}
.e-v .element-pipe {background: linear-gradient(90deg, #FFCB74 0%, #F5A623 100%);}
.e-v.vip-content h3 {color:#F5A623;}
.e-v.vip-content .button {color:#F5A623; border-color:#F5A623;}
.e-v.vip-content .button:hover {background:#F5A623;}
.e-v.element-list-item {border-color:#F5A623;}
.e-sb .element, .e-sb .symbol {background: linear-gradient(180deg, #9CB3CE 0%, #436388 100%);}
.e-sb .element a, .e-sb .element-wrap, .e-sb h1.e-color {color:#436388;}
.e-sb .element-pipe {background: linear-gradient(90deg, #9CB3CE 0%, #436388 100%);}
.e-sb.vip-content h3 {color:#436388;}
.e-sb.vip-content .button {color:#436388; border-color:#436388;}
.e-sb.vip-content .button:hover {background:#436388;}
.e-sb.element-list-item {border-color:#436388;}
.e-cr .element, .e-cr .symbol {background: linear-gradient(180deg, #92C897 0%, #5FA165 100%);}
.e-cr .element a, .e-cr .element-wrap, .e-cr h1.e-color {color:#5FA165;}
.e-cr .element-pipe {background: linear-gradient(90deg, #92C897 0%, #5FA165 100%);}
.e-cr.vip-content h3 {color:#5FA165;}
.e-cr.vip-content .button {color:#5FA165; border-color:#5FA165;}
.e-cr.vip-content .button:hover {background:#5FA165;}
.e-cr.element-list-item {border-color:#5FA165;}
.e-li .element, .e-li .symbol {background: linear-gradient(180deg, #FFBFDC 0%, #EC69A4 100%);}
.e-li .element a, .e-li .element-wrap, .e-li h1.e-color {color:#EC69A4;}
.e-li .element-pipe {background: linear-gradient(90deg, #FFBFDC 0%, #EC69A4 100%);}
.e-li.vip-content h3 {color:#EC69A4;}
.e-li.vip-content .button {color:#EC69A4; border-color:#EC69A4;}
.e-li.vip-content .button:hover {background:#EC69A4;}
.e-li.element-list-item {border-color:#EC69A4;}
.e-ag .element, .e-ag .symbol {background: linear-gradient(180deg, #000000 0%, #656768 100%);}
.e-ag .element a, .e-ag .element-wrap, .e-ag h1.e-color {color:#656768;}
.e-ag .element-pipe {background: linear-gradient(90deg, #000000 0%, #656768 100%);}
.e-ag.vip-content h3 {color:#656768;}
.e-ag.vip-content .button {color:#656768; border-color:#656768;}
.e-ag.vip-content .button:hover {background:#656768;}
.e-ag.element-list-item {border-color:#656768;}
.e-mn .element, .e-mn .symbol {background: linear-gradient(180deg, #23DC7F 0%, #22905A 100%);}
.e-mn .element a, .e-mn .element-wrap, .e-mn h1.e-color {color:#22905A;}
.e-mn .element-pipe {background: linear-gradient(90deg, #23DC7F 0%, #22905A 100%);}
.e-mn.vip-content h3 {color:#22905A;}
.e-mn.vip-content .button {color:#22905A; border-color:#22905A;}
.e-mn.vip-content .button:hover {background:#22905A;}
.e-mn.element-list-item {border-color:#22905A;}
.e-cd .element, .e-cd .symbol {background: linear-gradient(180deg, #E10707 0%, #920808 100%);}
.e-cd .element a, .e-cd .element-wrap, .e-cd h1.e-color {color:#920808;}
.e-cd .element-pipe {background: linear-gradient(90deg, #E10707 0%, #920808 100%);}
.e-cd.vip-content h3 {color:#920808;}
.e-cd.vip-content .button {color:#920808; border-color:#920808;}
.e-cd.vip-content .button:hover {background:#920808;}
.e-cd.element-list-item {border-color:#920808;}
.e-in .element, .e-in .symbol {background: linear-gradient(180deg, #B3B3FF 0%, #6666FF 100%);}
.e-in .element a, .e-in .element-wrap, .e-in h1.e-color {color:#6666FF;}
.e-in .element-pipe {background: linear-gradient(90deg, #B3B3FF 0%, #6666FF 100%);}
.e-in.vip-content h3 {color:#6666FF;}
.e-in.vip-content .button {color:#6666FF; border-color:#6666FF;}
.e-in.vip-content .button:hover {background:#6666FF;}
.e-in.element-list-item {border-color:#6666FF;}
.e-w .element, .e-w .symbol {background: linear-gradient(180deg, #F4F47B 0%, #91B648 100%);}
.e-w .element a, .e-w .element-wrap, .e-w h1.e-color {color:#91B648;}
.e-w .element-pipe {background: linear-gradient(90deg, #F4F47B 0%, #91B648 100%);}
.e-w.vip-content h3 {color:#91B648;}
.e-w.vip-content .button {color:#91B648; border-color:#91B648;}
.e-w.vip-content .button:hover {background:#91B648;}
.e-w.element-list-item {border-color:#91B648;}
.e-te .element, .e-te .symbol {background: linear-gradient(180deg, #E1E161 0%, #BEBE1C 100%);}
.e-te .element a, .e-te .element-wrap, .e-te h1.e-color {color:#BEBE1C;}
.e-te .element-pipe {background: linear-gradient(90deg, #E1E161 0%, #BEBE1C 100%);}
.e-te.vip-content h3 {color:#BEBE1C;}
.e-te.vip-content .button {color:#BEBE1C; border-color:#BEBE1C;}
.e-te.vip-content .button:hover {background:#BEBE1C;}
.e-te.element-list-item {border-color:#BEBE1C;}
.e-re .element, .e-re .symbol {background: linear-gradient(180deg, #23AA78 0%, #048545 100%);}
.e-re .element a, .e-re .element-wrap, .e-re h1.e-color {color:#048545;}
.e-re .element-pipe {background: linear-gradient(90deg, #23AA78 0%, #048545 100%);}
.e-re.vip-content h3 {color:#048545;}
.e-re.vip-content .button {color:#048545; border-color:#048545;}
.e-re.vip-content .button:hover {background:#048545;}
.e-re.element-list-item {border-color:#048545;}
.e-pb .element, .e-pb .symbol {background: linear-gradient(180deg, #3366FF 0%, #0000E3 100%);}
.e-pb .element a, .e-pb .element-wrap, .e-pb h1.e-color {color:#0000E3;}
.e-pb .element-pipe {background: linear-gradient(90deg, #3366FF 0%, #0000E3 100%);}
.e-pb.vip-content h3 {color:#0000E3;}
.e-pb.vip-content .button {color:#656768; border-color:#0000E3;}
.e-pb.vip-content .button:hover {background:#0000E3;}
.e-pb.element-list-item {border-color:#0000E3;}
.e-bi .element, .e-bi .symbol {background: linear-gradient(180deg, #FFCCFF 0%, #FF66FF 100%);}
.e-bi .element a, .e-bi .element-wrap, .e-bi h1.e-color {color:#FF66FF;}
.e-bi .element-pipe {background: linear-gradient(90deg, #FFCCFF 0%, #FF66FF 100%);}
.e-bi.vip-content h3 {color:#FF66FF;}
.e-bi.vip-content .button {color:#FF66FF; border-color:#FF66FF;}
.e-bi.vip-content .button:hover {background:#FF66FF;}
.e-bi.element-list-item {border-color:#FF66FF;}
.e-zn .element, .e-zn .symbol {background: linear-gradient(180deg, #9BFBFB 0%, #5DD4D4 100%);}
.e-zn .element a, .e-zn .element-wrap, .e-zn h1.e-color {color:#5DD4D4;}
.e-zn .element-pipe {background: linear-gradient(90deg, #9BFBFB 0%, #5DD4D4 100%);}
.e-zn.vip-content h3 {color:#5DD4D4;}
.e-zn.vip-content .button {color:#5DD4D4; border-color:#5DD4D4;}
.e-zn.vip-content .button:hover {background:#5DD4D4;}
.e-zn.element-list-item {border-color:#5DD4D4;}
.e-default .element, .e-default .symbol {background: linear-gradient(0deg, #000000 0%, #656768 100%);}
.e-default .element a, .e-default .element-wrap, .e-default h1.e-color {color:#656768;}
.e-default .element-pipe {background: linear-gradient(90deg, #000000 0%, #656768 100%);}
.e-default.vip-content h3 {color:#656768;}
.e-default.vip-content .button {color:#656768; border-color:#656768;}
.e-default.vip-content .button:hover {background:#656768;}
.e-default.element-list-item {border-color:#656768;}
/* END of Chemical Elements Coloring */
/************************************************
* PAGINE *
************************************************/
/* ====== PAGINA list-element */
body.page-list-elements {}
/* ====== PAGINA vip */
body.page-vip {}
.vip-content {margin-top:40px;}
.vip-content h1 {margin-bottom:20px;}
.vip-content .scheda-block {border-top:1px solid #ddd; padding-top:15px; padding-bottom:30px; }
.vip-content .top-scheda h3 {font-size:16px; margin-bottom:6px;}
.vip-content .top-scheda.cta-scheda {margin-top:0px; margin-bottom:20px;}
.vip-content .top-scheda.cta-scheda .button:hover {color:#fff;}
.vip-content .top-scheda.cta-scheda p.nota {color:#9B9B9B; font-size:13px; margin:10px 0;}
.vip-content .bottom-scheda {margin-top:20px;}
.vip-content .bottom-scheda h2 {font-size:25px; font-weight:normal; color:#000; margin:0;}
.vip-content .bottom-scheda h3 {font-size:13px;}
.vip-content .bottom-scheda p {margin:10px 0 0; font-size:13px; color:#000;}
.vip-content .sidebar {}
/*.vip-content .sidebar .element a {background-color: #F9F9F9;}*/
.vip-content .sidebar-wrapper {padding:40px 20px 20px; background: #F9F9F9; position:relative;}
.vip-content .sidebar h3 {color:#4a4a4a; font-size:18px; padding-right:60px; }
.vip-content .sidebar .small-elements {position:absolute; top:35px; right:16px;}
.vip-content .sidebar .small-elements .element .simbolo {font-weight:bold;}
.vip-content .sidebar ul {margin:20px 0;}
.vip-content .sidebar ul li {border-bottom:1px solid #ddd;}
.vip-content .sidebar ul li a {text-decoration:none; font-size:13px; color:#000; display:block; padding:8px 0;}
.vip-content .sidebar ul li a span {display:none;}
.vip-content .sidebar ul li a:hover {font-weight:bold;}
.vip-content .sidebar ul li a:hover span {display:inline-block; width:11px; height:10px; background-image:url("../images/arrow-list.svg");}
.vip-content .sidebar p {font-size:13px; color:#000;}
.vip-content .sidebar p a {color:#000; font-weight:normal; text-decoration: none;}
/*.vip-content .sidebar ul li a:hover:before {content:"\2192"; margin-right:5px;}*/
/* .contact-row */
.contact-row {padding:50px 0 30px; background-color: #E4E4E4;}
.contact-row h3, .contact-row p {text-align:center;}
.contact-row p.subtitle {margin-top:0; margin-bottom:30px;}
.contact-row h3 {font-weight:normal; color:#000;}
.contact-row form p {text-align:left;}
.contact-row .f-email, .contact-row .f-firm {width:48%; float:left;}
.contact-row .f-phone, .contact-row .f-subject {width:48%; float:right;}
.contact-row .button {border-color:#4A4A4A; background:transparent; color:#4A4A4A; cursor:pointer; }
.contact-row .button:hover {background:#4a4a4a; color:#fff;}
/* slider-small-elements */
.slider-small-elements {padding:60px 0 60px;}
.slider-small-elements h3 {font-weight:normal; color:#000;}
.slider-small-elements .small-slider {margin-top:20px;}
.slider-small-elements .button {border: 1px solid #4A4A4A; color:#4A4A4A; margin-top:15px;}
/* ====== PAGINA group */
body.page-group {}
.group-content {margin-top:60px;}
.top-group {margin-bottom:60px;}
.top-group h1 {font-size:60px;}
.top-group .element-pipe {display:block; width:50px; height:5px; margin:10px 0 20px;}
/* ====== PAGINA about */
body.page-about {}
.page-about .title-bar {padding-bottom:0;}
.page-about .title-bar h2 {font-size:48px; font-weight:normal; padding:0 300px;}
.page-about .title-bar p {margin:20px 100px 0px;}
.page-about .title-bar p.small {font-size:12px; margin-bottom:20px;}
.page-about .title-bar .button {padding:10px 20px; font-size:14px; margin:0 12px;}
.page-about .about-nav {padding-bottom:60px; padding-top:30px;}
.page-about .about-nav.stickytop {background: linear-gradient(149.03deg, #77BB5B 0%, #197CBE 100%); padding-bottom:20px; padding-top:20px; width:100%; position:fixed; top:50px; left:0; z-index:999; -webkit-box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.3); box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.3);}
/* .about-map */
.about-map .column {padding-right:1rem; padding-left:1rem;}
.about-map .column-block {text-align:center;}
.about-map .map-wrapper {padding:16px; border: 2px solid; border-image: linear-gradient(149.03deg, #77BB5B 0%, #197CBE 100%); border-image-slice: 2;}
.about-map .map-wrapper:hover {border: 4px solid; border-image: linear-gradient(149.03deg, #77BB5B 0%, #197CBE 100%); border-image-slice: 2; padding:14px;}
.about-map .column-block p {margin:10px 0;}
.about-map .column-block a {text-decoration:none; color:#4a4a4a;}
/* .management */
.management {margin:60px auto; }
.management-slider-wrapper {padding:10px 30px 0px;}
.management-slider {}
.management-slider h3 {font-size:16px; margin:10px 0 5px;}
.management-slider .pipe {display:block; height: 6px; width: 22px; border-radius: 4.5px; background: linear-gradient(188.42deg, #B4EC51 0%, #429321 100%);}
.management-slider .m-title {font-size:12px; color:#000; margin:10px 0 0px;}
.management-slider .m-email {margin:0; padding:0;}
.management-slider .m-email a {font-size:10px; display:block; color:#000; text-decoration:none; padding:0; padding-left:18px; background:url("../images/ico-email.png") 0 1px no-repeat; background-size:13px 11px; line-height:13px;}
.management-slider.owl-theme .owl-nav .owl-prev { top:76px; left:-30px;}
.management-slider.owl-theme .owl-nav .owl-next { top:76px; right:-30px;}
/* .storia */
.storia {margin:60px auto 20px; background-color: #EAEAEA; padding-top:40px; padding-bottom:40px;}
.storia .storia-map {margin-right:40px;}
.storia h3 {font-size:36px; margin-top:35px;}
.storia .button {color:#4565A1; border-color:#4565A1;}
/* .history */
.history { margin:60px auto 20px; background-color: #EAEAEA; padding-top:40px; padding-bottom:40px; }
.history .history-map { margin-right:40px; }
.history h3 { font-size:36px; margin-top:35px; }
.history .button { color:#4565A1; border-color:#4565A1; }
/* .regulation */
.regulation {margin:0px auto 100px; color:#fff; text-align:center; }
.regulation ul li {display:inline-block; font-size:12px; margin:0 30px;}
.regulation ul li a {padding-left:20px; background:url("../images/ico-svg/ico-check.svg") 0 2px no-repeat; color:#fff; text-decoration:none;}
.regulation .row .columns .reg-1col-wrap {background: linear-gradient(149.03deg, #77BB5B 0%, #197CBE 100%); padding-top:35px; padding-bottom:35px;}
.regulation.reg-2-col .row .columns .reg-2col-wrap {background: linear-gradient(149.03deg, #77BB5B 0%, #197CBE 100%); padding:35px;}
.regulation.reg-2-col ul li {margin:0 12px;}
/* .certifications */
.about-certificates { background-color: #fff; padding-top: 80px; padding-bottom: 80px; }
.about-certificates .about-item { padding: 20px; border: 1px solid #E2E2E2; border-radius: 3px; }
.about-certificates p { padding: 10px 0px; font-size: 16px; }
.about-certificates .about-item p { padding: 0px; font-size: 13px; }
.about-certificates .button { padding: 8px 20px; font-size: 12px; background-color: #999999; border: solid thin #999999; color: #FFFFFF; }
.about-certificates .button:hover { padding: 8px 20px; font-size: 12px; background-color: #FFFFFF; color: #999999; }
.about-certificates .owl-carousel .owl-item img { max-height: 80px; max-width: 100%; width: auto; margin: auto; }
.about-certificates .owl-theme .owl-dots .owl-dot span { border: 0px; background: #D8D8D8; }
.about-certificates .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #0F73B2; }
.about-certificates .owl-dots { margin-top: 15px }
.about-certificates .owl-carousel { text-align: left }
@media screen and (max-width: 1024px) {
.about-certificates .owl-carousel .owl-item img { max-width: 100px; }
.about-certificates .button-container { text-align: center; }
}
@media screen and (max-width: 640px) {
.about-certificates .owl-stage { left: -30px; }
}
/* .offices OLD
.offices { margin:60px auto 10px; }
.office { margin:0px auto 30px; color:#fff; text-align:center; }
.office.office-2-col .row .columns .office-2col-wrap { background: linear-gradient(149.03deg, #77BB5B 0%, #197CBE 100%); margin:0px auto; padding:15px; }
*/
/* .offices DEBUG
.office { border-style: solid; border-width: 1px; border-color: #FFCC00; }
.office.office-2-col .row .columns .office-2col-wrap { border-style: solid; border-width: 1px; border-color: #FF0000; }
*/
/* offices FAB
.offices { margin: 60px auto 10px; }
.office { margin: 0px auto 0px; color: #fff; text-align: center; }
.office p { margin: 0px; padding: 0px; }
.office.office-2-col .row .columns .office-2col-wrap { background: linear-gradient(149.03deg, #77BB5B 0%, #197CBE 100%); margin: 0px auto 30px; padding:30px; }
*/
/* .certificates */
.certificates { margin: 60px auto; }
/* ====== PAGE contact/faq */
.form-contatti form { padding:40px 120px 20px 60px;}
.form-contatti form p.privacy {margin:0; padding:3px;}
.form-contatti form p.privacy label {line-height:1.2;}
.form-contatti form p.privacy label input {float:left; margin-right:10px; margin-bottom:20px; margin-top:3px;}
.form-contatti form p.privacy label span.nota {display:inline;}
.form-contatti form.main-contacts .btn-send {float:right;}
.main-contacts .button.btn-send {background: linear-gradient(167.34deg, #77BB5B 0%, #197CBE 100%);}
.main-contacts .button.btn-send:hover {color:#fff; background: linear-gradient(167.34deg, #197CBE 0%, #77BB5B 100%); cursor:pointer;}
.form-contatti .address .box-indirizzo {background:url("../images/bg_address_map.jpg"); background-size:cover;}
.form-contatti .address .indirizzo {padding:200px 30px 0; text-align:center; color:#fff; font-style: normal; font-size:15px; font-weight:bold;}
.form-contatti .address .indirizzo .address-logo {background:url("../images/todini_logo_white.svg"); background-repeat:no-repeat; background-size:100%; width:165px; height:36px; margin:20px auto;}
.form-contatti .ico-social {margin-top:20px;}
.form-contatti .ico-social .ico-li {display:inline-block; width:27px; height:26px; margin:auto; background:url("../images/ico-svg/logo-li.svg"); text-indent:-99999px; margin:8px;}
.form-contatti .ico-social .ico-fb {display:inline-block; width:26px; height:26px; margin:auto; background:url("../images/ico-svg/logo-fb.svg"); text-indent:-99999px; margin:8px;}
/*
.office img { border-style: solid; border-width: 1px; border-color: #FFCC00; }
.office span { border-style: solid; border-width: 1px; border-color: #FF0000; }
*/
.main-content .office {padding-top: 40px; padding-bottom:0px;}
.main-content .office a {display:inline-block; width:100%; height:auto; min-height:35px; position:relative; color:#000; text-decoration:none;}
.main-content .office img {display:block; position:absolute;}
.main-content .office span {font-size:16px; display:inline-block; line-height:1.5; padding-left:50px;}
/* FAQ closed �
.faq {padding:50px;}
.faq h2 {color:#000; font-size:32px; font-weight:bold;}
.faq dl {margin-bottom:20px; padding-bottom:10px; border-bottom:1px solid #dfdfdf;}
.faq dt {border-top:1px solid #dfdfdf; padding-top:10px; margin-top:10px; font-weight:bold; padding-left:15px; background:url("../images/faq-arr-right.png") 0 18px no-repeat;}
.faq dt:first-child {border-top:0;}
.faq dt:hover {cursor:pointer;}
.faq dt.open {background-image:url("../images/faq-arr-down.png");}
.faq dd {display:none; margin:0; padding:10px 10px 10px 16px;}
*/
.faq {padding:50px;}
.faq h2 {color:#000; font-size:32px; font-weight:bold;}
.faq dl {margin-bottom:20px; padding-bottom:10px; border-bottom:1px solid #dfdfdf;}
.faq dt {border-top:1px solid #dfdfdf; padding-top:10px; margin-top:10px; font-weight:bold; padding-left:15px; background:url("../images/faq-arr-down.png") 0 18px no-repeat;}
.faq dt:first-child {border-top:0;}
.faq dt:hover {cursor:pointer;}
.faq dt.open {background-image:url("../images/faq-arr-right.png");}
.faq dd {margin:0; padding:10px 10px 10px 16px;}
/* ====== PAGINA languages */
body.page-languages {}
body.page-languages h3 {font-size:16px; font-weight:bold;}
body.page-languages .main-content {padding-top:40px; padding-bottom:40px;}
.main-content .flag {padding-top: 10px; padding-bottom:0px;}
.main-content .flag a {display:inline-block; width:100%; height:auto; min-height:35px; position:relative; color:#000; text-decoration:none;}
.main-content .flag img {display:block; position:absolute;}
.main-content .flag span {font-size:13px; display:inline-block; line-height:1.2; padding-left:40px;}
/************************************************
* ADDENDUM *
************************************************/
.privacy-policy h1 {
font-size: 24px;
text-align: left;
color:#4a4a4a; }
.privacy-policy h2 {
font-size: 18px;
text-align: left;
color:#4a4a4a;
margin: 10px 0;
#border: 2px solid red;
}
.privacy-policy h3 {
font-size: 16px;
text-align: left;
color:#4a4a4a;
margin: 10px 0;
#border: 2px solid red;
}
.privacy-policy p {
font-size: 16px;
text-align: left;
color:#4a4a4a;
#border: 2px solid red;
}
.privacy-policy p.zeromargin {
margin: 0;
}
.privacy-policy ul {
list-style-type: disc;
margin: 16px 0px;
padding: 0 0 0 40px;
}
.cookie-policy h1 {
font-size: 24px;
text-align: left;
color:#4a4a4a; }
.cookie-policy h2 {
font-size: 18px;
text-align: left;
color:#4a4a4a;
margin: 10px 0;
#border: 2px solid red;
}
.cookie-policy h3 {
font-size: 16px;
text-align: left;
color:#4a4a4a;
margin: 10px 0;
#border: 2px solid red;
}
.cookie-policy p {
font-size: 16px;
text-align: left;
color:#4a4a4a;
#border: 2px solid red;
}
.cookie-policy p.zeromargin {
margin: 0;
}
.cookie-policy ul {
list-style-type: disc;
margin: 16px 0px;
padding: 0 0 0 40px;
}
/* cookie */
.cookie {width:100%; background:rgba(0,0,0,.7); position:fixed; bottom:0; display:none; z-index:999; padding: 1em;}
.cookie p { color:#fff; text-align:center;}
.cookie div {color:#fff; text-align:center;}
.cookie p a {color:#ccc;}
/* hamburger menu dinamico */
#nav-icon2 { cursor: pointer; height: 40px; position: relative; transform: rotate(0deg); transition: all 0.15s ease-in-out 0s; width: 40px; float:right; margin-top:20px; margin-right:20px;} #nav-icon2 span {display: block; height: 4px; opacity: 1; position: absolute; transform: rotate(0deg); transition: all 0.15s ease-in-out 0.1s; width: 50%; }
#nav-icon2 span:nth-child(2n) { left: 50%; background: linear-gradient(90deg, #77BB5B 0%, #197CBE 100%);} #nav-icon2 span:nth-child(2n+1) { left: 0; background:#77BB5B;} #nav-icon2 span:nth-child(2) {width:35%;} #nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) { top: 0; } #nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) { top: 12px; } #nav-icon2 span:nth-child(5) { top: 24px; background: linear-gradient(90deg, #77BB5B 10%, #197CBE 90%);} #nav-icon2 span:nth-child(6) {display:none;} #nav-icon2.open span:nth-child(1), #nav-icon2.open span:nth-child(6) { transform: rotate(45deg); } #nav-icon2.open span:nth-child(2), #nav-icon2.open span:nth-child(5) { transform: rotate(-45deg); } #nav-icon2.open span:nth-child(1) { left: 5px; top: 7px; } #nav-icon2.open span:nth-child(2) { left: calc(50% - 5px); top: 7px; } #nav-icon2.open span:nth-child(3) { left: -50%; opacity: 0; } #nav-icon2.open span:nth-child(4) { left: 100%; opacity: 0; } #nav-icon2.open span:nth-child(5) { left: 5px; top: 16px; } #nav-icon2.open span:nth-child(6) { left: calc(50% - 5px); top: 16px; display:block; } #nav-icon2.torna span:nth-child(1), #nav-icon2.torna span:nth-child(6) { transform: rotate(45deg); } #nav-icon2.torna span:nth-child(2), #nav-icon2.torna span:nth-child(5) { transform: rotate(-45deg); } #nav-icon2.torna span:nth-child(1) { left: 5px; opacity: 0; top: 7px; } #nav-icon2.torna span:nth-child(2) { left: calc(50% - 38px); top: 7px; } #nav-icon2.torna span:nth-child(3) { left: -50%; opacity: 0; } #nav-icon2.torna span:nth-child(4) { left: 0; top: 18px; width: 70%; } #nav-icon2.torna span:nth-child(5) { left: 5px; opacity: 0; top: 29px; } #nav-icon2.torna span:nth-child(6) { left: calc(50% - 38px); top: 29px; } #nav-icon2.open span:nth-child(2) {width:50%;}
/**
* Owl Carousel v2.2.1 - nav & dot style
*/
.owl-theme .owl-nav { -webkit-tap-highlight-color: transparent; }
.owl-theme .owl-nav [class*='owl-'] { width: 24px; height: 24px; display: inline-block; cursor: pointer; }
.owl-theme .owl-nav [class*='owl-']:hover { opacity: .8; text-decoration: none; }
.owl-theme .owl-nav .disabled { opacity: 0.5; cursor: default; }
.owl-theme .owl-nav .owl-prev { position: absolute; top:12px; left: -40px; background-image: url("../images/prev.svg"); }
.owl-theme .owl-nav .owl-next { position: absolute; top:12px; right: -20px; background-image: url("../images/next.svg"); }
.owl-theme .owl-dots {text-align: center; -webkit-tap-highlight-color: transparent; }
.owl-theme .owl-dots .owl-dot { display: inline-block; zoom: 1; *display: inline; }
.owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; border:1px solid #fff; margin: 5px 7px; background: transparent; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; border-radius: 30px; }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #fff; }
/**
* TABS foundation
*/
.tabs {margin: 60px 0 0; list-style-type: none; }
.tabs::before, .tabs::after {
display: table;
content: ' ';
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-order: 1;
order: 1; }
.tabs::after {
clear: both; }
.tabs-title {
float: left; }
.tabs-title > a {
display: block;
text-decoration:none;
color:#4a4a4a;
padding: 10px 0 12px;
margin-right:40px;
line-height: 1;}
.tabs-title > a:hover {border-bottom: 2px solid #eee; }
.tabs-title > a:focus, .tabs-title > a[aria-selected='true'] {border:0; border-bottom: 2px solid; border-image: linear-gradient(149.03deg, #77BB5B 0%, #197CBE 100%); border-image-slice: 2; outline:0;}
.tabs-content {
box-shadow: 0 2px 44px 0 rgba(0,0,0,0.18);
transition: all 0.5s ease; }
.tabs-panel {
display: none;
padding:0; }
.tabs-panel[aria-hidden="false"] {
display: block; }
.tabs-panel.is-active {display:block;}
/* debug */
#elements-slide {display:none;} /* HP with double slider-wall */
.form-widget-container
{
border: solid;
padding: 5px 10px;
position: fixed;
z-index: 1001;
background: #a0a0a0;
text-align: center;
}
.form-widget-container span
{
cursor: pointer;
}
.form-widget-container.top-right
{
top: 10px;
right: 10px;
}
.form-widget-container.top-center
{
top: 10px;
right: 50%;
transform: translateX(50%);
}
.form-widget-container.top-left
{
top: 10px;
left: 10px;
}
.form-widget-container.center-right
{
top: 50%;
transform: translateY(-50%);
right: 10px;
}
.form-widget-container.center
{
top: 50%;
right: 50%;
transform: translate(50%, -50%);
}
.form-widget-container.center-left
{
top: 50%;
transform: translateY(-50%);
left: 10px;
}
.form-widget-container.down-right
{
bottom: 10px;
right: 10px;
}
.form-widget-container.down-center
{
bottom: 10px;
right: 50%;
transform: translateX(50%);
}
.form-widget-container.down-left
{
bottom: 10px;
left: 10px;
}