/* -------------------------------------------------------------------------- 
   Body Styling (Shadow)

        #page-content {
            position: relative;
            overflow: hidden; 
            margin: 35px 0 0 0;
            -webkit-box-shadow: 0 0 25px 0 #eaeaea;
            box-shadow: 0 0 25px 0 #eaeaea; 
        }

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

/*  Margins and paddings
............................................*/  

.top-margin {
    margin-top: 20px;
}

#page-content .bottom-margin {
    margin-bottom: 25px;
}

.top-padding {
    padding-top: 15px;
}

.bottom-padding {
    padding-bottom: 15px;
}

.no-padding {
    padding: 0;
}

.form-control {
    padding: 10px 12px;
    height: 42px;
}

.icon-padding {
    position: relative;
    padding-left: 30px;
}

.icon-padding i.fa {
    position: absolute;
    top: 4px;
    left: 0;
}

/* -------------------------------------------------------------------------- *\
   Social Media Section
\* -------------------------------------------------------------------------- */

/*  Social Share Total 
............................................*/  

#share-sect {
    display: inline-block;
    margin-top: 2px;
    padding-right: 8px;
    border-right: solid 1px #19a0db;
}

.total-shares:after { 
    display:inline-block;
    position:absolute;
    content:'total \A shares'; 
    white-space:pre;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 16px;
    color: #5c5c5c;
    padding-top: 7px;
    padding-left: 8px;
}

.top-shares { 
    display: inline-block;
   	position: relative;
   	left: 70px;
   	top: -6px;
}

.count {
    color:#5c5c5c;
    display:block;
    font-family:Arial, Helvetica, sans-serif;
    font-size:30px;
    font-weight:700;
    line-height:34px;
    height:40px;
    padding:4px 0;
    position:relative;
    text-align:center;
    text-decoration:none;
}

/*  Circle Social Icon for Desktop View 
............................................*/  

 .cirGlobalBtn { /* global button class */
    display: inline-block;
    position: relative;
    width: 32px;
    height: 32px;
    text-align: center;
    color: #fff;
    font-size: 1em;
    line-height: 2.3em;
    border-radius: 25px;
    -moz-border-radius:25px;
    -webkit-border-radius:25px;
    margin-right: 3px;
}

/*  Social Icons Mobile Sticky
............................................*/ 

.stkr-btns {
    width: 100%;
    height: 32px;
    z-index: 100;
    display: inline-block;
}

.stkrbtnsGlobalBtn{ /* global button class */
    display: inline-block;
    position: relative;
    float:left;
    width: 20%;
    height: 32px;
    padding: 0;
    margin-bottom: 20px;
    text-align: center;
    color: #fff;
    font-size: 1.2em;
    font-weight: normal;
    line-height: 2em;
}

/* facebook button class*/
.facebookBtn{
    background: #3b5998;s
}

.facebookBtn:before{ /* use :before to add the relevant icons */
    font-family: "FontAwesome";
    content: "\f09a"; /* add facebook icon from AF cheatsheet */
}

.facebookBtn:hover{
    color: #3b5998;
    background: #fff;
    box-shadow: 0 1px 1px #999;
}

/* twitter button class*/
.twitterBtn{
    background: #00ABE3;
}

.twitterBtn:before{
      font-family: "FontAwesome";
      content: "\f099"; /* add twitter icon */
}

.twitterBtn:hover{
      color: #00ABE3;
      background: #fff;
      box-shadow: 0 1px 1px #999;
}

/* google plus button class*/
.googleplusBtn{
    background: #dd4b39;
}

.googleplusBtn:before{
      font-family: "FontAwesome";
      content: "\f0d5"; /* add googleplus icon */
}

.googleplusBtn:hover{
      color: #dd4b39;
      background: #fff;
      box-shadow: 0 1px 1px #999;
}

/* linkedin button class*/
.linkedinBtn{
    background: #0976b4;
}

.linkedinBtn:before{
      font-family: "FontAwesome";
      content: "\f0e1"; /* add linkedin icon */
}

.linkedinBtn:hover{
      color: #0976b4;
      background: #fff;
      box-shadow: 0 1px 1px #999;
}

/* e-mail button class*/
.emailBtn{
    background: #888;
}

.emailBtn:before{
      font-family: "FontAwesome";
      content: "\f0e0"; /* add e-mail icon */
}

.emailBtn:hover{
      color: #888;
      background: #fff;
      box-shadow: 0 1px 1px #999;
}

/*  Social Square Icons
............................................*/  

.mobile-buttons {
    position: relative;
    margin: -35px -15px 30px 0;
    float: right;
}

.fwiconsGlobalBtn { /* global button class */
    display: inline-block;
    position: relative;
    float: left;
    cursor: pointer;
    width: 62px;
    height: 50px;
    padding-top: 4px;
    text-decoration: none;
    text-align: center;
    color: #fff;
    font-size: 1.2em;
    font-weight: normal;
    line-height: 1.9em;
}

.fwiconsGlobalBtn span { /* global button class */
    font-family: 'ciscosansttregular', sans-serif;
    font-size: 12px;
    clear: both;
    display: block;
    margin-top: -14px;
} 

/*  Social Icon Colors
............................................*/  

.twitter-color {
    color: #00aced;
}

.twitter-color:hover {
    color: #222;
}

.facebook-color {
    color: #3B5998;
}

.facebook-color:hover {
    color: #222;
}

.linkedin-color {
    color: #007bb6;
}

.linkedin-color:hover {
    color: #222;
}

.googleplus-color {
    color: #dd4b39;
}

.googleplus-color:hover {
    color: #222;
}

.instagram-color {
    color: #517fa4;
}

.instagram-color:hover {
    color: #222;
}

.youtube-color {
    color: #bb0000;
}

.youtube-color:hover {
    color: #222;
}

.rss-color {
    color: #FA9B39;
}

.rss-color:hover {
    color: #222;
}

.newsicon-color {
    color: #2b5693;
}


/* ========================================================================== *\
   Social Icons Section - Media Queries
\* ========================================================================== */

@media (max-width: 767px) and (min-width: 320px)  {

    .mobile-buttons { /* use for News Layout */
        padding-top: 3px;
    }
}

/* -------------------------------------------------------------------------- *\
   Article Content - Body Styling
\* -------------------------------------------------------------------------- */

#article-content { /* padding style for main body content left side */
    padding: 10px;
}

#article-content article {
    position: relative;
    margin-bottom: 25px;
}


/* ========================================================================== *\
   Article Content - Body Styling - Media Queries
\* ========================================================================== */


@media (max-width: 767px) and (min-width: 320px)  {

    #article-content {
        padding-left: 15px;
        padding-right: 15px; /* Padding for Mobile */
    }

    .related-box {
        margin-top: 30px;
    }
}

@media (min-width: 768px) {

    #article-content {
        padding: 15px;
    }
}

@media (min-width: 992px) {

    #article-content {
        float: left;
        width: 640px;
        padding: 0 20px;
    }
    
    #article-content.article {
        padding: 20px;
    }
    
    #article-content .col-xs-12 {
        padding-top: 20px;
        padding-right: 20px;
    }
    
    #article-content .col-md-3 {
        padding-top: 20px;
        padding-left: 20px;
    }

}

@media (min-width: 1200px) {

    #article-content {
        width: 820px;
        padding: 0 20px 0 0;
    }
    
    #article-content.article {
        padding: 25px;
    }
    
    #article-content .col-xs-12 {
        padding: 8px 25px 0 20px;
    }
    
    #article-content .col-md-3 {
        padding-top: 25px;
        padding-left: 25px;
    }
}



/* -------------------------------------------------------------------------- *\
   Article Content
\* -------------------------------------------------------------------------- */

/*  Page-Content
 ............................................*/ 

#article-content header {
    position: relative;
}


#gtm-articlebody a {
	color:#007FC5;
}

#gtm-articlebody a:hover {
	color:#2B5693;
}

#article-content header h2 {
    font: 400 18px/18px 'ciscosansttextralight', Arial, Helvetica, sans-serif;
    color: #444;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #0f0;
}

#article-content header span.borderline {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 1px;
    background: #007fc5;
}

#article-content header span.borderline:before {
    width: 100%;
    height: 2px;
    background: #007fc5;
}

/*  Articles within Content Page
............................................*/ 

#article-post header {
    padding: 15px 0;
    margin: 0 0 14px 0;
    border-bottom: 1px solid #dadada;
}

.breadcrumb {
    padding: 0;
    margin: 0 0 8px 0;
    background: none;
}

.breadcrumb li a {
    color: #666;
}

.breadcrumb li a:hover {
    color: #007fc5;
}

#article-post header h1 {
    font: 400 30px/42px 'ciscosansttextralight', sans-serif;
    color: #222;
    margin: 0;
}

#article-post h2 {
    font: 400 24px/30px 'ciscosansttextralight', sans-serif;
    color: #222;
    margin: 25px 0 15px 0;
}

#article-post p {
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 15px;
}

#article-post h2.lead {
    font: 100 16px/24px 'ciscosansttregular', serif;
    color: #222;
    margin-bottom: 25px;
}

#article-post span.article-date {
    font-size: 12px;
    text-transform: uppercase; 
    color: #999;
    font-weight: 600;
    line-height: 20px;
}

/*  Respsonive Img/Youtube Embed
 ............................................*/ 

#gtm-articlebody * iframe {
    display: block;
    width: 100%;
    min-height: 480px;
    border: none;
    margin: 0;
}

#gtm-articlebody * img {
    display: block !important;
    width: 100% !important;
    max-height: 100%;
}

/* 
   Media Queries
\* ==========================================*/ 

@media (max-width: 320px) {
    #gtm-articlebody * img {
        display: block !important;
        width: 100% !important;
        max-height: 100%;
    }
}
    

@media (max-width: 480px) {
    #gtm-articlebody * iframe {
        min-height: 180px;
    }
}
    

@media (min-width: 768px) {
    #gtm-articlebody * iframe {
        min-height: 360px;
    }

}

@media (min-width: 1200px) {
    #gtm-articlebody * iframe {
        min-height: 480px;
    }

}


/*  Author Img/Name and Share Line
............................................*/ 

#article-content .author-share-section {
    display:block;
    margin-bottom: 40px;
}

#article-content .by-author-img {
    overflow: hidden;
    position: relative;
    float: left;
    height: 50px;
    width: 50px;
    margin-bottom: 18px;
    margin-right: 10px;
    border-radius: 50px; 
    display: inline-block;
}

#article-content .by-author-img img {
    left: 0%;
    position:absolute;
    margin-right: 12px;
    width: 50px;
}

#article-content .by-author-info {
    position: relative;
    display: inline-block;
    float:left;
    margin-right:35px;
    top:8px;
}

#article-content div span.by-line-author {
    font-size: 12px;
    color: #007fc5;
    padding-top: 8px;
}

#article-content div span.by-line-author a {
    color: #007fc5;
}

#article-content div span.by-line-author a:hover {
    text-decoration: underline;
}

#article-content div span.follow a {
    position: relative;
    display: block;
    font-size: 11px;
    color: #5c5c5c;
}

#article-content div span.follow:hover {
    text-decoration: underline;
}

#article-content .by-share-count {
    width: 100%;
}


#article-content .top-social-share {
    display: inline-block;
    padding-left: 20px;
}

/*  Blockquote
............................................*/ 

#article-post blockquote {
    display: table-cell;
    position: relative;
    background: #f5f5f7;
    padding: 35px 65px 35px 70px;
    margin: 250px 0;
    border: none;
    -webkit-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px;
    width: 800px;
}

#article-post blockquote footer {
   margin: 0;
   padding: 0;
   border: none;
}

#article-post blockquote p {
    font-size: 20px;
    line-height: 30px;
    font-style: italic;
    color: #222;
    quotes: "\201C" "\201D" "\2018" "\2019";
}

#article-post blockquote:before {
    position: absolute;
    top: 20px;
    left: 25px;
    content: open-quote;
    font: 700 54px/54px Georgia, serif;
    color: #999;
}

#article-post blockquote:after {
    position: absolute;
    bottom: 10px;
    right: 25px;
    content: close-quote;
    font: 700 54px/54px Georgia, serif;
    color: #999;
}

/*  Related Box (in article)
............................................*/ 

#article-post .related-box {
    width: 32%;
    float: right;
}

#article-post .related-box.pull-right {
    padding-left: 20px;
    margin-left: 20px;
    border-left: 1px solid #e3e3e3;
}

#article-post .related-box.pull-left {
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1px solid #e3e3e3;
}

#article-post .related-box article {
    margin-bottom: 15px;
}

#article-post .related-box section {
    margin-bottom: 25px;
}

#article-post .related-box h4 {
    font: 400 17px/17px 'ciscosansttregular', sans-serif;
    color: #222;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #e3e3e3;
}

#article-post .related-box h5 {
    font-size: 15px;
    line-height: 18px;
    font-weight: 500; 
}

#article-post .related-box span.published {
    margin-top: 2px;
    font-size: 11px;
    display: block;
    color: #999;
}

@media (max-width: 359px) and (min-width: 300px) {

    #article-post .related-box h4 {
        font: 400 14px/14px 'ciscosansttregular', sans-serif;
    }

    #article-post .related-box h5 {
        font-size: 10px;
        line-height: 13px;
    }

    #article-post blockquote p {
        font-size: 16px;
    }

    #article-post blockquote {
        padding: 35px 50px 35px 70px;
    }

} 

@media (max-width: 479px) and (min-width: 360px) {

    #article-post .related-box h4 {
        font: 400 14px/14px 'ciscosansttregular', sans-serif;
    }

    #article-post .related-box h5 {
        font-size: 11px;
        line-height: 14px;
    }

    #article-post blockquote p {
        font-size: 18px;
    }

    #article-post blockquote {
        padding: 35px 60px 35px 70px;
    }

} 

@media (max-width: 639px) and (min-width: 480px) {

    #article-post .related-box h4 {
        font: 400 15px/15px 'ciscosansttregular', sans-serif;
    }

    #article-post .related-box h5 {
        font-size: 12px;
        line-height: 14px;
    }

} 

/*  Video Transcript
............................................*/  

 .section-full {
    margin: 0 -15px 0 -15px;
    padding: 45px 15px 0 15px;
    position: relative;
}

.video-transcript {
    background: #f5f5f7;
    margin: 20px 0 40px 0;
    border: 2px dotted #dedede;
    position: relative;
    display: table;
}

.video-transcript .published {
    display: inline-block;
    margin-right: 3px;
    font-size: 11px;
    color: #888;
}

.video-transcript span.text {
    font-size: 15px;
}

.theme-transcript {
    position: absolute;
    top: 0px;
    left: 0;
    font: 16px/32px 'ciscosansttextralight', Arial, Helvetica, sans-serif;
    color: #fff;
    background: #007fc5;
    padding: 0 12px;
    vertical-align: center;
}

.theme-transcript:hover {
    color: #007fc5;
    background: #fff;
}

.theme-transcript span {
    font-size: 
}

/*  Author box
............................................*/ 

.author-box {
    background: #f5f5f7;
    margin: 60px 0 0 -30px;
    padding: 25px 10px ;
}

.author-box .author-box-img {
    overflow: hidden;
    position: relative;
    height: 115px;
    width: 115px;
    margin: 5px 0 0 20px;
    border-radius: 115px; 
    display: inline-block;
}

.author-box .author-box-img img {
    left: 0%;
    position:absolute;
    width: 115px;
}

.author-box .about-author-bio {
    display: inline-block;
    position: absolute;
    font-size: 20px;
    color: #222;
    margin: 20px 20px;
}

.author-box .about-author-bio p a {
    font-size: 14px;
    color: #828282;
    margin-left: 10px;
}

.author-box .about-author-bio p a:hover {
    color: #222;
}

.author-box .about-author-bio {
    display: inline-block;
    position: absolute;
}

.author-box p a {
    display: inline-block;
    color: #828282;
    margin: 0 6px;
}

.author-box p a:hover {
    color: #222;
}

/*  Bullet Section
............................................*/  

#article-post .bullet-section h4 {
    margin-top: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #dadada;
}

#article-post .bullet-section ul {
    list-style: none;
    font-size: 13px;
    color: #777;
    padding: 0;
}

#article-post .bullet-section li {
    position: relative;
    margin-bottom: 3px;
    padding-left: 25px;
}

#article-post .bullet-section li i.fa {
    position: absolute;
    font-size: 14px;
    top: 2px;
    left: 2px;
    color: #aaa;
}

/*  Media Contacts 
............................................*/ 

#article-post .mc-section { 
    height: 100px;
    border-radius: 10px;
    border-bottom: 1px solid #ccc;
    width: 320px;
    margin-right: 10px;
    margin-top: 10px;
    background-color: #f8f8f8;
}

#article-post .mc-section span.mc-name {
    font-family: 'ciscosansttthin', sans-serif;
    font-size: 16px;
    font-weight: 600;
    display: inline-block;
    position: relative;
    top: 24px;
}

#article-post .mc-section hr.mc-line {
    border: 0;
    height: 1px;
    background: #333;
    background-image: -webkit-linear-gradient(left, #ccc, #aaa, #666);
    background-image:    -moz-linear-gradient(left, #ccc, #aaa, #666);
    background-image:     -ms-linear-gradient(left, #ccc, #aaa, #666);
    background-image:      -o-linear-gradient(left, #ccc, #aaa, #666);
    margin-bottom: 6px;
    margin-top: 25px;
}

#article-post .mc-section span.mc-title  {
    font-family: 'ciscosansttthin', sans-serif;
    position: relative;
    float: right;
    top: 28px;
    right: 2px;
    font-size: 13px;
}

#article-post .mc-section span.mc-icons {
    color: #888;
    background-color: #ccc;
    margin: 34px 12px 0 -2px;
    border-radius: 30px;
    float: left;
    font-size: 1em;
}

#article-post .mc-section a {
    top: -100px;
    font-size:12px;
    margin: 0 0 0 12px;
    color: #19a0db;
    float: right;
}

#article-post .mc-section a:hover {
    color: #2b5693;
}

#article-post .mc-section a i {
    font-size:12px;
}

/* ========================================================================== *\
   Media Contacts  - Media Queries
\* ========================================================================== */ 

@media (min-width: 360px) {

    #media-contacts {
        margin-left: 0px;
    }
}

@media (max-width: 320px) {

    #media-contacts {
        margin-left: -20px;
    }
}

/* -------------------------------------------------------------------------- *\
   Magnific Popup Caption
\* -------------------------------------------------------------------------- */

.mfp-title { /* Style for Text Under Img in Pop up */
    position:absolute;
    color: #FFF;
    font-size: 18px;
    padding-top: 5px;
} 

/*  Footer
............................................*/ 

#article-post footer {
    border-top: 1px solid #dadada;
    padding: 15px 0 0 0;
    margin: 50px 0 0 0;
}

#article-post footer h3 {
    display: block;
    font: 400 20px/24px 'Roboto Condensed', sans-serif;
    color: #222;
    margin: 0 20px 0 0;
    padding-top: 1px;
}

#article-post footer a:hover {
    color: #222;
}

/* ========================================================================== *\
   Media Queries - Magnific Popup Caption
\* ========================================================================== */

@media (max-width: 480px) {

    #article-post header h1 {
        font-size: 20px;
        line-height: 25px;
        color: #000;
    } 

    .breadcrumb {
        font-size: 12px;
    }
}

@media (max-width: 767px) and (min-width: 300px) {

    .author-box {
        text-align: center;
    }

    .author-box .about-author-bio {
        display: block;
        position: relative;
    }
}

@media (max-width: 767px) and (min-width: 481px) {

    #article-post header h1 {
        font-size: 26px;
        line-height: 32px;
    } 

    .author-box {
        text-align: center;
    }

    .author-box .about-author-bio {
        display: block;
        position: relative;
	}

}
    

@media (min-width: 768px) {

    .author-box {
        text-align: left;
        padding-bottom: 28px;
    }
    
    .author-box img {
        position: absolute;
    }

}

@media (max-width: 991px) {

    .author-box {
        margin-left:0px;
    }

}

@media (min-width: 1200px) {

    .author-box {
        margin-left: -25px;
        padding-bottom: 28px;
    }

}