@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Marmelad&family=Open+Sans:wght@400;700&display=swap');
body{
    font-family: 'PT Sans Narrow', sans-serif;
}
h2{
    background: url('../images/menu-line.png') no-repeat center bottom;
    min-height: 45px;
}
h2, h3{
    text-transform: uppercase;
}

.whatsapp-button {
		position: fixed;
		right: 13px;
		bottom: 90px;
		transform: translate(-50%, -50%);
		background: #25D366; /*цвет кнопки*/
		border-radius: 50%;
		width: 55px; /*ширина кнопки*/
		height: 55px; /*высота кнопки*/
		color: #fff;
		text-align: center;
		line-height: 53px; /*центровка иконки в кнопке*/
		font-size: 35px; /*размер иконки*/
		z-index: 9999;
		}
.whatsapp-button a {
		color: #fff;
		}
.whatsapp-button:before,
.whatsapp-button:after {
		content: " ";
		display: block;
		position: absolute;
		border: 50%;
		border: 1px solid #25D366; /*цвет анимированных волн от кнопки*/
		left: -20px;
		right: -20px;
		top: -20px;
		bottom: -20px;
		border-radius: 50%;
		animation: animate 1.5s linear infinite;
		opacity: 0;
		backface-visibility: hidden; 
		}
		
.whatsapp-button:after{
		animation-delay: .5s;
		}
		
		@keyframes animate
		{
		0%
		{
        transform: scale(0.5);
        opacity: 0;
		}
		50%
		{
        opacity: 1;
		}
		100%
		{
        transform: scale(1.2);
        opacity: 0;
		}
		}
@media (max-width : 800px) {  
		.whatsapp-button {   
		bottom: 5px; /*отступ кнопки снизу от экрана*/
		right: 15px; /*отступ кнопки слева от экрана(right - справа)*/
		}
		
		.whatsapp-button {
		width: 55px; /*ширина кнопки*/
		height: 55px; /*высота кнопки*/
		line-height: 53px;
		font-size: 35;
		
		}
}

.icon {
	width: 60px;
	height: 60px;
	border-radius: 15px;
	margin: 0 auto;
	background-image: linear-gradient(
		155deg,
		#4c57a2 8%,
		#87439a 50%,
		#e02870 85%
	);
	font-size:38px;
}
.icon i{
    color:#fff;
}

.main-text {
    position: absolute;
    top: 30%;
    width: 100%;
    color: #FFF;
}
.main-text .btn-outline-light{
    width: 170px;
    margin: auto;
}
.main-text .f{
    font-family: 'Comfortaa', cursive;
}
.main-text .s{
    font-family: 'Open Sans', sans-serif;
}
.main-text .s2{
    background: url('../images/line-slide.gif');
}

.nav{
    padding: 30px 0;
    background: #FFF;
    border-bottom: 2px solid #FF0000;
}
.nav a{
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 40px;
    text-transform: uppercase;
    color: #292726;
    padding-top: 0;
    padding-bottom: 0;
}
.nav a:hover{
    color: #FF0000;
}
.navbar-brand{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    margin-top: -25px;
    width: 160px;
}
.navbar-brand img{
    width: 160px;
}
@media (max-width: 575.98px) {
    .main-text {
        top: 10%;
    }
    .navbar-brand{
        margin-top: 0;
        width: 70px;
    }
    .navbar-brand img{
        width: 70px;
    }
    .nav{
        padding: 10px 0;
    }
    .nav a{
        font-size: 10px;
    }
}
@media (max-width: 484.98px) {
    .navbar-brand{
        width: 50px;
    }
    .navbar-brand img{
        width: 50px;
    }
    .nav{
        padding: 10px 0;
    }
    .nav a{
        font-size: 8px;
    }
}
#youtube{
    border-top: 2px solid #FF0000;
    border-bottom: 2px solid #FF0000;
}
.youtube{
    /* background: url('../images/imac-png.png') no-repeat; */
    position: relative;
}
.color-overlay{
    position: absolute;
    top: 15px;
    left: 15px;
    width: 93%;
    height: 67%;
}
.color-overlay iframe{
    width: 100%;
    height: 100%;
}
@media (max-width:419px) {
    .nav-justified .nav-item, .nav-justified>.nav-link{
        flex-basis: auto;    
    }
    /* .youtube{
        width: 100vw;
    } */
}

#akcii p, #akcii .btn{
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
}
#akcii img{
    padding: 30px 0;
}
#utp1{
    background: url('../images/2.gif') no-repeat center center;
}
#utp2{
    background: url('../images/3.gif') no-repeat center center;
}
#utp3{
    background: url('../images/4.gif') no-repeat center center;
}
#utp4{
    background: url('../images/1.gif') no-repeat center center;
}
.utp{
    padding: 100px 0;
    color: #FFF;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 60vh;
}
.utp h3{
    font-family: 'Comfortaa', cursive;
    font-size: 36px;
    padding-bottom: 1.75rem;
}
.utp p{
    font-family: 'Marmelad', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
}
#product .card, #category .card{
    margin-bottom: 30px;
}
#product .card, #product .card .card-img, .card-img-top{
    font-family: 'Marmelad', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 0;
}
#product .card p{
    margin-bottom: 0;
}
#catalog{
    background: url('../images/catalog.jpg') no-repeat center center;
}
#preim h3{
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
}
#preim p{
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}
#preim .card{
    border: none    ;
}
#main_text{
    font-family: 'Open Sans', sans-serif;
    background: url('../images/5.gif') no-repeat center center;
    color: #FFF;
}
#main_text h1, #main_text h3{
    padding-bottom: 1.75rem;
    text-align: center;
}
#spec{
    font-family: 'Open Sans', sans-serif;
}
#spec p{
    font-size: 48px;
}
.btn-primary{
    background: #FF0100;
    border: none;
}
.btn-primary:hover{
    background: #29ABE2;
}
footer{
    font-family: 'Open Sans', sans-serif;
    background: #292726;
}
footer p a{
    color: #fff;
    text-decoration: none;
}
footer p a:hover{
    color: #fff;
    text-decoration: underline;
}
@media (min-width: 780px) {
   .ker img {	
	   width: 305px;
	   height: 305px;
	}
	.cat_kir img {	
	   width: 194.67px;
	   height: 194.67px;
	}
	#category .row {
	   	justify-content: center;
	}
}