@import 'css/bootstrap.css';
/*
Theme Name: Central Square Theater
Theme URI: http://wordpress.org/themes/twentyfourteen
Author: the WordPress team
Author URI: http://central square theater.org/
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.
Version: 1.0
License: GNU General Public License v2 or later
License URI: 
Tags:
Text Domain: 

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/**
 * Table of Contents:
 #  Colors
 * 1.0 - Layout
 	1.1 - Home Content Grid
 * 2.0 - Patterns
 		2.1 - Typography
 		2.2 - Ads 
 		2.3 - Buttons
 		2.4 - Gallery
 		2.5 - Widgets
 		2.6 - Carousel
 		2.7 - Upcoming Dates Module
 * 3.0 - Header
 		3.1 - Logo
 		3.2 - Navigation
 * 4.0 - Footer
 * 5.0 - Page Specific
 		5.1 - About Company

 		5.5 - Shows & Events
 * -----------------------------------------------------------------------------
 */

/*
* Colors

	Gray Border     #f9f9f9    rgba(199,150,44, )
	Gold            #c7962c
	Content Black   #3f3f3f
	Blue			#727eb3
	dark blue		#212C61

*/

/*
* 1.0 - Layout
*/

#page{

}

	#masthead{
		border-bottom: 1px solid #f9f9f9;
	}

		/*Main content area*/
		.main-content{
			padding-top: 40px;
}
			.home .main-content{
				padding-top: 0;
			}
				.home .site-content{
					min-height: 800px;
					position: relative;
				}
					.home .site-content .content-block{
						padding-top: 40px;
					}
						.home .site-content .content-block < div{
							height: 325px;
						}

						.content-block img{
							height: auto;
							max-width: 100%;
						}

			.media-gallery{
				background: #f6f6f6;
				padding: 20px;
			}
				.media-gallery a{
					color: #3f3f3f;
					font-size: 16px;
					font-weight: 900;
					margin-bottom: 20px;
				}

				.media-gallery iframe{
					margin: 0 auto;
				}



		/* Sidebars */



		.column-side-callout{
			background: #f6f6f6;
			margin-bottom: 20px;
			padding: 40px 20px;
		}
			.column-side-callout h2{
				color: #3f3f3f;
				font-size: 16px;
				font-weight: 900;
				line-height: 1.3;
				margin-bottom: 20px;
			}

			.column-side-callout ul{
				list-style: none;
				margin: 0;
				padding: 0;
			}
				.column-side-callout li{
					margin-bottom: 10px;
				}
					.column-side-callout li a{
						color: #3f3f3f;
						font-weight: 100;
						
					}

		#show-dates-list li{
			display: none;
		}

		aside div{
			margin-bottom: 20px;
		}

			aside h3{
				font-size: 16px;
				font-weight: 900;
			}

		/* Sibling Nav for generic screens */
			.pagenav{
				list-style: none;
			}
			.nav-sibling{
				padding-top: 40px;
			}
				.nav-sibling ul{
					border-top: 1px solid #f9f9f9;
					margin: 0 0 0 0;
					list-style: none;
					padding: 0 0 0 0;
				}
					.nav-sibling a{
						border-bottom: 1px solid #f9f9f9;
						color: #3f3f3f;
						font-size: 13px;
						display: block;
						padding: 10px;
					}
						.nav-sibling a:hover,
						.nav-sibling a:focus{
							color: #c7962c;
						}
			.nav-sibling li > ul a{
				padding-left: 20px;
			}
				.nav-sibling li > ul ul{
					border-top: 0;
				}
					.nav-sibling li > ul ul a{
						padding-left: 40px;
					}
			.children .children{ display: none;}

		/* Content Sidebar for generic screens */
		.sidebar-content{
			padding-top: 30px;
		}
			.sidebar-content h1,
			.sidebar-content h2,
			.sidebar-content h3{
				font-size: 20px;
			}
			


		/*
			1.1 - Home Screen Grid
		*/

			.gridster-image-wrap{
				display: none;
			}

			.gs_w{}

				.gs_w h1{
					font-size: 16px;
				}

			[data-sizey="1"]{
				height: auto !important;
			}





/*
* 2.0 - Patterns
*/
	a{
		color: #c7962c;
	}

	

	/* Reviews */
	.reviews{}
		.review{
			margin-bottom: 20px;
		}
			blockquote{
				border: 0;
				margin: 0;
				padding: 0;
				font-size: 16px;
			}
				.quote-left{
					margin-left: -5px;
				}

			.review a{
				color: #3f3f3f;
				font-style: italic;
				font-size: 16px;
			}


	/* Cast name headshots */

		.people {
			display: block; 
			min-height: 180px;
			margin-bottom: 20px;
		}
			.people ul{
				list-style: none;
				margin: 0;
				padding: 0;
			}

		.cast{
			float: left;
			list-style: none;
			margin: 0 0 20px 0;
			min-height: 100px;
			padding: 20px 0 0 110px;
			position: relative;
		}

			.production .cast{
				padding-left :0;
				padding-top: 0;
				min-height: 0;
			}

			.cast a{
				color: #3f3f3f;
				font-size: 16px;
			}
			.cast .attachment-headshot-small{
				border-radius: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}

			.cast .headshot-placeholder{
				background: #e6e6e6;
				border-radius: 100%;
				position: absolute;
				height: 95px;
				width: 99px;
				top: 0;
				left: 0;
			}
				.cast .headshot-placeholder .genericon-user{
					color: #9f9f9f;
					font-size: 90px;
					text-align: center;
					line-height: 95px;
					width: 99px;
				}

			.role-type{
				display: block;
				text-transform: uppercase;
				font-size: 11px;
			}

			.role-name{
				font-style: italic;
				display: block;
			}

	

	/*
	* 2.1 - Typography
	*/
		body,
		h1,h2,h3,h4,h5,
		.nav-menu a,
		p,
		.button,
		.header,
		.column-side-callout h2,
		.media-gallery a,
		.search-submit,
		.upcoming-events a
		{
			font-family: 'Merriweather', serif;
}
h3, .h3 {
	clear:left;
}

			.jp-carousel-titleanddesc .jp-carousel-titleanddesc-title
			{
				font-family: 'Merriweather', serif !important;
			}

		.column-side-callout li a,
		.section-subheader,
		.upcoming-events a span,
		p.wp-caption-text
		{
			font-family: 'Source Sans Pro', sans-serif;
		}

		p{
			color: #3f3f3f;
			font-size: 16px;
			line-height: 24px;
		}
			.main-content p{
				margin-bottom: 24px;
			}

			.main-content li{
				font-size: 16px;
			}

		.header{
			font-weight: 900;
			
		}
			.header.large{
				font-size: 36px;
				margin: 50px 0 15px;
			}

			.entry-header .header{
				color: #212C61;
				margin-top: 0;
			}

		.section-subheader{
			color: #3f3f3f;
			font-size: 14px;
			font-weight: 100;
		}

	
	/*
	* 2.2 - Buttons
	*/

		.button,
		.search-submit
		{
			background: rgb(199,150,44);
			background: rgba(199,150,44, 0.8);
			border: 0;
			border-bottom: 5px solid #845e1d;
			color: #fff;
			display: block;
			font-size: 12px;
			font-weight: 100;
			height: 50px;
			line-height: 50px;
			margin-bottom: 10px;
			text-decoration: none;
			text-align: center;
			white-space: nowrap;
		}
			.upcoming-dates .button{
				color: #fff;
				font-size: 12px;
				font-weight: normal;
				margin-top: 15px;
			}

		/* Search*/
			.search-field,	
			.search-submit{
				width: 100%;
			}

			.search-form .screen-reader-text{
				display: block;
				text-indent: -99999px;
			}

	/*
	* 2.3 - Ads
	*/
		.banner-ad{
			padding: 10px;
		}
			.banner-ad.gold{
				background: #c7962c;
			}
				.banner-ad.gold .button{
					background: #c89932;
				}


			.banner-ad.blue{
				background: #727eb3;
			}
			.banner-ad .title,
			.banner-ad .title a,
			.banner-ad .title a p{
				color: #fff;
				font-size: 24px;
				font-weight: 500;
				line-height: 1.5;
				text-align: center;
			}

		.bottom-ad{
			clear: both;
			float: none;
			margin: 20px auto;
			/*width: 50%;*/
		}

	/*
	* 2.4 - Gallery
	*/		

		.gallery-size-thumbnail{
			background: #f6f6f6;
			padding: 20px;
		}
			.gallery-size-thumbnail dl,
			.gallery-size-thumbnail dl dd{
				display: none;
			}
				.gallery-size-thumbnail dl:first-child{
					display: block;
				}

		.gallery-item{
			float: left;
			margin-right: 10px;
		}

			.gallery-item img{
				height: auto;
				max-width: 100%;
				width: auto;
			}

	/*
		2.5 - Related Posts sidebar (content sidebar)
	*/

		.dpe-flexible-posts{
			border-top: 1px solid #f9f9f9;
			margin: 0;
			list-style: none;
			padding: 0;
		}

			.dpe-flexible-posts li{
				border-bottom: 1px solid #f9f9f9;
				padding: 10px 0;
			}

	/*
		2.6 - Jetpack Carousel
	*/
		.jp-carousel-overlay{
			background: rgb(255, 255, 255);
			background: rgba(255, 255, 255, 0.8);
		}

			/* Meta Data & Comments */
			#jp-carousel-comment-form-container,
			.jp-carousel-image-meta{
				display: none !important;
			}

			.jp-carousel-left-column-wrapper{
				width: 100% !important;
			}


	/*
		2.7 - Upcoming Dates
	*/
		.upcoming-dates{
			background: #f6f6f6;
			padding: 20px;
		}

			.home .upcoming-dates{
				/*position: absolute;
				top: 0;
				right: 0;
				z-index: 500;*/
			}

			/*.home .content-block div{display: none;}*/

			.upcoming-dates ul{
				list-style: none;
				margin: 0;
				padding: 0;
			}
				.upcoming-dates ul li{
					margin-bottom: 10px;
				}


			.upcoming-dates a{
				color: #3f3f3f;
				display: block;
				font-size: 13px;
				font-weight: 100;
			}
				.upcoming-dates a span{
					font-size: 15px;
					display: block;
					margin-bottom: 0px;
				}
/*
* 3.0 - Header
*/

	.brand{
		float: left;
	}
	/*
	* 3.1 - Logo
	*/
	.site-title{
		float: left;
		margin: 20px 0 0;
	}
		.site-title a{
			background: url(https://www.centralsquaretheater.org/wp-content/uploads/2023/03/cst-purple-logo-2023-100px.png) no-repeat 0 0;
			display: block;
			height: 150px;
			float: left;
			margin: 0 0 15px 0;
			text-indent: -99999px;
			width: 150px;
		}

		/* Tagline */
			.cst_tagline{
				float: left;
				font-size: 16px;
				font-style: italic;
				line-height: 1.5;
				margin: 75px 0 0 20px;
				width: 225px;
				text-shadow:none;
			}

	/*
	* 3.2 - Navigation
	*/

	.menu-toggle{display: none;}/*mobile switcher*/
	.skip-link{
		display: none;
		text-indent: -999999px;
	}

	.nav-menu{
		float: right;
		list-style: none;
		padding-top: 45px;
	}
		.nav-menu li{
			display: inline;
			float: left;
			position: relative;
		}
			.nav-menu a{
				border: 1px solid transparent;
				color: #3f3f3f;
				height: 96px;
				font-size: 13px;
				line-height: 96px;
				padding: 10px 10px;
				white-space: nowrap;
				width: 100%;
			}
				.nav-menu a:hover,
				.nav-menu a:focus{
					border: 1px solid #f9f9f9;
					color: #c7962c;
				}

			.current-menu-item a{
				color: #c7962c;
			}

			.nav-menu li ul{
				background: #fff;
				border: 1px solid #f9f9f9;
				width: auto;
				position: absolute;
				margin: 0;
				padding: 0;
				top: 66px;
				left: -999999px;
				z-index: 5000;
			}

			.nav-menu li:hover ul{
				left: 0;
			}

				.sub-menu li{
					border-bottom: 1px solid #f9f9f9;
					width: 100%;
				}

					.sub-menu li a{
						color: #3f3f3f;
						display: block;
						height: auto;
						line-height: 16px;
						text-align: left;
						padding: 10px 25px;
						white-space: nowrap;
					}
						.sub-menu li a:hover,
						.sub-menu li a:focus{
							border: 1px solid transparent;
						}

	/* 
	* 3.3 - Banners
	*/

		/*Single Show Screens*/
		.banner-short{
			background-color: #ffffff;
			background-repeat: no-repeat;
			height: auto;
			max-width: 100%;
			width: 100%;
		}
			.banner-short:hover{
				cursor: pointer;
			}

			.banner-short .header,
			.banner-short .header a,
			.banner-short .header a:hover
			{
				color: #fff;
				text-shadow: 0 2px 20px #000;
			}

			.banner-short .container{
				padding-bottom: 100px;
				position: relative;
			}

			.show-run-dates{
				color: #fff;
				font-size: 20px;
				font-weight: 100;
			}
				.banner-short .show-run-dates{
					text-shadow: 0 2px 20px #000;
				}

			.excerpt{
				color: #fff;
				display: block;
				float: none;
				margin: 20px 0 40px;
				padding: 0;
				font-size: 24px;
				font-style: italic;
				font-weight: 100;
				line-height: 32px;
				text-shadow: 0 2px 20px #000;
			}
			
				.excerpt p{
					color: #fff;
					font-size: 24px;
					font-style: italic;
					font-weight: 100;
					line-height: 32px;
				}


			.thumbnail-caption{
				background: rgb(0,0,0);
				background: rgba(0,0,0,0.5);
				color: #dddddd;
				font-size: 12px;
				padding: 5px;
				position: absolute;
				bottom: -50px;
				left: 15px;
			}

			.residence{
				color: #fff;
				clear: both;
				display: block;
				float: left;
				font-size: 12px;
				margin-top: 15px;
			}

			.buy-ticket-btn{
				margin-right: 15px;
			}
				.buy-ticket-btn:hover{

					color: #fff;
				}

		.cycle-pager{}
			.cycle-pager .thumb{
				border-top: 5px solid #f0f;
				padding: 0;
			}
				.cycle-pager .thumb.cycle-pager-active{
					border-color: #0ff;
				}
			.cycle-pager img{
				max-width: 100%;
				width: 100%;
			}


		/* Currently Showing Text Area */
		.currently-showing{
			background: #2f2d2d;
			padding: 32px 0 64px;
		}
			.currently-showing .section-subheader{
				color: #fff;
				margin-left: 15px;
			}

			.currently-showing img{
				height: auto;
				max-width: 100%;
			}

			.show-summary{
				color: #fff;
				margin-top: 5px;
			}
				.show-summary h2 a{
					color: #fff;
					font-size: 24px;
				}

				.show-summary .show-run-dates,
				.season .show-run-dates {
					display: block;
					font-size: 16px;
					margin-bottom: 16px;
				}
					.season .show-run-dates {
						color: #3f3f3f;
					}

					.list-of-shows .show-run-dates{
						text-shadow: none;
					}

				.season .wp-post-image{
					margin-bottom: 20px;
				}

				.show-summary p{
					color: #fff;
				}

	/*
	* 4.0 - Footer
	*/

		/* Global Footer*/
		.site-footer{
			background: #3f3f3f;
			color: #fff;
			min-height: 425px;
			padding: 20px 0;
		}

		.site-footer ul{
			list-style: none;
			margin: 0;
			padding: 0;
		}

			.site-footer ul a{
				color: #fff;
			}

			.where-to-park{
				display: block;
				margin-top: 15px;
			}

			.site-footer .section-subheader{
				color: #fff;
			}

			.site-footer label{
				display: none;
			}

			.site-footer .widget-title{
				display: none;
			}

			.site-footer input.button{
				margin-top: 10px;
				width: 100%;
				max-width: 327px;
			}

		.site-footer .fluid-wrapper{margin-top: 20px;}

		.fluid-wrapper {
		    position: relative;
		    padding-bottom: 56.25%; /* 16:9 */
		    height: 0;
		}
		.fluid-wrapper iframe {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		        border: none;
		}

	/*
	* 5.0 - Page Specific
	*/

		/* 
		* 5.1 Show Series
		*/


			/* Header */

				/* Producer */
				.producer{
					color: #fff;
					clear: both;
					display: block; 
					position: absolute;
					text-indent: -99999px;
					bottom: 10px;
					left: 15px;
					width: 200px;
				}

					.producer span:first-child{
						margin-right: 10px;
					}
					.producer span.nora-theater{
						background: url(images/logo-nora.png) no-repeat 0 0;
						float: left;
						display: block;
						height: 80px;
						width: 88px;
					}
					.producer span.underground-theater{
						background: url(images/logo-urt.png) no-repeat 0 0;
						float: left;
						display: block;
						height: 80px;
						width: 87px;
					}


			.people{
				margin: 0;
				padding: 0;
			}

		/*
		* 5.2 - People
		*/
			.single-people{}
				.single-people .meta-header{
					font-style: italic;
				}
				.single-people h2.header {
					color: #212c5d;
					margin-top: 5px;
					margin-bottom: 30px;
				}

			.attachment-headshot-large{
				border-radius: 100%;
				margin-top: 10px;
			}

			.staff-contact{
				margin: 20px 0;
			}
				.staff-contact a{
					color: #3f3f3f;
					display: block;
				}

			.appeared-in{}
				.appeared-in ul{
					list-style: none;
					margin: 0;
					padding: 0;
				}
					.appeared-in ul li{
						margin-bottom: 20px;
						padding-left: 0;
					}
						.appeared-in ul li:nth-child(odd){
							/*margin-right: 10px;*/
						}

					.appeared-in img{
						height: auto;
						margin-bottom: 5px;
						max-width: 100%;
					}

				.appeared-in a{
					
				}

				.appeared-in .show-run-dates{
					color: #3f3f3f;
					display: block;
					font-size: 16px;
					font-style: italic;
				}

		/*
			5.3 About Company
		*/

				.theater-shows{
					margin-left: -15px;
				}
					.theater-shows div(even){
						padding-left: 0;
					}

					.main-content article div.wp-caption{
						float: left;
					}

					p.wp-caption-text{
						font-size: 8px;
						margin-top: 5px;
					}

					.wp-caption,
					.entry-content img{
						height: auto;
						width: auto;
						max-width: 100%;
					}

		/*
			5.5 - Shows & Events
		*/

			.list-of-shows{
				list-style: none;
				margin: 0;
				padding: 0;
			}
				.list-of-shows li{
					clear: both;
					float: left;
					margin-bottom: 20px;

				}


			.purchase-tickets{
				background: #f6f6f6;
				padding: 15px;
			}
				.purchase-tickets a{
					color: #3f3f3f;
					font-size: 13px;
					margin-bottom: 5px;
					display: block;
					white-space: nowrap;
				}

			.upcoming-shows{
				opacity: 0.5;
			}
				.upcoming-shows:hover{
					opacity: 1;
				}

				.current-shows .show-run-dates,
				.upcoming-shows .show-run-dates{
					color: #3f3f3f;
					font-size: 16px;
				}


		#tag-list{
			list-style: none;
			margin: 20px 15px;
			padding: 0;
		}
			#tag-list li{
				float: left; 
				margin-right: 10px;
			}
			#tag-list a{
				background: #c7962c;
				color: #fff;
				display: block;
				padding: 5px 15px;
				text-transform: uppercase;
			}

				#tag-list a.education:hover{
					background: purple;
				}

				#tag-list a.show.series:hover{
					background: orange;
				}

				#tag-list a.pre.post-show:hover{
					background: red;
				}

		#calendar_list{ 
			clear: both;
			padding-top: 10px;
		}

			#calendar_list ul{
				list-style: none;
				margin: 0;
				padding: 0;
			}
				#calendar_list li{
					border-bottom: 1px solid rgba(0,0,0,0.1);
					position: relative;
					padding-bottom: 10px;
					/*padding-left: 235px;*/
					min-height: 110px;
					margin-bottom: 10px;
					min-width: 480px;
				}
					#calendar_list li.revision{
						display: none !important;
					}

					#calendar_list li.show-series{
						background: #e5e4e4;
						padding-top: 14px;
						margin-top: -10px;
					}


				#calendar_list img{
					position: absolute;
					top: 0;
					left: 0;
					border-top: 5px solid;
				}
					#calendar_list .show-series img,
					#calendar_list .show-series .buy-tickets
					{
						border-color: orange;
						color: orange;
					}

					#calendar_list .education img,
					#calendar_list .education .buy-tickets{
						border-color: purple;
						color: purple;
					}

					#calendar_list .pre-post-show img,
					#calendar_list .pre-post-show .buy-tickets{
						border-color: red;
						color: red;
					}

				#calendar_list .event-info{
					/*float: left;*/
					text-align: center;
				}
				#calendar_list li h5 a{
					
					font-size: 24px;
					display: block;
				}

				#calendar_list li .buy-tickets{
					clear: both;
					display: block;
					margin-top: 5px;
					width: 100%;
				}

				#calendar_list h2{
					background: rgba(0,0,0,0.1);
					color: #8c8c8c;
					text-align: center;
					padding: 15px 0;
					margin-bottom: 15px;
				}

		.press-kit-page ul{
			margin: 0;
			list-style: none;
			padding: 0;
		}


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

	

	@media(min-width: 768px) and (max-width: 1200px) {
		
		/* Brand */
			.brand{
				float: none;
				margin: 0 auto 10px;
				max-width: 420px;
				width: 100%;
			}
		/* Navigation */
		.nav-menu{
			
			clear: both;
			float: none;
			height: 30px;
			margin: 10px auto;
			padding: 0;
			width: 100%;
		}

			.nav-menu > li{
				display: inline-block;
				width: 16%;
			}

				.nav-menu > li > a{
					display: block;
					height: 30px;
					line-height: 30px;
					padding: 0;
					text-align: center;
					width: 100%;
				}
			.nav-menu li ul{
				top: 30px;
			}
	
	} /* End @media(min-width: 768px) and (max-width: 991px) */



	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		
		.nav-sibling{
			display: none;
		}



	}/*@media only screen and (max-width: 959px) {*/



	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 994px) {

		.banner-short{
			background-position: 50% 0 !important;
		}
			.banner-short .header.large{
				margin-top: 10px;
			}

			.banner-short .button{
				margin-top: 10px;
				width: 25%;
			}



	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {


	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.banner-short .button{
			width: 25%;
		}

	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		#sthoverbuttons{
			display: none;
		}

		.brand{
			margin-bottom: 15px;
		}

		.banner-short{
			background-color: transparent !important;
			background-position: 0 10px !important;
			padding-top: 130px;
			padding-bottom: 550px;
		}

		.banner-short .header, .banner-short .header a, .banner-short .header a:hover,
		.banner-short .show-run-dates,
		.banner-short .excerpt,
		.banner-short .residence
		{
			color: #212C61;
			text-shadow: none;

		}

		.banner-short .buy-ticket-btn{
			margin-right: 0;
		}

		.column-side-callout{
			clear: both;
			padding-left: 0;
		}

	}

img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

ol.numbers li{
    list-style-type: decimal;
    margin-left: 10px
}

.buttonx {
  background-color: #212C61; /* Blue */
  border: none;
  color: #ffffff;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 22px;
  font-weight:bold;
  margin: 4px 2px;
  cursor: pointer;
}

.buttonx:hover {
  background-color: #c7962c; /* Gold */
  color: #212C61;
}