@import url("../css/range-slider.css");
* {
  box-sizing: border-box; }

main {
  padding-top: 67px;
  --default-transition: 500ms; }
  main .games {
    display: flex; }
    @media (max-width: 767px) {
      main .games {
        flex-direction: column; } }
    main .games .filter {
      align-self: stretch;
      width: 300px;
      height: calc(100vh - 80px);
      padding: 10px 1em;
      overflow-y: scroll;
      color: #fff;
      background-color: #191919; }
      @media (max-width: 767px) {
        main .games .filter {
          position: fixed;
          top: 0;
          right: 0;
          left: 0;
          z-index: 10;
          width: 100%;
          padding-top: 60px; }
          main .games .filter .hide-small:not(.show) {
            display: none; }
          main .games .filter:not(.auto-height) {
            height: unset;
            max-height: 80%; } }
      main .games .filter__show-full {
        padding: .25em;
        color: #fecd08;
        background: transparent;
        border: none; }
        main .games .filter__show-full:not(.show) {
          -webkit-transform: rotateZ(180deg);
          -moz-transform: rotateZ(180deg);
          -ms-transform: rotateZ(180deg);
          -o-transform: rotateZ(180deg);
          transform: rotateZ(180deg); }
        @media (min-width: 768px) {
          main .games .filter__show-full {
            display: none; } }
      main .games .filter .filter-title {
        font-weight: 700;
        color: #fff; }
      main .games .filter ul.filters {
        padding: 0;
        list-style: none; }
        main .games .filter ul.filters .filter-item {
          padding-left: 2em;
          font-size: .9em;
          color: #919191;
          cursor: pointer;
          -webkit-transition: all 250ms;
          -moz-transition: all 250ms;
          -ms-transition: all 250ms;
          -o-transition: all 250ms;
          transition: all 250ms; }
          main .games .filter ul.filters .filter-item.hidden {
            height: 0;
            -webkit-transform: scaleY(0);
            -moz-transform: scaleY(0);
            -ms-transform: scaleY(0);
            -o-transform: scaleY(0);
            transform: scaleY(0); }
          main .games .filter ul.filters .filter-item.active {
            font-weight: bold;
            color: #fecd08; }
      main .games .filter .flip-btn {
        cursor: pointer; }
      main .games .filter .search-form {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1em; }
      main .games .filter__search-input {
        width: calc(100% - 6em);
        padding: .25em .25em .25em 2em;
        color: #191919;
        border: 1px solid #f2c94c;
        border-radius: .125rem; }
        @media (min-width: 768px) {
          main .games .filter__search-input {
            width: calc(100% - 3em); } }
        main .games .filter__search-input::placeholder {
          color: #f2c94c; }
      main .games .filter__search-icon {
        position: absolute;
        top: 0.125em;
        left: 0.5em;
        color: #f2c94c;
        -webkit-transform: translateY(50%);
        -moz-transform: translateY(50%);
        -ms-transform: translateY(50%);
        -o-transform: translateY(50%);
        transform: translateY(50%); }
      main .games .filter__search-btn {
        padding: .25em;
        color: #fecd08;
        background: transparent;
        border: 1px solid;
        border-radius: .125rem; }
      main .games .filter .range-group {
        margin-bottom: 1em; }
      main .games .filter .range-checkbox {
        position: relative;
        display: block;
        width: 3em;
        height: 1.5em;
        margin-left: 1em;
        -webkit-appearance: none;
        appearance: none;
        pointer-events: initial;
        background: linear-gradient(0deg, #ccc, #888);
        border-radius: 2em;
        outline: none;
        box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.7), inset 0 -2px 2px rgba(255, 255, 255, 0.7);
        opacity: initial;
        transition: all var(--default-transition);
        --on-light: #ccc;
        --off-light: #f00;
        --bar-left: .25em; }
        main .games .filter .range-checkbox:checked {
          --off-light: #ccc;
          --on-light: #0f0;
          --bar-left: 1.75em; }
        main .games .filter .range-checkbox::after {
          position: absolute;
          top: 50%;
          left: var(--bar-left);
          display: block;
          width: 1em;
          height: 1em;
          content: '';
          background: linear-gradient(180deg, #aaa, #444);
          border-radius: 50%;
          box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.7), inset 0 2px 2px rgba(255, 255, 255, 0.7);
          transition: all var(--default-transition);
          transform: translateY(-50%); }
        main .games .filter .range-checkbox::before {
          position: absolute;
          top: 50%;
          left: -.6em;
          display: block;
          width: .35em;
          height: .35em;
          content: '';
          background-color: var(--off-light);
          border-radius: 50%;
          box-shadow: 3.85em 0 0 var(--on-light);
          transition: all var(--default-transition);
          transform: translateY(-50%); }
      main .games .filter .range-input {
        width: 4.5em;
        padding: .25em 1em;
        color: #191919;
        background: #c4c4c4;
        border: none;
        border-radius: .125em; }
      main .games .filter .filter-btn {
        padding: .25em 3em;
        color: #fecd08;
        background: transparent;
        border: 1px solid;
        border-radius: .125rem; }
    main .games .list {
      display: grid;
      grid-template-columns: repeat(auto-fill, 320px);
      justify-content: space-evenly;
      width: 100%;
      height: calc(100vh - 80px);
      padding: 10px;
      overflow-y: scroll; }
      @media (max-width: 767px) {
        main .games .list {
          height: inherit;
          padding-top: 6em;
          overflow-y: initial; } }
      main .games .list .card-area {
        width: 320px;
        height: 430px; }
        main .games .list .card-area .rentable-0 {
          color: black !important;
          content: ' ' !important; }
        main .games .list .card-area .game-card {
          top: 0;
          left: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 14px; }
        main .games .list .card-area .deck {
          position: relative;
          width: 300px;
          height: 410px;
          perspective: 1000px; }
        main .games .list .card-area .rotate-btn {
          width: 180px;
          padding-bottom: 10px;
          margin-bottom: 10px;
          text-align: center;
          cursor: pointer;
          background-color: #fecd08; }
        main .games .list .card-area .front,
        main .games .list .card-area .back {
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          flex-direction: column-reverse;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 100%;
          border: 3px solid #000;
          border-radius: 10px;
          transition: 1.5s;
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }
          main .games .list .card-area .front .back-img,
          main .games .list .card-area .front .front-img,
          main .games .list .card-area .front .front-contour,
          main .games .list .card-area .back .back-img,
          main .games .list .card-area .back .front-img,
          main .games .list .card-area .back .front-contour {
            position: absolute;
            top: -15px;
            width: 146px; }
          main .games .list .card-area .front .front-contour,
          main .games .list .card-area .back .front-contour {
            top: -18px;
            left: 12px;
            width: 146px;
            height: 15px;
            margin: 3px;
            border-top: 3px solid #000;
            border-right: 3px solid #000;
            border-left: 3px solid #000;
            border-radius: 20px 20px 0 0; }
        main .games .list .card-area .front {
          background: #f6c500; }
          main .games .list .card-area .front .rotate-btn {
            width: 180px;
            height: 34px;
            padding: 5px;
            font-size: 1.1em;
            font-weight: bold;
            color: #fff;
            background-color: #000; }
          main .games .list .card-area .front .front-content {
            width: 100%; }
            main .games .list .card-area .front .front-content .front-img {
              left: 15px;
              height: 146px;
              background-size: cover !important;
              border-right: 3px solid;
              border-bottom: 3px solid;
              border-left: 3px solid;
              border-radius: 20px; }
            main .games .list .card-area .front .front-content .small-info-box {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: space-between;
              width: 100%;
              height: 120px;
              padding-top: 10px;
              padding-left: 180px;
              margin-bottom: 20px; }
              main .games .list .card-area .front .front-content .small-info-box i {
                width: 30px;
                font-size: 1.2em;
                text-align: center; }
            main .games .list .card-area .front .front-content .title {
              position: relative;
              height: 120px;
              padding-left: 15px;
              margin-top: 10px;
              margin-right: 15px;
              overflow-y: scroll;
              text-align: left; }
              main .games .list .card-area .front .front-content .title.scrollbar::-webkit-scrollbar-track {
                background-color: #f6c500;
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px transparent; }
              main .games .list .card-area .front .front-content .title.scrollbar::-webkit-scrollbar {
                width: 12px;
                background-color: #f6c500; }
              main .games .list .card-area .front .front-content .title.scrollbar::-webkit-scrollbar-thumb {
                background-color: #000;
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); }
              main .games .list .card-area .front .front-content .title h3 {
                font-size: 1.2em;
                font-weight: bold; }
              main .games .list .card-area .front .front-content .title p {
                font-size: .9em;
                line-height: 1.4; }
            main .games .list .card-area .front .front-content .genres,
            main .games .list .card-area .front .front-content .languages {
              width: 100%;
              padding-right: 30px;
              padding-left: 30px;
              margin-top: 5px;
              font-size: 0.8em;
              font-weight: bold; }
            main .games .list .card-area .front .front-content .genres .more {
              color: #323232;
              cursor: pointer; }
        main .games .list .card-area .back {
          color: white;
          background: #000;
          background-size: cover;
          transform: rotateY(180deg); }
          main .games .list .card-area .back .back-content {
            width: 100%;
            height: 100%;
            padding-right: 20px;
            padding-left: 20px; }
          main .games .list .card-area .back .rotate-btn {
            width: 180px;
            height: 34px;
            padding: 5px;
            margin-bottom: 10px;
            font-size: 1.1em;
            font-weight: bold;
            color: #000 !important;
            text-align: center;
            cursor: pointer;
            background-color: #fecd08; }
          main .games .list .card-area .back .rent {
            width: 100%;
            height: 378px;
            padding-top: 65px;
            color: white !important; }
            main .games .list .card-area .back .rent h3 {
              height: 3em;
              font-size: 1.2em;
              font-weight: bold; }
            main .games .list .card-area .back .rent .price {
              margin-bottom: 20px;
              font-size: 10pt;
              font-weight: bold;
              text-align: right; }
            main .games .list .card-area .back .rent .form {
              width: 100%;
              padding-right: 20px;
              padding-left: 20px; }
            main .games .list .card-area .back .rent .info-text {
              margin-top: 20px;
              font-size: 0.8em;
              color: lime;
              background-color: black;
              opacity: 0.6; }
          main .games .list .card-area .back .back-img {
            right: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 60px;
            font-size: 1.3em;
            font-weight: bold;
            background-color: #fecd08;
            border-top: 3px solid #000;
            border-right: 3px solid #000;
            border-left: 3px solid #000;
            border-radius: 20px; }
          main .games .list .card-area .back a,
          main .games .list .card-area .back a:hover {
            color: white; }
        main .games .list .card-area .deck .front.hoverable {
          transform: rotateY(180deg); }
        main .games .list .card-area .deck .back.hoverable {
          transform: rotateY(360deg); }
        main .games .list .card-area .rotate-front {
          transform: rotateY(180deg); }
        main .games .list .card-area .rotate-back {
          transform: rotateY(360deg); }

/*# sourceMappingURL=boardgames.css.map */