/* fonts */
@font-face {
    font-family: 'DINPROLIGHT';
    src: url('../fonts/DINPRO-LIGHT.eot');
    src: url('../fonts/DINPRO-LIGHT.eot') format('embedded-opentype'),
    url('../fonts/DINPRO-LIGHT.woff2') format('woff2'),
    url('../fonts/DINPRO-LIGHT.woff') format('woff'),
    url('../fonts/DINPRO-LIGHT.ttf') format('truetype'),
    url('../fonts/DINPRO-LIGHT.svg#DINPROLIGHT') format('svg'),
    url('../fonts/DINPRO-LIGHT.OTF');
}
@font-face {
    font-family: 'DINPROREGULAR';
    src: url('../fonts/DINPRO-REGULAR.eot');
    src: url('../fonts/DINPRO-REGULAR.eot') format('embedded-opentype'),
    url('../fonts/DINPRO-REGULAR.woff2') format('woff2'),
    url('../fonts/DINPRO-REGULAR.woff') format('woff'),
    url('../fonts/DINPRO-REGULAR.ttf') format('truetype'),
    url('../fonts/DINPRO-REGULAR.svg#DINPROREGULAR') format('svg'),
    url('../fonts/DINPRO-REGULAR.OTF');
}
@font-face {
    font-family: 'DINPROMEDIUM';
    src: url("../fonts/DINPRO-MEDIUM.eot");
    src: url("../fonts/DINPRO-MEDIUM.eot?#iefix") format('embedded-opentype'),
    url('../fonts/DINPRO-MEDIUM.woff') format('woff'),
    url('../fonts/DINPRO-MEDIUM.ttf') format('truetype'),
    url('../fonts/DINPRO-MEDIUM.svg#DINPROMEDIUM') format('svg'),
    url('../fonts/DINPRO-MEDIUM.OTF');
}
@font-face {
    font-family: 'Intro';
    src: url('../fonts/Intro.eot');
    src: url('../fonts/Intro.eot') format('embedded-opentype'),
    url('../fonts/Intro.woff2') format('woff2'),
    url('../fonts/Intro.woff') format('woff'),
    url('../fonts/Intro.ttf') format('truetype'),
    url('../fonts/Intro.svg#Intro') format('svg');
}

/* resets */
html,body,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
html {height: 100%}
body {min-height: 100%; min-width: 1230px; width: 100%; line-height:1; color: #666; background-color: #fff; font-size: 12px; position: relative; -webkit-backface-visibility: hidden}
article, aside, details, figcaption, figure, footer, header, menu, nav, section {display: block}
table {border-collapse: collapse}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; color: #666; cursor: default}
a[href] {cursor: pointer}
a img {border: 0; text-decoration: none}
input:focus, textarea:focus {outline: none}
hr {margin-bottom: 15px; height: 0; border: 0; border-bottom: 1px dashed #666}

::-webkit-input-placeholder         {color: #dfe0e1}
::-moz-placeholder                  {color: #dfe0e1}
:-moz-placeholder                   {color: #dfe0e1}
:-ms-input-placeholder              {color: #dfe0e1}
.placeholder                        {color: #dfe0e1}

:focus::-webkit-input-placeholder   {color: transparent; transition: color 0.3s ease}
:focus::-moz-placeholder            {color: transparent; transition: color 0.3s ease}
:focus:-moz-placeholder             {color: transparent; transition: color 0.3s ease}
:focus:-ms-input-placeholder        {color: transparent; transition: color 0.3s ease}
:focus.placeholder                  {color: transparent; transition: color 0.3s ease}

.button,
.button *,
.animate2 {-webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease}
.button .arrow,
.animate0 {-webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; transition: all 0s ease}
.no_select {-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none}

.scrollable {-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); will-change: opacity, left, right, top}
.scrollable.open, .scrollable:hover {will-change: auto}

.dinpro300, body, input, textarea,
.header_menu,
.header_logo_text small,
.header_consultation p,
.client_rounds .round,
.button {font-family: 'DINPROLIGHT', sans-serif; font-weight: 300}
.header_logo_text span,
.presentation_link,
.dinpro400 {font-family: 'DINPROREGULAR', sans-serif; font-weight: 400}
.dinpro500 {font-family: 'DINPROMEDIUM', sans-serif; font-weight: 500}
.intro,
.header_logo_text b,
.head h3,
.advantages h3,
.header_consultation h2 {font-family: 'Intro', sans-serif; font-weight: 400; text-transform: uppercase}

.header_logo_image,
.footer_logo_image,
.button .arrow,
.header_consultation label:before,
.presentation_link:before,
.footer_menu a:before,
.icon {background-image: url(../images/icons.png); background-repeat: no-repeat; display: inline-block; vertical-align: middle; position: relative}

.main_container {margin: 0 auto 220px; min-width: 1270px; width: 100%; position: relative; background-color: #fff; z-index: 2; overflow: hidden}
.mobile .main_container {margin-bottom: 0}
.wrap {margin: 0 auto; width: 1270px; position: relative}

.button {height: 42px; font-size: 18px; line-height: 42px; display: inline-block; color: #808285; border: 2px solid #9fa1a3; background-color: #fff; border-radius: 13px; text-transform: uppercase; cursor: pointer; position: relative}
.button span {height: 42px; line-height: 42px; padding: 0 8px; position: relative; display: block; cursor: pointer; -webkit-transition: color 0s; -moz-transition: color 0s; -o-transition: color 0s; transition: color 0s}
.button input, .button button {width: 100%; height: 42px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: transparent; color: transparent; border: 0; opacity: 0; cursor: pointer; z-index: 3}
.button .bgr {left: 49%; right: 49%; top: 49%; bottom: 49%; border-radius: 13px; position: absolute}
.button.purple {background-color: #db2563; border-color: #db2563; color: #fff; text-align: center}
.button.white {background-color: #fff; border-color: #a60036; color: #a60036; text-align: center}
.button .arrow {display: block; position: absolute; right: 10px; top: 7px}
.button .arrow + span {margin-right: 10px}
.button .arrow.h27 {width: 10px; height: 27px; background-position: -109px -63px}
.button .arrow.h33 {width: 12px; height: 33px; background-position: -109px -95px}
.button .arrow.h44 {width: 17px; height: 44px; background-position: -109px -133px}
.button.white .arrow.h33 {background-position: -143px -95px}

.header {margin-bottom: 90px; padding-top: 32px; height: 808px; box-sizing: border-box; background: url(../images/background1.jpg) no-repeat center}
.header .wrap {height: 776px}
.header .wrap.scrollable {top: -50px; opacity: 0; transition: .2s; position: relative}
.header .wrap.scrollable.open {top: 0; opacity: 1}
.header_logo_image {width: 109px; height: 63px; float: left}
.header_menu {margin-bottom: 165px; font-size: 36px; text-transform: uppercase; color: #fff; overflow: hidden}
.header_menu a {margin: 0 35px; color: #fff; text-decoration: none}
.header_menu a[href^=tel] {margin: 0; font-size: 42px}
.header_menu a[href^=tel] .button {position: relative; top: -7px; left: 10px}

.header_logo_text {margin-bottom: 110px; color: #fff; text-transform: uppercase; display: block}
.header_logo_text b {font-size: 85px; display: block}
.header_logo_text span {font-size: 103px; display: block; letter-spacing: 5.5px}
.header_logo_text small {font-size: 28px; display: block; line-height: 200%}

.header_get_brief {margin-left: 208px; width: 367px}
.header_get_brief input[type=text] {margin-bottom: 20px; width: 367px; height: 40px; line-height: 40px; box-sizing: border-box; background-color: #fff; border: 0; text-indent: 10px; font-size: 18px; display: block}
.header_get_brief .button {display: block}

.header_consultation {padding: 14px; width: 478px; height: 430px; background-color: rgba(99, 58, 99, .29); box-sizing: border-box; position: absolute; right: 0; bottom: -27px; border-radius: 25px; color: #fff; text-align: center}
.header_consultation:after {content: ''; display: block; border-style: solid; border-width: 60px 212px 0 212px; border-color: rgba(99, 58, 99, .29) transparent transparent transparent; left: 20px; right: 20px; bottom: -60px; position: absolute}
.header_consultation .wrap {padding: 23px 34px 0; width: 450px; height: 402px; box-sizing: border-box; background-color: #db2563; border-radius: 10px; position: relative}
.header_consultation .wrap:after {content: ''; display: block; border-style: solid; border-width: 60px 212px 0 212px; border-color: #db2563 transparent transparent transparent; left: 9px; right: 9px; bottom: -60px; position: absolute; z-index: 1}
.header_consultation h2 {margin-bottom: 28px; font-size: 36px; position: relative}
.header_consultation h2:before {content: ''; height: 1px; position: absolute; left: 0; right: 0; background-color: #fff; top: 18px}
.header_consultation h2 span {padding: 0 18px; background-color: #db2563; display: inline-block; position: relative}
.header_consultation p {margin-bottom: 35px; font-size: 21px}
.header_consultation input[type=text] {margin-bottom: 20px; width: 286px; height: 40px; line-height: 40px; box-sizing: border-box; background-color: #fff; border: 0; text-indent: 10px; font-size: 18px}
.header_consultation label {display: block;  position: relative}
.header_consultation label:before {width: 30px; height: 41px; content: ''; display: block; position: absolute; left: 7px; top: 0}
.header_consultation label.name:before {background-position: 0 -68px}
.header_consultation label.phone:before {background-position: -33px -68px}
.header_consultation .button {height: 55px; line-height: 55px}
.header_consultation .button span {padding: 0 25px; height: 55px; line-height: 55px}
.header_consultation .button input,
.header_consultation .button button {height: 55px}
.header_consultation .button .arrow {top: 11px; right: 13px}

.head {margin: 0 auto 40px; width: 1230px; position: relative; text-align: center}
.head .head_line {
    position: absolute; top: 18px; left: 49%; right: 49%; height: 2px; background-color: #808285; opacity: 0;
    -webkit-transition: opacity 400ms ease, left 1s ease, right 1s ease;
    -moz-transition: opacity 400ms ease, left 1s ease, right 1s ease;
    -o-transition: opacity 400ms ease, left 1s ease, right 1s ease;
    transition: opacity 400ms ease, left 1s ease, right 1s ease;
    transition-delay: 200ms}
.head h3 {padding: 0 20px; font-size: 36px; display: inline-block; background-color: #fff; position: relative; color: transparent;
    -webkit-transition: color 500ms ease;
    -moz-transition: color 500ms ease;
    -o-transition: color 500ms ease; transition: color 500ms ease}
.head.open .head_line {left: 0; right: 0; opacity: 1}
.head.open h3 {color: #808285}

.clients {margin: 0 auto 65px; width: 1230px; text-align: center}
.clients .client {width: 24%; height: 150px; display: inline-block; overflow: hidden; position: relative; left: -50px; opacity: 0}
.clients .client.open {left: 0; opacity: 1;
    -webkit-transition: opacity 1s ease, left 300ms ease;
    -moz-transition: opacity 1s ease, left 300ms ease;
    -o-transition: opacity 1s ease, left 300ms ease;
    transition: opacity 1s ease, left 300ms ease;
}
.clients .client.open img {
    margin: 0 auto; width: 185px; height: 105px; display: block;
    filter: url(grayscale.svg#greyscale); filter: gray;
    -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%); filter: grayscale(100%);
    -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s
}

.client_rounds {margin-bottom: 50px; text-align: center}
.client_rounds .round {margin: 30px; font-size: 21px; width: 360px; display: inline-block; vertical-align: top; line-height: 120%; position: relative; left: -50px; opacity: 0}
.client_rounds .round.open {left: 0; opacity: 1;
    -webkit-transition: opacity 1s ease, left 300ms ease;
    -moz-transition: opacity 1s ease, left 300ms ease;
    -o-transition: opacity 1s ease, left 300ms ease;
    transition: opacity 1s ease, left 300ms ease;
}
.client_rounds .round .image {margin: 0 auto 20px; background-image: url(../images/rounds.png); width: 245px; height: 214px}
.client_rounds .round .image.round1 {background-position: 0 0}
.client_rounds .round .image.round2 {background-position: -245px 0}
.client_rounds .round .image.round3 {background-position: -490px 0}
.client_rounds .round .image.round4 {background-position: -735px 0}
.client_rounds .round .image.round5 {background-position: 0 -214px}
.client_rounds .round .image.round6 {background-position: -245px -214px}
.client_rounds .round .image.round7 {background-position: -490px -214px}
.client_rounds .round .image.round8 {background-position: -735px -214px}

.advantages {height: 657px; background-image: url(../images/background2.jpg); color: #fff}
.advantages h3 {padding: 50px 0; font-size: 36px; color: transparent;
    -webkit-transition: color 500ms ease;
    -moz-transition: color 500ms ease;
    -o-transition: color 500ms ease; transition: color 500ms ease}
.advantages h3.open {color: #fff}

.presentation {margin-bottom: 60px; height: 321px; background-image: url(../images/background3.jpg); color: #fff; text-align: center}
.presentation_link {margin: 60px 80px 0 140px; color: #fff; text-transform: uppercase; text-decoration: underline; font-size: 19px; position: relative; display: inline-block; left: -50px; opacity: 0}
.presentation_link.open {left: 0; opacity: 1;
    -webkit-transition: opacity 1s ease, left 300ms ease;
    -moz-transition: opacity 1s ease, left 300ms ease;
    -o-transition: opacity 1s ease, left 300ms ease;
    transition: opacity 1s ease, left 300ms ease;
}
.presentation_link:before {width: 43px; height: 49px; content: ''; display: block; position: absolute; background-position: -114px 0; left: -60px; top: -14px}

.contact {margin-bottom: 45px; text-align: center}
.contact p {margin: 50px 0; font-size: 21px; opacity: 0; position: relative; left: -50px}
.contact .form {margin: 0 auto 45px; padding: 47px 57px; width: 1230px; border: 1px solid #999b9d; box-shadow: inset 0 0 0 1px #dfe0e1, 0 0 0 1px #ececed; background-color: #fff; border-radius: 17px; position: relative; opacity: 0; left: -50px}
.contact .form h3 {padding: 3px; font-size: 18px; font-weight: 400; background-color: #fff; text-transform: uppercase; position: absolute; top: -14px; left: 50px}
.contact .form label {margin: 0 30px 30px 0}
.contact .form input[type="text"],
.contact .form input[type="email"] {padding: 0 10px; width: 320px; font-size: 18px; line-height: 32px; height: 32px; background-color: transparent; border: 0; border-bottom: 2px solid #c0c1c2}
.contact .form textarea {margin-top: 50px; width: 1230px; min-height: 100px; font-size: 18px; background-color: transparent; border: 0; resize: vertical; overflow: auto}
.contact .form .icon {width: 29px; height: 34px}
.contact .form .icon.user {background-position: 0 -114px}
.contact .form .icon.mail {background-position: -29px -114px}
.contact .form .icon.phone {background-position: -60px -114px}
.contact .button {height: 78px; line-height: 78px; font-size: 31px; border-radius: 20px; position: relative; top: 50px; opacity: 0}
.contact .button span {padding: 0 40px 0 25px; height: 78px; line-height: 78px; border-radius: 20px}
.contact .button input,
.contact .button button {height: 78px}
.contact .button .arrow {top: 19px; right: 20px}
.contact .form.open,
.contact p.open {left: 0; opacity: 1; -webkit-transition: left .3s ease, opacity .6s ease; -moz-transition: left .3s ease, opacity .6s ease; -o-transition: left .3s ease, opacity .6s ease; transition: left .3s ease, opacity .6s ease}
.contact .button.open {top: 0; opacity: 1; -webkit-transition: top .3s ease, opacity .6s ease; -moz-transition: top .3s ease, opacity .6s ease; -o-transition: top .3s ease, opacity .6s ease; transition: top .3s ease, opacity .6s ease}

.footer {position: fixed; height: 230px; left: 0; right: 0; bottom: 0; padding-top: 80px; background-image: url(../images/background4.jpg); box-sizing: border-box}
.mobile footer {position: relative}
.footer p {font-size: 18px; color: #d9d9d9; text-align: center}
.footer_logo_image {width: 109px; height: 63px; float: left}
.footer_menu {margin-bottom: 30px; font-size: 36px; color: #fff; overflow: hidden}
.footer_menu a {margin-left: 190px; color: #fff; text-decoration: underline; position: relative}
.footer_menu a:before {content: ''; width: 29px; height: 34px; display: block; position: absolute; left: -42px; top: 14px; background-position: 0 -148px}
.footer_menu a[href^=tel]:before {width: 22px; left: -35px; top: 7px; background-position: -65px -68px}
.footer_menu a[href^=tel] {margin: 0 10px; font-size: 42px; text-decoration: none; float: right}
.footer_menu a[href^=tel] .button {position: relative; top: -7px; left: 10px; border-color: #fff}