:root{
    --white: #f9f9f9;
    --black: #24252b;
    --grey: #81858a;
	--section-bg: #fff;
	--wrap-bg:#f3f3f3;
	--radius: 10px;
	--f-normal: 0.9em;

}
/* Reset */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}






h1 {
	color: #24252b;
    font-size: 1.2em;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
	/* font-weight: bold; */
	font-family: cursive, serif;
	font-weight: normal;
}
h2 {
	display: block;
	font-size: 1.2em;
	margin-block-start: 0.83em;
	margin-block-end: 0.83em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold;
	font-family: "Arial", serif;
}
h3 {
	color: var(--black);
    font-size: 1.2em;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
	font-family: 'Trebuchet MS', 'Lucida Sans', Arial, sans-serif, serif;
	font-weight: normal;
	text-align: left;
}
h4 {
	color: #24252b;
    font-size: 1.2em;
    margin-block-start: 0.2em;
    margin-block-end: 0.2em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
	font-family: cursive, serif;
	font-weight: bold;
	text-align: center;
}
h5 {
	display: block;
	font-size: 1em;
	margin-block-start: 0.5em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	color: var(--black);
	font-weight: normal;
	font-family: 'Trebuchet MS', sans-serif;
	/* visibility: hidden */
}


.f-section {
	color: var(--black);
    font-size: 1.2em;
	max-width: fit-content;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;

	font-family: palatino, cursive, serif;

	font-weight: bold;
	text-align: center;
	justify-content: center;
	border-bottom: 1px solid silver;
	display: inline;
	padding: 10px 0 3px 0;
	margin-bottom: 5;

/* Shadow */


}

.f-form-mask {
	color: var(--black);
    font-size: 1.2em;
    margin-block-start: 0em;
    margin-block-end: 0m;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
	font-family: cursive, serif;
	font-weight: bold;
	text-align: center;

/* Shadow */




}


body{
    background-color: var(--white);
    font-family: Helvetica, sans-serif;
    background-color: var(--wrap-bg);
	line-height: 1.5;
}

a{
    text-decoration: none;
}
ul{
    list-style: none;
}

/* Header */



/* ---------------- Header ----------------------*/
.header{
    background-color: var(--black);
    box-shadow: 1px 1px 10px 0px var(--grey);
    position: sticky;
    top: 0;
    width: 100%;
	
	height: fit-content;
	display: flex;
	font-family: "Comic sans MS", cursive, Arial, Helvetica, sans-serif;
}

/* Logo */
.header-logo {
    display: inline-block;
	width: fit-content;
    height: inherit;
    overflow: hidden;
	background-color: var(--black);
}


.header-logo ul li {
	float: left;
    width: fit-content;

}

.logo-text {
	max-width: 100%;
	text-align: left;
	padding: 2px 0 2px 15px;
	color: var(--white);
	vertical-align: middle;
	font-size: 1.9em;
	font-family: "Comic sans MS";
	overflow: hidden;
}

.header-logo ul li a img{
	max-width: fit-content;
}

.logo-img{
	height: 50px;
	width: 100%;
    margin-left: 5px;
    display: block;
    overflow: hidden;
}



/*----------------------------- Lang ----------------------------*/

.space {
	display: inline-flex;
	min-width: max-content;
}


.dropbtn {
   padding: 5px;
   cursor: pointer;
}

.dropdown {
   position: relative;
   display: inline-block;
	margin-left: auto;
	margin-right: 0;

	padding-right: 5px;
}

.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   width: 140px;
}

.dropbtn
{
 background: url('../img/icon/LT-icon.png') no-repeat left center;
 padding-left: 25px;
 max-width: fit-content;
 color: var(--white);
}

.dropbtn::after {
   background: rgba(0, 0, 0, 0) url('../img/icon/arrow.png') no-repeat scroll center center;
   content: "";
   height: 16px;
   position: absolute;
   right: 0;
   top: 7px;
   width: 16px;
}

.dropdown-content a:first-child
{
 background: url('../img/icon/RU-icon.png') no-repeat left center;
}

.dropdown-content a:nth-child(2)
{
 background: url('../img/icon/LT-icon.png') no-repeat left center;
}

.dropdown-content a:last-child
{
 background: url('../img/icon/EN-icon.png') no-repeat left center;
}

.dropdown-content a {
   color: black;
   padding: 2px 0 2px 25px;
   text-decoration: none;
   display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
   display: block;
}



































/* ---------------- Footer ----------------------*/

.end{
	display: block;
	padding-bottom: 5px;

    background-color: var(--section-bg);
	border-radius: var(--radius) ;

    width: 100%;
	height: 100%;
	overflow: hidden;
	box-sizing: border-box;
	text-align: center;
}

.footer{
	padding: 5px;
	display: flex;
    background-color: var(--section-bg);

	overflow: hidden;
    width: 100%;
	height: 100%;
    justify-content: center;
}

/*
.f-left{
	vertical-align: center;
    padding-left: 2%;
    padding-right: 2%;
	width: fit-content;
	height: 100%;
	text-align: left;
	display: inline-block;
	overflow: hidden;
}
*/

.f-left{
	vertical-align: center;
	padding: 5px;
    padding-left: 1%;
    padding-right: 1%;
	width: fit-content;
	height: 100%;
	display: inline-block;
	text-align: center;
	color: var(--grey);
	overflow: hidden;
}

.f-right{
	vertical-align: center;
	padding: 5px;
    padding-left: 1%;
    padding-right: 1%;
	width: fit-content;
	height: 100%;
	display: inline-block;
	text-align: center;
	color: var(--grey);
	overflow: hidden;
}

.rekvizity{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 0.9em;
	color: var(--grey);
	margin-block-start: 0.2em;
	margin-block-end: 0.2em;
    width: 100%;
	height: 100%;
}

.f-logo-text{
	vertical-align: center;
	font-size: 1em;
	text-align: center;
	margin-block-start: 0.2em;
	margin-block-end: 0.2em;
	font-weight: normal;
	font-family: cursive, sans-serif;
	color: var(--grey);
}




/*<!-- Main content -->*/

.wrap{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 0;

	padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;

	max-width: 100%;


	background: var(--wrap-bg);

	overflow: hidden;
	max-width: 1080px;
	align-content: center;
	display: block;

}














/* Форма обратной связи */














/* ---------------- div Container ----------------------*/
.Container {
	margin: 0px auto 0px auto;
	padding:0px;
	display: flex;
	justify-content: center;
	width:100%;
	height: 100%;
	box-sizing: border-box;
}



/* ---------------- Каталог ----------------------*/
	.Catalog {
		background-color: var(--section-bg);
		border-radius: var(--radius) ;
		margin: 25px auto 5px auto;
		padding:20px;
		display: block;

		justify-content: center;

		width:100%;
		height: 100%;
		box-sizing: border-box;
		text-align: center;
		overflow: hidden;

		border-bottom: 1px solid silver;
	}

	.Catalog-wrap {
		overflow: hidden;
	}


	.Catalog ul li {
        float:left;
		width: 18%;
		max-height: 100%;

		margin: 1% 1% 1% 1%;
	}

	.Catalog ul li a img{
		max-width: 100%;
		max-height:inherit;
	}

	.Catalog li {
		background-color: var(--wrap-bg);
		border-top-right-radius: 3% ;
		border-top-left-radius: 3% ;
		display: block;
		box-sizing: border-box;
	}

	.Catalog ul {
		max-height:fit-content;
		align-content: space-between;
	}


		.card-a {
			/* background-color:yellow; */
			display: block;
			box-sizing: border-box;
			overflow: hidden;

		}




		.card-text{
			display: contents;
			overflow: hidden; /* Скрываем всё за контуром */
			height: auto;
		}

		.card-img {
			/* background-color:yellow; */
			margin: 1px auto 1px auto;
			padding:1px;
			display: block;
			justify-content: center;
			box-sizing: border-box;
			border-top-right-radius: 3% ;
			border-top-left-radius: 3% ;
			overflow: hidden;
			max-height:inherit;

		
		}

		.img-wrap{
			display: block;
			overflow: hidden; /* Скрываем всё за контуром */

		}
		
		.img-wrap img {
 			transition: 1s; /* Время эффекта */
  			display: block; 
		}
		.img-wrap img:hover {
  			display: block;
            transform: scale(1.2) ; /* Увеличиваем масштаб */
		}





		


	


/*--------------------   FAQ   ------------------*/


/* body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;

    background-color: #0e0e15;
} */

/* *,
*:before,
*:after {
    box-sizing: border-box;
} */



/* Faq */

.faq {
	background-color: var(--section-bg);
	border-radius: var(--radius) ;
	margin: 25px auto 25px auto;
	padding:20px;
	display: block;

	justify-content: center;

	width:100%;
	height: 100%;
	box-sizing: border-box;
	text-align: center;
	overflow: hidden;

	border-bottom: 1px solid silver;
}

.faq-wrap {
	overflow: hidden;
	box-sizing: border-box;
	margin-top: 10px;
}

.faq-header{
background-color: transparent;
max-width: 100%;
margin-bottom: 25px;
display: block;
box-sizing: border-box;
}

.faq-h-top{
display: block;
max-width: 100%;
color: var(--black);
background-color: var(--section-bg);
padding: 10px;
justify-content: center;
overflow: hidden; 



}

.faq-h-bot{
	display: flex;
    padding: 10px;
	padding-top: 15px;	
	height: auto;
	max-width: 100%;
	justify-content: space-between;
	vertical-align: middle;
    overflow: hidden;
	box-sizing: border-box;

}


/* akkordeon */
.faq-acc {
    max-width: 80%;
    margin: 25px auto 25px auto;
	padding: 5px;
	font-size: 1em;
    line-height: 2;
}

.faq-item {
    margin-bottom: 15px;
    border: 1px solid silver;
	border-radius: var(--radius) ;
}

.faq-title {
    display: block;
    padding: 10px 30px;
    position: relative;

    color: var(--black);
    cursor: pointer;
	 cursor: ;

    transition: background-color .5 ease-out;

}


.faq-title:after {
    content: "";
    display: block;

    border-style: solid;
    border-width: 8px 5px 0 5px;
    border-color: var(--white) transparent transparent transparent;

    position: absolute;
    top: 50%;
    right: 15px;

    transform: translateY(-50%);
}

.faq-title:hover {
    background-color: var(--grey);
	border-radius: var(--radius);
	color: var(--white);
}

.faq-input {
    width: 0;
    height: 0;

    -webkit-appearance: none;
    appearance: none;

    position: absolute;
}


.faq-input:checked ~ .faq-title {
    background-color: var(--black);
	border-radius: var(--radius);
	color: var(--white)
}

.faq-input:checked ~ .faq-title:after {
    border-style: solid;
    border-width: 0 5px 8px 5px;
    border-color: transparent transparent var(--white) transparent;
}

.faq-input:checked ~ .faq-text {
    display: block;
	background-color: var(--wrap-bg);
}

.faq-text {
    display: none;
    padding: 10px 15px;

    color: var(--black);
    font-size: 1em;

}
































	
	/* ---------------- Order ----------------------*/
	.Leed {
		background-color: var(--section-bg);
		border-radius: var(--radius) ;
		margin: 25px auto 5px auto;
		padding:20px;
		display: block;

		justify-content: center;

		width:100%;
		height: 100%;
		box-sizing: border-box;
		text-align: center;
		overflow: hidden;

		border-bottom: 1px solid silver;
	}
	
	.leed-wrap {
		overflow: hidden;
		box-sizing: border-box;
		margin-top: 10px;
	}




/* Форма обратной связи */


.leed-form-wrap {
    overflow: hidden;
	width: 100%;
	padding-top: 0px;
	display: flex;
	justify-content: space-evenly;
	align-content: center;
}

.leed-form {
	background-color: var(--wrap-bg);
	width: 100%;
    border-radius: var(--radius);
	display: inline-block;
	padding: 20px;
	margin-top: 10px;
	box-sizing: border-box;
	overflow: hidden;
	max-width: 940px;
	align-content: center;
}
.leed-form-contact {
	overflow: hidden;
	display: inline-block;
	text-align: right;
	width: 30%;
	text-align: right;
	padding: 20px;
	max-width: 300px;



}

.leed-form-msg {
	overflow: hidden;
	display: block;
	justify-content: left;
	width: 70%;
	min-width: 70%;;
	justify-content: left;
	height: fit-content;
	padding: 20px;
}


.txt {
	display: inline-block;
	color: #676767;
	max-width: 100%;
	margin-bottom: 10px;
	border: 1px solid #ccc;
	padding: 5px 9px;
	font-size: 15px!important;
	line-height: 1.4em;
	overflow: hidden;

}

.txtarea {
	display: inline-block;
	color: #676767;
	width: 100%;
	min-width: 200px;
	margin-bottom: 0;
	border: 1px solid #ccc;
	padding: 5px 9px;
	font-size: 15px!important;
	line-height: 1.4em;
	height: auto;
	min-height: 100px;
	text-align: left ;
	vertical-align: middle;

}

.txt:focus, .txtarea:focus {
	border-style: solid;
	border-color: #bababa;
	color: #444;
}

input.error, textarea.error {
	border-color: #973d3d;
	border-style: solid;
	background: #f0bebe;
	color: #a35959;
}

input.error:focus, textarea.error:focus {
	border-color: #973d3d;
	color: #a35959;
}

#send {
	color: var(--white);
	display: inline-block;
	cursor: pointer;
	padding: 5px 11px;
	font-size: 1.2em;
	border: solid 1px #F9F9F9;
	border-radius: 5px;
	background: var(--grey);

	width: fit-content;

	margin-top: 10px;
	margin-bottom: 5px;
	font-family: cursive;
	justify-content: center;
	align-content: center;

}

#send:hover {
	background: #979797;
}






/*Price oferta*/
.Price_oferta {

	padding: 20px 0 20px 0;
	margin: 0px 0 10px 0;

	display: flex;
	max-width:80%;
	height: 100%;
	box-sizing: border-box;
	justify-content: center;
	max-width: 100%;

	color: var(--black);
	background-color: var(--section-bg);
	border-radius: var(--radius) ;

	border-bottom: 1px solid silver;

}

/* Oferta*/
.akcija {
    color:peru;
	font-weight: bold;
}

	.price-text{
		display: inline-block;
		font-size: 1em;
		padding: 2px;
		width: auto;
		text-align: right;
		vertical-align: top;
	}
	.sketch-text{
		display: inline-block;
		font-size: 1em;
		padding: 2px;
		width: fit-content;
		text-align: right;
		vertical-align: top;
	}


	.akcija-text{
		display: inline-block;
		font-size: 1em;
		padding: 2px;
		width: auto;
		text-align: left;
		vertical-align: top;
	}



/* ---------------- MEDIA --------------------- */
/* Responsiveness */
/*  SmartPhone "S" - 320px
	SmartPhone "M" - 480px
	Tablet - 768px
	Laptop - 1024px
	Monitor "S" - 1280px
	Monitor "M" - 1600px
	Monitor "L" - 1920px
*/


/* ------------------------------------- */
/* Смена стиля цены за кв. метр */

@media  (max-width: 740px) {

    .Price_oferta{
        display: block;
        text-align: center;
    }

	.price-text {
		display: inline-block;
		width: fit-content;
		text-align: right;
	}
	.sketch-text {
		display: inline-block;
		width: fit-content;
		text-align: left;
	}
	.akcija-text{
		display: block;
		width: 100%;
		text-align: center;
	}

}






/* ------------------------------------- */
/* Смена стиля меню */

@media (min-width: 740px) {
    .nav{
        max-height: none;
        top: 0;
        position: relative;
        float: right;
        width: fit-content;
        background-color: transparent;
    }
    .menu li{
        float: left;
    }
    .menu a:hover{
        background-color: transparent;
        color: var(--grey);
    }
    .hamb{
        display: none;
    }
}


/* ------------------------------------- */

/* @media only screen and (max-width : 1280px),
only screen and (max-device-width : 1280px){

} */


/* Смена фото в галереии */

@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){

	.Catalog ul li {
		width: 23%;
    }
}



@media only screen and (max-width : 740px),
only screen and (max-device-width : 740px){
	.Catalog ul li {
		width: 30.6666%;
    }





    .f-mid{
        display: none;
    }
    .footer{
        display: flex;
        justify-content: center;
    }
    .footer .f-left {
        display: block;
        width: 50%;
    }
    .footer .f-right {
        display: block;
        width: 50%;
    }



/*         Adv           */


















	.leed-wrap {
		width: 98%;
	}
	.leed-q-a {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 10px;
		margin-top: 10px;
	}

	.leed-info {
		display: block;
		width: 100%;
		justify-content: center;
	}


	.leed-form-wrap{
		display: block;
		padding-top: 15px;
	}
	.leed-form-contact {
		width: 100%;
		padding: 10px;
		text-align: center;
	}
	.leed-form-msg{
		display: inline-block;
		align-content: center;
		width: 100%;
		padding: 10px;
		max-width: 500px;
	}

	.leed-form{
		padding: 10px;
	}












} 

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
	.Catalog ul li {
		width: 48%;
	}
    .footer{
        display: block;
        width: 100%;
    }

    .footer .f-left {
        text-align: center;
        display: block;
        width: 100%;
    }
    .footer .f-right {
        text-align: center;
        display: block;
        width: 100%;
    }
    .price-text .sketch-text .akcija-text {
		display: block;
		width: 100%;
		text-align: center;
	}




	.Price_oferta{
		display: block;

	}









} 


@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
	.Catalog ul li {
		width: 98%;
	}
}