@font-face{
    font-family:'OPPO Sans'; 
    src: url(https://code.oppo.com/etc.clientlibs/global-site/clientlibs/ui.frontend/clientlib-design/resources/fonts/OPPOSans-B.woff2) format('woff2'),
    url(https://code.oppo.com/etc.clientlibs/global-site/clientlibs/ui.frontend/clientlib-design/resources/fonts/OPPOSans-B.woff) format('woff'),
    url(https://code.oppo.com/etc.clientlibs/global-site/clientlibs/ui.frontend/clientlib-design/resources/fonts/OPPOSans-B.eot) format('embedded-opentype');
    font-weight:600;font-style:normal;font-display:swap
}

@font-face{
    font-family:'OPPO Sans';
    src:url(https://code.oppo.com/etc.clientlibs/global-site/clientlibs/ui.frontend/clientlib-design/resources/fonts/OPPOSansWeb2.woff2) format('woff2'),
    url(https://code.oppo.com/etc.clientlibs/global-site/clientlibs/ui.frontend/clientlib-design/resources/fonts/OPPOSansWeb2.woff) format('woff'),
    url(https://code.oppo.com/etc.clientlibs/global-site/clientlibs/ui.frontend/clientlib-design/resources/fonts/OPPOSansWeb2.eot) format('embedded-opentype');
    font-weight:400;font-style:normal;font-display:swap
}

/* GENERAL */
#reno8_series {font-family:'OPPO Sans', sans-serif; overflow-x: hidden; font-size: 16px; margin:0 auto; max-width: 1920px;}
img {vertical-align: middle; height: auto; max-width: 100%; position: relative;}
ul {/*list-style: none; padding: 0;*/}
li {line-height: 1.3em; margin-bottom: 0.5em;}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {font-family:'OPPO Sans', sans-serif; margin: 0 0 0.5em 0; font-weight: 400; line-height: 1.2em;}
h1, .h1 {letter-spacing: -1px; position: absolute; z-index: 3; font-size: 30px; bottom: 30%; left:30px}
h1 span, .h1 span {font-size: 55px; line-height: 1em;}
h2, .h2 {font-size: 30px; font-weight: 600; margin: 0px; line-height: 1em;}
h2 span, .h2 span {font-size: 35px;}
h3, .h3 {font-size: 26px;}
h4, .h4 {font-size: 22px; font-variation-settings: 'wght' 800;}
h5, .h5 {font-size: 20px; font-variation-settings: 'wght' 800; margin-top:1em;}
p, .p {margin: 0 0 1em 0; line-height: 1.4em; font-size: 1em; font-variation-settings: 'wght' 500;}
p.small, .p.small, span.small {font-size:0.7em;}
p.big, .p.big, span.big {font-size: 3em; line-height: 1em;}
sup {font-size: 0.7em;}
hr {clear: both;  display: block; margin: 3em 0;}
a {color: inherit; text-decoration:none;/* vertical-align: middle;*/}
a:hover, a:focus {text-decoration:none}
:focus {outline: none;}
figure, iframe {max-width: 100%;}
label {display: inline-block;}
.wrapper {margin: auto; max-width:1500px; padding-left:50px; padding-right:50px;}
.flex {display:flex; flex-flow: wrap;}
.flex.center {justify-content: center;}
.flex.vcenter {align-items: center;}
.flex.bottom {align-items: flex-end;}
.flex.inline {display:inline-flex;}
.flex.reverse {flex-direction: row-reverse;}
.hidden, .overflow, .row, .section {overflow:hidden;}
.relative {position:relative}
.uppercase {text-transform:uppercase;}
.bold, strong, .strong, b {font-weight:700; font-variation-settings: 'wght' 750;}
.italic {font-style: italic;}
.underline {border-bottom: solid 1px currentColor;}
.pointer {cursor:pointer;}

.btn {padding: 15px 50px; display: inline-block; font-size: 16px; line-height: 1em; cursor: pointer; font-weight: 600;
    -webkit-transition: opacity ease-in-out 350ms;
    -moz-transition: opacity ease-in-out 350ms;
    -o-transition: opacity ease-in-out 350ms;
    transition: opacity ease-in-out 350ms;
}
.btn:hover {opacity:0.8}

.align-c {text-align:center}
.align-l {text-align:left}
.align-r {text-align:right}
.left {float:left}
.right {float:right !important}

.yt-container, .video-container {position: relative; width: 100%; height: 0; padding-bottom: 56.4%;}
.yt-container iframe, .video-container iframe {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.displaynone {display:none}

/* COLUMNS */
[class^="col1-"], [class^="col2-"], [class^="col3-"], [class^="col4-"], [class^="col5-"], [class^="col6-"] {float:left; box-sizing: border-box;}
.col1-1 {width: 100%;}
.col1-2, .col2-4, .col3-6 {width: 50%;}
.col1-3, .col2-6 {width: 33.3%;}
.col2-3, .col4-6 {width: 66.6%;}
.col1-4 {width: 25%;}
.col3-4 {width: 75%;}
.col1-5 {width: 20%;}
.col2-5 {width: 40%;}
.col3-5 {width: 60%;}
.col4-5 {width: 80%;}
.col1-6 {width: 16.66%;}
.col1-2:nth-child(2n+1), .col1-3:nth-child(3n+1), .col1-4:nth-child(4n+1), .col1-5:nth-child(5n+1), .col1-6:nth-child(6n+1) {clear: both;}

/* PADDINGS MARGINS */
.pd-0 {padding:0}
.pd-10 {padding:10px}
.pd-20 {padding:20px}
.pd-50 {padding:50px}
.pd-t-10 {padding-top:10px}
.pd-t-20 {padding-top:20px}
.pd-t-50 {padding-top:50px}
.pd-t-100 {padding-top:100px}
.pd-t-150 {padding-top:150px}
.pd-t-200 {padding-top:200px}
.pd-b-10 {padding-bottom:10px}
.pd-b-20 {padding-bottom:20px}
.pd-b-50 {padding-bottom:50px}
.pd-b-100 {padding-bottom: 100px;}
.pd-b-150 {padding-bottom: 150px;}
.pd-b-200 {padding-bottom: 200px;}
.mg-0 {margin:0;}
.mg-10 {margin:10px}
.mg-20 {margin:20px}
.mg-t-10 {margin-top:10px}
.mg-t-20 {margin-top:20px}
.mg-t-50 {margin-top:50px}
.mg-t-200 {margin-top:200px}
.mg-b-10 {margin-bottom:10px}
.mg-b-20 {margin-bottom:20px}
.mg-b-50 {margin-bottom:50px}
.mg-b-100 {margin-bottom:100px}
.mg-b-150 {margin-bottom:150px}
.mg-b-200 {margin-bottom:200px}
.mg-l-10 {margin-left:10px}
.mg-l-20 {margin-left:20px}
.mg-l-50 {margin-left:50px}
.mg-r-10 {margin-right:10px}
.mg-r-20 {margin-right:20px}
.mg-r-50 {margin-right:50px}
.bd-r-20 {border-radius: 20px;}

/* COLORS */
.blanco {color:#ffffff;}
.gris-claro {color:#efefef}
.gris-medio {color:#a9a9a9}
.gris-oscuro {color:#3d3d3d}
.negro {color:#000000}
.bg-img {background-position: center center; background-repeat: no-repeat; background-size: cover;}
.bg-blanco {background-color:#ffffff;}
.bg-gris-claro {background-color:#efefef}
.bg-gris-medio {background-color:#a9a9a9}
.bg-gris-oscuro {background-color:#3d3d3d}
.bg-negro {background-color:#000000}
.bg-azul {background-color: #1ed1ff;}
.animation {
	-webkit-transition: all cubic-bezier(0.9, 0, 1, 0.1) 750ms;
	-moz-transition: all cubic-bezier(0.9, 0, 1, 0.1) 750ms;
	-o-transition: all cubic-bezier(0.9, 0, 1, 0.1) 750ms;
	transition: all cubic-bezier(0.9, 0, 1, 0.1) 750ms;
}

.shadow {
    -webkit-box-shadow: 1px 1px 15px -1px rgba(0,0,0,0.1);
    -moz-box-shadow: 1px 1px 15px -1px rgba(0,0,0,0.1);
    box-shadow: 1px 1px 15px -1px rgba(0,0,0,0.1);
}
.parallax {
    -webkit-transition: all linear 50ms;
	-moz-transition: all linear 50ms;
	-o-transition: all linear 50ms;
	transition: all linear 50ms;
}
.popup {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 991; display:none}
.popup-background {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); cursor: pointer;}
.popup-inner {position: absolute; width: 90%; height: 90%; max-width: 800px; padding: 50px; box-sizing: border-box; left: 50%; top: 50%; background: #fff; z-index: 999;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.popup-close {position: absolute;top: 10px;right: 10px;width: 30px;text-align: center;line-height: 30px;background-color: #000000;color: #ffffff;font-weight: 800;cursor: pointer;}
.popup-contain {overflow: auto; max-height: 100%;}

.product-img {position: relative; /*overflow: hidden;*/ height: 0; padding-bottom: 150%; max-width: 600px; margin: auto;}
.product-img > div {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.product-img > div > .animation:first-child {position: absolute; width: 40%; left: 20px; bottom: 20px; z-index: 2;}
.product-img > div > .animation:last-child {position: absolute; width: 40%; top: 20px; right: 20px;}
.rever .product-img > div > .animation:first-child {left: 45%; right: auto;}
.rever .product-img > div > .animation:last-child {right: 46%; left: auto;}
.btn-selector {width: 2em; height: 2em; margin: 0.5em; top: -1em; position: relative; float: left; border-radius: 100%; border: solid currentColor 2px;}
.product-sel.active {text-decoration: underline;}

.col1-2:last-child .product-img .animation {
    -webkit-transform: translateX(1000px);
    -moz-transform: translateX(1000px);
    -o-transform: translateX(1000px);
    transform: translateX(1000px);
}
.col1-2:first-child .product-img .animation {
    -webkit-transform: translateX(-1000px);
    -moz-transform: translateX(-1000px);
    -o-transform: translateX(-1000px);
    transform: translateX(-1000px);
}
.onview .product-img .active > .animation {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition: all cubic-bezier(0, 0.9, 0.1, 1) 750ms;
	-moz-transition: all cubic-bezier(0, 0.9, 0.1, 1) 750ms;
	-o-transition: all cubic-bezier(0, 0.9, 0.1, 1) 750ms;
	transition: all cubic-bezier(0, 0.9, 0.1, 1) 750ms;
}
.product-img .animation:last-child, .onview .product-img .active > .animation:last-child {
    -webkit-transition-delay: 250ms;
	-moz-transition-delay: 250ms;
	-o-transition-delay: 250ms;
    transition-delay: 250ms;
}

#reno8_header {height: 700px;}
#reno8_header > .wrapper, #reno8_header > .wrapper > .flex {height:100%;}
#pos-5g {position: absolute; right: 50px; top: 50px;}
#show-reno8-series {opacity:1; animation: reno-series normal 2.5s;}
#pos-reno8-bl {position: absolute; top: 100px; left: 33%;}
#pos-reno8-gl {position: absolute; top: 100px; left: 35%;}
#pos-reno8-gr {position: absolute; top: 100px; left: 46%;}
#pos-reno8-bl.animate {animation: reno-bl normal 2.5s;}
#pos-reno8-gl.animate {animation: reno-gl normal 2.5s;}
#pos-reno8-gr.animate {animation: reno-gr normal 2.5s;}
@keyframes reno-series {
    0% {opacity:0}
    50% {opacity:0}
    99% {opacity:1}
}
@keyframes reno-bl {
    0% {transform: translateY(150%) rotate(-17deg); animation-timing-function: cubic-bezier(0, 0.5, 0.3, 1); left:45%;}
    80% {transform: translateY(3%) rotate(-17deg); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); left:45%;}
    100% {transform: translateY(0%) rotate(0deg); left: 33%;}
}
@keyframes reno-gl {
    0% {transform: translateY(150%) rotate(-23deg); animation-timing-function: cubic-bezier(0, 0.5, 0.3, 1); left: 39%;}
    80% {transform: translateY(4%) rotate(-23deg); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); left: 39%;}
    100% {transform: translateY(0%) rotate(0deg); left: 35%;}
}
@keyframes reno-gr {
    0% {transform: translateY(100%) rotate(-30deg); animation-timing-function: cubic-bezier(0, 0.5, 0.3, 1); left: 35%;}
    80% {transform: translateY(0%) rotate(-30deg); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); left: 35%;}
    100% {transform: translateY(0%) rotate(0deg); left: 46%;}
}

#reglamento {font-size: 14px;}
#reglamento h4 {font-size: 19px;}
#reglamento h5 {font-size: 17px;}

@media only screen and (max-width: 1550px) {
    #reno8_header {height: 50vw;}
    #pos-reno8-bl {width: 28vw;}
    #pos-reno8-gl {width: 42vw;}
    #pos-reno8-gr {width: 52vw;}
}

@media only screen and (max-width: 1200px) {
    h1, .h1 {font-size: 2.3vw;}
    h1 span, .h1 span {font-size: 4.5vw;}
    .header .col1-3, .header .col2-3 {width: 50%;}
    .header .col1-3 > div, .header .col2-3 > div {min-height: 320px;}
    .wrapper {padding-left:30px; padding-right:30px}
    
    .product-img {padding-bottom: 180%;}
}

@media only screen and (max-width: 900px) {
    .product-img {padding-bottom: 200%;}
}

@media only screen and (max-width: 770px) {
    .wrapper {padding-left:10px; padding-right:10px;}
    h1, .h1 {font-size: 3.3vw;}
    h1 span, .h1 span {font-size: 7vw;}
    h2, .h2 {font-size: 20px;}
    .header .col2-3 {width: 100%;}
    .header .col1-3 {display: none;}
    [class^="col1-"]:not(.col1-4), [class^="col2-"], [class^="col3-"], [class^="col4-"], [class^="col5-"], [class^="col6-"] {width: 100%;}
    .col1-4 {width: 50%;}
    .flex.mob-reverse {flex-direction: column-reverse;}
    #mobile {width: 70%;}
    #pos-5g {width: 40px;}
    #reno8_header {height: 80vh;}
    #reno8_header .vcenter { align-items: start; text-align: center;}
    #reno8_header .vcenter > div {margin: 100px auto; max-width: 80vw;}
    #pos-reno8-bl {width: 52vw; top: 390px; left: -9%;}
    #pos-reno8-gl {width: 68vw; top: 360px; left: -1%;}
    #pos-reno8-gr {width: 74vw; top: 333px; left: 28%;}
    @keyframes reno-bl {
        0% {transform: translateY(150%) rotate(-17deg); animation-timing-function: cubic-bezier(0, 0.5, 0.3, 1); left:24%;}
        80% {transform: translateY(3%) rotate(-17deg); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); left:24%;}
        100% {transform: translateY(0%) rotate(0deg); left: -9%;}
    }
    @keyframes reno-gl {
        0% {transform: translateY(150%) rotate(-23deg); animation-timing-function: cubic-bezier(0, 0.5, 0.3, 1); left: 20%;}
        80% {transform: translateY(4%) rotate(-23deg); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); left: 20%;}
        100% {transform: translateY(0%) rotate(0deg); left: -1%;}
    }
    @keyframes reno-gr {
        0% {transform: translateY(100%) rotate(-30deg); animation-timing-function: cubic-bezier(0, 0.5, 0.3, 1); left: 15%;}
        80% {transform: translateY(0%) rotate(-30deg); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); left: 15%;}
        100% {transform: translateY(0%) rotate(0deg); left: 28%;}
    }
    .product-img {padding-bottom: 170%;}
}

@media only screen and (max-width: 550px) {
    #pos-reno8-bl {top: 300px;}
    #pos-reno8-gl {top: 290px;}
    #pos-reno8-gr {top: 280px;}
}