/*
	Theme Name:	XTRA Child
	Theme URI:	https://xtratheme.com/
	Description:Multipurpose Theme
	Author:		Codevz
	Author URI:	https://codevz.com/
	Template:	xtra
	Version:	1.0
*/

/*
	PLEASE DO NOT edit this file, if you want add custom CSS go to Theme Options > Additional CSS
*/
/* Контейнер для списка */
.wpcf7-form-control.wpcf7-post_image_radio {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Стили для каждого элемента списка */
.wpcf7-form-control.wpcf7-post_image_radio .wpcf7-list-item {
    width: calc(25% - 20px); /* Ширина элемента с учетом отступов (4 элемента в ряд) */
    margin: 10px; /* Отступы между элементами */
    box-sizing: border-box; /* Учет отступов и границ в ширине элемента */
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрирование содержимого внутри элемента */
}

/* Стили для изображения */
.wpcf7-list-item .wpcf7-list-item-media img {
    max-width: 100%;
    height: auto;
}

/* Стили для блока с дополнительной информацией */
.wpcf7-list-item-body {
    text-align: center; /* Центрирование текста внутри блока */
}

/* Стили для label */
.wpcf7-list-item .wpcf7-list-item-media label {
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрирование содержимого внутри label */
}

.wpcf7-list-item-content{display:none;}
label.wpcf7-list-item-media{background:none !important}
li.wpcf7-list-item{border-radius: 8px;
  border: 1px solid #e1bb87;}
.wpcf7-list-item-body{margin-top:20px;}

  h2.kitten-title{font-size: 1.8rem;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 10px;}
	
.kitten-details {
    display: flex;
    flex-direction: column;
	    width: 80%;
    margin: 0 auto;
	font-size:16px;
	padding-bottom:20px;
}

.kitten-details p {
    display: flex;
    align-items: center;
    margin: 0;
    position: relative; /* For positioning the line */
}

.kitten-details b, .kitten-details .value {
    flex-shrink: 0; /* Prevent shrinking */
}

.kitten-details p::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px; /* Line thickness */
    background-color: #e1bb87; /* Line color */
    z-index: 1; /* Behind the text */
    margin-left: calc(100% - 100% - var(--line-width));
    margin-right: calc(var(--line-width) - 100%);
}

.kitten-details .value {
    flex: 1;
    text-align: right;
    margin-left: 10px; /* Space between <b> and <span> */
}

.kitten-details b {
    margin-right: 10px; /* Space between <b> and <span> */
}
.kitten-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.kitten-item {
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #e1bb87;
}

.kitten-item img {
  height: 250px; /* Устанавливаем желаемую высоту */
    object-fit: contain; /* Изображения сохранят свои пропорции, не будут обрезаться */
    width: auto; /* Ширина будет подстраиваться автоматически */
	border-radius:8px;
}

.kitten-photo-link {
    display: block;
    position: relative;
}

.kitten-photo .photo-container {
    position: relative;
}

.kitten-photo .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный фон */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Начально скрыто */
    transition: opacity 0.3s ease; /* Плавный переход */
}

.kitten-photo-link:hover .overlay {
    opacity: 1; /* Появляется при наведении */
}

.kitten-photo .overlay i {
    color: white; /* Цвет иконки */
    font-size: 24px; /* Размер иконки */
}

.kitten-details b[data-tooltip] {
    position: relative;
    cursor: pointer;
}

.kitten-details b[data-tooltip]::before {
    content: attr(data-tooltip); /* Содержимое подсказки */
    position: absolute;
    bottom: 100%; /* Расположение над элементом */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    font-size: 12px;
    z-index: 1000;
}

.kitten-details b[data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

.kitten-details b[data-tooltip]:hover::before,
.kitten-details b[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

#cz_87197 .cz_shape_1 {
    font-size: 90px;
    color: rgba(225, 187, 135, 0.2);
    font-family: Comfortaa;
    letter-spacing: 3px;
    text-transform: uppercase;
    top: 60px;
}
.cz_title.tac .cz_title_shape, .tac.cz_title_shape {
    left: 50%;
    transform: translate(-50%, -50%);
}
.cz_title_shape {
    position: absolute;
    font-weight: 900;
    width: 100%;
    line-height: 1;
    pointer-events: none;
    transform-origin: 0;
    z-index: 1;
    word-wrap: initial;
    transition: all .2s ease-in-out;
}
.cz_title.tac .cz_title_content {
    margin-right: auto;
    margin-left: auto;
}
.cz_title_content {
    display: table;
    position: relative;
    word-break: break-word;
    transition: all .2s ease-in-out;
}
#cz_87197 .cz_title_line span, #cz_87197 .cz_line_side_solo {
    background-color: #e1bb87;
    width: 45px;
    height: 3px;
    top: 1px;
}
.cz_title_content .cz_line_side_solo {
    font-size: 0;
    display: inline-block;
    vertical-align: bottom;
    margin: 0 20px 0 0;
    background: rgba(167, 167, 167, .4);
}
.cz_title_content > span {
    position: relative;
    transition: all .2s ease-in-out;
}
.cz_title_content > div {
    position: relative;
    z-index: 2;
    vertical-align: middle;
    word-break: normal;
}
.cz_title_content * {
    margin: 0;
}
.cz_title_content > * {
    display: table-cell;
}

.acf-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 0;
    margin: 0;
    align-items: center;
    align-content: flex-start;
	background:#f8f8f8;
	padding:10px;
}

.acf-gallery a {
    display: block;
    width: calc(25% - 10px); /* Задаёт ширину изображений, чтобы они занимали 4 в ряд с учетом отступов */
    margin-bottom: 10px; /* Добавляет отступ снизу для разделения строк */
}

.acf-gallery img {
    width: 100%; /* Делает изображение адаптивным по ширине родительского элемента */
    height: auto; /* Сохраняет пропорции изображения */
    display: block; /* Убирает пробел под изображением */
}


.acf-gallery a:hover {
    transform: scale(1.05); /* Легкое увеличение при наведении */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Увеличенная тень при наведении */
}

.acf-gallery img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px; /* Закругленные углы для изображений */
}

.acf-gallery:empty {
    display: none; /* Скрывает контейнер, если он пуст */
}

.embed-container {
    display: flex;
    justify-content: center; /* Центрирует видео по горизонтали */
    margin: 20px 0; /* Добавляет отступы сверху и снизу для улучшения внешнего вида */
}

.embed-container iframe {
    max-width: 100%; /* Устанавливает максимальную ширину для адаптивности */
    height: auto; /* Высота изменяется автоматически для сохранения пропорций */
	min-height:328px;
}

.logo > a, .logo_2 > a {
    display: inline-flex;
    border: 0;
    font-size: 40px;
    align-content: center;
    align-items: center;
    gap: 20px;
}

.logo > a h1, .logo_2 > a h1 {
    color: #fff;
}

.sub_breed_2{text-align:center; padding-top:50px;}

/* Основной контейнер в одну колонку */
.main_breed {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
    background-color: #E1BB871A;
    margin-top: 30px;
    align-content: center;
    justify-content: center;
    align-items: center;
}

/* Контейнер для изображений */
.custom-block-right {
    display: flex;
    flex-direction: column;
	padding-bottom:90px;
}

/* Мозаичный стиль для изображений */
.custom-block-grid {
    display:inline-flex;
	gap:10px;
    overflow: hidden; /* Прячем содержимое, которое выходит за пределы */
	max-width:1170px;
	margin:0 auto;
}

/* Контейнер изображений */
.custom-block-image {
    position: relative;
    overflow: hidden;
    height: auto; /* Позволяет изображению адаптироваться */
}

/* Изображения */
.custom-block-image img {
    height: 250px;
    object-fit: contain;
    width: auto;
    border-radius: 8px;
}
.main_breed::after {
    content: "";
    display: table;
    clear: both;
}

@media (max-width: 768px) {
  .kitten-grid {
    grid-template-columns: 1fr;
  }
  .custom-block-grid {
    grid-template-columns: 1fr; /* Один столбец для мобильных устройств */
    display: inline-flex;
    flex-direction: column;
    }
	.cz_wpe_content h2{font-size:30px;}
	
	.kitten-info{padding-top:30px;}
	#breed.cz_wpe_content{width:80%;}
	.logo > a, .logo_2 > a{display:flex;flex-direction:row;}
}
@media (min-width: 481px) and (max-width: 768px){#cz_87197 .cz_shape_1{font-size:30px;top:30px;}}

@media (max-width: 480px) {
	#header.vc_custom_1724840693220, #header{background-size:cover !important;background-position:35% !important;margin-top:-50px !important;}
	#cz_43426{font-size: 15px;margin-top: 10px;}
	#cz_88462 h2 {
    display: flex;
    justify-content: center; /* Центровка по горизонтали */
    align-items: center; /* Центровка по вертикали */
    height: 100%; /* Если необходимо растянуть по высоте родителя */
}
#cz_88462 .cz_wpe_content, .cz_wpe_content{width:100%;}
.vc_column-inner.vc_custom_1724749962135{padding-left:10px !important;padding-right:10px !important}
#breed.cz_wpe_content{padding-right:30px;padding-left:30px;}
.acf-gallery a{width: calc(50% - 10px);}
.vc_row.wpb_row.vc_row-fluid.vc_custom_1516703594032{padding-top:80px !important;padding-bottom:0px !important}
.wpcf7-form-control.wpcf7-post_image_radio .wpcf7-list-item{width: calc(50% - 20px);}
#cz_87197 .cz_shape_1{font-size: 42px !important;top: 0px !important;}
}

@media (min-width:1040px) and (max-width:1600px){
	.vc_row.wpb_row.vc_inner.vc_row-fluid{display: flex;flex-direction: column;align-items: center;}
	.elms_right.header_2_right{display: inline-flex;flex-direction: row-reverse;}
	.logo > a, .logo_2 > a{font-size:35px;}.logo_is_text.logo img{width:100px;height:auto;}
	#menu_header_2 > .cz > a{margin-left:20px !important;font-size:15px !important;}
	#header.vc_custom_1725034425375{background-size:cover !important;}
}

@media (min-width:1240px) and (max-width:1980px) {
	#header.vc_custom_1724760216441{background-size: contain;}
}