@charset "utf-8";
/* Workshop Styles */

.workshop_list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
	padding-bottom: 50px;
}
.workshop_list .workshop_result {
	width: 100%;
	height: 100%;
	max-width: 500px;
	max-height: 500px;
	text-align:center;
	position: relative;
}
.workshop_list .workshop_result .ws_title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 105%;
	font-weight: bold;
	position: absolute;
	top:97%;
	left:50%;
	transform:translate(-50%, -97%);
	display: block;
	width: 100%;
	max-width: 300px;
	background-color: rgb(255,255,255);
	background-color: rgba(255,255,255,0.85);
	border: 1px solid #666666;
	border-radius: 10px;
	padding: 7px 0px;
}
.workshop_list .workshop_result a {
	text-decoration: none;
	color: #333333;
	transition: 0.3s;
}

.workshop_list .workshop_result img {
	border-radius: 10px;
}

.workshop_list .workshop_result a:hover {
	opacity: 0.8;
}

.workshop_list .workshop_result .ws_wrap {
	display:none;
}
/* The Modal (background) */
.ex_modal {
	transition: 0.3s;
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1001; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	/*background-color: rgba(0,0,0,0.9);*/
	/*padding-top: 50px;*/
}

body.modal-open {
    overflow: hidden;
    position: fixed;
}
#ws_caption {
	display: block;
	text-align: left;
	color: #36413F;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	padding-bottom: 10px;
}
.mo_title {
	display: block;
	font-size: 160%;
	color: #2D354A;
	padding-top: 10px;
	padding-bottom: 5px;
	font-weight: bold;
	font-variant: small-caps;
}
.ws_date, .ws_fee, .ws_skilldetail {
	display: block;
	font-size: 110%;
	color: #2D354A;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 15px;
}
.ws_fee em {
	font-style: italic;
	color: #555555;
	font-size: 90%;
}
.description {
	color: #2E313F;
	padding-top: 5px;
	font-size: 110%;
}
.ws_skill {
	display: block;
	font-size: 120%;
	color: #8B3636;
	padding-top: 10px;
	padding-bottom: 10px;
	font-weight: bold;
	font-variant: small-caps;
}
.instructor {
	display: block;
	font-size: 120%;
	font-weight: bold;
	color: #325861;
	padding-top: 10px;
	padding-bottom: 10px;
	font-variant: small-caps;
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}

.close:hover, .close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
.backList {
	display: block;
	text-align: left;
	color: #000000;
	font-size: 90%;
	font-weight: bold;
}

.backList:hover, .backList:focus {
  color: #111111;
  text-decoration: none;
  cursor: pointer;
}
.slideshow {
	text-align: center;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
	grid-gap: 20px;
	padding-bottom: 50px;
	margin-right: auto;
	margin-left: auto;
}
.slideshow img {
	margin-right: auto;
	margin-left: auto;
	border-radius: 10px;
}
main article {
	padding: 0px 25px 5px;
	overflow-wrap: break-word;
}
.insBio {
	padding-bottom: 15px;
}
.popPage {
	border-radius: 20px;
	margin: 5px auto;
	padding: 15px 50px;
	max-width: 900px;
	background: #E4E0DE;
}
#myModal  .allButton, article .allButton {
	color: #FFFFFF;
	font-size: 120%;
	padding: 10px 40px;
}
.reason {
	font-size: 120%;
	color: #684646;
	font-weight: bold;
	font-variant: small-caps;
}
.otherdates {
	font-size: 110%;
	font-weight: bold;
	font-variant: small-caps;
}
@media (max-width: 600px){
	.workshop_list {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 450px){
	.workshop_list {
		grid-template-columns: 1fr;
	}
}