/* ___________1. Сброс CSS_____________________ */
a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,iframe,img,ins,kbd,label,legend,li,mark,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,u,ul,var,video{margin:0;padding:0;border:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote::after,blockquote::before,q::after,q::before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}input[type=submit],input[type=reset]{cursor:pointer}::-moz-focus-inner{padding:0;border:0}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
a:focus,
input:focus,
textarea:focus {
  outline: 0 none;
}

/* ___________2. Типовые элементы______________ */
/* _______________2.1. Заголовки_______________ */
h1 {}
h2 {}
h3 {}

/* _______________2.2. Ссылки__________________ */
a {
  color: inherit;
  text-decoration: underline;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
a:hover {
  text-decoration: none;
}

/* _______________2.3. Элементы форм___________ */
.form__field {
  display: block;
  padding: 0 10px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  font: normal 16px 'Open Sans', sans-serif;
  color: #000;
  background: none;
  border: none;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
::-webkit-input-placeholder {
  opacity: 1;
  color: #000;
}
::-moz-placeholder {
  opacity: 1;
  color: #000;
}
:-moz-placeholder {
  opacity: 1;
  color: #000;
}
:-ms-input-placeholder {
  opacity: 1;
  color: #000;
}
textarea {
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  height: 200px;
}

/* _______________2.4. Сетка___________________ */
.container {
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0 auto;
  padding: 0 15px;
  max-width: 1300px;
}
.container__row {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: start;
  align-content: flex-end;
  margin: 0 -15px;
}
.container__col {
  padding: 0 15px;
  width: 50%;
  min-height: 1px;
}

/* _______________2.5. Базовые_________________ */
html {
  /* font-size: 100%; */
  height: 100%;
}
body {
  height: 100%;
  background: #fafafa;
  color: #000;
  font: 400 16px/1.3 'Avenir Next Cyr', sans-serif;
}
.clear {
  display: block;
  clear: both;
}
.none {
  display: none;
}
.no-scroll {
  overflow: hidden;
}
img {
  max-width: 100%;
}
.button {
  display: inline-block;
  padding: 5px 10px;
  font-size: inherit;
  font-family: inherit;
  -webkit-appearance: none;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

/* _______________2.6. Шрифты__________________ */
@font-face {
  font-family: 'Avenir Next Cyr';
  src: url("../fonts/avenir-next-cyr_light/font.eot");
  src: url("../fonts/avenir-next-cyr_light/font.eot?#iefix")format("embedded-opentype"),
     url("../fonts/avenir-next-cyr_light/font.woff2") format("woff2"),
     url("../fonts/avenir-next-cyr_light/font.woff") format("woff"),
     url("../fonts/avenir-next-cyr_light/font.ttf") format("truetype"),
     url("../fonts/avenir-next-cyr_light/font.svg#AvenirNextCyr-Light") format("truetype");
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: 'Avenir Next Cyr';
  src: url("../fonts/avenir-next-cyr_regular/font.eot");
  src: url("../fonts/avenir-next-cyr_regular/font.eot?#iefix")format("embedded-opentype"),
     url("../fonts/avenir-next-cyr_regular/font.woff2") format("woff2"),
     url("../fonts/avenir-next-cyr_regular/font.woff") format("woff"),
     url("../fonts/avenir-next-cyr_regular/font.ttf") format("truetype"),
     url("../fonts/avenir-next-cyr_regular/font.svg#AvenirNextCyr-Regular") format("truetype");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'Avenir Next Cyr';
  src: url("../fonts/avenir-next-cyr_medium/font.eot");
  src: url("../fonts/avenir-next-cyr_medium/font.eot?#iefix")format("embedded-opentype"),
     url("../fonts/avenir-next-cyr_medium/font.woff2") format("woff2"),
     url("../fonts/avenir-next-cyr_medium/font.woff") format("woff"),
     url("../fonts/avenir-next-cyr_medium/font.ttf") format("truetype"),
     url("../fonts/avenir-next-cyr_medium/font.svg#AvenirNextCyr-Medium") format("truetype");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: 'DINPro';
  src: url("../fonts/dinpro_regular/font.eot");
  src: url("../fonts/dinpro_regular/font.eot?#iefix")format("embedded-opentype"),
     url("../fonts/dinpro_regular/font.woff2") format("woff2"),
     url("../fonts/dinpro_regular/font.woff") format("woff"),
     url("../fonts/dinpro_regular/font.ttf") format("truetype"),
     url("../fonts/dinpro_regular/font.svg#DINPro-Regular") format("truetype");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'DINPro';
  src: url("../fonts/dinpro_bold/font.eot");
  src: url("../fonts/dinpro_bold/font.eot?#iefix")format("embedded-opentype"),
     url("../fonts/dinpro_bold/font.woff2") format("woff2"),
     url("../fonts/dinpro_bold/font.woff") format("woff"),
     url("../fonts/dinpro_bold/font.ttf") format("truetype"),
     url("../fonts/dinpro_bold/font.svg#DINPro-Bold") format("truetype");
  font-style: normal;
  font-weight: bold;
}


/* _______________2.7. Другие__________________ */

/* ___________3. HEADER  (Шапка)_______________ */
.header {
  background-color: #111623;
}
.panel {
  padding: 13px 0 15px;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.panel__logo {
  width: 20%;
}
.panel__logo-footer {
  width: 40%;
}
.header__logo {}
.header__logo .logo {
  color: #fff;
}
.header__logo .logo__text {
  border-left-color: rgba(255, 255, 255, .2)
}
.logo {
  display: block;
  padding: 0;
  font-size: 0;
}
.logo::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.logo__img {
  display: inline-block;
  vertical-align: middle;
  margin-right: 12px;
}
.logo__text {
  display: inline-block;
  vertical-align: middle;
  padding: 4px 0;
  max-width: 165px;
  font-weight: 500;
  font-size: 14px;
  /* line-height: 2.2; */
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.logo__subtext {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: #fff;
  text-transform: none;
}
.logo__text-footer {
  display: inline-block;
  vertical-align: middle;
  padding: 4px 0 4px 27px;
  max-width: 165px;
  font-weight: normal;
  font-size: 15px;
  line-height: 19px;
  letter-spacing: 0.2px;
  border-left: 1px solid #000;
}

.panel__nav {
  text-align: right;
  width: 65%;
}
.panel__nav-footer {
  text-align: right;
  width: 43%;
}
.header__nav {}
.header__nav .nav__link {
  color: #fff;
}
.nav {
  font-size: 0;
}
.nav__item {
  display: inline-block;
}
.nav__link {
  display: inline-block;
  padding: 13px 16px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.4px;
  text-decoration: none;
}
/** NeProsto Styling IconBurger for menu **/
.all {
  position: relative;
  padding-left: 35px;
}
.all__burger {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 15px;
  margin-top: -6px;
  width: 15px;
  height: 13px;
}
.all__line {
  display: block;
  height: 3px;
  width: 100%;
  background: #fff;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
} /** End NeProsto Styling IconBurger for menu **/
.panel__phone {
  width: 15%;
  text-align: right;
  border-left: 1px solid rgba(255, 255, 255, .2);
}
.panel__phone-footer {
  width: 17%;
  text-align: right;
  border-left: 1px solid rgba(255, 255, 255, .2);
}
.header__phone {}
.header__phone .phone {
  color: #fff;
}
.phone {
  display: inline-block;
  padding: 12px 0;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.5px;
  text-decoration: none;
}
.phone__code {
  display: inline-block;
  vertical-align: top;
  margin-right: -3px;
  padding: 1px 0;
  font-size: 14px;
}
/** NeProsto Styling SubMenu for Products **/
.nav__item-sub {
  position: relative;
}
.nav__item-sub:hover >.sub-nav {
  display: block;
}
.sub-nav {
  display: none;
  position: absolute;
  min-width: 295px;
  top: 37px;
  left: 10px;
  padding: 6px 0px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.3);
  text-align: left;
  z-index: 5;
}
.sub-nav__item {
  display: block;
}
.sub-nav__link {
  display: inline-block;
  width: 100%;
  padding: 12px;
}
.sub-nav__link:hover {
  background-color: #e5e5e5;
}
.sub-nav__item-ico {
  display: inline;
  margin-right: 8px;
  vertical-align: top;
}
.sub-nav__product {
  display: inline-block;
  max-width: 230px;
}
.sub-nav__product-title {
  display: block;
  margin-bottom: 3px;
  color: #404040;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}
.sub-nav__product-desc {
  display: block;
  color: #808080;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
} /** End NeProsto Styling SubMenu for Products **/

/* ___________4. SECTION (Контент)_____________ */
.promo {
  background: #121623 url('../img/bg/promo.jpg') 50% 50% no-repeat fixed;
  -webkit-background-size: cover;
  background-size: cover;
  color: #fff;
  box-shadow: 0 0 0 370px rgba(35, 43, 63, 0.5) inset;
}
.promo__container {
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
  height: 370px;
  text-align: center;
}
.promo__header {
  margin: 0 auto 20px;
  padding-bottom: 15px;
  width: 100%;
  max-width: 400px;
  font: bold 35px/1.2 'DINPro', sans-serif;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.promo__text {
  line-height: 1.5;
}
.posts__cloud-tags {
  width: 100%;
  max-width: 560px;
}

.posts {
  margin-bottom: 15px;
  padding: 60px 0;
}
.posts__container {
  padding-right: 0;
  padding-left: 0;
}
.posts,
.posts__item {
  padding-right: 18px;
  padding-left: 18px;
}
.posts__row {
  margin-right: -18px;
  margin-left: -18px;
}
.posts__item {
  margin-bottom: 40px;
}
.post {}
.post__image {
  overflow: hidden;
  display: block;
  position: relative;
  margin-bottom: 10px;
  height: 335px;
  border-radius: 3px;
  background: #e6e6e6;
  box-shadow: 0.5px 26px 43px rgba(129, 129, 129, 0.35);
}
.post__image::before {
  content: '';
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #19b5cb;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
.post__image:hover::before {
  opacity: .25;
}
.post__tags {
  opacity: .4;
  margin-bottom: 5px;
  font-weight: normal;
  font-size: 16px;
  letter-spacing: -0.25px;
}
.post__tags a {
  text-decoration: none;
}
.post__tags a:hover {
  text-decoration: underline;
}
.post__hash-sign {
  display: inline-block;
  vertical-align: middle;
  font-weight: 500;
}
.post__link {
  display: block;
  text-decoration: none;
}
.post__link:hover .post__title {
  color: #19b5cb;
}
.post__title {
  display: inline;
  font: bold 27px/1.3 'DINPro', sans-serif;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
.post__text {
  display: block;
  padding-top: 10px;
}

.pagination {
  position: relative;
  padding: 30px 0;
  font-size: 0;
  text-align: center;
}
.pagination::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 50%;
  margin-left: -70px;
  width: 140px;
  height: 1px;
  background: rgba(0, 0, 0, .1);
}
.pagination__item {
  display: inline-block;
  margin: 0 5px;
  width: 46px;
  height: 46px;
  line-height: 46px;
  font-size: 17px;
  border: 1px solid #19b5cb;
  border-radius: 50%;
  background: #19b5cb;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
.pagination__item_link {
  border-color: rgba(0, 0, 0, .1);
  background: transparent;
  color: #000;
}
.pagination__item_link:hover {
  border-color: #19b5cb;
}

.promo__header_content {
  margin-bottom: 0;
  max-width: 800px;
  border-bottom: none;
}
.promo__tags {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20px 0;
  font-weight: normal;
  font-size: 18px;
  line-height: 1.25;
  color: rgba(255, 255, 255, .4);
}
.promo__tags a {
  text-decoration: none;
}
.promo__tags a:hover {
  text-decoration: underline;
}
.promo__tags-sign {
  vertical-align: middle;
  font-weight: 500;
  color: #fff;
}
.promo__tag {
  display: inline-block;
  margin-left: 5px;
}

.content {
  display: block;
  padding: 45px 0;
  line-height: 1.529411;
}
.content p,
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6,
.content ol,
.content ul,
.content table,
.share {
  margin: 0 auto;
  max-width: 700px;
}
.content p {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 18px;
}
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
  margin-top: 15px;
  margin-bottom: 10px;
  font-weight: bold;
  font-family: 'DINPro', sans-serif;
}
.content h2 {
  font-size: 44px;
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin-top: 32px;
}
.content h3 {
  font-size: 36px;
  line-height: 1.2;
}
.content h4 {
  font-size: 30px;
}
.content h5 {
  font-size: 24px;
}
.content h6 {
  font-size: 20px;
}
.content img {
  display: block;
  margin: 40px auto;
}
.content ol {
  counter-reset: styled;
  line-height: 1.4;
  margin-top: 15px;
  margin-bottom: 25px;
}
.content ol li {
  list-style: none;
  position: relative;
  margin: 5px 0;
}
.content ol li::before {
  counter-increment: styled;
  content: counter(styled);
  display: inline-block;
  position: absolute;
  right: 100%;
  margin-right: 10px;
  font-weight: 500;
  color: #19b5cb;
}
.content ul {
  line-height: 1.4;
  margin-top: 15px;
  margin-bottom: 25px;
}
.content ul li {
  position: relative;
  margin: 5px 0;
}
.content ul li::before {
  content: '•';
  display: inline-block;
  position: absolute;
  right: 100%;
  margin-right: 10px;
  font-weight: 500;
  color: #19b5cb;
}
.content table {
  margin-top: 20px;
  margin-bottom: 40px;
  width: 100%;
}
.content th {
  text-align: left;
}
.content tr:nth-child(even) {
  background: #fff;
}
.content tr :first-child {
  font-weight: 500;
}
.content tr :last-child {
  text-align: right;
  border-right: none;
}
.content th,
.content td {
  padding: 12px 10px;
}
.content th {
  font-weight: 500;
}
.content td {
  border-right: 1px solid rgba(0, 0, 0, .05);
}
/* .quot {
  margin-top: 35px;
  margin-bottom: 35px;
  padding: 10px 0;
  border: 1px solid rgba(0, 0, 0, .05);
  border-right: none;
  border-left: none;
  font-size: 24px;
  line-height: 1.4;
}
.quot p {
  position: relative;
}
.quot p::before {
  content: '“';
  position: absolute;
  top: 0;
  right: 100%;
  margin-right: 15px;
  color: #19b5cb;
  font-weight: 500;
  font-size: 36px;
} */
blockquote {
  
}
blockquote p {
  position: relative;
  margin-top: 35px!important;
  margin-bottom: 35px!important;
  padding: 10px 0;
  border: 1px solid rgba(0, 0, 0, .05);
  border-right: none;
  border-left: none;
  font-size: 24px!important;
  line-height: 1.4;
}
blockquote p::before {
  content: '“';
  position: absolute;
  top: 0;
  right: 100%;
  margin-right: 15px;
  color: #19b5cb;
  font-weight: 500;
  font-size: 36px;
}
.share {
  padding: 30px 0;
  width: 100%;
}
.share ul li::before {
  content: '';
}

.posts_simillar {
  background: #eff0f0;
}
.posts__header {
  position: relative;
  margin-bottom: 60px;
  padding-bottom: 15px;
  text-align: center;
  font: bold 50px/1.2'DINPro', sans-serif;
}
.posts__header::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -200px;
  width: 400px;
  height: 1px;
  background: rgba(0, 0, 0, .1);
}
.posts_simillar .post__image {
  margin-bottom: 20px;
}
.posts_simillar .post__title {
  border-bottom: none;
}
.posts_simillar .post__text {
  padding-top: 15px;
}

/* ___________5. FOOTER  (Подвал)______________ */
.footer {
  opacity: 0;
  padding-top: 38px;
  padding-bottom: 48px;
  background: #fff;
  -webkit-animation: footer .5s ease .5s forwards;
  -o-animation: footer .5s ease .5s forwards;
  animation: footer .5s ease .5s forwards;
}
@keyframes footer {
  0% {}
  100% {
    opacity: 1;
  }
}
.footer_attached-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
}
.footer_transparent {
  background-color: transparent;
}
.footer__logo {}

.footer__nav {}
.footer__phone {
  margin-bottom: 10px;
}

.footer__copyright {
  font-size: 0;
  text-align: right;
}
.footer__copyright-link {
  display: inline-block;
  padding: 15px 0;
}
.footer__copyright-link:hover {
  opacity: .75;
}
.footer__copyright-img {
  display: block;
}