@media screen and (min-width: 1920px) {
  header,
  main,
  .success-container {
    max-width: 1920px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 500px) {
  h1,
  h2 {
    font-size: 35px !important;
    line-height: 37px !important;
  }

  main[citadao-lang='vi'] h1,
  main[citadao-lang='vi'] h2 {
    font-size: 35px !important;
    line-height: 50px !important;
  }

  p.description,
  p.small-description {
    font-size: 17px !important;
    line-height: 22px !important;
    margin-top: 25px !important;
  }
}

@media screen and (max-width: 400px) {
  h1,
  h2 {
    font-size: 32px !important;
    line-height: 34px !important;
  }

  p.description,
  p.small-description {
    font-size: 14px !important;
    line-height: 19px !important;
  }
}

/* success page section */
@media screen and (max-width: 700px) {
  .success-container {
    width: 550px;
  }
}

@media screen and (max-width: 600px) {
  .success-container {
    width: 500px;
  }
}

@media screen and (max-width: 500px) {
  .success-container {
    width: 450px;
  }
}

@media screen and (max-width: 450px) {
  .success-container {
    width: 400px;
  }
}

@media screen and (max-width: 400px) {
  .success-container {
    width: 350px;
  }
}

@media screen and (max-width: 350px) {
  .success-container p.image {
    margin-top: 100px;
  }
}
/* end success page section */

/* sidenav */
@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}
/* end sidenav */

/* header section */
@media screen and (max-width: 920px) {
  header .header-content {
    padding: 34px 5%;
  }

  header .border-bottom {
    margin: 0 5%;
  }
}

@media screen and (max-width: 820px) {
  header .header-content .social-link a:not(:first-child) {
    margin-left: 20px;
  }
}

@media screen and (max-width: 770px) {
  header .header-content .social-link a {
    font-size: 20px;
    line-height: 25px;
  }
}

@media screen and (min-width: 720px) {
  header .header-content .social-link {
    display: flex;
  }

  header .header-content .mobile-menu {
    display: none;
  }
}

@media screen and (max-width: 720px) {
  header .header-content .social-link {
    display: none;
  }

  header .header-content .mobile-menu {
    display: flex;
  }
}

/* end header section */

/* hero section */
/* hero section */
@media screen and (max-width: 1100px) {
  .hero-wrapper .hero-content {
    flex-wrap: wrap;
    text-align: center;
  }

  .hero-wrapper .hero-content .hero-text {
    width: 100%;
  }

  .hero-wrapper .hero-content .hero-video {
    width: 100%;
    margin-top: 60px;
  }
}

@media screen and (max-width: 1300px) {
  .hero-wrapper .hero-content .hero-text {
    width: 100%;
  }
}

@media screen and (max-width: 700px) {
  .hero-wrapper .hero-content {
    padding: 158px 7% 103px 7%;
  }
}

@media screen and (max-width: 660px) {
  .hero-wrapper .hero-content .hero-video iframe {
    width: 500px !important;
  }
}

@media screen and (max-width: 580px) {
  .hero-wrapper .hero-content {
    padding: 158px 5% 103px 5%;
  }
}

@media screen and (max-width: 560px) {
  .hero-wrapper .hero-content .hero-video iframe {
    width: 400px !important;
    height: 224px !important;
  }
}

@media screen and (max-width: 500px) {
  .hero-wrapper h1.title {
    font-size: 45px;
    line-height: 45px;
  }

  .hero-wrapper p.description {
    font-size: 20px;
    line-height: 25px;
  }
}

@media screen and (max-width: 470px) {
  .hero-wrapper .hero-content {
    padding: 158px 3% 103px 3%;
  }
}

@media screen and (max-width: 430px) {
  .hero-wrapper .hero-content .hero-video iframe {
    width: 350px !important;
    height: 196px !important;
  }
}

@media screen and (max-width: 380px) {
  .hero-wrapper .hero-content {
    padding: 140px 3% 63px 3%;
  }

  .hero-wrapper .hero-content .hero-video iframe {
    width: 300px !important;
    height: 168px !important;
  }
}
/* end hero section */

/* waitlist section */
@media screen and (max-width: 1350px) {
  .waitlist-wrapper {
    padding: 80px 20%;
  }

  .waitlist-wrapper .description {
    padding: 0 10%;
  }
}

@media screen and (max-width: 1050px) {
  .waitlist-wrapper {
    padding: 80px 15%;
  }
}

@media screen and (max-width: 750px) {
  .waitlist-wrapper {
    padding: 80px 10%;
  }

  .waitlist-wrapper .description {
    padding: 0 5%;
  }
}

@media screen and (max-width: 500px) {
  .waitlist-wrapper {
    padding: 80px 5%;
  }

  .waitlist-wrapper .description {
    padding: 0%;
  }
}

@media screen and (max-width: 400px) {
  .waitlist-wrapper .form button {
    margin-left: 0;
  }
}
/* end waitlist section */

/* diversify section */
@media screen and (max-width: 1350px) {
  .diversify-wrapper,
  .productive-wrapper,
  .liquidity-wrapper {
    padding: 100px 20%;
  }
}

@media screen and (max-width: 1050px) {
  .diversify-wrapper,
  .productive-wrapper,
  .liquidity-wrapper {
    padding: 100px 15%;
  }
}

@media screen and (max-width: 750px) {
  .diversify-wrapper,
  .productive-wrapper,
  .liquidity-wrapper {
    padding: 100px 10%;
  }
}

@media screen and (max-width: 700px) {
  .diversify-wrapper,
  .productive-wrapper,
  .liquidity-wrapper {
    display: block;
    text-align: center;
  }

  .diversify-wrapper > div,
  .productive-wrapper > div,
  .liquidity-wrapper > div {
    width: 100%;
  }

  .productive-wrapper > img {
    margin-top: 60px;
  }
}

@media screen and (max-width: 500px) {
  .diversify-wrapper,
  .productive-wrapper,
  .liquidity-wrapper {
    padding: 100px 5%;
  }
}
/* end diversify section */

/* advantage section */
@media screen and (max-width: 1330px) {
  .small-description {
    margin-top: 75px;
  }
}

@media screen and (max-width: 1050px) {
  .advantage-items {
    flex-direction: column;
    margin-top: 20px;
  }
  .advantage-items .vertical-rule {
    display: none;
  }

  .advantage-items .horizontal-rule {
    display: inline;
  }
  .advantage-wrapper .small-description {
    margin-top: 30px;
  }
  .advantage-wrapper .advantage-items h2.title {
    margin: 30px 0 10px 0;
  }

  .advantage-items .item {
    margin: 40px 10% 40px 10%;
  }
}

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

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

@media screen and (max-width: 500px) {
  .advantage-wrapper p.small-description {
    margin-top: 100px !important;
  }
}
/* end advantage section */

/* contributor section */
@media screen and (max-width: 1330px) {
}

@media screen and (max-width: 1050px) {
  .contributor-wrapper {
    padding: 80px 5%;
  }
}

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

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

@media screen and (max-width: 500px) {
}
/* end contributor section */

/* upcoming section */
@media screen and (max-width: 1200px) {
  .upcoming-wrapper .participating {
    padding: 320px 20% 120px 20%;
  }

  .participating {
    padding: 0 10% 0 10%;
  }
}

@media screen and (max-width: 960px) {
  .upcoming-wrapper .upcoming-feature {
    left: 10%;
  }

  .upcoming-wrapper .participating {
    padding: 320px 15% 120px 15%;
  }
}

@media screen and (max-width: 900px) {
  .upcoming-wrapper .upcoming-feature {
    left: 5%;
  }
  .participating {
    padding: 0 5% 0 5%;
  }
}

@media screen and (max-width: 800px) {
  .upcoming-wrapper .upcoming-feature {
    right: 5%;
  }

  .upcoming-wrapper .bg-image {
    background-size: cover;
    height: 1100px;
  }
}

@media screen and (max-width: 750px) {
  .upcoming-wrapper .participating {
    padding: 320px 10% 120px 10%;
  }
}

@media screen and (max-width: 714px) {
  .upcoming-wrapper .participating {
    padding-top: 349px;
  }

  .participating .wrapper.tab {
    flex-direction: column;
  }
}

@media screen and (max-width: 636px) {
  .upcoming-wrapper .participating {
    padding-top: 380px;
  }
}

@media screen and (max-width: 585px) {
  .upcoming-wrapper .upcoming-feature {
    padding: 60px;
  }
}

@media screen and (max-width: 563px) {
  .upcoming-wrapper .upcoming-feature {
    padding: 60px 50px;
  }
  .participating .card-item .card-image {
    height: 200px;
  }
  .participating .card-item br {
    display: inline;
  }
}

@media screen and (max-width: 540px) {
  .upcoming-wrapper .upcoming-feature {
    padding: 50px 40px;
  }
}

@media screen and (max-width: 500px) {
  .upcoming-wrapper .participating {
    padding: 260px 5% 120px 5%;
  }

  .upcoming-wrapper .upcoming-feature .feature-wrapper .left {
    margin-right: 50px;
  }

  .upcoming-wrapper .upcoming-feature .iro-detail-btn a {
    font-size: 17px;
    line-height: 17px;
  }

  .participating .wrapper .tab-item {
    margin-right: 0;
    padding-right: 0;
  }
}

@media screen and (max-width: 465px) {
  .upcoming-wrapper .upcoming-feature {
    padding: 40px 30px;
  }

  .upcoming-wrapper .participating {
    padding-top: 320px;
  }

  .participating .participate-iro-btn {
    padding: 20px;
  }

  .upcoming-wrapper .upcoming-feature .feature-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }

  .upcoming-wrapper .upcoming-feature .feature-wrapper .left {
    margin-right: 0;
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 441px) {
  .upcoming-wrapper .participating {
    padding-top: 360px;
  }
}

@media screen and (max-width: 400px) {
  .upcoming-wrapper .participating .participate-iro-btn a {
    font-size: 17px;
    line-height: 17px;
  }
}

@media screen and (max-width: 360px) {
  .upcoming-wrapper .participating .participate-iro-btn {
    padding: 20px 60px;
  }
}

@media screen and (max-width: 348px) {
  .upcoming-wrapper .participating {
    padding-top: 440px;
  }
}

@media screen and (max-width: 350px) {
  .upcoming-wrapper .upcoming-feature .iro-detail-btn {
    padding: 20px 60px;
  }
}
/* end upcoming section */

/* investor section */
@media screen and (min-width: 1800px) {
  .investor-wrapper .investor-list div {
    flex-basis: 20%;
  }
}

@media screen and (max-width: 1489px) {
  .investor-wrapper {
    padding: 60px 15% 100px 15%;
  }
}

@media screen and (max-width: 1404px) {
  .investor-wrapper {
    padding: 60px 12% 100px 12%;
  }
}

@media screen and (max-width: 1293px) {
  .investor-wrapper {
    padding: 60px 10% 100px 10%;
  }
}

@media screen and (max-width: 1290px) {
  img#turnvc {
    padding-right: 0px;
  }
}

@media screen and (max-width: 1228px) {
  .investor-wrapper {
    padding: 60px 5% 100px 5%;
  }
}

@media screen and (max-width: 1092px) {
  .investor-wrapper .investor-list div {
    margin-right: 50px;
  }
}

@media screen and (max-width: 1008px) {
  .investor-wrapper .investor-list div {
    margin-right: 75px;
  }

  .investor-wrapper .investor-list.venture-capital-list div:nth-child(3),
  .investor-wrapper .investor-list.venture-capital-list div:nth-child(6) {
    margin-right: 0;
  }

  .investor-wrapper .investor-list.venture-capital-list div:nth-child(5) {
    margin-right: 50px;
  }

  .investor-wrapper .investor-list.individual-list div {
    width: auto;
  }

  .investor-wrapper .investor-list.individual-list div:nth-child(4),
  .investor-wrapper .investor-list.venture-capital-list div:nth-child(4),
  .investor-wrapper .investor-list.individual-list div:nth-child(8) {
    margin-right: 75px;
  }

  .investor-wrapper .investor-list.individual-list div:nth-child(3),
  .investor-wrapper .investor-list.individual-list div:nth-child(7) {
    margin-right: 0;
  }
}

@media screen and (max-width: 915px) {
  .investor-wrapper .investor-list.venture-capital-list div:nth-child(5) {
    margin-right: 0;
  }

  .investor-wrapper .investor-list.individual-list div:nth-child(3),
  .investor-wrapper .investor-list.individual-list div:nth-child(9) {
    margin-right: 0;
  }

  .investor-wrapper .investor-list.individual-list div:nth-child(7) {
    margin-right: 75px;
  }
}

@media screen and (max-width: 811px) {
  .investor-wrapper .investor-list.individual-list div {
    margin-right: 50px;
  }
}

@media screen and (max-width: 755px) {
  .investor-wrapper .investor-list.individual-list div:last-child {
    margin-right: 0;
  }

  .investor-wrapper .investor-list.individual-list div:nth-child(3) {
    margin-right: 50px;
  }
}

@media screen and (max-width: 729px) {
  .investor-wrapper .investor-list.venture-capital-list div {
    margin-right: 50px;
  }

  .investor-wrapper .investor-list.venture-capital-list div:nth-child(4) {
    margin-right: 50px;
  }

  .investor-wrapper .investor-list.venture-capital-list div:nth-child(3),
  .investor-wrapper .investor-list.venture-capital-list div:nth-child(5) {
    margin-right: 0;
  }
}

@media screen and (max-width: 702px) {
  .investor-wrapper .investor-list.venture-capital-list div {
    width: 40%;
  }

  .investor-wrapper .investor-list.venture-capital-list div:nth-child(5) {
    margin-right: 50px;
  }

  .investor-wrapper .investor-list.venture-capital-list div:nth-child(1),
  .investor-wrapper .investor-list.venture-capital-list div:nth-child(3),
  .investor-wrapper .investor-list.venture-capital-list div:nth-child(5) {
    text-align: left;
  }

  .investor-wrapper .investor-list.venture-capital-list div:nth-child(2),
  .investor-wrapper .investor-list.venture-capital-list div:nth-child(4),
  .investor-wrapper .investor-list.venture-capital-list div:nth-child(6) {
    text-align: right;
  }

  .investor-wrapper .investor-list.venture-capital-list div:nth-child(3) {
    margin-right: 50px;
  }

  .investor-wrapper .investor-list.venture-capital-list div:nth-child(2),
  .investor-wrapper .investor-list.venture-capital-list div:nth-child(4) {
    margin-right: 0;
  }
}

@media screen and (max-width: 699px) {
  .investor-wrapper .investor-list.individual-list div:nth-child(5),
  .investor-wrapper .investor-list.individual-list div:nth-child(8) {
    margin-right: 50px;
  }
}

@media screen and (max-width: 672px) {
  .investor-wrapper .investor-list.individual-list div:nth-child(4) {
    /* margin-right: 0; */
  }

  .investor-wrapper .investor-list.individual-list div:nth-child(5),
  .investor-wrapper .investor-list.individual-list div:nth-child(8) {
    margin-right: 50px;
  }
}

@media screen and (max-width: 670px) {
  .investor-wrapper .investor-list.venture-capital-list div:nth-child(2),
  .investor-wrapper .investor-list.venture-capital-list div:nth-child(4) {
    text-align: center;
    width: 50%;
  }

  .investor-wrapper .investor-list.venture-capital-list div:nth-child(1),
  .investor-wrapper .investor-list.venture-capital-list div:nth-child(3) {
    width: 30%;
  }
}

@media screen and (max-width: 632px) {
  .investor-wrapper .investor-list.individual-list div:nth-child(6),
  .investor-wrapper .investor-list.individual-list div:nth-child(8) {
    margin-right: 50px;
  }
}

@media screen and (max-width: 620px) {
  .investor-wrapper .investor-list.venture-capital-list div:nth-child(5),
  .investor-wrapper .investor-list.venture-capital-list div:nth-child(6) {
    width: 100% !important;
    text-align: center !important;
    margin-right: 0 !important;
  }
}

@media screen and (max-width: 560px) {
  .investor-wrapper .investor-list div {
    width: 100% !important;
    text-align: center !important;
    margin-right: 0 !important;
  }
}
/* end investor section */

/* medium post section */
@media screen and (max-width: 1537px) {
  .medium-list-wrapper {
    padding: 60px 5%;
  }
}

@media screen and (max-width: 1366px) {
  .medium-list-wrapper .medium-list-content {
    justify-content: space-around;
  }
}

@media screen and (max-width: 1200px) {
  .medium-list-wrapper .medium-list-content .medium-card-item {
    margin-right: 0;
  }
}

@media screen and (max-width: 925px) {
  .medium-list-wrapper .medium-list-content .medium-card-item {
    margin-right: 30px;
  }
}

@media screen and (max-width: 450px) {
  .medium-list-wrapper .medium-card-item {
    width: 320px;
  }

  .medium-list-wrapper .medium-list-content .medium-card-item {
    margin-right: 0;
  }

  .medium-list-wrapper .medium-card-item .card-image {
    background-size: contain;
  }
}

@media screen and (max-width: 360px) {
  .medium-list-wrapper .medium-card-item {
    width: 300px;
  }
}
/* end medium post section */

/* footer section */
@media screen and (max-width: 900px) {
  footer .footer-item:nth-child(2) {
    width: 35%;
  }

  footer .footer-item:last-child {
    width: 34%;
  }
}

@media screen and (max-width: 800px) {
  footer .footer-logo {
    width: 130px;
    height: 121px;
  }
}

@media screen and (max-width: 750px) {
  footer .footer-info {
    padding: 0 5%;
  }
}

@media screen and (max-width: 700px) {
  footer .footer-info {
    flex-wrap: wrap;
    padding: 0 3%;
  }
}

@media screen and (max-width: 650px) {
  footer .footer-channel-wrapper .footer-channel-item {
    width: 45%;
  }

  footer .footer-channel-wrapper .footer-channel-item:first-child,
  footer .footer-channel-wrapper .footer-channel-item:nth-child(2) {
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 700px) {
  footer .footer-item {
    width: 95% !important;
  }

  footer .footer-channel-wrapper .footer-channel-item {
    width: 23% !important;
    align-items: center;
  }

  footer .footer-channel-wrapper .footer-channel-item {
    margin-bottom: 0 !important;
  }

  footer .footer-item:not(:last-child) {
    border-bottom: 1px solid #002e89;
  }

  footer .footer-item {
    border-right: none !important;
    text-align: center;
    padding: 30px 0 30px 0;
  }

  footer .footer-channel-wrapper {
    justify-content: center;
  }
}

@media screen and (max-width: 400px) {
  footer .footer-item {
    width: 80% !important;
  }

  footer .footer-channel-wrapper .footer-channel-item {
    width: 40% !important;
  }

  footer .footer-channel-wrapper .footer-channel-item:first-child,
  footer .footer-channel-wrapper .footer-channel-item:nth-child(2) {
    margin-bottom: 40px !important;
  }
}

/* end footer section */

/* youtube modal section */

@media screen and (max-width: 1300px) {
  .youtube-modal {
    padding: 10% 5%;
  }
}

@media screen and (max-width: 700px) {
  .youtube-modal {
    padding: 15% 5%;
  }
}

@media screen and (max-width: 500px) {
  .youtube-modal {
    padding: 20% 5%;
  }
}

@media screen and (max-width: 380px) {
  .youtube-modal {
    padding: 25% 5%;
  }
}

/* end youtube modal section */