@media (max-width: 2000px) {
  /*sidebar*/

  .sidebar-open {
    width: 15%;
  }
  .sidebar-push {
    transform: translateX(-15%);
  }

  /*===POPUP SECTIONS===*/

  /*overlay*/

  .modal p {
    font-size: 14pt;
  }

  /*loader*/

  .loading-items {
    width: 300px;
    height: 300px;
  }
  .loading-items h3 {
    font-size: 15pt;
  }
  .loader {
    width: 200px;
    height: 200px;
  }

  /*main menu*/
  nav.main-nav a,
  .create-page-nav a {
    font-size: 9pt;
    /* padding: 2px; */
  }
}

@media (max-width: 1600px) {
  /*===GENERAL HTML===*/

  html,
  body {
    font-size: 10pt;
  }

  /*===STRUCTURE===*/

  .content-wrapper {
    top: 80px;
  }

  /*header*/

  header {
    height: 80px;
  }
  .logo img {
    height: 60%;
    margin-top: 35px;
    margin-left: 0px;
  }

  /*main menu*/

  nav.main-nav a,
  .create-page-nav a {
    min-width: 60px;
    height: 60px;
    font-size: 8pt;
    padding: 10px 10px;
    margin-right: 5px;
    border-radius: 7px;
  }
  nav.main-nav a i,
  .create-page-nav a i {
    font-size: 12pt;
  }

  /*wallet menu*/

  nav.wallet-nav {
    padding: 0 20px 0 0;
  }
  nav.wallet-nav a {
    width: 40px;
    height: 40px;
    line-height: 50px;
    margin: 0 0 0 10px;
    border-radius: 7px;
  }
  nav.wallet-nav a.button-user {
    line-height: 47px;
    font-size: 8pt;
    padding: 0 15px 0 45px;
  }
  nav.wallet-nav a i {
    font-size: 15pt;
    line-height: normal;
  }
  nav.wallet-nav a.button-user .profile-picture {
    width: 30px;
    height: 30px;
  }

  /*content scroll*/

  .section {
    padding: 60px 20px;
  }
  .section-no-sortbymenu {
    padding: 20px;
  }

  /*sidebar*/

  .sidebar-open {
    width: 25%;
  }
  .sidebar-push {
    transform: translateX(-25%);
  }
  .sidebar-header {
    height: 60px;
  }
  .sidebar-footer {
    height: 60px;
  }
  .sidebar-header a,
  .sidebar-footer a {
    width: 30px;
    height: 30px;
    line-height: 36px;
    border-radius: 7px;
    margin: 0 2px;
  }
  .sidenav a i {
    font-size: 10pt;
  }
  .sidenav a img {
    height: 60%;
  }
  .sidebar-content {
    top: 60px;
    bottom: 60px;
  }
  .sidebar-content a {
    padding: 5px 10px;
    margin: 10px auto;
    text-decoration: none;
    border-radius: 5px;
  }
  .sidebar-content a i {
    font-size: 8pt;
    margin-right: 5px;
  }

  /*form inputs*/

  .input-container {
    font-size: 12pt;
    margin: 10px 0;
  }
  .checkmark,
  .checkradio {
    width: 20px;
    height: 20px;
  }
  .input-container .checkmark:after {
    left: 5px;
    top: 2px;
    width: 3px;
    height: 7px;
  }

  /*cards*/

  cards,
  #forgeList {
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 10px;
  }
  .card-info-button img {
    height: 70%;
  }
  card h2 {
    font-size: 7pt;
  }
  #community-collection-1-products card h2 {
    font-size: 14px;
  }
  .info {
    font-size: 6pt;
  }
  .card-info-button {
    font-size: 9pt;
  }

  /*===SECTIONS===*/

  /*slider*/

  .slide-info h2 {
    font-size: 14pt;
  }
  .slide-info p {
    font-size: 9pt;
  }

  /*===OVERLAYS===*/

  button.close {
    width: 30px;
    height: 30px;
    line-height: 30px;
    padding: 0px;
    font-size: 12pt;
  }
  overlay button,
  overlay .button,
  .overlay button,
  .overlay .button {
    font-size: 17pt;
  }
  .modal {
    border-radius: 10px;
  }
  .modal-logo {
    width: 20%;
  }
  .modal-title {
    font-size: 15pt;
  }
  .large-popup .modal-title {
    font-size: 20pt;
  }
  .medium-popup .modal-title {
    font-size: 20pt;
  }
  .small-popup .modal-title {
    font-size: 15pt;
  }
  .qr-box {
    width: 300px;
    height: 300px;
  }
  .card-info-type-title {
    font-size: 25pt;
  }
  .comic-window-cover {
    width: 100%;
  }
  .modal.medium-popup,
  .modal-container.medium-popup {
    max-width: 500px;
  }
  .modal.medium-popup .modal-title,
  .modal-container.medium-popup .modal-title {
    font-size: 20pt;
  }
  .modal.medium-popup p,
  .modal-container.medium-popup p {
    font-size: 12pt;
  }
  .unpackage-animation .character-animated {
    width: 400px;
    height: 300px;
  }
  .reveal-animation .character-animated {
    width: 350px;
    height: 263px;
  }
  .forge-animation,
  .unpackage-animation,
  .reveal-animation {
    height: 250px;
  }

  /*purchase*/

  .purchase-icon {
    width: 150px;
    height: 150px;
    border: 3px solid #ffffff;
  }

  /*COMIC INFO*/

  .comic-cover iframe {
    width: 330px;
    height: 590px;
  }

  /*wallets login*/

  .wallet-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 10px auto;
    line-height: 85px;
    font-size: 30pt;
  }
  .make-wallet h4 {
    font-size: 12pt;
  }
  .wallet-box button {
    font-size: 8pt;
  }
  .modal-split-title {
    padding-right: 20px;
  }
  .modal-split-title h3 {
    font-size: 22pt;
  }
  .make-wallet-buttons button {
    padding: 5px;
  }
}

@media (max-width: 1180px) {
  /*===STRUCTURE===*/

  .content-wrapper {
    bottom: 80px;
  }

  /*main menu*/

  nav#main-nav {
    display: none;
  }

  nav.main-nav a:nth-child(1) {
    margin-right: 5px;
  }
  nav#LoggedOutTopBar,
  nav#LoggedInTopBar {
    display: none !important;
  }

  /*main menu footer*/

  .main-nav-footer-scroll {
    justify-content: center;
  }

  /*wallet menu*/

  nav.wallet-nav {
    width: auto;
    flex-wrap: nowrap;
  }

  /*main menu footer*/
  nav#main-nav-footer,
  nav#main-navIn-footer {
    display: block !important;
    overflow-x: scroll;
  }
  /* nav#main-nav-footer {
    display: block;
    overflow-x: scroll;
  } */

  /*sidebar*/

  .sidebar-open {
    width: 28%;
  }
  .sidebar-push {
    transform: translateX(-28%);
  }

  /*cards*/

  cards,
  #forgeList {
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px;
  }
  .card-info-button {
    font-size: 9pt;
    padding: 7px;
  }

  /* overlay */

  .modal p {
    font-size: 11pt;
  }

  .card-info-type-title {
    font-size: 18pt;
  }
  .comic-cover iframe {
    width: 250px;
    height: 440px;
  }
  .split-title {
    width: 50%;
  }
  .make-wallet {
    width: 50%;
  }

  /*PORTALS*/

  .portals-wrapper {
    top: 80px;
    bottom: 80px;
  }
  .portals {
    max-width: 800px;
  }
}

@media (max-width: 900px) {
  /*===STRUCTURE===*/

  /*colums*/

  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    width: 100%;
  }
  .row {
    flex-wrap: wrap;
  }

  /*===POPUP SECTIONS===*/

  /*comic info overlay*/

  .overlay-content .comic-cover,
  .overlay-content .comic-info {
    width: 100%;
  }
  .overlay-content {
    padding: 0.5em;
  }
  .overlay-box {
    padding: 0.5em;
    margin: 10px 0;
  }

  /*modal*/

  .modal-content {
    padding: 15px;
  }
  .modal-content .modal-title {
    font-size: 20pt !important;
    margin: 10px auto !important;
  }

  .forge-animation,
  .unpackage-animation {
    height: 230px;
  }
  .unpackage-animation .character-animated {
    width: 365px;
    height: 275px;
  }

  /*sortby nav*/

  #sortby-nav-box {
    display: none;
  }

  /*responsive sortby nav*/

  .sortby-filter-button {
    display: block;
  }

  /*sidebar*/

  .sidebar-open {
    width: 30%;
  }
  .sidebar-push {
    transform: translateX(-30%);
  }

  /*cards*/

  cards,
  #forgeList {
    grid-template-columns: auto auto auto;
  }
  card {
    max-width: 22vw;
  }
  .info {
    font-size: 7pt;
  }
  .card-info-button {
    font-size: 7pt;
    padding: 8px;
  }
  .wallet-box {
    padding: 10px;
  }
  .modal-split-title h3 {
    font-size: 20pt;
  }
  .split-title {
    width: 40%;
    padding-right: 20px;
  }
  .wallet-icon {
    width: 70px;
    height: 70px;
    line-height: 60px;
    font-size: 20pt;
  }
  .make-wallet {
    width: 60%;
  }

  /*PORTALS*/

  .portals-wrapper {
    top: 80px;
    bottom: 80px;
  }
  .portals-list {
    grid-gap: 20px;
  }
  .portals {
    max-width: 800px;
  }
}

@media (max-width: 780px) {
  /*sidebar*/

  .sidebar-open {
    width: 40%;
  }
  .sidebar-push {
    transform: translateX(-40%);
  }

  /*modal*/

  .modal-content {
    padding: 15px;
  }
  .modal-content .modal-title {
    font-size: 20pt !important;
    margin: 10px auto !important;
  }
  .modal.medium-popup,
  .modal-container.medium-popup {
    max-width: 400px;
  }
  .forge-animation,
  .unpackage-animation {
    height: 230px;
  }
}

@media (max-width: 680px) {
  .logo {
    width: 50%;
  }
  .logo img {
    height: 55%;
  }

  /*===STRUCTURE===*/

  /*main menu*/

  nav.main-nav a,
  .create-page-nav a {
    min-width: 70px;
  }
  nav.main-nav a:nth-child(1) {
    margin-right: 5px;
  }

  /*main menu footer*/

  .main-nav-footer-scroll {
    justify-content: flex-start;
  }

  /*wallet menu*/

  #wallet-name {
    display: none;
  }
  nav.wallet-nav a.button-user {
    width: 40px;
    height: 40px;
    padding: 0;
    display: block;
    border-radius: 7px;
  }
  nav.wallet-nav a.button-user .profile-picture {
    width: 40px;
    height: 40px;
    border-radius: 7px;
    margin: 0;
  }
  .content-wrapper {
    overflow-y: scroll;
  }

  /*futured*/

  .futured {
    width: 100%;
    border-right: 0;
  }

  /*content*/

  .content {
    width: 100%;
    height: auto;
  }

  /*sidebar*/

  .sidebar-open {
    width: 70%;
  }
  .sidebar-push {
    transform: translateX(-70%);
  }

  /*===POPUP SECTIONS===*/

  /*overlay*/

  overlay button,
  overlay .button,
  .overlay button,
  .overlay .button {
    font-size: 10pt;
  }
  .small-popup,
  .medium-popup,
  .large-popup {
    max-width: 90vw;
  }
  .small-popup .modal-title,
  .medium-popup .modal-title,
  .large-popup .modal-title {
    font-size: 15pt;
  }

  /*modal*/

  .modal-content .modal-title {
    font-size: 18pt !important;
  }

  .comic-window-cover {
    width: 100%;
  }
  .comic-window-buttons {
    flex-flow: wrap;
  }
  .comic-window-buttons button {
    width: 45%;
  }
  .forge-animation,
  .reveal-animation,
  .unpackage-animation {
    height: 200px;
  }
  .forge-preview {
    width: 100%;
    display: block;
  }
  .forge-comic {
    margin: 16px auto;
  }
  .forge-preview {
    margin: 0 auto 30px auto;
  }
  .forge-comic img {
    width: 100%;
    height: auto;
    max-height: none;
  }
  .forge-icon-img {
    font-size: 30pt;
  }
  #arrow i {
    transform: rotate(90deg);
  }
  .qr-box {
    width: 250px;
    height: 250px;
  }

  /*loader*/

  .loading-items {
    width: 300px;
    height: 300px;
  }
  .loading-items h3 {
    font-size: 10pt;
  }
  .loader {
    width: 150px;
    height: 150px;
  }

  /*overlay*/

  .modal {
    width: 90vw;
    border-radius: 10px;
    padding: 15px;
  }
  .modal-container {
    width: 90vw;
    border-radius: 10px;
  }
  .modal-title {
    font-size: 13pt;
    padding: 10px 40px;
  }
  .modal p {
    font-size: 11pt;
    margin: 0 0 20px 0;
  }
  .modal-content .modal-title {
    font-size: 15pt !important;
  }
  .modal.medium-popup p,
  .modal-container.medium-popup p {
    font-size: 10pt;
  }
  .comic-window-cover img {
    width: 80%;
  }
  .unpackage-animation .character-animated {
    width: 285px;
    height: 215px;
  }
  .login-wallets {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
  }
  .wallet-box {
    padding: 10px;
  }
  .wallet-icon {
    width: 70px;
    height: 70px;
    line-height: 65px;
    font-size: 25pt;
  }
  .modal-split-title {
    padding-right: 0;
  }
  .modal-split-title h3 {
    font-size: 25pt;
  }
  .make-wallet {
    width: 100%;
  }
  .split-title {
    width: 100%;
    text-align: center;
  }

  /*NO ITEMS IN WALLET*/

  #NoWalletItems {
    transform: translateY(0%);
  }

  /*===SECTIONS===*/

  /*cards*/

  .section {
    padding: 60px 5px;
  }
  cards,
  #forgeList {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px 0;
  }
  card {
    width: auto;
    max-width: 30vw;
    margin: 0 auto;
  }
  card h3 {
    font-size: 10pt;
  }
  card button {
    padding: 8px 5px;
    font-size: 7pt;
  }
  .card-info-button {
    font-size: 12pt;
    padding: 5px;
  }

  .releases-listing card,
  #MintProductsList card,
  #PreviousReleasesList card {
    width: 80vw;
  }
  .new-label {
    width: 30px;
    height: 30px;
    line-height: 35px;
    top: 18%;
    right: -10%;
    font-size: 1.4em;
  }

  /*PORTALS*/

  .portals-list {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
  }
  .portals {
    max-width: 100%;
    padding: 30px 10px;
  }
}