@import url('https://fonts.googleapis.com/css?family=Rokkitt:700');

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@600&display=swap');

@import url('https://media.americascreditunions.org/ext/resources/CUMag_Misc/columns.css');


* {
font-variant-ligatures: none;
}

.user-actions {
    display: none;
}

.recent-articles .article-author-bio .author_bio a {
	font-size: 12px !important;
}

.sponsor-bio {
    display: none;
}

.nn-photobox {
	width: 250px;
	float: right;
	margin: 0px 0px 5px 10px;
	padding: 4px 4px 0px 4px;
	background-color: #E7E7E7;
	font-size: 8pt;
	line-height: 10pt;
}
.nn-photobox p {
	padding-bottom: 0px !important;
	margin-bottom: 4px;
}
.nn-caption {
	padding: 5px;
	padding-bottom: 0px;
	margin: 0px;
	background-color: #F3F3F3;
}
.nn-mugshot {
	width: 80px;
	float: right;
	margin: 0px 0px 2px 10px;
	padding: 0px;
	font-size: 8pt;
	line-height: 9pt;
	font-weight: bold;
	text-align: center;
}
.nn-mugshot p {
	padding-bottom: 0px !important;
	margin-bottom: 0px !important;
}
.nn-mugshot img {
	border: 1px #9F9F9F;
}
.nn-mugname {
	-webkit-hyphens:none;
	-moz-hyphens:none;
	-ms-hyphens:none;
	-o-hyphens:none;
	hyphens:none;
	padding-bottom: 0px;
	padding: 2px 0px 0px 0px;
}

.cumag-caption {
	font-size: 11px;
	font-weight:bold;
	line-height:14px;
	padding: 0 0 6px 0;
}

.rs-photobox {
	width: 40%;
	float: right;
	margin: 0px 0px 5px 10px;
	padding: 4px 4px 0px 4px;
	background-color: #E7E7E7;
	font-size: 8pt;
	line-height: 11pt;
}

.rs-caption {
	padding: 0px 4px 0px 4px;
	padding-bottom: 0px;
	margin: 0px;
	background-color: #E7E7E7;
}

.nn-newphoto {
	width: 40%;
	float: right;
	margin: 0px 0px 5px 20px;
	padding: 0px 6px 0px 6px;
	background-color: #E7E7E7;
	font-size: 9pt;
	line-height: 12pt;
}

.nn-newphoto p {
	margin-top: 8px !important;
	margin-bottom: 8px !important;
}

.nn-newcaption {
	padding: 0px 4px 0px 4px;
	padding-bottom: 0px;
	margin: 0px;
	background-color: #E7E7E7;
}

.nn-newcaption p {
	margin-top: 0px;
	margin-bottom: 10px;
}

.audiobox {
	display: block;
	margin: auto;
	width: 100%;
	margin-top: 15px;
	margin-bottom: 15px;
	padding-top: 12px;
	padding-bottom:12px;
	background-color: #E7E7E7;
	font-size: 11pt;
	line-height: 15pt;
	text-align:center;
}

.RSQuote {
	display: table;
	width: 80%;
	padding-top:36px !important;
	padding-bottom:36px !important;
	-webkit-hyphens:none;
	-moz-hyphens:none;
	-ms-hyphens:none;
	-o-hyphens:none;
	hyphens:none;
	margin: auto;
	border: 0px;
	vertical-align: middle;
	text-align: center;
	font-family: 'Rokkitt', serif;
	font-size:33px !important;
	line-height:35px !important;
	color:#342649 !important;
}

.PQRight, .PQLeft {
	text-align: center;
	font-family: 'Rokkitt', serif;
	font-size:33px !important;
	line-height:35px !important;
	color:#342649 !important;
	border: 0px;
	vertical-align: middle;
	padding-top:30px !important;
	padding-bottom:30px !important;
	-webkit-hyphens:none;
	-moz-hyphens:none;
	-ms-hyphens:none;
	-o-hyphens:none;
	hyphens:none;
	display: table;
	width: 45%;
	float: right;
	margin: 0px 22px 0px 22px !important;
	}
.PQLeft {
	float: left;
	}	
@media screen and (min-width: 0px) and (max-width: 875px) {
	.PQRight, .PQLeft {
	width: 80%;
	float: none;
	margin: auto;
	}
}
@media screen and (min-width: 0px) and (max-width: 768px) {	
	.PQRight, .PQLeft {
	width: 45%;
	float: right;
	margin: 0px 22px 0px 22px !important;
	}	
	.PQLeft {
	float: left;
	}
}
@media screen and (min-width: 0px) and (max-width: 600px) {
	.PQRight, .PQLeft {
	width: 80%;
	float: none;
	margin: auto;
	}
}

.sponsored-box {
	width: 35%;
	float: right;
	margin: 5px 0px 5px 10px;
	padding: 0px 6px 0px 6px;
	background-color: #ffffff;
	border-style: solid;
	border-width: 2px;
	border-color: #bf202f;
	font-size: 12px;
	line-height: 12px;
}

.sponsored-caption {
	padding: 0px 4px 0px 4px;
	padding-bottom: 0px;
	margin: 0px;
	background-color: #ffffff;
	-webkit-hyphens:none;
	-moz-hyphens:none;
	-ms-hyphens:none;
	-o-hyphens:none;
	hyphens:none;
}

audio {
	height:90px;
	padding-top:20px;
	padding-bottom:10px;
	width: 100%;
}

.Vote {
	display: none;
}



/* 2019 CU Mag Digital Styles */

.subhead {font-weight:bold !important; margin-bottom:0px !important;} /* Use on h4 */
.firstparagraph {margin-top:0px !important;} /* Use on first p to remove space above */


/* Pullquote with photo */

.PQBox {
width: 100%;
padding: 15px 30px 10px 30px;
margin-top: 35px;
margin-bottom: 35px;
}
.PQQuote {
font-size:1.9em;
line-height:1.02em;
color:#342649;
font-family: 'Source Serif Pro', serif;
-webkit-hyphens:none;
-moz-hyphens:none;
-ms-hyphens:none;
-o-hyphens:none;
hyphens:none;
}
.PQName {
font-size: 1.25em;
font-weight:bold;
}
	
@media screen and (min-width: 0px) and (max-width: 920px) {
.PQQuote {
font-size:1.5em;
line-height:0.95em;
	}
.PQName {font-size: 1.1em;
	}
}
	
@media screen and (min-width: 0px) and (max-width: 768px) {
.PQQuote {
font-size:1.9em;
line-height:1.02em;
	}
}
	
@media screen and (min-width: 0px) and (max-width: 620px) {
.PQQuote {
font-size:1.5em;
line-height:0.95em;
	}
.PQName {font-size: 1.1em;
	}
}
	
@media screen and (min-width: 0px) and (max-width: 525px) {
.PQQuote {
font-size:2.1em;
line-height:1.05em;
text-align:center;
	}
.PQName {
font-size:1.2em;
text-align:center;}
}



/* Pullquote without photo */

.PQNoPhoto {
	display: table;
	width: 80%;
	padding-top:36px !important;
	padding-bottom:0px !important;
	-webkit-hyphens:none;
	-moz-hyphens:none;
	-ms-hyphens:none;
	-o-hyphens:none;
	hyphens:none;
	margin: auto;
	border: 0px;
	vertical-align: middle;
	text-align: center;
	font-family: 'Source Serif Pro', serif;
	font-size:2.1em !important;
	line-height:1.1em !important;
	color:#342649;
}
.PQNoPhotoName {
	padding-top:10px !important;
	padding-bottom:36px !important;
	-webkit-hyphens:none;
	-moz-hyphens:none;
	-ms-hyphens:none;
	-o-hyphens:none;
	hyphens:none;
	margin: auto;
	border: 0px;
	vertical-align: middle;
	text-align: center;
	font-size:1.2em !important;
	}



/* Podcast Box */

.PodcastBox-right {
width: 50%;
float: right;
padding: 15px 25px 5px 25px;
margin: 0px 0px 20px 20px;
background-color: #e2e2e2;
border-radius:8px;
line-height:1.25em;
}
.PodcastBox-right h1 {
font-size:24px !important;
line-height:28px !important;
}
	
.PodcastBox {
width: 100%;
padding: 15px 25px 5px 25px;
margin: 55px 0px 55px 0px;
background-color: #e2e2e2;
border-radius:8px;
line-height:1.25em;
}
	
.PodcastLink {
font-weight: bold;
font-size: 1.2em;
line-height: 1.2em;
margin: 25px 0px 5px 0px !important;
}
.PodcastDesc {
font-size: 0.9em;	
margin: 15px 0px 0px 0px !important;
}

.PodcastBox a {border:0px none !important;}
.PodcastBox-right a {border:0px none !important;}
	
@media screen and (min-width: 0px) and (max-width: 875px) {
.PodcastLink {margin: 5px 0px 5px 0px !important; font-size:1.1em;}
.PodcastDesc {margin: 5px 0px 5px 0px !important;}
.PodcastBox-right {width: 100%;}
}

@media screen and (min-width: 0px) and (max-width: 768px) {
.PodcastLink {margin: 20px 0px 5px 0px !important; font-size:1.2em;}
.PodcastDesc {margin: 15px 0px 5px 0px !important;}
.PodcastBox-right {width: 50%; float: right;}
}
	
@media screen and (min-width: 0px) and (max-width: 600px) {
.PodcastLink {margin: 5px 0px 5px 0px !important; font-size:1.0em;}
.PodcastDesc {margin: 5px 0px 5px 0px !important;}
.PodcastBox-right {width: 100%;}
}
	
@media screen and (min-width: 0px) and (max-width: 480px) {
.PodcastLink {font-size:1.2em;}
}



/* Podcast YouTube video box */
.podcast-youtube {
background: #fff;
border: 1px solid #eee;
box-sizing: border-box;
border-radius: 5px;
padding: 12px;
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
}



/* Video box (padded container, use h2 for title and p for caption) */

.videobox {
width: 100%;
padding: 20px;
margin: 30px 0px 30px 0px;
background-color: #eaeaea;
}
.videobox p {color: #000000; font-size:0.8em; line-height:1.5em; margin-bottom:0px !important;}
.videobox h2 {color: #000000; font-size:1.25em !important;}



/* Callout box right */

.Callout-right {
width: 40%;
float: right;
padding: 15px 15px 0px 15px;
margin: 0px 0px 10px 20px;
background-color: #eaeaea;
line-height:1.25em;
}
.Callout-right p {
font-size: 0.9em;
line-height:1.2em;
margin-top:12px;
margin-bottom:12px;
}
.Callout-right a {font-weight:bold;}

@media screen and (min-width: 0px) and (max-width: 525px) {	
.Callout-right {width: 100%; margin:30px 0px 30px 0px;}
}



/* Sidebar */

.sidebar {
width: 100%;
padding: 15px 30px 5px 30px;
margin-top: 30px;
background-color: #dfeef5;
}
.sidebar p {color: #000000 !important;}
.sidebar h2 {color: #000000 !important;}
.sidebar ol {color: #000000 !important;}



/* Right side Infographic (goes full width on small screens) */

.infographic-right {
width: 40%;
float: right;
margin: 5px 0px 5px 10px;
padding: 0px 6px 10px 15px;
border-width: 0px;
text-align:center;
}
@media screen and (min-width: 0px) and (max-width: 575px) {
.infographic-right {
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
padding: 20px 75px 20px 75px !important;}
}
@media screen and (min-width: 0px) and (max-width: 425px) {
.infographic-right {
padding: 20px 30px 20px 30px !important;}
}



/* More Articles SubEx Callout */

.morearticles {
width: 50%;
float: right;
padding: 20px 20px 10px 20px;
margin: 0px 0px 10px 20px;
background-color: #dfeef5;
line-height:1.25em;
}
.morearticles p {
font-size: 1em;
line-height:1.2em;
margin-top:12px;
margin-bottom:12px;
}
.morearticles a {font-weight:bold;}
.morearticles h4 {
font-weight:bold !important;
margin-bottom:0px !important;
}
.morearticles ul {
list-style: disc outside none;
padding: 0px 0px 0px 25px;
list-style-image: url('/ext/resources/CUMag_Misc/bullet-triangle-black.png');
}
.morearticles li {line-height:1.15em !important;}

@media screen and (min-width: 0px) and (max-width: 525px) {	
.morearticles {width: 100%; margin:30px 0px 30px 0px;}
}



/* Right Sidebar (goes full width on small screens) */

.rightsidebar {
width: 50%;
float: right;
padding: 20px 20px 10px 20px;
margin: 0px 0px 10px 20px;
background-color: #eaedee;
line-height:1.25em;
}
.rightsidebar p {
font-size: 0.9em;
margin-top:12px;
margin-bottom:12px;
}
.rightsidebar h4 {
font-weight:bold !important;
margin-bottom:0px !important;
}
.rightsidebar ul {
list-style: disc outside none;
padding: 0px 0px 0px 20px;
list-style-image: url('/ext/resources/CUMag_Misc/bullet-triangle-black.png');
}
.rightsidebar li {font-size:0.9em; line-height:1.3em !important; margin-bottom:10px !important;}

@media screen and (min-width: 0px) and (max-width: 525px) {	
.rightsidebar {width: 100%; margin:30px 0px 30px 0px;}
}

.article-sponsored {display:none;}

/* Link Box for sidebar-style bullet list */

.linkbox {
width: 100%;
padding: 25px 30px 25px 30px;
margin-top: 10px;
background-color: #e4e9e9;
line-height:2em;
font-size:1.1em;
}
	
@media screen and (min-width: 0px) and (max-width: 520px) {
.linkbox {
line-height:1.9em;
font-size:0.92em;
	}
}



/* Focus Box for CU Mag articles */
.focus {
width: 50%;
float: right;
padding: 15px 20px 10px 20px;
margin: 0px 0px 10px 20px;
background-color: #dfeef5;
line-height:1.25em;
}
.focus p {
font-size: 1em;
line-height:1.2em;
margin-top:12px;
margin-bottom:12px;
}
.focus a {font-weight:bold;}
.focus h4 {
font-weight:bold !important;
margin-bottom:0px !important;
}
.focus ul {
list-style: disc outside none;
padding: 0px 0px 0px 25px;
margin-top: 10px !important;
list-style-image: url('/ext/resources/CUMag_Misc/bullet-triangle-black.png');
}
.focus li {line-height:1.15em !important;}

@media screen and (min-width: 0px) and (max-width: 525px) {	
.focus {width: 100%; margin:30px 0px 30px 0px;}
}



/* Resources Box for CU Mag articles, full-width at end of article */
.resources {
width: 100%;
float: right;
padding: 15px 20px 10px 20px;
margin: 10px 0px 15px 0px;
background-color: #dfeef5;
line-height:1.25em;
}
.resources p {
font-size: 1em;
line-height:1.2em;
margin-top:12px;
margin-bottom:12px;
}
.resources a {
font-weight:bold;
border-bottom:0px none !important;
}
.resources h4 {
font-weight:bold !important;
margin-bottom:0px !important;
}
.resources ul {
list-style: disc outside none;
padding: 0px 0px 0px 25px;
margin-top: 10px !important;
list-style-image: url('/ext/resources/CUMag_Misc/bullet-triangle-black.png');
}
.resources li {line-height:1.15em !important;}

@media screen and (min-width: 0px) and (max-width: 525px) {	
.resources {width: 100%; margin:30px 0px 30px 0px;}
}