* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html,
body {
	height: 100%;
	background-color: white;
}
body {
	overflow-y: scroll;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	font-family: Oxygen, sans-serif;
}
.hide {
	display: none;
}
a {
	text-decoration: none;
	color: inherit;
}
article a {
	text-decoration: underline;
}
article a[href*="tel"] {
	text-decoration: none;
}
header,
footer {
	font-family: "Josefin Sans", sans-serif;
	display: flex;
	min-height: 3em;
	justify-content: space-between;/*LEFT TO RIGHT - THE RIGHT-HAND ITEMS ALSO NEED TEXT-ALIGN: RIGHT*/
	align-items: center; /*TOP TO BOTTOM*/
	padding-left: 1em;
	padding-right: 1em;
}
header {
	background-color: white;
	color: black;
	min-height: 6em;
    position: relative;
    z-index: 500;
    padding-right: 3em;
}
.hfLeft,
.hfRight {
	flex: 1;
}
.hfRight {
	text-align: right;
}
.highlight {
	font-style: italic;
	color: #f4511e;
	font-weight: bold;
}
header h2 {
	font-size: 3em;
	font-weight: normal;
	color: #f4511e;
}
header .fullstop {
    color: white;
    text-shadow: 0.5px 0.5px 0 black;
}
header .place {
	color: rgb(39, 39, 39);
}
header .email {
	margin-top: 1em;
}
.tap {
	display: none;
}
h1 {
	margin-bottom: 1em;
}
label[for="show-menu"],
input#show-menu {
	display: none;
}
nav {
	position: relative;
	z-index: 200;
	border-bottom: .5px solid #ccc;
}
#index nav{
	padding-right: 16px; /*TO COMPENSATE FOR THE SCROLLBAR ON OTHER PAGES*/
}
nav ul {
	display: flex;
	text-align: center;
}
nav li {
	list-style-type: none;
	padding-bottom: .5em;
	font-size: 1.2em;
	flex: 1;
}
nav li a {
	display: block;
}
nav a {
	transition: all .5s;
}
nav li a:hover {
	color: 	#f4511e;
}
nav li a.hash-selected {
	color: #f4511e;
	cursor: context-menu;
}
nav li a.hash-selected:hover {
	opacity: 1;
}
#work nav li a[href*="work"],
#learn nav li a[href*="learn"],
.courses nav li a[href*="learn"],
#benefits nav li a[href*="benefits"],
#cost nav li a[href*="cost"],
#wedoit nav li a[href*="wedoit"],
#resources nav li a[href*="resources"],
#contact nav li a[href*="contact"],
#about nav li a[href*="about"] {
	color: 	#f4511e;
	cursor: context-menu;
	opacity: 1;
}
main {
	margin-top: 2em;
	margin-left: 4em;
	flex: 1;
}
#index body {
	overflow: hidden;
}
.video-container {
	width: 100%;
	height: calc(100vh - 5em);
	overflow: hidden;
}
video {
	object-fit: cover;
	width: 100%;
	height: 100%;
	-webkit-border-radius: 1px;
}
.text-container {
	position: absolute;
	top: 0;
	left: 3em;
	z-index: 100;
	color: white;
	font-family: "Josefin Sans", Oxygen, sans-serif;
	font-weight: 300;
	width: 100%;
	height: 100%;
}
.text-container div {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top: 0;
	}
.text-container div p {
	font-size: 4em;
	text-align: right;
}
.text-container div:nth-of-type(1) {
	top: 30vh;
	animation-name: slideInUp;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}
.text-container div:nth-of-type(2) {
	top: 40vh;
	animation-name: slideInUp;
	animation-duration: 2s;
	animation-delay: 3s;
	animation-fill-mode: forwards;
}
.text-container div:nth-of-type(3) {
	top: 50vh;
	animation-name: slideInUp;
	animation-duration: 2s;
	animation-delay: 5.5s;
	animation-fill-mode: forwards;
}
.mobile-text-container {
	display: none;
}
@keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
    opacity: 0;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
    opacity: 1;
  }
}
p+ul {
	margin-top: 1em;
}
p+span {
	margin-top: 1em;
	display: block;
}
span p {
	font-weight: bold;
}
article section {
	display: table;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2em;
}
section div {
	display: table-row;
}
section span {
	display: table-cell;
	width: 33.3%;
}
section li {
	padding-bottom: 1.2em;
}
  #cost table {
  	width: 50%;
  	border: 1px solid #ccc;
  	margin: 2em auto;
  	border-collapse: collapse;
  	box-shadow: 2px 2px rgba(0,0,0,.5);
  }
  #cost td {
  	padding: 1em;
  	border-bottom: 1px solid #ccc;
  }
  /*CONTACT.SHTML*/
  form.contact {
  	width: 50%;
  	padding: 2em 1em;
  	background-color: #e9e7e7;
  	border-radius: 5px;
  	border: 1px solid #ccc;
  	margin: 3em auto;
  }
  form.contact div:last-of-type {
  	display: block;
  	width: 100%;
  }
  form.contact div:last-of-type input {
  	display: inline-block;
  	width: 5rem;
  	padding: 0;
  	height: 3em;
  	line-height: normal;
  }
  form.contact input,
  form.contact textarea, 
  form.contact label {
  	margin-bottom: 2em;
  	padding-left: 55px;
	font-family: Oxygen, sans-serif;
  }
  form.contact input {
  	height: 50px;
  	line-height: 50px; /*THESE TOGETHER CENTRE THE TEXT VERTICALLY*/
  }
  form.contact label {
  	width: 10rem;
  	display: block;
  	padding-left: 0;
  	margin-bottom: 1em;
  }
  form.contact input,
  form.contact textarea {
  	background-repeat: no-repeat;
  	background-position: 0;
  	width: 100%;
  	border-radius: 5px;
  	font-size: inherit;
  }
  label[for="enquiry"] {
    vertical-align: top;
	}
  form.contact textarea {
  	min-height: 10em;
  	padding: 1em;
  }
  form.contact #name {
  	background-image: url(/logos/icons/head.png);
  }
  form.contact #tel {
  	background-image: url(/logos/icons/phone.png);
  }
  form.contact #email {
  	background-image: url(/logos/icons/email.png);
  }
  form.contact #enquiry {
  	background-image: url(/logos/icons/question.png);
    background-position: 0 10px;
    padding-left: 55px;
    }
  p.error {
  	line-height: 3;
  }
#work article li,
#benefits article li,
#offer article li {
	padding-bottom: 1em;
  	}
#benefits article ul {
	margin-top: 2em;
}
/*LEARN.SHTML*/
  #learn article li {
  	list-style-type: none;
  }
  [class*="list-"] a {
  	background-repeat: no-repeat;
  	background-image: url(/logos/icons/sprite.png);
  	padding-left: 40px;
  	display: block;
  	min-height: 40px;
  }
  #learn a[href*="excel"] {
  	background-position: -15px -212px;
  }
  #learn a[href*="word"] {
  	background-position: -15px -821px;
  }
  #learn a[href*="powerpoint"] {
  	background-position: -15px -713px;
  }
  #learn a[href*="outlook"] {
  	background-position: -15px -529px;
  }
  #learn a[href*="powerbi"] {
  	background-position: -15px -651px;
  }
  #learn a[href*="access"] {
  	background-position: -15px -15px;
  }
  #learn a[href*="onenote"] {
  	background-position: -15px -469px;
  }
  #learn a[href*="vba"] {
  	background-position: -15px -773px;
  }
  #learn a[href*="photoshop"] {
  	background-position: -15px -589px;
  }
  #learn a[href*="indesign"] {
  	background-position: -15px -408px;
  }
  #learn a[href*="illustrator"] {
  	background-position: -15px -347px;
  }
  #learn a[href*="acrobat"] {
  	background-position: -15px -76px;
  }
  #learn a[href*="html"] {
  	background-position: -15px -272px;
  }
  #learn a[href*="css"] {
  	background-position: -15px -137px;
  }
  /*RESOURCES*/
/*  #resources a[href*=".pdf"] {
  	background-image: url(/logos/icons/pdf.png);
  	padding-left: 40px;
  	background-repeat: no-repeat;
  }*/
    #resources a[href*=".pdf"]::after {
		content: " (PDF)";
	}
/*COURSES*/
.courses h1 {
	background-image: url(/logos/large/sprite.png);
	background-repeat: no-repeat;
	padding-left: 150px;
	padding-top: 30px;
	min-height: 100px;
}
#learn article a {
	text-decoration: none;
}
#excel h1 {
	background-position: -15px -395px;
}
#word h1 {
	background-position: -15px -1600px;
}
#access h1 {
	background-position: -15px -15px;
}
#onenote h1 {
	background-position: -15px -896px;
}
#outlook h1 {
	background-position: -15px -1017px;
}
#powerbi h1 {
	background-position: -15px -1266px;
}
#powerpoint h1 {
	background-position: -15px -1394px;
}
#vba h1 {
	background-position: -15px -1515px;
	min-height: 70px;
}
#acrobat h1 {
	background-position: -15px -141px;
}
#illustrator h1 {
	background-position: -15px -644px;
}
#indesign h1 {
	background-position: -15px -770px;
}
#photoshop h1 {
	background-position: -15px -1138px;
}
#html h1 {
	background-position: -15px -516px;
}
#css h1 {
	background-position: -15px -267px;
}
article h2 {
	font-size: 1.2em;
	padding-bottom: .75em;
}
article h3 {
	padding-bottom: 1em;
	padding-right: 2em;
	float: right;
}
article h3 a {
	text-decoration: none;
}
article p {
	margin-bottom: 1em;
}
article h1+p {
	clear: both;
}
article ul {
	margin-bottom: 1em;
	margin-left: 1em;
	list-style-type: none;
}
article li {
	margin-bottom: .2em;
	position: relative;
	padding-left: 2em;
}
article li ul {
	margin-bottom: 0;
}
article li li {
	list-style-type: none;
	padding-left: 1em;
}
#learn :before {
	display: none;
}
#learn article ul,
#learn article li {
	margin-left: 0;
	padding-left: 0;
}
article li li:before {
  content: '\002D';
  display: inline-block;
  font-weight: bold;
  color: #f4511e;
  position: absolute;
  left: -.8em;
  top: -.1em;
}
article li:before {
  content: '\25A0';
  display: inline-block;
  color: #f4511e;
  position: absolute;
  left: 0;
  top: -.1em;
}
article li span {
	color: rgb(40, 40, 40);
}
article ul {
	margin-bottom: 1em;
}
aside {
	display: block;
	padding-top: 4.5em;
	position: relative;
	left: 1.8em;
}
footer {
	border-top: .5px solid #ccc;
	padding-top: 1em;
	padding-bottom: 1em;
	min-height: 5em;
}
.disclaimerAsterisk {
	font-weight: bold;
	color: #f4511e;
}
.disclaimer {
	font-size: .9em;
	color: #f4511e;
	font-style: italic;
}
.duration {
	margin-top: 1em;
	font-style: italic;
}
@media only screen and (max-height: 550px) {
	.text-container div:nth-of-type(1) {
		top: 42vh;
	}
	.text-container div:nth-of-type(2) {
		top: 53vh;
	}
	.text-container div:nth-of-type(3) {
		top: 64vh;
	}
}
@media only screen and (max-width: 960px) {
	/*header h2{color:yellow;}*/
	.text-container {
		left: 0;
	}
	#cost table {
		width: 75%;
	}
	article {
		padding-right: .5em;
	}
	form.contact {
		width: 80%;
	}
}
@media only screen and (max-width: 890px) {
	/*header h2{color:magenta;}*/
	main {
		margin-left: 2em;
	}
	.text-container div p {
		font-size: 3em;
	}
	.break {
		display: block;
	}
	article section {
		width: 80%;
	}
}
@media only screen and (max-width: 670px) {
	/*header h2{color:green;} */
	header {
		border-bottom: 1px solid #ccc;
		margin-bottom: 1em;
	}
	#index header {
		border-bottom: 0;
		margin-bottom: 0;
	}
	article h3 {
		float: none;
	}
	form.contact {
		width: 95%;
		margin: 3em 0;
	}
	.courses h1 {
  		background-image: url(/logos/icons/sprite.png);
	    padding-left: 50px;
	    padding-top: 0;
	    min-height: 45px;
	}
  #excel h1 {
  	background-position: -15px -212px;
  }
  #word h1 {
  	background-position: -15px -821px;
  }
  #powerpoint h1 {
  	background-position: -15px -713px;
  }
  #outlook h1 {
  	background-position: -15px -529px;
  }
  #powerbi h1 {
  	background-position: -15px -651px;
  }
  #access h1 {
  	background-position: -15px -15px;
  }
  #onenote h1 {
  	background-position: -15px -469px;
  }
  #vba h1 {
  	background-position: -15px -773px;
  }
  #photoshop h1 {
  	background-position: -15px -589px;
  }
  #indesign h1 {
  	background-position: -15px -408px;
  }
  #illustrator h1 {
  	background-position: -15px -347px;
  }
  #acrobat h1 {
  	background-position: -15px -76px;
  }
  #html h1 {
  	background-position: -15px -272px;
  }
  #css h1 {
  	background-position: -15px -137px;
  }
	.text-container {	
		display: none;
	}
	article section {
		width: 90%;
	}
	.click {
		display: none;
	}
	.tap {
		display: inline;
	}
	.mobile-text-container {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		padding-left: .5em;
		padding-right: .5em;
		z-index: 100;
		color: white;
		font-family: "Josefin Sans", Oxygen, sans-serif;
		font-weight: 300;
		width: 100%;
		height: 100%;
		font-size: 3em;
	}
	.mobile-text-container p {
		position: relative;
		top: 30vh;
	}
	label[for="show-menu"] {
	  display: block;
	  width: 100%;
	  cursor: pointer; /*grabby hand */
	  z-index: 400;
	  color: #ccc;
	}
	input#show-menu {
	  position: absolute;
	  top: -9999px;
	  left: -9999px;
	}
	nav {
	  display: none; /*invisible until checked */
	  background: rgb(246, 246, 246); /*to cover the background text */
	  width:100%;
	  padding:0;
	  border:2px solid rgb(135, 205, 232);
	  }
	nav ul {
	    display: block;
	    padding: 0;
	  }
	nav ul li {
	    display: block;
	    padding: 0;
	    border-bottom: 1px solid white;
	}
	nav ul li:last-of-type {
	    border: 0;
	}
	nav li a {
	  padding: 1em;
	}
	label[for="show-menu"]:after {
	  	position: fixed;
		right:1.8em;
	  	content: "\2261 Menu";
		font-size:1.5em;
}
	input#show-menu:checked ~ label[for="show-menu"]:after {
		content: "\2716 Menu";
	}
	input#show-menu:checked ~ nav {
	  display: block; /*make the ul visible */
	  position:absolute; /*position over text - omit this and following to push text down */
	  top:6em;
	  width: 100%;
	  z-index: 300;
	  padding-top: 2em;
	}
	.break {
		display: none;
	}
	#cost table {
		width: 95%;
	}
}
@media only screen and (max-width: 540px) {
	/*header h2{color:cyan;}*/
	header {
		padding-right: .5em;
		padding-left: .2em;
	}
	label[for="show-menu"]:after {
		right: .5em;
	}
	main {
		margin-left: 1em;
		margin-right: 1em;
	}
	article section {
		width: 100%;
	}
	article h3 {
		padding-right: 0;
		padding-top: .5em;
	}
	form.contact {
		width: 100%;
	}
}
@media only screen and (max-width: 480px) {
	/*header h2{color: brown;}*/
	header {
		display: block;
	}
	header .hfRight {
		text-align: left;
	}
	header .hfLeft {
		margin-bottom: 1em;
	}
	header .tel {
		float: left;
	}
	header .email {
		float: right;
		margin-top: 0;
	}
}
@media only screen and (max-width: 380px) {
	/*header h2{color: grey;}*/
	article section span {
		display: block;
		width: 100%;
	}
}