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

body,html{
	margin: 0;
	padding: 0;
	font-family: var(--font-primary);
	background-image: url(../images/img/fondo-2.png);
	background-size: contain;
	background-repeat: repeat;
}

/*********** MATERIAL ICONS DESING *********************/
@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v27/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}

.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

/*
	gold #bc995e 
'	Jost', sans-serif
	bg-header #000 
	liliners #bc995e75.
*/
.modal-open{
	padding-right: 0%!important;
}

.resp-mobile{
	display: none!important;
}

.resp-desktop{
	display: block;
}

/*** dropdown-w-one ***/

		.dropdown-w-one{
			position: relative;
		}

		.dropdown-w-one div{
			position: absolute;
			width: 360px;
			top: -15px;
			padding: 0% 0% 0% 0%;
			margin: 0% 0% 0% 0%;
			background-color: #fff;
			opacity: 0;
		    visibility: hidden;
		    transition: all 0.3s ease 0s;
		    transform: translateY(15px);
		    border-radius: 3px 3px 3px 3px;
		    box-shadow: 0 0 5px rgba(0,0,0,0.5);
		    left: 110%;
    		z-index: 3;
		}

		.dropdown-w-one:hover div{
			opacity: 1;
		    visibility: visible;
		    padding: 0% 0% 0% 0%;
		    transition: all 0.3s ease 0s;
		    transform: translateY(0px);
		}

		.dropdown-w-one ul{
		    display: block;
		    margin: 0% 0% 0% 0%;
		    padding: 5% 0%;
		    width: 100%;
		    background-color: #ffffffe3;
		    border-radius: 5px;
		    border: none;
		}

		.dropdown-w-one li{
			font-family: 'Roboto Condensed', sans-serif;
		    width: 100%;
		    padding: 5% 10%;
		    margin: 0% 0% 0% 0%;
		    color: #111;
		    text-align: left;
		    border-radius: 0px;
		}

		.active-dropdown li:hover{
			color: #111;
			background: #0000;
		}


		.active-dropdown{
			text-align: center;
		}

		.active-dropdown p{
			font-family: 'Roboto Condensed', sans-serif;
		    font-size: 18px;
		    font-weight: bold;
		    letter-spacing: 1.5px;
		    color: #333;
		    width: fit-content;
		    background-color: #0000;
		    text-align: center;
		    margin: auto;
		    margin-bottom: 15px;
		    padding: 0% 10%;
		    border-radius: 5px;
		    border: 1.5px solid #cfa54bab;
		}

/*** HEAD ***/
	
	.head{
		width: 100%;
		margin:0%;
		padding: 0% 0%;
		background: var(--background-color-header);
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		font-size: 18px;
	}

	/* BOX 00 */

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

		.box-00 img{
			width: 60%;
			margin: 5% 0%;
			cursor: pointer;
		}

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

		.box-00 form>input{
		    width: 85%;
		    padding: 7px 10px;
		    border: 1.5px solid #0082cc;
		    border-radius: 5px 0px 0px 5px;
		    outline: none;
		    border-right: none;

		}

		.box-00 form>button{
		    width: 15%;
		    border: none;
		    outline: none;
		    color: #fff;
		    border-radius: 0px 5px 5px 0px;
		    background-color: #0082cc;
		    font-weight: bold;
		    letter-spacing: 1px;
		}

		.box-00 ul{
			width: 100%;
			margin: auto;
			padding: 0%;
			display: flex;
			justify-content: space-evenly;
			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;
			width: 100%;
		}

		.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: 25px;
    		color: #333;
		}

		.serch-mobil ul>li>ol>li>i:hover{
    		color: var(--color-gold-p);
		}

		.search-bar{
			width: 100%;
			display: none;
			margin-bottom: 12px;
		}

		/* lateral menu  */


			.lateral-menu{
				position: absolute;
			    width: 60%;
			    top: 0;
			    right: 0%;
			    background-color: #333;
			    z-index: 3;
	    		color: #fff;
	    		display: none;
			}

			.lateral-menu ul{
				width: 100%;
			    margin: 0%;
			    padding: 10px 15px 10px 25px;
			    list-style: none;
			    font-size: 18px;
			    letter-spacing: 1px;
			    position: relative;
			    line-height: 35px;
			}

			.lateral-menu ul>span{
				position: absolute;
			    left: -33px;
			    top: 0px;
			    color: #fff;
			    background: #333;
			    font-size: 18px;
			    padding: 3px 10px 0px 10px;
			}

		/* lateral menu user*/

			.lateral-menu-user{
				position: absolute;
			    width: 60%;
			    top: 0;
			    right: 0%;
			    background-color: #333;
			    z-index: 3;
	    		color: #fff;
	    		display: none;
			}

			.lateral-menu-user ul{
				width: 100%;
			    margin: 0%;
			    padding: 10px 15px 10px 25px;
			    list-style: none;
			    font-size: 18px;
			    letter-spacing: 1px;
			    position: relative;
			    line-height: 35px;
			}

			.lateral-menu-user ul>span{
				position: absolute;
			    left: -33px;
			    top: 0px;
			    color: #fff;
			    background: #333;
			    font-size: 18px;
			    padding: 3px 10px 0px 10px;
			}

		

	/* BOX 01 */

		.box-01{
			width: 100%;
			padding: 0% 4%;
			margin: 0%;
			text-align: center;
			justify-content: center;
			display: flex;
			border-bottom: 0px solid #e4e4e4;
			font-weight: bold;
			letter-spacing: 0.5px;
			background: #fff;
			color: #000;
		}

		.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: 300px;
			margin: 0%;
			padding: 0%;
			top: 40px;
			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: #000;
		    transition: 0.2s;
		}

		.box-01 ol>li:hover{
			width: 100%;
		    padding: 2% 5%;
		    color: #fff;
		    background-color: #000;
		    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{
			width: 150px;
		    margin: 0px 0px;
		    padding: 10px 0px;
		    cursor: pointer;
		    font-size: 18px;
		    position: relative;
		    color: #111;
		    line-height: 1.1;
		}

		.box-01 ul>li> i{
			color: #212121;
    		font-weight: 400;
		}

		.box-01 ul>li> b{
			letter-spacing: 0.5px;
		    font-size: 15px;
		    color: #444;
		}

		.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;
		}
		.ion-icon {
    		font-size: 22px!important;
		}
		.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 ***/
	.lateral-menu-0{
	    margin-top: 50%;
	    background: #fff;
	    box-shadow: 0 0.15rem 1.75rem 0 rgba(31, 45, 65, 0.15);
	    border-radius: 5px;
	    margin-left: 20%;
	    position: relative;
	}
	.lateral-menu-0 h1{
		color: #fff;
		background: #0082cc;
		font-size: 20px;
		padding: 5%;
		border-radius: 5px 5px 0px 0px;
		position: relative;
	}

	.lateral-menu-0 ul{
		padding: 0% 5%;
		position: relative;
	}
	
	.lateral-menu-0 li{
		list-style: none;
		margin: 15px 0px;
		padding-left: 15%;
		position: relative;
		font-size: 19px;
		cursor: pointer;
		transition: 0.3s;
	}

	#icon-1::after{
  		font-family: "Font Awesome 5 Free"; 
  		font-weight: 900; 
  		content: "\f1b2";
  		position: absolute;
  		left: 2%;
  		font-size: 16px;
  		color: #444;
	}

	#icon-2::after{
  		font-family: "Font Awesome 5 Free"; 
  		font-weight: 900; 
  		content: "\f12e";
  		position: absolute;
  		left: 2%;
  		font-size: 16px;
  		color: #444;
	}

	#icon-3::after{
  		font-family: "Font Awesome 5 Free"; 
  		font-weight: 900; 
  		content: "\f015";
  		position: absolute;
  		left: 2%;
  		font-size: 16px;
  		color: #444;
	}

	#icon-4::after{
  		font-family: "Font Awesome 5 Free"; 
  		font-weight: 900; 
  		content: "\f1b9";
  		position: absolute;
  		left: 2%;
  		font-size: 16px;
  		color: #444;
	}
	#icon-5::after{
  		font-family: "Font Awesome 5 Free"; 
  		font-weight: 900; 
  		content: "\f56b";
  		position: absolute;
  		left: 2%;
  		font-size: 16px;
  		color: #444;
	}

	#icon-6::after{
  		font-family: "Font Awesome 5 Free"; 
  		font-weight: 900; 
  		content: "\f290";
  		position: absolute;
  		left: 2%;
  		font-size: 16px;
  		color: #444;
	}
	#icon-7::after{
  		font-family: "Font Awesome 5 Free"; 
  		font-weight: 900; 
  		content: "\f0fb";
  		position: absolute;
  		left: 2%;
  		font-size: 16px;
  		color: #444;
	}
	#icon-1:hover:after, #icon-2:hover:after, #icon-3:hover:after, #icon-4:hover:after, 
	#icon-5:hover:after, #icon-6:hover:after, #icon-7:hover:after {
		color: #0082cc;
	}

	.lateral-menu-0 i{
		position: absolute;
		right: 5%;
		padding-top: 1%;
		color: #ddd;
		transform: rotate(90deg);
		transition: 0.3s;
	}

	.lateral-menu-0 li:hover i{
		color: #333;
		transition: 0.3s;
	    transform: rotate(0deg);
	}

	.content-support{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0%;
	}
	.content-support li{
		list-style: none;
		width: 49%;
	}
	.content-support  p{
		padding-left: 5%;
	}

	.content-support span, img{

	}
	.slider-00{
		z-index: 0;
		margin: 17% 5% 5% 5%;
	}
	.box-support {
	    width: 100%;
	    padding: 0% 3%;
	    margin-bottom: 4%;
	}
	.box-support ol {
		width: 100%;
	    padding: 0% 0%;
	    list-style: none;
	    display: flex;
	    flex-wrap: wrap;
	    /* justify-content: space-between; */
	    position: relative;
	}
	.box-support ol>li {
	    background: #fff;
	    padding: 1%;
	    width: 25%;
	    margin-bottom: 0%;
	    border: 0px solid #21252900;
	    position: relative;
	    border-right: 1px solid #eee;
	}
	.box-support img{
		width: 60%;
	}
	.box-support li > div{
		width: 49%;
	}
	.slider-copy{
		position: relative;
	}

	.slider-copy h2{
		font-family: var(--font-primary);
		position: absolute;
	    top: 8%;
	    left: 4%;
	    width: 40%;
	    font-size: 60px;
	    font-weight: bold;
	}


	.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: 3px solid #0082cc;
	}

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

	.slider-01 ul>li>h2{
		font-family: var(--font-primary);
		margin: auto 0%;
		padding: 0%;
		font-size: 30px;
		font-weight: bold;
		margin-top: 5%;
	}

	.slider-01 ul>li>i{
		font-size: 18px;
		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: 30%;
		text-align: center;
	}

	.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;
	}
	.oks{
		color: #fcae01;
	}

	.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;
		border-radius: 5px;
	}

	.slider-01 ol>li>div>ul>li:hover{
		background: var(--color-gold-p);
		color: #000;
	}

	.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;
		border: 1px solid #21252900;
	}

	.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;
		flex-wrap: wrap;
		justify-content: space-between;
	}

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

	.slider-logo ul>li>img{
		width: 80%;
		margin: 0% 10%;
		padding: 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: 3px solid #000000;
	}

	.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: 18px;
		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;
	}

	.slider-pc{
		display:block;
		width: 100%;
	}

	.slider-mobile{
		display: none;
	}

/*** CONTENTS ***/

	/** CONTENT 01 **/

		.content-01 {
			width: 100%;
			padding: 0% 1%;
			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{
			width: 100%;
		}

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

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

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

			.box-2{
				padding: 2%;
			}

		/** banner-box-2 **/

			.banners-box-2{
				margin: 2.5% 0% 0% 0%;
				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: 30px;
			    font-weight: bold;
			    border-bottom: 3px solid #0082cc;
			}

			.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;
				border: 1px solid #21252900;
			}

			.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: 18px;
			}

			.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: 17px;
			    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{
				border: none;
			}

			.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;
				border-radius: 5px;
			}

			.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: var(--color-gold-p);
				color: #000;
				font-size: 18px;
				border:none;
				outline: none;
				letter-spacing: 0.5px;
				transition: 0.3s;
				border-radius: 5px;
				font-weight: bold;
			}

			.container-product-1 ul>li>div>ul>li>button:hover{
			    background-color: #000;
			    color: #fff;
			    font-weight: normal;
			    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: 12%;
				margin-bottom: 5%;
			}

			.container-products-serch ul{
				width: 100%;
				margin: 0%;
				padding: 0%;
				list-style: none;
				position: relative;
			}

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

			/* pagination */

				.pagination{
					width: 100%;
					margin: 0% 0% 0% 0%!important;
					padding: 1% 0% 0% 0%!important;
					display: flex;
					justify-content: center;
					border-top: 3px solid var(--color-gold-p);
				}

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

				.pagination li:hover{
					border-bottom: 2px solid #000;
				}

				.pagination-active{
					border-bottom: 2px solid #000;
				}

				.btn_pagination{
					width: 100px!important;
				}

				.btn_pagination-desactive{
					border:none!important;
				}

			/* box category */

				.box-prod-category{
					width: 20%;
					position: absolute;
					left: 0;
					background-color: #fff;
					border-radius: 4px;
					z-index: 3;
					border: 0.5px solid #ddd;
				}

				.box-prod-category h2{ width: 100%; font-family: var(--font-primary);
margin: 20px 0px 0px 0px; padding: 0px 0px 10px 0px; font-size: 18px;
font-weight: bold; cursor: pointer; color: #0082cc; letter-spacing: 0.5px;
cursor: pointer; position: relative; }

				.box-prod-category h2>i{
					position: absolute;
					right: 5px;

				}

				.title-cat-active {
				    border-bottom: 2px solid #0082cc;
				}

				.box-prod-category ol{
					width: 100%;
					margin: 3% 0% 0% 0%;
					padding-left: 0px;
					list-style: none;
					color: #111;
				}

				.box-prod-category ol>li{
					font-size: 18px;
					cursor: pointer;
					background: #0000;
					padding: 5px 10px;
					color: #111;
					border-radius: 5px;
					position: relative;
				}

				.box-prod-category ol>li:hover{
					color: var(--color-gold-p);
					background: #0082cc;
					color: #fff;
				}

				.box-prod-category ol>li>div{
					width: 150%;
				    padding: 4px 4px;
				    left: 97%;
				    top: 0%;
				    position: absolute;
				    background: #fff;
				    border-radius: 5px 5px 0px 0px;
				    display: flex;
				    justify-content: flex-start;
				    flex-wrap: wrap;
				    border: 1px solid #ddd;
				    border-bottom: 2px solid #0082cc;
				}

				.box-prod-category ol>li>div>p{
					width: 33%;
				    margin: 0% 0% 0% 0%;
				    padding: 5px 5px 5px 5px;
				    font-size: 15px;
				    letter-spacing: 0.5px;
				    border-radius: 5px;
				    color: #111;
				}

				.box-prod-category ol>li>div>p:hover{
					background: #0000;
					color: #111;
				}


			/* box product serch */

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

				.resume_section h2{
				    font-family: var(--font-primary);
				    width: 100%;
				    margin: 0px;
				    padding: 12px 15px;
				    font-size: 45px;
				    font-weight: bold;
				    background: #0000;
				}

				.resume_section h3{
				    font-family: var(--font-primary);
				    width: 100%;
				    margin: 0px;
				    padding: 0px 0px;
				    font-size: 18px;
				    font-weight: bold;
				}

				.resume_section h4{
				    font-family: var(--font-primary);
				    width: 100%;
				    margin: 0px;
				    padding: 12px 15px;
				    font-size: 45px;
				    font-weight: bold;
				}

				.resume_section p{
				    font-family: var(--font-primary);
				    width: 100%;
				    margin: 0px;
				    padding: 3px 0px 0px 0px;
				    font-size: 16px;
				    font-weight: 600;
				    letter-spacing: 0.5px;
				    color: #2b2b2be6;
				    text-align: justify;
				}

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

				.resume_section ul>li {
					width: 49%;
    				padding: 15px 0px 15px 0px;
				}

				.resume_section img{
					width: 100%;
					margin-bottom: 10px;
					cursor: pointer;
				}

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

				.resume_section ol>li{
					width: 24%;
					text-align: center;
					font-family: var(--font-primary);
				    margin: 30px 0px 0px 0px;
				    padding: 0px 0px;
				    font-size: 18px;
				    font-weight: bold;
				}

				.resume_section ol>li>img{
					width: 35%;
					transition: 0.3s;
				}

				.resume_section ol>li>img:hover{
					transform: scale(1.09);
					transition: 0.3s;
				}

				.box-prod-serch h2{
				    font-family: var(--font-primary);
				    width: 100%;
				    margin: 0px 0px 0px 0px;
				    padding: 12px 15px;
				    font-size: 45px;
				    font-weight: bold;
				    color: #0082cc;
				    background: #f9fafb;
				}

				.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%;
	    			border: 0px solid #21252900;
				}

				.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;
				    border-radius: 5px;
				}

				.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: 0px 0px 5px 0px;
				    padding: 0%;
				    cursor: pointer;
				    border: 0px solid #cccccc;
				}

				.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: #e1b803;
				    font-weight: 400;
				}

				.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;
					margin: 0px;
				}

		/** 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%;
				}

				/** zoom ***/

					.box-images{
						position: relative;
						width: 100%;
						cursor: none!important;
						text-align: center;
					}

					.box-images img{
						border: 0px solid #00000045;
						border-radius: 5px;
					}

					.content-zoom{
						padding: 4%;								
					}   	

					.content-zoom 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: #000;
					    letter-spacing: 0.5px;
					    border-bottom: 3px solid #000000;
					}

					.img-magnifier-glass {
					    position: absolute;
					    border: 1px solid #000000b0;
					    border-radius: 50%;
					    cursor: none!important;
					    width: 190px;
					    height: 190px;
					}

				/* gallery */

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

				.gallery-zoom{
					position: relative;
					cursor: pointer;
					border: 0px solid #9091936b;
				}

				.gallery-zoom span {
					position: absolute;
					width: 100%;
					height: 100%;
					background-color: #0000;
					display: flex;
					visibility: hidden;
					transition: 0.3s;
				}

				.gallery-zoom i{
					margin: auto;
					visibility: hidden;
					font-size: 30px;
					color: #fff;
				}

				.gallery-zoom:hover span{
					background-color: #1111114f;
					z-index: 5;
					visibility: visible;
					transition: 0.3s;
				}

				.gallery-zoom:hover i{
					margin: auto;
					visibility: visible;
				}

				.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: 32px;
				    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: 27px;
				    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%;
				    font-size: 18px;
				}

				.items-stock{
					width: 100%;
				    margin: 3% 0% 2% 0%!important;
				    padding: 2% 5% 2% 10%!important;
				    color: #111;
				    position: relative;
				    border-radius: 5px;
				    font-size: 16px;
				    background-color: #fff!important;
				    border: 1px solid #eee;
				}

				.items-stock i{ 
					position: absolute;
				    left: 33px;
				    top: 18px;
				    font-size: 18px;
				}	

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

				.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;
					border-radius: 5px;
				}

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

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

				.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: 3px solid #000000;
			}

			/** 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;
				}

				.table-shoppingcart-mobile{
					width: 100%;
					background-color: #fff;
				}

				.table-shoppingcart-mobile div{
					width: 100%;
					border-bottom: 1px solid #0003;
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
				}

				.table-shoppingcart-mobile div>img{
					width: 35%;
					padding: 2%;
				}

				.table-shoppingcart-mobile div>ul{
					width: 65%;
					padding: 2%;
					margin: 0%;
					list-style: none;
				}

				.table-shoppingcart-mobile div>ul>li{
					font-family: var(--font-primary);
					font-size: 18px;
				}

				.table-shoppingcart-mobile div>ul>li>button{
					width: 50%;
				    margin: 5% 0% 0% 44%;
				    padding: 0px;
				    border: none;
				    outline: none!important;
				    font-size: 17px;
				    background-color: #F44336;
				    border-radius: 5px;
				    color: #fff;
				    letter-spacing: 0.5px;
				}

				.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;
					border-radius: 5px;
				}

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

				.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;
					flex-wrap: wrap;
					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: 18px;
				    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: 3px solid #000000;
				}
				.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: 18px;
					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: 18px;
				    font-weight: bold;
				}

				.personal-data-user h4>i{
					font-size: 18px;
					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: 12%;
			}

			.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: 3px solid #000000;
			}

			.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;
				flex-wrap: wrap;
				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;
				color: #e9a825;
			}

		/** order user **/

			.order-user{
				width: 100%;
			}

			.order-user h5{
				font-family: var(--font-primary);
			    width: 100%;
			    margin: 0% 0% 0% 0%;
			    padding: 0% 0% 0% 0%;
			    font-size: 15px;
			    font-weight: bold;
			    letter-spacing: 0.5px;
			}

	/** CONTENT ADMIN **/

		.principal-content {
			width: 100%;
		    margin: 0%;
		    padding: 0%;
		    position: relative;
		    background-color: #828282;
		}

		/* ASIDE */

		.class-none{
			display: none!important;
		}

			.aside-admin-active{
				left: -18%!important;
				transition: 0.3s;
			}

			.principal-content aside {
				position: fixed;
				transition: 0.3s;
				left: 0%;
			    width: 18%;
			    height: 100%;
			    padding: 1% 1%;
			    background-color: #333;
			    color: #fff;
			    z-index: 
			}

			.principal-content aside>span {
				position: absolute;
			    top: 0px;
			    right: -31px;
			    background-color: #0000;
			    color: #33333391;
			    font-size: 22px;
			    cursor: pointer;
			}

			.principal-content aside>div{
				width: 100%;
			    margin: 0% 0% 5% 0%;
			    padding: 0% 0% 5% 0%;
			    display: flex;
			    border-bottom: 2px solid #84848475;
			    justify-content: flex-start;
			}

			.principal-content aside>div>h1{
				width: 60px;
				height: 60px;
				border-radius: 100px;
				background-image: url('../images/logo/tilbud-0.png');
				background-size: 100% 100%;
				background-position: center;
				margin: auto 0px; 
				padding: 0px;
			}

			.principal-content aside>div>ul{
				margin: auto 0px;
				padding: 0px 0px 0px 15px;
				list-style: none;
			}

			.principal-content aside>div>ul>li{
				width: 100%
			}

			.principal-content aside>div>ul>li>h2{
				font-family: var(--font-primary);
				width: 100%;
				margin: 0%;
				padding: 0%;
				font-size: 22px;
			}


			.principal-content aside>div>ul>li>p{
				font-family: var(--font-primary);
				width: 100%;
				margin: 0%;
				padding: 0%;
			}

			.principal-content aside>ul{
				width: 100%;
				margin: 0%;
				padding: 0%;
				list-style: none;
			}

			.principal-content aside>ul>li{
				width: 100%;
				margin: 0px 0px 10px 0px;
				padding: 0%;
			}

			.principal-content aside>ul>li>div{
				width: 100%;
				margin: 0%;
				padding: 0%;
				background-color: #0000;
				position: relative;
			}

			.principal-content aside>ul>li>div>h3{
				font-family: var(--font-primary);
			    width: 100%;
			    margin: 0%;
			    padding: 0px 0px 0px 35px;
			    font-size: 22px;
			    color: #fff;
			    cursor: pointer;
			    position: relative;
			    letter-spacing:1px;
			}

			.principal-content aside>ul>li>div>h3>i{
				position: absolute;
				left: 5px;
				top: 2px;
				font-size: 18px;
			}

			.principal-content aside>ul>li>div>ol{
				width: 100%;
				height: 0%;
				padding: 0%;
				margin: 0%;
				list-style: none;
				display: none;
			}

			.principal-content aside>button{
				font-family: var(--font-primary);
			    position: absolute;
			    bottom: 2%;
			    width: 80%;
			    margin: 0% 5%;
			    padding: 0%;
			    border: none;
			    outline: none;
			    border-radius: 5px;
			    font-size: 18px;
			    /* font-weight: bold; */
			    letter-spacing: 0.5px;
			    background: #F44336;
			    color: #fff;
			}


		/* SECTION */

			.principal-content section{
				width: 82%;
				float: right;
				list-style: none;
				padding: 1%;
				transition: 0.3s;
				background-color: #fff;
			}

			.box-admin-00-active{
				width: 100%!important;
				transition: 0.3s!important;
			}

			.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;
				transition: 0.3s!important;
			}

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

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

			.box-admin-00 ul>li{
				margin: auto 0px;
				padding: 0px 15px 0px 0px;
				font-size: 18px;
				letter-spacing: 1px;
				font-weight: bold;
				cursor: pointer;
			}

			.box-admin-00 ul>li input{
				margin: 0px 0px;
			    padding: 1px 10px;
			    font-size: 18px;
			    font-weight: normal;
			    letter-spacing: 0.5px;
			    border-radius: 5px;
			    border: 1px solid #333333bd;
			}

			.box-admin-00 ul>li button{
				margin: 0px 0px;
			    padding: 2px 20px;
			    border: none;
			    background-color: #333;
			    border-radius: 5px;
			    font-size: 18px;
			    font-weight: normal;
			    color: #fff;
			    letter-spacing: 0.5px;
			    outline: none;
			}

			.box-admin-00 ul>li>div{
				position: relative;
			}

			.box-admin-00 ul>li>div>h3{
				font-family: var(--font-primary);
				margin: 0px 0px;
			    padding: 5px 20px;
			    border: none;
			    background-color: #333;
			    border-radius: 5px;
			    font-size: 18px;
			    font-weight: normal;
			    color: #fff;
			    letter-spacing: 0.5px;
			    outline: none;
			}

			.box-admin-00 ul>li>div>ol{
				font-family: var(--font-primary);
				position: absolute;
			    left: 0px;
			    top: 40px;
			    background: #333;
			    width: 200px;
			    padding: 0px 0px;
			    list-style: none;
			    letter-spacing: 1px;
			    font-weight: normal;
			    border-radius: 5px;
			    border: 1px solid #333;
			}

			.box-admin-00 ul>li>div>ol>li{
				color: #fff;
				padding: 5px 10px;
				border-radius: 5px;
			}

			.box-admin-00 ul>li>div>ol>li:hover{
				color: #333;
				background-color: #fff;
				font-weight: bold;
			}


			/*table styles*/

			.box-admin-00 table{
				font-family: var(--font-primary);
				width: 100%;
			}

			.box-admin-00 td{
				padding: 5px 10px;
    			border-bottom: 2px solid #00000026;
    			border-left: 1.5px solid #00000026;
    			border-right: 1.5px solid #00000026;
    			border-top: 1.5px solid #00000026;
			}

			.box-admin-00 table img{
				margin: 0px 5px;
				width: 50px;
				height: 50px;
			}

			.non-border{
				border: none!important;
			}

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

			.table-dashboard ol{
				width: 100%;
			    margin: 0px 0px 10px 0px;
			    padding: 0px;
			    display: flex;
			    justify-content: space-between;
			    flex-wrap: wrap;
			    list-style: none;
			    border-bottom: 2px solid #00000038;
			}

			.table-dashboard ol>li{
				width: 24.5%;
				margin-bottom: 12px;
				padding: 10px 15px;
				cursor: pointer;
				border-radius: 5px;
				display: flex;
				justify-content: flex-start;
			}

			.table-dashboard ol>li>h3{
				font-family: var(--font-primary);
			    width: 100%;
			    margin: auto 0%;
			    padding: 0%;
			    font-size: 25px;
			}

			.table-dashboard ol>li>h3>i{
				margin-right: 5px;
				font-size: 22px;
			}

			.table-dashboard ol>li>p{
				margin: auto 0%;
				padding: 0%;
				font-size: 15px
			}

			.bg-products{
				background-color: #1285b9;
    			color: #fff;
			}

			.bg-user{
				background-color: #469449;
    			color: #fff;
			}

			.bg-billing{
				background-color: #b94925;
    			color: #fff;
			}

			.bg-order{
				background-color: #4a4a4a;
    			color: #fff;
			}

/*** 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: #0082cc;
	    letter-spacing: 0.5px;
	    border-bottom: 3px solid #0082cc;
	}

	.container-modal h3{
		font-family: var(--font-primary);
	    width: 100%;
	    margin: 3% 0% 3% 0%;
	    padding: 2% 0% 2% 0%;
	    font-size: 18px;
	    color: #000;
	    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 ol{
		width: 100%;
		margin: 10px 0px;
		padding: 10px 10px 0px 10px;
		border: 1px solid #0000004f;
		list-style: none;
	}

	.container-modal ol>li{
		border: 1.5px solid #ffc1079e;
		margin-bottom: 10px;
	}

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

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

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

	.box-category{
		width: 100%!important;
		display: flex!important;
		justify-content: flex-start!important;
		margin: 0px 0px 10px 0px!important;
		padding: 0%!important;
		flex-wrap: nowrap!important;
	}


	.box-category h5{
		width: 49%;
		font-family: var(--font-primary);
	    margin: 0px 0px 0px 0px;
	    padding: 0px 0px;
	    font-size: 15px;
	    cursor: pointer;
	    border-radius: 5px;
	    color: #fff;
	    letter-spacing: 1px;
	    background-color: #000;
	}

	.box-category select{
		width: 49%;
		margin: 0px!important;
		padding: 0px!important;
	}


	.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: 18px;
		z-index: 5;
		cursor: pointer;
	}
				
/*** FOOTER ***/

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

	.footer div>h2{
		width: 100%;
		font-family: var(--font-primary);
		font-size: 18px;
		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;
	}


	.form-plus-01{
		display: block;
	}

/*** SUPORT ***/

 .suport{
 	width: 100%;
 	margin: 0%;
 	padding: 0%;
 	display: flex;
 }

 .suport div{
 	width: 60%;
    padding: 1%;
    margin: 1% auto;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 20px -6px #333333ba;
 }

 .suport div>h2{
 	font-family: var(--font-primary);
    width: 100%;
    margin: 0px;
    padding: 12px 15px;
    font-size: 45px;
    font-weight: bold;
    background: #ffed00;
 }

 .suport div>p{
 	font-family: var(--font-primary);
    width: 100%;
    margin: 0px;
    padding: 20px 0px 10px 0px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #2b2b2be6;
 }

 .suport div>form{
 	width: 100%;
 	padding: 15px;
 	display: flex;
 	justify-content: space-between;
 	flex-wrap: wrap;
 }

 .suport div>form>ul{
 	width: 49%;
 	list-style: none;
 	margin: 0%;
 	padding: 0%;
 }

 .suport div>form>ul>li{
 	width: 100%;
 }

 .suport div>form>ul>li>label{
 	font-family: var(--font-primary);
    width: 100%;
    margin: 0px;
    padding: 0px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #2b2b2be6;
 }

 .suport div>form>ul>li>input{
 	font-family: var(--font-primary);
 	width: 100%;
 	margin-bottom: 10px;
 	padding: 2px 4px;
 	font-size: 18px;
 	outline: none;
 	border-radius: 5px;
 	border: 2px solid #00000026;
 	color: #2b2b2be6;
 }

 .suport div>form>ul>li>textarea{
 	font-family: var(--font-primary);
 	width: 100%;
 	margin-bottom: 10px;
 	padding: 2px 4px;
 	font-size: 18px;
 	outline: none;
 	border-radius: 5px;
 	border: 2px solid #00000026;
 	color: #2b2b2be6;
 }

 .suport div>form>ul>li>button{
 	font-family: var(--font-primary);
 	width: 40%;
 	margin: 1% 30%;
 	padding: 10px 0px;
    border: none;
    outline: none;
    font-size: 18px;
    letter-spacing: 1px;
    background-color: #111;
    color: #fff;
    border-radius: 5px;
 }

 .suport button{
 	font-family: var(--font-primary);
 	width: 40%;
 	margin: 1% 30%;
 	padding: 10px 0px;
    border: none;
    outline: none;
    font-size: 18px;
    letter-spacing: 1px;
    background-color: #111;
    color: #fff;
    border-radius: 5px;
 }
 
/*** 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){


		.resp-desktop{
			display: none!important;
		}

		.resp-mobile{
			display: block!important;
		}

		.promotion-00{
		    margin-top: 0px!important;
		}

		.items-stock i {
		    position: absolute;
		    left: 2px;
		    top: 10px;
		    font-size: 18px;
		}
		.table-shoppingcart td>p {
			font-size: 12px;
		}

		/* BOX 00 */

			.serch-pc{
				display: none;
			}

			.serch-mobil{
				display: block;
			}

			.category-pc{
				display: none;
			}

			.category-mobil{
				display: flex;
			}

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

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

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

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

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

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

			.banners-box-2 {
			    margin: 2% 0% 8% 0%;
			}

			.container-product-1 {
			    margin-bottom: 5%;
			}

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

			.container-product-1 ul>li>div>h3 {
			    font-size: 18px;
			}

			.container-product-1 ul>li>div>h5 {
			    font-size: 15px;
			}

			.container-product-1 ul>li>div>p {
			    font-size: 15px;
			}

			.container-product-1 ul>li>div>ul>li>h6 {
			    margin: 0px 10px 0px 0px;
			}

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

			.content-01 {
			    margin: 15% 0% 0% 0%;
			}

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

			.box-prod-serch ol>li {
    			width: 49%;
			}

			.box-detail-product-img {
			    width: 100%;
			    margin-bottom: 10%;
			}

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

   	 		.box-detail-product-desc div>form {
    			justify-content: space-evenly;
    		}

    		.data-contact div{
				width: 100%;
				margin-bottom: 5%;
			}

			.data-checkout div{
				width: 100%;
				margin-bottom: 5%;
			}

			.btn_pagination {
			    width: 49%!important;
			}

			.table-total {
			    width: 100%!important;
			}

		/* slider */

			.slider-00 {
			    margin-top: 15%;
			    margin: 17% 0% 0% 0%;
			}

			.slider-pc{
				display: none;
			}

			.slider-mobile{
				display: block;
				width: 100%;
			}

			.slider-01 ol>li {
			    width: 100%;
			}

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

		/***/

		/******descript *****/
		.box-support ol>li {
			width: 100%;
		}

		.box-support img {
		    width: 35%;
		    margin: 5% 0%;
		}

		.resume_section ul>li {
		    width: 100%;
		    padding: 15px 0px 15px 0px;
		}

		.resume_section ol>li{
			width: 49%;
		}

		.box-prod-serch {
		    width: 100%;
		    margin-left: 0%;
		}

	}