@font-face {
font-family:'graphik';
font-style:normal;
font-weight:300;
src:local('graphik'), local('graphik'), url(../style/fonts/graphik/graphik-300.ttf) format('truetype');
}

@font-face {
font-family:'gilroy';
font-style:normal;
font-weight:300;
src:local('gilroy'), local('gilroy'), url(../style/fonts/gilroy/gilroy-300.ttf) format('truetype');
}

@font-face {
font-family:'gilroy';
font-style:normal;
font-weight:500;
src:local('gilroy'), local('gilroy'), url(../style/fonts/gilroy/gilroy-500.ttf) format('truetype');
}

*, 
*:after, 
*:before {
-webkit-box-sizing:border-box;
box-sizing:border-box;
}

:root {
--basic-white:#fff; /* белый */
--basic-black:#181819; /* черный */
--basic-lightgrey:#dfe9f7; /* светло-серый */
--basic-opacitygrey:#f3f7fc; /* светло-серый */
--basic-grey:#a2a2a3; /* серый */
--basic-darkgrey:#423f3f; /* темно-серый */
--basic-blue:#0069b4; /* синий */
--basic-red:#f8563c; /* красный */
--basic-border:#cadcf2; /* рамка */
}

header#header-encoders {
position:fixed;
width:100%;
z-index:345;
}

header#header-encoders,
header#header-encoders p,
.popup p {
font-weight:300;
font-family:'graphik';
}

header#header-encoders > .wrap:nth-child(1) {
padding:20px 40px;
background:var(--basic-lightgrey);
}

header#header-encoders > .wrap:nth-child(2) {
position:absolute;
padding:8px 40px;
}

header#header-encoders .header-contact,
header#header-encoders .header-order {float:right;}

header#header-encoders .icon-before {
position:relative;
padding-left:28px;
}

header#header-encoders .icon-before:before {
position:absolute;
top:0;
left:0;
font:500 13px/30px "icons";
}

header#header-encoders .header-contact a {border:0;}

header#header-encoders .header-contact p span,
header#header-encoders .header-order p span {opacity:.5;}

header#header-encoders .header-contact p,
header#header-encoders .header-order p,
header#header-encoders .header-order a.link-more {
float:left;
margin:0 0 0 28px;
}

header#header-encoders .header-order p {
font-size:13px;
line-height:20px;
padding:7px 0;
text-align:right;
}

header#header-encoders .header-order a.link-more {
display:inline-block;
padding:0 28px;
line-height:48px;
margin:-9px 0 -9px 28px;
color:var(--basic-white);
background:var(--basic-blue);
border:0;
border-radius:4px;
}

header#header-encoders .header-order a.link-more:hover {
box-shadow:0px 4px 16px rgba(24,24,25,.4);
}

header#header-encoders .logo {
float:left;
color:var(--basic-black);
margin-right:40px;
border:0;
}

header#header-encoders .logo-encoders {
width:120px;
height:36px;
background:url(../images/logo/logo-encoders-big.png) no-repeat center transparent;
background-size:contain;
margin-top:-3px;
margin-bottom:-3px;
}

header#header-encoders .wrap:nth-child(1) .logo-msi {
float:right;
margin:-5px 0 -5px 40px;
}

header#header-encoders .nav_menu li a {
border:0;
font-size:16px;
}

header#header-encoders .nav_menu,
header#header-encoders .nav_menu > li {float:left;}

header#header-encoders .nav_menu > li > a {
color:var(--basic-darkgrey);
margin-right:28px;
}

header#header-encoders .nav_menu > li.active > a,
header#header-encoders .nav_menu > li > a.active,
header#header-encoders .nav_menu > li > a:hover,
.active-brand-menu header .nav_menu > li:nth-child(3) > a {
color:var(--basic-blue);
}

header#header-encoders .logo-encoders + .nav_menu > li:first-child {display:none;}

.show-panel {
position:relative;
display:block;
width:30px;
height:30px;
float:left;
margin:0 20px 0 0;
background:url('https://encoders.ru/images/icons/icon-menu.svg') no-repeat center transparent;
background-size:60%;
border:0;
transition:all .4s ease;
}

.show-panel:hover {
opacity:.5;
transition:all .4s ease;
}

#panel-system {
top:70px;
left:40px;
transform:none;
-webkit-transform:none;
width:360px;
min-height:480px;
padding:0;
background:var(--basic-white);
/*box-shadow:0px 4px 16px rgba(24,24,25,.4);*/
z-index:777;
}

#panel-system .close {right:-80px;}

#panel-system ul li {
position:relative;
float:left;
width:120px;
height:120px;
text-align:center;
border:1.5px solid var(--basic-border);
border-top:0;
}

#panel-system ul {border-top:1.5px solid var(--basic-border);}

#panel-system ul li + li {border-left:0;}

#panel-system ul li:nth-child(3n+4) {border-left:1.5px solid var(--basic-border);}

#panel-system ul li a {
display:inline-block;
width:100%;
height:100%;
border:0;
}

#panel-system ul li a:hover {
color:var(--basic-black);
background:var(--basic-lightgrey);
}

#panel-system ul li a.active {
background:var(--basic-opacitygrey);
}

#panel-system ul li .img {
position:relative;
display:block;
width:100%;
height:calc(100% - 40px);
}

#panel-system ul li .img img {
max-width:60%;
max-height:40%;
}

#panel-system ul li .img + p {
font-family:'gilroy';
font-size:13px;
line-height:40px;
font-weight:500;
margin:0;
}

/*** form ***/

.popup form {margin:20px 0 0;}

.form-wrap {margin:40px 0 0;}

form + p {
font-size:12px;
line-height:20px;
}

p + form,
form + p {margin-top:20px;}

.popup input,
.popup textarea,
.popup select {
position:relative;
display:inline-block;
text-decoration:none;
-webkit-appearance:none;
}

.popup input[type="text"],
.popup input[type="submit"], 
.popup textarea {
padding:0 20px;
font-size:15px;
font-weight:400;
font-family:'gilroy';
min-width:280px;
line-height:54px;
border:0;
}

.popup input[type="text"], 
.popup textarea {
color:var(--basic-black);
background:var(--basic-lightgrey);
}

.popup textarea {
min-width:100%;
max-width:100%;
padding-top:17px;
padding-bottom:17px;
line-height:20px;
height:94px;
min-height:94px;
max-height:154px;
}

.popup input[type="submit"] {
cursor:pointer;
border-radius:4px;
color:var(--basic-white);
background:var(--basic-blue);
transition:all .4s ease;
}

.popup input[type="submit"]:hover {
color:var(--basic-white);
background:var(--basic-black);
transition:all .4s ease;
}

.p-checkbox {
font-size:13px;
line-height:20px;
padding-left:28px;
margin:20px 0 0;
}

.popup .p-checkbox,
.popup .p-checkbox label {cursor:pointer;}

.popup input[type="checkbox"]#i-agree {
position:absolute;
left:40px;
bottom:117px;
width:16px;
height:16px;
margin:0;
border:0;
background:var(--basic-lightgrey);
z-index:12;
}

.popup input[type=checkbox]#i-agree:checked {
background:url(../images/icons/icon-check.svg) no-repeat center var(--basic-blue);
background-size:60%;
}

.popup input[type="checkbox"] + input[type="submit"],
.popup input[type="checkbox"] + input[type="button"] {
pointer-events:none;
cursor:no-drop;
opacity:.5;
}

.popup input[type="checkbox"]:checked + input[type="submit"],
.popup input[type="checkbox"]:checked + input[type="button"] {
pointer-events:auto;
cursor:pointer;
opacity:1;
}

::-webkit-input-placeholder {color:var(--basic-black);}
::-moz-placeholder          {color:var(--basic-black);}
:-moz-placeholder           {color:var(--basic-black);}
:-ms-input-placeholder      {color:var(--basic-black);}

.popup {
width:800px;
padding:40px;
position:fixed;
display:none;
background:var(--basic-white);
z-index:998;
}

.popup h4 {
font-family:'gilroy';
font-weight:300;
font-size:24px;
line-height:1.25;
margin:0 0 20px;
}  

#overlay {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
display:none;
background:var(--basic-black);
opacity:.3;
z-index:666;
}

.popup input[type="text"] {
float:left;
width:calc(33% - 0.6px);
min-width:auto;
margin:0 4px 4px 0;
}

.popup input[type="text"]:nth-child(3) {margin-right:0;}

.popup input[type="submit"] {
float:right;
margin-top:20px;
}

.popup a.close, .close-button {
position:absolute;
right:0px;
top:0px;	
width:80px;
height:80px;
padding:20px;
font-size:0;
border:none;
background:transparent;
z-index:100; 
transition:all .4s ease; 
}

.popup a.close::before, 
.popup a.close::after, 
.close-button::before,
.close-button::after {
content:'';
position:absolute;
width:1.5px;
height:30px;
top:25px;
left:50%;
background:var(--basic-black);
}

.popup a.close::before, .close-button::before {-webkit-transform:rotate(45deg);transform:rotate(45deg);transition:all .4s ease;}
.popup a.close::after, .close-button::after {-webkit-transform:rotate(-45deg);transform:rotate(-45deg);transition:all .4s ease;}
.popup a.close:hover::before, .close-button:hover::before {-webkit-transform:rotate(135deg);transform:rotate(135deg);transition:all .4s ease;}
.popup a.close:hover::after, .close-button:hover::after {-webkit-transform:rotate(-135deg);transform:rotate(-135deg);transition:all .4s ease;}

.absolute-center {
position:absolute;
z-index:23;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
}