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

    body {

    }

    p {
        font-size: 18px;
    }

    h2 {
        font-size: 40px;
    }


    h3 {
        font-size: 18px;
    }

    h4 {
        font-size: 30px;
    }

    .pt20 {
        padding-top: 20px !important;
    }

    .pt40 {
        padding-top: 40px !important;
    }

    .pt50 {
        padding-top: 50px !important;
    }

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

    .container {
        padding-left: 30px;
        padding-right: 30px;
    }

    .mb80 {
        margin-bottom: 40px !important;
    }

    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    #menu {
        position: relative;
        padding: 40px 0 0;
        text-align: center;
        max-height: 30px;
    }

    #menu img {
        height: 100%;
        width: auto;
    }

    #jumbotron {
        padding-top: 20vw;
    }

    #jumbotron h1 {
        font-size: 42px;
    }

    #middle {
        margin-top: 220px;
        padding-bottom: 50px;
    }

    .cols {
        display: block;
    }

    .cols.two > div {
        display: block;
        width: 100%;
    }

    .cols.two > div:first-child,
    .cols.two > div:last-child {
        padding: 0;
    }

    #traders .container {
        padding-top: 100px;
        padding-bottom: 100px;
        background-position: left top;
    }

    .col-box.three .col {
        width: 100%;
        padding: 0;
        margin-bottom: 60px;
    }

    .col-box.three .col p {
        font-size: 18px;
    }

    .col-box.three .col:last-child {
        margin-bottom: 20px;
    }

    #traders .col-box {
        margin-top: 0;
        transform: none;
        margin-bottom: -600px;
    }

    #profit-sharing {
        padding-top: 600px;
        padding-bottom: 60px;
    }

    #profit-sharing .cols.two > div:first-child,
    #profit-sharing .cols.two > div:last-child {
        padding: 0;
    }

    #trade {
        padding: 60px 0 40px;
    }

    #trade .cols .small-text {
        max-width: 100%;
        margin-bottom: 20px;
    }

    #trade .text-box {
        max-width: 100%;
        margin-bottom: 60px;
    }

    #trade .steps {
        background-size: contain;
    }

    #trade .steps .cols {
        margin-bottom: 30px;
    }

    #faq .container {
        padding: 60px 30px;
    }

    #faq ul.list > li {
        padding-right: 30px;
    }

    #faq ul.list > li button {
        right: -25px;
    }

    #disclaimer {
        padding: 100px 0;
    }

    #footer {
        padding-top: 10px;
    }

    #footer ul li {
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

    #footer ul, #footer ul.right {
        float: none;
        margin: 0;
        padding: 0;
    }

    #footer ul.right {
        margin: 20px;
    }

    #footer ul li h5 {
        padding-top: 30px;
    }

    #cookies {

    }

    #cookies .box-popup {
        left: 20px;
        right: 20px;
        width: 100%;
        transform: none;
        box-sizing: border-box;
        max-width: none;
    }

    #cookies .box-popup .box-inline {

    }

    #cookies .box-popup .box-inline button:first-child,
    #cookies .box-popup .box-inline button:last-child {
        width: 80%;
        margin: 20px auto;
        display: block;
        float: none;
    }

    .trader-benefits-container {
        display: grid;
        justify-content: space-evenly;
        grid-template-columns: 380px;
        gap: 75px;
        padding: 60px 10px 90px;
    }

    #trader-program-compensation .col-right {
        padding-top: 20px;
        padding-left: 20px;
    }

    #trade-with-shard .container {
        padding-top: 50px;
        padding-bottom: 980px;
        color: #FFFFFF;
    }

    #menu .logo {
        padding-left: 20px;
    }


    /*hamburger menu*/
    .hamburger-menu {
        z-index: 2;
        position: absolute;
        top: 26px;
        right: 50px;
        width: 30px;
        height: 40px;
        cursor: pointer;
    }

    .bar,
    .bar:before {
        width: 30px;
        height: 4px;
        border-radius: 3px;
    }

    .bar:after {
        width: 24px;
        height: 4px;
        border-radius: 3px;
    }

    .bar {
        position: relative;
        transform: translateY(25px);
        transition: all 0ms 300ms;
        border-radius: 3px;
    }

    .bar.animate {
        background: rgba(255, 255, 255, 0);
    }

    .bar:before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 8px;
        background: rgba(255, 255, 255, 1);
        transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    .bar:after {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        background: rgba(255, 255, 255, 1);
        transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    .bar.animate:after {
        top: 0;
        width: 30px;
        transform: rotate(45deg);
        transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
    }

    .bar.animate:before {
        bottom: 0;
        transform: rotate(-45deg);
        transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
    }

    .menu-black .bar,
    .menu-black .bar:before,
    .menu-black .bar:after {
        background: #ffffff;
    }

    .menu-white .bar,
    .menu-white .bar:before,
    .menu-white .bar:after {
        background: #000000;
    }

    .menu-white .bar.animate:before,
    .menu-white .bar.animate:after {
        background: #ffffff;
    }

    .bar.animate {
        background: rgba(255, 255, 255, 0);
    }

    /*nav menu*/
    .show {
        left: 0%;
        opacity: 1;
    }

    .hide {
        opacity: 0;
        left: 100%;
    }

    .mobile-nav {
        background-color: #0052FF;
        position: absolute;
        top: 0;
        left: 15vw;
        width: 85vw;
        height: 100vh;
        transition: .2s ease;
        z-index: 1;
    }

    .mobile-nav ul {
        position: relative;
        top: 15%;
        transform: translateY(-50%);
        list-style: none;
        text-align: left;
    }

    .mobile-nav a {
        font-size: 21px;
        font-weight: bold;
        line-height: 53px;
        color: #ffffff;
        opacity: 0;
        transition: opacity .9s ease-in-out;
        text-decoration: unset;
    }

    .mobile-nav.show a {
        color: #ffffff;
        opacity: 1;
    }

    .mobile-nav a:hover {
        color: #2980b9;
    }

    .mobile-nav .social-links {
        padding-top: 105vw;
    }

    .mobile-nav .social-links ul {
        color: #ffffff;
        list-style: none;
        text-align: left;
    }

    .mobile-nav .social-links ul h2 {
        color: #ffffff;
        font-size: 21px;
        line-height: 53px;
    }

    .mobile-nav .social-links ul li {
        display: inline;
    }

    .mobile-nav .social-links ul li:not(:nth-of-type(1)) {
        padding-left: 30px;
    }

    #traders {
        background-position: -1250px;
    }

    #trader-hero h2 {
        line-height: 46px;
        font-size: 42px;
    }

    #trader-hero p {
        line-height: 28px;
    }

    #trader-program-benefits {
        padding: 60px 0 100px!important;
    }

    #trader-hero .btn-become-trader {
        margin-left: 6vw;
    }

    #trade-with-shard {
        background-image: url("/img/bg-traders.png");
        background-size: cover;
        background-position: -1700px;
    }
}