/* Variables */
/* ## Fonts ## */
/* ## Colors ## */
/* ## Transition ## */
/* Functions */
/* 12-Column Grid System */
/* 	For 3 columns add: "width: grid-width(4);" For 4 add: "width: grid-width(3);" */
/* rem Sizing */
/* Font Sizing */
/* Mixins */
/*********************
BREAKPOINTS

Usage:

	@include breakpoint(breakPointName) {
		 Styles 
	}

*********************/
/* //////////////////
FLEXBOX
////////////////// */
/* Search Section 
////////////////////////////// */

/*
AgenciesList refers to the div that encompasses all agency listings
formsResults refers to the div that encompasses all service listings
*/
#agenciesList, #formsResults{
	
		margin-left:5px;
	margin-top:5px;

}
/*
each listing is encompassed in class agencyItem or serviceItem depending on the list type.
*/
.agencyItem::first-line{
 font-weight:bold
}
.serviceItem::first-line{
 font-weight:bold

}
#search-banner input::-ms-clear{
   display:none;
}
#search-banner { position: absolute; width: 100%; height: auto; margin: 0;margin-top:200px; padding: 0; background-repeat: no-repeat;/* / */ /* /#searchResults */ }


#search-banner.fade::after { opacity: 1; }



.search-panel-active a {
	font-size:1em!important;
}
.agencyItem hr,
.serviceItem hr {
	width:100%!important;
}
#search-banner  p { padding: 0; transition: top .4s;width: auto;  margin: 0 auto;margin-right:30px; margin-left:0px; top:25vh;}

#search-banner p.search-ajax-active { top: 20vh; }

#search-banner p.search-ajax-active label {  }

#search-banner p.search-ajax-active button.clear-search { display: block; }

#search-banner label { position: absolute; top: -1.5em; left: 0; color: white; font-size: 2em; font-weight: 400; text-shadow: 0 0.0625em 0.125em rgba(0, 0, 0, 0.8); transition: opacity .4s; }


#search-banner input { width: 100%; height: 3rem; margin: 0 auto; padding: 0 1rem; border: 2px solid #cccccc; font-size: 1.8em; color: #58595b; background: rgba(255, 255, 255, 0.8); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8); border-radius: 0.25rem; }



#search-banner button[type=button] { position: absolute; top: 0; right: 0; width: 3rem; margin-right:30px; height: 3rem; padding: 0; background: transparent url("/images/blacksearch.png") center no-repeat; background-size: 32px; text-indent: 100%; overflow: hidden; white-space: nowrap; background-color:transparent; border:0px none;}


#results {
	
	
	display:none;
}


#search-banner button.clear-search { display: none; position: absolute; top: 0; right: 3rem; width: 3rem; height: 3rem; text-indent: -999em; background: transparent url(/images/clear.svg) center no-repeat; border-radius: 2px; border-right:0px none; border-left:0px none;}



#search-banner #searchResults { position:relative; top: 0; width: auto; height: 0; opacity: 0; margin: 0 auto; margin-top:10px; margin-left:0px; margin-right:30px; padding: 0 0 2.5rem 0; background: white; transition: height, opacity .4s .5s; border:5px solid #71bcda; /* /#searchTabs */ /* /#results */ /* /#relatedResults */ }

#search-banner #searchResults.search-ajax-active { height: 50vh; opacity: 1; z-index: 1!important; }

#search-banner #searchResults #searchTabs {  top: 0; left: 0; width: 100%; height: 9vh; z-index: 6; }

#search-banner div#searchResults.clearfix.search-ajax-active {
	z-index:9999!important;
}

#search-banner #searchResults #searchTabs li { float: left; width: 25%; height: 4vh; }

 #search-banner #searchResults #searchTabs li { width: 32.33%; margin:1% .5% 1% .5%; }
  
 

#search-banner #searchResults #searchTabs li a {text-transform:uppercase;padding:10px; color:white;display: block; text-align: center; text-decoration: none; background-color:#0054a6; }

#search-banner #searchResults #searchTabs li a.active { background:#f4ad2c; color:black;}

#search-banner #searchResults #searchTabs li a:hover { background: #f4ad2c; color:black;}

#search-banner #searchResults #results { position: relative; width: 99%; height: 39vh;}

#search-banner #searchResults #results iframe { width: 100%; height: 46vh; }

#search-banner #searchResults #results #agenciesList, #search-banner #searchResults #results #formsResults, #search-banner #searchResults #results #googleResults { display: none; width: 50%; height: 100%;  top: 11vh; }

#search-banner #searchResults #results #agenciesList.search-panel-active, #search-banner #searchResults #results #formsResults.search-panel-active, #search-banner #searchResults #results #googleResults.search-panel-active { display: block; padding-left:1%; padding-right:1%; }


#search-banner #searchResults #results #agenciesList { overflow-x: hidden; overflow-y: auto; /* /.item */ }

#search-banner #searchResults #results #agenciesList .item { border-bottom: 1px solid #e0dede; background: white; }

#search-banner #searchResults #results #agenciesList .item a { display: block; position: absolute; padding: .5rem; }



#search-banner #searchResults #results #agenciesList .item a h4.title { font-size: 16px; font-size: 1rem; font-weight: 700; line-height: 1.2; width: 60%; }


#search-banner #searchResults #results #agenciesList .item a .agency, #search-banner #searchResults #results #agenciesList .item a .description { display: block; color: #676767; font-size: 11px; font-size: 0.6875rem; line-height: 1; }

#search-banner #searchResults #results #agenciesList .item a .description { width: 76%; }

#search-banner #searchResults #results #agenciesList .item a .agency { position: absolute; top: .5rem; right: .5rem; width: 20%; font-style: italic; }


#search-banner #searchResults #results #agenciesList .item a:hover { text-decoration: none; }

#search-banner #searchResults #results #formsResults, #search-banner #searchResults #results #googleResults { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;  }

#search-banner #searchResults #results #formsResults iframe, #search-banner #searchResults #results #googleResults iframe { position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 100%; }



@media screen and (max-width: 768px){
#search-banner #searchResults #searchTabs li { float: none; width: 96%; margin:5px 5px 20px 5px; height: 4vh; }
#search-banner #searchResults #results {top: 120px; }
#search-banner #searchResults.search-ajax-active {
	height:90vh;
}
#search-banner #searchResults #results #agenciesList, #search-banner #searchResults #results #formsResults, #search-banner #searchResults #results #googleResults {
	height:60vh;
}
}