.show-mobile {
    display: none;
}

@media only screen and (max-width: 768px) {
    .main-body .why-cards .line {
        flex-direction: column;
        align-items: center;
    }

    .hide-mobile,
    .cctp-form .btn.hide-mobile,
    .cctp-form .btn.primary.hide-mobile,
    .page.inverted .landing-background.inverted.hide-mobile,
    .landing-background.hide-mobile {
        display: none;
    }

    .show-mobile {
        display: inherit;
    }

    .cctp-form .swap-icon-wrapper + .input-wrapper:not(.error) input {
        padding-bottom: 0;
    }
    .cctp-form .swap-icon-wrapper + .input-wrapper:not(.error) {
        padding-bottom: 24px;
    }

    .cctp-form .input-wrapper {
        padding-bottom: 32px;
    }

    .cctp-form .input-wrapper input {
        padding-bottom: 12px;
    }

    .header {
        padding-top: 12px;
    }

    .header .connect-wallet.connect {
        font-family: Open Sans;
        font-size: 12px;
        font-weight: 700;
        line-height: 24px;
        letter-spacing: 2px;
        text-align: right;
        text-transform: uppercase;
    }

    .cctp-form .notification-block .title {
        margin-bottom: 0;
    }

    .main-body .why-cards .line + .line .card {
        border-bottom: 1px solid #BBBEC0;
    }

    .main-body .why-cards .line + .line .card:last-child {
        border-bottom: 0;
    }

    .main-body.subscription .form {
        display: flex;
        flex-direction: column;
    }

    .main-body.subscription .form .btn {
        margin-left: 0;
        margin-top: 16px;
    }

    .main-body.subscription .card .title {
        font-size: 24px;
    }

    .main-body .why-cards .card {
        font-size: 18px;
    }

    .main-body.why .title {
        font-size: 32px;
        margin-bottom: 32px;
    }

    .main-body .why-content {
        padding-top: 0px;
        padding-bottom: 8px;
    }

    .main-body.subscription .success-message,
    .main-body.subscription .form .btn,
    .main-body.subscription .card {
        font-size: 16px;
    }

    .main-body.subscription .card {
        padding: 24px;
    }

    .main-body.partnership,
    .main-body.partnership .title {
        text-align: center;
    }

    .main-body.partnership {
        font-size: 18px;
    }

    .main-body.partnership .title {
        font-size: 32px;
    }

    .main-body .cards .card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .main-body .cards .card .heading {
        margin-top: 24px;
    }

    .main-body {
        font-size: 18px;
    }

    .main-body + .main-body {
        padding-top: 60px;
        margin-top: -30px;
    }

    .footer-wrapper .disclaimer-wrapper {
        margin-top: 32px;
    }
}

@media only screen and (max-width: 960px) {
    .main-body .heading {
        font-family: Open Sans;
        font-size: 48px;
        font-weight: 700;
        line-height: 48px;
        text-align: left;
    }

    .header {
        margin-bottom: 40px;
    }

    .header .logo {
        font-size: 20px;
    }

    .header .connect-wallet .identicon {
        max-width: 40px;
        max-height: 40px;

        margin-right: 8px;
    }

    .header .history-button {
        height: 48px;
        width: 48px;
        border: none;
        border-radius: 8px;
    }

    .header .connect-wallet.address {
        font-size: 14px;
    }

    .chain-selector-wrapper {
        width: 112px;
        padding: 4px;
        box-sizing: border-box;
    }
    .chain-selector-wrapper .select-arrow {
        margin-left: -7px;
    }

    .chain-selector-wrapper .value {
        max-width: 50px;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .cctp-form .input-wrapper input:disabled,
    .cctp-form .input-wrapper input {
        padding-right: 150px;
        font-size: 24px;
        line-height: 28px;
    }

    .cctp-form .wallet-address-wrapper.input-wrapper input {
        padding-right: 100px;
    }

    .socials-wrapper .copyrights {
        margin-top: 40px;
    }

    .socials-wrapper .socials {
        flex-wrap: wrap;
    }

    .socials-wrapper .socials > a + a {
        margin-left: 0;
    }

    .socials-wrapper .socials > a {
        margin-right: 16px;
        margin-top: 16px;
    }

    .faq .heading {
        font-family: Open Sans;
        font-size: 22px;
        font-weight: 400;
        line-height: 34px;
        text-align: left;
        margin-bottom: 0px;
    }

    .faq .heading .title {
        font-family: Open Sans;
        font-size: 72px;
        font-weight: 700;
        line-height: 72px;
        text-align: left;
        margin-bottom: 32px;
    }

    .accordion__section__wrapper > div:first-child {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 36.33%, #FFFFFF 61.98%);
    }

    .page.inverted .accordion__section__wrapper > div:first-child {
        background: linear-gradient(180deg, rgba(22, 26, 27, 0) 0%, rgba(22, 26, 27, 0.9) 36.33%, #161A1B 61.98%);
    }

    .accordion__section__wrapper .accordion__section .active + .accordion__content {
        margin-bottom: 40px;
    }

    .accordion__section__wrapper .accordion__section:not(:first-child) .accordion {
        border-top: 1px solid #BBBEC0;
    }

    .accordion__section__wrapper > div {
        background: #FFFFFF;
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .page.inverted .accordion__section__wrapper > div {
        background-color: #161A1B;
    }

    .main-body.faq + .footer-wrapper {
        margin-top: 0;
    }

    .steps-wrapper {
        margin-top: 0;
    }

    .steps-wrapper .step .number-wrapper {
        margin-right: 0;
        margin-bottom: 8px;
    }
    .steps-wrapper .step {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .steps-wrapper .step {
        margin-right: 0;
    }

    .cctp-form .form-body {
        margin-bottom: 24px;
    }

    .toggle {
        margin-bottom: 32px;
    }
}

@media only screen and (max-width: 1024px) {
    .main-body {
        flex-direction: column;

        overflow: hidden;
    }

    .main-body.get-start .networks-wrapper {
        width: 100%;
        max-width: 100%;
        display: flex;
        justify-content: center;
    }

    .main-body.get-start {
        text-align: center;
    }

    .main-body.get-start .networks-wrapper .img {
        margin-left: 0;
    }

    .main-body.full .cards {
        flex-direction: column;
    }

    .socials-wrapper {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 40px;
    }

    .footer-content .footer-body {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-content .footer-body .links {
        flex-direction: column;
    }

    .footer-content .footer-body .links a + a {
        margin-top: 24px;
    }

    .main-body .card {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
    }

    .main-body .card + .card {
        margin-left: 0;
        margin-top: 32px;
    }

    .main-body .why-cards .card + .card {
        margin-top: 0;
    }

    .main-body > div {
        width: 100%;
    }

    .main-body > div + div {
        margin-top: 32px;
    }

    .cctp-form {
        padding: 16px;
    }

    .page {
        padding-left: 16px;
        padding-right: 16px;
    }

    .page .main-body.full {
        margin-left: -16px;
        margin-right: -16px;
        padding-right: 16px;
        padding-left: 16px;
    }

    .footer-wrapper {
        margin-left: -16px;
        margin-right: -16px;
        padding-right: 16px;
        padding-left: 16px;
    }

    .logo-wrapper {
        margin-bottom: 40px;
    }

    .header .theme-switcher {
        display: none;
    }

    .footer-content .logo-wrapper {
        width: 100%;
        justify-content: space-between;
    }

    .footer-content .theme-switcher {
        display: flex;
        align-items: center;
        padding: 4px 6px;
    }

    .in-progress-container .in-progress .chain-icon {
        max-width: 80px;
        max-height: 80px;
    }

    .in-progress-container .in-progress {
        padding: 24px;
    }

    .in-progress-container .in-progress .direction {
        flex-shrink: 1;
        overflow: hidden;
        display: flex;
        align-items: center;
        padding-left: 24px;
        padding-right: 24px;
    }

    .cctp-form .chain-selector-wrapper.address-wrapper .address {
        display: none;
    }

    .cctp-form .chain-selector-wrapper.address-wrapper {
        justify-content: flex-end;
    }

    .cctp-form .message .icon-wrapper {
        width: 80px;
        height: 80px;
        margin-right: 20px;
    }

    .cctp-form .message .icon-wrapper > img {
        max-width: 60px;
        max-height: 60px;
    }

    .cctp-form .message {
        font-family: Open Sans;
        font-size: 16px;
        font-weight: 500;
        line-height: 26px;
        text-align: left;
    }

    .cctp-form .message.success .message-header {
        font-family: Open Sans;
        font-size: 32px;
        font-weight: 700;
        line-height: 36px;
        text-align: left;
    }

    .cctp-form .message.success .icon-wrapper > img {
        max-width: 40px;
        max-height: 40px;
    }

    .action-menu-content .btn.primary,
    .time-details-content .btn.primary,
    .cctp-form .btn.primary {
        font-family: Open Sans;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 3px;
        text-align: center;
    }

    .action-menu-content .btn.primary,
    .time-details-content .btn.primary {
        font-size: 12px;
        font-weight: 700;
        color: #2E3031;
    }

    .cctp-form .message .message-header {
        font-size: 32px;
    }

    .popup-content.custom-popup-content {
        width: 90%;
    }

    .cctp-form .notify-me-wrapper .input-wrapper {
        flex-direction: column;
    }
    .cctp-form .notify-me-wrapper .notify-button {
        margin-left: 0;
        margin-top: 16px;
        width: 100%;
    }

    .cctp-form .notify-me-wrapper .description {
        line-height: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 0;
    }
    .cctp-form .notify-me-wrapper .description .close {
        position: relative;
    }

    .main-body .steps-wrapper {
        position: relative;
        flex-direction: row;
        width: 100%;
        max-width: none;
        overflow-x: hidden;
    }

    .main-body .steps-wrapper::-webkit-scrollbar {
        display: none;
    }

    .main-body .steps-wrapper .step {
        min-width: 111px;
        width: 111px;
        text-align: center;
        z-index: 2;
    }

    .main-body .steps-wrapper .step .heading {
        text-align: center;
    }

    .steps-wrapper .step .explorer-link {
        position: relative;
    }

    .steps-wrapper .connection {
        height: 2px;
        min-width: 81px;
        margin-top: 20px;
        margin-left: -36px;
        margin-right: -36px;
        z-index: 1;
    }
}

@media only screen and (max-width: 615px) {
    .main-body .steps-wrapper {
        padding-left: 180px;
        padding-right: 180px;
        --overflow-x: unset;
        overflow-x: scroll;
    }
}