@charset "UTF-8";
html, body, ul, ol, li, p, td, h1, h2, h3, h4, h5, h6, form, fieldset, a, img {
  margin: 0;
  padding: 0;
  border: 0;
}

:root
    {
    --container-width: 1200px;
    }


/* Grid system */
.container
    {
    width: var(--container-width);
    padding: 0;
    box-sizing: border-box;
    }
.flex
    {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    }
    .col-1  { width: 8.33%   }
    .col-2  { width: 16.67%  }
    .col-3  { width: 25%     }
    .col-4  { width: 33.33%  }
    .col-5  { width: 41.67%  }
    .col-6  { width: 50%     }
    .col-7  { width: 58.33%  }
    .col-8  { width: 66.67%  }
    .col-9  { width: 75%     }
    .col-10 { width: 83.33%  }
    .col-11 { width: 91.67%  }
    .col-12 { width: 100%    }

    .offset-1  { margin-left: 8.33%   }
    .offset-2  { margin-left: 16.67%  }
    .offset-3  { margin-left: 25%     }
    .offset-4  { margin-left: 33.33%  }
    .offset-5  { margin-left: 41.67%  }
    .offset-6  { margin-left: 50%     }
    .offset-7  { margin-left: 58.33%  }
    .offset-8  { margin-left: 66.67%  }
    .offset-9  { margin-left: 75%     }
    .offset-10 { margin-left: 83.33%  }
    .offset-11 { margin-left: 91.67%  }
    .offset-12 { margin-left: 100%    }

    
    .text-center {  text-align: center; justify-content: center }
    .text-right  {  text-align: right; justify-content: flex-end  }

    .p-15  ,  
    .py-15 ,
    .px-15 
        {
        box-sizing: border-box;
        }

    .p-15  { padding: 15px   }
    .py-15 { padding: 15px 0 }
    .px-15 { padding: 0 15px }

    .col-1  ,
    .col-2  ,
    .col-3  ,
    .col-4  ,
    .col-5  ,
    .col-6  ,
    .col-7  ,
    .col-8  ,
    .col-9  ,
    .col-10 ,
    .col-11 ,
    .col-12 
        {
        }

.err, .text-danger, .text-danger  p { color: red }
.text-warning, .text-warning p { color: orange }
.ok, .text-success, .text-success p { color: green }

.alert
    {
    padding: 10px 20px;
    color: #fff;
    border-radius: 10px;
    }
.alert-success   { background-color: #2b9f2b }
.alert-warning   { background-color: orange  }
.alert-danger    { background-color: #f28282 }


.secondary .main_content img[style*="float: left"] 
    {
    margin-right: 35px;
    margin-bottom: 10px;
    }

.desktop-hidden
    {
    display: none !important;
    }

/* ============================================================================ */
/* Мобильное устройство - меньше 1200px  ====================================== */
/* ============================================================================ */
@media (max-width: 1200px) {
    
    header,
    footer,
    section
        {
        padding: 0;
        }
    .container
        {
        width: 100%;
        padding: 0 15px;
        }

    .offset-0-mob  { margin-left: 0       }
    .offset-1-mob  { margin-left: 8.33%   }
    .offset-2-mob  { margin-left: 16.67%  }
    .offset-3-mob  { margin-left: 25%     }
    .offset-4-mob  { margin-left: 33.33%  }
    .offset-5-mob  { margin-left: 41.67%  }
    .offset-6-mob  { margin-left: 50%     }
    .offset-7-mob  { margin-left: 58.33%  }
    .offset-8-mob  { margin-left: 66.67%  }
    .offset-9-mob  { margin-left: 75%     }
    .offset-10-mob { margin-left: 83.33%  }
    .offset-11-mob { margin-left: 91.67%  }
    .offset-12-mob { margin-left: 100%    }

    .col-1-mob  { width: 8.33%   }
    .col-2-mob  { width: 16.67%  }
    .col-3-mob  { width: 25%     }
    .col-4-mob  { width: 33.33%  }
    .col-5-mob  { width: 41.67%  }
    .col-6-mob  { width: 50%     }
    .col-7-mob  { width: 58.33%  }
    .col-8-mob  { width: 66.67%  }
    .col-9-mob  { width: 75%     }
    .col-10-mob { width: 83.33%  }
    .col-11-mob { width: 91.67%  }
    .col-12-mob { width: 100%    }

}


/* ============================================================================ */
/* Мобильное устройство - меньше 768px   ====================================== */
/* ============================================================================ */
@media (max-width: 768px) {

    .desktop-hidden
        {
        display: block !important;
        }
        .desktop-hidden.flex
            {
            display: flex !important;
            }

    .mobile-hidden
        {
        display: none !important;
        }

}