/* Load Carnas font */
@font-face{
	font-family: "Carnas W01";
	src: url("../fonts/d73c7e28-71b4-4683-b4de-3c48096b8b11.woff2") format("woff2"),url("../fonts/352a9d73-0b53-4cd1-bb68-d7e48ab2012b.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: "Carnas W01";
	src: url("../fonts/1d652e2a-447f-4f83-8ece-afea0473512a.woff2") format("woff2"),url("../fonts/74a391b9-1973-4885-8216-e317214cfe85.woff") format("woff");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face{
	font-family: "Carnas W01";
	src: url("../fonts/34a0b165-a4ac-4d1e-8163-50b6d09a1597.woff2") format("woff2"),url("../fonts/0c69746c-1a27-4f85-b57d-2184800df327.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: "Carnas W01";
	src: url("../fonts/77e93d3a-beaa-4b20-90d0-6e994affe2c1.woff2") format("woff2"),url("../fonts/78a2a2ce-bf5d-455d-8cea-2c3e9ad775d1.woff") format("woff");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* Fade-in and fade-out keyframes */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0;	} }

/* Fonts */
html, body {
	font-family: 'Carnas W01', sans-serif;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-size: 22px;
	font-weight: 300;
	color: #505050;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
}
h1 {
	font-size: 43px;
}
h2 {
	font-size: 38px;
}
h3 {
	font-size: 34px;
}
h2 ~ h2,
h3 ~ h3 {
	margin-top: 40px;
}
a, #f5w-email, .f5w-email {
	cursor: pointer;
	text-decoration: none !important;
	transition: all 0.2s ease-in-out;
}
.f5-container a, #f5w-email, .f5w-email {
	color: #00abc6;
}
.f5-container a:hover, #f5w-email:hover, .f5w-email:hover {
	color: #00072e;
}
.f5-container ul {
	padding: 0;
}
.f5-container ul li {
	margin-left: 35px;
	list-style-type: none;
}
.f5-container ul li:before {
	position: absolute;
	font-size: 35px;
	line-height: 0;
	content: "\2022";
	color: #00be6b;
	margin: 15px 0 0 -22px;
}

/* Bootstrap overrides */
.container-fluid {
	padding: 0 25px;
}
.float-left {
	float: left;
}
.float-right {
	float: right;
}

/* Header container and logo */
.header {
	position: fixed;
	z-index: 9999;
	width: 100%;
	padding: 0 25px;
	top: 0px;
	transition: all 0.5s ease-in-out;
}
body:not(#template-home) .header {
	background-color: #00072e;
}
.header:before {
	position: absolute;
	content: " ";
	top: 0;
	left: 0px;
	min-width: 25px;
	width: calc((100vw - 1400px) - (50vw - 700px));
	height: 170px;
	background-color: #ffffff;
	transition: height 0.5s ease-in-out;
}
.header .f5-header-container {
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
}
.header .f5-logo-container {
	position: relative;
	float: left;
	height: 170px;
	padding: 40px 170px 40px 0;
	background-color: #ffffff;
	clip-path: polygon(100% 0, calc(100% - 170px) 100%, 0 100%, 0 0);
	transition: all 0.5s ease-in-out;
}
.header .f5-logo-container svg {
	width: 408px;
	height: 90px;
	transition: all 0.5s ease-in-out;
}

/* Header navigation desktop */
.header .menu nav {
	position: absolute;
	right: 0;
	top: 78px;
	transition: top 0.5s ease-in-out;
}
.header .menu nav ul {
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
}
.header .menu nav > ul > li {
	display: inline-block;
}
.header .menu nav > ul > li > a {
	color: #ffffff;
	font-weight: 500;
	font-size: 18px;
	margin: 0 10px;
	padding: 5px 10px;
	border-radius: 2px;
	border: 2px solid rgba(0, 0, 0, 0);
}
.header .menu nav > ul > li > a:hover,
.header .menu nav > ul > li > a.active {
	border: 2px solid rgba(255, 255, 255, 0.25);
}
.header .menu nav > ul > li > ul:before {
	position: absolute;
	content: " ";
	height: 0;
	width: 0;
	bottom: 100%;
	left: 20px;
	margin-left: -6px;
	border: solid transparent;
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0);
	border-width: 6px;
	border-bottom-color: #00abc6;
}
.header .menu nav > ul > li > ul {
	display: none;
	position: absolute;
	background-color: #00abc6;
	margin: 4px 0 0 10px;
	padding: 3px;
	border-radius: 2px;
}
.header .menu nav > ul > li > ul > li > a {
	display: block;
	color: #ffffff;
	font-weight: 500;
	font-size: 18px;
	padding: 5px 10px;
}
.header .menu nav > ul > li > ul > li > a:hover,
.header .menu nav > ul > li > ul > li > a.active {
	color: #00072e;
}
@media only screen and (min-width: 1024px) {
	.header .menu nav > ul > li:hover > ul {
		display: block;
		animation: fade-in 0.5s;
	}
	.header .menu nav > ul > li:not(:hover) > ul.faded-in {
		display: block;
		animation: fade-out 0.5s;
	}
}

/* Header navigation mobile */
.header .f5-mobile-background {
    position: fixed;
    display: none;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba( 0,0,0,0.4);
}
.header .menu .f5-hamburger,
.header .menu nav .f5-close {
	position: absolute;
	display: none;
	cursor: pointer;
	fill: #ffffff;
	transition: all 0.5s ease-in-out;
}
.header .menu .f5-hamburger {
	right: 0;
	top: 68px;
	width: 50px;
}
.header .menu nav .f5-close {
	right: 310px;
	top: 10px;
	width: 40px;
}
.header .menu .f5-hamburger:hover,
.header .menu nav .f5-close:hover {
	fill: #1ebaf3;
}
@media only screen and (max-width: 1023px) {
	.header .menu .f5-hamburger,
	.header .menu nav .f5-close {
		display: block;
	}
	.header .menu nav {
		position: fixed;
		right: -350px;
		top: 0 !important;
		background-color: #00072e;
		width: 300px;
		height: 100%;
	}
	.header .menu nav > ul > li {
		display: block;
	}
	.header .menu nav > ul > li > ul {
		position: relative;
		margin: 10px;
	}
	.header .menu nav > ul > li > a,
	.header .menu nav > ul > li > ul > li > a {
		display: block;
		margin-top: 10px;
		margin-bottom: 10px;
	}
}

/* Small header - for mobile devices */
@media only screen and (max-width: 700px) {
	.header .f5-logo-container {
		height: 85px;
		padding: 20px 85px 20px 0;
		clip-path: polygon(100% 0, calc(100% - 85px) 100%, 0 100%, 0 0);
	}
	.header:before {
		height: 85px;
	}
	.header .f5-logo-container svg {
		width: 204px;
		height: 45px;
	}
	.header .menu nav {
		top: calc(78px - 54px);
	}
	.header .menu .f5-hamburger {
		width: 45px;
		top: calc(68px - 42px);
	}
}

/* Small header - after scrolling */
.down .header {
	background-color: #00072e;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}
.down .header .f5-logo-container {
	height: 85px;
	padding: 20px 85px 20px 0;
	clip-path: polygon(100% 0, calc(100% - 85px) 100%, 0 100%, 0 0);
}
.down .header:before {
	height: 85px;
}
.down .header .f5-logo-container svg {
	width: 204px;
	height: 45px;
}
.down .header .menu nav {
	top: calc(78px - 54px);
}
.down .header .menu .f5-hamburger {
	width: 45px;
	top: calc(68px - 42px);
}

/* Hero */
.f5-gradient.f5-hero .f5-container {
	position: relative;
}
.f5-gradient.f5-hero .f5-container .f5-hero-image {
	position: relative;
	float: right;
	right: 0;
	bottom: -40px;
	width: 100%;
	max-width: 1200px;
	height: auto;
}
.f5-gradient.f5-hero .f5-container .f5-hero-image img {
	width: 100%;
}
.f5-gradient.f5-hero .f5-container h1 {
	position: absolute;
	top: 240px;
	max-width: 500px;
}
@media only screen and (max-width: 1400px) {
	.f5-gradient.f5-hero .f5-container h1 {
		top: calc(100px + 10vw);
	}
}

/* Main containers and rows */
.f5-container {
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
	padding: 100px 0;
}
.f5-main {
	margin-top: 170px;
	transition: margin-top 0.5s ease-in-out;
}
@media only screen and (max-width: 700px) {
	.f5-main {
		margin-top: 85px;
	}
}
.f5-no-gradient + .f5-no-gradient .f5-container {
	padding-top: 0;
	margin-top: -100px;
}
.f5-container .row {
	margin-right: -25px;
	margin-left: -25px;
}
.f5-main .f5-container .row > div {
	margin: 25px;
	padding: 0;
}
.f5-container .row .col-12 {
	max-width: calc(100% - 50px);
}
@media only screen and (min-width: 768px) {
	.f5-container .row > .col-md-6 {
		max-width: calc(50% - 50px);
	}
}
@media only screen and (min-width: 992px) {
	.f5-container .row > .col-lg-4 {
		max-width: calc(33.333333% - 50px);
	}
	.f5-container .row > .col-lg-8 {
		max-width: calc(66.666666% - 50px);
	}
}

/* Colors and clipping paths */
.f5-gradient .f5-container > *:not(.row),
.f5-no-gradient .f5-container .row > div {
	color: #fff;
}
.f5-gradient .f5-container .row > div,
.f5-no-gradient .f5-container .row > div {
	margin: 25px;
	padding: 50px 50px calc(50px - 1rem) 50px;
	background-color: #fff;
	clip-path: polygon(100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%, 0 0);
}
.f5-gradient {
	clip-path: polygon(75px 0, 0 75px, 0% 100%, calc(100% - 75px) 100%, 100% calc(100% - 75px), 100% 0);
}
.f5-gradient.f5-hero {
	clip-path: polygon(0 0, 0% 100%, calc(100% - 75px) 100%, 100% calc(100% - 75px), 100% 0);
}
.f5-gradient.f5-footer {
	clip-path: polygon(75px 0, 0 75px, 0% 100%, 100% 100%, 100% 0);
}
.f5-gradient.f5-hero,
.f5-no-gradient.f5-hero .f5-container .row > div {
	background-image: linear-gradient(135deg, #00abc6, #00072e);
}
.f5-gradient.f5-blue,
.f5-no-gradient.f5-blue .f5-container .row > div {
	background-image: linear-gradient(135deg, #1ebaf3, #0d70d3);
}
.f5-gradient.f5-orange,
.f5-no-gradient.f5-orange .f5-container .row > div {
	background-image: linear-gradient(135deg, #ffb026, #f77e01);
}
.f5-gradient.f5-green,
.f5-no-gradient.f5-green .f5-container .row > div {
	background-image: linear-gradient(135deg, #1ec800, #199100);
}
.f5-gradient.f5-footer,
.f5-no-gradient.f5-footer .f5-container .row > div {
	background-color: #8fa9c2;
}
.f5-main h1, .f5-main h2, .f5-main h3,
.f5-gradient.f5-blue .row h3,
.f5-no-gradient.f5-blue h2 {
	color: #0d70d3;
}
.f5-gradient.f5-orange .row h3,
.f5-no-gradient.f5-orange h2 {
	color: #f77e01;
}
.f5-gradient.f5-green .row h3,
.f5-no-gradient.f5-green h2 {
	color: #00be6b;
}

/* Testimonials */
.f5-testimonial-container .f5-container .row {
	align-items: flex-start;
}
.f5-testimonial-container .f5-container .row > div {
	position: relative;
	clip-path: none;
	margin-bottom: 90px;
	background-image: linear-gradient(135deg, #1ebaf3, #0d70d3);
}
.f5-testimonial-container .f5-container .row > div:before {
	position: absolute;
	content: " ";
	top: 100%;
	left: 25px;
	width: 25px;
	height: 25px;
	background-color: #0d70d3;
	clip-path: polygon(0 0, 100% 100%, 100% 0);
}
.f5-testimonial-container .f5-container .row > div:after {
	position: absolute;
	content: " ";
	border: solid transparent;
	border-width: 50px;
	top: calc(100% - 50px);
	right: 0px;
	border-right-color: #ffffff;
}
.f5-testimonial-clientname {
	position: absolute;
	margin-top: 70px;
	font-size: 19px;
	color: #505050;
}

/* Footer */
.f5-footer {
	overflow: hidden;
}
.f5-footer .f5-container {
	padding-bottom: 50px;
}
.f5-footer-logo {
	position: absolute;
	fill: rgba(255, 255, 255, 0.2);
	height: 120%;
	top: -10%;
	right: -50px;
}
.footer-terms {
	border-top: 2px solid rgba(255, 255, 255, 0.2);
	display: inline-block;
	margin-top: 20px;
	padding-top: 40px;
	font-size: 15px;
}
.footer-nav {
	font-size: 15px;
}
.f5-footer a {
	color: #ffffff;
}
.f5-footer a:hover {
	color: #385D80;
}

/* Compare SVG images */
.f5-compare-svg {
	max-width: 75px;
	width: 100%;
	opacity: 0.65;
}

/* Contactform */
form input,
form .form-control {
	border-radius: 0;
	font-size: inherit;
	font-weight: inherit;
}
::placeholder {
	color: #c5c5c5 !important;
	opacity: 1;
}
form button.btn {
	border-radius: 0;
	border: 0;
	transition: all 0.2s ease-in-out;
	background-color: #00abc6;
}
form button.btn:hover {
	background-color: #00072e;
}

/* Custom checkbox https://www.w3schools.com/howto/howto_css_custom_checkbox.asp */
.f5-checkbox-container {
	display: block;
	position: relative;
	padding-left: 35px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.f5-checkbox-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
.f5-checkbox,
.f5-radiobutton {
	position: absolute;
	top: 3px;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eeeeee;
	transition: all 0.2s ease-in-out;
}
.f5-radiobutton {
	border-radius: 50%;
}
.f5-checkbox-container:hover input ~ .f5-checkbox,
.f5-checkbox-container:hover input ~ .f5-radiobutton {
	background-color: #cccccc;
}
.f5-checkbox-container input:checked ~ .f5-checkbox,
.f5-checkbox-container input:checked ~ .f5-radiobutton {
	background-color: #0d70d3;
}
.f5-checkbox:after,
.f5-radiobutton:after {
	content: "";
	position: absolute;
	display: none;
}
.f5-checkbox-container input:checked ~ .f5-checkbox:after,
.f5-checkbox-container input:checked ~ .f5-radiobutton:after {
	display: block;
}
.f5-checkbox-container .f5-checkbox:after {
	left: 9px;
	top: 4px;
	width: 7px;
	height: 14px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.f5-checkbox-container .f5-radiobutton:after {
	top: 8px;
	left: 8px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: white;
}

/* Custom selectbox http://doodlenerd.com/html-control/css-dropdown-generator */
.select {
	position: relative;
	display: inline-block;
	width: 100%;
}
.select select {
	display: inline-block;
	cursor: pointer;
	outline: 0;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	transition: all 0.2s ease-in-out;
}
.select select::-ms-expand {
	display: none;
}
.select select:hover,
.select select:focus {
	background: #eeeeee;
}
.select select:disabled {
	opacity: 0.5;
	pointer-events: none;
}
.select_arrow {
	position: absolute;
	top: 21px;
	right: 15px;
	pointer-events: none;
	border-style: solid;
	border-width: 11px 7px 0px 7px;
	border-color: #00abc6 transparent transparent transparent;
}
.form-row .select select.form-control {
	background-position: right 40px center;
}

/* Mobile tweaks */
@media only screen and (max-width: 767px) {
	/* font-size and paddings 80% of original */
	html, body {
		font-size: 18px; 
	}
	h1 {
		font-size: 35px;
	}
	h2 {
		font-size: 30px;
	}
	h3 {
		font-size: 27px;
	}
	.f5-container ul li::before {
		font-size: 30px;
	    margin-top: 13px;
	}
	.f5-container {
		padding: 80px 0;
	}
	.f5-gradient .f5-container .row > div,
	.f5-no-gradient .f5-container .row > div {
		padding: 25px 30px calc(30px - 1rem) 30px;
	}
	.f5-testimonial-clientname {
	    margin-top: 50px;
	    margin-left: 20px;
	}
	.f5-testimonial-container .f5-container .row > div {
		margin-bottom: 110px;
	}
}