* {margin: 0; padding: 0; outline: none; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
html {height: 100%; background: #fff;}
body {height: 100%; min-height: 100%; font: normal 16px/1.4 'MetaPro_normal', Arial, sans-serif; color: #ffe9c2;}

aside, nav, footer, header, section, article, menu {display: block;}

a {color: inherit; cursor:pointer;}
a img {border:none;}

strong {font: normal 1em/1.4 'MetaPro_bold', Arial, sans-serif;}
em {}

p { margin:0 0 1em 0;}

ol {margin: 0 0 1.25em 1.25em;}
ol li {margin: 0 0 0.4em 0;}
ul {margin: 0 0 1.2em 20px;}
ul li {margin: 0 0 0.5em 0;}

nav ul {list-style: none; margin: 0;}

/* Forms */
textarea {resize:none;}
fieldset {border: none;}

.input, .textarea {position: relative; background: #1e1919;}
.input input {color: #ffe9c2; font: normal 1.1em/50px 'MetaPro_normal'; display: block; width: 100%; border: 2px solid #f0d098; background: none; height: 50px; padding: 0 15px; position: relative;}
.textarea textarea {color: #ffe9c2; font: normal 1.1em/1.4 'MetaPro_normal'; display: block; width: 100%; border: 2px solid #f0d098; background: none; padding: 15px; min-height: 140px; position: relative;}
.input .inputLabel, .textarea .inputLabel {position: absolute; left: 0; top: 12px; display: block; width: 100%; text-align: left; transition: top .5s ease; -webkit-transition: top .5s ease;}
.inputLabel .labelContent {color: #ffe9c2; font: normal 1.1em/1.4 'MetaPro_normal'; margin: 0 15px; transition: opacity .3s ease; -webkit-transition: opacity .3s ease;}
.inputLabel:before {content: attr(data-content); position: absolute; top: -95px; left: 13px; color: #713737; font: normal 1.1em/1.4 'MetaPro_bold'; opacity: 0;}

.input.focus input:focus, .textarea.focus textarea {border: 2px solid #713737;}
.input.focus .inputLabel, .textarea.focus .inputLabel {top: 70px;}
.input.focus .inputLabel .labelContent, .textarea.focus .inputLabel .labelContent {opacity: 0;}
.input.focus .inputLabel:before, .textarea.focus .inputLabel:before {opacity: 1;}

.modalForm .inputBox {margin: 0 0 10px 0;}
.modalForm .textarea {margin: 0 0 40px 0;}
.inputBox {padding: 30px 0 0 0; overflow: hidden;}

/* Buttons */
.lightButton {display: inline-block; vertical-align: middle; color: #f0d098; font: normal 18px/65px 'MetaPro_normal'; text-transform: uppercase; text-decoration: none; background: url(../img/pat-button.png) 0 -209px no-repeat; position: relative; padding: 0 10px 0 25px;}
.lightButton:after {content: ''; display: block; width: 18px; height: 100%; position: absolute; right: -18px; top: 0; background: url(../img/pat-button.png) 0 -286px no-repeat;}
.lightButton input {display: block; background: none; border: none; color: #ead6b2; font: normal 18px/65px 'MetaPro_normal'; text-transform: uppercase; }

/* Modal */
.jsModal {display: none;}
.modalOverlay {position: absolute; width: 100%; min-height: 100%; top: -150%; left: 0; z-index: 1000; background: #fff; background: rgba(30,25,25,.9);}
.closeModal {width: 42px; height: 42px; position: absolute; right: 10px; top: 10px; z-index: 1; background: url(../img/icons.png) -52px 0; background-size: 250px; cursor: pointer;}
.modalContent {max-width: 400px; margin: 0 auto; padding: 70px 15px 50px 15px; text-align: center; color: #fff; position: relative; top: -50%; opacity: 0;}
.modalTitle {font: normal 1.8em/1.0 'Petersburg_bold'; color: #ffe9c2; text-transform: uppercase; margin: 0 0 20px 0;}

/* Titles */
h1, .H1 {font: normal 1.5em/1.2 'Petersburg_bold'; text-transform: uppercase; margin: 0 10px 30px 10px; text-align: center; position: relative; z-index: 1;}
h2, .H2 {font: normal 1.25em/1.2 'Petersburg_bold'; text-transform: uppercase; margin: 0 9px 1.5em 10px; text-align: center;}
h3, .H3 {font: normal 1.125em/1.2 'Petersburg_bold'; text-transform: uppercase; margin: 0 0 1em 0; text-align: center;}
h4, .H4 {font: normal 1em/1.5 'MetaPro_book'; text-transform: uppercase; margin: 0 0 20px 0; text-align: center;}

/* Preloader */
.preloaderOverlay {width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 9999; background: #281b15 url(../img/pat-dark.jpg) 0 0 repeat;}
.preloaderBlock {width: 320px; padding: 0 10px; position: absolute; left: 50%; top: 50%; margin: -70px 0 0 -160px; text-align: center;}
.preloaderLogo {max-width: 100%; display: inline-block; margin: 0 0 20px 0; position: relative;}
.preloaderLogo .noAct img {display: block; width: 100%; height: auto;}
.preloaderLogo .act {position: absolute; width: 0; height: 100%; left: 0; top: 0; overflow: hidden;}
.preloaderLogo .act img {display: block; width: auto; height: 100%;}
.preloaderBlock .txt {font: normal 1em/1.2 'Petersburg_bold'; text-transform: uppercase; color: #f0d098;}

/* Grid */
#sectionWrap {min-height: 100%; position: relative; background: #190f0d url(../img/pat-dark.jpg) 0 0 repeat; overflow: hidden; z-index: 1;}
#sectionWrap.lightBg {background: #fff8f3 url(../img/pat-light.jpg) 0 0 repeat;}
#header {width: 100%; height: 100px; background: rgba(15,8,8,.75); position: absolute; left: 0; top: 0; z-index: 5;}
#footer {width: 100%; height: 155px; position: absolute; left: 0; bottom: 0; z-index: 2; background: #fff8f3 url(../img/pat-dark.jpg) 0 0 repeat;}

.pageSection {position: relative; left: 0; top: 0; width: 100%; min-height: 600px; z-index: 1;}
.pageSpace {padding: 130px 0 0 0;}
#photo {min-height: 100%;}

.widthFix {max-width: 1200px; margin: 0 auto; position: relative;}
.lightBg {background: #fff8f3 url(../img/pat-light.jpg) 0 0 repeat; color: #502d2d;}
.darkBg {background: #190f0d url(../img/pat-dark.jpg) 0 0 repeat; color: #fff8f3;}

/* Header */
header {max-width: 1400px; margin: 0 auto; position: relative; padding: 20px 10px 30px 10px;}
.logo {display: block; width: 200px; height: 48px; float: left; background: url(../img/logo.png) 0 0 no-repeat; background-size: auto 97px;}
.openMenuIco {width: 43px; height: 40px; background: url(../img/icons.png) 0 0 no-repeat; background-size: 250px auto; float: right; margin: 10px 0 0 0; cursor: pointer;}
#menuWrap {display: none; width: 100%; position: absolute; top: 0; left: 0; background: #1d1919; text-align: center; padding: 30px 30px 50px 30px;}
.closeIco {display: block; width: 43px; height: 40px; position: absolute; top: 30px; right: 10px; background: url(../img/icons.png) -52px 0 no-repeat; background-size: 250px auto; cursor: pointer;}
.langToggle {margin: 0 0 70px 0;}
.langToggle a {text-transform: uppercase; color: #fff; margin: 0 5px; text-decoration: none;}
.langToggle a.current {color: #868686!important;}
#header .feedback {display: inline-block; vertical-align: middle; color: #f0d098; font: normal 12px/45px 'MetaPro_normal'; text-transform: uppercase; text-decoration: none; background: url(../img/pat-button.png) 0 0 no-repeat; position: relative; padding: 0 15px 0 27px;}
#header .feedback:after {content: ''; display: block; width: 12px; height: 100%; position: absolute; right: -12px; top: 0; background: url(../img/pat-button.png) 0 -50px no-repeat;}
#mainMemu ul {margin: 0 0 50px 0;}
#mainMemu ul li {color: #f0d098; margin: 0 0 30px 0; text-transform: uppercase; font: normal 1.5em/1.0 'MetaPro_normal';}
#mainMemu ul li a {text-decoration: none;}
#mainMemu ul li.active {color: #713737;}

#header.lightHead {background: rgba(255,255,255,.4);}
.lightHead .openMenuIco {background: url(../img/icons.png) -103px 0 no-repeat; background-size: 250px auto;}
.lightHead .closeIco {background: url(../img/icons.png) -155px 0 no-repeat; background-size: 250px auto;}
#header.lightHead .feedback {color: #502d2d; background: url(../img/pat-button.png) 0 -100px no-repeat;}
#header.lightHead .feedback:after {background: url(../img/pat-button.png) 0 -150px no-repeat;}
#header.lightHead .langToggle a {color: #502d2d;}
#header.lightHead #menuWrap {background: #f1e3ce;}
#header.lightHead #mainMemu ul li {color: #1a1414}
#header.lightHead #mainMemu ul li.active {color: #713737;}
#header.lightHead .logo {background: url(../img/logo.png) 0 -52px no-repeat; background-size: auto 97px;}

/* Footer */
footer {padding: 30px 10px; text-align: center; color: #7f6666; font: normal 0.85em/1.2 'MetaPro_normal'; text-transform: uppercase;}
.socBlock {display: inline-block;}
.socIco {display: inline-block; vertical-align: middle; width: 31px; height: 30px; margin: 0 10px; opacity: 0.3; -webkit-opacity: 0.3; transition: all 0.5s ease; -webkit-transition: all 0.5s ease;}
.socIco.fb {background: url(../img/icons.png) 0 -50px no-repeat; background-size: 250px auto;}
.socIco.vk {background: url(../img/icons.png) -39px -50px no-repeat; background-size: 250px auto;}
.socIco.tw {background: url(../img/icons.png) -79px -50px no-repeat; background-size: 250px auto;}
.socIco:hover {opacity: 1; -webkit-opacity: 1}
#copy {margin: 20px 0;}
#dev_logo {display: inline-block; text-decoration: none;}
#dev_logo img {height: 12px; width: auto; vertical-align: baseline; margin: 0 0 0 7px;}

/* Map */
#mapCanvas {height: 550px;}
.mapInfo {width: 210px; position: absolute; top: 130px; left: 50%; margin: 0 0 0 -105px; color: #502d2d; text-align: center;}
.mapInfo .cornerTop, .mapInfo .cornerFoot { position: relative; background: #ebe5e0;}
.mapInfo .cornerTop {margin: 0 11px; height: 10px;}
.mapInfo .cornerFoot {margin: -1px 11px 0 11px; height: 12px;}
.mapInfo .cornerTop:before, .mapInfo .cornerTop:after, .mapInfo .cornerFoot:before, .mapInfo .cornerFoot:after {content: ''; display: block; width: 11px; height: 11px; position: absolute; top: 0;}
.mapInfo .cornerFoot:before, .mapInfo .cornerFoot:after {height: -12px; top: auto; bottom: 0;}
.mapInfo .cornerTop:before, .mapInfo .cornerFoot:before {left: -10px;}
.mapInfo .cornerTop:after, .mapInfo .cornerFoot:after {right: -10px;}
.mapInfo .cornerTop:before {background: url(../img/icons.png) 0 -86px no-repeat; background-size: 250px auto;}
.mapInfo .cornerTop:after {background: url(../img/icons.png) -12px -86px no-repeat; background-size: 250px auto;}
.mapInfo .cornerFoot:before {background: url(../img/icons.png) 0 -96px no-repeat; background-size: 250px auto;}
.mapInfo .cornerFoot:after {background: url(../img/icons.png) -12px -96px no-repeat; background-size: 250px auto;}
.mapInfo .inner {background: #ebe5e0; padding: 5px 0;}
.mapInfo .description {display: none;}
.mapInfo .hide {display: none;}
.mapInfo .address, .mapInfo .email {text-transform: uppercase; margin: 0 15px 5px 15px;}
.mapInfo a {text-decoration: none;}
.mapInfo .phone {margin: 0 -8px; background: #982a2a; font: normal 1.7em/2.2 'Petersburg_bold'; color: #ebe5e0;}

/* Secret */
#secret .H1 {margin: 0 0 30px 0; color: #ffe9c2;}
.H1 .title {font: normal 11px/1.2 'Petersburg_regular'; padding: 10px 0 0 0;}
.H1 .title:before {content: ''; display: block; width: 25px; height: 3px; margin: 0 auto 15px auto; background: #ffe9c2;}
.hide {display: none;}
.secret01, .secret02, .secret03, .secret04, .secret05, .secret06, .secret07 {max-width: 760px; margin: 0 auto; position: relative;/* overflow: hidden;*/}
.secret01 {color: #ffe9c2; height: 100%;}
.H1 .small {font: normal 20px/1.2 'Petersburg_regular'; display: none;}
.secret01 .img {width: 135%; margin: 100px 0 0 -28%; position: relative; z-index: 1;}
.secret01 .img img {width: 100%; height: auto;}
.secret01 .label {font: normal 14px/1.5 'MetaPro_normal'; color: #ffe9c2; text-transform: uppercase; border-left: 2px solid #ffe9c2; padding: 0 0 0 10px;}
.secret01 .txt01 {display: none; position: absolute; left: 0; top: 280px;}
.secret01 .txt02 {margin: 0 0 20px 25%;}
.secret01 .txt03 {display: none; margin: 4% 0 50px 20px; position: relative; z-index: 1;}
.secret01 .redNote01 {max-width: 295px; position: absolute; top: 180px; right: 0;}
.secret01 .redNote01 .inner {padding: 15px; background: #982a2a; color: #fff; text-transform: uppercase; font: normal 0.75em/1.5 'MetaPro_book'; text-align: left;}
.secret01 .redNote01 .cornerLeft {width: 10px; height: 80px; position: absolute; left: -10px; top: 10px; background: #982a2a;}
.secret01 .redNote01 .cornerLeft:before, .secret01 .redNote01 .cornerLeft:after {content: ''; display: block; width: 10px; height: 10px; position: absolute; left: 0;}
.secret01 .redNote01 .cornerLeft:before {top: -10px; background: url(../img/icons.png) -29px -86px no-repeat; background-size: 250px auto;}
.secret01 .redNote01 .cornerLeft:after {bottom: -10px; background: url(../img/icons.png) -29px -99px no-repeat; background-size: 250px auto;}
.secret01 .redNote02 {display: none; max-width: 180px; height: 100px; position: absolute; top: 360px; left: 74%; margin: 0 0 0 -3px;}
.secret01 .redNote02 .inner {padding: 15px 20px; background: #982a2a; color: #fff; text-transform: uppercase; font: normal 0.75em/1.5 'MetaPro_book'; text-align: left;}
.secret01 .redNote02 .cornerRight {width: 10px; height: 80px; position: absolute; right: -10px; top: 10px; background: #982a2a;}
.secret01 .redNote02 .cornerRight:before, .secret01 .redNote02 .cornerRight:after {content: ''; display: block; width: 10px; height: 10px; position: absolute; left: 0;}
.secret01 .redNote02 .cornerRight:before {top: -10px; background: url(../img/icons.png) -40px -86px no-repeat; background-size: 250px auto;}
.secret01 .redNote02 .cornerRight:after {bottom: -10px; background: url(../img/icons.png) -40px -99px no-repeat; background-size: 250px auto;}
.secret02 .left, .secret02 .right {padding: 0 10px;}
.secret02 .center {display: none; width: 430px; margin: 0 auto; clear: both; text-align: center;}
.secret02 .H3 {text-align: left;}
.secret02 .img {position: relative;}
.secret02 .img img {margin: 0 0 0 -8%; width: 115%; height: auto;}
.secret02 .img .pdf {max-width: 240px; position: absolute; top: 20%; left: 46%; margin: 0 0 0 3px;}
.secret02 .img .pdf a {display: block; position: relative; padding: 13px 0 13px 45px; height: 55px; background: #982a2a; color: #fff; text-transform: uppercase; font: normal 0.625em/1.5 'MetaPro_book'; text-decoration: none;}
.secret02 .img .pdf a:before {content: ''; display: block; width: 26px; height: 20px; position: absolute; left: 10px; top: 17px; background: url(../img/icons.png) -72px -30px no-repeat; background-size: 150px auto;}
.secret02 .img .pdf .cornerRight {width: 10px; height: 35px; position: absolute; right: -10px; top: 10px; background: #982a2a;}
.secret02 .img .pdf .cornerRight:before, .secret02 .img .pdf .cornerRight:after {content: ''; display: block; width: 10px; height: 10px; position: absolute; left: 0;}
.secret02 .img .pdf .cornerRight:before {top: -10px; background: url(../img/icons.png) -40px -86px no-repeat; background-size: 250px auto;}
.secret02 .img .pdf .cornerRight:after {bottom: -10px; background: url(../img/icons.png) -40px -99px no-repeat; background-size: 250px auto;}
.secret02 .label {font: normal 14px/1.5 'MetaPro_normal'; color: #ffe9c2; text-transform: uppercase; border-left: 2px solid #ffe9c2; padding: 0 0 0 10px; margin: 0 0 20px 0; max-width: 300px;}

.secret03 .paints {margin: 0 0 70px 0; position: relative; text-align: center;}
.secret03 .paints img {max-width: 100%; margin: 0 0 0 -5%;}
.secret03 .paints .unit {display: inline-block; max-width: 30%; text-align: left; position: absolute; bottom: -35px; font: normal 0.625em/1.5 'MetaPro_normal';}
.secret03 .paints .unit.u01 {left: 5%;}
.secret03 .paints .unit.u02 {left: 42%;}
.secret03 .paints .unit.u03 {left: 70%;}
.secret03 .paints .unit small {display: block;}
.secret03 .dopPaint {text-align: center;}
.secret03 .dopPaint img {height: auto; max-width: 70%;}

.secret04 .img img {width: 140%; max-width: 700px; height: auto; margin: 0 0 20px -25%;}
.secret04 .description {margin: 0 10px 20px 10px;}
.secret04 .description .H3 {text-align: left;}
.secret04 .cover {clear: both; text-align: center}
.secret04 .cover .unit {display: inline-block; vertical-align: top; width: 32%; padding: 0 10px 30px 10px; text-transform: uppercase;}
.secret04 .cover .unit img {max-width: 100%; display: block; margin: 0 auto 5px auto;}

.secret05 .description {color: #fff8f3; margin: 0 10px 30px 10px;}
.secret05 .H3 {text-align: left;}
.secret05 .img img {height: auto; width: 130%; max-width: 660px; margin: 0 0 0 -22%;}*

/*.secret06 .img img {width: 132%; height: auto; margin: 0 0 0 -18%;}*/
.secret06 .img {max-width: 920px; margin: 0 auto;}
.secret06 .img img {width: 25%; height: auto; float: left;}
.secret06 .description {text-align: center; margin: 30px 0; clear: both;}

.secret07 .img img {width: 155%; max-width: 650px; margin: 0 0 0 -7%;}
.secret07 .description {margin: -100px 10px 30px 10px;}
.secret07 .H3 {text-align: left;}
.secret07 ul, .secret02 ul {list-style: none;}
.secret07 ul li:before, .secret02 ul li:before {content: ''; display: inline-block; vertical-align: middle; width: 12px; height: 1px; background: #fff8f3; margin: 0 8px 0 -20px;}

/* About */
.aboutBox {padding: 0 10px; text-align: center;}
.aboutBox .pic {width: 60%; max-width: 330px; margin: 0 auto 20px auto;}
.aboutBox .pic img {width: 100%; height: auto;}

/* Steps */
.stepBox {padding: 0 10px; text-align: center;}
.stepBox .pic {width: 60%; max-width: 320px; margin: 0 auto 20px auto;}
.stepBox .pic img {width: 100%; height: auto;}

.sectionSlide.kabinet .stepBox {position: relative; padding: 0 0 40px 0; max-width: 1000px;}
.sectionSlide.kabinet .kabImg {max-width: 1000px; margin: 0 auto;}
.sectionSlide.kabinet .kabImg img {width: 136%; height: auto; position: relative; left: -22%; top: -15px;}
.sectionSlide.kabinet .redNote {max-width: 320px; margin: 0 0 0 20px; float: right;}
.sectionSlide.kabinet .redNote .inner {padding: 23px 10px 23px 20px; background: #982a2a; color: #fff; text-transform: uppercase; font: normal 0.75em/1.5 'MetaPro_book'; text-align: left; position: relative;}
.sectionSlide.kabinet .redNote .cornerLeft {width: 10px; height: 80px; position: absolute; left: -10px; top: 10px; background: #982a2a;}
.sectionSlide.kabinet .redNote .cornerLeft:before, .sectionSlide.kabinet .redNote .cornerLeft:after {content: ''; display: block; width: 10px; height: 10px; position: absolute; left: 0;}
.sectionSlide.kabinet .redNote .cornerLeft:before {top: -10px; background: url(../img/icons.png) -29px -86px no-repeat; background-size: 250px auto;}
.sectionSlide.kabinet .redNote .cornerLeft:after {bottom: -10px; background: url(../img/icons.png) -29px -99px no-repeat; background-size: 250px auto;}
.sectionSlide.kabinet .txt01, .stepBox.kabinet .txt02 {border-left: 2px solid #502d2d; padding: 0 0 0 10px; text-transform: uppercase; font: normal 0.75em/1.5 'MetaPro_book'; text-align: left; width: 170px; position: absolute; right: 60px; bottom: 20px;}
.sectionSlide.kabinet .txt02 {display: none; border-left: 2px solid #502d2d; padding: 0 0 0 10px; text-transform: uppercase; font: normal 0.75em/1.5 'MetaPro_book'; text-align: left; position: absolute;}

.middleSlide {display: none;}

/* Sliders */
.sectionSlider {width: 100%; height: 100%; position: relative; left: 0; top: 0; z-index: 1;}
.sectionSlider .sectionSlide {width: 100%; height: 100%; position: relative; left: 0; top: 0; padding: 0 0 40px 0;}
.listerContainer {text-align: center; width: 100%; position: absolute; left: 0; bottom: 0; z-index: 100;}
.listerContainer .listerBox {display: inline-block; position: relative;}
.listerContainer .progress {height: 1px; background: #502d2d; position: relative;}
.listerContainer .progress .line {width: 10%; height: 100%; position: absolute; left: 0; top: 0; background: #b63030;}
.lightBg .listerContainer .progress {background: #502d2d;}
.darkBg .listerContainer .progress {background: #efd097;}

.listerContainer .lister {display: inline-block; position: relative; top: -12px; line-height: 12px;}
.listerContainer .lister span {display: inline-block; vertical-align: middle; width: 12px; height: 12px; border-radius: 50%; margin: 0 0 0 35px; cursor: pointer;}
.listerContainer .lister span:first-child {margin: 0;}
.lightBg .listerContainer .lister span {background: #fff8f3; border: 2px solid #502d2d;}
.darkBg .listerContainer .lister span {background: #37261c; border: 2px solid #efd097;}
.listerContainer .lister span:hover, .listerContainer .lister span.active {background: #b63030; border: 2px solid #b63030;}

.leftArrWrap, .rightArrWrap {width: 10%; height: 100%; cursor: pointer; position: fixed; top: 0; z-index: 100;}
.leftArrWrap {left: 0;}
.rightArrWrap {right: 0;}
.leftArr, .rightArr {display: none; width: 100px; height: 100px; cursor: pointer; position: absolute; top: 50%;}
.leftArr {left: 0;}
.rightArr {right: 0;}
.leftArr .inner, .rightArr .inner {position: relative; display: block; width: 100%; height: 100%;}
.lightBg .leftArr:before, .lightBg .leftArr:after, .lightBg .rightArr:before, .lightBg .rightArr:after {background: #502d2d;}
.darkBg .leftArr:before, .darkBg .leftArr:after, .darkBg .rightArr:before, .darkBg .rightArr:after {background: #efd097;}
.leftArr:before, .leftArr:after, .leftArr .inner:before, .leftArr .inner:after, .rightArr:before, .rightArr:after, .rightArr .inner:before, .rightArr .inner:after {position: absolute; left: 50%; width: 3px; content: ''; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.leftArr:before, .leftArr:after, .rightArr:before, .rightArr:after {height: 50%; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s;}
.leftArr .inner:before, .leftArr .inner:after, .rightArr .inner:before, .rightArr .inner:after {z-index: 100; height: 0px; background: #b63030; -webkit-transition: height 0.3s, -webkit-transform 0.3s; transition: height 0.3s, transform 0.3s;}
.leftArr:before, .leftArr .inner:before {top: 50%; -webkit-transform: translateX(-50%) rotate(-135deg); transform: translateX(-50%) rotate(-135deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%;}
.rightArr:before, .rightArr .inner:before {top: 50%; -webkit-transform: translateX(-50%) rotate(135deg); transform: translateX(-50%) rotate(135deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%;}
.leftArr:after, .leftArr:after, .leftArr .inner:after, .leftArr .inner:after {top: 50%; -webkit-transform: translateX(-50%) rotate(-45deg); transform: translateX(-50%) rotate(-45deg); -webkit-transform-origin: 0 0; transform-origin: 0 0;}
.rightArr:after, .rightArr:after, .rightArr .inner:after, .rightArr .inner:after {top: 50%; -webkit-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%;}

.rightArrWrap:hover .rightArr .inner:before, .rightArrWrap:hover .rightArr .inner:after, .leftArrWrap:hover .leftArr .inner:before, .leftArrWrap:hover .leftArr .inner:after {height: 50%;}
.leftArrWrap:hover .leftArr:before, .leftArrWrap:hover .leftArr .inner:before {-webkit-transform: translateX(-50%) rotate(-125deg); transform: translateX(-50%) rotate(-125deg);}
.leftArrWrap:hover .leftArr:after, .leftArrWrap:hover .leftArr .inner:after {-webkit-transform: translateX(-50%) rotate(-55deg); transform: translateX(-50%) rotate(-55deg);}
.rightArrWrap:hover .rightArr:before, .rightArrWrap:hover .rightArr .inner:before {-webkit-transform: translateX(-50%) rotate(125deg); transform: translateX(-50%) rotate(125deg);}
.rightArrWrap:hover .rightArr:after, .rightArrWrap:hover .rightArr .inner:after {-webkit-transform: translateX(-50%) rotate(55deg); transform: translateX(-50%) rotate(55deg);}

#photoSlider {position: relative;}
#photoSlider .slide {width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden;}
#photoSlider .mainImg {overflow: hidden; position: relative; width: 100%; height: 100%; left: 0; top: 0;}
#photoSlider .mainImg img {display: block; width: auto; height: 100%;}
#photoSlider .prewiewsLine {display: none; width: 1000px; margin: 0 auto 40px auto; overflow: auto;}
#photoSlider .prewBlock {overflow: hidden; padding: 0 0 40px 0;}
.preview {background: rgba(15,8,8,.5); width: 130px; height: 90px; padding: 5px; float: left; margin: 0 15px 0 0; cursor: pointer;}
.preview img {display: block; max-width: 100%; height: auto; max-height: 100%;}
.preview.visible {background: #982a2a;}

#photoSlider .lister {display: block; padding: 0 10px; margin: 0 0 20px 0;}
#photoSlider .lister .dot {display: inline-block; vertical-align: middle; width: 15px; height: 10px; border: 3px solid #0f0808; margin: 0 5px; opacity: .5; background: transparent; transition: all .5s ease;}
#photoSlider .lister .dot.active {border: 3px solid #982a2a; opacity: 1;}
#photoSlider .leftArr, #photoSlider .rightArr {position: absolute;}

#photoSlider .filterBox {margin: 0 0 20px 0;}
#photoSlider .filterBox .filter {display: inline-block; vertical-align: middle; cursor: pointer; font: normal 0.75em/26px 'MetaPro_normal'; color: #fff; text-transform: uppercase; padding: 0 7px; background: rgba(15,8,8,.5); margin: 0 7px;}
#photoSlider .filterBox .filter.filtered {background: #982a2a;}

.controls {text-align: center; width: 100%; position: absolute; left: 0; bottom: 0;}

/* 3D */
.show3D, #canvasWraper, #canvasPreloader {display: none;}

@media screen and (min-width: 530px) {
	/* Secret */
	.secret01 .img {width: 135%; margin: 110px 0 0 -28%;}
	.secret01 .txt02 {margin: -60px 0 20px 55%;}
	.secret04 .img img {margin: 0 0 20px -125px;}
	.secret05 .description {margin: -40px 10px 30px 10px;}
	.secret05 .img img { margin: 0 0 0 -115px;}
	.secret07 .img img {margin: 0 0 0 -30px;}
	.secret07 .description {margin: -110px 10px 30px 10px;}
}
@media screen and (min-width: 760px) {
	/* Preloader */
	.preloaderBlock {width: 760px; padding: 0 30px; margin: -120px 0 0 -380px;}
	.preloaderLogo {margin: 0 0 30px 0;}
	.preloaderBlock .txt {font: normal 2.3em/1.2 'Petersburg_bold';}
	/* Grid */
	#footer {height: 100px;}
	.pageSection {min-height: 768px;}
	/* Header */
	header {padding: 20px 30px 30px 30px;}
	/* Footer */
	footer {padding: 40px 30px; text-align: left;}
	#copy {margin: 10px 50px 0 0; float: left;}
	#dev_logo {float: right; text-align: right; margin: 10px 0 0 0;}
	/* Map */
	#mapCanvas {height: 730px;}
	.mapInfo {width: 290px; margin: 0 0 0 -145px; text-align: left;}
	.mapInfo .description {display: block; font: normal 1em/1.4 'Petersburg_italic'; margin: 20px 15px 0 15px;}
	.mapInfo .phone {text-align: center;}
	/* Modal */
	.closeModal {right: 30px; top: 30px;}
	.modalContent {padding: 100px 30px 50px 30px;}
	.modalTitle {font: normal 2em/1.0 'Petersburg_bold';}
	/* Secret */
	.H1 .title:before {content: ''; display: block; width: 25px; height: 3px; margin: 0 auto 15px auto; background: #ffe9c2;}
	.hide {display: block;}
	.H1 .small {display: block;}
	.H1 .title {display: inline-block; vertical-align: middle; text-align: left; border-left: 2px solid #ffe9c2; padding: 0 0 0 10px; margin: -10px 0 0 15px;}
	.H1 .title:before {display: none;}
	.heightInner {position: relative;}
	.secret01 .img {width: 100%; margin: 25px 0 0 -17%;}
	.secret01 .img img {max-width: 1100px;}
	.secret01 .txt01 {display: block; position: absolute; left: 20px; top: 0;}
	.secret01 .txt02 {margin: -10% 0 20px 53%; position: relative; z-index: 1;}
	.secret01 .txt03 {display: block;}
	.secret01 .redNote01 {top: 90px; right: 59%;}
	.secret01 .redNote02 {display: block; top: 160px;}
	.secret02 {display: table; height: 60%;}
	.secret02 .left {width: 59%; display: table-cell; vertical-align: middle;}
	.secret02 .right {width: 41%; display: table-cell; vertical-align: middle;}
	.secret02 .center {width: 430px; margin: 30px auto 0 auto; text-align: center;}
	.secret02 .left p {margin: 0 40px 40px 0;}
	/*.secret03, */.secret04, .secret06 {height: 65%;}
	/*.secret03:before, */.secret04:before, .secret06:before {content: ''; display: inline-block; vertical-align: middle; width: 1%; height: 100%;}
	/*.secret03 span, */.secret04 span, .secret06 span {display: inline-block; vertical-align: middle; width: 98%;}
	.secret03 .paints img {max-width: 90%;}
	.secret03 .paints .unit {font: normal 0.825em/1.5 'MetaPro_normal';}
	.secret03 .paints .unit.u01 {left: 7%;}
	.secret03 .paints .unit.u02 {left: 47%;}
	.secret03 .paints .unit.u03 {left: 78%;}
	.secret04 .img {width: 50%; float: left; margin: 0 0 30px 0;}
	.secret04 .img img {max-width: 100%; height: auto; margin: 10px 0 20px -15px;}
	.secret04 .description {width: 50%; float: left; margin: 0 0 30px 0;}
	.secret05 {display: table; height: 65%;}
	.secret05 .description {width: 43%; display: table-cell; vertical-align: middle; margin: 0;}
	.secret05 .img {width: 57%; display: table-cell; vertical-align: middle; padding: 45px 0 0 0;}
	.secret06 .description {margin: 50px 0;}
	.secret07 {display: table; height: 60%;}
	.secret07 .img {width: 50%; display: table-cell; vertical-align: middle; text-align: center; padding: 50px 0 0 0;}
	.secret07 .img img {max-height: 100%; max-width: 100%; width: auto;}
	.secret07 .description {width: 50%; display: table-cell; vertical-align: middle; padding: 0; margin: 0;}
	/* About */
	.aboutBox {display: table; text-align: left; width: 100%; height: 100%; padding: 0;}
	.aboutBox .pic {display: table-cell; vertical-align: middle; width: 330px; padding: 0 30px; margin: 0;}
	.aboutBox .content {display: table-cell; vertical-align: middle; padding: 0 30px 0 0;}
	.aboutBox h3 {text-align: left;}
	/* Steps */
	.stepBox {padding: 0; margin: 0 auto; max-width: 320px;}
	.stepBox .pic {width: auto;}
	.stepBox .pic img {width: auto; max-width: 100%;}
	.sectionSlide.kabinet .stepBox {padding: 70px 0 0 0;}
	.sectionSlide.kabinet .kabImg {max-width: 760px; margin: 0 auto;}
	.sectionSlide.kabinet .kabImg img {width: 100%; height: auto; left: 0; top: 0;}
	.sectionSlide.kabinet .H2 {width: 630px; margin: 0 auto 20px auto;}
	.sectionSlide.kabinet .redNote {margin: 0; position: absolute; right: 48%; top: 230px; float: none;}
	.sectionSlide.kabinet .redNote .inner {}
	
	.listerContainer .lister span {margin: 0 0 0 70px;}
	#photoSlider .filterBox {bottom: 180px;}
	#photoSlider .mainImg img {width: 100%; height: auto; margin: 0;}
}
@media screen and (min-width: 1025px) {
	/* Preloader */
	.preloaderBlock {width: 840px; padding: 0; margin: -140px 0 0 -420px;}
	.preloaderBlock .txt {font: normal 2.8em/1.2 'Petersburg_bold';}
	/* Grid */
	body {min-height: 760px;}
	.pageSection {position: absolute; min-height: 100%;}
	/* Titles */
	h1, .H1 {font: normal 3em/1.2 'Petersburg_bold';}
	h2, .H2 {font: normal 1.825em/1.2 'Petersburg_bold';}
	h3, .H3 {font: normal 1.25em/1.2 'Petersburg_bold';}
	.H1 .title {font: normal 17px/1.2 'Petersburg_regular';}
	/* Footer */
	footer {padding: 40px 50px;}
	#copy {margin: 10px 80px 0 0;}
	/* Header */
	header {padding: 20px 20px 30px 20px;}
	.openMenuIco, .closeIco {display: none;}
	#menuWrap {display: block; position: relative; background: none!important; text-align: left; padding: 10px 0 0 215px;}
	.langToggle {margin: 10px 0 0 25px; float: right;}
	#header .feedback {float: right;}
	#mainMemu {float: left;}
	#mainMemu ul {margin: 0;}
	#mainMemu ul li {margin: 0; display: inline-block; vertical-align: middle; font: normal 0.875em/30px 'MetaPro_normal'; color: #fbf3ee;}
	#mainMemu ul li a {display: block; padding: 0 12px; position: relative;}
	#mainMemu ul li.active a {background: #502d2d;}
	#mainMemu ul li.active {color: #f0d098;}
	#mainMemu ul li a:before, #mainMemu ul li a:after {content: ''; display: block; position: absolute; left: 0; width: 100%; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
	#mainMemu ul li.active a:before {border-bottom: 10px solid #502d2d; border-top: none; top: -10px;}
	#mainMemu ul li.active a:after {border-top: 10px solid #502d2d; border-bottom: none; bottom: -10px;}
	#header.lightHead #mainMemu ul li.active {color: #f0d098;}
	/* Map */
	.mapInfo {width: 390px; margin: 0 0 0 -195px; perspective: 600px; -webkit-perspective: 600px; -ms-perspective: 600px; transform: scale(0.9); -webkit-transform: scale(0.88);}
	.mapInfo .transformOverlay {-webkit-transform-style: preserve-3d; transform-style: preserve-3d;}
	.mapInfo .transformLayout {-webkit-transform:perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); transform:perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); transform-origin: 50% 50% 50px; -webkit-transform-origin: 50% 50% 50px; transition: transform .5s ease;}
	.mapInfo.right .transformLayout {-webkit-transform:perspective(600px) rotateX(0deg) rotateY(2deg) rotateZ(0deg); transform:perspective(600px) rotateX(0deg) rotateY(2deg) rotateZ(0deg);}
	.mapInfo.left .transformLayout {-webkit-transform:perspective(600px) rotateX(0deg) rotateY(-2deg) rotateZ(0deg); transform:perspective(600px) rotateX(0deg) rotateY(-2deg) rotateZ(0deg);}
	.mapInfo .inner {padding: 10px 0;}
	.mapInfo .hide {display: block;}
	.mapInfo .address, .mapInfo .email {margin: 0 30px 5px 30px;}
	.mapInfo .description {margin: 20px 30px 0 30px;}
	.mapInfo .phone {font: normal 3em/1.4 'Petersburg_bold';}
	/* Modal */
	.closeModal {right: -30px;}
	.modalContent {position: relative;}
	/* Sliders */
	.leftArrWrap, .rightArrWrap, .leftArr, .rightArr {display: block;}
	.sectionSlider {width: 100%; height: 100%; min-height: 768px; position: absolute; left: 0; top: 0; padding: 0;}
	.sectionSlider .sectionSlide {position: absolute;}
	.sectionSlider#slideSteps .sectionSlide {height: auto;}
	/* About */
	.aboutBox {width: 900px; margin: 0 auto; padding: 175px 0 100px 0;}
	.aboutBox .pic {width: 400px;}
	/* Steps */
	.viewZone {max-width: 1000px; min-height: 450px; margin: 0 auto; position: relative;}
	.middleSlide {display: block; width: 500px; position: absolute; top: 90px; left: 100%; text-align: center;}
	.middleSlide .txt {display: block; border-bottom: 2px solid #502d2d; padding: 0 0 5px 0; margin: 0 20px;}
	#slideSteps .pageSpace {padding: 130px 10% 70px 10%;}
	#slideSteps .sectionSlide {width: 250px;}
	.stepBox {position: relative; max-width: 100%; font-size: 0.9em;}
	#slideSteps .sectionSlide.kabinet {width: 700px;}
	.sectionSlide.kabinet .stepBox {padding: 0;}
	.sectionSlide.kabinet .H2 {width: auto; font: normal 1.6em/1.2 'Petersburg_bold';}
	.sectionSlide.kabinet .kabImg {max-width: 760px; margin: 0 auto;}
	.sectionSlide.kabinet .kabImg img {width: 80%;}
	
	.sectionSlide.kabinet .redNote {margin: 0; position: absolute; right: 5%; top: 140px; width: 600px; max-width: 600px;}
	.sectionSlide.kabinet .redNote .inner {padding: 15px 10px; height: 80px; font: normal 0.8em/1.5 'MetaPro_book'; width: 300px;}
	.sectionSlide.kabinet .redNote.animated {animation: flipInY 1s both; -webkit-animation: flipInY 1s both;}
	
	.sectionSlide.kabinet .redNote .cornerLeft {height: 60px;}
	.sectionSlide.kabinet .txt01 {right: 75px; bottom: 30px;}
	.sectionSlide.kabinet .txt02 {display: block; position: absolute; left: 20px; bottom: 0; width: 200px;}
	
	/* Sliders */
	#photoSlider .prewiewsLine {display: block;}
	#photoSlider .lister {display: none;}
	.aboutBox .pic img {transform: scale(.5); -webkit-transform: scale(.5);}
	.aboutBox .pic img.animated {transform: scale(1); -webkit-transform: scale(1);}
	
	/* Secret */
	.secret01 .img img {transform: scale(.1); -webkit-transform: scale(.1);}
	.secret01 .img img.animated {transform: scale(1); -webkit-transform: scale(1);}
	.secret01 .redNote01 {right: 19%; max-width: 600px; width: 600px;}
	.secret01 .redNote02 {display: block; left: 50%; top: 160px; max-width: 360px; width: 360px;}
	.secret01 .redNote01.animated {animation: flipInY 1s both; -webkit-animation: flipInY 1s both;}
	.secret01 .redNote01.animated .inner {width: 295px;}
	.secret01 .redNote02.animated {animation: flipInY2 1s both; -webkit-animation: flipInY2 1s both;}
	.secret01 .redNote02.animated .inner {width: 180px; margin: 0 0 0 180px;}
	
	/*.secret01 .txt01 {left: 120px;}
	.secret01 .txt02 {margin: -10% 0 20px 73%;}
	.secret01 .txt03 {margin: 4% 0 50px 120px;}
	.active .secret01 .txt01.animated {left: 20px;}
	.active .secret01 .txt02.animated {margin: -10% 0 20px 53%;}
	.active .secret01 .txt03.animated {margin: 4% 0 50px 20px;}*/
	
	.secret02 .img .pdf {width: 320px; max-width: 320px; left: 9%; margin: 0 0 0 1px;}
	.secret02 .img .pdf a {width: 160px; margin: 0 0 0 160px;}
	.secret02 .img .pdf.animated {animation: flipInY2 1s both; -webkit-animation: flipInY2 1s both;}
	.secret02 .label {margin: 0 0 20px 120px;}
	.secret02 .label.animated {margin: 0 0 20px 0;}
	.secret03 .paints img {max-width: 100%;}
	.secret03 .paints .unit.u01 {left: 7%;}
	.secret03 .paints .unit.u02 {left: 42%;}
	.secret03 .paints .unit.u03 {left: 67%;}
	.secret03 .paints .unit.u01.animated {left: 17%;}
	.secret03 .paints .unit.u02.animated {left: 52%;}
	.secret03 .paints .unit.u03.animated {left: 77%;}
	.secret03 .dopPaint img {position: relative; top: 100px;}
	.secret03 .dopPaint img.animated {top: 0;}
	.secret04 .img img {transform: scale(.5); -webkit-transform: scale(.5);}
	.secret04 .img img.animated {transform: scale(1); -webkit-transform: scale(1);}
	.secret04 .description {position: relative; left: 120px;}
	.secret04 .description.animated {left: 0;}
	.secret04 .cover .unit img {transform: scale(.5); -webkit-transform: scale(.5); transition: all .5s ease; -webkit-transition: all .5s ease;}
	.secret04 .cover.animated .unit img {transform: scale(1); -webkit-transform: scale(1);}
	.secret05 .img img {transform: scale(.5); -webkit-transform: scale(.5);}
	.secret05 .img img.animated {transform: scale(1); -webkit-transform: scale(1);}
	
	.secret06 .img img {-webkit-transform: perspective(400px) rotate3d(0,1,0,-60deg); transform: perspective(400px) rotate3d(0,1,0,-60deg);}
	.secret06 .img img.animated {-webkit-transform: perspective(400px) rotate3d(0,1,0,0deg); transform: perspective(400px) rotate3d(0,1,0,0deg);}
	.secret06 .description {margin: 80px 0 0 0;}

	/*.secret06 .img img {transform: scale(.5); -webkit-transform: scale(.5);}
	.secret06 .img img.animated {transform: scale(1); -webkit-transform: scale(1);}*/
	
	
	
	.secret07 .img img {transform: scale(.5); -webkit-transform: scale(.5);}
	.secret07 .img img.animated {transform: scale(1); -webkit-transform: scale(1);}
	
	.js-animation {opacity: 0; transition: all .5s ease; -webkit-transition: all .5s ease;}
	.animated {opacity: 1;}
	
	@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-90deg);transform:perspective(400px) rotate3d(0,1,0,-90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,20deg);transform:perspective(400px) rotate3d(0,1,0,20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-10deg);transform:perspective(400px) rotate3d(0,1,0,-10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,5deg);transform:perspective(400px) rotate3d(0,1,0,5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}
	@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-90deg);transform:perspective(400px) rotate3d(0,1,0,-90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,20deg);-ms-transform:perspective(400px) rotate3d(0,1,0,20deg);transform:perspective(400px) rotate3d(0,1,0,20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-10deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-10deg);transform:perspective(400px) rotate3d(0,1,0,-10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,5deg);-ms-transform:perspective(400px) rotate3d(0,1,0,5deg);transform:perspective(400px) rotate3d(0,1,0,5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}
	@-webkit-keyframes flipInY2{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}
	@keyframes flipInY2{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);-ms-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}
	/* 3D */
	#canvasPreloader {position: absolute; z-index: 4;}
	.show3D {display: block; width: 100%; position: absolute; top: 150px; left: 0; z-index: 110;}
	.icon3D {width: 85px; height: 67px; background: url(../img/icons.png) -182px -90px no-repeat; background-size: 250px auto; cursor: pointer; float: right; margin: 0 50px 0 0;}
	.hide3D {display: block; width: 65px; position: absolute; top: 150px; right: 0; z-index: 10;}
	.iconDesc {width: 65px; height: 65px; background: url(../img/icons.png) -435px -97px no-repeat; cursor: pointer;}
	#canvasWraper {width: 1200px; margin: 0 auto; padding: 130px 0 0 0; position: relative; cursor: pointer;}
	#secretCanvas {position: relative; z-index: 2;}
	.canvasArrow {opacity: 0; width: 163px; height: 89px; position: absolute; left: 50%; top: 50%; margin: 0 0 0 -80px; background: url(../img/arrow.png) 0 0 no-repeat; transition: all .5s ease; -webkit-transition: all .5s ease;}
	#canvasWraper:hover .canvasArrow {opacity: 1;}
	#loaderBox {width: 400px; height: 500px; position: absolute; left: 50%; top: 50%; margin: -250px 0 0 -200px; color: #fff8f3;}
	#loaderBox .text {width: 400px; font: normal 14px/500px 'MetaPro_normal'; color: #ffe9c2; text-transform: uppercase; text-align: center; }
	#loader {position: absolute; left: 0; top: 0;}
	.canvasPanel {position: fixed; z-index: 999; left: 50%; bottom: 0px; margin: 0 0 0 -175px; display: inline-block; text-align: center; height: 85px; width: 350px; vertical-align: middle; white-space: nowrap; background: rgba(15, 8, 8, 0.7);}
	.canvasPanel li {position: relative; z-index: 999; cursor: pointer; display: block; float: left; width: 70px; height: 85px; line-height: 149px; margin: 0; white-space: nowrap;}
	.canvasPanel li:hover span {display: block; transform: translateZ(0)!important;}
	.cabinetItem {background: url(../img/menu.png) 0px -90px no-repeat;}
	.tableItem {background: url(../img/menu.png) -70px -90px no-repeat;}
	.armItem {background: url(../img/menu.png) -140px -90px no-repeat;}
	.shelvingItem {background: url(../img/menu.png) -210px -90px no-repeat;}
	.rotating {background: url(../img/menu.png) -282px -90px no-repeat;}
	.cabinetItem.active, .cabinetItem:hover {background: url(../img/menu.png) 0px 0px no-repeat;}
	.tableItem.active, .tableItem:hover {background: url(../img/menu.png) -70px 0px no-repeat;}
	.armItem.active, .armItem:hover {background: url(../img/menu.png) -140px 0px no-repeat;}
	.shelvingItem.active, .shelvingItem:hover {background: url(../img/menu.png) -210px 0px no-repeat;}
	.rotating.active, .rotating:hover {background: url(../img/menu.png) -282px 0px no-repeat;}
	.canvasPanel ul {position:relative;}
	.canvasPanel ul:after {content:""; display:block; clear:both;}
	.canvasPanel span {color: #f0d098; text-decoration: none; display: none; font-size: 13px !important; transform: rotateX(0deg) rotateY(0deg) !important; backface-visibility: hidden !important; width: 100%; height: 100%;}
	.canvasPanel:after, .canvasPanel:before {content: ""; width: 7px; height: 100%; position: absolute; top: 0; background: rgba(15, 8, 8, 0.8);}
	.canvasPanel:after {right: -7px; border-radius: 0px 5px 5px 0px;}
	.canvasPanel:before {left: -7px; border-radius: 5px 0px 0px 5px;}
	.currentTop {position:absolute; display: none; top:-10px; margin-left: -49px; width: 70px; height: 95px; -webkit-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54); -moz-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54); -o-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54); -ms-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54); transition: all 400ms cubic-bezier(.16,1.23,.87,1.18);}
	.currentBack {width: 100%; height:100%; position:absolute; background: url(../img/active.png) 0 0 no-repeat;}
	.cabinetItem:hover ~ .currentTop {display: block; left:48px;}
	.tableItem:hover ~ .currentTop {display: block; left: 118px;}
	.armItem:hover ~ .currentTop {display: block; left: 189px;}
	.shelvingItem:hover ~ .currentTop {display: block; left: 260px;}
	.rotating:hover ~ .currentTop {display: block; left: 329px;}
	
	.pointBlock {width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 3;}
	.pointBlock .tIcon {width: 58px; height: 58px; cursor: pointer; background: url(../img/tip_throbber.png) no-repeat left center; position: absolute; z-index: 2; -webkit-animation: throb .5s steps(12) alternate infinite; -moz-animation: throb .5s steps(12) alternate infinite; animation: throb .5s steps(12) alternate infinite;}

	.throbberBlock {width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;}
	.throbberBlock .throbber {width: 600px; position: absolute; display: none;}
	.throbberBlock .throbber .inner {width: 300px; padding: 5px 15px; background: #982a2a; color: #fff; text-transform: uppercase; font: normal 0.7em/1.5 'MetaPro_book'; position: relative;}
	.throbberBlock .throbber.left .inner {margin: 10px 0;}
	.throbberBlock .throbber.right .inner {margin: 10px 0 10px 300px; text-align: right;}
	
	.throbberBlock .throbber .cornerTop, .throbberBlock .throbber .cornerBottom {height: 10px; width: 100%; position: absolute;}
	.throbberBlock .throbber .cornerTop {top: -10px;}
	.throbberBlock .throbber .cornerBottom {bottom: -10px;}
	.throbberBlock .throbber .bg {background: #982a2a; height: 10px;}
	.throbberBlock .throbber .cornerTop:before, .throbberBlock .throbber .cornerBottom:before {content: ''; display: block; width: 10px; height: 10px; position: absolute;}
	.throbberBlock .throbber .cornerTop:before {bottom: 0;}
	.throbberBlock .throbber .cornerBottom:before {top: 0;}
	.throbberBlock .throbber.left .cornerTop, .throbberBlock .throbber.left .cornerBottom {left: 0;}
	.throbberBlock .throbber.left .cornerTop:before, .throbberBlock .throbber.left .cornerBottom:before {left: 0;}
	.throbberBlock .throbber.left .bg {margin: 0 0 0 10px;}
	.throbberBlock .throbber.left .cornerTop:before {background: url(../img/icons.png) -29px -86px no-repeat; background-size: 250px auto;}
	.throbberBlock .throbber.left .cornerBottom:before {background: url(../img/icons.png) -29px -99px no-repeat; background-size: 250px auto;}
	.throbberBlock .throbber.right .cornerTop, .throbberBlock .throbber.right .cornerBottom {right: 0;}
	.throbberBlock .throbber.right .cornerTop:before, .throbberBlock .throbber.right .cornerBottom:before {right: 0;}
	.throbberBlock .throbber.right .bg {margin: 0 10px 0 0;}
	.throbberBlock .throbber.right .cornerTop:before {background: url(../img/icons.png) -43px -86px no-repeat; background-size: 250px auto;}
	.throbberBlock .throbber.right .cornerBottom:before {background: url(../img/icons.png) -43px -99px no-repeat; background-size: 250px auto;}
	.throbberBlock .throbber.left.animated {animation: flipInY 1s both; -webkit-animation: flipInY 1s both;}
	.throbberBlock .throbber.right.animated {animation: flipInY2 1s both; -webkit-animation: flipInY2 1s both;}
	@-webkit-keyframes throb {from {background-position: 0px 0px}to {background-position: -696px 0px}}
	@-moz-keyframes throb {from {background-position: 0px 0px}to {background-position: -696px 0px}}
	@keyframes throb {from {background-position: 0px 0px}to {background-position: -696px 0px}}
}
@media screen and (min-width: 1025px) and (min-height: 800px) {
	/* Sliders */
	.listerContainer {bottom: 30px;}
	/* Secret */
	.secret01, .secret02, .secret03, .secret04, .secret05, .secret06, .secret07 {max-width: 1000px;}
	.secret01 .redNote01 {right: 28%; top: 125px;}
	.secret01 .redNote02 {left: 56%;}
	.secret02 .img .pdf {left: 18%; margin: 0 0 0 2px;}
}
@media screen and (min-width: 1025px) and (min-height: 1200px) {
	/* Sliders */
	.listerContainer {bottom: 80px;}
	/* Steps */
	.viewZone {max-width: 1400px;}
	.sectionSlide.kabinet .stepBox, .sectionSlide.kabinet .kabImg {max-width: 1200px;}
	.sectionSlide.kabinet .kabImg img {width: 100%;}
	#slideSteps .sectionSlide.kabinet {width: 100%;}
	.sectionSlide.kabinet .redNote {right: 23%; top: 200px;}
}
@media screen and (min-width: 1150px) {
	/* Header */
	header {padding: 20px 30px 30px 30px;}
	#menuWrap {padding: 10px 0 0 230px;}
	.langToggle {margin: 10px 0 0 40px;}
	#mainMemu ul li a {display: block; padding: 0 15px;}
	/* Map */
	#mapCanvas {height: 100%;}
}