/* sm=600 */
/* md=900 */
/* lg=1200 */
/* xl=1600 */
@media screen and (max-width: 899px) {
	.section__action__container {
		width: 85%;
	}

	.footer ul {
		width: 85%;
	}
}
@media screen and (max-width: 375px){
	.section__action__container{
		width: 75%;
	}
}
@media screen and (min-width: 600px) {
	.section__action__btn {
		max-width: 30rem;
		padding: 1.5rem;
		flex-basis: 40%;
	}

	.section__action__container {
		justify-content: space-evenly;
	}
}


@media screen and (min-width: 900px) {
	.section__action__container {
		width: 85%;
	}

	.footer ul {
		width: 85%;
	}
}
@media only screen and (min-width : 1200px) and (max-width : 1425px){
	.header__middle .header__nav__btn {
		margin-right: 0.5em;
		font-size: calc(-1px + 1vw)
	}
	.header__nav__btn{
		font-size: calc(-1px + 1vw)
	}
}
@media screen and (min-width: 1200px) {
	.header__nav__btn {
		display: inline-block;
	}

	.header__left {
		padding: 0 2rem;
		margin: 0 3rem;
	}

	.header__right {
		margin: auto 2rem;
	}

	.link__in__middle {
		display: none;
	}

	.section__action__container {
		width: 68%;
	}

	.footer ul {
		width: 68%;
	}
}

@media screen and (min-width: 1600px) {
	.footer ul {
		width: 50%;
	}

	.section__action__container {
		width: 50%;
	}
}

/* Custom Product page Responsive Css Start */
	@media only screen  and (max-width : 550px){
		.menu>h3{
			display: none;
		}
		.inner__svg__area>img {
			top: 30%;	
		}
	}
	@media screen and (max-width: 1199px){
		.menu{
			width: 100%;
		}
	}
	@media only screen and (min-width : 992px) and (max-width : 1199px){
		.inner__svg__area>img{
			left: 18%;
			width: 65%;
		}
	}
	@media only screen and (min-width : 768px) and (max-width : 991px){
		.inner__svg__area>img{
			left: 12%;
			width: 75%;
		}
	}
	@media only screen  and (max-width : 767px){
		.inner__svg__area>img{
			left: 0%;
			width: 100%;
		}
	}
	@media only screen and (min-width : 1200px) and (max-width : 1450px){
		.inner__svg__area>img{
			left: 10%;
		}
	}
/* Custom Product page Responsive Css End */

/* =========================
Custom Order page Dots Navigator Responsive Css
================================= */
@media only screen and (max-width : 449px) {
	.Upper {
		left: 82% !important;
		top: 34% !important;
	}
	.Border {
		top: 33% !important;
		left: 20% !important;
	}
  }

  @media only screen and (max-width : 539px) {
	.Lock{
		top: 33% !important;
		left: 71% !important;
	}
	.Bottom {
		left: 45% !important;
		top: 38% !important;
	}
  }

@media only screen and (min-width : 450px) and (max-width : 540px){
	.Upper {
		left: 78% !important;
		top: 39% !important;
	}
	.Border {
		top: 49% !important;
		left: 55% !important;
	}
}

@media only screen and (min-width : 540px) and (max-width : 767px){
	.Lock {
		top: 36% !important;
		left: 70% !important;
	}
	.Bottom {
		left: 48% !important;
		top: 46% !important;
	}
	.Upper {
		left: 84% !important;
		top: 39% !important;
	}
	.Border {
		top: 39% !important;
		left: 24% !important;
	}
}


@media only screen and (min-width : 768px) and (max-width : 1200px){
	.Lock {
		top: 38%;
		left: 66%;
	}
	.Bottom {
		left: 50% !important;
		top: 46% !important;
		z-index: 99;
	}
}
@media only screen and (min-width : 992px) and (max-width : 1200px){
	.Border{
		top: 52% !important;
		   left: 28% !important;
	}
}
@media only screen and (min-width : 1200px) and (max-width : 1700px){
	.Lock {
		top: 33%;
		left: 38%;
	}
}
@media only screen and (min-width : 900px) and (max-width : 1200px){
	.Upper {
		left: 58% !important;
		top: 57% !important;
	}
}
@media only screen and (min-width : 768px) and (max-width : 899px){
	.Upper {
		left: 68% !important;
		top: 45% !important;
	}
}

/* EndScope Baseket Dots */
@media only screen and (max-width : 550px) {
	.end__frame {
		top: 29% !important;
		left: 19% !important;
	}
	.end__lid {
		top: 33% !important;
		left: 28% !important;
	}
	.end__border {
		top: 40% !important;
		left: 31% !important;
	}
   }

   @media only screen and (min-width : 550px) and (max-width : 800px){
	.end__border {
		top: 49% !important;
		left: 37% !important;
	}
	.end__lid {
		top: 37% !important;
    	left: 32% !important;
	}
   }
   @media only screen and (min-width : 931px) and (max-width : 1199px){
	.end__frame {
		top: 35% !important;
		left: 25% !important;
		}
	}
	@media only screen and (min-width : 767px) and (max-width : 930px){
		.end__frame {
			left: 20% !important;
		}
	}
	@media only screen and (min-width : 800px) and (max-width : 1200px){
		.end__lid {
			top: 39% !important;
			left: 44% !important;
		}
	}
	/* Trinket basket Dots */
	@media only screen and (max-width : 550px){
		.trin__frame {
			top: 34% !important;
			left: 6% !important;
		}
		.trin__lid {
			top: 33% !important;
			left: 32% !important;
		}
		.trin__bottom {
			position: absolute;
			top: 44%;
			left: 57%;
			z-index: 99;
		}
		.trin__border {
			left: 68%;
			top: 42%;
		}
		.trin__lock {
			top: 41%;
			left: 32%;
			z-index: 99;
		}
	   }
	   @media only screen and (min-width : 550px) and (max-width : 1200px){
		.trin__lid {
			top: 40% !important;
			left: 42% !important;
		}
		.trin__border {
			left: 50%;
			top: 57%;
		}
		.trin__lock {
			left: 33%;
			top: 50%;
		}
	   }
	   @media only screen and (min-width : 550px) and (max-width : 767px){
		.trin__frame {
			top: 39% !important;
			left: 6% !important;
		}
		.trin__bottom {
			top: 49%;
			left: 54%;
		}
	   }
	   @media only screen and (min-width : 768px) and (max-width : 991px){
		.trin__frame {
			top: 34% !important;
			left: 22% !important;
		}
		.trin__bottom {
			top: 49%;
			left: 63%;
		}
		.trin__lock {
			top: 48%;
			left: 36%;
		}
	   }
	   @media only screen and (min-width : 992px) and (max-width : 1199px){
		.trin__frame {
			top: 32% !important;
			left: 31% !important;
		}
	
		.trin__frame{
			top: 34%;
			left: 22%;
		}
		.trin__bottom {
			top: 47%;
			left: 54%;
		}
		.trin__lock {
			top: 51%;
			left: 40%;
		}
	   }
	   @media only screen and (min-width : 1200px) and (max-width : 1450px){
			.trin__frame {
				top: 37%;
				left: 11%;
			}
			.trin__lock {
				left: 24%;
			}
	   }
	   @media only screen and (min-width : 1450px) and (max-width : 1750px){
			.trin__lock {
				top: 48%;
				left: 27%;
			}
	   }
	   @media screen and (min-width: 1200px) {
			.menu__btn{
				display: none !important;
			}
	   }
	   @media screen and (max-width: 1200px) {
			.form-left{
				display: none !important;
			}
	   }
	   @media only screen and (min-width : 500px) and (max-width : 1199px){
			.nes__border{
				top: 50%;
				left: 33%;
			}
			.nes__lid{
				top: 37%;
				left: 40%;
		   	}
	   }
	   @media only screen and (max-width : 499px){
			.nes__border{
				top: 41%;
    			left: 33%;
			}
			.nes__lid{
				top: 33%;
    			left: 21%;
			}
	   }

/* =========================
Custom Order page Dots Navigator Responsive Css END
================================= */