*, *:before, *:after { box-sizing: border-box; }
html {scroll-behavior: smooth;width:100vw;overflow-x:hidden;overflow-y:visible;box-sizing:border-box;}
.gridwrap {display:grid;}

/* GENERAL */
		.svgflair2 {width:100%;position:relative;margin-bottom:100px;}
		.svgflair2>svg{position:absolute;left:20%;top:2px;}

		.svgflair {width:100%;position:relative;}
		.svgflair>svg{position:absolute;right:15%;top:2px;}
		
		.divideSVG{width:100%;display:grid;align-items:end;justify-items:end;margin:24px 0;overflow:hidden;}
		.divideSVG>svg{width:85%;}
		
		.divideSVG2{width:100%;display:grid;align-items:end;justify-items:end;margin:24px 0;overflow:hidden;}
		.divideSVG2>svg{width:75%;}
		
		.dsvg0{opacity:0.19;}
		.dsvg1{fill:#302D40;}
		.dsvg2{fill:none;stroke:#302D40;stroke-width:1.5;stroke-miterlimit:10;}
		.dsvg3{fill:none;stroke:#302D40;stroke-width:0.25;stroke-miterlimit:10;}
		
		.div1TRI{pointer-events:none;}

/* GENERIC */
		video {object-fit: cover;
			  width:100%;
			  height:100%;}
		a {font-weight:bold;font-family:nexa-heavy;text-decoration:none;}
		* {font-family: 'nexa-light', Arial, sans-serif;}
		h1, h2, h3 {font-family: 'nexa-bold';}
		
		.whitetxt {color:white;}
		.blacktxt {color:black;}
		.headertext {font-family: 'nexa-bold';padding: 20px 0px;position:relative;}

		.headertext p{font-family: 'nexa-light';}
		
		.subtext {font-family: 'nexa-bold';font-size:0.55em;}
		
		.txtright {text-align:right;}
		.txtleft {text-align:left;}
		.txtcenter {text-align:center;}	
		
		.img {width:100%;height:100%;object-fit:cover;}
		.imgcontain{width:100%;height:100%;object-fit:contain;}
		h1 {margin:0px;}
		.socialSideContent a {text-decoration: none;}
		.socialSideContent a span svg path {fill: black;}
		.socialSide {
			width: 0px;
			height: 0px;
			overflow: visible;
			z-index: 5000;
			opacity: 0;
			position: fixed;
			left: 20px;
			top: 0;
			transform: translateY(50vh) rotate(-90deg);
		}
		.socialSideContent {width: 100vh;}
		.socialSideContent h3 {margin: 0px;}
		.socialLine {
			border-bottom: 1px solid black;
			position: relative;
			top: -5px;
			width: 52px;
			margin-left: 4px;
			display:inline-block;
		}
		.socialSideContent a {text-decoration: none;}

		.socialMobile{position:fixed;bottom:18px;left:5px;display:none;justify-content:center;align-items:center;flex-direction: column;z-index:999999;}
		
		body {margin:0px;padding:0;width:100vw;max-width:100%;overflow-x:hidden;background-color:#f7f7f7;}		
		
		.bannerimg {width:100%;}
		.bannerdots {width:115px;float:right;}
		
		.purpletxt {color:#5b4bdf;}
		.whitetxt {color:white;}
		.blacktxt {color:black;}
		.headertext {font-family: 'nexa-bold';padding: 20px 0px;}
		.headertext p{font-family: 'nexa-light';}
		.txtright {text-align:right;}
		.txtleft {text-align:left;}	
		.txtcenter {text-align:center;}	

		.toplogo {
			width: 240px;
			position:fixed;
			z-index:999;
			overflow:hidden;
			transition: 1s ease width;
			}
			
			.toplogo a{display:block;}
		
		.subLogo {
			max-width: 200px;
			margin: 9px;
			height:65px;
			}
			
		.dot {
			width: 5px;
			height: 5px;
			background-color: rgba(255, 255, 255, 0.5);
			margin: 6px;
			display: inline-block;
			border-radius: 100%;
			transform: scale(1);
			opacity:0.5;
		}

		.nodot {
			background-color: rgba(255, 255, 255, 0);
			margin: 6px;
			display: inline-block;
			width: 5px;
			height: 5px;
			-webkit-border-radius: 100%;
			   -moz-border-radius: 100%;
					border-radius: 100%;
		}
		
		.dotcontainer {width:400px;position:absolute;left:0;bottom:0;}
		
/* FOOTER */


		.footer-anim-wrap {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 1fr;
			width:auto;
			height: 50vh;
			position:relative;
			}
			
		.footer-animation {
			grid-area: 1 / 1 / 1 / 1;
			position: relative;
			display:grid;
			align-self:center;
			justify-self:center;
		}
		
		.footer-stripe {grid-area: 1 / 1 / 1 / 1;position:absolute;bottom:-30px;right:0;}
		.footer-tri {grid-area: 1 / 1 / 1 / 1;position:absolute;bottom:15%;right:40%;}
		.footer-hex {grid-area: 1 / 1 / 1 / 1;position:absolute;top:5%;right:33%;}
		.footer-hex2 {grid-area: 1 / 1 / 1 / 1;position:absolute;bottom:3%;left:15%;transform:scale(2.5);transform-origin:center;}
			

		.footlogocontainer {flex-basis: 50%;}
		.footcontent a {
			color: white;
			text-decoration: none;
		}

		.footheader {
			font-size:0.6em;
			font-weight:bold;
			color: white;
			border-style: dotted;
			border-width: 0px 0px 5px 0px;
			max-width: 100px;
			overflow: visible;
			padding-bottom: 4px;
			width: 300px;
			text-transform:uppercase;
		}

		.footcontent div {margin-bottom: 6px}



		.footer-ribbon {
			width: 100%;
			height: 150px;
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			-moz-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			-webkit-align-items: center;
			-moz-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			margin: 0px;
		}

		.footer {
			background-color: black;
			padding: 22px 24px 12px 24px;
			height: 300px;
			margin: 0px;
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: space-evenly;
			-webkit-justify-content: space-evenly;
			-moz-box-pack: space-evenly;
			-ms-flex-pack: space-evenly;
			justify-content: space-evenly;
			font-size: 0.8em;
			z-index:99;
			color:white;
		}

		.footer h1 {margin-block-start: 0.67em;
			margin-block-end: 0.67em;}

		.footer-logo {
			color: white;
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: start;
			-webkit-align-items: flex-start;
			-moz-box-align: start;
			-ms-flex-align: start;
			align-items: flex-start;
			margin-top: 22px;
		}
		
		.grid {
			
			display: grid;
			grid-column-gap: 10px;
			grid-row-gap: 0px;
			width:auto;
			height:auto;
			}
			
/* MODAL */

#myBtn {cursor:pointer;}

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

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  top:30%;
  border: 1px solid #888;
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  max-width: 650px;
  min-height:300px;
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:0%; opacity:0} 
  to {top:30%; opacity:1}
}

@keyframes animatetop {
  from {top:0%; opacity:0}
  to {top:30%; opacity:1}
}

/* The Close Button */
.close {
  color: black;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

.modal-header {
  padding: 2px;
  background-color: white;
  color: black;
  border-bottom: 1px solid black;
}

.modal-body {padding: 2px;color:black;text-align:left;}
			
	@media only screen and (max-width: 900px) {	

/* GENERAL */
		.socialMobile{display:flex;}
		.socialSide{display:none;}
		.divideSVG{margin:0px 0px;}
		.divideSVG>svg{width:initial;}

		.toplogo {
			width: 70px;
			position:fixed;
			z-index:999;
			overflow:hidden;
			transition: 1s ease width;
			}
			
		.Sublogo {margin:12px;}

		.headertext p {padding:0px 24px;display:grid;}	
		.headertext p>a {align-self:center;justify-self:center;}	

/* FOOTER */
	.footer-tri {right:5%;bottom:5%;}
	.footer-hex2 {display:none;}
	.footer-hex {top:-6%;}
	.footer-stripe {bottom:-162px;right:calc(50vw - 175px);}
	.footer-animation {font-size:0.6em;}
	.footer-animation>div{padding:30px;}
	.footheader {font-size:0.6em !important;}
	.footer {
		height: auto;
		padding: 24px 24px 60px 24px;
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-webkit-box-direction: normal;
		-moz-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-justify-content: center;
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	.footer div {font-size: 1em;}
	.footer img {width: auto;}		
	.footcontent{text-align:left;}
	.footcontent:nth-child(2)>a{text-align:center;}

		}