@import "nav.css";

/* -------------------- UNIVERSAL TAG STYLES ------------------------ */

:root {
	interpolate-size: allow-keywords
}

* {
    box-sizing:        border-box;
	-moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
}

html {
	padding: 0px;
	margin: 0px;
	border: 0px;
	min-height: 100%;
	width: 100%;
	background-color: rgb(255,255,255);
	scroll-behavior: smooth;
}			
body {
	padding: 0px;
	margin: 0px;
	border: 0px;
	font-size: 100%;
	max-width: 100%;
	min-height: 100%;
	font-family: 'Lato', sans-serif;
	color: rgb(43,39,40);
}

body.preload * {
	-webkit-animation-duration: 0s!important;
	animation-duration: 0s!important;
}

h1 {
	font-size: clamp(1.7em, 3vw, 2em);
	line-height: 1.2em;
	font-weight: 900;
	margin: 0 0 0.15em 0;
	color: rgb(0,22,52);
	text-transform: uppercase;
}

h2 {
	color: rgb(127,137,152);
	font-size: clamp(1.4em, 2vw, 1.7em);
	font-weight: 900;
	line-height: 1.2em;
	margin: 0;
	text-transform: uppercase;
}

h1 + h2 {
	margin-bottom: 1em;
}

h3 {
	color: rgb(184,40,47);
	font-size: 1.4em;
	font-weight: 500;
	line-height: 1.4em;
	padding: 0;
	margin: 0;
}	
h4 {
	font-size: 1.4em;
	color: rgb(180,180,180);
	font-weight: 300;
	margin: 0;
}

p {
	margin: 0 0 1em 0;
	color: rgb(0,76,127);
	font-size: 1.0em;
	line-height: 1.5em;
}
ul:not(.nav), ol {
	font-size: 1.0em;
	line-height: 1.5em;
}

/* -------------------- UNIVERSAL STYLES ---------------------------- */

.centered-block {
	width: 100%;
	max-width: 800px;
	margin: 4em auto 0 auto;
}
.centered-block ul{
	margin: 1em auto;
	width: fit-content;
}
.centered-block h3 {
	text-align: center;
}

/*-----------------------TITLE BAR ----------------------------------*/


.title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5em 3em;
	position: relative;
	z-index: 10;
	background-image: linear-gradient(0deg, rgb(200,207,226) 0, rgb(255,255,255) 60%);
	font-size: 80%;
}

.logo{
	flex: 0 0 auto;
	position: relative;
}
.logo img{
	max-width: 500px;
	height: auto;
	margin: 0 0 -17% 0;
	pointer-events: none;
}
.logo a{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: transparent;
}

.header-phone{
	font-size: 2em;
	font-weight: bold;
	white-space: nowrap;
}

.social-container{
	flex: 0 0 100px;
	text-align: right;
	min-width: 8em;
}
.social-container a,
.social-container div{
	border-radius: 0.5em;
	border: 2px solid rgb(131,159,195);
	width: 3em;
	height: 3em;
	margin: 0.1em;
	display: inline-block;
}
.social-container a img,
.social-container div img{
	max-width: 100%;
	height: auto;
}
.social-container a:nth-of-type(-n + 2),
.social-container div:nth-of-type(-n + 2){
	background-color: rgb(131,159,195);
}
.social-container a:nth-of-type(n+3) img,
.social-container div:nth-of-type(n+3) img{
	-webkit-filter: brightness(48%) sepia(100%) hue-rotate(190deg) saturate(140%);
	filter: brightness(48%) sepia(100%) hue-rotate(190deg) saturate(140%);
}

/*--------------- HOME PAGE ------------------*/

.hero-container {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: wrap;
	column-gap: 0;
}
.hero-container > div {
	flex: 1 1 400px;
	position: relative;
}
.hero-container .hero-text{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2em;
}
/*
.hero-container .hero-text:before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-image: url('../images/hero-back.jpg');
	background-size: cover;
	opacity: 0.20;
}
*/
.hero-container .hero-text * {
	z-index: 2;
}

.hero-container .hero-text .headline-text{
	flex: 0 1 0;
	text-align: center;
	color: rgb(0,76,127);
	font-weight: 900;
	text-transform: uppercase;
	font-size: 1.5em;
	padding: 0 1em;
}
.hero-container .hero-text .headline-text div{line-height: 1.1em;}
.hero-container .hero-text .headline-text div:nth-of-type(2){font-size: 1.25em;}
.hero-container .hero-text .headline-text div:nth-of-type(3){font-size: 1.5em;}
.hero-container .hero-text .headline-text div:nth-of-type(4){font-size: 0.7em;}
.hero-container .hero-text p {font-size: 1.2em;margin-top: 1em;}


.hero-container .hero-vid-container {
	display: flex;
	align-content: stretch;
	justify-content: space-between;
	background-color: black;
}
.hero-container .hero-vid-container #introVideo{
	width: 100%;
	object-fit: cover;
	object-position: center;
}


.video-footer{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 2em;
	margin-top: 1em;
	position: relative;
}

.video-footer>a{
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0,56,99,1.00);
	border-radius: 0.25em;
	width: clamp(2.7em, 5vw, 4.5em);
	height: clamp(2.7em, 5vw, 4.5em);
	outline: 5px solid rgba(0,56,99,1);
	border-style: solid;
	border-width: 4px;
	font-size: 110%;
	position: relative;
	margin-bottom: 1em;
}

.video-footer>a:nth-of-type(1){border-color: rgb(239,65,68)}
.video-footer>a:nth-of-type(2){border-color: rgb(245,130,41)}
.video-footer>a:nth-of-type(3){border-color: rgb(255,212,0)}
.video-footer>a:nth-of-type(4){border-color: rgb(0,174,239)}
.video-footer>a:nth-of-type(5){border-color: rgb(43,182,115)}
.video-footer>a:nth-of-type(6){border-color: rgb(159,165,174)}

.video-footer>a:hover div{
	text-decoration: underline;
	font-weight: bold;
}
.video-footer>a img{
	width: clamp(2em, 3vw, 2.5em);
}
.video-footer>a div{
	position: absolute;
	bottom: -2em;
	width: 100%;
	text-align: center;
	width: fit-content;
}


.divider{
	padding: 1em;
	text-align: center;
	font-size: 160%;
	font-weight: 700;
	color: rgb(245, 227, 110);
	background-color: rgb(0, 76, 127);
	background-color: rgb(0,22,52);
	text-transform: uppercase;
}



ul.bullet-list {
	font-size: clamp(80%,1.4vw,100%);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0em; 
	list-style-type: none;
	margin: 0 0 0 1.6em;
	padding: 0;
}

.bullet-list li {
	white-space: nowrap; 
	position: relative;
	margin-left: -1.6em;
	list-style-type: none;
}

.bullet-list li::after,
.bullet-list li::before {
	content: "•";
	display: inline-block;
	position: relative;
	top: -0.1em;
	margin: 0 0.5em;
	color: #FFF;
}


.home{
	color: rgb(0, 76, 127);
	padding: 3em 1em;
	background-color: rgba(0,76,127,1.00);
}
.home p{
	color: rgb(255, 255, 255);
	font-size: 1.2em;
}
.home-content-logo{
	display: block;
	margin: 2em auto 0 auto;
	max-width: 90%;
}

.text-section{
	padding: 4em 0;
	min-height: 0!important;
}
.text-section ul{
	display: block;
	max-width: fit-content;
	width: 100%;
	margin: 2em auto;
}

/* ------------------------------ ABOUT PAGE --------------------*/

.about-kiwi {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 2fr minmax(425px, 1fr);
	grid-gap: 2em;
}
.about-kiwi .about-images {
	grid-row: 1;
	grid-column: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	gap: 2em;
}
.about-kiwi .about-images img {
	flex: 1;
	width: 100%;
	max-width: 100%;
	object-fit: cover;
}
.about-kiwi .about-content {
	grid-row: 1;
	grid-column: 1;
}
@media screen and (max-width: 1050px) {
	.about-kiwi {
		display: flex;
		flex-direction: column;
	}
	.about-kiwi .about-images {
		display: contents;
	}
	.about-kiwi .about-images img:nth-of-type(1) {
		order: 1;
	}
	.about-kiwi .about-content {
		order: 2;
	}
	.about-kiwi .about-images img:nth-of-type(2) {
		order: 3;
	}
	.about-kiwi .about-images img:nth-of-type(3) {
		order: 4;
	}
}

/* ------------------- ASSOCIATIONS PAGE ----------------------------- */

.BGM-resource-category-container.associations {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 2em;
	flex-wrap: wrap;
}

div.BGM-resource-item-container {
	flex: 1 1 350px;
}
div.BGM-resource-item {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
div.BGM-resource-itemHead{
	margin-bottom: 0;
}
a.BGM-resource-URL {
	margin-top: auto;
}
.BGM-resource-img {
	float: none!important;
	margin: 1em auto!important;
}

/* ---------------- CONTACT PAGE ------------------------------------ */

.kiwi-contact-container {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 2em;
	flex-wrap: wrap;
}
.kiwi-contact-container .kiwi-contact-form {
	flex: 2 1 0;
	min-width: 400px;
}
.kiwi-contact-form form {
	padding: 0;
}
.kiwi-contact-container .kiwi-contact-map {
	flex: 1 1 0;
	display: grid;
	grid-template-rows: 1fr auto;
	grid-template-columns: 1fr;
	padding: 1em;
	background-color: white;
	filter: drop-shadow(0 0 10em rgba(0,0,0,0.1));
	min-width: 400px;
}
.kiwi-contact-container .contact-form-captcha-container{
	margin-bottom: 0!important;
	text-align: center!important;
}
.kiwi-contact-container .BGM-map-address-container {
	padding-bottom: 0!important;
}
.kiwi-contact-container .BGM-map-address-container img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* --------------------------------CLIENT GALLERY -------------------- */

.kiwi-vid-container .bgm-big-screen-container {
	max-width: 900px;
}
.kiwi-vid-container #vidDetails {
	text-align: center;
}
.kiwi-img-container .BGM-gallery-alt3-image{
	flex: 1 1 450px;
	margin: 0;
	aspect-ratio: 1.75;
	height: auto;
}
.kiwi-img-container .BGM-gallery-alt3-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.kiwi-img-container .BGM-gallery-alt3-group-container{
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 1em;
	flex-wrap: wrap;
}
.kiwi-img-container h2{
	text-align: center;
	margin-bottom: 1em;
}

/* ---------------------------- PRODUCTS ------------------------------------ */

.product-header{
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 2em;
	flex-wrap: wrap;
}
.product-header .products-text {
	flex: 2 1 0;
	min-width: min(100%, 450px);
}
.product-header .products-image {
	flex: 1 1 0;
	min-width: min(100%, 450px);
	position: relative;
}
.product-header .products-image img {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
@media screen and (max-width: 975px) {
	.product-header .products-image img {
		position: relative;
		width: min(100%, 500px);
		height: auto;
		margin: 0 auto;
	}
}
.product-container {	
	display: block; 
}
.product-container hr {
	border: none;
	padding: 1px 0;
	margin: 1em 0;
	background-color: rgba(0,22,52,1.00)
}
.product-container .columned-section {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2em;
	flex-wrap: wrap;
	margin: 1em 2em;
}
.product-container .columned-section article {
	flex: 1 1 350px;
	max-width: fit-content;
	margin: 0 auto;
}
.product-container .columned-section h2 {
	width: 100%;
	text-align: center;

}
	

/* --------------------------------- NEWS ------------------------------------- */

.BGM-upcomingEvents-none:after {
	content: "Check Back Soon!"
}