/* Media Queries
--------------------------------------------- */
@media all and (max-width: 1100px) {
  body {
    font-size: 14pt;
  }

  .image-modal #expandedImg {
    width: auto;
    height: 80%;
    border: 10px solid white;
  }

  .content-limit {
    width: 90%;
  }

  /*========TEXT========*/

  .main-title {
    font-size: 20pt;
    line-height: normal;
  }
  .big-txt {
    font-size: 26pt !important;
  }
  .medium-txt {
    font-size: 22pt !important;
  }

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

  .mask {
    top: -110px;
  }
  .bubble-text {
    top: 430px;
    right: 13%;
    border-radius: 8px;
    padding: 10px;
  }

  /*SECTION 1*/

  .section-1-title {
    font-size: 20px;
  }
  .section-1-title p {
    font-size: 22px;
  }
  .section-1-image {
    width: 340px;
    height: 600px;
    top: -80px;
  }
  .thorn {
    bottom: 15px;
    left: -21px;
    width: 53%;
  }
  .section-1-img {
    width: 195px;
    bottom: 6%;
    right: -3%;
  }
  .shi-yang-cast {
    top: 72px;
    left: -55px;
    width: 80%;
    height: auto;
  }
  .section-2-img {
    position: absolute;
    width: 210px;
    right: -8%;
  }

  .cover-txt {
    width: 150%;
    right: 44%;
    text-align: end;
    top: 3%;
  }
  /*SECTION 2*/

  .section-2 {
    height: 520px;
    padding: 50px 0;
  }
  .section-2-title {
    margin-top: 0;
  }
  .section-2-image {
    width: 290px;
    height: 510px;
    top: 560px;
  }
  .section-2-title ul {
    font-size: 14px;
  }

  .thorn-img {
    display: none;
  }

  /*SECTION 3*/

  .section-3-image {
    width: 400px;
    height: 360px;
    top: -180%;
  }

  /*SECTION 4*/

  .section-4 .content-limit {
    background: url(../img/image-section-4.webp) no-repeat center bottom;
  }

  /*SECTION UPDATE*/

  .section-updates {
    padding: 40px 0 20px 0;
  }
  .updates-box {
    width: 100%;
  }

  /*SECTION CREATE*/

  .section-create .content-limit {
    padding: 40px 0 320px 0;
  }
  .section-create .content-limit .row .col-6 {
    width: 100%;
  }

  /*SECTION COSPLAYERS*/

  .section-cosplayers .row {
    flex-wrap: wrap;
  }
  .section-cosplayers h3 {
    font-size: 16px;
  }
  .section-cosplayers .col-3 p {
    font-size: 12px;
  }

  /*SECTION 6*/

  .icon-comic {
    width: 100%;
  }

  /*========FORM========*/

  .button,
  button {
    font-size: 14px;
    min-width: 150px;
    height: 40px;
    line-height: 45px;
  }
  input[type='text'],
  input[type='password'],
  input[type='email'],
  input[type='tel'],
  input[type='number'],
  input[type='date'] {
    height: 40px;
    font-size: 14px;
    border-radius: 7px;
  }
}
@media all and (max-width: 960px) {
  body {
    font-size: 16px;
  }
  .content-limit {
    width: 90%;
  }

  .smallx-txt.txt-comic2 {
    padding-top: 0;
    font-size: 0.8em !important;
  }

  .section-1 {
    min-height: 560px;
  }

  /*========TEXT========*/

  .big-txt {
    font-size: 40px !important;
  }
  .medium-txt {
    font-size: 20px !important;
  }
  .main-title {
    font-size: 20pt;
    line-height: normal;
  }

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

  .mask {
    width: 100%;
    left: 160px;
    top: -126px;
  }

  /*SECTION 1*/

  .section-1-title {
    font-size: 17px;
    top: 10px;
  }
  .section-1-title p {
    font-size: 20px;
  }
  .section-1-image {
    width: 300px;
    height: 525px;
    top: -100px;
  }

  /*SECTION 2*/

  .section-2 {
    height: 430px;
  }
  .section-2-title {
    margin-top: -15%;
    width: 51%;
  }
  .section-2-image {
    width: 190px;
    height: 340px;
    top: 560px;
  }
  .section-2-title ul {
    font-size: 15px;
  }

  .collect-wrapper {
    padding: 16px;
  }

  /*SECTION CREATE*/

  .section-create .row .col-10 {
    text-align: center;
    padding: 15px;
  }
  .section-create .row .col-10 ul {
    list-style-position: inside;
    padding: 0;
  }

  /*SECTION 3*/

  .section-3 {
    padding: 0 0 50px 0;
  }
  .section-3 .main-title {
    width: 56%;
    right: 0;
    top: -60%;
  }
  .section-3-image {
    width: 300px;
    height: 265px;
    top: -119%;
  }

  /*SECTION 4*/

  .section-4 .main-title {
    text-align: center;
  }
  .section-4 .content-limit {
    background: url(../img/image-section-4.webp) no-repeat center 660px;
    background-size: 100% auto;
    padding-bottom: 70px;
  }
  .section-4 .content-limit .row .col-6 {
    width: 100%;
  }
  .section-4 .content-limit .row .col-6 video {
    width: 80% !important;
    height: auto;
  }
  .section-4 .content-limit .row {
    display: block;
  }

  /*SECTION 5*/

  .section-5 {
    padding: 50px 0 150px 0;
  }
  .section-5-image {
    width: 70%;
    bottom: -50%;
  }

  /*SECTION COSPLAYERS*/

  .section-cosplayers .col-3 {
    width: 50%;
  }

  /*SECTION 6*/

  .section-6 .content-limit .row {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
  }
  .section-6 .content-limit .row .col-3 {
    width: 33.333333%;
    padding: 20px 10px;
  }
  .icon-comic {
    width: 100%;
  }

  /*SECTION 7*/

  .roadmap-content .roadmap-content-info p {
    font-size: 1em;
  }

  /*SECTION CREATE*/

  .section-create .content-limit {
    width: 100%;
    padding: 40px 0 150px 0;
  }
  .section-create .col-5 {
    width: 60%;
    margin-left: 40px;
  }
  /*OVERVEW PAGE*/
  .overview-title p {
    margin: 6%;
  }
  /*========FOOTER========*/

  .footer {
    text-align: center;
  }
  .footer p {
    float: none;
  }
  .footer-social-menu {
    float: none;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
}


@media all and (max-width: 720px) {
  body {
    font-size: 14px !important;
  }

  /*========TEXT========*/

  .main-title {
    line-height: normal;
  }
  .medium-txt {
    font-size: 16pt !important;
  }

  
  /*========STRUCTURE========*/

  [class*='col-'] {
    padding: 15px;
  }
  .col-1 {
    width: 100%;
  }
  .col-2 {
    width: 100%;
  }
  .col-3 {
    width: 100%;
  }
  .col-4 {
    width: 100%;
  }
  .col-5 {
    width: 100%;
  }
  .col-6 {
    width: 100%;
  }
  .col-7 {
    width: 100%;
  }
  .col-8 {
    width: 100%;
  }
  .col-9 {
    width: 100%;
  }
  .col-10 {
    width: 100%;
  }
  .col-11 {
    width: 100%;
  }
  .col-12 {
    width: 100%;
  }
  .row {
    flex-wrap: wrap;
  }
  .width-small,
  .width-medium .width-large {
    width: 100% !important;
  }

  /*========TEXT========*/

  .main-title {
    font-size: 17pt;
  }
  .small-txt {
    font-size: 18px !important;
  }

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

  /*SECTION 1*/

  .section-1-image {
    width: 45%;
    height: 405px;
    top: -50px;
  }
  .section-1-title {
    font-size: 15px;
    top: 283px;
  }
  .section-1-img {
    width: 185px;
    bottom: 10%;
    right: 0;
  }
  .section-2-img {
    position: absolute;
    width: 210px;
    right: -28%;
  }
  .thorn {
    bottom: 35px;
    left: -27px;
    width: 60%;
  }
  .shi-yang-cast {
    top: 0px !important;
    left: -51px !important;
    width: 90%;
    height: auto;
  }
  /*SECTION 2*/

  .section-2 {
    height: 380px;
  }
  .section-2 .col-5 {
    width: 50%;
  }
  .section-2-image {
    top: 440px;
  }
  .bubble-text {
    width: 210px;
    top: 350px;
  }
  .bubble-text:after {
    left: 55%;
    border: 20px solid transparent;
    border-top-color: #ffdc00;
    border-bottom: 0;
    border-right: 0;
    margin-bottom: -20px;
  }

  /*SECTION 3*/

  .section-3-image {
    width: 240px;
    height: 215px;
    top: -40%;
  }
  .section-3 .main-title {
    top: -22%;
  }

  /*SECTION 5*/

  .section-5 .main-title {
    padding-left: 30px;
  }
  .section-5-image {
    width: 85%;
    bottom: -29%;
    right: -14%;
  }
  .section-5 .col-6 {
    width: 50%;
  }

  /*SECTION 7*/

  .swiper.roadmap-slider .swiper-slide-caption {
    width: 300% !important;
  }

  /*SECTION CREATE*/

  .section-create .content-limit {
    padding: 40px 0 100px 0;
  }
  .section-create .col-5 {
    width: 50%;
  }

  /*========COSPLAY PAGE========*/

  .cosplay .img-right {
    width: 100%;
    height: auto;
    margin: 0;
    float: none;
  }
  /*========OVERVIEW PAGE========*/
  .overview-title p {
    margin: 7%;
  }
  .overview-title p span {
    font:
      700 1.5em/1 'Oswald',
      Inter,
      sans-serif;
  }
}

@media all and (max-width: 700px) {
  .asset-shi {
    background-image: url('../img/QR-telegram.webp');
    margin: 0 auto;
    left: -57px;
    width: 65%;
    min-width: auto;
  }

  .char-bottom {
    display: flex;
    width: 19%;
    margin: auto;
    transform: scale(1.9);
    z-index: -1;
    top: 51.4%;
    right: 15%;
    position: absolute;
  }

  .char-bottom img{
    position: relative;
    bottom: 0%;
    left: 9%;
  }
  .collect-ctn {
    flex-direction: column;
    align-content: center;
  }
  .collect-wrapper {
    margin: 20px auto;
    width: 70%;
  }
  .video-wrapper {
    width: 70%;
    margin: 0 auto;
  }
  .content-limit.row.row2 {
    gap: 3%;
    display: flex;
    flex-direction: column !important;
  }
  .section-2-title {
    margin: 30px auto !important;
    width: 100% !important;
  }
  .txt-comic2 {
    letter-spacing: 0px;
  }
  .txt-comic {
    width: 80%;
  }
}

@media all and (max-width: 600px) {
  .image-modal #expandedImg {
    width: 80%;
    border: 10px solid white;
  }

  .triangle-separator{
    height: 6%;
  }

  .mask {
    width: 150%;
    left: -100px;
    top: -166px;
  }

  .swiper-slide-caption {
    width: 200% !important;
  }
  .swiper-slide-caption h3 {
    font-size: 30px !important;
  }
  /*========forging page========*/
  .forging {
    width: 146%;
  }
  .title {
    width: 100%;
  }
  /*========SECTIONS========*/

  /*SECTION 1*/

  .section-1 {
    height: 910px;
  }
  .section-1-title {
    width: 100%;
    text-align: center;
    position: relative;
  }
  .section-1-image {
    margin: 0 auto !important;
    left: 0;
    right: 0;
    /* top: 5% !important; */
    position: relative;
    order: 2;
    width: 100%;
    height: auto;
  }

  .section-1-img{
    right: 0;
    width: 48%;
  }

  .shi-yang-cast {
    width: 55%;
    right: 31% !important;
    left: auto !important;
  }
  /*SECTION New 1*/
  .S3.collect-wrapper {
    width: 90%;
    margin: auto;
    padding: 24px;
  }

  .asset-ctn.asset-shi{
    max-width: 200px;
  }

  .char-bottom img {
    position: relative;
    bottom: 7%;
    left: 3%;
}
  /*SECTION 2*/

  .section-2 {
    height: 1010px;
  }
  .section-2-title {
    text-align: center;
  }
  .section-2-title ul {
    text-align: left;
    font-size: 14px;
  }
  .section-2-image {
    top: 690px;
    margin: auto;
    left: 0;
  }
  .section-2 .col-5 {
    width: 100%;
    position: relative;
    padding-top: 440px;
  }
  .section-1-image .bubble-text {
    top: -100% !important;
    left: -11% !important;
    width: 69%;
    position: relative;
  }
  .bubble-text {
    width: 210px;
    top: 555px;
    right: 0;
    left: 0;
  }

  .bubble-text:after {
    left: 112%;
    top: 50%;
  }

  /*SECTION 3*/

  .section-3 {
    text-align: center;
  }
  .section-3 .main-title {
    width: 100%;
  }
  .section-3-image {
    width: 160px;
    height: 144px;
    top: -48%;
    left: 0;
    right: 0;
    margin: auto;
  }
  .swiper-icon .swiper-slide img {
    width: 55px;
  }
  /*SECTION 5*/

  .section-sw-game {
    padding: 10px 0;
  }
  .section-5 {
    text-align: center;
    padding: 50px 0 0 0;
  }
  .section-5 .main-title {
    padding: 0;
  }
  .section-5 .col-6 {
    width: 100%;
  }
  .section-5-image {
    width: 100%;
    position: relative;
    margin: auto;
    right: 0;
    left: 0;
  }
  .swiper.team-slider .swiper-slide-caption {
    top: 45%;
  }

  /*SECTION 6*/

  .section-6 .content-limit .row .col-12 img {
    width: 60%;
  }
  .section-6 .content-limit .row .col-3 {
    padding: 0 10px;
  }
  .section-6 p.medium-txt {
    font-size: 14pt !important;
  }

  /*SECTION 7*/

  .swiper.roadmap-slider {
    height: 940px !important;
  }
  .swiper.roadmap-slider .swiper-slide-caption {
    width: 200% !important;
  }
  .roadmap-content .roadmap-content-info {
    width: 100%;
    border: none;
  }
  .roadmap-content .roadmap-content-image {
    width: 80%;
    margin: auto;
  }
  .section-7 .swiper-button-next:after,
  .section-7 .swiper-button-prev:after {
    font-size: 30px;
  }

  /*SECTION CREATE*/

  .section-create .content-limit {
    background: url(../img/flamma.webp) no-repeat right bottom;
    background-size: 200% auto;
    width: 100%;
    padding: 40px 0 300px 0;
  }
  .section-create .col-5 {
    width: 100%;
    margin: auto 40px;
    text-align: center;
  }

  .big-txt {
    font-size: 30px !important;
  }

  .footer-menu a {
    display: block;
    padding: 5px 0;
    font-size: 12px;
    margin: 0 10px;
  }
}

/*MENU*/

@media all and (max-width: 1100px) {
}
@media screen and (max-width: 480px) {
  button#input_2 {
    font-size: 11px !important;
  }
  .section-2-title ul {
    font-size: 13px;
  }
  .section-2 .bt-yellow-sing-up {
    margin-left: 10px;
    float: left;
  }
  .section-characters .col-4 {
    margin-top: 30px;
  }
}

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

  .cover-txt {
    width: 70vw;
    right: 28vw;
  }
}