/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
	.column {
	  width: 100%;
	  height: auto;
	}
  }
  

  input {
	outline: none;
}
input[type=search] {
	-webkit-appearance: textfield;
   appearance: textfield;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	font-family: inherit;
	font-size: 90%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
	display: none; 
}


input[type=search] {
	background: url(./../images/icons8-search.svg) no-repeat center;
	background-size: contain;
	border: none;
	padding: 15px;
	margin-left: 15px;
	margin-right: 15px;
	align-items: center;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
}
input[type=search]:focus {
	width: 130px;
	height: 100%;
	border-color: var(--tcRed);
	margin: 0;
	padding: 0;
	-webkit-box-shadow: 0px 4px 20px 2px rgba(0, 0, 0, .15);
	-moz-box-shadow: 0px 4px 20px 2px rgba(0, 0, 0, .15);
	box-shadow: 0px 4px 20px 2px rgba(0, 0, 0, .15);
}


input:-moz-placeholder {
	color: #999;
}
input::-webkit-input-placeholder {
	color: #999;
}


#popout input[type=search] {
	width: 15px;
	padding-left: 10px;
	color: transparent;
	cursor: pointer;
}

#popout input[type=search]:focus {
	width: 130px;
	padding-left: 32px;
	color: #000;
	background-color: #fff;
	cursor: auto;
	margin-left: 0;
	margin-right: 0;
}
#popout input:-moz-placeholder {
	color: transparent;
}
#popout input::-webkit-input-placeholder {
	color: transparent;
}

.navbar #popout {
	border-right: 1px solid rgba(255,255,255,.2);
	margin-top: 0;
}

/* mega menu list */
 .nav-menu {
   display: flex;
   height: 70px;
   justify-content: center;
   list-style: none;
   margin: 0;
   padding: 0;
   z-index: 15;
   background-color: var(--tc-grayTop);
   width: max-content;
   color: white;
   margin-right: 10vw;
}

/* a top level navigation item in the mega menu */
.nav-item {
   list-style: none;
   display: inline-block;
   padding: 0;
   margin: 0;
  padding: 13px; 
}

.nav-item:hover, .nav-item:focus {
   background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.20) 120%) #87212e;
   background-blend-mode: multiply,multiply;
   color: white;
}

/* first descendant link within a top level navigation item */
.nav-item > a {
   	position: relative;
   	display: inline-block;
   	color: white;
   	text-decoration: none;
   	font-family: var(--tcTitle);
   	font-weight: 400;
   	font-size: var(--tc-m);
	top: 50%;
	transform: translateY(-50%);
}


/* focus/open states of first descendant link within a top level 
  navigation item */
.nav-item > a:focus,
.nav-item > a.open {
   background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.20) 120%) #87212e;
   background-blend-mode: multiply,multiply;
   color: white;
}

/* open state of first descendant link within a top level 
  navigation item */
.nav-item > a.open {
   background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.20) 120%) #87212e;
   background-blend-mode: multiply,multiply;
   color: white;
}

.nav-item:hover .sub-nav {
   display: block;
}

/* sub-navigation panel */
.sub-nav {
   display: none;
   position: absolute;
   background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.60) 0%, rgba(0,0,0,0.40) 120%) #333;
	background-blend-mode: multiply,multiply;
   right: 0;
   width: 80vw;
   margin-right: 10vw;
   box-shadow: 0px 4px 20px 2px rgba(0, 0, 0, .15);
   z-index: 99999999;
   margin-top: 20px;
   transition: ease-in-out .7s;
}
/* sub-navigation panel open state */
.sub-nav.open {
   display: block;
}

/* list of items within sub-navigation panel */
.sub-nav ul {
   display: block;
   
   
   padding: 0;
}

/* list item within sub-navigation panel */
.sub-nav li {
   display: block;
   list-style-type: none;
   margin: 0;
   padding: 0;
   color: white;
   text-decoration: none;
}  

.sub-nav-group li a {
   color: white;
   text-decoration: none;
   font-family: var(--tcBody);
   font-size: 16px;
   padding: 10px;
}



.column {
   float: left;
   width: 33%;
   padding-bottom: 50px;
   margin-top: 162px;
   height: auto;

   
 }

 .column ul {
	 margin: 0;
	 padding: 0;
	
 }
 
 .column a {
   float: none;
   margin: 0;
   padding: 0;
   color: white;
   
   text-decoration: none;
   display: block;
   text-align: left;
   font-family: Arial, sans-serif;
   
   
 }

 .column a:hover, .column a:focus {
	background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.20) 120%) #87212e;
	background-blend-mode: multiply,multiply;
	 text-decoration: underline;
	 
 }

 .column p {
	font-family: var(--tcBody);
	font-size: var(--tc-sm);
	font-weight: 200;
	margin: 0;
	padding: 0;
	margin-left: 25px;
	margin-right: 25px;
	
 }

 .column h2 {
   padding: 0;
   margin: 0;
   padding-top: 15px;
   color: white;
   text-align: left;
   margin-left: 25px;
   margin-right: 25px;
   padding-left: 15px;
   padding-bottom: 15px;
   font-size: var(--tc-m);
   font-weight: 400;
   border-bottom: 2px solid #ffbf61;
   font-family: var(--tcTitle);

}

.column h3 {
   font-family: var(--tcBody);
   font-size: 1.75rem;
   font-weight: 200;
   margin: 0;
   padding: 0;
   margin-left: 25px;
   margin-right: 25px;
   padding: 10px;
   
}

.column a {
   cursor: pointer;
   
   
}

.testFlex {
   display: flex;
}

.menuHeader {
   background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.20) 120%) #87212e;
   background-blend-mode: multiply,multiply;
   padding: 1px;
   color: white;
   text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
   width: 100%;
   position: absolute;
   box-shadow: 0px 4px 20px 2px rgba(0, 0, 0, .15);
   text-align: center;
   
 }

 .menuHeader h2 {
   font-family: var(--tcTitle);
   font-weight: 400;
   font-size: var(--tc-xl);
   padding: 35px;
}

nav #popout {
	padding-top: 10px;
	padding-left: 5px;
	padding-right: 5px;
	
}