@charset "UTF-8";
/*

NEW GENERAL STYLESHEET FOR RESPONSIVE TEMPLATES using Bootstrap v4.3.1

Adriana - updated 08-31-2020 -    updated for ASAE 10-29-30

*/





/* NEW - STANDARD ESHOW ELEMENTS

===========================================================================================================*/

body { 

	font-family: var(--siteFont-main);

	font-size: 1.1rem;

	line-height: 1.65;

	font-weight: 400;

	color: var(--textColor); 

	-moz-osx-font-smoothing: grayscale;

	text-rendering: optimizeLegibility;

	background-color: var(--siteBkgColor);

	

	margin: 0;

	padding: 0;

}



p, ul {

	margin-top: 0; 

	margin-bottom: 0; 

	padding: .5rem 0 1rem;

}

ul {

	margin-left: 1.25rem;

}



a { color: var(--thirdColor); text-decoration: underline; }

a:hover, a:focus { color: #f15b2b; }



.pageTitle, h1, h2, h3, h4, h5, h6 {

	font-family: var(--siteFont-headings);

	margin-bottom: .5rem;

	line-height: 1.25;

	font-weight: bold;

}

.pageTitle, h1 { 

	 

	color: var(--primaryColor); 

   font-size: 2rem;
  font-weight: bold;

/*	text-transform: uppercase;*/

	letter-spacing:normal;
	
	  margin-top: .7rem;
  margin-bottom: 1.2rem  ;

}



h2 { font-size: 1.8rem; color: var(--primaryColor); margin-bottom: .5rem; }

#search_table h2 {margin-bottom:0;}

h3 { font-size: 1.5rem; color: var(--thirdColor); margin-top: 1rem; }

h4 { font-size: 1.4rem; color: var(--secondaryColor);    }

h5 { font-size: 1.1rem; color: var(--fifthColor); margin-top: 1.5rem; margin-bottom: 0; padding-bottom: 0; }

h6 { font-size: 1.3rem; color: var(--fifthColor); }



.body-inner h3 {margin-bottom:1rem;}

hr {clear:left; margin-top:1rem; display:block;}

#accordion .card-header h4 {
    font-size: 1.4rem;
    color: var(--thirdColor);
	font-weight:600;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
}

/*to override programming's call of h6 color*/

h6.modal-title {color: inherit;}



.strong, .bold, strong, b {

    font-weight: 600;

}

.em, .italic, em, i {

    font-style: italic;

}







/* ================= eShow TABLE COLOR styles ===================*/

.bgcolor1, .bdcolor1, /*.color1,*/

.tb-color1 { /* header row & font color */

	color: var(--primaryColor-text); background-color: var(--primaryColor); font-size:1.3rem; font-weight: 600; }



.bgcolor2, .bdcolor2, /*.color2,*/

.tb-color2 { /* 2nd row & font color */

	color:#050505; background-color: #eee; font-weight: 600; }

	

.bgcolor3, .bdcolor3, .color3,

.tb-color3 { /* 3nd row & font color */

	color:#050505; background-color: #eee;}



.tb-colorLt { /* light row & font color */

	color: var(--textColor); background-color: #ebebeb; }

	

.bgcolorSpecial,

.tb-colorDefault {  

	color: var(--textColor); background-color: #CCC; }	

	

.tb-text { /*--- Default text for all tables that use "tb-text" DO NOT CHANGE ----*/

	font-family: var(--siteFont-forms);

	/*font-size: 1.1rem;*/

	color: var(--textColor);

	text-align: left;

}	



/*========== For eShow table GRIDS / LINES  ===================*/

/* Default grey COLOR for table lines - change only if needed*/

.border-table th, .border-table td,

.line-table th, .line-table td { border-color: #dddddd !important;}





/*=================== For CSS FORM BUTTON COLOR - change default color if requested  ========================*/

a.bttn-form-default, input.bttn-form-default, button.bttn-form-default,

input[type="submit"], input[type="reset"], input[type="button"] {

	color: var(--primaryColor-text) !important; 

	background-color: var(--thirdColor) !important; 

	border: 2px solid rgba(222,78,65,.3) !important;

	font-weight: 600 !important;

	font-size: 16px !important;

}

a.bttn-form-default:hover, input.bttn-form-default:hover, button.bttn-form-default:hover { 

	color: var(--fourthColor-text) !important;

	background-color: var(--fourthColor) !important;

	border: 1px solid transparent; 

}

a.bttn-form-default:focus, input.bttn-form-default:focus, button.bttn-form-default:focus { 

	border: 1px solid #000;}

	

	

/*========== eShow CSS Tabs  =================== */

#eshowmenutab.menutab a.tab { color: var(--secondaryColor-text);} 

#eshowmenutab.menutab a.tab::before { background-color: var(--secondaryColor);}

#eshowmenutab.menutab a.selected { color: var(--primaryColor-text);}

#eshowmenutab.menutab a.selected::before { background-color: var(--primaryColor);}

#eshowmenutab.menutab a.tab:hover:before { background-color: var(--primaryColor);}





/* MOBILE APP WEBSITE MENU (original have not changed - needed or delete?? - possibly update)

===========================================================================================================*/

#mobile-menu > span { color: var(--primaryColor); }

#mobile-menu > span:hover {color: var(--secondaryColor); }

#toggle-view-menu > li { background-color: var(--primaryColor); }

#toggle-view-menu li:hover { background-color: var(--secondaryColor); }

#toggle-view-menu span { background-color: var(--primaryColor); }

#toggle-view-menu li.active { background-color: var(--primaryColor); }

#toggle-view-menu .menu-panel {background-color: var(--primaryColor); }





/* BACK TO TOP

===========================================================================================================*/

#back-top a { background-color: var(--primaryColor); }

#back-top a:hover { background-color: var(--thirdColor); }





/*========== Site CUSTOM BUTTONS ===================*/

/* moved content from ASAE buttons.css to this section*/

a.button, .custom-button {

	margin: .2rem .4rem .2rem 0;

	text-align: center;

	text-decoration: none;

	hyphens: auto;

	word-wrap: break-word;

	display: inline-block;

	font-weight: 600;

	float:left;
	
	min-width: 160px;

	color: var(--primaryColor-text);

	background-color: var(--primaryColor);

	font-size: 1.1rem;

	line-height: 1.2rem;

	font-family:  var(--siteFont-nav);

	/*text-transform: uppercase;*/

	-webkit-border-radius: 3px;

	-moz-border-radius: 6px;

	border-radius: 3px;

	padding: .6rem 1rem .5rem;

	transition: background-color 0.45s ease-out, color 0.25s ease-out;

	transition: border-color 0.25s ease-out, color 0.25s ease-out;

}

a.button:hover,

a.button:focus,

.custom-button:hover,

.custom-button:focus {

 

	background-color: #f15b2b;

}



.short { width: 31%; }

.long { width: 45%; }



/*Large devices (desktops, less than 1200px)*/

@media (max-width: 1199.98px) {

	.short { width: 50%; }

}

/*Medium devices (tablets, less than 992px)*/

@media (max-width: 991.98px) { 

	.long , .short  { width: 100%; }

}





/*========== MISC ===================*/

/*fix for Internet Explorer 10, SVG images with .img-fluid are disproportionately sized.*/

.img-svg { width: 100% \9; }





#cookieBar {

	color: var(--fifthColor-text);

	background-color: var(--fifthColor);

}

#cookieBar p {

    max-width: 59vw;

    margin: 0 auto;

}

#clickAgreeCookie {

	color: var(--primaryColor-text) !important;

	background-color: var(--primaryColor) !important;

}



/*========== for VEM poster gallery page  - adriana added 12-6-20  =================== */

#vem_gallery_body #room_bg_image { 

	position: fixed;

	width: 100%;

	height: 105%;

	/*height: auto;*/

}







/* BASIC MEDIA QUERIES - Bootsrap 4

===========================================================================================================*/



/* Max container widths:

** Extra large devices (large desktops, 1200px and up) - .col-xl = 1140px 

** Large devices (desktops, 992px and up) - .col-lg- = 960px 

** Medium devices (tablets, 768px and up) - .col-md- = 720px  

** Small devices (landscape phones, 576px and up) - .col-sm- = 540px 

** Extra small devices (portrait phones, less than 576px) .col-  = None (auto) 

*/



/*Extra small devices (portrait phones, less than 576px)

No media query since this is the default in Bootstrap*/



/*Small devices (landscape phones, 576px and up)*/

@media (min-width: 576px) { }



/*Medium devices (tablets, 768px and up)*/

@media (min-width: 768px) { }



/*Large devices (desktops, 992px and up)*/

@media (min-width: 992px) { }



/*Extra large devices (large desktops, 1200px and up)*/

@media (min-width: 1200px) { }

	

/******/



/*Extra small devices (portrait phones, less than 576px)*/

@media (max-width: 575.98px) { }



/*Small devices (landscape phones, less than 768px)*/

@media (max-width: 767.98px) { }



/*Medium devices (tablets, less than 992px)*/

@media (max-width: 991.98px) { }



/*Large devices (desktops, less than 1200px)*/

@media (max-width: 1199.98px) { }



/*Extra large devices (large desktops)

No media query since the extra-large breakpoint has no upper bound on its width*/