/*
 * General Styles
 */
* {margin: 0;padding: 0;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
header, footer, article, section, figure, nav, aside {display: block;}
body {color: #000;font-family: 'Open Sans', Arial, Helvetica,sans-serif;font-size: 62.5%;height: 100%;background: #f5f5f5;}
html, body {width: 100%;}
a {text-decoration: none;outline: none;color: #0066cc;}
a:hover {text-decoration: none;}
img {border: 0 none;max-width: 100%;}
ul, li {margin: 0;padding: 0;list-style-type: none;}


/*
 * Clearfix to clear floated Elements
 */
.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}
.clearfix:after {clear: both;content: ' ';display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}


.webstories-wrapper {max-width: 100%;margin: 0 auto;}
.webstories-header {padding: 10px;border-bottom: 1px solid #ccc;background: #fff;}
.webstories-header-adwrap {background: #fff;padding: 10px;}
.webstories-header-ad {margin: 0px auto;max-width: 728px;}
.webstories-header-ad img {max-width: 100%;}
.webstories-logo {margin: 0 auto;width: 150px;}

.webstories-container {background: #eff3f6;border-top: 1px solid #ccc;}
.webstories-mainheading {font-size: 34px;color: #000;font-weight: bold;text-transform: uppercase;padding: 10px;max-width: 1280px;margin: 0 auto;}
.webstories-icon {width: 45px;height: 38px;background: url(/images/webstories-icon.svg) no-repeat 0 0;display: inline-block;vertical-align: middle;}

.webstories-content {display: flex;justify-content: center;flex-wrap: wrap;position: relative;}
.websotries-storycard {overflow: hidden;white-space: normal;word-wrap: break-word;border-radius: 8px;margin: 20px 8px;box-shadow: 0 0 8px 0 rgba(53,53,53,0.18);cursor: pointer;transition: box-shadow .3s ease-out, transform .3s ease-out;background: #fff;width: 300px;transition:box-shadow .3s ease-out,transform .6s ease-out;}
.websotries-storycard:hover {transform: translateY(-4px);}
.websotries-storycard-inner {position: relative;}
.websotries-storycard-image {position: relative;overflow: hidden;}
.websotries-storycard-image img {max-width: 100%;width: 100%;transition: transform .9s;}
.websotries-storycard-image:hover img {transform: scale(1.2);}
.websotries-storycard-details {padding: 10px;}
.websotries-storycard-title {font-weight: 400;font-size: 16px;line-height: 1.4;color: #2a2a2a;margin: 0;padding: 0 0 10px 0;}
.websotries-storycard-timestamp {font-size: 13px;color: #454545;}

.webstories-pagination {position: absolute;bottom: 10px;width: 100%;left: 0;z-index: 1;}
.webstories-pagination-inner {display: flex;justify-content: space-between;padding: 0px 4px;}
.webstories-pagination-inner span {background-color: #e8e8e8;display: block;height: 2px;width: 100%;margin-right: 3px;border-radius: 2px;}



.webstories-more {text-align: center;display: block;margin: 20px auto;}
.webstories-more a {display: inline-block;width: 360px;height: 80px;border-radius: 50px;background: #2e2e2e;line-height: 80px;font-size: 20px;text-align: center;color: #fff;}



@media only screen and (max-width: 320px) {}
@media only screen and (max-width: 1024px) {
	.webstories-mainheading {font-size: 24px;}
	.webstories-icon {width: 30px;height: 24px;}
	.websotries-storycard {width: 45%;margin: 10px 5px;}
	.websotries-storycard-title {height: 65px;overflow: hidden;line-height: 1.3;padding: 0;}	
	.webstories-more a {width: 90%;height: auto;line-height: inherit;font-size: 16px;padding: 10px;}
}
            :root {
                --base-font-family: Poppins;
                --base-font-type: sans-serif;
                --primary-background: 255, 255, 255;
                --primary-foreground: #005f99;
                --secondary-background: 0, 95, 153;
                --secondary-foreground: #ffffff;
                --accent-background: #99005e;
                --accent-foreground: #ffffff;
                --light-background-1: #005f99;
                --light-foreground-1: #ffffff;
                --light-background-2: #b3cfe0;
                --light-background-3: #e5eff4;
                --light-background-4: #e5f4f3;
                --navbar-secondary-bg: #5a4726;
                --navbar-secondary-fg: #ffffff;
                --card-title-fg: #99005e;
                --card-text-fg: #ffffff;
                --section-title-fg: #005f99;
                --ad-block-bg: #005f99;
                --gradient-bg-color-1a: #009987;
                --gradient-bg-color-1b: #005f99;
                --gradient-bg-color-2a: #005f99;
                --gradient-bg-color-2b: #99005e;
                --gradient-bg-color-3a: #99005e;
                --gradient-bg-color-3b: #009987;
                --gradient-dark-story-bg-1: 115, 0, 70;
                --gradient-dark-story-bg-2: 0, 79, 128;
                --gradient-dark-story-bg-3: 0, 128, 113;
                --gradient-light-story-bg-1: 255, 213, 239;
                --gradient-light-story-bg-2: 212, 239, 255;
                --gradient-light-story-bg-3: 192, 255, 248;
            }
            .scrltop {
                color: #000;
                color: var(--accent-foreground);
                font-size: 25px;
                box-shadow: 0 14px 43px rgba(0, 95, 153, .53);
                width: 50px;
                height: 50px;
                border-radius: 100px;
                border: none;
                outline: none;
                background: #99005e;
                background: var(--accent-background);
                z-index: 9999;
                bottom: 75px;
                right: 10px;
                position: fixed;
                opacity: 0;
                visibility: hidden;
                transition: all .3s ease-in;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer
            }
            #mrkr {
                position: absolute;
                top: 100px;
                width: 0;
                height: 0
            }

#breadcrumb {
    margin: 0 10px;
    padding: 10px 0 5px 10px!important;
    font-size: .9em;
   background: #eff3f6!important;
}
.breadcrumb a {
    color: #000!important;
    float: left;
    font-size: 14px;
}
.bredcrumb-arrow {
    margin: 3px 7px;
    border: solid black;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 2px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    position: relative;
    top: 2px;
}
#breadcrumb span {
    float: left;
    font-size: 14px;
}