@font-face {
    font-family: Monarch;
    src: url(monarch.woff);
}

body {
 
  background-color: #d6ff00;
  overflow-x: hidden;
   background-image: url(loading.svg);
  background-size: 100px;
  
}

.slideshow {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  display: block;
 
  
}

.holder {
  position: relative;
  top: 0;
  left: 0;
  width: 7000vw;
  height: 100vh;
  transition: left 0.6s;
 
  
}

.holder div {
  float: left;
  width: 33.333333vw;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 20px 25px;
  
  
}

div.title {
  background-color: #d6ff00;
  padding: 10px;
  z-index: 4;
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 20px 75px 20px 25px;
  background: linear-gradient(
    to right,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #ffffff
  
  );
}

div.mobtitle {
  background-color: #d6ff00;
  padding: 10px;
  z-index: 4;
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 20px 25px;
  display: none;
  background: linear-gradient(
    to bottom,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #ffffff
  
  );
}

div.credits {
  background-color: #d6ff00;
  padding: 10px;
  z-index: 8;
  position: relative;
  padding: 20px 25px 20px 75px;
     background: linear-gradient(
    to right,
    #ffffff,#d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00
  
  );
}

div.double {
  float: left;
  width: 66.666vw;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 20px 25px;
  background-color: #e23f12;
}

.slide-text {
  padding: 20px;
  color: #d6ff00;
  font-size: 30px;
}

.steps {
  position: absolute;
  bottom: 25px;
  left: 0;
  width: 100%;
  overflow: hidden;
  text-align: center;
  display: none;
}

a {
  color: #ffffff;
  text-decoration: underline;
  z-index: 1;
  font-family: Work Sans;
  
  
  
}

.controls {
  padding: 25px 25px 25px 25px;
  position: absolute;
  bottom: 0;
font-size: 25px;
  
}



.prev {
  left: 0;
  z-index: 3;
   text-shadow: 0px 0px 10px #000000;
}

.index {
  left: 81px;
  z-index: 3;
   text-shadow: 0px 0px 10px #000000;
}

.divider {
  left: 67px;
  z-index: 3;
  color: #ffffff;
   text-shadow: 0px 0px 10px #000000;
}

.next {
  right: 0;
  z-index: 4;
  text-shadow: 0px 0px 10px #000000;
  
}

.page2 {
  color: #000000;
  padding: 25px;
  position: absolute;
  bottom: 0;
  right: 0;
  font-weight: 600;
  font-size: 25px;
  
}

.black {
  color: #000000;
}

h1 {
  font-size: 12vh;
 font-family: monarch;

  color: #000000;
  margin-bottom: 20px;
  line-height: 0.9;
  
  
}

h2 {
  font-size: 90px;
  font-family: monarch;
  color: #c4abff;
  
  text-align: right;

  margin-bottom: 50px;
  
}

h3 {
  line-height: 1.1;
  font-family: Work Sans;
  font-size: 25px;
  font-weight: 400;
}

h5 {
  font-size: 40px;
 font-family: Work Sans;
  font-weight: 400;
  color: #ffffff;
  padding-bottom: 30px;
  line-height: 0.9;
  text-align: center;
  
  
}

h6 {
  color: #000000;
  padding: 10px 0 0 0;
  position: absolute;
  
  text-decoration: none;
  font-family: Work Sans;
  font-size: 25px;
  
  

  
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #c4abff;
  margin: 25px 0 40px 0;
  padding: 0;
}

logo {
  width: auto;
}

.instructions {
 
  color: #000000;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 40px;
  font-size: 20px;
  
  
}

.centre {
  text-align: center;
  
  
}







.slide-1 {
  background-image: url(file1.png);
}

.slide-2 {
  background-image: url(file2.png);
}

.slide-3 {
  background-image: url(file3.png);
}

.slide-4 {
  background-image: url(file4.png);
}

.slide-5 {
  background-image: url(file5.png);
}

.slide-6 {
  background-image: url(file6.png);
}

.slide-7 {
  background-image: url(file7.png);
}

.slide-8 {
  background-image: url(file8.png);
}

.slide-9 {
  background-image: url(file9.png);
}

.slide-10 {
  background-image: url(file10.png);
}

.slide-11 {
  background-image: url(file11.png);
}

.slide-12 {
  background-image: url(file12.png);
}

.slide-13 {
  background-image: url(file13.png);
}

.slide-14 {
  background-image: url(file14.png);
}

.slide-15 {
  background-image: url(file15.png);
}

.slide-16 {
  background-image: url(file16.png);
}

.slide-17 {
  background-image: url(file17.png);
}

.slide-18 {
  background-image: url(file18.png);
}

.slide-19 {
  background-image: url(file19.png);
}

.slide-20 {
  background-image: url(file20.png);
}

.slide-21 {
  background-image: url(file21.png);
}

.slide-22 {
  background-image: url(file22.png);
}

.slide-23 {
  background-image: url(file23.png);
}

.slide-24 {
  background-image: url(file24.png);
}

.slide-25 {
  background-image: url(file25.png);
}

.slide-26 {
  background-image: url(file26.png);
}

.slide-27 {
  background-image: url(file27.png);
}

.slide-28 {
  background-image: url(file28.png);
}

.slide-29 {
  background-image: url(file29.png);
}

.slide-30 {
  background-image: url(file30.png);
}

.slide-31 {
  background-image: url(file31.png);
}

.slide-32 {
  background-image: url(file32.png);
}

.slide-33 {
  background-image: url(file33.png);
}

.slide-34 {
  background-image: url(file34.png);
}

.slide-35 {
  background-image: url(file35.png);
}

.slide-36 {
  background-image: url(file36.png);
}

.slide-37 {
  background-image: url(file37.png);
}

.slide-38 {
  background-image: url(file38.png);
}

.slide-39 {
  background-image: url(file39.png);
}

.slide-40 {
  background-image: url(file40.png);
}

.slide-41 {
  background-image: url(file41.png);
}

.slide-42 {
  background-image: url(file42.png);
}

.slide-43 {
  background-image: url(file43.png);
}

.slide-44 {
  background-image: url(file44.png);
}

.slide-45 {
  background-image: url(file45.png);
}

.slide-46 {
  background-image: url(file46.png);
}

.slide-47 {
  background-image: url(file47.png);
}

.slide-48 {
  background-image: url(file48.png);
}

.slide-49 {
  background-image: url(file49.png);
}

.slide-50 {
  background-image: url(file50.png);
}







@media (max-width: 1300px) {
  
 

  h1 {
    font-size: 65px;
    margin-bottom: 5px;
    
  }

  h2 {
    font-size: 65px;
    margin-bottom: 15px;}

}



@media (max-width: 1026px) {
  .holder div {
    float: left;
    width: 50vw;
  }

    h1 {
    font-size: 65px;
    margin-bottom: 5px;
    
  }

  h2 {
    font-size: 65px;
    margin-bottom: 15px;}

  
  .slide-text {
    padding: 20px;
    color: #333333;
    font-size: 25px;
  }

  .double {
    width: 100vw;
  }
  
  .controls {
    padding: 25px 25px 40px 25px;}
  


.page2 {padding: 25px 25px 80px 25px;}

}







@media (max-width: 768px) {
  .holder div {
    float: left;
    width: 100vw;
  }

  body {
    font-family: Work Sans;
    font-size: 20px;
  }

  

  .index {
    left: 65px;
  }

  .divider {
    left: 55px;
  }

  h1 {
    font-size: 85px;
    margin-bottom: 10px;
   
    
  }

  h2 {
    font-size: 85px;
    margin-bottom: 10px;
  }

  h3 {
    font-size: 20px;
    
  }
  
  h4 {
    font-size: 20px;
    
  }

  .slide-text {
    padding: 20px;
    color: #333333;
    font-size: 20px;
  }

  .double {
    width: 200vw;
  }

  .controls {
    display: none;
  }

  .divider {
    display: none;
  }
  
  div.mobtitle {display: block;
  height: auto;
  padding: 20px;
  pointer-events: none;}
  
  div.title {display: none}
  
  hr {margin: 10px 0 20px 0;}
  
  .instructions {
  background-color: #d6ff00;
  display: block;
  
}
  
  div.credits {
    padding: 20px 25px 20px 35px;
     }
}

.slideshow {
  position: fixed;
  left: 0;
top: 0;
}
  
.blank {height: 100vh;
width: 100vw;pointer-events: none;}

@media (max-width: 500px){
  h1 {
    font-size: 65px;
    margin-bottom: 5px;
    
  }

  h2 {
    font-size: 65px;
    margin-bottom: 15px;}

}

@media (max-height: 667px){
  
.slide-1 {
  background-image: url(file1b.png);
}

.slide-2 {
  background-image: url(file2b.png);
}

.slide-3 {
  background-image: url(file3b.png);
}

.slide-4 {
  background-image: url(file4b.png);
}

.slide-5 {
  background-image: url(file5b.png);
}

.slide-6 {
  background-image: url(file6b.png);
}

.slide-7 {
  background-image: url(file7b.png);
}

.slide-8 {
  background-image: url(file8b.png);
}

.slide-9 {
  background-image: url(file9b.png);
}

.slide-10 {
  background-image: url(file10b.png);
}

.slide-11 {
  background-image: url(file11b.png);
}

.slide-12 {
  background-image: url(file12b.png);
}

.slide-13 {
  background-image: url(file13b.png);
}

.slide-14 {
  background-image: url(file14b.png);
}

.slide-15 {
  background-image: url(file15b.png);
}

.slide-16 {
  background-image: url(file16b.png);
}

.slide-17 {
  background-image: url(file17b.png);
}

.slide-18 {
  background-image: url(file18b.png);
}

.slide-19 {
  background-image: url(file19b.png);
}

.slide-20 {
  background-image: url(file20b.png);
}

.slide-21 {
  background-image: url(file21b.png);
}

.slide-22 {
  background-image: url(file22b.png);
}

.slide-23 {
  background-image: url(file23b.png);
}

.slide-24 {
  background-image: url(file24b.png);
}

.slide-25 {
  background-image: url(file25b.png);
}

.slide-26 {
  background-image: url(file26b.png);
}

.slide-27 {
  background-image: url(file27b.png);
}

.slide-28 {
  background-image: url(file28b.png);
}

.slide-29 {
  background-image: url(file29b.png);
}

.slide-30 {
  background-image: url(file30b.png);
}

.slide-31 {
  background-image: url(file31b.png);
}

.slide-32 {
  background-image: url(file32b.png);
}

.slide-33 {
  background-image: url(file33b.png);
}

.slide-34 {
  background-image: url(file34b.png);
}

.slide-35 {
  background-image: url(file35b.png);
}

.slide-36 {
  background-image: url(file36b.png);
}

.slide-37 {
  background-image: url(file37b.png);
}

.slide-38 {
  background-image: url(file38b.png);
}

.slide-39 {
  background-image: url(file39b.png);
}

.slide-40 {
  background-image: url(file40b.png);
}

.slide-41 {
  background-image: url(file41b.png);
}

.slide-42 {
  background-image: url(file42b.png);
}

.slide-43 {
  background-image: url(file43b.png);
}

.slide-44 {
  background-image: url(file44b.png);
}

.slide-45 {
  background-image: url(file45b.png);
}

.slide-46 {
  background-image: url(file46b.png);
}

.slide-47 {
  background-image: url(file47b.png);
}

.slide-48 {
  background-image: url(file48b.png);
}

.slide-49 {
  background-image: url(file49b.png);
}

.slide-50 {
  background-image: url(file50b.png);
}
}