*{
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	margin: 0; padding: 0;
	box-sizing: border-box;
	outline: none;
	border: none;
	text-decoration: none;
	text-transform: capitalize;
	transition: .2s linear;
}
body {
  background-color: #f7f7f7;
  width: 95%;
}

.navbar{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.4rem 7%;
	background-color: rgba(206, 206, 206, 0.8);
	border-bottom: 1px solid #90c4c4;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
}

.navbar .navbar-logo{
	font-size: 2rem;
	font-weight: 700;
	color: black;
}


.navbar .navbar-nav a{
	color: #000;
	display: inline-block;
	font-size: 1.3rem;
	margin: 0 1rem;
}

.navbar .navbar-nav a:hover{
	color: burlywood;
}

.navbar .navbar-nav a::after{
	content: '';
	display: block;
	padding-bottom: 0.5rem;
	border-bottom: 0.1rem var(--black);
	transform: scaleX(0);
	transition: 0.2s linear;
}

.nabar navbar-nav a:hover::after{
	transform: scaleX(0.5);
}	


.box-container{
    margin: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18.5rem, 1fr));
    gap: 5rem;
    padding: 1rem;
}

.page-wrapper {	
	gap: 1.8rem;
	margin-top: 1rem;
}

.page-wrapper .page-inner {
  vertical-align: middle;
}

.el-wrapper {
  width: 360px;
  padding: 15px;
  margin: 15px auto;
  background-color: #fff;
}

@media (max-width: 991px) {
  .el-wrapper {
    width: 345px;
  }
}

@media (max-width: 767px) {
  .el-wrapper {
    width: 290px;
    margin: 30px auto;
  }
}

.el-wrapper:hover .h-bg {
  left: 0px;
}

.el-wrapper:hover .price {
  left: 20px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #818181;
}

.el-wrapper:hover .add-to-cart {
  left: 50%;
}

.el-wrapper:hover .img {
  webkit-filter : blur(7px);
  -o-filter: blur(7px);
  -ms-filter: blur(7px);
  filter: blur(7px);
  filter: progid:DXImageTransform.Microsoft.Blur(pixelradius='7', shadowopacity='0.0');
  opacity: 0.4;
}

.el-wrapper:hover .info-inner {
  bottom: 155px;
}

.el-wrapper:hover .a-size {
  -webkit-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  transition-delay: 300ms;
  bottom: 50px;
  opacity: 1;
}

.el-wrapper .box-down {
  width: 100%;
  height: 60px;
  position: relative;
  overflow: hidden;
}

.el-wrapper .box-up {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.el-wrapper .img {
    width: 60%;
    height: 100%;
  padding: 20px 0;
  -webkit-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
  -moz-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
  -o-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
  transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
  /* ease-out */
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  /* ease-out */
}

.h-bg {
  -webkit-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
  -moz-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
  -o-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
  transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
  /* ease-out */
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  /* ease-out */
  width: 660px;
  height: 100%;
  background-color: #3f96cd;
  position: absolute;
  left: -659px;
}

.h-bg .h-bg-inner {
  width: 50%;
  height: 100%;
  background-color: #464646;
}

.a-size .size {
  color: #252525;
}

.cart {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}

.cart .price {
  -webkit-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
  -moz-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
  -o-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
  transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
  /* ease-out */
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  /* ease-out */
  -webkit-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  transition-delay: 100ms;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #252525;
}

.cart .add-to-cart {
  -webkit-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
  -moz-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
  -o-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
  transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
  /* ease-out */
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
  /* ease-out */
  -webkit-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  transition-delay: 100ms;
  display: block;
  position: absolute;
  top: 50%;
  left: 110%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.cart .add-to-cart .txt {
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
}







@media (max-width: 1366px){
	html{
		font-size: 80%;
	}	.navbar img{
		width: 8rem;
		margin-left: -4rem;
	}
	
	.navbar .navbar-logo{
		font-size: 2rem;
		font-weight: 700;
		margin-left: -25rem;
		color: black;
	}
  .box-container{
    margin: 5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18.5rem, 1fr));
    gap: 5rem;
    padding: 1rem;
}

}

@media screen and (max-width: 970px){
	html{
		font-size: 85%;
	}
	.navbar img{
		width: 6rem;
		margin-left: -2rem;
	}

	.navbar .navbar-logo{
		font-size: 1.4rem;
		font-weight: 700;
		margin-left: -1rem;
		color: black;
	}
}

@media screen and (max-width: 820px){
	html{
		font-size: 65%;
	}

	.navbar img{
		width: 6rem;
		margin-left: -2rem;
	}

	.navbar .navbar-logo{
		font-size: 1.5rem;
		font-weight: 700;
		margin-left: -30rem;
		color: black;
	}

  .box-container{
    margin: 5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18.5rem, 1fr));
    gap: 5rem;
    padding: 1rem;
}


}

@media (max-width: 768px){
	html{
		font-size: 65%;
	}

	.navbar img{
		width: 6rem;
		margin-left: -2rem;
	}

	.navbar .navbar-logo{
		font-size: 1.5rem;
		font-weight: 700;
		margin-left: -25rem;
		color: black;
	}

  .box-container{
    margin: 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 5rem;
    padding: 1rem;
}

}

@media screen and (max-width: 540px){s
	.navbar img{
		width: 6rem;
		margin-left: -2rem;
	}

	.navbar .navbar-logo{
		font-size: 1.3rem;
		font-weight: 700;
		margin-left: -13rem;
		color: black;
	}
  
}

@media (max-width: 450px){
	html{
		font-size: 60%;
	}
	.navbar img{
		width: 6rem;
		margin-left: -2rem;
	}

	.navbar .navbar-logo{
		font-size: 1.3rem;
		font-weight: 700;
		margin-left: -1.8rem;
		color: black;
	}
}

@media screen and (max-width: 393px){
	html{
		font-size: 50%;
	}

	.navbar img{
		width: 6rem;
		margin-left: -2rem;
	}

	.navbar .navbar-logo{
		font-size: 1.5rem;
		font-weight: 700;
		margin-left: -5rem;
		color: black;
	}

}

@media screen and (max-width: 290px){
	html{
		font-size: 45%;
	}

	.navbar img{
		width: 6rem;
		margin-left: -2rem;
	}

	.navbar .navbar-logo{
		font-size: 1.3rem;
		font-weight: 700;
		margin-left: -1rem;
		color: black;
	}

  .box-container{
    margin-left: -1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 5rem;
    padding: 1rem;
}
}