body, p, div, td, li {
	font-family: arial, helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

h1,h2,h3,h4,h5,h6 {
	font-family: arial, helvetica, sans-serif;
	margin-top: 0;
}
li {
	margin-bottom: 10px;
}

.img-responsive {
	max-width: 100%;
    height: auto;
}

body {
	margin: 0px;
}

a:link
{ color: #C60000; }
a:visited
{ color: #C60000; }
a:hover
{ text-decoration: none; }
a:active
{ color: #ff0000; }

.masthead {
	position: relative;
	max-width: 1180px;
	min-height: 122px;
	margin: 0 auto;
}
.masthead img.logo {
	margin: 0;
}

div.tagline {
	position: absolute;
	top: 10px;
	right: 0;
	text-align: right;
	color: #1a3e94;
	line-height: 150%;
	font-size: 18px;
	font-style: italic;
	font-weight: bold;
}

img#menu-icon {
	/* Hamburger icon */
	position: absolute;
	top: 82px;
	left: 10px;
	cursor: pointer;
	/* By default, make it invisible: */
	display: none;
}

#menu {
	position: absolute;
	z-index: 200;
	top: 90px;
	left: 0;
}
#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#menu ul li {
	float: left;
}
#menu ul li a {
	text-decoration: none;
	color: #555555;
	padding: 10px 20px;
}
#menu ul li a:hover {
	color: #C60000;
	background-color: #eeeeee;
}

#menu > ul > li > ul {
	position: absolute;
	top: 29px;
	z-index: 200;
	background: #eeeeee;
	display: none;
	height: auto;
	width: 225px;
	margin: 0px;
	border-top: 1px solid #ffffff;
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
}
#menu > ul > li:hover > ul {
	display: block;
}
#menu li li {
	position: relative;
	display: block;
	float: none;
	margin: 0px;
	padding: 0px;
}
#menu ul li ul li a {
	display: block;
	margin: 0px;
	text-align: left;
	border-bottom: 1px solid #ffffff;
}
	#menu > ul > li > ul > li > a:hover,
	#menu > ul > li > ul > li:hover > a
	{
		text-decoration: none;
		background-color: #dddddd;
	}

#menu > ul > li > ul > li > ul {
	position: absolute;
	top: 0;
	left: 225px;
	z-index: 200;
	background: #eeeeee;
	display: none;
	height: auto;
	width: 225px;
	margin: 0px;
	border-top: 1px solid #ffffff;
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
}
#menu > ul > li > ul > li:hover > ul {
	display: block;
}
	#menu > ul > li > ul > li > ul > li:hover > a {
		background-color: #dddddd;
	}



a.button-cta {
	background-color: #ee4035;
	padding: 10px 20px;
	border: 2px solid white;
	border-radius: 20px;
	color: white;
	font-weight: bold;
	text-decoration: none;
}
a.button-cta:hover {
	background-color: #1a3e94;
}
#home-top-button {
	/* Specifically for home page top button */
	background-color: #207320;
}
#home-top-button:hover {
	background-color: #ee4035;
}



.wide-stretch {
	background-color: #eee;
}
.wide-image {
	position: relative;
	max-width: 1920px;
	min-height: 500px;
	margin: 0 auto;
	font-size: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
	.wide-image .overlay {
		/* Translucent colour layer over the wide background image */
		z-index: 10;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: black;
		opacity: 0.25;
	}
	.wide-image .overlay-text {
		/* Centered text within wide-image */
		position: relative;
		z-index: 20;
		top: 10vw;
		text-align: center;
	}
	.wide-image .overlay-text h1 {
		color: white;
		font-size: 45px;
	}

.wide-image .narrow-image {
	/* Not used yet */
	/* Narrow background image centered within wide image */
	position: relative;
	max-width: 1180px;
	min-height: 500px;
	margin: 0 auto;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.narrow-container {
	/* Narrow centered within wide image or full-width div */
	max-width: 1180px;
	margin: 0 auto;
}
	.narrow-container .overlay-text {
		/* Floating centered text within narrow-container, e.g. Home page cta-button */
		position: absolute;
		z-index: 20;
		top: 80%;
		left: 50%;
		transform: translate(-50%, -75%);
	}

section.text {
	max-width: 1180px;
	margin: 0 auto;
	padding: 20px;
}
section.text h2 {
	text-align: center;
	margin: 40px;
}

div.text-centered {
	max-width: 1180px;
	margin: 0 auto;
	padding: 50px 5%;
	text-align: center;
}
.grey-bg {
	background-color: #dddddd;
}

.flexbox {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	box-sizing: border-box;
	margin-top: 40px;
}
	div.flex-item {
		/* Small narrow flex column */
		text-align: center;
		min-width: 170px;
		padding: 20px;
	}
	/* Use the folowing 2-column layout for a narrow and a wide column */
	div.col-narrow {
		width: 295px;
		flex-grow: 1;
	}
	div.col-wide {
		width: 885px;
		flex-grow: 3;
	}
	div.item-2col {
		/* Within flexbox, side-by-side equal columns */
		width: 560px;
		flex-grow: 1;
		padding: 0 10px;
	}
	div.item-3col {
		/* Within flexbox, side-by-side equal columns */
		width: 350px;
		flex-grow: 1;
		padding: 0 10px;
	}

div.col-partner {
	/* Used in home page darkblue area */
	display: inline-block;
	text-align: center;
	max-width: 130px;
	padding: 20px;
}

/* Collapsible divs --------------------------------- */
.collapsible, section.text h2.collapsible {
	background-color: #dddddd;
	color: #444444;
	cursor: pointer;
	padding: 10px;
	border: none;
	margin: 20px 0 0 0;
	outline: none;
	transition: 0.4s;
}

collapsible.active, .collapsible:hover,
section.text h2.collapsible.active {
	background-color: #bbbbbb;
}

.collapsible:after {
	content: '\002B';
	color: #777;
	font-weight: bold;
	float: right;
	margin-left: 5px;
	border: 1px solid #444444;
	border-radius: 25px;
	padding: 0 10px;
}
.active:after {
	content: "\2212";
}

.collapsible-content {
	padding: 0 20px;
	background-color: #eeeeee;
	max-height: 0;
	overflow: auto;
	transition: max-height 0.2s ease-out;
}

/* Footer --------------------------------- */
.shadow-bar {
	/* Horizontal bar with gradient shadow, dark to light */
	height: 40px;
	background-image: linear-gradient(to bottom, #eeeeee, #ffffff);
}

footer {
	max-width: 1180px;
	margin: 0 auto;
	padding: 20px;
	font-size: 12px;
}
div.footer-bottom {
	color: #fff;
	background: #ee4035;
}

.not-avail {
	position: relative;
	top: -32px;
	z-index: 2;
	text-align: center;
	background-color: white;
	color: black;
	border: 1px solid red;
	border-radius: 10px;
}





/* Home --------------------------------- */

div.flex-courses {
	display: flex;
	flex-wrap: wrap;
}
div.flex-courses .item {
	flex-grow: 1;
	padding: 30px;
	width: 230px;
	color: #fff;
	text-align: center;
	font-size: 14px;
	background: #207320;
	box-sizing: border-box;
}
div.flex-courses .item:nth-child(2) {
	background: #125bab;
}
div.flex-courses .item:nth-child(3) {
	background: #b63a33;
}
div.flex-courses .item:nth-child(4) {
	background: #cab927;
}
div.flex-courses .item:nth-child(5) {
	background: #6c2680;;
}
div.flex-courses .item a {
	color: #fff;
}
div.flex-courses .item img {
	height: 72px;
}
div.flex-courses .title {
	min-height: 85px;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 20px;
}
	div.flex-courses .item .title a:hover {
		color: #fff;
		text-shadow: 3px 3px 5px black;
	}
div.flex-courses a.cta {
	margin-top: 50px;
	border: 1px solid #fff;
	border-radius: 50px;
	padding: 8px 25px 10px;
	font-size: 16px;
}
div.flex-courses a.cta:hover {
	text-decoration: none;
	color: #cc0000;
	background: white;
}

div.darkblue {
	background-color: #1c3653;
	color: white;
}
div.darkblue a {
	color: white;
}
div.darkblue a.cta {
	margin-top: 50px;
	border: 1px solid #fff;
	border-radius: 50px;
	padding: 8px 25px 10px;
	font-size: 16px;
	text-decoration: none;
}
div.darkblue a.cta:hover {
	text-decoration: none;
	color: #cc0000;
	background: white;
}

div.precourse-box {
	border-style: solid;
	border-width: 10px;
	border-radius: 10px;
	margin-bottom: 20px;
}
div.precourse-border-red {
	border-color: #ee3f35;
}
div.precourse-border-blue {
	border-color: #204191;
}
div.precourse-border-green {
	border-color: #19542a;
}

div.precourse-border-yellow {
	border-color: #ffd300;
}

div.precourse-heading {
	font-size: 20px;
	font-weight: bold;
	color: white;
	padding: 0 8px 8px 8px;
}
div.precourse-border-red div.precourse-heading {
	background-color: #ee3f35;
}
div.precourse-border-blue div.precourse-heading {
	background-color: #204191;
}
div.precourse-border-green div.precourse-heading {
	background-color: #19542a;
}

div.precourse-border-yellow div.precourse-heading {
	background-color: #ffd300;
}


div.precourse-content {
	padding: 0 20px;
}
div.precourse-content .red {
	color: #ee3f35;
}
div.precourse-content .blue {
	color: #204191;
}
div.precourse-content .green {
	color: #19542a;
}

div.precourse-content .yellow {
	color: #ffd300;
}

/* Vision, Mission, Ethos & Core Values --------------------------------- */

div.core-value {
	/* Blue circle enclosing a letter */
	font-size: 48px;
	border-radius: 100%;
	width: 100px;
	height: 100px;
	line-height: 100px;
	margin: 0 auto 15px;
	background: #1a3e94;
	color: #fff;
	font-weight: 900;
}

div.color-box {
	/* Colour swatches for explaining the logo colours. */
	display: inline-block;
	border-style: solid;
	border-color: black;
	border-width: 1px;
	width: 100px;
	height: 50px;
	margin-right: 25px;
}





/* Courses SSG pages --------------------------------- */

.course-table {
	display: table;
}
.course-row {
	display: table-row;
}
.course-cell {
	display: table-cell;
}
.table1 div.course-cell:nth-child(2) {
	/* Table type 1, 2nd column */
	/* Used in Grad Cert in Counselling */
	width: 100px;
	text-align: center;
}





/* Join Our Existing Lectures: Counselling Approaches --------------------- */
/* Note: These styles are temp/interim for transition. Will need to redo. */
div.panel-body {
	background-color: #dddddd;
	padding: 5px 15px;
}
div.col-xs-4 {
	margin-top: 20px;
	font-weight: bold;
}
div.col-xs-8 {
	margin-top: 10px;
	margin-left: 20px;
}




/* Feedback from ECTA Alumni --------------------------------- */
div.alumni {
	margin-top: 40px;
	text-align: center;
	font-size: 20px;
}
div.alumni-attrib {
	font-size: 16px;
	font-style: italic;
}





/* Contact Us --------------------------------- */

input[type="submit"] {
	border-radius:25px;
	font-size:18px;
	padding:8px;
	width:100px;
	text-transform:uppercase;
	background:#949599;
	color:#FFFFFF;
	border:none;
	margin:10px 0px;
	cursor:pointer;
}
input[type="submit"]:hover {
	background: #FF0000;
}

input[type=checkbox] {
    transform: scale(1.5);
}

/* Submit button waiting spinner */
div#spinner-container {
	z-index: 10;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	width: 100%;
	text-align: center;
	/* By default, don't show the spinner: */
	display: none;
}
div.spinner {
	margin: 0px auto;
	border: 16px solid #f3f3f3; /* Light grey */
	border-top: 16px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}






/* Responsive media queries ================================================= */

@media only screen and (max-width: 1180px) {
	div.tagline {
		padding-right: 10px;
	}

	.wide-image {
		min-height: 25vw;
	}
}



@media only screen and (max-width: 900px) {
	/* Show hamburger menu: */
	img#menu-icon {
		display: inline;
	}

	/* Adjust the menu*/
	#menu {
		position: static;
		display: none;
		margin-top: 50px;
	}
	#menu ul li {
		float: none;
		font-size: 20px;
		border-top: 1px solid #dddddd;
		-padding: 10px;
		margin-bottom: 0;
	}
	#menu ul li a {
		display: block;
		padding: 5px 10px;
	}

	#menu > ul > li > ul,
	#menu > ul > li > ul > li > ul
	{
		position: static;
		display: block;
		margin-left: 20px;
		width: 100%;
		background: #ffffff;
	}

	.wide-image .overlay-text h1 {
		font-size: 5vw;
	}

}



@media only screen and (max-width: 350px) {
	div.tagline {
		position: static;
		font-size: 5vw;
	}
}