* {
  outline-width: 0;
}
@font-face {
  font-family: "OPPO Sans";
  src: url("https://www.oppo.com/content/dam/oppo/en/static/uncover_the_ultimate/fonts/OPPOSans-Regular.woff2")
    format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "OPPO Sans Ultra";
  src: url("https://www.oppo.com/content/dam/oppo/en/static/uncover_the_ultimate/fonts/OPPOSans-Ultra.woff2")
    format("woff2");
  font-weight: 900;
  font-style: normal;
}
#pagecontent {
  padding: 60px 0 0 0;
  font-family: "OPPO Sans";
  font-size: 15px;
  line-height: 24px;
  color: #fff !important;
  background-color: #000;
}
.wrapper {
  max-width: 1340px;
  padding: 0 25px;
  margin: 0 auto;
}
.imgwrapper {
  line-height: 0;
}
.clearfix {
  float: none;
  clear: both;
}
h1,
h2 {
  margin: 0 0 60px 0;
  font-family: "OPPO Sans";
  font-size: 72px;
  line-height: 72px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -4px;
}
h3 {
  margin: 60px 0 30px 0;
  font-family: "OPPO Sans";
  font-size: 54px;
  line-height: 54px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -4px;
}
h1 strong,
h2 strong,
h3 strong {
  font-family: "Oppo Sans Ultra";
  letter-spacing: -3px;
}
h4 {
  width: 100%;
  text-align: center;
  margin: 0 0 60px 0;
  font-family: "OPPO Sans";
  font-size: 50px;
  line-height: 54px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -3px;
}
.textlink {
  color: #48a4df;
  text-decoration: none;
}
b,
strong {
  font-family: "OPPO Sans Ultra";
}
p {
  margin: 0 0 20px 0;
}
.left {
  width: 48.5%;
  float: left;
}
.right {
  width: 48.5%;
  float: right;
}
.onethird {
  width: 30%;
  float: left;
}
.twothird {
  width: 66%;
  float: right;
}
.left img,
.right img {
  max-width: 100%;
  height: auto;
}
.left .full,
.right .full {
  width: 100%;
  height: auto;
}
.spacer {
  margin: 0 0 60px 0;
}

/* ------------------------------ HERO ------------------------------ */
#hero {
  width: 100%;
  text-align: center;
  background-color: #fff;
  background: linear-gradient(#fff 0%, #fff 70%, #fff8fb 100%);
}
#hero img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------ MOVIE ------------------------------ */
#movie {
  margin: 70px auto 120px auto;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0;
  height: 0;
  overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ------------------------------ ABOUT PARRIS ------------------------------ */
.whiteimg {
  width: 100%;
  text-align: center;
  line-height: 0;
}
.insta {
  margin: 20px 0 0 0;
  font-size: 27px;
  text-transform: uppercase;
  float: right;
  text-decoration: none;
  color: #fff;
}
.insta img {
  padding: 0 15px 0 0;
  float: left;
}
.instatext {
  margin: 1px 0 0 0;
  float: left;
}

/* ------------------------------ WHITEBLOCK ------------------------------ */
.whiteblock {
  margin: 60px 0;
  padding: 40px 0;
  background-color: #fff;
  color: #000;
}
.whiteblock h1,
.whiteblock h2,
.whiteblock h3 {
  color: #000;
}

/* ------------------------------ CAMERA ------------------------------ */
#camera {
  margin: 60px 0 120px 0;
}
.quote {
  margin: 12% 0 7% 0;
  font-size: 27px;
  line-height: 35px;
  text-transform: uppercase;
  letter-spacing: -1.4px;
}
.logos img {
  margin: 0 20px 0 0;
}

/* ------------------------------ DISPLAY ------------------------------ */
#display {
  margin: 60px 0 120px 0;
}

/* ------------------------------ BATTERY ------------------------------ */
#battery {
  margin: 60px 0 60px 0;
}
.third1 {
  width: 48%;
  margin: 0 2% 0 0;
  float: left;
}
.third2 {
  width: 32%;
  margin: 0 1% 0 0;
  float: left;
}
.third3 {
  width: 17%;
  float: left;
}
.third1 img,
.third3 img {
  width: 100%;
  height: auto;
}
.third2 .quote {
  margin: 12% 0 7% 0;
  font-size: 25px;
  line-height: 33px;
}

/* ------------------------------ TEASER ------------------------------ */
#teaser {
  padding: 60px 0 120px 0;
}
.tvideo {
  width: 24.25%;
  margin: 0 0 0 1%;
  float: left;
  text-decoration: none;
}
.tvideo:first-child {
  margin: 0;
}
.ttitle {
  margin: 20px 0 0 0;
  font-size: 27px;
  line-height: 26px;
  letter-spacing: -2px;
  color: #fff;
  text-decoration: none;
}

/* ------------------------------ MOBILE ------------------------------ */

@media (max-width: 1385px) {
  h1,
  h2 {
    font-size: 5.2vw;
    line-height: 5.2vw;
    margin: 0 0 40px 0;
  }
  h3 {
    font-size: 4.2vw;
    line-height: 4.2vw;
    margin: 60px 0 30px 0;
  }
  .quote {
    margin: 7% 0 3% 0;
    font-size: 2vw;
    line-height: 2.05vw;
  }
}
@media (max-width: 960px) {
  h1,
  h2 {
    font-size: 47px;
    line-height: 47px;
    margin: 60px 0 30px 0;
  }
  .left,
  .right,
  .onethird,
  .twothird {
    width: 100%;
    float: none;
    clear: both;
  }
  .left {
    margin: 0 0 40px 0;
  }
  .fullimage {
    width: 100%;
    height: auto;
  }
  .third1 {
    width: 100%;
    float: none;
  }
  .third2 {
    margin: 2% 4% 0 0;
    width: 70%;
  }
  .third3 {
    margin: 2% 0 0 0;
    width: 26%;
  }
  .quote,
  .third2 .quote {
    margin: 2% 0 3% 0;
    font-size: 24px;
    line-height: 25px;
  }
  .third3 img {
    max-height: 350px;
    width: auto;
  }
}

@media (max-width: 640px) {
  h1,
  h2 {
    font-size: 36px;
    line-height: 36px;
    margin: 0 0 15px 0;
  }
  h3 {
    font-size: 33px;
    line-height: 33px;
    margin: 40px 0 15px 0;
  }
  .pagecontent {
    padding: 40px 0 0 0;
  }
  #movie {
    margin: 0 auto 40px auto;
  }
  #intro {
    margin-bottom: 80px;
  }
  .spacer {
    margin: 0 0 25px;
  }
  .quote,
  .third2 .quote {
    margin: 2% 0 3% 0;
    font-size: 20px;
    line-height: 22px;
  }
  #camera,
  #display,
  #battery {
    margin: 40px 0 40px 0;
  }
  .third1,
  .third2,
  .third3 {
    width: 100%;
    float: none;
    margin: 0;
  }
  .third3 {
    margin: 10px 0 0 0;
    text-align: center;
  }
  .third3 img {
    max-height: 280px;
    width: auto;
  }
  #teaser {
    padding: 30px 0 80px 0;
  }
  h4 {
    margin: 0 0 10px 0;
    font-size: 30px;
    line-height: 33px;
  }
  .ttitle {
    margin: 10px 0 0 0;
    font-size: 15px;
    line-height: 16px;
    letter-spacing: 0px;
  }
  .tvideo {
    width: 48%;
    margin: 30px 3% 0 0;
  }
  .tvideo:first-child {
    width: 48%;
    margin: 30px 3% 0 0;
  }
  .tvideo:nth-child(even) {
    width: 48%;
    margin: 30px 0 0 0;
  }
}
@media screen and (max-width: 960px) and (orientation: landscape) {
  .pagecontent {
    font-size: 9px;
    line-height: 18px;
  }
}