body {
  font-family: 'Montserrat';
	background: #009bd2;
	background: -moz-linear-gradient(top, #009bd2 1%, #009bd2 40%, #c7e4f0 100%);
	background: -webkit-linear-gradient(top, #009bd2 1%,#009bd2 40%,#c7e4f0 100%);
	background: linear-gradient(to bottom, #009bd2 1%,#009bd2 40%,#c7e4f0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009bd2', endColorstr='#c7e4f0',GradientType=0 );
}

h1,
h2,
h3,
h4,
h5,
h6 {font-weight: 700}

a {color: #36bcff}
a:focus, a:hover, a:active {
	color: #a6e1ff;
	text-decoration: none;
}

.btn {border-width: 2px}
.bg-primary {background-color: #349ACD !important}
.bg-secondary {background-color: #1F4288 !important}
.text-primary {color: #349ACD !important}
.text-secondary {color: #1F4288 !important}
.btn-primary {
  background-color: #349ACD;
  border-color: #349ACD;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #36bcff;
  border-color: #36bcff;
}
.btn-secondary {
  background-color: #1F4288;
  border-color: #1F4288;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  background-color: #0d285e;
  border-color: #0d285e;
}

.btn-xl {
  padding: 1rem 1.75rem;
  font-size: 1.25rem;
}
.btn-social {
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.25rem;
  line-height: 2rem;
}
.scroll-to-top {
  z-index: 1042;
  right: 1rem;
  bottom: 1rem;
  display: none;
}
.scroll-to-top a {
  width: 3.5rem;
  height: 3.5rem;
  background-color: rgba(33, 37, 41, 0.5);
  line-height: 3.1rem;
}

hr.star-light, hr.star-dark {
  max-width: 25rem;
  padding: 0;
  text-align: center;
  border: none;
  border-top: solid 0.25rem;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
hr.star-light:after, hr.star-dark:after {
  position: relative;
  top: -.8em;
  display: inline-block;
  padding: 0 0.25em;
  content: '\f0a3';
  font-family: FontAwesome;
  font-size: 2em;
}
hr.star-light {border-color: #a6e1ff;}
hr.star-light:after {
  color: #fff;
  background-color: transparent;
}

hr.star-dark {border-color: #a6e1ff}
hr.star-dark:after {
  color: #a6e1ff;
  background-color: transparent;
}



section {padding: 4rem 0 3rem}
section h2 {
  font-size: 2.25rem;
  line-height: 2rem;
}

@media (min-width: 992px) {
  section h2 {
    font-size: 3rem;
    line-height: 2.5rem;
  }
}

#mainNav {
	background: rgba(0,0,0,.5);
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: 700;
}
#mainNav .navbar-brand {color: #fff}
#mainNav #logo {height: 70px}

#mainNav .navbar-nav {
  margin-top: 1rem;
  letter-spacing: 0.0625rem;
}
#mainNav .navbar-nav li.nav-item a.nav-link {color: #fff}
#mainNav .navbar-nav li.nav-item a.nav-link:hover {color: #a6e1ff}
#mainNav .navbar-nav li.nav-item a.nav-link:active, #mainNav .navbar-nav li.nav-item a.nav-link:focus {color: #fff;}
#mainNav .navbar-nav li.nav-item a.nav-link.active {color: #349ACD}
#mainNav .navbar-toggler {
  font-size: 80%;
  padding: 0.8rem;
}
#lang-sel {
	background: rgba(14,38,94,0.65);
	border-radius: 25px;
	padding: 3px;
	position: absolute;
	top: 6px;
	right: 20px;
	transition: top 0.2s ease;
}
	#lang-sel a {
		background: #059BD0;
		border-radius: 50%;
		color: #fff;
		display: inline-block;
		font-size: 0.85rem;
		line-height: 32px;
		height: 32px !important;
		width: 32px !important;
		margin: 0 8px 0 0;
		text-align: center;
		opacity: .6;
	}
	#lang-sel a.active {opacity: 1}
	#lang-sel a.en {margin: 0}
	#lang-sel.lang-shrink {top: 25px}
@media (max-width: 992px) {
	#lang-sel {top: 25px; right: 120px}
}

@media (min-width: 992px) and (max-width: 1020px) {
	.pt .nav-item {margin-right: 0!important}
}
#clean-safe {
	position: absolute;
	top: 10px;
	left: calc(80px + 16vw);
}
#clean-safe img {
	width: calc(4vw + 40px);
	height: auto;
	max-width: 100px;
}

@media (min-width: 992px) {
  #mainNav {
		background: none;
    padding-top: 5px;
    padding-bottom: 5px;
    -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
    -moz-transition: padding-top 0.3s, padding-bottom 0.3s;
    transition: padding-top 0.3s, padding-bottom 0.3s, background-color .6s;
  }
  #mainNav .navbar-brand {
    font-size: 2em;
    -webkit-transition: font-size 0.3s;
    -moz-transition: font-size 0.3s;
    transition: font-size 0.3s;
		padding: 0 0 0 30px;
  }
  #mainNav .navbar-nav {
		background: rgba(14,38,94,0.65);
		border-radius: 10px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		margin-top: 0;
		margin-right: -30px;
		padding-right: 100px !important;
	}
  #mainNav .navbar-nav > li.nav-item > a.nav-link.active {
    color: #fff;
    background: #349ACD;
  }
  #mainNav .navbar-nav > li.nav-item > a.nav-link.active:active, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:focus, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover {
    color: #fff;
    background: #349ACD;
  }
  #mainNav.navbar-shrink {
		background: rgba(0,0,0,.3);
		padding-top: 5px;
    padding-bottom: 5px;
  }
  #mainNav.navbar-shrink .navbar-brand {
		font-size: 1.5em;
	}
  #mainNav #logo {
		height: 145px;
		transition: all .2s ease-in-out;
	}
  #mainNav.navbar-shrink #logo {height:80px}
}

header {position: relative}

#topCarousel {border-bottom: 4px solid #a6e1ff}
#topCarousel .carousel-item {
  height: 75vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#topCarousel h3 {
	font-family: 'Lobster', cursive;
	font-size: 2.8em;
	letter-spacing: .03em;
	max-width: 600px;
	margin: auto;
	margin-bottom: 15px;
	transform: rotate(-4deg);
	text-shadow: 2px 2px 6px #3B4B76;
}
.carousel-indicators li:hover {cursor: pointer}
.carousel-indicators li {
	border-radius: 20%;
	height: 5px;
	width: 20px;
	margin: auto 5px;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
	width: 36px;
	height: 36px;
}

@media (max-width: 768px) {
	#topCarousel .carousel-item {height: 60vh}
	#topCarousel h3 {font-size: 1.5em}
}

#illust-1 {
	position: absolute;
	left: 5%;
	bottom: -8%;
	height: auto;
	width: 15%;
	max-width: 150px;
	min-width: 90px;
}
#illust-2 {
	position: absolute;
	right: 5%;
	bottom: -5%;
	height: auto;
	width: 18%;
	max-width: 220px;
	min-width: 140px;
}

.activities {margin-bottom: -15px}
.activities .activities-item {
  position: relative;
  display: block;
  max-width: 25rem;
  margin-bottom: 25px;
  -webkit-transition: transform ease 0.2s;
  -moz-transition: transform ease 0.2s;
  transition: transform ease 0.2s;
}
.activities .activities-item:hover {cursor: pointer}
.activities-item h4 {
	color: #fff;
	font-family: 'Lobster', cursive;
	font-size: 1.6em;
	transform: rotate(-4deg);
	text-align: center;
	text-shadow: 2px 2px 6px #3B4B76;
	position: absolute;
	bottom: -20px;
	width: 100%;
}
.activities-item img {
	border: 4px solid #a6e1ff;
	border-radius: 16px;
}

.activities .activities-item .activities-item-caption {
	border-radius: 16px;
	-webkit-transition: all ease 0.5s 0.2s;
  -moz-transition: all ease 0.5s 0.2s;
  transition: all ease 0.5s 0.2s;
  opacity: 0;
  background-color: rgba(54, 188, 255, 0.8);
}
.activities .activities-item .activities-item-caption:hover {opacity: 1}
.activities .activities-item .activities-item-caption .activities-item-caption-content {font-size: 1.5rem}

@media (min-width: 576px) {
	.activities-item:hover {transform: scale(1.1)}
  .activities {margin-bottom: -30px}
  .activities .activities-item {margin-bottom: 30px}
}


/******* MODAL Styling *********/
.modal .modal-dialog {
	max-width: 700px;
	height:90vh;
}
.modal-content {
	background: #E2EAF3;
	border: 3px solid #fff;
	border-radius: 10px;
}
.modal-body {
	height: auto;
  overflow: auto;
	padding: 0;
}
.modal-footer {
	background: url(/images/bg-iframe.png) top left no-repeat;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	margin: 0;
	padding: 25px 0 15px;
	top: -15px;
	position: inherit;
	margin-bottom: -15px;
	border: none;
}
.modal-backdrop {background-color: #000;}
.modal-backdrop.fade.in{opacity: .8; }

.iframe, .iframe2 {
	border: none;
	padding: 0;
	height: 85vh;
	max-height: 700px;
	width: 100%;
}
.modal-body #bth-btn {display: none !important}

/*******************************/

#about, #contact {
	background: url(/images/bg-dolphin-blue.jpg) center center no-repeat;
	background-size: cover;
}
#contact {
	background-image: url(/images/bg-aerial-blue.jpg);
}

#yt-video {
	border: 3px solid #A5E0FE;
	margin: 2em 0;
}

.fb_iframe_widget span {height: auto !important}
#CDSWIDSSP, #CDSWIDWRM {width: 100% !important}


#location {
	padding-bottom: 100px;
}
#location iframe {
	border: 3px solid #A5E0FE;
	border-left: none;
	border-right: none;
}

.floating-label-form-group {
  position: relative;
  border-bottom: 1px solid #e9ecef;
}
.floating-label-form-group input,
.floating-label-form-group textarea {
	color: #fff;
  font-size: 1.2em;
  position: relative;
  z-index: 1;
  resize: none;
  border: none;
  border-radius: 4px;
  background: rgba(255,255,255,.7);
  box-shadow: none !important;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.floating-label-form-group input placeholder,
.floating-label-form-group textarea placeholder {
	color: #fff;
}
.floating-label-form-group label {
	color: #fff;
  font-size: 0.85em;
  line-height: 1.764705882em;
  position: relative;
  z-index: 0;
  top: 2em;
  display: block;
  margin: 0;
  -webkit-transition: top 0.3s ease, opacity 0.3s ease;
  -moz-transition: top 0.3s ease, opacity 0.3s ease;
  -ms-transition: top 0.3s ease, opacity 0.3s ease;
  transition: top 0.3s ease, opacity 0.3s ease;
  vertical-align: middle;
  vertical-align: baseline;
  opacity: 0;
}
.floating-label-form-group:not(:first-child) {
  padding-left: 14px;
  border-left: 1px solid #e9ecef;
}
.floating-label-form-group-with-value label {
  top: 0;
  opacity: 1;
}
.floating-label-form-group-with-focus label {color: #359ACC}

form .row:first-child .floating-label-form-group {border-top: 1px solid #e9ecef}

#sep-footer {
	background: url(/images/bg-footer.png) right bottom no-repeat;
	background-size: 100%;
	height: 100px;
	width: 100%;
	position: absolute;
	top: -95px;
	left: 0;
}
@media (max-width: 992px) {
	#sep-footer {
		background-size: 200%;
	}
}

.footer {
	background-color: #349ACD;
	background: #349ACD;
	background: -moz-linear-gradient(top, #359ACC 1%, #77c0e5 100%);
	background: -webkit-linear-gradient(top, #359ACC 1%, #77c0e5 100%);
	background: linear-gradient(to bottom, #359ACC 1%, #77c0e5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#359ACC', endColorstr='#77c0e5',GradientType=0 );
  color: #fff;
  padding-top: 2rem;
  padding-bottom: 2rem;
	position: relative;
}

#activity-list {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
#activity-list li {
	margin: 5px;
}
#activity-list li a {
	background: #204287;
	border-radius: 4px;
	color: #fff;
	display: inline-block;
	font-size: 9px;
	padding: 2px 6px;
	text-transform: uppercase;
}
#activity-list li a:hover {
	background: #0D7FC3;
}

.copyright {background-color: #1F4288}

