/*used colors*/
/*grey: #525252*/
/*middle blue purple: #8d86c9*/
/*olivine: #8cb369*/
/*polished pine: #70a288*/

@font-face {
    font-family: "beaumess";
    src: url(../fonts/beautifulmess.ttf);
}

body{
	font-family: beaumess;
}

.base{
	display: flex;
	flex-direction: column;
}

.basegrid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(20px, auto);
	gap: 4px;
}

.header {
	background-color: #525252;
	color: white;
	position: fixed;
	top: 0;
	width: 100%;
	height: 60px;
	display: flex;
}

.headertitle{
	font-size: 3em;
	padding-left: 16px;
	padding-top: 16px;
	width: 320px;
}

.desktoplinks{
	display: none;
	flex-direction: row;
	font-size: 2em;
	width: 80%;
	padding-left: 32px;
	padding-top: 16px;
	justify-content: space-evenly;
}

.mobilelinks{
	display: none;
	position: fixed;
	flex-direction: column;
	background-color: #8d86c9;
	width: 100vw;
	margin-top: 52px;
	font-size: 2.5em;
}

.menulink{
	padding: 4px;
	color: white;
	text-decoration: none;
}

.burger{
	display: block;
	position: absolute;
	right: 24px;
	top: 16px;
	font-size: 2em;
	color: white;
	cursor: pointer;
}

.burger:hover{
	color: #8d86c9;
}

.fixedbg{
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
}
	
.one{
	width: 100vw;
	height: 100vh;
	background-image: url(../images/flowers.jpg);
	display: flex;
	justify-content: center;
	align-items: center;
}

.textbox{
	background-color: #525252;
	color: white;
	font-size: 5em;
}

.textbox.inimage{
	width: 250px;
	opacity: 0.5;
	text-align: center;
}

.two{
	min-height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.three{
	width: 100vw;
	height: 80vh;
	background-image: url(../images/flowers.jpg);
}

.four{
	min-height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.five{
	width: 100vw;
	height: 80vh;
	background-image: url(../images/rings.jpg);
}

.six{
	min-height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.seven{
	width: 100vw;
	height: 100vh;
	background-image: url(../images/rings.jpg);
}

.basediv{
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-image: url(../images/rings.jpg);
	background-size:  cover;
	align-items: center; 
	color: white;
	overflow: scroll;
}

.baseblank{
	min-height: 120px;
}

.baseheader{
	margin-top: 16px;
	font-size: 4em;
	text-align: center;
}

.headerseperator1{
 width: 95%;
 min-height: 8px;
 border-radius: 4px;
 background: linear-gradient(to right, #8cb369, transparent);
}

.headerseperator2{
 width: 95%;
 min-height: 8px;
 border-radius: 4px;
 background: linear-gradient(to right, #8d86c9, transparent);
}

.headerseperator3{
 width: 95%;
 min-height: 8px;
 border-radius: 4px;
 background: linear-gradient(to right, #70a288, transparent);
}

.news{
	margin-top: 32px;
	font-size: 3em;
	text-align: center;
}

.processTop{
	margin-top: 32px;
	font-size: 4em;
	text-align: center;
}

.processInfo{
	margin-top: 32px;
	font-size: 3em;
	text-align: center;
}

.processseperator{
	min-height: 6px;
	margin-top: 4px;
	margin-bottom: 4px;
	width: 40%;
	background: linear-gradient(to right, #525252, transparent);
	border-radius: 4px;
}


.seperator{
	margin: 16px;
	font-size: 4em;
}

.processbase {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-image: url(../images/rings.jpg);
	background-size: cover;
	align-items: center;
	color: white;
}

.mapsdiv{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.innermapsdiv{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 8px;
}

.mapsspan{
	font-size: 3em;
	text-align: center;
}


.mapsborder{
	border: solid #8d86c9 4px;
	border-radius: 4px;
}

.mapsborder2{
	border: solid #70a288 4px;
	border-radius: 4px;
}

@media only screen and (min-width: 641px) and (max-width: 1007px) {
  
  .basegrid{
	 grid-template-columns: repeat(6, 1fr);  
  }
  
  .three{
	background-image: url(../images/cusbackground.jpg);
  }

  .seven{
	background-image: url(../images/cusbackground.jpg);
  }  
}

@media only screen and (min-width: 1008px) {
	
  .basegrid{
	 grid-template-columns: repeat(12, 1fr);  
  }
  
  .three{
	background-image: url(../images/cusbackground.jpg);
  }

  .seven{
	background-image: url(../images/cusbackground.jpg);
  }  
  
  .desktoplinks{
	display: flex;
  }
  
  .burger{
	 display: none;
  }

   .baseheader{
   	font-size: 5em;
   }

  .headerseperator1{
	min-height: 12px;
  }
  
  .headerseperator2{
	min-height: 12px;
  }
  
  .headerseperator3{
	min-height: 12px;
  }
  
  .processseperator{
	min-height: 8px;
}

	.mapsdiv{
	flex-direction: row;
	align-items: space-evenly;
  }
}