@import url('reset.css');

::-moz-selection{ background-color: #777; color: #FFF;}
::selection{ background-color: #777; color: #FFF;}

a {text-decoration: none; color: #000; cursor: pointer;}
a:hover {color: #CCC;}

body {
  font-family: 'Work Sans', sans-serif;
  background: #f9fafb;
  color: #555;
  font-size: 15px;
  line-height: 26px;
  letter-spacing: 0;
  font-weight: 300;
  -webkit-text-size-adjust: 100%;
}

ul li, ol li {font-weight: 400}

h1 {font-size: 45px; line-height: 54px; font-weight: 400; color: #442f29; font-family: 'Great Vibes', cursive; text-transform: none; letter-spacing: 2px; margin-bottom: 25px; text-align: center;}
h2 {font-size: 31px; line-height: 45px; font-weight: 300; font-family: 'Quicksand', sans-serif; color: #222; margin-bottom: 30px; text-align: center;}
h3 {font-size: 12px; line-height: 21px; font-weight: 400; color: #777; font-family: 'Work Sans', sans-serif; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 10px; text-align: left;}

h2 p {text-align: center;}

strong {font-weight: 600}

#cookieChoiceInfo {bottom: 0; top: inherit !important; font-size: 10px; line-height: 15px; padding-top: 10px !important; font-family: Helvetica, Arial, sans-serif;}
#cookieChoiceInfo a#cookieChoiceDismiss {margin-left: 8px !important;}

a.bottone {position: relative; height: auto; overflow: hidden; background: #442f29; font-size: 10px; line-height: 21px; font-family: 'Work Sans', sans-serif; text-transform: uppercase; letter-spacing: 5px; color: white; width: 200px; display: inline-block; text-align: center; padding: 12px 0;}
a.bottone:hover {background: #65443a;}
/*
font-family: 'Quicksand', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Work Sans', sans-serif;
*/

/* --------------------------------------------------------------------------
        CSS BASE
--------------------------------------------------------------------------- */

.only-mobile {display: none;}
.not-mobile {display: block;}

#video-home {background: rgba(0, 0, 0, 0.2); /*min-height: 450px;*/ margin-top: 62px;}
#video-home, #video-placeholder {position: relative; height: 700px; overflow: hidden;}

#top {z-index: 9; position: fixed; width: 100%; top: 0; left: 0; right: 0; height: 62px; background: rgba(68, 47, 41, 0.95); color: #fff;}

#lang {z-index: 10; color: #D5DBDE; position: absolute; top: 21px; left: 30px; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; font-weight: 300;}
#lang:hover {color: #FFF;}

#logo {z-index: 10; top: 6px; position: relative; height: auto; overflow: hidden; float: left; margin-top: 10px;}
#logo a {display: inline-block;}

#logo img {width: 275px;}

#hamburger {z-index: 10; position: absolute; top: 21px; right: 30px;}

#main-content {position: relative; height: auto; overflow: hidden; min-height: 400px}
.wrapper {position: relative; height: auto; margin: 0 auto; width: 100%; max-width: 1100px; width: 100%; padding: 70px 20px}
#main-content .wrapper {max-width: 940px;}

.spacer {position: relative; height: auto; overflow: hidden; padding: 41px;}

#top .wrapper {padding: 0;}

#menu {position: relative; height: auto; overflow: hidden; float: right; top: 6px;}
#menu ul {position: relative; height: auto; padding: 0; margin: 0; display: block; text-align: center;}
#menu ul li {position: relative; height: auto; display: inline-block; margin: 15px 0; text-align: center; font-size: 11px; color: #FFF; letter-spacing: 2px;}
#menu ul li a {font-size: 11px; position: relative; height: auto; overflow: hidden; display: inline-block; margin-left: 8px; color: #FFF; letter-spacing: 2px; text-transform: uppercase; font-weight: 300;}
#menu ul li.active a {color: #FFF;}
#menu ul li a:hover {color: #CCC;}
.path {font-size: 10px; text-align: center; letter-spacing: 1px; text-transform: uppercase; padding: 15px 0 0 0; margin-bottom: -25px; z-index: 2; position: relative;}
#menu span.pipe {position: relative;    top: -10px;
    position: relative;}
#menu ul li a.last-lang {margin:0;}

#menu ul li.lang, #menu ul li.lang a {color: #CCC;}
#menu ul li.lang a:hover {color: #FFF;}

#galleria {background: #543b35 !important !important; min-height: 800px;}
#galleria .galleria-images {opacity: 0.9;}
#galleria.galleria-small {height: 400px;}
#galleria.galleria-small .galleria-images {opacity: 0.5;}
#galleria-title {position: absolute; top: 200px; width: 100%; color: white; text-align: center; font-family: 'Quicksand', sans-serif; font-size: 50px; line-height: 50px; font-weight: 400; letter-spacing: 0; text-transform: none;}

.galleria-thumbnails-container {bottom: -10px !important; left: 0 !important; right: 0 !important; z-index: 2 !important;}
.galleria-thumbnails .galleria-image {margin: 0 !important; border: 0 !important; background: rgba(24, 40, 54, 0.95) !important;}


#italian-dots {position: relative; height: auto; overflow: hidden; text-align: center; margin-bottom: 10px;}
#italian-dots .dot {position: relative; height: auto; overflow: hidden; display: inline-block; margin: 0 1px; border-radius: 5px; width: 10px; height: 10px;}
#italian-dots .dot-verde {background: green;}
#italian-dots .dot-bianco {background: white; border: 1px solid #b9b9b9;}
#italian-dots .dot-rosso {background: red;}

.bottoni-container {position: relative; height: auto; overflow: hidden; text-align: center; margin-top: 20px;}
.sezione {position: relative; height: auto; overflow: hidden; margin-bottom: 60px;}
.sezione:last-child {margin-bottom: 0}

#mappa {position: relative; height: auto; overflow: hidden; width: 100%; height: 330px;}

.row-dettaglio {position: relative; height: auto; overflow: hidden; margin-top: 30px;}
.row-dettaglio table {vertical-align: top; border: 0 !important; width: 100% !important;}
.row-dettaglio table tr, .row-dettaglio table td {border: 0 !important; vertical-align: top;}

a.bottone.button-three {width: 100%; margin: 0;}
.video-links {position: relative; padding:10px 0; height: auto; overflow: hidden; display: block; text-align: center; background: #253747; margin-top: -8px}
.video-links a {margin: 0 10px; font-size: 11px; line-height: 21px; font-family: 'Work Sans', sans-serif; letter-spacing: 2px; color: white;     display: inline-block;}
button.lity-next, button.lity-prev {display: none !important;}
.lity-close {right: 20px !important; top: 20px !important;}

.news-inhome {margin-top: 0 !important;}

.hamburger-label {position: absolute; top: 0; right: 40px; color: #D5DBDE; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; font-weight: 300;}

.rivenditori-container {position: relative; height: auto; overflow: hidden; margin-bottom: 20px; text-align: center;}
.item-rivenditori {position: relative; height: auto; overflow: hidden; text-align: center; vertical-align: top; margin: 0 15px 15px 0;}
.item-rivenditori p, .item-rivenditori h3 {text-align: center;}

.grid-container-home {margin-top: 0 !important; margin-bottom: 60px;}
.grid-container-home-last {margin-bottom: 0}

#main-content.credits a > img {display: inline-block;}

.section {position: relative; height: auto; overflow: hidden; margin-top: 40px;}
.section-progetto, .section-progetto p {text-align: center;}
.gallery h1, .text h1 {text-align: left;}
.text {}
.p-hide {display: none;}
.mostra {text-transform: uppercase; font-weight: 600; font-size: 10px;}

#show-hide-menu {position: absolute; right: 20px; top: 25px; cursor: pointer;}

.loghi-top {position: relative; text-align: center; margin: 30px 0;}
.loghi-top a {display: inline-block;}

.bx-wrapper img {width: 100% !important;}

.text.col-r-12, .text.col-r-12 p {text-align: center;}

/* --------------------------------------------------------------------------
        INFO TAB
--------------------------------------------------------------------------- */

#info-tab {height: 50px; width: 100%; bottom: 0; z-index: 2; position: absolute; color: #D5DBDE; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; font-weight: 300; background: rgba(24, 40, 54, 0.95);}
#info-tab-left {z-index: 2; position: absolute; top: 15px; left: 30px;}
#info-tab-center {z-index: 1; top: 10px; position: relative; height: auto; overflow: hidden; text-align: center; font-family: 'Quicksand', sans-serif; font-size: 22px; line-height: 32px; font-weight: 300; letter-spacing: 2px; text-transform: none;}
#info-tab-right {z-index: 2; position: absolute; top: 15px; right: 30px;}

#info-tab-left a, #info-tab-right a {color: #FFF;}
#info-tab img {display: inline-block;}
img.arrow-top {margin-right: 2px;}
img.arrow-bottom {margin-left: 3px;}


/* --------------------------------------------------------------------------
        Menù - Hamburger animation
--------------------------------------------------------------------------- */

.hamburger{padding:0;display:inline-block;cursor:pointer;font:inherit;color:inherit;text-transform:none;background-color:transparent;border:0;margin:0;overflow:visible}
.hamburger-box{width:30px;height:24px;display:inline-block;position:relative}
.hamburger-inner{display:block;top:50%;margin-top:-2px}
.hamburger-inner,.hamburger-inner::after,.hamburger-inner::before{width:30px;height:1px;background-color:#FFF;border-radius:4px;position:absolute;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;transition-duration:.15s;transition-timing-function:ease}
.hamburger-inner::after,.hamburger-inner::before{content:"";display:block}
.hamburger-inner::before{top:-10px}
.hamburger-inner::after{bottom:-10px}
.hamburger--spin .hamburger-inner{transition-duration:.3s;transition-timing-function:cubic-bezier(.55,.055,.675,.19)}
.hamburger--spin .hamburger-inner::before{transition:top .1s .34s ease-in,opacity .1s ease-in}
.hamburger--spin .hamburger-inner::after{transition:bottom .1s .34s ease-in,-webkit-transform .3s cubic-bezier(.55,.055,.675,.19);transition:bottom .1s .34s ease-in,transform .3s cubic-bezier(.55,.055,.675,.19);transition:bottom .1s .34s ease-in,transform .3s cubic-bezier(.55,.055,.675,.19),-webkit-transform .3s cubic-bezier(.55,.055,.675,.19)}
.hamburger--spin.is-active .hamburger-inner{-webkit-transform:rotate(225deg);transform:rotate(225deg);transition-delay:.14s;transition-timing-function:cubic-bezier(.215,.61,.355,1)}
.hamburger--spin.is-active .hamburger-inner::before{top:0;opacity:0;transition:top .1s ease-out,opacity .1s .14s ease-out}
.hamburger--spin.is-active .hamburger-inner::after{bottom:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);transition:bottom .1s ease-out,-webkit-transform .3s .14s cubic-bezier(.215,.61,.355,1);transition:bottom .1s ease-out,transform .3s .14s cubic-bezier(.215,.61,.355,1);transition:bottom .1s ease-out,transform .3s .14s cubic-bezier(.215,.61,.355,1),-webkit-transform .3s .14s cubic-bezier(.215,.61,.355,1)}
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::after, .hamburger.is-active .hamburger-inner::before {background:white}
#hamburger.hamburger-black .hamburger-inner, #hamburger.hamburger-black .hamburger-inner::after, #hamburger.hamburger-black .hamburger-inner::before {background: white;}


/* --------------------------------------------------------------------------
        SCHEDE
--------------------------------------------------------------------------- */

.col-r-3.col-r-schede {padding: 0 5px 5px 5px;}
.scheda, .scheda-pic, .scheda-content {position: relative; height: auto; overflow: hidden;}
.scheda h3 {text-transform: none; margin: 0; font-weight: 300; font-size: 15px; letter-spacing: 0; text-align: center; padding: 10px 0; background: white; border-bottom: 2px solid #fbcd2b;}
.scheda h3 a {display: block; text-align: center;}

.bottoni-dettaglio {position: relative; height: auto; overflow: hidden; margin-top: 10px; text-align: center;}
.bottoni-dettaglio img.ico-dettaglio {float: right; top: 3px; position: relative; margin-right: 25px; display: none;}

.grid-container {position: relative; height: auto; overflow: hidden; margin-top: -50px;}

/* --------------------------------------------------------------------------
        FOOTER
--------------------------------------------------------------------------- */

#footer {position: relative; padding: 15px 0; height: auto; overflow: hidden; background: #442f29; color: #fff; font-size: 10px;}
#footer .wrapper {padding: 0 20px; text-align: center;}
#footer a {color: #dadada;}
#footer a:hover {color: #FFF;}

#footer .left {position: absolute; left: 20px; top: 0;}
#footer .right {position: absolute; right: 20px; top: 0;}
#footer .center {position: relative; display: inline-block;}

/* --------------------------------------------------------------------------
        FORM
--------------------------------------------------------------------------- */

label {font-size: 12px; text-align: center; font-family: 'Open Sans', sans-serif; font-weight: 600; color: #222; letter-spacing: 0;}
input {position: relative; height: auto; overflow: hidden; width: 100%; border: 1px solid #E7E7E7; background: #FFF; font-size: 14px; letter-spacing: 1px; color: #8E8E8E; padding: 15px 20px 15px 20px; display: block; margin-bottom: 15px; font-family: 'Open Sans', sans-serif; font-weight: 400; border-radius: 4px;}
textarea {position: relative; height: auto; overflow: hidden; display: block; width: 100%; font-size: 13px; border: 1px solid #E7E7E7; letter-spacing: 1px; background: #FFF; padding: 15px 20px 15px 20px; height: 200px; margin-bottom: 15px; color: #8E8E8E; font-family: 'Open Sans', sans-serif; font-weight: 400; border-radius: 4px;}

input.submit {cursor: pointer; position: relative; height: auto; overflow: hidden; background: #442f29; font-size: 10px; line-height: 21px; font-family: 'Work Sans', sans-serif; text-transform: uppercase; letter-spacing: 5px; color: white; width: 200px; display: inline-block; text-align: center; padding: 12px 0;}
input.submit:hover {background: #65443a;}
input:focus, select:focus, textarea:focus, button:focus {outline: none;}


/* --------------------------------------------------------------------------
        Responsive: 2 colonne = width
--------------------------------------------------------------------------- */

.col-group-two img {width: 100%; display: block;}

.col-group-two > div {
/*  padding: 1em;
  margin-bottom: 1em;  */
  padding: 0 1em 0 0;
  position: relative;  overflow: hidden;
}

@media screen and (min-width: 44em) {
  .col-group-two {
    overflow: hidden;
  }
  .col-group-two > div {
    float: left;
    width: 50%;
    overflow: hidden;
  }
}


/* --------------------------------------------------------------------------
        Responsive: 3 colonne = width
--------------------------------------------------------------------------- */

.col-group-three {text-align: center; padding-bottom: 1px;}

.col-group-three img {width: 100%; display: block;}

.col-group-three > div {
  padding: 0 1em;
  position: relative;  overflow: hidden;
}

@media screen and (min-width: 50em) {
  .col-group-three {
    overflow: hidden;
  }
  .col-group-three > div {
    vertical-align: top;
    display: inline-block;
    width: 32.333333%;
    padding: 1em 0.5em 0 0.5em;
  }
}


/* --------------------------------------------------------------------------
        Responsive: 4 colonne = width
--------------------------------------------------------------------------- */

.col-group-four {text-align: center;}

.col-group-four > div {
  padding: 1em;
}

.col-group-four img {width: 100%; display: block;}

@media screen and (min-width: 44em) {
  .col-group-four {
    overflow: hidden;
  }
  .col-group-four > div {
    float: left;
    width: 50%;
  }
  .col-group-four > div:nth-child(odd) {
    clear: left;
  }
}
@media screen and (min-width: 64em) {
  .col-group-four > div {
    width: 25%;
  }
  .col-group-four > div:nth-child(odd) {
    clear: none;
  }
}


/* --------------------------------------------------------------------------
        Responsive: 5 colonne = width
--------------------------------------------------------------------------- */

.col-group-five {
  overflow: hidden;
}

@media screen and (min-width: 44em) {
  .col-group-five > div {
    float: left;
    width: 50%;
  }
  .col-group-five > div:nth-child(odd) {
    clear: left;
  }
}

@media screen and (min-width: 50em) {
  .col-group-five > div {
    float: left;
    width: 33.3333333%;
  }
  .col-group-five > div:nth-child(3n+1) {
    clear: left;
  }
  .col-group-five > div:nth-child(odd) {
    clear: none;
  }
}

@media screen and (min-width: 70em) {
  .col-group-five > div {
    width: 20%;
  }
  .col-group-five > div:nth-child(odd), .col-group-five > div:nth-child(3n+1) {
    clear: none;
  }
}


/* --------------------------------------------------------------------------
        FADE IN / FADE OUT
--------------------------------------------------------------------------- */

.js .hideme {opacity: 0;}


/* --------------------------------------------------------------------------
        Responsive patterns
--------------------------------------------------------------------------- */

.col-r-1 {width: 8.33%;}
.col-r-2 {width: 16.66%;}
.col-r-3 {width: 25%;}
.col-r-4 {width: 33.33%;}
.col-r-5 {width: 41.66%;}
.col-r-6 {width: 50%;}
.col-r-7 {width: 58.33%;}
.col-r-8 {width: 66.66%;}
.col-r-9 {width: 75%;}
.col-r-10 {width: 83.33%;}
.col-r-11 {width: 91.66%;}
.col-r-12 {width: 100%;}

[class*="col-r-"] {float: left; padding: 15px; position: relative; height: auto; overflow: hidden;}
[class*="col-r-"] p img {width: 100% !important; height: auto !important;}
.row::after {content: ""; clear: both; display: block;}

/* ---- MASONRY ---- */
.masonry {column-count: 2; column-gap: 0.3em; }
.item {width: 100%; position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;}
.item img {width: 100%; display: block; padding-bottom: 0.3em;}


/* --------------------------------------------------------------------------
        RESPONSIVE
--------------------------------------------------------------------------- */



@media screen and (max-width: 967px) {

  #footer .left {position: relative; left: auto; top: auto; display: block; text-align: center; float: none; line-height: 15px; margin-bottom: 5px;}
  #footer .right {position: relative; right: auto; top: auto; display: block; text-align: center; float: none; line-height: 15px;}
  #footer .center {position: relative; display: block; text-align: center; line-height: 15px; margin-bottom: 5px;}
}



@media screen and (max-width: 900px) {

  /* ---- FLEXBOX ---- */
  .flexbox-container {display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-moz-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start}
  .flexbox-container .first-div{-webkit-box-ordinal-group:2;-moz-box-ordinal-group:2;-ms-flex-order:2;-webkit-order:2;order:2}
  .flexbox-container .second-div{-webkit-box-ordinal-group:1;-moz-box-ordinal-group:1;-ms-flex-order:1;-webkit-order:1;order:1}

  .masonry {column-count: 2;}

  #info-tab {position: relative; /*margin-top: -50px;*/}
  #galleria {min-height: 300px; height: 400px !important;}
  #galleria.galleria-small {height: 300px !important;}
  #galleria-title {top: 150px;}

  #info-tab-left, #info-tab-right {display: none;}
  .galleria-thumbnails-container {bottom: -10px;}

  a.bottone {width: 100%;}
  .bottoni-dettaglio img.ico-dettaglio {margin: 0; right: 5%;}

  .hamburger-label {display: none;}

  h2 {font-size: 26px; line-height: 35px;}

  .bottoni-container a {margin-bottom: 10px;    display: block;}
  .bottoni-container a:last-child {margin-bottom: 0}

}

@media screen and (max-width: 1020px) {

  .only-mobile {display: block;}
  .not-mobile {display: none;}

  .masonry {column-count:1;}
  [class*="col-r-"] {float: none; padding: 0 0 15px 0 !important; width: 100%;}
  [class*="col-r-"]:last-child {padding-bottom: 0 !important;}

  #video-home {height: 400px;}

#logo {position: relative; left: 20px;}
  #menu {display: none; background: rgba(68, 47, 41, 0.95);width: 100%;margin-top: -4px;}
  #menu ul li {display: block; margin: 0; padding: 15px 0 5px 0; border-top: 1px solid rgba(68, 47, 41, 0.95);}
  #menu ul li a {padding: 0; margin: 0;}
  iframe.mobile-100 {width:100%;}

}

@media screen and (max-width: 450px) {

  #video-home {height: 230px;}

}