/*Shaniba*/



    .brands-slider .card {



    height: 100px;



    display: -ms-flexbox;



    display: flex;



    -ms-flex-pack: center;



    justify-content: center;



    -ms-flex-align: center;



    align-items: center;



    padding: 0 1rem;



    overflow: hidden;



	}



	.redtop



	{



		background-color:var(--danger);

        height: 50px;



	}



	.white-text



	{



		color:var(--white)!important;



	}



    .card-product-list.card-body-inner {



    width: 375px !important;



    background: #cccccc;



}







@media (min-width: 1200px){



.category-columns {



    -webkit-column-count: 4;



    -moz-column-count: 4;



    column-count: 4;



}



}



	@media (min-width: 768px){



.category-columns {



    -webkit-column-count: 3;



    -moz-column-count: 3;



    column-count: 3;



}



}



@media (min-width: 576px){



.category-columns {



    -webkit-column-count: 4;



    -moz-column-count: 4;



    column-count: 4;



}



}

.card-pagination .my-pagination {

    margin: .2rem;

    justify-content: center!important;

}

/****** Columize for terms of use privacy policy*******/

.columnize-2 {

    margin: 0 0 1.313em;

    -webkit-column-count: 2;

    -moz-column-count: 2;

    column-count: 2;

    -webkit-column-gap: 3em;

    -moz-column-gap: 3em;

    column-gap: 3em;

    -webkit-column-rule: 1px dashed rgba(0,0,0,0.20);

    -moz-column-rule: 1px dashed rgba(0,0,0,0.20);

    column-rule: 1px dashed rgba(0,0,0,0.20);

}

.holderCircle { width: 500px; height: 500px; border-radius: 100%; margin: 10px auto; position: relative; }





.dotCircle { width: 100%; height: 100%; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; border-radius: 100%; z-index: 20; }

.dotCircle  .itemDot { display: block; width: 80px; height: 80px; position: absolute; background: #ffffff; color: #7d4ac7; border-radius: 20px; text-align: center; line-height: 80px; font-size: 30px; z-index: 3; cursor: pointer; border: 2px solid #e6e6e6; }

.dotCircle  .itemDot .forActive { width: 56px; height: 56px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; }

.dotCircle  .itemDot .forActive::after { content: ''; width: 5px; height: 5px; border: 3px solid #7d4ac7; bottom: -31px; left: -14px; filter: blur(1px); position: absolute; border-radius: 100%; }

.dotCircle  .itemDot .forActive::before { content: ''; width: 6px; height: 6px; filter: blur(5px); top: -15px; position: absolute; transform: rotate(-45deg); border: 6px solid #a733bb; right: -39px; }

.dotCircle  .itemDot.active .forActive { display: block; }

.round { position: absolute; left: 40px; top: 45px; width: 410px; height: 410px; border: 2px dotted #a733bb; border-radius: 100%; -webkit-animation: rotation 100s infinite linear; }

.dotCircle .itemDot:hover, .dotCircle .itemDot.active { color: #ffffff; transition: 0.5s;   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d4ac7+0,a733bb+100 */ background: #7d4ac7; /* Old browsers */ background: -moz-linear-gradient(left, #7d4ac7 0%, #a733bb 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #7d4ac7 0%, #a733bb 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #7d4ac7 0%, #a733bb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d4ac7', endColorstr='#a733bb', GradientType=1); /* IE6-9 */ border: 2px solid #ffffff; -webkit-box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .13); -moz-box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .13); box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .13); }

.dotCircle .itemDot { font-size: 40px; }

.contentCircle { width: 250px; border-radius: 100%; color: #222222; position: relative; top: 150px; left: 50%; transform: translate(-50%, -50%); }

.contentCircle .CirItem { border-radius: 100%; color: #222222; position: absolute; text-align: center; bottom: 0; left: 0; opacity: 0; transform: scale(0); transition: 0.5s; font-size: 15px; width: 100%; height: 100%; top: 0; right: 0; margin: auto; line-height: 250px; }

.CirItem.active { z-index: 1; opacity: 1; transform: scale(1); transition: 0.5s; }

.contentCircle .CirItem i { font-size: 180px; position: absolute; top: 0; left: 50%; margin-left: -90px; color: #000000; opacity: 0.1; }

@media only screen and (min-width:300px) and (max-width:599px) {

	.holderCircle { width: 300px; height: 300px; margin: 110px auto;}

.round {

    position: absolute;

    left: 40px;

    top: 45px;

    width: 210px;

    height: 210px;

    border: 2px dotted #a733bb;

    border-radius: 100%;

    -webkit-animation: rotation 100s infinite linear;

}

.contentCircle{

top:80px;

}





 }

	.holderCircle::after { width: 100%; height: 100%; }

	.dotCircle { width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }

}

@media only screen and (min-width:600px) and (max-width:767px) { }

@media only screen and (min-width:768px) and (max-width:991px) { }

@media only screen and (min-width:992px) and (max-width:1199px) { }

@media only screen and (min-width:1200px) and (max-width:1499px) { }

  .title-box .title { font-weight: 600; letter-spacing: 2px; position: relative; z-index: -1; }

        .title-box span { text-shadow: 0 10px 10px rgba(0, 0, 0, .15); font-weight: 800; color: #640178; }

        .title-box p {font-size: 17px; line-height: 2em; }



.demo{background-color: #2f2f2f;

border: 2px dashed #fff;

}

.main-timeline{

    font-family: 'Oxygen', sans-serif;

    position: relative;

    margin-top: 35px;

	margin-bottom: 40px;

}

.main-timeline:before{

    content: '';

    height: 100%;

    width: 1px;

    border-left: 3px dashed #fff;

    transform:translateX(-50%);

    position: absolute;

    left: 50%;

    top: 0;

}

.main-timeline .timeline{

    padding-left: 52px;

    display: inline-block;

    position: relative;

    z-index: 1;

}

.main-timeline .timeline:before,

.main-timeline .timeline:after{

    content: '';

    height: 25px;

    width: 25px;

    background-color: #FFAC3A;

    border-radius: 50%;

    border: 5px solid #FEC93F;

    transform: translateX(-50%) translateY(-50%);

    position: absolute;

    left: 50%;

    top: 50%;

    z-index: -1;

}

.main-timeline .timeline:after{

    background-color: #fff;

    height: 35px;

    width: 35px;

    border: none;

    border-radius: 0;

    transform: translateX(0) translateY(-50%) rotate(45deg);

    left: 40.5%;

}

.main-timeline .timeline-content{

    color: #000;

    background-color: #fff;

    width: 40%;

    border-radius: 10px;

    display: block;

    position: relative;

}

.main-timeline .timeline-content:hover{ text-decoration: none; }

.main-timeline .title{

    color: #0C3F42;

    background-color: #FEC93F;

    font-size: 20px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;

    padding: 10px 10px;

    margin: 0;

    border-radius: 10px 10px 0 0;

}

.main-timeline .description{

    font-size: 15px;

    letter-spacing: 1px;

    padding: 10px 20px 15px 20px;

    margin: 0;

}

.main-timeline .timeline-icon{

    color: #0C3F42;

    background-color: #FFC83F;

    font-size: 40px;

    text-align: center;

    line-height: 70px;

    height: 70px;

    width: 70px;

    border-radius: 50%;

    display: inline-block;

    transform: translateY(-50%);

    position: absolute;

    left: -35px;

    top: 63%;

}

.main-timeline .timeline:nth-child(even){

    padding-left: 0;

    padding-right: 52px;

}

.main-timeline .timeline:nth-child(even):after{

    left: auto;

    right: 40.5%;

}

.main-timeline .timeline:nth-child(even) .timeline-content{ float: right; }

.main-timeline .timeline:nth-child(even) .timeline-icon{

    left: auto;

    right: -35px;

}

.main-timeline .timeline:nth-child(even) .description{ padding: 10px 20px 15px 20px; }

.main-timeline .timeline:nth-child(4n+2):before{

    background-color: #2980b9;

    border: 5px solid #55b0ed;

}

.main-timeline .timeline:nth-child(4n+2) .title,

.main-timeline .timeline:nth-child(4n+2) .timeline-icon{

    background-color: #55b0ed;

}

.main-timeline .timeline:nth-child(4n+3):before{

    background-color: #c0392b;

    border: 5px solid #ff665b;

}

.main-timeline .timeline:nth-child(4n+3) .title,

.main-timeline .timeline:nth-child(4n+3) .timeline-icon{

    background-color: #ff665b;

}

.main-timeline .timeline:nth-child(4n+4):before{

    background-color: #16964b;

    border: 5px solid #2ecc71;

}

.main-timeline .timeline:nth-child(4n+4) .title,

.main-timeline .timeline:nth-child(4n+4) .timeline-icon{

    background-color: #2ecc71;

}

@media screen and (max-width:990px){

    .main-timeline .timeline:after{ left:40%; }

    .main-timeline .timeline:nth-child(even):after{ right:40%; }

    .main-timeline .timeline:nth-child(even) .timeline-content,

    .main-timeline .timeline-content{

        width: 39%;

    }

}

@media screen and (max-width:767px){

    .main-timeline:before{

        transform: translateX(0);

        left: 0;

    }

    .main-timeline .timeline:nth-child(even),

    .main-timeline .timeline{

        padding: 40px 30px 0;

        margin-bottom: 30px;

    }

    .main-timeline .timeline:before{

        transform: translateX(0) translateY(-50%);

        left: -11px;

    }

    .main-timeline .timeline:nth-child(even):after,

    .main-timeline .timeline:after{

        left: 28px;

    }

    .main-timeline .timeline:nth-child(even) .timeline-content,

    .main-timeline .timeline-content{

        width: 100%;

    }

    .main-timeline .timeline:nth-child(even) .timeline-icon,

    .main-timeline .timeline-icon{

        font-size: 30px;

        line-height: 50px;

        height: 50px;

        width: 50px;

        transform: translateY(0);

        left: auto;

        right: -20px;

        top: -35px;

    }

    .main-timeline .title{ font-size: 20px; }

    .main-timeline .timeline:nth-child(even) .description,

    .main-timeline .description{

        padding: 15px 15px 15px 15px;

    }

	/* sarfaraz css */

	.categories-grid .card-title {

		font-size: 16px !important;

	}

	.btn-group {

		display: block;

	  }

}



/**** Video Play Icon*/

.card-blog img {

            width: 100%;

            position: relative;

    }

        

      .playicon {

    width: 20%!important;

    position: absolute !important;

    top: 25%;

    left: 50%;

    transform: translate(-50%, -50%);

}



/******Scroll bar News for Home Page********/



hr {

    border: 0;

    height: 1px;

    background-image: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.2), transparent);

    background-image: -moz-linear-gradient(left, transparent, rgba(0, 0, 0, 0.2), transparent);

    background-image: -ms-linear-gradient(left, transparent, rgba(0, 0, 0, 0.2), transparent);

    background-image: -o-linear-gradient(left, transparent, rgba(0, 0, 0, 0.2), transparent);

    background-image: linear-gradient(left, transparent, rgba(0, 0, 0, 0.2), transparent);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#d6d6d6',GradientType=0 );

    margin-top: 10px;

    margin-bottom: 10px;

}



.news-scroll{

    overflow-y: scroll;

    height:185px;

}

/********8Product page right side box style********/

  .product-right-side{

            width: 25% !important;

    background-color: #ccc !important;

    text-align: center !important;

         }

	

.btn-wid{

	width:100%;

}

/* what are u looking css sarfaraz 09-01 (Transfer css only) */

.closeButton{
    height:29px;width:29px;
    background: url('https://www.ipfonline.com/assets/site/img/close2.png') no-repeat top left;
    left: -20px !important;
    top: -20px !important;
    opacity: 0.5;
  }
  
  .reopenButton{
    height:29px;width:250px;
    background: url('https://www.ipfonline.com/assets/site/img/open_bottom.png') no-repeat top left;
  }
  .btm-pop-bor{
    border:2px solid #e12c0b !important;
  }
  
  .btm-pop-btn{
    border:2px solid #fff !important;
    border-radius:30px !important;
  }
  .btm-pop-btn:hover{
    border:2px solid #fff !important;
    border-radius:30px !important;
  }
  .what-r-looking{
    width:600px;
    height:350px;
    z-index:2001;
    opacity:0;
    padding: 30px;
    background-image:url(https://www.ipfonline.com/assets/site/img/IPF-bottom1-pop.jpg);
    background-repeat:no-repeat;
  }
  .search-product-list {
    border: 1px solid #f44236 !important;
    border-radius: 4px;
    top: 33px;
    position: absolute;
    z-index: 9999;
    width: 100%;
    background: #fff;
  }
  
   /* media query for what are you looking for */
   @media screen and (max-width: 670px) {
    .what-r-looking {
        width: inherit !important;
        height: inherit  !important;
        background-size: cover  !important;
        background-position: 50% 50%  !important;
        background-repeat: no-repeat  !important;
        margin: 10px  !important;
    }
  }
  /* media query for what are you looking for */
  
  /* what are u looking css sarfaraz 09-01 */