@import "css/bootstrap.css?v3-cgi";

/* Fonts
--------------------------------------------- */
@font-face{
	font-family: 'Bum-SP';
	src: url('fonts/Bum-Bum-SP.woff2') format('woff2'),
	url('fonts/Bum-Bum-SP.ttf') format('truetype')
}

/* Elements
--------------------------------------------- */
:active, :hover, :focus {
    outline: 0;
    outline-offset: 0;
}

body{
	background: url(images/bg-line-left-h.png), url(images/bg-line-right-h.png);
    background-position: left center, right center;
    background-repeat: repeat-y;
    background-attachment: fixed;
}
body.has-popup{
	overflow: hidden;
}

a:hover,
a:focus{
	text-decoration: none;
}

.text-left{ text-align: left; }
.text-right{ text-align: right; }
.text-center{ text-align: center; }

.wrap-forms .wrap-forms__agreement{
    font-size: 0.8em;
    opacity: 0.8;
    margin: 15px 0;
    text-align: center;
}

.btn{
	display: inline-block;
    color: rgb(255, 255, 255);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.5625vw;
    font-weight: 500;
    padding: 1.5vh 2.1vw;
	background: transparent;
	text-align: center;
	line-height: 1.8;
	text-transform: uppercase;
}
.btn:hover{
	color: #fff;
	background: rgba(255,255,255,0.3);
}

.btn.btn-primary{
	background: rgba(255,255,255,1);
	color: #404040
}
.btn.btn-primary:hover{
	background: rgba(255,255,255,0.6);
}

.btn.btn-dark{
	border-color: #9f3374;
	background: #9f3374;
	color: #fff;
}
.btn.btn-dark:hover{
	background: #fff;
	color: #9f3374
}


.wrap-forms .btn{
	width: 100%;
}

h1, h2, h3, h4{
	font-family: 'Bum-SP';
}

/* Header
--------------------------------------------- */
header{
	position: absolute;
    z-index: 10;
    padding: 15px 10vw;
	width: 100%;
	display: flex;
    justify-content: space-between;
	align-items: center;
}
.site.pages header{
	position: static;
	background-color: #333
}
header .site-branding img{
	height: 80px;
}
.site.pages header .site-branding img{
	height: 45px;
}
header .site-contacts{
	font-size: 1.6em;
	font-weight: bold;
}
header .site-contacts a{
	color: #fff;
}
header .site-contacts a span{
	color: #d386b4;
}
/* Animationt
--------------------------------------------- */
a, svg, button, tr {
	-webkit-transition: 0.7s ease;
    -moz-transition: 0.7s ease;
    -o-transition: 0.7s ease;
    transition: 0.7s ease;
}

.__animation, img{
	-webkit-transition: 1.5s ease;
    -moz-transition: 1.5s ease;
    -o-transition: 1.5s ease;
    transition: 1.5s ease;
}
.__animation p,
.__animation div,
.section-home__text > div{
	-webkit-transition: 1.0s ease;
    -moz-transition: 1.0s ease;
    -o-transition: 1.0s ease;
    transition: 1.0s ease;
}
.background-image.__animation{
	transition: background-size 8s ease;
}

/* Section
--------------------------------------------- */
section{
	padding: 70px 0;
	position: relative;
	overflow: hidden;
	transition: background-color .5s ease-in-out;
}
section.section-fluid{
	/*min-height: 90vh;*/
}
section.section-fluid.section-home__slider{
	min-height: auto;
}
section.section-intro{
	overflow: visible;
	min-height: 100vh;
}
section.background-image{
	background-repeat: no-repeat;
	background-size: 150%;
	background-position: center;
	background-attachment: fixed;
}
section.background-video .container,
section.background-video .container-fluid{
	position: relative;
	z-index: 5;
}
section.background-video .video-box{
	overflow: hidden;
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}
section.background-video video{
	width: 100%;
}
section .intro__shadow{
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
}

.section-title{
	font-family: 'Bum-SP';
	font-size: 2em;
    font-weight: bold;
	margin-bottom: 40px;
}
h1 span,
.section-title span{
	color: #9f3374;
}


/* Intro
--------------------------------------------- */
.section-intro{
	display: flex;
	align-items: center;
}
.section-intro .section-intro-heading{
	display: flex;
	align-items: center;
	font-family: 'Bum-SP';
}
.section-intro .section-intro-heading .section-intro-heading__image{
	padding: 30px 50px 30px;	
}
.section-intro .section-intro-heading .section-intro-heading__image img{
	width: 200px;
}

.section-intro .section-intro-heading .section-intro-heading__title{
	font-size: 7em;
    margin: 0;
}
.section-intro .section-intro-heading .section-intro-heading__title > span{
	color: #d386b4;
	text-decoration: underline;
}
.section-intro .section-intro-heading .section-intro-heading__subtitle{
	color: #000;
	font-size: 1.9em;
    display: inline-block;
    background-color: #fff;
    padding: 1px 20px;
    border-radius: 12px;
}
.section-intro .section-intro-heading .section-intro-heading__subtitle:before{
	content: '';
    position: absolute;
    top: -4px;
    left: -25px;
    transform: rotate(14deg);
    height: 32px;
    aspect-ratio: 1;
    border-top-right-radius: 100%;
    outline: 15px solid #fff;
    clip-path: inset(0 0 1px 1px);
}

.section-intro .section-intro-heading .section-intro-heading__text{
	font-size: 2.3em;
	margin: 7px 0;
}

.section-intro .icon-arrow-down{
	position: absolute;
    left: 0;
    bottom: 3vh;
    z-index: 6;
    width: 100%;
    color: #fff;
    text-align: center;
	cursor: pointer;	
	display: none;
}
.section-intro.active .icon-arrow-down{
	display: block;
	animation-name: scroll-with-delay;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.section-intro .icon-arrow-down svg{
	width: 3em;
    height: 3em;
}

/* SectionText
--------------------------------------------- */
.section-home__text .container{
	position: relative;
	top: 0;
	opacity: 1;
}
.section-home__text .container.preload{	
	top: -15vh;
	opacity: 0;
}

/* Intro - animation
--------------------------------------------- */
.section-intro .section-intro-heading .section-intro-heading__title{
	position: relative;
	top: 0;
	opacity: 1;
}
.section-intro .section-intro-heading.preload .section-intro-heading__title{
	top: -8vh;
	opacity: 0;
}

.section-intro .section-intro-heading .section-intro-heading__text{
	position: relative;
	bottom: 0;
	opacity: 1;
}
.section-intro .section-intro-heading.preload .section-intro-heading__text{
	bottom: -8vh;
	opacity: 0;
}

.section-intro .section-intro-heading .section-intro-heading__image,
.section-intro .section-intro-heading .section-intro-heading__subtitle{
	position: relative;
	left: 0;
	opacity: 1;
}
.section-intro .section-intro-heading.preload .section-intro-heading__image,
.section-intro .section-intro-heading.preload .section-intro-heading__subtitle{
	left: -8vw;
	opacity: 0;
}

/* Services
--------------------------------------------- */
.services__list-item{
    display: flex;
    justify-content: center;
    align-items: center;	
}
.services__list-item:not(:first-child){
	border-top: 1px dotted #ccc;
}

.services__list-item:not(:last-child){
	margin-bottom: 30px;
}

.services__list-item .services__list-item__thumb{
	width: 300px;
	max-width: 100%;
}

.services__list-item .services__list-item__info{
	padding: 30px 50px;	
	overflow: hidden;
	width: 600px;
	max-width: 100%;
}

.services__list .services__list-item:nth-child(even) .services__list-item__info{
	text-align: right;
}

.services__list-item .services__list-item__info .services__list-item__info-title{
	font-family: 'Bum-SP';
	font-size: 2.8em;
	font-weight: bold;
	margin-bottom: 10px;
}
.services__list-item .services__list-item__info .services__list-item__info-description{
	font-size: 1.3em;
}
.services__list-item .services__list-item__info .btn{
	margin-top: 35px;
	transition: opacity 4.0s ease-in-out;
}

.services__list-item .services__list-item__thumb{
	transform: scale(1);
}
.services__list-item.preload .services__list-item__thumb{
	transform: scale(0.9);
}

.services__list-item .services__list-item__info .services__list-item__info-title,
.services__list-item .services__list-item__info .services__list-item__info-description{
	position: relative;
	top: 0;
	opacity: 1;
}
.services__list-item.preload .services__list-item__info .services__list-item__info-title{
	top: -3vh;
	opacity: 0;
}
.services__list-item.preload .services__list-item__info .services__list-item__info-description{
	opacity: 0;
}

.section-home__servises.default .section-title__services.active{
	color: #333333;
}
.section-home__servises.default .section-title__services{
	color: #d386b4;
}

.services-form-sender{
	padding-top: 90px;
	text-align: center;
}
.services-form-sender .services-form-sender__button button{
	padding: 20px 30px;
    border: 2px solid #9f3374;
    border-radius: 50px;
    background: #9f3374;
    color: #fff;
    font-size: 1.3em;
    text-transform: uppercase;
	animation-name: shake-with-delay;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
.services-form-sender .services-form-sender__button button:hover{
    background: #fff;
    color: #9f3374;
	animation-name: none;
}
.services-form-sender .services-form-sender__text{
	font-family: 'Bum-SP';
	font-size: 1.6em;
}

/* Prices
--------------------------------------------- */
.prices .prices__item{
	border: 1px dotted #ccc;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 30px;
	background-color: rgb(249, 249, 249);
	transition: background-color .5s ease-in-out;
	-webkit-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
    box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
}
.prices .prices__item:hover{
	background-color: #fff;
}
.prices .prices__item .prices__item-thumb{
	text-align: center;
}
.prices .prices__item .prices__item-thumb img{
	transform: scale(1);
	width: 200px;
}
.prices .prices__item:hover .prices__item-thumb img{
	transform: scale(1.02);
}
.prices .prices__item .prices__item-title{
	font-family: 'Bum-SP';
	font-size: 1.8em;
	height: 80px;
}
.prices .prices__item .prices__item-description{
	padding: 5px 0 20px 0;
    font-size: 1.2em;
	color: #777;
}
.prices .prices__item .prices__item-price{
    font-weight: bold;	
	text-align: center;
	margin-bottom: 25px;
}
.prices .prices__item .prices__item-price > span{
	font-size: 1.7em;
	color: #9f3374;
}

.prices .prices__item button{
	width: 100%;
	padding: 10px 20px;
    border: 2px solid #9f3374;
    border-radius: 50px;
    background: transparent;
    color: #9f3374;
    text-transform: uppercase;
}
.prices .prices__item button:hover{
    background: #9f3374;
    color: #fff;
}

/* Popup
--------------------------------------------- */
.popup{
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 9999;
	display: flex;
	backdrop-filter: blur(3px);
    background-color: rgba(0, 0, 0, 0.25);
}
.popup.preload{
	background-image: url(images/load.gif);
    background-size: 50px;
    background-position: center;
    background-repeat: no-repeat;
}
.popup .popup__body{
	max-height: 100%;
	max-width: 100%;
	padding: 25px 0;
	margin: auto;
	position: relative;
	z-index: 2;
}
.popup .popup__body:has(.slider-container){
	width: 100%;
}

.popup .popup__body img{
	width: 1170px;
	aspect-ratio: 16/9;
}
.popup .popup__close{
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 1;
}
.popup__close-button{
	border: none;
	background: transparent;
	position: absolute;
	top: 25px; right: 25px;
	z-index: 3;
	color: #fff;
}
.popup__close-button svg{
	width: 1.3em;
    height: 1.3em;
}

.popup .popup__body .popup__close-button{
    top: 32px;
    right: 12px;
    color: #888;
}

.order-form{
	padding: 25px;
	background-color: #fff;
	width: 600px;
	max-width: 98%;
	margin: 0 auto;
	border-radius: 12px;
}
.order-form .order-form__title{
	font-size: 1.6em;
	margin-bottom: 30px;
}

/* Video & Slider
--------------------------------------------- */
.video-grid{
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.video-grid .video-grid__item-fluid{
	-webkit-box-flex: 0;
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
	padding: 0 15px;
	margin-bottom: 30px;
	aspect-ratio: 16/9;
}
.video-grid .video-grid__item{
	-webkit-box-flex: 0;
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
	padding: 0 15px;
	margin-bottom: 30px;
	aspect-ratio: 16/9;
}
.video-grid .video-grid__item-fluid iframe,
.video-grid .video-grid__item iframe{
	border: none;
	width: 100%;
	height: 100%;
	border: none;
}

.slider-container{
	max-width: 100%;
	padding: 0 70px;
}

.slider-container .slick-arrow{
	width: 50px;
    height: 50px;
    border-radius: 50px;
    padding: 11px;
    background-color: #9f3374;
}
.slider-container .wpsisac-slick-slider .slick-dots li button, 
.slider-container .wpsisac-slick-carousal .slick-dots li button{
	border-color: #d386b4;
}

/*.wpsisac-slick-carousal.design-1 .wpsisac-image-slide{

}*/

/* FAQ
--------------------------------------------- */
.faq .faq-item{
	padding: 15px 30px 15px;
	border: 2px solid #d386b4;
	border-radius: 12px;
}
.faq .faq-item:not(:last-child){
	margin-bottom: 30px;
}
.faq .faq-item .faq-question{
	cursor: pointer;
	font-family: 'Bum-SP';
	font-size: 1.6em;
	position: relative;
}
.faq .faq-item .faq-question svg{
	width: 0.5em;
    height: 0.5em;
    position: absolute;
    right: 0;
    top: calc(50% - 0.25em);
    color: #d386b4;
}
.faq .faq-item.active .faq-question svg{
	transform: rotate(180deg);
}
.faq .faq-item .faq-answer{
	display: none;
	margin-top: 25px;
	font-size: 1.2em;
	padding-left: 25px;
	position: relative;
	color: #666;
}
.faq .faq-item .faq-answer:before{
	content: '';
	position: absolute;
	top: 10px; left: 0;
	width: 15px;
	height: 2px;
	background-color: #d386b4;
}

/* Form Call
--------------------------------------------- */
.form_call .container{
	display: flex;
    justify-content: center;
}
.form_call .form_call__title{
	-webkit-box-flex: 0;
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 60%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
}
.form_call .form_call__form{
	-webkit-box-flex: 0;
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%;
    padding: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    min-height: 450px;
    border-radius: 12px;
    background-image: url(images/form-call-bg-l-o.png);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.6);
    -moz-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.6);
    box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.6);
}
.form_call .form_call__form.preload{
	background-size: auto 200%;
}
.form_call .form_call__form .form_call__form-body{
	width: 100%;
}

.form_call .form_call__form .form_call__form-body form{
	position: relative;
	z-index: 2;
}
.form_call .form_call__form .form_call__form-body input{
	background: none;
	border: none;
	border-radius: 0;
	border-bottom: 1px dotted rgba(255,255,255,0.6);
	color: #fff;
	font-size: 1.6rem;
}
.form_call .form_call__form .form_call__form-body input::placeholder { 
	color: #fff;
	font-size: 1.6rem;
}
.form_call .form_call__form .form_call__form-body input:focus::placeholder { 
	color: transparent;
}
.form_call .form_call__form .form_call__form-body a:not(:first-child),
.form_call .form_call__form .form_call__form-body button:not(:first-child){
	margin-top: 23px;
}
.form_call .form_call__form .form_call__form-body button:hover{
   border-color: transparent;
}
.form_call .form_call__form .form_call__form-body .notification{
	margin-bottom: 23px;
}
.form_call .wrap-forms .wrap-forms__agreement{
	color: #eee;
}

/* Footer
--------------------------------------------- */
footer{
	padding: 50px 0;
    background-color: #333;
	color: #eee;
}
footer .container{
	display: flex;
    justify-content: space-between;
    align-items: center;
}
footer .container .copyright{
	margin: 0 auto 0 0;
}
footer .container .copyright img{
	margin-bottom: 10px;
}
footer .container .contacts{
	margin: 0 0 0 auto;
}
footer .container .contacts > a{
	display: inline-block;    
    font-size: 1.3em;
}
footer .container .contacts > a:not(:last-child){
	margin-right: 10px;
}
footer .container .contacts > a svg{
	width: 2em;
    height: 2em;
    vertical-align: middle;
}
footer .container .contacts > a.telephone{
	padding: 9px 9px;
    background-color: #d386b4;
    line-height: 0;
    border-radius: 50px;
}
footer .container .contacts > a.telephone svg{
	width: 1.1em;
    height: 1.1em;
    vertical-align: middle;
	color: #fff;
}
/* 404
--------------------------------------------- */
#error-404{
	height: 100vh;
	text-align: center;
}
/* @Media
--------------------------------------------- */
@media (max-width: 1540px) {
    section.background-video video{
        width: auto;
		height: 100%;
    }
}
@media (max-width: 1199px) {
    .section-intro .section-intro-heading .section-intro-heading__title{
		font-size: 5em;
		line-height: 1em;
		margin-bottom: 0.3em;
	}
	.section-intro .section-intro-heading .section-intro-heading__text{
		font-size: 1.6em;
	}
}
@media (max-width: 1024px) {
	body{
		background: #fff;
	}
	.section-intro .icon-arrow-down{
		bottom: -10vh;
	}
} 
@media (max-width: 992px) {
    .slider-container{
		padding: 0 15px;
	}
	
	.form_call .container {
		display: flex;
		flex-direction: column;
	}
	.form_call .form_call__title,
	.form_call .form_call__form{
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}
@media (max-width: 768px) {
	header {
		padding: 15px 3vw;
	}
    .section-intro .section-intro-heading {
		align-items: center;
		justify-content: center;
		flex-direction: column;
		text-align: center;
	}
	.section-intro .section-intro-heading .section-intro-heading__subtitle{
		margin: 0 auto;
	}
	.section-intro .section-intro-heading .section-intro-heading__subtitle:before{
		display: none;
	}
	
	.services__list-item {
		justify-content: center;
		flex-direction: column;
		flex-flow: wrap;
	}
	.services__list .services__list-item:nth-child(even) .services__list-item__info{
		text-align: left;
	}
	.services__list-item .services__list-item__thumb{
		padding: 50px 0 0;
		order: 0;
	}
	.services__list-item .services__list-item__info{
		order: 1;
		padding: 0 15px;
	}
	.prices .prices__item .prices__item-title{
		height: auto;
	}
	
	.slider-container .slick-arrow{
		display: none!important;
	}
	
}
@media (max-width: 550px) {
	header .site-branding img {
		height: 45px;
	}
	header .site-contacts {
		font-size: 1.3em;
		padding-top: 10px;
	}
	section.section-intro {
		min-height: 76vh;
	}
	.section-intro .section-intro-heading .section-intro-heading__image img{
		width: 128px;
	}
	.section-intro .section-intro-heading .section-intro-heading__title {
        font-size: 4em;
    }
	.section-intro .section-intro-heading .section-intro-heading__subtitle{
		font-size: 1.6em;
	}
	.section-intro.active .icon-arrow-down,
	.section-intro .icon-arrow-down{
		bottom: -10vh;
		animation-name: none;
		perspective: 20em;
	}
	.section-intro.active .icon-arrow-down svg{
		animation-name: rotate-with-delay;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}	
	
	footer .container{
		display: flex;
        flex-direction: column;
	}
	footer .container .copyright{
		margin: 0 0 45px 0;
	}
	footer .container .contacts{
		margin:auto;
		text-align: center;
	}
}

/* @Animationt
--------------------------------------------- */
@keyframes shake-with-delay{
    from, 16%, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    1.6%, 4.8%, 8%, 11.2%, 14.4% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    3.2%, 6.4%, 9.6%, 12.8% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}
@keyframes scroll-with-delay{
    from {
        bottom: 3vh;
    }
    to {
       bottom: -10vh;
    }
}
@keyframes rotate-with-delay{
	from {
		transform: rotateY(0deg);
	}
	to {
	   transform: rotateY(180deg);
	}
}