html,body,section{
  padding:0px;
  margin:0px;
  height:110%;
  width:100%;
}
@import url('https://fonts.googleapis.com/css?family=Raleway');
p,h1,h2,h3,h4{
  margin:0px;
}
*{
  font-family: 'Raleway', sans-serif;
}

.container{
  width:80%;
  height:100%;
      background-color: rgba(111, 111, 111, 0.17);
  position:relative;
}

.section-1{
  
  background:lightblue;
  
}

.section-2{
  
  background:pink;
  
}

.section-3{
  
  background:lightgreen;
  
}

.section-4{
  
  background:navyblue;
  
}



@import "compass/css3";

$box-w: 200px;
$box-h: 400px;
$box-d: 15px;
$box-r: 20px;
$piece-num: 16;

// create a 3d box
@mixin box($width, $height, $depth) {
  width: $width;
  height: $height;
  position: relative;
  @include transform-style(preserve-3d);

  [class$="face"] {
    position: absolute;
  }
  

  .logo-face{
background-image: url(http://rapio.nl/phones/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100px;
    height: 200px;
    /* margin: 0 auto; */
    /* text-align: center; */
    /* vertical-align: middle; */
    left: 32%;
    right: 20%;
    top: 24%;
    bottom: 50%;
    background-color: transparent;
  }
  
  .screen-face{
    height: 84%;
    width: 96%;
    top: 8%;
    left: 2%;
    background-color: rgba(31, 31, 31, 0.66);
  }
  
  .top-header-face{
    left: 24%;
    top: 2.2%;
  }
  
  .frontt-camera-face, .front-camera2-face{
    width:12px;
    height:12px;
    background:white;
    
    border-radius:50%;
  }
  .front-camera-face{
    left:12px;
    
    .dot-face{
    width: 5px;
    height: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #4141ab;
    }
  }
  .front-camera2-face{
width: 10px;
    height: 10px;
    left: 20px;
    top: 0px;
    
    .dot-face{
    width: 5px;
    height: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: red;
    }
  }
  
  .speaker-front-face{
    width:38px;
    height:6px;
    background-color:rgba(103, 103, 103, 0.68);
    border-radius:20px;
    left:30px;
    top: 2px;
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);
  }

  .front-face,
  .back-face {
    width: $width;
    height: $height;
    
  }

  .front-face {
    background-image: url(http://sterntelecom.com/img/phones/front.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    background-color:#191717;
    @include transform( translateZ($depth / 2) );
  }

  .back-face {
    background-image: url(http://sterntelecom.com/img/phones/back.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    background-color:#191717;
    @include transform( rotateY(180deg) translateZ($depth / 2) );
  }
  
  .top-face{
    background-image: url(http://sterntelecom.com/img/phones/back.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
  }
  .bottom-face{
    
  }
  
  .left-face{
    background-image: url(http://sterntelecom.com/img/phones/rear-side-left.png);
    background-repeat: no-repeat;
    background-size: 132%;
    background-position: center;
    
  }
  .right-face{
    background-image: url(http://sterntelecom.com/img/phones/rear-side-right.png);
    background-repeat: no-repeat;
    background-size: 132%;
    background-position: center;
  }
  
  
  

  .top-face,
  .bottom-face {
    width: $width;
    height: $depth;
  }

  .top-face {
    top: 0;
    @include transform( rotateX(90deg) translateZ($depth / 2) );
  }

  .bottom-face {
    bottom: 0;
    @include transform( rotateX(-90deg) translateZ($depth / 2) );
  }
  
  .left-face,
  .right-face,.bottom-face,.top-face {
    background-color:#1d1d1d;
  }

  .left-face,.left-rear-1-face,.left-rear-2-face,
  .right-face {
    width: $depth;
  }

  .left-face {
    left: 0;
    @include transform( rotateY(-90deg) translateZ($depth / 2) );
  }

  .right-face {
    right: 0;
    @include transform( rotateY(90deg) translateZ($depth / 2) );
  }
}

// make some space for corners
@mixin clip-corner($width, $height, $radius) {
  .front-face,
  .back-face {
    border-radius: $radius;
  }

  .top-face,
  .bottom-face {
    width: $width - 2 * $radius;
    margin-left: $radius;
  }

  .left-face,
  .right-face {
    height: $height - 2 * $radius;
   
  }
}

// create a circle
@mixin roll($angle, $radius, $piece-num, $height) {
  @include transform-style(preserve-3d);

  $a: $angle / $piece-num;
  $k: $radius * cos($a / 2);
  $width: round(2 * $radius * sin($a / 2));

  @for $i from 1 through $piece-num {
    $b: $a * ($i - 1) + $a / 2;
    $x: round($k * cos($b));
    $y: round($k * sin($b));
    $rotate: 90deg - $b;

    .piece-#{$i} {
      width: $width;
      height: $height;
      position: absolute;
      -webkit-transform: translateX($x) translateZ($y) rotateY($rotate);
    }
  }
}

// seperate circle, and put them in the right position
@mixin round-corner($radius, $piece-num, $depth) {

  $a: 360deg / $piece-num;
  $k: $radius * cos($a / 2);
  $w: round(2 * $radius * sin($a / 2));

  .tr-corner, .tl-corner, .bl-corner, .br-corner {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(90deg) translateY(-$depth / 2);
  }

  .tr-corner {
    top: $radius;
    right: $radius + $w / 2;
  }

  .tl-corner {
    top: $radius;
    left: $radius - $w / 2;
  }

  .bl-corner {
    bottom: $radius;
    left: $radius - $w / 2;
  }

  .br-corner {
    bottom: $radius;
    right: $radius + $w / 2;
  }
}
  
@mixin phone-generator($width, $height, $depth, $radius, $piece-num) {
  @include box($width, $height, $depth);
  @include clip-corner($width, $height, $radius);
  @include roll(360deg, $radius, $piece-num, $depth);
  @include round-corner($radius, $piece-num, $depth);
}

.camera {
  perspective: 1500px;
  position:absolute;
  z-index:90;
  right: 240px;
  width:200px;
  height:400px;
}

.object {
  -webkit-backface-visibility: hidden;
  margin: 100px auto;  
  @include phone-generator($box-w, $box-h, $box-d, $box-r, $piece-num);
  animation: 26s rotate ease infinite;
} 

  .object{
    transform: rotateX(-358deg) rotateZ(10deg) rotateY(668deg);
  }

[class^="piece"],
[class$="face"] { border: 0px solid;
background-color:#1d1d1d;}
body{
  background:lightblue;
}

[class$="rear"] { width:6px !important;}
body{
  background:lightblue;
}

.front-camera-face{
    left: 140px !important;
    top: 22px !important;
}

.left-rear-1-face{
    height: 360px;
    margin-top: 20px;
    background-color: white;
    border: 1px solid blue;
    width: 2px !important;
    
}

.front-face,back-face,.object{
  width:100% !important;
  height:100% !important;
}



 @keyframes rotat {
   0% { -webkit-transform:  rotateX(0) rotateY(0) rotateZ(0); }
   10% { -webkit-transform:  rotateX(0) rotateY(0) rotateZ(0); }

   15% { -webkit-transform:  rotateX(320deg) rotateY(0deg) rotateZ(10deg); }
   20% { -webkit-transform:  rotateX(360deg) rotateY(360deg) rotateZ(0deg); }
   25% { -webkit-transform:  rotateX(320deg) rotateY(320deg) rotateZ(-10deg); }
   30% { -webkit-transform:  rotateX(360deg) rotateY(0deg) rotateZ(0deg); }

   40% { -webkit-transform:  rotateX(390deg) rotateY(370deg) rotateZ(-92deg); }
   45% { -webkit-transform:  rotateX(390deg) rotateY(370deg) rotateZ(-92deg); }

   55% { -webkit-transform:  rotateX(390deg) rotateY(350deg) rotateZ(-92deg); }
   60% { -webkit-transform:  rotateX(390deg) rotateY(350deg) rotateZ(-92deg); }

   70% { -webkit-transform: rotateX(-20deg) rotateY(-26deg); }
   75% { -webkit-transform: rotateX(-20deg) rotateY(-26deg); }

   85% { -webkit-transform: rotateX(20deg) rotateY(26deg); }
   95% { -webkit-transform: rotateX(20deg) rotateY(26deg); }
 }

$anime-time: 8s;

$box-size: 100px;
$clip-distance: .05;
$clip-size: $box-size * (1 + $clip-distance * 2);
$path-width: 2px;

$main-color: #69ca62;

$codepen-logo-path: url('//blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png');

%full-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.bb {
  border-radius: 50%;
  @extend %full-fill;
  width: $box-size;
  height: $box-size;
  margin: auto;
  color: $main-color;
  
  &::before,
  &::after {
    border-radius: 50%;
    @extend %full-fill;
    content: '';
    z-index: -1;
    margin: -1 * $clip-distance * 100%;
    box-shadow: inset 0 0 0 $path-width; 
    animation: clipMe $anime-time linear infinite;
  }

  &::before {
    animation-delay: $anime-time * -.5;
  }

  // for debug
  &:hover {
    &::after,
    &::before {
      
    }
  }

}

@keyframes clipMe {
  0%, 100% {clip: rect(0px, $clip-size, $path-width, 0px); }
  25% {clip: rect(0px, $path-width, $clip-size, 0px); }
  50% {clip: rect($clip-size - $path-width, $clip-size, $clip-size, 0px); }
  75% {clip: rect(0px, $clip-size, $clip-size, $clip-size - $path-width); }
}

/////

html,
body {
  height: 100%;
}

body {
  position: relative;
  background-color: #0f222b;
}

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

.bb{
  opacity:0;
}

.text-block{
    position: relative;
    width: 500px;
    padding: 40px;
    top: 130px;
    left: 70px;
    color:white;
  h1,h2,p{
    margin-bottom:20px;
  }
  h2{
    font-size:20px;
  }
  p{
    font-size:14px;
  }
}

.n2{
    width: 70px;
    height: 70px;
  
    &::before,
  &::after {
    border-radius: 50%;
    @extend %full-fill;
    content: '';
    z-index: -1;
    margin: -1 * $clip-distance * 100%;
    box-shadow: inset 0 0 0 $path-width; 
    animation: clipMe2 5s linear infinite;
  }

  &::before {
    animation-delay: 5s * -.5;
  }
}

@keyframes clipMe2 {
  0%, 100% {clip: rect(0px, $clip-size, 2px, 0px); }
  25% {clip: rect(0px, 2px, $clip-size, 0px); }
  50% {clip: rect($clip-size - 2px, $clip-size, $clip-size, 0px); }
  75% {clip: rect(0px, $clip-size, $clip-size, $clip-size - 2px); }
}

.left-half,.right-half{
    height: 100%;
    width: 50%;
  
}
.left-half{
  float:left;
}
.right-half{
  float: right;
}

#left-half-home{
  
}

#right-half-home{
  background: #00040d;
  background-image:url("https://content.oneplus.net/skin/frontend/oneplus2015/default/images/oneplus3/overview-hero-light-up.png");
}

.arrow{
  position:relative;
  top:25%;
  left:-50px;
  width: 0;
height: 0;
border-style: solid;
border-width: 50px 50px 50px 0;
border-color: transparent #00040d transparent transparent;
line-height: 0px;
_border-color: #00040d;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

.section-2{
  z-index:10; 
}

.third{
  width:33%;
  height:100%;
  display: inline-block;
}

.perk-list{
      margin: 0;
    position: absolute;
    top: 50%;

    transform: translate(-50%, -50%);
}

.left-perk-list{
      left: 10%;
      margin-right: -50%;
}

.right-perk-list{
     right: 10%; 
}