/* Reset */
*{margin:0;padding:0;}


/* Slider WORKS FINE FOR DESKTOP AND MOBILE
#slider{
  width:100%;
  height:466px;
  position:relative;
  overflow:hidden;

}*/

#slider{
  width:100%; /* auto here gives you a gap between the slides which I don't mind but prob a bit late to change it*/
  height:466px;
  position:relative;
  overflow:hidden;

}


.slidelink { /*this goes on a span to make the whole slide clickable*/
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index:1;

}
#slider h2 {font-size:2.1em !important; font-weight:300;line-height:1.2em;  /*margin:auto !important;*/}



@keyframes load{
  from{left:-100%;}
  to{left:0;}
}
.slides{
  width:700%; /* was 500 then 600 i.e. 100% per slide including the extra screen*/
  height:100%;
  position:relative;
  -webkit-animation:slide 45s infinite;
  -moz-animation:slide 45s infinite;
  animation:slide 45s infinite;
  display: flex; 
}

.slider{
  width:14.29%; /* was 20 /  was 16.66%*/
  height:100%;
  /*float:left; not sure this does anything */
  position:relative;
  z-index:1;
  overflow:hidden;     
}

#slider .slider .btn {
  display: inline-block;
  padding: 1em 0.75em;
  margin-top:1.5em;
  color: #04342B;
  font-size: 1.2em;
  line-height:1.3em;
  text-align:left;
  font-weight:400;
  text-decoration: none;
  border: none;
  border-radius:0;
  outline: none;
  background-color: var(--darkorange);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;

}
#slider .slider .btn:hover{
	color:white;
}



.slide img{
  width:100%;
  height:100%;
}

.slide picture{
  width:100%;
  height:100%;
}

.image{
  width:100%;
  height:100%;
}

.image img{
  width:auto;
  height:100%;
}
.image picture{
  width:auto;
  height:100%;
}

/* Legend */
.legend{
  border-top:467px solid rgba(4,52,43,.7);
  border-left:100px solid rgba(4,52,43,.7);
   border-right:200px solid rgba(4,52,43,.7);
  border-bottom:0;
  position:absolute;
  bottom:0;

}
@media (max-width:480px){/*was 640*/
	.legend {top:0;}
}

/* Contents */
.slidecontent{
  display:flex;
  align-content:center;
  margin-left:2em;	
  width:100%;
  height:100%;
  position:absolute;
  overflow:hidden;
  text-align:left;
}

.slidecontent-txt{
  width:26%;
  margin:auto 0 !important;
  float:left;
  position:relative;  
}

.slidecontent-txt .cta{
	z-index:10;
	height:auto !important;
	min-width:230px;
}
.slidecontent-txt h2{
	margin-bottom:0 !important;
}

@media (max-width:640px){
	.slidecontent-txt{width:35%; margin:2em 0 0 0  !important}
}

@media (max-width:480px){ /*was 640*/
	#slider h2 {font-size:1.6em !important;line-height:1.2em;}
	.legend{
  	 border-top:267px solid rgba(4,52,43,.7);
  	border-left:100px solid rgba(4,52,43,.7);
   	border-right:110px solid rgba(4,52,43,.7);
	}
	.slidecontent {align-items:flex-start; margin-top:2em; margin-left:1em}
	.slidecontent-txt{width:45%; margin:1em 0 0 0  !important}
	
	#slider .slider .btn {
  	margin-top:0.8em;
  	padding: 0.5em 1em;
	font-size: 1.1em;
  	line-height:1.2em;
}		
	.slidecontent-txt .cta{
	min-width:auto;

}
}


/* Switch - the dot navigation */
.switch{
  width:150px;
  height:20px;
  position:absolute;
  bottom:50px;
  z-index:99;
  margin-left:2em;
}
.switch > ul{
  list-style:none;
}
.switch > ul > li{
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--superdarkgreen);
  float:left;
  margin:2em 5px 0 0;
  /*cursor:pointer;*/
  cursor:default;
}
.switch ul{
  overflow:hidden;
}
.on{
  width:100%;
  height:100%;
  border-radius:50%;
  background:#f39c12;
  position:relative;
  -webkit-animation:on 45s infinite; /*was 30: slowed it down a bit*/
  -moz-animation:on 45s infinite;
  animation:on 45s infinite;
}



@media (max-width:992px){ /*handle layout changes once we go into two columns. NOTE slidercol has text-align:center on it in mb-main*/
	/*#slider {padding:0 1% !important;}*/
	.slidecontent {padding-left:2em !important;}
	.switch {margin-left:2em !important;}
	
}
@media (max-width:640px){ /*was 640*/
	.slidecontent {padding-left:1.5em !important;}
	.switch {margin-left:2em !important;}
}

@media (max-width:480px){ /*was 640*/
	#slider {width:100%; height:320px !important;}
	.slidecontent {padding-left:0 !important;}
	.switch {margin-left:1em !important; padding-top:0.5em !important}
}



/* Animation */
@-webkit-keyframes slide{
   0% { /*frame 1*/
    margin-left:0%;
  }
  12%{
    margin-left:0%;
  }
  15%{ /*frame 2*/
    margin-left:-100%;
  }
  28%{
    margin-left:-100%;
  }
  31%{ /*frame 3*/
    margin-left:-200%;
  }
  45%{
    margin-left:-200%;
  }
  48%{ /*frame 4*/
    margin-left:-300%;
  }
  61%{
    margin-left:-300%;
  }
  64%{ /*frame 5*/
    margin-left:-400%;
  }
  78%{
    margin-left:-400%;
  }
  81%{ /*frame 6 */
    margin-left:-500%;
  }
  97%{ 
    margin-left:-500%;
  }	
  100%{ 
    margin-left:-600%;
  }
}

@-moz-keyframes slide{
   0% { /*frame 1*/
    margin-left:0%;
  }
  12%{
    margin-left:0%;
  }
  15%{ /*frame 2*/
    margin-left:-100%;
  }
  28%{
    margin-left:-100%;
  }
  31%{ /*frame 3*/
    margin-left:-200%;
  }
  45%{
    margin-left:-200%;
  }
  48%{ /*frame 4*/
    margin-left:-300%;
  }
  61%{
    margin-left:-300%;
  }
  64%{ /*frame 5*/
    margin-left:-400%;
  }
  78%{
    margin-left:-400%;
  }
  81%{ /*frame 6 */
    margin-left:-500%;
  }
  97%{ 
    margin-left:-500%;
  }	
  100%{ 
    margin-left:-600%;
  }
}


@keyframes slide{
    0% { /*frame 1*/
    margin-left:0%;
  }
  12%{
    margin-left:0%;
  }
  15%{ /*frame 2*/
    margin-left:-100%;
  }
  28%{
    margin-left:-100%;
  }
  31%{ /*frame 3*/
    margin-left:-200%;
  }
  45%{
    margin-left:-200%;
  }
  48%{ /*frame 4*/
    margin-left:-300%;
  }
  61%{
    margin-left:-300%;
  }
  64%{ /*frame 5*/
    margin-left:-400%;
  }
  78%{
    margin-left:-400%;
  }
  81%{ /*frame 6 */
    margin-left:-500%;
  }
  97%{ 
    margin-left:-500%;
  }	
  100%{ 
    margin-left:-600%;
  }
}
/* THIS MAKES SURE THE DOTS ARE IN THE RIGHT PLACE */
@-webkit-keyframes on{
  0%, 100% {
    margin-left:0%;
  }
  12%{
    margin-left:0%;
  }
  15%{
    margin-left:25px;
  }
  28%{
    margin-left:25px;
  }
 31%{
    margin-left:50px;
  }
 45%{
    margin-left:50px;
  }
 48%{
    margin-left:75px;
  }
  61%{
    margin-left:75px;
  }
 64%{
    margin-left:100px;
  }
  78%{
    margin-left:100px;
  }
   81%{
    margin-left:125px;
  }
  97%{
    margin-left:125px;
  }
  99%{
    margin-left:0px;
  }
}
@-moz-keyframes on{
  0%, 100% {
    margin-left:0%;
  }
  12%{
    margin-left:0%;
  }
  15%{
    margin-left:25px;
  }
  28%{
    margin-left:25px;
  }
 31%{
    margin-left:50px;
  }
 45%{
    margin-left:50px;
  }
 48%{
    margin-left:75px;
  }
  61%{
    margin-left:75px;
  }
 64%{
    margin-left:100px;
  }
  78%{
    margin-left:100px;
  }
   81%{
    margin-left:125px;
  }
  97%{
    margin-left:125px;
  }
  99%{
    margin-left:0px;
  }
}


@keyframes on{
  0%, 100% {
    margin-left:0%;
  }
  12%{
    margin-left:0%;
  }
  15%{
    margin-left:25px;
  }
  28%{
    margin-left:25px;
  }
 31%{
    margin-left:50px;
  }
 45%{
    margin-left:50px;
  }
 48%{
    margin-left:75px;
  }
  61%{
    margin-left:75px;
  }
 64%{
    margin-left:100px;
  }
  78%{
    margin-left:100px;
  }
   81%{
    margin-left:125px;
  }
  97%{
    margin-left:125px;
  }
  99%{
    margin-left:0px;
  }
}