@font-face {
	font-family: 'ALSFinlandiaScript'; 
	src: url(../fonts/ALSFinlandiaScript/ALSFinlandiaScript.otf); 
}


@font-face {
	font-family: 'Rukopis'; 
	src: url(../fonts/Rukopis/Rukopis.ttf); 
}


@font-face {
	font-family: 'Slovic'; 
	src: url(../fonts/Slovic/Slovic_Demo_VarGX.ttf); 
}


@font-face {
	font-family: 'DushaV5Regular'; 
	src: url(../fonts/DushaV5Regular/DushaV5Regular.ttf); 
}

@font-face {
	font-family: 'Dudka'; 
	src: url(../fonts/Dudka/DudkaRegular.ttf); 
}





:root {
  --color-fon: rgba(250,250,255,1.0);

/*  --color-block: rgba(14,41,75,1.0);
  --color-add: rgba(230, 230, 230,1.0);
	--border-color: rgba(29,30,51,1.0);
  */

  --color-block: rgba(250, 250, 250, 1.0);
  --color-add: rgba( 0,49,83,1.0);
  --color-border: rgba(14,41,75,1.0);
  --color-button: rgba(204,85,0,1.0);


  
  --border-type: solid;
  --border-thick: 2px;
  --border-thick-720: 1px;
  --border-radius: 4px;
  --font-size-text: 20px;
  --font-size-h1: 1.6em;
  --font-size-h2: 1.2em;
  --font-size-h3: 1.1em;
    --icon-size: 2em;  
}




body {
	margin: 0; 
	background-color: var(--color-fon); 
	box-sizing: border-box; 
	font-family: 'Dudka', 'Arial', 'Verdana', sans-serif; 
	font-size: var(--font-size-text); 
}

h1 {
	font-size: var(--font-size-h1);
/*	text-transform: uppercase; */
	padding: 0;
	margin: 0;
}

h2 {
	
	font-size: var(--font-size-h2);
	padding: 0;
	margin: 0;
	text-align: center;
	margin-top: 0.2em;
	margin-bottom: 0.2em;
/*	
  background-color: var(--color-add);*/
	color: var(--color-add);
	padding: 0.2em;
}


h3 {
    /* text-align: center; */ 
}


h4 {
    text-align: center; 
}


/* Оформление статей Начало*/
.p-text {
    text-align: justify;
    line-height: 1.5em;
    text-indent: 2em;
}

.div-text {
    margin-top: 1.5em;
}


.p-center {
     text-align: center;
}

.t-table {
    border: 0; 
}

.n-table {
    vertical-align: top;
    padding-top: 0.2em;
}

.n-table span{
    display: block;
    background-color: orange;
    padding: 0.2em;
    width: 90%;
}

.m-table {
    line-height: 1.5em;
    text-align: justify;
}

.p-image {
    width: 100%;
}


.pn-image {
    width: 100%;
}


.a-div {
    border-bottom: 2px solid #008080;
    text-decoration: none;
    color: #008080;
}


.markers-1 {
	margin: 0 0 20px 14px;
	padding: 0;
}

.markers-1 li {
	list-style-image: url(../../img/marker-1.png);
	margin: 7px 0;
	margin-left: 2em;
	padding-left: 1em;
}

.orange {
    /* position: relative; */
    /* width: 98%; */
    /* left: 0; */
    /* top: 0.1em; */
    /* font-family: 'Slovic'; */
    font-size: var(--font-size-h1);
    /* color: var(--color-block); */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9), 2px 2px 4px var(--color-add);
    letter-spacing: 0.1em;
    padding: 0;
    margin: 0;
    color:  #67ada9;
}

/*Таблица простая Начало*/
.l-table {
	width: 100%;
	margin-bottom: 20px;
	border: 5px solid #fff;
	border-top: 5px solid #fff;
	border-bottom: 3px solid #fff;
	border-collapse: collapse; 
	outline: 1px solid orange;
	background: #fff;
	/* font-size: smaller; */ /* Включаем режим уменьшенного шрифта. */
	
}

.l-table th {
	font-weight: bold;
	padding: 7px;
	background: #ffd300;
	border: none;
	text-align: left;
	border-top: 3px solid #fff;
	border-bottom: 3px solid #ffd300;
}

.l-table td {
	padding: 7px;
	border: none;
	border-top: 3px solid #fff;
	border-bottom: 3px solid #fff;
	font-size: 0.6em;
}

.l-table tbody {
    background: #f8f8f8;
}

/*Таблица простая Конец*/

/* Оформление статей конец*/

.contact {
/*	display: block;*/
	text-decoration: none;
	color: black;
	border-bottom: 2px solid black;
	line-height: 2em;
}


/* Стиль h2 начало */

.header-h2 {
    position: relative;
    text-align: center;
    margin-bottom: 1.2em;

  }
  .header-h2 h2 {
  	
    position: relative;
    display: inline-block;
    background: #fff;
    margin-bottom: 0;
    padding: 0.5rem 1rem;
    border-bottom: .125rem solid MediumSeaGreen;
    font-size: 1.25rem;
    text-transform: uppercase;
    color: MediumSeaGreen;
  }
  .header-h2 h2::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1.25rem;
    transform: translateX(-1.25rem);
    border-top: 1.25rem solid MediumSeaGreen;
    border-left: 1.25rem solid transparent;
    border-right: 1.25rem solid transparent;
  }
  .header-h2 h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1.125rem;
    transform: translateX(-1.25rem);
    border-top: 1.25rem solid #fff;
    border-left: 1.25rem solid transparent;
    border-right: 1.25rem solid transparent;
  }



h3 {
	font-size: var(--font-size-h2);

	padding: 0;
	margin: 0;
/*	font-family: 'CoFoGothic';*/

}


.wrapper {
  display: flex; 
  flex-direction: column;
  width: 96%; 
  margin: 2% auto; 
  box-sizing: border-box;
  font-size: var(--font-size-text);
/*  align-items: center;*/
}


header {
	background-color: var(--color-block);
	border-radius: var(--border-radius);
/*	padding: 2%; */

}


main {
	padding: 2%;
/*	border: 1px solid green;*/
}


footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
/*	background-color: #67ada9;*/
border-top: 2px solid #67ada9;

}


video {
	width: 100%;
	margin-top: 1.5em;
	border-bottom: 4px solid silver;
	border-top: 4px solid silver;
}


.footer-column {
	margin-top: 1em;
	width:100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	border-bottom: 2px solid #67ada9;
}

.footer-item {
	width: 100%;
}


.footer-h {
/*	text-align: center;*/

}

.logo {
  width: 13em; 
  margin-right: 0; 
}

/* Слоган на картинке */
.title-dop {
	position: relative;
	width: 98%;
	left: 0;
	top: 0.1em;
/*	font-family: 'Slovic'; */
	font-size: var(--font-size-h2);
	color: var(--color-block);
	text-shadow: 1px 1px 2px black, 2px 2px 4px var(--color-add);
	letter-spacing: 0.1em;
	padding:0;
	margin:0;
}

.button-menu {
	width: var(--icon-size); 
}



.header-top {
	/* display: flex; */ 
	/* justify-content: space-between; */
	/* flex-wrap: wrap; */
	margin-top: 2%;
	margin-bottom: 1vh;
	box-sizing: border-box;
}


/* 1 */
.header-top-tele {
	position: absolute;
	width: 10%;
	z-index: 1;
	top: 2em;
	left: 3%;
/*	padding: 2px;*/
}


/* 2*/
.header-top-logo {
	position: absolute;
	width: 50%;
	top: 15px;
	right: 29%;
	text-align: center;
	z-index: 1;

}

/* 3 */
.header-top-menu {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
	width: 100%;
}

.header-center {
		height: 12em; /*Ажаптируем страницу по высоте окна браузера*/
		background: var(--color-block) url("../img/img-title-2.png") center center no-repeat;
		border: var(--border-type) var(--color-fon) var(--border-thick);
		border-radius: var(--border-radius);
/*	background-image: url("img-title.png");*/
		background-size: cover; 
		margin-bottom: 1vh;
}

.header-bottom {
	display: flex;
	flex-wrap: wrap; 
	color: var(--color-fon);
	margin-top: 0.5em;
/*		align-items: center;*/
	justify-content: center;
/*	align-content: center;*/
}


.tfon {
	justify-content: left;
}

#button-close {
	display: none;
}

.contact-form {
	display: flex; 
	flex-direction: column;
	width: 86%;
	margin-bottom: 1em;
}

.contact-edit, .contact-label, .contact-area {
	width: 100%;
	height: 2em;
	margin-bottom: 5px;
	color: var(--color-add);
	background-color: var(--color-block);
	font-family: 'Arial', 'Verdana', sans-serif; 
	font-size: var(--font-size-h2);
	border: var(--border-type) var(--color-border) var(--border-thick);
	border: var(--border-type) #547b80 var(--border-thick);
	border-radius: var(--border-radius);
/*	padding-left: 5px;*/
/*	border: solid 2px white;*/

}

.contact-area {
	width: 100%;
	height: 3em;
/*	padding-top: 5px;*/
  font-family: 'Dudka', 'Arial', 'Verdana', sans-serif; 
}

.contact-label {
	border: none;
	margin-top: 6px;
	font-family: 'Dudka', 'Arial', 'Verdana', sans-serif; 
	padding-left: 0.5em;
	height: 1em;

}


.otvet {
	width: 100%;
	color: #547b80;
	padding-top: 1em;
	padding-bottom: 1em;
}

.contact-edit::placeholder, .contact-area::placeholder{
	font-family: 'Arial', 'Verdana', sans-serif; 
	font-size: var(--font-size-text);
	color: var(--color-add);	
	color: #547b80;
	font-family: 'Dudka', 'Arial', 'Verdana', sans-serif; 

}

.contact-button {
	width: 102%;
	height: 2.2em;
	margin: 0;
	font-family: 'Arial', 'Verdana', sans-serif; 
	font-size: var(--font-size-h2);
/*	color: var(--color-add);*/
	color: white;
	font-weight: bold;
/*	border: var(--border-type) var(--color-button) var(--border-thick);*/
	border: none;
	border-radius: var(--border-radius);	
/*	background-color: var(--border-color);*/
	background-color: MediumSeaGreen;
	text-shadow: 1px 1px 1px var(--color-add);
/*	box-shadow: 4px 4px 4px var(--color-add);*/
	font-family: 'Dudka', 'Arial', 'Verdana', sans-serif; 
	letter-spacing: 0.1em;
	background-color: #67ada9; /* Цвет фона кнопки */
	border-bottom: 4px solid #547b80; /* Линия снизу */
}


.header-bottom a {
	width: 87%;
	text-decoration: none;
	font-size: var(--font-size-h2);
/*	color: var(--color-add);*/
	color: white;
/*	background-color: var(--color-block);*/
/*	background-color: MediumSeaGreen;*/
/*	border: var(--border-type) var(--color-button) var(--border-thick);*/
	border: none;
	font-weight: bold;
	text-align: center;
	padding:  0.6em 0 0.2em 0 ;
	margin-left: 7%;
	height: 1.2em;
	padding-top: 0.5em 0;
	text-shadow: 1px 1px 1px var(--color-add);
/*	box-shadow: 4px 4px 4px var(--color-add);*/
	font-family: 'Dudka', 'Arial', 'Verdana', sans-serif; 
	letter-spacing: 0.1em;
		background-color: #67ada9; /* Цвет фона кнопки */
	border-bottom: 4px solid #547b80; /* Линия снизу */
}


/* Меню начало 3 */
.button {
    text-align: right;
    width: 10%;
    cursor: pointer;
	/* justify-content: flex-end; */
	/* align-items: flex-end; */
}

.button:hover,
.button:focus-visible {
/* background-color: #f5cac3; */
}

.menu {
	width: 100%;
	background-color: var(--color-block);
    overflow: hidden;
    line-height: 0;
    transition: line-height 0.5s, color 0.5s;

}


.header-top-menu ul {
    display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
/*	 border: 1px solid green; */
}

.menu-item {
  overflow: hidden;
}

.menu-link {
    display: block;
    padding: 0.5lh 0;
    text-align: center;
    text-decoration: none;
    font-size: var(--font-size-text);
    color: var(--color-add);	
}

.menu-link:hover,
.menu-link:focus-visible {
/*  background-color: #f5cac3;*/
}

.button.active ~ .menu {
    line-height: 1.2;

}




/* Меню конец */

/* Преимущества 1 начало*/


.benefit {
	display: flex;
	justify-content: center;
	width: 100%;
	flex-wrap: wrap;
	margin-top: 2%;
}

.benefit-item {
	display: flex;
	width: 100%;

/*	border: solid white 1px;*/
}

.benefit-img {
	width: 5em;
	height: 5em;
	margin: 0.5em;
	border-radius: 50%;
	background-color: var(--color-block);
	border: var(--border-type) var(--color-add) var(--border-thick);
}

.benefit-block {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.benefit-р3 {
	font-size: var(--font-size-h2);
	color: var(--color-add);	
}


.benefit-txt {
	font-size: var(--font-size-text);
	color: var(--color-add);	
}


/* Преимущества 1 конец*/


/* Проекты начало */

.projects {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content: space-around;
	margin-top: 1.5em;
}


.project-item {
	display: flex;
	position: relative;
	width: 96%;
	border-radius: var(--border-radius);
	padding: 5px 0;
}


.project-item-2 {
    display: flex;
    flex-direction: column;
    height: 17em;
    width: 96%;
    margin-bottom: 1em;
}

iframe {
    height: 15em;
    width: 100%;
}

.pr-img {
/*	display: flex;*/
	width: 100%;
	height: 100%;
/*	flex-direction: column;*/

}

.projects h3 {
	font-size: 1em;
	text-align: center;
	color: var(--color-block);
	text-shadow: 4px 4px 4px var(--color-add);
	letter-spacing: 0.1em;
}

.project-content {
	width: 50%;
	font-size: 0.9em;
/*  border: 1px solid orange;*/
  border-radius: var(--border-radius);
  position: absolute;
 /* Рамка углами */
  bottom: 10px;
  text-align: center;
  left: 5px;
  background-color: rgba(125, 125, 125, 0.5);
  border: 2px  var(--color-block) solid; 
  padding: 5px;
  height: 80px;
	--s: 20px; /* size of the corners */
	mask: 
	conic-gradient(#000 0 0) content-box,
    conic-gradient(at var(--s) var(--s),#0000 75%,#000 0) 
    0 0/calc(100% - var(--s)) calc(100% - var(--s));
}

.prct-s {
    height: 120px;
    width: 60%;
}

.prct-s-2 {
    height: 100px;
    width: 60%;
}

.project-cell-title {
  text-align: center;
	color: var(--color-block);
	text-shadow: 4px 4px 4px var(--color-add);

}

.project-button {
	border: none;
	color: white;
/*	background-color: var(--color-add);*/
	background-color: #474A51;
	border: 1px  var(--color-block) solid; 
	width: 96%;
	padding: 8px 0;
	border-radius: var(--border-radius);

}


/* Проекты конец */

.footer-text-1 {
    margin: 0.7em 0;
}

.footer-text-2 {
    margin-bottom: 0.3em;
}



.footer-date {
	width: 100%;
	text-align: center;
}

@media screen and (min-width: 520px) {

	.wrapper {
/*		margin: 1% auto;*/
/*		width: 98%; */
	}

	.header-top {
/*		margin: 0.5em;*/
	}

	.header-top-tele {
/*		left: 4.5%;*/
	}

	.header-center { /* Фоновое изображение высота */
		 height: 13em; 	
	}
	
	.contact-form {
/*		flex-direction: row;*/
/*		flex-wrap: wrap;*/
/*		justify-content: space-between;*/
/*		width: 100%;*/
	}

	.contact-edit {
		/* height: 2em; */
	}
	
/*	.contact-edit, .contact-button  {
		width: 48%;
		margin: 0.5em 0;
	}*/
	
	.contact-label {
/*	    height: 1em;*/
	}

	.contact-button {
/*	  height: 2em;*/
	}

	.contact-area {
		height: 3em;
/*		width: 100%;*/
/*		margin: 0.5em 0;*/
	}

	.header-bottom a {
/*		padding: 0.5em 0;*/
/*		height: 1em;*/
	}


.l-table td {
	font-size: 0.8em;
}




}


@media screen and (min-width: 600px) {
	.header-top-tele {
/*		left: 8%;*/
	}

	.header-center {
/*		height: 10em; }*/
}




}

@media screen and (min-width: 640px) {
    
    body {
		background-color: var(--color-block);
	}

    
    .wrapper {
		
		/* width: 90%; */ 
		/* margin: 1vh auto ; */ 
	}



	
	header {
/*	    padding: 0.5vh 1em;*/
/*	    border-radius: 0;*/
	}
	
    .logo {
      width: 14em;
    }
    
    .header-top-logo {
        right: 25%;
    }


  	.header-top-tele {
/*		left: 13%;*/
	}


	.header-bottom a {
		margin-left: 5%;
	}


	.contact-form {
		width: 90%;
	}



	.contact-form {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}

    .contact-label {
/*	    height: 7vh;*/
	}
	
	.contact-edit {
		width: 48%;
        /* height: 2em; */
	}


	.contact-button  {
		width: 48%;
/*		margin: 0.5em 0;*/
	}


	   .header-bottom a {
    	width: 42%;
    }
	
	.contact-button {
/*	    height: 8.2vh;*/
	}


    .header-bottom a {
		/*padding: 1.2vh 0 0 0;
		height: 6vh;*/
	}


	.contact-area {
/*        height: 12vh;*/
	}


		/* Преимущества 1 начало*/

	.benefit-item {
	
/*		width: 48%;*/
	
	}

	 /* Преимущества 1 конец*/


.l-table td {
	font-size: 1em;
}

}


@media screen and (min-width: 720px) {

	
	.header-center { /* Фоновое изображение высота */
		 height: 16em; 	
	}

	.project-item {
		width: 48%;

	}


.footer-item {
	width: 48%;
}


.p-image {
    width: 60%;
}




}


@media screen and (min-width: 960px) { 

	.header-center { /* Фоновое изображение высота */
		 height: 20em; 	
	}

	.title-dop {
	
	width: 98%;
	left: 0;
	top: 0.2em;	
	font-size: var(--font-size-h1);
}


	.header-top-tele {

	width: 10%;

	top: 3em;
/*	left: 4%;*/
/*	padding: 2px;*/
}

.footer-item {
	width: 33.3333%;
}

.project-item-2 {
    width: 46%;
    height: 19em;


}

iframe {
    height: 17em;

}
 
.pn-image {
    width: 70%;
}


}


@media screen and (min-width: 1220px) { 
	.header-center { /* Фоновое изображение высота */
		 height: 23em; 	
	}

	.header-center { /* Фоновое изображение высота */
		height: 25em;	
	}

	.title-dop {
	
	width: 98%;
	left: 0;
	top: 0.3em;	
	font-size: var(--font-size-h1);
	}



	.header-top-tele {

	width: 10%;

	top: 2em;
	left: 3%;
/*	padding: 2px;*/
}




}


@media screen and (min-width: 1440px) { 

	body {
		background-color: var(--color-block);
	}


	.header-center { /* Фоновое изображение высота */
		height: 30em;	
	}
	

	.wrapper {
		margin: auto 10%;
		width: 80%; 
	}
	
	.header-top-menu ul {
	    flex-direction: row;
	    justify-content: center;
    }
    
    .header-top-menu li {
	    margin: 0 10px;
    }/*


    	/* Преимущества 1 начало*/

	.benefit-item {
	
		width: 32%;
	
	}

	 /* Преимущества 1 конец*/



  
	.header-top-tele {

	width: 10%;

	top: 1.5em;
	left: 10%;
/*	padding: 2px;*/
}


.project-item {
		width: 32%;

	}

}