.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;
    opacity: 0;
    z-index: 0;
	
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 96s linear infinite 0s; /* repeat forever */
    -moz-animation: imageAnimation 96s linear infinite  0s;
    -o-animation: imageAnimation 96s linear infinite  0s;
    -ms-animation: imageAnimation 96s linear infinite  0s;
    animation: imageAnimation 96s linear infinite  0s; 
}

.cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/england/1.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../images/england/2.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(../images/england/3.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(../images/england/4.jpg);
    -webkit-animation-delay: 36s;
    -moz-animation-delay: 36s;
    -o-animation-delay: 36s;
    -ms-animation-delay: 36s;
    animation-delay: 36s;
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url(../images/england/5.jpg);
    -webkit-animation-delay: 48s;
    -moz-animation-delay: 48s;
    -o-animation-delay: 48s;
    -ms-animation-delay: 48s;
    animation-delay: 48s;  
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url(../images/england/6.jpg);
    -webkit-animation-delay: 60s;
    -moz-animation-delay: 60s;
    -o-animation-delay: 60s;
    -ms-animation-delay: 60s;
    animation-delay: 60s; 
}
.cb-slideshow li:nth-child(7) span { 
    background-image: url(../images/england/7.jpg);
    -webkit-animation-delay: 72s;
    -moz-animation-delay: 72s;
    -o-animation-delay: 72s;
    -ms-animation-delay: 72s;
    animation-delay: 72s; 
}
.cb-slideshow li:nth-child(8) span { 
    background-image: url(../images/england/8.gif);
    -webkit-animation-delay: 84s;
    -moz-animation-delay: 84s;
    -o-animation-delay: 84s;
    -ms-animation-delay: 84s;
    animation-delay: 84s; 
}

/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { 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{
	overflow-y: scroll;
	overflow-x: hidden;
	background-position: center;
  	background-repeat: no-repeat;
	background-size: cover;
    margin: 0px;   /* these 2 remove default padding between divs that was framing the image */
    padding: 0px;
	background-color: black; /* this sets the initial screen colour and the FINAL colour that the slideshow will return to */
	color: black;  /* this sets the color of the dots that appear top left for each slide -to not be seen need to matvh to background-color*/
}
.aspectwrapper {
  width: 100%;           /* whatever width you like */
  position: relative;    /* so .content can use position: absolute */
}
.aspectwrapper::after {
  padding-top: 56%;  /* percentage of containing block _width_ = 1080/1920 for MissE */
  display: block;
  content: '';
}
.content {
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;  /* follow the parent's edges */
}

.textwrapper {
    top: 10%;
  	width: 92%;
	height: 100%;
	left: 8%;
	position: absolute;
  	text-align:center;
  	animation: mymove 240s;
  	z-index: 999;
}

p {
	color: #FF3131;
	font-size: 2vmin;
	font-weight: normal;
  	font-family: "hobo-std";
}

