/* ----------------------------------
        ARTICLE STYLES
---------------------------------- */

:root {
    --sample: #fff;
}

* {
    margin: 0px;
    padding: 0px;
}

body {
    background: radial-gradient(ellipse at 50% 43%, rgb(23,98,157)20%, rgb(8,54,103)60%, rgb(2,18,53) 90%);
    background-attachment: fixed;
}

p, ul li, ol li {
    --max-font-size: 20;   
    color: #676f7a;
}

p {  
    line-height: 150%;
    margin-top: 0.5em;
    margin-bottom: 1em;
}

ul li, ol li {
    line-height: 125%;
    margin-bottom: 0.5em;
    margin-left: 1.2em;
}
ul, ol {
    margin-top: 0.5em;
    margin-bottom: 1.25em;
}
ul ul {margin-left: 35px;}

h1 {   
    --max-font-size: 60;
	--min-font-size: 26;
    line-height: 100%;
    color: #0071c5;
    text-align: center;
    padding-bottom: 0.5em;
    text-wrap: balance;
}
h1.shorttitle {
    --max-font-size: 74;
	--min-font-size: 26;
}
h1.longtitle {
    --max-font-size: 52;
	--min-font-size: 26;
}

h2 {
    --max-font-size: 35;
	--min-font-size: 24;
    line-height: 100%;
    font-weight: bold;
    margin-top: 1em;
    margin-bottom: 0.35em;
    color: #004892;
}

h3 {
    --max-font-size: 28;
	--min-font-size: 22;
    line-height: 120%;
    font-style: normal;
    font-weight: 500;
    color: #0071c5;
    margin-top: 1em;
    margin-bottom: 0.3em;
}
.notIntelOne h3 {font-weight: bold;}

#content_wrapper a {
    color: #0071c5;
    font-weight: normal;
    font-style: italic;
}


.blue { color:#0071c5; }
.gray { color:#555555; }
.yellow { color:#feda00; }
.green { color:#74a72d; }
.dk_gray { color:#333333; }
.orange { color:#ffa300;  }
.dk_orange { color:#fb4b02;}
.white { color:#fff; }
.purple { color: #180153; }
.lt_blue { color:#00adef; }
.dk_blue { color:#003b70; }


#main_wrapper {
    max-width: 75em;
    height: auto;
    margin: 0 auto;
    box-shadow: 0 0 30px 7px rgba(0, 0, 0, 0.2);
    background: #fff;
}

#content_wrapper {
    max-width: 58.75em;
    height: auto;
    margin-inline: auto;
    padding-inline: min(50px, 5vw);
}
#content_wrapper > div.column_wrapper {margin-bottom: 2em;}


.column_wrapper {
    column-count: 2;
    column-width: 400px;
    column-gap: 3em;
    column-rule: 0.05em solid #ddd;
}
.column_wrapper > p:first-child {margin-top: 0;}
.column_wrapper p, .column_wrapper .unit {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}


.center {text-align: center;}
.left {text-align: start;}
.right {text-align: end;}

.nomargin { margin: 0 !important; }
.notopmargin, .nomargintop  {margin-top: 0 !important;}
.nobottommargin, .nomarginbottom {margin-bottom: 0 !important;}


/* IMAGE STYLES ---------------- */
.header_image img {
    width: 100%;
    height: auto;
    box-shadow: 0 0.1em 0.75em 0.15em rgba(0, 0, 0, 0.2);
}
.header_image {margin-bottom: min(48px, 7vw);}

.inset_image {
	width: 100%; 
	height: auto;
	display: block;
	margin-block: min(40px, 6vw);
}

.float_right_img {
	float: right; 
	margin-inline-start: 2em;
}
.float_left_img {
	float: left; 
	margin-inline-end: 2em;
}

.half_wrapper {
    display: flex;
    column-gap: 30px;
}
.half {width: 50%;}
.half_wrapper img {
    width: 100%;
    height: auto;    
    max-width: 550px;
}


/* TABLE STYLES ---------------- */
.chart {margin-block: min(48px, 6vw);}

.touchandswipe {
    display: flex;
    align-items: center;
    margin-top: min(40px, 6vw);
    margin-bottom: -3vw;
}
.touchandswipe img {margin-inline-end: 0.5em;}
.touchandswipe.hide {display: none;}

table, th, td {
    border: 1px solid rgba(255,255,255,0.3);
    text-align: start;
    padding: 1em;
    border-collapse: collapse;
}

table td {background-color: #6599d8;}
table .head, table th {background-color: #004892;}
table .subhead {background-color: #467bbb;}

table p {
    --max-font-size: 20;
	--min-font-size: 14;
    line-height: 120%;
    margin: 0px;
    color: #fff;
}
table .head p, table .subhead p {
    --max-font-size: 22;
    --min-font-size: 16;
    font-weight: bold;
}


/* CALLOUT / PULL QUOTE  ---------------- */
.quote_wrapper {
    border-top: 0.05em solid #dedede;
    border-bottom: 0.05em solid #dedede;
    padding: 1em 4em;
    margin-top: 0.5em;
    margin-bottom: 1.75em;
    text-align: center;
}

.quote_wrapper .quote {
    color: #0071c5;
    font-style: italic;
    --max-font-size: 18;
	--min-font-size: 16;
}

.quote_wrapper .quote_name {
    --max-font-size: 13;
    --min-font-size: 12;
}

.quote_wrapper p {margin: 0.5em 0;}


/* QUIZ BUTTON ---------------- */
#quiz_box {
    text-align: center;
    margin-block: 2.875em;
    position: relative;
}

#quiz_box .quiz_horizontal_rule {
    width: 100%;
    height: 0.05em;
    background-color: #dedede;
    position: absolute;
    top: 50%;
}

#quiz_box .quiz_button {
    position: relative;
    background: #004892;
    box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: inline-block;
    transition: 0.15s background;
}

#quiz_box p {
    --max-font-size: 24;
    --min-font-size: 22;
    letter-spacing: 1px;
    font-style: normal;
    font-weight: bold;
    color: #fff;
    margin-block: 0;
    padding: 0.5em 1em;
}

#quiz_box .quiz_button:hover {background: #041e46;}


/* CUSTOM CODE ---------------- */


.emphasis b {
    color: #f79726;
}

.blue_box_wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-block: min(30px, 3vw);
}

.blue_box_wrapper .box {
    background: #004892;
    padding: 1.5em 1.7em;
}

.blue_box_wrapper .box p {
    color: #fff;
    margin: 0;
}

.blue_box_wrapper .box p b {
    color: #f79726;
}


.process_wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: min(30px, 5vw) min(20px, 2vw);
    margin-top: 25px;
}

.process_wrapper img {
    max-width: 16vw;
}

.process_wrapper h3 {
    margin-top: 0;
}
.process_wrapper p {
    margin-bottom: 0;
}




.show_on_mobile {display: none;}



/* ----------------------------------
            MEDIA QUERIES
---------------------------------- */

@media only screen and (max-width: 1024px) {

    .show_on_mobile {display: block;}
    .show_on_desktop {display: none;}

    p {line-height: 140%;}

	/* Code for showing a scrollable table on mobile (note that table needs to be wrapped inside its own "chart" div to scroll properly.) */
    .chart {overflow-x: auto;}
    #content_wrapper table td {padding: 0.75em;}
    #content_wrapper .chart table {width: 100%;}

    .float_left_img, .float_right_img {
        float: none;
        margin: min(40px, 6vw) auto 0 auto;
        width: 100%;
        height: auto;
        display: block;
    }

    .half_wrapper {flex-wrap: wrap;}
    .half {width: 100%;}
    .half_wrapper img {
        margin: 0 auto;
        display: block;
    }
    
    .quote_wrapper {margin-bottom: 14px;}

    .blue_box_wrapper {
        grid-template-columns: 1fr;
        gap: 15px;
    }


}


@media only screen and (max-width: 768px) {
   
    #content_wrapper table td {padding: 0.5em;}
    #content_wrapper .chart {margin-inline: -5vw;}

    .quote_wrapper {padding: 1em 2em;}
	
}


@media only screen and (max-width: 500px) {

    .quote_wrapper {padding: 1em;}
    
    #quiz_box .quiz_horizontal_rule {height: 0.1em;}

}