html, body {height:100%;}

html {
  font-size: 16px;
  line-height:1;
  min-height: 100%;
  background-size: 100%;
}

body {

  background-image: linear-gradient(#000049, #000); 
  overflow-x: hidden;
  font-family:'Ubuntu',Arial,sans-serif;
  
}

:root {
--mainpurple:#941374;
--mainorange:#f3794c;
--ltbrown:#e5deda;
--dkbrown:#BC8F8F;
}

/************ TEXT STYLES ******************/

.h1 {color: var(--mainpurple)}
h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}

.flyfont {font-size:7rem; color: gold;}

a {
  color: #00657f;
/*  transition: background .3s ease-in-out; */
  text-decoration: none;
  cursor:pointer;
}

a:hover, a:focus {
  color:#00b7e5;
}

/************ ELEMENT STYLES ******************/

label, button {
	vertical-align: baseline;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  font-size: 100%;
}

.header {
	display: flex; margin-bottom: 1rem;
	@media screen and (max-width: 576px) {
		margin-bottom:2rem;	
	}	
	
	
}

.sitename {
	font-size: 1.8rem;
  color: var(--mainorange);
  padding-bottom: 0;
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: -.5px;
  line-height: 1.4rem;
  }
  
.snl1 {
	font-family: 'Solitreo', Arial, Helvetica, sans-serif;
  letter-spacing: -1px;
  font-size: 1.5rem;
  }

.sitetag {
  font-size: 1rem;
  color: darkturquoise;
	padding:10px 0 0 30px;
  }

/************ STARS ******************/

#stars { 
	background-image: url("/images/starry-sky2.gif");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position:relative;
  opacity:.5;
  z-index:0;}

/************ FORM ******************/

.actions {
  position: absolute;
  left: 0;
  right:0;
  top: 24%;
  margin:0 auto;
  width: 40%;
  max-width:750px;
  color: #fff;
  z-index:200;
  background-color: transparent;
  color:#222;
	@media screen and (max-width: 576px) {
		position: absolute;
		top: 10%;
		width:80%;
	}
}

.form-wrapper {
	display: flex;
  flex-wrap: nowrap;
  align-items: center;
	@media screen and (max-width: 576px) {
		flex-wrap: wrap;	
		width:100%;
	}
}

.select-wrapper {
  flex-grow: 1;
  justify-content: space-between;
  flex-wrap: nowrap;
  position: relative;
	margin:0;
	width: 95%;
}

.wizard {
  display: block;
  width: 100%;
  max-width: 756px;
  position: relative;
  margin: 0 auto;
}

.tab-container {
	text-align:center!important;
	vertical-align: baseline;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  font-size: 100%;
}

.tabs {
	background: #cbd1d6;
  border-radius: 8px 8px 0 0;
  display: inline-block;
  overflow: visible;
  z-index: 0;
  position: relative;
  vertical-align: top;
  box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.5);
  font-size: 0;
  user-select: none; 
  }
  
.tabs a.boxtab {
  min-width: 144px;
  padding: 10px 16px 4px;
  border-radius: 8px 8px 0px 0px;
  border: 1px solid #F3F4F6;
  position: relative;
  color:#444;
}

.tabs a.tab-active {
  background-color: #f6f6f2;
  z-index: 2;
	color: #222;
}
 
.tabs a.tab-active span {
	color: #941374!important;
}

.tabs a.tab-active[data-target="Paths"] {
  box-shadow: 1px 1px 6px 1px rgba(0, 0, 0, 0.05);
  border-top-right-radius: 8px;
}

.tabs a.boxtab[data-target="Categories"] {
  border-top-left-radius: 0;
}

.tabs a {
	display: inline-block;
  vertical-align: top;
  padding: 0 16px;
  border-right: 1px solid rgba(216, 216, 216, 0.4);
  border-left: 1px solid rgba(216, 216, 216, 0.4);
  color: #464553;
}

.tabs span {
  line-height: 20px;
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  line-height: 48px;
  font-weight: 700;
}

.tabs a.boxtab span {
  font-family: 'Solitreo', Arial, Helvetica, sans-serif;
  color:#666;
	font-size:1rem;
  line-height: 20px;
  
}

.wizard .wizforms {
  background: #f6f6f2;
  border: 1px solid #F3F4F6;
  border-radius: 8px;
  box-shadow: 0 3px 3px 0 rgba(160, 160, 180, 0.4);
  height: 100%;
  width: 100%;
  z-index: 1;
  position: relative;
  margin-bottom: 38px;
  }

.wizard .wizform.boxtab-target {
  position: relative;
  left: auto;
  pointer-events: auto;
  visibility: visible;
  display:none;
}

.wizard .wizform.boxtab-target.active {display: block;}


.wizard .wizform {
/*  width: 100%; */
  box-shadow: none;
  padding: 2rem 12px 16px	2rem;
  margin-top: 0;
  position: absolute;
  z-index: 3;
  display: inline-block;
  vertical-align: top;
  margin-top: 0;
  border-radius: 4px;
  box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.wizard .selects {
  width: 100%;
  border-right: none;
  border-left: none;
  padding: 0;
	position: relative;
  display: inline-block;
  bottom: 8px;
  vertical-align: top;
  z-index: 2;
}

.submit-wrapper {
	flex-shrink: 1;
	@media screen and (max-width: 576px) {	
		width: 100%;
		text-align: center;
	}
}

.wizform .submit-button {
  color: #222;
  width: auto;
  min-width: 68px;
/*  height: 44px;
  background: #f3794c;
  padding: 12px;
  border-radius: 21px;
  display: inline-block;
  margin-left: 10px; */
  position: relative;
  z-index: 2;
  transition: all 0.3s ease-in;
  line-height:.5;
  font-size:14px;
  text-transform:uppercase;
  color:var(--mainorange);
  cursor:pointer;
}

.fa-caret-right {font-size:3rem;}
.submit-go {font-size:1.2rem;font-weight:500;}

.showall {
  display: flex;
  border-top: 1px solid #F3F4F6;
  height: 42px;
  flex-wrap: nowrap;
  justify-content:flex-end;
}

.showalllink {
  font-size: 14px;
  padding: 12px 14px 0;
}

.check-wrap {
  display: flex;
  align-items: start;
}
 
.check-wrap input[type="checkbox"] {
  margin-right: 10px;
}
 
.check-wrap label {
  margin: 0;
  font-size:12px;
  font-weight:400;
  padding-bottom:.5rem;
  line-height:1rem;
}

.check-wrap .pat-name, .check-wrap .cat-name {padding-right:6px;font-weight:700;color:#941374;}

/************ BACKGROUND ******************/


/* https://codepen.io/springerkc/pen/aMxxyO */

section {
	position:relative;
	div.container {
		transition:all .3s ease;
	}
	@media (max-width:992px) { padding:0 20px 0 20px; }	
}

div.highway-slider1, .highway-slider2, .highway-slider3, .highway-slider4, .highway-slider5, .highway-slider6, .highway-slider7, .highway-slider8, .highway-slider9  {
	width:100%;
/*	position:absolute; */
	div.highway-barrier {
		overflow:hidden;
		position:relative;
		width:100%;
	}
	ul.highway-lane {
		height:100%;
		li.highway-car {
		background:transparent;
		}
	}
}

/************ CLOUD 1 ******************/

@keyframes translatestf {
	0% { transform:translateX(100%);  }
	100% { transform:translateX(-100%);  }
}

.highway-slider1 {z-index:5; position:fixed; top:5%;}

#cloud1 div.highway-barrier  {
	ul.highway-lane {
		width:100%;
		li.highway-car {
			animation:translatestf 40s linear infinite;
			animation-delay: -2s;
		}
	}
}

/************ CLOUD 2 ******************/
.highway-slider2 {z-index:20; position:fixed; bottom:10%;}

#cloud2 div.highway-barrier  {
	ul.highway-lane {
		width:100%;
		li.highway-car {
			animation:translatestf 40s linear infinite;
			animation-delay: -20s;
		}
	}
}

/************ CLOUD 3 ******************/
.highway-slider3 {z-index: 15; position:fixed; top:15%;}

#cloud3 div.highway-barrier  {
	ul.highway-lane {
		width:100%;
		li.highway-car {
			animation:translatestf 40s linear infinite;
			animation-delay: -30s;
		}
	}
}

/************ CLOUD 4 ******************/
.highway-slider4 {z-index: 10; position:fixed; top:30%;}

#cloud4 div.highway-barrier  {
	ul.highway-lane {
		width:100%;
		li.highway-car {
			animation:translatestf 40s linear infinite;
			animation-delay: -14s;
		}
	}
}


@media screen and (max-width: 576px) {	
	.highway-slider3, .highway-slider4 {display:none;}
}


/************ GlYPH 1 (lock) ******************/
.highway-slider5 {z-index: 1; position:fixed; top:30%;}

#glyph1 div.highway-barrier  {
	ul.highway-lane {
		width:100%;
		li.highway-car {
			animation:translatestf 20s linear infinite;
			animation-delay: -1s;
		}
	}
}

/************ GlYPH 2 (mobile) ******************/
.highway-slider6 {z-index: 2; position:fixed; top:60%;}

#glyph2 div.highway-barrier  {
	ul.highway-lane {
		width:100%;
		li.highway-car {
			animation:translatestf 20s linear infinite;
			animation-delay: -7s;
		}
	}
}

/************ GlYPH 3 (network) ******************/
.highway-slider7 {z-index: 7; position:fixed; top:35%;}

#glyph3 div.highway-barrier  {
	ul.highway-lane {
		width:100%;
		li.highway-car {
			animation:translatestf 30s linear infinite;
			animation-delay: -20s;
		}
	}
}

/************ GlYPH 4 (location) ******************/
.highway-slider8 {z-index: 3; position:fixed; top:12%;}

#glyph4 div.highway-barrier  {
	ul.highway-lane {
		width:100%;
		li.highway-car {
			animation:translatestf 50s linear infinite;
			animation-delay: 0s;
		}
	}
}

/************ GlYPH 5 (camera) ******************/
.highway-slider9 {z-index: 8; position:fixed; top:15%;}

#glyph5 div.highway-barrier  {
	ul.highway-lane {
		width:100%;
		li.highway-car {
			animation:translatestf 60s linear infinite;
			animation-delay: -15s;
		}
	}
}


.transp {background: transparent;}