.prod_text {
  grid-area: txt;
}

.gal-type {
  grid-area: img;
  display: grid;
  width: 100%;
  transition: 500ms;
}

.slick-list {
  position: absolute;
  width: 100%;
}

.slidescontainer {
  width: 100%;
}


.prev {
  text-align: center
}

.next {
  text-align: center;
}

.pagingInfo {
  float: left;
  margin: 0.25vw;
}

.mobscroll {
  display: none;
}

#colslides {
  width: 100%;
}

.deactive {
  opacity: 0;
}




/*****************************************************************************
      image lightbox
  *****************************************************************************/

.modal {
  display: none;
  opacity: 0;
  transition: 1000ms;
  position: fixed;
  z-index: 15;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: rgb(255, 255, 255);
}

.modal img {
  height: 100vh;
  width: auto;
  cursor: pointer;
}

#modalImg {
  position: absolute;
  z-index: 15;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  height: 100%;
  background-color: #a00;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  text-size-adjust: none;
}

.close:hover,
.close:focus {
  cursor: pointer;
}

.logo {
  display: none;
}


/*****************************************************************************
      responsive area
  *****************************************************************************/

@media (min-width:769px) {

  .header-desktop {
    margin-top: 100px;
  }

  #menu-desktop {
    margin-top: 180px;
  }

  .container {

    padding-top: 0;
    padding-bottom: 0;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(6, 1fr);
    grid-template-areas:
      '.   img img img img img img img txt txt txt txt'
      '.   img img img img img img img txt txt txt txt'
      '.   img img img img img img img txt txt txt txt'
      '.   img img img img img img img txt txt txt txt'
      '.   img img img img img img img txt txt txt txt'
      '.   img img img img img img img txt txt txt txt';
  }

  .prod_text {
    padding-top: 90px;
  }

  .text-container {
    position: fixed;
    width: 30vw;
    max-width: 400px;
  }

  #item1 {
    padding-top: 90px;
  }

  .item img,
  .situ_item img {
    height: auto;
    max-width: 100%;
    max-height: 70vh;
    padding: 0 10px 20px 10px !important;
    cursor: pointer;
  }



  .slick-list {
    height: 100vh !important;
  }

  /* The Close Button */
  .close {
    position: fixed;
    overflow: hidden;
    top: 100px;
    right: 60px;
    transition: 0.3s;
    z-index: 17;
  }

  .num {
    display: none;
  }

  .scroll_overlay_prev {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 90px;
    cursor: n-resize;
  }

  .scroll_overlay_next {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 50vh;
    cursor: s-resize;
  }

}

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

  .scroll_overlay_prev {
    display: none !important;
  }

  .scroll_overlay_next {
    display: none !important;
  }

  .container {
    display: grid;
    grid-template-columns: 20px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 20px;
    grid-template-rows: 37vh auto;
    grid-template-areas:
      'img img img img img img img img img img img img'
      '.   txt txt txt txt txt txt txt txt txt txt .  ';
    grid-column-gap: 0;
  }

  #design,
  #situ {
    grid-area: img;
    display: grid;
    grid-template-areas:
      'ima'
      'num'
    ;
    grid-template-rows: 32vh 5vh;
    border-bottom: 10vh;
  }

  .num {
    grid-area: num;
    margin: 1em 20px;
  }

  .design_pagingInfo {
    float: right;
  }

  .situ_pagingInfo {
    float: right;
  }

  .num .buttons {
    display: none;
  }

  .item img,
  .situ_item img {
    object-fit: cover;
    height: 32vh;
  }

  .lefty {
    float: left;
  }

  .righty {
    right: 0px;
    position: absolute;
  }

  .mobscroll {
    display: block;
    width: 40px;
    height: 32vh;
    z-index: 1;
    padding: 12vh 18px;
    cursor: pointer;
    position: absolute;
  }

  /* The Close Button */
  .close {
    position: fixed;
    overflow: hidden;
    top: 40px;
    right: 20px;
    transition: 0.3s;
    z-index: 17;
  }

  .close h1 {
    margin-top: 0;
    line-height: 1;
  }

  .logo {
    display: block;
    position: fixed;
    height: 17px !important;
    width: 150px !important;
    left: 20px;
    top: 40px;
    z-index: 17;
  }

}