/* Universal reset for margin and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Remove default list styles */
ul, ol {
    list-style: none;
}

/* Ensure images are fluid */
img {
    max-width: 100%;
    display: block;
}

/* Inherit font styles for form elements */
input, button, textarea, select {
    font: inherit;
}

a {
	text-decoration:none;
}


/****************
* BEGIN
*****************/

@font1: "Prata", serif;
@font2: "Outfit", sans-serif;


body {
	margin:0;
	padding:0;
	overflow-x: hidden;
}

#home_hero_header {
	display:flex;
	justify-content:center;
	text-align:center;
	align-items:center;
	.header_item {
		flex-basis:33%;
	}
	position:relative;
	z-index:1;
}
#home_logo {
	width:90%;
	height:auto;
	max-width:200px;
	padding-top:10px;
	img {
		width:100%;
		height:auto;
	}
}
#home_contact {
	XXtext-align:right;
	position:absolute;
	right:10%;
	z-index:1001;
}

.home_contact {
	a {
		display:inline-block;
		border-radius:10px;
		padding:20px 30px;
		background:purple;
		color:#fff;
		font-family:@font2;
		font-weight:600;
		text-transform:uppercase;
		letter-spacing:1px;
		transition:.15s ease-in-out;
	}
	a:hover {
		background:lighten(purple, 10%);
	}
}
#home_contact_mobile {
	display:none;
	position:relative;
	z-index:1000;
	text-align:center;
	padding-bottom:40px;
}

#home_hero {
	width:100%;
	position:relative;
	background-image:url("img/hero_bg3.jpg");
	background-size:cover;
	//background-position:50% 85%;
	background-position:50% 0;
	padding: 50px 10% 0 10%;
}

/* https://stackoverflow.com/questions/3540194/how-to-make-a-grid-like-graph-paper-grid-with-just-css */
.grid_bg {
	background-size: 16px 16px;
	background-image:
	XXXlinear-gradient(to right, #111 1px, transparent 1px),
	XXXlinear-gradient(to bottom, #111 1px, transparent 1px);
	XXbackground-image: radial-gradient(circle, #354b51 1px, rgba(0, 0, 0, 0) 1px);
	background-image: radial-gradient(circle, rgba(255, 255, 255, .21) 1px, rgba(0, 0, 0, 0) 1px);
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	z-index:0;
}
#section_2 .grid_bg {
	XXbackground-image: radial-gradient(circle, #7f6e7b 1px, rgba(0, 0, 0, 0) 1px);
	background-image: radial-gradient(circle, rgba(0, 0, 0, .3) 1px, rgba(0, 0, 0, 0) 1px);
}
#section_4 .grid_bg {
	XXbackground-image: radial-gradient(circle, #968899 1px, rgba(0, 0, 0, 0) 1px);
	background-image: radial-gradient(circle, rgba(255, 255, 255, .3) 1px, rgba(0, 0, 0, 0) 1px);
}

#home_hero_title {
	width:100%;
	text-align:center;
	padding:300px 0 360px 0;
	position:relative;
	z-index:100;
}

#home_hero_title h3 {
	color:#fff;
	font-family:@font1;
	font-size:88px;
	font-weight:100;
	letter-spacing:6px;
}


@media (max-width:600px) {
	#home_hero {
		background-size:auto;
		XXbackground-position:50% 88%;
	}
	#home_hero_header {
		flex-direction:column-reverse;
	}
	#home_logo {
		max-width:160px;
	}
	#home_hero_title {
		padding:110px 0 220px 0;
	}
	#home_hero_title h3 {
		font-size:60px;
		letter-spacing:1px;
		line-height:1.1;
	}
	#home_contact {
		display:none;
	}
	#home_contact_mobile {
		display:block;
	}
}



/**************
* ANIM
*************/

#home_hero_anim {
	position:absolute;
	bottom:30px;
	left:0;
	z-index:1;
	width:100%;
	height:50%;
	svg {
		width:100%;
		height:100%;
	}
	.path{
	  //stroke-dasharray: 1697.5px;
	  stroke-dasharray: 3000px;
	  //stroke-dashoffset: 1697.5px;
	  stroke-dashoffset: 3000px;
	  animation:test 3.5s forwards;
	}
	polyline {
		fill:none;
		stroke:#fff;
		stroke-width:3;
		transition: stroke .5s ease-in-out;
	}
	.old_line_color0 {
		stroke: #68b5c1aa;
	}
	.old_line_color1 {
		stroke: #68b5c155;
	}
	.old_line_color2 {
		stroke: #68b5c133;
	}
	.old_line_color3 {
		stroke: #68b5c11e;
	}
	.old_line_color4 {
		stroke: #68b5c111;
	}
}

@keyframes test {   
  //from { stroke-dashoffset: 1697.5px;}   
  to   { stroke-dashoffset: 0;}  
}


.point {
	animation: growDot .5s forwards;
	fill:#fff;
	r:5;
}

.oldPoint {
	fill: #68b5c1;
	//r:3;
	transition: all .25s ease-in-out;
	animation: oldDot .5s forwards;
	opacity:.8;
}

@keyframes growDot {
	0% {
		opacity:0;
	}
	50% {
		r:5;
	}
	70% {
		r:6;
	}
	100% { 
		r:5;
		opacity:1;
	}
}
@keyframes oldDot {
	100% {
		r: 3;
	}
}



.max_line_color1 {
	stroke: #68b5c16b;
}
.max_line_color2 {
	stroke: green;
}
.max_line_color3 {
	stroke: orange;
}
.max_line_color4 {
	stroke: red;
}
.max_line_color5 {
	stroke: yellow;
}
.max_line_color6 {
	stroke: purple;
}
.max_line_color7 {
	stroke: blue;
}
.max_line_color8 {
	stroke: #fcbcde;
}




/* flip the polyline so 0,0 is bottom left instead of top left */
.flip {
	transform:scale(1, -1);
	position:absolute;
	bottom:0;
	height:100%;
	width:100%;
}


@media (max-width:600px) { 
	#home_hero_anim {
		bottom:100px;
	}
	.point {
		r:3;
	}
	@keyframes growDot {
		0% {
			opacity:0;
		}
		50% {
			r:3;
		}
		70% {
			r:4;
		}
		100% { 
			r:3;
			opacity:1;
		}
	}
	@keyframes oldDot {
		100% {
			r: 2;
		}
	}
}


/****************************
* SECTIONS
****************************/

.heading_section {
	padding:260px 10%;
	h1 {
		text-align:center;
		font-family:@font1;
		font-size:60px;
		font-weight:400;
		line-height:1.5;
	}
}

@media (max-width:600px) {
	.heading_section {
		padding:80px 10%;
		h1 {
			font-size:32px;
			line-height:1.4;
		}
	}
}

.gridlines_bg {
	background-size: 36px 36px;
	background-image:
	linear-gradient(to right, #eee 1px, transparent 1px),
	linear-gradient(to bottom, #eee 1px, transparent 1px);
}


.bubble_section {
	width:100%;
	background:#0b032a;
	padding:100px 10% 160px 10%;
	text-align:center;
	background-image:url('img/photo_1.jpg');
	background-size:cover;
	position:relative;
	min-height:100vh;
	.overlay {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		XXbackground:#665f67;
		background:#3b3a3b;
		opacity:.45;
		z-index:1;
	}
}

#section_4.bubble_section {
	background-image:url('img/photo_2.jpg');
}

.inner_grid {
	width:100%;
	max-width:1200px;
	display:inline-grid;
	grid-template-columns:repeat(15, 1fr);
	XXgrid-template-rows:repeat(16, 1fr);
	gap:40px;
	position:relative;
	z-index:100;
}

h1.section_title {
	font-family:@font1;
	font-size:88px;
	color:#fff;
	font-weight:100;
	letter-spacing:2px;
	margin-top:100px;
	margin-bottom:180px;
	position:relative;
	z-index:1000;
	display:inline-block;
}
.underline {
	border-bottom:3px solid #fff;
	position:absolute;
	width:60%;
	bottom:0;
	left:50%;
	width:0;
	transform:translate(-50%, 0);
}
.underline.scrolled {
	width:60%;
	animation: drawUnderline .5s ease-in-out;
}
@keyframes drawUnderline {
	0% {
		width:0;
	} 100% {
		width:60%;
	}
}

.info_bubble {
	border-radius:8px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-evenly;
	grid-column: span 5;
	overflow:hidden;
	background:#f5f5f5;
	box-shadow: 0px 5px 10px rgba(0, 0, 0, .2);
	.top_icon {
		display:flex;
		width:100%;
		align-items:center;
		justify-content:center;
		padding:40px;
		background:rgba(0,0,0,.2);
		height:152px;
		.icon {
			font-size:66px;
			XXmargin-bottom:40px;
		}
	}
	.info {
		flex-basis:100%;
		padding:40px 40px 50px 40px;
	}

	h3 {
		font-family:@font2;
		font-size:26px;
		font-weight:600;
		margin-bottom:30px;
	}
	
	p {
		font-family:@font2;
		font-size:20px;
	}
}

.photo_bubble {
	grid-column: span 16;
	grid-row:span 9;

}
.text_bubble {
	grid-row:span 8;
}

.bubble_1 {
	//background:#f7e1f7;
	//background:#d2ffe2;
	//background:#f7ffff;	
	background:#fcfcfc;

	.top_icon {
		//background:#99edb7;
		background:#66e1e1;
	}
}
.bubble_2 {
	//background:#fff;
	//background:#fbfbff;
	background:#fcfcfc;
	XXbackground:#faf9ff;
	.top_icon {
		background:#d6cfff;
	}
}
.bubble_3 {
	//background:#c9f6ff;
	//background:#fffcfd;
	background:#fcfcfc;
	.top_icon {
		//background:#9aedfd;
		background:#fb9ac2;
	}
}


#section_3 .info_bubble {
	ZZZopacity:1;
}
#section_3 {
	text-align:center;
	padding: 100px 10% 160px 10%;
	h1.section_title {
		color:#000;
	}
	.summary_info {
		padding-top:80px;
		padding-bottom:40px;
		h1 {
			margin-top:120px;
			text-align:center;
			font-family:@font1;
			font-size:60px;
			font-weight:400;
			line-height:1.5;
			span {
				font-weight:800;
				letter-spacing:1px;
				XXfont-style:italic;
			}
		}
	}
}



@media (max-width:600px) {
	.inner_grid {
		display:block;
	}
	h1.section_title {
		font-size:60px;
		margin-top:40px;
		margin-bottom:80px;
		line-height:1.2;
	}
	.bubble_section {
		padding-top:40px;
		padding-bottom:40px;
	}
	#section_3 {
		padding-top:40px;
		padding-bottom:40px;
	}
	.info_bubble {
		margin-bottom:40px;
		h3 {
			font-size:24px;
		}
		.info {
			padding:30px 30px 40px 30px;
		}
		.top_icon {
			height:80px;
			.icon {
				font-size:60px;
			}
		}
	}
	.underline {
		bottom:-20px;
	}
	#section_3 {
		.summary_info {
			padding-top:20px;
			h1 {
				margin-top:60px;
				font-size:28px;
				span {
					letter-spacing:0px;
				}
			}
		}
	}
}


.contact_section {
	background:#3a3a47;
	color:#fff;
	text-align:center;
	padding:200px 10% 40px 10%;
	position:relative;
	h1 {
		font-size:88px;
		font-weight:100;
		letter-spacing:6px;
	}
	.grid_bg {
	XXbackground-image: radial-gradient(circle, #46636b 1px, rgba(0, 0, 0, 0) 1px);
	
background-image: linear-gradient(90deg, rgba(0,0,0,.03) 50%, transparent 50%),
linear-gradient(rgba(0,0,0,.03) 50%, transparent 50%);
background-size:250px 250px;
	}
}
#contact_inner {
	position:relative;
	z-index:10;
}

#contact_info {
	margin-top:120px;
	font-size: 40px;
	font-family: 'Outfit';
	/* font-weight: 200; */
	letter-spacing: 1px;

	span {
		font-size:100px;
		color:#bd60d4;
	}
}
#contact_email {
	margin-top:40px;
	a {
		color: #ad8ead;
		transition:.15s ease-in-out;
	}
	a:hover {
		color:lighten(#ad8ead, 10%);
	}
}

#contact_social {
	margin-top:60px;
	text-align:center;
	img {
		display:inline-block;
		width:65px;
		height:65px;
	}
}

#footer_copy {
	margin-top:200px;
	text-align:center; 
	p {
		font-size:14px;
		color:#848493;
		font-family:@font2;
	}
}


@media (max-width:600px) {
	.contact_section {
		padding-top:100px;
		padding-bottom:40px;
		h1 {
			font-size:70px;
			letter-spacing:2px;
		}
	}
	#contact_info {
		font-size:24px;
		margin-top:60px;
		span {
			font-size:80px;
		}
	}
	#contact_email {
		margin-top:40px;
	}
	#footer_copy {
		margin-top:80px;
	}
}


.scrollfade {
  opacity: 0;
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.info_bubble {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease-in-out, transform .5s ease-in-out;
}

.scrollfade.scrolled, .info_bubble.scrolled {
  opacity: 1;
  transform: translateY(0);
}




/// ICONS
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 24
}