/* /!\ You need to add vendor prefixes in order to render the CSS properly (or simply use http://leaverou.github.io/prefixfree/) /!\ */ #tridiv {
    perspective: 1000px;
    
    width: 100%;
    height: 100%;
    background: transparent;
    font-size: 400%;
  }
  .face {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  }
  .scene, .shape, .face, .face-wrapper, .cr {
    position: absolute;
    transform-style: preserve-3d;
  }
  .scene {
    width: 80em;
    height: 80em;
    top: 50%;
    left: 50%;
    margin: -40em 0 0 -40em;
    -webkit-transform:rotateX(2deg) rotateY(-60deg); 
    -moz-transform:rotateX(2deg) rotateY(-60deg); 
    -ms-transform:rotateX(2deg) rotateY(-60deg); 
    transform:rotateX(2deg) rotateY(-60deg); 
    zoom: 0;
  }
  .shape {
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform-origin: 50%;
  }
  .face, .face-wrapper {
    overflow: hidden;
    transform-origin: 0 0;
    backface-visibility: hidden;
    /* hidden by default, prevent blinking and other weird rendering glitchs */
  }
  .face {
    background-size: 100% 100%!important;
    background-position: center;
  }
  .face-wrapper .face {
    left: 100%;
    width: 100%;
    height: 100%
  }
  .photon-shader {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
  }
  .side {
    left: 50%;
  }
  .cr, .cr .side {
    height: 100%;
  }
  [class*="cuboid"] .ft, [class*="cuboid"] .bk {
    width: 100%;
    height: 100%;
  }
  [class*="cuboid"] .bk {
    left: 100%;
  }
  [class*="cuboid"] .rt {
    transform: rotateY(-90deg) translateX(-50%);
  }
  [class*="cuboid"] .lt {
    transform: rotateY(90deg) translateX(-50%);
  }
  [class*="cuboid"] .tp {
    transform: rotateX(90deg) translateY(-50%);
  }
  [class*="cuboid"] .bm {
    transform: rotateX(-90deg) translateY(-50%);
  }
  [class*="cuboid"] .lt {
    left: 100%;
  }
  [class*="cuboid"] .bm {
    top: 100%;
  }
  /* .cub-1 styles */
  .cub-1 {
    transform:translate3D(0em, 0em, 0em) rotateX(90deg) rotateY(0deg) rotateZ(90deg);
    opacity:1;
    width:4.25em;
    height:.5em;
    margin:-0.25em 0 0 -2.125em;
  }
  .cub-1 .ft {
    transform:translateZ(4.625em);
  }
  .cub-1 .bk {
    transform:translateZ(-4.625em) rotateY(180deg);
  }
  .cub-1 .rt, .cub-1 .lt {
    width:9.25em;
    height:.5em;
  }
  .cub-1 .tp, .cub-1 .bm {
    width:4.25em;
    height:9.25em;
  }
  .cub-1 .face {
    background:url(../media/img/phone/sides.jpg);
  }
  .cub-1 .ft {
    background:url(../media/img/phone/sides.jpg);
  }
  .cub-1 .bk {
    background:url(../media/img/phone/bottom.jpg);
  }
  .cub-1 .tp {
    background: url(../media/img/phone/front_f.jpg);
  }

  .glare {
    --bg-pos: -70% 50%;
    content: "";
    z-index: 2;
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    opacity: .35;
    /* background-image:  url(../media/img/phone/flare_sec.jpg); */
    background: linear-gradient(275deg, rgba(0,0,0,0) 0%, rgba(0,11,13,0) 19%, rgba(255,255,255,0) 38%, rgba(255,255,255,1) 69%, rgba(255,255,255,0) 100%);
    background-position: var(--bg-pos);
    background-size: 150%; 
    filter: brightness(1) contrast(10);
    mix-blend-mode: screen;
}

  .cub-1 .bm {
    background:url(../media/img/phone/sides.jpg);
  }
  .cub-1 .lt {
    background:url(../media/img/phone/sides.jpg);
  }
  .cub-1 .rt {
    background:url(../media/img/phone/sides.jpg);
  }
  .cub-1 .ft {
    width:3.1100000000000003em;
    margin-left:.57em;
  }
  .cub-1 .bk {
    width:3.1100000000000003em;
    margin-left:-0.57em;
  }
  .cub-1 .rt, .cub-1 .lt {
    width:8.11em;
  }
  .cub-1 .tp, .cub-1 .bm, .cub-1 .tp .photon-shader, .cub-1 .bm .photon-shader {
    border-radius:.57em;
  }
  .cub-1 .cr {
    width:.57em;
    left:0.285em;
  }
  .cub-1 .cr-0 {
    transform: translate3D(3.1100000000000003em, 0, 4.055em);
  }
  .cub-1 .cr-1 {
    transform: translate3D(3.1100000000000003em, 0, -4.055em);
  }
  .cub-1 .cr-2 {
    transform: translate3D(0, 0, -4.055em);
  }
  .cub-1 .cr-3 {
    transform: translate3D(0, 0, 4.055em);
  }
  .cub-1 .cr-0 .s0 {
    transform: rotateY(15deg) translate3D(-50%, 0, 0.5449999999999999em);
  }
  .cub-1 .cr-0 .s1 {
    transform: rotateY(45deg) translate3D(-50%, 0, 0.5449999999999999em);
  }
  .cub-1 .cr-0 .s2 {
    transform: rotateY(75deg) translate3D(-50%, 0, 0.5449999999999999em);
  }

  .cub-1 .cr-1 .s0 {
    transform: rotateY(105deg) translate3D(-50%, 0, 0.5449999999999999em);
  }
  .cub-1 .cr-1 .s1 {
    transform: rotateY(135deg) translate3D(-50%, 0, 0.5449999999999999em);
  }
  .cub-1 .cr-1 .s2 {
    transform: rotateY(165deg) translate3D(-50%, 0, 0.5449999999999999em);
  }
  .cub-1 .cr-2 .s0 {
    transform: rotateY(195deg) translate3D(-50%, 0, 0.5449999999999999em);
  }
  .cub-1 .cr-2 .s1 {
    transform: rotateY(225deg) translate3D(-50%, 0, 0.5449999999999999em);
  }
  .cub-1 .cr-2 .s2 {
    transform: rotateY(255deg) translate3D(-50%, 0, 0.5449999999999999em);
  }
  .cub-1 .cr-3 .s0 {
    transform: rotateY(285deg) translate3D(-50%, 0, 0.5449999999999999em);
  }
  .cub-1 .cr-3 .s1 {
    transform: rotateY(315deg) translate3D(-50%, 0, 0.5449999999999999em);
  }
  .cub-1 .cr-3 .s2 {
    transform: rotateY(345deg) translate3D(-50%, 0, 0.5449999999999999em);
  }
  .cub-1 .side {
    width:0.33046207937147987em;
  }
  /* .cub-2 styles */
  .cub-2 {
    transform:translate3D(0em, -2.5em, -2.17em) rotateX(0deg) rotateY(90deg) rotateZ(90deg);
    opacity:1;
    width:.8em;
    height:0.10056925996204935em;
    margin:-0.050284629981024676em 0 0 -0.4em;
  }
  .cub-2 .ft {
    transform:translateZ(0.15em);
  }
  .cub-2 .bk {
    transform:translateZ(-0.15em) rotateY(180deg);
  }
  .cub-2 .rt, .cub-2 .lt {
    width:0.3em;
    height:0.10056925996204935em;
  }
  .cub-2 .tp, .cub-2 .bm {
    width:.8em;
    height:0.3em;
  }
  .cub-2 .face {
    background:url(../media/img/phone/buttons.jpg) #FFFFFF;
  }
  .cub-2 .ft {
    width:0.6000000000000001em;
    margin-left:0.1em;
  }
  .cub-2 .bk {
    width:0.6000000000000001em;
    margin-left:-0.1em;
  }
  .cub-2 .rt, .cub-2 .lt {
    width:0.09999999999999998em;
  }
  .cub-2 .tp, .cub-2 .bm, .cub-2 .tp .photon-shader, .cub-2 .bm .photon-shader {
    border-radius:0.1em;
  }
  .cub-2 .cr {
    width:0.1em;
    left:0.05em;
  }
  .cub-2 .cr-0 {
    transform: translate3D(0.6000000000000001em, 0, 0.04999999999999999em);
  }
  .cub-2 .cr-1 {
    transform: translate3D(0.6000000000000001em, 0, -0.04999999999999999em);
  }
  .cub-2 .cr-2 {
    transform: translate3D(0, 0, -0.04999999999999999em);
  }
  .cub-2 .cr-3 {
    transform: translate3D(0, 0, 0.04999999999999999em);
  }
  .cub-2 .cr-0 .s0 {
    transform: rotateY(15deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-2 .cr-0 .s1 {
    transform: rotateY(45deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-2 .cr-0 .s2 {
    transform: rotateY(75deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-2 .cr-1 .s0 {
    transform: rotateY(105deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-2 .cr-1 .s1 {
    transform: rotateY(135deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-2 .cr-1 .s2 {
    transform: rotateY(165deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-2 .cr-2 .s0 {
    transform: rotateY(195deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-2 .cr-2 .s1 {
    transform: rotateY(225deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-2 .cr-2 .s2 {
    transform: rotateY(255deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-2 .cr-3 .s0 {
    transform: rotateY(285deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-2 .cr-3 .s1 {
    transform: rotateY(315deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-2 .cr-3 .s2 {
    transform: rotateY(345deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-2 .side {
    width:0.07858983848622454em;
  }
  /* .cub-3 styles */
  .cub-3 {
    transform:translate3D(0em, -2.5em, 2.17em) rotateX(0deg) rotateY(90deg) rotateZ(90deg);
    opacity:1;
    width:1.5em;
    height:0.10056925996204935em;
    margin:-0.050284629981024676em 0 0 -0.75em;
  }
  .cub-3 .ft {
    transform:translateZ(0.15em);
  }
  .cub-3 .bk {
    transform:translateZ(-0.15em) rotateY(180deg);
  }
  .cub-3 .rt, .cub-3 .lt {
    width:0.3em;
    height:0.10056925996204935em;
  }
  .cub-3 .tp, .cub-3 .bm {
    width:1.5em;
    height:0.3em;
  }
  .cub-3 .face {
    background:url(../media/img/phone/buttons.jpg) #FFFFFF;
  }
  .cub-3 .ft {
    width:1.3em;
    margin-left:.1em;
  }
  .cub-3 .bk {
    width:1.3em;
    margin-left:-0.1em;
  }
  .cub-3 .rt, .cub-3 .lt {
    width:0.09999999999999998em;
  }
  .cub-3 .tp, .cub-3 .bm, .cub-3 .tp .photon-shader, .cub-3 .bm .photon-shader {
    border-radius:.1em;
  }
  .cub-3 .cr {
    width:.1em;
    left:0.05em;
  }
  .cub-3 .cr-0 {
    transform: translate3D(1.3em, 0, 0.04999999999999999em);
  }
  .cub-3 .cr-1 {
    transform: translate3D(1.3em, 0, -0.04999999999999999em);
  }
  .cub-3 .cr-2 {
    transform: translate3D(0, 0, -0.04999999999999999em);
  }
  .cub-3 .cr-3 {
    transform: translate3D(0, 0, 0.04999999999999999em);
  }
  .cub-3 .cr-0 .s0 {
    transform: rotateY(15deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-3 .cr-0 .s1 {
    transform: rotateY(45deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-3 .cr-0 .s2 {
    transform: rotateY(75deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-3 .cr-1 .s0 {
    transform: rotateY(105deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-3 .cr-1 .s1 {
    transform: rotateY(135deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-3 .cr-1 .s2 {
    transform: rotateY(165deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-3 .cr-2 .s0 {
    transform: rotateY(195deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-3 .cr-2 .s1 {
    transform: rotateY(225deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-3 .cr-2 .s2 {
    transform: rotateY(255deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-3 .cr-3 .s0 {
    transform: rotateY(285deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-3 .cr-3 .s1 {
    transform: rotateY(315deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-3 .cr-3 .s2 {
    transform: rotateY(345deg) translate3D(-50%, 0, 0.07500000000000001em);
  }
  .cub-3 .side {
    width:0.07858983848622454em;
  }