@charset "utf-8";

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

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

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

:root {

    --animate-delay: 0.75s;

    /* headline intro big */
    --font-size-1: 7vw;
    /* headline description */
    --font-size-2: 2.3vw;
    /* headline intro */
    --font-size-3: 3vw;
    /* headline sound */
    --font-size-4: 2vw;
    /* hotspots + drag */
	--font-size-5: 1.5vw;
    --font-size-6: 0.9vw;
    --font-size-disclaimer: 0.4vw;
    --font-size-disclaimer-lineheight: 0.6vw;
    --font-size-body: 1.3vw;
    --font-size-body-lineheight: 1.9vw;
}

@media only screen and (max-width: 1920px){
    :root {
        /* headline intro big */
        --font-size-1: 7vw;
        /* headline description */
        --font-size-2: 3.5vw;
        /* headline intro */
        --font-size-3: 3vw;
        /* headline sound */
        --font-size-4: 2vw;
        /* hotspots + drag */
        --font-size-5: 2.2vw;
        --font-size-6: 0.9vw;
        --font-size-disclaimer: 0.6vw;
        --font-size-disclaimer-lineheight: 0.95vw;
        --font-size-body: 2.2vw;
        --font-size-body-lineheight: 2.9vw;
    }    
}

@media only screen and (max-width: 1680px){
    :root {
        /* headline intro big */
        --font-size-1: 7vw;
        /* headline description */
        --font-size-2: 3.5vw;
        /* headline intro */
        --font-size-3: 3vw;
        /* headline sound */
        --font-size-4: 2vw;
        /* hotspots + drag */
        --font-size-5: 2.2vw;
        --font-size-6: 0.9vw;
        --font-size-disclaimer: 0.65vw;
        --font-size-disclaimer-lineheight: 1.05vw;
        --font-size-body: 1.8vw;
        --font-size-body-lineheight: 2.5vw;
    }    
}


@media only screen and (max-width: 1440px){
    :root {
        /* headline intro big */
        --font-size-1: 10vw;
        /* headline description */
        --font-size-2: 3.7vw;
        /* headline intro */
        --font-size-3: 3.8vw;
        /* headline sound */
        --font-size-4: 2.5vw;
        /* hotspots + drag */
        --font-size-5: 2.4vw;
        --font-size-6: 1.2vw;
        --font-size-disclaimer: 0.8vw;
        --font-size-disclaimer-lineheight: 1.4vw;
        --font-size-body: 2.4vw;
        --font-size-body-lineheight: 2.9vw;
    }    
}

@media only screen and (max-width: 1024px){
    :root {
        /* headline intro big */
        --font-size-1: 10vw;
        /* headline description */
        --font-size-2: 4.0vw;
        /* headline intro */
        --font-size-3: 4.0vw;
        /* headline sound */
        --font-size-4: 2.5vw;
        /* hotspots + drag */
        --font-size-5: 2.5vw;
        --font-size-6: 1.6vw;
        --font-size-disclaimer: 1.0vw;
        --font-size-disclaimer-lineheight: 1.6vw;
        --font-size-body: 2.5vw;
        --font-size-body-lineheight: 2.9vw;
    }    
}


@media only screen and (max-width: 767px) {
    :root {
        /* headline intro big */
        --font-size-1: 12vw;
        /* headline description */
        --font-size-2: 5.5vw;
        /* headline intro */
        --font-size-3: 6.0vw;
        --font-size-3-lineheight: 8.5vw;
        /* headline sound */
        --font-size-4: 5vw;
        /* hotspots + drag */
        --font-size-5: 4.5vw;
        --font-size-6: 1.8vw;
        --font-size-disclaimer: 1.3vw;
        --font-size-disclaimer-lineheight: 2.4vw;
        --font-size-body: 3.5vw;
        --font-size-body-lineheight: 4.8vw;
    }   
}

@media only screen and (max-width: 575px) {
    :root {
        /* headline intro big */
        --font-size-1: 12vw;
        /* headline description */
        --font-size-2: 7.5vw;
        /* headline intro */
        --font-size-3: 7.5vw;
        --font-size-3-lineheight: 8.9vw;
        /* headline sound */
        --font-size-4: 5vw;
        /* hotspots + drag */
        --font-size-5: 5.0vw;
        --font-size-6: 2.5vw;
        --font-size-disclaimer: 2.0vw;
        --font-size-disclaimer-lineheight: 3.1vw;
        --font-size-body: 4.5vw;
        --font-size-body-lineheight: 6.5vw;
    }   
}


.test li {
    margin:0 0 60px 0;
}

.size01{
    font-size: var(--font-size-1);
}
.size02{
    font-size: var(--font-size-2);
}
.size03{
    font-size: var(--font-size-3);
}
.size04{
    font-size: var(--font-size-4);
}
.size05{
    font-size: var(--font-size-5);
}
.size_body{
    font-size: var(--font-size-body);
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0px;
    overflow: hidden;
    font-family: 'OPPOSans-Regular', sans-serif;
    color: #fff;
    font-size: var(--font-size-body);
    line-height: var(--font-size-body-lineheight);
    /* font-size: 62.5% */
}

#v3d-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
}

#v3d-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* transition: opacity 2s; */
    z-index: 1;
    background: none;
}

.fullscreen-button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-size: 100% 100%;
    display: none;
    z-index: 1;
}

.preload {
    opacity: 0;
    z-index: -1;
    position: absolute;
}

/* removes tap blinking on ios devices */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.holder_bg {
    background: radial-gradient(ellipse at top, #444, #000);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    left: 0;
    top: 0;
    overflow: hidden;
}

.holder_text {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    z-index: 2;
    resize: both;
    overflow: hidden;
    position: absolute;
    pointer-events: none;
    top:0;
    left: 0;
    /*background: radial-gradient(ellipse at top, #444, #000);*/
}

.holder_bg::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    left: 0;
    top: 0;
    background-image: url(../media/bg_lines_02.svg);
    background-size: 100%;
    transition: all 0.5s ease;
    animation: spin 40s ease infinite;
}

#header {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    font-family: 'OPPOSans-Light', sans-serif;
    font-size: var(--font-size-6);
}

@keyframes spin {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(20deg) scale(1.5);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}

a {
    text-decoration: none;
    color:#fff;
}

a strong, h2 strong {
    font-family: 'OPPOSans-Bold', sans-serif;
    font-weight: normal;
}

h1 {
    /* font-size: 170px; */
    font-size: var(--font-size-1);
    margin: 0;
    padding: 0;
    line-height: auto;
    font-family: 'OPPOSans-Bold', sans-serif;
    font-weight: normal;
}

h1 span {
    font-family: 'OPPOSans-Light', sans-serif;
}

h2 {
    font-size: var(--font-size-3);
    margin: 0;
    padding: 0;
    line-height: auto;
    font-family: 'OPPOSans-Light', sans-serif;
    font-weight: normal;
}

h3 {
    font-size: var(--font-size-4);
    margin: 0;
    padding: 0;
    line-height: auto;
    font-family: 'OPPOSans-Bold', sans-serif;
    font-weight: normal;
}

h4 {
    font-size: var(--font-size-5);
    margin: 0;
    padding: 0;
    line-height: auto;
    font-family: 'OPPOSans-Light', sans-serif;
    font-weight: normal;
}

#intro_text {
    opacity: 1;
    /*transition: opacity 2s;*/
    z-index: 10;
}

#sound img:first-child {
    transform: rotate(180deg);
    justify-self: end;
}

#sound img:last-child {
    justify-self: start;
}

#sound {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    place-items: center;
    opacity: 0;
    display: none;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
    /* background: rgba(46, 46, 46, 0.5); */
}

#drag_rotate {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    place-items: center;
    position: relative;
    z-index: 2;
    opacity: 0;
    display: none;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
    /* background: rgba(46, 46, 46, 0.5) */;
    padding:40px 60px;
}


#drag_rotate img {
    pointer-events: none;
    position: absolute;
    object-fit: cover;
    z-index: 0;
    width: 90%;
}

#disclaimer {
    font-size: var(--font-size-disclaimer);
    line-height: var(--font-size-disclaimer-lineheight);
    position: absolute;
    bottom: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    place-items: center;
    z-index: 99;
    opacity: 0;
}

#disclaimer > div {
    background-color: #222;
    padding:10px 15px;
    cursor: pointer;
}

.disclaimer_text {
    margin: 0 20%;
    padding:15px 25px !important;
    display: none;
}

.active .disclaimer_text {
    display: block;
}

#hotspot_bullets {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 4%;
    z-index: 5;
    opacity: 0;
    display: none;
}

#hotspot_bullets ul {
    width: 20vw;
    margin: 0 auto;
    padding:0;
    display: grid;
    list-style: none;
    grid-template-columns: repeat(4,1fr);
    place-items:center;
}

#hotspot_bullets li {
    width: 15px;
    height: 15px;
    padding: 0;
    border: none;
    line-height: 0;
    background: #fff;
    cursor: pointer;
    border-radius: 50%;
}

#hotspot_bullets li.active, #hotspot_bullets li:hover {
    background: #ED1E22;
}

.description {
    position: absolute;
    top: 8%;
    left: 2.5%;
    z-index: 5;
    line-height: auto;
    font-family: 'OPPOSans-Bold', sans-serif;
    font-weight: normal;
    display: none;
    opacity: 0;
}

.description h3 {
    font-size: var(--font-size-2);
}

.description_content {
    display: grid;
    grid-template-columns: 30px 1fr;
    place-items: center;
    grid-column-gap:20px;
    z-index: 3;
    position: relative;
}

.description ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0; 
    z-index: 4;
    position: relative;
    width: 100%;
    min-width: 40vw;
    min-height: 50px;
}

.description li {
    padding: 0;
    margin: 15px 0;
    position: absolute;
    top: 0;
    opacity: 0;
}

#description_title {
    justify-self: start;
}

.close {
    cursor: pointer;
    pointer-events: all !important;
}

/*-------------------------------------------*\
    Tooltip
\*-------------------------------------------*/

.tooltip {
  position: relative;
  text-decoration: none;
}
.tooltip:after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 200%;
    transform: translate(-50%);
  background: none;
  padding: 0 0 10px 0;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transition : all 0.4s ease;
  font-size: var(--font-size-6);
}

.tooltip:hover:after {
  opacity: 1;
}

/*-------------------------------------------*\
    Video Container
\*-------------------------------------------*/

.video_wrapper {
    position: absolute;
    top: 7vh;
    left: 10vw;
    background-color: rgba(46, 46, 46, 0.5);
    padding:10px;
}

#video_holder {
    position: relative;
    z-index: 2;
    display: block;
    width: 37vw;  
    max-width: 981px;
    padding-top: 110%;
    max-height: 80vh;
    height: 0px;
    /* margin: 10px; */
}

#video_container {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

#muteVideoBtn {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 999;
    cursor: pointer;
    width: 40px;
    opacity: 0.8;
}

#muteVideoBtn img {
    width: 100%;
}

#muteVideoBtn #mute, #muteVideoBtn.active #unmute {
    display: none;
}

#muteVideoBtn.active #mute, #muteVideoBtn #unmute {
    display: block;
}

/*-------------------------------------------*\
    Logo Oppo Vodafone
\*-------------------------------------------*/

.logo_oppo_vodafone {
    position: absolute;
    top: 15px;
    right: 30px;
    z-index: 0;
    width: 10vw;
    z-index: 99;
}

/*-------------------------------------------*\
    CTA Vodafone
\*-------------------------------------------*/

.cta_vodafone {
    position: absolute;
    bottom: 15px;
    right: 30px;
    width: 16vw;
    opacity: 0;
    z-index: 7;
}

.cta_vodafone .mobile {
    display: none;
}

/*-------------------------------------------*\
    Google Certified Logo
\*-------------------------------------------*/

.google_certified {
    position: absolute;
    bottom: 15px;
    left: 30px;
    width: 16vw;
    opacity: 0;
    z-index: 99;
    max-width: 150px;
}

.google_certified .mobile {
    display: none;
}

/*-------------------------------------------*\
    Hotspots
\*-------------------------------------------*/

.v3d-annotation {
    position: absolute;
    top: -6px;
    left: -8px;
    width: 15px;
    height: 15px;
    padding: 0;
    border: none;
    line-height: 0;
    text-align: center;
    user-select: none;
    background: #ED1E22;
    transition: opacity 0.5s;
    cursor: pointer;
    display: none;
    border-radius: 50%;
    pointer-events: unset;
}

.v3d-annotation:before, .v3d-annotation:after {
  content: '';
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #ED1E22;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transform: scale(0.5);
  transform-origin: center center;
  animation: pulse-me 8s linear infinite;
}
.v3d-annotation:after {
  animation-delay: 9s;
}

@keyframes pulse-me {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: 0.4;
  }
  20% {
    opacity: 0.2;
  }
  30% {
    transform: scale(5);
    opacity: 0;
  }
    100% {
    transform: scale(5);
    opacity: 0;
  }
}

.v3d-annotation-dialog {
    visibility: visible !important;
    top: unset;
    bottom: -2px;
    left: 15px;
    margin: 0;
    padding: 0;
    background: none;
    display: grid;
    grid-template-columns: 130px 1fr;
    grid-column-gap: 0;
    align-items: end;
    cursor: pointer;
    font-size: var(--font-size-5);
    font-family: 'OPPOSans-Bold', sans-serif;
    grid-auto-flow: dense;
    min-width: 10vw;
}

#hs_camera_01_dialog, #hs_camera_02_dialog, #hs_design_02_dialog {
    left: unset;
    right: 15px;
    grid-template-columns: 1fr 130px; 
}

#hs_camera_01_dialog .text, #hs_camera_02_dialog .text, #hs_design_02_dialog .text {
    justify-self: right;    
}

#hs_camera_01_dialog div:first-child, #hs_camera_02_dialog div:first-child, #hs_design_02_dialog div:first-child {
    grid-column:2;
}

.v3d-annotation-dialog .line {
    width: 90%;
    border-bottom: 2px solid #fff;
    margin: 0 0 7px 0;
    padding: 0;
    justify-self: center;
}

.v3d-annotation-dialog .text {
    justify-self: left;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
}

.show {
    opacity: 1;
}

.v3d-annotation-transparent {
    opacity: 0;
    pointer-events: none;
}

/*-------------------------------------------*\
    Preloader
\*-------------------------------------------*/

#preloader_bar {
    width: 0;
    height: 2px;
    background-color: #ED1E22;
    position: absolute;
    bottom: 0;
    left: 0;
}

/*-------------------------------------------*\
    Responsive
\*-------------------------------------------*/

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

    .cta_vodafone {
        width: 18vw;
        bottom: 4%;
        right: 5%;
    }

}

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

    .cta_vodafone {
        width: 24vw;
        bottom: 3%;
        right: 4%;
    }

    .google_certified {
        width: 10vw;
    }

    .logo_oppo_vodafone {
        width: 15vw;
    }

    #header {
        margin: 5px 0;
    }

    .v3d-annotation-dialog {
        grid-template-columns: 60px 1fr;
    }
    #hs_camera_01_dialog, #hs_camera_02_dialog, #hs_design_02_dialog {
        grid-template-columns: 1fr 60px;
    }

    #video_holder {
        width: 42vw;  
    }

}

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



    .cta_vodafone {
        width: 27vw;
        bottom: 3%;
        right: 4%;
    }

    #video_holder {
        width: 48vw;  
    }

}

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

    #muteVideoBtn {
        display: none;
    }

    .holder_bg::before {
        animation: none;
    }

    .description ul {
        width: 65vw;
    }

    h2 {
        text-align: center;
        width: 90%;
        line-height: var(--font-size-3-lineheight);
        margin: 0 auto;
    }

    .holder_bg::before {
        background-size: 200%;
    }

    #disclaimer {
        font-size: var(--font-size-disclaimer);
        bottom: 0;
        width: 100%;
        grid-template-columns: repeat(1, 1fr);
        place-items: start;
    }

    #disclaimer > div {
        padding:10px 15px;
    }
    
    .disclaimer_text {
        margin: 0;
        padding:15px 25px !important;
        display: none;
    }

    #hotspot_bullets {
        bottom: 15%;
        display: none !important;
        opacity: 0 !important;
    }
   
    #hotspot_bullets ul {
        width: 60vw;
    }

    .cta_vodafone {
        bottom: 0;
        left: 0;
        width: 85%;
    }

    .cta_vodafone .desktop {
        display: none;
    }

    .cta_vodafone .mobile {
        display: block;
        width: auto;
        height: 16vh;
        margin: 0 auto;
    }

    .google_certified {
        left: unset;
        bottom: 3.5vw;
        right: 3.5vw;
        width: 15vw;
    }

    .google_certified .desktop {
        display: none;
    }

    .google_certified .mobile {
        display: block;
    }

    .logo_oppo_vodafone {
        width: 20vw;
    }

    #header {
        width: auto;
        text-align: center;
        top: 0;
        left: 15px;
    }

    .visible {
        opacity: 1;
    }

    .description {
        position: absolute;
        top: unset;
        bottom: 0;
        left: 0;
        height: 92%;
        pointer-events: none;
        /* font-size: 5vw; */
    }

    .description_content {
        /* grid-template-columns: 30px 1fr; */
        grid-column-gap: 10px;
        margin: 0 10px;
    }

    .description li {
        width: 70%;
    }

    .video_wrapper {
        position: absolute;
        top: unset;
        bottom: 0;
        left: 0;
        padding: 0;
    }

    #video_holder {
        width: 100vw;  
        max-width: auto;
        transform: scaleX(-1);
        margin: 0;
    }

    .v3d-annotation-dialog {
        top: unset;
        bottom: 19px;
        left: 4px;
        display: grid;
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr 25px !important;
        grid-column-gap: 0;
        grid-row-gap: 5px;
    }

    #hs_camera_01_dialog, #hs_camera_02_dialog {
        left: 4px;
        right: unset;
    }

    #hs_design_02_dialog {
        left: unset;
        right: 7px;   
    }

    #hs_battery_dialog {
        top: 19px;
        bottom: unset;
    }
    
    #hs_design_02_dialog .line {
        justify-self: right;    
    }

    #hs_camera_01_dialog {
        grid-template-rows: 1fr 8px !important;
    }


    #hs_camera_01_dialog .line {
        height: 10px;
    }

    #hs_camera_01_dialog div:first-child, #hs_camera_02_dialog div:first-child, #hs_design_02_dialog div:first-child {
        grid-column: 1;
    }
    
    .v3d-annotation-dialog div:first-child {
        grid-row:2;
    }

    #hs_battery_dialog div:first-child {
        grid-row:1;
    }
    
    .v3d-annotation-dialog .line {
        width: 2px;
        height: 25px;
        border-bottom: none;
        border-right: 2px solid #fff;
        margin: 0;
        padding: 0;
        justify-self: left;
    }
    
    .v3d-annotation-dialog .text {
        justify-self: left;
    }
}