@charset utf-8; html,body {min-width:1000px}
body {color:#000; font-family:Verdana,sans-serif; font-size:17px; background-image:url('fon-k.png'); background-repeat:repeat}
.container {margin:auto auto; text-align:center; min-height:100%}
.header {width:100%; height:100px}
 @import url(https://fonts.googleapis.com/css?family=Russo+One); .logotype1,.logotype1:hover,.logotype1 div {position:relative; display:inline-block; font-size:36px; color:#337AB7; text-shadow:2px 4px 3px rgba(0,0,0,0.2); font-family:'Russo One',sans-serif; font-weight:300; text-decoration:none; margin:20px 0 20px 26px; line-height:16px}
.logotype1 div {display:block}
.logotype1 b {letter-spacing:1px; font-size:44px; color:#1C84D0; -webkit-text-stroke:1px #BDE1FF; text-shadow:2px 4px 3px rgba(0,0,0,0.3); font-weight:600; background-image:url('fon-k.png')}
.logotype1 span {text-shadow:1px 2px 1px rgba(0,0,0,0.2); display:block; float:right; font-size:20px; color:#883727; line-height:6px}
.logotype1:before {position:absolute; top:-12px; left:0; content:""; border:8px solid #BDE1FF; width:66px; height:66px; border-radius:100%; transition:all 0.3s ease; z-index:-1; box-sizing:content-box}
.logotype1:hover:before {transform:scale(1.1); border:8px solid #1C84D0}
@media (max-width:600px) {.logotype1,.logotype1:hover,.logotype1 div {font-size:26px; line-height:6px; margin:20px 0 20px 20px}
 .logotype1 b {font-size:34px}
 .logotype1 span {font-size:16px; line-height:4px}
 .logotype1:before {top:-9px; border:6px solid #BDE1FF; width:52px; height:52px}
 .logotype1:hover:before {border:6px solid #1C84D0}
}
.navigation {max-width:1580px; margin:auto auto}
.cb-label {color:#FFFFFF; display:block; font-size:15px; margin:1em 0; -webkit-tap-highlight-color:transparent}
.cb-label a {color:#FFFFFF}
.cb {background:#FFFFFF; border:2px solid #BFE2FF; box-shadow:0 0 0 0.125em rgba(0,0,0,0.75) inset; display:inline-block; position:relative; width:1.5em; height:1.5em; font-size:22px; vertical-align:middle; -moz-appearance:none; -webkit-appearance:none}
.cb:before,.cb:after {content:""; display:block; position:absolute; animation:none}
.cb:before {animation:eraseA 0.5s steps(1) forwards; background:url('data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABICAMAAABx5AOBAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACcUExURUdwTDMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMwzZNNQAAAAzdFJOUwD9CPf680HnDN0SLGUFwjrjnCK9s4agTAKAbEfXJ+weXBccyTV0z6eWj6TxeVdU0dKqUj+hA9AAAAIXSURBVBgZncAFduNAEATQEoItsszMGN66/9021GMpeXbU+mjGf8td0kkzNJKMHX7J52jA7tC4QM++8CqAmn1hiQut5MQyC1p9ViygFFusGEDHf2DFbAmVImLFrA0Vu8eKbgGdMcu8cQidqcOSaAqlzYwlhzaURheWbAtoxRavXgpozQNeRW1oJT1eLTKoTXjlPENtHtCw9lBLerzqjKAWWzTSFtSKgEbQhtroSMN9ht6TRaMPvXVEoxtC70Qjn0PPdyjcFfTCLY0TGnikcWhBr72g8HzoJT0aYzSwsijSEHrriOJhhwbONB7RQOZRpCFu2/iT82DQHyaosrsUXobbJjk/WUNUTWiMcdvQ47cOKpY5xaGF27oUUQtlHQp3ijv2Dr9ZQ5T4LkUH96xfKTq4CrcU+QZ3nSmiFow9jRj3+Ra/Wf8gioCia+O+8JXiCDGg8DL8pU8RLPFl6lKc8aedQxHjU7iliNb4U5JSpAk+7GnEqGFC4ezwrggoujZqmC8o+ng3oHB81DHqUcxCYOpSDFDPisIaItxSLOaoZxNQDLCnMUZdR4rIDyhmLdT1ROEGNFaobZ3zt9RGfUf+4k6h8MRf3kZQWAb8wdtBY9TjDyfoTFgVFFAZtR1WjKEUHlgWraHVYVkMtZglXRtqmUXDy6BXPNDoo4HWC0Uaooks4JegjWb8nB+8IZpq9xwyGqK58NGb7aDyH2UTzeCLYT1BAAAAAElFTkSuQmCC') 0 100%/1.2em 1.35em no-repeat; bottom:0.2em; left:0.3em; width:0; height:1.35em}
.cb:after {animation:eraseB 0.5s linear forwards; background:linear-gradient(rgba(255,255,255,0.2) 50%,rgba(255,255,255,0) 50%) 11.2em 0,linear-gradient(#c8646e,#c8646e) 11.2em 0,linear-gradient(90deg,rgba(255,255,255,0.6),rgba(255,255,255,0.6) 0.1em,rgba(255,255,255,0) 0.1em,rgba(255,255,255,0) 0.2em,rgba(0,0,0,0.2) 0.2em,rgba(0,0,0,0.2) 0.3em,rgba(0,0,0,0) 0.3em) 9.8em 0/0.3em 100%,repeating-linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0.6) 0.1em,rgba(255,255,255,0) 0.1em,rgba(255,255,255,0) 0.2em) 10.2em 0/0.5em 100%,linear-gradient(90deg,rgba(255,255,255,0.6),rgba(255,255,255,0.6) 0.1em,rgba(255,255,255,0) 0.1em,rgba(255,255,255,0) 0.2em,rgba(0,0,0,0.2) 0.2em,rgba(0,0,0,0.2) 0.3em,rgba(0,0,0,0) 0.3em) 10.8em 0/0.3em 100%,linear-gradient(rgba(255,255,255,0) 35%,rgba(255,255,255,0.6) 35%,rgba(255,255,255,0.6) 65%,rgba(255,255,255,0) 65%) 9.7em 0,linear-gradient(#b4b4b4,#b4b4b4) 9.7em 0,linear-gradient(rgba(0,0,0,0.1) 27%,rgba(0,0,0,0) 27%,rgba(0,0,0,0) 73%,rgba(0,0,0,0.2) 73%) 2em 0,linear-gradient(#f0d000,#f0d000) 2em 0,linear-gradient(-14deg,#1e1e1e 18%,rgba(30,30,30,0) 20%) 0 0/0.5em 0.5em,linear-gradient(14deg,rgba(30,30,30,0) 80%,#1e1e1e 83%) 0 0.5em/0.5em 0.5em,linear-gradient(-14deg,#d2a078 48%,rgba(210,160,120,0) 50%) 0 0/2em 0.5em,linear-gradient(14deg,rgba(0,0,0,0) 48%,rgba(0,0,0,0.1) 50%) 0 0.5em/2em 0.5em,linear-gradient(14deg,rgba(210,160,120,0) 48%,#d2a078 50%) 0 0.5em/2em 0.5em; background-repeat:no-repeat; border-radius:0 0.1em 0.1em 0; opacity:0; visibility:hidden; transform-origin:0 0.25em; width:12em; height:1em}
.cb:checked {background-color:transparent; background:#FFFFFF}
.cb:checked:before {animation:drawA 0.5s linear forwards}
.cb:checked:after {animation:drawB 0.5s linear}
.cb:focus {outline:transparent}
.cb:focus + span {color:rgba(0,0,0,0.75); outline:transparent; color:#FFFFFF}
.pristine:before,.pristine:after {animation:none}
@keyframes drawA {from,5% {width:0; height:1.35em}
 90%,to {width:1.2em; height:1.35em}
}
@keyframes drawB {from {opacity:0; transform:translate(0em,-0.5em) rotate(-50deg); visibility:visible}
 5% {opacity:1; transform:translate(0em,0.3em) rotate(-60deg)}
 17% {transform:translate(0.25em,0.8em) rotate(-65deg)}
 79% {transform:translate(1.1em,-0.14em) rotate(-63deg)}
 90% {opacity:1; transform:translate(1.2em,-0.15em) rotate(-63deg)}
 to {opacity:0; transform:translate(1.25em,-1.7em) rotate(-63deg)}
}
@keyframes eraseA {from {width:1.2em; height:1.35em}
 10% {width:1.2em; height:1.08em}
 27% {width:1.2em; height:0.81em}
 36% {width:1.2em; height:0.7em}
 45% {width:1.2em; height:0.55em}
 55% {width:1.2em; height:0.35em}
 80%,to {width:1.2em; height:0}
}
@keyframes eraseB {from {opacity:0; transform:translate(0.6em,-12.2em) rotate(90deg); visibility:visible}
 10% {opacity:1; transform:translate(1.2em,-12.05em) rotate(90deg)}
 20% {transform:translate(0.6em,-11.9em) rotate(90deg)}
 30% {transform:translate(1.2em,-11.75em) rotate(90deg)}
 40% {transform:translate(0.6em,-11.6em) rotate(90deg)}
 50% {transform:translate(1.2em,-11.45em) rotate(90deg)}
 60% {transform:translate(0.6em,-11.3em) rotate(90deg)}
 70% {transform:translate(1.2em,-11.15em) rotate(90deg)}
 80% {transform:translate(0.6em,-11em) rotate(90deg)}
 90% {opacity:1; transform:translate(2em,-12.5em) rotate(100deg)}
 to {opacity:0; transform:translate(2em,-12.5em) rotate(100deg)}
}
.opisanie {padding-top:10px; padding-bottom:50px; max-width:1580px; margin:auto auto}
.texe-rec {text-shadow:2px 4px 3px rgba(0,0,0,0.2); color:#337AB7}
.placeholder-form {box-sizing:border-box; width:420px; margin:20px auto}
.placeholder-container {position:relative; width:100%; margin-bottom:20px}
.placeholder-container input {background-color:#FFF; border:2px solid #BFE2FF; box-sizing:border-box; color:#000; font-size:16px; line-height:16px; height:50px; outline:0; padding:0 20px; width:100%}
.placeholder-container label {color:#000; font-family:Verdana,sans-serif; background-color:#FFF; font-size:16px; line-height:16px; padding:5px 10px; pointer-events:none; position:absolute; transition:all 200ms; top:12px; left:10px; background-color:#FFF}
.placeholder-container input:focus + label,.placeholder-container input:not(:placeholder-shown) + label {top:-10px; left:10px; font-size:11px; background-color:#BFE2FF; padding:2px 10px}
.atuin-btn {display:inline-flex; margin:10px; text-decoration:none; position:relative; font-size:20px; line-height:20px; padding:12px 30px; color:#FFF; font-weight:bold; text-transform:uppercase; font-family:'Roboto',Тahoma,sans-serif; background:#337AB7; cursor:pointer; border:2px solid #BFE2FF; transition:transform 0.2s ease-out,padding 0.2s ease-out; overflow:hidden}
.atuin-btn:hover,.atuin-btn:active,.atuin-btn:focus {color:#FFF; transform:rotate(-2deg); padding:12px 50px 12px 10px}
.atuin-btn:before {content:"\27A4"; position:absolute; right:-30px; color:#1C4B73; transition:right 0.5s cubic-bezier(.97,.01,.97,.55)}
.atuin-btn:hover:before,.atuin-btn:active:before,.atuin-btn:focus:before {right:10px}
.blockquote-3 {position:relative; text-align:center; margin:16px 16px 34px 16px; border:4px solid #337AB7; border-radius:20px; padding:16px 24px; font-size:18px; background:#BBBBBB}
.blockquote-3:before,.blockquote-3:after {content:''; position:absolute; width:0; height:0}
.blockquote-3:before {left:30px; bottom:-32px; border:16px solid; border-color:#337AB7 transparent transparent #337AB7}
.blockquote-3:after {left:35px; bottom:-21px; border:12px solid; border-color:#337AB7 transparent transparent #337AB7}
.blockquote-3 cite {position:absolute; bottom:-28px; left:62px; font-size:15px; font-weight:bold; color:#337AB7}
.js-transitions-disabled * {transition:none !important}
.tabs3d {position:relative; height:500px; perspective:1500px; perspective-origin:50% 50%}
.tabs3d-control {position:absolute; display:flex; flex-wrap:wrap; right:38px; top:38px; z-index:1; box-shadow:0 4px 12px rgba(0,0,0,0.2),0 16px 20px rgba(0,0,0,0.2)}
.tabs3d-control a {position:relative; font-family:Verdana,sans-serif; font-weight:bold; text-transform:uppercase; font-size:18px; padding:10px 10px; display:block; text-decoration:none; box-sizing:border-box; color:#FFF; transition:background 0.4s}
.tabs3d-control a:hover {background-color:#000!important}
.tabs3d-control a.active,.tabs3d-control a.active:hover {background-color:#FFF!important; color:#000}
.tabs3d-stage {position:absolute; top:20px; bottom:20px; left:20px; right:20px; margin:auto; transform-style:preserve-3d; transform:translateZ(-230px)}
.spinner {position:absolute; width:50%; height:460px; top:0; left:0; right:auto; bottom:0; margin:auto; transform-style:preserve-3d; transition:transform 1s; backface-visibility:hidden; transform-origin:50% 50%; transform:rotateX(0)}
.js-spin-fwd .spinner {transform:rotateX(-90deg)}
.js-spin-bwd .spinner {transform:rotateX(90deg)}
.js-spin-fwd .spinner-right {transform:rotateX(90deg)}
.js-spin-bwd .spinner-right {transform:rotateX(-90deg)}
.spinner-right {right:0; left:auto}
.spinner-face {display:none; position:absolute; width:100%; height:100%; overflow:hidden}
.spinner-face.js-next {display:block; transform:rotateX(90deg) translateZ(230px)}
.spinner-right .spinner-face.js-next {transform:rotateX(270deg) translateZ(230px)}
.js-spin-bwd .spinner-face.js-next {transform:rotateX(-90deg) translateZ(230px)}
.js-spin-bwd .spinner-right .spinner-face.js-next {transform:rotateX(-270deg) translateZ(230px)}
.js-active {display:block; transform:translateZ(230px)}
.content {position:absolute; width:200%; height:100%; left:0}
.spinner-right .content {left:-100%}
.content-left,.content-right {position:absolute; left:0; top:0; width:50%; height:100%}
.content-right {right:0; left:auto}
.content-left {background-repeat:no-repeat; background-size:cover; background-position:50% 50%}
.content-left .content-title {position:absolute; bottom:20px; right:40px; text-shadow:0 0 12px rgba(0,0,0,0.5),0 2px 6px rgba(0,0,0,0.7); text-align:right; color:#FFF; font-family:Verdana,sans-serif; font-weight:bold}
.content-left .content-title div {font-size:16px}
.content-left .content-title p {font-size:16px; margin-top:30px; margin-right:230px}
.content-right {display:flex; align-items:center; justify-content:center; padding-top:10px}
.content-right .content-main {position:absolute; max-height:320px; overflow-x:auto; margin:20px; padding:0 20px}
.content-right .content-main p {margin:0 15px 0; color:#FFF; font-family:Verdana,sans-serif; text-align:justify; font-size:16px; line-height:1.35}
.content-right .content-main .content-autor {text-transform:uppercase; font-size:13px; float:right; padding:6px 6px 0 6px; display:inline-block; border-top:1px solid #FFF; margin:0}
@media screen and (max-width:991px) {.tabs3d {height:auto; margin:20px 0}
.tabs3d-control {position:relative; box-shadow:none; top:0; left:0; margin-bottom:10px; justify-content:center}
.spinner {position:static; width:100%; height:260px}
.tabs3d-stage {position:static; transform-style:flat; transform:none}
.content-right {padding-top:0}
.content-right .content-main {max-height:220px}
.content-right .content-main p {font-size:13px}
.spinner-face.js-next {display:block; transform:rotateX(90deg) translateZ(130px)}
.spinner-right .spinner-face.js-next {transform:rotateX(270deg) translateZ(130px)}
.js-spin-bwd .spinner-face.js-next {transform:rotateX(-90deg) translateZ(130px)}
.js-spin-bwd .spinner-right .spinner-face.js-next {transform:rotateX(-270deg) translateZ(130px)}
.js-active {transform:translateZ(130px)}
}
.footer {margin:auto auto; background:#DEDEDE; max-width:1540px}
.footer-l {text-align:left; font-weight:200; font-size:14px; filter:opacity(50%)}
.msgbox-error {font-size:14px; color:#fff; text-align:center; text-shadow:1px 1px 1px #913807; background-color:#F35C0B; display:block; margin-bottom:10px; padding:10px 20px}
.msgbox-success {font-size:14px; color:#fff; text-align:center; text-shadow:1px 1px 1px #3B6900; background-color:#5B9F00; display:block; margin-bottom:10px; padding:10px 20px}
.msgbox-info {background-color:#f5f5b5; border:1px solid #deca7e; font-family:sans-serif,Tahoma; font-size:12px; text-align:center; display:block; margin-bottom:10px; padding:10px 20px}