@import url(http://fonts.googleapis.com/css?family=Oswald:400);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; }

img, fieldset, a img { border: none; }

input[type="text"], input[type="email"], input[type="tel"], textarea { -webkit-appearance: none; }

input[type="submit"], button { cursor: pointer; }

input[type="submit"]::-moz-focus-inner, button::-moz-focus-inner { padding: 0; border: 0; }

textarea { overflow: auto; }

input, button { margin: 0; padding: 0; border: 0; }

div, input, textarea, select, button, h1, h2, h3, h4, h5, h6, a, span, a:focus { outline: none; }

ul, ol { list-style-type: none; }

table { border-spacing: 0; border-collapse: collapse; width: 100%; }

html { box-sizing: border-box; }

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

body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.25; min-width: 320px; min-height: 320px; }

.centr-align { text-align: center; }

.slide { padding: 50px 40px 0 50px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.slide:before { content: ''; position: absolute; z-index: 20; left: 0; top: 0; height: 100%; width: 15%; }

.slide h2 { font-size: 65px; font-weight: 900; margin-bottom: 40px; }

.slide pre { margin-top: 25px; display: inline-block; vertical-align: middle; margin-bottom: .5em; text-align: left; }

.slide pre code { font-size: 30px; line-height: 1.6; margin-left: -95px; }

.slide p { font-size: 32px; line-height: 1.7; }

.centr-code { text-align: center; line-height: 625px; padding-top: 0; }

.centr-code pre { margin: 0; }

.centr-code code { font-size: 30px !important; }

.attention-js-header { background: url("../img/mask-gun.jpg") 50% 50% no-repeat; background-size: cover; }

.attention-js-header .shout { padding: 0 50px; text-align: center; }

.attention-js-header .shout:after { display: none; }

.attention-js-header h2 { font-size: 128px !important; text-shadow: 3px 4px 10px #000; }

.cover-frame { left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; position: absolute; }

.demo-example { float: right; }

.demo-line { overflow: hidden; height: 45%; }

.demo-line + .demo-line { margin-top: 25px; }

.demo-line pre { float: left; }

.overflow-visible { overflow: visible; }

.demo-mesh { display: inline-block; position: relative; width: 300px; height: 200px; background-color: #fff; background-image: linear-gradient(#999999 1px, transparent 1px), linear-gradient(90deg, #999999 1px, transparent 1px); background-size: 41px 41px; background-position: 150px 99px; line-height: 1; }

.demo-mesh:before, .demo-mesh:after { content: ""; position: absolute; }

.demo-mesh:before { border-left: 1px solid #000; height: 100%; left: 50%; top: 0; }

.demo-mesh:after { border-top: 1px solid #000; width: 100%; top: 50%; left: 0; }

.demo-mesh_base-block, .demo-mesh_transform-block { position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -75px; width: 166px; height: 100px; font-size: 19px; line-height: 100px; }

.demo-mesh_base-block { background: #eaeaed; border: 2px solid blue; opacity: .7; }

.demo-mesh_transform-block { border: 2px solid red; z-index: 2; }

.demo-3d { border: 2px blue solid; position: relative; margin: auto; height: 85%; width: 65%; }

.demo-3d_inner { position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; height: 70%; width: 80%; border: 2px red solid; font-size: 2.5em; }

.centr-example { text-align: center; }

.centr-example .demo-mesh { width: 800px; height: 500px; background-size: 83px 75px; }

.centr-example .demo-mesh_base-block, .centr-example .demo-mesh_transform-block { width: 498px; height: 304px; margin: -152px 0 0 -249px; border-width: 4px; font-size: 2.5em; line-height: 304px; }

.preserve-3d { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 600px; perspective: 600px; }

.half { display: inline-block; vertical-align: middle; text-align: left; width: 50%; padding: 15px; box-sizing: border-box; }

.link-slide { padding: 0; text-align: center; font-size: 60px; }

.link-slide_header { font-size: 73px !important; line-height: 1.3 !important; font-weight: 700 !important; padding-left: 30px; }

.link-slide_link { font-size: 70px !important; background: none !important; }

.link-slide_link:hover { text-decoration: underline; }

.slide::after { left: 20px !important; bottom: 20px !important; font-size: 16px; line-height: 1; }

.contacts { padding-left: 30px; }

.contacts p { margin-bottom: 0; font-size: 36px; }

.clearfix { *zoom: 1; }

.clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; }

.clearfix:after { clear: both; }

a, a:before, .button, button, button:before, input[type="button"], input[type="submit"] { transition: border-color .1s ease-in, color .1s ease-in, background-color .1s ease-in; }

.hide { display: none !important; }

.backface { width: 200px; height: 200px; display: inline-block; position: relative; background-color: #844BCA; background: url(../img/picachu.svg) 50% 50% no-repeat; background-size: contain; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }

.backface_header { background: url("../img/aceventura_whennaturecallls.jpg") 50% 50% no-repeat; background-size: cover; }

.backface_header .shout { padding: 0 50px; text-align: center; }

.backface_header .shout:after { display: none; }

.backface_header h2 { font-size: 128px !important; text-shadow: 3px 4px 10px #000; }

.backface_header .shout { text-align: left; }

.active .backface { -webkit-animation: spin 4s infinite linear; animation: spin 4s infinite linear; }

.backface-hidden { -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.backface-back { background: url(../img/BatmanPikachu.svg) 50% 50% no-repeat; background-size: contain; width: 200px; height: 200px; display: inline-block; position: absolute; left: 100%; top: 0; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; }

.ie-end-header { background: url("../img/2106-1_Death-of-IE.jpg") 50% 50% no-repeat; background-size: cover; }

.ie-end-header .shout { padding: 0 50px; text-align: center; }

.ie-end-header .shout:after { display: none; }

.ie-end-header h2 { font-size: 128px !important; text-shadow: 3px 4px 10px #000; }

.logo-img { max-height: 30%; display: block; margin: 0 auto; }

.logo-img + .logo-img { margin-top: 3%; }

.matrix-header { background: url("../img/MatrixBluePillRedPill.jpg") 50% 50% no-repeat; background-size: cover; }

.matrix-header .shout { padding: 0 50px; text-align: center; }

.matrix-header .shout:after { display: none; }

.matrix-header h2 { font-size: 128px !important; text-shadow: 3px 4px 10px #000; }

.matrix-header .shout { top: 25%; }

.perspective_origin-header { background: url("../img/ac1_viewpoint.jpg") 50% 50% no-repeat; background-size: cover; }

.perspective_origin-header .shout { padding: 0 50px; text-align: center; }

.perspective_origin-header .shout:after { display: none; }

.perspective_origin-header h2 { font-size: 128px !important; text-shadow: 3px 4px 10px #000; }

.perspective-header { background: url("../img/Deadpool_AtomicFiction_VFX_18A.jpg") 50% 50% no-repeat; background-size: cover; }

.perspective-header .shout { padding: 0 50px; text-align: center; }

.perspective-header .shout:after { display: none; }

.perspective-header h2 { font-size: 128px !important; text-shadow: 3px 4px 10px #000; }

.demo-perspective { position: absolute; padding: 10px; left: 13%; top: 10%; bottom: 16%; right: 13%; border: 1px solid #000; }

.demo-perspective .block-1, .demo-perspective .block-2 { position: absolute; width: 280px; height: 200px; padding: 0 20px; top: 50%; margin-top: -10%; border: 1px solid #000; }

.demo-perspective .block-1 { background-color: red; left: 8%; }

.demo-perspective .block-2 { background-color: blue; left: 55%; }

.demo-perspective-1 { -webkit-perspective: 200px; perspective: 200px; }

.demo-perspective-1 .block-1 { left: 50%; margin-left: -150px; -webkit-transform: rotateY(60deg); transform: rotateY(60deg); }

.active .demo-perspective-1 .block-1 { -webkit-animation: perspective 4s linear infinite alternate; animation: perspective 4s linear infinite alternate; }

.demo-perspective-2 { -webkit-perspective: none; perspective: none; }

.demo-perspective-2 .block-1 { left: 15%; -webkit-transform: perspective(200px) rotateY(60deg); transform: perspective(200px) rotateY(60deg); }

.active .demo-perspective-2 .block-1 { -webkit-animation: transform-perspective-1 4s linear infinite alternate; animation: transform-perspective-1 4s linear infinite alternate; }

.demo-perspective-2 .block-2 { -webkit-transform: perspective(400px) rotateY(60deg); transform: perspective(400px) rotateY(60deg); }

.active .demo-perspective-2 .block-2 { -webkit-animation: transform-perspective-2 4s linear infinite alternate; animation: transform-perspective-2 4s linear infinite alternate; }

@-webkit-keyframes perspective { from { -webkit-transform: rotateY(30deg); transform: rotateY(30deg); }
  to { -webkit-transform: rotateY(60deg); transform: rotateY(60deg); } }

@keyframes perspective { from { -webkit-transform: rotateY(30deg); transform: rotateY(30deg); }
  to { -webkit-transform: rotateY(60deg); transform: rotateY(60deg); } }

@-webkit-keyframes transform-perspective-1 { from { -webkit-transform: perspective(200px) rotateY(30deg); transform: perspective(200px) rotateY(30deg); }
  to { -webkit-transform: perspective(200px) rotateY(60deg); transform: perspective(200px) rotateY(60deg); } }

@keyframes transform-perspective-1 { from { -webkit-transform: perspective(200px) rotateY(30deg); transform: perspective(200px) rotateY(30deg); }
  to { -webkit-transform: perspective(200px) rotateY(60deg); transform: perspective(200px) rotateY(60deg); } }

@-webkit-keyframes transform-perspective-2 { from { -webkit-transform: perspective(400px) rotateY(30deg); transform: perspective(400px) rotateY(30deg); }
  to { -webkit-transform: perspective(400px) rotateY(60deg); transform: perspective(400px) rotateY(60deg); } }

@keyframes transform-perspective-2 { from { -webkit-transform: perspective(400px) rotateY(30deg); transform: perspective(400px) rotateY(30deg); }
  to { -webkit-transform: perspective(400px) rotateY(60deg); transform: perspective(400px) rotateY(60deg); } }

.active .rotate-demo_rotate-z { -webkit-animation: rotate-z 6s linear infinite; animation: rotate-z 6s linear infinite; }

.rotate-demo_rotate-x { -webkit-transform: rotateX(60deg); transform: rotateX(60deg); }

.active .rotate-demo_rotate-x { -webkit-animation: rotate-x 2s linear infinite alternate; animation: rotate-x 2s linear infinite alternate; }

.rotate-demo_rotate-y { -webkit-transform: rotateY(60deg); transform: rotateY(60deg); }

.active .rotate-demo_rotate-y { -webkit-animation: rotate-y 2s linear infinite alternate; animation: rotate-y 2s linear infinite alternate; }

.rotate-demo_rotate-3d { -webkit-transform: rotate3d(1, 2, 3, 30deg); transform: rotate3d(1, 2, 3, 30deg); }

.active .rotate-demo_rotate-3d { -webkit-animation: rotate-3d 4s linear infinite; animation: rotate-3d 4s linear infinite; }

.rotate-header { background: url("../img/doctor-strange-new-york-city.jpg") 50% 50% no-repeat; background-size: cover; }

.rotate-header .shout { padding: 0 50px; text-align: center; }

.rotate-header .shout:after { display: none; }

.rotate-header h2 { font-size: 128px !important; text-shadow: 3px 4px 10px #000; }

@-webkit-keyframes rotate-z { from { -webkit-transform: rotateZ(0); transform: rotateZ(0); }
  to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } }

@keyframes rotate-z { from { -webkit-transform: rotateZ(0); transform: rotateZ(0); }
  to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } }

@-webkit-keyframes rotate-x { from { -webkit-transform: rotateX(0); transform: rotateX(0); }
  to { -webkit-transform: rotateX(60deg); transform: rotateX(60deg); } }

@keyframes rotate-x { from { -webkit-transform: rotateX(0); transform: rotateX(0); }
  to { -webkit-transform: rotateX(60deg); transform: rotateX(60deg); } }

@-webkit-keyframes rotate-y { from { -webkit-transform: rotateY(0); transform: rotateY(0); }
  to { -webkit-transform: rotateY(60deg); transform: rotateY(60deg); } }

@keyframes rotate-y { from { -webkit-transform: rotateY(0); transform: rotateY(0); }
  to { -webkit-transform: rotateY(60deg); transform: rotateY(60deg); } }

@-webkit-keyframes rotate-3d { from { -webkit-transform: rotate3d(1, 1, 1, 0); transform: rotate3d(1, 1, 1, 0); }
  to { -webkit-transform: rotate3d(1, 1, 1, 360deg); transform: rotate3d(1, 1, 1, 360deg); } }

@keyframes rotate-3d { from { -webkit-transform: rotate3d(1, 1, 1, 0); transform: rotate3d(1, 1, 1, 0); }
  to { -webkit-transform: rotate3d(1, 1, 1, 360deg); transform: rotate3d(1, 1, 1, 360deg); } }

.scale-header { background: url("../img/scaler.jpg") 50% 50% no-repeat; background-size: cover; background-image: none; background-color: #ffffff; background-size: contain; }

.scale-header .shout { padding: 0 50px; text-align: center; }

.scale-header .shout:after { display: none; }

.scale-header h2 { font-size: 128px !important; text-shadow: 3px 4px 10px #000; }

.scale-header-bg { position: absolute; z-index: 1; width: 100%; height: 100%; left: 0; top: 0; background-image: url("../img/scaler.jpg"); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; }

.scale-header .shout { position: relative; z-index: 10; }

.scale-demo_scale-x { -webkit-transform: scaleX(1.5); -ms-transform: scaleX(1.5); transform: scaleX(1.5); }

.active .scale-demo_scale-x { -webkit-animation: scale-x 2s linear infinite alternate; animation: scale-x 2s linear infinite alternate; }

.scale-demo_scale-y { -webkit-transform: scaleY(1.5); -ms-transform: scaleY(1.5); transform: scaleY(1.5); }

.active .scale-demo_scale-y { -webkit-animation: scale-y 2s linear infinite alternate; animation: scale-y 2s linear infinite alternate; }

.scale-demo_scale-3d-block, .scale-demo_scale-z-block { -webkit-transform: scale3d(1, 1, 2) rotateX(50deg); transform: scale3d(1, 1, 2) rotateX(50deg); background-image: linear-gradient(#999999 1px, transparent 1px), linear-gradient(90deg, #999999 1px, transparent 1px); background-size: 44px 40px !important; background-position: center center; }

.active .scale-demo_scale-z-block { -webkit-animation: scale-z 2s linear infinite alternate; animation: scale-z 2s linear infinite alternate; }

.active .scale-demo_scale-3d-block { -webkit-animation: scale-3d 2s linear infinite alternate; animation: scale-3d 2s linear infinite alternate; }

.scale-demo_scale-invert { -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); }

.scale-demo_scale-invert img { max-height: 100%; }

.active .scale-demo_scale-invert { -webkit-animation: scale-invert 4s linear infinite alternate; animation: scale-invert 4s linear infinite alternate; }

@-webkit-keyframes scale-x { from { -webkit-transform: scaleX(1); transform: scaleX(1); }
  to { -webkit-transform: scaleX(1.5); transform: scaleX(1.5); } }

@keyframes scale-x { from { -webkit-transform: scaleX(1); transform: scaleX(1); }
  to { -webkit-transform: scaleX(1.5); transform: scaleX(1.5); } }

@-webkit-keyframes scale-y { from { -webkit-transform: scaleY(1); transform: scaleY(1); }
  to { -webkit-transform: scaleY(1.5); transform: scaleY(1.5); } }

@keyframes scale-y { from { -webkit-transform: scaleY(1); transform: scaleY(1); }
  to { -webkit-transform: scaleY(1.5); transform: scaleY(1.5); } }

@-webkit-keyframes scale-z { from { -webkit-transform: scaleZ(1) rotateX(50deg); transform: scaleZ(1) rotateX(50deg); }
  to { -webkit-transform: scaleZ(2) rotateX(50deg); transform: scaleZ(2) rotateX(50deg); } }

@keyframes scale-z { from { -webkit-transform: scaleZ(1) rotateX(50deg); transform: scaleZ(1) rotateX(50deg); }
  to { -webkit-transform: scaleZ(2) rotateX(50deg); transform: scaleZ(2) rotateX(50deg); } }

@-webkit-keyframes scale-3d { from { -webkit-transform: scale3d(1, 1, 1) rotateX(50deg); transform: scale3d(1, 1, 1) rotateX(50deg); }
  to { -webkit-transform: scale3d(1, 1, 2) rotateX(50deg); transform: scale3d(1, 1, 2) rotateX(50deg); } }

@keyframes scale-3d { from { -webkit-transform: scale3d(1, 1, 1) rotateX(50deg); transform: scale3d(1, 1, 1) rotateX(50deg); }
  to { -webkit-transform: scale3d(1, 1, 2) rotateX(50deg); transform: scale3d(1, 1, 2) rotateX(50deg); } }

@-webkit-keyframes scale-invert { from { -webkit-transform: scaleX(1); transform: scaleX(1); }
  to { -webkit-transform: scaleX(-1); transform: scaleX(-1); } }

@keyframes scale-invert { from { -webkit-transform: scaleX(1); transform: scaleX(1); }
  to { -webkit-transform: scaleX(-1); transform: scaleX(-1); } }

.skew-header { background: url("../img/skew.jpg") 50% 50% no-repeat; background-size: cover; background-position: 0 50%; }

.skew-header .shout { padding: 0 50px; text-align: center; }

.skew-header .shout:after { display: none; }

.skew-header h2 { font-size: 128px !important; text-shadow: 3px 4px 10px #000; }

.skew-header .shout { text-align: left; }

.skew-half { width: 40%; float: left; }

.skew-half + .skew-half { margin-left: 20%; }

.skew-demo_skew-x { -webkit-transform: skewX(30deg); -ms-transform: skewX(30deg); transform: skewX(30deg); }

.active .skew-demo_skew-x { -webkit-animation: skew-x 2s linear infinite alternate; animation: skew-x 2s linear infinite alternate; }

.skew-demo_skew-y { -webkit-transform: skewY(30deg); -ms-transform: skewY(30deg); transform: skewY(30deg); }

.active .skew-demo_skew-y { -webkit-animation: skew-y 4s linear infinite alternate; animation: skew-y 4s linear infinite alternate; }

@-webkit-keyframes skew-x { from { -webkit-transform: skewX(0deg); transform: skewX(0deg); }
  to { -webkit-transform: skewX(30deg); transform: skewX(30deg); } }

@keyframes skew-x { from { -webkit-transform: skewX(0deg); transform: skewX(0deg); }
  to { -webkit-transform: skewX(30deg); transform: skewX(30deg); } }

@-webkit-keyframes skew-y { from { -webkit-transform: skewY(0deg); transform: skewY(0deg); }
  to { -webkit-transform: skewY(30deg); transform: skewY(30deg); } }

@keyframes skew-y { from { -webkit-transform: skewY(0deg); transform: skewY(0deg); }
  to { -webkit-transform: skewY(30deg); transform: skewY(30deg); } }

.skew-text-baner { position: relative; width: 600px; margin: 100px auto 0; text-transform: uppercase; font-family: Helvetica; font-size: 24px; }

.skew-text-baner_line { margin: 0 0 0.68em; width: 100%; height: 1.6em; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.05); text-align: center; text-transform: uppercase; font-size: 1.6em; line-height: 1.6em; -webkit-transform: skew(0, -15deg); -ms-transform: skew(0, -15deg); transform: skew(0, -15deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; outline: 1px solid transparent; }

.skew-text-baner_line:after, .skew-text-baner_line:first-child:before { content: ''; position: absolute; top: 1.2em; left: 0; z-index: -1; display: block; width: 100%; height: 1.5em; border-radius: 6px; background: rgba(212, 104, 106, 0.5); -webkit-transform: skew(0, 8deg); -ms-transform: skew(0, 8deg); transform: skew(0, 8deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; outline: 1px solid transparent; }

.skew-text-baner_line:first-child:before { top: -0.18em; right: 0; left: auto; -webkit-transform: skew(0, 15deg); -ms-transform: skew(0, 15deg); transform: skew(0, 15deg); }

.skew-text-baner_line:first-child:before, .skew-text-baner_line:last-child:after { width: 0; height: 0; border-width: 0.8em; border-style: solid; border-color: rgba(212, 104, 106, 0.5) rgba(212, 104, 106, 0.5) transparent transparent; background: transparent; }

.skew-text-baner_line:last-child:after { top: 0.2em; -webkit-transform: skew(0, 14deg); -ms-transform: skew(0, 14deg); transform: skew(0, 14deg); border-color: transparent transparent rgba(212, 104, 106, 0.5) rgba(212, 104, 106, 0.5); }

.skew-text-baner_line-text { display: block; width: 100%; height: 100%; border-radius: 6px; background: #d4686a; color: #eeeccd; text-shadow: 1px 1px 0 #000000; }

.skew-arrow { position: relative; display: inline-block; color: #eeeccd; text-transform: uppercase; text-shadow: 1px 1px 0 #000000; margin: 30px 100px 200px; cursor: pointer; line-height: 2.5em; height: 2.5em; padding: 0 1.5em; font-size: 1.5em; transition: -webkit-transform .6s ease; transition: transform .6s ease; transition: transform .6s ease, -webkit-transform .6s ease; will-change: transform; }

.skew-arrow:before, .skew-arrow:after { content: ''; background: #d4686a; border-radius: 2px; display: block; position: absolute; left: 0; right: 0; height: 50%; z-index: -1; transition: box-shadow .6s ease; }

.skew-arrow:hover:before { box-shadow: inset -11px 14px 20px -8px #000000; }

.skew-arrow:hover:after { box-shadow: inset -11px -14px 20px -8px #000000; }

.skew-arrow:before { top: 1px; -webkit-transform: skew(45deg); -ms-transform: skew(45deg); transform: skew(45deg); }

.skew-arrow:after { bottom: 1px; -webkit-transform: skew(-45deg); -ms-transform: skew(-45deg); transform: skew(-45deg); }

.skew-arrow_up { -webkit-transform: rotateZ(-90deg); -ms-transform: rotate(-90deg); transform: rotateZ(-90deg); }

.skew-arrow_down { -webkit-transform: rotateZ(45deg) scale3d(1.5, 1.5, 1); transform: rotateZ(45deg) scale3d(1.5, 1.5, 1); }

.skew-arrow_down:hover { -webkit-transform: rotateZ(90deg) scale3d(1, 1, 1); transform: rotateZ(90deg) scale3d(1, 1, 1); }

.skew-arrow_left { -webkit-transform: scale3d(0.75, 0.75, 1); transform: scale3d(0.75, 0.75, 1); }

.skew-arrow_left:hover { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }

.skew-arrow_left:hover:before { box-shadow: inset 11px 14px 20px -8px #000000; }

.skew-arrow_left:hover:after { box-shadow: inset 11px -14px 20px -8px #000000; }

.skew-arrow_left:before { -webkit-transform: skew(-45deg); -ms-transform: skew(-45deg); transform: skew(-45deg); }

.skew-arrow_left:after { -webkit-transform: skew(45deg); -ms-transform: skew(45deg); transform: skew(45deg); }

.skew-arrow_left, .skew-arrow_right { margin-bottom: 150px; }

.transform-origin-header { background: url("../img/transformers-4.jpg") 50% 50% no-repeat; background-size: cover; }

.transform-origin-header .shout { padding: 0 50px; text-align: center; }

.transform-origin-header .shout:after { display: none; }

.transform-origin-header h2 { font-size: 128px !important; text-shadow: 3px 4px 10px #000; }

.transform-origin_demo { width: 230px; height: 200px; position: relative; }

.transform-origin_demo-bell { position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; -webkit-transform-origin: 50% 4px 0; -ms-transform-origin: 50% 4px 0; transform-origin: 50% 4px 0; }

.active .transform-origin_demo-bell { -webkit-animation: ring 8s 0s ease-in-out infinite; animation: ring 8s 0s ease-in-out infinite; }

.transform-origin_demo-bell-custom-origin { -webkit-transform-origin: left center 0; -ms-transform-origin: left center 0; transform-origin: left center 0; }

@-webkit-keyframes transform-origin { 0% { -webkit-transform: rotateZ(-30deg); transform: rotateZ(-30deg); }
  50% { -webkit-transform: rotateZ(0); transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(30deg); transform: rotateZ(30deg); } }

@keyframes transform-origin { 0% { -webkit-transform: rotateZ(-30deg); transform: rotateZ(-30deg); }
  50% { -webkit-transform: rotateZ(0); transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(30deg); transform: rotateZ(30deg); } }

@-webkit-keyframes ring { 0% { -webkit-transform: rotateZ(0); }
  1%, 9% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }
  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); } }

@keyframes ring { 0% { -webkit-transform: rotateZ(0); }
  1%, 9% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }
  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); } }

.transform-style-header { background: url("../img/anaglifnye_glasses.jpg") 50% 50% no-repeat; background-size: cover; }

.transform-style-header .shout { padding: 0 50px; text-align: center; }

.transform-style-header .shout:after { display: none; }

.transform-style-header h2 { font-size: 128px !important; text-shadow: 3px 4px 10px #000; }

.transform-style-demo { position: relative; height: 200px; width: 200px; border: 2px solid blue; -webkit-perspective: 500px; perspective: 500px; float: right; margin-right: 35px; }

.transform-style-demo.preserve-3d .parent { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }

.transform-style-demo .parent { margin: 10px; width: 180px; height: 180px; background-color: rgba(132, 75, 202, 0.6); }

.active .transform-style-demo .parent { -webkit-animation: spin 10s infinite linear; animation: spin 10s infinite linear; }

.transform-style-demo .parent .child-1, .transform-style-demo .parent .child-2 { position: absolute; opacity: 0.8; top: 20px; left: 20px; width: 150px; height: 150px; padding: 10px; -webkit-box-sizing: border-box; font-family: monospace; font-size: 10pt; }

.transform-style-demo .parent .child-1 { background-color: #49DC93; -webkit-transform: rotateY(45deg) translateZ(-70px); transform: rotateY(45deg) translateZ(-70px); }

.transform-style-demo .parent .child-2 { background-color: #FF6; -webkit-transform: rotateX(20deg) translateZ(30px); transform: rotateX(20deg) translateZ(30px); -webkit-transform-origin: 50% top; -ms-transform-origin: 50% top; transform-origin: 50% top; }

@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); }
  to { -webkit-transform: rotateY(360deg); } }

@keyframes spin { from { -webkit-transform: rotateY(0); }
  to { -webkit-transform: rotateY(360deg); } }

.transltate-demo_translate-x { -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); }

.active .transltate-demo_translate-x { -webkit-animation: translate-x 4s linear infinite alternate; animation: translate-x 4s linear infinite alternate; }

.transltate-demo_translate-y { -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); }

.active .transltate-demo_translate-y { -webkit-animation: translate-y 4s linear infinite alternate; animation: translate-y 4s linear infinite alternate; }

.transltate-demo_translate-z { -webkit-transform: translateZ(100px); transform: translateZ(100px); }

.active .transltate-demo_translate-z { -webkit-animation: translate-z 4s linear infinite alternate; animation: translate-z 4s linear infinite alternate; }

.transltate-demo_3d-wrap { -webkit-perspective: 1500px; perspective: 1500px; }

.transltate-demo_3d-wrap .demo-mesh { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(60deg) rotateX(30deg); transform: rotateY(60deg) rotateX(30deg); }

.transltate-demo_translate3d { line-height: 80px !important; -webkit-transform: translateX(100px) translateY(100px) translateZ(100px); transform: translateX(100px) translateY(100px) translateZ(100px); }

.active .transltate-demo_translate3d { -webkit-animation: translate-3d 4s linear infinite alternate; animation: translate-3d 4s linear infinite alternate; }

@-webkit-keyframes translate-x { from { -webkit-transform: translateX(0); transform: translateX(0); }
  to { -webkit-transform: translateX(100px); transform: translateX(100px); } }

@keyframes translate-x { from { -webkit-transform: translateX(0); transform: translateX(0); }
  to { -webkit-transform: translateX(100px); transform: translateX(100px); } }

@-webkit-keyframes translate-y { from { -webkit-transform: translateY(0); transform: translateY(0); }
  to { -webkit-transform: translateY(100px); transform: translateY(100px); } }

@keyframes translate-y { from { -webkit-transform: translateY(0); transform: translateY(0); }
  to { -webkit-transform: translateY(100px); transform: translateY(100px); } }

@-webkit-keyframes translate-z { from { -webkit-transform: translateZ(0); transform: translateZ(0); }
  to { -webkit-transform: translateZ(100px); transform: translateZ(100px); } }

@keyframes translate-z { from { -webkit-transform: translateZ(0); transform: translateZ(0); }
  to { -webkit-transform: translateZ(100px); transform: translateZ(100px); } }

@-webkit-keyframes translate-3d { 0% { -webkit-transform: translateX(0) translateY(0) translateZ(0); transform: translateX(0) translateY(0) translateZ(0); }
  50% { -webkit-transform: translateX(-50px) translateY(-50px) translateZ(100px); transform: translateX(-50px) translateY(-50px) translateZ(100px); }
  100% { -webkit-transform: translateX(50px) translateY(50px) translateZ(100px); transform: translateX(50px) translateY(50px) translateZ(100px); } }

@keyframes translate-3d { 0% { -webkit-transform: translateX(0) translateY(0) translateZ(0); transform: translateX(0) translateY(0) translateZ(0); }
  50% { -webkit-transform: translateX(-50px) translateY(-50px) translateZ(100px); transform: translateX(-50px) translateY(-50px) translateZ(100px); }
  100% { -webkit-transform: translateX(50px) translateY(50px) translateZ(100px); transform: translateX(50px) translateY(50px) translateZ(100px); } }

@media only screen and (min-device-width: 320px) and (max-device-width: 480px){
 *{ -webkit-text-size-adjust: none; } }