/* COLOUR PALETTE =======

Main purple		#a349a4
Light purple	#bb74bc
Main Pink		#ffaec9
Light Pink		#ffedf3
Blue			#76cce2	
Light blue		#d0f6ff
Light Grey		#e8e9ea
Mid Grey		#a3a5a8
Dark Grey		#404244

======================= */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

.w3-content {
	max-width: 2200px;
}

.w3-hover-theme:hover {
	color:#000 !important; 
	background-color:#efefef !important
}

ol, ul {
	list-style: none;
}


table {
	border-collapse: collapse;
	border-spacing: 0;
}

img {
	vertical-align: bottom;
}

body {
	font-family: 'Open Sans';
}

h1 {
	font-family: 'Cinzel', serif;
	font-size: 1.6em;
	margin-top: 10px;
	color: #a349a4;
	font-weight: bold;
}

h2 {
	font-family: 'Cinzel', serif;
	font-size: 1.4em;
	font-weight: bold;
	color: #76cce2;
}

h3 {
	font-family: 'Cinzel', serif;
	font-size: 1.1em;
	font-weight: bold;
}

h4 {
	font-family: 'Cinzel', serif;
	font-size: 1em;
	font-weight: bold;
	color: #404244;
}

.title {
	width: 100%;
}

p {
	font-family: 'Open Sans';
	font-size: 0.9em;
	margin: 10px 0;
}

p.intro {
	font-size: 1.1em;
	margin-bottom: 15px;
}

p.catp {
	margin: 0;
	font-size: 0.8em;
}

p.smintro {
	margin-bottom: 20px;
	font-size: 0.75em;
	border-bottom: 1px solid lightgray;
}

.wrapper {
	box-sizing: border-box;
	max-width: 950px;
	margin: auto;
	padding: 0 8px;
	overflow: hidden:
}

a {
	color: #a349a4;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.spacer {
	margin: 20px 0;
}

.bottomborder {
	border-bottom: 1px lightgray solid;
	padding-bottom: 10px;
}

.purple {
	color: #a349a4;
}

.bold {
	font-weight: bold;
}

/* ===== HEADER SECTION ============================================================*/
.headercontainer {
	box-sizing: border-box;
	overflow: hidden;
}

.headercontainer a {
	text-decoration: none;
}

.logocontainer {
	box-sizing: border-box;
	overflow: hidden;
	float: left;
}

.logocontainer img {
	width: 260px;
	margin: 20px 0 20px 0;
}

.naviconcontainer {
	box-sizing: border-box;
	overflow: hidden;
	float: right;
	width: 200px;
}

.naviconcontainer img {
	float: left;
	width: 35px;
	margin: 20px 15% 0 0;
	vertical-align: middle;
}

.naviconcontainer h2 {
	font-size: 1em;
	font-family: "Open Sans";
	font-weight: normal;
	color: #404244;	
	float: left;
	margin-top: 10px;
}

/* ===== MAIN NAVIGATION ============================================================*/
.navcontainer {
	box-sizing: border-box;
	overflow: hidden;
	border-top: 1px #e3cee3 solid;
	border-bottom: 1px #e3cee3 solid;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f8efff+0,f7efff+47,f7efff+100 */
	background: rgb(248,239,255); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(248,239,255,1) 0%, rgba(247,239,255,1) 47%, rgba(247,239,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(248,239,255,1) 0%,rgba(247,239,255,1) 47%,rgba(247,239,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(248,239,255,1) 0%,rgba(247,239,255,1) 47%,rgba(247,239,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8efff', endColorstr='#f7efff',GradientType=0 ); /* IE6-9 */
}

.menubar a {
	font-family: 'Catamaran';
	float: left;
	font-size: 1.3em;
	display: block;
	padding: 5px 4%;
	padding-left: 0;
	color: #924293;
	text-decoration: none;
}

.menubar a:hover {
	color: #76cce2;
}

.menubar a:active {
	background-color: #ffedf3; 
}

.menubar .icon {
    display: none;
}

.home img {
	vertical-align: middle;
}

/* ===== CAROUSEL ================================================================*/
.carouselcontainer {
	width: 100%;
	margin-bottom: 20px;
	border-bottom: 1px #e8e9ea solid;
}

a.carousellink {
	font-family: 'Cinzel';
	font-size: 1.8em;
	color: #404244;	
	margin: 10px;
	text-decoration: none;
	font-weight: bold;
}

a.carousellinkwhite {
	font-family: 'Cinzel', serif;
	font-size: 1.8em;
	color: #fff;
	margin: 10px;
	text-decoration: none;
	font-weight: bold;
}

p.carouselbtn {
	font-size: 1.6em;
	color: #a349a4;
	margin: 0;
	padding: 0 20px;
}

/* ===== MAIN CONTENT ===========================================================*/
.maincontainer {
	box-sizing: border-box;
	overflow: hidden;
	padding-bottom: 20px;
}

#mainimgleft {
	float: left;
	margin-right: 3%;
	border: 1px darkgray solid;
}

#mainimgright {
	float: right;
	margin-left: 3%;
	border: 1px darkgray solid;
}

#mainimg{
	padding: 1.5% 0;
}

.maincontainer h4 {
	margin: 10px 0;
}

.maincontainer ul {
	list-style-type: circle;
	line-height: 1.8;
	padding-left: 2%;
	font-size: 0.9em;
}

.maincontainer ul li {
	margin-bottom: 10px;
	margin-left: 3%;
}

.articlediv {
	overflow: hidden;
	width: 100%;
	margin-bottom: 3%;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ===== HOME PAGE BANNER ========================================================*/
.bannercontainer {
	box-sizing: border-box;
	background-color: #bb74bc;
	overflow: hidden;
}

.bannercontainer img {
	width: 130px;
	float: left;
	padding-right: 3%;
}

.feature {
	box-sizing: border-box;
	width: 30%;
	float: left;
	margin: 2% 3% 2% 0
}

.feature h3 {
	color: #fff;
	vertical-align: top;
	font-size: 1em;
	display: block;
	overflow: hidden;
	width: 50%;	
}

.feature p {
	color: #fff;
	font-size: 0.8em;
	margin-top: 1%;
	display: block;
	overflow: hidden;
	width: 50%;
}

.feature a {
	color: #fff;
}

/* ===== HOME PAGE WHATS NEW ========================================================*/
.newscontainer {
	box-sizing: border-box;
	background-color: #fff;
	overflow: hidden;
	padding: 20px 0;
}

.newscontainer img {
	width: 180px;
	float: left;
	margin: 0 3% 5% 0;
	margin-top: 10px;
}

.newsitem {
	box-sizing: border-box;
	width: 47%;
	float: left;
	margin: 2% 1.5% 0 0;
}

.newscontainer h2 {
	color: #a349a4;
}

.newscontainer h4 {
	display: block;
	overflow: hidden;
	vertical-align: top;
	padding: 0;
	padding-top: 5px;
	color: #404244;
}

.newsitem p {
	display: block;
	overflow: hidden;
	color: #909296;
	font-size: 0.8em;
	margin: 0;
}

.newscontainer a {
	color: #909296;
	margin: 0;
	text-decoration: none;
	padding-top: 1%;
}

.newscontainer a:hover {
	text-decoration: underline;
}

#myInput {
	margin-bottom: 10px;
}

#myInput2 {
	margin-bottom: 20px;
}

#myTable {
	border-collapse: collapse;
	border-top: 1px lightgray solid;
}

#myTable img {
	width: 320px;
}

#myTable h4 {
	font-family: "Open Sans";
	font-size: 1.1em;
	margin: 0;
}

#myTable td {
	vertical-align: top;	
	padding: 20px 5px;
}

#myTable tr {
	border-bottom: 1px lightgray solid;
}

/* ===== FOOTER ========================================================*/
.footercontainer {
	box-sizing: border-box;
	overflow: hidden;
	padding: 20px 0;
	background: #e8e9ea;
}

.footersection {
	box-sizing: border-box;
	width: 33%;
	float: left;
}

.footersection h4 {
	color: #a349a4;
	margin-bottom: 5px;
}

.footersection a {
	color: #404244;
	font-size: 0.8em;
	margin: 0;
	text-decoration: underline;
	padding-top: 1%;
}

.footersection a:hover {
	text-decoration: none;
}

.footerbadges {
	float: left;
	width: 100%;
}

.footerbadges img {
	vertical-align: middle;
	margin: 0 5%;
}

.footerinfo {
	float: left;
	width: 100%;
	margin-top: 2%;
}

.footerinfo p {
	font-size: 0.6em;
	text-align: center;
}

/*============================================================================================================================================*/
/*============================================================================================================================================*/
 /* When the screen is less than 900 pixels wide */
@media screen and (max-width: 900px) {
  .feature img {
	  padding-top: 4%;
  }
  .feature h3 {
	  padding-top: 7%;
	  padding-left: 3%;
      width: 90%;
  }
  .feature p {
	 padding-left: 3%;
	 width: 90%;
  }
  .newsitem {
	  width: 100%;
  }
  .footerbadges img {
	 width: 90px;
	 margin: 0 5%;
  }
  #myTable img {
	width: 250px;
 }
}

/*============================================================================================================================================*/
/*============================================================================================================================================*/
 /* When the screen is less than 600 pixels wide, hide all links, except for the first one 
 ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .menubar a {display: none;}
  .menubar a.icon {
    float: right;
    display: block;
	font-size: 2em;
	padding: 0;
  }
  .menubar {
	margin-top: 5px;
  }
  h1 {
	  font-size: 1.4em;
  }
  .title {
	width: 300px;
  }
  .spacer {
	margin: 5px 0;
  }
  h2 {
	  font-size: 1.1em;
  }
  h3 {
	  font-size: 0.9em;
  }
  .logocontainer img {
	width: 210px;
	margin: 10px 0 10px 0;
  }
  .naviconcontainer {
	width: 	110px;
  }  
  .naviconcontainer img {
	width: 	25px;
	margin: 10px 9% 0 1%;
  }
  .naviconcontainer h2 {
	font-size: 0.75em;
  }
  .feature {
	width: 47%;
	padding-left: 5%;
  }
  .feature p {
	 width: 95%;
  }
  .feature img {
	width: 110px;
  }
  .feature h3 {
	font-size: 0.9em;
    width: 90%;
  }
  #thirdfeature {
	  display: none;
  }
  .newsitem {
	  width: 100%;
  }
  .newsitem h4 {
	 font-size: 0.8em;
  }
  .newsitem img {
	width: 140px;
  }
  .footerbadges img {
	 width: 70px;
	 margin: 0 5px;
  }
  #mainimgleft {
	  width: 150px;
  }
  #mainimgright {
	  width: 150px;
  }
  #myTable img {
	width: 200px;
  }
  .bootcampimg {
	  width: 350px;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. 
This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .menubar.responsive {position: relative;}
  .menubar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
	font-size: 2em;
  }
  .menubar.responsive a {
    float: none;
    display: block;
    text-align: left;
	font-size: 1.2em;
  }
}