body {
	background-color: #fafafa;
}

html {
	scroll-behavior: smooth;
}

h2 {
	color: #ba8c51;
}

h4 {
    text-transform: uppercase;
    color: #325864;
}

h5 {
	font-size: x-large;
	font-weight:bold;
    color: #f3f3f3;
	font-family: verdana;
}

p {
	line-height: 2rem;
	text-align: justify;
}

hr {
    margin-top: 3rem;
}

.welcome {
    color: #325864;
}

/*-----------------------------------------NAVBAR*/

.section-scrollspy {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

nav ul a,
.sidenav a,
nav .brand-logo {
    color: #444;
    text-transform: uppercase;
}

.sidenav-trigger {
	color: #4C8497;
}

/*-----------------------------------------END NAVBAR*/

/*-----------------------------------------IMAGES*/

.parallax-container {
	min-height: 380px;
	line-height: 0;
	height: auto;
	color: rgba(255,255,255,.9);
}

.parallax-container .section {
	width: 100%;
}

#failed-photograph {
	max-width: 100%;
}

/*-----------------------------------------END IMAGES*/

/*-----------------------------------------ICONS*/

.icon-block {
	padding: 0 15px;
}

.icon-block .material-icons {
	font-size: inherit;
}

/*-----------------------------------------END ICONS*/

/*-----------------------------------------FORM*/

.send {
	background-color: #4C8497;
	margin-bottom: 1.8rem;
}

.swal-button {
    background-color: #4C8497;
}

#input-fields {
    margin-top: 1.8rem;
}

.prefix {
    color: #325864;
}
/*-----------------------------------------END FORM*/

/*-----------------------------------------CAROUSEL*/

#advertise {
    font-style: italic;
}

.carousel .carousel-item {
	width: 400px !important;
}

.carousel {
	margin-bottom: 120px;
}

/*-----------------------------------------END CAROUSEL*/

/*-----------------------------------------FOOTER*/

.social-icon {
	width: 15px;
}

.page-footer {
	margin: 0;
	background-color: #4C8497;
}

.footer-copyright {
	background-color: #325864;
}

/*-----------------------------------------END FOOTER*/

/*-----------------------------------------MEDIA QUERIES*/

@media only screen and (max-width : 992px) {
	.parallax-container .section {
		position: absolute;
		top: 40%;
	}

	#index-banner .section {
		top: 10%;
	}

	.carousel .carousel-item {
		width: 300px !important;
	}

	.carousel {
		margin-bottom: 30px;
	}
}

@media only screen and (max-width : 600px) {
	#index-banner .section {
		top: 0;
	}
}

@media only screen and (max-width : 414px) {
	h4 {
		font-size: 2rem;
    }
}

@media only screen and (max-width : 375px) {
	h4 {
		font-size: 1.8rem;
    }
}

@media only screen and (max-width : 360px) {
	h4 {
		font-size: 1.6rem;
    }

    h5 {
    font-size: 1.3rem;
    }
}

@media only screen and (max-width : 280px) {
	h4 {
		font-size: 1.4rem;
    }
}