:root { 
  --font-primary: 'Jost', sans-serif;
  --color-gold-p: #ffc107;
  --background-color-header: #fff;
  --color-header: #212121;
}

body,html{
	margin: 0;
	padding: 0;
	font-family: var(--font-primary);
	background: #f2f2f2;
}

/*
	gold #bc995e 
'	Jost', sans-serif
	bg-header #212121 
	liliners #bc995e75.
*/

/*** HEAD ***/
	
	.head{
		width: 100%;
		margin:0%;
		padding: 0% 0%;
		background: var(--background-color-header);
		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;
			cursor: pointer;
		}

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

		.box-00 form>input{
			width: 85%;
			padding: 1% 1%;
			border: none;
			border: 1.5px solid #0000005c;
			outline: none;
		}

		.box-00 form>button{
			width: 14%;
			border: none;
			outline: none;
			color: #fff;
			background-color: #212121;
		}

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

		.box-00 ul>li{
			color: var(--color-header);
			cursor: pointer;
		}

		.box-00 ul>li:hover{
			color: var(--color-gold-p);
		}

		.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: var(--color-gold-p);
		}

		.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;
			cursor: pointer;
		}

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

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

		.box-01 ol>li{
			width: 100%;
		    padding: 2% 5%;
		    font-size: 18px;
		    color: #212121;
		    transition: 0.2s;
		}

		.box-01 ol>li:hover{
			width: 100%;
		    padding: 2% 5%;
		    color: #fff;
		    background-color: #212121;
		    transition: 0.2s;
		}

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


		.box-01 ul>li{
			margin-right: 25px;
			cursor: pointer;
			font-size: 18px;
			position: relative;
		}

		.box-01 ul>li:hover{
			color: var(--color-gold-p);
		}

		.box-01 ul>li>span{
			position: absolute;
			font-size: 12px;
			font-weight: bold;
		}

		.box-01 ul>li>ol{
			position: absolute;
			width: 150px;
			margin: 0%;
			padding: 0%;
			top: 42px;
			left: 0;
			display: none;
			z-index: 5 ;
			background: #fff;
			list-style: none;
			text-align: left;
		}

		.user-on{
			color:#28a745!important;
		}

		.fav-on{
			color:#ff1414!important;
		}
		.cart-on{
			color:#2f79c8!important;
		}

		.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 #ffc107;
	}

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

	.slider-01 ul>li>h2{
		font-family: var(--font-primary);
		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: var(--color-gold-p);
		color: #212121;
	}

	.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%;
		cursor: pointer;
	}

	.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: var(--font-primary);
	    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 #ffc107;
	}

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

	.slider-02 ul>li>h2{
		font-family: var(--font-primary);
		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: var(--color-gold-p);
	}

	.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: var(--font-primary);
		width: 100%;
		margin: 0%;
		padding: 2% 1%;
	}

	.slider-02 ol>li>div>span>h4{
		font-family: var(--font-primary);
		width: 100%;
	    margin: 0px 0px 0px 0px;
	    padding: 5px 1px;
	    font-size: 18px;
	    color: var(--color-gold-p);
	}

	.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%;
				margin-bottom: 5%;
			}

			.container-product-1 h2 {
				width: 100%;
			    font-family: var(--font-primary);
			    margin: 0% 0% 1% 0%;
			    padding: 0% 0% 1% 0%;
			    font-size: 25px;
			    font-weight: bold;
			    border-bottom: 1px solid #ffc107;
			}

			.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 img{
				width: 100%;
				cursor: pointer;
			}

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

			.container-product-1 ul>li>div>h3{
				width: 100%;
			    margin: 0%;
			    padding: 7% 0% 5% 5%;
			    font-family: var(--font-primary);
			    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: var(--font-primary);
			    font-weight: bold;
			    font-size: 20px;
			}

			.container-product-1 ul>li>div>p{
				width: 100%;
			    margin: 0%;
			    padding: 2% 0% 3% 5%;
			    font-family: var(--font-primary);
			    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: var(--color-gold-p);
			    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: var(--color-gold-p);
			    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%;
			}

		/** container-product-serch **/

			.container-products-serch{
				width: 100%;
				margin-top: 10%;
				margin-bottom: 5%;
			}

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

			.container-products-serch ul>li{
				padding: 1%;
			}

			/* pagination */

				.pagination{
					width: 100%;
					margin: 0% 0% 0% 0%!important;
					padding: 2% 0% 0% 0%!important;
					display: flex;
					justify-content: space-between;
					border-top: 1px solid #ffc107;
				}

				.pagination li{
					font-family: var(--font-primary);
					font-size: 18px;
					letter-spacing: 1px;
					margin: 0%;
					padding: 8px 0px!important;
					width: 40px;
					height: 40px;
					background-color: #111;
					border-radius: 3px;
					cursor: pointer;
					color: #ffffffd9;
					text-align: center;
				}

				.pagination li:hover{
					background-color: var(--color-gold-p);
				    color: #000;
				    font-weight: bold;
				    letter-spacing: 0.5px;
				    transition: 0.3s;
				}

				.pagination-active{
					background-color: var(--color-gold-p)!important;
				    color: #000!important;
				}

				.btn_pagination{
					width: 100px!important;
				}

				.btn_pagination-desactive{
					background-color: #1111111f!important;
    				color: #00000075!important;
				}

			/* box category */

				.box-prod-category{
					width: 20%;
					background-color: #fff;
				}

				.box-prod-category h2{
					width: 100%;
					font-family: var(--font-primary);
				    margin: 0%;
				    padding: 0%;
				    font-size: 20px;
				    font-weight: bold;
				    display: flex;
				   	justify-content: space-between;
				   	cursor: pointer;
				}

				.box-prod-category ol{
					width: 100%;
					margin: 8% 0% 0% 0%;
					padding-left: 20px;
					list-style: none;
				}

				.box-prod-category ol>li{
					margin-bottom: 10px;
					font-size: 18px;
					cursor: pointer;
				}

				.box-prod-category ol>li:hover{
					color: var(--color-gold-p);
				}

			/* box product serch */

				.box-prod-serch{
					width: 79%;
				}

				.box-prod-serch h2 {
				    font-family: var(--font-primary);
				    width: 100%;
				    margin: 0% 0% 1% 0%;
				    padding: 0% 0% 1% 0%;
				    font-size: 25px;
				    font-weight: bold;
				    border-bottom: 1px solid #ffc107;
				}

				.box-prod-serch ol{
					width: 100%;
				    padding: 0% 0%;
				    list-style: none;
				    display: flex;
				    flex-wrap: wrap;
				    justify-content: space-between;
				}

				.box-prod-serch ol>li{
					background: #fff;
					padding: 1%;
	    			width: 24%;
	    			margin-bottom: 2%;
				}

				.box-prod-serch ol>li>div{
				    position: relative;
				    width: 100%;
				    margin: 0%;
				    padding: 0%;
				}

				.box-prod-serch 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;
				}

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

				.box-prod-serch ol>li>div>ul>li {
				    display: flex;
				    width: 35px;
				    height: 35px;
				    background: #000;
				    margin: 0px 0px 5px 0px;
				    cursor: pointer;
				}

				.box-prod-serch ol>li>div>ul>li:hover{
					background: var(--color-gold-p);
				}

				.box-prod-serch ol>li>div>ul>li>i{
					margin: auto;
					font-size: 18px;
				}

				.box-prod-serch ol>li>div>img{
					width: 100%;
					margin: 0%;
					padding: 0%;
					cursor: pointer;
				}

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

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

				.box-prod-serch ol>li>h4{
					font-family: var(--font-primary);
				    width: 100%;
				    margin: 0px 0px 0px 0px;
				    padding: 5px 1px;
				    font-size: 18px;
				}

				.box-prod-serch ol>li>p{
					font-weight: bold;
					font-size: 18px;
					letter-spacing: 0.5px;
				}

		/** container-product-detail **/

			.container-products-detail{
				width: 100%;
				margin-top: 10%;
				margin-bottom: 5%;
			}

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

			.container-products-detail ul>li{
				padding: 1%;
			}

			/* box-detail-product-img */

				.box-detail-product-img{
					width: 30%;
					padding: 1%;
				}

				.gallery-zoom{
 					width: 100%;
 					margin: 0%;
 					padding: 0%;
 					position: relative;
				}

				.img-auto{
					opacity: 0;
					z-index: -2
				}

				.gallery-zoom img{
					width: 100%;
				}

				.gallery-imgs{
					position: relative;
					width: 100%;
					margin: 0%;
					padding: 0%;
				}

				.gallery-imgs ol{
					width: 100%;
					margin: 0%;
					padding: 2%;
					list-style: none;
					display: flex;
				}

				.gallery-imgs ol>li{
					width: 60px;
					height: 60px;
					margin-right: 15px;
					background-color: #333;
					cursor: pointer;
					transition: 0.3s;
				}

				.gallery-imgs ol>li>img{
					width: 100%;
					margin: 0%;
					padding: 0%;
				}

				.gallery-imgs ol>li:hover{
					opacity: 0.5;
					transition: 0.3s;
				}

			/* box-detail-product-desc */

				.box-detail-product-desc{
					width: 50%;
					padding: 1%;
				}

				.box-detail-product-desc div{
					background-color: #fff;
					padding: 1%;
					margin: 0%;
				}

				.box-detail-product-desc div>h2{
					font-family: var(--font-primary);
				    margin: 3% 0% 2% 0%;
				    padding: 0% 0% 0% 3%;
				    font-size: 30px;
				    font-weight: bold;
				}

				.box-detail-product-desc div>h3{
					font-family: var(--font-primary);
				    margin: 3% 0% 2% 0%;
				    padding: 0% 0% 0% 3%;
				    font-size: 25px;
				    font-weight: bold;
				}

				.calification{
					width: 100%;
					margin: 3% 0% 2% 0%!important;
				    padding: 0% 0% 0% 3%!important;
				    color: #0000003b;
				}


				.box-detail-product-desc div>p{
					width: 100%;
					margin: 3% 0% 2% 0%;
				    padding: 0% 0% 0% 3%;
				}

				.items-stock{
					width: 100%;
					margin: 3% 0% 2% 0%!important;
				    padding: 0% 0% 0% 3%!important;
				    color: #28a745;
				}

				.datasheet{
					width: 100%;
					margin: 3% 0% 2% 0%!important;
				    padding: 0% 0% 0% 3%!important;
				    color: #007bff;
				    cursor: pointer;
				}

				.datasheet:hover{
					text-decoration: underline;
				}

				.box-detail-product-desc div>form>ul{
					width: 100%;
					margin: 3% 0% 2% 0%!important;
				    padding: 0% 0% 0% 3%!important;
					display: flex;
					justify-content: flex-start;
				}

				.box-detail-product-desc div>form{
					width: 100%;
					margin: 3% 0% 2% 0%;
				    padding: 0% 0% 0% 3%;
					display: flex;
					justify-content: flex-start;
				}

				.box-detail-product-desc div>form>input{
					margin: auto 10px;
					width: 40px;
					height: 40px;
					text-align: center;
				}

				.box-detail-product-desc div>form>button{
					font-family: var(--font-primary);
					margin: auto 10px;
					height: 40px;
					padding: 0% 3%;
					display: flex;
					border: none;
					outline: none;
					font-size: 18px;
					letter-spacing: 1px;
					background-color: #111;
					color: #fff;
				}

				.box-detail-product-desc div>form>button:hover{
					color: var(--color-gold-p);
				}

				.box-detail-product-desc div>form>button>span{
					margin: auto;
				}

				.btn-plus, .btn-minus{
					margin: auto 0%;
					width: 40px;
					height: 40px;
					background-color: #c4c4c4;
					display: flex;
					cursor: pointer;
					color: #000000a3;
				}

				.btn-plus>i, .btn-minus>i{
					margin: auto;
				}

				.btn-plus:hover, .btn-minus:hover{
					background-color: var(--color-gold-p);
    				color: #212121;
				}

				.coments{
					width: 100%;
					margin: 3% 0% 2% 0%!important;
				    padding: 0% 3% 0% 3%!important;
				}

				.coments h4{
					font-family: var(--font-primary);
				    margin: 3% 0% 0% 0%;
				    padding: 0% 0% 0% 0%;
				    font-size: 22px;
				    font-weight: bold;
				}

				.coments p{
					font-family: var(--font-primary);
				    margin: 3% 0% 0% 0%!important;
				    padding: 2% 2% 2% 2%!important;
				    font-size: 15px;
				    background-color: #33333317;
				}

			/* box-detail-product-promo */

				.box-detail-product-promo {
					width: 20%;
					padding: 1%;
				}

				.box-detail-product-promo img{
					width: 100%;
				}

				.box-detail-product-promo ol{
					width: 100%;
					margin: 0%;
					padding: 0%;
					list-style: none;
				}

				.box-detail-product-promo ol>li{
					margin-bottom: 25px;
				}

		/** container-shoppingcart **/

			.container-shoppingcart{
				width: 100%;
				margin-top: 10%;
				margin-bottom: 5%;
			}

			.container-shoppingcart h2 {
			    font-family: var(--font-primary);
			    width: 100%;
			    margin: 0% 0% 1% 0%;
			    padding: 0% 0% 1% 0%;
			    font-size: 30px;
			    font-weight: bold;
			    border-bottom: 1px solid #ffc107;
			}

			/** shopping car **/

				.table-shoppingcart{
					width: 100%;
					margin: 0%;
					padding: 0%;
				}

				.table-shoppingcart table{
					width: 100%;
					margin: 0%;
					padding: 0%;
					background: #fff;
				}

				.table-shoppingcart form{
					width: 100%;
					padding: 5px;
				}

				.table-shoppingcart tr{
					width: 100%;
					padding: 0%;
					display: flex;
					justify-content: space-between;
					text-align: left;

				}

				.table-shoppingcart td{
					width: 16%;
					text-align: center;
					display: flex;
					justify-content: center;
				}

				.table-shoppingcart td>img{
					width: 35%;
					padding: 5%;
				}

				.table-shoppingcart td>p{
					width: 100%;
					padding: 2% 5%;
					margin: auto 0%;
					font-size: 15px;
					letter-spacing: 0.5px;
				}

				.table-shoppingcart td>input{
					width: fit-content;
					padding: 2% 5%;
					margin: auto 0%;
					font-size: 15px;
					letter-spacing: 0.5px;
					text-align: center;
					outline: none;
				}

				.btn-cart-remove{
					margin: 0px;
					padding: 0%;
					border: none;
					outline: none!important;
					font-size: 18px;
					background-color: #0000;
				}

				.btn-cart{
					width: 100%;
					margin: 5px 5px;
					padding: 2%;
					border: none;
					background-color: #111;
					color: #fff;
					font-size: 18px;
				}

				.tr-cart-01{
					font-weight: bold;
					margin: 0px 0px 10px 0px;
	    			border-bottom: 1px solid #ffc107;
				}

				.tr-cart-02{
					margin: 0px 0px;
					border-bottom: 1px solid #0000002b;
				}

				.tr-cart-03{
					margin: 0px 0px 0px 0px;
	    			border-top: 1px solid #ffc107;
				}

				.table-total{
					width: 30%!important;
					float: right;
				}

				.table-total td{
					width: 50%!important;
					text-align: left;
				}

			/** checkout **/

				.data-checkout{
					width: 100%;
					margin: 0%;
					padding: 0%;
					display: flex;
					justify-content: space-between;
				}

				.data-checkout h3{
				    font-family: var(--font-primary);
				    width: 100%;
				    margin: 0% 0% 2% 0%;
				    padding: 0% 0% 2% 0%;
				    font-size: 20px;
				    font-weight: bold;
				}

				.data-checkout p{
				    font-family: var(--font-primary);
					width: 100%;
					margin: 0px 0px 5px 0px;
					padding: 5px 0px;
					font-size: 15px;
				}

				.data-checkout label{
					font-family: var(--font-primary);
					width: 100%;
					margin: 0px 0px 5px 0px;
					padding:0%;
					font-size: 15px;
				}

				.data-checkout input{
					font-family: var(--font-primary);
				    width: 100%;
				    margin: 0%;
				    padding: 5px 10px;
				    font-size: 18px;
				    border: solid 1.5px #bc995e69;
				    outline: none!important;
				}

				.data-checkout div{
					width: 49%;
					margin: 0%;
					padding: 2%;
					background-color: #fff;
				}

				.data-checkout div>form{
					width: 100%;
					padding: 0%;
					margin: 0%;
				}

				.data-checkout div>form>ol{
					width: 100%;
					padding: 0%;
					margin: 0%;
					list-style: none;
				}

				.data-checkout div>form>ol>li{
					width: 100%;
					margin: 0px 0px 15px 0px;
					padding: 0%;
				}

				.data-checkout div>form>ol>li>ul{
					width: 100%;
					margin: 0%;
					padding: 0%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					list-style: none;
				}

				.data-checkout div>form>ol>li>ul>li{
					width: 48%;
				}

				.order-data table{
					width: 100%;
					margin: 0%;
					padding: 0%;
				}

				.order-data td{
					width: 50%;
				}

				.order-row-title{
					border-bottom: 1px solid #ffc107;
				}
				.order-row-title2{
					border-top: 1px solid #0000006b;
					border-bottom: 1px solid #0000006b;
				}
				.order-row-title3{
					border-top: 1px solid #ffc107;
				}
				.order-row-content{
					border-top: 1px solid #00000024;
				}

				.data-checkout button{
					width: 100%;
					margin: 0%;
					padding: 2%;
					border: none;
					background-color: #111;
					color: #fff;
					font-size: 18px;
				}


				.personal-data-user{
					width: 100%!important;
				    margin: 0% 0% 3% 0%!important;
				    padding: 2% 2%!important;
				    background-color: #e4e4e4!important;
				    border-radius: 10px;
				}

				.personal-data-user i{
					font-size: 20px;
					cursor: pointer;
				}

				.personal-data-user h4{
				    font-family: var(--font-primary);
				    width: 100%;
				    margin: 0% 0% 0% 0%;
				    padding: 0% 0% 0% 0%;
				    font-size: 20px;
				    font-weight: bold;
				}

				.personal-data-user h4>i{
					font-size: 20px;
					margin-right: 10px
				}

				.user-data-title{
					width: 100%!important;
					margin: 0%!important;
					padding: 0%!important;
					background-color: #e4e4e4!important;
					display: flex;	
				}

				.user-data-form-01, .user-data-form-02,.user-data-form-03, .user-data-form-04, .user-data-form-05, .user-data-form-06{
					width: 100%!important;
				    margin: 2% 0% 0% 0%!important;
				    padding: 2% 0% 0% 0%!important;
				    border-top: 1.5px solid #2125356b;
				    background-color: #e4e4e4!important;
				    display: none;	
				}

				.user-data-form-active{
					display: block;
				}

				.form-plus-01,.form-plus-02 ,.form-plus-03,.form-plus-04,.form-plus-05,.form-plus-06{
					color: #28a745;
				}

				.form-minus-01,.form-minus-02,.form-minus-03,.form-minus-04,.form-minus-05,.form-minus-06{
					display: none;
					color: #f44336;
				}

		/** container-contact **/

			.container-contact{
				width: 100%;
				margin-top: 10%;
			}

			.container-contact h2 {
			    font-family: var(--font-primary);
			    width: 100%;
			    margin: 0% 0% 1% 0%;
			    padding: 0% 0% 1% 0%;
			    font-size: 30px;
			    font-weight: bold;
			    border-bottom: 1px solid #ffc107;
			}

			.container-contact p{
				font-family: var(--font-primary);
				width: 100%;
				margin: 0px 0px 5px 0px;
				padding: 5px 0px;
				font-size: 15px;
			}

			.container-contact label{
				font-family: var(--font-primary);
				width: 100%;
				margin: 0px 0px 5px 0px;
				padding:0%;
				font-size: 15px;
			}

			.container-contact input,textarea{
				font-family: var(--font-primary);
				width: 100%;
				margin: 0%;
				padding: 5px 10px;
				font-size: 18px;
				border: solid 1.5px #bc995e69;
				outline: none!important;
			}

			.data-contact {
				width: 100%;
				margin: 0%;
				padding: 0%;
				display: flex;
				justify-content: space-between;
			}


			.data-contact div{
				width: 49%;
				margin: 0%;
				padding: 2%;
				background-color: #fff;
			}

			.data-contact div>form{
				width: 100%;
				padding: 0%;
				margin: 0%;
			}

			.data-contact div>form>ol{
				width: 100%;
				padding: 0%;
				margin: 0%;
				list-style: none;
			}

			.data-contact div>form>ol>li{
				width: 100%;
				margin: 0px 0px 15px 0px;
				padding: 0%;
			}

			.data-contact div>form>ol>li>ul{
				width: 100%;
				margin: 0%;
				padding: 0%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				list-style: none;
			}

			.data-contact div>form>ol>li>ul>li{
				width: 48%;
			}

			.data-contact div>ul{
				width: 100%;
				margin: 0%;
				padding: 0%;
				list-style: none;
			}

			.data-contact div>ul>li{
				margin: 0px 0px 10px 0px;
				padding: 0px 0px 0px 35px;
				position: relative;
				font-size: 18px;
				cursor: pointer;
			}

			.data-contact div>ul>li:hover{
				color: var(--color-gold-p);
			}

			.data-contact div>ul>li>i{
				position: absolute;
				left: 5px;
				top: 5px;
			}

	/** CONTENT ADMIN **/

		.principal-content{
			width: 100%;
			margin: 0%;
			padding:2%;
			background-color: #fff;
		}

		.box-admin-00 h2{
			font-family: var(--font-primary);
			width: 100%;
			margin: 0% 0% 0% 0%;
			padding: 1%;
			font-weight: bold;
			letter-spacing: 0.5px;
		}

		.box-admin-00 div{
			width: 100%;
			margin: 0%;
			padding: 1%;
		}

		.box-admin-00 div>ul{
			width: 100%;
			margin: 0%;
			padding: 0%;
			display: flex;
			justify-content: flex-start;
			list-style: none;
		}

		.box-admin-00 div>ul>li{
			margin: 0px 0px;
			padding: 0px 10px 0px 0px;
		}

		.box-admin-00 div>table{
			width: 100%;
		}

		.box-admin-00 td{
			border-bottom: 1.5px solid #00000082;
		}

/*** MODAL ***/

	.container-modal{
		font-family: var(--font-primary);
		width: 100%;
		margin: 0%;
		padding: 4%;
		position: relative;
	}

	.container-modal h2{
		font-family: var(--font-primary);
	    width: 100%;
	    margin: 0% 0% 3% 0%;
	    padding: 0% 0% 2% 0%;
	    font-size: 25px;
	    font-weight: bold;
	    color: #212121;
	    letter-spacing: 0.5px;
	    border-bottom: 1px solid #ffc107;
	}

	.container-modal h3{
		font-family: var(--font-primary);
	    width: 100%;
	    margin: 3% 0% 3% 0%;
	    padding: 2% 0% 2% 0%;
	    font-size: 18px;
	    color: #212121;
	    letter-spacing: 0.5px;
	    border-top: 1px solid #ffc107;
	}

	.container-modal label{
		width: 100%;
		margin: 0px 0px 5px 0px;
		padding: 0px 0px 0px 0px;
		font-size: 18px;
	}

	.container-modal input{
		width: 100%;
	    margin: 0px 0px 5px 0px;
	    padding: 5px 10px;
	    font-size: 18px;
	    border: 1px solid #0000004f;
	    outline: none;
	}

	.container-modal img {
		width: 50%;
		margin: 0% 25%;
	}

	.container-modal ul{
		width: 100%;
		margin: 0%;
		padding: 0%;
		list-style: none;
		display: flex;
	}

	.container-modal ul>li{
		width: 49%;
	}

	.container-modal div{
		width: 100%;
		margin: 2% 0% 3% 0%;
		padding: 0% 0% 0% 0%;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.container-modal div>button{
		width: 48%;
	    margin: 0%;
	    padding: 1%;
	    border: none;
	    outline: none;
	    font-size: 18px;
	    letter-spacing: 0.5px;
	}

	.btn-login-acept{
		background: #ffc107;
		color: #343a40;
		font-weight: bold;
	}

	.btn-login-cancel{
		background: #ff3f3f;
    	color: #ffffff;
	}

	.btn-login-register{
		background: #343a40;
		color: #fff;
	}

	.container-modal span{
		padding: 2% 0% 0% 0%;
		cursor: pointer;
	}

	.container-modal span:hover{
		color: #ffc107;
	}

	.container-modal iframe{
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.close-modal{
		position: absolute;
		top: 10px;
		right: 15px;
		font-size: 20px;
		z-index: 5;
		cursor: pointer;
	}
				
/*** FOOTER ***/

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

	.footer div>h2{
		width: 100%;
		font-family: var(--font-primary);
		font-size: 20px;
		color: var(--color-gold-p);
		letter-spacing: 0.5px;
	}

	.footer div>p{
		width: 100%;
		font-family: var(--font-primary);
		font-size: 15px;
		color: #fff;
		letter-spacing: 0.5px;
		cursor: pointer;
		transition: 0.3S;
		letter-spacing: 0.5px;
	}

	.footer div>p:hover{
		color: var(--color-gold-p);
		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: var(--color-gold-p);
		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;
			}

	}