@charset "utf-8";

/* This is ePub's container for the entire page. */
.body{
    width: 90%;
    margin: 0px auto;
}

/* This gets rid of all underlines on any div wrapped in a link. */
div a{
	text-decoration: none;
}

/* Homepage only. This contains all the profile segments. */
.audienceProfileContainer{
	display: inline-block;
	width: 65%;
	margin: 20px 0px;
	padding: 15px 15px 15px 20px;
	background-color: #f6f6f6;
	vertical-align: top;
}
@media screen and (max-width: 1000px){
	.audienceProfileContainer{
		display: block;
		margin: 0px auto;
		padding: 15px;
		width: 90%;
	}
}

/* Homepage and Brand Awareness page. These are the social media and user number segments within the audienceProfileContainer div. */
.audienceProfileSegment{
	display: inline-block;
	margin: 0px 15px 35px 0px;
	width: 30%;
	vertical-align: top;
	overflow: hidden;
	line-height: 1.1;
}
@media screen and (max-width: 1000px){
	.audienceProfileSegment{
		width: 45%;
	}
}
@media screen and (max-width: 700px){
	.audienceProfileSegment{
		width: 95%;
	}
}

/* Homepage and Brand Awareness page. This is the big number within the audienceProfileSegment. */
.audienceProfileSegmentHeader{
	display: inline-block;
	margin: 0px;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 28px;
	color: #006FB4;
	font-weight: bold;
	border-bottom: 2px solid #696969;
	margin-bottom: 4px;
}

/* Homepage and Brand Awareness page. These are the captions below the number in the audienceProfileSegment. */
.audienceProfileSegmentText{
	display: inline;
	font-family: 'PT Serif', serif;
	font-size: 18px;
	color: #333333;
}

.audienceProfileSegment img{
	display: inline-block;
	margin-right: 8px;
	width: 60px;
	float: left;
}



/* Homepage only. This contains the big resources buttons. */
.resourcesContainer{
	display: inline-block;
	width: 34%;
	margin: 20px 0px;
	padding: 15px;
	padding-right: 0px;
	vertical-align: top;
}
@media screen and (max-width: 1000px){
	.resourcesContainer{
		display: block;
		width: 95%;
	}
}

.resourcesContainer a:link, .resourcesContainer a:visited{
	text-decoration: none;
}

/* Homepage only. These are the big buttons under resources. */
.resourcesButton{
	margin: 12px auto;
	padding: 12px 5px;
	background-color: #274294;
	cursor: pointer;
	text-align: center;
	line-height: 1.1;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 22px;
	color: #ffffff;
	width: 100%;
}

.resourcesButton:hover{
	background-color: #1F3371;
}


/* Pagewide horizontal line used in several places on most pages as just a divider. */
.lineBreak{
	width: 100%;
	height: 1px;
	margin: 20px auto;
	background-color: #d3d3d3;
}




/* Homepage only. This contains the horizontal menu with the icon buttons. */
.marketingSolutionsMenu{
	z-index: 20;
	display: block;
	margin: 0px auto;
	text-align: center;

}
@media screen and (max-width: 1100px){
	.marketingSolutionsMenu{
		display: none;
		width: 250px;
		border: 2px solid #d3d3d3;
		top: 0px;
		right: 0px;
		position: absolute;
		animation: animateHorizontalMenu 0.4s;
		overflow: visible;
	}
	@keyframes animateHorizontalMenu{
		from{
			top: -15px;
			opacity: 0;
		}
		to{
			opacity: 1;
		}
	}
}

/* Homepage only. These are the individual buttons with icons. */
.marketingSolutionsButton{
	font-size: 22px;
	margin: 0px 20px;
	padding: 5px;
	cursor: pointer;
	border-bottom: 3px solid #ffffff;
	display: inline-block;
	font-family: 'Open Sans Condensed', sans-serif;
	color: #333333;
	line-height: 1.2;
}
@media screen and (max-width: 1500px){
	.marketingSolutionsButton{
		margin: 0px 10px;
	}
}
@media screen and (max-width: 1100px){
	.marketingSolutionsButton{
		display: block;
		font-size: 20px;
		margin: 0px;
		text-align: left;
		background-color: #696969;
		color: #ffffff;
	}
}

.marketingSolutionsButton:hover{
	color: #274294;
}

.marketingSolutionsButton img{
	display: block;
	margin: 0px auto 5px auto;
	height: 60px;
}
@media screen and (max-width: 1100px){
	.marketingSolutionsButton img{
		display: none;
	}
}

/* Homepage only. This is the button with three hoizontal bars which opens the drop menu. It is only displayed on narrow screens. */
.horizontalMenuIconContainer{
	display: none;
	margin-left: 10px;
	padding: 5px;
	float: right;
	width: 65px;
	background-color: #696969;
	cursor: pointer;
	text-align: center;
}
@media screen and (max-width: 1100px){
    .horizontalMenuIconContainer{
		display: block;
	}
}

.horizontalMenuIconContainer img{
	max-width: 95%;
}

/* Homepage only. This is the page-wide gray menu background which is visible when the drop menu is open. It is necessary so that clicking outside the menu, on this div, closes the drop menu.*/
#dropMenuBackground{
	z-index: 10;
	width: 100%; 
	height: 100%; 
	position: fixed; 
	top: 0; 
	left: 0;
	overflow: scroll;
	display: none;
	background-color: rgba(48,48,48, .5);
}


/* Homepage only. This contains all the marketing solutions options. */
#products {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* Homepage only. These are the individual marketing solutions. */
.card{
	width: 23%;
	margin: 10px;
	padding-bottom: 10px;
	text-align: left;
	background-color: #f6f6f6;
	display: none;
}
@media screen and (max-width: 700px){
    .card{
		width: 95%;
		margin: 10px auto;
	}
}


.cardHeader{
	background-color: #DA3832;
	padding: 8px 12px;
	cursor: pointer;
	line-height: 1.4;
	min-height: 54px;
}

.cardHeader:hover{
	background-color: #B4302B;
}

.cardHeader h4{
	margin: 0px;
	padding: 0px;
	font-family: 'PT Serif', serif;
	font-size: 18px;
	color: #fff;
	display: inline-block;
	max-width: 75%;
	font-weight: normal;
}

.card p{
	padding: 8px 12px;
	font-family: 'PT Serif', serif;
	font-size: 16px;
	color: #333333;
}

/* This is the next arrow in the card header. */
.nextArrow{
	display: inline-block;
	max-height: 20px;
	float: right;
	margin: 2px;
}



/* Homepage only. These are the small symbols at the bottom of the marketing solutions cards. */
.miniIcon{
	margin-right: 4px;
	height: 20px;
	float: right;

}


/* Homepage only. This header displays above the marketing solutions cards. Its text changes when a menu button is clicked. */
#marketingSolutionsHeader{
	text-align: center;
	margin: 00px auto;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 32px;
	color: #333333;
}






/* These are the section headers on the homepage only. */
.homePageSectionHeader{
	margin: 0px auto 20px auto;
	padding: 0px;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 32px;
	color: #333333;
	line-height: 1.2;
}

/* This only applies to the Marketing Solutions header. It makes it left-aligned and narrow on home screens to get it out of the way of the drop menu icon. */
@media screen and (max-width: 700px){
	.homePageSectionHeaderNarrow{
		text-align: left;
		max-width: 65%;
	}
}

/* These are all non-homepage section headers. */
.sectionHeader{
	margin: 40px auto 20px auto;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 32px;
	color: #333333;
}

.subHeader{
	margin: 0px auto 15px auto;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 28px;
	font-weight: bold;
	color: #006FB4;
	line-height: 1.2;
}

.subSubHeader{
	margin: 0px auto 15px auto;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 22px;
	font-weight: bold;
	color: #006FB4;
	line-height: 1.2;
}

/* This is the download button at the top of all non-homepage pages. */


.downloadAsPDF{
	margin: 40px 0px 25px 5px;
	padding: 12px 5px;
	background-color: #274294;
	cursor: pointer;
	text-align: center;
	line-height: 1.1;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 22px;
	color: #ffffff;
	width: 220px;	
	display: inline-block;
}


.downloadAsPDF:hover{
	background-color: #1F3371;
}




/* This is the back button at the top of all non-homepage pages. */
.backToMediaKitHomeButton{
	margin: 40px 0px 25px 5px;
	padding: 12px 5px;
	background-color: #274294;
	cursor: pointer;
	text-align: center;
	line-height: 1.1;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 22px;
	color: #ffffff;
	width: 220px;
	display: inline-block;	
}

.backToMediaKitHomeButton img{
	height: 16px;
	vertical-align: unset;
}

.backToMediaKitHomeButton:hover{
	background-color: #1F3371;
}

/* These are the page wide buttons used for "Back to Top" and elsewhere. */
.wideButton{
	margin: 40px auto 60px auto;
	padding: 12px 5px;
	background-color: #274294;
	cursor: pointer;
	text-align: center;
	line-height: 1.1;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 22px;
	color: #ffffff;
	width: 100%;
	overflow: hidden;
}
.wideButton:hover{
	background-color: #1F3371;
}

/* These are the buttons at the top of all non-homepage pages which have jump links to sections below. */
.navButton{
	display: inline-block;
	margin: 5px;
	padding: 12px 5px;
	background-color: #DA3832;
	cursor: pointer;
	text-align: center;
	line-height: 1.1;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 22px;
	color: #ffffff;
	width: 200px;
}

.navButton:hover{
	background-color: #B4302B;
}


/* Used on all pages. This restricts content to half the page width, and becomes full page width on narrow screens. */
.halfWidthDiv{
	width: 48%;
	display: inline-block;
	margin-right: 15px;
	vertical-align: top;
	overflow: hidden;
}
@media screen and (max-width: 1000px){
	.halfWidthDiv{
		width: 95%;
		display: block;
		margin: 15px auto 40px auto;
		border-bottom: 1px solid #696969;
	}
}

.halfWidthDiv img{
	max-width: 99%;
}




/* Brand Awareness page only. This combines a few related divs to apply a background color. */
.ourPublication{
	max-width: 100%;
	padding: 15px 15px 50px 15px;
	background-color: #f6f6f6;
}



/* Brand Awareness page only. These are the small dark gray divs, floated right, which contain some magazine stats. */
.statsContainer{
	float: right;
	margin: 0px 0px 10px 10px;
	padding: 20px 0px 10px 0px;
	background-color: #61646e;
	color: #ffffff;
	line-height: 1.4;
	max-width: 270px;
}
@media screen and (max-width: 600px){
	.statsContainer{
		float: none;
		display: block;
		margin: 10px 0px;
	}
}

/* This is the big numer in the statsContainer. */
.statsNumber{
	display: inline-block;
	padding: 0px 15px;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 32px;
	font-weight: bold;
	border-right: 1px solid #ffffff;;
}

.statsContainer p{
	display: inline-block;
	padding: 0px 15px;
	font-size: 14px;
	font-family: 'PT Serif', serif;
	width: 50%;
	text-align: left;
}

.statsContainer p a:link, .statsContainer p a:visited{
	color: #ffffff;
}



/* Brand Awareness page only. These are the stats at the bottom of the ourPublication div. */
.advertisingPerceptions{
	max-width: 100%;
	text-align: center;
}
@media screen and (max-width: 700px){
    .advertisingPerceptions{
		text-align: left;
	}
}

.advertisingPerceptions p{
	display: inline-block;
	margin: 10px;
	max-width: 30%;
	font-family: 'PT Serif', serif;
	line-height: 1.2;
	vertical-align: top;
}
@media screen and (max-width: 700px){
    .advertisingPerceptions p{
		display: block;
		max-width: 95%;
	}
}

/* This is the big numer in the advertisingPerceptions div. */
.advertisingPerceptionsNumber{
	display: block;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: bold;
	font-size: 50px;
	color: #0f6fb1;
}





/* Used on a couple of pages, this has an icon on the left, and a paragraph next to it. */
.imageBesideTextContainer{
	padding: 20px 0px;
	overflow: hidden;
}

/* This lets the paragraphs within float as a block next to the image without wrapping around the image. */
.imageBesideTextContainer div{
	display: inline-block;
	max-width: 65%;
	vertical-align: top;
}
@media screen and (max-width: 700px){
	.imageBesideTextContainer div{
		display: block;
		max-width: 90%;
	}
}

.imageBesideTextContainer img{
	float: left;
	width: 220px;
	margin: 0px 20px 0px 0px;
}
@media screen and (max-width: 700px){
	.imageBesideTextContainer img{
		float: none;
		display: block;
		margin: 0px 0px 15px 0px;
		text-align: right;
	}
}


/* Content Marketing page only. This works only in addition to imageBesideTextContainer. It adds size limits to the images. */ 
.contentMarketing img{
	width: 125px;
}






/* Used on all pages. This just centers the image within. */
.imageContainer{
	text-align: center;
}

.imageContainer img{
	margin: 0px auto;
	max-width: 95%;
}



/* Used on several pages. This aligns the Continuing Education images. */
.continuingEducation{
	text-align: center;
}

.continuingEducation img{
	margin: 10px;
	max-height: 200px;
}

.continuingEducation a:link, .continuingEducation a:visited{
	text-decoration: none;
	border-bottom: none;
}

.continuingEducation a:hover{
	opacity: 0.7;
}




/* Used on several pages. This floats content to the right, and goes pagewide on narrow screens. */
.floatRight{
	width: 50%;
	margin: 8px 0px 8px 8px;
	float: right;
	text-align: center;
	overflow: hidden;
}
@media screen and (max-width: 700px){
    .floatRight{
		float: none;
		width: 80%;
		margin: 8px auto;
	}
}

.floatRight img{
	max-width: 100%;
	max-height: 250px;
}



@media screen and (max-width: 700px){
	.desktopOnly{
		display: none;
    }
}


.mobileOnly{
	display: none;
}
@media screen and (max-width: 700px){
	.mobileOnly{
		display: block;
    }
}





#footnotes{
	font-size: 12px;
	color: #696969;
}




.ECFooterButton{
	display: inline-block;
	margin: 5px;
	padding: 12px 5px;
	background-color: #274294;
	cursor: pointer;
	text-align: center;
	line-height: 1.1;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 22px;
	color: #ffffff;
	width: 200px;
}
.ECFooterButton:hover{
	background-color: #1F3371;
}

.BNPHeader{
	margin: 0px auto 15px auto;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 28px;
	font-weight: bold;
	line-height: 1.2;
}

.footerTextDiv{
	display: inline-block;
	margin: 20px 10px 0px 10px;
	vertical-align: top;
}
@media screen and (max-width: 700px){
    .footerTextDiv{
		display: block;
		margin: 10px;
	}
}

.addressDiv{
	width: 30%;
}
@media screen and (max-width: 700px){
    .addressDiv{
		width: 95%;
	}
}

.aboutDiv{
	width: 65%;
}
@media screen and (max-width: 700px){
    .aboutDiv{
		width: 95%;
	}
}







/* If your table overflows your page's width, this creates a sideways scroller under your table only, as opposed to your whole page. */ 
.tableContainer{
	margin: 0px auto;
	padding: 0px;
	overflow-x: auto;
}

/* Apply this class to your table's opening tag. No other elements within the table need classes or inline styles. */
.advertiseTable{
	max-width: 100%;
	margin: 15px auto;
	border-collapse: collapse;
	border: 2px solid #696969;	
}

/* This affects all table cells. The media queries below shrink the text and cell padding for narrow screens. */
.advertiseTable td{
	border: 1px solid #696969;
	padding: 6px;
	vertical-align: top;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 20px;
	color: #000000;
	line-height: 1.2;
	background-color: #ffffff;
	text-align: center;
}
@media screen and (max-width: 1000px){
	.advertiseTable td{
		font-size: 16px;
		padding: 4px;
    }
}

/* This makes the background color on every other row a different color, to make it easier to read. */
.advertiseTable tr:nth-child(odd) td{
	background-color: #eff3f5;
}

/* This affects only the column number in parentheses. */
.advertiseTable td:nth-child(1){
	text-align: left;
}

/* This affects only the row number in parentheses. In this case it makes the first row a header row. */
.advertiseTable tr:nth-child(1) td{
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: bold;
	background-color: #696969;
	color: #ffffff;
	vertical-align: middle;
	border: 1px solid #ffffff;
}





/* This affects only the column number in parentheses for the eBlast table. */
.eBlastTable td:nth-child(2), .eBlastTable td:nth-child(3){
	width: 80px;
}
@media screen and (max-width: 1000px){
	.eBlastTable td:nth-child(2), .eBlastTable td:nth-child(3){
		width: 50px;
    }
}