.heart-component {
	margin: 5rem 0;
}

.heart-header {
	background: #4a8a9b;
	padding: 1rem 0;
	max-width: 1170px;
	margin: 0 auto;
}

.wrapper {
 height: auto;
}

.heart-header h1 {
	color: #FFF;
	font-family:"Roboto Slab", serif;
	font-weight: 300;
	text-align: center;
	font-size: 2.5rem;
	line-height: 1;
}

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

/* displays items in a row, wraps and centers all containing divs*/
.editor-flexbox-wrapper {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	margin: 0 auto;
}

/* flexbox quarter width option - goes to third width on tablet*/
.editor-flexbox-quarter {
	flex-basis: 25%;
	position: relative;
	padding: 1em;
}

/* flexbox third width option*/
.editor-flexbox-third {
	flex-basis: 33.333%;
	position: relative;
	padding: 1em;
}

/* flexbox half width option*/
.editor-flexbox-half {
	flex-basis: 50%;
	position: relative;
	padding: 1em;
}

/* center containing divs horizontally */
.editor-flex-horiz-center {
	display: flex;
	justify-content: center;
}

/* center containing divs vertically */
.editor-flex-vert-center {
	display: flex;
	align-content: center;
}


.editor-align-self-vert {
	align-self: center;
}

.editor-align-self-horiz {
	justify-content: center;
}

#heart-graphic-container {
	background: #000000;
	max-width: 1170px;
	margin: 0 auto;
	height: auto;
	padding: 1rem;
}

#heart-graphic-container p {
	color: #FFFFFF;
	font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-size: 1rem;
}

#heart-graphic-container .button {
	color: #FFFFFF;
	display: block;
	text-decoration: none;
	transition: all ease-in-out .3s;
	font-family:"Roboto Slab", serif;
	font-weight: 400;
	position: relative;
	font-size: 1.15rem;
	background: transparent;
	border: 0;
	text-align: center;
	margin: 0 auto;
	margin-bottom: 1rem !important;
	border-bottom: 2px dotted #4a8a9b;
}

#heart-graphic-container button:hover, #heart-graphic-container .active-link {
	 text-shadow: 0 0 30px #fff, 0 0 30px #fff, 0 0 30px #004F9F, 0 0 30px #004F9F, 0 0 40px #004F9F, 0 0 40px #004F9F, 0 0 70px #004F9F, 0 0 70px #004F9F, 0 0 80px #004F9F; 0 0 80px #004F9F; 0 0 90px #004F9F; 0 0 90px #004F9F;
	 font-weight: 700;
}


#heart-graphic-container .button_info {
	width: 100%;
	padding: 1rem 1.5rem;
	transition: all ease-in-out .5s;
    border-top: 2px dotted #4a8a9b;
    border-bottom: 2px dotted #4a8a9b;
	display: none;
}

.heart-graphic {
	max-height: 550px;
}

#heart-graphic-container .hide {
	display: none;
    }

 #heart-graphic-container .show {
	display: block;
	-webkit-animation: fadein 2s;
    -moz-animation: fadein 2s;
    -ms-animation: fadein 2s;
    animation: fadein 2s;
    }


    @-ms-keyframes fadein {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }

    @-moz-keyframes fadein {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }

   @-webkit-keyframes fadein {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }

    @keyframes fadein {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }




@media only screen and (max-width: 51em) {
	#heart-graphic-container .button {
		display: inline-block;
		border-bottom: 0px dotted #4a8a9b;
		margin-bottom: .75rem !important;
		text-align: center;
		position: relative;
		padding: 0 1rem;
	}

	#heart-graphic-container .button:after {
		content: " ";
		font-size: 1rem;
		line-height: 1rem;
		border-right: 2px dotted #4a8a9b;
		min-width: 5px;
		padding: 0 1rem;
		height: 1rem;
		position: absolute;
		right: 0;
		top: .25rem;
	}
	#heart-graphic-container .button:last-child:after {
		display: none;
		}
}


@media only screen and (max-width: 51em) {
	.editor-fullwidth-medium {
		flex-basis: 100%;
	}
	.editor-flexbox-quarter, .editor-flexbox-half, .editor-flexbox-third {
		padding: .25rem;
	}
	.heart-graphic {
		max-height: 400px;
	}
	#heart {
		height: 100%;
	}

}

/* ~496px to ~816px */
@media only screen and (min-width: 31em) and (max-width: 51em) {

}


/* ~496px and less */
@media only screen and (max-width: 31em) {

}