body {overflow:hidden;}

/***********************/
/* Home page slideshow */
/***********************/

/* By Mary Lou at https://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/ */

#ss-box {position:absolute; width:100%; height:calc(100% - 24px); top:24px; left:0;}

.slideshow,
.slideshow:after {position:fixed; width:100%; height:100%; top:0px; left:0px; z-index:0;}
.slideshow:after {content: ''; 
	background: transparent url(../img/pattern.png) repeat top left;  /*For browsers that do not support gradients */
	background: url(../img/pattern.png) repeat top left, -webkit-linear-gradient(left, rgba(0,0,0,.7) 0%, rgba(0,0,0,.5) 20%, rgba(0,0,0,0) 50%);
	background: url(../img/pattern.png) repeat top left,     -o-linear-gradient(right, rgba(0,0,0,.7) 0%, rgba(0,0,0,.5) 20%, rgba(0,0,0,0) 50%);
	background: url(../img/pattern.png) repeat top left, -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,.7)), color-stop(20%, rgba(0,0,0,.5)), color-stop(50%, rgba(0,0,0,0))); 
	background: url(../img/pattern.png) repeat top left, -webkit-linear-gradient(left, rgba(0,0,0,.7) 0%, rgba(0,0,0,.5) 20%, rgba(0,0,0,0) 50%); 
	background: url(../img/pattern.png) repeat top left,      -o-linear-gradient(left, rgba(0,0,0,.7) 0%, rgba(0,0,0,.5) 20%, rgba(0,0,0,0) 50%); 
	background: url(../img/pattern.png) repeat top left,     linear-gradient(to right, rgba(0,0,0,.7) 0%, rgba(0,0,0,.5) 20%, rgba(0,0,0,0) 50%);
	}
.slideshow li span {width:100%; height:100%; position:absolute; top:0px; left:0px; color:transparent; background-repeat:none; opacity:0; z-index:0; 
	-webkit-background-size:cover; background-size:cover; background-position:50% 50%; -webkit-backface-visibility:hidden; 
	-webkit-animation:imageAnimation 30s linear infinite 0s; 
	        animation:imageAnimation 30s linear infinite 0s;
	}
.slideshow li div {z-index:1000; position:absolute; bottom:5%; left:0px; width:100%; text-align:center; opacity:0; color:#fff; /*border:1px solid #fff;*/
  -webkit-animation: titleAnimation 30s linear infinite 0s;
          animation: titleAnimation 30s linear infinite 0s; 
	}
.slideshow li div h3 {font:normal 15em/.8 dineng, sans-serif; text-transform:uppercase; padding:0; margin:0; opacity:.7;}

.slideshow li:nth-child(1) span {background-image:url(../img/1.jpg);}
.slideshow li:nth-child(2) span {background-image:url(../img/3.jpg); -webkit-animation-delay:6s; animation-delay:6s;}
.slideshow li:nth-child(3) span {background-image:url(../img/4.jpg); -webkit-animation-delay:12s; animation-delay:12s;}
.slideshow li:nth-child(4) span {background-image:url(../img/5.jpg); -webkit-animation-delay:18s; animation-delay:18s;}
.slideshow li:nth-child(5) span {background-image:url(../img/6.jpg); -webkit-animation-delay:24s; animation-delay:24s;}
.slideshow li:nth-child(2) div {-webkit-animation-delay:6s;  animation-delay:6s;}
.slideshow li:nth-child(3) div {-webkit-animation-delay:12s; animation-delay:12s;}
.slideshow li:nth-child(4) div {-webkit-animation-delay:18s; animation-delay:18s;}
.slideshow li:nth-child(5) div {-webkit-animation-delay:24s; animation-delay:24s;}

/* Animation for the slideshow images */

@-webkit-keyframes imageAnimation {0% {opacity:0; -webkit-animation-timing-function:ease-in;} 
                                   5% {opacity:1; -webkit-transform:scale(1.05); transform:scale(1.05); -webkit-animation-timing-function:linear;}
                                  20% {opacity:1; } 25% {opacity:0; -webkit-transform:scale(1.25); transform:scale(1.25);-webkit-animation-timing-function:linear;} 100% {opacity:0;}}
@keyframes imageAnimation         {0% {opacity:0; -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in;} 
                                   5% {opacity:1; -webkit-transform:scale(1.05); transform:scale(1.05); -webkit-animation-timing-function:linear; animation-timing-function:linear;}
                                  20% {opacity:1; } 25% {opacity:0;-webkit-transform:scale(1.25);transform:scale(1.25); -webkit-animation-timing-function:linear; animation-timing-function:linear;} 100% {opacity:0;}}
/* Animation for the title */

@-webkit-keyframes titleAnimation {0% {opacity:0} 5% {opacity:1} 20% {opacity:1} 22% {opacity:0} 100% {opacity:0}}
@keyframes titleAnimation         {0% {opacity:0} 5% {opacity:1} 20% {opacity:1} 22% {opacity:0} 100% {opacity:0}}

/* Show at least something when animations not supported */

.no-cssanimations .slideshow li span {opacity:1;}

/* Media queries */

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