@charset "utf-8";
/* CSS Document */
* {
  	box-sizing: border-box;
}

.row::after {
  	content: "";
  	clear: both;
  	display: table;
}

html {
  	font-family: "Lucida Sans", sans-serif;
}

.header {
  	background-color: #1b968c;
  	color: #ffffff;
  	padding: 15px;
}

.menu ul {
  	list-style-type: none;
  	margin: 0;
  	padding: 0;
}

.menu li {
  	padding: 8px;
  	margin-bottom: 7px;
  	background-color: #1b968c;
  	color: #ffffff;
  	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  	background-color: #04857a;
}

.aside {
  	background-color: #1b968c;
  	padding: 15px;
  	color: #ffffff;
  	text-align: center;
  	font-size: 14px;
  	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

body {
    display: flex;
    height: auto;
    margin: 0px;
	background: #0dbea7;
	flex-direction: column;
	flex-wrap: wrap;
    }

footer {
	width: auto;
	height: 150px;
}
.footer {
  	background: white;
  	padding: 10px;
	text-align: center;
}

footer button {
    margin: 10 20px;
    padding: 10px 20px;
    font-size: 16px;
	display: inline-block;
	align-items: center;
	justify-content: center;
    }

.button-group {
    justify-content: space-evenly;
	display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    }

.container {
    display: flex;
    justify-content: center;
    align-items: center;
	height: 100%;
	width: 100%;
    }

.back-button {
	background-color: #1b968c;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    font-size: 35px;
    margin: 1vw 1vw;
    cursor: pointer;
    border-radius: 5px;
    height: 100px;
	width: 125px;
	vertical-align: middle;
	justify-content: center;
}

.home-button {
	background-color: #1b968c;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    font-size: 35px;
    margin: 1vw 1vw;
    cursor: pointer;
    border-radius: 5px;
    height: 100px;
	width: 125px;
	vertical-align: middle;
	justify-content: center;
}

.button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1vw;
	align-content: center;
	align-items: center;
	flex-direction: row;
}
    
.button-container a {
    margin: 1vw;
    /*flex: 1 1 auto;*/
}
	
.button-container a:not(.backbutton):not(.home-button) button {
    background-color: #1b968c;
    color: white;
    padding: 1vw 1vw;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 5vw;
    margin: 0px 0px;
    cursor: pointer;
    border-radius: 25px;
    height: 150px;
	width: 500px;
}

.room-button {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2vw;
	background-color: #1b968c;
    color: #eee7d6;
    padding: 1vw 2vw;
    border: none;
    text-align: center;
    text-decoration: none;
    font-size: 10vw;
    margin: 0px 0px;
    cursor: pointer;
    border-radius: 25px;
    height: auto;
	min-height: 75px;
	width: 100%;
	min-width: 250px;
}

h1 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 20px;
	color: white;
}
		
h2 {
	text-align: center;
    font-size: 24px;
    margin-bottom: 10px;
	margin-top: 5px;
	color: white;
}
	
table {
	text-align: center;
} 
	
.banner {
    background-color: #1b968c;
    color: white;
	font-size: 40px;
	vertical-align: middle;
	width: 100%;
	text-align: center;
	padding: 10px;
}
	
.banner img {
    margin: 0px auto;
	font-size: 14px;
	background: #1b968c;
	padding: 10px;
	display: block;
}

.banner h1 {
	margin: 0.5vw;
	color: white;
	font-size: 60px;
}

.iframe-container {
            /*pointer-events: none;*/
			position: relative;
            left: 0px;
			top: 0px;
			width: 100%;
            height: 1000px;
			margin-top: 0px;
            overflow: hidden;
        }

.iframe-container iframe {
			position: absolute;
            width: 100%; /* Adjust this value as needed to show the desired portion */
            height: 100%; /* Adjust this value as needed to show the desired portion */
            top: 0; /* Adjust this value to position the desired portion */
            left: 0; /* Adjust this value to position the desired portion */
            transform: translateX(0%) translateY(-38%); /* Adjust this value to move the content horizontally and vertically*/
            border: none;
}

#barworkshop {
	display: none;
}
#section-820am {
	display: none;
}
#section-830am {
	display: none;
}
#section-845am {
	display: none;
}
#section-9am {
	display: none;
}
#section-910am {
	display: none;
}
#section-925am {
	display: none;
}
#section-930am {
	display: none;
}
#section-10am {
	display: none;
}
#section-1010am {
	display: none;
}
#section-1030am {
	display: none;
}
#section-1035am {
	display: none;
}
#section-11am {
	display: none;
}
#section-noon {
	display: none;
}
#section-1pm {
	display: none;
}
#section-115pm {
	display: none;
}
#section-130pm {
	display: none;
}
#section-2pm {
	display: none;
}
#section-3pm {
	display: none;
}
#section-330pm {
	display: none;
}
#section-4pm {
	display: none;
}
#section-430pm {
	display: none;
}
#section-445pm {
	display: none;
}
#section-5pm {
	display: none;
}
#section-515pm {
	display: none;
}
#section-530pm {
	display: none;
}
#section-610pm {
	display: none;
}
#nomoreclasses {
	display: none;
}

.container {
	margin-left: 475px;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

:root {
	background: #0dbea7;
}

.navbar {
	background: #0dbea7;
    border-radius: 0;
    border: none;
    box-shadow: none;
    display: none;
}
/* @media only screen and (orientation:landscape) and (max-width:1200px){
	body {
		transform: rotate(-90deg);
	}
}

/* For mobile phones: */
@media only screen and (min-width : 350px){
	.banner h1 {
		font-size: 8vw;
	}
	.banner img {
		max-width: 70%;
	}
	.button-container a:not(.backbutton):not(.home-button) button {
		padding: 5px 10px;
		/*min-width: 300px;
	  	max-width: 610px;
	  	min-height: 150px;
	  	max-height: 250px;*/
	  	font-size: 8vw;
	}
	.button-container a {
      	max-width: 90%;
    }
	.room-button {
		padding: 5px 10px;
		min-width: 300px;
	  	max-width: 610px;
	  	min-height: 150px;
	  	max-height: 250px;
	  	font-size: 8vw;
	}
	.room-button a {
      	max-width: 90%;
	}
}

@media (min-width: 385px){
	.iframe-container iframe {
				transform: translateX(0%) translateY(-36%);
	}
}		
@media (min-width: 460px){
	.iframe-container iframe {
				transform: translateX(0%) translateY(-32%);
	}
}		

@media only screen and (min-width: 615px) {
  /* For tablets: */
	.banner h1 {
		font-size: 6vw;
	}
	.banner img {
		max-width: 50%;
	}
	.button-container a:not(.backbutton):not(.home-button) button {
	  	padding: 5px 10px;
	  	/*min-width: 250px;
	  	max-width: 600px;
	  	min-height: 150px;
	  	max-height: 250px;*/
	  	font-size: 4.5vw;
	}
	.button-container a {
      	max-width: 45%;
    }
	.room-button {
		padding: 5px 10px;
	  	min-width: 250px;
	  	max-width: 600px;
	  	min-height: 150px;
	  	max-height: 250px;
	  	font-size: 4.5vw;
	}
	.room-button a {
      	max-width: 45%;
	}
}

@media only screen and (min-width : 790px ){
  /* For Landscape Tablets: */
	.banner h1 {
	  	font-size: 5vw;
	}
	.banner img {
	  	max-width: 35%;
	}
	.button-container a:not(.backbutton):not(.home-button) button {
	  	padding: 5px 10px;
	  /*	min-width: 300px;
	  	max-width: 500px;
	  	min-height: 100px;
	  	max-height: 250px;*/
	  	font-size: 3.5vw;
	}
	.button-container a {
      	max-width: 45%;
    }	
	.room-button {
		padding: 5px 10px;
	  	min-width: 300px;
	  	max-width: 500px;
	  	min-height: 100px;
	  	max-height: 250px;
	  	font-size: 3.5vw;
	}
	.room-button a {
      	max-width: 45%;
	}
	.iframe-container iframe {
				width: 175%;
				top: -18%;
				left: 0;
				transform: translateX(-26%);
	}
}

@media only screen and (min-width : 950px){
  /* Large devices (laptops/desktops, 950px and up) */
	.banner h1 {
	  	font-size: 4.5vw;
	}
	.banner img {
	  	max-width: 45%;
	}
	h1 {
      	font-size: 4vw;
    }
	h2 {
      	font-size: 3vw;
    } 
	.button-container a:not(.backbutton):not(.home-button) button {
	  	padding: 10px 20px;
	  	/*min-width: 375px;
	  	max-width: 1000px;
	  	min-height: 150px;
	  	max-height: 650px;*/
	  	font-size: 4vw;
	}
	.button-container a {
      	max-width: 45%;
    }
	.room-button {
		padding: 10px 20px;
	  	min-width: 375px;
	  	max-width: 1000px;
	  	min-height: 150px;
	  	max-height: 650px;
	  	font-size: 4vw;
	}
	.room-button a {
      	max-width: 45%;
	}
} 

@media only screen and (min-width : 1200px ){
  /* Large devices (large laptops/desktops, 1250px and up) */
	.banner h1 {
	  	font-size: 3.5vw;
	}
	.banner img {
	  	max-width: 45%;
	}
	.button-container a:not(.backbutton):not(.home-button) button {
	  	padding: 10px 20px;
	  	/*min-width: 350px;
	  	max-width: 600px;
	  	min-height: 150px;
	  	max-height: 450px;*/
	  	font-size: 3vw;
	}
	/*.button-container a {
      	max-width: 40%;
    }*/
	.room-button {
		padding: 10px 20px;
	  	min-width: 350px;
	  	max-width: 600px;
	  	min-height: 150px;
	  	max-height: 450px;
	  	font-size: 3vw;
	}
	.room-button a {
      	max-width: 40%;
	}
	.container {
		width: 2000px;
	}
} 	
@media only screen and (min-width: 1500px) {
  /* Large devices (large laptops/desktops, 1500px and up) */
	.banner h1 {
	  	font-size: 56px;
	}
	.banner img {
	  	max-width: 40%;
	}
	.button-container a:not(.backbutton):not(.home-button) button {
	  	padding: 10px 20px;
	  	width: 500px;
	  	height: 150px;
	  	font-size: 2vw;
	}
	/*.button-container a {
      	max-width: 40%;
    }*/
	.room-button {
		padding: 10px 20px;
	  	min-width: 400px;
	  	max-width: 800px;
	  	min-height: 150px;
	  	max-height: 450px;
	  	font-size: 3vw;
	}
	.room-button a {
      	max-width: 40%;
	}
} 		
	
@media only screen and (min-width: 1800px) {
  /* Large devices (large laptops/desktops, 1800px and up) */
	.banner h1 {
	  	font-size: 60px;
	}
	.banner img {
	  	min-width: 50%;
		max-width: 100%;
	}
	.button-container a:not(.backbutton):not(.home-button) button {
	  	padding: 10px 20px;
	  	width: 470px;
	  	height: 150px;
	  	font-size: 32px;
	}
	/*.button-container a {
      	max-width: 40%;
    }*/
	.room-button {
		padding: 10px 20px;
	  	min-width: 550px;
	  	max-width: 1000px;
	  	min-height: 150px;
	  	max-height: 600px;
	  	font-size: 2vw;
	}
	h1 {
		font-size: 50px;
	}
	h2 {
		font-size: 40px;
	}
}