@charset "UTF-8";
/* CSS Document */

html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-size: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.4;
	font-family: 'Kumbh Sans', sans-serif;
	font-weight: 300;
	background-color: #FFFFFF;
	color: #000000;
}

#main {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 50px;
	display: flex;
	flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Kumbh Sans', sans-serif;
	font-weight: 500;
	line-height: 1.1;
	margin: 16px 0px;
	-webkit-transition: all .25s;
	-moz-transition: all .25s;
	transition: all .25s;
}

/* Typography */
h1 {
	font-size: 48.83px;
	font-size: 3.052rem;
	font-size: calc(2.802rem + 1.5vw);
	font-weight: 700;
	margin: 0px 0px 16px 0px;
}

h2 {
	font-size: 33.18px;
	font-size: 2.074rem;
	font-size: calc(1.824rem + 1.2vw);
}

h3 {
	font-size: 27.65px;
	font-size: 1.728rem;
	font-size: calc(1.478rem + 1.2vw);
}

h4 {
	font-size: 23.04px;
	font-size: 1.44rem;
	font-size: calc(1.19rem + 1.2vw);
}

h5, input, textarea, label, nav ul {
	font-size: 19.20px;
	font-size: 1.2rem;
	font-size: calc(.95rem + .5vw);
}

h6, button, .btn, footer p {
	font-size: 16px;
	font-size: 1rem;
	font-size: calc(.75rem + .5vw);
}

p, ul {
	font-size: 19.20px;
	font-size: 1.2rem;
	font-size: calc(.95rem + .5vw);
}

a:link, a:visited {
	color: #0B66D3;
	text-decoration: underline;
}

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

q {
	font-size: 25.92px;
	font-size: 2.592rem;
	font-weight: 600;
}

hr {
	border-top: 1px solid #CCCCCC;
	border-right: none;
	border-bottom: none;
	border-left: none;
	margin: 0 auto;
}

header, main, section, footer, aside, nav, article, figure {
	display: block;
}

.wrapper {
	width: 93%;
	width: calc(100% - 32px);
	max-width: 1200px;
	margin: 0 auto;
	-webkit-transition: all .25s;
	transition: all .25s;
}

.skinny-wrapper {
	max-width: 500px;
}

.btn:link, .btn:visited, input[type="submit"], form button, .btn-contact:link, .btn-contact:visited {
	display: inline-block;
	text-decoration: none;
	text-align: center;
	width: auto;
	box-sizing: border-box;
	-webkit-border-radius: 48px;
	-moz-border-radius: 48px;
	border-radius: 48px;
	padding: 8px 24px;
	font-family: 'Kumbh Sans';
	font-weight: 600;
	-webkit-transition: all .25s;
	transition: all .25s;
	margin-top: 16px;
	margin-right: auto;
	margin-bottom: 16px;
	margin-left: auto;
	text-transform: uppercase;
	letter-spacing: .1rem;
}

.btn-blue:link, .btn-blue:visited {
	color: #FFFFFF;
	border: 3px solid #FFFFFF;
}

.btn-blue:hover {
	background-color: #FFFFFF;
	color: #0B66D3;
}

.btn-blue:active {
	background-color: #0B66D3;
	border: 3px solid #0B66D3;
	color: #FFFFFF;
}

/* Columns */
[class*='col-'] {
	display: block;
	width: 100%;
	-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.btn-scroll-top {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	z-index: 998;
	right: 16px;
	bottom: 16px;
	width: 40px;
	height: 40px;
	background-color: rgba(11,102,211,1);
	text-align: center;
	-webkit-transition: all .25s;
	transition: all .25s;
	border: 1px solid #FFFFFF;
	border-radius: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-scroll-top:link, .btn-scroll-top:visited {
	text-decoration: none;
}

.btn-scroll-top:hover {
	background-color: rgba(11,102,211,1);
}

.btn-scroll-top:hover i {
	-webkit-transform: scale(1.25,1.25);
	-moz-transform: scale(1.25,1.25);
	-ms-transform: scale(1.25,1.25);
	-o--transform: scale(1.25,1.25);
	transform: scale(1.25,1.25);
}

.btn-scroll-top-visible {
	visibility: visible;
	opacity: 1;
}

.btn-scroll-top i {
	color: #FFFFFF;
	font-size: 21px;
	-webkit-transition: all .25s;
	-moz-transition: all .25s;
	-ms-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
}

/* Navigation */
header {
	background-color: #ffffff;
	border-bottom: 1px solid #CCCCCC;
	position: fixed;
	width: 100%;
	z-index: 999;
}

nav {
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .1rem;
	background-color: #ffffff;
	color: #000000;
	width: 100%;
	height: 100%;
}

.logo {
	display: block;
	float: left;
	margin: 0;
	height: 20px;
	width: auto;
	padding: 16px 20px 8px 0px;
	-webkit-transition: all .25s;
	transition: all .25s;
}

.nav-list {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	clear: both;
	background-color: #ffffff;
	height: 100%;
	max-height: 0;
	transition: max-height .25s ease-out;
}

.nav-item {
	padding: 16px 0px;
}

.nav-link:link, .nav-link:visited {
	padding: 4px 0px;
	background-color: #ffffff;
	color: #000000;
	text-decoration: none;
	-webkit-transition: all .25s;
	-moz-transition: all .25s;
	transition: all .25s;
}

.nav-link:hover, .nav-link:active, .nav-link.is-active {
	color: #0B66D3;
}

/* menu icon */

header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 24px 0px 24px 20px;
  position: relative;
  user-select: none;
}

header .menu-icon .navicon {
  background: #000000;
  display: block;
  height: 3px;
  position: relative;
  transition: background .25s ease-out;
  width: 24px;
}

header .menu-icon .navicon:before,
header .menu-icon .navicon:after {
  background: #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .25s ease-out;
  width: 100%;
}

header .menu-icon .navicon:before {
  top: 6px;
}

header .menu-icon .navicon:after {
  top: -6px;
}

/* menu btn */

header .menu-btn {
  display: none;
}

header .menu-btn:checked ~ .nav-list {
  max-height: 240px;
}

header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* Hover Animation: Underline From Center */
.hvr-underline-from-center {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	position: relative;
	overflow: hidden;
}

.hvr-underline-from-center:before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	right: 50%;
	bottom: 0;
	background-color: #0B66D3;
	height: 2px;
	-webkit-transition: background-color .25s;
	transition: background-color .25s;
	-webkit-transition-property: left, right;
	transition-property: left, right;
	-webkit-transition-duration: 0.25s;
	transition-duration: 0.25s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: easeout;
}

.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
	left: 0;
	right: 0;
}

nav .hvr-underline-from-center:before,
nav .nav-link.is-active:before {
	background-color: #0B66D3;
}
	
.nav-link.is-active {
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
}
	
.nav-link.is-active:before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
}

/* Offset anchor link location due to fixed header */
#portfolio, #contact {
	scroll-margin-top: 51px;
}

/* Home section */
.hero {
	background-color: #0B66D3;
	color: #FFFFFF;
	padding: 24px 0px 0px 0px;
	-webkit-transition: all .25s;
	transition: all .25s;
}

.hero::after {
	margin: 0;
	margin-top: auto;
	padding: 0;
	content: url("../images/bg-wave-hero.svg");
	display: block;
	width: 100%;
	position: relative;
	bottom: -11px;
}

.intro {
	font-size: 39.81px;
	font-size: 2.488rem;
	font-size: calc(2.238rem + 1.5vw);
	margin: 0px;
	line-height: 1.4;
	font-weight: 700;
}

/* Portfolio Isotope section */

.hidden {
	display: none;
}

/* Portfolio container */
.portfolio {
	background-color: #FFFFFF;
	text-align: center;
	position: relative;
}

#portfolio {
	width: 100%;
	position: relative;
	z-index: 9;
}

.portfolio-wrapper {
	padding-bottom: 320px;
}

/* Keeps Isotope Portfolio from cutting off */
.portfolio h2 {
	margin-top: 0px;
}

#list {
	margin: 30px 0px;
	list-style-type: none;
}

.portfolio-list {
	position: relative;
	padding: 0;
}

/* Portfolio filter */
.filters-button-group {
	font-size: 0px;
}

.filter-btn {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1rem;
	padding: 8px 24px;
	margin: 8px;
	background-color: rgba(255,255,255,0);
	color: #0B66D3;
	border: 2px solid #0B66D3;
	border-radius: 48px;
	box-sizing: border-box;
	outline: none;
	-webkit-transition: all .25s;
	-moz-transition: all .25s;
	transition: all .25s;
	cursor: pointer;
}

.filter-btn:first-of-type {
	margin-left: 0px;
}

.filter-btn:last-of-type {
	margin-right: 0px;
}

.is-checked, .filter-btn:hover, .filter-btn:active {
	background-color: #0B66D3;
	color: #FFFFFF;
}

/* Portfolio item */
.portfolio-item {
	overflow: hidden;
	width: 100%;
	display: block;
}

/* Portfolio item image */
.view {
	width: 100%;
	padding: 0;
	border: none;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default;
}

.view .mask, .view .content {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
}

.view img {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
}

.view-first img {
	width: 100%;
	-webkit-transition: all 0.25s linear;
	-moz-transition: all 0.25s linear;
	-o-transition: all 0.25s linear;
	-ms-transition: all 0.25s linear;
	transition: all 0.25s linear;
}

.view-first .mask {
	height: 100%;
	width: 100%;
	background: -moz-linear-gradient(-45deg, rgba(11,102,211,0.9) 0%, rgba(75,205,205,1) 100%);
	background: -webkit-linear-gradient(-45deg, rgba(11,102,211,0.9) 0%,rgba(75,205,205,1) 100%);
	background: linear-gradient(135deg, rgba(11,102,211,0.9) 0%,rgba(75,205,205,1) 100%);
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;	
}

.portfolio-item:hover .view-first img, .portfolio-item:active .view-first img {
	-webkit-transform: scale(1.1,1.1);
	-moz-transform: scale(1.1,1.1);
	-o-transform: scale(1.1,1.1);
	-ms-transform: scale(1.1,1.1);
	transform: scale(1.1,1.1);
}

.portfolio-item:hover .view-first .mask, .portfolio-item:active .view-first .mask {
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

.portfolio-item:hover .view-first a.zoom, .portfolio-item:active .view-first a.zoom {
	-webkit-transition-delay: 0.25s;
	-moz-transition-delay: 0.25s;
	-o-transition-delay: 0.25s;
	-ms-transition-delay: 0.25s;
	transition-delay: 0.25s;
}

/* Portfolio item details */
.portfolio-details {
	display: block;
	width: 100%;
	clear: both;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}

.portfolio-item:hover .portfolio-details, .portfolio-item:active .portfolio-details {
	-webkit-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

.portfolio-details .wrapper {
	width: 95%;
}

.portfolio-details h4 {
	line-height: 1;
	color: #FFFFFF;
	margin: 0em 0em .3em 0em;
}

.portfolio-details p {
	margin: 0px;
	color: #FFFFFF;
}

.category {
	text-transform: uppercase;
	letter-spacing: .1rem;
	text-align: center;
}

/* Contact form section */
.contact {
	text-align: left;
	color: #000000;
}

.contact h2 {
	margin-top: 0px;
}

.contact h2, .contact p {
	text-align: center;
}

#contactForm {
	padding-top: 16px;
}

.alert {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	padding: 16px;
	margin-bottom: 16px;
	font-size: 16px;
	font-size: 1rem;
	font-size: calc(.75rem + .5vw);
	border: 1px solid #CCCCCC;
	border-radius: 4px;
}

.alert-success::before, .alert-danger::before {
	align-self: center;
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 6 Free";
	font: var(--fa-font-solid);
	font-size: 23.04px;
	font-size: 1.44rem;
	font-size: calc(1.19rem + 1.2vw);
}

.alert-success::before {
	color: #4BCDCD;
	content: "\f058";
}

.alert-danger::before {
	color: #DB3600;
	content: "\f071";
}

form {
	text-align: left;
}

label {
	font-family: 'Kumbh Sans', sans-serif;
	font-weight: 400;
	display: block;
	position: absolute;
	color: #000000;
	padding: 8px;
}

label:active, label:focus {
	color: #4BCDCD;
}

input, textarea {
	box-sizing: border-box;
	display: inline-block;
	width: 100%;
	font-family: 'Kumbh Sans', sans-serif;
	font-weight: 400;
	background-color: rgba(255, 255, 255, 0);
	color: #333333;
	padding: 8px 4px 8px 40px;
	margin: 0px 0px 25px 0px;
	border-top: none;
	border-right: none;
	border-bottom: 2px solid #000000;
	border-left: none;
	border-radius: 0px;
	-webkit-transition: all .25s;
	transition: all .25s;
}

textarea {
	min-width: 100%;
	max-width: 100%;
	min-height: 100px;
	margin-bottom: 20px;
}

input:focus, textarea:focus {
	color: #000000;
	outline: none;
	border-bottom-color: #0B66D3;
	-moz-border-image: -moz-linear-gradient(left, #4BCDCD 0%, #0B66D3 100%);
	-webkit-border-image: -webkit-linear-gradient(left, #4BCDCD 0%, #0B66D3 100%);
	border-image: linear-gradient(to right, #4BCDCD 0%, #0B66D3 100%);
	border-image-slice: 1;
}

.g-recaptcha {
	margin-bottom: 32px;
}

input[type="submit"], form button, .btn-contact:link, .btn-contact:visited {
	background-color: #FFFFFF;
	color: #0B66D3;
	border: 3px solid #0B66D3;
}

.icon-btn {
	margin: 0px 8px 0px 0px;
}

input[type="submit"]:hover, form button:hover, .btn-contact:hover {
	background-color: #0B66D3;
	border: 3px solid #0B66D3;
	color: #FFFFFF;
}

input[type="submit"]:active, form button:active, .btn-contact:active {
	background-color: #1F92E9;
	border: 3px solid #1F92E9;
	color: #FFFFFF;
}

.error {
	border-bottom-color: #FF0004;
}

/* Footer */

footer {
	background: #0B66D3;
	color: #FFFFFF;
	padding: 0px 0px 24px 0px;
	text-align: center;
}

footer::before {
	margin: 0;
	padding: 0;
	content: url("../images/bg-wave-footer.svg");
	display: block;
	width: 100%;
	position: relative;
	top: -1px;
}

footer p {
	margin: 0;
}

.footer-contact {
	min-height: 100%;
	display: flex;
}

.footer-bar {
	background-color: #0B66D3;
}

@media only screen and (min-width: 481px) {
	
	.wrapper {
		width: 93%;
		width: calc(100% - 48px);
	}
	
	/*Contact Form */
	input, textarea {
	margin: 0px 0px 48px 0px;
	padding: 9px 5px 9px 44px;
	}
	
	.input-left {
	width: 49%;
	margin-right: .5%;
	}

	.input-right {
	width: 48%;
	margin-left: 1%;
	padding-left: 0px;
	}
	
	/* Columns */
	[class*='col-'] {
		float: left;
	}
	
	[class*='col-'] {
		padding: 0px 30px;
	}
	
	[class*='col-lg'] {
		padding: 0px;
	}
	
	[class*='col-']:first-of-type {
		padding-left: 0;
	}
	
	[class*='col-']:last-of-type {
		padding-right: 0;
	}
	
	.col-md-3-4 {
		width: 75%;
	}

	.col-md-2-3 {
		width: 66.66%;
	}
	
	.col-md-1-2 {
		width: 50%;
	}

	.col-md-1-3 {
		width: 33.33%;
	}
	
	.col-md-1-4 {
		width: 25%;
	}
}

@media only screen and (min-width: 769px) {
	
	#main {
		top: 68px;
	}
	
	.hero {
		padding: 80px 0px 0px 0px;
	}
	
	/* Columns */
	[class*='col-lg'] {
		padding: 0px 30px;
	}
	
	.col-lg-3-4 {
		width: 75%;
	}

	.col-lg-2-3 {
		width: 66.66%;
	}
	
	.col-lg-1-2 {
		width: 50%;
	}

	.col-lg-1-3 {
		width: 33.33%;
	}
	
	.col-lg-1-4 {
		width: 25%;
	}
	
	nav {
		height: auto;
		-webkit-transition: all .25s;
		transition: all .25s;
	}
	
	.logo {
		height: 24px;
		padding: 22px 0px 8px 0px;
	}
	
	.nav-list {
		clear: none;
		float: right;
		max-height: none;
	}

	.nav-item {
		float: left;
		margin: 0px 20px;
	}
	
	.nav-item:last-of-type {
		margin-right: 0;
	}
	
	header .menu-icon {
    display: none;
  }
	
	/* Offset anchor link location due to fixed header */
	#portfolio, #contact {
		scroll-margin-top: 72px;
	}
	
	.wrapper {
		width: 89%;
		width: calc(100% - 96px);
	}
	
	/* Portfolio Isotope section */
	.portfolio-item {
		width: 49.75%;
	}

}

@media only screen and (min-width: 1200px) {
	
	/*Portfolio Isotope section */
	.portfolio-item {
		width: 49.75%;
	}

}