@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');

::-webkit-scrollbar {
  width: 0px;
  background: rgba(255, 255, 255, 0.0);
}


body{
	background-color: #f2f4f5;
	color: #002f34;
	text-align: left;
	padding: 0px;
	margin: 0px;
	font-family: arial;
	width: 100vw;
	font-size: 1vw;
	font-weight: 700;
}



header{
	width: 100%;
	background-color: #002f34;
	padding-top: 0.5vw;
	padding-bottom: 5vw;
	z-index: 2;
}

img{
	object-fit: cover;
}

a{
	color: #002f34;
	text-decoration: none;
	font-weight: 700;
}

.footer_block a{
	color: white;
}



a:hover, button:hover, .menu a:hover, .menu-active a:hover, .menu button:hover, .menu form button:hover, .footer_block a:hover{
	color: #24e5db; 
}

a:active {
    color: blue;
}

input[type=file]{
	display: none;
}


button, textarea, select, span{
	background-color: white;
	border: 0.1vw gray solid;
	width: 100%;
	height: 3vw;
	margin-top: 1vw;
	margin-bottom: 1vw;
	color: #002f34;
	border-radius: 0.5vw;
	text-align: center;
	display: block;
}



textarea{
	height: 10vw;
	text-align: left;
}


button{
	background-color: #002f34;
	font-size: 1vw;
	color: white;
	font-weight: 700;
}

form{
	width: 30vw;
	margin-right: auto;
	margin-left: auto;
	font-family: 'helvetica';
	font-size: 1vw;
	padding: 2vw;
	background-color: white;
	border-radius: 1vw;
}

form span{
	display: none;
}

h2{
	text-align: left;
}

form img{
	width: 100%;
	height: auto;
	float: left;
}

form input{
	float: left;
}



.header{
	width: 98vw;
	padding: 1vw;
	float: left;
}


.indent{
	width: 100%;
	float: left;
	height: 7vw;
}


.logo{
	float: left;
	border-color: transparent;
	color: white;
	font-weight: 900;
}

.logo a{
	font-family: 'arial', sans-serif;
	font-size: 2vw;
	text-align: center;
	color: #24e5db;
	font-weight: 900;
}

.burger{
	height: 10vw;
	width: 10vw;
	border: none;
	float: right;
	position: relative;
	display: none;
	z-index: 2;
	margin-right: 0vw;
	margin-top: 0.2vw;
	margin-bottom: 0;
}

.burger span{
	position: absolute;
	width: 6vw;
	height: 0.5vw;
	background-color: white;
	left: 2vw;
}

.burger span:nth-child(1){
	transform: translateY(0) rotate(45deg);
}

.burger span:nth-child(2){
	opacity: 0;
}

.burger span:nth-child(3){
	transform: translateY(0) rotate(-45deg);
}

.header.open .burger span:nth-child(1){
	transform: translateY(-2vw);
}

.header.open .burger span:nth-child(2){
	opacity: 100;
}

.header.open .burger span:nth-child(3){
	transform: translateY(2vw);
}


.menu{
	position: absolute;
	right: 0vw;
	list-style: none;
	text-align: left;
	z-index: 999999;
	top: 0.5vw;

}

.menu ul, ul{
	float: left;
	list-style: none;
	padding: 0;
}

ul{
	background-color: white;
}

.menu ul{
	background-color: #002f34;
}


.menu ul li a{
	background-color: #001e23;
	width: 94%;
}



.menu li a {
	z-index: 2;
	margin: 0;
	padding-right: 1vw;
	padding-left: 1vw;
	float: left;
	height: 100%;

}

.menu li button{
	z-index: 2;
	float: left;
	border-radius: 0;
	height: 100%;
	border: none;
	background-color: #002f34;
}

.menu form{
	width: 10vw;
	background-color: #001e23;
	margin: 0;
	padding: 0;
	border-radius: 0;
}

.menu form input{
	z-index: 2;
	float: left;
	height: 2vw;
	margin-top: 1vw;
	border: none;
	color: #ffffff;
	border-radius: 0;
	padding-left: 1vw;
	background-color: #001e23;
	text-align: left;
}



.menu form button:hover{
	color: #24e5db;
}

.menu-active {
	display: block;
}

.menu a, .menu-active a, .menu button, .menu form button{
	border: none;
	float: left;
	color: white;
	margin: 0;
	width: auto;
	font-size: 100%;
	padding: 1vw;
	font-size: 1vw;
	text-align: left;
	margin-bottom: 0;
}

.menu li form button{
	background-color: #001e23;
}

#search_button{
	background-color: #002f34;
}





.menu ul span{
	background-color: transparent;  border: none;
}









.menu-active a{
	width: 80%;
	padding: 10%;
	padding-top: 1vw;
	padding-bottom: 1vw;

}


.search_form{
	width: 21vw;
	float: left;
}

.search_form input{
	float: left;
	height: 3vw;
	padding: 1.5vw;
	margin: 0vw;
	margin-right: 0.5vw;
}


.search_form button{


	float: left;
	border-radius: 0;
	background-color: #001e23;
}










.dropdown-menu {
    display: none;
}

.menu-active{
    display: block;
}


.dropdown-item, .menu form{
	float: left;
	width: 100%;
}

.dropdown-item ul{
	background-color: #001e23;
	width: 100%;
}

.dropdown-item a{
	background-color: #001e23;
	margin-top: 0;
	width: 100%;
	overflow: hidden;

}

.menu li form button{
	width: 100%;
}

.helptext {
  font-size: 0vw;
  color: white;
  font-weight: 100;
}

.helptext li, ul {
  font-size: 0vw;
  color: #dddddd;
  font-weight: 100;
}





.headline{
	width: 98vw;
	padding: 1vw;
	float: left;
	text-align: left;

}

.headline ol{
	padding-left: 0;
}

.headline ul{
	width: auto;
	background-color: transparent;
}

.headline li{
	background-color: transparent;
}



.headline a{
	float: left;
	margin-right: 1vw;
}

.headline li, .headline p, .headline ol, .headline h2{
	display: block;
	list-style: block;
	font-size: 1vw;
	float: left;
	width: 100%;
	background-color: transparent;
	color: #002f34;
}


.headline form input{
	width: 93%;
	margin-bottom: 2vw;
	margin-top: 1vw;
	border: 0.1vw solid #001e23;
	padding: 3%;
	border-radius: 0.1vw;
}


.menu img{
	height: 1vw;
	width: 1vw;
	object-fit: cover;
}


.headline ol{
	margin-bottom: 5vw;
	float: left;

}


.name_filter input, .value_filter button{
	width: 90%;
	padding: 0;
	margin: 0vw;
	height: 2vw;

}









.search_form_div{
	width: 16vw;
	margin: 1vw;
	float: left;

}

.search_form_div h3{
	color: white;
	text-align: left;
	padding-top: 2vw;
}

.search_form_div p{
	width: 100%;
	float: left;
	height: auto;
	margin: 0;
}

.search_form_div input{
	width: 5%;
	float: left;
}

.search_form_div a{
	background-color: #001e23;
	float: left;
	width: 75%;
}

.value_filter, .name_filter{
	float: left;
	width: 10vw;
	text-align: left;
}

.name_filter{
	width: 20vw;
}

.value_filter input{
	width: 4vw;
	padding: 0;
	margin: 0vw;
	height: 2vw;

}



.category_list{
	width: 80vw;
	padding: 1vw;
	text-align: center;
	margin-left: 9vw;
	margin-right: 9vw;
	float: left;
}




.indent{
	width: 100vw;
	height: 5vw;
	float: left;
}





.preview{
	width: 21vw;
	height: 40vw;
	padding: 1vw;
	margin: 1vw;
	float: left;
	text-align: left;
	background-color: white;
}

.preview h3{
	height: 3vw;
	overflow: hidden; 
}

.user_block, .message_block{

	width: 46vw; padding: 1vw;


	margin: 1vw;
	text-align: left;

	float: left;
	background-color: white;
}

.user_block img, .message_block img{
	width: 15vw;  height: 15vw; float: left; object-fit: contain;
}
.user_block_description, .message_block_description{
	width: 25vw; float: left; padding-left: 2vw; padding-right: 2vw;	
}

.message{
	width: 96vw;
	padding: 1vw;
	margin: 1VW;
	float: left;
}

.message img{
	width: 5vw;
	height: 5vw;
	object-fit: cover;
	float: left;
	border-radius: 50%;
}

.message_body{
	width: 70vw;
	float: left;
	padding: 2vw;
	margin: 1vw;
	background-color: white;
}

.preview img{
	width: 100%;
	height: 72%;
	object-fit: contain;
}

.post, .post_image, .post_cart{
	padding: 2vw;
	margin: 1vw;
	float: left;
	background-color: white;
	text-align: center;
}

.post_image{
	height: 40vw;
	margin: 0;
}


.post{
	width: 42vw;
	padding-left: 3vw;
	padding-right: 3vw;
	text-align: left;
	min-height: 40vw;

}



.post_image img, .post_image iframe{
	width: 44vw;
	height: 40vw;
	padding: 0;
	margin: 0;
	object-fit: contain;
}

.image {
    display: none;
    width: 45vw;
    margin-top: 15vw;
    height: auto;
    position: fixed;
    z-index: -1;
    transition: all 1s ease; /* Добавляем переход для всех свойств с продолжительностью 1 секунды */
}

.image.show {
    display: block;
    z-index: 2;
}














.image_in_list {
	width: 100%;
	height: 72%;
    height: auto;
    transition: all 1s ease; /* Добавляем переход для всех свойств с продолжительностью 1 секунды */
}

.image_in_list.show {
    display: block;
    position: fixed;
    z-index: 2;
}




.post_cart{
	width: 27.3vw;
	height: 18vw;
	text-align: left;
	float: left;
}




.parent_cart{
	width: 80vw;
	height: 17vw;
	float: left;
	background-color: white;
	margin-bottom: 2vw;
	text-align: left;
}


.parent_cart form{
	margin-top: 0;
	padding: 0;
	width: 100%;
}

.parent_cart input{
	width: 4vw;
	height: 2vw;
	margin: 0;
	padding: 0;
}

.parent_cart button{
	width: 5vw;
	height: 2vw;
	color: #002f34;
	background-color: white;
	border: none;
	margin: 0;
	padding: 0;
	text-align: left;
}




.parent_q{
	width: 38vw;
	float: left;
	margin-left: 1vw;
	margin-right: 1vw;
}

.cart, .description-cart, .total_description_cart, .description_quest{

	width: 13vw;
	background-color: white;
	float: left;
	text-align: left;
	padding: 1.5vw;
	margin-bottom: 2vw;
	font-size: 1.2vw;

}


.description-cart, .total_description_cart, .description_quest{
	height: 1.2vw;
}

.total_description_cart{
	width: 77vw;
}

.description_quest{
	width: 16vw;
}

.cart img{
	width: 13vw;
	height: 13vw;
	object-fit: cover;
}




.parent {
	width: 100%;
	padding: 0px;
	margin: 0px;
    overflow: hidden;
    overflow-x: scroll;
    white-space: nowrap;

}

.child {
    display: inline-block;
    vertical-align: top;
	width: 25vw;
	height: 45vw;
	padding: 0px;
	margin: 0px;

}

.message_form{
	width: 98vw;
	padding:1vw;
	bottom: 0;
	position: sticky;
	float: left;
	border-radius: 0;
	background-color: #ffffff;
}


.message_form input{

	width: 73.5vw;
	float: left;
	border-radius: 0;
}

.message_form button{
	width: 20vw;
	margin-left: 2vw;
	float: left;
	border-radius: 0;
}


.pagination{
	width: 95vw;
	padding: 2.5vw;
	margin: 0;
	float: left;
	text-align: center;
}

.pagination a{
	font-weight: 900;
	margin-left: 1vw;
	margin-right: 1vw; 
}


#filter_form{
	width: 90vw;
	margin-left: -100vw;
	padding: 5vw;
	background-color: #001e23;
	float: left;
	margin-top: 2.5vw; 
	z-index: 0;
}


#filter_form a{
	background-color: #001e23;
}

#filter_form input{
	background-color: white;
	color: gray;
}


#search_input{
	width: 70vw;
	padding: 1vw;
	background-color: white;
	float: left;
}

#search_button{
	width: auto;
	margin-top: 1vw;
	padding: 1.5vw;
	width: 15vw;
	text-align: center;
}



#myForm{
	border-radius: 0;
}


#myForm input, textarea{
	width: 95%;
	border-color: #002f34;
	padding: 2.5%;
	margin-bottom: 2vw;
}




.half{
	width: 50vw;
	float: left;
}

.footer_block{
	padding: 2vw;
	float: left;
	width: 20vw;
	height: 7vw;
}

.search_form_scroll{
	max-height: 32vw;
	overflow-y: scroll;	
}


.changeButton{
	margin-bottom: 2vw;
}


@media(max-width: 100vh){

	body{
		font-size: 4vw;
	}



	header{
		width: 100vw;
		height: 13vw;
		padding-top: 2vw;
		padding-bottom: 2vw;
	}



	h2{
		font-size: 5vw;
		padding-top: 5vw;
	}

	form{
		width: 80vw;
		padding: 4vw;
		font-size: 3vw;
		font-size: 2.5vw;
		border-radius: 1vw; 
	}


	input, button, textarea, select, span{
		height: 12vw;
		border-radius: 2vw;
		width: 98%;
		font-size: 3vw;
	}

	button{
		padding-top: 0;
		width: 100%;
		font-size: 4vw;
	}

	textarea{
		height: 40vw;
	}


	.search_form_scroll{
		max-height: 80vw;
	}

	.footer_block{
		width: 90vw;
		height: auto;
	}


	.half{
		width: 100%;
	}


	.user_block img{
		width: 90vw;
		height: 90vw;
	}

	.message_block img{
		width: 30vw;
		height: 30vw;
	}

	.message_block_description{
		width: 60vw;
	}

	.user_block_description{
		width: 90vw;
	}


	.preview{
		width: 90vw;
		height: 110vw;
		padding: 3vw;
		margin: 2vw;
		padding-bottom: 15vw;
	}


	.preview h3{
		height: 12vw;
	}


	.headline{
		width: 94vw;
		padding: 3vw;
		margin-left: 0vw;
		margin-right: 0vw;
		font-size: 4.5vw;
		font-weight: 900;

	}

	.headline a{
		margin-right: 5vw;
	}


	.post{
		padding: 5vw;
		margin: 2vw;
		float: left;
		width: 86vw;
		text-align: left;
		font-size: 3.5vw;
	}

	.post_image{
		height: 90vw;
		width: 90vw;
		padding: 3vw;
		object-fit: contain;
	}

	.post_image img, .post_image iframe{
		width: 90vw;
		height: 90vw;
	}

	.post_cart{
		width: 86vw;
		padding: 5vw;
		height: auto;
	}


	.child {

		width: 100vw;
		height: auto;

	}


	.indent{
		height: 15vw;
	}


	.parent_cart{
		width: 98vw;
		height: 49vw;
		float: left;
		margin-bottom: 2vw;

	}




	.parent_cart form{
		width: 100%;
		font-size: 3vw;
	}

	.parent_cart input{
		width: 8vw;
		height: 4vw;
	}

	.parent_cart button{
		width: 15vw;
		height: 4vw;
	}


	.name_filter{
		font-size: 4vw;
		width: 70vw;
	}

	.name_filter input{
		width: 90%;
		height: 6vw;
		float: left;
	}

	.value_filter button{
		width: 25vw;
		height: 6vw;
	}




	.category_list{
		width: 98vw;
		margin-left: 0vw;
		margin-right: 0vw;
	}




	.parent_q{
		width: 98vw;
		margin-left: 0;
		margin-right: 0;
	}

	.cart, .description-cart, .total_description_cart, .description_quest{

		width: 45vw;
		float: left;
		text-align: left;
		padding: 2vw;
		margin-bottom: 2vw;
		font-size: 4vw;

	}

	.total_description_cart{
		width: 94vw;
	}

	.description-cart, .total_description_cart, .description_quest{
		padding-bottom: 4vw;
		padding-top: 4vw;
		height: 4vw;
	}


	.cart img{
		width: 42vw;
		height: 42vw;
		object-fit: cover;
	}

	.user_block{
		padding: 2vw;
		margin: 2vw;

		width: 90vw;

	}

	.message_form textarea{
		height: 10vw;
	}










	#filter_form{
		width: 90vw;
		margin-left: 0vw;
		padding: 5vw;
		float: left;

	}



	.search_form_div{
		width: 100%;
		float: left; 
	}

	.menu li input{
		width: 4vw;
	}




	.menu li a{
		width: 90%;

	}





	.menu{
		width: 100vw;
		right: 0vw;
		display: block;
		padding-bottom: 0.1vw;
		padding-top: 0.1vw;
		margin-top: 14vw;
		transition: transform .5s;
		font-size: 3.5vw;
		height: auto;
		top: 0;

	}







	.menu li ul{
		width: 100vw;
		margin-left: 0vw;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 0;
		padding-right: 0;
		float: left;
		margin-top: 0vw;
	}





	.menu li a{
		width: 92vw;
		padding-top: 4vw;
		padding-bottom: 4vw;
		padding-left: 4vw;
		padding-right: 4vw;

	}

	.menu li button{
		width: 100vw;
		padding-top: 4vw;
		padding-bottom: 4vw;
		margin: 0;
		padding-left: 4vw;
		padding-right: 4vw;

		font-size: 3vw;
	}









	.menu form input{

		width: 74vw;
		height: 9vw;
		float: left;
		left: 3vw;
		margin-top: 2vw;
		margin-left: 2vw;
		margin-right: 0vw;
		padding-left: 4vw;
	}



	.menu form button{
		text-align: left;

		float: left;
		height: auto;
		padding-top: 3vw;
		padding-bottom: 3vw;
		height: 9vw;


		padding-right: 0;
		margin-right: 0;

		font-size: 3vw;

	}


	.menu a, .menu-active a{
		font-size: 3vw;
		border-radius: 0;
		padding-left: 0vw;
		padding: 0;
		padding-top: 3vw;
		padding-bottom: 3vw;
		width: 94vw;
	}




	.menu img{
		height: 4vw;
		width: 4vw;
	}


	#search_input{
		width: 60vw;
		padding: 1vw;
		padding-left: 5vw;
		float: left;
	}

	#search_button{
		margin-top: 2vw;
		padding-top: 4vw;
		padding-bottom: 7vw;
		padding-left: 5vw;
		padding-right: 5vw;
		width: 20vw;
		text-align: center;
	}







	.logo{
		float: left;
		font-size: 7vw;
		margin-left: 0;
		padding: 2vw;
		padding-left: 1vw;
		padding-right: 0vw;
	}

	.logo a{
		font-size: 6vw;
		margin: 0;
	}


	.burger{
		display: block
	}







	.dropdown-toggle, .menu-active a{
		width: 100vw;
		padding-top: 4vw;
		padding-bottom: 4vw;

	}


	.header.open .menu{
		transform: translateX(-100%);
	}




	.search_form{
		width: 100vw;
		float: left;
		height: 12vw;

	}

	#filter_form p input{
		width: 4vw;
		float: left;

	}

	#filter_form p a{
		width: 70vw;
		float: left;
	}

	.pagination a{
		margin-left: 5vw;
		margin-right: 5vw; 
	}


	.headline li, .headline p, .headline h2{

		font-size: 4vw;
	}


}