/*
 *  
 *	Custom Global "Article Format" Styles for the Ballard Designs' Website
 *  
 */


/*
--------- Colors ---------


     
Light Black:    #4E575F / rgba(78,87,95,1);
Blue:           #7186E0
Light Blue 1:   #e3f2f5
Light Blue 2:   #d0eae9
Light Blue 3:   #c6dfe3



---------------------------  
 */


/* -- Article Style -- */
          
    /*body { background-color:red!important; }*/

    /* Grid & Structure */
    .article-styles section > .row { margin:60px 0; }
    .article-styles section:last-child > .row { margin-bottom:120px; }

    /* Typography */
    .article-styles p:not(.lead),
    .article-styles ul,
    .article-styles ol,
    .article-styles dl { font-size:1.1em; line-height:1.5em; }
    .article-styles p.lead { font-size:1.4em; }
    .article-styles strong,
    .article-styles .lead strong { font-weight:bold; }

    .article-styles h1 { font-size:72px; line-height:72px; }
    .article-styles h1 sup { font-size:.4em; line-height:1em; }
    .article-styles h2:not('.h1'),
    .article-styles h3,
    .article-styles h4,
    .article-styles h5,
    .article-styles h6 { font-size:2.5em; }

    /* Normal h2 >  1.83333em */
    .article-styles .h2-x2 { font-size:2.4em; } 
    .article-styles .h2-x3 { font-size:2.7em; }

    /* Vertical Aligners */
    .vertical-align { display:flex; align-items:center; }
    /*.align-middle-wrap { display:table; }
    .align-middle { display:table-cell; vertical-align:middle; }*/


    /* Equal Height Columns 
    .row-eq-height { display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; }*/

    .article-styles .margin.x2          { margin:2.5em!important; }
    .article-styles .margin-top.x2      { margin-top:2.5em!important; }
    .article-styles .margin-bottom.x2   { margin-bottom:2.5em!important; }
    .article-styles .padding-top.x2     { padding-top:2.5em!important; }
    .article-styles .padding-bottom.x2  { padding-bottom:2.5em!important; }
    .article-styles .padding.x2         { padding:2.5em!important; }

    .article-styles .margin.x3          { margin:5em!important; }
    .article-styles .margin-top.x3      { margin-top:5em!important; }
    .article-styles .margin-bottom.x3   { margin-bottom:5em!important; }
    .article-styles .padding-top.x3     { padding-top:5em!important; }
    .article-styles .padding-bottom.x3  { padding-bottom:5em!important; }
    .article-styles .padding.x3         { padding:5em!important; }

    /* Fancy Titles & Typography Helpers */

    .article-styles .fancy-title { font-size:3.5em; line-height:.7em; margin:0 0 20px; padding: 0; }
    .article-styles .fancy-title > span:first-child { font:normal normal .3em/2em "Montserrat",Verdana,Helvetica,sans-serif; display:block; }
    .article-styles h1.fancy-title > span:first-child {}
    .article-styles h2.fancy-title > span:first-child { font-size:.3em; }
    .article-styles .fancy-title.h1 { font-size:4.5em; }
    .article-styles .fancy-title.h2 { font-size:3em; }
    .article-styles h2.fancy-title.h2 > span:first-child { font-size:.4em; }

    .article-styles .line-title { width: 100%; text-align: center; border-bottom: 1px solid rgba(148,123,106,.5); line-height: 0.1em; margin: 10px 0 20px; } 
    .article-styles .line-title span { background:#fff; padding:0 10px; }
    .article-styles .fancy-title.line-title { margin-bottom:40px; }
    .article-styles .fancy-title.line-title span:first-child { margin:0 0 10px; position:relative; }
    .article-styles .fancy-title.line-title span:last-child  {}
    .article-styles .box-title {}

    em.text-note { font-style:italic; color:#777; }


    /* -- Boxes & Borders -- */

    .article-styles .inner-border { border: 15px solid rgba(148,123,106,.02); box-shadow: inset 0px 0px 0px 1px rgba(148,123,106,.2); box-sizing: border-box; }
    .article-styles .inner-border.bkg-tan       { border: 15px solid #f6f5f2; box-shadow:inset 0px 0px 0px 1px rgba(148,123,106,.5);  }
    .article-styles .inner-border.bkg-blue      { border: 15px solid #1e475d; box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,.5);  }
    .article-styles .inner-border.bkg-lightblue { border: 15px solid #f1f8fc; box-shadow:inset 0px 0px 0px 1px rgba(14,136,128,.5);  }
    .article-styles .outline,
    .article-styles .outline.bkg-tan            { outline:1px solid rgba(148,123,106,.2); }
    .article-styles .bkg-lighttan               { background-color:rgba(148,123,106,.02)!important; }
    .article-styles .outline.bkg-lightblue      { outline:1px solid rgba(113,182,224,.2); }

    /* CSS3 solution only for rectangular shape */
    .article-styles [class*="inner-outline"] { outline:1px solid rgba(148,123,106,.5); outline-offset:-15px; }
    .article-styles .inner-outline-white     { outline:1px solid rgba(255,255,255,1);  }

    .article-styles .video-border { border:15px solid #f6f5f2; box-shadow:inset 0px 0px 0px 1px rgba(148,123,106,.5); outline:1px solid rgba(148,123,106,.5); }


    /* Side Box - 
        Box on .row class, that joins the two child columns (.col-) with a photo and text into one cohesive box.
        (Make sure to append .edgy to .row class as well. ) */
    .article-styles .row.side-box,
    .article-styles [class*="side-box-"] { border:1px solid rgba(0,0,0,0.05); background-color:rgba(148,123,106,.04); }
    .article-styles [class*="side-box-"] [class*="col-"]:first-child figure + figure { margin-top:-14px!important; }
    
    /*.article-styles [class*="side-box-"] figure img.border { border:1px solid rgba(0,0,0,0.05); }*/

    .article-styles [class*="side-box-left"] figure.border   { border-left:1px solid rgba(0,0,0,0.05); }
    .article-styles [class*="side-box-right"] figure.border  { border-right:1px solid rgba(0,0,0,0.05); }

    .article-styles .row.side-box-left [class*="col-"]:first-child { float:right; padding-right:0; }
    .article-styles .row.side-box-left [class*="col-"]:first-child figure { margin:-1px -1px -1px 0; }
    .article-styles .row.side-box-left [class*="col-"]:last-child > div.padding { padding:30px 15px 30px 30px!important; }

    .article-styles .row.side-box-left-double [class*="col-"]:first-child { float:right; padding-right:0; }
    .article-styles .row.side-box-left-double [class*="col-"]:first-child figure { margin:-1px -1px -1px 0; }
    .article-styles .row.side-box-left-double [class*="col-"]:last-child > div.padding { padding:30px 15px 30px 30px!important; }
    
    .article-styles .row.side-box-right [class*="col-"]:first-child { padding-left:0; }
    .article-styles .row.side-box-right [class*="col-"]:first-child figure { margin:-1px 0 -1px -1px; }
    .article-styles .row.side-box-right [class*="col-"]:last-child > div.padding { padding:30px 30px 30px 15px!important; }

    .article-styles .row.side-box-right-double [class*="col-"]:first-child { padding-left:0; }
    .article-styles .row.side-box-right-double [class*="col-"]:first-child figure { margin:-1px 0 -1px -1px; }
    .article-styles .row.side-box-right-double [class*="col-"]:last-child > div.padding { padding:30px 30px 30px 15px!important; }

    .article-styles .row.side-box-double {}

    /* Product Box */
    .article-styles .product-box {
     /*bkg-tan inner-border outline padding margin-bottom*/

    }
    .article-styles .product-box > .row { margin:20px 0; padding:15px; }
    .article-styles .product-box > .row h2 { /*margin-top:16%;*/ }

    .article-styles .tip-box { 
        font-size:.9em; line-height:.9em; padding:10px 20px; outline:1px solid rgba(113,182,224,.2); /*border:1px solid rgba(148,123,106,.2);*/ 
        /*background-color:#f6f5f2!important; /*tan*/ background-color:#f1f8fc!important; /* lightblue */
    }
    .article-styles .row.edgey .row.tip-box { margin-left:0!important; margin-right:0!important; }
    /*.article-styles .tip-box p:last-child { margin:0; }*/

    .article-styles .text-tip { font-size:.9em; line-height:.9em; font-style:italic; color:#333; }
    .article-styles blockquote.tip-quote { font-size:1em; /*line-height:1em;*/ margin-top:15px; }


    /* -- Tablet -- */
    @media (min-width:768px) and (max-width:1024px){ /* Tablet */

        
        .article-styles [class*="side-box-left"] figure.border   { border-left:none; }
        .article-styles [class*="side-box-right"] figure.border  { border-right:none; }

        /* Side Box */
        .article-styles .row.side-box.side-box-left [class*="col-"]:first-child,
        .article-styles .row.side-box.side-box-right [class*="col-"]:first-child { float:none!important; padding:0!important; }

        .article-styles .row.side-box.side-box-right [class*="col-"]:last-child > div.padding,
        .article-styles .row.side-box.side-box-left [class*="col-"]:last-child > div.padding { padding:30px!important; }

        /* Typography */
        .article-styles p:not(.lead),
        .article-styles ul,
        .article-styles ol,
        .article-styles dl { font-size:1em; line-height:1.3em; }*/

        .article-styles p.lead { font-size:1.4em; }

        .article-styles .fancy-title,
        .article-styles .fancy-title.h1 { font-size:3.5em; line-height:.7em; }
        .article-styles .fancy-title > span:first-child { /*font-size:2em; line-height:2em;*/ }

        .article-styles .fancy-title.margin-bottom { margin-bottom:0; }

    }

    /* -- Mobile -- */

    /* Hide Desktop Page Title on Mobile */
    .mobile .article-styles header h1 { display:none; }
    
    @media (max-width:768px){ /* Mobile */

        .article-styles [class*="side-box-left"] figure.border   { border-left:none; }
        .article-styles [class*="side-box-right"] figure.border  { border-right:none; }

        /* Side Box */
        .article-styles .row.side-box.side-box-left [class*="col-"]:first-child,
        .article-styles .row.side-box.side-box-right [class*="col-"]:first-child { float:none; padding:0!important; }

        .article-styles .row.side-box.side-box-right [class*="col-"]:last-child > div.padding,
        .article-styles .row.side-box.side-box-left [class*="col-"]:last-child > div.padding { padding:15px!important; }

        /* Grid & Structure */
        .article-styles section > .row { margin:30px 0; }
        .article-styles section:last-child > .row { margin-bottom:60px; }

        /* Boxes */
        [class*="bkg-"].inner-border:not(.product-box) { box-shadow:none!important; border:none!important; }
        [class*="bkg-"].inner-border:not(.product-box) > [class*="col-"] { margin:0!important; padding:0!important; }

        /* Typography */
        .article-styles p:not(.lead),
        .article-styles ul,
        .article-styles ol,
        .article-styles dl { font-size:1em; line-height:1.3em; }
        .article-styles p.lead { font-size:1.4em; }

        .article-styles h1 { font-size:3em; line-height:1em; }
        .article-styles p.lead { font-size:1.1em; line-height:1.3em; }

        .article-styles h2:not('.h1'),
        .article-styles h3,
        .article-styles h4,
        .article-styles h5,
        .article-styles h6 { font-size:2.5em; line-height:1.5em; }

        .article-styles .fancy-title { font-size:2.5em; line-height:.7em; }
        .article-styles .fancy-title > span:first-child { font-size:.4em; line-height:2em; }
        .article-styles h1.fancy-title > span:first-child {}
        .article-styles h2.fancy-title > span:first-child { font-size:.4em; }
        .article-styles .fancy-title.h1 { font-size:4.5em; }
        .article-styles .fancy-title.h2 { font-size:3em; }
        .article-styles h2.fancy-title.h2 > span:first-child { font-size:.4em; }

    }

    /* BKG Colors */
    .article-styles .bkg-tan        { background-color:#f6f5f2!important; }
    .article-styles .bkg-blue       { background-color:#1e475d!important; color:#fff; }
    .article-styles .bkg-offwhite   { background-color:#fefefe!important; }
    .article-styles .bkg-lightblue  { background-color:#f1f8fc!important; }

    

    /* -- Lists -- */
    .article-styles ul { margin:0; padding:10px 0 0 15px; }
    .article-styles ul li { padding:0; margin:0 0 10px; }
    @media (max-width:768px){ /* Mobile */
        .article-styles ul { margin:0; padding:5px 0 0 10px!important; }
        .article-styles ul li { padding:0; margin:0 0 5px!important; }
    }

    /* List Cols 
    .article-styles ul.list-col-2 {}
    .article-styles ul.list-col-2 li { display:inline-block; width:50%; }
    */

    /* Fancy Lists - ul */
    .article-styles ul.fancy-list { list-style-type:none; margin:0 0 30px; padding:0; }
    .article-styles ul.fancy-list li { clear:both; position:relative; padding:10px 0 0 0; color: #333;  margin: 0; } /* text-transform: uppercase;  */
    .article-styles ul.fancy-list i { float:left; margin:-2px 15px 0 0; font-size:20px; /*color:rgba(115,174,160,1);*/ color:rgba(148,123,106,.5);
                      -webkit-transition:color .5s; transition:color .5s; }
    .article-styles ul.fancy-list li:after { opacity:0; content:' '; display:block;  }
    .article-styles ul.fancy-list li.active:after { opacity:1; content:' '; display:block; position:absolute; top:5px; left:-10px; width:calc(100% + 20px); height:100%; border:2px solid rgba(231,108,104,.5);
                                    -webkit-transition:opacity 1s; transition:opacity 1s; }                      
    .article-styles ul.fancy-list li.active i { color:rgba(231,108,104,1); }

    .article-styles ul.fancy-list-bullets { list-style-type:none; margin:0 0 30px; padding:0; }
    .article-styles ul.fancy-list-bullets li { clear:both; position:relative; padding: 10px 0 0 20px; color: #333;  margin: 0; }
    .article-styles ul.fancy-list-bullets li:after { content: '.'; display:block; position:absolute; top:-6px; left:0px; color:rgba(148,123,106,1); font-size:70px; line-height:.1em }

    /* Fancy Lists - ol */
    .article-styles ol.fancy-list { color: #ccc; list-style-type:none; margin:40px 0 60px; }
    .article-styles ol.fancy-list li { position: relative; font: bold italic 45px/1.5 "Cormorant", Times, "Times New Roman", serif; margin-bottom: 50px; }
    .article-styles ol.fancy-list li p { font: bold 16px/16px "Open Sans", Verdana, Helvetica, sans-serif; padding: 10px 0 0 50px; color: #333; text-transform: uppercase; letter-spacing: .03em; margin: 0; }
    .article-styles ol.fancy-list span { position: absolute; display: inline-block; background-color: #0E8880; padding: 0 0 0 5px; border-radius: 50%; color: #fff; width: 50px; height: 50px; text-align: center; line-height: 40px; font-size: 40px; margin: -6px 0 0 -12px; }

    /* Features List
    .article-styles ul.features-list li a { color:#53331B; } */

    /* FAQs */
    .article-styles dl.faq { counter-reset: number-counter; margin:40px 20px 60px; }
    .article-styles dl.faq dt { position: relative; font: bold 24px/24px "Cormorant", Times, "Times New Roman"; padding: 4px 0 10px 0; }
    .article-styles dl.faq dt:before { content: counter( number-counter ); counter-increment: number-counter; position: absolute; left: 0; top: 0; font: bold 70px/35px "Cormorant", Times, "Times New Roman"; color:#0E8880; }
    .article-styles dl.faq dd { margin: 0 0 40px 0; font-size:16px; line-height:20px; }
    .article-styles dl.faq dt, dl.faq dd { padding-left: 40px; }

    /* -- Video -- */
    .article-styles .video-player-wrap {}
    .article-styles .video-player-wrap .btn-fullscreen { opacity:.4; } 
    .article-styles .video-player-wrap:hover .btn-fullscreen { opacity:.75; } 
    .article-styles .video-player-wrap .btn-fullscreen:hover { opacity:1; bottom:0px; right:0px; } 
    .article-styles .video-player-wrap .btn-fullscreen:hover i { font-size:25px!important; }

    /* Images & Captions */
    .article-styles figure {}
    .article-styles figure figcaption.caption-credit { text-align:right; font-size:.8em; font-style:italic; padding-top:3px; }

    /* -- Image Tags -- */
    .article-styles .img-tag-wrap   { position:relative; }
    .article-styles .img-tags       { position:absolute; z-index:10; top:0; left:0; display:block; font-size:20px; width:42px; height:42px; padding:10px; text-align:center;
        -webkit-border-radius:50%;-moz-border-radius:50%; border-radius:50%;
        -webkit-box-shadow:0 0 0 0 rgba(0,0,0,0);
        -moz-box-shadow:0 0 0 0 rgba(0,0,0,0);
        box-shadow:0 0 0 0 rgba(0,0,0,0);
        border:1px solid rgba(255,255,255,0);
    }
    .article-styles .img-tags i                 { font-size:25px; line-height:25px; margin:-5px 0 0 -1px; text-shadow:1px 1px 0 rgba(0,0,0,.2); color:rgba(231,108,104,1);/* red */ /* color:rgba(98,70,48,1); brown */ opacity:1; } 
    .article-styles .img-tags.img-tags-light i  { color:rgba(255,255,255,1); }

    .article-styles .img-tags:hover,
    .article-styles .img-tags:focus             { border:1px solid rgba(255,255,255,.9); background-color:rgba(255,255,255,.7); }
    .article-styles .img-tags:hover i,
    .article-styles .img-tags:focus i           { opacity:1; }
    .article-styles .img-tags.img-tags-light:hover i,
    .article-styles .img-tags.img-tags-light:focus i { text-shadow:1px 1px 0 rgba(0,0,0,1); }
    
    .article-styles .img-tag-wrap img           { position:relative; z-index:1; }


    /* -- Buttons -- */

    .article-styles .btn.btn-xl { padding:1em 1.5em; font-size:1.2em; }
    .article-styles .btn-group .btn { margin:0 7.5px; }
    .article-styles .btn-group .btn:first-child { margin-left:0;  }
    .article-styles .btn-group .btn:last-child  { margin-right:0; }
    .article-styles .btn-group.text-center { width:100%; }
    .article-styles .btn-group.text-center > .btn { display:inline-block; text-align:center; float:none; }

    .article-styles .btn-red { line-height:16px; background-color:#E76C68; border:2px solid #E76C68; padding:1em 2em; }
    .article-styles .btn-red:hover,
    .article-styles .btn-red:active { background-color:#e55550!important; }

    .article-styles .btn-darkblue { background-color:#1e475d; border: 2px solid #1e475d; padding:1em 2em; }
    .article-styles .btn-darkblue:hover,
    .article-styles .btn-darkblue:active { background-color:#265975!important; }

    .article-styles .btn-brown { background-color:#947B6A; border-color:#947B6A; }
    .article-styles .btn-brown:hover,
    .article-styles .btn-brown:active { background-color:#7a6658!important; }

    /* Button - Variations */
    .article-styles .btn > .file-type { font-size:.6em; letter-spacing:0; display:inline-block; position:relative; top:-1px; }


    /* The animation code */
    @keyframes tag-anim {
        from { background-color: rgba(255, 255, 255, .5); -webkit-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.5); }
        to { background-color: rgba(255, 255, 255, 0); -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
    }

    /* The element to apply the animation to */
    .article-styles .tag-anim { animation-name: tag-anim; animation-duration: 4s; }

    /* The animation code */
    @keyframes video-anim {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    .article-styles .video-player-wrap { animation-name: video-anim; animation-duration: 3s; }


    /* -- Carousels -- */

    /* Carousel - Tablet & Mobile */
    @media (max-width:992px){
        /* FROM BOOTSTRAP 3 File: */
        .article-styles .carousel { position: relative; }
        .article-styles .carousel-inner { position: relative; width: 100%; overflow: hidden; }
        .article-styles .carousel-inner > .item { position: relative; display: none; -webkit-transition: .6s ease-in-out left; -o-transition: .6s ease-in-out left; transition: .6s ease-in-out left; }
        .article-styles .carousel-inner > .item > img,
        .article-styles .carousel-inner > .item > a > img { line-height: 1; }
        .article-styles .carousel-inner > .active,
        .article-styles .carousel-inner > .next,
        .article-styles .carousel-inner > .prev { display: block; }
        .article-styles .carousel-inner > .active { left: 0; }
        .article-styles .carousel-inner > .next,
        .article-styles .carousel-inner > .prev { position: absolute; top: 0; width: 100%; }
        .article-styles .carousel-inner > .next { left: 100%; }
        .article-styles .carousel-inner > .prev { left: -100%; }
        .article-styles .carousel-inner > .next.left,
        .article-styles .carousel-inner > .prev.right { left: 0; }
        .article-styles .carousel-inner > .active.left { left: -100%; }
        .article-styles .carousel-inner > .active.right { left: 100%; }
        .article-styles .carousel-control { position: absolute; top: 0; bottom: 0; left: 0; width: 15%; font-size: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); background-color: rgba(0, 0, 0, 0); filter: alpha(opacity=50); opacity: .5; }
        .article-styles .carousel-control.left { background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001))); background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); background-repeat: repeat-x; }
        .article-styles .carousel-control.right { right: 0; left: auto; background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); background-image: -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5))); background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); background-repeat: repeat-x; }
        .article-styles .carousel-control:hover,
        .article-styles .carousel-control:focus { color: #fff; text-decoration: none; filter: alpha(opacity=90); outline: 0; opacity: .9; }
        .article-styles .carousel-control .icon-prev,
        .article-styles .carousel-control .icon-next,
        .article-styles .carousel-control .glyphicon-chevron-left,
        .article-styles .carousel-control .glyphicon-chevron-right { position: absolute; top: 50%; z-index: 5; display: inline-block; margin-top: -10px; }
        .article-styles .carousel-control .icon-prev,
        .article-styles .carousel-control .glyphicon-chevron-left { left: 50%; margin-left: -10px; }
        .article-styles .carousel-control .icon-next,
        .article-styles .carousel-control .glyphicon-chevron-right { right: 50%; margin-right: -10px; }
        .article-styles .carousel-control .icon-prev,
        .article-styles .carousel-control .icon-next { width: 20px; height: 20px; font-family: serif; line-height: 1; }
        .article-styles .carousel-control .icon-prev:before { content: '\2039'; }
        .article-styles .carousel-control .icon-next:before { content: '\203a'; }
        .article-styles .carousel-indicators { position: absolute; bottom: 10px; left: 50%; z-index: 15; width: 60%; padding-left: 0; margin-left: -30%; text-align: center; list-style: none; }
        .article-styles .carousel-indicators li { display: inline-block; width: 10px; height: 10px; margin: 1px; text-indent: -999px; cursor: pointer; background-color: #000 \9; background-color: rgba(0, 0, 0, 0); border: 1px solid #fff; border-radius: 10px; }
        .article-styles .carousel-indicators .active { width: 12px; height: 12px; margin: 0; background-color: #fff; }
        .article-styles .carousel-caption { position: absolute; right: 15%; bottom: 20px; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
        .article-styles .carousel-caption .btn { text-shadow: none; } 
        
    }
    @media all and (transform-3d), (-webkit-transform-3d) {
        .article-styles .carousel-inner > .item { -webkit-transition: -webkit-transform .6s ease-in-out; -o-transition: -o-transform .6s ease-in-out; transition: transform .6s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px; }
        .article-styles .carousel-inner > .item.next,
        .article-styles .carousel-inner > .item.active.right { left: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }
        .article-styles .carousel-inner > .item.prev,
        .article-styles .carousel-inner > .item.active.left { left: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
        .article-styles .carousel-inner > .item.next.left,
        .article-styles .carousel-inner > .item.prev.right,
        .article-styles .carousel-inner > .item.active { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
    }
    @media screen and (min-width:768px) {
        .article-styles .carousel-control .glyphicon-chevron-left,
        .article-styles .carousel-control .glyphicon-chevron-right,
        .article-styles .carousel-control .icon-prev,
        .article-styles .carousel-control .icon-next { width: 30px; height: 30px; margin-top: -10px; font-size: 30px; }
        .article-styles .carousel-control .glyphicon-chevron-left,
        .article-styles .carousel-control .icon-prev { margin-left: -10px; }
        .article-styles .carousel-control .glyphicon-chevron-right,
        .article-styles .carousel-control .icon-next { margin-right: -10px; }
        .article-styles .carousel-caption { right: 20%; left: 20%; padding-bottom: 30px; }
        .article-styles .carousel-indicators { bottom: 20px; }
    }


    .article-styles .carousel.outline {}
    .article-styles .carousel.outline .carousel-inner { overflow:hidden; }

    /* Header Carousel */
    .article-styles .carousel.header-carousel {}
    .article-styles .carousel.header-carousel.dark {}
    .article-styles .carousel.header-carousel.dark .carousel-indicators li { border:1px solid rgba(98,70,48,.7)!important; }
    .article-styles .carousel.header-carousel.dark .carousel-indicators li.active { background-color:rgba(98,70,48,.3)!important; }

    /* Features Carousel */
    .article-styles .carousel.features-carousel { margin-bottom:50px; }
    .article-styles .carousel.features-carousel .carousel-indicators { background-color:#4E575F; bottom:-50px; left:0px; z-index: 15; width:100%; margin:0; padding:5px 0 0; 
        /*background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.0001) 0%, rgba(0,0,0,0.8) 70%);
        background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.0001) 0%, rgba(0,0,0,0.8) 70%);
        background-image: linear-gradient(to bottom, rgba(0,0,0,0.0001) 0%, rgba(0,0,0,0.8) 70%);
        background-repeat: repeat-y;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);*/
    }
    .article-styles .carousel.features-carousel .carousel-indicators li { display:inline-block; background-color: rgba(255, 255, 255, 0); width: 16%; height:40px; margin: 0; padding: 0; text-indent: 0; border: none; border-radius: 0; cursor: pointer; overflow: hidden; }
    .article-styles .carousel.features-carousel .carousel-indicators li.active { background-color: rgba(255, 255, 255, 0); }
    .article-styles .carousel.features-carousel .carousel-indicators li span { position: relative; display: block; background-color: rgba(255, 255, 255, 0); width: auto; height: 40px; margin: 0 3px 0 0; text-indent: 0; border: 2px solid rgba(255, 255, 255, 0); border-radius: 0; cursor: pointer; padding:0 5px; font-size: 13px; line-height:1em; color: #fff; font-weight: bold; text-transform: uppercase;
                                                                               display:-webkit-flex; -webkit-align-items:center; justify-content:center; display:flex; align-items:center; text-align:center; }
    .article-styles .carousel.features-carousel .carousel-indicators li:hover span:before,
    .article-styles .carousel.features-carousel .carousel-indicators li:active span:before,
    .article-styles .carousel.features-carousel .carousel-indicators li.active span:before { content: ""; border: 2px solid rgba(255, 255, 255, .7); position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

    @media (max-width:992px){
        .article-styles .carousel.features-carousel .carousel-indicators li { width:15%; height:45px; }
        .article-styles .carousel.features-carousel .carousel-indicators li span { font-size:1.5rem; line-height:1em; height:40px; padding:0px 5px; white-space:pre-wrap; display:-webkit-flex; -webkit-align-items:center; justify-content:center; display:flex; align-items:center; text-align:center;*/ }
    }
    @media (max-width:768px){
        .article-styles .carousel.features-carousel { margin-bottom:113px; }
        .article-styles .carousel-inner { max-height:482px; }
        .article-styles .carousel.features-carousel .carousel-indicators { bottom:-163px; background-color:#4E575F; background-image:none; }
        .article-styles .carousel.features-carousel .carousel-indicators li { width:30%; height:50px; }
        .article-styles .carousel.features-carousel .carousel-indicators li span { font-size:1rem; height:50px; padding:0px 5px; line-height:1em; white-space:pre-wrap; }
    }
    @media (max-width:420px){
        .article-styles .carousel-inner { max-height:250px; }
        .article-styles .carousel.features-carousel .carousel-indicators li span { font-size:1rem; }
    }


    /* Gallery Carousel - class="carousel slide gallery-carousel lazy mobile-horz-scroll" */
    .article-styles .carousel.gallery-carousel { margin-bottom:0!important; }
    .article-styles .carousel.gallery-carousel .carousel-inner > .item { max-height:450px; }
    .article-styles .carousel.gallery-carousel .carousel-inner > .item a p { background-color:rgba(255,255,255,.95); position:absolute; bottom:20px; left:30px; padding:5px 10px; color:#745843; font-weight:500; }
    .article-styles .carousel.gallery-carousel .carousel-inner > .item a:hover p,
    .article-styles .carousel.gallery-carousel .carousel-inner > .item a:active p { color:#fff; background-color:#745843; }

    .article-styles .carousel.gallery-carousel { margin-bottom:50px; }
    .article-styles .carousel.gallery-carousel .carousel-indicators { display:flex; top:calc(100% + 10px); bottom:auto; left:0px; z-index:15; width:calc(100% + 10px); margin:0 -5px; padding:0; text-align:left; }
    .article-styles .carousel.gallery-carousel .carousel-indicators li { position:relative; display:inline-block; background-color:rgba(255, 255, 255, 0); width:calc(16.6666666667% - 5px); height:auto; margin:0 5px; padding:0; text-indent:0; border:none; border-radius: 0; cursor: pointer; overflow: hidden; }
    .article-styles .carousel.gallery-carousel .carousel-indicators li:first {}
    .article-styles .carousel.gallery-carousel .carousel-indicators li:last  {}
    .article-styles .carousel.gallery-carousel .carousel-indicators li:not(.active):hover,
    .article-styles .carousel.gallery-carousel .carousel-indicators li:not(.active):active { opacity:.8; }
    .article-styles .carousel.gallery-carousel .carousel-indicators li.active:after { content:' '; position:absolute; top:0; left:0; width:100%; height:100%; border:3px solid #745843; outline:2px solid rgba(255,255,255,.8); outline-offset:-5px; }
    .article-styles .carousel.gallery-carousel .carousel-indicators li img { width:100%; height:auto; margin:0; padding:0; }

    .article-styles .carousel.gallery-carousel .carousel-control        { background:transparent none; opacity:1; }
    .article-styles .carousel.gallery-carousel .carousel-control.left   { left:-12%; }
    .article-styles .carousel.gallery-carousel .carousel-control.right  { right:-12%; }
    .article-styles .carousel.gallery-carousel .carousel-control i      { text-shadow:none; color:#745843; }


    /* Gallery Carousel - Mobile Horz Scroll (Make Carousel break to borzontal swiper on mobile )
     * class="carousel mobile-horz-scroll"
     */
        .mobile .article-styles .carousel.mobile-horz-scroll { margin:0 -12px!important; }
        .mobile .article-styles .carousel.mobile-horz-scroll .carousel-inner { overflow-x:scroll; overflow-y:hidden; white-space:nowrap;  
            background-color:#f3f1e9; border-top:1px solid #E4E1D3; border-bottom:1px solid #E4E1D3; margin:0; padding:12px 6px; }
        .mobile .article-styles .carousel.mobile-horz-scroll .carousel-inner > .item { -webkit-box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.05); -moz-box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.05); box-shadow:0px 1px 0px 0px rgba(0,0,0,0.05); display:inline-flex; width:40%; float:none!important; background-color:#fff; border:1px solid #E4E1D3; padding:0 0 50px; margin:0 4px;  }
        .mobile .article-styles .carousel.mobile-horz-scroll .carousel-inner > .item:first-child { margin-left:6px; }
        .mobile .article-styles .carousel.mobile-horz-scroll .carousel-inner > .item:last-child  { margin-right:6px; }

        .mobile .article-styles .carousel.mobile-horz-scroll .carousel-inner > .item a p { left:0; bottom:0px; white-space:normal; line-height:1em; background-color:transparent; height:50px; margin:0; padding:10px!important; color:#745843; }
        .mobile .article-styles .carousel.mobile-horz-scroll .carousel-inner > .item a:hover p,
        .mobile .article-styles .carousel.mobile-horz-scroll .carousel-inner > .item a:active p { color:#000; background-color:transparent; }
        .mobile .article-styles .carousel.mobile-horz-scroll .carousel-control,
        .mobile .article-styles .carousel.mobile-horz-scroll .carousel-indicators { display:none; }



    /* -- Extra Utilites --*/
    @media (min-width:1200px){
        /* lg */
        .article-styles .pull-left-lg  { float:left;  }
        .article-styles .pull-right-lg { float:right; }
    }
    @media (min-width:1025px) and (max-width:1199px) {
        /* md */
        .article-styles .pull-left-md  { float:left;  }
        .article-styles .pull-right-md { float:right; }
    }
    @media (min-width:768px) and (max-width:1024px){
        /* sm */
        .article-styles .pull-left-sm  { float:left;  }
        .article-styles .pull-right-sm { float:right; }
    }
    @media (max-width:768px){
        /* xs */
        .article-styles .pull-left-xs  { float:left;  }
        .article-styles .pull-right-xs { float:right; }
    }


    /* Mobile Only */
    .mobile .article-styles .btn-group { padding-top:15px; }
    .mobile .article-styles .btn-group > .btn,
    .mobile .article-styles .btn-group > .c-button { margin:0 5px 10px!important; /*font-size:140%; line-height:2em;*/ }

    .mobile .article-styles .mobile-border-bottom,
    .mobile .article-styles .mobile-border-break { border-bottom:1px solid rgba(148,123,106,.7); }
    .mobile .article-styles .mobile-border-bottom.margin-bottom  { margin-bottom:24px!important; }
    .mobile .article-styles .mobile-border-bottom.padding-bottom { padding-bottom:24px!important; }
    /*.m-framework .padding-bottom { padding-bottom: 12px !important; }
    .m-framework .margin-bottom { margin-bottom: 12px !important; }*/