/*** START css-variables ***/
	@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Roboto+Slab:wght@100;200;300;400;500;531;600;700;800;900&display=swap');
	
	:root {
	/**	--font-family-sans-serif: 'Open Sans', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		--font-family-serif: 'Roboto Slab', Georgia, 'Times New Roman', serif; **/
		
		--color-teal: #00bfb3; 
		--color-navy: #003e51;
		--color-black: #222222;
		--color-red: #f93822;
		--color-light-grey: #f8f9f4;
		--color-grey: #555555;
		
		--main-text-color: var(--color-black);
		--heading1-text-color: var(--color-teal);
		--heading2-text-color: var(--color-navy);
	
		--margin-default: 2.4rem;
		
		--heading-margin-top: 2.6rem;
		--heading-margin-bottom: var(--margin-default);
		
		--rule-color: --color-grey;
	}
/*** END css-varibles ***/
	

	
	html {
		font-size: 10px; /* this is what is set on the site already (in their bootstrap.min.css file) */
	}
		 
	body {
	/**	font-family: var(--font-family-sans-serif);  **/
		color: var(--color-black);
	}
	
	a {
		color: var(--color-navy);
	}
	a:hover,
	a:focus {
		color: var(--color-teal);
	}
	.page-copy a {
		text-decoration: underline;
	}
	
	h1, h2, h3, h4, h5 {
		font-weight: 700;
	}
	
	.page-copy h1, 
	.page-copy h2,
	.page-copy h3,
	.page-copy h4, 
	.page-copy h5 {
		margin-top: var(--heading-margin-top);
		margin-bottom: var(--heading-margin-bottom);
	}
	.page-copy h1:first-child, 
	.page-copy h2:first-child,
	.page-copy h3:first-child,
	.page-copy h4:first-child, 
	.page-copy h5:first-child {
		margin-top: 0;
	}
	
	h1 {
    color: var(--color_light-blue);
		font-size: 3.2rem;
	}
	
	h2 {
		font-size: 2.8rem;
	}
	
	h3 {
		font-size: 2.4rem;
	/**	font-family: var(--font-family-serif); **/
	}
	
	h4 {
		font-size: 1.8rem;
	/**	font-family: var(--font-family-serif); **/
	}
	
	h5 {
		font-size: 1.4rem;
	/**	font-family: var(--font-family-serif); **/
	}
	
	.page-copy p,
	.page-copy ul,
	.page-copy ol,
	.page-copy dl,
	
	.blog-post p,
	.blog-post ul,
	.blog-post ol,
	.blog-post dl {
		margin: 0 0 var(--margin-default);
	}
	
	hr {
		border-color: var(--rule-color);
	}
	
	/* Text Utilities */
	.text-primary {
		color: var(--color-navy);
	}
	.text-secondary {
		color: var(--color-teal)
	}
	.text-tertiary {
		color: var(--color-red);
	}
	
	.page-heading {
		background-color: var(--color-light-grey);
		padding-top: 50px;
		padding-bottom: 20px;
		margin-bottom: 3rem;
	}
	.page-heading, .breadcrumb {
    background-color: #f8f9f4 !important;
}
.breadcrumb li {
    color: #3b1d82;
}
.breadcrumb li.active {
    color: #ea0763;
}
		
	/* Buttons */
	.btn-default :hover { /* fixes the :hover, ie. there was a space after .btn-default */
		background-color: unset;
		color: unset;
	}
	
	.btn-default:active,
	.btn-default:hover,
	.btn-default:focus {
		border-color: var(--color-teal);
		background-color: var(--color-teal);
		color: white;
	}


.feedback-banner p {
 color: #337ab7;
}

.feedback-banner .h4 {
 color: #ea0763;
}


.speaker-bg {
	background: url(/resources/images/speaker-bg.png) left center no-repeat;
	background-size: cover;
}

.card-speaker {
	border: 10px solid #fff;
	position: relative;
	overflow: hidden;
}

.sponsor-photo {
	width: 100%;
	border-radius: 0!important;
}

.card-speaker .speaker-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	background: rgba(59,29,130,.9);
	padding: 15px 5px;
	z-index: 2;
	transition: all .7s ease;
}

.card-speaker .speaker-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(59,29,130,.8);
	z-index: 1;
	transform: translateY(-60px);
	opacity: 0;
	z-index: -1;
	transition: all .6s ease;
}

.speaker-social {
	position: absolute;
	width: 100%;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.card-speaker .speaker-footer h4 {
	margin-bottom: 0;
	color: #fff;
	font-size: 20px;
	margin-bottom: 3px;
}
.card-speaker .speaker-footer p {
	margin-bottom: 0;
	color: #fff;
	font-size: 14px;
}
.speaker-social li span {
	font-size: 18px;
}

.location-title {
	font-size:4em;
	color: #fff;
	text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
	margin-top: 150px;
	margin-bottom: 30px;
}

.card-speaker .speaker-footer h4 {
	font-size: 18px;
}

.margin-bottom-20{
	margin-bottom: 20px;
}