@import 'animations.css';
@import url('mobile.css') screen and (max-width: 767px);


@font-face {
  font-family: Gotham;
  src: url(../fonts/GothamHTF-Bold.otf);
  font-weight: bold; }
@font-face {
  font-family: Gotham;
  src: url(../fonts/GothamHTF-Medium.otf);
  font-weight: 400; }
@font-face {
  font-family: Gotham;
  src: url(../fonts/GothamHTF-Book.otf);
  font-weight: 300; }
body {
  font-family: Gotham, sans-serif;
  width: 100vw;
  overflow-x: hidden;
}

p {
  font-family: Gotham, sans-serif;
  font-weight: 400;
  font-size: 18px; }

h2 {
  font-family: Gotham, sans-serif;
  font-weight: bold; }

img {
  pointer-events: none;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}

.navbar {
  background: rgba(255,255,255,0.9);
  border: 0;
  margin-bottom: 0;
  width: 100vw;
  position: fixed;
  z-index: 100;
  border-radius: 0; }
  .navbar a {
    color: #32212D;
    font-family: Gotham, sans-serif;
    font-weight: 400; }

.navbar img.menu {
  display: none;
}

div.navbar-padded {
  padding-top: 50px;
  transition: opacity .5s;
}

footer {
  font-family: Gotham;
  background: #32212D;
  border-top: 4px solid #00D067;
  padding-top: 60px;
  padding-bottom: 50px;
  color: #B6B6B6;
  font-size: 20px; }
  footer .col-sm-6 {
    line-height: 40px; }
  footer .footer-icons {
    margin-right: 20px;
    margin-top: 20px;
    height: 60px; }
  footer .bottom-menu {
    margin-right: 20px;
    margin-top: 20px;
    display: block;
  }
  footer a {
    color: white;
    font-weight: 300; }
    footer a:hover {
      color: white; }
  footer .bottom-footer {
    margin-top: 50px; }
    footer .bottom-footer img {
      height: 40px;
      max-width: 80%; }
    footer small.copyright-text {
      display: block;
      margin-top: 12px; }

#menu-prodotti-home {
  background-image: url("../images/menu-background.jpg");
  background-size: cover;
  background-position: center;
  height: 650px;
  position: relative; }
  #menu-prodotti-home button {
    text-transform: uppercase;
    color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: none;
    border: 14px solid white;
    font-size: 44px;
    white-space: nowrap;
    padding: 33px;
    transition: .3s all; }
    #menu-prodotti-home button:hover {
      background: rgba(255, 255, 255, 0.18);
      transition: .3s all; }

div.home-text h1, div.home-text h2, div.home-text p  {
  margin-bottom: 30px;
}
div.home-text h1, div.home-text h2 {
  font-weight: bold;
}
div.home-text h1 {
  font-size: 64px;
}

#storia-natoo {
  background: #95B8BF; }

#healthy-all {
  background: #CEC3AA; }

#storia-natoo, #healthy-all {
  color: white;
  padding-top: 72px;
  padding-bottom: 96px; }
  #storia-natoo h2, #healthy-all h2 {
    font-size: 64px;
    text-transform: uppercase; }
  #storia-natoo .subtitle, #healthy-all .subtitle {
    font-weight: 400;
    font-size: 24px; }

#video {
  background-image: url("../images/mid-banner.jpg");
  background-size: cover;
  background-position: center;
  height: 600px; }

#dove-trovarci h2, #dove-trovarci h3, #dove-trovarci h4, #dove-trovarci p {
  color: #4A4A4A;
  font-family: Gotham, sans-serif; }
#dove-trovarci h3 {
  font-weight: 400;
  font-size: 36px;
  margin-top: 41px; }
#dove-trovarci h2 {
  font-size: 48px;
  text-transform: uppercase; }
#dove-trovarci h4 {
  font-size: 24px;
  font-weight: 400;
  margin-top: 40px; }
#dove-trovarci p {
  font-size: 20px;
  font-weight: 300; }

#prodotti-hero {
  background-image: url("../images/prodotti-hero.jpg");
  background-position: center;
  background-size: cover;
  height: 650px; }

#filosofia-hero {
  background-color: #95B8BF;
  background-image: url("../images/natoo-logo.svg");
  background-repeat: no-repeat;
  background-position-x: 100%;
  height: 650px;
  overflow: hidden
}

#prodotti-hero, #filosofia-hero {
  position: relative;
}
  #prodotti-hero h1, #filosofia-hero h1 {
    text-transform: uppercase;
    color: white;
    text-align: center;
    font-size: 72px;
    font-weight: bold;
    bottom: 100px;
    position: absolute;
    width: 100%; }

.prodotti-title {
  font-size: 48px;
  font-weight: bold;
  color: #4A4A4A;
  margin-top: 60px;
  margin-bottom: 43px; }

.tile {
  color: white;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  min-height: 150px;
}
.tile img {
  width: 80%;
  margin: 10% 0;
}

.prodotti-tiles {
  margin-bottom: 50px; }

.ingredienti {
  margin-top: 30px;
  margin-bottom: 45px; }

.slick-slider {
  position: relative;
  overflow: hidden;
}

.slick-track {
  background: #DCC866;
}

.slick-slider .slick-list {
  padding-bottom: 60px;
}

.slick-slider .slick-arrow {
  display: block;
  position: absolute;
  bottom: 0;
  cursor: pointer;
  padding: 10px;
  pointer-events: auto;
  color: #909090;
  font-size: 24px;
}

.slick-slider .slick-arrow span {
  margin: 0 20px;
  line-height: 40px;
  vertical-align: middle;
}

.slick-slider .slick-prev {
  left: 40px;
}
.slick-slider .slick-next {
  right: 40px;
}

#products-filter {
  background: #95B8BF;
  line-height: 30px;
  color: white;
}

#products-filter ul {
  list-style: none;
  padding: 0;
}
#products-filter li {
  display: inline-block;
  box-sizing: border-box;
  margin: 10px 30px 10px 0;
  cursor: pointer;
  font-size: 24px;
  padding: 10px 0;
  border-bottom: 10px solid rgba(255, 255, 255, 0);
  transition: all .2s;
}
@media screen and (min-width: 767px) {
  #products-filter li {
    background-color: transparent !important;
  }
};
#products-filter li:hover {
  border-bottom: 10px solid rgba(255, 255, 255, 0.3);
}
#products-filter li.active {
  border-bottom: 10px solid rgba(255, 255, 255, 1);
}
#products-filter li .icon-container {
  display: none;
}

.product-detail-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(39,39,39,.48);
  z-index: 200; }

.product-detail {
  background: white;
  width: 500px;
  min-height: 400px;
  position: absolute;
  text-align: center;
  box-shadow: 0 0.5vw 1vw 0 rgba(0,0,0,0.4);
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%,-70%);
  animation: dialog 0.2s ease-out;
  animation-delay: .0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.product-detail h3 {
  padding: 0 30px 24px 30px;
  margin: 0.8vw 0;
  text-align: left;
  font-weight: bold;
}
.product-detail p {
  padding: 0 30px 15px 30px;
  text-align: left;
}
.product-detail p.property-icons img {
  height: 60px;
  margin-right: 20px;
}
.product-detail div.product-header {
  height: 200px;
  width: 100%;
  margin-bottom: 3vw;
  position: relative;
  overflow: hidden;
}
.product-detail div.product-header span {
  display: block;
  position: absolute;
  background: white;
  border-radius: 50%;
  bottom: 10px;
  right: 9px;
  width: 70px;
  line-height: 70px;
  padding: 2px;
  font-weight: 400;
}
.product-detail div.product-header img {
  height: 100%;
}
.product-detail div.product-header img.close {
  position: absolute;
  height: 50px;
  top: 0;
  right: 0;
  pointer-events: initial;
  cursor: pointer;
}

#filosofia1 {
  background-image: url("../images/filosofia1.jpg");
  text-align: left;
}

#filosofia2 {
  background-color: #DCC866;
  text-align: left;
}

#filosofia3 {
  background-image: url("../images/filosofia3.jpg");
  text-shadow: #2c2c2c 0 0 10px;
}

.filosofia-section {
  background-size: cover;
  padding: 100px 120px;
  background-position: center;
  min-height: 650px;
  position: relative;
  color: white;
  text-align: center;
}
.filosofia-section .text {
  width: 80%;
  max-width: 1170px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.filosofia-section h1 {
  text-transform: uppercase;
  margin: 0 auto;
  margin-bottom: 30px;
  font-size: 48px;
  font-weight: bold;
  width: 100%;
}
.filosofia-section h2 {
  margin: 0 auto;
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: bold;
  width: 100%;
}
.filosofia-section p {
  margin: 0 auto;
  margin-bottom: 30px;
  width: 100%;
}
.filosofia-section .img-center {
  width: 100%;
  text-align: center;
  margin: 60px
}


/* Bounce animation for product tiles */
.tile-appear-0 {
  animation: bounce 0.5s linear;
  animation-delay: .0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
}
.tile-appear-1 {
  animation: bounce 0.5s linear;
  animation-delay: .1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
}
.tile-appear-2 {
  animation: bounce 0.5s linear;
  animation-delay: .2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
}
.tile-appear-3 {
  animation: bounce 0.5s linear;
  animation-delay: .3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
}
.tile-appear-4 {
  animation: bounce 0.5s linear;
  animation-delay: .4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
}

#address .text-container {
  padding: 0px 50px;
  position: relative;
  min-height: 500px;
}

#address .text {
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
}

#address h2 {
  font-size: 48px;
  margin-bottom: 41px;
  text-transform: uppercase;
}

#address .address-accordion h3 {
  font-size: 36px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 3px solid #CEC3AA;
  background-repeat: no-repeat;
  background-position: calc(100% - 10px), 50%;
  background-size: 32px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAATCAYAAAGGkz9hAAAABGdBTUEAALGPC/xhBQAAAwlJREFUSA2tVUtTE0EQnpnlID5A/QsevAkbtQrIxmcJWOUNE/+M8lKvXv0PG1IeIlgK5StL0AITIsVNT1ZZWpZSCUhQsjt2z9LDbFwgKZ1Ld3/9mJ6e6R7G4lap4ErEiSqbiEBe5fncefZ5KX8YgcpCLkEKVqk8PUIC/1R0O7/5bDORynACkb4vuGcbjC1pEL38WnWDC2bLgJW1w8r8o1Omp8l/XHK7xXaw/WHZy06aCuQx7fXf7LTCUSgXsuNK2FFWvFwfyjoHdVDOR5mUk9ziSXsgXSQHTVWkhVxSAxihUsxe9X05B6Hu26nMbVO5F7/iTZ3blsEi6lUKWM0v9fpPBARnk71OZgz55oXV9hv+O8StDtHX03/zrT4DgmYgLvi4nUxPIL5cnLIDPygh3yHYwJlkZgF5XJEAIQT3unMpJCvDvQpjGjXzq6vu0WXPdZrx/yKXPfcZBuIlz91kknXqt9NCeHgUa5LJ45yzWQH2qiDqIbThDNWr2k5mUBUR0nkuJbuM/vtlUi64P6DZToBzLeFkutFe30LZy76QUl5CMC5InDPa6gAogNFL2OEi8mYQyPA7ZHiSc75uO+ku1NOKBECwOch+zmj/VwAE4WZewc1cQB5X3M6hZo8AqCx52dfQminYYQOa7Bg5tEWhsDMHOagjqJYOZJ5L9qDVlj4ocJwex0BDytmdR7jYdYhd4/Aq8wDciDgIfi+RTN+JYP8g4Aj2GZ/DjXUYeMhCsPAhqzGyVc/DxV3RBsAIzu/2OulRE2uHDzdmcGJ4/LSgCSxLDOIsQyjyijCRr1v1x9RVuz58wk6lx0k+iOLgDBo+nLhpY2YN9Tgjb0z/SAKkCBPZmqbOJNwcsoSZFAevDII5bDqN44ljNiZ9bAKkxMEc1KrT1N2EQ93GYJbovzBuY+w9i8shc/prf4PZNwGyUz/EenXGbG7UwTh9COSWeWLcmAk2HPutUkCDtpQA2YeJ1J7ggCCMKATaYB3WsN0/Mk9YK7StBCggfnW/1jhUJJxUUInr8JN7pG+H/gF4+Hnnxv1YegAAAABJRU5ErkJggg==');
}

#address .address-accordion.opened h3 {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAATCAYAAAGGkz9hAAAABGdBTUEAALGPC/xhBQAAAxNJREFUSA2tVs1PE0EUf2+3RspXRUMwJp48Ei2LoFIWNQoxQThJ+z949axAUf8YtxIOGhGMIrYFTbDbajh6NV7k+0MTdof3FmYz3XahROew8z5+7/fezM6bXYDDYecyb6QMhZy1zgoZ5+hhzfqeUIFQvwtZS3gAO5tZlUg2olR4JtINIUQTIHzqNFO32BbhB2dFAY5hJptZ5+FFI8wdaLU+OcovJhikOlTZw1UYyOrbfCFIyaCctVO2zCDGzlqbtDuNgJjtNJM3g37WqxLI/UKEFcNMnZNVEHje6EvdVonKCLy3KKCZjKsEPKsCWfaJaH+J+A7bPAIKXAMBMQRcM/qSLew4akgiiv7g4Wo7MkdRhviKOctcXrYaQ9yeWQtz2ouTva6A7N8V2CyVZhrCcGWbKEH2QiYhHJGXOs96c6wxHr+3rdpYrqjgW97qkcGogUEbNcZAZ2N9q1olZQQcvOfCgsesa51Gb6pIfTOBGo5Lkp9Lr+pZlsMnKOUmb8hgPaJf7UiM2BJk9CbT9IrTrP/a3d1WSbw9KC2+vO7suZ8ZwMHxngcFloOD3kqaNnaU7eej0YYLXcM7WFywrrkOfGEjtXfXlb7UV5bDRjGXmXCFeML+Vh3qNRl8CrXu44I5qMNMjlLZz1leAUyAbU+dsfOT3Ww4yfien7rE+KrnoBYiPqVCwLRs99MtYrC9PbVVS6yKOXEBfMLBcae961VlYpmuW70pNljtwAahUq+5AO4OcOGtmpjvKyJ6QTvxUBJ68wkKObYAbg5H4ExFYoS73CgyMV1po3SlpaXOM5HPt0Wjg3xcVbsqhxbAjeWAM0Ok/seKV4ya1q82mUrGsp3PjAlXjKt2RPzYVld3v1ohFQV4Tem4s2WJ6YbXInp/WIOqyaSsNq200QLm2uqiQ2ohfgGHiXnFMT+AEusAA7X0p4wJzmrj+z76krRqMHQxkdo9uElc4BUriXFNB9H/L4n9ZIdCIZ95Cq54rNrpfnyNP5as2MYfeEcnuZu/iRHEgcvmyJIK/J8y/So8o3+mR7qGw/FE8v0+QrBpVpNDLfoAAAAASUVORK5CYII=');
}

#address h4 {
  font-size: 24px;
  margin-bottom: 12px;
}

#address p {
  font-weight: 300;
  margin-bottom: 43px;
}

#address img {
  width: 100%;
}
#address .address-accordion section {
  max-height: 0;
  transition: .3s all;
  overflow: hidden;
}
#address .address-accordion.opened section {
  max-height: 400px;
}