* { border: 0; margin: 0; padding: 0; }

	body { background-size: 100%; font-family: 'Noto Serif', serif; text-align: center;  }

	hr { border-top: 1px solid #333; }

	div.inner { display: inline-block; margin: 0 auto; max-width: 1000px; width: 90%; }


/* Structure */

	#frame { margin: 0px auto; width: 100%; }


/* Top */

	#banner { display: inline-block; vertical-align: bottom; width: 100%; }
	#banner img { display: block; width: 100%; }

	#nav { background: #671120; display: inline-block; padding: 10px 0; text-align: center; width: 100%;  }
	#nav ul { display: inline-block; }
	#nav ul li { display: inline-block; margin-left: 8px; padding-left: 8px; }
	#nav ul li:last-child { border-right: 0; }
	#nav ul li:first-child { margin-left: 0; padding-left: 0; }
	#nav ul li a { color: #DCD5CF; text-decoration: none; }
	#nav ul li a:hover { color: white; }


		div.porter { display: inline-block; margin: 0 25px; vertical-align: top; width: 25%; }
		div.porter img { vertical-align: top; max-width: 100%; }
		div.porter a { color: #671120; text-decoration: none; }


/* Ticker */

	#ticker { background: #628533; display: inline-block; padding: 10px 0; text-align: center; width: 100%; }
	#ticker a { color: white; }


/* Slideshow & Video */

	#slides { background: #E7E4E0; width: 100%; }
	#slides img { width: 100%; }
	#slides ul { list-style: none; }
	#slides ul li img { display: block; }

	#video { background: #E7E4E0; height: 0; padding-bottom: 35%; overflow: hidden; width: 100%; }
	video { width: 100%;  }


/* Middle */

	#main { background: #DCD5CF; padding: 30px 0; width: 100%; }
	#main div.porter { margin: 0 0; width: 25%; }
	
	@media screen and (max-width: 800px)
	{
		#main div.porter { margin: 0 0; width: 50%; }	
	}

	#content { background: #DCD5CF; padding: 30px 0; width: 100%; }

	#intro { box-sizing: border-box; color: #67101F; padding: 15px; width: 100%; }
	#intro h1 { font-size: 1.5em; margin-bottom: 15px; }
	#intro p { margin-bottom: 15px; }
	
/* Video on homepage */

	#media { background: #DCD5CF; display: flex; margin: 1em auto; max-width: 1000px; width: 90%; }
	#media div.video { flex: 1 0 65%; }
	#media div.video video { display: block; }
	#media div.text { background: #DCD5CF; box-sizing: border-box; flex: 0 1 40%; line-height: 1.5em; padding: 1em; }
	#media div.text h3, #media div.text p { margin-bottom: 1em; }
	
	@media screen and (max-width: 800px)
	{
		#media { display: block; }	
		#media div.video { width: 100%; }
		#media div.text { width: 100%; }
	}
	
	button {
		  background-color: #4CAF50; /* Green */
		  border: none;
		  color: white;
		  padding: 15px 32px;
		  text-align: center;
		  text-decoration: none;
		  display: inline-block;
		  font-size: 16px;
		}


/* Subnav and internal pages */

		#subnav { background: #67101F; display: inline-block; vertical-align: top; width: 25%; }
		#subnav.green { background: #628533; }
		#subnav.purple { background: #2D0C39; }
		#subnav.pink { background: #EE5FA7; }
		#subnav img { width: 100%; }
		#subnav ul { list-style: none; padding: 15px 0; margin: 0 2.5%; text-align: center;  width: 90%; }
		#subnav ul li { border-bottom: 2px dotted #DCD5CF; padding-bottom: 3px; margin-bottom: 3px; text-align: center;  }
		#subnav ul li a { color: #DCD5CF; text-decoration: none; }


		#text { display: inline-block; padding: 0 2.5%; text-align: center; vertical-align: top; width: 70%; }
		#text h1 { color: #333; font-size: 1.2em; margin-bottom: 15px;  text-transform: uppercase; }
		#text h2 { color: #333; font-size: 1.1em; margin-bottom: 15px;  text-transform: uppercase; }
		#text h3 { color: #333; font-size: 1em; margin-bottom: 15px; }
		#text ul { list-style: none; margin-bottom: 15px; }
		#text p { color: #333; font-size: 1em; margin-bottom: 15px; }
		#text p a { color: #333; }


		div.units { display: inline-block; margin-right: 1%; vertical-align: top; width: 30%;  }
		div.units img { width: 100%; }
		div.units p { font-size: 0.8em !important; }

		div.unit_info { background: white; margin: 10px 0; padding: 10px 5%; text-align: center; }
		div.unit_info h3 { text-decoration: underline; }


/* Gallery */

  #gallery { display: inline-block; margin-top: 0; text-align: center; width: 100%; }
  #pics { display: inline-block; text-align: center; width: 100%; }
  #pics img { display: inline-block; margin: 1px 0.5%; width: 30%; }


/* Bottom */


	#bottom { background: white; padding: 15px 0;  }


	#softplay { background: #5B91D7; text-align: center; padding: 30px 0; width: 100%; }
	#softplay div.porter { margin: 0; padding: 15px 0; width: 100%; }


	#three { background: #DCD5CF; text-align: center; padding: 30px 0; width: 100%; }
	#three img { margin-bottom: 5px; max-width: 100%; }


	div.title { width: 100%; }
	div.title div.inner img { width: 100%; }


	#footer { background: #671120; color: #ffffff; padding: 30px 0; position: relative; text-align: center; }
	#footer div.porter { margin: 0 15px; width: 10%; }
	#footer div.porter img { max-width: 100%; }
	#footer p { color: white; font-size: 0.9em; line-height: 150%; margin-top: 25px; }
	#footer p a { color: white; }


		h2.white { background: white; padding: 4px 0; text-decoration: none; }
		div.porter { margin: 0 0.5%; width: 30%; }


	form { margin-top: 15px; }
	form dl { margin-bottom: 10px; }
	form dl dd { margin-top: 4px; }
	form dl dd input { padding: 4px; }
	form dl dd textarea { height: 150px; width: 80%; }
	
	.video-container
	{
	   position: relative;
	   width: 100%;
	   padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100) */
	   height: 0;
	   overflow: hidden;
	}
	
	.video-container iframe  {
	   position: absolute;
	   top: 0;
	   left: 0;
	   width: 100%;
	   height: 100%;
	}


/* Mobile */


	@media screen and (max-width: 600px) {


		#banner { text-align: center; }
		#banner div.inner { width: 100%; }
		#banner #book { right: 0px; }
		#video { margin: 10px 0; width: 100%; }
		#form { margin: 10px 0; width: 100%; }
		#text__portlets div.inner div { border-right: 0; }
		#subnav { margin-bottom: 10px; width: 100%; }
		#text { width: 90%; }
		#text img { width: 100%; }
		#banner p { margin-top: 10px; position: relative; width: 100%; }
		#footer div.porter { margin: 0 1%; width: 20%; }
		#nav { width: 100%; }
		#nav ul li { margin: 0; padding-left: 0; text-align: center; width: 100%; }


	}


	@media screen and (max-width: 500px) {


		#image__portlets div.inner div { margin: 5px auto; width: 100%; }
		#text__portlets div.inner div { margin: 5px auto; width: 100%; }


	}