@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

html, body {
	height: 100%;
	width: 100%;
	font-family: 'Poppins', sans-serif;
	color: #222;
	scroll-behavior: smooth;
}
body {
	opacity:0;  
    animation:fadeIn ease-in 1; 
    animation-fill-mode:forwards;  
    animation-duration:1s;
    animation-delay: 1s;
}

/*---Navbar---*/
.navbar {
	background-color: rgba(0, 32, 70, 0.9);
	height: 50px;
}
.show {
	background-color: rgba(0, 32, 70, 0.9);
}
.navbar-brand {
	margin: 0;
	padding: 0;
}
#navbarResponsive {
	font-family: 'Kanit', 'century gothic';
}
#navLogo {
	font-family: impact, 'century gothic';
	font-size: 22px;
	color: #f5f5f5;
}
.navbar-nav li {
	padding-right: 2em;
	font-size: medium;
} 

/*---Splash---*/
#container1 {
	background-image: url('img/BG7.jpg');
	background-repeat: no-repeat; 
	background-size: cover; 
	background-position: center center;
	box-shadow: 0 3000px rgba(0, 0, 0, 0.3) inset;
	height: 100%;
	width: 100%;
}
#splashText {
	padding-left: 8%;
}
#splashH1 {
	color: #f5f5f5;
	font-family: 'Kanit', sans-serif;
	font-weight: bold;
}
#splashH4 {
	color: #d3d3d3;
	font-family: 'Kanit', sans-serif;
	line-height: 40px;
}
#head {
	width: 100%;
	height: 100%;
}
.img-fluid {
	max-width: 100%;
	height: auto;
	padding-top: 20%;
}
#submit-button {
	background-color: #002046;
}
#submit-button:hover {
	background-color: #000fff;
}

/*---Welcome---*/
#open {
	background-color: #f5f5f5;
	width: 100%;
	height: 60%;
}
.welcome {
	width: 100%;
	height: 100%;
}
#quote {
	width: 100%;
	margin: auto;
}
blockquote {
	width: 100%;
	margin: auto;
    font-family: 'Merriweather', serif;
	font-size: 2em;
	font-weight: bold;
	text-align: center;
}
blockquote footer {
	font-weight: normal;
    text-align: right;
}
blockquote cite:before {
    content: "\2013";
}

/*---Services---*/
#services {
    background-image: url('img/BG7-flipped.jpg');
	background-repeat: no-repeat; 
	background-size: cover; 
	background-position: center center;
	width: 100%;
}
section {
    padding: 60px 0;
}
section .section-title {
	font-family: 'Kanit', sans-serif;
	font-weight: bold;
	color: #f5f5f5;
    text-align: center;
    margin-bottom: 50px;
    text-transform: uppercase;
}
#services .card {
    border: none;
    background: #f5f5f5;
}
.inner {
	background-color: #002046;
	width: 98%;
	height: 170px;
	margin-left: 1%;
	margin-top: 1%;
	border-radius: .25rem;
	clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 50% 98%, 0% 85%);
}
.image-flip:hover .backside,
.image-flip.hover .backside {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    border-radius: .25rem;
	width: 100%;
}
.image-flip:hover .frontside,
.image-flip.hover .frontside {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.mainflip {
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 1s;
    -moz-transition: 1s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
    position: relative;
}
.frontside {
    position: relative;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    z-index: 2;
    margin-bottom: 30px;
	box-shadow: 0 0 4px 2px rgb(158, 158, 158);
	border-radius: .25rem;
}
.backside {
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}
.frontside,
.backside {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 1s;
    -moz-transform-style: preserve-3d;
    -o-transition: 1s;
    -o-transform-style: preserve-3d;
    -ms-transition: 1s;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
	width: 100%;
}
.frontside .card,
.backside .card {
    min-height: 312px;
}
.backside .card a {
    font-size: 18px;
    color: #007b5e !important;
}
.frontside .card .card-title {
	color: #002046 !important;
	text-align: center;
	position: relative;
	top: 40px;
	font-family: 'Kanit', sans-serif;
	font-weight: bold;
}
.backside .card .card-title {
    color: #002046 !important;
	font-family: 'Kanit', sans-serif;
}
.frontside .card .card-body img {
    width: 120px;
    height: 120px;
	position: relative;
}

/*---About Us---*/
#aboutUs {
	background-image: url('img/BG-about.jpg');
	background-color: #002046;
	background-blend-mode: screen;
	background-repeat: no-repeat; 
	background-size: cover; 
	background-position: center center;
	width: 100%;
	height: 65%;
}
#aboutText {
	margin-top: 3%;
	margin-left: 3%;
}
#aboutH1 {
	color: #002046;
	font-family: 'Kanit', sans-serif;
	font-weight: bold;
}
#aboutH4 {
	color: #002046;
	font-family: 'Kanit', sans-serif;
}
/*---Footer---*/
#footer {
	background-color: #002046;
	width: 100%;
	height: 40px;
	padding-top: 5px;
	text-align: center;
}
#break {
	background-color: #d4d4d4;
	width: 70%;
}
.footer-section {
	color: #d4d4d4;
}
.footer-text {
	color: #d4d4d4;
	font-size: .8em;
}
#copy {
	padding-bottom: .1rem;
}
.footer-bottom {
	color: #d4d4d4;
	font-size: .6em;
}
#break-bottom {
	background-color: #d4d4d4;
}
#footerLink {
	color: #bebebe;
}

/*---Media Queries --*/
@media screen and (min-width: 1600px) and (max-width: 2600px) {
	#open {
		background-color: #f5f5f5;
		width: 100%;
		height: 40%;
	}
	#welcome {
		width: 60%;
	}
	blockquote {
		font-size: 2.5em;
		padding-right: 2.5em;
		padding-left: 2.5em;
	}
	#aboutUs {
		width: 100%;
		height: 50%;
	}
	#aboutH4 {
		line-height: 40px;
	}
	#contact-section {
		width: 100%;
		height: 50%;
	}
	#contactH4 {
		line-height: 40px;
	}
}
@media screen and (min-width: 1200px) and (max-width: 1400px) {
	blockquote {
		padding-right: 2.5em;
		padding-left: 2.5em;
	}
}
@media (max-width: 1080px) {
	#container1 {
		height: fit-content;
		padding: 0;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
	}
	.img-fluid {
		padding: 0;
		margin: 0;
	}
	#navTog {
		margin-right: .5em;
	}
}
@media (max-height: 1080px) {
	blockquote {
		font-size: 2em;
	}
}
@media (max-width: 768px) {

}
@media (max-width: 576px) {
	body {
		height: 100%;
	}
	blockquote {
		font-size: 22px;
	}
}
@media (max-width: 400px) {
	#aboutH4 {
		font-size: 22px;
	}
}
@media (max-width: 390px) {
	blockquote {
		font-size: 18px;
		margin: none;
		padding-bottom: none;
	}
	#aboutH4 {
		font-size: 18px;
	}
}
@media (max-width: 290px) {
	.navbar-brand img {
		width: 40%;
	}
	#navLogo {
		font-size: 18px;
	}
	.navbar-toggler {
		margin-left: -40px;
	}
	#navbarResponsive {
		padding-right: 2rem;
	}
	.navbar-nav li {
		padding-right: none;
	}
	#splashH1 {
		font-size: 26px;
	}
	#splashH4 {
		line-height: 30px;
	}
	.welcome {
		width: 100%;
		padding-top: 1rem;
	}
	blockquote {
		font-size: 18px;
		margin: none;
		padding: none;
	}
	#aboutH4 {
		font-size: 14px;
	}
	.footer-bottom {
		font-size: 8px;
	}
}

/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
    padding: 1rem;
}

/*--- Contact Us Page --*/
#contact {
	background-image: url('img/BG7.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	width: 100%;
	height: 100%;
}
#contact-navLogo {
	font-family: impact;
	font-size: 22px;
	color: #f5f5f5;
}
#contact-heading {
	color: #f5f5f5;
	font-family: 'Kanit', sans-serif;
	font-weight: bold;
	margin-top: 3rem;
}
#contact-form {
	background: rgba(0, 98, 241, 0.5);
	width: 50%;
	height: 70%;
	padding: 1rem;
	border-radius: 2rem;
	box-shadow: 0 0 4px 2px rgb(245, 245, 245);
}
.label-text {
	color: #f5f5f5;
	font-weight: bold;
}

/* Contact Construction */
#contact-navbar {
	font-family: 'Kanit', sans-serif;
}
#const-spacer {
	margin-bottom: 12rem;
}
#constH4 {
	color: #d3d3d3;
	font-family: 'Kanit', sans-serif;
	line-height: 60px;
	font-weight: bold;
}
#constH2 {
	color: #d3d3d3;
	font-family: 'Kanit', sans-serif;
	line-height: 40px;
}
/* Chrome, Firefox, Opera, Safari 10.1+ */
.form-control::placeholder { 
            color: #002046;
            opacity: 1; /* Firefox */
}
/* Internet Explorer 10-11 */
.form-control:-ms-input-placeholder { 
            color: #002046;
}
/* Microsoft Edge */
.form-control::-ms-input-placeholder { 
            color: #002046;
}
@media screen and (min-width: 1600px) and (max-width: 2600px) {
	#navli {
		padding-right: 21rem;
	}
	li {
		padding-left: 6.5rem;
	}
	#contact-heading {
		margin-top: 10rem;
	}
	#const-spacer {
		margin-bottom: 14rem;
	}
	#const-row {
		margin-top: 14rem;
	}
}
@media (max-width: 290px) {
	#contact {
		height: 100%;
	}
	#contact-navLogo {
		margin-left: -15px;
		font-size: 18px;
	}
	#contactNav {
		margin-left: -40px;
		padding-right: 5px;
	}
	#const-spacer {
		margin-bottom: 5rem;
	}
	#const-row {
		margin-top: 5rem;
	}
	#constH4 {
		font-size: 24px;
		line-height: 30px;
	}
	#constH2 {
		font-size: 18px;
		line-height: 25px;
	}
}