/*.container { border:solid 1px blue; }
.row-fluid { border:solid 1px red; }*/
/*
# Blog Tile
```
    <div class="blog tile">
        <div class="row-fluid">
            <div class="span-6">
                <article class="listing feature" style="height: 313px;">
                    <div class="category" style="background-color:#bdbdbd;">
                        <a href="/news">News</a>
                    </div>
                    <section class="main">
                        <a href="/news">
                            <header>
                                <h2>Canadian Banks are Accepting Red Cross Donations for Syrian Relief</h2>
                            </header>
                            <img src="/Assets/CBA/Images/Article/about-canadian-banking-association.jpg" srcset="/Assets/CBA/Images/Article/about-canadian-banking-association.jpg" alt="Canadian Banks are Accepting Red Cross Donations for Syrian Relief">                                        
                        </a>
                    </section>
                </article> 
            </div>
        </div>
    </div>
```
*/
/*
[//]: # (Screen Read AODA)
[//]: # (****************)
*/
.off-screen {
    position: absolute;
    left: -99999px
}

.blog.tile section { padding: 0; }
/*.blog.tile .listing { margin: 3.6rem 0; }*/


/* 
[//]: # (tile - basic & feature)
*/

.blog.tile .article-wrapper { margin-bottom: 7rem; }

.blog .listing article.main { padding: 0; height: auto; }
.blog .feature article.main { display: block; overflow: hidden; position: relative; height: auto; }

@media (max-width:767px) {
    .blog.tile .article-wrapper { /*float: left;*/ width: 100%; }
    .blog .listing article.main { display: block; overflow: hidden; position: relative; }
}

@media (min-width:768px) {
    .blog .listing article.main,
    .blog .feature article.main { height: 328px; }
    .blog .listing article.main { display: block; overflow: hidden; position: relative; }
}

@media (min-width:992px) {
    .blog .listing article.main,
    .blog .feature article.main { height: 340px; }
}

@media (min-width:1200px) {
    .blog .listing .article-wrapper.main { width: initial; }
}

.blog .listing header { height: 9.2rem; color: #fff; padding: 1.1rem 1.5rem; background-color: #ffffff; }
.blog .listing header h2 { font-size: 1.8rem; margin-bottom: 0; padding: 0; color: #002850; font-weight: 400; line-height: 1.2em; }

.blog .listing a:hover { color: #fff !important; }
.blog .listing a:hover header { color: #fff !important; background-color: #007CBD; }
.blog .listing a:hover header h2,
.blog .listing a:hover header h2:after { color: #fff; }


.blog .listing .category { font-size: 1.4rem; position: absolute; top: -35px; right: 15px; text-align: right; color: #fff; background-color: #fff; }
.blog .listing .category a { color: #fff; padding: 10px 12px 10px 40px; min-width: 175px; }
.blog .listing .category a:hover { color:inherit !important; }

.blog .listing a.block { display: block; width:100%;}


@media (min-width:768px) {
    .blog .listing .category { top: -24px; }
    .blog .listing .category a { padding: 5px 12px 5px 40px; }
}

.blog .listing .date { font-size: 14px; position: absolute; bottom: 0; padding: 10px 15px; width: 100%; }



.blog .listing .social-tile header { background-color: inherit !important; box-shadow: none; }
.blog .listing .social-tile h2,
.blog .listing .social-tile p,
.blog .listing .social-tile a { color: #fff; }

.blog .listing .social-tile a:hover { text-decoration: underline; }
.blog .listing .social-tile a:hover h2 { text-decoration: underline; }
.blog .listing .social-tile .tile-content { padding: 10%; }

.blog .listing .social-tile h2 { float: left; }

.blog .listing .social-tile img.social-icon { float: left; width: auto; margin-right: 10px;  }



/* 
[//]: # (overrides)
*/
/* I don't think we need these if the html is added correctly...
@media (min-width: 768px) { .blog.tile article.span-6, .blog.tile article.span-6-md { width: 48.6%; margin-right: 2.6%; float:left}

    .blog.tile article.span-6:nth-child(2n+2),
    .blog.tile article.span-6-md:nth-child(2n+2) { margin-right: 0; }
}

@media (min-width: 1200px) {
    .blog.tile article.span-4-lg { width: 31.6%; margin-right: 2.6%; }
    .blog.tile article.span-4-lg:nth-child(2n+2) { margin-right: 2.6%; }
    .blog.tile article.span-4-lg:nth-child(3n+3) { margin-right: 0; }
}*/

/*
# Blog Filter
```
<div class="filter">
        Sort articles by: 
        <a href="#">Featured</a> /
        <a href="#">Latest</a> /
        <a href="#">Most Popular</a>
    </div>
```
*/
.filter { font-size: 2.5rem; color: #19507d; border-bottom: 1px solid #cccccc; margin: 3.5rem 0 1rem; margin-bottom: 7rem; letter-spacing: 1px; line-height: 30px; padding-bottom: 10px; }
.filter a { color: #19507d; }
.filter a.active { font-weight: bold; }

.filter-details { padding: 0rem 0 0.7rem; border: 0; color: #808080; }
.filter-details a { color: #808080; }

.filter-searched { margin: 3.5rem 0 1rem; }
.filter-searched span { margin-top: -8px; color: #808080; font-weight: bold; }

.filter a:hover { opacity: 0.6; }

@media (min-width: 768px) {
    .filter { font-size: 1.6rem; }
}
@media (min-width: 992px) {
    .filter { padding: 1rem 1.5rem; background-color: #fff; }
}

/*
# Blog Pagination
```
<ul class="pagination clearfix">
    <li><a class="prev collapse" href="#">Prev</a></li>
    <li><a class="paging01 current" data-index="1" href="#">1</a></li>
    <li><a class="paging32" data-index="2" href="#">2</a></li>
    <li><a class="next" href="#">Next</a></li>
</ul>
```
*/
.pagination { font-size: 1.6rem; text-align: center; margin-bottom: 3rem; padding: 8px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.pagination li { display: inline-block; margin: auto; min-width: 18px; }
.pagination li a.current { font-weight: bold }

/* 
[//]: # (transition/animation)
*/

.blog .listing { visibility: hidden; }


/*
# Blog Detail - Side Content
```
<div class="blog tile">
    <article class="detail span-12">        
        <aside class="span-4">
            <div class="category" style="background-color:#3f4892">
        <a href="/?cat=Financial-Literacy">Financial Literacy</a>
            </div>
            <h1>Heading one</h1>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</p>
            <time>Posted on: 03 June 2016</time>
            <div class="author">
                <p><strong>Media Contacts:
                <br>
                <span style="font-size: 15px; letter-spacing: 0.3px;">77 perspiciatis unde <br>
                Omnis iste &nbsp;#2134 &nbsp;<br>
                Doloremque </span></strong></p>
                </div>
            <section class="tags">
                <ul class="">
                    <li><a>tag here</a></li>
                </ul>
            </section>
            <div class="related-links">
                    <a href="http://">Sed ut perspiciatis unde omnis</a>
                    <a href="http://">error sit voluptatem accusantium</a>
                    <a href="http://">laudantium totam rem aperiam</a>
                </div>      
        </aside>
    </article>
</div>
```
*/

.blog .detail aside a,
.blog .detail aside p,
.blog .detail aside time,
.blog .detail aside .tags,
.blog .detail aside .related-links,
.blog .detail aside .author,
.blog .detail aside ul { font-size: inherit; line-height: 2.1rem; }

.blog h3 { border-top: 0; margin: 2rem 0; }
.blog .detail aside .category { display: inline-block; color: #fff; margin: 0; padding: .8rem 1.5rem; }
.blog .detail aside .category a { color: #fff; }
.blog .detail aside h1 { font-size: 2.6rem; color: #333; padding: 4rem 0 2.2rem; line-height: 3.4rem; font-weight: 600; }
.blog .detail aside time { padding: 1.6rem 0; margin: 0.5rem 0 1.8rem !important; font-weight: bold; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; display: block; }
.blog .detail aside .author { border-bottom: 1px solid #ccc; font-weight: 700; }

.blog article .tags ul { padding-bottom: 0; }

/* 
[//]: # (margin top is must negative margin is to align left and right to the container)
*/
.blog.tile article.detail { margin: 0; }
.blog.tile article.detail .span-4 { padding-left: 0; }

@media (max-width:768px) {
    .blog.tile article.detail .mobile-only,
    .blog.tile article.detail .share-right,
    .blog.tile article.detail .main,
    .blog.tile article.detail .span-4 { padding-left: 0; padding-right: 0; }
    .blog article .tags ul { width: 100% }
}

@media (min-width:768px) {
    .blog .detail aside .category { display: inline-block; }
    .blog .detail aside h1 { font-size: 2.85rem; }
    .blog .detail section.main { padding-top: 8rem; }
    .blog .detail section.main h2:first-child { padding-top: 0; }
    .blog .detail section.main a { padding-top: 0; display: inline; }
}

.related-links a { font-weight: 700; text-decoration: underline; margin-bottom: 2rem; display: block; }
.related-article-line { margin-bottom: 4rem; }
#adaptiveRelatedLinks .related-links { padding: 2.8rem 0; }



.related-articles h3 { margin-bottom: 5rem; }



/*
[//]: # (Social Share)
*/
#SocialMediaLink .addthis_toolbox a div { 
    padding-left: 0; width: 33px; height: 30px; font-size: 1px; background-repeat: no-repeat;
    background-size: contain; margin-bottom: 2rem;

}

#SocialMediaLink .blue { display: block; }
#SocialMediaLink .blue { color: #ebebeb; font-size: 1px; }
#SocialMediaLink .blue:hover { opacity: 0.5; }

#adaptiveSocialLinksWMobile { background: #006eb9; margin: 2rem 0 4rem; padding: 2rem 0; }
#adaptiveSocialLinksWMobile #SocialMediaLink .addthis_toolbox a div { width: 52px; height: 42px; }

#adaptiveSocialLinksWMobile #SocialMediaLink.social-white .white { display: block; }
#adaptiveSocialLinksWMobile #SocialMediaLink .blue { display: none; background-size: 100%; }

#SocialMediaLink.social-white .white { display: none; }

.social-share-right { z-index: 2; }

.share-right #SocialMediaLink,
.social-share-right #SocialMediaLink { background: #006eb9; padding: 15px 10px; margin: 0 0 2rem; width: 100%; }

.share-right #SocialMediaLink .white,
.social-share-right #SocialMediaLink .white { display: block; background-color: #006eb9; background-repeat: no-repeat; background-position: center; background-size: 100%; margin-bottom: 1rem; }
.share-right #SocialMediaLink .blue,
.social-share-right #SocialMediaLink .blue { display: none; }
.social-share-right #SocialMediaLink a { margin-bottom: 0; }
#SocialMediaLink a { outline: 0 !important; }
.share-force-right { display: none; }

@media (max-width:992px) {
    .share-right { width: 100% !important; }
    #adaptiveSocialLinksWMobile #SocialMediaLink.social-white a,
    .share-right #SocialMediaLink .addthis_toolbox a { clear: none; }
    #SocialMediaLink .addthis_toolbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* Then we define how is distributed the remaining space */ justify-content: space-around; }
    /*.share-right #SocialMediaLink { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }*/
    .share-right #SocialMediaLink .white { width: 52px; height: 42px; margin: 0 1rem; margin: 0 1vw; }
    #adaptiveSocialLinksWMobile #SocialMediaLink .addthis_toolbox a div { margin: 0 2rem; margin: 0 2vw; }
}

@media (max-width:420px) {
    .share-right #SocialMediaLink .white { width: 38px; }
}

@media (min-width:768px) {
    .social-share-right #SocialMediaLink { display: none; }
}

@media (min-width:992px) {
    .social-share-right #SocialMediaLink { background: #006eb9; padding: 10px; margin: 8.2rem -15px 0 24px; width: 56px; display: block; }
}


/*
# Page  Heading
```
<h1>Heading one</h1>

<div class="control-bar">
    <time>15 Jan, 2016</time>    
    <div id="SocialMediaLink">social</div>
</div>
```
*/

.control-bar { overflow: auto; padding: 2.4rem 0 1rem; margin: 0 0 3.2rem !important; font-weight: bold; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; display: block; }
.control-bar time { float: left; padding-top: 0.5rem; }
.control-bar #SocialMediaLink { float: right; margin-bottom: 0; }
.control-bar .addthis_toolbox a { float: none; clear: none; }
.control-bar .addthis_toolbox a div { margin-left: 2.8rem; }

@media (max-width:768px) {
    .control-bar { padding: 2.2rem 0 2.4rem; }
    .control-bar .addthis_toolbox a { margin-left: 0.8rem; }
}


/*
[//]: # (Auto complete Search)
*/
body .ui-widget-content { background: #ddd; border: 0; color: #006eb9; padding-bottom: 1rem; top: 70px !important; }
body .ui-menu .ui-menu-item { border: 0; padding-left: 2.2rem; border-bottom: 0px solid #006eb9; outline: 0; }

body .ui-state-hover,
body .ui-widget-content .ui-state-hover,
body .ui-widget-header .ui-state-hover,
body .ui-state-focus,
body .ui-widget-content .ui-state-focus,
body .ui-widget-header .ui-state-focus { border: 0; background: none; border-bottom: 0px solid #006eb9; font-weight: bold; color: #002850; font-weight: normal; }
body .ui-widget { font-size: 1.6rem; }

body .ui-menu .ui-state-focus, body .ui-menu .ui-state-active { margin: 0; }

@media (max-width:767px) {
    body .ui-widget-content { position: fixed; overflow-y: scroll; height: 423px; }
}

/*
[//]: # (questionnaire)
[//]: # (*************)
*/
.questionnaire { margin-bottom: 2rem; }
.questionnaire ul { margin-top: 1rem; }
.questionnaire ul li { list-style: none; margin-left: 0; overflow: auto; }

.questionnaire input[type=radio] { float: left; margin: 1rem .5rem 0 0; }
.questionnaire input[type=radio] + label { margin-top: .3rem; vertical-align: middle; }

.questionnaire .answer ul li { margin-bottom: 1rem; padding: .4rem 1.8rem; }
.questionnaire .answer .selected { background-color: #ef8181; border-radius: .35rem; border: solid 1px #d81616; }
.questionnaire .answer .correct { border: #006eb9 solid 1px; border-radius: .35rem; }
.questionnaire .answer .correct.selected { background-color: #50a24a; border-color: #356931; }

/*
[//]: # (questionnaire)
[//]: # (*************)
*/
fieldset.flow .form-row { overflow: visible }

/*this is incorrect*/
.row-fluid.normal h2 { padding-bottom: 0.5rem }

.row-fluid.normal .form-row input[type="text"] { color: rgb(68, 68, 68) }

.row-fluid.normal,
.row-fluid.flow { font-size: 72% }

.row-fluid.normal textarea,
fieldset.flow textarea { background: transparent }


/*
[//]: # (Swiper)
[//]: # (******)
*/
.swiper-slide a { display: block; }

.swiper-slide .content { width: 100%; }

.swiper-slide .content .center { text-align: center; }



.swiper-slide .overlay { background-color: rgba(0, 110, 185, .5); height: 100%; position: absolute; width: 100%; z-index: 1; }

.swiper-slide .content { position: absolute; bottom: 0; height: 100%; z-index: 2; color: #fff; }
.swiper-slide .content .center { float: none; margin: auto; text-align: center; }
.swiper-slide .content.right { text-align: right; }

.swiper-slide .content h1 { font-size: 5.7rem; color: #fff; }
.swiper-slide .content p { font-size: 2.4rem; }

@media (max-width: 767px) {
    .swiper-slide .content { top: 20px; margin-top:20px; }
    .swiper-slide .content h1 { font-size: 2rem; }
    .swiper-slide .content p { font-size: 1.5rem; }
}


@media (max-width: 420px) {
    .swiper-slide .content h1 { font-size: 5vw; margin-bottom: 10px; }
    .swiper-slide .content p { font-size: 3vw; line-height: 13px; }
}


 footer .footer-links li:first-child { float: left !important; width: auto !important; clear: none !important; }
 footer .footer-links li.accessible-img a { background-size: 100% auto !important; }
@media (max-width: 767px) { footer .footer-links li:first-child {float: unset !important;} }
    footer { padding: 6rem 0 7rem; }
    footer .newsletter .form-row { padding-bottom: 2rem; }
    .selectric-items { top: 100% !important; bottom: auto !important; }
/*
[//]: # (Banner Video)
[//]: # (************)
*/

.banner-video img {
    width: 100%;
}

.video-content {
    width: 100%;
    overflow: hidden;
}

.video-content {
    height: auto !important;
}

    .video-content .video-js {
        width: 100% !important;
        float: left;
    }

    .video-content .video-js {
        height: auto !important;
    }

        .video-content .video-js video {
            width: 100% !important;
            height: auto !important;
            position: relative;
            float: left;
            cursor: pointer;
            background: #fff;
        }

.video-js {
    padding-top: 56.25%
}

.vjs-fullscreen {
    padding-top: 0px;
}

.vjs-poster {
    display: none;
    background-color: #fff !important;
}

.video-content .video-js {
    width: 100% !important;
    float: left;
    height: auto !important;
}

.video-content .video-js video {
    width: 100% !important;
    height: auto !important;
    position: relative;
    float: left;
    cursor: pointer;
    background: #fff;
}
/* overlay */

.div-overlay-gradient {
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 1;
    margin: -3.3rem;
    background: linear-gradient(134.72deg, #3023AE 0%, #00FEFF 100%);
    opacity: 0.5;
}

.div-overlay-gradient-gray {
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 1;
    background-color: #272727;
    opacity: 0.7;
}

.div-overlay-gradient-blue {
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 1;
    background-color: #2D0ABE;
    opacity: 0.6;
}


/***Video banner Starts***/
.banner-video.video_custom {
    float: left;
    width: 100%;
}

.banner-video.video_custom .content {
    position: absolute;
    top: 43%;
    bottom: initial;
    height: auto;
    width: 100%;
    padding-bottom: 0;
    z-index: 1;
    text-align: left;
    transform: translate(0%,-50%);
    -moz-transform: translate(0%,-50%);
    -webkit-transform: translate(0%,-50%);
}

.banner-video.video_custom .content .learn-more {
    margin-top: 0;
    position: initial;
    bottom: initial;
    left: initial;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    bottom: initial !important;
}

.banner-video.video_custom .content .learn-more img {
    width: auto !important;
    height: auto;
    display: inline-block;
    float: left;
    max-width: 10px !important;
}

.banner-video.video_custom #learn-more-adaptive-mobile {
    padding: 0 20px;
}
.banner-video img {
    width: 100%;
}
/* content */
.banner-video .content {
    position: absolute;
    top: 170px;
    bottom: 0;
    height: 100%;
    width: 100%;
    padding-bottom: 11rem;
    z-index: 1;
    text-align: center;
}

    .banner-video .content h1 {
        font-size: 10vw;
        line-height: 126%;
        color: #fff;
    }

    .banner-video .content h2 {
        font-size: 4vw;
        line-height: 119%;
        font-family: "Roboto Mono Light";
        margin-top: 40px;
        color: #fff;
    }

    .banner-video .content .learn-more a {
        color: #fff;
        font-family: Roboto;
        font-size: 16px;
    }

    .banner-video .content .learn-more picture {
        display: initial;
    }

    .banner-video .content .learn-more img {
        float: left;
        max-width: 10px;
        margin-right: 20px;
    }

    .banner-video .content .learn-more span {
        float: left;
    }

@media(max-width: 500px) {
    .banner-video picture {
        overflow: hidden;
    }

        .banner-video picture img {
            width: 500px !important;
        }

    .banner-video .content .learn-more {
        bottom: 375px !important;
    }
}

@media (max-width: 767px) {
    .banner-video picture {
        overflow: hidden;
    }

    .banner-video img {
        width: 767px;
    }

    .banner-video .content .learn-more {
        position: absolute;
        bottom: 45.0rem;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

        .banner-video .content .learn-more a {
            color: #FFFFFF;
        }
}

@media (min-width: 768px) {
    .banner-video .content {
        top: 100px;
        text-align: left;
    }

        .banner-video .content h1 {
            font-size: 6.7rem;
            line-height: 8.1rem;
        }

        .banner-video .content h2 {
            font-size: 2.8rem;
            line-height: 8.1rem;
        }

        .banner-video .content .learn-more {
            margin-top: 50px;
        }
}

@media (min-width: 992px) {
    .banner-video .content {
        top: 150px;
    }

        .banner-video .content .learn-more {
            margin-top: 100px;
        }
}

@media (min-width: 1200px) {
    .banner-video .content {
        top: 200px;
    }

        .banner-video .content .learn-more {
            margin-top: 100px;
        }
}

@media (min-width: 1600px) {
    .banner-video .content {
        top: 300px;
    }

        .banner-video .content .learn-more {
            margin-top: 200px;
        }
}
.video-content .video-js {
    width: 100% !important;
    float: left;
    height: auto !important;
}

.video-content .video-js video {
    width: 100% !important;
    height: auto !important;
    position: relative;
    float: left;
    cursor: pointer;
    background: #fff;
}
/*.video-js {
    padding-top: 56.25% }
*/
.vjs-fullscreen {
    padding-top: 0px;
}

.vjs-poster {
    display: none;
    background-color: #fff !important;
}
/* overlay */
.div-overlay {
    display: block;
    height: 100%;
    position: absolute;
    width: 96.2%;
    z-index: 1;
}

.div-overlay-gradient {
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 1;
    margin: -3.3rem;
    background: linear-gradient(134.72deg, #3023AE 0%, #00FEFF 100%);
    opacity: 0.5;
}

.div-overlay-gradient-gray {
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 1;
    background-color: #272727;
    opacity: 0.7;
}

.div-overlay-gradient-blue {
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 1;
    background-color: #2D0ABE;
    opacity: 0.6;
}
/***Video banner Ends***/

/***Accordion***/
.accordion-header {
    width: 100%;
    display: block !important;
    padding: 10px !important;
    color: #fff;
    background-color: #006eb9;
}
.accordion-content {
    padding: 10px !important;
    color: black !important;
}
/***Accordion Ends***/