/* Top Bar margin */
#sp-top-bar .sp-module {
  margin: 0 0 0 0;
}
/* padding top между header(title) и Main Body (default 100px) */
.com-content #sp-main-body {padding-top: 0px; }
#sp-bottom {padding: 30px 0 10px;}
#sp-left .sp-module, #sp-right .sp-module {
  border: none;
}
#sp-left .sp-module ul>li,#sp-right .sp-module ul>li {
  border-bottom: none;
}
/* class text-justify выравнивание по ширине */
.text-justify {text-align: justify !important;}
.wrap-img {
  shape-outside: url('/images/LogoHome-200.png');
  shape-image-threshold: 0.5;
  float: left;
}
.wrap-img-1 {
  shape-outside: url('/images/QualityHome-200.png');
  shape-image-threshold: 0.5;
  float: left;
}
.wrap-img-2 {
  shape-outside: url('/images/NewProductHome.png');
  shape-image-threshold: 0.5;
  float: right;
}
/* Ovveride css iPrice Calculator LIGHT component*/
.tablcheta {
	color: var(--bs-dark);
}
.tablchet { 
	color: var(--bs-dark);
}
.textwarn {
	color: #ca453d;
}
.tablzag3 {
	background-color: var(--bs-dark);
  	background-image: var(--bs-gradient);
}
.tablzag2 {
	background-color: #171717;
	background-image: var(--bs-gradient);
}
.tablitogo {
	background-color: var(--bs-dark);
	color: #fff;
}
/* End iPrice Calculator LIGHT */
/* Ovveride css nav-tabs - black Theme -$gray-900:#212529*/
.nav-tabs {
  --bs-nav-link-color: var(--bs-dark);
  --bs-nav-tabs-border-color: var(--bs-dark);
  --bs-nav-tabs-link-active-border-color: var(--bs-dark) var(--bs-dark) var(--bs-dark);
  --bs-nav-link-hover-color: #fff;
  --bs-nav-tabs-link-active-color: #fff;
  --bs-nav-tabs-link-active-bg: var(--bs-dark);

}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
    color: var(--bs-white);
    background-color: var(--bs-dark);
  	border-color: var(--bs-dark);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  background-image: var(--bs-gradient);
}
/* End nav-tabs */
/* обтекание текстом */
.ellipse-keywords { shape-outside: ellipse(closest-side farthest-side at 50% 50%); }
/* my style accordion */
.accordion {
  	--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	--bs-accordion-btn-focus-border-color: gray;
  	--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(128, 128, 128, 0.25);    
}
/* боковая фикс.панель заказа и обр.связи*/
#order-contact-nav a {
	position: fixed;
	left: -95px;
	transition: 0.3s;
	padding: 10px 3px;
	width: 145px;
	text-decoration: none;
	font-size: 20px;
	border-radius: 0 5px 5px 0;
  	z-index: 1031;
}
#order-contact-nav a:hover {
	left: 0;
}
#order-nav {
	bottom: 20px;
	background-color: yellow;
}
#contact-nav {
	bottom: 80px;
	background-color: blue;
}
/*---анимация CSS---*/
/*эффект приблежения(зум) фото в слайдере */
.image-slide img {
animation-name: image-zoom;
animation-duration: 8s;
animation-iteration-count: 1;
}
@keyframes image-zoom {
0% {transform:scale(1);
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);}
50%{transform:scale(1.1);
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);}
100%{transform:scale(1);
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);}
}
/*CSS Движение вправо (слева на право) */
.slideRight{
    animation-name: slideRight;
    -webkit-animation-name: slideRight; 
 
    animation-duration: 2s; 
    -webkit-animation-duration: 2s;
 
    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     
 
    visibility: visible !important; 
}
@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }
    50%{
        transform: translateX(8%);
    }
    65%{
        transform: translateX(-4%);
    }
    80%{
        transform: translateX(4%);
    }
    95%{
        transform: translateX(-2%);
    }           
    100% {
        transform: translateX(0%);
    }   
}
/* CSS Движение влево (справа на лево) */ 
.slideLeft{
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;  
 
    animation-duration: 2s; 
    -webkit-animation-duration: 2s;
 
    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     
 
    visibility: visible !important; 
}
@keyframes slideLeft {
    0% {
        transform: translateX(150%);
    }
    50%{
        transform: translateX(-8%);
    }
    65%{
        transform: translateX(4%);
    }
    80%{
        transform: translateX(-4%);
    }
    95%{
        transform: translateX(2%);
    }           
    100% {
        transform: translateX(0%);
    }
}
/* CSS Движение вниз */
.slideDown{
    animation-name: slideDown;
    -webkit-animation-name: slideDown;  
 
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
 
    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;    
 
    visibility: visible !important;                     
}
@keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }
    50%{
        transform: translateY(8%);
    }
    65%{
        transform: translateY(-4%);
    }
    80%{
        transform: translateY(4%);
    }
    95%{
        transform: translateY(-2%);
    }           
    100% {
        transform: translateY(0%);
    }       
}
/* CSS Движение вверх (снизу вверх)*/
.slideUp{
    animation-name: slideUp;
    -webkit-animation-name: slideUp;    
 
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
 
    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;
 
    visibility: visible !important;         
}
@keyframes slideUp {
    0% {
        transform: translateY(100%);
    }
    50%{
        transform: translateY(-8%);
    }
    65%{
        transform: translateY(4%);
    }
    80%{
        transform: translateY(-4%);
    }
    95%{
        transform: translateY(2%);
    }           
    100% {
        transform: translateY(0%);
    }   
}
/* CSS Движение вверх и расширение
Элемент поднимется снизу вверх, при этом будет как бы сжат по сторонам, после подъема, он резко расширится и обретет нормальный вид. */
.slideExpandUp{
    animation-name: slideExpandUp;
    -webkit-animation-name: slideExpandUp;  
 
    animation-duration: 3s; 
    -webkit-animation-duration: 3s;
 
    animation-timing-function: ease-out;    
    -webkit-animation-timing-function: ease -out;
 
    visibility: visible !important; 
}
@keyframes slideExpandUp {
    0% {
        transform: translateY(100%) scaleX(0.5);
    }
    30%{
        transform: translateY(-8%) scaleX(0.5);
    }   
    40%{
        transform: translateY(2%) scaleX(0.5);
    }
    50%{
        transform: translateY(0%) scaleX(1.1);
    }
    60%{
        transform: translateY(0%) scaleX(0.9);      
    }
    70% {
        transform: translateY(0%) scaleX(1.05);
    }           
    80%{
        transform: translateY(0%) scaleX(0.95);     
    }
    90% {
        transform: translateY(0%) scaleX(1.02);
    }   
    100%{
        transform: translateY(0%) scaleX(1);        
    }
}
/* CSS Движение вниз и расширение
Тот же эффект, что и предыдущий, только движение сверху вниз. */
.expandUp{
    animation-name: expandUp;
    -webkit-animation-name: expandUp;   
 
    animation-duration: 0.7s;   
    -webkit-animation-duration: 0.7s;
 
    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;        
 
    visibility: visible !important; 
}
@keyframes expandUp {
    0% {
        transform: translateY(100%) scale(0.6) scaleY(0.5);
    }
    60%{
        transform: translateY(-7%) scaleY(1.12);
    }
    75%{
        transform: translateY(3%);
    }   
    100% {
        transform: translateY(0%) scale(1) scaleY(1);
    }   
}
/* CSS анимация появление увеличение
Элемент появляется из центра и увеличивается до нормального размера */
.fadeIn{
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn; 
 
    animation-duration: 2s; 
    -webkit-animation-duration: 2s;
 
    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     
 
    visibility: visible !important; 
}
@keyframes fadeIn {
    0% {
        transform: scale(0);
        opacity: 0.0;       
    }
    60% {
        transform: scale(1.1);  
    }
    80% {
        transform: scale(0.9);
        opacity: 1; 
    }   
    100% {
        transform: scale(1);
        opacity: 1; 
    }       
}
/* CSS анимация появление уменьшение
Элемент появляется из центра и увеличивается до нормального размера */
.expandOpen{
    animation-name: expandOpen;
    -webkit-animation-name: expandOpen; 
 
    animation-duration: 2s; 
    -webkit-animation-duration: 2s;
 
    animation-timing-function: ease-out;    
    -webkit-animation-timing-function: ease-out;    
 
    visibility: visible !important; 
}
@keyframes expandOpen {
    0% {
        transform: scale(1.8);      
    }
    50% {
        transform: scale(0.95);
    }   
    80% {
        transform: scale(1.05);
    }
    90% {
        transform: scale(0.98);
    }   
    100% {
        transform: scale(1);
    }           
/*------*/