@charset "utf-8";
/* CSS Document Услуги*/

body * {
	margin: 0 auto;
}

.wrapper {
    height: calc(100vh * 0.90);
    min-width: fit-content;
}

.header { 
    height: fit-content;
/*    min-height: 5%;
    max-height: 9%;*/
}

.logo {
	position:absolute;
	margin-top:-0.3%;
	margin-left:3.5%;
	display:inline-block;
	cursor:pointer;
	z-index: 3;
	
}
.menu {width: 100%;
	top:5%;
	position:relative;
	background-color: #336699;	
}

.knopka1 a img {
    width: calc(100vh * 0.13);
    max-width: calc(100vw * 0.17);
}

.knopka2 a img {
    width: calc(100vh * 0.13);
    max-width: calc(100vw * 0.17);
}

.knopka3 a img {
    width: calc(100vh * 0.13);
    max-width: calc(100vw * 0.17);
}

.knopka4 a img {
    width: calc(100vh * 0.13);
    max-width: calc(100vw * 0.17);
}


.knopka1, .knopka2, .knopka3, .knopka4 {
	 display:inline-block; margin-top: 1%; margin-bottom:1%; cursor:pointer; text-align:center; width: fit-content;}

.knopka1 {margin-left:20%; -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;}
	.knopka1:hover {
		background:rgba(51,153,255,0.5); 
		-webkit-transform: rotate(360deg);
          	transform: rotate(360deg);}

.knopka2 { margin-left:7%; }
	.knopka2:hover {
		background:rgba(51,153,255,0.5);}

.knopka3 { margin-left:7%;	}
	.knopka3:hover {
		background:rgba(51,153,255,0.5);}

.knopka4 { margin-left:7%;	}
	.knopka4:hover {
		background:rgba(51,153,255,0.5);}

.kontent {
    background-color:#FFF;
	height:calc(100vh * 0.83);	
}

.contacts-kontent {
        background: url("img/6_fon3.png") no-repeat center center fixed;
        background-size: cover;
	/* background-image:url(img/2_fon.png);
	background-repeat:no-repeat; */
	/* margin-top:2%; */
	height:calc(100vh * 0.73);
/*     contain: content; */
	}

	.main_contacts {
		font-family:Verdana, Geneva, sans-serif;
		font-size:14px;
		min-width:100%;
		width:100%;
		min-height:70%;
		height:70%;
		
	}
		.contacts {
		font-family:Verdana, Geneva, sans-serif;
		font-size:14px;
		/* width:30%; */
		height:35%;
		margin-left:18%;
		margin-top:1%;
		margin-bottom:2.7%;
		display:inline-block;
	}
		.karta {
		width:20%;
		min-width: 200px;
		height:35%;
/*         margin-left:10%;
margin-top:1%;
margin-bottom:2.7%; */
		border:rgb(25, 79, 207);
		vertical-align: bottom;
		display:inline-block;
		
	}

.about-kontent {
    background-color:#FFF;
	height:calc(100vh * 0.83);	
}

.uslugi-kontent {
	background-image:url(img/5_fon.png);
	height:calc(100vh * 0.83);
	display: flex;
	flex-wrap: wrap;
	align-content: stretch;
	align-items: center;
}

.stroka {
    height:calc(100vh * 0.05);
}

.about-blok1 {
		height: 30vh;
		margin-top: 1%;	
		display: flex;
		position: relative;
		overflow: hidden;
	}

.about-blok2 {
		height:35%;
		clear:left;
		margin-bottom: 1%;
		display: flex;
	}
	
.uslugi-blok1, .uslugi-blok2, .uslugi-blok3 {
		width:19.8%;
		height:82%;
		min-width:100px;
		background-color:rgba(174,189,204,0.3);
		background-size:auto;
		/* display:inline-block; */
/*         margin-left:10.15%;
margin-top:5%;
margin-bottom:7%;  */
		vertical-align:text-top;
		display: flex;
        flex-direction: column;
        overflow-wrap: break-word;
        word-break: break-all;
        white-space: pre-line;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
	}
	
.uslugi-kartinka1, .uslugi-kartinka2, .uslugi-kartinka3 {
        background-size:cover; 
        background-repeat:no-repeat;
	    min-width: 100%;
	    width: 100%;
	    min-height: 12vh;
	    height: 27vh;/*calc(100vh * 0.27); */
	}

	.uslugi-kartinka1 {
	    background-image: url(img/5_kartinka1.png);
	}

	.uslugi-kartinka2 {
	    background-image: url(img/5_kartinka2.png);
	}
	
	.uslugi-kartinka3 {
	   overflow: hidden;
	   margin: 0 auto;
	    background-image: url(img/5_kartinka3.png);
	    
        
	    animation-name: usl3slaid;
        animation-duration: 39s;
        animation-iteration-count: infinite;
       /*  animation-timing-function: steps(1, end); */
        animation-fill-mode: forwards;
        animation-play-state: running;
        animation-timing-function: step-end;
        /* animation: usl3slaid 10s ease infinite; */
	}
	
@keyframes usl3slaid 
{
    0% {
        background-image: url(img/5_3_kartinka1.jpg);
        /* margin-left: 0px; */
    }
/*     30% {
    transform:rotateZ(45deg);
}
31% {
    transform:skew(10deg, 10deg);
}
32% {
    transform:rotateZ(0deg);
    transform:skew(0deg, 0deg);
} */
    13%
    {
        background-image: url(img/5_kartinka3.png);
        /* margin-left: calc(-20vw * 1); */
    }
    50%
    {
        background-image: url(img/5_3_kartinka2.jpg);
        /* margin-left: calc(-30vw * 2); */
    }
    90%
    {
        background-image: url(img/5_3_kartinka1.jpg);
        /* margin-left: calc(-30vw * 2); */
    }
    100%
    {
        background-image: url(img/5_3_kartinka1.jpg);
        /* margin-left: calc(-30vw * 3); */
    }
}
	
	.uslugi-tekst1, .uslugi-tekst2, .uslugi-tekst3 {
		font-family:Verdana, Geneva, sans-serif;
		font-size:13px;
		text-justify:auto;
		margin-right:1%;
		margin-left:3.5%;
		margin-top:5%;	
	}
	
.about-kartinka1 {
	position: absolute;
    height: 100%;
    width: 23vw;
    margin: 0 auto;
    margin-left: 3vw;
	overflow: hidden;
	}

.slide-about-wrapper {

    /* Calculate the total width on the
    basis of number of slides */
    width: calc(23vw * 3);

    /* Specify the animation with the
    duration and speed */
    animation: slide 10s ease infinite;
    	    animation-name: slideabout1;
        animation-duration: 30s;
        animation-iteration-count: infinite;
       /* animation-timing-function: steps(1, 2, 3, end); */
        animation-fill-mode: forwards;
        animation-play-state: running;
        animation-timing-function: ease;
        animation-direction: alternate;
        animation-duration: 20s;
}

.about-kartinka1 img {
    height: 100%;
    width: 23vw;
    float: left;
    object-fit: cover;
	}
	
@keyframes slideabout1 {

    /* Calculate the margin-left for 
    each of the slides */
    0% {
        margin-left: 0px;
    }

    50% {
        margin-left: calc(-23vw * 1);
    }

    100% {
        margin-left: calc(-23vw * 2);
    }
}

.about-blok1 .tekst1 {
    font-family:Verdana, Geneva, sans-serif;
	font-size:0.85rem;
	margin-left:30vw;
}	

.tekst1 {
		font-family:Verdana, Geneva, sans-serif;
		font-size:14px;
		width:50%;
		max-height:200px;
		/* margin-left:5%; */
		display:inline-block;
		}

.tekst1 p {
		font-size: 90%;
		}

.tekst2 {
		font-family:Verdana, Geneva, sans-serif;
		font-size:14px;			
		width:50%;
		max-height:200px;
		margin-left: 10%;
		margin-top:2.5%;
		display:inline-block;
		}

.tekst2 p {
		font-size: 90%;
		}

.kartinka2 {
	height: calc(100vh* 0.30);
	vertical-align: top;
	width:20%;
	margin-left:4%;	
	display:inline-block;
		}

.kartinka2 img {
	height: 100%;
    object-fit: cover;
}
		
.footer {
	background-color: #336699;
	height: 5%;
    min-height: calc(100vh * 0.07);
    max-height: calc(100vh * 0.07);
	width: 100%;
	min-width: 100%;
	margin-bottom:0%;
	display: flex;
}

.adress {
		font-family:Verdana, Geneva, sans-serif;
		font-size:14px;
		color:#FFF;
		/* display:inline-block; */
		display: flex;
		align-items: center;
		margin-left:5%;
/*         margin-top:0.5%;
margin-bottom:0.5%; */
		width: 25%;
	}

.prava {
		font-family:Verdana, Geneva, sans-serif;
		font-size:14px;
		color:#FFF;
		/* display:inline-block; */
		/* margin-left:10%; */
		display: flex;
		align-items: center;
/*         margin-top:1%;
margin-bottom:1%; */
        /* vertical-align: middle;
                width: 25%; */
	}

.telefon {
		font-family:Verdana, Geneva, sans-serif;
		font-size:14px;
		color:#FFF;
		display: flex;
		align-items: center;
		/* margin-left:10%; */
/*         margin-top:1%;
margin-bottom:1%; */
        /* vertical-align: middle;
                width: 17%;
                transform: translateY(27%); */
	}

@media (max-width: 800px){
		.knopka1 {margin-left:13%;}
		.knopka2, .knopka3, .knopka4 {margin-left:2.5%;}
		.blok1, .blok2, .blok3 { margin-left:7%; width:25%; height:90%;}
		.adress { margin-left: 3%; font-size: 10px; display: inline-block; vertical-align: top;}
		.prava { /*margin-left: 7%;*/ font-size: 10px; display: flex; /*vertical-align: top;*/}
		.telefon { /*margin-left: 7%;*/ font-size: 10px; display: flex; /*vertical-align: top;*/}
		}

@media (max-width: 500px){
		.blok1, .blok2, .blok3 {width:70%; height:60%; margin-left:15%; margin-right:15%; margin-top:0%; margin-bottom:0%;}
		.kontent {height:auto; margin-bottom:2%; margin-top:2%;}
		.tekst1, .tekst2, .tekst3 {margin-bottom:5%; }
		.uslugi-kontent {height: fit-content;}
		.uslugi-blok1, .uslugi-blok2, .uslugi-blok3 {width: fit-content; margin-bottom: 1%; height: auto;}
		.uslugi-tekst1, .uslugi-tekst2, .uslugi-tekst3 {font-size: 10px; text-justify: auto; text-align: -webkit-auto; margin-bottom: 5%;}
		.knopka1, .knopka2, .knopka3, .knopka4 {width: fit-content;}
		.knopka2, .knopka3, .knopka4 {margin-left:3%;}
		.kartinka1, .kartinka2, .tekst1, .tekst2 { width: 90%; margin-left: 2%; font-size: 10px;}
		.logo {height:1%; margin-left:1%;}
		.header {height:10%;}
		.prava, .telefon { width:fit-content;}		
		.adress { margin-left: 3%; font-size: 10px; display: inline-block; vertical-align: top;}
		.prava { font-size: 10px; display: flex;}
		.telefon { font-size: 10px; display: flex;}
		}