/*===================================
=            Main styles            =
===================================*/
#content {
    max-height: 100%;
    height: 100%;
    width: 100%;
    /*width:auto;*/
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility !important;
    font-family: 'Calibri', sans-serif;
    background: #1f649f;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFmNjQ5ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzFmNjQ5ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzNkM2MzZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZDNjM2UiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1f649f), color-stop(50%,#1f649f), color-stop(51%,#3d3c3e), color-stop(100%,#3d3c3e));
    background: -webkit-linear-gradient(top, #1f649f 0%,#1f649f 50%,#3d3c3e 51%,#3d3c3e 100%);
    background: linear-gradient(to bottom, #1f649f 0%,#1f649f 50%,#3d3c3e 51%,#3d3c3e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f649f', endColorstr='#3d3c3e',GradientType=0 );
}
.footer {
    position: fixed;
    z-index: 27;
}



/*-----  End of Main styles  ------*/

/*==============================
=            Points            =
==============================*/

.point-wrapper {
    position: absolute;
    z-index: 9;
}

.pw1 {left: 264px; top: 409px;}
.pw2 {left: 477px; top: 265px;}
.pw3 {left: 1008px;top: 227px;}
.pw4 {left: 1576px;top: 276px;}
.pw5 {left: 2270px;top: 235px;}

.point_left_side {
    display: inline-block;
    text-align: left;
    float: left;
    position: relative;
    z-index: 9;
}

.point-heading {
    display: inline-block;
    padding: 8px 9px;
    background-color: #ffdc2e;
    text-transform: uppercase;
    margin: 1px 0 10px 0;

    font-family: 'Calibri', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #000;
    position: relative;
    cursor: pointer;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.point-wrapper.active .point-heading:after {
    content: " ";
    display: block;
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 100%;
    height: 12px;
    background: url("../images/point-heading--shadow.png") no-repeat;
}
.pw1 .point-heading.active:after {
    background: url("../images/point-description1--shadow.png") no-repeat;
    height: 13px;
    bottom: -13px;
}
.point {
    display: block;
    margin: 0 auto;
    width: 33px;
    height: 41px;
    background: url("../images/nivelirov_point.png") no-repeat 0 0;
    cursor: pointer;
    overflow: hidden;
}

.point-wrapper.active .point{
    background-position: right 0;
}

.point-description {
    color: #000000;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    line-height: 1.25rem;

    position: absolute;
    top: -9999px;
    display: block;
    left: 100%;
    border-style: solid;
    border-width: 0 25px 34px 0;
    border-color: transparent;

    -webkit-border-image: url("../images/point-description--shadow.png") 25 25 35 35 stretch;
        -ms-border-image: url("../images/point-description--shadow.png") 25 25 35 35 stretch;
            border-image: url("../images/point-description--shadow.png") 25 25 35 35 stretch;

    -webkit-border-image-width: 25px 25px 35px 35px;
       -moz-border-image-width: 25px 25px 35px 35px;
        -ms-border-image-width: 25px 25px 35px 35px;
         -o-border-image-width: 25px 25px 35px 35px;
            border-image-width: 25px 25px 35px 35px;     /* Firefox 3.6*/  /* Safari 4? Chrome 6?*/

    -webkit-background-clip: content;  /* Safari 4? Chrome 6?*/
       -moz-background-clip: content;     /* Firefox 3.6*/
        background-clip: content-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
}
.point-wrapper.active .point-description {
    top: 0;
    display: inline-block;
}
.pw1 .point-description{ border-width: 0 13px 13px 0; border-image-width: 13px 13px 13px 0;}
.pw2 .point-description{ border-width: 0 16px 24px 0; border-image-width: 16px 16px 24px 24px;}
.pw3 .point-description{ border-width: 0 20px 37px 0; border-image-width: 20px 20px 37px 37px;}
.pw5 .point-description{ border-width: 0 13px 20px 0; border-image-width: 13px 13px 20px 20px;}

.point-description-content>a, .pw4 p>a{
    color: #0096d7;
    text-decoration: none;
    position: relative;
    display: inline-block;
}
.point-description-content>a:after, .pw4 p>a:after{
    position: absolute;
    content: " ";
    display: block;
    bottom: 0;
    left: 0;
    height: 0;
    width: 100%;
    border-top: 1px solid #c8e1f3;
    border-bottom: 1px solid #66b3e1;
    word-break: keep-all;
}
.point-description-content>a:hover:after,.pw4 p>a:hover:after,.pw4 p>a.active:after{
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}
.point-description p, .point-description span, .point-description ol {
    padding-top: 0;
}
.pw3 li {
    margin-bottom: 25px;
}
.pw3.active .point-description,.pw4.active .point-description {top: -1px;}

.point-description-content{
    position: relative;
    border: solid 1px #939598;
    background-color: #fff;
    border-radius: 2px;
}
.pw1 .point-description-content { padding: 7px 0;               width: 60px;  text-align: center; }
.pw2 .point-description-content { padding: 28px;                width: 221px; }
.pw3 .point-description-content { padding: 28px 33px 28px 42px; width: 365px; }
.pw4 .point-description-content {                               width: 510px; }
.pw5 .point-description-content { padding: 27px 31px;           width: 165px; }

.pw4 .point-description .pw_header {
    padding: 28px 28px 0;
}

.pw4 .point-description .pw_header p {
    margin-top: 0;
}
/*-----  End of Points  ------*/

/*==================================
=            First plan            =
==================================*/

.camera {
    width: 297px;
    height: 490px;
    position: absolute;
    left: 11px;
    bottom: 60px;
    z-index: 9;
	pointer-events: none;
    -webkit-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
            transform-origin: bottom left;
}

.h_logo {
    position: fixed;
    left: 116px;
    top: 110px;
    z-index: 9;
	pointer-events: none;
    -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
            transform-origin: top left;
}

.clouds {
    position: fixed;
    left: 608px;
    top: 125px;
    z-index: 9;
	pointer-events: none;
    -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform-style: flat;
            transform-style: flat;
}


.like_up, .like_down {
    display: block;
    width: 41px;
    height: 40px;
    background-image: url("../images/finger--sprite.png");
    position: absolute;
    right: 30px;
    cursor: pointer;
}

.like_up   {   top: 93px;  background-position: 0 40px;}
.like_down { bottom: 94px; background-position: 0  0   }

/*-----  End of First plan  ------*/

/*==============================
=            Slider            =
==============================*/

.slider-wrapper {
    width: 510px;
    height: 149px;
    position: relative;
    background-color: #929497;
}
.slide-content {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    margin: 0 auto;
    padding-left: 1px;
}


.slide-content h4 {
    display: inline-block;
    color: #fff;
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0;
    margin-top: 0;
    text-transform: uppercase;
    text-align: left;
    text-indent: -1em;
    margin-left: 20px;
}
.slide-content h4.center {
    text-align: center;
    width: 100%;
    margin-left: 0;
    text-indent: 0;
}

.slide-content p {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    display: inline-block;
    text-align: left;
    margin-left: 20px;
    margin-bottom: 0;
}

/*-----  End of Slider  ------*/

/* ================================== *\
    HORIZONTAL SCROLLING
\* ================================== */
.code {
    width: 2560px;
    height: 774px;
    background: url("../images/bg_nivelirovanie.jpg") no-repeat;
    float: left;
    position: relative;
    white-space: normal;
    display: block;
}


.code2 {
    /*float: right;*/
    z-index: 8;
}

.arr {
    position: fixed;
    height: 100%;
    width: 100px;
    top: 0;
    cursor: pointer;
}

.arr--left {
    left: 0;
    z-index: 9;
}

.arr--right {
    right: 0;
    background: url("../images/meter.png") repeat-y right top;
    z-index: 9;
}

.horizontal_scrolling {
    width: 100%;
    height: 774px;
    position: relative;
	background: url("../images/bg_nivelirovanie_hack.png") repeat-x;
    -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
            transform-origin: top left;
}

/* Social tools */
.social-tools{
    top: 110px;
    right:130px;
    width: 330px;
    height: 30px;
    position: fixed;
    z-index: 9;
    -webkit-transform-origin: top right;
        -ms-transform-origin: top right;
            transform-origin: top right;
}
.social-tools tr td{
    padding-right: 10px;
}
#vk_like_0{
    width: 85px !important;
    overflow: hidden;
}
.social-tools .tw iframe{
    vertical-align: middle;
}




/* ================================== *\
             IE10 Styles
\* ================================== */
html[data-useragent*='MSIE 10.0'] .point-description{
    -pie-png-fix: true;
    border: 0;
}
html[data-useragent*='MSIE 10.0'] .point-heading{
    z-index: 9;
}
html[data-useragent*='MSIE 10.0'] .pw5 .point-description-content{
    width: 166px !important;
}
html[data-useragent*='MSIE 10.0'] .pw1 .point-description-content{
    width: 62px;
}
html[data-useragent*='MSIE 10.0'] .point-description:after{
    content: " ";
    display: block;
    position: absolute;
    border: 0;
    left: 0;
    top: 0;
    z-index: -1;
    overflow: hidden;
}
html[data-useragent*='MSIE 10.0'] .pw1.active .point-description{top: 0}
html[data-useragent*='MSIE 10.0'] .pw3.active .point-description{top: 0}
html[data-useragent*='MSIE 10.0'] .pw4.active .point-description{top: 0}
html[data-useragent*='MSIE 10.0'] .pw1.active .point-description:after{ width: 74px;  height: 49px;  background: transparent url("../images/ie-shadow/pw1d.png") no-repeat;}
html[data-useragent*='MSIE 10.0'] .pw2.active .point-description:after{ width: 295px; height: 142px; background: transparent url("../images/ie-shadow/pw2d.png") no-repeat;}
html[data-useragent*='MSIE 10.0'] .pw3.active .point-description:after{ width: 466px; height: 353px; left:-4px; background: transparent url("../images/ie-shadow/pw3d.png") no-repeat;}
html[data-useragent*='MSIE 10.0'] .pw4.active .point-description:after{ width: 535px; height: 550px;  background: transparent url("../images/ie-shadow/pw4d.png") no-repeat;}
html[data-useragent*='MSIE 10.0'] .pw5.active .point-description:after{ width: 242px;  height: 124px;  background: transparent url("../images/ie-shadow/pw5d.png") no-repeat;}