html {overflow-x: hidden;}
body {margin: 0px; font-family: 'Fredoka', sans-serif; font-size: 15px; line-height: 27px; color: #00B2E3; overflow-x: hidden;}



/*header*/
#header {padding: 1rem; background: transparent; transition: 0.2s; z-index: 9900;}
#header .logo {max-width: 180px; transition: 0.2s;}
#menu {margin-top: 25px;}
#menu ul {list-style-type: none; line-height: 0px;}
#menu ul li {padding: 0 0 0 15px; display: inline;}
#menu ul li a {color: #00B2E3; font-weight: 700; font-size: 14px; line-height: 15px; padding: 3px 18px 5px; transition: 0.2s; border-radius: 20px;}
#menu ul li a:hover {color: #00B2E3; text-decoration: none; background: #B5B3C5;  transition: 0.2s;}
#menu ul li a.selected {color: #fff!important; text-decoration: none; background:#00B2E3;}
#header.scroll {background: #fff; height: 85px; transition: 0.2s;}
#header .logo.scroll {max-width: 130px; transition: 0.2s;}

/*grid*/
.no-desk {display: none!important;}
.no-mob {display: block!important;}
.max-w-50 {max-width: 100%;}
.elements-bg .col-md-6, .elements-bg .col-6, .elements-bg .col-12 {padding: 0px;}
.pt-10 {padding-top: 12%;}
.mt-10 {margin-top: 9%;}
.m-auto {margin: auto;}
.ml-10 {margin-left: 10%;}
.vh-80 {height: 80vh;}
.vh-65 {height: 65vh;}
.max-w-65 {max-height: 65vh;}


/*text*/
h1 {font-weight: bold; font-size: 3rem; line-height: 4rem;}
h2, h3 {font-weight: bold; font-size: 27px; line-height: 40px;}
h2.bg {background-image: url(../img/bg/bg_titoli.svg); background-size: cover; background-repeat: no-repeat; background-position: center top;}

h4 {font-size: 1.5rem; font-weight: 700;}
p {font-size: 14px;}
a:hover {text-decoration: none;}
a:focus {outline: none;}
.little-text {font-size: 15px; font-weight: 400; line-height: 20px;}
.small-text {font-size: 1.5rem;}
.medium-text {font-size: 2rem;}
.big-text {font-size: 3.5rem;}
/*.charlie-font {font-family: "CharlieZonk"; font-weight: 400;}
.charlie-font a {color: #00B2E3;}
.charlie-font a:hover {color: #00B2E3;}*/


.btn {color: #00B2E3; border: 2px solid #fff; padding: 5px 30px; border-radius: 30px; font-weight: 400; cursor: pointer;}
.btn-inverse {color: #fff; border: 2px solid #00B2E3; background-color: #00B2E3; }
.btn:hover {color: #fff; border: 2px solid #fff; background-color: #00B2E3;}
.btn-inverse:hover {color: #00B2E3; border: 2px solid #fff; background-color: #fff;}

.btn:focus, .btn.focus {box-shadow: none!important;}
.btn-big {font-size: 20px; font-weight: bold; padding: 3px 40px 6px;}


.bg-box {background-image: url(../img/02_bicarbonato/storia/box_storia_proprieta.svg); background-position:center; background-repeat:no-repeat; background-size: contain; color: #fff}
.bg-box2 {background-image: url(../img/04_prodotto/box_prodotti.svg); background-position:center; background-repeat:no-repeat; background-size: contain; color: #fff}


@media (max-width: 768px) {
  .bg-box {background-size: 200%; border-radius: 30px;}
}

/*collapse & slider*/
.card {background-color: transparent; border:0px;}

/*slick*/
.slick-list {height: inherit;}
.slick-track:focus, .slick-slide:focus {outline: none;}
.slick-dots li button:before {font-size: 62px; color: #fff; line-height: 22px; opacity: 1;
                              text-shadow: -2px 0 #AAC27F, 0 2px #AAC27F, 2px 0 #AAC27F, 0 -2px #AAC27F;}
.slick-dots li.slick-active button:before {color: #AAC27F; opacity: 1;}
.slick-dots li {margin: 0 53px;}
.slick-dots {bottom: auto; text-align: left; margin-top: 0.4%; margin-left: 10%; z-index: 4550; width: 50%;}
.prodotti-slick .slick-dots {width: 50%; left: 52%; margin-top: -7.6%;}
.prodotti-slick .slick-dots li {margin: 0 10px 0 54px;}
.line-slick-dots-01 {background: #AAC27F; width: 265px; height: 2px; margin-left: 16%; margin-top: 18px; position: absolute;}
/*.line-slick-dots-02 {background: #AAC27F; width: 240px; height: 2px; margin-top: -6%; position: absolute; left: 64%;}*/
.slick-dotted.slick-slider {margin-bottom: 0px;}

/*hero*/
.underline {position: absolute; margin-top: -14%; margin-left: -12%; z-index: -1;}

.bg-home-bolle-sx {left: -5%; top: 200px; z-index: -1;}
.img-home-muffin {left: 15%; right:auto; top: 300px;}
.img-home-lattuga {left: 40%; top: 550px;}
.img-home-cookie {left: 10%; top: 650px;}
.img-home-pomodoro {left: 30%; top: 150px;}

.img-home-spazzola {right: 40%; top: -600px;}
.img-home-specchio {right: 50%; top: -250px;}
.img-home-spazzolini {right: 15%; top: -450px;}
.img-home-spugna {right: 15%; top: -200px;}
.bg-home-bolle-dx {right: 10%; top: -450px;z-index: -1; }


@media (max-width: 768px) {
  .img-home-spugna {top: -680px; right: 20%;}
  .img-home-specchio {right: 15%;}
  .bg-home-bolle-dx {top: -150px;}
}

/*.drop-bolle {top: -10%; right: -35%; position: relative; z-index: -1;}*/

/*claim*/
.circle-claim {opacity: 0.9; margin-top: -30%; left: 150px; z-index: -1;}

/*prodotto*/
.product-pack {max-width: 430px; transition: 1s;}
.product-pack:hover  {animation-name: movepack; animation-duration: 1s; transition: 1s; }
@keyframes movepack {
  0% {transform: translateY(0px);}
  25% {transform: translateY(-20px);}
  50% {transform: translateY(0px);}
  75% {transform: translateY(-20px);}
  100% {transform: translateY(0px);}
}



/*bicarbonato*/
#container-bicarbonato {height: 80vh;}
#carousel-storia, #carousel-proprieta.action {opacity: 1; position: relative; z-index: 80;}
#carousel-storia.action, #carousel-proprieta {opacity: 0; position: absolute; z-index: -10;}
#carousel-proprieta .slick-dots li {margin: 0 0px 0 46px;}
#btn-storia.selected, #btn-proprieta.selected {background-color:#00B2E3; color: #fff;}

.drop-bg-bicarbonato-sx {top: 20%; left: -10%; z-index: -1;}
.drop-bg-bicarbonato-dx {top: -225px; right: -10%; z-index: -1;}

#carousel-storia .slide.slick-active .element-2-effect,
#carousel-proprieta .slide.slick-active .element-2-effect,
.prodotti-slick .slide.slick-active .element-2-effect {
  animation-name: movetext; animation-duration: 1.2s;}
.prodotti-slick .slide.slick-active .element-3-effect {
  animation-name: movetext; animation-duration: 1.2s; animation-delay: 0.1s;}
@keyframes movetext {
  0% {transform: translateY(60px); opacity: 0;}
  50% {opacity: 1;}
  100% {transform: translateY(0px); opacity: 1;}
}
#carousel-storia .slide.slick-active .element-1-effect,
#carousel-proprieta .slide.slick-active .element-1-effect,
.prodotti-slick .slide.slick-active .element-1-effect {
  animation-name: moveimg; animation-duration: 1.2s;}
@keyframes moveimg {
  0% {transform: translateX(50px); opacity: 0;}
  10% {transform: translateX(50px); opacity: 0;}
  60% {opacity: 1;}
  100% {transform: translateX(0px);}
}


/*.prodotti-slick .slick-dots {display: none !important;}*/
#btn-prod1.selected, #btn-prod2.selected {background-color:#00B2E3; color: #fff;}

#prod1 {display: unset;}
#prod1.action {display: none;}
#prod2 {display: none;}
#prod2.action {display: unset;}

/*home - usi*/
.img-casetta {position: relative; border-radius: 0 30px 30px 0;}
.bollo-casetta {width: 170px; bottom: 10px; right: 20px; z-index: 9999;}
.zoom {
  transition: transform .2s; /* Animation */
  margin: 0 auto;
  z-index: -1;
}

.zoom:hover {
  transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
.legenda img {position: absolute; width: 30px;}
.back a {font-size: 14px; font-weight: bold; line-height: 2.75rem; cursor: pointer; color:  #00B2E3!important;}
.legenda h2, .legenda h2 a {font-size: 22px; font-family: "Fredoka"; font-weight: 400; line-height: 2.75rem; cursor: pointer;}
.legenda h2 a:hover {opacity: 0.8;}


/*footer*/
.social img {max-width: 85px; border-radius: 50%; transition: 0.2s;}
.social img:hover {background: rgba(181,179,197,0.4); transition: 0.2s;}
#footer {background-color: #AAC27F; color: #fff!important;}
#footer p {display: inline;}
#footer span {font-size: 0.85rem; line-height: 0.9rem; font-weight: 400;}

/*parallax element*/
.wrapper-parallax {width: 100%; height: 50px; position: relative;}
.wrapper-parallax .parent, .element-parallax, .element-parallax-2, .element-parallax-bg {position: absolute;}
.wrapper-parallax .parent {width: 100%; height: 100%;}



.drop-bg-claim {margin-top: 30%!important; width: 85%;}
/*transition effects*/
.text-line, .image-effect, .btn {position: relative;}

/*USI - CASA modal*/
.c-orange {color: #ffba82!important;}
.c-green {color: #69c9c9!important;}
.c-violet {color: #e9abdc!important;}



.pin-cucina, .pin-casa, .pin-bellezza {width: 22px; cursor: pointer; transition: 0.2s; position: absolute; margin-top: 1%}
.pin-cucina:hover, .pin-casa:hover, .pin-bellezza:hover {transform: scale(1.2); transition: 0.2s; }
.modal-content {border-radius: 2.5rem; border:transparent;}
.modal h3 {line-height: 2.5rem;}
body, .modal-open {padding-right: 0px!important;}
.usi-modal img {width: 25px;}
.close:focus {outline: none;}
.pin-cucina.none, .pin-casa.none, .pin-bellezza.none {opacity: 0; z-index: -1; transition: 0.2s; display: none;}
.pin-cucina, .pin-casa, .pin-bellezza {opacity: 1; z-index: 50; transition: 0.2s; display: block;}
.pin-cucina.move, .pin-casa.move, .pin-bellezza.move {animation-name: startmove; animation-duration: 1.2s; animation-delay: 0.5s;}
@keyframes startmove {
  0% {transform: translateY(5px); }
  20% {transform: translateY(0px); }
  40% {transform: translateY(5px); }
  60% {transform: translateY(0px); }
  80% {transform: translateY(5px); }
  100% {transform: translateY(0px);}
}
/*PIN CUCINA*/
.uso-bevanda-btn {top: 77%; left: 37.5%;}
.uso-crepes-btn {top: 78%; left: 34%;}
.uso-lievito-btn {top: 73.5%; left: 11%;}
.uso-verdura-btn {top: 74%; left: 26.5%;}
/*.uso-legumi-btn {top: 72%; left: 38%;}*/
.uso-the-btn {top: 69%; left: 10%;}
.uso-bollito-btn {top: 74%; left: 15%;}


/*USO BELLEZZA*/
.uso-shampoo-btn {top: 46.6%; left: 46%;}
/*.uso-viso-btn {top: 27%; left: 56%;}*/
.uso-mani-btn {top: 46%; left: 30%;}
.uso-pettine-btn {top: 50%; left: 30%;}
.uso-deodorante-btn {top: 50%; left: 33%;}
.uso-denti-btn {top: 47.5%; left: 37.5%;}
.uso-pediluvio-btn {top: 57%; left: 39%;}
.uso-pennelli-trucco-btn {top: 20%; left: 63%;}
.uso-capelli-btn {top: 42%; left: 41%;}

/*USO CASA*/

.uso-piante-btn {top: 79%; left: 71.5%;}
.uso-divano-btn {top: 81%; left: 60%;}
.uso-tappeti-btn {top: 84%; left: 75%;}
.uso-cuscini-btn {top: 78%; left: 58%;}
.uso-lettiera-btn {top: 79%; left: 64%;}


.uso-frigo-btn {top: 70%; left: 30%;}
.uso-forno-btn {top: 80%; left: 17%;}
.uso-pentole-btn {top: 70%;left: 13%;}
.uso-argenteria-btn {top: 65%; left: 10%;}
.uso-tagliere-btn {top: 74%; left: 22%;}
.uso-mobili-btn {top: 80%; left: 12%;}
.uso-caffettiera-btn {top: 74%; left: 17.5%;}
.uso-calici-btn {top: 65.5%; left: 16%}



.uso-lavatrice-btn {top: 56%; left: 9.5%;}
.uso-stracci-btn {top: 44%; left: 7.5%;}
.uso-scope-btn {top: 51%; left: 20%;}
.uso-rubinetti-btn {top: 47%; left: 35%;}
.uso-doccia-btn {top: 53%; left: 45%;}
.uso-tubature-btn {top: 57%; left: 48%;}
.uso-viso-btn {top: 51%; left: 48%;}
.uso-cesto-biancheria-btn {top: 57%; left: 15.5%;}
.uso-candeggina-btn {top: 48%; left: 11%;}
.uso-asciugamani-btn {top: 51%; left: 26%;}
.uso-specchio-btn {}


.uso-animali-btn {top: 55%; left: 86%;}
.uso-cassettiera-btn {top: 42%; left: 86%;}
.uso-pavimento-btn {top: 59%; left: 74%;}
.uso-materasso-btn {top: 56%; left: 60%;}


.uso-tende-btn {top: 18%; left: 67%;}
.uso-borsone-allenamento-btn {top: 31%; left: 57%;}
.uso-peluche-btn {top: 28%; left: 72%;}

.uso-bucato-btn {top: 36%; left: 13%;}
.uso-secchio-btn {top: 85%; left: 13.5%;}


/*Resp Desk*/
@media (min-width: 992px) and (max-width: 1199px) {

  .composit-home {max-width: 65%;}
  .underline {margin-top: -17%;}
  .line-slick-dots-01 {width: 220px;}
  /*.line-slick-dots-02 {width: 200px; margin-right: -500px;}*/
  .slick-dots {margin-top: 0.3%;}
  .slick-dots li {margin: 0 45px;}
  #carousel-proprieta .slick-dots li {margin: 0 0px 0 36px;}
  .prodotti-slick .slick-dots {/*margin-top: 10%;*/ left: 53%; }
  .prodotti-slick .slick-dots li {margin: 0 15px 0 35px;}
  /*.line-slick-dots-02 {margin-top: -5.7%;}*/

  /*.img-home-insalata {margin-right: -25%; width: 210px;}
  .img-home-mela {right: 23%; width: 80px;}
  .img-home-fragola {right: 45%; top: 10px; width: 55px;}
  .img-home-muffin {right: 38%; top: 120px; width: 90px;}
  .bg-home-bolle, .bg-home-bolle-2  {width: 80%;}
  .img-home-insalata-2 {right: 40%; width: 210px;}
  .img-home-mela-2 {width: 80px;}*/


  .drop {width: 230px;}

}/*end desk*/


/*Resp desk & Tablet*/
@media (min-width: 769px) and (max-width: 991px)  {

  #menu ul li { padding: 0 0 0 0.1rem;}
  .composit-home {max-width: 60%;}
  /*.underline { margin-top: -20%; margin-left: -16%;}*/
  .line-slick-dots-01, .line-slick-dots-02 {display: none;}
  .slick-dots {margin-top: 0.8%; margin-left: 5%; width: 40%;}
  #carousel-storia .slick-dots {margin-top: -10px;}
  .prodotti-slick .slick-dots {left: 40%;}
  .slick-dots li, #carousel-proprieta .slick-dots li, .prodotti-slick .slick-dots li {margin: 0 10px;}
  #carousel-storia {top: 15px;}

  .drop {width: 200px;}
  .social img {width: 75px;}

  /*h1, h2, h3 {font-size: 2.9rem; line-height: 3.5rem;}
  h4 {font-size: 1.25rem;}*/
  /*p {font-size: 1rem; line-height: 1.75rem;}*/

  .product-pack {max-width: 340px;}

}

.img-fluid{
	width: 100%;
}

@media (max-width: 768px) {

  body {overflow-x: hidden;}
  .no-desk {display: block!important;}
  .no-mob {display: none!important;}
  .max-w-50 {max-width: 50%;}
  .pt-10 {padding-top: 16%;}
  .vh-65 {height: inherit;}
  .ancora {position: relative; top: -60px;}

  /*hamburger mobile*/
  #hamburger {width: 50px; height: 60px;}
  .toggle {width: 60px; height: 60px; background-color: transparent; position: fixed; z-index: 1000; cursor: pointer;}
  .toggle span {width: 30px; height: 2px; background: #00B2E3; top: 15px; position: absolute; left: 15px;
                    transform: translate(0%, 0%); transition: 0.4s;}
  .toggle span:nth-child(2) {margin-top: 10px;}
  .toggle span:nth-child(3) {margin-top: 20px;}
  .toggle.active span:nth-child(1) {transform: rotate(45deg); margin-top: 10px; transition-duration: 0.4s;}
  .toggle.active span:nth-child(2) {opacity: 0; transition-duration: 0.1s;}
  .toggle.active span:nth-child(3) {transform: rotate(-45deg); margin-top: 10px; transition-duration: 0.4s;}
  .text-close, .text-open {position: absolute; right: 60px; top: 11px; transition-duration: 0.1s; font-weight: 700; font-size: 1rem;}
  .text-close.active, .text-open {opacity: 1; transition-duration: 0.2s;}
  .text-close, .text-open.active {opacity: 0; transition-duration: 0.2s;}

  #header {background: #fff; height: 85px;}
  #header .logo {max-width: 130px;}
  #menu {display: none; z-index: -1; }
  #menu.active {display: block; z-index: 5500; background: #fff; height: 100vh; width: 100%; margin-top: 0px; margin-right: -10%; box-shadow: 4px 20px 20px rgb(0 0 0 / 25%);}
  #menu ul li {padding: 0 0 0 0rem; display: flex; padding-top: 4rem; line-height: 1rem;}
  #menu ul li a {font-size: 1.5rem; padding: 0.6rem 1rem;}

  /*text*/
  h1 {font-size: 1.7rem; line-height: 2.5rem;}
  h3, h2, .big-text  {font-size: 2.25rem; line-height: 3rem;}
  h4 {font-size: 1.25rem;}
  /*p {font-size: 1.1rem; line-height: 1.65rem;}*/
  .medium-text {font-size: 1.75rem;}

  /* home*/
  /*.underline {max-width: 250px; margin-top: -50%; display: none;}*/
  .composit-home {opacity: 0.9;}
  .drop {width: 140px;}

  /*bicarbonato*/
  .slider-box-text {margin-top: 0%;}
  .box-btn-bicarbonato .text-right { text-align: center!important;}

  #carousel-storia {display: unset;}
  #carousel-storia.action {display: none;}
  #carousel-proprieta {display: none;}
  #carousel-proprieta.action {display: unset;}



  .img-casetta {position: relative; border-radius: 0 0px 30px 30px;}
  .bollo-casetta {width: 150px; }

  /*USI - CASA modal*/
  .legenda {display: none;}
  .legenda-mob h2, .legenda-mob h2 a {font-family: "Fredoka"; line-height: 40px; cursor: pointer;}
  .legenda-mob img {position: absolute; width: 20px; left: 21%; margin-top: 5px;}

  .pin-cucina, .pin-casa, .pin-bellezza {display: none;}
  .box-usi h3 a {font-size: 1.25rem; font-weight: 700; position: relative; line-height: 2.25rem; color: #00B2E3!important;}
  .box-usi .arrow {font-size: 1.75rem; position: relative; top: 0.15rem; left: 0.5rem;}
  .arrow-orange {color: #ffba82!important;}
  .arrow-green {color: #69c9c9!important;}
  .arrow-violet {color: #e9abdc!important;}

  .modal h3 {line-height: 2.5rem;}
  .usi-modal img {width: 25px;}

  /*claim*/
  .claim h2 {font-size: 2rem; line-height: 2.5rem;}

  /*footer*/
  .social img {max-width: 55px;}
  #footer p {display: block;}
  /*prodotto*/
  .bg-pack {max-width: 340px;}
  .product-pack {width: 260px;}

  /*slick*/
  .line-slick-dots-01, .line-slick-dots-02 {display: none;}
  .slick-next {right: 20px;}
  .slick-prev {right: 20px;}
  .slick-next, .slick-prev {background: black; display: none!important;}
  .slick-dots {width: 90%; margin-left: 0px; text-align: center; bottom: 10px;}
  .slick-dots li, .prodotti-slick .slick-dots li, #carousel-proprieta .slick-dots li {margin: 0 10px;}
  .slick-dots li button {border:0px;}
  .slick-dots li button:before {font-size: 35px; color: rgba(181,179,197,0.5); text-shadow: none;}
  .slick-dots li.slick-active button:before {color: #00B2E3;}
  .prodotti-slick .slick-dots {width: 90%; bottom: -25px; left: 5%; margin-top: 0;}

}





/*@media (max-width: 768px) and (min-width: 500px) {
  .underline {margin-top: -16%;}
}*/


@media (max-width: 576px) {
  #menu ul li a {font-size: 1rem; padding: 0.3rem 1rem;}
}
@media (max-width: 320px) {
  .bg-pack {max-width: 270px; padding-right: 30px;}
  /*.underline {margin-top: -60%;}*/
  .social img {max-width: 45px;}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {
  .vh-65 {height: 50vh;}
  #menu.active {margin-right: -20%;}
}




/*NEW CSS*/
#popUp {
    position:absolute;
    width:820px;
    max-width: 100%;
    left:50%;
    margin-left:-410px;
    top:20%;
    z-index:99999;
}

#popUp img {
    width:100%!important;
    border:10px solid #fff
}
#popUp iframe {border: 5px solid white;}

#light-popup{width:100%;height:100%;position:fixed;z-index:99999;left:0px;top:0px;background-color: rgba(26, 54, 102, 0.9); }


#popUp .close {
    font-size:15px;
    margin-left:830px;
    margin-top:20px;
    color:#fff;
    position:absolute;
    margin-top:0!important;
    opacity:.9
}

#popUp .close a {
    font-size:14px;
    color:#fff
}

@media(max-width:768px) {
    #popUp .close {
        font-size:15px;
        margin-left:97%;
        margin-top: -8%!important;
    }
    #popUp img {
        width:100%!important;
        border:5px solid #fff
    }
    #popUp iframe {width:100%!important; border: 5px solid white;}
    #popUp {
        position:absolute;
        width:96%;
        max-width: 100%;
        left:0%;
        margin: 2%;
        top:20%;
        z-index:999999
    }
}