@charset "utf-8";
/* CSS Document */

/* Nav Styling */

.full-screen-nav .top-bar {
	background: transparent;
}

.full-screen-nav .top-bar .menu {
	background: transparent;
}

.full-screen-nav .grid-container .grid-x .cell h1 {
	text-align: center;
	margin: 35rem 0;
	color: white;
	text-shadow: 0.5rem 0.5rem 1rem black;
	font-size: 7rem;
	font-family: epicursive, sans-serif;
	font-weight: 400;
	font-style: normal;
}

.full-screen-nav .top-bar .menu li a {
	font-family: epicursive, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 2.4rem;
	padding: 1rem 2rem;
	color: white;
}

.full-screen-nav .top-bar .menu li a:hover {
	color: #7D6106;
}

#main-logo {
	max-height: 7rem;
}

#title-bar-logo {
	max-height: 3rem;
}


/* Hero Styling */

.hero {
	height: 75vh;
	text-align: center;
}

.hero h1 {
	margin: 25rem 0;
	color: white;
	text-shadow: 0.5rem 0.5rem 1rem black;
	font-size: 7rem;
	font-family: epicursive, sans-serif;
	font-weight: 400;
	font-style: normal;
}

.hero a h1:hover {
	color: #7D6106;
}

#therapy-hero {
	background: url("../media/therapy-hero.jpg") center center no-repeat;
	background-size: cover;
}

#contact-hero {
	background: url("../media/contact-hero.jpg") center center no-repeat;
	background-size: cover;
}

/* Footer Styling */

footer {
	padding: 1.5rem 0;
	background-color: #111149;
	color: white;
	text-align: center;
}

footer h3 {
	font-family: epicursive, sans-serif;
	font-weight: 400;
	font-style: normal;
}

footer p {
	font-family: 'Montserrat', sans-serif;
}

footer p a:link {
	color: white;
}

footer p a:hover {
	color: #7D6106;
}

/* Content Styling */

.content {
	color: #111149;
	margin: 5rem 0;
}

.content h2 {
	font-family: epicursive, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 3rem;
}

.content p, .content img, footer img, .full-screen-nav .top-bar img {
	font-family: 'Montserrat', sans-serif;
}

.content a {
	background-color: #111149;
	padding: 0.6rem;
	color: white;
	font-family: epicursive, sans-serif;
	font-weight: 400;
	font-style: normal;
}

.content a:hover {
	color: white;
	background-color: #7D6106;
}

/* Scroll Animation */
 .before-scroll {
	height: 100px;
	width: 100%;
	display: none;
}

.after-scroll {
	height: 100px;
	width: 100%;
	display: block;
} 

.text-animate-01 {
	animation: fadeEffect 0.45s;
	animation-timing-function: ease-in-out;
}

@keyframes fadeEffect {
	from {opacity: 0; position: relative; bottom: 2rem;}
	to {opacity: 1; position: relative; bottom: 0;}
}