@font-face {
    font-family: OPPOSans-Bold;
    src: url(../fonts/OPPOSans-Bold.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: OPPOSans-Heavy;
    src: url(../fonts/OPPOSans-Heavy.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: OPPOSans-Light;
    src: url(../fonts/OPPOSans-Light.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: OPPOSans-Medium;
    src: url(../fonts/OPPOSans-Medium.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: OPPOSans-Regular;
    src: url(../fonts/OPPOSans-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

#oneplus {
    overflow: hidden;
    padding: 0;
    font-family: OPPOSans-Regular, Arial, serif;
    line-height: 2em;
    color: #000;
    background-color: #fff;
    font-size: 1rem
}

#oneplus * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline
}

#oneplus .section {
    width: 100%;
    padding-left: .5rem;
    padding-right: .5rem
}

#oneplus .lazy {
    max-width: 100%
}

#oneplus .bg-white {
    background-color: #fff
}

#oneplus .bg-light-grey {
    background-color: #f4f4f4
}

#oneplus .bg-dark-blue {
    background-color: #001e2e;
    color: #f0f0f0
}

#oneplus .bg-blue {
    background-color: #3b587c;
    color: #ffffff
}

#oneplus .bg-black {
    background-color: #000000;
    color: #f0f0f0
}

#oneplus .bg-white-30 {
    background-color: rgba(255, 255, 255, .1)
}

#oneplus .bg-dark-grey {
    background-color: #1a2730;
    color: #f0f0f0
}

#oneplus .centercolumn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    direction: ltr
}

#oneplus .logo-oppo {
    display: block;
    position: relative;
    width: fit-content;
    max-width: 110px;
    margin: 20px auto 45px 0
}

#oneplus .logo-oxy {
    display: block;
    position: relative;
    width: fit-content;
    max-width: 110px;
    margin: 45px auto 20px 0
}

#oneplus .color-grey {
    color: #5d5d5d
}

#oneplus .radius-border {
    border-radius: 10px
}

#oneplus .heading-1 {
    font-size: 2.5rem;
    font-family: OPPOSans-Bold, Arial, Helvetica, sans-serif;
    line-height: 1.8
}

#oneplus .heading-3 {
    font-size: 1.4rem;
    font-family: OPPOSans-Medium, Arial, Helvetica, sans-serif;
    line-height: 1.5
}

#oneplus .p {
    font-size: 1rem;
    direction: ltr
}

#oneplus .ul {
    margin-left: 25px;
    list-style-type: disc
}

#oneplus .bg-main {
    background: url('../img/main-bg.webp') no-repeat 50% 50% #d7d7d7;
    background-size: cover;
    min-height: unset
}

#oneplus .w-100 {
    width: 100%
}

#oneplus .w-max-100 {
    max-width: 100%
}

#oneplus .text-center {
    text-align: center
}

#oneplus .p-4 {
    padding: 16px
}

#oneplus .py-8 {
    padding-top: 32px;
    padding-bottom: 32px
}

#oneplus .mx-auto {
    margin-left: auto;
    margin-right: auto
}

#oneplus .my-4 {
    margin-top: 16px;
    margin-bottom: 16px;
    direction: ltr
}

#oneplus .my-6 {
    margin-top: 24px;
    margin-bottom: 24px
}

#oneplus .d-block {
    display: block
}

@media only screen and (min-width:736px) {
    #oneplus .section {
        width: 100%;
        padding-left: 5%;
        padding-right: 5%
    }

    #oneplus .logo-oppo {
        display: block;
        max-width: 200px;
        margin: 20px auto 80px 0
    }

    #oneplus .logo-oxy {
        display: block;
        max-width: 200px;
        margin: 80px auto 20px 0
    }

    #oneplus .heading-1 {
        font-size: 2.8rem
    }

    #oneplus .heading-2-main {
        font-size: 2.3rem;
        font-family: OPPOSans-Bold, Arial, serif
    }

    #oneplus .heading-3 {
        font-size: 1.5rem
    }

    #oneplus .text-md-left {
        text-align: left
    }
}

#oneplus .grid-container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
    margin-left: auto;
    margin-right: auto
}

#oneplus .order-1 {
    direction: ltr
}

#oneplus [class*=col-span-] {
    grid-column: span 12/span 12
}

#oneplus .col-span-12 {
    grid-column: span 12/span 12
}

@media screen and (min-width:768px) {
    #oneplus .bg-main {
        background: url('../img/main-bg.webp') no-repeat bottom left #d7d7d7;
        background-size: cover;
        min-height: 600px
    }

    #oneplus .heading-2-main {
        font-size: 2.5rem;
        line-height: 1.5
    }

    #oneplus .order-1 {
        direction: rtl
    }

    #oneplus .col-span-md-5 {
        grid-column: span 5/span 5
    }

    #oneplus .col-span-md-6 {
        grid-column: span 6/span 6
    }

    #oneplus .col-span-md-7 {
        grid-column: span 7/span 7
    }
}

@media screen and (min-width:1024px) {
    #oneplus .bg-main {
        background: url('../img/main-bg.webp') no-repeat bottom left #d7d7d7;
        background-size: cover;
        min-height: 600px
    }

    #oneplus .heading-2-main {
        font-size: 3rem;
        line-height: 1.5
    }

    #oneplus .logo-oppo {
        margin: 20px auto 120px 0
    }

    #oneplus .logo-oxy {
        margin: 120px auto 20px 0
    }
}