/* home */
.home-img {
    width: 1000px;
    height: 500px;
    max-width: 100%;
  }
  
  /* mosaic */
  
  h2 {
    color: #ffffff;
    font-weight: normal;
    font-size: 40px;
  }
  
  p {
    color: #F5B1B5;
  }
  
  .teaser-img {
    width: 100%;
    height: auto;
  }
  
  .mos-item {
    width: 1000px;
    margin: 0 auto;
    padding: 25px 0;
  }
  
  .mos-item:before,
  .mos-item:after {
    content: " "; /* 1 */
    display: table; /* 2 */
  }
  
  .mos-item:after {
    clear: both;
  }
  
  /*
   * For IE 6/7 only
   * Include this rule to trigger hasLayout and contain floats.
   */
  
  .mos-item {
    *zoom: 1;
  }
  
  .mos-item h2 {
    margin: 0 0 20px 0;
  }
  
  .mos-item:last-child {
    margin-bottom: 50px;
  }
  
  .mos-teaser {
    width: 1200px;
    height: 450px;
    margin: 0 auto;
    padding-bottom: 25px;
  }
  
  .mos-text h2 {
    text-align: center;
    margin: 0 0 20px 0;
  }
  
  .mos-text .text {
    font-family: 'Merriweather', serif;
    font-size: 18px;
    width: 80%;
    margin: 0 auto;
    text-align: center;
  }
  
  .mos-text .text p:last-child {
    margin-bottom: 0;
  }
  
  .mos-separator {
    width: 100%;
    padding: 30px 0 33px 0;
    text-align: center;
  }
  
  .mos-img-left .img-left {
    display: inline-block;
    width: 49%;
    text-align: center;
    vertical-align: middle;
  }
  
  .mos-img-left .img-left iframe {
    max-width: 470px;
    max-height: 270px;
  }
  
  .mos-img-left .img-left img {
    width: 470px;
    height: 270px;
  }
  
  .mos-img-left .text {
    display: inline-block;
    width: 99%;
    padding-left: 1%;
    text-align: center;
  }
  
  .mos-img-left .text h2 {
    margin: 10px 0;
  }
  
  .mos-img-left .text p {
    margin: 10px 0;
  }
  
  .mos-img-left .text p:last-child {
    margin-bottom: 0;
  }
  
  .mos-img-right .img-right {
    display: inline-block;
    width: 49%;
    text-align: center;
    vertical-align: middle;
  }
  
  .mos-img-right .img-right iframe {
    max-width: 470px;
    max-height: 270px;
  }
  
  .mos-img-right .img-right img {
    width: 470px;
    height: 270px;
  }
  
  .mos-img-right .text {
    display: inline-block;
    width: 99%;
    padding-right: 1%;
    text-align: center;
    vertical-align: middle;
  }
  
  .mos-img-right .text h2 {
    margin: 10px 0;
  }
  
  .mos-img-right .text p {
    margin: 10px 0;
  }
  
  .mos-img-right .text p:last-child {
    margin-bottom: 0;
  }
  
  .with-icon,
  .no-icon,
  .video-info {
    display: inline-block;
    width: 49%;
    vertical-align: middle;
  }
  
  .mos-gallery {
    text-align: center;
  }
  
  .mos-gallery .text {
    width: 80%;
    margin: 0 auto;
  }
  
  .gallery-item {
    width: 20%;
    float: left;
    text-align: center;
    margin: 10px 0;
  }
  
  .gallery-item img {
    width: 62.5%;
    height: auto;
  }
  
  .triplet {
    width: 33.3333%;
    float: left;
    margin: 0;
    text-align: center;
  }
  
  .triplet img {
    width: 260px;
    max-width: 90%;
    height: auto;
    margin: 0 auto;
  }
  
  .triplet h2 {
    max-width: 90%;
    margin: 10px auto 10px auto;
  }
  
  .triplet p {
    max-width: 90%;
    margin: 10px auto;
  }
  
  /* gallery group */
  .gallery-group {
    width: 1020px;
    margin: 0 auto;
    text-align: center;
  }
  
  .gallery-group-item:last-child .gallery-separator {
    display: none;
  }
  
  .gallery-image {
    width: 31.3333%;
    margin: 20px 1%;
    float: left;
    height: 320px;
    overflow: hidden;
  }
  
  .gallery-image img {
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity .3s ease-in;
  }
  
  .gallery-group h2 {
    margin-bottom: 0;
  }
  
  .sub-title {
    font-size: 18px;
    width: 80%;
    margin: 1em auto;
    text-align: center;
  }
  
  /* gallery */
  .gallery-group {
    width: 100%;
    max-width: 842px;
    margin: 50px auto 100px auto;
    overflow: hidden;
  }
  .gallery-thumbs-wrap {
    position: relative;
    width: 100%;
    height: auto !important;
    box-sizing: border-box;
    padding: 0 80px;
    color: #fff;
  }
  .gallery-thumbs-wrap .swiper-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  .gallery-thumb {
    float: left;
    /*box-sizing: border-box;*/
    padding: 0;
    cursor: pointer;
    max-width: 129px;
    margin-right: 10px;
    background: url("/img/ajax-loader.gif") no-repeat center center;
  }
  @media only screen and (max-width: 1020px) {
    .gallery-thumb {
      max-width: 100%;
    }
  }
  .gallery-thumb img {
    width: 100%;
    height: auto;
  }
  .gallery-image-group {
    position: relative;
    width: 100%;
    margin: 30px auto;
    padding: 20px 0;
    text-align: center;
    color: #fff;
  }
  .gallery-image-group img {
    max-width: 100%;
    height: 478px;
  }
  .gallery-image-holder {
    width: 100%;
  }
  
  .gallery-image-text {
    height: 50px;
  }
  
  /* media query */
  @media only screen and (max-width: 1216px) {
    .mos-teaser {
      width: 100%;
      height: auto;
    }
  }
  
  @media only screen and (max-width: 1040px) {
    .gallery-group {
      width: 98%;
    }
  }
  
  @media only screen and (max-width: 1020px) {
    .mos-item h2{
      width: 80%;
      margin: 20px auto;
    }
  
    .mos-img-right .text h2 {
      margin: 10px auto;
    }
  
    .mos-img-left .text h2 {
      margin: 10px auto;
    }
  
    .mos-separator img {
      width: 100%;
      height: auto;
    }
  
    .mos-item {
      width: 98%;
      margin: 0 auto;
    }
  
    .mos-text {
      width: 100%;
    }
  }
  
  @media only screen and (max-width: 960px) {
    .mos-img-left .img-left img {
      width: 100%;
      height: auto;
    }
  
    .mos-img-right .img-right img {
      width: 100%;
      height: auto;
    }
  
    .mos-img-left .img-left iframe {
      width: 100%;
      height: auto;
    }
  }
  
  @media only screen and (max-width: 820px) {
    .gallery-image {
      width: 48%;
    }
  }
  
  @media only screen and (max-width: 680px) {
    .mos-item {
      text-align: center;
    }
  
    .mos-img-left .img-left {
      float: none;
      width: 100%;
      text-align: center;
      margin: 20px auto;
    }
  
    .mos-img-left .img-left img {
      width: 470px;
      height: 270px;
    }
  
    .mos-img-left .text {
      float: none;
      width: 80%;
      padding-left: 0;
      margin: 20px auto;
    }
  
    .mos-img-right .img-right {
      float: none;
      width: 100%;
      text-align: center;
      margin: 20px auto;
    }
  
    .mos-img-right .img-right img {
      width: 470px;
      height: 270px;
    }
  
    .mos-img-right .text {
      float: none;
      width: 80%;
      padding-right: 0;
      margin: 20px auto;
    }
  
    .gallery-item {
      width: 25%;
    }
  
    .triplet {
      width: 100%;
      float: none;
      margin: 30px 0;
      text-align: center;
    }
  
    .triplet img {
      width: 260px;
      max-width: 90%;
      height: auto;
      margin: 0 auto;
    }
  
    .triplet h2 {
      max-width: 90%;
      margin: 10px auto 10px auto;
    }
  
    .triplet p {
      max-width: 90%;
      margin: 10px auto;
    }
  
    .with-icon, .no-icon, .video-info {
      width: 100%;
    }
  
  }
  
  @media only screen and (max-width: 500px) {
    .mos-img-left .img-left {
      width: 80%;
    }
  
    .mos-img-left .img-left img {
      width: 100%;
      height: auto;
    }
  
    .mos-img-right .img-right {
      width: 80%;
    }
  
    .mos-img-right .img-right img {
      width: 100%;
      height: auto;
    }
  
    .gallery-item {
      width: 33.3333%;
    }
  
    .gallery-image {
      float: none;
      width: 98%;
      height: auto;
      overflow: visible;
      margin: 20px auto 35px auto;
    }
  }
  @media only screen and (max-width: 500px) {
    .gallery-group {
      margin: 50px auto 200px auto;
    }
  }