/*
	Common Elements
 */

h1, h2, h3, h4, h5, h6, p, li, a, span {
	font-family: 'Inter', sans-serif;
}

a {
	color: #666;
}
a:hover {
	text-decoration: none;
}

html {
	scroll-behavior: smooth;
}

body {
	background: #F4F4F4;
}

body.loading {
	overflow-y: hidden;
}

.nav-links li, .social-links li {
	position: relative;
	margin: 0 8px;
}

.nav-links li:not(:last-child)::after {
	content: '';
	float: right;
	width: 2px;
	height: 18px;
	background: #666;
	position: absolute;
	right: -9px;
	top: 15px;
}

.nav-links li a {
	display: block;
	padding: 15px 12px;
	color: #666;
	font-size: .75rem;
	font-weight: 700;
	background: #FFF;
	-webkit-transition: background .15s ease-in-out;
	-moz-transition: background .15s ease-in-out;
	-o-transition: background .15s ease-in-out;
	transition: background .15s ease-in-out;
}

.nav-links li a:hover {
	background: #EEE;
}

/*
	Header
 */
header {
	z-index: 998;
	position: fixed;
	width: 100%;
	top: 0;
	-webkit-box-shadow: 1px 2px 8px 1px;
	box-shadow: 1px 2px 8px 1px;
	border-top: 4px solid #2E9444;
}

.navbar {
	padding: 0 3rem;
	background: #FFF;
	z-index: 999;
}

.logo img {
	height: 70px;
}

.navbar-nav .nav-item {
	margin: 0 5px;
	background-color: #FFF;
	color: #666;
}

.navbar-light .navbar-nav .nav-link {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 14px;
	padding: 30px 15px;
}

.navbar-light .navbar-nav .nav-item:hover .nav-link {
	color: #1D75BC;
}

/*
	Footer
 */

footer {
	margin-top: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

footer span.copyright {
	color: #666;
	font-weight: 700;
	display: block;
	text-align: center;
}

footer img {
	border-radius: 10px;
}

footer .nav-links li a, footer .nav-links li:hover a {
	background: #F4F4F4;
}

/*
	Social Links
 */
.social-links {
	list-style-type: none;
	margin: 15px 0 10px;
	padding: 0;
}

.social-links li {
	display: inline;
}

.social-links i {
	font-size: 24px;
	width: 36px;
	height: 36px;
	text-align: center;
	position: absolute;
	top: 0;
	transition: top .15s ease-in-out;
	color: #666;
	padding-top: 6px;
}

.social-links a i:last-child {
	top: 36px;
	color: #FFF;
}

.social-links a {
	position: relative;
	width: 36px;
	height: 36px;
	display: inline-block;
	overflow: hidden;
	border-radius: 5px;
}

.social-links a:hover i:first-child {
	top: -36px;
}

.social-links a:hover i:last-child {
	top: 0;
}

i.fab.fa-facebook-f:last-child {
	background-color: #29487D;
}

i.fab.fa-twitter:last-child {
	background-color: #1DA1F2;
}

i.fab.fa-instagram:last-child {
	background: #D6249F radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
}

i.fab.fa-linkedin:last-child {
	background-color: #0672B0;
}

/*
	Loader
 */
#Loader {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: #F4F4F4;
	z-index: 1000;
	justify-content: center;
	align-items: center;
	-webkit-transition: opacity .333s linear;
	transition: opacity .333s linear;
	display: none;
}

#Loader .spinner {
	width: 70px;
	text-align: center;
}

#Loader .spinner > div {
	width: 18px;
	height: 18px;
	background-color: #2E9444;

	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

#Loader .spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

#Loader .spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% {
		-webkit-transform: scale(0)
	}
	40% {
		-webkit-transform: scale(1.0)
	}
}

@keyframes sk-bouncedelay {
	0%, 80%, 100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	40% {
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}

body.loading #Loader {
	opacity: 1;
	display: flex;
}

body.hidingLoader #Loader {
	opacity: 0;
}

/*
	Jumbotron
 */
.jumbotron {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 0;
}

.jumbotron-content {
	max-width: 50%;
}

.jumbotron-content h1 {
	text-transform: uppercase;
	font-size: 4rem;
	text-align: center;
	margin-bottom: 40px;
	font-weight: 700;
}

.jumbotron-content h2 {
	font-size: 1.5rem;
	font-weight: 400;
	text-align: center;
}

.jumbotron .scrollArrow {
	position: absolute;
	bottom: 25px;
	text-shadow: 1.5px 1.5px 4px rgba(0, 0, 0, .5);
	font-size: 2.5rem;
	color: #2E9444;
}

.content-outer {
	padding: 30px 0;
}

.content-inner {
	max-width: 1600px;
	width: 90%;
	margin: 0 auto;
}

.infobox-inner {
	width: 80%;
	margin: 0 auto;
}

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

.infobox .infobox-image img {
	border-radius: 3px;
}

.infobox .infobox-content {
	margin-top: 10px;
	text-align: center;
}
.infobox .infobox-content button {
	 background-color: #2E9444;
	 padding: 10px 15px;
	 color: #FFF;
	 border-radius: 6px;
 }
.infobox .infobox-content button a {
	color: #FFF;
}
.infobox .infobox-content button:hover {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: tada;
	animation-name: tada;
}

.centerpiece {
	padding: 150px 0 100px;
	text-align: center;
}
.centerpiece h1 {
	font-size: 4rem;
}
.centerpiece p {
	font-size: 24px;
}
.centerpiece button {
	background-color: #2E9444;
	border-radius: 6px;
}
.centerpiece button a {
	color: #FFF;
	padding: 10px 15px;
	display: block;
}
.centerpiece button:hover {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: tada;
	animation-name: tada;
}

/*
	Page Header
 */
.page-header {
	padding: 150px 0;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}
.page-header h1 {
	font-size: 3.5rem;
	color: #2E9444;
	text-shadow: 1px 2px 4px #FFF;
}
.page-header h2, .page-header h3, .page-header h4, .page-header h5, .page-header h6 {
	color: #1D75BC;
	text-shadow: 1px 2px 4px #FFF;
}
.page-header a {
	color: #1D75BC;
}
.page-header p {
	font-size: 20px;
}
.page-header button {
	background-color: #2E9444;
	border-radius: 6px;
	border: none;
	box-shadow: 2px 4px 8px 1px #666;
	-webkit-box-shadow: 2px 4px 8px 1px #666;
}
.page-header button a {
	color: #FFF;
	padding: 10px 15px;
	display: block;
}
.page-header button:hover {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: tada;
	animation-name: tada;
}

@media (max-width: 767px) {
	.jumbotron-content h1, .centerpiece h1 {
		font-size: 2rem;
	}
	.centerpiece p {
		font-size: 16px;
	}
}

@media (max-width: 991px) {
	.jumbotron-content {
		max-width: 100%;
	}
}