code, kbd, pre, samp {
    font-family: monospace, monospace
}

button, hr, input {
    overflow: visible
}

audio, canvas, progress, video {
    display: inline-block
}

progress, sub, sup {
    vertical-align: baseline
}

*, :after, :before, legend {
    box-sizing: border-box
}

body input:focus:required:invalid, body input:required:valid, body textarea:focus:required:invalid, body textarea:required:valid, mark {
    color: #000
}

body, sub, sup {
    position: relative
}

.center-content, .login-form-title, .rate-name {
    text-align: center
}

.about-wrapper, .contact, .login-form, .rate, .registration-form {
    align-self: flex-start
}

html {
    line-height: 1;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

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

figcaption, figure, main {
    display: block
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0
}

pre {
    font-size: 1em
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

abbr[title] {
    border-bottom: none;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

.footer-nav a, .header-auth a, .header-nav a, .rate-btn {
    text-decoration: none
}

b, strong {
    font-weight: bolder
}

dfn {
    font-style: italic
}

mark {
    background-color: #ff0
}

sub, sup {
    line-height: 0
}

audio:not([controls]) {
    display: none;
    height: 0
}

img {
    border-style: none
}

svg:not(:root) {
    overflow: hidden
}

button, input, optgroup, select, textarea {
    font-family: sans-serif;
    font-size: 100%;
    margin: 0
}

button, input {
}

button, select {
    text-transform: none
}

[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
    outline: ButtonText dotted 1px
}

legend {
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
}

textarea {
    overflow: auto
}

[type=checkbox], [type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

[hidden], template {
    display: none
}

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

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

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

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

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

::-webkit-input-placeholder {
    color: #000;
    opacity: 1;
    transition: opacity .25s
}

:focus::-webkit-input-placeholder {
    opacity: 0
}

:-moz-placeholder {
    color: #000;
    opacity: 1;
    transition: opacity .25s
}

:focus::-moz-placeholder {
    opacity: 0
}

::-moz-placeholder {
    color: #000;
    opacity: 1;
    transition: opacity .25s
}

:focus:-moz-placeholder {
    opacity: 0
}

:-ms-input-placeholder {
    color: #000;
    opacity: 1;
    transition: opacity .25s
}

.contact-form button, .footer-nav a, .header .mobile-menu span, .header-auth a, .header-nav a, .login-form button, .login-form-link, .rate-btn {
    transition: all .25s
}

:focus:-ms-input-placeholder {
    opacity: 0
}

*, body {
    -webkit-tap-highlight-color: transparent;
    -webkit-focus-ring-color: transparent;
    outline: 0
}

body, html {
    height: 100%
}

body {
    margin: 0;
    font-size: 16px;
    min-width: 320px;
    line-height: 1.25;
    font-family: segoeui, sans-serif;
    overflow-x: hidden;
    opacity: 1
}

h1, h2, h3, h4, h5, h6 {
    font-size: 1em;
    font-weight: 400;
    margin: 0
}

.preloader {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    background-color: #FBF8F8
}

.hero .container, .preloader img {
    position: relative
}

.preloader img {
    left: 50%;
    top: 50vh;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.rate-info-col::before, .rate-price::after {
    content: '';
    top: 0
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto
}

.container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 1370px;
    margin: 0 auto
}

.header {
    background-color: #fff;
    padding-top: 27px;
    padding-bottom: 21px
}

.header .mobile-menu {
    display: none
}

.header .mobile-menu span {
    display: inline-block;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg)
}

.header .mobile-menu.active span {
    -webkit-transform: rotate(450deg);
    transform: rotate(450deg);
    left: 4px
}

.header-nav {
    margin-left: 298px
}

.header-nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 0;
    letter-spacing: -1px
}

.header-nav li {
    display: inline-block;
    font-size: 18px;
    letter-spacing: 0;
    font-family: seguisb, sans-serif;
    margin-right: 60px
}

.header-nav li:last-child {
    margin-right: 0
}

.header-nav li.current a {
    color: #a0a1a6
}

.header-nav a {
    color: #000
}

.header-nav a:hover {
    color: #a0a1a6
}

.header-auth {
    margin-left: auto;
    display: flex;
    align-items: center
}

.header-auth a {
    display: inline-block;
    font-size: 16px;
    line-height: 40px;
    padding: 0 25px;
    color: #fff;
    border-radius: 10px
}

.header-auth a:first-child {
    background-color: grey
}

.header-auth a:first-child:hover {
    background-color: #454545
}

.header-auth a:last-child {
    background-color: #000;
    margin-left: 17px
}

.header-auth a:last-child:hover {
    background-color: #363636
}

.hero {
    background-image: url(../img/hero-img.jpg);
    background-size: cover;
    background-position: center;
    padding-top: 92px;
    padding-bottom: 29px
}

.hero.no-main-page {
    padding-bottom: 36px
}

.hero.no-main-page .hero-icon {
    bottom: -134px
}

.hero-icon {
    position: absolute;
    left: 39px;
    bottom: -115px
}

.hero-title {
    flex: 1 100%;
    font-size: 124px;
    color: #fff;
    font-family: "11764", sans-serif;
    margin-left: 192px;
    margin-bottom: 38px
}

.hero-text {
    flex: 1 100%;
    font-size: 45px;
    line-height: 53px;
    color: #fff;
    margin-left: 238px;
    margin-right: 180px;
    font-family: corbelb, sans-serif
}

.hero-text span {
    color: #b5b5b5
}

.hero-text p {
    margin: 0
}

.login-form {
    flex: 0 270px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, .08)
}

.login-form-title {
    font-size: 20px;
    background-color: #d8d8d8;
    height: 63px;
    padding-top: 18px;
    font-family: seguisb, sans-serif
}

.login-form form {
    background-color: #ececec;
    padding: 20px 23px 32px
}

.login-form input {
    display: block;
    width: 100%;
    height: 40px;
    font-size: 13px;
    padding-left: 21px;
    border-radius: 5px;
    border: 0;
    margin-bottom: 9px;
    font-family: segoeuisl, sans-serif
}

.login-form-bottom {
    display: flex;
    align-items: center;
    margin-top: 15px
}

.login-form button {
    font-size: 16px;
    line-height: 40px;
    padding: 0 25px;
    font-family: inherit;
    color: #fff;
    border-radius: 5px;
    border: 0;
    cursor: pointer;
    background-color: grey
}

.rate-name, .rate-price {
    font-family: seguisb, sans-serif
}

.login-form button:hover {
    background-color: #454545
}

.login-form-link {
    color: grey;
    margin-left: 12px;
}

.login-form-link:hover {
    color: #454545
}

.rates {
    padding-top: 123px;
    padding-bottom: 70px
}

.rate {
    flex: 0 300px;
    background-color: #0a0a0a;
    margin-left: 65px;
    padding-top: 24px;
    padding-bottom: 22px
}

.rate-name {
    color: #fff;
    padding: 0 60px;
    height: 40px;
    margin-bottom: 25px
}

.rate-info {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c8c8c8;
    margin-bottom: 16px
}

.rate-info-col {
    position: relative;
    padding-left: 30px
}

.rate-info-col::before {
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat
}

.rate-info-col:first-child {
    margin-right: 23px
}

.rate-info-col:first-child::before {
    background-image: url(../img/time.png)
}

.rate-info-col:last-child::before {
    background-image: url(../img/price.png)
}

.rate-text {
    font-size: 13px;
    line-height: 20px;
    color: #c8c8c8;
    text-align: center;
    padding: 0 50px;
    margin-bottom: 32px
}

.rate-btn, .rate-price {
    line-height: 40px;
    text-align: center
}

.rate-text p {
    margin: 0
}

.rate-buy {
    display: flex;
    align-items: center;
    justify-content: center
}

.rate-price {
    position: relative;
    background-color: grey;
    font-size: 18px;
    color: #fff;
    width: 109px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding-left: 8px
}

.rate-price::after {
    position: absolute;
    right: -29px;
    border: 20px solid transparent;
    border-left: 9px solid grey
}

.rate-btn {
    background-color: #5a5a5a;
    width: 105px;
    color: #fff;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-left: 9px
}

.rate-btn:hover {
    background-color: #454545
}

.registration {
    padding-top: 42px;
    padding-bottom: 169px
}

.registration .login-form {
    margin-top: 94px
}

.registration-form {
    flex: 1;
    margin-left: 65px
}

.registration-title {
    font-size: 35px;
    font-family: corbelb, sans-serif;
    margin-bottom: 51px
}

.my-reg-wrap {
    background-color: #f4f4f4;
    padding: 47px 35px 48px
}

.my-reg-wrap input {
    width: 100%;
    height: 45px;
    border: 1px solid #c3c3c3;
    background-color: #fff;
    font-family: inherit;
    font-size: 15px;
    padding-left: 25px;
    margin-bottom: 18px
}

.flex-wrap {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.flex-left-cl {
    flex: 0 400px
}


.contact-left-col div a, .contact-title {
    font-family: corbelb, sans-serif
}

/*.my-reg-wrap input:nth-child(2) {*/
/*margin-bottom: 31px*/
/*}*/

.my-reg-wrap button {
    /*font-size: 20px;*/
    color: #fff;
    border-radius: 5px;
    width: 222px;
    height: 50px;
    border: 0;
    margin-top: 29px;
    background-color: #000;
    cursor: pointer;
    transition: all .25s
}

.my-reg-wrap button:hover {
    background-color: #363636
}

.registration-text {
    flex: 1;
    font-size: 12px;
    margin-left: 28px
}

.registration-text p {
    margin: 0
}

.contact {
    padding-top: 42px;
    padding-bottom: 175px
}

.contact .login-form {
    margin-top: 94px
}

.contact-wrap {
    flex: 1;
    margin-left: 63px
}

.contact-wrapper {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap
}

.contact-left-col {
    flex: 0 235px;
    margin-right: 22px
}

.contact-left-col div a {
    display: flex;
    align-items: center;
    color: #000;
    text-decoration: none
}

.contact-left-col div a img {
    margin-right: 23px
}

.contact-skype {
    margin-bottom: 19px
}

.contact-title {
    font-size: 35px;
    margin-bottom: 51px
}

.contact-form {
    flex: 0 778px;
    background-color: #F4F4F4;
    padding: 21px 22px 38px
}

.contact-form-title {
    font-size: 18px;
    font-family: seguisb, sans-serif;
    color: #000;
    margin-bottom: 26px
}

.contact-form input, .contact-form textarea {
    display: block;
    width: 100%;
    border: 1px solid #c3c3c3;
    background-color: #fff;
    font-family: inherit;
    font-size: 15px;
    padding-left: 25px
}

.contact-form textarea {
    resize: none;
    max-width: 686px;
    height: 116px;
    margin-bottom: 18px
}

.contact-form textarea:nth-child(2) {
    margin-bottom: 31px
}

.contact-form input {
    max-width: 400px;
    height: 45px;
    margin-bottom: 18px
}

.contact-form button {
    font-size: 20px;
    color: #fff;
    border-radius: 5px;
    width: 286px;
    height: 50px;
    border: 0;
    margin-top: 15px;
    background-color: #000;
    cursor: pointer
}

.contact-form button:hover {
    background-color: #363636
}

.about {
    padding-top: 42px;
    padding-bottom: 175px
}

.about .login-form {
    margin-top: 94px
}

.about-wrapper {
    flex: 1;
    margin-left: 65px
}

.about-title {
    font-size: 35px;
    font-family: corbelb, sans-serif;
    margin-bottom: 44px
}

.about-text {
    font-size: 15px;
    line-height: 24px
}

.about-text p {
    margin: 0 0 24px
}

.about-text p:last-child {
    margin-bottom: 0
}

.footer {
    padding-top: 36px;
    padding-bottom: 80px
}

.footer-copyright {
    font-size: 14px;
    color: #484a4f
}

.footer-nav {
    margin-left: 169px
}

.footer-nav ul {
    padding: 0;
    margin: 0;
    font-size: 0;
    letter-spacing: -1px;
    list-style-type: none
}

.footer-nav li {
    display: inline-block;
    font-size: 18px;
    font-family: seguisb, sans-serif;
    letter-spacing: 0;
    margin-right: 60px
}

.footer-nav a {
    color: #6d6e73
}

.footer-nav a:hover {
    color: #a0a1a6
}

.footer-metrica {
    margin-left: auto
}


.container {
    width: 1230px;
    padding: 0 15px
}

.header-nav {
    margin-left: 178px
}

.hero-title {
    margin-left: 0;
    text-align: center
}

.hero-text {
    margin: 0 160px;
    text-align: center
}

.rate {
    margin-left: 10px
}

.contact-form {
    flex: 0 570px
}


.about .login-form, .contact .login-form, .registration .login-form {
    max-width: 300px
}

.about-title, .contact-title, .registration-title {
    text-align: center
}

.container {
    width: 992px
}

.header-nav {
    margin-left: 60px
}

.rate {
    width: 300px;
    flex: auto;
    margin: 30px auto 0
}

.rates {
    padding-top: 70px
}

.rates .container {
    flex-direction: column
}

.login-form {
    flex: auto;
    width: 300px;
    margin: 0 auto
}

.about-wrapper, .contact-wrap {
    margin-left: 0;
    margin-top: 30px
}

.about-wrapper {
    flex: 1 100%
}

.contact-wrap {
    flex: 1 100%
}

.contact-left-col {
    margin: 0 auto 20px
}

.contact-form {
    margin: 0 auto;
    flex: 1 100%
}

.registration-form {
    flex: 1 100%;
    margin-top: 30px;
    margin-left: 0
}


.container {
    width: 768px
}

.header {
    position: relative
}

.header .mobile-menu {
    display: block;
    font-size: 18px;
    font-family: seguisb, sans-serif;
    text-transform: uppercase
}

.header .mobile-menu span {
    font-size: 20px;
    line-height: 0;
    position: relative;
    top: 1px
}

.header-auth, .header-nav nav {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 9
}

.header-auth {
    top: 230px;
    flex-direction: column;
    padding-bottom: 22px;
    background: #fff;
    opacity: 0
}

.header-auth a:last-child {
    margin-left: 0;
    margin-top: 10px
}

.header-nav {
    margin-left: auto
}

.header-nav nav {
    display: none;
    top: 72px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #fff
}

.footer-nav li, .header-nav li {
    display: block;
    text-align: center
}

.header-nav li {
    margin-right: 0;
    margin-bottom: 10px
}

.header-nav li:last-child {
    margin-bottom: 0
}

.hero-title {
    font-size: 84px
}

.hero-text {
    font-size: 35px;
    line-height: 40px;
    margin: 0 20px
}

.hero {
    padding-bottom: 70px
}

.footer, .rates {
    padding-bottom: 30px
}

.hero-icon {
    bottom: -175px
}

.footer {
    padding-top: 30px
}

.footer-nav {
    order: -1;
    flex: 1 100%;
    margin-left: 0
}

.footer-nav li {
    margin-right: 0;
    margin-bottom: 10px
}

.footer-nav li:last-child {
    margin-bottom: 0
}

.footer-copyright, .footer-metrica {
    flex: 1 100%;
    text-align: center;
    margin-top: 20px
}

.registration-text {
    flex: 1 100%;
    margin-top: 30px;
    margin-left: 0
}


.container {
    width: auto
}

.hero-icon {
    left: 50%;
    bottom: -128px;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
}

.hero-icon img {
    width: 99px
}

.hero-title {
    font-size: 60px;
    margin-bottom: 15px
}

.hero {
    padding-top: 50px
}

.hero-text {
    font-size: 25px;
    line-height: 30px
}

.hero.no-main-page .hero-icon {
    bottom: -91px
}


.hero-title {
    font-size: 38px
}

.hero-text {
    margin: 0;
    font-size: 20px;
    line-height: 23px
}

.login-form, .rate {
    width: 290px
}

button:focus {
    outline: none;
}