/* Article Styles */

#article-page{
    background-color: #F2F2F2;
    padding-bottom: 1px;
}

.article-content p, .article-content li{
    font-size: 18px;
    line-height: 1.3;
}

.article-container{
    background-color: white;
    border: 1px solid #E6E6E6;
    padding: 1.5rem;
}

.article-body-grid{
    display: grid;
    grid-template-columns: 30px 1fr;
    grid-column-gap: 3rem;
    grid-row-gap: 1.5rem;
    position: relative;
}


.article-body-grid > * {
  min-width: 0;
}

.article-container img{
    max-width: 100%;
}





#article-page .sidebar-container{
    display: grid;
    grid-template-rows: auto 1fr;
}

/*
.sidebar-grid-2{
    display: grid;
    grid-template-rows: 1fr 1fr;
}
*/

@media (max-width: 1100px) {
#article-page .sidebar-container{
    grid-template-rows: auto auto;
}
    
/*
    .sidebar-grid-2{
        grid-template-rows: auto auto;
    }
*/
}

@media (max-width: 650px){
    .article-body-grid{
        grid-template-columns: 1fr;
        grid-gap: 1.5rem;
    }
}





/* Article Header Styles */

.article-header{
    border-bottom: 1px solid #CCCCCC;
}

.content-tag{
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05rem;
    margin-bottom: 0.25rem;
    font-weight: normal;
    position: relative;
    overflow: hidden;
    
}

.content-tag span {
    margin: 0 0 5px .5rem;
    padding: 0 0 0 .5rem;
    border-left: 1px solid #CCCCCC;
    line-height: 1;
    font-size: inherit;
    break-inside: avoid-column;
    position: relative;
    left: calc(-1rem - 1px);
}

.authors-list{
    display: flex;
    flex-wrap: wrap;
    margin: 1.25rem 0 1.5rem 0;
    line-height: 25px;
    font-size: .65rem;
}

.author{
    margin: 0 .75rem 0 0;
    line-height: inherit;
    font-size: inherit;
}

.authors-list p.by-author{
    padding: 0;
    margin: 0;
    line-height: 25px;
}

/*
.author:first-child{
    margin: 0 1rem 5px 0;
}
*/

.pub-date-issue-page-container{
    display: block;
    overflow: hidden;
    position: relative;
}

.pub-date-issue-page{
    display: flex;
    flex-wrap: wrap;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .025rem;
    line-height: 1;
    color: #5B5B5B;
    margin-bottom: 1rem;
    position: relative;
    left: calc(-1rem - 1px);
    overflow: hidden;
}

.pub-date-issue-page span{
    margin: 0 0 5px .5rem;
    padding: 0 0 0 .5rem;
    border-left: 1px solid #CCCCCC;
    line-height: 1;
    font-size: inherit;
    break-inside: avoid-column;
}

.pub-name{
    font-style: italic;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--dark);
}

.article-container .article-header button{
    line-height: 1;
    font-size: .75rem;
    background-color: transparent;
    color: #5B5B5B;
    border: 1px solid #CCCCCC;
    padding: .25rem .5rem;
}

.article-container .article-header button:hover{
    background-color: #CCCCCC;
}

.article-container .article-header .show-all{
    display: none;
}

.article-container .article-header .show-fewer{
    display: none;
}





.pv-page .article-author-date a{
    font-weight: bold;
    color: var(--pv-clr);
    text-decoration: none;
    transition: .2s ease-in-out;
}

.pv-page .article-author-date a:hover{
    text-decoration: underline;
    transition: .2s ease-in-out;
}







/* Social Media Aside Styles */

.article-aside{
    height: 100%;
    padding: 1.5rem 1.75rem 0 0;
}

.article-aside .sticky-top{
    position: sticky;
    top: 80px;
}

.article-aside .social-icons-container a{
    display: inline-block;
}

.social-icons{
    margin-bottom: 1rem;
    width: 30px;
}

.social-icon{
    fill: #666666;
    transition: .2s ease-in-out;
}

.social-icons:hover svg path, .social-icons:hover svg polygon{
    fill: var(--pv-clr);
    transition: .2s ease-in-out;
}

@media (max-width: 650px){
    .article-aside .sticky-top{
        top: 0;
    }
    
    .article-aside {
        padding: 1rem 1.75rem 0 0;
        border-bottom: 1px solid #CCC;
    }
        
    .article-aside .social-icons-container a{
        margin-right: .5rem;
    }
}








/* Article Body Content Styles */

.article-content{
    padding: 1.5rem 3rem 0 0;
    margin: 0 auto;
    max-width: 800px;
    justify-self: center;
}

.article-content *{
    scroll-margin-top: 85px;
}

.article-content h2.article__title, .article__title, .article-content h2{
    font-size: 1.75rem;
    font-family: var(--header-font);
    font-weight: 800;
    margin-top: 1.5rem;
}

.article-content h3.article__title, .article__title, .article-content h3{
    font-size: 1.55rem;
    font-family: var(--header-font);
    font-weight: 800;
    margin-top: 1.5rem;
}

.article-content h4{
    font-size: 1.25rem;
    font-family: var(--header-font);
    font-weight: 800;
    margin-top: 1.5rem;
}

.article-content ol, .article-content ul{
    padding-left: 1rem;
}

.article__image_full_width{
    width: 100%;
}

.article-content img{
/*    width: 100%;*/
}

.article-content figure {
    margin: 0 0 1rem 0;
}

.article-content figure.float-left {
    /*width: 350px;*/
    max-width: 350px;
    /*max-width: 100%;*/
    display: inline-block;
    margin: 0 1rem .25rem 0;
    float: left;
}

.article-content figure.float-right {
    /*width: 350px;*/
    max-width: 350px;
    /*max-width: 100%;*/
    display: inline-block;
    margin: 0 0 .25rem 1rem;
    float: right;
}

.article-content figure > .fig-img-container{
    display: grid;
    align-items: center;
    width: 100%;
/*
    background-color: #F2F2F2;
    border: 1px solid #CCCCCC;
*/
}

.article-content figure .fig-img-container .fig-img{
    position: relative;
    width: auto;
/*    width: 100%;*/
    max-width: 100%;
    margin: 0 auto;
}

.article-content figure .fig-img-container > img{
/*    width: 100%;*/
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}

.article-content figure.floating-left .fig-img-container > img, .article-content figure.floating-right .fig-img-container > img{
    width: auto;
}

.article-content figure .fig-img-container .fig-img .expand-overlay{
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0;
    display: flex;
    align-items: center;
    background-color: rgba(0,0,0,0.75);
    padding: .25rem .35rem;
    line-height: 1;
    border-radius: .25rem;
    transition: .2s ease-in-out;
}

.article-content figure .fig-img-container .fig-img:hover .expand-overlay{
    opacity: 1;
    transition: .2s ease-in-out;
}

.article-content figure .fig-img-container .fig-img svg{
    width: 15px;
}

.article-content figure .fig-img-container .fig-img svg path{
    fill: white;
}

.article-content figure .fig-img-container .fig-img .expand-overlay p{
    margin: 0 0 0 .35rem;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .02rem;
    color: white;
    font-weight: 400;
}

.article-content figure .fig-img-container .fig-img:hover .expand-overlay:hover svg path, .article-content figure .fig-img-container .fig-img:hover .expand-overlay:hover p{
    opacity: .75;
    transition: .2s ease-in-out;
}

.article-content figure img{
    display: block;
    width: auto; 
    max-width: 100%;
    margin: 0 auto 1rem auto;
}

.article-content figure img:last-child{
    margin: 0 auto 0 auto;
}

.article-content figcaption, .figure__caption, .article__caption{
    font-size: .85rem;
    color: #757575;
    padding-top: .5rem;
    padding-bottom: .5rem;
    margin-bottom: 0;
    border-bottom: 1px solid #D5D5D5;
}

.article-content figcaption p{
    font-size: .85rem;
    color: #757575;
    margin-bottom: 0;
}



.article__callout{
    background-color: #F2F2F2;
    border: 1px solid #CCCCCC;
    padding: 1rem 1.5rem;
    margin: 0 0 1.5rem 0;
}

.article-content .float-left{
    max-width: 300px;
    display: inline-block;
    margin: 0 1rem .25rem 0;
    float: left;
}

.article__callout.float-left{
    width: 300px;
    display: inline-block;
    margin: 0 1rem .25rem 0;
    float: left;
}

.article-content .float-right{
    max-width: 300px;
    display: inline-block;
    margin: 0 0 .25rem 1rem;
    float: right;
}

.article__callout.float-right{
    width: 300px;
    display: inline-block;
    margin: 0 0 .25rem 1rem;
    float: right;
}

@media (max-width: 750px) {
    .article__callout.float-left, .article-content .float-left{
        width: 100%;
        margin: 0 0 1rem 0;
    }

    .article__callout.float-right, .article-content .float-right{
        width: 100%;
        margin: 0 0 1rem 0;
    }
}

.c-article__callout h2:first-child, .c-article__callout h3:first-child, .c-article__callout h4:first-child, .c-article__callout p:first-child, .c-article__callout ul:first-child{
    margin-top: 0;
}

.article__callout h2:first-child, .article__callout h3:first-child, .article__callout h4:first-child, .article__callout p:first-child, .article__callout ul:first-child{
    margin-top: 0;
}

.article__callout p:last-child, .article__callout li:last-child, .article__callout ul:last-child{
    margin-bottom: 0;
}

.article__references__section h3{
    padding-top: 1.5rem;
    border-top: 1px solid #CCC;
    line-height: 1;
    margin-bottom: 1rem;
}

.article__references li, .c-article__references li{
    word-wrap: break-word; 
}

.article__in-line-ad{
    display: inline-block;
    width: 100%;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    padding: .5rem 0 1rem 0;
    margin: 2rem 0;
}

.article__related{
    display: inline-block;
    width: 100%;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    padding: 1rem 0;
    margin: 1.5rem 0;
}

.article-body-grid .article-content .article__related a{
    text-decoration: none;
    color: var(--dark);
    font-family: var(--header-font);
    font-weight: 800;
}

.article__related p{
    margin-bottom: 0;
}

.article__related span{
    font-family: var(--header-font);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02rem;
}

.pvarticle .lity-content .lity-image img{
    height: 90vh;
    object-fit: contain;
}

.article__author-card{
/*
    display: grid;
    grid-template-columns: 80px 1fr;
*/
    display: flex;
    grid-gap: 1rem;
    min-height: 20px;
    padding: 16px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 2px;
}

.article__author-photo{
    width: 80px;
}

.author-photo-container{
/*
    aspect-ratio: 1 / 1;
    border-radius: 50rem;
    overflow: hidden;
*/
}

.article-content .article__author-photo figure{
    margin: 0 0 0 0;
    width: 80px;
}

.article-content .article__author-photo img{
    object-fit: cover;
    object-position: center center;
    width: 100%;
}

.article__author-bio p{
    font-size: 1rem;
    line-height: 1.3;
}

.article-content .article__author-card a.btn-small{
    color: #5B5B5B;
    text-decoration: none;
}

.article-content .article__author-card a.btn-small:hover{
    color: inherit; 
    text-decoration: none;
}

@media (max-width: 650px) {
    .article-content{
        padding: 0;
    }
}

@media (max-width: 435px) {
    .article__author-card{
        flex-wrap: wrap;
    }
    .article__author-photo {
        margin: 0 auto;
    }
}


/* Table Styles */

.hscroll, .o-table-container{
    display:inline-block;
    width: 100%;
    margin: 0 0 1rem 0;
    overflow-x: auto;
    scrollbar-color: var(--dark) #fafafa;
    scrollbar-width: thin;
    background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) calc(20px * 2)), radial-gradient(farthest-side at 0 0%, rgba(34,34,34, 0.15), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) calc(20px * 2)), radial-gradient(farthest-side at 100% 50%, rgba(34,34,34, 0.15), rgba(255, 255, 255, 0)) 100%;
    background-color: rgba(255, 255, 255, 1);
    background-repeat: no-repeat;
    background-attachment: local, scroll, local, scroll;
    background-size: 100% 100%, 20px 200%, 100% 100%, 20px 200%;
}

.hscroll table, .o-table-container table{
    margin-bottom: 1rem;
}

.article-content table th *:last-child, .article-content table td *:last-child, .article-content table ul li:last-child{
    margin-bottom: 0 !important;
}

.article-content table caption{
  caption-side: initial;
}

.t-notes{
    font-size: .85rem;
    color: #757575;
}

.article-content table tr td{
    padding: .75rem 1rem .75rem 0;
    font-size: 18px;
}

.article-content table tr td:last-child{
    padding-right:0;
}





/* Article Pagination Styles */

.article-pagination{
    margin-top: 2.5rem;
}






/* Article Tag Styles */

.article-meta{
    border-top: 1px solid #CCC;
    padding: 1.5rem 0 0 0;
    margin-top: 1.5rem;
}

.article-meta h4{
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .025rem;
    line-height: 1;
    color: #5B5B5B;
    font-weight: 800;
    margin-bottom: 1rem;
    text-align: left;
}

.article-tag{
    padding: .5rem 1rem;
    border: 1px solid #CCCCCC;
    border-radius: .25rem;
    text-decoration: none;
    color: #000000;
    font-size: .85rem;
    font-weight: 700;   
    transition: .2s ease-in-out;
}

@media (max-width: 650px) {
    .article-meta {
        grid-column: 1/2;
    }
}



/* Sponsor Footer Logos */

.spon-btmlogo-container{
    margin-top: 3rem;
    border-top: 1px solid rgba(0,0,0,0.125);
    padding-top: 2rem;
}

.spon-btmlogo-container p{
    font-size: .85rem;
    font-weight: bold;
}





/* Related Bottom Content */

.related-content-bottom{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.bottom-card{
    width: 100%;
    background-color: white;
    border: 1px solid #E6E6E6;
}

.bottom-card .thumb-image{
    width: 100%;
    overflow: hidden;
}

.bottom-card .thumb-image img{
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center center;
}

.bottom-card .card-copy{
    padding: 1rem;
}

@media (max-width: 900px){
    .related-content-bottom{
        grid-template-columns: 1fr 1fr;
    } 
}

@media (max-width: 600px){
    .related-content-bottom{
        grid-template-columns: 1fr;
    } 
}








/* PV Styles */

.pv-page .article-content a{
    color: var(--pv-clr);
    text-decoration: none;
    transition: .2s ease-in-out;
}

.pv-page .article-content a:hover{
    color: var(--pv-clr);
    text-decoration: underline;
    transition: .2s ease-in-out;
}

.pv-page .article-tag:hover{
    border: 1px solid var(--pv-clr);
    background-color: var(--pv-clr);
    color: white; 
    transition: .2s ease-in-out;
}

.pv-page .article-content .btn a, .pv-page .article-content a.btn, .pv-page .article-content a.btn-lg{
    color: white;
    text-decoration: none;
    transition: .2s ease-in-out;
}

.pv-page .article-content .btn a:hover, .pv-page .article-content a.btn:hover, .pv-page .article-content a.btn-lg:hover{
    text-decoration: none;
    transition: .2s ease-in-out;
}