@media screen and (min-width: 768px) {
    .title-lvl-1 {
        font-size: 42px;
        margin: 0 0 45px
    }

    .title-lvl-2 {
        font-size: 32px;
        margin: 0 0 25px
    }

    .title-lvl-3 {
        font-size: 24px;
        line-height: 1.4
    }

    blockquote {
        padding: 0 50px 0 25px
    }

    blockquote .title {
        padding: 0 0 20px 25px
    }
}

@media screen and (min-width: 1200px) {
    body {
        font-size: 16px;
        line-height: 26px
    }

    h1 {
        font-size: 42px;
        line-height: 48px
    }

    h2 {
        font-size: 36px;
        line-height: 42px
    }

    .text-xl {
        font-size: 1.312em;
        line-height: 1.4285em
    }
}

@media screen and (min-width: 768px) {
    .box-illustration .illustration-img {
        height: 142px;
        width: 142px
    }

    .box-illustration .illustration-copy {
        width: calc(100% - 142px - 52px)
    }

    .box-illustration .illustration-title {
        font-size: 22px
    }

    .box-content .content-image-l {
        float: left;
        padding-right: 35px
    }

    .box-content a:hover {
        text-decoration: none
    }

    .container-p1x {
        padding: 50px 15px
    }

    .container-p2x {
        padding: 100px 15px
    }
}

@media screen and (min-width: 768px) {
    .columnizer {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 30px;
        -moz-column-gap: 30px;
        column-gap: 30px
    }

    .instrument-box {
        padding: 30px 100px 10px
    }

    .content-box--greenbg {
        position: relative;
        overflow: hidden
    }

    .content-box__greenbg-right {
        width: 50%;
        height: 100%;
        background: #1abc9c;
        position: absolute;
        right: 0;
        z-index: 0
    }

    .content-box__arrow {
        top: 50%;
        margin-top: -600px;
        left: 100%;
        position: absolute;
        z-index: 0;
        height: 0;
        border-style: solid;
        border-width: 600px 0 600px 210px;
        border-color: transparent transparent transparent #f0f5fb
    }
}

@media screen and (min-width: 768px) {
    .instruments {
        display: block;
        margin-top: 30px;
        color: #3d464d;
        font-size: 13px;
        font-weight: 700
    }

    .instruments li {
        min-width: 0;
        margin-right: 15px;
        margin-bottom: 15px
    }

    .instruments li:last-child {
        margin-bottom: 0;
        margin-right: 0
    }

    .instruments li span {
        font-size: 12px
    }

    .social-box {
        margin: 20px 0 40px;
        box-shadow: 0 25px 40px -15px rgba(154, 154, 154, .3)
    }

    .social-box ul {
        margin-bottom: 0
    }

    .social-box a + a {
        margin-left: 20px
    }

    .social-box .download-btn {
        display: inline-block
    }

    .social-box .download-btn + .download-btn {
        margin-top: 0
    }

    #footer {
        border-top: 1px solid #d3e1f0;
        font-size: 14px;
        line-height: 24px
    }

    #footer small {
        font-size: 14px
    }

    #footer h5 {
        color: #0a1f4e;
        font-size: 14px;
        letter-spacing: 2px
    }

    #footer .social-box h5 {
        margin-right: 30px;
        margin-bottom: 0;
        font-size: 12px
    }

    .footer-links {
        margin-bottom: 20px;
        font-size: 14px
    }
}

@media screen and (min-width: 1200px) {
    .header-bottom-inner {
        padding-top: 0;
        padding-bottom: 0
    }

    #header-bottom [class^=col-] {
        position: static
    }

    #header-bottom-logo {
        margin-left: 0
    }

    #header-bottom-logo img {
        height: 42px
    }

    .menu {
        position: static;
        z-index: 1;
        top: 0;
        bottom: auto;
        overflow: unset;
        opacity: 1;
        margin-left: 60px
    }

    .menu ul {
        display: flex
    }

    .menu ul li {
        position: static;
        border-top: none;
        padding-left: 13px;
        padding-right: 13px
    }

    .menu ul li:last-child {
        margin-right: 0
    }

    .menu ul li.dropdown > i {
        display: none
    }

    .menu ul li.dropdown > a:after {
        margin-left: 7px;
        font-family: skilling-icons;
        font-size: 10px;
        content: "\e903"
    }

    .menu ul li.dropdown:hover > div {
        position: absolute;
        z-index: 10;
        top: 100%;
        left: 0;
        right: 0;
        padding-top: 20px;
        border-top: 1px solid #d3e1f0;
        background-color: #fff;
        box-shadow: 0 40px 40px -20px rgba(0, 0, 0, .15)
    }

    .menu ul li.dropdown:hover ul {
        display: flex;
        flex-wrap: wrap;
        width: 735px;
        margin: 0 auto
    }

    .menu ul li.dropdown:hover ul li {
        margin: 0;
        flex-basis: 33.333333333%
    }

    .menu ul li.dropdown:hover ul li a {
        font-size: 14px;
        font-weight: 700
    }

    .menu ul li a {
        padding: 0;
        font-size: 15px
    }

    .menu ul ul p {
        display: block;
        font-size: 13px;
        font-weight: 300
    }

    .menu > ul > li {
        border-bottom: 2px solid transparent;
        transition: all .25s
    }

    .menu > ul > li > a {
        position: relative;
        padding: 23px 0
    }

    .menu > ul > li:hover {
        border-bottom-color: #4097f6
    }

    .menu-search-widget {
        position: relative
    }

    .header-search {
        top: -5px;
        right: 0
    }

    .header-search.show-header-search {
        z-index: 2
    }

    .header-search.show-header-search input[type=search] {
        width: 100%
    }

    .header-search input[type=search] {
        padding: 0 35px 0 45px;
        width: 0;
        transition: all .2s
    }

    #btn-search {
        flex-grow: 1;
        padding-left: 11px;
        top: 0;
        text-decoration: none
    }
}

@media screen and (min-width: 768px) {
    .icon-box-3 img {
        position: relative;
        top: 7px;
        float: left;
        margin-bottom: 0
    }

    .icon-box-3 .icon-box-content {
        margin-left: 90px
    }
}

@media screen and (min-width: 576px) {
    .image-box-thumb.img-crop {
        text-align: center
    }
}

@media screen and (min-width: 768px) {
    .image-box-thumb.img-crop {
        text-align: left
    }
}

@media screen and (min-width: 768px) {
    .list-images-large .list-img {
        width: 260px
    }

    .list-images-large .list-copy {
        float: right;
        width: calc(100% - 260px - 35px)
    }

    .list-images-large .list-copy a:hover {
        text-decoration: none
    }
}

@media screen and (min-width: 768px) {
    .clients-list {
        justify-content: space-around
    }

    .clients-list li {
        min-width: 90px;
        padding: 0 10px
    }
}

@media screen and (min-width: 1199px) {
    .check-list, .uncheck-list {
        margin-bottom: 60px;
        font-size: 21px;
        line-height: 42px
    }

    .check-list li, .uncheck-list li {
        padding-left: 35px
    }

    .check-list li:before, .uncheck-list li:before {
        font-size: 21px
    }

    .check-list-sm {
        margin-bottom: 20px;
        color: #374e5e;
        font-size: 14px;
        line-height: 26px
    }

    .check-list-sm li {
        padding-left: 25px
    }

    .check-list-sm li:before {
        font-size: 16px
    }
}

@media screen {
    .arrow-list {
        list-style: none
    }

    .arrow-list li {
        position: relative;
        padding-left: 30px;
        margin-bottom: 15px
    }

    .arrow-list li:before {
        position: absolute;
        top: 2px;
        left: 0;
        color: #1abc9c;
        font-family: skilling-icons;
        content: "\e90e"
    }
}

@media screen and (min-width: 1200px) {
    .check-list, .uncheck-list {
        margin-bottom: 60px;
        font-size: 21px;
        line-height: 42px
    }

    .check-list li, .uncheck-list li {
        padding-left: 35px
    }

    .check-list li:before, .uncheck-list li:before {
        font-size: 21px
    }

    .check-list-sm {
        margin-bottom: 20px;
        color: #374e5e;
        font-size: 14px;
        line-height: 26px
    }

    .check-list-sm li {
        padding-left: 25px
    }

    .check-list-sm li:before {
        font-size: 16px
    }
}

@media screen and (min-width: 768px) {
    .box-meta .meta-time {
        font-size: 16px
    }

    .box-meta .lvl-1 > li {
        font-size: 14px;
        margin-right: 10px;
        padding-left: 15px
    }
}

@media screen and (min-width: 768px) {
    .modal__content {
        width: 100%;
        max-width: 900px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        bottom: unset
    }

    .modal__content__marketing {
        flex-grow: 1;
        background: #1abc9c;
        max-width: 350px;
        padding-top: 10px;
        position: relative;
        display: block
    }

    .modal__content.login {
        width: 650px
    }
}

@media screen and (min-width: 1200px) {
    .modal__content {
        height: 500px
    }
}

@media screen and (min-width: 768px) {
    .payment-container {
        display: block
    }

    .payment {
        justify-content: center
    }

    .payment + .payment {
        margin-top: 20px
    }

    .payment:nth-child(2) {
        order: 2
    }

    .payment li {
        flex-basis: auto
    }
}

@media screen and (min-width: 1400px) {
    .payment:nth-child(odd) {
        margin-right: 100px;
        margin-left: 100px
    }
}

@media screen and (min-width: 768px) {
    html[dir=rtl] #footer .social-box .button-tracking-ios {
        margin-left: 15px
    }
}

@media screen and (min-width: 768px) {
    html[dir=rtl] .text-lg-left {
        text-align: right !important
    }

    html[dir=rtl] .steps li:first-child::after {
        content: none
    }

    html[dir=rtl] .steps li:nth-child(3)::after {
        position: absolute;
        top: 29px;
        bottom: auto;
        left: 100%;
        display: block;
        width: 200px;
        border-left: none;
        border-top: 2px dashed #1abc9c;
        content: "";
        transform: translateX(-50%)
    }

    html[dir=rtl] .markets-search-form input[type=search] {
        padding-left: 20px;
        padding-right: 60px
    }

    html[dir=rtl] .tab-bar-that-works .tab-links {
        right: 0;
        left: auto
    }
}

@media screen and (min-width: 1200px) {
    html[dir=rtl] .menu {
        margin-left: 0;
        margin-right: 60px
    }

    html[dir=rtl] .menu ul li.dropdown > a:after {
        margin-left: 0;
        margin-right: 7px
    }

    html[dir=rtl] #btn-search {
        padding-left: 0;
        padding-right: 11px;
        margin-left: 0;
        margin-right: 20px
    }

    html[dir=rtl] .header-search input[type=search] {
        padding: 0 45px 0 35px
    }
}

@media only screen and (min-width: 576px) {
    .risk-warning-bar {
        padding: 10px 24px !important;
        cursor: unset
    }

    .risk-warning-bar .risk-expand-collapse {
        display: none
    }

    .risk-warning-bar .risk-text-normal {
        display: block
    }

    .risk-warning-bar .risk-text-collapsable {
        display: none
    }
}

@media only screen and (min-width: 1200px) {
    .risk-warning-bar {
        font-size: 1rem !important;
        line-height: 1.5 !important
    }
}

@media screen and (min-width: 768px) {
    .container-padding {
        padding-bottom: 70px;
        padding-top: 70px
    }
}

@media screen and (min-width: 768px) {
    .hero-section {
        position: relative;
        margin-bottom: 90px;
        font-size: 21px;
        line-height: 36px;
        text-align: left;
        background-color: #f0f5fb;
        background-repeat: no-repeat;
        background-position: right center;
        background-size: contain
    }

    .hero-section a {
        font-size: 18px
    }

    #clients {
        padding-top: 40px;
        margin: 100px 0
    }

    #partner {
        margin-top: 100px
    }

    #academy {
        padding: 230px 0 210px
    }
}

@media screen and (min-width: 768px) {
    .images-slider {
        margin-bottom: 0
    }
}

@media screen and (min-width: 768px) {
    .steps {
        display: flex;
        margin-bottom: 50px
    }

    .steps li {
        flex: 1;
        text-align: center;
        padding: 0 30px
    }

    .steps li:after {
        position: absolute;
        top: 29px;
        bottom: auto;
        left: 100%;
        display: block;
        width: 200px;
        border-left: none;
        border-top: 2px dashed #1abc9c;
        content: "";
        transform: translateX(-50%)
    }

    .steps li span {
        float: none;
        margin-bottom: 40px
    }

    .steps li span img {
        max-width: none
    }
}

@media screen and (min-width: 576px) {
    .markets-table thead tr th:last-child {
        display: table-cell;
        max-width: 50px;
        text-align: center
    }

    .markets-table tbody tr td:last-child {
        font-size: 14px;
        display: table-cell;
        max-width: 50px;
        text-align: center
    }
}

@media screen and (min-width: 768px) {
    .markets-table tbody tr td.sell {
        width: 90px
    }

    .markets-table tbody tr td.buy {
        width: 90px
    }

    .scroll-table {
        overflow: visible
    }

    .markets-search-form {
        position: relative;
        display: block
    }

    .markets-search-form:before {
        position: absolute;
        top: 50%;
        left: 22px;
        color: #a3afbc;
        font-family: skilling-icons;
        content: "\e906";
        transform: translateY(-50%)
    }

    .markets-search-form input[type=search] {
        display: block;
        width: 100%;
        height: 50px;
        padding-right: 20px;
        border: none;
        padding-left: 60px
    }

    .markets-table thead tr th:last-child {
        display: none
    }

    .markets-table tbody tr td:last-child {
        display: none
    }

    .markets-table.instruments-info th:first-child {
        padding-left: 90px
    }

    .markets-table.instruments-info td:first-child {
        padding-left: 90px
    }

    .examples-table tbody th {
        width: 50%
    }

    .examples-table tbody td {
        width: 50%
    }

    .markets-table-container .default-table {
        border-top: none
    }

    .markets-table-container .default-table th {
        width: 40%;
        padding-left: 30px
    }
}

@media screen and (min-width: 768px) {
    .tab-nav {
        position: relative;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #d3e1f0;
        box-shadow: none
    }

    .tab-nav a {
        display: block;
        padding: 15px 15px;
        border-bottom: 2px solid transparent;
        font-size: 16px;
        color: #6a7c93;
        transition: all .25s
    }

    .tab-nav a.active {
        border-bottom-color: #4097f6
    }

    .tab-nav:not(.show-markets) a.active {
        position: relative;
        top: 0;
        left: 0;
        padding: 15px;
        min-width: 0
    }

    .filters-tab-nav .tab-link {
        margin: 0 40px
    }

    .tab-bar-that-works .tab-link {
        display: inline-block
    }

    .tab-bar-that-works .tab-link.active {
        border-bottom: 2px solid #4097f6
    }

    .tab-bar-that-works .tab-links {
        border-bottom: 1px solid #d3e1f0
    }

    .tab-disclaimer {
        bottom: -100px
    }
}

@media screen and (min-width: 576px) {
    .text-box {
        padding: 30px 40px
    }
}

@media screen and (min-width: 768px) {
    .text-box ul {
        margin-left: 100px
    }
}