body {
    font-family:'Open Sans',sans-serif;
}
#full_face {
  perspective:500px;
  .container {
    transform-origin: 40% 40%;
  	transform: rotateY(0deg);
    backface-visibility: hidden;
    animation: turn 6s ease;
  }
}
@keyframes turn {
  0% {transform: rotateY(0deg);}
  50% {transform: rotateY(-40deg);}
  100% {transform: rotateY(0deg);}
}
#face {
  height:250px;
  width:362px;
  background-color:#dd0000;
  border:22px solid black;
  border-radius:7px;
  /*box-shadow:0 0 0 2px #dddddd;*/
  #logo {
    position:absolute;
    left:387px;
    top:137px;
    position:absolute;
    height:11px;
    width:0px;
    border-right:15px solid white;
    border-top:2px solid transparent;
    border-bottom:2px solid transparent;
    &::before {
      content:'';
      position:absolute;
      width:1px;
      height:14px;
      left:7px;
      top:-1px;
      background-color:black;
    }
    &::after {
      content:'';
      position:absolute;
      width:17px;
      height:1px;
      left:0px;
      top:5px;
      background-color:black;
    }
  }
}
#screen {
  position:absolute;
  top:22px;
  left:22px;
  height:250px;
  width:362px;
  #taskbar {
    position:absolute;
    bottom:0px;
    background-color:rgba(0,0,0,0.5);
    height:20px;
    width:100%;
  }
  #charms {
    position:absolute;
    background-color:rgba(30,30,30,0.9);
    width:50px;
    height:100%;
    right:0;
    color:white;
    font-size:8px;
    #search {
      position:absolute;
      top:30px;
      left:11px;
      &::before {
        content:'';
        position:absolute;
        top:-10px;
        left:10px;
        height:10px;
        width:2px;
        background-color:white;
        transform:rotate(45deg);
      }
      &::after {
        content:'';
        position:absolute;
        top:-16px;
        left:12px;
        height:6px;
        width:6px;
        border-radius:100%;
        border:2px solid white;
      }
    }
    #share {
      position:absolute;
      top:75px;
      left:15px;
      &::before {
        content:'';
        position:absolute;
        top:-21px;
        left:2px;
        height:14px;
        width:14px;
        border:2px solid white;
        border-radius:100%;
      }
      #share_circles {
        position:absolute;
        width:6px;
        height:6px;
        background-color:white;
        border-radius:100%;
        margin-top:-28px;
        border-top:2px solid rgb(49,27,27);
        border-right:2px solid rgb(49,27,27);
        &::before {
          content:'';
          position:absolute;
          width:6px;
          height:6px;
          background-color:white;
          border-radius:100%;
          margin-left:13px;
          margin-top:-6px;
          border-bottom:2px solid rgb(49,27,27);
        	border-right:2px solid rgb(49,27,27);
        }
        &::after {
          content:'';
          position:absolute;
          width:6px;
          height:6px;
          background-color:white;
          border-radius:100%;
          margin-left:9px;
          margin-top:8px;
          border-bottom:2px solid rgb(49,27,27);
        	border-left:2px solid rgb(49,27,27);
        }
      }
    }
    #start {
      position:absolute;
      top:125px;
      left:17px;
      #window {
        position:absolute;
        top:-20px;
        left:-1px;
        height:14px;
        width:0px;
        border-right:20px solid white;
        border-top:2px solid transparent;
        border-bottom:2px solid transparent;
        &::before {
          content:'';
          position:absolute;
          width:1px;
          height:17px;
          left:9px;
          top:-1px;
          background-color:rgb(32,37,42);
        }
        &::after {
          content:'';
          position:absolute;
          width:20px;
          height:1px;
          left:0px;
          top:7px;
          background-color:rgb(32,37,42);
        }
      }
    }
    #devices {
      position:absolute;
      top:175px;
      left:11px;
      &::before {
        content:'';
        position:absolute;
        top:-18px;
        left:5px;
        border-radius:5px;
        border:2px solid white;
        height:12px;
        width:15px;
      }
      &::after {
        content:'';
        position:absolute;
        top:-16px;
        left:0px;
        height:8px;
        width:11px;
        background-color:white;
        border:2px solid rgb(49,28,28);
      }
    }
    #settings {
      position:absolute;
      top:223px;
      left:11px;
      &::before {
        content:'';
        position:absolute;
        height:18px;
        width:3px;
        background-color:white;
        top:-20px;
        left:14px;
        transform:rotate(22deg);
      }
      &::after {
        content:'';
        	position:absolute;
          height:9px;
          width:9px;
          background-color:rgb(49,28,28);
          border: 2px solid white;
          border-radius:100%;
          top:-18px;
          left:9px;
      }
      #extra_spokes {
        position:absolute;
        height:18px;
        width:3px;
        background-color:white;
        top:-20px;
        left:14px;
        transform:rotate(-23deg);
        &::before {
          content:'';
          position:absolute;
          height:18px;
          width:3px;
          background-color:white;
          top:0px;
          left:0px;
          transform:rotate(90deg);
        }
        &::after {
          content:'';
          position:absolute;
          height:18px;
          width:3px;
          background-color:white;
          top:0px;
          left:0px;
          transform:rotate(-45deg);
        }
      }
    }
  }
}
#side {
  position:absolute;
  z-index:-1;
  top:6px;
  margin-left:389px;
  height:278px;
  width:0;
  /*border-radius:10px;*/
  border-left:20px solid #999999;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  transform: rotateY(70deg);
  animation: turn2 3s ease;
  #ports {
    /* Mini Display Port */
    margin-top:40px;
    margin-left:-17px;
    height:16px;
    width:9px;
    background-color:rgba(0,0,0,0.4);
    /* USB 3.0 PORT */
    &::before {
      content:'';
      position:absolute;
      top:75px;
      height:21px;
      width:9px;
      background-color:rgba(0,0,0,0.4);
    }
    /* Charging Port */
    &::after {
      content:'';
      position:absolute;
      top:165px;
      margin-left:2px;
      height:30px;
      width:5px;
      background-color:rgba(0,0,0,0.4);
    }
  }
  #side_details {
    
    &::before {
      
    }
    &::after {
      
    }
    #friction_hinge {
      
    }
  }
}
@keyframes turn2 {
  0% {transform: rotateY(110deg);}
  100% {transform: rotateY(70deg);}
}