@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-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
}

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

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

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

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

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

#opporeno .bg-black {
    background-color: #000000
}

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

#opporeno .bg-dark-grey {
    background-color: #1a1a1a
}

#opporeno .color-light {
    color: #f4f4f4
}

#opporeno .p-relative {
    position: relative
}

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

#opporeno .box-main {
    background: #F6F6F6;
    background: linear-gradient(180deg, rgba(246, 246, 246, 1) 0%, rgba(207, 207, 207, 1) 100%);
    border-radius: 15px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

#opporeno .box-d {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

#opporeno .box-main img {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px
}

#opporeno .box-main-p {
    padding: 16px;
    font-family: OPPOSans-Bold, Arial, serif
}

#opporeno .radius-border {
    border-radius: 15px
}

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

#opporeno .sup {
    vertical-align: super;
    font-size: .6em
}

#opporeno .heading-2 {
    font-size: 1.6rem;
    font-family: OPPOSans-Bold, Arial, Helvetica, sans-serif;
    line-height: 1.8
}

#opporeno .heading-3 {
    font-size: 1.4rem;
    font-family: OPPOSans-Medium, Arial, Helvetica, sans-serif;
    line-height: 1.5;
    margin-bottom: 20px;
    direction: ltr
}

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

#opporeno .small {
    font-size: .8rem;
    direction: ltr
}

#opporeno .legal {
    font-size: .7rem;
    direction: ltr
}

#opporeno ol.legal {
    margin-left: 15px
}

#opporeno .bg-main {
    background: #ffffff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(188, 217, 231, 1) 100%)
}

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

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

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

#opporeno .text-left {
    text-align: left
}

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

#opporeno .px-4 {
    padding-left: 16px;
    padding-right: 16px
}

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

#opporeno .pb-8 {
    padding-bottom: 32px
}

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

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

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

#opporeno .d-block {
    display: block
}

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

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

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

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

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

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

#opporeno .order-1 {
    direction: ltr
}

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

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

#opporeno .col-span-4 {
    grid-column: span 4/span 4
}

#opporeno .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0
}

@media screen and (min-width:768px) {
    #opporeno .heading-2-main {
        font-size: 2.5rem;
        line-height: 1.5
    }

    #opporeno .order-1 {
        direction: rtl
    }

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

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

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

@media screen and (min-width:1024px) {
    #opporeno .heading-2-main {
        font-size: 3rem;
        line-height: 1.5
    }
}