/* общее */
.wrp {padding-top:110px;}
html, body, p, a { font-family: 'RubikRegular';}
h1, h2, h3, h4, h5, h6, small { font-family: 'OswaldRegular';} /* OswaldBold */



/* рамка картинки новостей */
.img-art {
	text-align:center;
	padding:5px 0 20px 0;	
}
.img-art img {
	box-shadow: 0 0 15px rgba(0,0,0,0.3);
	margin:10px;
}



/* кнопка вверх */
#button-up {
	display: none;
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 99;
	font-size: 20px;
	border: none;
	outline: none;
	background-color: #039457;
	color: white;
	cursor: pointer;
	padding: 8px 14px 9px;
	border-radius: 50%;
	border: 1px solid #FFFFFF;
}
#button-up:hover {
	background-color: #0DBA70;
}
/* вывод кнопки спецсимволом */
#button-up:before {
	content:'\25B2';
}
.media {
	border:1px solid #333;
	max-width:100%;
	width:720px;
	height:400px;
}


/* header */
#header .bg-color {background-color: #222;}
#header .text-color {color: #ddd;}



/* menu */
#menu .bg-color {background-color: #FDEADA;}
#menu .text-color {color: #00B050;}
@media (max-width: 373px) {img.logo {width:175px; height:auto;}}



/* slider */
.carousel-item {transition: transform 1.6s ease-in-out;}
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
	transition: opacity 0s 1.6s;
}
.carousel-inner img {
	object-fit: cover; 
	object-position: center; 
	min-height: 35vh; 
	overflow: hidden;
}
.carousel-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5); /* затемнение */
	z-index: 1;
}

.slogan {z-index:5;} 

#slider .slogan {min-height:200px; height:65%;}
@media (max-width: 400px) {#slider .slogan {min-height:200px; height:95%;}}
#slider .slogan h2 {letter-spacing: 3px; color: #FF3338; text-shadow:-1px -1px 0 #ddd,0 -1px 0 #ddd,1px -1px 0 #ddd,1px 0 0 #ddd,1px 1px 0 #ddd,0 1px 0 #ddd,-1px 1px 0 #ddd,-1px 0 0 #ddd;}
#slider .slogan p {letter-spacing: 3px; color: #eee; text-shadow:-1px -1px 0 #333,0 -1px 0 #333,1px -1px 0 #333,1px 0 0 #333,1px 1px 0 #333,0 1px 0 #333,-1px 1px 0 #333,-1px 0 0 #333;}



/* special */
#special .bg-color {background-color: #F1F1F1;}
#special .text-color {color: #ddd;}



/* mail */
#static #mail .bg-color {background-color: #FDEADA;}
#static #mail .text-color {color: #039457;}



/* footer */
#footer .bg-color {background-color: #222;}
#footer .text-color {color: #ddd;}



/* static */
#static .bg-color {background-color: #fafafa;}
#static .bg-color button {background-color: #039457;}
#static .text-color button {color: #000;}
#static .text-color h1 {color: #039457;}
#static h4.text-color {color: #039457; font-size:18px;}
#static .text-color {color: #424242;}
#static p {text-align:justify;}
#static p.media {text-align:center;}
#static p.media iframe {border:1px solid #fbfbfb;}



/* goods */
#goods .bg-color {background-color: #FDEADA;}
#goods .text-color {color: #ddd;}
#goods h4.text-color {color: #039457;}
#goods a {color: #212529;text-decoration:none;}
#goods .bg-goods-cat {
	background-repeat: no-repeat;
	background-position:right bottom;
	height:200px;
}
.hover-shadow {
	transition: box-shadow 0.3s ease-in-out;
    transform: scale(1);
    transition: transform 0.5s ease-in-out;
}  
.hover-shadow:hover {
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
transform: scale(1.05);}





/* анимация */
.aos-all {
	width: 1000px;
	max-width: 98%;
	margin: 10vh auto 0 auto;
}
.aos-item {
	display: inline-block;
	float: left;
	width: 33.3333%;
	height: 300px;
	padding: 20px;
}
.aos-item__inner {
	position: relative;
	width: 100%;
	height: 100%;
	float: left;
	background: #1da4e2;
	line-height: 260px;
	text-align: center;
	color: #fff;
}
@media screen and (max-width: 800px) {
	.aos-item {
		width: 50%;
	}
}

/* пагинация */
.navigation {
	text-align:center;
	clear:both;
	display:block;  
	line-height: 20px; 
	cursor:default; 
	margin-bottom: 15px;
	margin-right: 3px; 
	padding: 10px;
	font-size:14px;
}
.navigation span {
	text-decoration:none;
	text-align:center; 
	border-radius:3px; 
	text-align: center; 
	color:#fff;
	display:inline-block;
	padding:3px 11px 3px 11px;
	background:#198754;
	border:1px solid #198754;
}
.navigation span:hover {
	background:#fff;
	text-decoration:none;
	color:#198754;
}
a.swchItem span {color:#fff; text-decoration:none;}
a.swchItem:hover {
	background:#198754;
	text-decoration:none;
}
.navigation a, .swchItem {
	background:#fff;
	border-radius:3px;
	color:#198754;
	display:inline-block;
	padding:3px 11px 3px 11px;
	text-align: center; 
	text-decoration:none;
	border:1px solid #198754;
}
.navigation a:hover {
	color:#fff;
	background:#198754;
	text-decoration:none;
}
span.swchItemDots span {color: #fff;}


.goods:hover {
	border-radius: 7px;
	-webkit-box-shadow: 0px 5px 10px 6px rgba(34, 60, 80, 0.2);
	-moz-box-shadow: 0px 5px 10px 6px rgba(34, 60, 80, 0.2);
	box-shadow: 0px 5px 10px 6px rgba(34, 60, 80, 0.2);
}	
.goods .card:hover {
	background-color: #9CCDB7!important;
}

/* эффект картинка 6  */ /* Воспроизведём  эффект наклонного блика */
.item-animation5 {
    overflow: hidden;
    position: relative; /* относительное позиционирование */
    cursor: pointer; /* смена курсора */
}
.item-animation5::before {
    position: absolute;
    top: 0;
    left: -95%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
	/* используем линейный градиент * определим начальное и конечное расположение, * цвет, размер и элементы трансформации */
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    -webkit-transform: skewX(-45deg);
    transform: skewX(-45deg);
}
/* Создадим анимацию и установим время исполнения */
.item-animation5:hover::before {
    -webkit-animation: shine 1.5s;
    animation: shine 1.5s;
}
/* описываем анимацию CSS свойств в виде перечня ключевых кадров */
@-webkit-keyframes shine {
    100% {
        left: 125%;
	}
}

@keyframes shine {
    100% {
        left: 125%;
	}
}