@import "../parts/compound"

.quests
  margin-top: 30px
  background-size: cover
  position: relative
  z-index: 1
  font-family: 'PT Sans', sans-serif
  .icon-hidden
    opacity: 0.3
  &-overlay
    position: absolute
    top: 0
    left: 0
    width: 100%
    background-color: rgba(0, 0, 0, .35)
    z-index: 2
    height: 408px
  &-headers
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.5)
    position: relative
    height: 408px
    z-index: 3
    // height: 100%
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    color: #ffffff
    text-align: center
    h1
      font-size: 48px
      font-weight: 600
      line-height: 0.75
      letter-spacing: 0.4px
      margin-bottom: 32px
      position: relative
      z-index: 3
    h2
      font-size: 26px
      font-weight: 600
      line-height: 0.75
      letter-spacing: 0.4px
      position: relative
      z-index: 3
  &-content
    margin: 70px auto
    max-width: 1280px !important
    margin-bottom: -20px
    a
      text-decoration: none
      outline: none
    &__item
      height: 296px
      width: 400px
      max-width: 400px
      min-width: 400px
      background-size: cover
      position: relative
      border-radius: 20px
      display: flex
      flex-direction: column
      justify-content: flex-end
      align-items: flex-start
      padding: 0
      margin-bottom: 50px
      .quest__text
        width: 100%
        padding: 0 25px 60px 25px
        background: url('../../img/quests/exitquests-mask.svg') top center no-repeat
        border-radius: 0 0 20px 20px
        height: 160px
        color: #ffffff
        h3
          font-size: 24px
          font-weight: 600
          letter-spacing: 0.3px
          margin: 25px 0 8px 0
        p
          font-size: 16px
          letter-spacing: 0.1px
          margin-bottom: 8px
      &-icons
        max-width: 350px
        margin-right: auto
        margin-left: auto
        display: flex
        // flex-direction:
        justify-content: space-between
        align-items: center





@media screen and (max-width: 1200px)
  .quests
    &-headers
      background-size: cover
    &-content
      .row
      justify-content: center !important
      &__item
        margin: 30px auto
        max-height: 450px !important


@media screen and (max-width: 768px)
  .quests
    &-headers
      height: 200px
      h1
        font-size: 34px
      h2
        font-size: 20px
        //max-width:
    &-overlay
      height: 200px


@media screen and (max-width: 576px)
  .quests
    margin-top: 0
  .quests-content
    .row
      justify-content: center !important
  .quests-content__item
    margin: 15px auto !important
  .quests
    &-headers
      box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.5)
      h1
        font-size: 28px
      h2
        font-size: 16px !important
        max-width: 395px
        line-height: 1.1
    &-content
      margin-top: 20px
      margin-bottom: 20px
      &__item
        min-width: 288px
        max-width: 288px
        width: 288px
        height: 213px
        .quest__text
          padding: 0 15px 15px 15px
          height: 114px
          h3
            font-size: 16px
            margin-top: 20px
          p
            font-size: 14px
            margin-bottom: 0
            line-height: 1.15
          img
            max-width: 14px
          .quests-content__item-icons
            justify-content: space-between !important


@media screen and (max-width: 320px)
  .quest-slider
    .carousel-control-next, .carousel-control-prev
      top: 65% !important