/* --------------------------------- */
html, body { position: relative; background: #fff; font-size: 15px; line-height: 25px; color: var(--black); width: 100%; height: 100%; font-family: "Onest", sans-serif; font-weight: 400; font-style: normal; }
dl, li, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, body, html, blockquote, input, textarea, select, button, a { margin: 0; padding: 0; outline: none; font-family: "Onest", sans-serif; }
img { border: 0; vertical-align: top; }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
.reset { margin: 0; padding: 0; list-style: none; }
.show { display: block; }







/* --------------------------------- */
/*.notify {  position: fixed; top: 15%; left: 0; width: 100%; padding: 6em 3em; text-align: center; align-items: center;  justify-content: center; line-height: 60px; font-weight: 500; font-size: 3em;  transition: all .4s;  z-index: 999; visibility: hidden; opacity: 0; box-sizing: border-box; background: #fff; border: 1px solid; display: flex; }
.notify.success {  color: #000; visibility: visible; opacity: 1; margin-top: 0; background-color: #fff; }
.notify.warning { background: #d54949; color: #fff; visibility: visible; opacity: 1; margin-top: 0; }
.containerWindow--notify {  font-size: 15px; text-align: center; margin-top: 20px; font-weight: 600; line-height: 20px; color: #fff;}
.containerWindow--notify.success { color: var(--red); }*/

.notify { position: fixed; top: 20px; right: 10px; min-width: 260px; max-width: 320px; padding: 14px 16px 14px 45px; background: #ffffff; border-radius: 6px; border-left: 6px solid #3498db; font-family: Arial, sans-serif; font-size: 14px; color: #333; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); transform: translateX(120%); opacity: 0; transition:  transform 0.4s ease, opacity 0.4s ease; z-index: 9999; }
.notify.show { transform: translateX(0); opacity: 1; }
.notify::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; }
.notify.success { border-left-color: #2ecc71; }
.notify.success::before { content: "✔"; color: #2ecc71; }
.notify.error { border-left-color: #e74c3c; }
.notify.error::before { content: "✖"; color: #e74c3c; }
.notify.warning { border-left-color: #f39c12; }
.notify.warning::before { content: "⚠"; color: #f39c12; }
.notify.info { border-left-color: #3498db; }
.notify.info::before { content: "ℹ"; color: #3498db; }

/* --------------------------------- */

/* --------------Категорії------------------- */
.categories .categories__content .reset.inside { display: none; }
.categories .categories__content .reset {  display: flex; gap: 10px;  margin: 28px 0 14px; justify-content: center; flex-wrap: wrap; flex-direction: row;}
.categories .categories__content ul li { text-align: center; border: 1px solid var(--light-gray);  padding: 9px 20px 6px; transition: all 0.5s; cursor: pointer;  }
.categories .categories__content ul li:hover {  border-color: var(--red);}
.categories .categories__content ul li.active  {  border-color: var(--red);}
.categories .categories__content ul li.active a  {  color: var(--red);}
.categories .categories__content ul li:hover a {  text-decoration: none; color: var(--red); }
.categories .categories__content ul li a:hover {  text-decoration: none;  }
.categories .categories__content ul li a {  font-size: 12px; text-transform: uppercase; font-weight: 600; color: var(--black); }



/* --------------------------------- */

.articles { position: relative; display: flex; gap: 30px; flex-wrap: wrap;  margin-bottom: 50px;}
.articles .articles__element { flex-basis: 23%; display: block;  }
.articles .articles__element .articles__content { display: flex; flex-direction: column; padding: 25px; border-radius: 2px; border: 1px solid #ececec;    }
.articles .articles__element .articles__image {  width: 100%; height: 200px; }
.articles .articles__element .articles__image img { width: 100%; object-fit: cover; height: 100%; }
.articles .articles__element .articles__present { min-height: 210px; box-sizing: border-box; padding: 25px 0 0 ; display: flex; flex-direction: column;}
.articles .articles__element .articles__present p { font-size: 14px; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; height: 54px; }
.articles .articles__element .articles__present h3 a { color: #000;  }
.articles .articles__element .articles__present h3 {flex: 1 0 auto;display: block; line-height: 20px;margin-bottom: 5px;     min-height: 102px;}
.articles .articles__element .articles__present span { color: #666; font-size: 10px; line-height: 100%; }

.article { position: relative;    margin-top: 90px; }
.article .article__image { text-align: center; margin-bottom: 20px; width: 50%;  float: right; padding: 0 0 30px 30px;  }
.article .article__image { }
.article .article__image img { max-width: 100%; }
.article .article__content { font-size: 16px; line-height: 24px; color: #333; }
.article .article__date { padding-top: 20px; margin-top: 20px; border-top: 1px solid #eee; clear: both; }



/* -------------Пагінація-------------------- */
.pagination {  padding-top: 20px; display: flex;gap: 4px;justify-content: center; flex-wrap: wrap; }
.pagination__element { height: 32px; padding: 0 15px; border: 1px solid #ddd; border-radius: 2px; line-height: 32px; display: inline-block; color: #666; text-decoration: none; transition: all .2s; cursor: pointer; }
.pagination__element.current { background: #000;  color: #fff; }
.pagination__element.current:hover { background: rgba(58,92,135,1); }
.pagination__element:hover { background: #f9f9f9; }
.pagination__element.arrow { padding: 0 12px; }
.pagination__element svg { width: 15px; height: 15px; margin-top: 8px; color: #000; transform: rotate(90deg);}
.pagination__element.paginationNext svg {  transform: rotate(-90deg);}
.pagination__element:hover svg { color: var(--red); }

/* --------------------------------- */

.modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999; display: none; }
.modal--open { display: block; }
.modal__overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); }
.modal__container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; display: inline-grid; justify-content: center; align-content: center; }
.modal__content { width: 500px; box-sizing: border-box; padding: 50px 50px; background: #FAFAF7; text-align: left; overflow: auto; position: relative; }
.modal__close { position: absolute; top: 21px; right: 24px; font-size: 27px; color: #0F0F0B; cursor: pointer; z-index: 100; transition: all .2s; opacity: 0.5; background: transparent; border: none; padding: 0; line-height: 1; }
.modal__close:hover { background: #ddd; }
.modal__title { font-size: 16px; font-weight: 400; color: #000; padding: 0 20px 20px 0; border-bottom: 1px solid #DEDEDA; text-transform: uppercase; text-align: center; }
.modal__title--spaced { margin-bottom: 22px; }
.modal__title--mb { margin-bottom: 30px; }
.modal__bottom { padding-top: 20px; margin-top: 30px; border-top: 1px solid #ddd; clear: both; display: inline-block; width: 100%; }
.modal__bottom a { display: block; padding: 3px 0; }

.form { }
.form__row { display: flex; justify-content: space-between; gap: 20px; }
.form__row--2 { }
.form__label { color: #0F0F0B; font-size: 15px; margin-bottom: 15px; overflow: hidden; width: 100%; float: left; margin-top: 15px; }
.form__label--button { margin-bottom: 0; }
.form__input { width: 100%; background: #f1f1f1; height: 50px; border-radius: 4px; padding: 0 15px; box-sizing: border-box; border: none; font-size: 15px; }
.form__input--full { }
.form__input--double { float: left; width: 100%; }
.form__input--double:last-child { float: right; }
.form--call { display: inline-block; position: relative; width: 100%; }
.form__field { display: block; width: 100%; margin-top: 15px; margin-bottom: 15px; }
.form__input { width: 100%; background: #f1f1f1; height: 50px; border-radius: 4px; padding: 0 15px; box-sizing: border-box; border: none; font-size: 15px; }
.form__actions { margin-top: 25px; }
.form-note { font-size: 15px; text-align: center; margin-top: 20px; font-weight: 600; line-height: 20px; }
.form-note--success { color: var(--red); }
.form__actions { margin-top: 25px; }
.form__actions--compact { margin-top: 0; }
.form__actions button:hover { opacity: 0.9; }


.auth-links { margin-block: 10px; color: #000; }
.auth-links--password { margin-block: 10px; }
.auth-links--register { margin-block: 10px; }
.auth-links__link { display: inline-block; padding: 3px 0; color: inherit; text-decoration: none; }
.auth-links__link + .auth-links__link { margin-right: 15px; }


.social-btn { display: block; line-height: 50px; width: 100%; transition: all .2s; background: #227bef; color: #fff; text-align: center; cursor: pointer; height: 50px; border-radius: 4px; padding: 0 15px; box-sizing: border-box; border: none; font-size: 15px; }
.social-btn:hover { background: #1c72e3; text-decoration: none; }











@media screen and (max-width: 1000px) {
    .aticles .articles__element { flex-basis: 45%;}
}


@media screen and (max-width: 700px){
    .articles .articles__element .articles__image { float: left; width: 100%; overflow: hidden; margin-bottom: 15px; }
    .articles .articles__element .articles__present { margin-left: 0; }
}

@media screen and (max-width: 576px) {
    .articles .articles__element .articles__present h3 { line-height: 20px; margin-bottom: 15px;}
    .articles .articles__element { flex-basis: 100%;}
    .article .article__content ol  { padding-left: 20px; }
    .article { margin-top: 50px;}
    .categories .categories__content ul li { padding: 5px 10px; font-size: 12px;}
}