/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Hanlding Updates
-----------------------------------------------------------------*/
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);




.didyouknow .flexslider .slider-wrap img{
	max-height: 450px  !important;width:auto !important;margin:0 auto  !important;;
}

.didyouknow  .flex-control-nav {
    position: absolute;
    z-index: 10;
    text-align: center;
    top: 100%;
    left: 50%;
    right: 0;
    margin: 0;

}

.flex-control-nav li a {
    
    border: 1px solid #000 !important;
}
 .flex-control-nav li:hover a, .flex-control-nav li a.flex-active {
    background-color:#000 !important;
}


.product {
	transition: all 100ms cubic-bezier(0.165, 0.84, 0.44, 1);
	padding: 15px !important;
}
.product .product-desc{
	padding: 10px;
	background:#f5f5f5 
}
.product .product-desc .quantity{
	margin-bottom: 1rem;;
}
.product p{
	margin-bottom: 0;
}
.product:hover{
	background: #fff;
	border: 1px solid #ddd;
	box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
	

}
.product-detail:hover{
	background: #fff;
	border: none !important;
	box-shadow: none !important;
	

}
.product-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 200px;
	object-fit: contain;
}
.product-image-detail img{
	max-height: auto !important;
}
#contact-me{offset-rotate:reverse;position:fixed;z-index:299;width:auto;height:auto;font-size:1em;line-height:36px;text-align:center;color:#FFF;top:auto;left:auto;right:-51px;bottom:120px;cursor:pointer;border-radius:2px;-webkit-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:transform .3s ease;-o-transition:transform .3s ease;transition:transform .3s ease;transform:rotate(270deg);}
.gototop-active #contact-me{-webkit-transform:translateY(-50px);-ms-transform:translateY(-50px);-o-transform:translateY(-50px);transform:translateY(-50px);transform:rotate(270deg);}
body.side-panel-open #header.sticky-header #header-wrap{left:-300px;}
body #side-panel .widget{opacity:0;-webkit-transform:scale(0.9);-ms-transform:scale(0.9);-o-transform:scale(0.9);transform:scale(0.9);-webkit-transition:transform .3s ease, opacity .3s ease;-o-transition:transform .3s ease, opacity .3s ease;transition:transform .3s ease, opacity .3s ease;}
body.side-panel-open #side-panel .widget{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
#top-bar{
	background: #fff;
}
.tick {
    stroke-dasharray: 29px;
    stroke-dashoffset: 29px;
    animation: draw .5s cubic-bezier(.25, .25, .25, 1) forwards;
    animation-delay: .6s
}

.circle {
    fill-opacity: 0;
    stroke: #219a00;
    stroke-width: 16px;
    transform-origin: center;
    transform: scale(0);
    animation: grow 1s cubic-bezier(.25, .25, .25, 1.25) forwards;   
}

@keyframes grow {
    60% {
        transform: scale(.8);
        stroke-width: 4px;
        fill-opacity: 0;
    }
    100% {
        transform: scale(.9);
        stroke-width: 8px;
        fill-opacity: 1;
        fill: #219a00;
    }
}

@keyframes draw {
    100% { stroke-dashoffset: 0; }
}



.svg-container {
    display: table-cell;
    text-align: center;
	vertical-align: middle;
	margin: 0 auto;
}


	/* ----- | story-box-about-us | ----- */
    .story-box-about-us {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        cursor: pointer;
    }
    
    .story-box-about-us .story-box-about-us-image {
        width: 50%;
        height: auto;
        z-index: 2;
        overflow: hidden;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    
    .story-box-about-us .story-box-about-us-image img {
        display: block;
        height: 600px;
        width: 100%;
        opacity: 1;
        transition: opacity .3s ease;
    }
    
    .story-box-about-us:hover .story-box-about-us-image img {
        opacity: .9;
     }
    
    .story-box-about-us .story-box-about-us-info {
        box-sizing: border-box;
        width: 70%;
        height: auto;
        padding: 60px;
        margin: 35px 0 0 -20%;
        background: #ffffff;
        z-index: 4;
        box-shadow: 0 10px 45px rgba(0,0,0,.1);
        transition: all ease-in .3s;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    
    .story-box-about-us.description-left .story-box-about-us-info {
        -ms-flex-order: -1;
        order: -1;
        margin: 35px -20% 0 0;
    }
    
    .story-box-about-us .story-box-about-us-info .story-title {
    
        font-size: 26px;
        line-height: 1.4;
        font-weight: 700;
        letter-spacing: 0;
        color: #1d2c4c;
    }
    
    .story-box-about-us .story-box-about-us-info .story-box-about-us-content p {
        font-size: 15px;
        font-weight: 300;
        color: #666;
        line-height: 16px;
    }
    
    .story-box-about-us .story-box-about-us-info .story-box-about-us-content a {
        font-size: 16px;
        text-decoration: underline !important;
    }
    
    /* ----- story-box-about-us Responsive ----- */
    @media (max-width: 991px) {
    
        .story-box-about-us .story-box-about-us-image {
            height: auto;
            width: 100%;
            height: 400px;
            -ms-flex-order: -1;
            order: -1;
        }
    
        .story-box-about-us.description-left .story-box-about-us-info {
            -ms-flex-order: -1;
            order: -1;
            margin: 35px -20% 0 0;
        }
    
        .story-box-about-us.description-left .story-box-about-us-info { margin: -40px 5% 0; }
    
        .story-box-about-us .story-box-about-us-info {
            max-width: 90%;
            height: auto;
            -ms-flex-preferred-size: 90%;
            flex-basis: 90%;
            margin: -40px 5% 0;
        }
    
        #side-panel-trigger { right: 40px !important; }
    }
    
    
    @media (max-width: 767px) {
    
        .story-box-about-us.description-left .story-box-about-us-info { margin: -100px 5% 0; }
        .story-box-about-us .story-box-about-us-info {
            padding: 35px;
            text-align: center;
            margin: -100px 5% 0;
        }
        .customers-count { border-right: none }
    }
    
    @media (max-width: 479px) {
    
        .story-box-about-us .story-box-about-us-info {
            width: 100%;
            padding: 15px;
            text-align: center;
            margin: -200px 5% 0;
        }
        .story-box-about-us.description-left .story-box-about-us-info { margin: -200px 5% 0; }
    
        ul.tab-nav:not(.tab-nav-lg) li a i {display: none;}
    }
    
    
    
    /*Story-Box-products*/
    /* ----- | Story-Box | ----- */
    .story-box {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        cursor: pointer;
    }
    
    .story-box .story-box-image {
        width: 70%;
        height: 500px;
        z-index: 2;
        overflow: hidden;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    
    .story-box .story-box-image img {
        display: block;
        height: auto;
        width: 100%;
        opacity: 1;
        transition: opacity .3s ease;
    }
    
    .story-box:hover .story-box-image img {
        opacity: .9;
     }
    
    .story-box .story-box-info {
        box-sizing: border-box;
        width: 50%;
        height: 430px;
        padding: 60px;
        margin: 35px 0 0 -20%;
        background: #fff;
        z-index: 4;
        box-shadow: 0 10px 45px rgba(0,0,0,.1);
        transition: all ease-in .3s;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    
    .story-box.description-left .story-box-info {
        -ms-flex-order: -1;
        order: -1;
        margin: 35px -20% 0 0;
    }
    
    .story-box .story-box-info .story-title {
        
        font-size: 26px;
        line-height: 1.4;
        font-weight: 700;
        letter-spacing: 0;
        color: #1d2c4c;
    }
    
    .story-box .story-box-info .story-box-content p {
        font-size: 15px;
        font-weight: 300;
        color: #666;
        line-height: 16px;
    }
    
    .story-box .story-box-info .story-box-content a {
        font-size: 16px;
        text-decoration: underline !important;
    }
    
    /* ----- Story-Box Responsive ----- */
    @media (max-width: 991px) {
    
        .story-box .story-box-image {
            height: auto;
            width: 100%;
            height: 400px;
            -ms-flex-order: -1;
            order: -1;
        }
    
        .story-box.description-left .story-box-info {
            -ms-flex-order: -1;
            order: -1;
            margin: 35px -20% 0 0;
        }
    
        .story-box.description-left .story-box-info { margin: -40px 5% 0; }
    
        .story-box .story-box-info {
            max-width: 90%;
            height: auto;
            -ms-flex-preferred-size: 90%;
            flex-basis: 90%;
            margin: -40px 5% 0;
        }