/*
Drag Around - Draggable Responsive Template
-------------------------------------------
This file responsive rules.


Table of Contents

1. max-width: 1600px
2. max-width: 1400px
3. max-width: 1200px
4. max-width: 992px
5. max-width: 767px
6. max-width: 480px
7. max-width: 320px


*/

/* ==========================================================================
1.  max-width: 1600px
========================================================================== */

@media only screen and (max-width: 1600px) {
  .team-card {
    padding: 50px 70px;
  }

  .about-details {
    margin-top: 0;
  }
}

/* ==========================================================================
2.  max-width: 1400px
========================================================================== */

@media only screen and (max-width: 1400px) {
  .grid-item[data-type="image-content"] .owl-carousel .owl-item img,
  .grid-item[data-type="image-content"] .item-image-large {
    width: auto;
    height: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .grid-item .item-details {
    padding: 90px 80px 90px 80px;
  }

  .grid-item .item-image-large.image-transparent {
    width: 100%;
    height: unset;
  }
}

/* ==========================================================================
3.  max-width: 1200px
========================================================================== */

@media only screen and (max-width: 1199px) {
  /*md*/

  h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 26px;
  }

  h3 {
    font-size: 18px;
  }

  .item-details h2 {
    font-size: 42px;
  }

  h2 .line-1 {
    font-size: 18px;
  }

  h2 .line-2 {
    font-size: 36px;
  }

  .item-details h2 .line-2,
  .item-details-without-image h2 .line-2,
  h2.large .line-2 {
    font-size: 44px;
  }

  .item-details h2 .line-1,
  .item-details-without-image h2 .line-1,
  h2.large .line-1 {
    font-size: 22px;
  }

  p {
    font-size: 12px;
    line-height: 20px;
  }

  .grid-item {
    width: 200px;
    height: 420px;
  }

  .grid-item-m {
    width: 422px;
  }

  .grid-item-l {
    width: 644px;
  }

  .item-container-inner {
    width: 2700px;
  }

  .grid-item .item-image-container.item-image-container-full {
    height: 420px;
  }

  .grid-item .item-details {
    padding: 90px 50px 90px 50px;
  }

  a.button {
    font-size: 17px;
    padding: 14px 25px;
    padding-bottom: 11px;
  }

  .grid-item .item-image-container {
    height: 225px;
  }

  .logo-image {
    width: 180px;
    margin-top: 40px;
  }

  .play-button {
    font-size: 70px;
  }
}

/* ==========================================================================
4.  max-width: 991px
========================================================================== */

@media only screen and (max-width: 991px) {
  /*sm*/

  h1 {
    font-size: 30px;
  }

  h2 {
    font-size: 22px;
  }

  h3 {
    font-size: 18px;
  }

  .item-details h2 {
    font-size: 42px;
  }

  h2 .line-1 {
    font-size: 16px;
  }

  h2 .line-2 {
    font-size: 32px;
  }

  .item-details h2 .line-2,
  .item-details-without-image h2 .line-2,
  h2.large .line-2 {
    font-size: 40px;
    margin-bottom: 26px;
  }

  .item-details h2 .line-1,
  .item-details-without-image h2 .line-1,
  h2.large .line-1 {
    font-size: 20px;
  }

  p {
    font-size: 12px;
    line-height: 20px;
  }

  .grid-item {
    width: 170px;
    height: 360px;
  }

  .grid-item-m {
    width: 362px;
  }

  .grid-item-l {
    width: 554px;
  }

  .item-container-inner {
    width: 2300px;
  }

  .grid-item .item-image-container.item-image-container-full {
    height: 360px;
  }

  .grid-item .item-details {
    padding: 90px 50px 90px 50px;
  }

  a.button {
    font-size: 17px;
    padding: 14px 25px;
    padding-bottom: 11px;
  }

  .grid-item .item-image-container {
    height: 190px;
  }

  .logo-image {
    width: 150px;
    margin-top: 20px;
  }

  .grid-item .item-desc {
    padding: 30px;
  }

  .play-button {
    font-size: 60px;
  }

  .double-padding-left {
    padding-left: 15px;
  }

  .about-details {
    margin-top: 40px;
  }
}

/* ==========================================================================
5.  max-width: 767px
========================================================================== */

@media only screen and (max-width: 767px) {
  .logo-nav {
    min-height: 640px;
  }

  .nav li {
    display: block;
    margin: 15px;
  }

  .item-container-inner {
    width: auto;
  }

  .item-container .grid-item {
    cursor: pointer;
  }

  .grid-item {
    width: 95%;
    height: 85vw;
  }

  .grid-item-m {
    width: 95%;
  }

  .grid-item-l {
    width: 95%;
  }

  .logo-nav {
    width: 95%;
  }

  .grid-item .item-image-container.item-image-container-full {
    height: 100%;
  }

  .logo-nav-border {
    border-width: 10px;
  }

  .item-container-inner {
    cursor: initial !important;
  }

  .logo-image {
    width: 200px;
    margin-top: 90px;
    margin-bottom: 40px;
  }

  .foreground {
    display: none;
  }

  .item-container-temp {
    overflow-y: auto;
    width: 100%;
    transform: initial;
  }

  .item-container-temp .grid-item .item-desc {
    display: none;
  }

  .item-container-temp .grid-item .item-details {
    padding: 50px 50px 90px 50px;
  }

  .item-container-temp .grid-item .item-image-desc {
    width: 100% !important;
    height: 100vw;
    float: initial;
    clear: both;
  }

  .item-container-temp .grid-item .item-image-container,
  .item-container-temp
    .grid-item
    .item-image-desc.horizontal
    .item-image-container {
    height: 100vw;
    width: 100%;
  }

  .item-container-temp .grid-item {
    margin: 0;
  }

  .item-container.overflow-hidden {
    overflow: hidden !important;
  }

  body.overflow-hidden {
    overflow: hidden !important;
  }
  .item-container-inner {
    margin-left: 5%;
    margin-top: 5%;
    transform: translate3d(0, 0, 0) !important;
  }

  .grid-item .item-image-container {
    height: 60%;
  }

  .grid-item[data-type="image-content"] .owl-carousel .owl-item img,
  .grid-item[data-type="image-content"] .item-image-large {
    width: 100%;
    height: auto;
  }

  .double-padding-right {
    padding-right: 15px;
  }

  .half {
    width: 100%;
  }
}

/* ==========================================================================
6.  max-width: 480px
========================================================================== */

@media only screen and (max-width: 480px) {
  .logo-nav {
    min-height: 540px;
  }

  .logo-image {
    margin-bottom: 0;
    margin-top: 20px;
    width: 170px;
  }

  h2 .line-1 {
    font-size: 16px;
  }

  h2 .line-2 {
    font-size: 30px;
  }

  .grid-item .item-image-container {
    height: 65%;
  }

  .item-container-temp .grid-item .item-image-desc {
    height: 120vw;
  }

  .item-container-temp .grid-item .item-image-container,
  .item-container-temp
    .grid-item
    .item-image-desc.horizontal
    .item-image-container {
    height: 120vw;
    width: 100%;
  }

  .item-container-inner
    .grid-item[data-type-secondary="image-content"]
    .item-image-desc
    a,
  .item-container-inner
    .grid-item[data-type="image-content"]
    .item-image-desc
    a,
  .item-container-temp-sequence
    .grid-item[data-type-secondary="image-content"]
    .item-image-desc
    a,
  .item-container-temp-sequence
    .grid-item[data-type="image-content"]
    .item-image-desc
    a,
  .item-container-inner
    .grid-item[data-type-secondary="image-content"]
    .item-image-desc
    ul,
  .item-container-inner
    .grid-item[data-type="image-content"]
    .item-image-desc
    ul,
  .item-container-temp-sequence
    .grid-item[data-type-secondary="image-content"]
    .item-image-desc
    ul,
  .item-container-temp-sequence
    .grid-item[data-type="image-content"]
    .item-image-desc
    ul {
    display: none;
  }
}

/* ==========================================================================
7.  max-width: 320px
========================================================================== */

@media only screen and (max-width: 320px) {
  .logo-image {
    margin-bottom: 10px;
    margin-top: 10px;
    width: 170px;
  }

  a.button {
    font-size: 15px;
    padding: 10px 15px;
    padding-bottom: 7px;
  }
}