@import url('reset.css');

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

a {text-decoration: none; color: #333; font-weight: 400; cursor: pointer;}
a:hover {color: #CCC;}

body {
  font-family: 'Lato', sans-serif;
  background: #FFF;
  color: #727272;
  -webkit-text-size-adjust: 100%;
  font-size: 15px;
  line-height: 25px;
  letter-spacing: 0.3px;
  font-weight: 300;
}

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

h1 {font-family: 'Open sans', sans-serif; font-size: 26px; line-height: 32px; font-weight: 700; color: #000; text-transform: uppercase; letter-spacing: 2px; text-align: center; margin-bottom: 22px;}
h2 {font-family: 'Open sans', sans-serif; font-size: 17px; line-height: 28px; font-weight: 600; color: #000; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 15px}
h3, h3 a {font-family: 'Open sans', sans-serif; font-size: 13px; line-height: 35px; font-weight: 600; color: #000; text-transform: uppercase; letter-spacing: 1px; text-align: center;}
h4 {font-size: 13px; line-height: 21px; font-weight: 400; color: #999;  margin: 0 0 20px 0; letter-spacing: 0; text-transform: uppercase; letter-spacing: 2px; text-align: center;}
h5 {font-size: 13px; line-height: 24px; color: #999;  margin: 0 auto 10px auto; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; display: block; text-align: center;}

strong {color: #000; font-weight: 400}

#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;}
.vertical-align {top: 50%; transform: translateY(-50%); height: auto; overflow: hidden; position: relative}


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

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

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

#top {position: relative; height: auto; overflow: hidden; padding: 25px 0 18px 0;}
#top a.bottone {margin-right: 10px; border: 1px solid #000; padding: 10px 20px; text-transform: uppercase; font-size: 10px; font-weight: 400; letter-spacing: 3px; text-align: center;}
#top a.bottone:hover {color: #000; background: #F8F8F8;}
#top .lang a {text-transform: uppercase; font-size: 10px; padding: 0 2px;}
#top .top-right {top: -4px; position: relative;}

#logo {position: relative; height: auto; overflow: hidden; top: 2px;}
#slider {position: relative; height: auto; overflow: hidden; min-height: 489px; background: #f8f8f8;}

#menu {position: relative; height: auto;}
#menu ul {position: relative; height: auto; padding: 0; margin: 0 0 0 50px; display: inline-block; text-align: left;}
#menu ul li {position: relative; height: auto; display: inline-block; margin: 0px 25px 0 0;}
#menu ul li a {font-family: 'Open sans', sans-serif; font-size: 12px; line-height: 21px; letter-spacing: 1.5px; text-transform: uppercase; position: relative; height: auto; overflow: hidden; display: block; color: #777;}
#menu ul li a:hover, #menu ul li.active > a {color: black; }

.prepage {position: relative; height: auto; overflow: hidden; max-width: 80%; margin: 0 auto 30px auto;}
.prepage, .prepage p {text-align: center;}
.prepage p {font-size: 15px; line-height: 29px; color: #888; letter-spacing: 0.5px;}

.three-box-container {position: relative; height: auto; overflow: hidden;}
.three-box-container .col-r-4 img {width: 100%;}
.three-box-container .col-r-4 a {color: black;}
.three-box-container .col-r-4 {padding: 5px; margin-bottom: 20px;}

.col-r-4 h3 a {margin-top: 15px;}

.due-colonne {position: relative; height: auto; overflow: hidden; margin: 0 auto; max-width: 900px;}
.due-colonne.due-colonne-contatti {text-align: center;}
.due-colonne.due-colonne-contatti .col-r-3 {padding-right: 0;}
.due-colonne.due-colonne-contatti .col-r-3, .due-colonne.due-colonne-contatti .col-r-6 {display: inline-block; float: none; vertical-align: top;}

#map {position: relative; display: block; height: auto; overflow: hidden; width: 100%; height: 400px;}

.galleria-loader {display: none !important;}

.row-check .col-r-6 {padding: 0; width: 49%;}
.row-check .col-r-6:first-child {padding-right: 5px;}
.row-check .col-r-6:last-child {padding-left: 5px;}


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

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

#footer {padding: 20px 0; font-family: 'Open sans', sans-serif; position: relative; height: auto; overflow: hidden; font-size: 11px; color: #777;}
#footer .social {display: inline-block; top: 1px; position: relative; margin-left: 10px;}
#footer .social a {display: inline-block; position: relative; top: 2px; color: #777 !important;}


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

label {font-size: 12px; text-align: center; font-family: 'Open Sans', sans-serif; font-weight: 400; color: #000; letter-spacing: 0.5px;}
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; border-radius: 0; color: #000; border: 1px solid #e7e7e7; padding: 10px 20px; text-transform: uppercase; font-size: 10px; font-weight: 400; letter-spacing: 3px; text-align: center;}
input.submit:hover {background: #f8f8f8;}
input:focus, select:focus, textarea:focus, button:focus {outline: none;}

iframe {height: 100%; width: 100%}



/* --------------------------------------------------------------------------
        HAMBURGER
--------------------------------------------------------------------------- */

#show-hide-menu {position: absolute; right: 20px; display: block; top: 9px; z-index: 999; cursor: pointer;}
#show-hide-menu.only-mobile {display: none;}

.hamburger{z-index: 2;padding:0;display:inline-block;cursor:pointer;transition-property:opacity,filter;transition-duration:.15s;transition-timing-function:linear;font:inherit;color:inherit;text-transform:none;background:transparent;border:0;margin:15px; margin-right: 0;overflow:visible;position: absolute;right: 0}
.hamburger:hover{opacity:.7}
.hamburger.is-active {position: absolute;right:0}
.hamburger.is-active:hover{opacity:.7}
.hamburger.is-active .hamburger-inner,.hamburger.is-active .hamburger-inner::before,.hamburger.is-active .hamburger-inner::after{background-color:#FFF}
.hamburger-box{width:25px;height:24px;display:inline-block;position:relative}
.hamburger-inner{display:block;top:50%;margin-top:-2px}
.hamburger-inner,.hamburger-inner::before,.hamburger-inner::after{width:25px;height:2px;background-color:#000;border-radius:4px;position:absolute;transition-property:transform;transition-duration:.15s;transition-timing-function:ease}
.hamburger-inner::before,.hamburger-inner::after{content:"";display:block}
.hamburger-inner::before{top:-10px}
.hamburger-inner::after{bottom:-10px}
.hamburger--spring .hamburger-inner{top:2px;transition:background-color 0 .13s linear}
.hamburger--spring .hamburger-inner::before{top:9px;transition:top .1s .2s cubic-bezier(0.33333,0.66667,0.66667,1),transform .13s cubic-bezier(0.55,0.055,0.675,0.19)}
.hamburger--spring .hamburger-inner::after{top:18px;transition:top .2s .2s cubic-bezier(0.33333,0.66667,0.66667,1),transform .13s cubic-bezier(0.55,0.055,0.675,0.19)}
.hamburger--spring.is-active .hamburger-inner{transition-delay:.22s;background-color:transparent!important}
.hamburger--spring.is-active .hamburger-inner::before{top:0;transition:top .1s .15s cubic-bezier(0.33333,0,0.66667,0.33333),transform .13s .22s cubic-bezier(0.215,0.61,0.355,1);transform:translate3d(0,10px,0) rotate(45deg)}
.hamburger--spring.is-active .hamburger-inner::after{top:0;transition:top .2s cubic-bezier(0.33333,0,0.66667,0.33333),transform .13s .22s cubic-bezier(0.215,0.61,0.355,1);transform:translate3d(0,10px,0) rotate(-45deg)}




/* --------------------------------------------------------------------------
        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;
  }
}

/* --------------------------------------------------------------------------
        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;}
.row::after {content: ""; clear: both; display: block;}

/* --------------------------------------------------------------------------
        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;}

.row::after {content: ""; clear: both; display: block;}

/* ---- MASONRY ---- */
.masonry {column-count: 2; column-gap: 0.7em; }
.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.7em;}


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

@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;}

}


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

  #logo {top: 0;}
  .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;}

  #slider {min-height: 225px;}
  #footer-image {height: 130px;}

  .row-check .col-r-6:first-child {padding-right: 0;}
  .row-check .col-r-6:last-child {padding-left: 0;}

  #footer .left, #footer .right {text-align: center; float: none;}

  #menu, .top-right {display: none;}
  #show-hide-menu.only-mobile{display: block;position: fixed;}
  body.stop-scroll,html.stop-scroll{overflow: hidden}

  #menu-mobile{display:none;position:fixed;left:0;right:0;z-index:9;background:#0a0a0a;top:0;bottom:0}
  #menu-mobile ul{margin:0;padding:0}
  #menu-mobile ul li{display:block;text-align:center;width:100%;padding:10px 0;margin:0}
  #menu-mobile ul li,#menu-mobile ul li a{font-size:24px;line-height:31px;font-weight:300;color:#b9b9b9;letter-spacing: 0.5px}
  #menu-mobile ul li:hover,#menu-mobile ul li a:hover,#menu-mobile ul li.active a{color:#FFF}

  .bottom-menu-mobile {position: absolute; width: 100%; bottom: 50px; text-align: center; color: #999; text-transform: uppercase; font-weight: 500; font-size: 12px;}
  .bottom-menu-mobile a {color: #FFF; font-weight: 400;}
  .bottom-menu-mobile a:hover {color: #999;}
  
  .bottom-menu-mobile a.active {color: #999}

}