@import url('reset.css');

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


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

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

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

h1 {font-size: 42px; line-height: 42px; font-family: 'Titillium Web', sans-serif; font-weight: 400; color: #294476; margin-bottom: 20px; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
h2 {font-size: 27px; line-height: 37px; font-family: 'Titillium Web', sans-serif; font-weight: 400; color: #294476; margin-bottom: 15px; letter-spacing: 2px; text-align: center;  text-transform: uppercase;}
h3{font-size: 18px; line-height: 22px; font-family: 'Titillium Web', sans-serif; font-weight: 600; color: #294476;  margin: 7px auto; letter-spacing: 2px; text-align: center; text-transform: uppercase;}
h4 {font-size: 15px; line-height: 21px; font-family: 'Titillium Web', sans-serif; font-weight: 600; color: #294476;  margin: 0 auto 12px auto; letter-spacing: 2px; text-transform: uppercase;}

strong {font-weight: 700;}

#cookieChoiceInfo {display:none; color: #CCC; bottom: 0; top: inherit !important; font-size: 12px; line-height: 20px; padding: 20px 30px 19px 32px !important; font-family: "Open sans", sans-serif; background-color: black !important; text-align: left !important}
#cookieChoiceInfo a#cookieChoiceDismiss {position: absolute;top: 20px;right: 20px; font-size: 15px}
/*#cookieChoiceInfo a#cookieChoiceDismiss::after{content: "\2715"}*/
#cookieChoiceInfo a {color: white;}
#cookieChoiceInfo a:hover {color: #CCC;}

a.button {background: #2a487b; color: #FFF; margin-top: 20px; border: 0; border-radius: 4px; cursor: pointer; font-weight: bold; text-transform: uppercase; font-size: 11px; padding: 8px 25px; text-align: center; -webkit-appearance: none; letter-spacing:5px; font-weight:400; font-family: 'Titillium Web', sans-serif; display: inline-block;}
a.button:hover {background: #26406d;}


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

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

#main-content {position: relative; height: auto; overflow: hidden; background: #FFF;}
#main-content.margin-top {padding-top: 180px;}
.wrapper {position: relative; height: auto; overflow: hidden; margin: 0 auto; width: 100%; padding: 0 1em; max-width: 1100px;}
.wrapper-small.wrapper {max-width: 890px;}

.flex-vertical-center {display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.flex {display: flex; flex-direction: row; align-content: center; justify-content: space-between;}

#topbar {position: absolute; top: 0; left: 0; right: 0; z-index: 10; padding: 20px 0;}
#topbar a {color: white; font-size: 14px; text-transform: uppercase; margin: 0 0 0 20px; letter-spacing: 2px; display: inline-block; font-family: 'Varela Round', sans-serif;}
#topbar .logo img, .logo video {width: 100px;}
#topbar .menu {padding-top:28px;}
#topbar .logo a {margin-left: 0}
#videobig {width: 100%; height: auto; max-width: 200px; min-height: 200px; display: inline-block;}
#videobig-container {position: relative; text-align: center; display: block; margin-bottom: 5px}


#slogan {position: absolute; z-index: 2; text-shadow: 3px 2px 8px rgba(39,37,37,0.50); opacity: 0; text-align: center; right: 20%; left: 20%; top: 0; margin-top: -25px;}
#slogan p {text-shadow: 3px 2px 8px rgba(39,37,37,0.50);text-align: center; font-size: 35px; line-height: 46px; font-family: 'Titillium Web', sans-serif; font-weight: 700; letter-spacing: 7px; text-transform: uppercase; color: white;}
#slogan .author {color: white; text-shadow: 3px 2px 8px rgba(39,37,37,0.50); text-align: right; font-size: 17px; line-height: 21px; font-family: 'Titillium Web', sans-serif; font-weight: 500; margin-top: -12px;}

section {position: relative; height: auto; overflow: hidden; padding: 80px 0;}

#galleria {position: relative; height: auto; overflow: hidden; background: #F8F8F8; height: 400px; z-index: 1;}
#galleria .galleria-stage {background: #444;}
#galleria .galleria-images {opacity: 0.8;}
#galleria-title {position: absolute; top: 0; left: 0; right: 0; margin: auto; text-align: center; z-index: 2;}
#galleria-title h1 {position: relative; height: auto; overflow: hidden; font-family: 'Playfair Display', serif; text-transform: none; letter-spacing: 0; text-align: center; margin: 0; font-size: 65px; line-height: 75px; color: white; max-width: 670px; width: 100%; margin: 0 auto;}

#about {padding-top: 50px;}
#about p {margin: 0 auto; width: 100%; }
#about .col-group-two p {text-align: left;}

#about-two-cols {background: #f8f8f8; padding: 0;}
.row-about-iniziale [class*="col-r-"] {padding: 80px 140px !important;}
.row-about-iniziale .abcol2 {background: #f3f3f3}
.img-gamma-logo-about {position: relative; height: auto; overflow: hidden; margin-bottom: 10px}
.img-gamma-logo-about img {display: inline-block; width: 100%; max-width: 120px;}


.step-video {
    position: relative;
    overflow: hidden;
    height: 210px;
    margin-bottom: 15px;
}
iframe.single-jg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 210px;
    width: 160%;
    min-width: auto !important;
}


#steps {background: #FFF;}
#steps .wrapper {max-width: 90%}
#steps .col-group-four {position: relative; height: auto; overflow: hidden; display: block;}
#steps .step-title {position: relative; height: auto; overflow: hidden;}
#steps .step-title h3 {text-align: left;}
#steps .step-desc {position: relative; height: auto; overflow: hidden; margin-top: 8px;}
#steps .step-desc p {margin: 0; font-size: 14px; line-height: 26px; text-align: left;}
#steps .bxicon {position: relative; height: auto; padding: 0; text-align: center;}
#steps .bxicon li {text-align: center; margin: 0; padding: 0; display: inline-block;}
#steps .step-pic {text-align: center; position: relative; height: auto; overflow: hidden; margin-bottom: 15px}

section#mappa {padding: 0;}
/*#steps .step-pic-1:hover > .step-pic {background: url("/frontend/img/hover-ico-1.png") no-repeat !important;}
#steps .step-pic-2:hover > .step-pic {background: url("/frontend/img/hover-ico-2.png") no-repeat !important;}
#steps .step-pic-3:hover > .step-pic {background: url("/frontend/img/hover-ico-3.png") no-repeat !important;}
#steps .step-pic-4:hover > .step-pic {background: url("/frontend/img/hover-ico-4.png") no-repeat !important;}*/

#contatti h2 {text-align: left;}

.social-top {margin-top: 4px; position: relative;}
.social-top img {width: 18px;}

#video-container {height: 100vh !important; background: #CCC; position: relative; height: auto; overflow: hidden; z-index: 1}
#vimeoplayer, .sqs-video-background .custom-fallback-image.loaded {display:none}

iframe.jg {
  z-index: 1 !important;
  width: 220vh; min-height: 100vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  min-width: 177.77vh !important; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  height: 56.25vw !important; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
}

.product-offer {font-family: 'Titillium Web', sans-serif;  font-weight: 600; font-size: 15px; color: #294476;}
#video-overlay {background: rgba(1,15,40,0.3); z-index: 2; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}


#map-video-container {background: #CCC; height: auto; overflow: hidden; position: relative; height: 450px;}
#map-video-overlay {/*background: rgba(1,15,40,0.3)*/; z-index: 2; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
#map-video-container iframe.jg {width: auto; min-height: auto}

.video-container-inside, iframe.jg.video-container-inside, #video-container.video-container-inside {height: 50vh !important;}


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

#footer {position: relative; height: auto; overflow: hidden; background: #2a487b; font-size: 12px; line-height: 25px; color: white;}
#footer .wrapper {padding: 2.5em 1em;}
#footer, #footer a {color: #FFF;}
#footer a:hover {color: #CCC;}

#social {position: absolute; right: 0; top: 7px;}
#social img {width: auto;}

#mappa iframe {height: 600px;margin-top: -59px; position: relative;}



/* --------------------------------------------------------------------------
        INTERVIEWS
--------------------------------------------------------------------------- */

.h1-left h1 {text-align: left; font-size: 27px; line-height: 37px;}
.singola-interview {margin-bottom: 25px;}
.singola-interview h2 {text-align: left; font-size: 15px; line-height: 21px;}
.singola-interview .button {margin-top: 0;}
.breadcrumb-interviews {text-transform: uppercase; font-size: 12px;}
.breadcrumb-interviews a {color: #555;}


/* --------------------------------------------------------------------------
        PRODOTTI
--------------------------------------------------------------------------- */

section#products {padding-top: 0; padding-bottom: 0; color: #444;}
.rowsiema {/*margin-top: 80px;*/ background: #f8f8f8;}
#products .col-r-6:first-child {padding: 0 !important;}
#products .prodtext {padding: 20px 110px;}
.more-img img {width: 100%;    display: block;}

.grid-teil-title-siema, .grid-teil-subtitle-siema {position: relative;height: auto;overflow: hidden;}
.grid-teil-title-siema {font-size: 22px; line-height: 30px; margin-bottom: 15px; letter-spacing: 1.5px; text-align: left;}
.bottone-prev-next {pointer-events:auto;border:0;background:none;padding:1rem;margin:.85rem;text-transform:inherit;position:relative;height:auto;overflow:hidden;line-height:1;cursor:pointer;color:#294476}
.bottone-prev-next:hover{color:#999}
.bottone-prev-next.prev{padding-left:0;margin-left:0}
.bottone-prev-next.next{padding-left:0;margin-left:0}


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

label {font-size: 12px; text-align: center; font-family: 'Open Sans', sans-serif; font-weight: 400; color: #333; 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: 130px; margin-bottom: 15px; color: #8E8E8E; font-family: 'Open Sans', sans-serif; font-weight: 400; border-radius: 4px;}

input.submit {background: #2a487b; color: #FFF; border: 0; border-radius: 4px; cursor: pointer; font-weight: bold; text-transform: uppercase; font-size: 11px; padding: 18px 25px; width: 150px; text-align: center; -webkit-appearance: none; letter-spacing: 5px; font-weight:400; font-family: 'Varela Round', sans-serif;}
input.submit:hover {background: #26406d;}
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;
  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 > 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 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;}
.row.row-no-margin {margin: -15px;}


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

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

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


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

  .only-mobile {display: block;}
  .not-mobile {display: none;}
  [class*="col-r-"] {float: none; /*padding: 0 0 15px 0 !important;*/ width: 100%;}
  [class*="col-r-"]:last-child {padding-bottom: 0 !important;}

  #galleria {height: 400px !important;}
  #slogan {font-size: 18px; line-height: 32px; letter-spacing: 4px; right: 20px; left: 20px; top: 200px !important;}
  #slogan p {font-size: 20px; line-height: 30px; letter-spacing: 4px;}
  .col-r-4, .col-r-8 {width: 100%; float: none;}
  #slogan .author {text-align: center;}
  #footer .left, #footer .right {text-align: center; float: none;}
  #products .prodtext {
      padding: 20px 20px 0 20px !important;
  }
  .wrapper-small.wrapper {max-width: 100%;}

  .flex-vertical-center {display: block;}
  .flex-vertical-center.flexbox-container {display: flex;}

  [class*="col-r-"] {float: none; padding: 0 0 15px 0 !important; width: 100%;}
  [class*="col-r-"]:last-child {padding-bottom: 0 !important;}
  .row.row-no-margin {margin: 0;}
  .row-about-iniziale [class*="col-r-"] {padding:60px 20px !important;}

  #video-container {height: 51vh !important}
  iframe.jg {min-height: 51vh !important;}
  section {padding: 60px 0;}

  #steps .wrapper {max-width: 100%}
  .step-video {height: 290px;}

  iframe.single-jg-video {height: 290px; width: 158%;}
  #topbar a {margin-left: 0}

  .video-container-inside, iframe.jg.video-container-inside, #video-container.video-container-inside {
      height: 20vh !important;
  }

}

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

.left.logo {float: none;text-align: center;}
.right.menu {display: none;} 

}

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

#map-video-container iframe.jg {min-height: 71vh !important;}

}