/* ============ SCROLL DOWN INDICATOR  ============ */

		.arrows {
			width: 60px;
			height: 74px;
			position: absolute;
			left: 50%;
			margin-left: -30px;
			bottom: 20px;
			z-index: 11;
		}

		.arrows path {
			stroke: #efefef;
			fill: transparent;
			stroke-width: 4px;
			animation: arrow 2s infinite;
			-webkit-animation: arrow 2s infinite;
		}

		@keyframes arrow {
			0% {
				opacity: 0
			}

			40% {
				opacity: 1
			}

			80% {
				opacity: 0
			}

			100% {
				opacity: 0
			}
		}

		@-webkit-keyframes arrow

		/*Safari Chrome*/
			{
			0% {
				opacity: 0
			}

			40% {
				opacity: 1
			}

			80% {
				opacity: 0
			}

			100% {
				opacity: 0
			}
		}

		.arrows path.a1 {
			animation-delay: -1s;
			-webkit-animation-delay: -1s;
			/* Safari Chrome */
		}

		.arrows path.a2 {
			animation-delay: -0.5s;
			-webkit-animation-delay: -0.5s;
			/* Safari Chrome */
		}

		.arrows path.a3 {
			animation-delay: 0s;
			-webkit-animation-delay: 0s;
			/* Safari Chrome */
		}

		body {
			font-family: "Molengo",serif;
			margin: 0;
			background-color: white;
			--my_brown: #401e0e; /* rgba(64, 30, 14, 1) */
			--my_lbrown: #664b3e;/*#796156;*/
			--my_grey: #4d4d4d;
		}

		p {
			margin: unset;
		}

		h1, h2, h3, h4, h5 {
			color: var(--my_brown);
		}

		a {
			color: var(--my_brown);
			transition: 0.3s color;
		}

		a:hover {
			color: var(--my_lbrown);
		}

		@keyframes fadeIn {
		  0% { opacity: 0; }
		  100% { opacity: 1; }
		}

		@-moz-keyframes fadeIn {
		  0% { opacity: 0; }
		  100% { opacity: 1; }
		}

		@-webkit-keyframes fadeIn {
		  0% { opacity: 0; }
		  100% { opacity: 1; }
		}

		@-o-keyframes fadeIn {
		  0% { opacity: 0; }
		  100% { opacity: 1; }
		}

		@-ms-keyframes fadeIn {
		  0% { opacity: 0; }
		  100% { opacity: 1; }
		}

		.bg-image {
			background-attachment: scroll;
			background-clip: border-box; /* should image also be behind border/padding */
			background-origin: border-box; /* where should image start top left corner */
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			transition: background-size 0.8s;
		}

		.row {margin: unset;}
		.row > * {padding: unset;}

		.my_cont {
			height: 100svh;
			width: 100svw;
			background-color: #181818;
		/*	background-image: url("./assets/images/drawers.jpg");*/
		/*	background-image: url("./assets/images/vm06.jpg");*/
			background-image: url("./assets/images/kit4.jpg");
		}

		.my_cont:before {
			content: "";
			position: absolute;
			left: 0; right: 0; top: 0; bottom: 0;
			background: rgba(0,0,0,0.1);
		}

		.my_col {
			z-index: 10;
			background-color: rgba(64, 30, 14, 0.45);/*rgba(0,0,0,0.45);*/
			padding: 15px 0px 10px 0px;
			animation: fadeIn 5s;
			-webkit-animation: fadeIn 5s;
			-moz-animation: fadeIn 5s;
			-o-animation: fadeIn 5s;
			-ms-animation: fadeIn 5s;
		}

		.my_logo_img {
			height: max(5.25svw, 50px);
			margin-bottom: 10px;
		}

		.my_title {
			font-size: max(2vw, 19px);
			font-weight: normal;
			color: white;
/*			text-transform: uppercase;*/
		}

		.my_title2 {
			font-size: max(3vw, 25px);
			font-weight: normal;
			color: white;
/*			text-transform: uppercase;*/
		}

		/* =================== NAV =================== */ 

		.my_nav {
			z-index: 10;
			width: 100vw;
			background-color: var(--my_brown);
		}

		.my_nav > .nav_item {
/*			padding: 25px 5px;*/
			color: white;
			text-transform: uppercase;
			transition: 0.3s background-color, 0.3s border;
		}

		.nav_item:hover {
			background-color: rgba(255,255,255,0.2);
			cursor: pointer;
		}

		.nav_item .fa-chevron-up {display: none;}
		.nav_item .fa-chevron-down {display: inline;}

		.nav_item:hover .fa-chevron-up {display: inline;}
		.nav_item:hover .fa-chevron-down {display: none;}

		.nav_item:hover > .nav_sub_items {
			z-index: 11;
			opacity: 1;
			top: calc(100% - 1px);
			transition: 0s z-index 0.2s, 0.5s top, 1s opacity 0s;
		}

		.nav_item a {
			text-decoration: none;
			color: unset;
		}

		.nav_item_inner {
			padding: 25px 5px;
			width: 100%;
			height: 100%;
		}

		.nav_sub_item .nav_item_inner {
			padding: unset !important;
		}


		.nav_sub_items {
			opacity: 0;
			z-index: -1;
			position: absolute;
			top: -160px; left: 0;
			width: 100%;
			background-color: var(--my_brown);
			border-top: 1px solid var(--my_brown);
			transition: 0s z-index 0s, 0.5s top, 1s opacity 0s;
		}

		.nav_sub_item {
			padding: 10px 0;
			border: 1px solid var(--my_brown);
			border-top: unset;
			background-color: rgba(255,255,255,0.5);
/*			border-top; unset;*/
/*			background-color: var(--my_lbrown);*/
		}

		.nav_sub_item:hover {
			background-color: rgba(255,255,255,0.2);
		}

		/* =================== PAGE =================== */ 

		.products {
			z-index: 9;
		}

		@media (min-width: 768px) {
			.col-md-0_5 {
				flex: 0 0 auto;
				width: 4.5%;
			}
		}

		.product {
/*			border: 1px solid black;*/
			margin: 10px 10px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.16);
			transition: 0.4s box-shadow;
		}

		.product:hover {
			cursor: pointer;
			box-shadow: 0 4px 12px rgba(0,0,0,0.32);
		}

		.product img {
			width: 100%;
		}

		.product p {
			padding: 10px 0;
			background-color: #eeeeee;
			font-weight: bold;
			text-transform: uppercase;
		}

		.product > a {
			text-decoration: none !important;
		}

		.about {
			text-align: center;
			padding: 0 calc(20vw);
			margin: 8vh 0 calc(8vh + 10px) 0;
		}

		/* =================== PRODUCT PAGE =================== */

		.displayed_path {
			position: absolute;
			top: 0;
			left: 0;
			padding: 10px 10px;
			text-transform: uppercase;
			font-size: 12px;
			color: black;
			z-index: 3;
		}

		.displayed_path > a {
			text-decoration: none;
		}

/*		.sub_product {
			position: relative;
			transition: 0.2s opacity;
			width: 49% !important;
			margin-bottom: 2%;
			border-radius: 10px;
			transition: 0.5s background;
		}

		.sub_product > * {
			border-radius: 10px;
		}

		.sub_product > img {
			width: 100%;
		}

		.sub_product .title_cont {
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
			background: linear-gradient(33deg, rgb(64, 30, 14), rgba(0,0,0,0) 35%);
		
		}

		.sub_product .title_cont_grad {
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
			background: linear-gradient(33deg, rgb(64, 30, 14) 5%, rgba(0,0,0,0) 66%);
			opacity: 0;
			transition: 0.5s opacity;
		}

		.sub_product:hover .title_cont_grad {
			opacity: 1;
		}*/

		.title_cont .text {
			padding-bottom: 5px;
			position: absolute;
			left: 0.7vw; bottom: 0;
			color: #f1f1f1;
/*			text-transform: uppercase;*/
			font-size: 1.5vw;
			text-shadow: 1px 1px 10px var(--my_brown);
		}

		@media only screen and (max-width: 991.99px) { /* large */
			.title_cont .text {
				font-size: 3vw;
				left: 1.4vw;
			}
		}

		@media only screen and (max-width: 767.99px) { /* MEDIUM */
			.title_cont .text {
				font-size: 3vw;
				left: 1.4vw;
			}
		}

		@media only screen and (max-width: 575.99px) { /* small */
			.title_cont .text {
				font-size: 6vw;
				left: 2.8vw;
			}
		}


		.text .sub_text {
			font-size: 1vw;
			text-transform: none;
			padding: 0 0.7vw 0.8vw 0;
			white-space: nowrap;
		}

		/* ===== new stuff ===== */ 

		.new_sub_sub_prod_conts {
			padding-right: 20px;
		}

		.new_sub_sub_prod {
			position: relative;
			width: 100%;
			padding-top: 66.6667%;
			transition: 0.2s opacity, 0.5s background;
			cursor: pointer;
		}

		.new_sub_sub_prod * {
			border-radius: 10px;
		}

		.new_sub_sub_prod .title_cont {
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
/*			background: linear-gradient(33deg, rgb(64, 30, 14), rgba(0,0,0,0) 35%);*/
			background: linear-gradient(11deg, rgb(64, 30, 14), rgba(0,0,0,0) 35%);
			overflow-x: hidden;
		}

		.new_sub_sub_prod .title_cont_grad {
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
/*			background: linear-gradient(33deg, rgb(64, 30, 14) 5%, rgba(0,0,0,0) 66%);*/
			background: linear-gradient(11deg, rgb(64, 30, 14) 5%, rgba(0,0,0,0) 50%);
			opacity: 0;
			transition: 0.5s opacity;
		}

		.new_sub_sub_prod:hover .title_cont_grad {
			opacity: 1;
		}

		/* =================== GALLERY =================== */ 

		.gal_img_inner {
			position: relative;
			z-index: 100;
			height: 100%;
			width: 100%;
			background-color: #999999;
			opacity: 0;
			transition: opacity 0.5s;
		}

		.gal_img_inner:hover {
			opacity: 0.45;
		}

		.main_gal_img {
			margin: 0px;
			height: 100%; 
			box-shadow: 0px 0px 1vw 0px #eee;
		}

		.main_gal_img + .gal_img_inner {
			display: none;
		}

		.mini_gal_img {
			margin: 10px 5px 0px 5px;
			height: calc(100% - 10px);
			box-shadow: 0px 0px 1vw 0px #eee;
			cursor: pointer;
		}

		/* =================== FOOTER =================== */ 

		.my_footer {
/*			border-top: 1px solid var(--my_brown);*/
		}

		.ft_adr {
			display: none;
			padding: 20px 0 20px 50px;
			background-color: rgba(64, 30, 14, 0.5);
		}

		.ft_ri {
			background-color: rgba(64, 30, 14, 0.1);
			text-align: center;
			padding: 10px 0px;
		}