html, body 	{
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	background-color: #FFFFFF;
}

h1 	{
	font-size: 54;
	/*font-weight: 300;*/
}

p 	{
	font-size: 20;
}

a:link  {
	color: #000;
    text-decoration: none;
}

a:visited   {
	color: #000;
    text-decoration: none;
}

a:hover     {
	color: #000;
    text-decoration: none;
}

/*transitions*/

.button, .section, p, h1, h3, .beebotImages  {
    -webkit-transition: all 0.6s ease;
    -moz-transition:    all 0.6s ease;
    -ms-transition:     all 0.6s ease;
    -o-transition:      all 0.6s ease;
    transition:         all 0.6s ease;
}

.item1, .item2, .item3, .item4, .item5, .item6,
 .navFix, .post,.navText, .codeMarkUp, .botCards  {
    -webkit-transition: all 0.1s ease;
    -moz-transition:    all 0.1s ease;
    -ms-transition:     all 0.1s ease;
    -o-transition:      all 0.1s ease;
    transition:         all 0.1s ease;
}

ul 	{
	list-style-type: square;
}

.section	{
	clear: both;
	float: left;
	margin-top: 10px;
	padding-left: 40px;
	height: 100%;	
}

.section p 	{
	font-family: 'Libre Baskerville', serif;
	font-weight: 300;
	font-size: 44px;
	font-style: italic;
}

.title	{
	width: 100%;
}

.curriculum	{
	clear: both;
	float: right;
	margin-right: -4%;
	margin-top: 20px;
	border-left: 1px solid #000;
	color: #000;
	padding-left: 5px;
	padding-right: 40px;
	height: 100%;	
}
.curriculum p {
	font-family: 'Libre Baskerville', serif;
	font-weight: 300;
	font-style: italic;
}

.clearFix	{
	clear: both;
}
.navFix	{
	display: block;
	width: 100%;
	height: 10px;
	padding-top: 80px;
	clear: both;
}

.year1, .year2, .year3, .year4, .year5, .year6	{
	padding-top: 2%;
}

.year6	{
	padding-bottom: 400px;
}

.year1 div	{
	background-color: rgb(225,235,245);
	/*opacity: 0.7;*/
}

.year2 div 	{
	background-color: rgb(240,229,235);
	opacity: 0.7;
}

.year3 div 	{
	background-color: rgb(252,223,215);
	opacity: 0.7;
}

.year4 div 	{
	background-color: rgb(212,236,220);
	opacity: 0.7;
}

.year5 div 	{
	background-color: rgb(252,249,218);
	opacity: 0.7;
}

.year6 div 	{
	background-color: rgb(238,242,245);
	opacity: 0.7;
}

.year1Colour	{
	background-color: rgb(225,235,245);
	opacity: 0.7;
}

.year2Colour 	{
	background-color: rgb(240,229,235);
	opacity: 0.7;
}

.year3Colour 	{
	background-color: rgb(252,223,215);
	opacity: 0.7;
}

.year4Colour 	{
	background-color: rgb(212,236,220);
	opacity: 0.7;
}

.year5Colour 	{
	background-color: rgb(252,249,218);
	opacity: 0.7;
}

.year6Colour 	{
	background-color: rgb(238,242,245);
	opacity: 0.7;
}


.item1, .item2, .item3, .item4, .item5, .item6	{
		display: block;
		text-indent: 0px
}

.item1:hover, .item2:hover, .item3:hover, .item4:hover, .item5:hover, .item6:hover	{
	-webkit-animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	text-indent: 5px
}

.next:hover	{
	-webkit-animation: shadow-drop-2-left 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: shadow-drop-2-left 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.mainMenu:hover	{
	-webkit-animation: shadow-drop-2-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: shadow-drop-2-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.previous:hover	{
	-webkit-animation: shadow-drop-2-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: shadow-drop-2-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


.beebotImages	{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}


.group	{
	display: block;

	clear: both;
	border-bottom: 1px solid #000000;
}


.content	{
	display: block;
	clear: both;
	margin-top: 100px;
	margin-left: 15%;
	margin-right: 3%;
}

.navigation	{
	display: block;
	clear: both;
	position: relative;
	margin-top: 20px;
	margin-bottom: 100px;
}

.next	{
	width: 20%; 
	height: 80px; 
	border: 1px solid #BFBFBF;
	position: absolute;
	right: 10%;
	border-radius: 8px;
}

/*.next {
   width: 20%; 
   height: 80px; 
   background: #BD67FF;
   position: absolute;
   right: 10%;
   opacity: 0.6;
}
.next:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-left: 20px solid #BD67FF;
   border-top: 40px solid transparent;
   border-bottom: 40px solid transparent;
   margin: 0 0 0 100%;
}*/

.next h2 	{
	padding-left: 10px;
	padding-right: 5%;
	font-style: italic;
}

.mainMenu {
	left: 40%;
	width: 20%; 
	height: 80px; 
	border: 1px solid #BFBFBF;
	position: absolute;
	border-radius: 8px;
}

.mainMenu h2 	{
	padding-left: 10px;
	font-style: italic;
}

.previous {
	width: 20%; 
	height: 80px; 
	border: 1px solid #BFBFBF;
	position: absolute;
	left: 10%;
	border-radius: 8px;
}

.previous h2 	{
	padding-left: 10px;
	font-style: italic;
}

.navTextMain	{
	position: relative;
	text-align: center;
}

.navTextNext	{
	position: relative;
	text-align: right;
}

.postIcon	{
	position: relative;
	width: 100%;
	height: 100px;
	margin-top: -10px;
}

.postIconText	{
	position: absolute;
	color: #000;
	bottom: 0;
	left: 10px;
}

.post	{
	display: block;
	clear: both;
	height: 100%;
	padding: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.intro	{
	margin-top: 160px;
	border-bottom: 1px solid #000000;
	padding-bottom: 10px;
}

.icon	{
	width: 80px;
	margin-left: 10px;
	margin-top: -10px;
}

.botCards	{
	float: left;
	margin: 5px;
	text-align: left;
}

pre {
	width: 90%;
	white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.codeMarkUp	{
	clear: both;
	padding: 15px;
	font-size: 24px;
	color: #000;
	background-color: #f9f9f9;
	opacity: 0.9;
	margin: 10px;
	border-left: 5px solid #BD67FF;
}

.codeMarkUp i 	{
	color: #BD67FF;
}

.frame 	{
	width: 100%;
	height: 300px;
	border: none;
}


@media all and (min-width: 990px)	{
	h1 	{
		font-size: 54px;
	}

	h2 	{
		font-size: 34px;
	}

	p 	{
		font-size: 22px;
		margin-left: 8px;
	}

	.code	{
		font-family: monospace;
		font-size: 24px;
	}

	.button	{
		display: inline-block;
		position: relative;
		top: 20px;
		line-height: 100px;
		width: 100px;
	}
	.button:hover	{
		filter: invert(100%);
	}

	.item1, .item2, .item3, .item4, .item5, .item6	{
		width: 14%;
		margin-left: 2%;
		margin-bottom: 4%;
		float: left;
	}

	.section p 	{
		font-size: 44px;

		
	}

	.navText	{
		position: relative;
		bottom: 12px;
	}


	.mainMenu:before {
	  left: 40%;
	}

	.botCards	{
		width: 100px;
	}

	.codeMarkUp	{
		font-size: 24px;
	}
	

}

@media all and (max-width: 990px)	{
	h1 	{
		font-size: 44px;
	}

	h2 	{
		font-size: 30px;
	}

	p 	{
		font-size: 20px;
		margin-left: 8px;
	}

	.navigation	{
		margin-top: 0px;
		margin-bottom: 100px;
	}

	.code	{
		font-family: monospace;
		font-size: 22px;
	}

	.button	{
		display: inline-block;
		position: relative;
		top: 15px;
		line-height: 80px;
		width: 80px;
	}
	.button:hover	{
		filter: invert(100%);
	}

	.item1, .item2, .item3	{
		display: block;
		width: 28%;
		margin-left: 4%;
		float: left;
	}

	.item4	{
		display: block;
		clear: both;
		width: 28%;
		margin-left: 4%;
		margin-top: 4%;
		margin-bottom: 8%;
		float: left;
	}
	.item5, .item6	{
		width: 28%;
		margin-left: 4%;
		margin-top: 4%;
		margin-bottom: 8%;
		float: left;
	}

	.section p 	{
		font-size: 36px;
	}

	.section	{
		margin-bottom: -30px;
	}

	.curriculum p 	{

		font-size: 18px;
	}

	.navText	{
		position: relative;
		bottom: 6px;
	}

	.mainMenu:before {
	  	left: 35%;
	}
	.botCards	{
		width: 80px;
	}
	.codeMarkUp	{
		font-size: 22px;
	}

	.content	{
		padding-top: 0px;
	}
	

}

@media all and (max-width: 810px)	{
	h1 	{
		font-size: 36px;
	}

	h2 	{
		font-size: 24px;
	}

	p 	{
		font-size: 18px;
		margin-left: 8px;
	}

	.navigation	{
		margin-top: 50px;
		margin-bottom: 200px;
	}

	.code	{
		font-family: monospace;
		font-size: 18px;
	}

	.button	{
		display: block;
		clear: both;
		line-height: 60px;
		width: 120px;
		margin: auto;
	}
	.button:hover	{
		filter: invert(100%);
	}

	.item1, .item2	{
		display: block;
		width: 46%;
		margin-left: 4%;
		float: left;
	}

	.item3	{
		display: block;
		clear: both;
		width: 46%;
		margin-left: 4%;
		margin-top: 4%;
		float: left;
	}

	.item4	{
		display: block;
		clear: none;
		width: 46%;
		margin-left: 4%;
		margin-bottom: 0%;
		float: left;
	}

	.item5	{
		display: block;
		clear: both;
		width: 46%;
		margin-left: 4%;
		float: left;
	}

	.item6	{
		display: block;
		width: 46%;
		margin-left: 4%;
		float: left;
	}

	.content	{
		padding-top: 0px;
		margin-left: 3%;
	}

	.section p 	{
		font-size: 26px;
		line-height: 26px;
	}
	.curriculum p 	{

		font-size: 16px;
	}

	.navFix	{
		padding-top: 0px;
		height: 1px;
	}

	.navText	{
		position: relative;
		bottom: 13px;
	}

	.next {
	   height: 50px; 
	}
	.next:before {
	   border-left: 17px solid #BD67FF;
	   border-top: 26px solid transparent;
	   border-bottom: 23px solid transparent;
	}

	.mainMenu {
	   height: 50px; 
	}

	.previous {
	   height: 50px; 
	}
	.previous:before {
	   border-right: 17px solid #BD67FF;
	   border-top: 26px solid transparent;
	   border-bottom: 23px solid transparent;
	   margin: 0 0 0 -17px;
	}

	.mainMenu:before {
	  	left: 30%;
	  	top: -6px;
	}
	.botCards	{
		width: 60px;
	}	
	.codeMarkUp	{
		font-size: 20px;
	}

	.beebotImages	{
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 70%;
	}
	
}


@-webkit-keyframes shadow-drop-2-center {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-transform: translateZ(50px);
            transform: translateZ(50px);
    -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
            box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
  }
}
@keyframes shadow-drop-2-center {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-transform: translateZ(50px);
            transform: translateZ(50px);
    -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
            box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
  }
}


@-webkit-keyframes shadow-drop-2-left {
  0% {
    -webkit-transform: translateZ(0) translateX(0);
            transform: translateZ(0) translateX(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-transform: translateZ(50px) translateX(12px);
            transform: translateZ(50px) translateX(12px);
    -webkit-box-shadow: -12px 0 20px -12px rgba(0, 0, 0, 0.35);
            box-shadow: -12px 0 20px -12px rgba(0, 0, 0, 0.35);
  }
}
@keyframes shadow-drop-2-left {
  0% {
    -webkit-transform: translateZ(0) translateX(0);
            transform: translateZ(0) translateX(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  50% {
    -webkit-transform: translateZ(50px) translateX(12px);
            transform: translateZ(50px) translateX(12px);
    -webkit-box-shadow: -12px 0 20px -12px rgba(0, 0, 0, 0.35);
            box-shadow: -12px 0 20px -12px rgba(0, 0, 0, 0.35);
  }
  100% {
    -webkit-transform: translateZ(0) translateX(0);
            transform: translateZ(0) translateX(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}


@-webkit-keyframes shadow-drop-2-bottom {
  0% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  50% {
    -webkit-transform: translateZ(50px) translateY(-12px);
            transform: translateZ(50px) translateY(-12px);
    -webkit-box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.35);
            box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.35);
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
@keyframes shadow-drop-2-bottom {
  0% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  50% {
    -webkit-transform: translateZ(50px) translateY(-12px);
            transform: translateZ(50px) translateY(-12px);
    -webkit-box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.35);
            box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.35);
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }

}


@-webkit-keyframes shadow-drop-2-right {
  0% {
    -webkit-transform: translateZ(0) translateX(0);
            transform: translateZ(0) translateX(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  50% {
    -webkit-transform: translateZ(50px) translateX(-12px);
            transform: translateZ(50px) translateX(-12px);
    -webkit-box-shadow: 12px 0 20px -12px rgba(0, 0, 0, 0.35);
            box-shadow: 12px 0 20px -12px rgba(0, 0, 0, 0.35);
  }
  100% {
    -webkit-transform: translateZ(0) translateX(0);
            transform: translateZ(0) translateX(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
@keyframes shadow-drop-2-right {
  0% {
    -webkit-transform: translateZ(0) translateX(0);
            transform: translateZ(0) translateX(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  50% {
    -webkit-transform: translateZ(50px) translateX(-12px);
            transform: translateZ(50px) translateX(-12px);
    -webkit-box-shadow: 12px 0 20px -12px rgba(0, 0, 0, 0.35);
            box-shadow: 12px 0 20px -12px rgba(0, 0, 0, 0.35);
  }
  100% {
    -webkit-transform: translateZ(0) translateX(0);
            transform: translateZ(0) translateX(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}