@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; font-weight: 400;}
a:hover {color: #CCC;}

body {
  font-family: 'Roboto', sans-serif;
  background: #FFF;
  color: #999;
  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: 35px; line-height: 45px; font-weight: 400; color: #333;font-family: 'Roboto', sans-serif; letter-spacing: 0; margin-bottom: 20px; text-align: center;}
h2 {font-size: 31px; line-height: 45px; font-weight: 300; font-family: 'Roboto', sans-serif; color: #333; margin-bottom: 30px; text-align: center;}
h3 {font-size: 15px; line-height: 22px; font-weight: 500; color: #333;font-family: 'Roboto', sans-serif; letter-spacing: 0; margin-bottom: 5px; 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: #253747; 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: #0f2438;}


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

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

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

#top {position: relative; height: auto; overflow: hidden; padding: 50px 0 0 0;}
#menu-container {float: right; margin-top: 24px;}
#logo {float: left;}
#logo img {width: 248px;}
#logo a.only-mobile {display: none !important}

#lang-social-container {position: relative; height: auto; overflow: hidden; margin-bottom: 15px;}
#lang {position: relative; height: auto; overflow: hidden; float: right; margin-right: 8px !important; font-size: 11px; font-weight: 300;}
#lang a, #lang {color: #b8b8b8;}
#lang a:hover, #lang a.active {color: #000;}
#social {text-align: right; margin-bottom: 1px; float: right;}
#social a {display: inline-block; margin: 0 0 0 10px;}
#social img {width: 13px;}

#menu {position: relative; height: auto; overflow: hidden;}
#menu ul {position: relative; height: auto; overflow: hidden; padding-left: 0}
#menu ul li {position: relative; height: auto; overflow: hidden; list-style: none; display: inline-block; margin-left: 20px;}
#menu ul li a {position: relative; height: auto; overflow: hidden; font-family: "Yanone Kaffeesatz", sans-serif; font-size: 18px; line-height: 21px; font-weight: 300; text-transform: uppercase; color: #b8b8b8;}
#menu ul li a:hover, #menu ul li.active a {color: #000;}

.col-r-content, .col-r-content h1, .col-r-content h2 {text-align: left;}
.col-r-content {padding-left: 50px !important;}
.col-r-5 img {width: 100%;}

form#contactform {padding-top:10px;}

.row {margin: -15px;}

.align-center img {display: inline-block !important; width: 100%;}



/* --------------------------------------------------------------------------
        HOME
--------------------------------------------------------------------------- */

#galleria {height: 450px}
.galleria-loader {display: none !important;}

/*#content-home, #content-home h1, #content-home p {text-align: center;}*/
#content-home h1, #content-home h2, #content-home h3 {text-align: left;}
#content-home {width: 100%; max-width: 100%; position: relative; padding: 0 0; margin: 50px auto 0 auto;}


/* --------------------------------------------------------------------------
        SERVIZI
--------------------------------------------------------------------------- */

.content-servizi {position: relative; height: auto; overflow: hidden; width: 100%; max-width: 700px; margin: 0 auto; padding-top: 20px;}
.content-servizi, .content-servizi h1, .content-servizi p {text-align: center;}

#icone-grid {position: relative; height: auto; overflow: hidden; padding-top: 50px;}
.icon-img {position: relative; height: auto; overflow: hidden; text-align: center;}
.icon-img img {display: inline-block; max-width: 100px; width: 100%;}
.icon-text {position: relative; height: auto; overflow: hidden;}
.icon-text, .icon-text h3, .icon-text p {text-align: center;}


/* --------------------------------------------------------------------------
        GALLERY
--------------------------------------------------------------------------- */

.gallery .col-r-6:nth-child(2n+1) {clear:both;}


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

#footer {position: relative; height: auto; overflow: hidden; font-size: 11px; font-weight: 300; color: #888; padding-bottom: 50px;}
#footer a {color: #888;}
#footer a:hover {color: #000;}


/* --------------------------------------------------------------------------
        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: #000; 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: #333;}
input:focus, select:focus, textarea:focus, button:focus {outline: 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;break-inside: avoid}
.item img {width: 100%; display: block; }

.masonry { /* Masonry container */
  column-count: 2;
  column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
  display: inline-block;
  margin: 0 0 1em;
  width: 100%;
}

/* --------------------------------------------------------------------------
        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) {

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

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

  #logo {float: none; text-align: center;}
  #logo a {display: inline-block;}
  #logo a.only-mobile {display: inline-block !important}

  #social {margin-bottom: 20px;}
  #menu-container, #menu, #social {float: none; text-align: center; display: block;}
  #menu ul {text-align: center;}
  #menu ul li {margin: 0 10px;}
  #footer .left, #footer .right {float: none; text-align: center;}

  .row {margin: 0;}
  .col-r-content {padding-left: 0 !important; padding-top: 20px !important;}
  .vertical-align {top: auto; transform: none !important;}
	#lang {    float: none;
    text-align: center;}
  #galleria {height: 300px}
  #logo img {width: 180px;}
 
}