﻿/* LCHU 5/25/19
	body kbslide common
	6 images w/o Caption
---------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#kbslide {
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
#kbslide img {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  height: auto;
  background: #000;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
          backface-visibility: hidden;
  opacity: 0;
  -webkit-transform: scale(1.4) rotate(12deg);
  -moz-transform: scale(1.4) rotate(12deg);
  -o-transform: scale(1.4) rotate(12deg);
  -ms-transform: scale(1.4) rotate(12deg);
          transform: scale(1.4) rotate(12deg);
  -webkit-animation: kbslide 24s infinite;
  -moz-animation: kbslide 24s infinite;
  -o-animation: kbslide 24s infinite;
  -ms-animation: kbslide 24s infinite;
          animation: kbslide 24s infinite;
}

#kbslide img:nth-child(6) {
}
#kbslide img:nth-child(5) {
  -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -o-animation-delay: 8s;
    -ms-animation-delay: 8s;
          animation-delay: 8s;
}

#kbslide img:nth-child(4) {
  -webkit-animation-delay: 16s;
    -moz-animation-delay: 16s;
    -o-animation-delay: 16s;
    -ms-animation-delay: 16s;
          animation-delay: 16s;
}
#kbslide img:nth-child(3) {
  -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
          animation-delay: 24s;
}
#kbslide img:nth-child(2) {
  -webkit-animation-delay: 32s;
    -moz-animation-delay: 32s;
    -o-animation-delay: 32s;
    -ms-animation-delay: 32s;
          animation-delay: 32s;
}
#kbslide img:nth-child(1) {
  -webkit-animation-delay: 40s;
    -moz-animation-delay: 40s;
    -o-animation-delay: 40s;
    -ms-animation-delay: 40s;
	animation-delay: 40s;
}

/* ------------------------------------- */
/*  Animation for the slideshow images */
@-webkit-keyframes kbslide {
  25% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0);
    -moz-transform: scale(1) rotate(0);
    -o-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0);
  }
  40% {
    opacity: 0;
  }
}
@keyframes kbslide {
  25% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0);
    -moz-transform: scale(1) rotate(0);
    -o-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0);
  }
  40% {
    opacity: 0;
  }
}
/* ------------------------------------- */


/* -------------------------------------------------
/* Alternative Animation for the slideshow images 
@-webkit-keyframes kbslide { 
    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 kbslide { 
    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 kbslide { 
    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 kbslide { 
    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 kbslide { 
    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 }
}
/* ------------------------------------- */

