@import url(https://fonts.googleapis.com/css?family=Dosis:400,500,600,700,800&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700&subset=latin,latin-ext);

/* ==========================================================================
  Stili del Progetto
   ========================================================================== */

html {height: 100%;}
body {
    height: 100%;
    font-family:  'Dosis', Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: #242424;
    line-height: 1.5em;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background: #fff;
}

img {border: 0;}
iframe {border: 0;}

/* sistema form */
form {margin: 0;}
fieldset {border: 0; margin: 0; padding: 0;}

.nocompiled {border: 1px solid #f00 !important;}
.nocompiled2 {padding: 0 17px 0 0; color: #f00;}

a {color: #000; text-decoration: underline; outline: none !important;}
a:hover {color: #30363d; text-decoration: none;}

p {margin: 0 0 2em 0;}

strong, b {font-weight: 700;}

h1,h2,h3,h4,h5,h6 {font-family: 'Montserrat', sans-serif; color: #000; clear: both;}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {text-decoration: none;}

h1{ font-size: 2em;}
h2{ font-size: 1.8em;}
h3{ font-size: 1.7em;}
h4{ font-size: 1.6em;}
h5{ font-size: 1.4em;}
h6{ font-size: 1.2em;}

ol {margin:0; padding: 0; line-height:normal;}
ul {margin:0; padding: 0; line-height:normal;}
li {margin:0; padding: 0; line-height:normal;}

dl, dt, dd {margin:0; padding: 0;}

.noborder {border: 0px solid #FFF !important;}
.marginclear {margin-right: 0px !important;}
.marginclear-bottom {margin-bottom: 0px !important;}
.paddingclear {padding-right: 0px !important;}
.bgclear {background: none !important;}
.clear {clear: both !important;}

.alignDx {text-align: right !important;}
.alignCenter {text-align: center !important;}
.alignJustify {text-align: justify !important;}
.posrelative {position: relative}

.floatSx {float: left; }
.floatDx {float: right; }

.title-hide {text-indent: -9999px; font-size: 0; height: 0; margin: 0;}
td.nowrap {text-align: right; white-space: nowrap;}

nav ul {list-style: none;}

header *, .content.cat-prod-home *, .content.news *, .content.prod *, .content.proddet *,  .content.page *, .visual *, footer * {
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-out;
}

/* ==========================================================================
  HEADER
   ========================================================================== */

header {
    position: static;
    top: 0;
    left: 0;
    z-index: 50;
    min-height: 110px;
    width: 100%;
    border-bottom: 1px solid #ddd;
    background: #fff;
}

.logo {position: absolute; top: 50px; z-index: 110;}
.logo-eshop {position: absolute; top: 5px; z-index: 110;}
header .toggle {position: absolute; right: 0}

/* Menu */
.menu{position: absolute; top: 0; right: 0; z-index: 100; width: 100%; background: #c00;}
.mainMenu {list-style: none; float: right;}
.mainMenu li {float: left; position:relative; margin-right: 25px; padding: 10px 0; font-size: 0.95em; font-weight: 600; text-transform: uppercase;}
.mainMenu li:last-child {margin-right: 0;}
.mainMenu li a {color: #fff; text-decoration: none;}
.mainMenu li a:hover{text-decoration: underline;}

/* Shop Menu */
.shop-header {position: absolute; top: 40px; right: 0; z-index: 105; width: 100%;}
.shopMenu {list-style: none; float: right;}
.shopMenu li {display: inline-block; vertical-align: middle; padding: 20px 50px 20px 0; position:relative; font-size: 1.2em; font-weight: 600; text-transform: uppercase;}
.shopMenu li.cart {padding: 20px 0 20px 45px; background: url(../images/ico-cart.png) center left no-repeat;}
.shopMenu li.cart a {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.shopMenu li.cart a span {position: absolute; left: -25px; top: 10px; height: 22px; width: 22px; padding: 2px; border-radius: 30px; font-size: 0.7em; color: #fff; text-align: center; background: #2e2e2e;}
.shopMenu li a {color: #2e2e2e; text-decoration: none;}
.shopMenu li a:hover{text-decoration: underline;}

/*toggle menu*/
#nav-toggle {display: block; position: absolute; z-index: 110; width: 40px; height: 40px; top: 12px !important; padding: 11px; right: 16px; background: #fff; }
#nav-toggle {cursor: pointer;}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {cursor: pointer; height: 3px; width: 18px; background: #c00; position: absolute; top: 19px; display: block; content: ''; }
#nav-toggle:hover span, #nav-toggle:hover span:before, #nav-toggle:hover span:after { background: #c00; }
#nav-toggle span:before { top: -7px; }
#nav-toggle span:after { top: 7px; }
#nav-toggle.active span, #nav-toggle.active span:before, #nav-toggle.active span:after { background: #c00;}

@media (min-width: 992px) {
    .menu.collapse {
        display: block!important;
        height: auto!important;
        overflow: visible!important;
        visibility: visible!important;
    }
}
@media (max-width: 991px)  {
header {border-top: 40px solid #c00}
.logo {top: 10px;}
.logo-eshop {top: -35px;}
.menu {position: static; height: auto; background: #c00; margin-top: 80px;}
.mainMenu {float: none; padding: 0 0;}
.mainMenu li {float: none; height: auto; margin-right: 0; padding: 8px 0 8px 0; background: none; border-bottom: 1px solid #fff}
.mainMenu li:last-child {border-bottom: 0}
.mainMenu li a {color: #fff}
.mainMenu li.anniversary {display: none;}
.shop-header {top: 10px;}
.shopMenu {margin-right: 40px;}
}
@media (max-width: 767px)  {
.logo {width: 140px; top: 20px;}
.logo img {width: 100%; height: auto;}
}

/* ==========================================================================
    GENERICI
   ========================================================================== */
.content {
 position: relative;
 min-height: 800px;
 padding: 60px 0 60px 0;
 background: #fff;
}
article, aside {margin-bottom: 20px;}
.content ul {list-style: none; padding: 0 20px 0 20px; margin-bottom: 40px}

.max{clear: both; width: 100%}
.form-control {
    color: #999;
    border-radius: 0px;
}

/* ==========================================================================
    HOME PAGE
   ========================================================================== */
.content.cat-prod-home {padding-top: 30px;}

/*Banner*/
.mainBanner-page {position: relative; padding: 30px 0; width: 100%; min-height: 240px; background:url(../images/bg-banner-pattern.png) 50% 50% #c00;}
.mainBanner {position: relative; padding: 30px 0; width: 100%;}
.mainBanner .banner {display: table; position: relative; width: 100%; height: 140px; background: url(/media/1045/banner-home-02.jpg) center center no-repeat #eee; }
.mainBanner .banner .caption {display: table-cell; vertical-align: middle; text-align: center; padding: 0 22%; width: 100%; height: 100%;}
.mainBanner .banner .caption h1 {padding-top: 20px; color: #fff; font-size: 2.4em; line-height: 1; margin-bottom: 0; text-shadow: 2px 2px 5px rgba(0,0,0,0.5)}
.mainBanner .banner .caption h1 small {font-weight: 700;  color: #fff}

@media (max-width: 991px) {
.mainBanner .banner .caption {padding: 0 20%;}
}
@media (max-width: 767px) {
.mainBanner .banner .caption {padding: 0;}
.mainBanner .banner .caption h1 {font-size: 2em;}
}


/* ==========================================================================
    PRODOTTI
   ========================================================================== */
/*App Welfare*/
.w_prod-overview .img {padding-top:0!important}
.w_prod-overview .img img{max-width:100%; height:auto}

.content.page .form-group{min-height:30px;}   
   
   /* Prodotti 
  ========================================================================== */
.content.prod {padding-top: 60px;}
.content.proddet {padding-top: 0;}

.content.prod h1, 
.content.proddet h1 {padding-top: 30px;}

.prod-breadcrumb {padding: 5px 0; margin-top: 110px; border-bottom: 1px solid #ddd; background: #f2f2f2;}
.prod-breadcrumb ul {margin: 0;}
.prod-breadcrumb ul li {display: inline-block; text-transform: uppercase; font-size: 0.75em;}
.prod-breadcrumb ul li a {display: block; position: relative; margin-right: 20px; text-decoration: none; color: #364147;}
.prod-breadcrumb ul li a:hover {color: #c00;}
.prod-breadcrumb ul li a span {font-size: 1.3em;}
.prod-breadcrumb ul li a:hover span {color: #d42530; text-decoration: none;}


/* Lista 
  ========================================================================== */
.prodList {list-style: none; margin: 0; padding: 0 !important;}
.prodList li {margin-bottom: 30px;}
.prodList li .img {position: relative; z-index: 10; overflow: hidden; text-align: center;}
.prodList li .img:before {content:''; z-index: -1; position: absolute; display: block; left: 50%; margin-left: -150px; width: 300px; height: 300px; border-radius: 300px; background: #f2f2f2;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-out;
}
.prodList li:hover .img:before {background: rgba(204,0,0,0.5); margin-left: -160px; width: 320px; height: 320px;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-out;
}
.prodList li .img img {max-width: 100%}
.prodList li .link {position: relative; z-index: 10; margin-top: -25px; text-align: center;}
.prodList li .link a {display: inline-block; width: 50px; height: 50px; border-radius: 50px; margin: 5px; padding: 10px; border: 2px solid #4c4c4c; background: #fff;}
.prodList li .link a:hover {border: 2px solid #c00; background: #c00;}
.prodList li .link a.addcart span {display: block; width: 24px; height: 24px; margin: 0 auto; background: url(../images/ico-cart-s.png) 0 0 no-repeat;}
.prodList li .link a.addcart:hover span {background-position: -24px 0;}
.prodList li .link a.more span {position: relative; display: block; width: 24px; height: 24px;}
.prodList li .link a.more span:before,
.prodList li .link a.more span:after {position: absolute; content:''; left: 1px; top: 11px; width: 24px; height: 2px; background: #4c4c4c}
.prodList li .link a.more span:after {-ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);}
.prodList li .link a.more:hover span:before,
.prodList li .link a.more:hover span:after {background: #fff}

.prodList li .txt {padding: 15px; text-align: center; min-height: 140px; overflow: hidden;}
.prodList li .txt h2 {font-family: 'Dosis'; text-transform: none; font-weight: 300; margin-bottom: 0.5em}
.prodList li .txt h2 a {color: #333; text-decoration: none;}
.prodList li .txt h2 a:hover {color: #c00;}
.prodList li .txt .price {font-size: 1.4em;}
.prodList li .txt .price span {text-decoration: line-through}


/* Dettaglio 
  ========================================================================== */
.proddet .main-img { position: relative; padding-top: 30px; text-align: center;}
.proddet .main-img img{max-width: 100%;}
.proddet .txt {position: relative; padding-top: 30px;}
.proddet .txt h1 {font-family: 'Dosis'; text-transform: none; margin-bottom: 0.5em; font-weight: 300;}
.proddet .txt h2 {font-family: 'Dosis'; text-transform: none; color: #c00; font-size: 1.4em; }
.proddet .txt .code {padding: 10px 0; margin-bottom: 30px; width: 45%; border-top: 1px solid #adadad; border-bottom: 1px solid #adadad; }
.proddet .desc ul  {list-style: circle;}
.proddet .desc ul  li{padding: 3px 0;}
.proddet .desc table{width: 100%; border-top: 3px solid #ededed;}
.proddet .desc table img {max-width: 100%;}
.proddet .desc table td {padding: 5px 0; border-bottom: 1px solid #ededed;}
.proddet .desc table td p{margin:0;}
.proddet .prodcompatibilita,
.proddet .linkvideo {padding: 10px 0;}

.proddet .link a {display: block; width: 250px; height: 50px; border-radius: 50px; margin: 5px; padding: 10px; font-size: 1.2em; font-weight: 700; text-decoration: none; border: 2px solid #4c4c4c; background: #fff;}
.proddet .link a:hover{color: #fff; border: 2px solid #c00; background: #c00;}
.proddet .prodcompatibilita a,
.proddet .linkvideo a {display: block; width: 250px; margin: 5px; font-size: 1em; color: #c00; font-weight: 700; text-decoration: none;}
.proddet .linkvideo a:hover,
.proddet .prodcompatibilita a:hover {color: #f00;}
.proddet .link a.addcart span {display: inline-block; vertical-align: middle; width: 24px; height: 24px; margin: -5px 20px 0 0; background: url(../images/ico-cart-s.png) 0 0 no-repeat;}
.proddet .link a.addcart:hover span {background-position: -24px 0;}
.proddet .prodcompatibilita a span {display: inline-block; vertical-align: middle; width: 24px; height: 24px; margin: -5px 15px 0 0; background: url(../images/ico-pdf.png) 0 0 no-repeat;}
.proddet .linkvideo a span {display: inline-block; vertical-align: middle; width: 24px; height: 24px; margin: -5px 15px 0 0; background: url(../images/ico-video.png) 0 0 no-repeat;}


/* Cart 
  ========================================================================== */
.content.cart {margin-top: 100px;}
.content.cart input[type=number] {padding: 6px 20px; color: #000;}

@media (max-width: 1199px) {
.prodList li .img:before {margin-left: -130px; width: 260px; height: 260px;}
.prodList li:hover .img:before {margin-left: -140px; width: 280px; height: 280px;}
}
@media (max-width: 991px) {
.prodList li .img:before {margin-left: -150px; width: 300px; height: 300px;}
.prodList li:hover .img:before {margin-left: -160px; width: 320px; height: 320px;}
}
@media (max-width: 767px) {
.content.prod {padding-top: 0px;}
.prodList {border-bottom: 1px solid #f2f2f2; margin: 0; float: left; width: 100%;}
.prodList li {border-top: 1px solid #f2f2f2; margin-top: -1px; margin-bottom: 0;}
.prodList li:nth-child(odd) {border-right: 1px solid #f2f2f2;}
.prodList li .img:before {display: none;}
.prodList li .link a {width: 40px; height: 40px; padding: 6px;}
.prodList li .link a.more span:before,
.prodList li .link a.more span:after {position: absolute; content:''; left: -1px; top: 11px;}
.prodList li .txt {height: 160px; overflow: hidden;}
.prodList li .txt h2 {font-size: 1.3em;}
.prodList li .txt .price {font-size: 1em;}
}

/* ==========================================================================
    PAGE
   ========================================================================== */

.content.page {position: relative; padding:30px 0;}

.content.page .h1 {position: relative; z-index: 10; padding: 15px; margin-top: -120px; background: #fff;} 
.content.page .h1 h1 {text-align: center; font-size: 1em; margin-bottom: 0; color: #000;} 
.content.page .h1 h2 {text-align: center; font-size: 0.4em; color: #c00;} 
.content.page .main-img img {max-width:100%;} 
.content.page .img {padding-top: 60px;} 
.content.page p {font-size:20px;} 
.content.page input[type=text] {font-size:16px;} 
.content.page label {font-size:18px;} 
.content.page .img img {width: 100%; height: auto} 
.content.page .txt ul li {margin-bottom: 15px;} 
.content.page .txt ul li ul {margin: 15px 0;} 
.content.page .txt ul li ul li {list-style: circle} 
.content.page .brand-logo {position:absolute; top:-80px; right:15px} 
.content.page .brand-logo img{max-height:36px;} 
.divErrorMsg{padding:5px; margin-top:10px; font-size:0.8em; color:#f00; border:1px solid #f00;}
.error{border:1px solid #f00;}
/* News
========================================================================== */

.newsList {
    list-style: none;
    margin: 0;
}
.newsList li {
    margin-bottom: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    float: left;
    width: 100%;
    border-bottom: 3px solid #006fb8;
}
.newsList .img {width: 35%; float: left; margin-right: 5%;}
.newsList .img img {width: 100%; height: auto;}
.newsList .body {width: 60%; float: left; line-height: 1.6em; overflow: hidden;}
.newsList h2.title a {color: #c00; text-decoration: none;}

/* DETTAGLIO NEWS
========================================================================== */
.dettNews .body {line-height: 1.8em; text-align: justify;}
.dettNews .img img {width: 100%;}


@media (max-width: 991px){
.newsList .img {width: 100%; float: none; margin-bottom: 20px;}
.newsList .body {width: 100%; float: none;}
}

/*.content.page article ul {padding: 0 30px;}
.content.page article ul li {padding: 5px 0; position: relative;}
.content.page article ul li:before {
    display: block;
    content:'';
    width: 20px;
    bottom: 15px;
    left: -35px;
    height: 1px;
    position: absolute;
    background: #000;
}

/* ==========================================================================
    CONTATTI
   ========================================================================== */

#geo {width: 100%; height: 100%; z-index: 10;}
#googlemap {width: 100% !important;}

/* ==========================================================================
  FOOTER
   ========================================================================== */

footer {
    position: relative;
    width: 100%;
    font-size: 0.9em;
    line-height: 1.3em;
    color: #fff;
    z-index: 15;
}
footer p {margin-bottom:1em}
footer p:last-child {margin-bottom:0}
footer ul {list-style: none;}
footer ul li {padding: 2px 0; font-size: 1.05em}
footer a {text-decoration: none; color: #fff; }
footer a:hover, footer a:active {color: #000; }
footer span {font-size: 1.2em;}
footer small {font-size: 0.7em;}


footer .bottom {padding: 10px 0; background: #c00}

#modalProgetto {font-size: 0.8em}
.modal-content {border-radius: 0;}

.listaprodhome {height: 560px;}

 /* Webkit: */
 /* Hide number picker */
 /*
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
*/  

 /* Show number picker on focus */
/* 
  input[type=number]:focus::-webkit-inner-spin-button,
  input[type=number]:focus::-webkit-outer-spin-button,
  input[type=number]:hover::-webkit-inner-spin-button,
  input[type=number]:hover::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button;
    margin: 0 2px 0 0 ;
  }
*/

/* Firefox: */
/* Hide number picker */
/*
  input[type=number] {
    -moz-appearance:textfield;
  }
*/

/* Show number picker on focus */
/*
  input[type=number]:focus,
  input[type=number]:hover {
    -moz-appearance:number-input;
  }
 */
 
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

.home-tit {
font-size: 1.3em; 
color: #C0504D;
font-style: italic;
font-weight: bold;
}
.text-italic { font-style: italic; }