/*

Icons
I think they are feather icons



https://nodejs.dev/learn/the-nodejs-events-module

https://medium.com/better-programming/best-node-js-boilerplate-to-speed-up-your-project-development-a9eca7b07f90
human perception css animation
https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
https://digitalsynopsis.com/design/ui-ux-animation-inspiration/
https://uimovement.com/user/10/ramykhuffash/
best ux animations
https://www.crazyegg.com/blog/

https://dribbble.com/tags/chat_app
https://dribbble.com/tags/ux
https://mailchimp.com/integrations/canva/

images for designers
https://blog.snappa.com/free-stock-photos/
https://unsplash.com/s/photos/scientist

https://bestofjs.org/projects/squoosh

dark blue

#032742 #073E64 #0F71A2
rgb(3,39,66) rgb(7,62,100) rgb(15,113,162)

light blue

#94BCCC


grays
reds
yelows
purples
greens

images
https://stocksnap.io/search/dna+sequence
https://burst.shopify.com/photos/search?utf8=%E2%9C%93&q=dna+sequence&button=
https://unsplash.com/s/photos/dna-sequence

*/

/* 
	https://tobiasahlin.com/spinkit/
*/



.spinner {
	margin: -1px auto 0;
	width: 70px;
	text-align: center;
}

.spinner > div {
	width: 8px;
	height: 8px;
	background-color: rgb(200, 200, 200);

	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
	0%, 80%, 100% { 
		-webkit-transform: scale(0);
		transform: scale(0);
	} 40% { 
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}



* {
	box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	height: 100%; }

.body {
	font-family: 'Montserrat';
	line-height: 24px; }

.app {
	height: 100%; }

/*cool declaritive css*/

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
	display: block;
	position: relative;
	width: 100%;
	padding: 100px 200px;
	/*was 250px;*/
}

/* Self Clearing Goodness */
/*https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/*/
/*floated element need clear to keep the height*/
/*.row:after,*/
.section:after {
	content: "";
	display: table;
	clear: both; }

.section.no-side-padding {
	padding: 120px 0px; }

.section.no-top-padding {
	padding-top: 0px; }

.section.no-bottom-padding {
	padding: 120px 0px; }

.column {
	width: 100%;
	float: left; }

.side-padding {
	padding: 0px 200px;
	height: 100%;
}

/* For devices larger than 400px */
/* For devices larger than 550px */

@media (min-width: 400px) {

	.one-third.column		{ width: 100%; }
	.two-thirds.column		{ width: 100%; }
	.one-half.column		{ width: 100%; }
	/* ??? */
}

/* For devices larger than 550px */
@media (min-width: 900px) {

	.one-quarter.column		{ width: 25%; }
	.one-third.column		{ width: 33.3333333333%; }
	.two-thirds.column		{ width: 66.6666666667%; }
	.one-half.column		{ width: 50%; }
}

/* Centering
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Parent container must be: <position: relative;> */

.wrapper {
	display: block;
	position: relative;
}

.relative {
	position: relative; }

.center-x {
	position: absolute;
	left: 50%;
	transform: translate(-50%,0);
}
.center-y {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
}
.center-x-y {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.center-text {
	text-align: center;
}

/* Navigation (+ scolling effect classes)
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.navigation {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	height: 80px;
	z-index: 1;
	border-bottom: 1px; }

.navigation .nav-link {
	color: #fff;	
}

.navigation.scrolled {
	border-bottom: 1px solid #ddd;
	box-shadow: rgba(40, 46, 52, 0.25) 0px 2px 5px 0px; }

.scrolled {
	position: fixed;
	background: #fff; }

.scrolled .nav-link {
	color: #064365;
}

.scrolled .monogram {
	fill: #064365; }

.scrolled .pioneer {
	color: #064365;
	border-left: 1px solid #064365;}

.logo {
	height: 100%;
	position: relative;
	float: left;
	cursor: pointer; }

.monogram {
	float: left;
	height: 50px;
	width: 32px;
	margin: 15px 10px;
	fill: #fff; }

.pioneer {
    float: left;
    font-family: 'Libre Baskerville', serif;
    color: white;
    font-size: 16px;
    line-height: 16px;
    border-left: 1px solid #fff;
    padding: 9px 20px;
    margin: 15px 10px; }

.nav-menu {
	height: 80px;
	position: relative;
	float: right;
	padding: 0px 10px; }

.nav-link {
	position: relative;
	top: 50%;
	transform: translate(0, -50%);
	float: left;
	font-family: Roboto, sans-serif;
	font-size: 15px;
	line-height: 24px;
	padding: 8px 30px;
	cursor: pointer;
	text-decoration: none;
	user-select: none;
	outline: none; }

.nav-icon {
	padding: 3px 0px 0px 30px;
}

/*.nav-icon:last-child {
	padding: 3px 0px 0px 30px;
}*/

.nav-icon svg {
	width: 20px;
	stroke: #fff;
}

.scrolled .nav-icon svg {
	stroke: #064365;
}

.cart-counter {
    margin-top: -2px;
    margin-right: -22px;
    padding-left: 4px;
    font-size: 14px;
    float: right;
}

.dot {
	height: 18px;
	width: 18px;
	background-color: #fff;
	border-radius: 50%;
	display: inline-block;
}
.dot .number {
    padding-right: 6px;
    margin-top: -3px;
    float: right;
    font-size: 12px;
    color: #064365;
}

.scrolled .dot {
	background-color: #064365;
}

.hidden {
	visibility: hidden;
}

.visible {
	visibility: visible;
}

.scrolled .number {
	color: #fff;
}



a {
	text-decoration: none;
	user-select: none;
	outline: none;
}

/*.nav-link:last-child {
	padding: 8px 0px 8px 30px;
}*/











.main-content {
	height: 100%;
}
	/*background-image: linear-gradient(180deg, rgba(25, 77, 119, 0.55), rgba(25, 77, 119, 0.55)), url(../images/mountains.jpg);*/
	/*background-size: 100%;*/

/*https://kinsta.com/blog/optimize-images-for-web/*/
/*https://www.jpg.io/*/
/*https://www.befunky.com/create/resize-image/*/
/*https://css-tricks.com/perfect-full-page-background-image/*/

.product-highlight {
	/* Photo by <a href="https://stocksnap.io/author/elliott">Elliott Chau</a> from <a href="https://stocksnap.io">StockSnap</a> */
}
.color-filter {
	height: 100%;
	background: radial-gradient(rgba(3,39,66,0.8), rgba(7,62,100,0.65) );

	/*background: linear-gradient(180deg, rgba(25, 77, 119, 0.55), rgba(25, 77, 119, 0.55));*/
	/*background: linear-gradient(180deg, rgba(7,62,100,0.6), rgba(7,62,100,0.6) );*/

	/* #032742 #073E64 #0F71A2 */
	/* rgb(3,39,66) rgb(7,62,100) rgb(15,113,162) */
	

}

/*.color-filter-yellow {
	height: 100%;
	width: 100%;
	background: rgba(25, 77, 119, 0.55));
}*/

.overlay-container {
	height: 100%;
	width: 100%;
	padding: 100px 100px 100px 100px;
	color: #fff;
}
.overlay {
	width: 600px;
	/*margin-top: -46px;*/
}
.overlay img {
	width: 100%;
}
.overlay .tagline {
	padding: 8px 0px;
	font-family: 'Montserrat';
	font-size: 16px;
	text-transform: uppercase;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
	text-align: center;
}
.overlay .title {
	font-family: 'Montserrat';
	font-weight: bold;
	font-size: 48px;
	line-height: 48px;
	text-transform: uppercase;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
	text-align: center;
}
.overlay .description {
	font-family: 'Montserrat';
	font-size: 22px;
	padding: 14px 0px;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
	text-align: center;
}
.action {
	font-family: 'Montserrat';
	font-size: 13px;
	color: rgba(255, 255, 255, 1);
	text-transform: uppercase;
	padding-top: 10px;
	padding-bottom: 10px;
	border: 1px solid #fff;
	border-radius: 4px;
	display: inline-block;
	margin: 2px 0;
	line-height: 20px;
	padding-right: 30px;
	padding-left: 30px;
	cursor: pointer;
	user-select: none;
	transition: background 0.2s ease,
				color 0.2s ease;
}

.action:hover {
	color: #064365;
	background: #fff;
}

.h2 {
	padding: 0px 60px 20px 60px;
	font-family: 'Montserrat';
	color: #064365;
	font-weight: bold;
	font-size: 40px;
	line-height: 40px;
}
.h3 {
	padding: 0px 60px 20px 60px;
	font-family: 'Montserrat';
	/*color: rgb(100,100,100);*/
	color: #064365;
	font-weight: bold;
	font-size: 30px;
	line-height: 30px;
}
.p {
	font-family: 'Montserrat';
	font-size: 20px;
	padding: 0px 60px 20px 60px;
}

.action.blue {
	border: 1px solid #064365;
	color: #064365;
}
.action.blue:hover {
	color: #fff;
	background: #064365;
	transition: background 0.2s ease,
				color 0.2s ease;
}








.banner {
	/*background: url(../images/mountains_2_op3.jpg);*/
	/* Photo by <a href="https://stocksnap.io/author/elliott">Elliott Chau</a> from <a href="https://stocksnap.io">StockSnap</a> */
}
.overlay-container2 {
	height: 100%;
	width: 100%;
	/*padding: 100px 100px 100px 100px;*/
	color: #fff;
}
.overlay2 {
	/*width: 600px;*/
	/*padding-top: 100px;*/
}
.overlay2 .title {
	font-family: 'Montserrat';
	font-weight: bold;
	font-size: 42px;
	line-height: 42px;
	text-transform: uppercase;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
	/*padding: 160px 0px 0px 110px;*/
	padding-top: 160px;
	text-align: center;
	/*height: 200px;*/
	/*width: 200px*/
}








.footer {

	/*background: radial-gradient(rgba(3,39,66,0.85), rgba(7,62,100,0.75));*/

	/*background: url(../images/cells.jpg) no-repeat center center;*/
	/*background: #0B4464; rgb(11,68,100) */

/*	height: 370px;
	background: url(../images/mountains_clouds_op3.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;*/

	/*padding: 0px 200px;*/
	/*background: #222222;*/

	/*background: #0F4F6E;*/
	/*background: rgba(3,39,66,0.8);*/
	/*background: radial-gradient(rgba(3,39,66,0.8), rgba(7,62,100,0.65) );*/
	/*min-height: 400px;*/
}

.footer-filter {
	height: 100%;
	/*background: rgba(11,68,100,0.85);*/
	/*background: rgba(3,39,66,0.8);*/

	background: radial-gradient(rgba(3,39,66,0.85), rgba(7,62,100,0.75));
	/*padding: 80px 110px;*/
	/*background: radial-gradient(rgba(3,39,66,0.8), rgba(7,62,100,0.65) );*/
}

.footer-title {
	padding: 0px 0px 20px 0px;
	font-size: 20px;
	font-weight: bold;
	color: #94BCCC;
	color: #FFFFFF;
}

.footer-item {
}
.footer-item.text-only {
	color: #94BCCC;
	color: #FFFFFF;
	padding: 5px 0px 5px 0px;
	font-size: 16px;
}
.footer-item a {
	display: inline-block;
	padding: 5px 0px 5px 0px;
	font-size: 16px;
	color: #94BCCC;
	color: #FFFFFF;
	cursor: pointer;
	transition: color 0.3s ease;
}
.footer-item a:hover {
	color: #fff;
}
.linkedin {
	cursor: pointer;
	fill: #94BCCC;
	fill: #FFFFFF;
	width: 30px;
	padding-top: 7px;
	margin-right: 5px;
	float: left;
	transition: fill 0.3s ease;
}
.linkedin a:visited {
	fill: #FFFFFF;
	color: #FFFFFF;
}
.twitter {
	cursor: pointer;
	fill: #94BCCC;
	fill: #FFFFFF;
	width: 40px;
	float: left;
	transition: fill 0.3s ease;
}
.linkedin:hover,
.twitter:hover {
	fill: #fff;
}

.footer-monogram {
	fill: #fff;
	width: 70px;
	height: 110px;
	cursor: pointer;
}







/*https://imakemathmoreradicalvaldez.weebly.com/*/

/*cas9 concept*/
/*abstract*/
/*folding carton dribbble*/
/*https://packwire.com/*/




.chat-app {
	position: fixed;
	z-index: 10;
	right: 0px;
	bottom: -482px;
	width: 350px;
	height: 450px;
	margin: 0px 32px 32px 0px;
	box-shadow: rgba(40, 46, 52, 0.25) 0px 2px 5px 0px;
	transition: bottom 0.4s ease;
}
/*.chat-app.show {
	bottom: -482px;
}*/
.chat-wrapper {
	border-radius: 4px 4px 0px 0px;
	height: 100%;
	background: #fff;
	/*border: 1px solid #ddd;*/
	/*box-shadow: 0 8px 16px 0 rgba(34, 34, 34, 0.2);*/
	/*flex-direction: row | row-reverse | column | column-reverse;*/
}

.chat_title {
	position: absolute;
	border-radius: 4px 4px 0px 0px;
	top: 0px;
	height: 40px;
	width: 100%;
	background: linear-gradient(60deg, #C63520, #FC462B);
}
.hide-button {
	float: right;
	color: #fff;
	cursor: pointer;
}
.chat_controls {
	position: absolute;
	bottom: 0;
	height: 50px;
	width: 100%;
}

.chat_title svg {
	width: 22px;
	margin: 8px;
}

.chat-button {
	position: fixed;
	z-index: 10;
	cursor: pointer;
	right: 0px;
	bottom: 0px;
	width: 60px;
	height: 60px;
	margin: 32px;
	border-radius: 50%;
	background: linear-gradient(180deg, #FC462B, #C63520);
	/*dark green #69B32B*/
	/*light green #75BD33*/
	/*light blue #86B9D3*/
	box-shadow: rgba(40, 46, 52, 0.25) 0px 2px 5px 0px;
	/*https://tictail.com/*/
	transition: bottom 0.3s ease;
}

textarea {
	outline: none;
	background: #f2f3f4;
	color: #333;
	width: 100%;
	font-family: 'Montserrat';
	border: 0;
	resize: none;
	max-height: 150px;
	min-height: 45px;
	padding: 15px 55px 15px 15px;
	height: 43px;
}
/*.chat-button.hide {

}*/
.chat-pic {
	height: 62px;
	width: 60px;
	/*padding: 10px 12px 12px 10px;*/
	padding: 12px;
}

.chat_history {
	position: absolute;
	top: 40px;
	bottom: 50px;
	width: 100%;
	margin: 6px;
	overflow: scroll;
}
.message {
	background: rgb(15,113,162);
	color: #fff;
	float: right;
	clear: both;
	max-width: 300px;
	margin: 5px 10px;
	padding: 10px 20px;
	border-radius: 10px 10px 0px 10px;
}

/*rgb(3,39,66) rgb(7,62,100) rgb(15,113,162)*/

.message.left {
	background: #ddd;
	color: black;
	float: left;
	border-radius: 0px 10px 10px 10px;
}

.blank {
	height: 100%;
	width: 100%;
}





table {
  border-collapse: collapse;
      text-align: left;
}

table, th, td {
  /*border: 1px solid black;*/
}

table {
  width: 100%;
}

th {
  height: 50px;
}

thead th:nth-child(1) {}
thead th:nth-child(2) {}
thead th:nth-child(3) { width: 126px; }
thead th:nth-child(4) {}
thead th:nth-child(5) {}
thead th:nth-child(6) {}

th, td {
  padding: 20px 10px;
}

tbody tr:nth-child(1) td {
	padding-top: 40px;
}

.add-to-cart {
	/*margin:20px;*/
	/*float: right;*/
}
.order-wrapper {
	background: radial-gradient(rgb(250, 250, 250), rgb(245, 245, 245));
	border: 1px solid rgb(226, 226, 226);
	padding: 20px 40px;
}
.product-amount {
	user-select: none;
	display: block;
	height: 30px;
	width: 160px;
}
.product-item {
	display: block;
	float: left;
	height: 30px;
	width: 30px;
	text-align: center;
	border-top: 1px solid rgb(200, 200, 200);
	border-bottom: 1px solid rgb(200, 200, 200);
}
.product-number {
	width: 100px;
	font-size: 16px;
	line-height: 30px;
	background: rgb(255, 255, 255);
}
.product-minus {
	/*border-radius: 2px 0px 0px 2px;*/
	/*line-height: 25px;*/
}
.product-plus {
	/*border-radius: 0px 2px 2px 0px;*/
	line-height: 28px;
}
.product-minus,
.product-plus {
	color: rgb(80, 80, 80);
	border: 1px solid rgb(200, 200, 200);
	background: rgb(228, 228, 228);
	/*background: rgb(228, 228, 228);*/
	font-size: 30px;
	font-weight: 100;
	cursor: pointer;
}

.product-minus:hover,
.product-plus:hover {
	background: rgb(210, 210, 210);
}


.journal-article a {
	color: #064365;
}




/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 20; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
	background-color: #fefefe;
	padding: 20px 40px;
	border: 1px solid #888;
	width: 60%; /* Could be more or less, depending on screen size */
	/*width: 600px;*/
	box-shadow: rgba(40, 46, 52, 0.25) 0px 2px 5px 0px;
}

.modal-content input {
	height: 40px;
	padding: 0px 20px;
}

/* The Close Button */
.close-modal {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

body.modal-open {
    overflow: hidden;
}















/* basic stylings ------------------------------------------ */

.input-container {
	font-family:'Montserrat';
	width: 400px;
	margin: 30px auto 0; 
	display: block; 
	background: #fff;
	padding: 10px 50px 50px;
	box-sizing: border-box;
}

/* form starting stylings ------------------------------- */

.input-group { 
	position: relative; 
	margin-bottom: 45px; 
}
.input-group input {
	font-size: 18px;
	padding: 10px 10px 10px 5px;
	display: block;
	width: 300px;
	border: none;
	border-bottom: 1px solid #757575;
	color: rgba(80,80,80, 1);
}
.input-group input:focus {
	outline: none;
}

/* LABEL ======================================= */

.input-group label {
	color: #999; 
	font-size: 18px;
	font-weight: normal;
	position: absolute;
	pointer-events: none;
	left: 5px;
	top: 10px;
	transition: 0.2s ease all; 
	-moz-transition: 0.2s ease all; 
	-webkit-transition: 0.2s ease all;
}
/* active state */
.input-group input:focus ~ label,
.input-group input:valid ~ label {
	top: -20px;
	font-size: 14px;
	color: #064365;
}

/* BOTTOM BAR ================================= */

.input-group .bar {
	position: relative;
	display: block;
	width: 300px;
}
.input-group .bar:before,
.input-group .bar:after 	{
	content: '';
	height: 1px; 
	width: 0;
	bottom: 1px; 
	position: absolute;
	background: #064365; 
	transition: 0.2s ease all; 
	-moz-transition: 0.2s ease all; 
	-webkit-transition: 0.2s ease all;
}
.input-group .bar:before {
	left: 50%;
}
.input-group .bar:after {
	right: 50%; 
}
/* active state */
.input-group input:focus ~ .bar:before,
.input-group input:focus ~ .bar:after {
	width: 50%;
}




.file_upload {
	display: block;
	padding: 10px 10px 10px 5px;
	border-bottom: 1px solid #757575;
	color: #999;
	fill: #999;
	font-size: 18px;
	cursor: pointer;
}
.file_upload svg {
	width: 20px;
	position: relative;
	top: 14px;
}
.file_indicator.filled {
	color: rgba(80,80,80, 1);
}
.file_input {
	display: none;
}




.flex-columns {
	display: flex;
}
.flex-column {
	flex-grow: 1; /* number of chunks of space the item should get */
}

.flex-rows {
	display: flex;
	flex-direction: column;
}
.flex-row {}



.cart-heading {
	color: #064365;
	border-bottom: 2px solid #eee;
	padding-bottom: 20px;
	margin-bottom: 0px;
}

.cart-line-container {

}

.cart-line {
	margin-top: 20px;
	border-bottom: 2px solid #eee;
}

.cart-item-title {
	padding-bottom:10px;
}
.cart-item-image {
	flex: 0 0 250px;
}
.cart-item-image img {
	width: 200px;
}

.cart-item-name {
	
}

.cart-subtotal {

}

.cart-subtotal div {
	text-align: right;
}

.cart-estimated {
	padding-top: 40px;
	float: right;
	font-weight: bold;
}

.cart-estimated-title {
	font-size: 20px;
}

.cart-estimated-amount {
	padding-top: 18px;
	font-size: 18px;
	text-align: right;
}



/*

templates

the loading fly in make things seem more interactive

unbounce?

https://www.templatemonster.com/wordpress-themes/education-hub-wordpress-theme-58872.html
https://www.wix.com/website/templates
https://www.elasticthemes.com/
https://webflow.com/templates

weebly 14k
https://txbelieve.weebly.com/
huckberry
https://www.pinterest.de/pin/444378688224688812/


Open Sans, Raleway, Fredericka the Great, Jomolhari, Nanum Myeongjo, Lato, Architects Daughter, Roboto

https://www.template.net/web-development/web-design/css-layout/
css flexbox framework
http://flexboxgrid.com/
https://cssreset.com/flexbox-css-frameworks/
https://frowcss.com/
https://bulma.io/

https://stock.adobe.com/search?filters%5Bcontent_type%3Aphoto%5D=1&filters%5Bcontent_type%3Aillustration%5D=1&filters%5Bcontent_type%3Azip_vector%5D=1&filters%5Bcontent_type%3Avideo%5D=1&filters%5Bcontent_type%3Atemplate%5D=1&filters%5Bcontent_type%3A3d%5D=1&filters%5Bcontent_type%3Aimage%5D=1&k=ski&order=relevance&safe_search=1&search_page=1&search_type=usertyped&acp=&aco=ski&limit=100&get_facets=0

https://university.webflow.com/lesson/horizontal-movement-on-scroll
https://university.webflow.com/topic/design-interactions-2-0




railway is also a nice font

https://stackoverflow.com/questions/54010030/does-the-css-position-relative-have-a-performance-impact-on-dom-rendering

the box model

position

static - not a positioned element (which lets you use top, left, bottom, right)
relative - positioned relative to its current position
absolute - relative to the nearest positioned ancestor
fixed -  relative to the viewport
(float and clear)

display (block or inline element [normal flow, flexbox, or grid for the children])

none - 
inline - 
block -
inline-block - 

adobe after effects
lottie
bodymovin


roboto lato
*/





/*
@media (min-width: 640px) {}
@media (min-width: 768px) {}
@media (min-width: 1024px) {}
@media (min-width: 1280px) {}
*/





.nav-button {
	display: none;
}



/* Extra Large (xl) */
@media (max-width: 1280px) {

	.section {
		padding: 100px 150px;
		/*background: blue;*/
	}

	.side-padding {
		padding: 0px 140px;
	}

	.nav-word {
		padding: 8px 20px;
	}
}

/* Large (lg) */
@media (max-width: 1024px) {

	.banner {
		background-position: 0px -60px;
	}

	.section {
		padding: 80px 100px;
		/*background: green;*/
	}

	.side-padding {
		padding: 0px 90px;
	}

	.nav-words {
		position: fixed;
		top: 0px;
		right: 0px;
		padding: 0px 80px;
		width: 100%;
		height: 50px;
		background: white;
		border-bottom: 1px solid #ddd;
		box-shadow: rgb(40 46 52 / 25%) 0px 2px 5px 0px;
		margin-top: 80px;
	}

	.hideNavWords {
		display: none;
	}

	.nav-word {
		color: #064365 !important;
	}

	.nav-button {
		display: inline;
	}

}

/* Medium (md) */
@media (max-width: 768px) {

	.banner {
		background-position: 0px 0px;
	}

	.section {
		padding: 60px 60px;
		/*background: yellow;*/
	}

	.side-padding {
		padding: 0px 50px;
	}

	.nav-menu {
		padding: 0px 20px;
	}

	.nav-words {
		padding: 0px 40px;
	}

}

/* Small (sm) */
@media (max-width: 640px) {

	.section {
		padding: 40px 20px;
		/*background: red;*/
	}

	.side-padding {
		padding: 0px 10px;
	}

	.nav-words {
		padding: 0px 0px;
	}

}

/* Extra Small (xs) */
@media (max-width: 400px) {

	.nav-icon {
		padding: 3px 0px 0px 20px;
	}

	.nav-word {
		padding: 8px 12px;
	}
}


.hideMenuButton {
	display: none;
}



/* footer */

/*@media (max-width: 900px) {

	.footer {
		height: 950px;
	}

	.footer .one-third.column {
		padding-bottom: 30px;
	}

	.footer-filter {
		padding: 60px 40px;
	}

}
*/

/* Responsive Header */

@media (max-width: 768px) {
	.no-webp .banner {
		background: url(../images/mountains/mountains_800w_ki.jpg);
		background-size: cover;
		background-repeat: no-repeat;
	}
	.webp .banner {
		background: url(../images/mountains/mountains_800w_ki.webp);
		background-size: cover;
		background-repeat: no-repeat;
	}
}

@media (min-width: 768px) and (max-width: 900px) {
	.no-webp .banner {
		background: url(../images/mountains/mountains_1000w_ki.jpg);
		background-size: cover;
		background-repeat: no-repeat;
	}
	.webp .banner {
		background: url(../images/mountains/mountains_1000w_ki.webp);
		background-size: cover;
		background-repeat: no-repeat;
	}
}

@media (min-width: 901px) and (max-width: 1024px) {
	.no-webp .banner {
		background: url(../images/mountains/mountains_1200w_ki.jpg);
		background-size: cover;
		background-repeat: no-repeat;
	}
	.webp .banner {
		background: url(../images/mountains/mountains_1200w_ki.webp);
		background-size: cover;
		background-repeat: no-repeat;
	}
}

@media (min-width: 1025px) {
	.no-webp .banner {
		background: url(../images/mountains/mountains_1400w_ki.jpg);
		background-size: cover;
		background-repeat: no-repeat;
	}
	.webp .banner {
		background: url(../images/mountains/mountains_1400w_ki.webp);
		background-size: cover;
		background-repeat: no-repeat;
	}
}

.no-js .banner {
	background: url(../images/mountains/mountains_1400w_ki.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

.banner {
	height: 300px;
}



/* Responsive Footer */

.footer {
	height: 370px;
}



@media (max-width: 768px) {
	.no-webp .footer {
		background: url(../images/clouds/clouds_800w_ki.jpg);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.webp .footer {
		background: url(../images/clouds/clouds_800w_ki.webp);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.footer {
		height: 950px;
	}

	.footer .one-third.column {
		padding-bottom: 30px;
	}

	.footer-filter {
		padding: 60px 40px;
	}
}

@media (min-width: 768px) and (max-width: 900px) {
	.no-webp .footer {
		background: url(../images/clouds/clouds_1000w_ki.jpg);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.webp .footer {
		background: url(../images/clouds/clouds_1000w_ki.webp);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.footer {
		height: 950px;
	}

	.footer .one-third.column {
		padding-bottom: 30px;
	}

	.footer-filter {
		padding: 60px 40px;
	}


}

@media (min-width: 901px) and (max-width: 1024px) {
	.no-webp .footer {
		background: url(../images/clouds/clouds_1200w_ki.jpg);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.webp .footer {
		background: url(../images/clouds/clouds_1200w_ki.webp);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
}

@media (min-width: 1025px) {
	.no-webp .footer {
		background: url(../images/clouds/clouds_1400w_ki.jpg);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.webp .footer {
		background: url(../images/clouds/clouds_1400w_ki.webp);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
}

.no-js .footer {
	background: url(../images/clouds/clouds_1400w_ki.jpg);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
}






/* Hero Image */

@media (max-width: 768px) {
	.no-webp .product-highlight {
		background: url(../images/mountains/mountains_800w_ki.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}
	.webp .product-highlight {
		background: url(../images/mountains/mountains_800w_ki.webp);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}
}

@media (min-width: 768px) and (max-width: 900px) {
	.no-webp .product-highlight {
		background: url(../images/mountains/mountains_1000w_ki.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}
	.webp .product-highlight {
		background: url(../images/mountains/mountains_1000w_ki.webp);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}
}

@media (min-width: 901px) and (max-width: 1024px) {
	.no-webp .product-highlight {
		background: url(../images/mountains/mountains_1200w_ki.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}
	.webp .product-highlight {
		background: url(../images/mountains/mountains_1200w_ki.webp);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}
}

@media (min-width: 1025px) {
	.no-webp .product-highlight {
		background: url(../images/mountains/mountains_1400w_ki.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}
	.webp .product-highlight {
		background: url(../images/mountains/mountains_1400w_ki.webp);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}
}

.no-js .product-highlight {
	background: url(../images/mountains/mountains_1400w_ki.jpg);
}

.product-highlight {
	/* Photo by <a href="https://stocksnap.io/author/elliott">Elliott Chau</a> from <a href="https://stocksnap.io">StockSnap</a> */
	height: 100%;
}



.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within) {
	position: absolute!important;
	width: 1px!important;
	height: 1px!important;
	padding: 0!important;
	margin: -1px!important;
	overflow: hidden!important;
	clip: rect(0,0,0,0)!important;
	white-space: nowrap!important;
	border:0!important
}