@import url(font-awesome.min.css);
@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600";

.container{
    display: grid;
    grid-template-columns: minmax(120px,25%);
    grid-template-rows: 250px 60vw 100px;
    grid-area: auto;
    gap: 0em;
    padding: 0em;
    margin-left: 0em;
    background: #6a6a6a;
    left: 0;  
    width: 100%;
    position: absolute;
    font: inherit;
    top: 0;
   
  }
  .nav { font-family: FontAwesome;
	font-style: normal;
    font-weight: normal;
    color: #6a6a6a;
	font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	font-size: 14pt;
	font-weight: 400;
    line-height: 1.65;
    text-decoration: none;}
  .header {
    background: #e5d787; 
    height: 3em;
    width: 100%;
    left: 0;
    line-height: 3.25em;
    position: absolute;
    font: inherit;
    top: 0;
    z-index: 10001;
    font-family: FontAwesome;
	font-style: normal;
    font-weight: normal;
    color: #6a6a6a;
	font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	font-size: 14pt;
	font-weight: 400;
    line-height: 1.65;
    text-decoration: none;
    display: block;
     }
.header a { font-family: FontAwesome;
	font-style: normal;
    font-weight: normal;
    color: #6a6a6a;
	font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	font-size: 14pt;
	font-weight: 400;
    line-height: 1.65;
    text-decoration: none;}
.header h1 { font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      color: #6a6a6a;
      font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
      font-size: 34pt;
      font-weight: 100;
      line-height: 1.65;
      text-decoration: none;
      padding: 0;
      letter-spacing: 5pt;
    }
  .left-side {
    
    grid-column-start: 1 ;
    grid-row-start: 2;
    background: #6a6a6a
  }
	
  .main {
    grid-column: 2 / 2;
    grid-row: 2;
    background: #6a6a6a;
    place-items: center;
    z-index: 1;
    
  }
  .main h1 {
    font-family: FontAwesome;
	font-style: normal;
    font-weight: normal;
    color:#494b4f;
	font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	font-size: 40pt;
	font-weight: 400;
    line-height: 1.65;
    text-decoration: none;
    margin: auto;
  width: 75%;
  
  padding: 10px;
  }
  .main h3 {
    font-family: FontAwesome;
	font-style: normal;
    font-weight: normal;
    color:#494b4f;
	font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	font-size: 20pt;
	font-weight: 400;
    line-height: 1.65;
    text-decoration: none;
    margin: auto;

  padding: 10px;
  }
  .main h5 {
    font-family: FontAwesome;
	font-style: normal;
    font-weight: normal;
    color:#494b4f;
	font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	font-size: 14pt;
	font-weight: 600;
    line-height: 1.65;
    text-decoration: none;
    margin: auto;
  
  
  padding: 10px;
  }
  .main ol {
    font-family: FontAwesome;
	font-style: normal;
    font-weight: normal;
    color:#494b4f;
	font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-weight: 400;
    line-height: 1.65;
    text-decoration: none;
    margin: auto;
    text-indent: 0.5em;
  width: 75%;
  
  padding: 10px;
  }
  .main ul {
    font-family: FontAwesome;
	font-style: normal;
    font-weight: normal;
    color: #494b4f;
	font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-weight: 400;
    line-height: 1.65;
    text-decoration: none;
    margin: auto;
    width: 75%;
    
    padding: 10px;
  }
  .main p {
    font-family: FontAwesome;
	font-style: normal;
    font-weight: normal;
    color: #494b4f;
	font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-weight: 400;
    line-height: 1.65;
    text-decoration: none;
    margin: auto;
    
    z-index: 1;
    padding: 10px;
  }
  .main iframe {
    margin: auto;
    padding: 10px;
    display: block;
  }
  .main pre {
  width: 75%;
   padding: 10px;
   margin: auto;
  }
  .main a {
    font-family: FontAwesome;
	font-style: normal;
    font-weight: normal;
    color: #494b4f;
	font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	font-size:20pt;
	font-weight: 400;
    line-height: 1.65;
     
     
     margin: auto;
   
    }
.centralise {
  justify-items: center;
}
  .right-side {
    grid-column-start: 2;
    grid-row-start: 2;
    background: #ffffff  }

  .footer {
    grid-column: 1 / 4;
    grid-row: 3;
  }

  h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
} 
  
.headerbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
   
  }

  .headerleft {
    flex: 0 1 25%; /*  No stretching: */
    margin: 5px;
    align-items: flex-start;
    text-align: left;
    text-indent: 10%;
    
  }
  .headerleft img{
    width: 50%;
    height: auto;
  }
  .headercenter {
    flex: 1;
    margin-top: -10px;
    align-items: flex-start;
    text-align: center;
    vertical-align: top;
   
    color: #ffffff;
	  font-size: 35pt ;  
	  font-weight: 900;
	  
  }
  .headerright {
    flex: 0 1 300px; /*  No stretching: */
    margin: 5px;
    margin-top: 1.5em;
    justify-content: right;
    align-items: flex-end;
  }
  section {
    display: flex;
    flex-flow: column;
  }
  section > div {
    flex: 1;
    padding: 0.5rem;
  }
  input[type="radio"] {
    display: none;
  }
  input[type="radio"]:not(:disabled) ~ label {
      cursor: pointer;
    }
    
  
  label {
    font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
    height: 50%;
    display: block;
    background: #826347;
    border: 2px solid #e5d787;
    border-radius: 20px;
    padding: 0.2rem;
    margin-bottom: 0.2rem;
    color: #e5d787;
    text-align: center;
    max-width: 70%;
    margin-left: 25%;
    /*box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5);*/
    position: relative;
  }
  input[type="radio"]:checked + label {
    background: #e5d787;
    color: #826347 ;
    /*box-shadow: 0px 0px 20px rgba(0, 255, 128, 0.75);*/
  }
    input[type="radio"]:after + label{
      color: #6cc091;
      font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
      border: 2px solid #6cc091;
      content: "\f00c";
      font-size: 24px;
      position: absolute;
      top: -25px;
      left: 50%;
      transform: translateX(-50%);
      height: 50px;
      width: 50px;
      line-height: 50px;
      text-align: center;
      border-radius: 50%;
      background: white;
      /*box-shadow: 0px 2px 5px -2px hsla(0, 0%, 0%, 0.25);*/
    }
  .white-box {
    background: white;
    max-width: 50em;
    max-height: 50em;
    border-radius: 10pt;

  }
  .white-box p {
    font-weight: 100;
    font-size: 20pt;
    margin: 10pt;
    color: #826347;
  }
  
  p {
    font-weight: 100;
    font-size: 40pt;
    margin: 10pt;
      }
  code {
    margin: auto;
  }
  a {
    margin: auto;
    
  }
  /*Hidey Bits*/
  #Lesson1Box {
    display: block;
    width: 90%;
    height: 100%;
  }
  #Lesson2Box {
    display: none;
    width: 90%;
    height: 60%;
  }
  #Lesson3Box {
    display: none;
    width: 90%;
  }
  #Lesson4Box {
    display: none;
    width: 90%;
  }
  #Lesson5Box {
    display: none;
    width: 90%;
  }
  #NextButton {
   border-radius: 30px;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #6cc091;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
  line-height: normal;
  letter-spacing: 0ch;
}
  
  .textLeft {
    text-align: left;
    padding-left: 15%;
  }
  ul {
    font-family: FontAwesome;
	font-style: normal;
    font-weight: normal;
    color: #494b4f;
	font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-weight: 400;
    line-height: 1.65;
    text-decoration: none;
    margin: auto;
    width: 75%;
    
    padding: 10px;
  }
  .img {
    display: block;
    width: 50%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    text-align: center;
  }
  .logo {
    display: block;
    
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    text-align: center;
  }
  
  .imgEnlarge {
    
    transform: scale(2);
    margin-top: 10px;
    margin-bottom: 10px;
  }
.ifr { 
  width: 50%;
  height: auto;
}
.videoWrapper {
  position: relative;
  padding-bottom: 5%; /* 16:9 */
 

  margin-right: 1em;
  margin-bottom: -10em;
  z-index: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 
}
.imagewrapper {
 position: relative;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  
  }
.imagewrapper img {
  max-width: 640px;
  width: 90%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.postwrapper {
    display: grid;
    grid-template-columns: 1px 1fr;
    grid-template-rows: 50px auto 100px;
    grid-area: auto;
    gap: 1em;
    margin-left: 0em;
   
  }
  .postlist {
    background-color: #ffffff;
    margin-bottom: 1em;
      
  }
  .postlist h3 {
    padding: 0;
    /**width: 90%;**/
      
  }
  .postlist ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-family: FontAwesome;
	font-style: normal;
  font-weight: normal;
  color: #494b4f;
	font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	font-size: 24pt;
	font-weight: 400;
  line-height: 1.65;
     width: 70%;
  }
  .postlist ul li a {
    display: block;
    text-decoration: none;
    font-size: 16pt;
	font-weight: 400;
  line-height: 2;
  /**width: 300pt;**/
  }
  .postlist ul li a:hover {
    background-color:#6cc091;
    color: white;
  }
  .coursedetails {
    display: none;
    border: 5px solid grey;
    border-color: black;
    border-radius: 10pt;
    border-width: medium;
    width: 70%;
    margin: auto;
  }

  .rca_header {
    background: #6d6d6d; 
    height: 3em;
    width: 100%;
    left: 0;
    line-height: 3.25em;
    position: absolute;
    font: inherit;
    top: 0;
    z-index: 10001;
    font-family: FontAwesome;
	font-style: normal;
    font-weight: normal;
    color: #f3efef;
	font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	font-size: 14pt;
	font-weight: 400;
    line-height: 1.65;
    text-decoration: none;
    display: block;
     }
@media screen and (max-width: 1024px) {
  
  .container{
    display: grid;
    max-width: 100%;
   grid-template-columns: 100%;
    grid-template-rows: 50px auto 100px;
    grid-area: auto;
   
    margin-left: 0em ;
    margin-right: 5%;
  }
  .left-side {
    display: none;
  }
  .header {
    width: 200vw;
  }
  .headercenter {
    display: none;

  }
  .headerleft {
    display: none;
  }
  .headerright {
    flex: 1;
    align-items: flex-start;
  }
  .main {
    grid-column-start: 1 ;
    grid-row-start: 2;
    background: #6a6a6a;
    place-items: left;
    width: 100%;
       
  }
  .main H1 {
    font-size:15pt;
    width: 100%;
    margin: auto;
    padding: 2px;
  }
  .main h3 {
    margin: 0em ;
  }
  .main p {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 2px;
    margin-block-start: 0;
    margin-block-end: 0;
  }
  .videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    margin-right: 1em;
    margin-bottom: 1em ;
  }
  .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0 ;
    width: 100%;
    height: 75%;
  }
  .img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: 0px ;
    margin-right: auto;
    
    text-align: left;
  }
  .postwrapper{
    display: grid;
    max-width: 100%;
   grid-template-columns: 100%;
    grid-template-rows: 50px auto 100px;
    grid-area: auto;
   
    
    margin-right: 5%;
  }
}
.inner {
  max-width: 75em;
  margin: 0 auto;
  place-items: center;
}

  @media screen and (max-width: 1280px) {

    .inner {
      max-width: 90%;
    }

  }

  @media screen and (max-width: 480px) {

    .inner {
      max-width: 90%;
    }

  }
  .flex {
		display: -ms-flexbox;
		-ms-flex-wrap: wrap;
		-ms-flex-pack: justify;
		-moz-justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		width: 100%;
	}

		

		@media screen and (max-width: 1500px) {

			.flexitem {
				margin-bottom: 3em;
        width: 100% !important;
        place-self: center;
			}
      .flexitem a {
        place-self: center im !important;
      }

		}
    .bstyle {
      line-height: 2.85em !important;
      letter-spacing: 2px !important;
      color: #6cc091 !important;
    }
    input[type="submit"],
    input[type="reset"],
    input[type="button"],
    button,
    .button {
      -moz-appearance: none;
      -webkit-appearance: none;
      -ms-appearance: none;
      appearance: none;
      -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
      -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
      -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
      background-color: transparent;
      box-shadow: inset 0 0 0 3px #6cc091;
      color: #6cc091 ;
      border-radius: 30px;
      border: 0;
      cursor: pointer;
      display: inline-block;
      font-size: 1em ;
      font-weight: 400 ;
      height: 2.75em;
      line-height: 2.85em ;
      letter-spacing: 2px;
      
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      white-space: nowrap;
      vertical-align: baseline;
      width: 9em ;
      box-sizing: border-box;
    }
  
      input[type="submit"]:hover,
      input[type="reset"]:hover,
      input[type="button"]:hover,
      button:hover,
      .button:hover {
        background-color: rgba(108, 192, 145, 0.15);
      }
  
      input[type="submit"]:active,
      input[type="reset"]:active,
      input[type="button"]:active,
      button:active,
      .button:active {
        background-color: rgba(108, 192, 145, 0.15);
      }
  
      input[type="submit"].icon,
      input[type="reset"].icon,
      input[type="button"].icon,
      button.icon,
      .button.icon {
        padding-left: 1.35em;
      }
  
        input[type="submit"].icon:before,
        input[type="reset"].icon:before,
        input[type="button"].icon:before,
        button.icon:before,
        .button.icon:before {
          margin-right: 0.5em;
        }
  
      input[type="submit"].fit,
      input[type="reset"].fit,
      input[type="button"].fit,
      button.fit,
      .button.fit {
        display: block;
        margin: 0 0 1em 0;
        width: 100%;
      }
  
      input[type="submit"].small,
      input[type="reset"].small,
      input[type="button"].small,
      button.small,
      .button.small {
        font-size: 0.8em;
      }
  
      input[type="submit"].big,
      input[type="reset"].big,
      input[type="button"].big,
      button.big,
      .button.big {
        font-size: 1.35em;
      }
  
      input[type="submit"].alt,
      input[type="reset"].alt,
      input[type="button"].alt,
      button.alt,
      .button.alt {
        background-color: transparent;
        box-shadow: inset 0 0 0 3px #FFF;
        color: #fff !important;
      }
  
        input[type="submit"].alt:hover,
        input[type="reset"].alt:hover,
        input[type="button"].alt:hover,
        button.alt:hover,
        .button.alt:hover {
          background-color: #7ec89e;
        }
  
        input[type="submit"].alt:active,
        input[type="reset"].alt:active,
        input[type="button"].alt:active,
        button.alt:active,
        .button.alt:active {
          background-color: #7ec89e;
        }
  
        input[type="submit"].alt.icon:before,
        input[type="reset"].alt.icon:before,
        input[type="button"].alt.icon:before,
        button.alt.icon:before,
        .button.alt.icon:before {
          color: #bbb;
        }
  
      input[type="submit"].special,
      input[type="reset"].special,
      input[type="button"].special,
      button.special,
      .button.special {
        background-color: #6cc091;
        color: #ffffff !important;
      }
  
        input[type="submit"].special:hover,
        input[type="reset"].special:hover,
        input[type="button"].special:hover,
        button.special:hover,
        .button.special:hover {
          background-color: #7ec89e;
        }
  
        input[type="submit"].special:active,
        input[type="reset"].special:active,
        input[type="button"].special:active,
        button.special:active,
        .button.special:active {
          background-color: #5ab884;
        }
  
      input[type="submit"].disabled, input[type="submit"]:disabled,
      input[type="reset"].disabled,
      input[type="reset"]:disabled,
      input[type="button"].disabled,
      input[type="button"]:disabled,
      button.disabled,
      button:disabled,
      .button.disabled,
      .button:disabled {
        background-color: #9a9a9a !important;
        box-shadow: inset 0 -0.15em 0 0 rgba(0, 0, 0, 0.15);
        color: #fff !important;
        cursor: default;
        opacity: 0.25;
      }
  
      @media screen and (max-width: 480px) {
  
        input[type="submit"],
        input[type="reset"],
        input[type="button"],
        button,
        .button {
          padding: 0;
          width: 100%;
        }
  
      }
      
      hr {
        border: 0;
        border-bottom: solid 1px #dbdbdb;
        margin: 2em 0;
      }
    
        hr.major {
          margin: 3em 0;
        }
.aligncenter {
  text-align: center;
}    
.icon {
  text-decoration: none;
  border-bottom: none;
  position: relative;
  font-size: 3em;
	margin: auto;
  color: #6cc091;
}

  .icon:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-transform: none !important;
  }

  .icon > .label {
    display: none;
  }
  .postlist ul {
    width: 100%;
  }
  @media screen and (max-width: 1500px) and (min-width: 800px) {
    body {
      width: 100vw;
    }}
    
.flexbox {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10%;
     
    }

    .boxshadow {
      border: 1px solid;
      padding: 10px;
      box-shadow: 5px 10px #888888;
      margin-bottom: 1em;
      max-width: 15em;
}
.boxshadow ul {
  list-style-type: none;
}
#scrollingdiv {
  min-width: 20em;
  margin-top: 6em;
  position: fixed;
  scroll-behavior: smooth;
}
#buttondiv {
  display: block;
}
.formdiv {
  width: 400px;
}
.formdiv input {
  height: 30px;
  width:  100px;
  font-size: 16;
}
.formdiv label {
  height: 30px;
  width:  100px;
  font-size: 16;
}