@charset "UTF-8";
/* CSS Document - UMass Med Schools - Master */

/* fonts */

@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');

body, div, h1, h2, h3, span, p {
}
/* fullscreen */

body {
	margin-top: 0px;
	margin-right: 15px;
	margin-left: 15px;
	margin-bottom: 0px;
	font-family: 'Sarabun', sans-serif;
	font-weight: 400;
	background-color: #f6f8f9;
}

/* fix for scroll bars on webkit & >=Mac OS X Lion */ 
::-webkit-scrollbar {
	background-color: rgba(0,0,0,0.5);
	width: 0.75em;
}
::-webkit-scrollbar-thumb {
	background-color:  rgba(255,255,255,0.5);
}


.logopad {
	border: solid 10px #ffffff !important
}

/* general text */	

.spintitles h3 {
	font-size:  20px;
	margin-top:  10px;
	font-family: 'Sarabun', sans-serif;
	font-weight: 600;
	color:  #ffffff;
	margin-bottom: 3px !important;
	margin-top: 0px !important;
}

.spintitles p {
	
	font-size: 16px;
	line-height:  24px;
	font-weight: 400;
	color:  #cccccc;
}


#mediagallery {
	color: #c32033;
	font-weight: 400;
	font-size: 24px;
	font-family: 'Sarabun', sans-serif;

}

#text {
	margin-left: 0px;
	margin-right: 0px;
}

.textclosebutton {
	background-color: #ffffff;
	color: #000000 !important;

}

.textclosebutton:hover, .textclosebutton:focus {
	background-color: #aac931 !important;
	transform: scale(1.05) !important;
	transition: all .5s ease  !important;
	color: #ffffff !important;

}


/* splash styles */

.splashbutton {
	background-color: #0071b0 !important;
	color: #ffffff !important;
	font-size: 20px !important;
	border-radius: 6px !important;
}

.splashbutton:hover, .splashbutton:focus {
	background-color: #aac931 !important;
	transform: scale(1.05) !important;
}


/* popup text styles */


.textframe {
	width: 600px !important;
	max-width: 90% !important;

}


#textbox h3 {
	color: #000f9f;
	font-family: 'Sarabun', sans-serif;
	font-size: 18pt;
	margin-left: 30px;
	margin-right: 30px;
	padding-bottom: 0px;
	font-weight: 700;	
}

#textbox p {
	color: #7f8a9d;
	font-size: 14pt;
	margin-left: 30px;
	margin-right: 30px;
	line-height: 25px;
	font-weight: 400;


}

#textbox li {
	margin-left: 50px;
}
#textbox ul {
	margin-top: 0px;
	color: ##ffffff;
}






/* popups */

.lightbox {

	background-color: rgba(0, 0, 0, 0.9) !important;
}


.framebox {
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}


.closebutton {
	background-color: #000000 !important;
	color: #ffffff !important;
	border: 2px solid #ffffff !important;
	border-radius: 20px !important;
}

.closebutton:hover, .closebutton:focus {
	background-color: #666666 !important;
	transform: scale(1.1) !important;
	transition: all .5s ease  !important;
}




/* buttons  */

.buttons {

	background-color:  rgb(255, 255, 255, .6) !important;
	border: 0px solid #ffffff !important;
	border-radius: 100px !important;
}

.buttons:hover, .buttons:focus {

	background-color:  #ffffff !important;
	transform: scale(1.1) !important;
	transition: all .5s ease  !important;
	
}

/*.buttonicons {
	filter: brightness(0) saturate(100%) invert(66%) sepia(68%) saturate(399%) hue-rotate(32deg) brightness(95%) contrast(100%);
	/*  use https://angel-rs.github.io/css-color-filter-generator/ to find filter for desired HEX   */
}

.svghover {
	transition: all .5s ease;
}

.svghover:hover {
	transform: scale(1.2);
	
}




/* markers */

.marker_normal {
	background-color:  #ffc629 !important;
	border: 3px solid #000000 !important;
	border-radius: 100px !important;
	transition: background-color .5s ease  !important;
	transition: all .5s ease  !important;
}

.marker_normal:hover, .marker_normal:focus{
	background-color:  #ffc629 !important;
	transform: scale(1.2) !important;
}

.marker_active {
	background-color:  #ffc629 !important;
	border: 6px solid #000000 !important;
	border-radius: 100px !important;
}

.marker_active:hover, .marker_active:focus{
	transform: scale(1.2) !important;
	transition: all .5s ease  !important;
}

.marker_info {
	background-color:  #fc9415 !important;
	border: 3px solid #000000 !important;
	border-radius: 100px !important;
	transition: background-color .5s ease  !important;
	transition: all .5s ease  !important;
}

.marker_info:hover, .marker_info:focus {
	background-color:  #fc9415 !important;
	transform: scale(1.2) !important;
}


/* thumbnail and media gallery menu */



.mediagallery_box:focus, .mediagallery_box:hover, .thumbsborder_active:focus, .thumbs:focus, .thumbs:hover  {
	transform: scale(1.05) !important;
	transition: all .5s ease  !important;

}
.thumbs, .mediagallery_box  {
	border: 8px solid #ffffff !important;
}

.thumbsborder_active {
	border: 8px solid #ffc629 !important;
}

.thumbsborder_active:focus, .thumbs:focus, .thumbs:hover, .mediagallery_box:hover, .mediagallery_box:focus {
	border-color: #666666 !important;

}

.thumbs_spinname_active {
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 500 !important;

}

.thumbs_spinname {
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 500 !important;
}

.thumbtitle {
	font-size: 20px !important;
	padding: 0px 0px 0px 20px !important;
}

.thumbback {

	margin-bottom: 30px !important;
}


/* media gallery menu */



/* social media buttons */


#socialbuttons {
	padding-left: 18px;
	padding-right: 18px;
	padding-bottom: 20px;
	padding-top: 4px;
	background-color: #f6f8f9;	 /*change this to the right color*/
	margin-left: auto;
	margin-right: auto;
	width: 320px;
}


#socialbuttons h3 {
	color: #000000;
	font-weight: 400;
	font-size: 24px;
	font-family: 'Sarabun', sans-serif;
}

#socialbuttons a {
	margin-left: 5px;
	margin-right: 5px;
}



/*  fancybox background and caption in the slideshows  */


.fancybox-close:hover {

	transform: scale(1.1);
	transition: all .2s ease-in-out;
}

.fancybox-nav span:hover {

	transform: scale(1.1);
	transition: all .2s ease-in-out;
}


#fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	z-index: 8010;
	background: #000000;
}


/* animation of svg */

.svg:hover { 
	transform: scale(1.2); 
	transition: all .2s ease-in-out;
}


.content {
	color:#777; 
	width:100%;
}


/* ADA styles */

#ada-container {
	width: 80% !important;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: 30px 0px 30px 0px !important;

}

#ada-tourstop {
	padding: 10px 0px 10px 0px;
}

#ada-container a {
	outline-offset: 0px;

}

#ada-container p {
	font-size: 18px;
}

.hidden {
	display: none;
}

.accessibilitytext, .adabutton{
	font-size: 14px !important;
}


.accessibilitytext h1 {
	padding: 0px 0px 0px 0px!important;
	font-size: 24px;
}

.accessibilitytext h2{
	padding: 0px 0px 0px 0px!important;
	font-size: 20px;
	line-height: 18px !important;
}

.accessibilitytext h3{
	padding: 20px 0px 0px 0px!important;
	font-size: 16px;
}



.adabutton {
	background-color:#000000;
	border-radius: 20px;
	border: none;
	color: #fff;
	padding: 10px 20px 10px 20px;

}

.adabutton:hover {
	background-color:#cccccc;

}

.adabutton:focus, .buttons:focus, .textbutton:focus, .adasvg:focus {
	outline-offset: 2px;
	outline: 5px auto -webkit-focus-ring-color;
}