@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500&subset=cyrillic');

* {margin: 0px; padding: 0px; box-sizing: border-box; outline: none}
html, body {width: 100%; height: 100%}
body {font-family: 'Roboto'; line-height: 1.7; background: #fff; font-size: 15px; color: #555; font-weight: 400; padding-top: 200px}
body.home {padding-top: 0px}

html.lock, body.lock {overflow: hidden}
.flex-wrap {display: flex; display:-webkit-flex; -webkit-justify-content:space-between; justify-content:space-between; flex-wrap: wrap; -webkit-flex-wrap: wrap}
.flex-nowrap {display: flex; display:-webkit-flex; -webkit-justify-content:space-between; justify-content:space-between; flex-wrap: nowrap; -webkit-flex-wrap: nowrap}
.flex-start {align-items: flex-start; -webkit-align-items: flex-start}
.flex-center {align-items: center; -webkit-align-items:center; height: 100%}
.max {max-width: 1150px; margin: 0px auto; width: 100%; padding-left: 8px; padding-right: 8px}
a {color: inherit; text-decoration: none; outline: none; cursor: pointer; user-select:none; -webkit-user-select: none; -moz-user-select: none}
.ds {user-select:none; -webkit-user-select: none; -moz-user-select: none; -webkit-user-drag: none}
table {border-collapse: collapse; width: 100%}
th {text-align: left; padding: 10px}
td {padding: 10px}

h1, h2, h3 {text-transform: uppercase}
h1 {font-size: 42px; line-height: 1.5; color: #454b82; font-weight: 300}
h2 {font-size: 30px; margin-bottom: 20px; color: #454b82; font-weight: 300; margin-top: -13px}
h3 {color: #56beed; font-weight: 500; font-size: 15px}
h2 a {margin-left: 15px; font-size: 14px; text-decoration: underline; vertical-align: middle; transition: 300ms}
h2 a:hover {color: #56beed}

hr {height: 1px; background: #ddd; border: none; margin: 80px 0px}

a, i {cursor: pointer; transition: 300ms}
p {margin-top: 10px}
b, strong {font-weight: 500}

.half-20 {width: calc(20% - 20px)}
.half-25 {width: calc(25% - 20px)}
.half-30 {width: calc(30% - 20px)}
.half-40 {width: calc(40% - 20px)}
.half-45 {width: calc(45% - 20px)}
.half-50 {width: calc(50% - 20px)}
.half-55 {width: calc(55% - 20px)}
.half-60 {width: calc(60% - 20px)}
.half-70 {width: calc(70% - 20px)}

.float {margin: 0px -10px 0px -10px}
.clear {clear: both}

img, svg {max-height: 100%; max-width: 100%; height: auto}
.contain {background-repeat: no-repeat; background-size: contain; background-position: 50% 50%}
.cover {background-repeat: no-repeat; background-size: cover; background-position: 50% 50%}
iframe {width: 100%}

input {-webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: inherit}
input[type=text], input[type=email], input[type=password] {height: 32px; height: 32px; width: 100%; padding: 0px 10px; border: 1px solid #ddd}
textarea {width: 100%; resize: none; padding: 10px; border: 1px solid #ddd}
input:focus, textarea:focus {border-color: #454b82; box-shadow: 0px 0px 0px 1px #454b82}
input[type=checkbox] {display: inline-block; vertical-align: middle; width: 11px !important; height: 11px; margin-right: 10px !important; position: relative; border-radius: 1px; margin-left: 3px; border: none; float: left; margin-bottom: 4px}
input[type=checkbox]:before {border:1px solid #ddd; content: ''; display: block; width: 15px; height: 15px; position: absolute; top:-3px; left: -3px; border-radius: 1px} 
input[type=checkbox]:checked {background: #454b82}
input[type=checkbox]:checked:before {border:1px solid #454b82}


.button-more, input[type=submit] {display: inline-block; background: #56beed; margin-top: 20px; line-height: 36px; height: 36px; border-radius: 18px; width: 160px; font-size: 14px; text-align: center; transition: 300ms; color: #fff; margin-right: 10px; cursor: pointer; border: none}
.button-more:hover, input[type=submit]:hover {box-shadow: 0px 0px 10px #56beed}

section {padding: 40px 0px}


header {height: 100px; position: fixed; will-change: transform; top:0px; left: 0px; width: 100%; z-index: 8000; background: transparent; color: #fff}
header.white {background: #fff; color: #454b82; box-shadow: 0px 0px 10px rgba(0,0,0,0.2)}
header .logo {width: 275px; height: 70px; font-weight: 400; line-height: 1.3; text-transform: uppercase; background-position: 0% 50%; background-repeat: no-repeat; background-size: 70px; padding-left: 80px; background-image: url(images/wave.svg)}
header.white .logo {background-image: url(images/wave-color.svg)}

header .max > div {border-bottom: 1px solid #fff}
header .max {height: 100%}

header select {-webkit-appearance: none; border:1px solid #fff; border-radius: 0px; color: #56beed; background-color: transparent; background-image: url(images/a-down.svg); background-repeat: no-repeat; font-family: inherit; background-position: right 10px center; background-size: 12px; line-height: 34px; height: 36px; font-size: inherit; padding: 0px 20px; background-image: url(images/a-down-white.svg)}

header.white select {background-image: url(images/a-down.svg)}


header .menu > li {display: inline-block; vertical-align: middle; margin-left: 20px; padding: 37px 0px}
header .menu > li > .sub-menu {position: absolute; padding: 0px; background: #fff; color: #000; left: 10px; right: 10px; margin: auto; top:99px; display: flex; justify-content: space-around; box-shadow: 0px 4px 4px rgba(0,0,0,0.2); max-height: 0; transition: 300ms; overflow: hidden}
header .menu > li > .sub-menu > li {display: block}
header .menu > li > .sub-menu > li > a {display: block; position: relative}
header .menu > li .sub-menu .sub-menu a:before {content: ''; margin-right: 5px; background: url(images/a-right.svg) 50% 50% no-repeat; width: 10px; height: 10px; background-size: contain; display: block; position: absolute; top:2px; left: -15px}

header .menu > li > .sub-menu > li li {display: block; margin-bottom: 20px; font-size: 14px; color: #56beed}
header .menu > li:hover .sub-menu {max-height: 1000px; padding: 20px 0px}
header .menu > li a {position: relative}
header .menu > li > a:after {width: 0%; transition: 300ms; position: absolute; bottom: -7px; height: 2px; background: #fff; content: ''; display: block; left: 0px}
header .menu > li.current-menu-item > a:after, header .menu > li:hover > a:after {width: 100%}
header #tr_credit {display: none}

header.white .menu > li > a:after {background: #454b82}
header.white select {border-color: #454b82; color: #454b82}

.first {background: #454b82 url(images/back.jpg) 50% 50% no-repeat; background-size: cover; padding-top: 160px; color: #fff}
.first h1 {color: #fff}
.first .text {width: 60%; font-size: 16px}
.first .history {margin-top: 80px; font-size: 14px}
.first .history h3 {margin-bottom: 20px; color: #fff}
.first .history h3 i {width: 40px; height: 40px; display: inline-block; vertical-align: middle; margin-right: 10px}
.first .history div:nth-of-type(1) i {background-image: url(images/history-01.svg)}
.first .history div:nth-of-type(2) i {background-image: url(images/history-02.svg)}
.first .history div:nth-of-type(3) i {background-image: url(images/history-03.svg)}
.first .history .more {color: #56beed; display: block; margin-top: 10px}
.first .history .more:before {content: ''; margin-right: 5px; background: url(images/a-right.svg) 50% 50% no-repeat; width: 10px; height: 10px; background-size: contain; display: inline-block; vertical-align: top; margin-top: 5px}

.about .photo {width: 150px; height: 150px; background: url(images/photo.png) 50% 50% no-repeat; margin-right: 20px; margin-bottom: 10px; float: left; background-size: cover}
.about .photo2 {width: 150px; height: 150px; background: url(images/photo2.jpg) 50% 50% no-repeat; margin-right: 20px; margin-bottom: 10px; float: left; background-size: cover}
#about {text-align: justify}

.mobile-menu-icon {width: 20px; display: none; height: 10px; position: relative}
.mobile-menu-icon span {background: #fff; height: 2px; width: 12px; position: absolute; display: block; transition: 300ms}
.mobile-menu-icon span:nth-of-type(1) {left: 0px; top:0px}
.mobile-menu-icon span:nth-of-type(2) {left: 8px; top:0px}
.mobile-menu-icon span:nth-of-type(3) {left: 0px; top:8px}
.mobile-menu-icon span:nth-of-type(4) {left: 8px; top:8px}
.mobile-menu-icon.active span:nth-of-type(1) {transform: rotateZ(45deg)}
.mobile-menu-icon.active span:nth-of-type(2) {transform: rotateZ(-45deg)}
.mobile-menu-icon.active span:nth-of-type(3) {transform: rotateZ(-45deg)}
.mobile-menu-icon.active span:nth-of-type(4) {transform: rotateZ(45deg)}

header.white .mobile-menu-icon span {background: #454b82}

.first-steps {border-left: 1px solid #ddd; padding-left: 20px}
.presentation .img {height: 300px}
.article {width: calc((100% - 60px)/3); margin-bottom: 40px}
.article .img {height: 400px; margin: 10px 0px}
.article h3 {text-overflow: ellipsis; width: 100%; overflow: hidden; white-space: nowrap}
.article .text {position: relative; height: 100px; overflow: hidden; font-size: 14px}
.article .text:after {position: absolute; bottom: 0px; height: 50px; left: 0px; width: 100%; background: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); content: ''; display: block}
.article .button-more {margin-top: 10px}
.article:hover h3 {text-decoration: underline}

footer {font-size: 13px; background: #454b82; padding: 30px 0px; color: #eee}
footer .menu > li > a {color: #fff; text-decoration: underline; font-weight: 300; font-size: 18px; margin-bottom: 20px}
footer li {display: block; margin-top: 10px}
footer li a {position: relative}
footer .menu ul a:before {content: ''; margin-right: 5px; background: url(images/a-right.svg) 50% 50% no-repeat; width: 10px; height: 10px; background-size: contain; display: block; position: absolute; top:2px; left: -15px; opacity: 0}
footer .menu ul a:hover, footer .copyright a:hover {color:#56beed}
footer .menu ul a:hover:before {opacity: 1}
footer .copyright {margin-top: 20px}
footer .belka {margin-top: 20px; opacity: 0.3; color: #fff; transition: 300ms}
footer .belka:after {content: ''; display: inline-block; vertical-align: middle; width: 30px; margin-left: 5px; height: 25px; background: url(images/belka.svg) 50% 30% no-repeat}
footer .belka:hover {opacity: 1}

footer .social a {display: inline-block; height: 24px; width: 24px; margin-right: 5px; opacity: 0.7}
footer .social a.twitter {background:url(images/s-twitter.svg)}
footer .social a.facebook {background:url(images/s-facebook.svg)}
footer .social a.google {background:url(images/s-google.svg)}
footer .social a.youtube {background:url(images/s-youtube.svg)}
footer .social a:hover {opacity: 1}

.sert-slider .slick-list {margin: 0px -30px}
.sert {margin: 30px}
.sert img {display: block; height: 300px}
.sert:hover h3 {text-decoration: underline}


.single-page .center-block h3 {margin-top: 20px}
.single-page .center-block p:first-of-type {margin-top: 0px}
.single a {color: #56beed; text-decoration: underline}
.center-block a {color: #56beed; text-decoration: underline}
.page-reviews .center-block a {color: #56beed; text-decoration: underline}

.sidebar h3 {margin-bottom: 10px}
.sidebar .menu li, .center-block li {display: block; margin-top: 10px; position: relative; padding-left: 15px}
.sidebar .menu li:before {content: ''; display: block; left: 0px; position: absolute; width: 10px; height: 10px; top: 5px; background: url(images/a-right.svg) 50% 50% no-repeat; background-size: contain}
.center-block li:before {content: ''; display: block; left: 0px; position: absolute; width: 10px; height: 10px; top: 7px; background: url(images/a-right.svg) 50% 50% no-repeat; background-size: contain}
.sidebar .menu li a:hover, .center-block li a:hover, .sidebar .menu li.current_page_item a, .sidebar .menu li.current-menu-parent a {color: #56beed}


.center-block {width: calc(100% - 300px); padding-right: 50px}
.right-block {width: 300px; border-left: 1px solid #ddd; padding-left: 50px}
.left-block {width: 300px; border-right: 1px solid #ddd; padding-right: 50px; font-size: 13px}
.left-block + .center-block {padding-right: 0px; padding-left: 50px}
.center-block .article {width: calc((100% - 40px)/2)}
.center-block img.alignleft {float: left; margin-right: 20px}
.center-block img:not(.alignleft) {display: block; margin: 10px 20px 10px 0px; float: left}
.content {padding-bottom: 40px}


.sidebar .article {width: 100%}
.sidebar h3 {margin-top: 0px}
.sidebar .review {margin-bottom: 40px; display: block}

/* PAGINATION */
.screen-reader-text {display: none}
nav {width: 100%}
.nav-links {text-align: center; margin-top: 40px}
.nav-links a, .nav-links > span {width: 42px; line-height: 22px; height: 22px; display: inline-block}
.nav-links a:hover {text-decoration: underline}
.nav-links > span {background: #454b82; color: #fff; text-decoration: none; border-radius: 11px}

.previous-next {margin-top: 40px; text-align: center}
.previous-next a {background: #454b82; color: #fff; text-decoration: none; border-radius: 18px; padding: 0px 20px; line-height: 36px; height: 36px; display: inline-block}
.previous-next a:hover {box-shadow: 0px 0px 10px #454b82}

/* PAGINATION */

/* RESEARCHES */
.researches .block {background-repeat: no-repeat; background-position: 0% 10px; background-size: 40px; padding-left: 50px; display: block; margin-bottom: 20px}
.researches .block:hover h3 {text-decoration: underline}
/* RESEARCHES */




.absolute {background: #454b82; position: absolute; top:100px; left: 0px; width: 100%}
.absolute h1 {color: #fff; text-align: right; font-size: 22px; line-height: 40px; height: 40px; text-transform: none}


/* SLIDER */
.slick-slider {position: relative; overflow: hidden; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent}
.slick-list {position: relative; display: block; overflow: hidden; margin: 0; padding: 0}
.slick-list:focus {outline: none}
.slick-list.dragging {cursor: pointer; cursor: hand}
.slick-slider .slick-track, .slick-slider .slick-list {-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)}
.slick-track {position: relative; top: 0; left: 0; display: block}
.slick-track:before, .slick-track:after {display: table; content: ''}
.slick-track:after {clear: both}
.slick-loading .slick-track {visibility: hidden}
.slick-slide {display: none; float: left; min-height: 1px}
[dir='rtl'] .slick-slide {float: right}
.slick-slide.slick-loading img {display: none}
.slick-slide.dragging img {pointer-events: none}
.slick-initialized .slick-slide {display: block}
.slick-loading .slick-slide {visibility: hidden}
.slick-vertical .slick-slide {display: block; height: auto; border: 1px solid transparent}
.slick-arrow {position: absolute; top:50%; z-index: 10; height: 100px; width: 50px; margin-top: -50px; font-size: 100px; color: #eee; line-height: 100px; transition: 400ms}
.slick-arrow:hover svg * {stroke:#dd3f34}
.slick-next {right: -50px}
.slick-prev {left: -50px}
.slick-next:hover {right: -55px}
.slick-prev:hover {left: -55px}
.slick-arrow.slick-hidden {display: none}
/* SLIDER */




@media screen and (max-width:1023px) {
body {font-size: 14px; padding-top: 125px}
header {height: 70px}
header .logo {font-size: 12px; background-size: 50px; padding-left:55px; width: 220px; height: 50px}
header .sub-menu {display: none !important}
.half-30 {width: calc(33% - 20px)}
h1 {font-size: 32px}
h2 {font-size: 20px; margin-bottom: 10px}
h2 a {font-size: 11px}
h3 {font-size: 13px}
.absolute {top:70px}
.absolute h1 {font-size: 16px; line-height: 32px; height: 30px}
.left-block {width: 250px; padding-right: 25px; font-size: 12px}
.left-block + .center-block {padding-left: 25px}
.center-block .article {width: calc((100% - 20px)/2)}
.article .img {height: 150px}
.article .text {font-size: 13px}
.center-block {width: calc(100% - 250px)}
footer {font-size: 11px; padding: 20px 0px}
footer .menu > li > a {margin-bottom: 10px}
footer .social {margin-top: 15px}
footer .menu > li > a {font-size: 15px}
footer li {margin-top: 5px}
footer li a {font-size: 11px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; max-width: 150px}
.button-more, input[type=submit] {height: 32px; line-height: 32px; font-size: 13px; width: 120px; border-radius: 16px}
header .menu > li {margin-left: 10px; padding: 0px; font-size: 13px}
header select {padding: 0px 15px 0px 5px; font-size: 13px; line-height: 30px; height: 32px}
.first .text {font-size: 14px; width: 90%}
.first {padding-top: 120px}
.right-block {width: 250px; padding-left: 25px}
.sert img {height: 220px}
}

@media screen and (max-width:767px) {
.mobile-menu-icon {display: block}
.mobile-hide {display: none !important}
body {font-size: 13px}
.first .history {margin-top: 0px}
.half-30, .half-45, .half-55, .half-50 {width: 100%; margin-top: 25px}
h1 {font-size: 22px}
h2 {font-size: 18px}
h3 {font-size: 12px}
h2 a {display: none}
.center-block, .right-block, .left-block, .left-block + .center-block {width: 100%; padding: 0px; border: none}
.center-block {order: 1}
.left-block, .right-block {order: 2; margin-top: 40px}
.article, .center-block .article {width: 100%}
.button-more, input[type=submit], .article .button-more {margin-top: 0px}
.copyright a {display: block}
.belka {width: 100%}
header select {width: 20px; height: 20px; background: url(images/world-white.svg) 50% 50% no-repeat; background-size: contain; padding: 0px; font-size: 0px; border: none}
header.white select {background-image: url(images/world.svg) }
.button-more, input[type=submit] {height: 24px; line-height: 24px; font-size: 11px; border-radius: 12px; width: 100px}
header .menu {position: absolute; top:70px; background: #fff; left: 8px; right: 8px; color: #454b82; overflow: hidden; max-height: 0px; transition: 300ms}
header .menu.show {max-height: 500px}
header .menu li {display: block; text-align: center}
header .menu li a {padding: 8px 0px; display: block; text-transform: uppercase}
header .menu li a:after {display: none}
.first .text {width: 100%}
footer .menu > li {width: calc(50% - 10px)}
footer li {margin-top: 0px; margin-bottom: 5px}
}