/* @import url("ywlayout-fonts.css");     /* Шрифты */
/* @import url("ywlayout-variables.css"); /* Глобальные переменные */
/* @import url("ywlayout-grid.css");      /* Импортируем сетку */
/* @import url("ywlayout-menu.css");      Главное меню
/* @import url("ywlayout-panel.css");     /* Панели */
/* @import url("ywlayout-button.css");    /* Кнопки */
/* @import url("ywlayout-footer.css");    /* Подвал */
 

/**
 * 
 * @YW Layout — это открытый и бесплатный HTML, CSS и JS фреймворк, который используется 
 * веб-разработчиками для быстрой вёрстки адаптивных дизайнов сайтов и веб-приложений.
 * 
 * Версия: 2.0.4a
 * Начало создания: 24-06-2021
 * Апдейт: 25-06-2025
 * Автор:  Абрамов Сергей Анатольевич - i@yourwriter.ru
 * Веб-сайт:  https://simple.студия-абрамова.рф
 * Автор: Сергей Абрамов (https://yourwriter.ru)
 * 
 **/ 



 /* Классы разработки */
 .border-test1 {border: 1px solid #fff !important; background-color: red !important; color: #fff !important;}
 .border-test2 {border: 1px solid #fff !important; background-color: black !important; color: #fff !important;}
 .border-test3 {border: 1px solid #fff !important; background-color: green !important; color: #fff !important;}

/* Сетка */
html {width: 100%; height: 100%; background-color: var(--main-bg);}
body {width: 100%; height: 100%; background-color: var(--main-bg);}

.dark-mode {width: 100%; height: 100%; background-color: var(--dm-main-bg);}
.dark-mode body {width: 100%; height: 100%; background-color: var(--dm-main-bg);}

body {
  margin: 0;
  font-family: var(--main-font);
  font-size: var(--main-font-size);
  font-weight: var(--main-font-bold);
  line-height: var(--main-font-line);
  color: var(--main-font-color);
  text-align: left;
  background-color: var(--main-bg);
  
}

.dark-mode body {background-color: var(--dm-main-bg); color: var(--dm-main-font-color);}

header {width: 100%; overflow: hidden; }
main {min-height: 80%;}
section {width: 100%; overflow: hidden;}
footer {width: 100%; overflow: hidden;}

ul {list-style: none;}



/* .container {width: var(--main-max-width); margin: 0 auto; overflow: hidden;} */
/* .outer {width: 100%; padding-right: var(--main-margin); overflow: hidden;} */


a {color: #000;}
.dark-mode a {color: #fff;}


/* Дизайн  */
.ui {border-radius: 4px;}




/* Типографика  */
.text-center  {text-align: center;}
.text-left    {text-align: left;}
.text-right   {text-align: right;}
.text-just    {text-align: justify;}
.text-upper   {text-transform: uppercase;}

.text-white {color: #ffffff !important;}
.text-black {color: #000000 !important;}
.text-red   {color: #ff0000 !important;}
.text-green {color: #00ff00 !important;}
.text-blue  {color: #0000ff !important;}





.p-t-10 {padding-top: 10px !important;}
.p-t-20 {padding-top: 20px !important;}
.p-t-30 {padding-top: 30px !important;}
.p-t-40 {padding-top: 40px !important;}
.p-t-50 {padding-top: 50px !important;}
.p-t-60 {padding-top: 60px !important;}
.p-t-70 {padding-top: 70px !important;}
.p-t-80 {padding-top: 80px !important;}
.p-t-90 {padding-top: 90px !important;}
.p-t-100 {padding-top: 100px !important;}

.p-b-10 {padding-bottom: 10px !important;}
.p-b-20 {padding-bottom: 20px !important;}
.p-b-30 {padding-bottom: 30px !important;}
.p-b-40 {padding-bottom: 40px !important;}
.p-b-50 {padding-bottom: 50px !important;}
.p-b-60 {padding-bottom: 60px !important;}
.p-b-70 {padding-bottom: 70px !important;}
.p-b-80 {padding-bottom: 80px !important;}
.p-b-90 {padding-bottom: 90px !important;}
.p-b-100 {padding-bottom: 100px !important;}

.m-t-10 {margin-top: 10px;}
.m-t-20 {margin-top: 20px;}
.m-t-30 {margin-top: 30px;}
.m-t-40 {margin-top: 40px;}
.m-t-50 {margin-top: 50px;}
.m-t-60 {margin-top: 60px;}
.m-t-70 {margin-top: 70px;}
.m-t-80 {margin-top: 80px;}
.m-t-90 {margin-top: 90px;}
.m-t-100 {margin-top: 100px;}

.m-b-10 {margin-bottom: 10px;}
.m-b-20 {margin-bottom: 20px;}
.m-b-30 {margin-bottom: 30px;}
.m-b-40 {margin-bottom: 40px;}
.m-b-50 {margin-bottom: 50px;}
.m-b-60 {margin-bottom: 60px;}
.m-b-70 {margin-bottom: 70px;}
.m-b-80 {margin-bottom: 80px;}
.m-b-90 {margin-bottom: 90px;}
.m-b-100 {margin-bottom: 100px;}



h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  text-transform: uppercase;
  margin-top: var(--main-margin);
  margin-bottom: 0.5rem;
  font-family: var(--main-font);
  font-weight: 400;
  line-height: 1.2;
  color: inherit;
}

h1, .h1 { font-size: 2.7rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.5rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }



p {font-size: 1rem; line-height: 1.1rem; margin-bottom: calc(var(--main-margin)); padding: 0px;}


.image-12 {width: 100%; display: block; overflow: hidden;}
.image-12 img {width: 100%;}

.ul-bread {display: block; width: 100%;}
.ul-bread li {display: inline-block; font-size: 0.9rem;}