html,body
{
    width: 100%;
    margin: 0px;
    padding: 0px;
    height: 100%;
    scroll-behavior: smooth; 
}

div.navBar {
  display:block;
  height:60px;
  width:100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index:999;
  background-color: white;
  position:fixed;
}

#totop {
  position:fixed;
  bottom:8%;
  right:8px;
  opacity:0.9;
  font-size: 35px;
  z-index: 99;
  color:#ff4646 ;
  display:none;
  outline:none;
  border:none;
  background:none;
}

#totop:hover {
  opacity: 1;
}

#enterFullScreen {
  position:fixed;
  bottom:2%;
  right:18px;
  opacity:0.6;
  font-size: 28px;
  z-index: 99;
  color:#000000;
  outline:none;
  border:none;
  background:none;
}

#enterFullScreen:hover {
  opacity: 1;
}

a.logo {
  height:auto;
}

a.icon {
  position: absolute;
  right: 12px;
  top: 14px;
  font-size: 25px;
  color:black;
}

img.logo {
  height:60px;
  width:auto;
}

.dropdown-content1, .dropdown-content2, .dropdown-content3 {
  display:none;
}

.dropdown-content1 a, 
.dropdown-content2 a, 
.dropdown-content3 a {
  float:left;
  color:black;
}

.off, .off2, .off3, .off4, .off5 {
  display:inline-block;
  color:#30475e;
  letter-spacing: 1.4px;
  font-family: 'Oswald', sans-serif;
}

.dropdownNavBar {
  background-color: white;
  display:none;
  text-align: center;
  height:101vh;
  opacity: 0.95;
}

.dropdownNavBar a {
  margin:3px;
  padding: 10px 10px;
  text-decoration: none;
  font-size:15px;
  text-align: center;
  width:100%;
  cursor:pointer;
}

.dropdown-content1,
.dropdown-content2,
.dropdown-content3 {
  font-size: 12px;
  font-family: 'Oswald', sans-serif;
  color:black;
  padding-left:0px;
  letter-spacing: 1px;
}

.dropdown-content1 a:hover,.dropdown-content2 a:hover, .dropdown-content3 a:hover {
  background-color: #ddd;
}

.show {
  display:block;
  width:100%;
}

.dropdownNavBar2 {
  background-color: white;
  display:none;
  text-align: center;
  height:101vh;
  opacity: 0.95;
  font-size:15px;
}

#dropdownNavBar2 {
  display:none;
  opacity:1;
  background-color: transparent;
  position:fixed;
  right:0px;
  top:11px;
  width:85%;
  height:auto;
  text-align: right;
}

@media screen and (min-width: 768px) {
  div.dropdownNavBar2 {
    display:none;
  }
  #dropdownNavBar2 {
    display:block;
  }
  a.icon {
    display:none;
  }
  .dropdownNavBar2 a {
    float: none;
    width:auto;
    font-size: 14px;
    padding:8px;
    text-decoration: none;
  }
}

div.imgBanner {
  position:relative;
  top:60px;
  overflow: hidden;
  max-height:450px;
  width:100%;
}

div.download {
  padding:1% 8% 1% 8%;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-items: center;
  align-items: center;
}

div.qr {
  justify-items: center;
  grid-template-rows: repeat(1fr 1fr 2fr);
}

img.appstore {
  position:absolute;
  width:45%;
  max-width:300px;
  height:auto;
  bottom:10px;
  right:10px;
}

img.qr {
  width:180px;
  height:auto;
}


div.imgBanner2 {
  position:relative;
  top:0px;
  overflow: hidden;
  max-height:450px;
  width:100%;
}

img.banner1 {
  width:100%;
}

div.text-block {
    position:absolute;
    top: 30%;
    left: 32%;
    width: 65%;
    color: black;
}

h4.text-block1 {
  font-family: "futura-pt",sans-serif;
  font-size: 28px;
  font-weight: 550;
  letter-spacing:0px;
  width:100%; 
}

div.text-block2 {
    position:absolute;
    top: 37%;
    left:23%;
    width: 55%;
    color: white;
}

h4.text-block2 {
  font-family: "futura-pt",sans-serif;
  font-size: 30px;
  font-weight: 550;
  letter-spacing:0px;
  width:100%;
  text-align: center; 
}

div.text-block3 {
    position:absolute;
    top: 45%;
    left:16%;
    width: 70%;
    color: black;
}


h4.text-block3 {
  font-family: "futura-pt",sans-serif;
  font-size: 28px;
  font-weight: 550;
  letter-spacing:0px;
  width:100%;
  text-align: center; 
}

div.text-block5 {
    position:absolute;
    top: 20%;
    right:8%;
    width: 42%;
    color: white;
    padding-top:7px;
    padding-bottom:7px;
}

h4.text-block5 {
  font-family: "futura-pt",sans-serif;
  font-size: 30px;
  font-weight: 550;
  letter-spacing:0px;
  width:100%;
  text-align: right;
}


p.text-block2 {
  font-family: Oswald, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size:18px; 
  padding:0;
  margin:0px 10px 10px 0px;
  letter-spacing:1px;
}

@media screen and (max-width: 430px) {
  div.text-block {
    top:25%;
    width:63%;
  }
  h4.text-block1 {
    font-size:20px;
  }
  p.text-block2 {
    font-size:16.5px;
  }
  div.text-block3 {
    top:25%;
  }
  div.text-block2 {
    top:30%;
  }
   h4.text-block2 {
    font-size:25px;
   }
   div.text-block5 {
    top:12%;right:8%;width:40%;
   }
   h4.text-block5 {
    font-size:24px;

   }
}

@media screen and (min-width: 600px) {
   h4.text-block5 {
    font-size:32px;
   }
}

@media screen and (min-width: 768px) {
  h4.text-block1 {
    font-size:38px;
  }
  p.text-block2 {
    font-size:25px;
  }
  h4.text-block5 {
    font-size:35px;
   }
}

@media screen and (min-width: 1024px) {
  div.text-block5 {
    width:42%;
  }
  h4.text-block5 {
    font-size:38px;
   }
}

@media screen and (min-width: 1200px) {
  div.text-block5 {
    width:45%;
  }
  h4.text-block5 {
    font-size:42px;
   }
  div.text-block3 {
    top:50%;
  } 
}

.btmDes {
  font-family: "futura-pt", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size:19px;
  margin-bottom:0;
  margin-top:10px;
  text-align:center;
  padding-left: 4%;
  padding-left: 4%; 
}

div.btmNavBar1 {
  text-align: center;
  padding-left:1%;
  font-family: Oswald, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size:14px; 
  letter-spacing: 0.8px;
 } 

.btmNavBar1 a {
  float:left;
  padding:7px;
  margin:2px;
  color:black;
  text-decoration: none;
  text-align:center;
}

.btmNavBar1 a:hover {
  outline: 1.1px solid gray;
  outline-offset: 0px;
}

@media screen and (min-width: 768px) {
  div.btmNavBar1 {
    font-size:16px;
  }
}

div.content1 {
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  width:100%;
  margin:auto;
  margin-top:15px;
}

img.content1 {
  width:100%;
  margin-top: 0;
  height:auto;
  max-height:250px;
}

h1.content1 {
  font-family: "Oswald", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size:24px;
  margin-bottom:0;
  padding-left:7px;
}

p.content1 {
  font-family: "futura-pt", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size:15.5px;
  margin-top:0;
  padding-left:7px;
  padding-right:7px;
  cursor: pointer;
  line-height: 1.5;
}

@media screen and (min-width: 1000px) {
  div.content1 {
    width:70%;
  }
}

.add1, .close {
  display:none;
}

.show2 {
  display:inline;
}

.show3 {
  display:block;
  text-align: center;
}

.hide2 {
  display:none;
}

div.click {
  cursor: pointer;
}

div.slideshow {
  position: relative;
  width:100%;
  height:auto;
}

div.slideshow2 {
  position: relative;
  width:100%;
  height:350px;
  display:block;
}


img.slideshowImg {
  width:100%;
  max-width:400px;
  display:block;
  margin: auto;
}



.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  display:table-cell;
  vertical-align: middle;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

img.card {
  width:100%;
  max-height:150px;
  overflow:hidden;
}

div.rev {
  width:100%;
  padding-top:0;
  margin-bottom:15px;
}

img.rev {
  width:100%;
  margin-top:0;
}

p.rev {
  font-family: "futura-pt", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size:19px;
  margin:auto;
  padding-top:10px;
  padding-left:10px;
  padding-right:10px;
  text-align: left;
  width:90%;
  line-height: 1.5;
}

@media screen and (min-width: 768px) {
  p.rev {
    width:60%;
    display:block;
    margin-left:auto;
    margin-right:auto;
  }
}


div.content3 {
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  max-width:460px;
  margin: auto;
  margin-top:15px;
  margin-bottom: 15px;
  overflow: hidden;
  min-height:500px;
}

@media screen and (min-width: 992px) {
  div.content3 {
    float:left;
    margin: 10px 10px 10px 10px ;
  }
}


h1.card1 {
  font-family: "Oswald", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size:30px;
  padding-left:10px;
}

h2.card1 {
  font-family: "Oswald", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size:24px;
  padding-left:10px;
}

p.card1 {
  font-family: "futura-pt", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size:15.5px;
  margin-top:0;
  padding-left:10px;
  padding-right:10px;
  cursor: pointer;
  text-align: left;
  line-height: 1.5;
}

div.partnership1 {
  margin-left: auto;
  margin-right: auto;
  height:220px;
}

img.partnership1 {
  width:180px;
  height:180px;
  float:left;
  margin-left:4%;
  padding-top:20px;
}

p.partnership {
  width:52%;
  float:left;
  margin-right:1%;
  text-align: right;
  font-family: "Oswald", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size:18px;
}

@media only screen and (max-width: 430px) {
  div.partnership1 {
    width:90%;
    height:auto;
    padding:4%;
  }
  img.partnership1 {
    float:none;
    display:block;
    margin-left:auto;
    margin-right:auto;
    max-width:180px;
    width:60%;
  }
  p.partnership {
    float:none;
    width:100%;
    margin:auto;
    text-align: left;
  }
}


@media only screen and (min-width: 768px) {
  div.partnership1 {
    width:80%;
  }
  p.partnership {
    width:65%;
  }
}

@media only screen and (min-width: 1000px) {
  div.partnership1 {
    width:70%;
  }
  p.partnership {
    font-size:21px;
    width:65%;
  }
}

@media only screen and (min-width: 1400px) {
  div.partnership1 {
    width:70%;
    padding-left:5%;
  }
  p.partnership {
    font-size:21px;
    width:65%;
    margin-right:auto;
  }
}

div.tutDesA {
  margin:auto;
  width:97%;
}
  
div.revbtnbox {
  width:100%;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  justify-items:center;
}

div.revbtn {
  
}

a.revbtn {
  width:auto;
  height:auto;
  text-decoration: none;
  padding:10px;
  font-family: "Oswald", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size:16px;
  border-radius: 12px;
  background-color: #ffee93;
  color:black;
  display:inline-block;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  text-align: center; 
  margin:0 0 0 0;
  place-self:center;
}

div.tutDes {
  padding-top:10px;
  padding-bottom:10px;
  padding-left:15px;
  padding-right:15px;
  text-align: center;
}

img.schLogos {
  margin-left: auto;
  margin-right: auto;
  width:99%;
  max-width: 600px;
}

@media only screen and (min-width: 768px) {
  div.tutDesA {
    width:70%;
  }
}
@media only screen and (min-width: 992px) {
  div.tutDesA {
    width:60%;
  }
}  

img.imgTut {
  float:left;
  height:auto;
  max-height: 140px;
  max-width:130px;
  width:120px;
  padding:10px;
  padding-top:20px;
}

div.tutDes1 {
  font-family: "Oswald", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size:28px;
  margin-left: 2%;
  clear:left;
  padding:3%;
}

div.tutDes2 {
  font-family: "futura-pt", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size:20px;
  text-align: left;
  margin-left:2%;
  margin-right: 2%;
  padding: 2%;
  padding-left: 4%;
  line-height: 1.5;
}

/*div.tutDes3 {
  font-family: "futura-pt", sans-serif;
  font-weight: 500;
  font-size:20px;
  width:100%;
  text-align: left;
}*/

@media only screen and (min-width: 600px) {
  div.tutDes {
    width:70%;
    margin-right: auto;
    margin-left:auto;
  }
}
@media only screen and (min-width: 768px) {
  div.tutDes {
    width:60%;
    margin-right: auto;
    margin-left:auto;
  }
}


img.testimonial {
  width:90%;
} 

@media only screen and (min-width: 600px) {
  img.testimonial {
    width:70%;
  }
}

a.button {
  text-decoration: none;
  padding:10px;
  font-family: "Oswald", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size:20px;
  border-radius: 12px;
  background-color: #FFA500;
  color:black;
  margin-top:8px;
  display:inline-block;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

img.wmac, img.wmac2 {
  width:100%;
}

@media only screen and (min-width: 600px) {
  img.wmac2 {
    display:none;
  }
}  

#lastline {
  clear:left;
  background-color:#EDE9E8;
  color:black;
  text-align: center;
  font-family: "futura-pt",sans-serif;
  font-size: 14px;
  letter-spacing:0.7px;
  padding-top:6px;
  padding-bottom:6px;
}

#quote {
  clear:left;
  background-color:#EDE9E8;
  color:black;
  text-align: center;
  font-family: "futura-pt",sans-serif;
  font-size: 12px;
  letter-spacing:0.7px;
  padding-top:6px;
  padding-bottom:6px;
  padding-left:20px;
  padding-right: 20px;
}

.map-responsive{
    overflow:hidden;
    padding-bottom:0%;
    position:relative;
    height:250px;
    width:100%;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

div.contactDes {
  padding-top:10px;
  padding-bottom:10px;
  padding-left:25px;
  padding-right:25px;font-family: "futura-pt",sans-serif;
  font-size: 20px;
  letter-spacing:0.7px;
  text-align: center;
}

p.contactDes {
  width:50%;
  margin:auto;
}
@media screen and (max-width: 768px) {
  p.contactDes {
    width:100%;
  }
}

/*progressive difficulties
/*Progression - for pic on right, textbox on left*/
h4.revTextLeft4 {
  
  font-family: "futura-pt",sans-serif;
  font-size: 35px;
  font-weight: 550;
  letter-spacing:0px;
  text-align: left;
  margin:0 0 0 20%;
  color:white;
  z-index: 90;
}

p.revTextLeft4 {
  font-family: "futura-pt",sans-serif;
  font-size: 25px;
  font-weight: 200;
  letter-spacing:0px;
  margin-left:20%;
  text-align: left;
  color:white;
}

div.colourBox4 {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-items: center;
  align-items: center;
  height:500px;
  max-height:500px;
  background-color: #8f384d;
  overflow: hidden;
}

img.colourBoxRight4 {
  width:310px;
  justify-self: center;
}


@media screen and (max-width: 600px) {
  div.colourBox4 {
    padding-top:16px;
    padding:5%;
    display:block;
  }
  img.colourBoxRight4 {
    position:static;
    display:block;
    margin-left:auto;
    margin-right: auto;
  }
  h4.revTextLeft4 {
    position:static;
    width:100%;
    text-align: center;font-size:32px;
    margin:auto;
  }
  p.revTextLeft4 {
    position:static;
    font-size:18px;
    width:95%;
    margin-right: 8px;
    margin-left: 8px;
    display:block;
  } 
}

/*Self evaluative learner profiling
/*for pic on left, textbox on right*/
h4.revTextRight1 {
  font-family: "futura-pt",sans-serif;
  font-size: 40px;
  font-weight: 550;
  letter-spacing:0px;
  margin:0 20% 0 0;
  text-align: right; 
  color:white;
  z-index:95;
}

p.revTextRight1 {
  font-family: "futura-pt",sans-serif;
  font-size: 25px;
  font-weight: 200;
  letter-spacing:0px;
  margin-right:20%;
  text-align: right;
}

div.colourBox1 {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-items: center;
  align-items: center;
  height:500px;
  max-height:500px;
  background-color: #16697a;
  overflow: hidden;
}

img.colourBoxLeft1 {
  position:relative;
  bottom:-70px;
  width:250px;
  justify-self: center;
  align-self: end;
  grid-area: 1 / 1 / 2 / 2;
}

@media screen and (max-width: 600px) {
  img.colourBoxleft1 {
    position:static;
    display:block;
    margin-left: auto;
    margin-right: auto;
    width:220px;
  }
  h4.revTextRight1 {
    position:static;
    width:100%;
    text-align: center;font-size:32px;
  }
  p.revTextRight1 {
    position:static;
    font-size:18px;
    width:95%;
    margin-right: 8px;
    margin-left: 8px;
    display:block;
    text-align: justify;
  } 
  div.colourBox1 {
    padding-top:16px;
    padding:5%;
    display:block;
  }
}

/*timed assessments for authentic environment
/*for pic on right, textbox on left*/
h4.revTextLeft2 {
  font-family: "futura-pt",sans-serif;
  font-size: 35px;
  font-weight: 550;
  letter-spacing:0px;
  margin:0 0 0 20%;
  text-align: left; 
  color:white;
}

p.revTextLeft2 {
  margin-left:20%;
  font-family: "futura-pt",sans-serif;
  font-size: 25px;
  font-weight: 200;
  letter-spacing:0px;
  text-align: left;
}

div.colourBox2 {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-items: center;
  align-items: center;
  height:500px;
  max-height:500px;
  background-color: #DB6400;
  overflow: hidden;
  
}

img.colourBoxRight2 {
  position:relative;
  bottom:-70px;
  width:250px;
  justify-self: center;
  align-self: end;
}

@media screen and (max-width: 600px) {
  img.colourBoxRight2 {
    position:static;
    display:block;
    margin-left: auto;
    margin-right: auto;
    width:220px;
  }
  h4.revTextLeft2 {
    position:static;
    width:100%;
    text-align: center;
    font-size:32px;
    margin:auto;
  }
  p.revTextLeft2 {
    position:static;
    font-size:18px;
    width:95%;
    margin-right: 8px;
    margin-left: 8px;
    display:block;
    text-align: center;
  } 
  div.colourBox2 {
    padding-top:16px;
    padding:5%;
    display:block;
  }
}
/*for pic on right, textbox on left*/

/*Immediate feedback
/*for pic bottom, textbox top*/
h4.revTextLeft3 {
  font-family: "futura-pt",sans-serif;
  font-size: 35px;
  font-weight: 550;
  letter-spacing:0px;
  margin: 0 3% 3% 3%;
  text-align: center; 
  padding: 0 3% 0 3%;
  color:white;
}

p.revTextLeft3 {
  padding: 0 3% 0 3%;
  font-family: "futura-pt",sans-serif;
  font-size: 25px;
  font-weight: 200;
  letter-spacing:0px;
  margin: 0 3% 0 3%;
  text-align: center;
}

div.colourBox3 {
  display:grid;
  grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
  justify-items: center;
  align-items: center;
  height:500px;
  max-height:500px;
  background-color: #ffa62b;
  overflow: hidden;
  
}

img.colourBoxRight3 {
  position:relative;
  top:130px;
  left:-10px;
  width:240px;
  
}

img.colourBoxRight3a {
  position:relative;
  top:100px;
  right:-10px;
  width:240px;

}

@media screen and (max-width: 600px) {
  p.revTextLeft3 {
    font-size:18px;
  }
}

@media screen and (max-width: 480px) {
  img.colourBoxRight3 {
    width:180px;
    top:90px;
  }
  img.colourBoxRight3a {
    width:180px;
    top:70px;
  }
}

@media screen and (max-width: 360px) {
  img.colourBoxRight3 {
    width:150px;
    top:90px;
  }
  img.colourBoxRight3a {
    width:150px;
    top:70px;
  }
}


/*auto archival
/*for pic on right, textbox on left*/
h4.revTextLeft10 {
  
  font-family: "futura-pt",sans-serif;
  font-size: 35px;
  font-weight: 550;
  letter-spacing:0px;
  margin:0 0 0 20%;
  text-align: left; 
  color:white;
}

p.revTextLeft10 {
 
  font-family: "futura-pt",sans-serif;
  font-size: 25px;
  font-weight: 200;
  letter-spacing:0px;
  margin-left:20%;
  text-align: left;
}

div.colourBox10 {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-items: center;
  align-items: center;
  height:500px;
  max-height:500px;
  background-color: #86aba1;
  overflow: hidden;
}

img.colourBoxRight10 {
  position:relative;
  bottom:-70px;
  width:250px;
  justify-self: center;
  align-self: end;
}

@media screen and (max-width: 600px) {
  img.colourBoxRight10 {
    position:static;
    display:block;
    margin-left: auto;
    margin-right: auto;
    width:220px;
  }
  h4.revTextLeft10 {
    position:static;
    width:100%;
    text-align: center;
    font-size:32px;
    margin:auto;
  }
  p.revTextLeft10 {
    position:static;
    font-size:18px;
    width:95%;
    margin-right: 8px;
    margin-left: 8px;
    display:block;
    text-align: justify;
  } 
  div.colourBox10 {
    padding-top:16px;
    padding:5%;
    display:block;
  }
}

/*box11*/
/*for pic on left, textbox on right*/
h4.revTextRight11 {
  font-family: "futura-pt",sans-serif;
  font-size: 40px;
  font-weight: 550;
  letter-spacing:0px;
  margin:0 20% 0 0;
  text-align: right; 
  color:white;
  z-index:95;
}

p.revTextRight11 {
  font-family: "futura-pt",sans-serif;
  font-size: 25px;
  font-weight: 200;
  letter-spacing:0px;
  margin-right:20%;
  text-align: right;
}

div.colourBox11 {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-items: center;
  align-items: center;
  height:500px;
  max-height:500px;
  background-color: #d68060;
  overflow: hidden;
}

img.colourBoxLeft11 {
  position:relative;
  bottom:-120px;
  width:250px;
  justify-self: center;
  align-self: end;
  grid-area: 1 / 1 / 2 / 2;
}

@media screen and (max-width: 600px) {
  img.colourBoxleft11 {
    position:static;
    display:block;
    margin-left: auto;
    margin-right: auto;
    width:220px;
  }
  h4.revTextRight11 {
    position:static;
    width:100%;
    text-align: center;font-size:32px;
  }
  p.revTextRight11 {
    position:static;
    font-size:18px;
    width:95%;
    margin-right: 8px;
    margin-left: 8px;
    display:block;
    text-align: justify;
  } 
  div.colourBox11 {
    padding-top:16px;
    padding:5%;
    display:block;
  }
}

/*auto archival
/*for pic on right, textbox on left*/
h4.revTextLeft12 {
  font-family: "futura-pt",sans-serif;
  font-size: 35px;
  font-weight: 550;
  letter-spacing:0px;
  text-align: center; 
  color:white;
}

p.revTextLeft12 {
 
  font-family: "futura-pt",sans-serif;
  font-size: 25px;
  font-weight: 200;
  letter-spacing:0px;
  text-align: center;
}

div.colourBox12 {
  display:grid;
  grid-template-rows: minmax(100px, 1fr) minmax(100px, 2fr);
  justify-items: center;
  align-items: center;
  height:500px;
  max-height:500px;
  background-color: #007965;
  overflow: hidden;
}

img.colourBoxRight12 {
  position:relative;
  bottom:-110px;
  width:500px;
  margin-left: auto;
  margin-right: auto;
  justify-self: center;
  align-self: top;
}

@media screen and (max-width: 600px) {
  img.colourBoxRight12 {
    width:300px;
    bottom:-40px;
  }
  h4.revTextLeft12 {
    position:static;
    width:100%;
    text-align: center;
    font-size:32px;
    margin: auto;
  }
  p.revTextLeft12 {
    position:static;
    font-size:18px;
    width:95%;
    margin:10% auto auto auto;
    display:block;
    text-align: justify;
  } 
  div.colourBox12 {
    padding-top:16px;
    padding:5%;
  }
}


/*motivating interface*/
/*for pic on right, textbox on left*/
/*for pic on left, textbox on right*/
h4.revTextRight5 {
  font-family: "futura-pt",sans-serif;
  font-size: 40px;
  font-weight: 550;
  letter-spacing:0px;
  margin:0 20% 0 0;
  text-align: right; 
  color:white;
}

p.revTextRight5 {
  margin-right:20%;
  font-family: "futura-pt",sans-serif;
  font-size: 25px;
  font-weight: 200;
  letter-spacing:0px;
  
  text-align: right;
}

div.colourBox5 {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-items: center;
  align-items: center;
  height:500px;
  max-height:500px;
  background-color: #f05454;
  overflow: hidden;
}

img.colourBoxLeft5 {
  position:relative;
  bottom:-70px;
  width:250px;
  justify-self: center;
  align-self: end;
  grid-area: 1 / 1 / 2 / 2;
}

@media screen and (max-width: 600px) {
  img.colourBoxLeft5 {
    position:static;
    display:block;
    margin-left: auto;
    margin-right: auto;
  }
  h4.revTextRight5 {
    position:static;
    width:100%;
    text-align: center;
    font-size:32px;
    margin:auto;
  }
  p.revTextRight5 {
    position:static;
    font-size:18px;
    width:95%;
    margin-right: 8px;
    margin-left: 8px;
    display:block;
    text-align: center;
  }
  div.colourBox5 {
    padding-top:16px;
    padding:5%;
    display:block;
  }
}


/*auto archival
/*for pic on right, textbox on left*/
h4.revTextLeft6 {
  margin:0 0 0 20%;
  font-family: "futura-pt",sans-serif;
  font-size: 35px;
  font-weight: 550;
  letter-spacing:0px;
  
  text-align: left; 
  color:white;
}

p.revTextLeft6 {
  margin-left:20%;
  font-family: "futura-pt",sans-serif;
  font-size: 25px;
  font-weight: 200;
  letter-spacing:0px;

  text-align: left;
}

div.colourBox6 {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-items: center;
  align-items: center;
  height:500px;
  max-height:500px;
  background-color: #595b83;
  overflow: hidden;
}

img.colourBoxRight6 {
  position:relative;
  bottom:-70px;
  width:250px;
  justify-self: center;
  align-self: end;
}

@media screen and (max-width: 600px) {
  img.colourBoxRight6 {
    position:static;
    display:block;
    margin-left: auto;
    margin-right: auto;
    width:220px;
  }
  h4.revTextLeft6 {
    position:static;
    width:100%;
    text-align: center;
    font-size:32px;
    margin:auto;
  }
  p.revTextLeft6 {
    position:static;
    font-size:18px;
    width:95%;
    margin-right: 8px;
    margin-left: 8px;
    display:block;
    text-align: justify;
  } 
  div.colourBox6 {
   padding-top:16px;
    padding:5%;
    display:block;
  }
}

/*flagging of questions
/*for pic on left, textbox on right*/
h4.revTextRight7 {
  margin:0 20% 0 0;
  font-family: "futura-pt",sans-serif;
  font-size: 40px;
  font-weight: 550;
  letter-spacing:0px;
  
  text-align: right; 
  color:white;
}

p.revTextRight7 {
  margin-right:20%;
  font-family: "futura-pt",sans-serif;
  font-size: 25px;
  font-weight: 200;
  letter-spacing:0px;
  
  text-align: right;
}

div.colourBox7 {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-items: center;
  align-items: center;
  height:500px;
  max-height:500px;
  background-color: #a05344;
  overflow: hidden;
}

img.colourBoxLeft7 {
  position:relative;
  bottom:-70px;
  width:250px;
  justify-self: center;
  align-self: end;
  grid-area: 1 / 1 / 2 / 2;
}

@media screen and (max-width: 600px) {
  img.colourBoxleft7 {
    position:static;
    display:block;
    margin-left: auto;
    margin-right: auto;
    width:220px;
  }
  h4.revTextRight7 {
    position:static;
    width:100%;
    margin:auto;
    text-align: center;font-size:32px;
  }
  p.revTextRight7 {
    position:static;
    font-size:18px;
    width:95%;
    margin-right: 8px;
    margin-left: 8px;
    display:block;
    text-align: justify;
  } 
  div.colourBox7 {
   padding-top:16px;
    padding:5%;
    display:block;
  }
}


/*automark
/*for pic on right, textbox on left*/
h4.revTextLeft9 {
  margin:0 0 0 20%;
  font-family: "futura-pt",sans-serif;
  font-size: 35px;
  font-weight: 550;
  letter-spacing:0px;
  text-align: left; 
  color:white;
}

p.revTextLeft9 {
   margin-left:20%;
  font-family: "futura-pt",sans-serif;
  font-size: 25px;
  font-weight: 200;
  letter-spacing:0px;
 
  text-align: left;
}

div.colourBox9 {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-items: center;
  align-items: center;
  height:500px;
  max-height:500px;
  background-color: #d68060;
  overflow: hidden;
}

img.colourBoxRight9 {
  position:relative;
  bottom:-70px;
  width:250px;
  justify-self: center;
  align-self: end;
}

@media screen and (max-width: 600px) {
  img.colourBoxRight9 {
    position:static;
    display:block;
    margin-left: auto;
    margin-right: auto;
    width:220px;
  }
  h4.revTextLeft9 {
    position:static;
    width:100%;
    text-align: center;
    font-size:32px;
    margin:auto;
  }
  p.revTextLeft9 {
    position:static;
    font-size:18px;
    width:95%;
    margin-right: 8px;
    margin-left: 8px;
    display:block;
    text-align: justify;
  } 
  div.colourBox9 {
   padding-top:16px;
    padding:5%;
    display:block;
  }
}


/*extensive and growing database
/*for pic bottom, textbox top*/
h4.revTextLeft8 {
 
  font-family: "futura-pt",sans-serif;
  font-size: 35px;
  font-weight: 550;
  letter-spacing:0px;
  
  text-align: center; 
  color:white;
}

p.revTextLeft8 {
  margin:auto 10% auto 10%;
  font-family: "futura-pt",sans-serif;
  font-size: 25px;
  font-weight: 200;
  letter-spacing:0px;
  
  text-align: left;
}

div.colourBox8 {
  display:grid;
  grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
  justify-items: center;
  align-items: center;
  height:750px;
  max-height:1050px;
  background-color: #59886b;
  overflow: hidden;
}

img.colourBoxRight8 {
  position:relative;
  width:700px;
}

@media screen and (max-width: 700px) {
  img.colourBoxRight8 {
    position:static;
    margin-left: auto;
    margin-right: auto;
    width:100%;
    
  }
  h4.revTextLeft8 {
    position:static;
    width:100%;
    text-align: center;
    font-size:32px;
    margin-top:30px;
    margin:auto;
  }
  p.revTextLeft8 {
    position:static;
    font-size:18px;
    width:95%;
    margin-right: 8px;
    margin-left: 8px;
    display:block;
    text-align: justify;
    padding-top: 20px;
  }
  div.colourBox8 {
    padding-top:16px;
    padding:5%;
    display:block;
  } 
}


#close2, #hide2,
#close4, #hide4,
#close5, #hide5,
#close6, #hide6, {
  font-family: Oswald;
}

li.pastProj {
  padding:4px;
}

.pastProj {
  font-family: Oswald;
  letter-spacing: 4px;
  font-size:20px;
  text-decoration: none;
  cursor: pointer;
  list-style-type: none;
  color:black;
}

.pastProj a:hover {
  background: #06beb6;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #48b1bf, #06beb6);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #48b1bf, #06beb6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.fade-in {
  animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;
  -moz-animation: fadeIn ease 1s;
  -o-animation: fadeIn ease 1s;
  -ms-animation: fadeIn ease 1s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}