@media (max-width:600px)
{
    .catpgtitlecls
    {
        margin-top: 69px;
        background: #db0909;
        color: #fff;
        padding-left: 79px;
        padding-top: 20px;
    }
}
@media (min-width:778px)
{
    .catpgtitlecls {
    margin-top: 80px;
    width: 100%;
    color: #fb0000;
    border: 1px solid;
}

.align-sham {
    text-align: left;
    margin-top: 10px;
    padding-left: 22px;
    font-size: 22px;
    font-family: fantasy;
}
}

	.catsection
	{
		background-image: url('bckimg.jpg');
	}
	.essential_banner
	{
		padding: 1px;

	}
  .banner12 {
    background-size: contain;
    height: 337px;
    width:100%;
}
	.secheading {
    margin-top: 20px;
    color: red;
}

@media (min-width:800px)
    {
        .subcat-float-box-element
        {
            margin-top:10px;
        }

        .subcatbox-float-box-element
        {
            margin-top:10px;
            width: 250px;
        }
    }
    
	@media (max-width:600px)
	{
		    .subcat-float-box-element {
        width: 40%;
        height: 156px;
        position: relative;
        margin-left: 25px;
        margin-right: 3px;
        margin-bottom: 39px;
        margin-top: -4px;
        padding-top: 9px;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    }

     .subcatbox-float-box-element {
        width: 40%;
        height: 156px;
        position: relative;
        margin-left: 25px;
        margin-right: 3px;
        margin-bottom: 39px;
        margin-top: -4px;
        padding-top: 9px;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    }
		.rightalign
		{
			display: none;
		}
		.cattext {
    margin-top: -56px;
    padding: 5px;
    line-height: 11px;
    color: #000;
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 700;
}
    .banner12 {
    background-size: contain;
    width: 100%;
    height: 140px;
}

		 #search-box {
            width: 100%;
            padding: 20px;
    		height: 50px;
    		box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        }
	    .iconsubmit {
        position: absolute;
        
        top: 63px;
        color: #ffffff;
        cursor: pointer;
        right: 15px;
        background: #0a7e30;
        padding-right: 15px;
        padding-left: 18px;
        border-radius: 17px;
        height: 50px;
        padding-top: 11px;
    }

	}
	
	@media (min-width:778px)
	{
		.rightalign {
    float: right;
    padding: 7px;
}
		.cattext {
    position: absolute;
    margin-top: -90px;
    padding: 14px;
    color: #000;
    font-size: 17px;
    text-align: left;
    font-family: ui-rounded;
    font-weight: 600;
    line-height: normal;
		}
		.col-lg-31
		{
			flex: 0 0 25%;
        	max-width: 20%;
		}
		#carousel-example
		{
			padding: 35px;
		}
		 #search-box {
            width: 75%;
            padding: 20px;
    		height: 65px;
    		background-color: #ffffff !important;
       		box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    		
        }
		.iconsubmit {
	   	position: absolute;
        font-size: 2.7em;
        top: 46px;
        color: #ffffff;
        cursor: pointer;
        right: 169px;
        padding-right: 26px;
        background-color: #0a7e30;
        padding-left: 26px;
        border-radius: 10px;
	}

		.tagline1
	{
		display:none;
	}
	}

	.p-r
	{
		background-color: #4e4747;
	}
	
	#product-list {
    list-style: none;
    text-align: left;
}
.ajaxplist
{
	position: relative;
    margin-top: 0px;
    text-align: start;
    background-color: #fdd6d6;
    margin: 5px;
    width: 80%;
}
.col-item
{
    border: 2px solid #e1201d;
    border-radius: 5px;
    background: #FFF;
    margin-top:8px;
}
.col-item .photo img
{
    margin: 0 auto;
    width: 100%;
}

.col-item .info
{
    padding: 10px;
    border-radius: 0 0 5px 5px;
    margin-top: 1px;
}
.col-item:hover .info {
    background-color: rgb(244 215 220 / 50%);
}
.col-item .price
{
    /*width: 50%;*/
    float: left;
    margin-top: 5px;
}

.col-item .price h5
{
    line-height: 20px;
    margin: 0;
}

.price-text-color
{
    color: #00990E;
}

.col-item .info .rating
{
    color: #003399;
}

.col-item .rating
{
    /*width: 50%;*/
    float: left;
    font-size: 17px;
    text-align: right;
    line-height: 52px;
    margin-bottom: 10px;
    height: 52px;
}

.col-item .separator
{
    border-top: 1px solid #FFCCCC;
}

.clear-left
{
    clear: left;
}

.col-item .separator p
{
    line-height: 20px;
    margin-bottom: 0;
    margin-top: 10px;
    text-align: center;
}

.col-item .separator p i
{
    margin-right: 5px;
}
.col-item .btn-add
{
    width: 50%;
    float: left;
}

.col-item .btn-add
{
    border-right: 1px solid #CC9999;
}

.col-item .btn-details
{
    width: 50%;
    float: left;
    padding-left: 10px;
}
.controls
{
    margin-top: 20px;
}
[data-slide="prev"]
{
    margin-right: 10px;
}



/* Product Slider Carousel Css Start */


    .blog .carousel-indicators {
	left: 0;
	top: auto;
    bottom: -80px;

}

/* The colour of the indicators */
.blog .carousel-indicators li {
    background: #a3a3a3;
    border-radius: 50%;
    width: 19px;
    height: 0px;
}

.blog .carousel-indicators .active {
background: #707070;
}
.blog-img
{
    margin-left:28px;
    max-width:100%;
}


/* Product Slider Carousel Css End */


        #search-results {
            margin-top: 10px;
        }
        .resultline
        {
            max-width: 40%;
            background-color: #f9d6d6;
            margin-bottom: 1px;
            color: red;
            font-size: 18px;
            font-weight: 600;
            font-family: 'Roboto', sans-serif;
        }

.searchbox
{
    width:50%;
    height:40px;
    border:1px solid #a39e9e;
    border-radius:15px; 
    
}
.searchform
{
    margin-bottom:20px;
}

#livesearch
{
    width:50%;
}

.card-inners
{
    border: 5px solid #e10707;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    border-radius: 10px;
    background-color: #ecd9d98a;
}


/* Product grid css start */


		.entranceclass {
    background-color: #f3f6f7;
    padding: 20px;
}
.entranceheading {
    padding-bottom: 15px;
}

.productcont {
/*    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;*/
    padding: 20px;
}

/* product discount badge Start */


a{text-decoration:none;}
.firstLine {
    font-size: 15px;
    font-weight: 300;
}

.badges {
    position: relative;
    margin: -13px 134px;
    width: 50px;
    height: 51px;
    background: #552F87;
    border-radius: 100%;
    color: #FFF;
    line-height: 13px;
    text-align: center;
    text-transform: uppercase;
    font-family: "Open Sans",sans-serif;
    -webkit-animation: 3s ease-in-out 0s normal none infinite running swing;
    -moz-animation: 3s ease-in-out 0s normal none infinite running swing;
    -o-animation: 3s ease-in-out 0s normal none infinite running swing;
    animation: 3s ease-in-out 0s normal none infinite running swing;
    
    -webkit-transform-origin: 100px -71px;
    -moz-transform-origin: 100px -71px;
    -o-transform-origin: 100px -71px;
    transform-origin: 100px -71px;
    top: -52px;
}

.badges:after{
    content:'';
    position:absolute;
    top: -26px;
    left: 23px;
    width: 2px;
    height: 29px;
    border-radius:0%;
    background:#000;
}
/*.badges:before{
    content:'';
    position:absolute;
    top:90px;left:90px;
    width:20px;height:20px;
    border-radius:100%;
    -webkit-box-shadow: 0px -82px 0px -2px #fff, 0px -100px #552F87,20px -98px #552F87,39px -94px #552F87,56px -85px #552F87,71px -72px #552F87,
                83px -57px #552F87,93px -40px #552F87,98px -20px #552F87,100px 0px #552F87,
                
                -20px -98px #552F87,-39px -94px #552F87,-71px -72px #552F87,
                -56px -85px #552F87,-83px -57px #552F87,-93px -40px #552F87,-98px -20px #552F87,-100px 0px #552F87,
                
                0px 100px #552F87,-20px 98px #552F87,-39px 94px #552F87,-56px 85px #552F87,
                -71px 72px #552F87,-83px 57px #552F87,-93px -40px #552F87,-98px 20px #552F87,-93px 40px #552F87,
                
                20px 98px #552F87,39px 94px #552F87,56px 85px #552F87,
                71px 72px #552F87,83px 57px #552F87,93px 40px #552F87,98px 20px #552F87;
                
    
    -moz-box-shadow: 0px -82px 0px -2px #fff, 0px -100px #552F87,20px -98px #552F87,39px -94px #552F87,56px -85px #552F87,71px -72px #552F87,
                83px -57px #552F87,93px -40px #552F87,98px -20px #552F87,100px 0px #552F87,
                
                -20px -98px #552F87,-39px -94px #552F87,-71px -72px #552F87,
                -56px -85px #552F87,-83px -57px #552F87,-93px -40px #552F87,-98px -20px #552F87,-100px 0px #552F87,
                
                0px 100px #552F87,-20px 98px #552F87,-39px 94px #552F87,-56px 85px #552F87,
                -71px 72px #552F87,-83px 57px #552F87,-93px -40px #552F87,-98px 20px #552F87,-93px 40px #552F87,
                
                20px 98px #552F87,39px 94px #552F87,56px 85px #552F87,
                71px 72px #552F87,83px 57px #552F87,93px 40px #552F87,98px 20px #552F87;
                
    
    -o-box-shadow: 0px -82px 0px -2px #fff, 0px -100px #552F87,20px -98px #552F87,39px -94px #552F87,56px -85px #552F87,71px -72px #552F87,
                83px -57px #552F87,93px -40px #552F87,98px -20px #552F87,100px 0px #552F87,
                
                -20px -98px #552F87,-39px -94px #552F87,-71px -72px #552F87,
                -56px -85px #552F87,-83px -57px #552F87,-93px -40px #552F87,-98px -20px #552F87,-100px 0px #552F87,
                
                0px 100px #552F87,-20px 98px #552F87,-39px 94px #552F87,-56px 85px #552F87,
                -71px 72px #552F87,-83px 57px #552F87,-93px -40px #552F87,-98px 20px #552F87,-93px 40px #552F87,
                
                20px 98px #552F87,39px 94px #552F87,56px 85px #552F87,
                71px 72px #552F87,83px 57px #552F87,93px 40px #552F87,98px 20px #552F87;
                
    
    box-shadow: 0px -82px 0px -2px #fff, 0px -100px #552F87,20px -98px #552F87,39px -94px #552F87,56px -85px #552F87,71px -72px #552F87,
                83px -57px #552F87,93px -40px #552F87,98px -20px #552F87,100px 0px #552F87,
                
                -20px -98px #552F87,-39px -94px #552F87,-71px -72px #552F87,
                -56px -85px #552F87,-83px -57px #552F87,-93px -40px #552F87,-98px -20px #552F87,-100px 0px #552F87,
                
                0px 100px #552F87,-20px 98px #552F87,-39px 94px #552F87,-56px 85px #552F87,
                -71px 72px #552F87,-83px 57px #552F87,-93px -40px #552F87,-98px 20px #552F87,-93px 40px #552F87,
                
                20px 98px #552F87,39px 94px #552F87,56px 85px #552F87,
                71px 72px #552F87,83px 57px #552F87,93px 40px #552F87,98px 20px #552F87;
}*/


@-webkit-keyframes swing{
    0%{-webkit-transform:rotate(5deg);}
    50%{-webkit-transform:rotate(-5deg);}
    100%{-webkit-transform:rotate(5deg);}
}
@-moz-keyframes swing{
    0%{-moz-transform:rotate(5deg);}
    50%{-moz-transform:rotate(-5deg);}
    100%{-moz-transform:rotate(5deg);}
}
@-o-keyframes swing{
    0%{-o-transform:rotate(5deg);}
    50%{-o-transform:rotate(-5deg);}
    100%{-o-transform:rotate(5deg);}
}
@keyframes swing{
    0%{transform:rotate(5deg);}
    50%{transform:rotate(-5deg);}
    100%{transform:rotate(5deg);}
}
		/* Product discount badge end */


		.p_tag {
        background: #ff0016;
    margin-top: 15px;
    position: absolute;
    color: #fff;
    padding: 5px;
    width: 100px;
}
		#pbuybtn {
    margin-left: 20px;
    border-radius: 7px;
    width: 100px;
}
		.product_name {
    margin-left: 18px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: #5a5656;
    margin-top: 10px;
    max-width: 70%;
    margin-bottom: 20px;
    height: 30px;

}
.float-parent-element {
    width: 16%;
    margin: 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    padding-top: 10px;
    background-color: #fff;
}
	@media (max-width: 600px)
	{
		.p_tag {
			        background: #ff0016;
				    margin-top: 0px;
				    position: absolute;
				    color: #fff;
				    padding: 5px;
				    width: 100px;
				    margin-left: -18px;
				}
		.entranceclass {
	    background-color: #f3f6f7;
	    padding: 5px;
	}
		.float-parent-element { 
		/*    width: 40%;
        height: 220px;
        position: relative;
        margin-left: 4px;
        margin-right: 30px;
        margin-bottom: 25px;*/
        width: 46%;
        height: 262px;
        position: relative;
        margin-left: 10px;
        margin-right: 0px;
        margin-bottom: 42px;
        margin-top: -30px;
        padding-top: 8px;
		} 
		.float-box-element{
		width: 40%;
        height: 156px;
        position: relative;
        margin-left: 25px;
        margin-right: 3px;
        margin-bottom: 61px;
        margin-top: -24px;
        padding-top: 9px;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
		}
		
		.float-child-element { 
		    float: left; 
		    width: 100%; 
		}
		.pimgstyle {
        max-width: 136px !important;
        /* border: 4px solid #ff051dd4; */
        margin-left: -15px;
        margin-top: -9px;
        height: 156px;
    		}

    		.sctimgbox{
    			width: 144px !important;
        /* border: 4px solid #ff051dd4; */
        margin-left: -15px;
        margin-top: -8px;
        height: 113px;
    		}

          

    		.scatimgstyle {
        max-width: 136px !important;
        /* border: 4px solid #ff051dd4; */
        margin-left: -15px;
        margin-top: -9px;
        height: 156px;

    		}

	/*	.product_name
		{
		margin-left: 18px;
        font-size: 14px;
        font-weight: 600;
        font-family: sans-serif;
        color: #5a5656;
        margin-top: 2px;
        max-width: 100% !important;
		}
*/
	}
         .product_name
		{
		margin-left: 17px;
        font-size: 10px;
	    font-weight: 600;
	    font-family: inherit;
	    color: #5a5656;
	    margin-top: 6px;

		}

/* Product Grid css End */


/* Start banner slider custom css */


/* Parallax Horizontal Scroller - by Bree Dulmage, 2020 */
/*#proparallax {*/
/*	display: block;*/
/*	position: relative;*/
/*	overflow: hidden;*/
/*	min-height: 37.5rem;*/
/*	border: 10px solid black;*/
/*	box-shadow: 0px 8px 10px 8px grey;*/
/*}	*/

#proparallax {
    display: contents;
    position: relative;
    overflow: initial;
    min-height: 37.5rem;
    box-shadow: 0px 8px 10px 8px grey;
}

#proparallax img {
	position: absolute;
	width: 100%;
	height: 37.5rem;
	overflow: hidden;
	object-fit: cover;
	background-image:cover;
	
}

@keyframes parallax_one { /* controls img.one movement */
	0% { /* .imageloaded */
		height: 37.5rem;
		width: 100%;
		left: 0rem;
		opacity: 1;
	}
	/* .imagehold runs from 0 to 27.77% */
	27.77% { /* .imageloaded */
		width: 100%;
		left: 0rem;
	}
	27.78% { /* .imagepreunload */
		width: 100%;
		left: 0rem;
		right: 50rem;
	}
	33.33% { /* .imageunloaded */
		height: 37.5rem;
		width: 100%;
		left: 0rem;
		right: 0rem;
		opacity: 1;
	}
	33.34% { /* imageoff */
		opacity: 0;	
	}
	94.43% { /* .imageon */
		left: 0rem;
		opacity: 0;
	}
	94.44% { /* .imageinitial */
		height: 37.5rem;
		width: 100%;
		left: 50rem;
		opacity: 1;
	}
	100% { /* .imageloaded */
		width: 100%;
		left: 0rem;
		opacity: 1;		
	}
}

@keyframes parallax_two { /* controls img.two movement */
	0% { /* .imageoff */
		height: 37.5rem;
		width: 100%;
		left: 0rem;
		opacity: 0;
	}
	27.77% { /* .imageon */
		opacity: 0;
		width: 100%;
		left: 0rem;
	}
	27.78% { /* .imageinitial */
		width: 100%;
		height: 37.5rem;
		left: 50rem;
		opacity: 1;
	}
	33.33% { /* .imageloaded */
		width: 100%;
		left: 0rem;
	}
	/* .imagehold runs from 33.34% - 61.10% */
	61.10%{ /* .imageloaded */
		width: 100%;
		left: 0rem;
	}
	61.11% { /* .imagepreunload */
		width: 100%;
		left: 0rem;
		right: 50rem;
	}
	66.67% { /* .imageunloaded */
		width: 100%;
		right: 0rem;
		left: 0rem;
		height: 37.5rem;
		opacity: 1;
	}
	66.68% { /* .imageoff */
		opacity: 0;
	}
	100% { /* .imageoff */
		opacity: 0;
	}
}

@keyframes parallax_three { /* controls img.three movement */
	0% { /* .imageoff */
		opacity: 0;
	}
	61.10%{ /* .imageon */
		opacity: 0;
	}
	61.11% { /* .imageinitial */
		width: 100%;
		height: 37.5rem;
		left: 50rem;
		opacity: 1;		
	}
	66.67% { /* .imageloaded */
		width: 100%;
		left: 0rem;
	}
	/* .imagehold runs from 66.67% - 94.43% */
	94.43% { /* .imageloaded */
		width: 100%;
		left: 0rem;
	}
	94.44% { /* .imagepreunload */
		width: 100%;
		left: 0rem;
		right: 50rem;
	}
	100% { /* imageunloaded */
		width: 100%;
		right: 0rem;
		left: 0rem;
		height: 37.5rem;
		opacity: 1;
	}
}

@media (max-width:600px)
{
    #proparallax img.one
    {
        animation-name: parallax_one; /* controls img.one movement */
    	animation-timing-function: linear;
    	animation-iteration-count: infinite;
    	animation-duration: 10s;
    	animation-direction: forwards;
    	object-fit: contain;  
    }
    #proparallax img.two
        {
    	animation-name: parallax_two; /* controls img.two movement */
    	animation-timing-function: linear;
    	animation-iteration-count: infinite;
    	animation-duration: 10s;
    	animation-direction: forwards;
    	object-fit: contain;
        }
        
        #proparallax img.three
        {
        	animation-name: parallax_three; /* controls img.three movement */
        	animation-timing-function: linear;
        	animation-iteration-count: infinite;
        	animation-duration: 10s;
        	animation-direction: forwards;
        	object-fit: contain;
        }
}

#proparallax img.one{
	animation-name: parallax_one; /* controls img.one movement */
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 10s;
	animation-direction: forwards;
	object-fit: cover;
}

#proparallax img.two {
	animation-name: parallax_two; /* controls img.two movement */
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 10s;
	animation-direction: forwards;
	object-fit: cover;
}

#proparallax img.three {
	animation-name: parallax_three; /* controls img.three movement */
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 10s;
	animation-direction: forwards;
	object-fit: cover;
}

/* End slider style css */