@charset "utf-8";

#bgslideshow{display:block; position: relative; width:auto; min-width: 100%; min-height:450px; margin: 0; padding: 0; overflow:hidden; background-color:#b8b8b5;}

#bgslideshow ul{display:block; margin:0; padding:0; list-style:none;}
#bgslideshow ul li, #bgslideshow ul li::before, #bgslideshow ul li em{display:block; position:absolute; left:0;  /**/width:100%; text-align:left;}


#bgslideshow ul li{top:0; height:100%; }
#bgslideshow ul li div.pics{ top:0; height:100%;}
#bgslideshow ul li div.manpic { top:0; width: 100%; height: 100%; position: absolute; opacity:0;}
#bgslideshow ul li::before{top:0; height:100%; content:"";}
#bgslideshow ul li em{ top:30%; margin:0 0 0 5%; padding:0; font-size:150px; font-style:normal; line-height:1; } #bgslideshow ul li em img{ width: auto; height:100%;}

#bgslideshow ul:hover li, #bgslideshow ul:hover li em{animation-play-state:paused;}/* Pauses animation on hover - can be a hinderance, so remove if it gets on your nerves */
#bgslideshow ul li div.pics{ background-size:cover;}

#bgslideshow ul li div.pics {opacity:0; animation:bgimages 56s linear infinite 0s;}
#bgslideshow ul li div.manpic{opacity:0; animation:cf3FadeInOut 56s linear infinite 0s;}
#bgslideshow ul li em{opacity:0; animation:titletxt 56s linear infinite 0s; z-index:1111 !important;}
/*#bgslideshow ul li div.pics{opacity:1; animation: none !important;} */

#bgslideshow ul li:nth-child(1) div.pics, #bgslideshow ul li:nth-child(1) em, #bgslideshow ul li:nth-child(1) div.manpic{animation-delay:0s;}
#bgslideshow ul li:nth-child(2) div.pics, #bgslideshow ul li:nth-child(2) em, #bgslideshow ul li:nth-child(2) div.manpic{animation-delay:8s;}
#bgslideshow ul li:nth-child(3) div.pics, #bgslideshow ul li:nth-child(3) em, #bgslideshow ul li:nth-child(3) div.manpic{animation-delay:16s;}
#bgslideshow ul li:nth-child(4) div.pics, #bgslideshow ul li:nth-child(4) em, #bgslideshow ul li:nth-child(4) div.manpic{animation-delay:24s;}

#bgslideshow ul li:nth-child(5) div.pics, #bgslideshow ul li:nth-child(5) em, #bgslideshow ul li:nth-child(5) div.manpic{animation-delay:32s;}
#bgslideshow ul li:nth-child(6) div.pics, #bgslideshow ul li:nth-child(6) em, #bgslideshow ul li:nth-child(6) div.manpic{animation-delay:40s;}
#bgslideshow ul li:nth-child(7) div.pics, #bgslideshow ul li:nth-child(7) em, #bgslideshow ul li:nth-child(7) div.manpic{animation-delay:48s;}
#bgslideshow ul li:nth-child(8) div.pics, #bgslideshow ul li:nth-child(8) em, #bgslideshow ul li:nth-child(8) div.manpic{animation-delay:56s;}

	
.txt-topEN2{font-family: 'Montserrat', sans-serif; line-height:44px; font-size:36px; font-weight:300; text-align:center;}
.txt-topTH2{/*font-family: 'Athiti', sans-serif;*/ font-size:25px; text-align:center; line-height:30px; font-family: 'supermarketregular', sans-serif;}		
 


/* Safari 4.0 - 8.0 */


/* Standard syntax 
@keyframes cf3FadeInOut {
	0%{opacity:0;}
	8%{opacity:1;}
	15%{opacity:1;}
	20%{opacity:0;}
    25%{opacity:0;}
	100%{opacity:0;}}
}*/
@-webkit-keyframes cf3FadeInOut {
	0%{opacity:0;}
	5%{opacity:1;}
	15%{opacity:1;}
	16%{opacity:0;}
    100%{opacity:0;}
	100%{opacity:0;}
}
@keyframes titletxt{
	0%{opacity:0; transform:translateY(-70%);}
	5%{opacity:1; transform:translateY(0%);}
	15%{opacity:1; transform:translateY(0%);}
	16%{opacity:0; transform:translateY(0%);}
    100%{opacity:0; transform:translateY(0%)}
	100%{opacity:0;}}
@keyframes bgimages{
	0%{opacity:0; animation-timing-function:ease-in;}
	5%{opacity:1; transform:scale(1.025); animation-timing-function:ease-out;}
	15%{opacity:1; transform:scale(1.08);}
	16%{opacity:1; transform:scale(1.08);}
	100%{opacity:0; transform:scale(1.08); translateY(100%);}
	100%{opacity:0;}}


.slidercc {
  position: relative; /*width:100%; height:auto;*/ min-height:382px;
}
.slidercc-img{ position: absolute; top:0;}
.slidercc2,.slidercc3,.slidercc4,.slidercc5,.slidercc6,.slidercc7 {
  position: absolute;
  width: 100%;
  height: 100%;
}


.sli101 { position: absolute; width: 100%; height: 100%;
  background: url(../../images/kayogroup-pic101.jpg) no-repeat center; 
  background-size: cover; animation:fade 3s infinite; -webkit-animation:fade 3s infinite;}

 
.slidercc2 {
   background: url(../../images/kayogroup-pic102.jpg) no-repeat center;
   background-size: cover; animation:fade2 8s infinite; -webkit-animation:fade2 8s infinite;
}
.slidercc3 {
     background: url(../../images/kayogroup-pic103.jpg) no-repeat center; 
	 background-size: cover; animation:fade3 8s infinite; -webkit-animation:fade3 8s infinite;}

.slidercc4 {
     background: url(../../images/kayogroup-pic104.jpg) no-repeat center; 
	 background-size: cover; animation:fade4 8s infinite; -webkit-animation:fade4 8s infinite;}
	 
.slidercc5 {
     background: url(../../images/kayogroup-pic105.jpg) no-repeat center; 
	 background-size: cover; animation:fade5 8s infinite; -webkit-animation:fade5 8s infinite;}	 	 


.slidercc6 {
     background: url(../../images/kayogroup-pic106.jpg) no-repeat center; 
	 background-size: cover; animation:fade6 8s infinite; -webkit-animation:fade6 8s infinite;}
	 
.slidercc7 {
     background: url(../../images/kayogroup-pic107.jpg) no-repeat center; 
	 background-size: cover; animation:fade7 8s infinite; -webkit-animation:fade7 8s infinite;}	
	 	 
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}
@keyframes fade4
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}
@keyframes fade5
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}

@keyframes fade6
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}

@keyframes fade7
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}

@media screen and (max-width:1024px){
	#bgslideshow{min-height:375px; width:100%}
	#bgslideshow ul li em { margin: 0 0 0 1%;}
	}



@media screen and (max-width:750px){
	#bgslideshow{min-height:400px; width:100%}

.slidercc {position: relative; /*width:100%; height:auto;*/ min-height:300px;}
  #bgslideshow ul li em { margin: 0 0 0 1%;}
  .txt-topTH2 {  font-size: 15px;  line-height: 20px;}
}

@media screen and (max-width:667px){
	.slidercc { position: relative; /*width:100%; height:auto;*/ min-height:250px;}
    #bgslideshow{ min-height:250px;} 
	.txt-topTH2 {  font-size: 15px;  line-height: 20px;} 
	}

@media screen and (max-width:360px){
	.slidercc {position: relative; /*width:100%; height:auto;*/ min-height:200px;}
    #bgslideshow{ min-height:130px;}
	#bgslideshow ul li em { margin: 0 0 0 1%; top:22%;}
	.txt-topTH2 {  font-size: 15px;  line-height: 20px; width: 180px;}
	}
@media screen and (max-width:414px){
	.slidercc {position: relative; /*width:100%; height:auto;*/ min-height:200px;}
    #bgslideshow{ min-height:148px;}
	#bgslideshow ul li em { margin: 0 0 0 1%; top:22%;}
	.txt-topTH2 {  font-size: 15px;  line-height: 17px; width: 180px;}
	}