@charset "UTF-8";
/*Цвета для сайта */
@font-face {
  font-family: 'fontello';
  src: url("../font/fontello.eot?18270292");
  src: url("../font/fontello.eot?18270292#iefix") format("embedded-opentype"), url("../font/fontello.woff2?18270292") format("woff2"), url("../font/fontello.woff?18270292") format("woff"), url("../font/fontello.ttf?18270292") format("truetype"), url("../font/fontello.svg?18270292#fontello") format("svg");
  font-weight: normal;
  font-style: normal; }
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?18270292#fontello') format('svg');
  }
}
*/

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }

.icon-attention-circled:before {
  content: '\e800'; }

/* '' */
.icon-facebook:before {
  content: '\f09a'; }

/* '' */
.icon-instagram:before {
  content: '\f16d'; }

/* '' */
.icon-vkontakte:before {
  content: '\f189'; }

/* '' */
body{
  font-size: 1rem !important; }

.bg-dark{
  background-color: #352a93 !important;
}
.navbar-toggler{
  background-color: #E79800;
}
nav {
  background-color: #4349a8;
  width: 100%; }
  nav img {
    height: 60px; }
  nav h1 {
    color: white;
    font-weight: 700;
    margin-left: 100px; }

.top-text {
  font-weight: 700;
  color: white;
  font-size: 3rem;
  margin-left: 50px; }

.content {
  margin: 0px 15px;
  font-family: Verdana, serif;}

.left-bar {
  margin-top: 30px;
  border: 1px solid #4349a8; }
  .left-bar .main-table {
    border: 1px solid #4349a8;
    padding-bottom: 10px;}
    .left-bar .main-table .length-table {
      border: 1px solid #4349a8; }
      .left-bar .main-table .length-table th {
        border: 1px solid #4349a8;
        text-align: center; }
      .left-bar .main-table .length-table input {
        width: 70%; }
    .left-bar .main-table .list-table th {
      border: 1px solid #4349a8;
      text-align: center;
      width: auto; }
    .left-bar .main-table .list-table select {
      width: auto; }
    .left-bar .main-table .list-table .small-input {
      width: 33%; }
    .left-bar .main-table .list-table .big-input{
      width: 60%;  }
  .left-bar .ribs {
    margin-top: 30px; }
    .left-bar .ribs h4 select {
      width: auto; }
    .left-bar .ribs table th {
      border: 1px solid #4349a8;
      text-align: center;
      width: 25%; }
    .left-bar .ribs table select {
      width: 75%; }
  .left-bar .three-tables {
    margin-top: 30px; }
    .left-bar .three-tables table th {
      border: 1px solid #4349a8;
      text-align: center; }
    .left-bar .three-tables .partitions th {
      width: 33%; }
    .left-bar .three-tables .partitions input {
      width: 100%; }
    .left-bar .three-tables .stairs {
      margin-top: 10px; }
    .left-bar .three-tables .buttons {
      border: 1px solid #4349a8;
      height: 100%; }
      .left-bar .three-tables .buttons td {
        text-align: center; }
        .left-bar .three-tables .buttons td button {
          font-weight: 700;
          color: white;
          font-size: initial !important;
          background-color: #E79800;
          transition: 0.2s;
          min-height: 100px;
          width: 100%; }
        .left-bar .three-tables .buttons td button:hover {
          background-color: #4349a8;
          border: 1px solid #4349a8; }

.right-bar {
  margin-top: 30px;
  border: 1px solid #4349a8; }
  .right-bar .calculation button {
    background-color: #4349a8;
    font-size: 20px;
    margin-left: 30px;
    width: 50%;
    color: white;
    height: 35px;
    transition: 0.2s; }
  .right-bar .calculation button:hover {
    background-color: #4349a8;
    border: 1px solid #4349a8; }
  .right-bar .calculation th {
    border: 1px solid #4349a8;
    width: 50%; }
  .right-bar .calculation_materials {
    margin-top: 15px; }
    .right-bar .calculation_materials th {
      width: 20%; }
  .right-bar .directory {
    margin-top: 30px; }
    .right-bar .directory_types th {
      border: 1px solid #4349a8;
      width: 20%;
      text-align: center; }
  .right-bar .info {
    margin: 15px; }
    .right-bar .info .peregorodki th {
      border: 1px solid #4349a8; }
    .right-bar .info .stupeni {
      border: 1px solid #4349a8; }

.details-bar {
  border: 1px solid #4349a8;
margin-top: 15px;}
  .details-bar-block {
    margin: 0.4rem;
    border: 1px solid #4349a8; }
    .details-bar-block img {
      max-width: 100%;
      height: auto !important;
      max-height: 12rem;
       }
    .details-bar-block button {
      background-color: #4349a8;
      font-size: 15px;
      width: 80%;
      height: 35px;
      color: white;
      margin: 10px;
      transition: 0.2s; }
    .details-bar-block button:hover {
      background-color: #4349a8;
      border: 1px solid #4349a8; }
    .form-row{
      max-width: 300px;
      margin: 0 auto;
    }
    .with-borders{
      border: 1px solid #4349a8;
      margin: 1.5px 0.5px;
    }
.nav-pills .nav-link{
  color: white ;
}
.message_error{
  color: #cc0000;
}

.success_message{
  color: green;
}

.block_for_messages{
  text-align: center;
}

.edit-profile{
  max-width: 250px;
}

.calcs{
  display: inline;
}

form{
  display: contents;
  margin-top: auto;
}
.left-profile{
  padding-left: 15px !important;
}
.text_profile{
  display: table-caption;
}
.label-results{
  font-weight: normal;
}
.quit{
  margin-right: 20px;
}
.advert{
  max-width: 100%;
  max-height: 300px;
  height: auto;
}
.advert-modal{
  max-width: 750px !important;
}
.adv-form{
  display: block;
}
.faq_content{
    display: flex;
    flex-direction: column;
}
.faq_content iframe{
    align-self: center;
    margin-bottom: 25px;
}
/*Адаптив для сайта */
@media (max-width: 1435px) {
  .details-bar-block .text-center{
    font-size: 16px;
  }
  .details-bar-block  .details-bar-block-picture img{
    height: 180px;
  }
}
@media (max-width: 1250px) {
  .details-bar-block  .details-bar-block-picture img{
    height: 140px;
  }
}
@media (max-width: 1100px) {
  body nav h1 {
    font-weight: 300;
    margin-left: 30px; }
  .details-bar-block .text-center{
    font-size: 14px;
  }
  .details-bar-block  .details-bar-block-picture img{
    height: 120px;
  }
  .stairs {
    font-size: 17px; }
}
@media (max-width: 1120px) and (min-width: 992px) {
  .adv-block{
    flex: none !important;
    max-width: none !important;
  }
}
@media (max-width: 1050px) {
  body .length-table i {
    font-size: 20px; }
  body .list-table i {
    font-size: 20px; }
  body .table_ribs {
    font-size: 15px; }
  body .partitions {
    font-size: 15px; } }
@media (max-width: 900px) {
  body nav h1 {
    font-size: 25px;
    margin-left: 10px; } }
@media (max-width: 780px) {
  body nav h1 {
    font-size: 17px;
    margin-left: 0px; } }
@media (max-width: 470px) {
  body{
    font-size: 1.5rem !important; }
  label{
    font-size: 1.5rem !important; }
  th{
    font-size: 1.5rem !important; }
  i {
    color: #4349a8;
    font-size: 1.3rem; }

  .big-circle {
    font-size: 2.5rem; }

  body .dimensions th {
    font-size: 10px; }
  body .ribs .table_ribs {
    font-size: 15px; }
  body .calculation_materials th {
    font-size: 10px; }
  body .directory_types th {
    font-size: 10px; } }
@media (max-width: 420px) {
  .text_profile{
    font-size: 15px;
    margin: auto;
    padding: 0px;
  }
  .profile_cols{
    margin: 0px;
  }
}
@media (max-width: 1120px) and (min-width: 992px){
  .col-lg-5 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .details-bar{
    display: flex;
    width: fit-content;
  }
}