/* ----- Global CSS ------- */
body {
	background-color: #2b9e67;
	font-family: Roboto, sans-serif;
	font-weight: 400;
}

a {
	color: #2b9e67;
}

a:hover {
	color: #999999;
}

a:hover, a:focus {
	text-decoration: none;
}

.boxshadow-2 {
	box-shadow: 0 1px 10px rgba(0, 183, 196, 0.1);
}

.boxshadow-4 {
	box-shadow: 0 1px 20px rgba(0, 183, 196, 0.1);
}

.bg-custom {
	background-color: #2b9e67;
}

dl, ol, ul {
	margin-left: 2rem;
}

li {
	margin-bottom: .75rem;
}



/* Sticky Footer Solution by Steve Hatcher - http://stever.ca - http://www.cssstickyfooter.com */

* { margin: 0; padding: 0; } 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body { height: 100%; }

#wrap { min-height: 100%; }

#main {
	overflow: auto;
	padding-bottom: 100px; /* must be same height as the footer */
}

.footer {
	position: relative;
	margin-top: -100px; /* negative value of footer height */
	height: 100px;
	clear: both;
}

/*Opera Fix*/
body:before { /* thanks to Maleika (Kohoutec) */
	content: "";
	height: 100%;
	float: left;
	width: 0;
	margin-top: -32767px; /* thank you Erik J - negate effect of float */
}




/* ----- Navbar ------- */
.navbar {
	background: #2b9e67 no-repeat url("../img/wave.svg");
	min-height: 200px;
	background-position: left bottom;
	background-size: cover;
	padding: 2rem 1rem 1.5rem;
	display: block;
}

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

.navbar .nav-item {
	line-height: 1em;
}

.navbar .nav-item .nav-link {
	color: black;
}

.navbar .navbar-toggler:focus {
	outline: none;
}

@media (min-width: 768px) {	
	.navbar-nav {
		text-align: left;
	}
	
	.navbar .container {
		display: block;
	}
	
	#navbarResponsive {
		position: relative;
		top: 4.5rem;
	}
	
	.navbar .nav-item .nav-link {
		position: relative;
		padding-left: 1rem;
		padding-right: 1rem;
		color: white;
	}

	.navbar .nav-item .nav-link:before {
		transition: all ease 0.2s;
		width: 0;
		height: 1px;
		background: white;
		left: 50%;
		bottom: 0;
		content: '';
		position: absolute;
	}

	.navbar .nav-item .nav-link:hover:before {
		width: 100%;
		left: 0;
	}
}




/* ----- Slider ------- */
#slider {
	height: auto;
	width: 100%;
}

#slider .carousel-inner {
	height: 100%;
}

#slider .carousel-inner .carousel-item .slide {
	width: 100%;
	height: 100%;
	position: relative;
}

#slider .carousel-inner .carousel-item .slide img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

#slider .carousel-inner .carousel-item .slide .caption {
	animation: fadeInUp linear 0.5s;
	position: absolute;
	bottom: 40px;
	margin-right: 10%;
	padding: 10px;
	background: #5e5e5ea3;
	color: #fff;
	left: 10%;
	z-index: 1;
	text-transform: uppercase;
}




/* ----- Articles ------- */
.coverimage-wrap {
	height: 250px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.card-body .title .card-title {
	color: #2b9e67;
	margin-bottom: 1rem;
	font-size: 2rem;
}

.card-body .title h2.card-title {
	font-size: 1.2rem;
}

.card-columns .card-body .title .card-title {
	margin-bottom: 0;
}

.card-body .title:hover .card-title {
	color: #999999;
}

.card-body img {
	max-width: 100%;
	height: auto;
}

.card-body h4 {
	margin-top: 3rem;
}




/* responsive */
@media (min-width: 576px) {
	.card-columns {
		column-count: 1;
	}
}

@media (min-width: 768px) {
	.card-columns {
		column-count: 2;
	}
}

@media (min-width: 1200px) {
	.card-columns {
		column-count: 3;
	}
}

@media (min-width: 1300px) {
	.card-columns {
		column-count: 4;
	}
}




/* ----- Pagination ------ */
.pagination .page-link {
	transition: all ease 0.3s;
	color: #2b9e67;
}

.pagination .page-link:hover {
	color: #fff;
	background-color: #2b9e67;
}




/* ----- Footer ------ */
.footer {
	background: #2b9e67 no-repeat url("../img/wave-bottom.svg");
	height: 100px;
	background-position: center top;
	background-size: 100% auto;
	color: #000;
	text-align: right;
	font-size: .9rem;
	color: #6c757d;
}

.bull {
	display: inline-block;
	padding: 0 .25rem;
}

.footer .container {
	position: absolute;
	bottom: 1rem;
}

.footer .footer-link {
	color: #6c757d;
}

.footer .social {
	padding: 0;
	list-style: none;
}

.footer .social li.nav-item a.nav-link {
	color: #fff;
}

.footer .social li.nav-item a.nav-link img.nav-svg-icon {
	width: 1rem;
	height: 1rem;
	padding-bottom: 2px;
}

.footer .social li.nav-item a.nav-link:hover {
	color: #fff;
}

.footer .footer-text {
	font-size: 0.7em;
}

@media (min-width: 992px) {
	.footer .social li.nav-item {
		float: left;
	}
}

@media (max-width: 768px) {
	a.nav-link {
		padding: 10px 0;
	}
}




/* ----- Scroll down ------ */
.scrollDown {
	animation: fadeInDown 1s infinite;
	position: fixed;
	bottom: 80px;
	left: 50%;
	z-index: 999;
	text-align: center;
}

.scrollDown span.sroll-text {
	color: #2b9e67;
	font-size: 0.8em;
}

.scrollDown span.la {
	font-size: 1.2em;
	color: #2b9e67;
}




/* ----- Scroll to top ------ */
.scrollTop {
	position: fixed;
	display: none;
	bottom: 10px;
	right: 10px;
	z-index: 999;
	border-radius: 100%;
	border: 1px solid #2b9e67;
	width: 40px;
	height: 40px;
	background: #ffffffaa;
	line-height: 40px;
	text-align: center;
	font-size: 1em;
}

.scrollTop span {
	color: #2b9e67;
}




/* ----- Animation ------ */
.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

.fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}