/*  Next Stage Productions - Responsive CSS - Feb 2017 - 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;
}

.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;}

/*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%;
}

.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;
}

.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;
}

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

.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 2%;
    width: 100%;
}

.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: 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: 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%;
}

.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: 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: 56.25%; /* 16:9 */
    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: 56.25%; /* 16:9 */
	position: relative;
}
}