* { margin: 0; padding: 0; box-sizing: border-box; }

html { height: 100%; }

body {
    background: #333333;
    font-family: "Jost", sans-serif;
	color: #F9F9F9;
	padding-top: 148px;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 16pt;
    line-height: 1.5;
	letter-spacing: 1px;
    height: 100%;
}
@media only screen and (max-width: 800px) {
body { padding-top: 0; }
}

a {
    color: #ECE9F3;
    text-decoration: none;
    -webkit-transition: color 0.25s ease-out;
    -moz-transition: color 0.25s ease-out;
    -ms-transition: color 0.25s ease-out;
    -o-transition: color 0.25s ease-out;
    transition: color 0.25s ease-out;
}

a:hover { color: #FF99CC; text-decoration: none; }

H1 {
    font-family: "Mulish", sans-serif;
    font-optical-sizing: auto;
    margin: 0 0 25px 0;
    font-weight: 500;
    font-size: 50pt;
    line-height: 1.3;
    font-style: normal;
    text-align: left;
}

H2 {
    font-family: "Mulish", sans-serif;
    font-optical-sizing: auto;
    margin: 0 0 15px 0;
    font-weight: 500;
    font-size: 26pt;
    line-height: 1.3;
    font-style: normal;
}

H3 {
    font-family: "Mulish", sans-serif;
    font-optical-sizing: auto;
    margin: 0 0 15px 0;
    font-weight: 500;
    font-size: 22pt;
    line-height: 1.3;
    font-style: normal;
}

ol { margin: 25px 0; }

ol li {
    margin: 2px 0 2px 20px;
    padding: 0 0 0 15px;
    word-spacing: 2px;
    line-height: 1.5;
    list-style-position: outside;
}

p {
    margin: 0 0 10px 0;
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    word-spacing: 2px;
	letter-spacing: 1px;
    line-height: 1.5;
    font-size: 16pt;
}

ul { margin: 25px 0; }

ul li {
    margin: 2px 0 2px 20px;
    padding: 0 0 0 15px;
    word-spacing: 2px;
    line-height: 1.5;
    list-style-type: circle;
    list-style-position: outside;
}

/*Стили таблиц*/
table {
	margin: 0;
	width: 100%;
}
table tr:nth-child(even) { background-color: #2C2C2C; }

table, tr, td, th {
	color: #FFFFFF;
	border: 1px solid #666666;
	border-collapse: collapse;
}

td, th { padding: 5px 10px; }

th { font-weight: bold; background-color: #2C2C2C; }
/*Стили таблиц конец*/
	  
/*Контейнер логотипа и меню*/
.block-navi { padding: 20px; flex: 0 1 auto; }

.block-navi img {
    margin: 0;
    width: 100px;
    height: auto;
}

header {
    display: flex;
	top: 0;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    align-content: space-around;
    width: 100%;
    padding: 0 5%;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    z-index: 100;
}
@media only screen and (max-width: 800px) {
header { padding: 0; position: relative; margin: 0; }
.block-navi { width: 100%; }
.block-navi img { margin: 5px 30%; width: 40%; }
}
@media only screen and (max-width: 600px) {
header { padding: 0; position: relative; margin: 0; }
.block-navi { width: 100%; }
.block-navi img { margin: 5px 20%; width: 60%; }
}
/*Контейнер логотипа и меню конец*/

/*Подвал*/
footer {
	font-size: 14pt;
	color: #FFFFFF;
	background: -webkit-linear-gradient(45deg, rgb(0, 0, 0), rgb(95, 94, 96));
	background: -moz-linear-gradient(45deg, rgb(0, 0, 0), rgb(95, 94, 96));
	background: linear-gradient(45deg, rgb(0, 0, 0), rgb(95, 94, 96));
	text-align: center;
	display: block;
	margin: 0px;
	padding: 50px 0;
	height: auto;
	width: 100%;
	position: relative;
}
/*Подвал конец*/
    
/*Аккордеон*/
.accordion {
    width: 100%;
    height: 700px;
    margin: 0;
    background: #000000;
    overflow: hidden;
    position: relative;
}

.accordion ul {
    width: 100%;
    height: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.accordion li {
    position: relative;
    height: 100%;
    overflow: hidden;
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
    flex: 1 1 25%;
    margin: 0;
}

.accordion ul:hover li {
    flex: 1 1 15%;
}

.accordion ul li:hover {
    flex: 1 1 55%;
}

.accordion li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
    opacity: 0.8;
}

.accordion li:hover img {
    opacity: 1;
}

/* Стили для повёрнутого заголовка */
.accordion .rotated-title {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 80px;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
    z-index: 2;
    writing-mode: vertical-rl;
    transform: scale(-1);
    padding: 28px 0;
}

.accordion .rotated-title p {
    display: none;
}

.accordion .rotated-title h2 {
    color: white;
    font-size: 30pt;
    font-weight: normal;
    margin: 0;
    white-space: nowrap;
}

/* Анимация при наведении */
.accordion li:hover .rotated-title {
    width: 100%;
    left: 0;
    writing-mode: horizontal-tb;
    transform: none;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
}

.accordion li:hover .rotated-title h2 {
    font-size: 30pt;
    white-space: normal;
}

.accordion li:hover .rotated-title p {
    font-size: 16pt;
    margin: 25px 0;
    color: #FFFFFF;
    display: inline;
    white-space: normal;
}
.accordion-mobile {
    display: none;
}
@media only screen and (max-width: 800px) {
.accordion {
    display: none;
}
.accordion-mobile {
	display: block;
	margin: 0 auto;
	width: 100%;
	justify-content: start;
	position: relative;
}
.accordion-mobile H1 {
    font-family: "Mulish", sans-serif;
    font-optical-sizing: auto;
    margin: 0 0 25px 0;
    font-weight: 500;
    font-size: 8vw;
    line-height: 1.3;
    font-style: normal;
}
.block-2-column-mobile {
	    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	margin: 0px;
	padding: 20px;
	position: relative;
	display: block;
	width: 100%;
}
.block-2-column-mobile img {
    width: 100%;
    height: 100%;
    position: relative;
}
}
/*Аккордеон конец*/
	
/*Белая кнопка*/
.btn-white {
	display: inline-block;
	cursor: pointer;
	font-size: 21px;
	text-decoration: none;
	padding: 10px 20px;
	color: #ffffff;
	font-weight: 500;
	background: transparent;
	border-radius: 2px;
	border: 2px solid #ffffff;
}

.btn-white:hover{
	background: #ffffff;
	color: #354251;
	border: 2px solid #ffffff;
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}
/*Белая кнопка конец*/
	
/*Блок с текстурой*/
.uzor {
	font-size: 16pt;
	font-weight: normal;
	color: #F9F9F9;
	background-image: url(/uploads/black.jpg);
	background-repeat: repeat;
	margin: 0px;
	padding: 150px 0;
	height: auto;
	width: 100%;
	position: relative;
}
.uzor h1 {
	font-family: "Mulish", sans-serif;
	color: #EFEFEF;
	text-align: left;
	font-optical-sizing: auto;
	margin: 0 0 50px 0;
	font-weight: 300;
	line-height: 1.2;
	font-style: normal;
}
@media only screen and (max-width: 800px) {
.uzor {	padding: 50px 0;}
}
/*Блок с текстурой конец*/
	
/*Блок в 2 колонки*/
.cont-2-column {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	width: 60%;
	justify-content: start;
	position: relative;
}
.block-2-column {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;	
    margin: 0px;
    padding: 20px;
    float: left;
    width: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.block-2-column img {
    width: 100%;
    height: auto;
    object-fit: contain;
    position: relative;
}
@media only screen and (max-width: 1024px) {
.cont-2-column { display: flex; width: 90%; margin: 0px; }
}
@media only screen and (max-width: 800px) {
.cont-2-column { display: block; width: 100%; margin: 0px; }
.block-2-column { display: block; float: none; width: 100%; margin: 0px; }
.cont-2-column H1 { margin: 0 0 25px 0; font-weight: 500; font-size: 9vw; text-align: left; }
}
/*Блок в 2 колонки конец*/
	
/*Серый блок*/
.white {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;	
	color: #EFEFEF;
	background-image: url(/uploads/fon-chernyj.jpg);
	background-size: cover;
	background-position: center;
	font-weight: 400;
	margin: 0px;
	padding: 100px 20%;
	height: auto;
	width: 100%;
	position: relative;
}
	
.white H1 {
	font-weight: 300;
    color: #EFEFEF;
}
@media (max-width: 800px) {
.white { padding: 50px 20px; }
.white H1 { font-weight: 500; font-size: 9vw; text-align: left; }
}
/*Белый блок конец*/
	
/*Блок в 3 колонки*/
.cont-3-column {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Равномерное распределение */
    gap: 10px; /* Фиксированный отступ для надежности */
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
}

.block-3-column {
    flex: 0 0 calc(33.33% - 10px); /* Точный расчет с учетом gap */
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    border-radius: 1px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.block-3-column::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    z-index: 1;
    transition: all 0.3s ease;
}
	
.block-3-column:hover::before {
    height: 100%;
    background: rgba(0,0,0,0.6);
}

.block-3-column .content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    z-index: 2;
    color: white;
}

.block-3-column:hover .content-overlay {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.block-3-column .content-overlay h2 {
    margin: 0;
    font-size: 1.5em;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    transition: all 0.3s ease;
}

.block-3-column .content-overlay p {
    margin: 10px 0 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    font-size: 0.9em;
    line-height: 1.4;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.block-3-column:hover .content-overlay p {
    opacity: 1;
    max-height: 100px;
}

/* Адаптация для планшетов */
@media (max-width: 992px) {
    .block-3-column {
        flex: 0 0 calc(50% - 10px); /* 2 колонки */
    }
}

/* Адаптация для мобильных */
@media (max-width: 576px) {
    .block-3-column {
        flex: 0 0 100%; /* 1 колонка */
    }
}
/*Блок в 3 колонки конец*/

/*Матовый блок*/
.matte {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;	
	color: #EFEFEF;
	background-image: url(/uploads/black.jpg);
	background-repeat: repeat;
	font-weight: 400;
	margin: 0px;
	padding: 100px 20%;
	height: auto;
	width: 100%;
	position: relative;
}
	
.matte H1 {
	font-weight: 300;
    color: #EFEFEF;
}
@media (max-width: 800px) {
.matte { padding: 50px 20px; }
.matte H1 { font-weight: 500; font-size: 9vw; text-align: left; }
}
/*Матовый блок конец*/

/*Кнопка возврата*/
.btn-up {
  position: fixed;
  background-color: #FF9900;
  right: 10%;
  bottom: 0px; 
  border-top-left-radius: 8px; 
  border-top-right-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease-in-out;
  width: 60px;
  height: 50px;
  opacity: 1;
    z-index: 1000;
}

.btn-up::before {
  content: "";
  width: 40px;
  height: 40px;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E");
}

.btn-up_hide {
  display: none;
}

.btn-up_hiding {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .btn-up:hover {
    background-color: #FF8040; /* цвет заднего фона при наведении */
  }
}
/*Кнопка возврата конец*/

/*Блок основного контента*/
.block-content {
	display: flex;
	background-image: url(/uploads/black.jpg);
	background-repeat: repeat;
	color: #F9F9F9;
	flex-flow: row wrap;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: 100%;
    padding: 50px 0 100px 0;
	position: relative;
}

/*Одна колонка*/
.one-column {
	margin: 0 10px;
	padding: 20px;
	flex: 0 1 60%;
	position: relative;
}

/*Две колонки*/
.two-column {
    margin: 10px;
    padding: 20px;
    flex: 0 1 30%;
    aspect-ratio: 1 / 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}

.two-column img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    align-self: center; /* Центрируем изображение */
}

/* Для текстового контента */
.two-column h1,
.two-column i,
.two-column p {
    width: 100%; /* Занимаем всю ширину */
    margin: 10px 0; /* Отступы между элементами */
}

.two-column H1 {
    font-size: 30pt;
}

/*Три колонки*/
.three-column {
  margin: 1.1%;
  padding: 20px;
  flex: 0 1 23.5%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  position: relative;
  transition: all 0.4s ease;
}

.three-column::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65); /* 65% затемнения */
  transition: all 0.4s ease;
  z-index: 1;
}

.three-column:hover::before {
  background: rgba(0, 0, 0, 0.15); /* 15% при наведении */
}

.three-column H1 {
	font-family: "Mulish", sans-serif;
	font-optical-sizing: auto;
	color: #FFFFFF;
	margin: 0 0 15px 0;
	font-weight: 500;
	font-size: 1.5vw;
	line-height: 1.3;
	font-style: normal;
}

.three-column H3 {
	font-family: "Mulish", sans-serif;
	font-optical-sizing: auto;
	color: #FFFFFF;
	margin: 0 0 15px 0;
	padding-bottom: 15px;
	font-weight: 500;
	font-size: 10pt;
	line-height: 1.3;
	font-style: italic;
	border-bottom: 1px solid #CCCCCC;
}

/*Пять колонок*/
.five-column {
	margin: 0;
	padding: 20px;
	flex: 0 1 20%;
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center;
	position: relative;
}

.column-content {
  position: absolute;
  top: 50%;
  left: 20px; /* Отступ от левого края */
  right: 20px;
  transform: translateY(-50%); /* Вертикальное центрирование */
  color: white;
  z-index: 2;
  text-align: left; /* Текст прижат к левому краю */
  padding: 15px;
}

/* Адаптация для мобильных */
@media (max-width: 800px) {
  .three-column {
    flex: 0 1 48%;
    margin: 1%;
    aspect-ratio: 1 / 1; /* Меняем пропорции */
  }
.three-column H1 {
	font-size: 18pt;
}
  .two-column {
    flex: 0 1 100%;
    aspect-ratio: 16/9; /* Меняем пропорции */
  }
}
@media (max-width: 600px) {
  .three-column {
    flex: 0 1 100%;
    aspect-ratio: 1 / 1; /* Меняем пропорции */
  }
}
/*Блок основного контента конец*/

/*Листалка новостей*/
.navigation {
	display: table;
	margin: 50px 0;
    text-align: center;
	padding: 0px;
	height: auto;
    letter-spacing: 2px;
	width: 100%;
	position: relative;
}
/*Листалка новостей конец*/

/* Стиль галереи */
.xfieldimagegallery {
	display: flex;
	flex-flow: row wrap;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: 100%;
    padding: 0 0 100px 0;
	position: relative;
}

.xfieldimagegallery li {
  margin: 1.1%;
  padding: 0;
  flex: 0 1 23.5%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  position: relative;
    transition: all 0.25s ease-out;
}

.xfieldimagegallery li a {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.xfieldimagegallery li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.xfieldimagegallery li:hover {
    box-shadow: 0px 0px 21px -6px rgba(255,255,255,0.44);
}
@media (max-width: 800px) {
.xfieldimagegallery li {
    flex: 0 1 48%;
    margin: 1%;
    aspect-ratio: 1 / 1;
}
}
@media (max-width: 600px) {
.xfieldimagegallery li {
    flex: 0 1 100%;
    aspect-ratio: 1 / 1;
}
}
/* Стиль галереи конец */

/*Форма отправки*/
#sendmail {
	display: flex;
	background-image: url(/uploads/black.jpg);
	background-repeat: repeat;
	color: #F9F9F9;
	flex-flow: row wrap;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: 100%;
	padding: 50px 0 100px 0;
	position: relative;
}

/*Поля ввода*/
input {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
    background: transparent;
    color: #F9F9F9;
	font-size: 16pt;
	margin: 0 0 15px 0;
	padding: 7px 10px;
	width: 100%;
    outline: none;
	border: 1px solid #F4F4F4;
}
textarea {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	background: transparent;
	color: #F9F9F9;
	font-size: 16pt;
	margin: 0 0 15px 0;
	padding: 7px 10px;
	width: 100%;
	height: 100px;
	outline: none;
	border: 1px solid #F4F4F4;
}
/*Поля ввода конец*/

/*Капча*/
.c-captcha {
 display: flex;
 align-items: center;
 width: 100%;
}
.cc-captcha {
 padding: 5px;
 flex: 0 1 50%;
}
.cc-captcha img {
 width: 50%;
}
.c-captcha input {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
    background: transparent;
    color: #F9F9F9;
	font-size: 16pt;
	margin: 0 0 0 15px;
	padding: 7px 10px;
	width: 50%;
    outline: none;
	border: 1px solid #F4F4F4;
}
/*Капча конец*/
/*Форма отправки конец*/