@charset "UTF-8";

/* mixins
----------------------------------------------------------------- */
@font-face {
	font-family: "Pressura";
	src: url("https://www.bu.edu/cdn/fonts/Pressura-Bold/Pressura-Bold.eot");
	src: url("https://www.bu.edu/cdn/fonts/Pressura-Bold/Pressura-Bold.eot?") format("embedded-opentype"), url("https://www.bu.edu/cdn/fonts/Pressura-Bold/Pressura-Bold.woff") format("woff"), url("https://www.bu.edu/cdn/fonts/Pressura-Bold/Pressura-Bold.ttf") format("truetype");
	font-style: normal;
	font-weight: 700;
}

@font-face {
	font-family: "Pressura";
	src: url("https://www.bu.edu/cdn/fonts/Pressura-Bold-Italic/Pressura-Bold-Italic.eot");
	src: url("https://www.bu.edu/cdn/fonts/Pressura-Bold-Italic/Pressura-Bold-Italic.eot?") format("embedded-opentype"), url("https://www.bu.edu/cdn/fonts/Pressura-Bold-Italic/Pressura-Bold-Italic.woff") format("woff"), url("https://www.bu.edu/cdn/fonts/Pressura-Bold-Italic/Pressura-Bold-Italic.ttf") format("truetype");
	font-style: italic;
	font-weight: 700;
}

@font-face {
	font-family: "BentonSansComp";
	src: url("https://www.bu.edu/cdn/fonts/BentonSansComp-Bold/45b0ce09-9fae-45f1-8b3d-fdd995b91c6b-2.eot");
	src: url("https://www.bu.edu/cdn/fonts/BentonSansComp-Bold/45b0ce09-9fae-45f1-8b3d-fdd995b91c6b-2.eot?") format("embedded-opentype"), url("https://www.bu.edu/cdn/fonts/BentonSansComp-Bold/45b0ce09-9fae-45f1-8b3d-fdd995b91c6b-3.woff") format("woff"), url("https://www.bu.edu/cdn/fonts/BentonSansComp-Bold/45b0ce09-9fae-45f1-8b3d-fdd995b91c6b-1.ttf") format("truetype");
	font-style: normal;
	font-weight: 700;
}

/*
	888b     d888        888
	8888b   d8888        888
	88888b.d88888        888
	888Y88888P888 8888b. 888  888 .d88b.
	888 Y888P 888    "88b888 .88Pd8P  Y8b
	888  Y8P  888.d888888888888K 88888888
	888   "   888888  888888 "88bY8b.
	888       888"Y888888888  888 "Y8888


	888888888888888888
	  888      888
	  888      888
	  888      888
	  888      888
	  888      888
	  888      888
	8888888    888


	888888b.                          888   d8b .d888        888
	888  "88b                         888   Y8Pd88P"         888
	888  .88P                         888      888           888
	8888888K.  .d88b.  8888b. 888  888888888888888888888  888888
	888  "Y88bd8P  Y8b    "88b888  888888   888888   888  888888
	888    88888888888.d888888888  888888   888888   888  888888
	888   d88PY8b.    888  888Y88b 888Y88b. 888888   Y88b 888888
	8888888P"  "Y8888 "Y888888 "Y88888 "Y888888888    "Y88888888



 */
/* colors
--------------------------------------------------------- */
/* Banner styles
--------------------------------------------------------- */
.bannerContainer {
	background: #0e101a;
}

.bannerWrap {
	position: relative;
	min-height: 400px;
	background: url(images/banner.jpg) center top no-repeat;
	background-size: 200% auto;
}

.bannerWrap:after {
	content: "";
	display: table;
	clear: both;
}

@media (min-width: 768px) {
	.bannerWrap {
		min-height: 550px;
		background-size: 140% auto;
	}
}

.lt-ie9 .bannerWrap {
	min-height: 550px;
	background-size: 140% auto;
}

@media (min-width: 992px) {
	.bannerWrap {
		min-height: 749px;
		background-size: auto auto;
	}
}

.lt-ie9 .bannerWrap {
	min-height: 749px;
	background-size: auto auto;
}

.bannerWrap>img {
	position: absolute;
	top: 0;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

.titleContainer {
	position: relative;
	z-index: 2;
	margin: 0 auto;
	max-width: 1000px;
}

.bannerContainer h2,
.bannerContainer h3 {
	margin: 0 auto;
	width: 250px;
}

@media (min-width: 992px) {

	.bannerContainer h2,
	.bannerContainer h3 {
		position: absolute;
		left: 36%;
	}
}

.lt-ie9 .bannerContainer h2,
.bannerContainer .lt-ie9 h2,
.lt-ie9 .bannerContainer h3,
.bannerContainer .lt-ie9 h3 {
	position: absolute;
	left: 36%;
}

.bannerContainer {
	background: #0e101a url(images/bg.gif) repeat 0 0;
}

.bannerContainer h1 {
	display: block;
	clear: both;
	margin-bottom: 48px;
	padding-top: 40px;
	padding-left: 20px;
	width: 60%;
	color: #fafafa;
	text-transform: uppercase;
	text-transform: uppercase;
	font-size: 20px;
	font-family: "Pressura";
	line-height: 0.9;
}

@media (min-width: 768px) {
	.bannerContainer h1 {
		margin: 0 auto;
		width: 80%;
		font-size: 30px;
	}
}

.lt-ie9 .bannerContainer h1 {
	margin: 0 auto;
	width: 80%;
	font-size: 30px;
}

@media (min-width: 992px) {
	.bannerContainer h1 {
		margin: auto;
		padding-top: 60px;
		width: 100%;
	}
}

.lt-ie9 .bannerContainer h1 {
	margin: auto;
	padding-top: 60px;
	width: 100%;
}

.bannerContainer h2 {
	padding: 10px;
	padding-top: 150px;
	color: #6d5ebc;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 18px;
	font-family: "BentonSansComp";
	line-height: 1.3;
}

@media (min-width: 768px) {
	.bannerContainer h2 {
		padding-top: 60px;
	}
}

.lt-ie9 .bannerContainer h2 {
	padding-top: 60px;
}

@media (min-width: 992px) {
	.bannerContainer h2 {
		padding-top: 60px;
	}
}

.lt-ie9 .bannerContainer h2 {
	padding-top: 60px;
}

.bannerContainer h3 {
	color: #d3dde9;
	text-align: center;
	text-transform: uppercase;
	font-size: 12px;
}

@media (min-width: 992px) {
	.bannerContainer h3 {
		padding-top: 116px;
	}
}

.lt-ie9 .bannerContainer h3 {
	padding-top: 116px;
}

.bannerContainer h1 strong {
	display: block;
	clear: both;
	color: #bf1d17;
	text-shadow: 6px 4px 0px #0e173f;
	font-size: 40px;
}

@media (min-width: 768px) {
	.bannerContainer h1 strong {
		font-size: 70px;
	}
}

.lt-ie9 .bannerContainer h1 strong {
	font-size: 70px;
}

@media (min-width: 992px) {
	.bannerContainer h1 strong {
		padding: 0 0 0 48px;
		font-size: 98px;
	}
}

.lt-ie9 .bannerContainer h1 strong {
	padding: 0 0 0 48px;
	font-size: 98px;
}

.bannerContainer h1 em {
	display: block;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-style: normal;
	font-size: 20px;
	font-family: "BentonSansComp";
	line-height: 3;
}

@media (min-width: 768px) {
	.bannerContainer h1 em {
		font-size: 30px;
	}
}

.lt-ie9 .bannerContainer h1 em {
	font-size: 30px;
}

@media (min-width: 768px) {
	.rotate {
		-webkit-transform: rotate(348deg);
		-moz-transform: rotate(348deg);
		-ms-transform: rotate(348deg);
		-o-transform: rotate(348deg);
	}
}

.lt-ie9 .rotate {
	-webkit-transform: rotate(348deg);
	-moz-transform: rotate(348deg);
	-ms-transform: rotate(348deg);
	-o-transform: rotate(348deg);
}

.lt-ie9 .rotate {
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
}

.bannerContainer .coins-cta {
	display: none;
}

@media (min-width: 768px) {
	.bannerContainer .coins-cta {
		bottom: 40px;
		display: block;
		margin: 0 auto;
		width: 100%;
		text-align: center;
		position: absolute;
	}
}

.lt-ie9 .bannerContainer .coins-cta {
	bottom: 40px;
	display: block;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	position: absolute;
}

.bannerContainer .coins-cta a {
	color: #d3dde9;
	text-decoration: none;
}

.bannerContainer .coins-cta span {
	display: block;
	clear: both;
	color: #b6b3dc;
}

/* Typography
--------------------------------------------------------- */
/* Drop Cap */
.intro:first-letter {
	float: left;
	padding: 15px 15px 5px 0;
	color: #bf1d17;
	font-size: 100px;
	font-family: "Pressura";
	line-height: 60px;
}

/* Link colors and Headings */
.container a {
	color: #bf1d17;
}

.container a:hover {
	color: #911612;
}

.container h3 {
	color: #40376e;
	text-transform: uppercase;
	font-size: 36px;
	font-family: "Pressura";
}

blockquote {
	margin: 30px 0;
	padding: 30px 0;
}

blockquote:before {
	display: block;
	color: #bf1d17;
	content: '\201C';
	text-align: center;
	font-size: 70px;
	font-family: "Pressura";
	line-height: 0.5;
}

blockquote p {
	margin: 0;
	padding: 10px 50px;
	color: #40376e !important;
	text-align: center;
	font-size: 22px !important;
	font-family: "Pressura";
	line-height: 36px !important;
}

blockquote cite {
	display: block;
	clear: both;
	margin: 15px 0 0 0;
	color: #bf1d17;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-style: normal;
	font-size: 18px;
	font-family: "Pressura";
}

/* Layout
--------------------------------------------------------- */
#main article .pullLeft {
	margin: 0 auto;
	max-width: 100%;
}

@media (min-width: 768px) {
	#main article .pullLeft {
		float: left;
		margin: 0 40px 10px -150px;
		max-width: 410px;
		padding: 0;
	}
}

.lt-ie9 .pullLeft {
	float: left;
	margin: 0 40px 10px -150px;
	max-width: 410px;
}

.pullLeft p {
	margin-top: 12px;
	color: #40376e;
	font-style: italic;
	font-size: 14px;
	line-height: 24px;
}

/* Sidebar
--------------------------------------------------------- */
.article-break {
	overflow: hidden;
}

.sidebar-coins {
	display: inline-block;
	padding: 10px;
	background: url(images/bg.gif) repeat 0 0;
}

@media (min-width: 500px) {
	.sidebar-coins {
		padding: 20px 30px 100px 30px;
	}
}

.lt-ie9 .sidebar-coins {
	padding: 20px 30px 100px 30px;
}

.sidebar-coins {
	width: 100%;
	background-color: #171924;
	text-align: center;
}

.sidebar-coins .container {
	max-width: 1000px !important;
}

.sidebar-coins h2 {
	color: #bf1d17;
	text-transform: uppercase;
	font-size: 45px;
	font-size: 50px !important;
	font-family: "Pressura";
	line-height: 50px;
	-webkit-transform: rotate(355deg);
	-moz-transform: rotate(355deg);
	-ms-transform: rotate(355deg);
	-o-transform: rotate(355deg);
}

@media (min-width: 500px) {
	.sidebar-coins h2 {
		line-height: 54px;
	}
}

.lt-ie9 .sidebar-coins h2 {
	line-height: 54px;
}

.sidebar-coins h3 {
	color: #6d5ebc;
	font-size: 24px !important;
}

.sidebar-coins h3:after {
	content: ' ';
	display: block;
	width: 100px;
	border-bottom: 4px solid #40376e;
	margin: 0 auto;
	padding-bottom: 12px;
}

/* remove rotation in older IEs */
.lt-ie9 .sidebar-coins h2 {
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
}

.sidebar-caption {
	color: #e1e1e1;
	text-align: left;
	font-weight: lighter;
	font-size: 18px;
}

.sidebar-caption span {
	color: #49cff1;
	font-weight: 600;
	font-style: italic;
	font-size: 19px;
	font-family: 'Tiempos-Text', Times;
}

.sidebar-action {
	margin: 40px auto 60px auto;
	color: #97949c;
	font-weight: 300;
	font-size: 17px;
}

@media (min-width: 768px) {
	.sidebar-action {
		width: 60%;
	}
}

.lt-ie9 .sidebar-action {
	width: 60%;
}

.coin {
	padding: 0 30px;
}

@media (min-width: 768px) {
	.coin {
		display: block;
		float: left;
		width: 33%;
	}
}

.lt-ie9 .coin {
	display: block;
	float: left;
	width: 33%;
}

.coin:hover h3 {
	color: #544890;
}

.coin a {
	text-decoration: none;
}

.interactive {
	background: transparent url(images/interactive2.png) top center no-repeat;
	padding-top: 50px;
}

.interactive strong {
	display: none;
}

/* Modals
--------------------------------------------------------- */
body.modal-open {
	overflow: hidden;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-overflow-scrolling: touch;
}

.overlay p {
	color: #fff;
}

.coin-history {
	padding: 30px;
}

.coin-feature {
	text-align: center;
}

.coin-feature p {
	color: #97949c;
	font-style: italic;
	font-size: 14px;
	display: none;
}

@media (min-width: 768px) {
	.coin-feature p {
		display: block;
	}
}

.lt-ie9 .coin-feature p {
	display: block;
}

.modal-coins h3 {
	margin: 0 0 6px 0;
	color: #6d5ebc;
	text-transform: uppercase;
}

.modal-coins h4 {
	margin: 0 0 20px 0;
	color: #b6b3dc;
	text-transform: uppercase;
	font-size: 14px;
}

.modal-coins .overlay {
	background: #12141D;
}

.overlay article {
	overflow: hidden;
	margin: 60px auto 40px auto;
	padding: 30px;
	color: #ffffff;
}

@media (min-width: 768px) {
	.overlay article {
		margin: 250px auto 40px auto;
		padding: 30px 0;
		max-width: 1200px;
	}
}

.lt-ie9 .overlay article {
	margin: 250px auto 40px auto;
	padding: 30px 0;
	max-width: 1200px;
}

.overlay article h1 {
	margin-top: -20px;
}

.overlay article img {
	margin: 20px 0;
}

.coin-feature button {
	background: #40376e;
}

.coin-feature button:hover {
	background: #544890;
}

.overlay-scale {
	visibility: hidden;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
	transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}

.overlay-scale.open {
	z-index: 3000;
	visibility: visible;
	overflow: auto;
	opacity: 1;
	-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
	transition: transform 0.4s, opacity 0.4s;
	-webkit-transform: scale(1);
	transform: scale(1);
}

/* coin sidebar fallback styles if javascript is disabled */
.no-js .overlay {
	position: relative;
}

.no-js .overlay-scale {
	visibility: visible;
	opacity: 1;
}

.no-js .overlay article {
	margin: 0 auto;
	padding: 0;
}

.no-js .overlay-close {
	display: none;
}

.no-js .coin-feature .button,
.no-js .coin-feature p {
	display: none;
}

.no-js .modal-coins {
	background: #12141D;
	margin-bottom: 60px;
}

.no-js .coin-history {
	padding: 0;
}

/* Close button for Overlay */
.overlay-close {
	background: transparent url(images/close.png) no-repeat 50% 0;
}

.overlay-close:hover {
	background-position: 50% 100%;
}

.overlay-close {
	position: absolute;
	position: absolute;
	top: 20px;
	left: 50%;
	z-index: 100;
	overflow: hidden;
	width: 60px;
	height: 60px;
	outline: none;
	border: none;
	text-indent: 200%;
	-webkit-transition: all 250ms ease-in-out 0s;
	-moz-transition: all 250ms ease-in-out 0s;
	-ms-transition: all 250ms ease-in-out 0s;
	-o-transition: all 250ms ease-in-out 0s;
	transition: all 250ms ease-in-out 0s;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

@media (min-width: 768px) {
	.overlay-close {
		top: 80px;
	}
}

.lt-ie9 .overlay-close {
	top: 80px;
}

.lt-ie9 .overlay-close {
	top: auto;
}

/* Coin Flip
--------------------------------------------------------- */
.flip-container {
	/* For Firefox <= 15 to apply perspective. Without these two lines transformation will be flat.
  This fix, however, doesn’t apply if we put overflow property on the element being fixed.
  */
}

.front {
	/*Fix for Chrome, version <= 22*/
	-webkit-transform: rotateY(0deg);
	/* or this
  -webkit-transform: translate3d(0, 0, 0); */
}

.flip-container {
	margin: 0 auto 60px auto;
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-o-perspective: 1000;
	perspective: 1000;
}

.flip-container,
.front,
.back {
	width: 400px;
	height: 400px;
}

.flipper {
	position: relative;
}

.front,
.back {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
	-ms-transition: 0.6s;
	-o-transition: 0.6s;
	transition: 0.6s;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	transform-origin: center center;
}

.back {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

.flip-container.hover .back {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

.flip-container.hover .front {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.front {
	z-index: 2;
}

/*ie9 specific styles */
.ie9 .flip-container .front {
	display: block;
}

.ie9 .flip-container.hover .front {
	display: none;
}

.ie9 .flip-container.hover .back {
	display: block;
}

.ie9 .flip-container .back {
	display: none;
}

/* magnifier effect */
.coin .magnify,
.coin .thumb {
	width: 250px;
}

.magnify {
	position: relative;
	display: inline-block;
	width: 380px;
	cursor: none;
	/* magnifying glass overlay */
	/* to solve overlap bug at the edges during magnification */
}

.magnify .glass {
	position: absolute;
	z-index: 9000;
	/* always on top? */
	display: none;
	width: 180px;
	height: 180px;
	border-radius: 100%;
	background-color: #12141D;
	/* multiple box shadows to achieve the glass effect */
	background-repeat: no-repeat;
	box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
	/* hide the glass by default */
	display: none;
}

.magnify .thumb {
	display: block;
	width: 380px;
}

.touch .magnify .glass {
	display: none !important;
}

.touch .magnify {
	max-width: 100%;
	padding: 20px;
	height: auto;
	margin: 0 auto;
}

.touch .flip-container,
.touch .front,
.touch .back {
	width: 300px;
	height: 300px;
}

/*# sourceMappingURL=style.css.map */

@media (min-width: 1000px) {
	article > .container {
		width: 64%;
		margin: 0 18%;
	}
}