@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 {
    background-color: #fff;
    font-family: 'Lato', sans-serif;
    color: #777;
    font-size: 14px;
    line-height: 26px;
    letter-spacing: 0;
    font-weight: 300;
    -webkit-text-size-adjust: 100%;
}

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

h1 {font-size: 24px; font-family: 'Open sans', sans-serif; font-weight: 500; color: #333; margin-bottom: 34px; letter-spacing: 0;}
h2 {font-size: 14px; font-family: 'Lato', sans-serif; font-weight: 400; color: #333; margin-bottom: 15px;}
h3 {font-size: 15px; line-height: 22px; font-family: 'Lato', sans-serif; font-weight: 400; color: #333;  margin: 7px auto; letter-spacing: 0;}
h4 {font-size: 15px; line-height: 21px; font-family: 'Lato', sans-serif; font-weight: 700; color: #333;  margin: 0 auto 7px auto; letter-spacing: 2px; text-transform: uppercase;}
h5 {font-size: 13px; line-height: 24px; font-family: 'Lato', sans-serif; color: #333;  margin: 0 auto 10px auto; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; display: block;}

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

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


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

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

#side {position: fixed; height: 100%; overflow: hidden; width: 300px; padding: 50px; float: left;}

#logo img {width: 120px;}

#main-content {position: relative; height: auto; overflow: hidden; margin-left: 300px;}
.wrapper {position: relative; height: auto; margin: 0 auto; width: 100%; padding: 48px 0; float: left; width: 70%;}
.wrapper-progetti {width: 100%; padding-right: 50px;}

#menu {position: relative; height: auto; overflow: hidden; margin-top: 30px;}
#menu ul {position: relative; height: auto; overflow: hidden; padding: 0; margin: 0; display: block;}
#menu ul li {position: relative; height: auto; overflow: hidden;}
#menu ul li a {font-family: "Open Sans", sans-serif; position: relative; height: auto; overflow: hidden; display: block; color: #888; font-size: 14px; letter-spacing: 0; font-weight: 200; margin-bottom: 3px}
#menu ul li a:hover, #menu ul li.active a {color: #000;}

#menu ul.main li a {font-weight: 400;}
#menu ul.main {margin-bottom: 20px;}

#galleria {position: fixed; z-index: 0; top: 0; left: 0; right: 0; bottom: 0;}
.galleria-loader {display: none !important;}

#fixed-dorin {position: fixed; z-index: 1; bottom: 0; right: 0;}
#fixed-dorin img {max-width: 200px; width: 100%; display: block;}

a.bottone {border: 1px solid #000; background: #000; color: white; padding: 8px 20px; display: inline-block;}
a.bottone:hover {background: #555;}

.col-group-three.col-group-servizi {margin: -15px;}
.cta-servizi {margin-top: 20px; display: block;}

/* --------------------------------------------------------------------------
        GRID
--------------------------------------------------------------------------- */

.placeholder {display: block; width: 100%; height: 100%; background: white url(/frontend/img/placeholder.png) center center no-repeat; border: 1px solid #f5f5f5; position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
.grid, .grid-pic, .grid-content {position: relative; height: auto; overflow: hidden;}
.grid-content {position: relative; height: auto; overflow: hidden; margin-top: 10px;}
.grid-content h2 {margin-bottom: 8px;}
.grid-content p {text-align: center; margin: 0;}
.content-dettaglio {margin-top: 30px; position: relative; height: auto; overflow: hidden;}

.col-r-9.col-r-grid {padding-left: 0}
.col-r-3.col-r-grid {position: fixed; width: 20%; right: 20px;}
.col-r-grid div img {display: block; width: 100%}
.col-r-grid div {position: relative; height: auto; overflow: hidden; margin-bottom: 20px;}
.col-r-grid div:last-child {margin-bottom: 0}

h1.h1-progetti {font-size: 20px;margin-bottom: 20px;font-weight: 600;}


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

#footer {position: absolute; bottom: 50px}
#footer-mobile {position: relative; height: auto; overflow: hidden; display: none;}
#social {margin: 0 0 15px 0;}
#social a {display: inline-block; margin: 0 5px 0 0;}
#social a:last-child {margin-right: 0; margin-left: 2px;}
#credits {font-size: 11px; line-height: 24px;}
#credits a {color: #777; font-weight: inherit;}
#credits a:hover {color: #000;}

#lang {font-size: 11px; line-height: 24px; margin-bottom: 15px;}

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

label {font-size: 10px; text-align: center; font-family: 'Open Sans', sans-serif; font-weight: 600; color: #000; text-transform: uppercase; letter-spacing: 2px;}
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 {background: #000; color: #FFF; border: 0; border-radius: 4px; cursor: pointer; font-weight: bold; text-transform: uppercase; font-size: 13px; padding: 12px 0 12px 0; width: 150px; text-align: center; -webkit-appearance: none; font-weight:400; font-family: 'Open Sans', sans-serif;}
input.submit:hover {background: #333;}
input:focus, select:focus, textarea:focus, button:focus {outline: none;}

iframe {height: 620px; border: 10px solid #fbfbfb !important;}


/* --------------------------------------------------------------------------
        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;}
.js .hideme.animation-slide-up {position: relative; top: 20px;}


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


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

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

  #side {position: relative; width: 100%; text-align: center; float: none; position: relative; height: auto; overflow: hidden; padding: 2em;}
  #logo {display: inline-block; clear: both;}
  #menu {display: block;}
  #menu ul {display: block; text-align: center;}
  #menu ul.main {margin: 0;}
  #menu ul li {margin: 0 10px; display: inline-block;}

  #bg-mobile {position: fixed; right: 0; bottom: 0; z-index: -1;}
  #bg-mobile img {display: block;}

  #fixed-dorin {display: none;}

  #footer {display: none;}
  #footer-mobile {display: block; text-align: center; margin: 2em; text-shadow: 1px 0px white;}
  #credits, #social {text-align: center;}

  #lang {text-align: center;}

  #galleria {display: none;}

  #main-content {margin: 0; padding: 2em 0; text-shadow: 1px 0px white;}
  #main-content div p {text-align: center;}
  .wrapper {width: 100%; float: none; padding: 0 2em;}
  .wrapper-progetti {padding: 0 2em;}
  .wrapper-progetti div {text-align: center;}
  h1 {text-align: center;}

  .grid-content h2 {text-align: center;}
  .col-group-two > div {padding: 0}

  .col-r-9,.col-r-3 {width: 100%; padding: 0;}
  .col-r-3.col-r-grid {position: relative; width: 100%; padding: 0 2em; right: 0;}
  .col-r-grid div p {text-align: center;}

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

  .col-group-servizi.col-group-three, .col-group-servizi.col-group-three p, .col-group-servizi.col-group-three div, .col-group-servizi.col-group-three h3 {text-align: left !important;}
  .col-group-three.col-group-servizi {margin: 0;}

  .cta-servizi {text-align: center;}

}


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

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

}

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


}