@charset "UTF-8";
/* CSS Document - Brewster Academy */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/* do not erase */  @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined");

body, div, h1, h2, h3, span, p {
			}

/* fullscreen */
			
body {
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	font-family: "DM Sans", sans-serif !important;
	font-weight: 400;
}

/* 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);
			}
			
		

/* the splash */

.instructions span {
	font-weight: 700;
	font-size: 18px;
	line-height: 30px;
}

.instructions {
	background-color:  rgb(15, 45, 82, .6)  !important;
	border-radius: 0px;

}

#mapicon {
	font-size: 30px !important;
	vertical-align: middle;
}

/* the icons */

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24,
}


.framebox {
	box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}


/* the bottom bar */

.buttons, .ring {
	border-radius: 50px !important;
}


/* the markers */

.markernumber {
	border-radius: 40px !important;
	font-weight:  700 !important;
}

.bubble {
	font-size: 16px !important;
	box-shadow: rgba(0, 0, 0, 0.75) -8px 8px 12.6px !important;
}

/* the flyouts */

.flyoutshadow_left {
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px -1.95px 5.6px;
}

.flyoutshadow_right {
	box-shadow: rgba(0, 0, 0, 0.15) -1.95px -1.95px 5.6px;
}


/* text buttons */

.button {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}



/* the map key */



.keytitle {

	font-family: "PT Serif", serif !important;
	font-size: 18pt !important;
	padding-bottom: 0px !important;
	font-weight: 700 !important;
}

.material-symbols-outlined {

	font-size: 15pt !important;
	padding-bottom: 0px !important;
	padding-top: 2px !important;
	font-weight: 400 !important;
}



.listitem, .listitem_number, .listitem_number_double {

	font-size: 16px !important;
	padding-bottom:  10px !important;
	letter-spacing: -.3px;

}

.listitem {
	padding-bottom:  10px !important;
	
}

.listitem_number p {
	text-indent: -1em;
	margin-left: 1em;
	margin-top: 0px;
	margin-bottom: 0px;
}

.listitem_number_double p {
	text-indent: -1.5em;
	margin-left: 1.5em;
	margin-top: 0px;
	margin-bottom: 0px;
}

.listscroll {
	overflow-y: auto !important;
	overflow-x: hidden !important;
	
}

/* gallery popups */


.slide-captions h3, .textframe h3, #socialbuttons h3  {

	font-family: "PT Serif", serif !important;
	font-size: 18pt;
	padding-bottom: 0px;
	font-weight: 700;
			}
			
.slide-captions {
	font-size: 12pt;
	line-height: 25px;
	font-weight: 400;

			}


.slide-caption li {
	margin-left: 50px;
			}

.slide-caption ul {
	margin-top: 0px;
			}

.textframe p {
	line-height: 1.5em; }
	/*padding: 0px 20px 20px 20px;
}

.textframe h3 {
	padding-left: 20px;
}*/

.textframe {
	background-color: #ffffff !important;
}




/* social media buttons */

				
#socialbuttons {
	padding-left: 30px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
	background-color: transparent;	 /*change this to the right color*/
	margin-left: 0px;
	margin-right: auto;
	width: 220px;
}

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

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


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

#videoframe {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
#videoframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hidden {
	visibility: hidden !important;
}




