/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 5-lug-2017, 9.18.36
    Author     : ovo5
*/

body{
    font-family: 'Roboto Condensed', sans-serif;
    background-color: #f7f7f7;
    color: #8b8d8d;
}


body.body-not-active {
    background-color: #fff;
}

.clear{
    clear:both;
}

.main-container {
    position:relative;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    background-color: #ffffff;
    overflow-x: hidden;
}

.main-container.fixed-height {
    max-height: 590px;
}

.header {
    width: 100%;
    text-align: center;
    padding: 70px 70px 20px;
}

a.logo {
    display: inline-block;
    max-width: 200px;
    width: 100%;
}

.nav-bar {
    max-width: 900px;
    margin: 20px auto 0;
    background-color: #F7f7f7;
}

ul {
    list-style: none;
    padding:0px;
}

li {
    display: inline-block;
    padding: 10px 30px;
    font-size: 16px;
}

li.dropdown-link {
    position: relative;
}

ul.dropdown {
    display: none;
    position: absolute;
    left: 0px;
    width: 210px;
    text-align: left;
    background-color: #F7f7f7;
    top: 42px;
    z-index: 999999;
}

ul.dropdown li {
   display: block;
}

ul.dropdown li:hover {
    background-color: #e9e9e9;
}

.content{
    text-align: center;
    
}
.content img.img-responsive {
    margin: 0 auto;
}

p{
    font-size: 16px;
}

p.intro{
    margin: 20px auto 10px;
    font-size: 16px;
    max-width: 570px;
    padding: 0 10px;
    
}

.separatore {
    max-width: 300px;
    height: 1px;
    background-color: #95989A;
    margin: 0 auto;
    width: 100%;
}

.box_carousel {
    max-width: 650px;
    width: 100%;
    margin: 0 auto;
}


.item a {
    text-decoration: none;
}

.info-carousel {
    margin-top: -20px;
    margin-bottom: 12px;
    z-index: 99;
    position: relative;
}

.box_certificazioni {
    max-width: 500px;
    margin: 70px auto;
}
p.certificato {
    font-size: 12px;
    text-transform: uppercase;
    color: #95989A;
    margin-top: 10px;
}

img.img_certificato {
    max-width: 80px;
}

.item_certificato {
    min-height: 170px;
}

img.marker {
    margin: 0 auto;
    max-width: 120px;
}

.box_rivenditori {
    background: url("../img/montagne_verdi.png") bottom no-repeat;
}

.fascia_green {
    background-color: #93c356;
}

.loghi_rivenditori {
    max-width: 500px;
    margin: 0 auto;
    padding: 25px;
}

.loghi_rivenditori img {
    padding: 0 20px;
    max-width: 200px;
    width: 100%;
    margin: 0 auto;
}

.footer {
    background-color: #8B8C8D;
    padding: 25px 150px;
}

p.txt_footer {
    color: #ffffff;
    font-size: 12px;
    font-weight: 300;
    margin-bottom: 0;
}

.h1, h1 {
    font-size: 30px;
    margin: 0 auto;
    font-weight: 300;
}

.h2, h2 {
    font-size: 30px;
    margin: 0 auto;
    font-weight: 300;
}

.red {
    color: #930c35;
}

.red-light {
    color: #eb8597;
}

.fascia-red {
    background: url("../img/fascia-rossa.png") center repeat-x;
    background-size: contain;
    max-width: 900px;
    height: 80px;
    margin: 40px auto;
    width: 100%;
}

.box_prodotti {
    max-width: 700px;
    margin: 0 auto 40px;
    text-align: left;
}

h3.title_prodotto {
    text-transform: uppercase;
    font-size: 18px;
    /*font-weight: 600;*/
}


p.descr {
    padding-right: 10px;
}
/*p.descr {
    line-height: 30px;
}*/

.separatore.red {
    margin: 40px auto;
    height: 2px;
    max-width: 350px;
    background-color: #eb8597;
    width:100%;
}

.fascia-red.bottom {
    width: 100%;
    margin-bottom: 0;
    max-width:1200px;
}

.acqua {
    color: #00afaa;
}

.acqua-light {
    color: #83c8bc;
}

.fascia-acqua {
    background: url("../img/fascia-acqua.png") center repeat-x;
    background-size: contain;
    max-width: 900px;
    height: 80px;
    margin: 40px auto;
    width: 100%;
}

.separatore.acqua {
    margin: 40px auto;
    height: 2px;
    max-width: 350px;
    background-color: #83c8bc;
    width: 100%;
}

.fascia-acqua.bottom {
    width: 100%;
    margin-bottom: 0;
    max-width:1200px;
}

.viola {
    color: #5c4f9c;
}

.viola-light {
    color: #8d85ca;
}

.fascia-viola {
    background: url("../img/fascia-viola.png") center repeat-x;
    background-size: contain;
    max-width: 900px;
    height: 80px;
    margin: 40px auto;
    width:100%;
}

.separatore.viola {
    margin: 40px auto;
    height: 2px;
    max-width: 350px;
    background-color: #8d85ca;
    width: 100%;
}

.fascia-viola.bottom {
    width: 100%;
    margin-bottom: 0;
    max-width:1200px;
}

.blu {
    color: #00609c;
}

.blu-light {
    color: #61b4e4;
}

.fascia-blu {
    background: url("../img/fascia-blu.png") center repeat-x;
    background-size: contain;
    max-width: 900px;
    height: 80px;
    margin: 40px auto;
    width:100%;
}

.separatore.blu {
    margin: 40px auto;
    height: 2px;
    max-width: 350px;
    background-color: #61b4e4;
    width:100%;
}

.fascia-blu.bottom {
    width: 100%;
    margin-bottom: 0;
    max-width: 1200px;
}

.castagna {
    color: #723c0e;
}

.castagna-light {
    color: #cfa887;
}

.fascia-castagna {
    background: url("../img/fascia-castagna.png") center repeat-x;
    background-size: contain;
    max-width: 900px;
    height: 80px;
    margin: 40px auto;
    width:100%;
}

.separatore.castagna {
    margin: 40px auto;
    height: 2px;
    max-width: 350px;
    background-color: #cfa887;
    width: 100%;
}

.fascia-castagna.bottom {
    width: 100%;
    margin-bottom: 0;
    max-width:1200px;
}

p.pre-title {
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 300;
}

img.img-prodotto {
    padding-top: 20px;
    float: right;
}


.box_certificazioni .row {
    margin-right: 0px;
    margin-left: 0px;
}

.menu-overlay {
    display: none;
}

.container-hamburger {
    position: absolute;
    right: 0px;
    background-color: #e7e8e8;
    border-radius: 0 0 0 60px;
    padding: 0px 0px 17px 17px;
}


.active-menu {
    position: absolute;
    width: 100%;
    background-color: #e7e8e8;
    top: 0px;
    left: 0px;
    z-index: 99999;
    height: auto;
    display: block;
    padding-bottom: 90px;
    /*-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;*/
    border-radius: 0% 0% 108% 0% / 36% 0% 31% 60%;
}

.menu-overlay li {
    display: block;
    padding: 15px 30px;
    font-size: 16px;
    text-align: center;
}

.menu-overlay ul {
    list-style: none;
    padding: 40px 0 0 0;
}

ul.second-list {
    padding-top: 10px;
}

.menu-overlay a {
    color: #000;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0, 0, 0, 0.20);
    display:block;
    font-weight:600;
    text-decoration:none;
}

.menu-overlay .second-list a {
    color: #000;
    text-transform: initial;
    border-bottom: 1px solid rgba(0, 0, 0, 0.20);
    font-weight:300;
    font-size:15px;
}

.menu-overlay .second-list li {
    padding: 10px 0px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 25px;
    height: 3px;
    background-color: #fff;
}

.hamburger--collapse .hamburger-inner::after {
    top: -14px;
}

.hamburger-inner::before {
    top: -7px;
}

#hamburger-mobile {
    outline: none;
    padding: 10px 15px 10px 10px;
    z-index: 9999999;
    position: relative;
}

.hamburger--collapse.is-active .hamburger-inner {
    top: 29px;
}

.hamburger--collapse .hamburger-inner {
    top: 27px;
    margin-top: -3px;
}

.hamburger-box {
    width: 30px;
}
.container-hamburger{
    display: none;
}

@media (max-width:630px){
    .nav-bar{
       display:none;
    }
    .container-hamburger{
        display: block;
    }
}

@media (max-width:755px){
    .footer{
        padding: 25px 10px;
    }
}

.nav-bar a {
    color: #8a8b8c;
    text-decoration: none;
}

.sbianco {
    display:none;
    position: absolute;
    background-color: #fff;
    width: 100%;
    height: 100%;
    z-index: 9;
}

.sbianco.attivo{
    display:block;
    height: 1000px;
}




@media (max-width:480px) {
    .separatore.red {
    max-width: 200px;
    }
    
    .separatore.castagna {
   max-width: 200px;
    }
    
    .separatore.blu {
    max-width: 200px;
    }
    
    .separatore.viola {
   max-width: 200px;
    }
    
    .separatore.acqua {
   max-width: 200px;
    }
}

a.read-more {
    text-decoration: none;
    font-style: italic;
    font-size: 16px;
    margin-top: -10px;
    display: block;
    margin-bottom: 10px;
}

a.read-more.acqua-light:hover {
    color: #83c8bc;
}

a.read-more.red-light:hover {
    color: #eb8597;
}

a.read-more.viola-light:hover {
    color: #8d85ca;
}

a.read-more.blu-light:hover {
    color: #61b4e4;
}

a.read-more.castagna-light:hover {
    color: #cfa887;
}


div#cookieChoiceInfo {
    max-width: 300px;
    background-color: #cecece;
    border-radius: 10px;
    padding: 20px;
    position: fixed;
    bottom: 5px;
    right: 10px;
    color: #fff;
    width:100%;
    font-size: 17px;
    z-index: 999999;
}



div#cookieChoiceInfo a {
    background-color: #fff;
    color: #cecece;
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 20px;
    margin-top: 10px;
    display: inline-block;
    text-decoration: none;

}

.box-video {
    max-width: 900px;
    width:100%;
    margin: 0 auto;
}
.container-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 0px;
    height: 0;
   /* max-width: 900px;*/
    margin: 0 auto 40px;
}


.container-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ytp-icon-large-play-button-hover {
    background: no-repeat url(../img/placeholder-video.png) -5px -2067px!important;
    background-size: auto;
    width: 80px;
    height: 80px;
}

a.castagna-light:focus, a.castagna-light:hover {
    color:  #cfa887;
    text-decoration: none;
}

a.blu-light:focus, a.blu-light:hover {
    color:  #61b4e4;
    text-decoration: none;
}

a.viola-light:focus, a.viola-light:hover {
    color:  #8d85ca;
    text-decoration: none;
}


a.acqua-light:focus, a.acqua-light:hover {
    color:  #83c8bc;
    text-decoration: none;
}


a.red-light:focus, a.red-light:hover {
    color: #eb8597;
    text-decoration: none;
}


.box-ingredienti {
    margin-top: -10px;
}

a.ingredienti {
    font-size: initial;
    cursor: pointer;
}

span.small-txt {
    font-size: small;
}
span.raquo-arrow{
    display: inline-block;
}
a.ingredienti-active span.raquo-arrow {
  -webkit-transform: rotate(90deg);
  -moz-transform:    rotate(90deg);
  -ms-transform:     rotate(90deg);
  -o-transform:      rotate(90deg);
  transform:         rotate(90deg);
  vertical-align: sub;
  margin-left: 3px;
}