.cb-slideshow,
.cb-slideshow:after { 
	content: '';
}
.cb-slideshow:after { 
    content: '';
    background: transparent url(../images/pattern.png) repeat top left; 
}
.cb-slideshow li span { 
    width: 100%;
	height: 100%;
	background-repeat: none;
    position: absolute;
    top: 0px;
    left: 0px;
   	background-size: cover;
    color: transparent; /* ensure the slide name is invisible */
    opacity: 0;
    z-index: 0;
		
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 120s linear 1 0s; /* 1 means it only repeats once */
    -moz-animation: imageAnimation 120s linear 1 0s;
    -o-animation: imageAnimation 120s linear 1 0s;
    -ms-animation: imageAnimation 120s linear 1 0s;
    animation: imageAnimation 120s linear 1 0s; 
}

.cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/skies/SoManySkiesCh.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../images/skies/SoManySkiesLy.jpg);
    -webkit-animation-delay: 17s;
    -moz-animation-delay: 17s;
    -o-animation-delay: 17s;
    -ms-animation-delay: 17s;
    animation-delay: 17s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(../images/skies/SoManySkiesFlare.jpg);
    -webkit-animation-delay: 48s;
    -moz-animation-delay: 48s;
    -o-animation-delay: 48s;
    -ms-animation-delay: 4s;
    animation-delay: 48s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(../images/skies/SoManySkiesBlack.jpg);
    -webkit-animation-delay: 50s;
    -moz-animation-delay: 50s;
    -o-animation-delay: 50s;
    -ms-animation-delay: 50s;
    animation-delay: 50s; 
}

/* Animation for the slideshow images  */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    5% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    40% { opacity: 1 }
    90% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    5% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    40% { opacity: 1 }
    90% { opacity: 0 }
    100% { opacity: 0 }
}

/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}

@media screen and (max-width: 1920px) { 
    .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) { 
    .cb-slideshow li div h3 { font-size: 80px }
}

body{
	/*background: #000;*/
	overflow-y: scroll;
	overflow-x: scroll;
	width: auto;
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: contain;
    margin: 0px;   /* these 2 remove default padding ...*/
    padding: 0px;  /* ...between divs that was framing the image */
	background-color: black; /* sets the initial screen colour and the FINAL colour that the slideshow will return to */
	color: black;  /* sets the color of the dots that appear top left for each slide */
}

.aspectwrapper {
  width: 100%;           /* whatever width you like */
  position: relative;    /* so .content can use position: absolute */
}
.aspectwrapper::after {
  padding-top: 67%; /* percentage of containing block _width_ based on 962/1440 (75 for 080/1440 NB IF WRONG THIS CAUSES TRUNCATION PROBLEMS!!*/
  display: block;
  content: '';
}
.content {
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;  /* follow the parent's edges */
  /*outline: thin solid red;             just so you can see the box */
}