/*  New Youth Theatre - Responsive CSS - Feb 2016 - Paul Cobb v1.0  */


body {
	background-color: #fff;
	color: #0b256f;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	text-align: left;
}

p {
	font-size: 1.0em;
	margin: 0 auto;
	margin-top: 0 !important;
}


figure {
	background-attachment: scroll;
	background-clip: border-box;
	background-color: #eee;
	background-image: none;
	background-origin: padding-box;
	background-position: 0 0;
	background-repeat: repeat;
	background-size: auto auto;
	display: block;
	padding: 0.6em;
}

.hq-header {
	margin-top: 0.2em;
}

h1 {
	font-size: 1.3em;
	margin: 1.5em 2% auto;
}

h2 {
	font-size: 1.0em;
	margin: 1.5em 2% auto;
}

h3 {
	font-size: 0.9em;
	margin: 1.5em 2% auto;
}

h4 {
	font-size: 0.8em;
	margin: 1.5em 2% auto;
}

h5 {
	font-size: 0.7em;
}

h6 {
	font-size: 0.6em;
}

em {
	font-style: italic;
}

strong {
	font-weight: bold;
}

.pronounce {
	color: #767703;
}

.intro {
	line-height: 20px;
	list-style-image: none;
	padding: 0.62em 2%;
	text-align: left;
	text-decoration-color: none;
}

.detail {
	color: #0b256f;
	font-size: 1.0em;
	font-weight: normal;
	line-height: 1.25em;
	list-style-image: none;
	padding: 0.62em 2%;
	text-align: left;
	text-decoration-color: none;
}

.list {
	color: #0b256f;
	font-size: 1.0em;
	font-weight: normal;
	line-height: 1.5em;
	list-style-image: none;
	padding: 0.62em 2%;
	text-align: left;
	text-decoration-color: none;
}

.small {
	color: #0b256f;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	font-weight: normal;
	list-style-image: none;
	text-align: center;
	text-decoration: none;
}

.credit {
	color: #0b256f;
	font-size: 0.8em;
	font-style: italic;
	font-weight: normal;
	line-height: 1.25em;
	list-style-image: none;
	padding: 0.62em 2%;
	text-align: left;
	text-decoration-color: none;
}

.notice {
	color: #0b256f;
	font-size: 1.0em;
	font-weight: normal;
	line-height: 1.5em;
	list-style-image: none;
	padding: 0.62em 2%;
	text-align: left;
	text-decoration-color: none;
}

.page {
	margin: 36px auto;
	margin-top: 0;
	max-width: 960px;
	width: 90%;
}

.blog {
	margin: 0 auto;
	width: 100%;
}

a:link,
a:visited,
a:active,
a:hover {
	color: #d84605;

	text-decoration-line: none;
	text-decoration-style: solid;
}

.white-link a:link,
.white-link a:visited,
.white-link a:active,
.white-link a:hover {
	color: #fff;
	display: block;
	text-decoration: none;
	padding-left: 2%;
}

.white-no-link {
	color: #fff;
	display: block;
	text-decoration: none;
	text-align: center;
	padding-left: 2%;
}

.white-nolink-uc {
	color: #fff;
	display: block;

	text-align: center;
	text-transform: uppercase;
	padding-left: 2%;
}

/*li > a {
	float: left;
}
*/
.site-ident {
	background-color: #3298c8;
	color: #fff;
	margin-top: 0.2em;
	padding-bottom: 0.6em;
	padding-top: 0.6em;
	text-align: center;
	width: 100%;
}

.blog .main {
	float: left;
	width: 74%;
}

.home-link-container-first,
.home-link-container-top {
	float: left;
	padding-left: 0;
	padding-right: 1.8%;
	padding-top: 0.5em;
	width: 31.5%;
}

.home-link-container-bottom,
.home-link-container-last {
	float: left;
	padding-left: 0;
	padding-right: 1.8%;
	padding-top: 0.5em;
	width: 31.5%;
}

.home-link-container-last {
	margin-bottom: 0.5em;
}

.blog .other {
	float: right;
	width: 26%;
}

.blog .footer {
	float: right;
	width: 100%;
}

.lede {
	padding: 0.8em 5.33333333%;
}

img {
	max-width: 100%;
}

.photo-background,
img {
	display: inline-block;
}

.slider {
	max-width: 100%;
}

.embed-container {
	clear: both;
	position: relative;
	padding-bottom: 56.25%;
	/* 16:9 */
	height: 0;
	overflow: hidden;
	max-width: 100%;
	margin-top: 0.5em;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.vimeo-container {
	clear: both;
	position: relative;
	padding-bottom: 56.25%;
	/* 16:9 */
	height: 0;
	overflow: hidden;
	max-width: 98%;
	margin-top: 0.5em;
}

.vimeo-container iframe,
.vimeo-container object,
.vimeo-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.vimeo-container-full {
	clear: both;
	position: relative;
	padding-bottom: 56.25%;
	/* 16:9 */
	height: 0;
	overflow: hidden;
	max-width: 98%;
	margin-top: 0.5em;
}

.vimeo-container-full iframe,
.vimeo-container-full object,
.vimeo-container-full embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.image-frame {
	width: 100%;
	display: inline-block;
}

.blog .other .top {
	height: 250px;

}

.blog .other .bottom {
	height: 250px;
}

.slideshow {
	width: 100%;
	height: 100%;
	margin: 0;
	margin-top: 0.5em;
}

.slider {
	width: 100%;
	height: 100%;
	margin: 0;
	margin-top: 0.5em;
}

.non-slider {
	width: 100%;
	height: 100%;
	margin: 0;
	margin-top: 0.5em;
}

ul.lightSlider {
	margin: 0;
	padding-bottom: 0;
}

.slideshow .lightSlider img {
	float: left;
}

.slider .lightSlider img {
	float: right;
}

.full-width-container {
	width: 100%;
	float: left;
	text-align: left;
}

.main-nav-array {
	width: 100%;
	margin: 0;
	float:left;
}


.full-width-divider {
	background-color: #cdcdcd;
	width: 100%;
	height: 1.5em;
	float: left;
	margin-top: 1.5em;
	text-align: left;
}

.classes-background-container {
	background-color: #f1f1f1;
	width: 100%;
	float: left;
	margin-top: 1.5em;
	padding-bottom: 1.0em;
}

.classes-text-container {
	width: 65%;
	float: left;
}

.classes-image-container {
	width: 30%;
	float: right;
	margin: 1% 0;
}

.photo-background-container {
	background-color: #f1f1f1;
	width: 100%;
	text-align: center;
	margin-top: 1.5em;
	padding-bottom: 1.0em;
}

.notice-background-container {
	background-color: #f1f1f1;
	width: 100%;
	text-align: left;
	margin-top: 1.5em;
	padding-bottom: 1.0em;
}

.photo-link-container-first,
.photo-link-container-top {
	width: 32.3%;
	padding-top: 0.5em;
	display: inline-block;
	vertical-align: top;
}

.photo-link-container-bottom,
.photo-link-container-last {
	width: 31.5%;
	padding-top: 0.5em;
	padding-left: 0;
	padding-right: 1.8%;
	margin-bottom: 0;
	float: left;
}

.juicebox_outer_container {
	background-color: #f1f1f1;
	width: 100%;
	height: 100%;
	float: left;
	display: inline;
	padding-top: 0.5em;
}

#map_container {
	position: relative;
}

#map {
	height: 0;
	overflow: hidden;
	padding-bottom: 75%;
	padding-top: 0.5em;
	position: relative;
}

.map-background-container {
	background-color: #f1f1f1;
	width: 100%;
	float: left;
	margin-top: 0.5em;
	padding-bottom: 1.0em;
}

#map-canvas-centres {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	padding-top: 30px;
	position: relative;
}

.footer {
	margin: 0 0;
}

.blue-button {
	background-color: #3298c8;
	cursor: pointer;
	display: inline-block;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.2em;
	font-weight: normal;
	margin-top: 0.4em;
	padding: 0.4em 0 0.4em 0;
	width: 100%;
}

.red-button {
	background-color: #f11433;
	cursor: pointer;
	display: inline-block;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.2em;
	font-weight: normal;
	margin-top: 0.4em;
	padding: 0.4em 0 0.4em 0;
	width: 100%;
}

.dark-blue-button {
	background-color: #05184d;
	cursor: pointer;
	display: inline-block;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.2em;
	font-weight: normal;
	margin-top: 0.4em;
	padding: 0.4em 0 0.4em 0;
	width: 100%;
}

.black-button {
	background-color: #013b7a;
	cursor: pointer;
	display: inline-block;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.2em;
	font-weight: normal;
	margin-top: 0.4em;
	padding: 0.4em 0 0.4em 0;
	width: 100%;
	text-align: center;
}

.show-text {
	margin-top: 0.4em;
}

.blue-button,
blue-button a:link,
.blue-button a:visited {
	color: #fff;
	text-decoration: none;
}




/* ###### styles for devices 1-320px wide ###### */
@media screen and (min-width:1px) and (max-width:320px) {
	.page {
		width: 99%;
		margin: 0 auto;
		margin-top: 0;
	}

	.blog .main {
		width: 100%;
	}

	.blog .other {
		display: none;
	}

	.blog .main .slideshow {
		clear: both;
		position: relative;
		padding-bottom: 66.66%;
		/* 3:2 */
		height: 0;
		overflow: hidden;
		max-width: 100%;
	}

	.blog .main .vimeo-container {
		clear: both;
		position: relative;
		padding-bottom: 56.25%;
		/* 16:9 */
		height: 0;
		overflow: hidden;
		max-width: 100%;
	}

	.home-link-container-first {
		width: 100%;
		padding-top: 0.25em;
		padding-left: 0;
		padding-right: 0;
	}

	.home-link-container-top {
		width: 100%;
		padding-top: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.home-link-container-bottom {
		width: 100%;
		padding-top: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.home-link-container-last {
		width: 100%;
		padding-top: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.classes-text-container,
	.classes-image-container {
		width: 100%;
	}

	.photo-link-container-first,
	.photo-link-container-top {
		width: 100%;
	}

	.blue-button {
		width: 98%;
	}

}

/* ###### styles for devices 321-767px wide ###### */
@media screen and (min-width:321px) and (max-width:767px) {
	.page {
		width: 99%;
		margin: 0 auto;
		margin-top: 0;
	}

	.blog .main {
		width: 100%;
	}

	.blog .other {
		display: none;
	}

	.blog .main .slideshow {
		clear: both;
		position: relative;
		padding-bottom: 66.66%;
		/* 3:2 */
		height: 0;
		overflow: hidden;
		max-width: 100%;
	}

	.blog .main .vimeo-container {
		clear: both;
		position: relative;
		padding-bottom: 56.25%;
		/* 16:9 */
		height: 0;
		overflow: hidden;
		max-width: 100%;
	}

	.home-link-container-first {
		width: 33%;
		padding-top: 0.3em;
		padding-left: 0;
		padding-right: 0.33%;
	}

	.home-link-container-top {
		width: 33%;
		padding-top: 0.3em;
		padding-left: 0;
		padding-right: 0.33%;
	}

	.home-link-container-bottom {
		width: 33%;
		padding-top: 0.2em;
		padding-left: 0;
		padding-right: 0.33%;
	}

	.home-link-container-last {
		width: 33%;
		padding-top: 0.2em;
		padding-left: 0;
		padding-right: 0.33%;
	}

	.classes-text-container,
	.classes-image-container {
		width: 100%;
	}

	.photo-link-container-first,
	.photo-link-container-top {
		width: 100%;
	}
}

/* ###### styles for devices 768-960px wide ###### */
@media screen and (min-width:768px) and (max-width:960px) {
	.page {
		width: 99%;
		margin: 0 auto;
		margin-top: 0;
	}

	.blog .main .slideshow {
		clear: both;
		position: relative;
		padding-bottom: 66.66%;
		/* 3:2 */
		height: 0;
		overflow: hidden;
		max-width: 98%;
	}

	.blog .main .vimeo-container {
		clear: both;
		position: relative;
		padding-bottom: 56.25%;
		/* 16:9 */
		height: 0;
		overflow: hidden;
		max-width: 98%;
	}
}

/* ###### styles for devices 961-1200px wide ###### */
@media screen and (min-width:961px) and (max-width:1200px) {
	.page {
		margin: 0 auto;
		margin-top: 0;
		width: 99%;
	}

	.blog .main .slideshow {
		clear: both;
		height: 0;
		max-width: 98%;
		overflow: hidden;
		padding-bottom: 66.66%;
		/* 16:9 */
		position: relative;

	}

	.blog .main .vimeo-container {
		clear: both;
		height: 0;
		max-width: 98%;
		overflow: hidden;
		padding-bottom: 56.25%;
		/* 3:2 */
		position: relative;

	}
}

/* ###### styles for devices >1201px wide ###### */
@media screen and (min-width:1201px) {
	.page {
		margin: 0 auto;
		margin-top: 0;
		width: 99%;
	}

	.blog .main .slideshow {
		clear: both;
		height: 0;
		max-width: 98%;
		overflow: hidden;
		padding-bottom: 66.66%;
		/* 3:2 */
		position: relative;
	}

	.blog .main .vimeo-container {
		clear: both;
		height: 0;
		max-width: 98%;
		overflow: hidden;
		padding-bottom: 56.25%;
		/* 16:9 */
		position: relative;
	}
}