*{
	margin:0;
	padding: 0;
	box-sizing: border-box;
}
hr{
	width: 96%;
}
.side-menu{
	visibility: hidden;
	padding: 1%;
	font-family: Rubik;
	background-color: none;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	font-size: 0.85em;
	width:155px;
	position:fixed;
	top: 4.8em;
	right: 0;
	background-color: #00000085;
	border-top-left-radius: 10px;
	 border-bottom-left-radius: 10px;
	 overflow: hidden;
	 white-space: nowrap;
	 box-shadow:20px #E3E0E0;
	/*height: 100vh;*/

	
}
.side-menu a{
	text-decoration: none;
	color: #E3E0E0;
	
}
.side-menu a:hover{
	color: #000000;
}
.toggler{
	position: absolute;
	top: 13px;
	right: 40px;
	z-index: 2;
	cursor: pointer;
	width: 40px;
	height: 40px;
	opacity: 0;
	
}

.hambuger{
	position: absolute;
	top: 13px;
	right: 40px;
	z-index: 1;
	width:50px;
	height: 40px;
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: none;
}
@media (max-width:1027px){
	.hambuger{
		top:13px;
		right: 30px;
		
	}
	.toggler{
		top: 13px;
		right: 30px;
	}
}
@media (max-width:640px){
	.hambuger{
		top:13px;
		right: 0px;
		
	}
	.toggler{
		top: 13px;
		right: 0px;
	}

}
.hambuger>div{
position: relative;
width:100%;
height: 2px;
background-color: rgb(90, 88, 88);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
.hambuger >div::before,
.hambuger>div::after{
	content: "";
	position: absolute;
	z-index:1;
	top: 10px;
	width:100%;
height: 2px;
background-color:rgb(75, 72, 72);
}
.hambuger>div::after{
	top: -10px;}
.toggler:checked + .hambuger>div{
	transform: rotate(270deg);
}
.side-menu>div{
	transform: scale(0);
	transition: all 0.4s ease;
}
.toggler:checked ~ .side-menu{
	visibility: visible;
}
.toggler:checked ~ .side-menu >div{
	transform: scale(1);
	transition-duration: 3.5s ease;
}

/*#side-menu:hover{
	width: 140px;
}
*/
.l{
	list-style-type: none;
	padding: 10%;
	display: block;
	margin-left: 20px;
	background-color: #00000091;
	border-radius: 10px;
	margin-top: 1em;
	text-align: center;
}
.l:hover{
	background-color: #40404fa6;
}

.imglogo{
	min-height: 9%;
	max-width: 15%;
	margin-left:0em;
	
	padding-top:none;
		padding-bottom: none;}
		@media (max-width:1050px){
               .imglogo{
				   min-height:1.5cm;
				   max-width: 5cm;
				   padding: none;
				   margin: 0%;
				   text-align: center;	   
			   }
		}
::-webkit-scrollbar{
	width: 8px; 
}
::-webkit-scrollbar-thumb{
	border-radius: 6px;
	background-color:#686868 ;
}

.navbar{
	padding-bottom: 2%;
		padding-top: 1.5%;}
		@media (max-width:40em){}
.block-a{
/*overflow: hidden;*/
  position: fixed;
  align-items: center;
  background-color:white;
  top:0;
  width: 100%;
  padding-top:0.5%;
  z-index: 999;
  padding-left: 3em;}
           @media (max-width:40em){
	            .block-a{
					padding-left: 0%;
					
				}
}
.Home{
	font-family: Rubik;
	background-color: none;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	padding: 1%;
	margin: 0.5%;
}

.Company{
	font-family:Rubik;
	background-color: none;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	padding: 1%;
	margin: 0.5%;
}
.Products{
	font-family:Rubik;
	background-color: none;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	padding: 1%;
	margin: 0.5%;
}
.Policy{
	font-family: Rubik;
	background-color: none;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	padding: 1%;
	margin: 0.5%;
}
.Offers{
	font-family: Rubik;
	background-color: none;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	padding: 1%;
	margin: 0.5%;
}
.News{
	font-family: Rubik;
	background-color: none;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	padding: 1%;
	margin: 0.5%;
}
.Location{
	font-family: Rubik;
	background-color: none;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	padding: 1%;
	margin: 0.5%;
}
.navbar a:hover{
	color:black;
}


.navbar a:active{
	color:#ffffff;
}
.all{
	margin-top: 9.2em;
	justify-content: center;
	margin-left:5%;
	margin-right: 5%;
}
 a{
	font-size: 0.85em;
}
 a{
	color: #686868;}

     
.container{
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	grid-gap:0em;
	
}
.Product1{
	background-color:rgb(0, 0, 0);

}
.Product2{
	background-color: rgba(63, 63, 63, 0.74);
	margin-top: 1em;

	
}
.Product3{
	background-color: rgb(4, 105, 95);
	margin-top: 1em;
	

}
@media (max-width:40em){
	.container{
		display: block;
	
		
	}
	
	.product1{
		margin-top: 1em;
	}
	.Product2{
		margin-top: 1em;
	}
	.Product3{
		
		margin-top: 1em;
	}
}
.products-img1{
	margin-top: 8em;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: auto;
	height:20EM;
	padding-top: 3EM;
	padding-right: 1em;
	padding-left: 1em;
 
}
.products-img2{
	
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: auto;
	height:20EM;
	padding-top: 3EM;
	padding-right: 1em;
	padding-left: 1em;
	
   
}
.products-img3{
	
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: auto;
	height:20EM;
	padding-top: 3EM;
	padding-right: 1em;
	padding-left: 1em;
	 
}
@media (max-width:487px){
	.products-img1{
		width: 300px;
		height: 200px;
	}
	.products-img2{
		width: 300px;
		height:200px;
	}
	.products-img3{
		width: 300px;
		height: 200px;
	}
	}
@media (max-width:331px){
.products-img1{
	width: 250px;
	height: 100px;
}
.products-img2{
	width: 250px;
	height: 100px;
}
.products-img3{
	width: 250px;
	height: 100px;
}
}
@media (max-width:287px){
	.products-img1{
		width: 200px;
		height: 100px;
	}
	.products-img2{
		width: 200px;
		height: 100px;
	}
	.products-img3{
		width: 200px;
		height: 100px;
	}
	}
.p3{
	margin-top: 3em;
	font-family:'Patrick Hand', cursive;;
	text-align: center;
	padding: 2%;
	color: white;
	position: relative;
	max-width: 50%;
	left: 25%;
}

.h1-p3{
	padding-top: 2EM;
	font-family:Signika Negative;
	font-weight: 1000px;
	text-align: center;
	color:white;}
.p-3{
	font-family: 'Patrick Hand', cursive;;
	text-align: justify;
	color: rgb(255, 255, 255);
	padding: 2%;
	margin-top: 2em;
	position: relative;
	max-width: 50%;
	left: 25%;
}

@media (max-width:50em){
	.p3{
		position: none;
		max-width:none;
		left: 0;
		text-align: justify;
	}
	.p-3{	position: none;
		max-width: none;
		left: 0;
		text-align: justify;}
	}