/*
 *    ______  ______   ___  __ __
 *   /  _/  |/  / _ | / _ \/ //_/
 *  _/ // /|_/ / __ |/ , _/ ,<   
 * /___/_/  /_/_/ |_/_/|_/_/|_|  
 *
 *   IMARK Plumbing v2023
 *      Developed by CMA
 * 
*/

:root {

    --imark-opensans: 'Open Sans';
    --imark-opensanscond: 'Open Sans Condensed';
    --imark-bebas: 'Bebas Neue';
    --imark-neworder: 'New Order';

    --imark-title-size: calc(1 / 3 * 100%);

    --article-font: 'Open Sans', serif;
    --article-font-size: 16px;
}

.text-red {color:  var(--imark-red)!important;}
.text-orange {color:  var(--imark-orange)!important;}
.text-green {color:  var(--imark-green)!important;}
.text-lt-blue {color:  var(--imark-lt-blue)!important;}
.text-blue {color:  var(--imark-blue)!important;}
.text-amber {color:  var(--imark-amber)!important;}
.text-purple {color:  var(--imark-purple)!important;}
.text-violet {color:  var(--imark-violet)!important;}
.text-mint {color:  var(--imark-mint)!important;}
.text-water {color:  var(--imark-water)!important;}

article .h1,
article h1 { font-size: calc(var(--article-font-size) * 2); }

article .h2,
article h2 {
    font-size: calc(var(--article-font-size) * 1.75);
}

article .h3,
article h3 {
    font-size: calc(var(--article-font-size) * 1.5);
}

article .h4,
article h4 {
    font-size: calc(var(--article-font-size) * 1.25);
}

article .h5,
article h5 {
    font-size: calc(var(--article-font-size) * 1.05);
}

article .h6,
article h6 {
    font-size: calc(var(--article-font-size) * 1) !important;
}

article .h1,article  .h2,article  .h3,article  .h4,article  .h5,article  .h6, article h1, article h2, article h3, article h4, article h5, article h6 {
    line-height: 1.75;
}

.text-sans { font-family: var(--imark-opensans),system-ui,sans-serif !important;}
.text-neworder { font-family: var(--imark-neworder),var(--imark-opensans),system-ui,sans-serif !important;}
.text-bebas { font-family: var(--imark-bebas),var(--imark-opensanscond),system-ui,sans-serif !important;}

.text-condensed {
    line-height:1.5;
    margin-bottom:0.75rem;
    font-family: var(--imark-opensanscond);
    font-weight: 700;
}

/* */
article {
    overflow-x: hidden;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    background-color: transparent!important;
}

article {
    font-family: var(--article-font);
    font-size: var(--article-font-size) !important;
    line-height: 1.75;
}

/* LISTS */
.list-parentesis {
    counter-reset: list;
}
.list-parentesis>li {
    list-style: none;
    position: relative;
}
.list-parentesis>li:before {
    left: -40px;
    padding-right: 10px;
    position: absolute;
    text-align: right;
    width: 40px;
}
ol.list-parentesis>li:before {
    content: counter(list) ") ";
    counter-increment: list;
}

ul.list-parentesis>li:before {
    content: ") ";
}

/*===========================================================================*/
/* ARTICLE INFORMATION, AUTHOR, PDF LINK */
/*===========================================================================*/



@media screen and (max-width: 575.99px) {
    #customTitleWrap {
        --height:  calc(1.25 / 1 * 100%);
    }
}


/*===========================================================================*/
/* ARTICLE INFORMATION, AUTHOR, PDF LINK */
/*===========================================================================*/

.article-info {
    margin-top: 2rem;
    width: 100%;
    position: relative;
}

.article-info>*:empty {
    display: none;
}

.article-info .title h1 {
    font-family: var(--imark-opensans);
    font-weight: 700;
    font-size: 250%;
}

.article-info .title h1,
.article-info .title h2 {
    line-height: 1;
    margin: 0;
}


.article-info .title h1+h2 {
    font-family: var(--imark-opensans);
    margin-top: 0.5rem;
}

.article-info h4.meta {
    font-family: var(--imark-bebas), var(--imark-opensans);
    text-transform: uppercase;
    font-weight: 400;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.article-info h2+h4.meta {
    margin-top: 2rem;
}

.article-info h4.meta>span {
    display: inline-block;
}

.article-info h4.meta>span>a {
    color: inherit;
    text-decoration: none;
}


.article-info h4.meta>.issue {
    order: -2;
}

.article-info h4.meta>.meta-btn>a {
    font-family: var(--imark-bebas), var(--imark-opensanscond);
    text-decoration: none;
    font-size: 1.5rem;
    line-height: 1.2;
    position: relative;
    color: black;
    font-weight: 900;
    transition: 0.2s all;
    cursor: pointer;
}

.article-info h4.meta>.author {
    text-transform: none;
    font-family: var(--imark-opensans);
}

.article-info h4.meta>.meta-btn>a>span {
    position: relative;
    cursor: pointer !important;
}


.article-info h4.meta>.meta-btn>a:before {
    content: '';
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
    right: -0.5rem;
    bottom: -0.5rem;
    z-index: 0;
    background-color: transparent;
    transition: 0.2s all;
}

.article-info h4.meta>.meta-btn>a:hover {
    color: white;
}

.article-info h4.meta>.meta-btn>a:hover:before {
    background-color: #004974;
}

.article-info h4.meta>.section {
    font-weight: bolder;
    order: -1;
}


.article-info h4.meta>.page {
    margin-left: auto;
    order: 10;
}

.article-info h4.meta>.page:after {}

.article-info h4.meta>.author+.author:before {
    content: '& ';
    margin-left: 0.35rem;
}

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

    .article-info h4.meta>.issue:not(:empty):after,
    .article-info h4.meta>.author:not(:empty)~.section:after {
        content: ' ';
        color: transparent;
        line-height: 0;
        margin: 0 1rem;
        border-right: 1px solid black;
    }
}

@media screen and (max-width: 767px) {
    .article-info {
        margin-top: 0;
    }

    .article-info>*:not(h4.meta) {
        margin-top: 1.5vh;
    }

    .article-info h4.meta {
        align-items: flex-start;
        margin: 0;
        margin-bottom: 1rem;
        flex-wrap: wrap;
    }

    .article-info h4.meta>.meta-btn a {
        display: block;
        padding: 0 var(--bs-gutter-x, .75rem);
        padding: 0 .75rem;
        width: 100%;
    }

    .article-info h4.meta>.issue>a>span:before {
        content: '\f060';
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        margin-right: 0.5rem;
        font-size: 1.5rem;
    }

    .article-info h4.meta>.issue>a>span {
        font-size: 0;
    }

    .article-info h4.meta>.issue>a>span:after {
        content: 'Return To Issue';
        font-size: 1.5rem;
    }

    .article-info h4.meta>.meta-btn {
        display: block;
        width: 100vw;
        max-width: 100%;
    }

    .article-info h4.meta>.meta-btn>a:before {
        left: -10vw;
        right: -10vw;
    }

    .article-info h4.meta>.page i {
        float: left;
    }

    .article-info h4.meta>.author:not(:empty)~.section:after {
        content: ' ';
        color: transparent;
        line-height: 0;
        margin: 0 2vw;
        border-right: 1px solid black;
    }

    .article-info h4.meta>span {
        margin: 0.5rem 0;
    }


    .article-info h4.meta>.author,
    .article-info h4.meta>.section {
        margin-top: 1rem;
        font-size: 4vw;
    }
}

/*===========================================================================*/
/* ARTICLE CONTENT CONTAINER */
/*===========================================================================*/


article>#article-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    order: 2;
    height: initial !important;
    position: relative;
    cursor: default !important;
}

.article-content {
    width: 100%;
}

article>#article-content h1,
article>#article-content h2,
article>#article-content h3,
article>#article-content h4,
article>#article-content h5,
article>#article-content h6,
article>#article-content p,
article>#article-content li,
article>#article-content span {
    cursor: text;
    text-align: justify-all;
}




/*===========================================================================*/
/* ARTICLE CONTENT */
/*===========================================================================*/

.fw-100 {font-weight: 100!important;}
.fw-200 {font-weight: 200!important;}
.fw-300 {font-weight: 300!important;}
.fw-400 {font-weight: 400!important;}
.fw-500 {font-weight: 500!important;}
.fw-600 {font-weight: 600!important;}
.fw-700 {font-weight: 700!important;}
.fw-800 {font-weight: 800!important;}
.fw-900 {font-weight: 900!important;}

/* hide any empty elements kentico leaves in */
article .article-content>*:not(img):not(hr):not(.full-width):empty {
    display: none;
}


.article-content li {
    margin-bottom: 1rem;
}


.article-content figure img {
    width: 100%;
    user-select: none;
    object-fit: cover;
}

.text-caption,
.article-content figure figcaption {
    margin-top: 0.25rem;
    font-family: var(--imark-opensans);
    /*font-style: italic;
    font-family: var(--imark-helveticacond);
    font-weight: bold;*/
    font-weight: 500;
    font-size: calc(var(--article-font-size) * 0.9);
    line-height: 1.25;
    cursor: text;
    user-select: auto;
}


.article-content > .full-width {
    position: relative;
    margin-left: -50vw;
    margin-right: -50vw;
    left: 50%;
    right: 50%;
    width: 100vw;
}

.article-content .ratio>img {
    object-fit: cover;
}

.article-content > img {
    max-height: 80vh;
    max-width: 100%;
    object-fit: contain;
    margin: 1rem auto;
}


.article-content blockquote {
    margin: 0;
    padding: 0 1rem;
}
.article-content blockquote,.article-content blockquote p {
    font-style: italic;
    font-weight: bold;
}
.article-content blockquote p:only-of-type {margin: 0;}
.article-content blockquote>div {
    margin-left: -1rem;
    width: calc(100% + 2rem);
    height: 2.25rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    font-size: 0px;
}
.article-content blockquote>div:before,.article-content blockquote>div:after { content: ''; }
.article-content blockquote>div.noquote:before {content: none;}
.article-content blockquote>div.noquote:after {margin: 0!important;}
.article-content blockquote>div:before {
    width: 3rem;
    height: 1.5rem;
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20107.21%2067.51%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M.64%2C67.51%2C0%2C31%2C12.35%2C0H39L31.21%2C29.84h16l.66%2C37.67Zm59.29%2C0L59.29%2C31%2C71.65%2C0H98.32L90.5%2C29.84h16l.66%2C37.67Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-size: contain;
}
.article-content blockquote>div:after {
    flex: 1;
    height: 0.5rem;
    background-color: #6D6E71;
}

.article-content blockquote>div:first-child:after {margin-left: 1rem;}
.article-content blockquote>div:last-child:before {transform: scale(-1,-1);}
.article-content blockquote>div:last-child:after {margin-right: 1rem;}
.article-content blockquote>div:last-child { flex-direction: row-reverse; }


p.text-dropcap>span:first-child {
    float:left;
    font-size:calc(3 * ( var(--article-font-size) * 1.7 ));
    line-height:1;
    margin-right:0.5rem;
}

.text-closer:after {
    --icon-size: calc(var(--article-font-size) * 1.5);
    content: '';
    display: inline-block;
    height: var(--icon-size);
    width: var(--icon-size);
    margin-left: calc(var(--icon-size) * 0.25);
    
    margin-bottom: calc(var(--icon-size) * -0.25);
    
    background-size: cover;
}

.article-content a[href] {
    font-weight: bold;
    text-decoration: underline;
}

.article-content .news-box {
    background-color: var(--imark-lightgray);
    position: relative;
    mix-blend-mode: multiply;
}

.news-graphic-fill {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-size: 100% auto;
    background-repeat:no-repeat;
    background-position: 0% 0%;
    opacity:0.15;
    pointer-events:none;
}
.news-graphic-wide {
    position:absolute;
    left:0;
    right:0;
    width:100vw;
    min-height:100vh;
    z-index:-1;
    opacity:0.15;
    background-repeat:no-repeat;
}
.news-graphic>img {
    width:100%;
}
.news-graphic.graphic-1 { background-image:url('/assets/img/news-graphic-1.png');background-position:0 100%; }
.news-graphic.graphic-2 { background-image:url('/assets/img/news-graphic-2.png'); }
.news-graphic.graphic-3 { background-image:url('/assets/img/news-graphic-3.png'); }
.news-graphic.graphic-4 { background-image:url('/assets/img/news-graphic-4.png'); }


/*===========================================================================*/
/* ARTICLE EXPERT PANEL */
/*===========================================================================*/

.article-member-panel-parent {
    width: 100%;
    display: flex;
    justify-content: center;
}

.article-member-panel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    width: 100%;
    /*background-color:#E7E7E8;*/
}

/*@media screen and (min-width: 331px){
	.article-member-panel {min-width: 330px;}
}*/

.article-member-panel>.member {
    --margin-y: 2rem;
    --margin-x: 5%;
    margin: var(--margin-y) var(--margin-x);
    width: 40%;
    display: flex;
    flex-direction: column;
    position: relative;
}
[data-adjust][min-width~="576px"] .article-member-panel>.member {
    width: 30%;
}

[data-adjust][min-width~="767px"] .article-member-panel>.member {
    width: 20%;
    --margin-x: 1.5%;
}

[data-adjust][min-width~="992px"] .article-member-panel>.member {
    width: 15%;
    --margin-x: 2.5%;
}

[data-adjust][min-width~="1200px"] .article-member-panel>.member {
    width: 10%;
    --margin-x: 2.5%;
}



.article-member-panel>.member>.image {
    margin-bottom: 0.25rem;
}

.article-member-panel>.member>.image>div {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    contain: paint;
    
}
.article-member-panel>.member>.image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.article-member-panel>.member>.info {
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}

.article-member-panel>.member>.info>span {

    line-height: 1.1;
    margin: 0.25rem 0;
    word-wrap: break-word;
    font-family: var(--imark-helvetica);
}

.article-member-panel>.member span.name {
    font-size: 1.1rem;
    font-weight: bold;
}

.article-member-panel>.member span.title {
    font-size: 1.05rem;
    font-size: min(1.05rem, 105%);
}

/* STYLE - EXECUTIVE PANEL */
.article-member-panel.style-executive {
    /*background-color: #E7E7E8;*/
}

.article-member-panel.style-executive > .member > .image>.ratio {
    --bs-aspect-ratio: calc(173 / 147 * 100%);
    border-radius: 0;
}

.article-member-panel.style-executive > .member > .info {
    justify-content: flex-start;
    text-align: left;
}

.article-member-panel.style-executive > .member > .info > .name { font-family: var(--imark-opensans);}
.article-member-panel.style-executive > .member > .info > .title { font-family: var(--imark-opensanscond);}

/* STYLE - GENERIC */

.article-member-panel.style-expert>div:first-child:before {
    content: 'Our Expert Panel:';
    display: block;
    white-space: nowrap;
    font-size: calc(var(--margin-y) * 1.35);
    line-height: 1;
    position: absolute;
    top: calc(var(--margin-y) * -1);
    color: #E5E6E7;
    font-weight: 900;
    font-family: var(--imark-opensanscond);
    text-transform: uppercase;
    z-index: 0;
    mix-blend-mode: multiply;
}


/*===========================================================================*/
/* ARTICLE AD */
/*===========================================================================*/
.article-content:empty+.article-adspot {
    margin-top: 2.5rem;
}

article .article-adspot {
    margin: 1rem 0;
    width: 100%;
    background-color: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
}

/*article .article-adspot:before {
	content:'\f641';
	font-family:"Font Awesome 5 Pro";
	font-weight:900;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	font-size:3rem;
	opacity:0.2;
}*/


article .article-adspot>img,
article .article-adspot>iframe {
    margin-top: auto;
    width: 100%;
    //max-width: 980px;
}


/*===========================================================================*/
/* ARTICLE AUTHORS */
/*===========================================================================*/

.article-authors {
    display: flex;
    flex-direction: column;
}

/*
.article-authors h2:only-child {
    display: none
}

.article-authors h2 {
    order: 1;
    font-family: var(--imark-opensanscond);
    font-weight: 700;
    margin: 0.5rem 0;
}*/

.article-authors .author {
    order: 2;
    margin: 1rem 0;
    font-family: var(--imark-opensans);
    font-size: 110%;
}

.article-authors .author h4 {
    text-transform: uppercase;
    font-family: var(--imark-opensanscond);
    color: var(--imark-gray);
    font-weight: 700;
    margin: 0;
}

.article-authors .author p {
    font-size: 0.9rem;
    font-family: var(--imark-opensans);
    color: var(--bs-dark);
    margin: 0;
}

.article-authors .author .split {
    --width: 108%;
    position:  relative;
    margin-bottom: 1rem;
}
.article-authors .author .split hr {
    margin: 0;
    position: absolute;
    width: var(--width);
    left: calc(var(--width) / 22 * -1);
}

.article-authors .author:first-child+h2 span {
    display: none;
}

.article-authors .ratio {
    position: relative;
    z-index: 1;
    border-radius: 50%;
    contain: paint;
}
.article-authors .ratio img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-authors .ratio img[src="/CMSPages/GetFile.aspx?guid="] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee;
    font-weight: bold;
}


/*===========================================================================*/
/* ARTICLE CONTENT CONTAINER */
/*===========================================================================*/
.article-closer:first-of-type {
    display: block !important;
}
.article-closer {
    position: relative;
    --size: 4rem;
}

.article-closer:before {
    content: '';
    position: absolute;
    right: -0.5rem;
    bottom: -0.15rem;
    width: var(--size);
    padding-bottom: var(--size);
    border: 3px solid;
    border-top: none;border-left: none;
}



/*===========================================================================*/
/* ARTICLE SELECT MENU */
/*===========================================================================*/
.highlight-wrapper {
    position: absolute;
    pointer-events: none;
}

.popover.selectMenu {
    max-width: none;
    overflow: hidden;
    z-index: 11;
}

.popover.selectMenu .popover-body {
    padding: 0;
}

.popover.selectMenu .popover-body ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
}

.popover.selectMenu .popover-body ul>li {
    display: block;
}

.popover.selectMenu .popover-body ul>li>a {
    padding: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    cursor: pointer;
    text-align: center;
    background-color: transparent;
    transition: 0.2s all;
    color: inherit;
    text-decoration: none;
}

.popover.selectMenu .popover-body ul>li:hover>a {
    background-color: #004974;
    color: white;
}

.popover.selectMenu .popover-body a i {
    width: 1.25em;
}




/*===========================================================================*/
/* PATCHING BS GRID FOR RESIZE */
/*===========================================================================*/

.news-graphic-fill {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-size: 100% auto;
    background-repeat:no-repeat;
    background-position: 0% 0%;
    opacity:0.15;
    pointer-events:none;
}

.news-graphic-wide {
    position:absolute;
    left:0;
    right:0;
    width:100vw;
    min-height:100vh;
    z-index:-1;
    opacity:0.15;
    background-repeat:no-repeat;
}

.news-graphic>img {
    width:100%;
}

.news-graphic.graphic-1 { background-image:url('/assets/img/news-graphic-1.png');background-position:0 100%; }
.news-graphic.graphic-2 { background-image:url('/assets/img/news-graphic-2.png'); }
.news-graphic.graphic-3 { background-image:url('/assets/img/news-graphic-3.png'); }
.news-graphic.graphic-4 { background-image:url('/assets/img/news-graphic-4.png'); }


.article-bottom {order: 6;}