@font-face {
    font-family: "GothamProRegular";
    src: url("../font/GothamProRegular.eot");
    src: url("../font/GothamProRegular.eot?#iefix")format("embedded-opentype"),
    url("../font/GothamProRegular.woff") format("woff"),
    url("../font/GothamProRegular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "GothamProBold";
    src: url("../font/GothamProBold.eot");
    src: url("../font/GothamProBold.eot?#iefix")format("embedded-opentype"),
    url("../font/GothamProBold.woff") format("woff"),
    url("../font/GothamProBold.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'rouble';
    src: url('../font/rouble-webfont.eot');
    src: url('../font/rouble-webfont.eot?#iefix') format('embedded-opentype'),
    url('../font/rouble-webfont.woff') format('woff'),
    url('../font/rouble-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.rouble {
    font-family: 'rouble';
}


* { margin:0; padding:0; }
a, img { outline: none; }
img {max-width: 100%}
/*html{ background-color: #e5e5e5}*/
body { width: 100%; height:100%; font-size:14px; color:#000; font-family: GothamProRegular; font-weight:400; margin: 0; padding: 0; }
table{border-spacing: 0}
input{outline: none}

a { color: #000; text-decoration: none;}
a:hover {text-decoration: none; color:#61569d;}
a:active { color: inherit;}
a:visited { color: inherit; border-bottom: 1px solid #bbbbbb;}

.white_lined{
    color: white!important;
    padding: 0 6px;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,1) 81%, rgba(0,0,0,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(80%,rgba(0,0,0,0)), color-stop(81%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,1)));
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 80%,rgba(0,0,0,1) 81%,rgba(0,0,0,1) 100%);
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 80%,rgba(0,0,0,1) 81%,rgba(0,0,0,1) 100%);
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 80%,rgba(0,0,0,1) 81%,rgba(0,0,0,1) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 80%,rgba(0,0,0,1) 81%,rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00006ec9', endColorstr='#006ec9',GradientType=0 );
}

.black_lined{
    color: black;
    /*padding: 0 6px;*/
    position: relative;
    font-family: GothamProBold;
    cursor: pointer;
    /*background: -moz-linear-gradient(top,  rgba(17,73,255,0) 0%, rgba(17,73,255,0) 80%, rgba(17,73,255,1) 81%, rgba(17,73,255,1) 100%);*/
    /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(17,73,255,0)), color-stop(80%,rgba(17,73,255,0)), color-stop(81%,rgba(17,73,255,1)), color-stop(100%,rgba(17,73,255,1)));*/
    /*background: -webkit-linear-gradient(top,  rgba(17,73,255,0) 0%,rgba(17,73,255,0) 80%,rgba(17,73,255,1) 81%,rgba(17,73,255,1) 100%);*/
    /*background: -o-linear-gradient(top,  rgba(17,73,255,0) 0%,rgba(17,73,255,0) 80%,rgba(17,73,255,1) 81%,rgba(17,73,255,1) 100%);*/
    /*background: -ms-linear-gradient(top,  rgba(17,73,255,0) 0%,rgba(17,73,255,0) 80%,rgba(17,73,255,1) 81%,rgba(17,73,255,1) 100%);*/
    /*background: linear-gradient(to bottom,  rgba(17,73,255,0) 0%,rgba(17,73,255,0) 80%,rgba(17,73,255,1) 81%,rgba(17,73,255,1) 100%);*/
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00006ec9', endColorstr='#006ec9',GradientType=0 );*/
}
.black_lined:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    /*bottom: -.4em;*/
    height: 1px;
    /*height: .25em;*/
    width: 100%;
    background-color: #1149ff;
    transition: height .3s ease;
}
.black_lined:hover:after{
    height: 5px;
    /*height: .4em;*/
    /*background: none;*/
    /*color: #1149FF!important;*/
}
#first_section .title h2 .black_lined {
    display: inline-block;
    color: #1149ff;
    font-family: GothamProRegular;
}
#first_section .title h2 .black_lined:after {
    bottom: 5px;
}

h1, .h1 {font-family: GothamProBold; font-size: 58px; line-height: 60px}
h2, .h2 {}
h3, .h3 {}
h4, h5, h6 {}
p {font-size: 22px; margin: 10px 0; line-height: 35px}
ul { list-style-type: none; margin: 17px 0 20px 0; padding:0; }
li { margin: 0 0 19px 0; padding:0;}
ol {margin: 20px 0 20px 0; padding:0 0 0 16px; }
ol li { background:none; padding:0; margin: 0 0 19px 0; }

.wrap { margin: 0 auto; width: 1180px; padding:0; /*overflow: hidden*/}
.bold, b{font-family: GothamProBold; font-weight: 500}
.text-center{text-align: center}
.text-justify{text-align: justify!important;}
.clear{float: none; clear: both; display: block}
.inline-block{display: inline-block!important;}
.inline{display: inline!important;}
.left{float: left}
.right{float: right}
.bold{font-family: GothamProBold}
.sub{vertical-align: sub; font-size: 50%}
section{width: 100%}

.btn{padding: 25px 35px; text-align: center; font-size: 22px; cursor: pointer; background-color: #1149ff; color: white; display: inline-block}
.btn:hover{color: white; background: black}

p.base-text{font-family: roboto; font-size: 15px; line-height: 25px; margin: 20px 0}

.space10{height: 10px;float: none; clear: both}
.space20{height: 20px;float: none; clear: both}
.space30{height: 30px;float: none; clear: both}
.space40{height: 40px;float: none; clear: both}
.space50{height: 50px;float: none; clear: both}
.space75{height: 75px;float: none; clear: both}
.space100{height: 100px;float: none; clear: both}
.space150{height: 150px;float: none; clear: both}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.flipV{
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}
.rotate_left{
    transform-origin: left top;
    moz-transform:rotate(-90deg); /* Firefox */
    -webkit-transform:rotate(-90deg); /* Webkit */
    -ms-transform:rotate(-90deg); /* IE */
    -o-transform:rotate(-90deg); /* Opera */
    transform:rotate(-90deg); /* future */
    position:absolute;
}
.rotate_right{
    transform-origin: right top;
    moz-transform:rotate(90deg); /* Firefox */
    -webkit-transform:rotate(90deg); /* Webkit */
    -ms-transform:rotate(90deg); /* IE */
    -o-transform:rotate(90deg); /* Opera */
    transform:rotate(90deg); /* future */
    position:absolute;
}

.bg-gray{background-color: #e5e5e5}
.text-gray{color: #313131}
.text-blue{color: #09bff3}
.text-red{color: #fc021f}
.text-green{color: #0ad48a}
.text-purple{color: #e20095}
.text-orange{color: #ffaa06}
.text-lilac{color: #a25aff}
.line{position: absolute; height: 2px; display: block}

h1.animated, .h1.animated {overflow: hidden}
h1.animated span, .h1.animated span {position: relative; top: 120px; transition: top ease 750ms}
h1.animated span.visible, .h1.animated span.visible {top: 0}

.callback input[type=text]{border: none; border-bottom: 4px solid black; padding: 6px 4px 6px; }
.callback input[type=submit]{background-color: #1149ff; color: white; text-align: center; padding: 15px 30px; border: none; margin: 0 0 0 5px; position: relative; top: -4px; cursor: pointer; -webkit-appearance: none;}
.callback input[type=submit]:hover{background: black}
.callback p:last-of-type{font-size: 13px; font-family: roboto}

#menu{width: 365px; padding: 50px 0 50px 100px; background: white; position: fixed; left: -465px; top: 0; bottom: 0; z-index: 15; font-family: GothamProRegular; transition: left 0.75s cubic-bezier(0, 0, 0.1, 1); overflow-y: auto; background-color: #fafafa;}
#menu > .menu-container {
    height: auto;
}
#menu a, #menu span{color: #1149ff; font-size: 22px; display: block; margin-bottom: 25px}
#menu a:hover{color: #000}
#menu span.current{color: #c9c9c9}
#menu p.adres{font-size: 13px; font-family: roboto}
#menu.open{left: 0}

#menu_btn{position: fixed; top: 0; left: 0; z-index: 16; cursor: pointer; transition: left 0.75s cubic-bezier(0, 0, 0.1, 1); margin-left: 0}
#menu_btn.open{left: 441px}
#menu_btn div{height: 20px; width: 22px; padding: 14px 13px; background: #1a1a1a; display: inline-block}
#menu_btn p{display: inline-block; font-size: 17px; font-family: roboto; vertical-align: top; margin: 13px 0 0 8px; ; color: black!important;}
#menu_btn span{margin-bottom: 7px; width: 22px; height: 2px; background: #efefef; display: block; position: relative; text-indent: 100%; overflow: hidden; white-space: nowrap;
    -moz-transition: all 0.75s cubic-bezier(0, 0, 0.1, 1);
    -o-transition: all 0.75s cubic-bezier(0, 0, 0.1, 1);
    -webkit-transition: all 0.75s cubic-bezier(0, 0, 0.1, 1);
    transition: all 0.75s cubic-bezier(0, 0, 0.1, 1);
}
#menu_btn.open span:first-of-type{
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 4.5px; left: -3px; width: 14px;
}

#menu_btn.open span:last-of-type{
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -4.5px; left: -3px; width: 14px;
}

#left_slide_menu {left: 60px; z-index: 10; position: fixed}
#left_slide_menu a,#left_slide_menu span{display: inline-block; text-align: center; font-family: roboto; font-size: 13px; font-weight: 500; color: black; margin: 0 5px}
#left_slide_menu a:hover,#left_slide_menu a.active{color: #1149ff; text-transform: uppercase;}

#right_slide_menu {right: 60px; z-index: 10; position: fixed; bottom: 200px}
#right_slide_menu a{display: inline-block; text-align: center; font-family: roboto; font-size: 13px; font-weight: 500; color: black}
#right_slide_menu a:hover,#left_slide_menu a.active{color: #1149ff; text-transform: uppercase;}

/*  Roket OLD*/
/*
#rocket{text-align: center; font-family: roboto; font-size: 13px; position: fixed; right: 50px; bottom: 50px; height: 91px;
    z-index: 10; background-image: url("../img/rocket.png"); background-position: left; background-size: 70px 91px;
    background-repeat: no-repeat; width: 35px; cursor: pointer; display: none}
#rocket:hover{background-position: right}
*/
#rocket{text-align: center; font-family: roboto; font-size: 13px; position: fixed; right: 33px; /*bottom: 80px;*/ bottom: 30px; height: 91px;
    z-index: 10; background-image: url("../img/rocket.svg"); background-size: contain; background-size: 25px 65px; background-position: top center;
    background-repeat: no-repeat; width: 35px; cursor: pointer; display: none;}
#rocket:hover{background-image: url('../img/rocket-hover.svg');background-size: 24px 91px;}
#rocket span{display: block; margin-top: 60px}
#rocket:hover span{display: none}

#logo{width: 192px; height: 43px; margin: auto; display: block; position: relative; transform: scale(0.75);}
#logo span{display: block; position: absolute}
#logo .a{left: 0;}
#logo .z{left: 47px; transition: transform ease 500ms}
#logo .ot{left: 96px}
#logo .num_2{left: 96px; top: 38px; opacity: 0; transition: opacity ease 500ms}
#logo:hover .z{
    transform-origin: center;
    moz-transform:rotate(90deg); /* Firefox */
    -webkit-transform:rotate(90deg); /* Webkit */
    -ms-transform:rotate(90deg); /* IE */
    -o-transform:rotate(90deg); /* Opera */
    transform:rotate(90deg); /* future */
    position:absolute;
}
#logo:hover .num_2{opacity: 1}

ul.social{list-style: none; margin-top: 35px}
ul.social li{display: inline-block; margin-right: 15px; width: 30px;  height: 26px; overflow: hidden;  }
ul.social li a:hover img{position: relative; top: -26px}

.col3-img img{max-width: 32%}
.col3-img img:nth-of-type(2){margin-left: 2%; margin-right: 2%}

#crystal{}
#crystal .crystal{width: 800px; margin-left: 400px; height: 450px; background-repeat: no-repeat; background-position: left top; padding: 10px; box-sizing: border-box; position: relative; margin-bottom: 100px}
#crystal .crystal div.desc{position: absolute; right: 0; bottom: 0; width: 65%;}
#crystal .el_name{width: 140px; height: 140px; box-sizing: border-box; border: 5px solid black; position: relative; margin-left: -70px;}
#crystal .el_name .num{font-family: roboto; font-weight: 300; font-size: 18px; position: absolute; top: 5px; left: 10px}
#crystal .el_name .name{text-align: center; font-family: GothamProBold; font-size: 47px; line-height: 120px; margin: 0}
#crystal .el_name .desc{text-align: center; font-family: roboto; font-size: 14px; position: absolute; width: 100%; line-height: 1.2; bottom: 0}
#crystal .slide_down{margin: 30px auto 0; background-image: url("../img/slide_down.png"); background-position: center top; background-size: 25px 140px; background-repeat: no-repeat; height: 140px; padding-top: 45px; padding-bottom: 30px; box-sizing: border-box}

#element_description{padding-top: 80px; padding-bottom: 50px;}
#element_description div.white,
div.white{padding: 40px 100px; background-color: white; font-size: 30px; font-family: "GothamProBold"; line-height: 45px}
div.grey {padding: 40px 50px; background-color: #e5e5e5; font-size: 22px; font-family: "GothamProBold"; line-height: 45px}
#demo{margin-top: 80px; text-align: center;}
#demo > .img{display: inline-block; border: 5px solid #cfcfcf; width: 700px; margin: 0; padding: 0; box-sizing: border-box}
#demo > .img img{width: 100%; display: block}
#demo > .text{max-width: 150px; margin-left: 15px; display: inline-block; vertical-align: top; text-align: left;}
#demo > .text p{font-size: 13px; font-family: roboto; line-height: inherit;}
#demo #all_project{margin-top: 0; float: right}

#text_blocks{margin-top: 75px}
#text_blocks .left{width: 73%; line-height: 35px}
#text_blocks .right{width: 22%}
#text_blocks p{margin: 40px 0}
#text_blocks p.lined{padding-left: 55px; border-left: 5px solid #1f53fd}
#text_blocks p.psmall {font-size: 14px; font-style: italic;margin-top: 20px; line-height: 20px;}
#text_blocks a{color: #1f53fd}
#text_blocks .black_lined{color: black}
#text_blocks p.title{font-size: 30px; font-family: GothamProBold; margin-top: 85px}
#text_blocks li {font-size: 18px; margin-left: 60px; list-style: disc;}


#whom {margin-top: 50px}
#whom p.title{font-family: GothamProBold; font-size: 65px}
#whom p.desc{width: 550px;}
#whom .not_fit {margin-left: 450px}
#whom .not_fit p.base-text{margin: 10px 0}
#whom .not_fit p.title{font-family: GothamProBold; font-size: 22px}
#whom li{font-size: 18px;margin-left: 50px;}

#for-against{width: 75%; margin: 30px auto; text-align: center; background-image: url("../img/for-against.png");
    background-position: center top; background-repeat: no-repeat; padding-top: 40px; background-size: contain}
#for-against p{font-size: 20px; line-height: 30px; margin-top: 65px}
#for-against p.for{float: left; width:350px; display: inline-block; text-align: left}
#for-against p.against{float: right; width:350px; display: inline-block; text-align: left}
#for-against li.fr {float: left; width:350px; display: inline-block; text-align: left; font-size: 18px;}
#for-against li.against {float: right; width:350px; display: inline-block; text-align: left;font-size: 18px;}

.whatnext { margin-top: 100px; text-align: left;}
.whatnext p {margin-top: 15px;}

.howtodo {margin-top: 75px;}
.howtodo p.stage {margin-top: 30px; font-size: 35px; font-family: GothamProBold}
.howtodo p.lined {margin-top: 15px; padding-left: 55px; border-left: 5px solid #1f53fd}
.howtodo .hlined {padding-left: 55px; margin-top: 15px; border-left: 5px solid #1f53fd}
.howtodo .ulstage {padding-left: 65px; font-size: 22px;}
.howtodo .instage {padding-left: 75px;}
.howtodo .ustage {font-size: 22px;list-style: disc}
.howtodo .instage li {list-style-type: circle}
.howtodo .sermstage {padding-left: 75px; font-size: 22px;}
.howtodo .sermstage li {list-style-type: circle;}
.howtodo .pstage {margin-left: 50px; margin-top: 20px;}

.ttitle {font-size: 65px; font-family: GothamProBold; line-height:normal}
.ltitle {font-size: 35px; font-family: GothamProBold}
.itdesc {font-size: 17px; font-style: italic}
.lttitle {font-size: 25px; font-family: GothamProBold}

#work_steps{background: white; padding: 45px 0; margin-top: 50px;}
#work_steps li span{display: inline-block; width: 85%; vertical-align: top; color: #e5e5e5; font-family: GothamProBold}
#work_steps li span:first-child{width: 10%}
#work_steps li.active span{font-size: 35px; color: black}

#first_section .top{height: 50px; padding: 40px; position: relative}
#crystal .top{height: 120px; padding: 40px 40px 0 40px; position: relative}
/*#first_section .title{padding-left: 225px; position: relative; width: 70%}*/
#first_section .title .line{width: 65px; background-color: #1f53fd; left: 140px; top: 29px}
#first_section .title span.num{font-size: 80%}
#first_section .title p{line-height: 31px}

#first_section .middle{margin: 65px 0 0 0}
#first_section .bottom{ width: 100%; background-color: white; /*margin: 80px 0 0 0;*/ margin: 0; margin-bottom: 80px;}
#first_section .callback p:first-of-type{font-size: 21px}
#first_section .callback input[type=submit]{font-size: 17px;}
#first_section .callback form span{font-size: 35px;}
#first_section .callback input[type=text]{ font-size: 35px; width: 260px}
#first_section .callback form{margin: 30px 0 5px; font-family: GothamProRegular}
#first_section .callback{text-align: center; padding: 10px; border: 5px solid #1149ff;}

#marketing_table{width: 78%; font-size: 23px; /*float: left;*/ margin: 0 auto;}
#marketing_table table{border-spacing: 10px 30px; position: relative; left: -10px; margin: -10px 0 0 0}
#marketing_table tr td:first-of-type{border: none; width: 30px; text-align: center; font-family: roboto; font-weight: 700; vertical-align: top}
#marketing_table tr th{text-align: right; font-family: roboto; font-weight: 700; position: relative; top: 20px}
#marketing_table tr td{width: 123px; height: 123px; border: 5px solid #000; position: relative; text-align: center}
#marketing_table tr td.empty{border-color: white}
#marketing_table tr td:not(.empty){cursor: pointer}
#marketing_table tr td:not(.empty):hover{background-color: #000}
#marketing_table tr td:hover p,#marketing_table tr td:hover span{color: white!important}
#marketing_table span.num{font-family: roboto; font-weight: 300; font-size: 18px; position: absolute; top: 5px; left: 10px}
#marketing_table p{margin: 0}
#marketing_table p.name{font-family: GothamProBold; font-size: 47px; /*margin-top: -10px*/}
#marketing_table p.desc{font-family: roboto; font-size: 13px; /*position: absolute; */text-align: center; width: 100%; line-height: 1.2; margin-top: 7px;}
#marketing_table tr td > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 30px;
    /*justify-content: center;*/
}

#all_project{width: 22%; float: left; margin-top: 78px; text-align: center}
#all_project .project .main{display: table}
#all_project .project .hover{display: none; position: absolute; height: 100%; width: 100%; box-sizing: border-box; left: 0; padding: 20px; animation-duration: 0.5s; text-align: left;}
#all_project .project .lined_a .line{background-color: #000; left: -2px; width: 104px}
#all_project .project .hover .desc{height: 170px; font-size: 22px; color: white; line-height: 1.5}
#all_project .project .hover .url{font-size: 16px; color: #000000; font-family: GothamProBold}
#all_project .project .hover .url .white_lined{color: #fff; font-size: 16px}
#all_project .project .hover .url .white_lined:hover{color: black!important; background: none}
#all_project .project{width: 100%; height: 297px; margin-bottom: 30px; overflow: hidden; position: relative}
#all_project .img{height: 200px; background-repeat: no-repeat; background-position: center; background-size: cover}
#all_project .name{height: 97px; background: white; padding: 0 30px}
#all_project .name a{color: #1149ff; font-size: 18px; font-family: roboto; font-weight: 500}
#all_project .white_lined{/*font-size: 21px;*/ font-family: GothamProBold; color: white;}

#marketing_table_mobile{width: 100%; display: none;}
#marketing_table_mobile div{border: 4px solid #000; text-align: center; position: relative; height: 70px; width: 120px; margin: 5px; cursor: pointer; float: left; padding: 25px 0}
#marketing_table_mobile div:hover{background-color: #000}
#marketing_table_mobile div:hover p,
#marketing_table_mobile div:hover span{color: white!important;}
#marketing_table_mobile span.num{font-family: roboto; font-weight: 300; font-size: 14px; position: absolute; top: 3px; left: 5px}
#marketing_table_mobile p.name{font-family: GothamProBold; font-size: 40px; margin: 0;}
#marketing_table_mobile p.desc{font-family: roboto; font-size: 12px; text-align: center; width: 100%; line-height: 1.2; margin: 0}

section div.title p.desc{line-height: 37px; width: 630px; max-width: 100%;}

#cases{margin: 100px 0 75px}
#cases div.title h1, #cases div.title .h1{position: absolute}
#cases div.title{background-image: url("../img/case.png"); background-size: 121px 146px; background-position: 146px 20px; background-repeat: no-repeat; padding: 55px 0}
#cases div.title p.desc{margin-left: 280px; margin-top: 23px}
#cases.inner div.title{height: 55px; background-position: 270px 20px}

#main_slider{position: relative; width: 100%; overflow: hidden}
#main_slider .main_slider_container{width: 100%; position: relative; height: 520px}
#main_slider .slide{background-position: center; background-repeat: no-repeat; background-size: cover; height: 520px; width: 1920px; position: absolute; display: none}
#main_slider .slide:first-of-type{display: block}
#main_slider .els{padding-top: 45px; height: 160px}
#main_slider div.name{height: 245px}
#main_slider div.name .title{color: white; font-size: 43px; font-family: GothamProBold}
#main_slider div.name .desc{font-size: 21px; font-family: GothamProRegular}
#main_slider a{font-size: 21px; font-family: GothamProBold; color: white}

#main_slider .toggles{position: absolute; left: 50%; bottom: 10px; z-index: 1}
#main_slider .toggles div{width: 40px; height: 40px; display: inline-block; cursor: pointer}
#main_slider .toggles div span{width: 10px; height: 10px; display: block; margin: 5px auto; background: white; border-radius: 40px; transition: all ease 0.4s;}
#main_slider .toggles div.active span,#main_slider .toggles div:active span{background: rgba(0,0,0,0.2)}
#main_slider .toggles div:hover span{background: rgba(0,0,0,0.2); width: 20px; height: 20px; margin-top: 0}

#sc_slider{margin: 80px 0; overflow: hidden; width: 100%; position: relative; height: 450px; transition: all ease 1s}
#sc_slider .slider_container{left: 0; position: absolute}
#sc_slider .slide{float: left; margin: 0 60px; text-align: center; width: 400px; vertical-align: top; display: block; cursor: -moz-grabbing; cursor: -webkit-grabbing;}
#sc_slider .slide .img{width: 400px; height: 300px; line-height: 300px; background-size: contain;/*background-size: cover;*/ background-repeat: no-repeat; background-position: center;}
#sc_slider .slide .img img{vertical-align: middle; max-width: 100%; max-height: 100%;}
#sc_slider .slide .desc{font-size: 21px; line-height: 28px; text-align: left; margin: 10px 0 0 35px}
#sc_slider .slide .els{text-align: left; margin: 10px 0 0 35px}

#formula{margin: 0}
#formula div.title h1, #formula div.title .h1 {position: absolute}
#formula div.title{background-image: url("../img/formula_title.png"); background-size: 72px 84px; background-position: 47px 0; background-repeat: no-repeat; padding: 55px 0}
#formula div.title p.desc{margin-left: 280px; margin-top: 95px}

#formula .formula{width: 520px}
#formula .block{padding: 35px; border: 2px solid black; height: 410px}
#formula .img{height: 255px; line-height: 255px; text-align: center}
#formula .img img{vertical-align: middle}
#formula .block p{font-family: roboto; font-size: 13px; line-height: 25px}
#formula .name table{font-family: GothamProBold; width: 100%}
#formula .name table tr td:first-of-type{font-size: 25px; padding-right: 70px}
#formula .name table tr td:last-of-type{font-size: 15px;}
#formula .btn{padding: 35px; border: 2px solid black; border-top: none; text-align: center; font-size: 30px; cursor: pointer; width: 100%; box-sizing: border-box;}
#formula .btn:hover{background-color: #000}
#formula .btn:hover a{color: white!important; background: none}
#formula .price{text-align: center; font-size: 22px}

#kolba{padding: 100px 0 25px}
#kolba div.title{background-image: url("../img/formula_title.png"); background-size: 72px 84px; background-position: 47px 0; background-repeat: no-repeat; padding: 55px 0}
#kolba div.title p.desc{margin-left: 370px; margin-top: -35px}
#kolba .make_formula{margin: 80px 0}
#kolba_elements {width: 335px; float: left}
#kolba_elements div{float: left; margin: 0 20px 20px 0; border: 2px solid black; width: 87px; height: 77px; text-align: center; padding: 10px 0 0 0}
#kolba_elements div.el{background-color: #e5e5e5; cursor: -webkit-grab; z-index: 1}
#kolba_elements div.el.ui-draggable-dragging {
    z-index: 100;
}
#kolba_elements div.el:active{cursor: -webkit-grabbing;}
/*
#kolba_elements div.el.IN_CONTAINER{background-color: #000}
#kolba_elements div.el.IN_CONTAINER p,#kolba_elements div.el.IN_CONTAINER span{color: white!important}
*/
#kolba_elements div p.name{font-size: 34px; font-family: GothamProBold; margin: 0}
#kolba_elements div p.desc{font-size: 12px; margin: 10px 0 0 0; line-height: 12px}
#kolba_elements div.el.IN_CONTAINER {
    -webkit-animation-name: around_move;
    animation-name: around_move;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
}
#kolba_elements div.el {
    -webkit-transition: transform 1s;
    -moz-transition: transform 1s;
    transition: transform 1s;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
#kolba_elements div.el._dissolved {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}
#lab {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    right: 1px;
}
#kolba_container img{
    display: block;
    width: 100%;
    position: relative;
    z-index: 2;
    pointer-events: none;
}
#kolba_container{
    position: relative; 
    /*background-image: url("../img/kolba-01.svg"); */
    background-position: center; background-repeat: no-repeat ; width: 395px; 
    float: left; transition: opacity ease 300ms}
#kolba_container.empty{opacity: 0.5}
#kolba_price{width: 350px; float: left}
#kolba_price .price_container{padding: 0 0 0 30px}
#kolba_price p:first-of-type{line-height: 37px}

#kolba_price .price_elements {margin-bottom: 10px;}
#kolba_price .price_elements .el {
    width: 30px;
    height: 30px;
    text-align: center;
    border: 3px solid black;
    word-wrap: break-word;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    vertical-align: top;
    overflow: hidden;
    transform: scale(0);
    transition: transform 1s ease;
}

#kolba_price .price_elements .el.appended {
    transform: scale(1);
}

#kolba_price .price_elements .el .name {
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    margin: 0;
    line-height: 30px;
}

#kolba_price .price_elements .el .desc {
    /*font-size: 8px;*/
    /*line-height: 1;*/
    display: none;
}

#kolba_price .price{font-size: 43px; font-family: GothamProBold}
#kolba_price .callback{font-size: 22px; font-family: GothamProRegular}
#kolba_price .callback input[type=submit]{font-size: 30px; margin: 30px 0 0 0; padding: 22px 34px}
#kolba_price .callback form {text-align: right}
#kolba_price .callback form span{font-size: 22px;}
#kolba_price .callback input[type=text]{ font-size: 22px; width: 308px; padding: 8px 4px 4px; background: none}
#kolba_price .callback p:last-of-type{text-align: right; padding-right: 20px; margin: -8px 0 0 0}

#about{background: white; padding: 50px 0 0}
#about .first div{float: left; margin: 0 5px; padding-left: 30px; background-repeat: no-repeat; background-position: top left;}
#about .first a,
#about .first a:visited,
#about .first a:active {font-size: 22px; margin-top: 20px; display: inline-block}
#about .first p.title{font-size: 64px; font-family: GothamProBold; margin-bottom: 100px}
#about .first p.desc{line-height: 35px}
#about .first .left_block{width: 270px; background-image: url("../img/boots.png"); background-size: 132px 124px}
#about .first .right_block{width: 270px; background-image: url("../img/notebook.png"); background-size: 112px 112px}
#about .first .middle_block{width: 420px; background-image: url("../img/glases.png"); background-size: 159px 115px}

#about .light_head{margin: 50px 0}
#about .light_head .title{text-align: center}
#about .light_head .desing_2{display: block; margin: auto; width: 110px}
#about .light_head .title p{font-family: Palatino Linotype; font-size: 80px; display: inline-block}
#about .light_head .title p img{margin: 0 20px}

.instargam{height: 300px; background-image: url("../img/instargam.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover}
.instargam .title{/*font-size: 150px;*/ font-size: 134px; text-transform: uppercase; padding-top: 20px; color: #1149ff; font-family: GothamProBold; line-height: normal}
.instargam .black_lined{font-size: 22px; font-family: GothamProBold; margin-bottom: 8px}

#about .frames{text-align: center}
#about .frames .head{width: 170px; margin: 30px; display: inline-block; vertical-align: top}
#about .frames .head.empty{width: 180px; margin: 30px 25px}
#about .frames .empty .frame{background-image: url("../img/empty_head.png"); background-repeat: no-repeat; width: 112px; margin: 0 auto 45px}
#about .frames .empty a{font-size: 22px; font-family: GothamProBold}
#about .frames .frame{padding: 26px; background-image: url("../img/frame.png"); background-repeat: no-repeat; width: 112px; margin: auto; position: relative;}
#about .frames .frame img:not(.hover) {filter: grayscale(100%);}
#about .frames .frame img.hover {position: absolute;left:26px;top:26px;opacity:0;/*transition: opacity .15s ease;*/}
#about .frames .frame img.hover:hover {opacity:1;}
#about .frames .name{font-family: Georgia; font-style: italic; text-align: center; font-size: 32px}
#about .frames .appointment{font-family: roboto; font-size: 15px; text-align: center; line-height: 1.7}
#about .frames .skill{font-family: roboto; font-size: 13px; text-align: center; line-height: 1.7}

#review{padding: 50px 0; text-align: center}
#review h1, #review .h1 {width: 555px; text-align: left; max-width: 100%;}
#review .review_block{margin: 50px 0 100px; overflow: hidden}
#review .photo{display: inline-block; vertical-align: top; margin: 85px 15px 0 0; width: 135px;}
#review .photo > img{width: 135px; filter: grayscale(100%);}
#review .photo > img:hover{width: 135px; filter: grayscale(0%);}
#review .photo > img:not(:first-child){display: none}
#review .names{display: inline-block; vertical-align: top; text-align: right; width: 250px; height: 350px; overflow: hidden}
#review .names > div{/*margin-top: 80px;*/position: relative;}
#review .names a{display: block; font-family: GothamProBold; color: #1149ff; font-size: 17px}
#review .names a.active{color: black; font-size: 30px; text-align: right}
#review .names div div{padding: 10px 0}
#review_text{display: inline-block; width: 625px; vertical-align: top; text-align: left; margin: 85px 0 0 30px}
#review_text div{display: none}
#review_text div:first-child{display: block}
#review_text .title{font-family: GothamProBold; font-size: 17px; margin-top: 0; line-height: 1.5}
#review_text .text{font-family: roboto; font-size: 13px; line-height: 25px}
#review_slide_left, #review_slide_right{display: none; font-size: 50px; color: #1149ff; cursor: pointer}

#review .partners {width: 100%; overflow: hidden}
#review .partners .content{text-align: center; overflow: hidden; position: relative; left: 0;}
#review .partners .partner{width: 140px; height: 80px; float: left; margin: 0 20px; text-align: center;}
#review .partners .partner > img {max-height: 100%; object-fit: contain; object-position: center; height: 100%; width: 100%;}
#review .partners .partner > img.color {display: none;}
#review .partners .partner:hover > img.color {display: block;}
#review .partners .partner:hover > img.gray {display: none;}

#pre_bot{background: white; padding: 70px 0; position: relative}
#pre_bot p{line-height: 30px}
#pre_bot p.base-text{line-height: 25px}
#pre_bot h1, #pre_bot .h1 {width: 655px; margin-bottom: 30px; max-width: 100%;}
#pre_bot .left{width: 730px; margin-right: 50px}
#pre_bot .right{width: 400px}
#pre_bot .callback{font-size: 22px; font-family: GothamProRegular; text-align: right}
#pre_bot .callback span{margin-top: 10px}
#pre_bot .callback input[type=text]{font-size: 22px; font-family: GothamProRegular; padding: 10px; margin: 0 0 20px 0; background: none;}
#pre_bot .callback input[type=submit]{font-size: 28px; font-family: GothamProRegular; margin: 20px 0 0 0; padding: 28px 18px}
#pre_bot.front-about {
    padding-top: 1px;
}

#bottom{background: #1149ff; padding: 65px 0 30px; line-height: 1.9}
#bottom .projects{width: 290px}
#bottom .projects div{display: inline-block; color: white; vertical-align: top; margin-bottom: 5px}
#bottom .projects .pr_block{height: 190px}
#bottom .contact{width: 380px}
#bottom .uslugi{width: 510px}
#bottom .uslugi .half{width: 48%; display: inline-block; vertical-align: top}
#bottom p.title{color: #8b9dff; font-family: GothamProBold; font-size: 30px}
#bottom p{color: white; font-size: 17px; margin: 20px 0}
#bottom a{font-family: roboto; font-size: 13px; color: white; display: block; margin-right: 15px}

#case_title {position: relative; margin-top: 100px}
#case_title h1, #case_title .h1 {font-size: 58px}
#case_title .wrap{position: relative}
#case_title .date{left: 20px; top: 120px; font-family: "GothamProBold"; font-size: 17px}
#case_title .about{margin: 50px 0}
#case_title div.title{width: 860px}
#case_title div.title p{margin-top: 50px}
#case_title .case_url{font-size: 22px; font-family: "GothamProBold"; text-align: right; text-transform: uppercase}
#case_title #close_case{position: absolute; right: 0; top: 0; cursor: pointer}
#case_title .case_els{float: left; width: 40%;}
#case_title .case_els li{display: inline-block}
#case_title .case_els p.el{font-size: 14px}
#case_title .case_els p.el img{vertical-align: middle; margin-right: 8px}
#case_title .case_task {float: left; width: 50%}
#case_title .case_task td{font-size: 22px; vertical-align: top; line-height: 40px}
#case_title .case_task td:first-child{font-family: GothamProBold; width: 120px}

#step p{line-height: 35px; margin: 10px 0 45px 0}

section.img_slide img{max-width: 100%;}
section .stem_num{font-size: 100px; font-family: "GothamProBold"; color: #cccccc; text-transform: uppercase}
section .step_title{font-size: 30px; font-family: "GothamProBold"; margin: -70px 0 60px 0!important;}
section .left_offset{padding-left: 200px}

.quote {margin: 30px 0}
.quote > div{width: 60%; margin-left: 40%; background-image: url("../img/quote.png"); background-position: left top; background-repeat: no-repeat; padding: 10px 0 0 35px; box-sizing: border-box}
.quote > div.white{background-image: url("../img/quote_white.png")}
.quote .base-text{line-height: 25px!important; margin: 0!important; text-shadow: 0 0 10px rgba(255,255,255,0.75);}
.quote .author{font-family: "GothamProBold"; font-size: 22px}
.quote ul{margin: 10px 0}
.quote li{display: inline-block; vertical-align: middle}
.quote li img{margin-left: 10px; vertical-align: middle}

.special_ul{}
.special_ul li{background-image: url("../img/sm_black_line.jpg"); font-family: "GothamProRegular"; font-size: 21px;
    background-repeat: no-repeat; background-position: left center; padding-left: 50px}

#main_image .wrap{overflow: visible; position: relative}
#main_image .bg{padding-top: 80px; position: relative;}
#main_image .bg .blue_block{background: #1149ff; height: 440px; position: absolute; width: 100%; top: 0}
#main_image .bg img{margin: auto; display: block; position: relative; z-index: 2; max-width: 100%}
#main_image .float_img{position: absolute; z-index: 3; max-width: 400px; max-height: 500px}
#main_image .left_img{left: 0}
#main_image .right_img{right: 0}

#step{margin: 50px 0 100px}

#site_colors{background: white; text-align: center; padding: 30px 150px 60px; position: relative; margin-top: 60px}
#site_colors > p{position: absolute; bottom: 5px; left: 30px; margin: 0; font-family: roboto; font-size: 13px}
#site_colors div.color{width: 65px; height: 65px; border-radius: 50%; display: inline-block;
    line-height: 175px; margin: 40px 60px; font-family: "GothamProBold";
    text-transform: uppercase; color: #999}

#prototype{background: white; padding: 60px 0; margin: 50px 0}
#prototype .proto{margin: 30px auto;}
#prototype .proto img{max-width: 100%}

#design img{margin: 20px auto; display: block}
#design_images{position: relative; padding: 240px 0 50px 0}
#design_images .main_pic{width: 100%}
#design_images .pic_1{position: absolute; top: 0;}
#design_images .pic_3{position: absolute; bottom: 0}

#ya_direct{background: white; padding: 60px 0; margin: 50px 0}
#ya_direct .result{background: #1149ff; color: white; padding: 30px 0}
#ya_direct .result img.symfony{margin: 10px 0 30px 0}
#ya_direct .result p.bold{text-align: left; margin: auto; font-size: 18px; line-height: 28px; width: 80%}
#ya_direct .result table{width: 70%; margin: 20px auto}
#ya_direct .result td.title{font-family: "GothamProBold"; font-size: 22px}
#ya_direct .result td{text-align: center; width: 200px; padding: 5px 30px; vertical-align: top; font-family: roboto;
    font-size: 20px; line-height: 28px; font-weight: 100}
#ya_direct .result .int{font-size: 50px; padding: 50px 0 10px}
#ya_direct .result .char{font-family: roboto; font-size: 13px; line-height: 20px; font-weight: 100}

#result{background: white; padding: 60px 0; margin: 50px 0}
#result img{margin: -65px auto 30px; display: block}
#result p{width: 50%; margin-left: 50%;}

#case_review{ margin: 50px 0 0}
#case_review .wrap{background: white; padding: 10px 15%; box-sizing: border-box}
#case_review .review_title{font-family: "GothamProBold"; font-size: 22px}
#case_review .name{font-family: "GothamProBold"; font-size: 16px}
#case_review .text {margin: 25px 0}
#case_review .text p{font-family: roboto; font-size: 16px; text-align: center; margin: 15px 0}

#next_case{margin: 50px auto; display: inline-block}
#prototype .desing{max-width: 980px; width: 100%; margin: auto}
#prototype .desing > div{width: 470px; margin: 0 10px; float: left}
#prototype .desing > div img{margin-top: 26px; box-shadow: 0 0 10px rgba(0,0,0,0.5)}
#prototype .h2{font-size: 30px; line-height: 45px; margin-top: 30px}









.cases-section {
    margin: 80px 0;
}

.cases-title {
    text-align: center;
    margin-bottom: 40px;
}

.cases {
    font-size: 0;
}

.cases .case-wrap {
    width: 33%;
    display: inline-block;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 30px;
    box-sizing: border-box;
    vertical-align: top;
}

.cases .case {
    height: 300px;
    display: block;
    cursor: pointer;
    overflow: hidden;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.cases .case .case-description-wrap {
    position: relative;
    height: 100%;
    background-color:rgba(0,0,0,.75);
    padding: 20px;
    box-sizing: border-box;
    color: white;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;

    display: table;
    width: 100%;

    opacity: 0;
    transition: opacity .3s ease;
}

.cases .case .case-description {
    display: table-cell;
    vertical-align: middle;
}

.cases .case .case-description > div {
    margin-top: 50px;
    transition: all .3s ease;
}

.cases .case:hover .case-description-wrap {
    opacity: 1;
}

.cases .case:hover .case-description > div {
    margin-top: 0;
}

@media(max-width: 992px){
    .cases .case-wrap {
        width: 100%;
    }
}



.partnership-modal {
    text-align: left;
    padding: 25px 35px;
    border: 5px solid black;
}

.partnership-modal .remodal-close {
    left: inherit;
    right: 0;
    color: #1149ff;
}

.partnership-modal .remodal-close:before {
    font-size: 48px;
}

ul.blue-strip {
    list-style-type: none;
}

ul.blue-strip li{
    padding-left: 25px;
    position: relative;
}

ul.blue-strip li:before {
    position: absolute;
    left: 0;
    top: 10px;
    content: '';
    width: 20px;
    height: 2px;
    background-color: #1149ff;
}



/* Version 2 styles */

#first_section .title {
    text-align: center;
}

#first_section .title h1,
#first_section .title .h1 {
    font-size: 34px;
    /*font-size: 42px;*/
}

#first_section .title h2 {
    line-height: 2;
}

#table_section div.title {
    background-image: url(../img/formula_title.svg);
    /*background-image: url(../img/formula_title.png);*/
    background-size: 66px 76px;
    background-position: 385px 0;
    /*background-position: 385px -5px;*/
    background-repeat: no-repeat;
    padding: 55px 0;
}

#table_section div.title p.desc {
    margin-left: 370px;
    margin-top: -45px;
    width: 720px;
}

#success_formula {
    padding-top: 100px;
    padding-bottom: 0;
    /*padding-bottom: 100px;*/
}

#success_formula div.title {
    background-image: url(../img/target.png);
    background-size: 110px 120px;
    background-position: 260px 10px;
    padding: 55px 0 0;
    /*padding: 55px 0;*/
    background-repeat: no-repeat;
}

#success_formula div.title p.desc {
    margin-left: 250px;
    margin-top: -40px;
    width: 700px;
}

#kolba {
    /*padding-top: 50px;*/
}

#kolba div.title {
    background: none;
    padding: 0;
}

#kolba div.title p.desc {
    margin-left: 330px;
}

#kolba .make_formula {
    margin: 80px 0 0;
}

#about .frames .head {
    margin: 30px 20px;
}

#about .frames .empty .frame {
    height: 170px;
    background-color: #fbfbfb;
}

#review div.title {
    padding: 50px 0;
    background-image: url(../img/case.png);
    background-repeat: no-repeat;
    background-size: 128px 153px;
    background-position: 338px 5px;
}

.new-reviews {
    text-align: left;
    height: 350px;
    overflow: hidden;
    margin-bottom: 50px;
    position: relative;
    transition: height 1s ease;
}

.new-reviews:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    pointer-events: none;

    background: rgba(229,229,229,0);
    background: -moz-linear-gradient(top, rgba(229,229,229,0) 0%, rgba(229,229,229,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(229,229,229,0)), color-stop(100%, rgba(229,229,229,1)));
    background: -webkit-linear-gradient(top, rgba(229,229,229,0) 0%, rgba(229,229,229,1) 100%);
    background: -o-linear-gradient(top, rgba(229,229,229,0) 0%, rgba(229,229,229,1) 100%);
    background: -ms-linear-gradient(top, rgba(229,229,229,0) 0%, rgba(229,229,229,1) 100%);
    background: linear-gradient(to bottom, rgba(229,229,229,0) 0%, rgba(229,229,229,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#e5e5e5', GradientType=0 );
}

.new-reviews.open {
    /*height: auto;*/
}

.new-reviews.open:after {
    display: none;
}

.new-reviews .review {
    width: 45%;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 50px;
}

.new-reviews .review:nth-child(2n+1) {
    margin-right: 9%;
}

.new-reviews .review-head {
    margin-bottom: 30px;
    display: table;
    width: 100%;
    table-layout: fixed;
}

.new-reviews .review-head > * {
    display: table-cell;
    vertical-align: middle;
}

.new-reviews .review-head .review-photo {
    width: 120px;
}

.new-reviews .review-head .review-photo img {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    object-fit: cover;
    object-position: top center;
}

.new-reviews .review-head .reviews-info {
    padding-left: 20px;
    color: #1149ff;
}

.new-reviews .review-head .review-title {
    font-size: 28px;
    font-family: GothamProBold;
    margin-bottom: 15px;
}

.new-reviews .review-head .review-name {
    font-size: 14px;
    font-family: GothamProBold;
    margin-bottom: 7px;
}

.new-reviews .review-head .review-position {
    opacity: .35;
}

.new-reviews .review-body p {
    font-size: 14px;
    line-height: 1.5;
}

.new-reviews-more {
    margin-bottom: 100px;
}

.new-reviews-more #more-reviews {
    border: none;
    background: none;
    font-size: 20px;
    font-family: GothamProBold;
    outline: none;
    cursor: pointer;
    position: relative;
}

.new-reviews-more #more-reviews:after {
    content: '';
    position: absolute;
    left: -10px;
    right: -10px;
    bottom: -3px;
    height: 5px;
    background-color: #1149ff;
    transition: height .3s ease;
}

.new-reviews-more #more-reviews:hover:after {
    height: 7px;
}

.new-reviews-more #more-reviews .arrow {
    position: absolute;
    width: 5px;
    height: 25px;
    bottom: -26px;
    left: 50%;
    background-color: #1149ff;
}

.new-reviews-more #more-reviews .arrow:before,
.new-reviews-more #more-reviews .arrow:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 5px;
    background-color: #1149ff;
}

.new-reviews-more #more-reviews .arrow:before {
    transform: rotate(45deg);
    bottom: 2px;
    right: -2px;
}

.new-reviews-more #more-reviews .arrow:after {
    transform: rotate(-45deg);
    bottom: 2px;
    left: -2px;
}

.new-reviews-more #hide-reviews {
    border: none;
    background: none;
    font-size: 20px;
    font-family: GothamProBold;
    outline: none;
    display: none;
    cursor: pointer;
    position: relative;
}

.new-reviews-more #hide-reviews:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    background-color: #1149ff;
    height: 5px;
    transition: height .3s ease;
}

.new-reviews-more #hide-reviews:hover:after {
    height: 7px;
}


#pre_bot p.base-text {
    line-height: 30px;
    font-family: inherit;
}

#pre_bot #text_blocks li {
    margin-left: 0;
    margin-bottom: 5px;
}

#pre_bot #text_blocks a {
    font-family: GothamProBold;
}


#pre_bot .how {
    padding-left: 40px;
    position: relative;
    margin-bottom: 80px;
}

#pre_bot .how .how-item {
    line-height: 3.5;    
}

#pre_bot .how .how-arrow {
    width: 2px;
    left: 5px;
    top: 30px;
    bottom: 10px;
    position: absolute;
    background-color: black
}

#pre_bot .how .how-arrow .how-circle {
    width: 14px;
    height: 14px;
    border: 2px solid black;
    border-radius: 50%;
    position: absolute;
    left: -8px;
    top: -16px;
}

#pre_bot .how .how-arrow:before,
#pre_bot .how .how-arrow:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 10px;
    height: 2px;
    background-color: black;
}

#pre_bot .how .how-arrow:before {
    transform: rotate(-45deg);
    left: 0px;
    bottom: 4px;
}

#pre_bot .how .how-arrow:after {
    transform: rotate(45deg);
    left: -8px;
    bottom: 4px;
}

#pre_bot .how .how-result {
    font-size: 20px;
    font-family: GothamProBold;
}

#pre_bot .transparent-block {
    padding: 20px 25px;
    border: 5px solid #1149ff;
}

#pre_bot .transparent-block .block-title,
#pre_bot .transparent-block .block-link {
    font-size: 20px;
    font-family: GothamProBold;
}

#pre_bot .transparent-block .block-title {
    margin-bottom: 10px;
}

#pre_bot .callback {
    margin-bottom: 100px;
}

#pre_bot .callback input[type=text] {
    width: 300px;
    box-sizing: border-box;
    /*display: block;*/
    margin-left: auto;
}

#pre_bot .callback input[type=submit] {
    width: 300px;
    display: block;
    margin-left: auto;
}

#pre_bot .right-info {
    width: 300px;
    margin-left: auto;
}

#pre_bot .right-info.instruments {
    margin-bottom: 250px;
}

#pre_bot .right-info.staff {
    margin-bottom: 190px;
}

#pre_bot .right-info p.base-text {
    margin: 10px 0;
}

#pre_bot .formula {
    position: relative;
    width: 300px;
    margin-left: auto;
    height: 350px;
    line-height: 1.7;
}

#pre_bot .formula .formula-title {
    font-family: GothamProBold;
}

#pre_bot .formula .text-1 {
    position: absolute;
    right: -30px;
    top: 50px;

}

#pre_bot .formula .text-2 {
    position: absolute;
    left: 0;
    top: 122px;
    z-index: 2;
}

#pre_bot .formula .text-3 {
    position: absolute;
    top: 200px;
    left: 130px;
    width: 200px;
}

#pre_bot .formula .icon-1 {
    position: absolute;
    top: 78px;
    left: 150px;

}

#pre_bot .formula .icon-2 {
    position: absolute;
    width: 15px;
    height: 3px;
    background-color: #1149ff;
    top: 182px;
    left: 115px;
    transform: rotate(45deg);

}


.blue-shadow {
    -webkit-box-shadow: 0px 10px 50px -15px #1149ff;
       -moz-box-shadow: 0px 10px 50px -15px #1149ff;
            box-shadow: 0px 10px 50px -15px #1149ff;
}



#success_formula .success_formula_block_wrap {
    padding: 100px 0;
}

#success_formula .success_formula_block {
    border: 2px solid black;
}

#success_formula .success_formula_top {
    padding: 50px 50px 35px;
    font-size: 0;
    border-bottom: 2px solid black;
}

#success_formula .success_formula_left,
#success_formula .success_formula_right {
    display: inline-block;
    /*width: 50%;*/
    font-size: 14px;
    vertical-align: top;
}

#success_formula .success_formula_left {
    width: 40%;
    margin-right: 5%;
}

#success_formula .success_formula_right {
    width: 55%;
}

#success_formula .success_formula_right p {
    margin-top: 0;
}

#success_formula .success_formula_bottom a {
    background-color: #1149ff;
    color: white;
    font-family: GothamProBold;
    font-size: 26px;
    display: block;
    text-align: center;
    padding: 25px 15px;
}

#success_formula .success_formula_bottom a:hover {
    background-color: black;
}


#cases {
    font-size: 0;
}

#cases .case {
    display: inline-block;
    font-size: 16px;
    width: 25%;
    padding: 0 10px;
    box-sizing: border-box;
    text-align: center;
    vertical-align: top;
}

#cases .case.ikona {
    width: 25%;
    height: 250px;
}

#cases .case.ikona img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: center;
}

#cases .case.presentation {
    height: 250px;
    color: white;
    background-color: black;
    font-size: 18px;
    padding: 30px;
    line-height: 1.8;
    text-align: left;
    position: relative;
}

#cases .case.presentation > span {
    font-family: GothamProBold;
    position: relative; 
}

#cases .case.presentation > span:after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: white;

    transition: height .3s ease;
}

#cases .case.presentation > span:hover:after {
    height: 5px;
}

#cases .case.presentation .icon {
    position: absolute;
    bottom: 30px;
    left: 30px;
}

#cases .case.text-block {
    text-align: left;
    vertical-align: bottom;
}

#cases .case.text-block .text-block-title {
    font-family: GothamProBold;
    font-size: 18px;
}

#cases .case.text-block p {
    font-size: 13px;
    line-height: 1.8;
}

#cases .case {
    margin-bottom: 50px;
}

#cases .case .case-thumb {
    display: block;
    height: 180px;
    width: 100%;
    object-fit: contain;
    object-position: bottom;
    margin-bottom: 30px;
}

#cases .case .case-title {
    line-height: 1.5;
}


.vk-post {
    position: absolute;
    right: 0px;
    width: 300px;
    top: 15px;
    z-index: 1;
    padding: 15px;
    overflow: hidden;
    height: 80px;

    display: none;
}

.vk-post > div {
    position: relative;
}

.vk-post:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    pointer-events: none;
    
    background: rgba(255,255,255,0);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
}

.vk-post .vk-post-title {
    color: #1149ff;
    font-size: 16px;
    margin-bottom: 5px;
}

.vk-post .vk-post-title:after {
    content: ':';
    color: black;
}

.vk-post .vk-post-description {
    color: #333;
    font-size: 13px;
    line-height: 2;
}


/* New Team Block */
.team_block {
    margin: 100px 0 200px;
    /*display: none;*/
}

.team_block .title {
    margin-bottom: 70px;
}

.team_block .team_items {
    font-size: 0;
}

.team_block .team_items {
    user-select: none;
    cursor: default;
}

.team_block .team_item {
    display: inline-block;
    vertical-align: top;
    width: calc(100% / 6);
    padding-bottom: calc(100% / 6);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;

    transition: transform .3s ease;
}

.team_block .team_item_info {
    font-size: 1rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    color: white;
    background-color: rgba(17, 73, 255, .75);
    padding: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    opacity: 0;

    transition: opacity .3s ease;
}

.team_block .team_item:hover {
    transform: scale(1.25);
    z-index: 2;
}

.team_block .team_item:hover .team_item_info {
    opacity: 1;
}

.team_block .team_item_info > div {
    width: 100%;
}

.team_block .team_item_name {
    font-family: GothamProBold;
    font-size: 18px;
    margin-bottom: 6px;
}

.team_block .team_item_title {
    font-family: GothamProBold;
    font-size: 13px;
    /*margin-bottom: 6px;*/
}

.team_block .team_item_description {
    font-size: 12px;
    margin-top: 15px;
}

@media(max-width: 991px) {
    .team_block .team_item {
        width: calc(100% / 4);
        padding-bottom: calc(100% / 4);
    }
}

@media(max-width: 767px) {
    .team_block {
        margin-bottom: 100px;
    }

    .team_block .team_item {
        width: calc(100% / 2);
        padding-bottom: calc(100% / 2);
    }

    .team_block .team_item:hover {
        /* Disable scale on small devices */
        transform: scale(1);
    }
}

@media(max-width: 450px) {
    .team_block .team_item {
        width: 100%;
        padding-bottom: 100%;
    }
}

/* END New Team Block */



/* Success Formula */
.success-formula {
    /*width: 390px;*/
    /*height: 210px;*/
    width: 100%;
    padding-top: 54%;
    position: relative;
    font-family: GothamProBold;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;      
    cursor: default;
}

.success-formula__skelet {
    position: absolute;
    width: 21%;
    height: 47%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    left: 60%;
    top: 24%;
    background-image: url(../img/formula-skelet.svg);
}

.success-formula__char {
    position: absolute;
    font-size: 50px;
}

@media(max-width: 400px) {
    .success-formula__char {
        font-size: 30px;
    }
}

@media(min-width: 769px) and (max-width: 1199px) {
    .success-formula__char {
        font-size: 35px;
    }
}

.success-formula__char--k {
    color: #5fbff2;
    left: 5%;
    top: 43%;
}

.success-formula__char--po {
    color: #efa72f;
    left: 21%;
    top: 6%;
}

.success-formula__char--an {
    color: #efa72f;
    left: 41%;
    top: 43%;
}

.success-formula__char--au {
    color: #e33b2b;
    top: 6%;
    left: 77%;
}

.success-formula__char--tg {
    color: #e24d95;
    top: 71%;
    left: 59%;
}

.success-formula__strip {
    display: block;
    width: 20px;
    height: 4px;
    background: black;
    transform: rotate(-50deg);
    position: absolute;
    left: 17%;
    top: 35%;
}

.success-formula__double-strip {
    display: block;
    background: black;
    width: 20px;
    height: 4px;
    position: absolute;
    transform: rotate(50deg);
    top: 34%;
    left: 36%;
}

.success-formula__double-strip:after {
    content: '';
    position: absolute;
    display: block;
    background: black;
    width: 100%;
    height: 100%;
    bottom: -7px;
    left: 0;
}
/* END Success Formula */