body,html{
	margin: 0;
	padding: 0;
	font-family: 'Jost', sans-serif;
	background: #f2f2f2;
}

/*

gold #bc995e

*/

/*** HEAD ***/
	
	.head{
		width: 100%;
		margin:0%;
		padding: 0% 0%;
		background: #212121;
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
	}

	/* BOX 00 */

		.box-00{
			width: 100%;
			padding: 1% 10%;
			margin: 0%;
			text-align: center;
			justify-content: center;
			border-bottom: 1px solid #444; 
		}

		.box-00 img{
			width: 75%;
			margin: auto;
		}

		.box-00 form{
			width: 100%;
			display: flex;
			justify-content: space-between;
		}

		.box-00 form>input{
			width: 85%;
			padding: 1% 1%;
			border: none;
		}

		.box-00 form>button{
			width: 14%;
		}

		.box-00 ul{
			width: 100%;
			margin: auto;
			padding: 0%;
			display: flex;
			justify-content: space-around;
			list-style: none;
		}

		.box-00 ul>li{
			color: #fff;
			cursor: pointer;
		}

		.box-00 ul>li:hover{
			color: #bc995e;
		}

		.serch-pc{
			display: flex;
		}

		.serch-mobil{
			display: none;
			width: 100%;
		}

		.serch-mobil ul{
			position: relative;
			display: flex;
			width: 100%;
			margin: 0%;
			padding: 0% 1%;
		}

		.serch-mobil ul>li{
			display: flex;
		}

		.serch-mobil ul>li>img{
			width: 60%;
		}

		.serch-mobil ul>li>ol{
			margin: auto;
			display: flex;
			justify-content: flex-end;
		}

		.serch-mobil ul>li>ol>li{
			width: 50px;
			height: 50px;
			list-style: none;
			display: flex;
		}

		.serch-mobil ul>li>ol>li>i{
			margin: auto;
    		font-size: 22px;
    		color: #fff;
		}

		.serch-mobil ul>li>ol>li>i:hover{
    		color: #bc995e;
		}

		.search-bar{
			width: 100%;
			display: none;
		}

	/* BOX 01 */

		.box-01{
			width: 100%;
			padding: 0% 5%;
			margin: 0%;
			text-align: center;
			justify-content: center;
			display: flex;

		}

		.box-01 div{
			margin: auto 0%;
		}

		.dropdown-01 {
			width: 100%;
			position: relative;
		}

		.dropdown-01 p{
			color: #000000e0;
		    width: 100%;
		    background: #bc995e;
		    margin: 0%;
		    padding: 8% 0%;
		    font-size: 15px;
		    font-weight: bold;
		    letter-spacing: 1px;
		}

		.dropdown-01 ol{
			position: absolute;
			width: 100%;
			margin: 0%;
			padding: 0%;
			top: 35px;
			left: 0;
			visibility: hidden;
			z-index: -2 ;
			background: #fff;
			list-style: none;
			text-align: left;
		}

		.box-01 ul{
			width: 100%;
			margin: 0%;
			padding: 0%;
			display: flex;
			justify-content: flex-start;
			list-style: none;
			color: #fff;
		}

		.box-01 ul>li{
			margin-right: 25px;
		}

		.category-pc{
			display: flex;
			width: 100%;
		}

		.category-mobil{
			width: 100%;
			display: none;
		}

		.category-mobil ul{
			width: 100%;
			list-style: none;
			display: flex;
		}

		.category-mobil ul>li{
			width: 50%;
			display: flex;
			position: relative;
			margin: 0%;
			padding: 0%;
		}

		.category-mobil ul>li>p{
			width: 100%;
			font-size: 25px;
			margin: 0%;
			padding: 0%;
			text-align: right;
		}

		.category-mobil ul>li>ol{
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			background-color: #fff;
			color: #333;
			visibility: hidden;
		}

/*** SLIDER ***/

	.slider-00{
		margin-top: 8%;
		z-index: 0;
	}

	.slider-01 ul{
		width: 100%;
		margin: 0% 0% 1% 0%;
		padding: 0% 0% 1% 0%;
		list-style: none;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #bc995e75;
	}

	.slider-01 ul>li{
		display: flex;
	}

	.slider-01 ul>li>h2{
		font-family: 'Jost', sans-serif;
		margin: auto 0%;
		padding: 0%;
		font-size: 25px;
		font-weight: bold;
	}

	.slider-01 ul>li>i{
		font-size: 20px;
		margin: auto 25px auto 0px;
		cursor: pointer;
	}

	.slider-01 ol{
		width: 100%;
		padding: 0% 0%;
		list-style: none;
		display: flex;
		justify-content: space-between;
	}

	.slider-01 ol>li{
		background: #0000;
		width: 19%;
	}

	.slider-01 ol>li>div{
		position: relative;
		width: 100%;
		margin: 0%;
		padding: 0%;
	}

	.slider-01 ol>li>div>ul{
		width: fit-content;
		margin: 5%;
		padding: 0%;
		position: absolute;
		display: block;
		border: none;
		right: 0;
		top: 0;
		color: #ffffffd9;
		visibility: hidden;
		transform: translateX(10px);
		opacity: 0;
		transition: 0.3s;
	}

	.slider-01 ol>li>div:hover ul{
		visibility: visible;
		transform: translateX(0px);
		opacity: 1;
		transition: 0.3s;
	}

	.slider-01 ol>li>div>ul>li{
		display: flex;
		width: 35px;
		height: 35px;
		background: #000;
		margin: 0px 0px 5px 0px;
	}

	.slider-01 ol>li>div>ul>li:hover{
		background: #bc995e;
	}

	.slider-01 ol>li>div>ul>li>i{
		margin: auto;
		font-size: 18px;
	}

	.slider-01 ol>li>div>img{
		width: 100%;
		margin: 0%;
		padding: 0%;
	}

	.slider-01 ol>li>h3{
		width: 100%;
		margin: 0%;
		padding: 2% 1%;
		display: flex;
	}

	.slider-01 ol>li>h3>i{
		font-size: 10px;
		margin-right: 5px;
		color: #FF9800;
	}

	.slider-01 ol>li>h4{
		font-family: 'Jost', sans-serif;
	    width: 100%;
	    margin: 0px 0px 0px 0px;
	    padding: 5px 1px;
	    font-size: 18px;
	}

	.slider-01 ol>li>p{
		font-weight: bold;
		font-size: 18px;
		letter-spacing: 0.5px;
	}

	.slider-logo{
		margin: 5% 0%; 
	}

	.slider-logo ul{
		width: 100%;
		margin: 0%;
		padding: 0%;
		list-style: none;
		display: flex;
		justify-content: space-between;
	}

	.slider-logo ul>li{
		width: 25%;
	}

	.slider-logo ul>li>img{
		width: 80%;
		margin: 0% 10%;
	}

	.slider-02 ul{
		width: 100%;
		margin: 0% 0% 1% 0%;
		padding: 0% 0% 1% 0%;
		list-style: none;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #bc995e75;
	}

	.slider-02 ul>li{
		display: flex;
	}

	.slider-02 ul>li>h2{
		font-family: 'Jost', sans-serif;
		margin: auto 0%;
		padding: 0%;
		font-size: 25px;
		font-weight: bold;
	}

	.slider-02 ul>li>i{
		font-size: 20px;
		margin: auto 25px auto 0px;
		cursor: pointer;
	}

	.slider-02 ol{
		width: 100%;
		padding: 0% 0%;
		list-style: none;
		display: flex;
		justify-content: space-between;
	}

	.slider-02 ol>li{
		background: #0000;
		width: 49%;
		display: flex;
	}

	.slider-02 ol>li>div{
		position: relative;
		width: 100%;
		margin: 0%;
		padding: 0%;
	}

	.slider-02 ol>li>div>ul{
		width: fit-content;
		margin: 5%;
		padding: 0%;
		position: absolute;
		display: block;
		border: none;
		right: 0;
		top: 0;
		color: #ffffffd9;
		visibility: hidden;
		transform: translateX(10px);
		opacity: 0;
		transition: 0.3s;
	}

	.slider-02 ol>li>div:hover ul{
		visibility: visible;
		transform: translateX(0px);
		opacity: 1;
		transition: 0.3s;
	}

	.slider-02 ol>li>div>ul>li{
		display: flex;
		width: 35px;
		height: 35px;
		background: #000;
		margin: 0px 0px 5px 0px;
	}

	.slider-02 ol>li>div>ul>li:hover{
		background: #bc995e;
	}

	.slider-02 ol>li>div>ul>li>i{
		margin: auto;
		font-size: 18px;
	}

	.slider-02 ol>li>div>img{
		width: 100%;
		margin: 0%;
		padding: 0%;
	}

	.slider-02 ol>li>div>span>h3{
		font-family: 'Jost', sans-serif;
		width: 100%;
		margin: 0%;
		padding: 2% 1%;
	}

	.slider-02 ol>li>div>span>h4{
		font-family: 'Jost', sans-serif;
		width: 100%;
	    margin: 0px 0px 0px 0px;
	    padding: 5px 1px;
	    font-size: 18px;
	    color: #bc995e;
	}

	.slider-02 ol>li>div>span>p{
		font-size: 18px;
		letter-spacing: 0.5px;
	}

/*** CONTENTS ***/

	/** CONTENT 01 **/

		.content-01 {
			width: 100%;
			padding: 0% 5%;
			margin: 0%;
			position: relative;
		}

		.content-01 hr{
			left: 0;
		    height: 92px;
		    width: 90%;
		    margin: 0% 5%;
		    background: #333;
		    position: absolute;
		    box-shadow: 0px 0px 8px -1px #333;
		}

		/** box-1 **/

			.box-1 div>ul{
				width: 100%;
			    padding: 2%;
			    margin: -3% 0% 0% 0%;
			    background: #f2f2f2;
			    list-style: none;
			    display: flex;
			    justify-content: space-between;	
			}

			.box-1 div>ul>li{
				background: #333;
				width: 49%;		
			}

			.box-1 div>ul>li>img{
				width: 100%;		
			}

			.box-2{
				padding: 2%;
			}

		/** banner-box-2 **/

			.banners-box-2{
				margin-top: 5%; 
				width: 100%;
			}

			.banners-box-2 img{
				width: 100%;
			}

		/** container-product-1 **/

			.container-product-1{
				width: 100%;
				margin-top: 5%;
			}

			.container-product-1 h2 {
				width: 100%;
			    font-family: 'Jost', sans-serif;
			    margin: 0% 0% 1% 0%;
			    padding: 0% 0% 1% 0%;
			    font-size: 25px;
			    font-weight: bold;
			    border-bottom: 1px solid #bc995e75;
			}

			.container-product-1 ul{
				width: 100%;
				margin: 0%;
				padding: 0%;
				list-style: none;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			.container-product-1 ul>li{
				width: 49.5%;
				padding: 1%;
				background-color: #fff;
				display: flex;
				justify-content: center;
			}

			.container-product-1 ul>li>div>img{
				width: 100%;
			}

			.container-product-1 ul>li>div>h3{
				width: 100%;
			    margin: 0%;
			    padding: 7% 0% 5% 5%;
			    font-family: 'Jost', sans-serif;
			    font-weight: bold;
			    font-size: 25px;
			}

			.container-product-1 ul>li>div>h4{
				width: 100%;
			    margin: 0%;
			    padding: 0% 0% 0% 5%;
			    font-size: 12px;
			    color: #FF9800;
			}

			.container-product-1 ul>li>div>h5{
				width: 100%;
			    margin: 0%;
			    padding: 5% 0% 3% 5%;
			    font-family: 'Jost', sans-serif;
			    font-weight: bold;
			    font-size: 20px;
			}

			.container-product-1 ul>li>div>p{
				width: 100%;
			    margin: 0%;
			    padding: 2% 0% 3% 5%;
			    font-family: 'Jost', sans-serif;
			    font-weight: bold;
			    letter-spacing: 0.5px;
			    font-size: 20px;
			    color: #333333a3;
			}

			.container-product-1 ul>li>div>ul{
				list-style: none;
				width: 100%;
				display: flex;
				margin: 0%;
				padding: 5% 0% 3% 5%;
				justify-content: space-between;
			}

			.container-product-1 ul>li>div>ul>li>h6{
				display: flex;
				margin: 0px 10px 0px 0px;
				width: 40px;
				height: 40px;
				color: #fff;
				background: #000;
				cursor: pointer;
			}

			.container-product-1 ul>li>div>ul>li>h6:hover{
				background-color: #bc995e;
			    color: #000;
			    transition: 0.3s;
			}

			.container-product-1 ul>li>div>ul>li>h6>i{
				margin: auto;
			}

			.container-product-1 ul>li>div>ul>li>button{
				width: 100%;
				padding: 1% 1%;
				background-color: #000;
				color: #fff;
				font-size: 20px;
				border:none;
				outline: none;
				letter-spacing: 0.5px;
				transition: 0.3s;
			}

			.container-product-1 ul>li>div>ul>li>button:hover{
			    background-color: #bc995e;
			    color: #000;
			    font-weight: bold;
			    letter-spacing: 0.5px;
			    transition: 0.3s;
			}

		/** banner-box-2 **/

			.banners-box-3{
				margin-top: 5%;
				display: flex;
				justify-content: space-between;
				width: 100%;
			}

			.banners-box-3 img{
				width: 49%;
			}

/*** FOOTER ***/

	.footer{
		background: #212121;
		width: 100%;
		margin: 0%;
		padding: 3% 5% 0.5% 5%;
	}

	.footer div>h2{
		width: 100%;
		font-family: 'Jost', sans-serif;
		font-size: 20px;
		color: #bc995e;
		letter-spacing: 0.5px;
	}

	.footer div>p{
		width: 100%;
		font-family: 'Jost', sans-serif;
		font-size: 15px;
		color: #fff;
		letter-spacing: 0.5px;
		cursor: pointer;
		transition: 0.3S;
		letter-spacing: 0.5px;
	}

	.footer div>p:hover{
		color: #bc995e;
		transition: 0.3S;
	}

	.footer div>ul{
		width: 100%;
		color: #fff;
		list-style: none;
		margin: 0%;
		padding: 0%;
	}

	.footer div>ul>li{
		width: 100%;
	    margin: 0%;
	    padding: 15px 0px 0px 45px;
	    font-size: 15px;
	    cursor: pointer;
	    transition: 0.3S;
	    letter-spacing: 0.5px;
	}

	.footer div>ul>li:hover{
		color: #bc995e;
		transition: 0.3S;
	}

	.footer div>ul>li>i{
		float: left;
		margin: 5px 0px 0px -25px;  
	}

	.copyright{
		margin: 2% 0% 0% 0%;
		width: 100%;
		text-align: center;
		color: #fff3;
		font-size: 13px;
		letter-spacing: 0.5px;
		cursor: pointer;
		transition: 0.3s;
	}

	.copyright:hover span{
		transition: 0.3s;
		color: #f44336;
	}

/*** MEDIASQUERY ***/

	@media( max-width: 1024px){

		/* BOX 00 */
			.box-00{
			padding: 1% 5%;
		}

	}

	@media (max-width: 768px){

		/* BOX 00 */

			.box-00{
				padding: 1% 5%;
			}

			.box-00 form>input {
	   			width: 75%;
	   		}

	   		.box-00 form>button {
			    width: 24%;
			}

			.box-00 ul {
			    justify-content: space-between;
			}

	}

	@media(max-width: 425px){


		/* BOX 00 */

			.serch-pc{
				display: none;
			}

			.serch-mobil{
				display: block;
			}

			.category-pc{
				display: none;
			}

			.category-mobil{
				display: flex;
			}

			.box-00{
				padding: 1% 5%;
			}

			.box-00 form>input {
	   			width: 75%;
	   		}

	   		.box-00 form>button {
			    width: 24%;
			}

			.box-00 ul {
			    justify-content: space-between;
			}

	}