html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* make sure to set some focus styles for accessibility */
:focus {
    outline: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

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

input[type=search] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

textarea {
    overflow: auto;
    vertical-align: top;
    resize: vertical;
}

/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    max-width: 100%;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

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

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */

[hidden] {
    display: none;
}

/**
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */

figure {
    margin: 0;
}

/**
 * Correct margin displayed oddly in IE 6/7.
 */

form {
    margin: 0;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct color not being inherited in IE 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */

legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}

/**
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

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

/**
 * Remove inner padding and border in Firefox 3+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html,
button,
input,
select,
textarea {
    color: #222;
}


::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
.hidden{
    display: none;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/robotoslab/v22/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoa4OmYmRjRdE.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/robotoslab/v22/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoa4Oma2RjRdE.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/robotoslab/v22/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoa4OmY2RjRdE.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/robotoslab/v22/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoa4OmbGRjRdE.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/robotoslab/v22/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoa4OmYGRjRdE.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/robotoslab/v22/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoa4OmYWRjRdE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/robotoslab/v22/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoa4Omb2Rj.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #bb460e #3c3a3a;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #3c3a3a;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #bb460e;
    border-radius: 12px;
    border: 7px inset #3f3f3f;
  }
html{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: #a3a3a3;
    overflow-x: hidden;
    overflow-y: hidden;

}
body{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background: url(../img/fon.jpg) center no-repeat;
    background-size: cover;
}
.top_menu{
    display: inline-flex;
    width: 100%;
    height: 10%;
    border-color: black;
    box-sizing: border-box;
    background: #17121278;
}
.top_menu{
    display: none;
}
.logo{
    display: flex;
    width: 18%;
    height: 100%;
    background-size: cover;
}
.logo_ouro{
    width: 50%;
    height: 100%;
    margin-left: 15%;
    max-width: 100%;
    max-height: 100%;
}
.top_nav{
    width: 94%;
    height: 100%;
    margin-left: 3%;
    display: inline-flex;
}
.top_nav_ul{
    display: inline-flex;
    height: 100%;
    width: 55%;
}
.top_nav_elem{
    display: flex;
    align-items: center;
    margin-left: 2.5%;
    width: 20%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    background-size: cover;
    
}
.top_nav_elem{
    display: none;
}
.nav_text_elem{
    color: #FFF;
    font-size: 1.2vw;
    font-weight: bold;
    border-bottom:2px solid #6F7C7D;
}
.nav_text_elem:hover{
    border-bottom:2px solid #bb460e;
}
.icon_contact{
    width: 50%;
    height: 50%;
}
.top_nav_ul li:last-child{
    display: inline-flex;
    width: 43.5%;
}
/*#tg{
    display: none;
}
#vb{
    display: none;
}
#vk{
    display: none;
}*/
#mail{
    display: none;
    
}
#wame{
    width: 30%;
}
.mail_feedback{
    text-shadow: 0.1vw 0.1vw 0 #969696, 0 0.4vw 0.4vw #aba8a8;
    color: #FFFFFF;
    font-size: 1vw;
}
.top_nav_ul li:first-child{
    margin-left: 0;
}
.sign{
    width: 35%;
    display: inline-flex;
    margin-left: auto;
}
.sign{
    display: none;
}
.sign_up{
    display: flex;
    align-items: center;
    width: 45%;
    height: 80%;
    box-sizing: border-box;
    border-bottom: 2px solid #bb460e;
    border-right: 4px solid #bb460e;
    border-left: 4px solid #bb460e;
    border-top: 2px solid #bb460e;
    margin-top: 2%;
    
    border-radius: 0;
}
.sign_in{
    display: flex;
    align-items: center;
    margin-left: 0;
    width: 45%;
    height: 80%;
    box-sizing: border-box;
    border-radius: 0%;
    border-bottom: 2px solid #6F7C7D;
    border-right: 4px solid #6F7C7D;
    border-left: 4px solid #6F7C7D;
    border-top: 2px solid #6F7C7D;
    margin-top: 2%;
    
    margin-left: 5%;
}
.centirovka_sign_in_text{
    width: 100%;
    height: 37.5%;
    text-align: center;
    color: #FFF;
    font-size: 1.2vw;
    font-weight: bold;

}
.centirovka_sign_up_text{
    width: 100%;
    height: 37.5%;
    text-align: center;
    color: #FFF;
    font-size: 1.2vw;
    font-weight: bold;
    
}
.logo_nav{
    width:35%;
    display: flex;
    align-items: center;
}
.wrapper{
    display: inline-flex;
    position: static;
    width: 100%;
    height: 90%;
    
}
.right_nav{
    display: none;
    box-sizing: border-box;
    position: static;
    width: 18%;
    height: 100%;
    -webkit-transition: background 5s ;
    -moz-transition: background 5s ;
    -ms-transition: background 5s ;
    -o-transition: background 5s ;
    transition: background 5s ;
    background: #A9B5A7;
    background: -moz-linear-gradient(-45deg, #A9B5A7 0%, #6D7475 39%, #262626 100%);
    background: -webkit-linear-gradient(-45deg, #A9B5A7 0%, #6D7475 39%, #262626 100%);
    background: linear-gradient(135deg, #A9B5A7 0%, #6D7475 39%, #262626 100%);
    -webkit-animation: Rigth_menu 53s ease infinite;
    -moz-animation: Rigth_menu 53s ease infinite;
    -o-animation: Rigth_menu 53s ease infinite;
    animation: Rigth_menu 53s ease infinite;

}
 @-webkit-keyframes Rigth_menu {
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
@-moz-keyframes Rigth_menu {
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
@-o-keyframes Rigth_menu {
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
@keyframes Rigth_menu {
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
.menu_right{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 70%;
}
.right_nav_link{
    display: none;
    text-align: center;
    margin-top: 8%;
    box-sizing: border-box;
    border-bottom: 5px solid #7BA7AB;
    border-right: 2px solid #7BA7AB;
    border-radius: 50%;
    height: 10%;
    width: 100%;
    -webkit-box-shadow: 0px 18px 12px -7px #171717; 
    box-shadow: 0px 18px 12px -7px #171717;
    background-color: #17121278;
    text-shadow: 0.1vw 0.1vw 0 #969696, 0 0.4vw 0.4vw #aba8a8;
    color: #FFFFFF;
    font-size: 1.5vw;
}
.screen_section_right{
    position: static;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    z-index: 2;
}
.welcome{
    display: flex;
    flex-direction: column;
    scroll-snap-align: center;
    width: 85%;
    height: 100%;
    margin-left: 7.5%;
    margin-right: 7.5%;
    box-sizing: border-box;
    border-bottom: 2px solid #bb460e;
    border-radius: 5px;
    /*background: url(../img/yro.png) center no-repeat;*/
    
}
.welcome_fon_one{
    display: none;
    position: absolute;
    width: 32%;
    height: 70%;
    z-index: -1;
    background-size: contain;
    animation-duration: 10s;
    animation-name: changewidthpo;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: 49.5% 51%;
    left: 33.5%;
    top: 15%;
}
@keyframes changewidthpo {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(-1turn);
  }
}
.welcome_fon_two{
    display: none;
    position: absolute;
    width: 32%;
    height: 70%;
    z-index: -1;
    background-size: contain;
    animation-duration: 10s;
    animation-name: changewidthpro;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: 49.5% 51%;
    left: 33.5%;
    top: 15%;
}
@keyframes changewidthpro {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(1turn);
  }
}
.welcoms_text{
    display: flex;
    width: 85%;
    margin-left: 7.5%;
    margin-right: 7.5%;
    margin-top: 2%;
    text-align: center;
    height: 10%;
    text-shadow: 0.1vw 0.1vw 0 #969696, 0 0.4vw 0.4vw #aba8a8;
    color: #FFFFFF;
    font-size: 1.5vw;
    z-index: 3;
}
.prefer{
    display: grid;
    width:95%;
    margin-top:2%;
    height: 40%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 2.5%;
}
.prefer_elem{
    display:flex;
    flex-direction: column;
    max-height: 63%;
    max-width: 100%;
}
.prefer_elem_img{
    width:100%;
    height:25%;
}
.prefer_elem_title{
    margin-top:4.5%;
    height:20%;
    text-align:center;
    font-weight: bold;
    color:#bb460e;
    font-size:1.2vw;
}
.prefer_elem_description{
    margin-top:7.5%;
    text-align:center;
    font-weight: bold;
    color:#FFF;
    font-size:1vw;
}
.prefer_img_svg{
    background-size: cover;
    width: 100%;
    height: 100%;
}
.phone{
    display: none;
    margin-top: 2%;
    width: 100%;
    height: 10%;
    color: #FFF;
    font-size: 1.5vw;
    font-weight: bold;
    text-align: center;
    z-index: 3;
}
.phone:hover{
    color: #bb460e;
}
.targets_container{
    display:inline-flex;
    align-items: center; 
    width:85%;
    height:10%;
    margin-top:10%;
    margin-left:7.5%;
    margin-right:7.5%;
}
.phone_callback_container{
    display:flex;
    justify-content: center;
    width:45%;
    height: 100%;
}
.why_we_link_container{
    display:flex;
    justify-content: center;
    width:45%;
    height:100%;
    margin-left:10%;
    
}
.phone_callback_input{
    color:#FFF;
    text-overflow: ellipsis;
    text-align:center;
    border-bottom: 2px solid #6F7C7D;
    border-right: 4px solid #6F7C7D;
    border-left: 4px solid #6F7C7D;
    border-top: 2px solid #6F7C7D;
    box-sizing: border-box;
    width:70%;
    height:100%;
    background:rgba(0,0,0,0);
}
.why_we_link{
    display:flex;
    align-items: center;
    width:70%;
    height:100%;
    text-align: center;
    color: #FFF;
    font-size: 1.4vw;
    box-sizing: border-box;
    border-bottom: 2px solid #bb460e;
    border-right: 4px solid #bb460e;
    border-left: 4px solid #bb460e;
    border-top: 2px solid #bb460e;
}
.why_we_link_text{
    height:50%;
    width:100%;
}
.vectors{
    scroll-snap-align: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin-top: 7.5%;
}
.container_cards{
    display: grid;
    width: 85%;
    height: 95%;
    margin-left: 7.5%;
    margin-right: 7.5%;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-row-gap: 7.5%;
    grid-column-gap: 10%;
}
.card{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 10%;
}
.card_fon{
    width: 100%;
    height: 100%;
    z-index: -1;
}
.card:hover{
    opacity: 0.65;
    color: orangered;
}
.cards_text{
    display: flex;
    align-items: center;
    width: 100%;
    height: 20%;
    color: #7BA7AB;
    z-index: 3;
    text-align: center;
    text-shadow: 0.1vw 0.1vw 0 #969696, 0 0.4vw 0.4vw #aba8a8;
    background-color: black;
    font-size: 1.2vw;
}
.centirovka_cards_text{
    width: 100%;
    height: 50%;
}
.full_card{
    display: none;
}
.full_card{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}
.left_cardside{
    display: flex;
    flex-direction: column;
    width: 30%;
    height: 100%;
}
.right_cardside{
    display: flex;
    flex-direction: column;
    width: 60%;
    margin-left: 5%;
    margin-right: 5%;
    height: 100%;
}
.web_links{
    display: flex;
    flex-direction: column;
    height: 80%;
    margin-bottom: 10%;
    margin-top: 10%;
    width: 90%;
    margin-left: 5%;
}
.web_link{
    box-sizing: border-box;
    margin-top: 8%;
    height: 10%;
    width: 100%;
    box-shadow: 0px 18px 12px -7px #171717;
    border-radius: 0;
    background-color: #17121278;
    text-shadow: 0.1vw 0.1vw 0 #969696, 0 0.4vw 0.4vw #aba8a8;
    color: #FFFFFF;
    font-size: 1.2vw;
    text-align: center;
}

.web_link:hover{
    border-radius: 50%;
    border-bottom: 5px solid #7BA7AB;
    border-right: 2px solid #7BA7AB;
    -webkit-box-shadow: 0px 18px 12px -7px #171717; 
    box-shadow: 0px 18px 12px -7px #171717;
}
.web_cardside_top{
    display: inline-flex;
    align-items: center;
    margin-top: 8%;
    padding-right: 5%;
    height: 10%;
    width: 90%;
    padding-left: 5%;
    background-color: #17121278;
}
.webtext_card_side_top{
    display: flex;
    align-content: center;
    align-items: center;
    width: 85%;
    height: 100%;
    text-shadow: 0.1vw 0.1vw 0 #969696, 0 0.4vw 0.4vw #aba8a8;
    color: #FFFFFF;
    font-size: 1.2vw;
    text-align: center;
}
.centirovka_cards_text_webtext{
    width: 100%;
    height: 50%;
    text-align: center;
}
.icon_back_text{
    width: 10%;
    height: 100%;
    margin-left: 5%;
    background: url(../img/svg/icon_back.png) no-repeat;
    background-size: contain;
}
.web_cardside_medium{
    background-color: #17121278;
    padding-top: 7%;
    height: 60%;
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    text-shadow: 0.1vw 0.1vw 0 #969696, 0 0.4vw 0.4vw #aba8a8;
    color: #FFFFFF;
    font-size: 1.2vw;
    text-align: center;
}
.web_cardside_bottom{
    padding-top: 3%;
    padding-bottom: 5%;
    padding-right: 5%;
    padding-left: 5%;
    background-color: #17121278;
    display: inline-flex;
    align-items: center;
    height: 7%;
}
.right_but_card{
    position: relative;
    display: flex;
    align-items: center;
    color: #03e9f4;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.5s;
    letter-spacing: 4px;
    overflow: hidden;
    width: 45%;
    height: 100%;
    text-align: center;
    filter: hue-rotate(270deg);

}
.right_but_card span{
    position: absolute;
    display: block;
}
.right_but_card span:nth-child(1){
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,transparent,#03e9f4);
    animation: animate1 1s linear infinite;
}
@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}
.right_but_card span:nth-child(2){
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,transparent,#03e9f4);
    animation: animate2 1s linear infinite;
    animation-delay: 0.25s;
}
@keyframes animate2{
    0%{
        top: -100%;
    }
    50%,100%{
        top: 100%;
    }
}
.right_but_card span:nth-child(3){
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg,transparent,#03e9f4);
    animation: animate3 1s linear infinite;
    animation-delay: 0.50s;
}
@keyframes animate3{
    0%{
        right: -100%;
    }
    50%,100%{
        right: 100%;
    }
}


.right_but_card span:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg,transparent,#03e9f4);
    animation: animate4 1s linear infinite;
    animation-delay: 0.75s;
}
@keyframes animate4{
    0%{
        bottom: -100%;
    }
    50%,100%{
        bottom: 100%;
    }
}
.left_but_card{
    position: relative;
    display: flex;
    align-items: center;
    color: #03e9f4;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.5s;
    letter-spacing: 4px;
    overflow: hidden;
    width: 45%;
    height: 100%;
    text-align: center;

}
.centirovka_but_card{
    font-size: 0.8vw;
    width: 100%;
    height: 50%;
    color: #03e9f4;
    text-decoration: none;
    text-transform: uppercase;
}
.left_but_card span{
    position: absolute;
    display: block;
}
.left_but_card span:nth-child(1){
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,transparent,#03e9f4);
    animation: animate1 1s linear infinite;
}
@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}
.left_but_card span:nth-child(2){
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,transparent,#03e9f4);
    animation: animate2 1s linear infinite;
    animation-delay: 0.25s;
}
@keyframes animate2{
    0%{
        top: -100%;
    }
    50%,100%{
        top: 100%;
    }
}
.left_but_card span:nth-child(3){
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg,transparent,#03e9f4);
    animation: animate3 1s linear infinite;
    animation-delay: 0.50s;
}
@keyframes animate3{
    0%{
        right: -100%;
    }
    50%,100%{
        right: 100%;
    }
}


.left_but_card span:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg,transparent,#03e9f4);
    animation: animate4 1s linear infinite;
    animation-delay: 0.75s;
}
@keyframes animate4{
    0%{
        bottom: -100%;
    }
    50%,100%{
        bottom: 100%;
    }
}
.form_with_services{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 130%;
    box-sizing: border-box;
    margin-top: 7.5%;

}
.form_scroll {
    scroll-snap-align: center;
    width: 85%;
    height: 30%;
    margin-left: 7.5%;
    margin-right: 7.5%;
}
.phone_callback{
    width: 50%;
    height: 20%;
    box-sizing: border-box;
    border: 2px solid #7BA7AB;
    border-radius: 5px;
    text-align: center;
    outline: none;
    background: #fff;
    color: #9E9C9C;
}
.usp_services{
    width: 85%;
    margin-top: 2.5%;
    height: 7.5%;
    margin-left: 7.5%;
    margin-right: 7.5%;
}
.services{
    scroll-snap-align: center;
    display: grid;
    margin-top: 5%;
    width: 85%;
    height: 65%;
    margin-left: 7.5%;
    margin-right: 7.5%;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-row-gap: 5%;
    grid-column-gap: 5%;

}
.service{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 50%;
    border-bottom: 5px solid #7BA7AB;
    border-right: 2px solid #7BA7AB;
    -webkit-box-shadow: 0px 18px 12px -7px #171717; 
    box-shadow: 0px 18px 12px -7px #171717;
    border-radius: 5px;
    max-width: 100%;
    max-height: 100%;
    min-width: 100%;
    min-height: 100%;
}
.about_company{
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 110%;
    box-sizing: border-box;
    margin-top: 7.5%;
}
.about_company_title{
    width: 85%;
    margin-top: 2.5%;
    height: 7.5%;
    margin-left: 7.5%;
    margin-right: 7.5%;
}
.about_company_cards{
    display: grid;
    margin-top: 5%;
    width: 85%;
    height: 50%;
    margin-left: 7.5%;
    margin-right: 7.5%;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-row-gap: 5%;
    grid-column-gap: 5%;
}
.company_card{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px solid #7BA7AB;
    border-radius: 5px;
}
.text_about_company{
    display: flex;
    text-align: left;
    margin-top: 2.5%;
    width: 85%;
    height: 35%;
    margin-left: 7.5%;
    margin-right: 7.5%;
}
.buttons_container{
    display: inline-flex;
    margin-top: 2.5%;
    width: 85%;
    height: 10%;
    margin-left: 7.5%;
    margin-right: 7.5%;
}
.left_but{
    height: 100%;
    width: 47.5%;
}
.right_but{
    height: 100%;
    width: 47.5%;
    margin-left: 5%;
}
.panel_item_style{
    width: 100%;
    height: 80%;
    background-size: contain;
    opacity: 0.7;
}
.form_with_services_home{
    display: none;
    flex-direction: column;
    width: 100%;
    height: 130%;
    box-sizing: border-box;
    margin-top: 7.5%;

}
.service_home{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: #17121278;
    border-radius: 0;
    background-color: #17121278;
    color: #FFFFFF;
    font-size: 1.2vw;
    text-align: center;
    
    max-width: 100%;
    max-height: 100%;
    min-width: 100%;
    min-height: 100%;
}
.centirovka_service_text{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}
.service_home:hover{
    border-bottom: 3px solid #7BA7AB;
    border-right: 1px solid #7BA7AB;
    border-left: 1px solid #7BA7AB;
    border-top: 3px solid #7BA7AB;
}
.full_card_home{
    display: none;
}
.full_card_home{
    display: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: #17121278;
    border-bottom: 3px solid #7BA7AB;
    border-top: 3px solid #7BA7AB;
    border-radius: 8px;
}
.top_line_fcm{
    display: inline-flex;
    height: 10%;
    width: 90%;
    margin-left: 5%;
    margin-top: 1%;
    margin-right: 5%;
}
.tl_fcm_r8{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 1.2vw;
    height: 100%;
    width: 30%;
}

:root {
  --gray: #34495e;
  --darkgray: #2c3e50;
}

select {
  /* Reset Select */
  appearance: none;
  outline: 0;
  border: 0;
  box-shadow: none;
  /* Personalize */
  flex: 1;
  padding: 0 1em;
  color: #fff;
  background-color: var(--darkgray);
  background-image: none;
  cursor: pointer;
}
/* Remove IE arrow */
select::-ms-expand {
  display: none;
}
/* Custom Select wrapper */
.select {
  position: relative;
  display: flex;
  border-radius: .25em;
  overflow: hidden;
}
/* Arrow */
.select::after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  padding-top: 0.3vw;
  padding-bottom: 0.2vw;
  padding-left: 0.3vw;
  margin-top: 0.825vw;
  padding-right: 0.3vw;
  background-color: #34495e;
  transition: .25s all ease;
  pointer-events: none;
}
/* Transition */
.select:hover::after {
  color: #f39c12;
}
.tl_fcm_slct{

    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5%;
    width: 50%;
    height: 100%;
}

.icon_home_back_text{
    width: 5%;
    height: 100%;
    margin-left: 12.5%;
    background: url(../img/svg/icon_back.png) no-repeat;
    background-size: contain;
}

input:focus, textarea:focus, select:focus{
    outline: none;
    }
    .form{
    width: 35%;
    position: relative;
    height: 80%;
    overflow: hidden;
    margin-left: auto;
    }
    .form input{
    width: 100%;
    height: 100%;
    color: #fff;
    background: none;
    appearance: none;
    border: none;
    font-size: 1.2vw;
    }
    .form label{
    position: absolute;
    bottom: 0px;
    color: #fff;
    left: 0%;
    width: 100%;
    height: 70%;
    pointer-events: none;
    padding-left: 20px;
    font-size: 1.2vw;
    border-bottom: 1px solid #fff;
    }
    .name-sectioin{
    background: #130f40;
    }
    .form label::after{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    border-bottom: 3px solid #7BA7AB;
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
    transition: all 0.3s ease;
    }
    .content-name{
    position: absolute;
    bottom: 5px;
    left: 0;
    font-size: 1.2vw;
    transition: all 0.3s ease;
    }
    .form input:focus + .label-name .content-name,
    .form input:valid + .label-name .content-name{
    transform: translateY(-250%);
    font-size: 1.2vw;
    }
    .form input:focus + .label-name::after,
    .form input:valid + .label-name::after{
    transform:translateX(0%);
    }

@import url('https://fonts.googleapis.com/css2?family=Comfortaa&display=swap');

.login {
  width: 25%;
  padding: 8% 0 0;
  margin: auto;
  font-family: 'Comfortaa', cursive;
}

.form_log {
  position: relative;
  z-index: 1;
  background: none;
  border-bottom: 3px solid #7BA7AB;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
}

.form_log input {
  outline: 0;
  background: none;
  border-bottom: 1px solid #7BA7AB;
  width: 100%;
  color: #FFFFFF;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  margin: 0 0 1.3vw;
  padding: 1.3vw;
  box-sizing: border-box;
  font-size: 1.2vw;
  font-family: 'Comfortaa', cursive;
  font-weight: bold;
}

.form_log input:focus {
  background: #dbdbdb;
  opacity: 0.25;
  color: #222;
}

.form_log button {
  font-family: 'Comfortaa', cursive;
  text-transform: uppercase;
  outline: 0;
  background: none;
  width: 100%;
  border: 3px solid #7BA7AB;
  border-radius: 5px;
  padding: 1.4vw;
  color: #FFFFFF;
  font-size: 1.2vw;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}

.form_log button:active {
  background: #395591;
}

.form_log span {
  font-size: 75px;
  color: #4b6cb7;
}