* { margin:0; padding:0 }

/*Main Slider*/
#demo { width:1160px; height:650px; font-family: 'Roboto', sans-serif; margin:0 auto; position:relative; overflow: hidden; }
#demo.loading *  { opacity: 0!important; visibility: hidden!important; }
#demo.loading { background: url(../img/fixwidth-loading.gif) no-repeat center #0073ff; }
#demo a, #demo input { outline: none; }

/*Pagination*/
#demo .pagination { width:50%; text-align:center; position:absolute; left:25%; bottom:10px; z-index: 999; }
#demo .pagination a { width:10px; height:10px; margin:0 2px; display:inline-block; background: rgba(0,0,0,0.5); border-radius:80px; position:relative; }
#demo .pagination a:after { content:'.'; width:9px; height:11px; background:#fff; position:absolute; top:-12px; left:0; text-indent:-10000px; background:url(../img/play.png) no-repeat; transform:rotate(90deg); opacity:0; }
#demo .pagination a img { position:absolute; left:-47px; top:-65px; width:100px; height:54px; opacity:0; }
#demo .pagination a:hover img { opacity:1; border:solid 1px #fff; }
#demo .pagination a:hover:after { opacity:1; }
#demo .pagination a.active,.pagi a.find { background: rgba(0,0,0,0.2); }

/*Controls (Next & Previous)*/
#demo .control a { width:30px; height: 30px; display: block; font-size: 1px; text-indent: -15000px; text-decoration: none; background-repeat: no-repeat; background-size: 100%; position: absolute; bottom: 10px; z-index: 999; }
#demo .control a.prev { right: 45px; background-image: url(../img/prev.png); }
#demo .control a.next { right: 10px; background-image: url(../img/next.png); }

/*Play & Pause*/
#demo .process { width:0; height:2px; background:#fff; position:absolute; left:0; bottom:1px; z-index: 999; }
#demo .playpause { width:9px; height:11px; display:inline-block; background:url(../img/pause.png) no-repeat; position:absolute; left:10px; bottom:10px; z-index: 999; }
#demo .playpause.pause { background:url(../img/play.png) no-repeat; z-index: 999; }

/*Search*/
.js_search { width:100%; text-align:center; margin-top:10px; overflow:hidden; }
.js_search input { width:400px; font-family: 'Roboto', sans-serif; font-size:15px; font-weight:300; color:#000; border:none; border-radius: 20px; padding:12px;  background:url(../img/search-icon-fs.png) no-repeat 96% center #ccc; outline:none; }
.js_search .searchresult { margin:14px; display:inline-block; position: absolute; overflow: hidden; }
.js_search .searchresult a { width: 20px; height: 20px; margin-right: 5px; text-align: center; line-height: 20px; display:inline-block; color: #fff; background:#d41414; border-radius:80px; text-decoration: none; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }

/*Slide*/
#demo .slide { height:650px; width: 100%; color:#1961A9; overflow:hidden; position:absolute; left: 0; top:0;
background: rgba(0,115,255,1);
background: -moz-linear-gradient(left, rgba(0,115,255,1) 0%, rgba(0,200,255,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,115,255,1)), color-stop(100%, rgba(0,200,255,1)));
background: -webkit-linear-gradient(left, rgba(0,115,255,1) 0%, rgba(0,200,255,1) 100%);
background: -o-linear-gradient(left, rgba(0,115,255,1) 0%, rgba(0,200,255,1) 100%);
background: -ms-linear-gradient(left, rgba(0,115,255,1) 0%, rgba(0,200,255,1) 100%);
background: linear-gradient(to right, rgba(0,115,255,1) 0%, rgba(0,200,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0073ff', endColorstr='#00c8ff', GradientType=1 );
}
#demo .slide.current { z-index: 998; }

/*Youtube Video Cover Div*/
#demo .slide .cover { width:100%; height:100%; opacity:.1; background:#DCE1E4; cursor:pointer; position:absolute; }
#demo .slide .cover.hide { opacity:1; height:auto; background:transparent; }
#demo .slide .cover .close { font-family:FontAwesome; font-size:32px; color:#fff; position:absolute; right:20px; top:50px; }
#demo .slide .cover .close:before { content:"\f00d"; }

/*Youtube Video In Background Div*/
#demo .slide .videoinbg { z-index:0; }

/*Slide 1*/
#demo .slide.index1 h1 { width:100%; font-size:55px; font-weight:300; color:#000; text-align:center; position: absolute; top: 70px; }
#demo .slide.index1 h2 { width:100%; font-size:15px; font-weight:300; text-align: center; text-transform: uppercase; position: absolute; top: 155px; }
#demo .slide.index1 h2 span { display: inline-block; background: #0B6CE1; color: #00C6FF; padding: 5px 15px; border-radius: 3px; }
#demo .slide.index1 i { width:100%; font-size:80px; font-weight:300; color:#0B6CE1; text-align: center; position: absolute; top: 266px; text-shadow:0 0 10px #fff; opacity: 0; }
#demo .slide.index1 h3 { width: 150px; font-size:12px; font-weight:300; background: #0B6CE1; color: #00C6FF; text-align: center; text-transform: uppercase; padding: 5px 0; position: absolute; border-radius: 3px; }
#demo .slide.index1 h3.slider { left: -1000px; bottom: 200px; }
#demo .slide.index1 h3.carousel { left: 504px; bottom: -1000px; }
#demo .slide.index1 h3.timeline { right: -1000px; bottom: 200px; }
#demo .slide.index1 img { position: absolute; }
#demo .slide.index1 img.slider { left: -1000px; bottom: 91px; }
#demo .slide.index1 img.carousel { left: 504px; bottom: -1000px; }
#demo .slide.index1 img.timeline { right: -1000px; bottom: 91px; }
#demo .slide.index1 h4 { font-size:13px; font-weight:300; color: #fff; text-shadow:0 0 10px #000; position: absolute; top:-1000px; right: 20px; }

/*Slide 2*/
#demo .slide.index2 h2 { min-width: 150px; font-size:15px; font-weight:300; color:#000; text-transform: uppercase; position: absolute; }
#demo .slide.index2 h2.left { right: 579px; text-align: right; }
#demo .slide.index2 h2.right { left: 579px; }
#demo .slide.index2 h2 span { border:solid 1px #0B6CE1; color: #000; display:block; padding: 2px 10px; border-radius: 2px 0 0 2px; }
#demo .slide.index2 h2.right span { background: #0B6CE1; color: #00C6FF; border-radius: 0 2px 2px 0;  }
#demo .slide.index2 h2.fr { top:100px; -webkit-animation-duration:1s; animation-duration:1s; }
#demo .slide.index2 h2.ca { top:170px; -webkit-animation-duration:1.5s; animation-duration:1.5s; }
#demo .slide.index2 h2.ct { top:240px; -webkit-animation-duration:2s; animation-duration:2s; }
#demo .slide.index2 h2.sf { top:310px; -webkit-animation-duration:2.5s; animation-duration:2.5s; }
#demo .slide.index2 h2.vs { top:380px; -webkit-animation-duration:3s; animation-duration:3s; }
#demo .slide.index2 h2.fs { top:450px; -webkit-animation-duration:3.5s; animation-duration:3.5s; }
#demo .slide.index2 img.icon { position: absolute; width: 50px; }
#demo .slide.index2 img.fr { left:355px; top:-1000px; }
#demo .slide.index2 img.ca { left:755px; top:-1000px; }
#demo .slide.index2 img.ct { left:355px; top:-1000px; }
#demo .slide.index2 img.sf { left:755px; top:-1000px; }
#demo .slide.index2 img.vs { left:355px; top:-1000px; }
#demo .slide.index2 img.fs { left:755px; top:-1000px; }
#demo .slide.index2 h4 { font-size:13px; font-weight:300; color: #fff; text-shadow:0 0 10px #000; position: absolute; top:-1000px; right: 20px; }

/*Slide 3*/
#demo .slide.index3 .tag { width:260px; height: 50px; line-height:50px; font-size: 14px; background: #0B6CE1; color: #00C6FF; text-align:center; text-transform:uppercase; position: absolute; }
#demo .slide.index3 .tag:before, #demo .slide.index3 .tag:after { content: ""; border-top: 25px solid transparent; border-bottom: 25px solid transparent; position: absolute; }
#demo .slide.index3 .tag:before { border-left: 40px solid #0B6CE1; right:-40px; top:0; }
#demo .slide.index3 .tag:after { border-right: 40px solid #0B6CE1; left:-40px; top:0; }
#demo .slide.index3 .tag.fls { left:-1000px; top: 110px; }
#demo .slide.index3 .tag.yvic { left:-1000px; top: 170px; }
#demo .slide.index3 .tag.bia { left:450px; top: -1000px; }
#demo .slide.index3 .tag.cs { left:450px; top: -1000px; }
#demo .slide.index3 .tag.tboh { left:450px; top: -1000px; }
#demo .slide.index3 .tag.ct { right:-1000px; top: 110px;  }
#demo .slide.index3 .tag.cos { right:-1000px; top: 170px; }
#demo .slide.index3 img.target { position: absolute; width: 100px; bottom: 57px; left: 225px; }
#demo .slide.index3 img.ar1 { position: absolute; bottom: 213px; right: -1000px; }
#demo .slide.index3 h4 { font-size:14px; font-weight:300; color: #fff; text-shadow:0 0 10px #000; position: absolute; bottom: 225px; right: 330px; opacity: 0; }

/*Slide 4*/
#demo .slide.index4 { background:#000; }

/*Slide 5*/
#demo .slide.index5 { background:#000; }
#demo .slide.index5 h1 { width:100%; font-size:15px; font-weight:300; text-align: center; position: absolute; bottom: 100px; -webkit-animation-duration:2s; animation-duration:2s; }
#demo .slide.index5 h1 span { display: inline-block; background: #0B6CE1; color: #00C6FF; padding: 5px 15px; border-radius: 3px; }

/*Media Query*/
@media (max-width: 1160px) {

	#demo {width:100%; height: 550px; }
	#demo .slide { height: 550px; }

	#demo .control a { width:30px; height:30px; top:265px; font-size: 40px; }

	#demo .slide.index1 h1 { width: auto; left: 10%; }
	#demo .slide.index1 h2 { width: auto; left: 10%; }
	#demo .slide.index1 h3.slider { left: 10%!important; }
	#demo .slide.index1 h3.carousel { left:40%; bottom: 200px!important; }
	#demo .slide.index1 h3.timeline { left: 70%; }
	#demo .slide.index1 img.slider { left: 10%!important; }
	#demo .slide.index1 img.carousel { left:40%; bottom: 91px!important; }
	#demo .slide.index1 img.timeline { left: 70%; }
	#demo .slide.index1 i { display: none; }

	#demo .slide.index2 h2 { font-size: 14px; }
	#demo .slide.index2 h2.left { right: inherit!important; left: 100px!important; }
	#demo .slide.index2 h2.right { left: 250px!important; }
	#demo .slide.index2 h2.fr { top:50px; }
	#demo .slide.index2 h2.ca { top:100px; }
	#demo .slide.index2 h2.ct { top:150px; }
	#demo .slide.index2 h2.sf { top:200px; }
	#demo .slide.index2 h2.vs { top:250px; }
	#demo .slide.index2 h2.fs { top:300px; }

	#demo .slide.index2 img.icon { max-width: 40px; width:auto; height: 30px; -webkit-animation-duration: 0s!important; animation-duration: 0s!important; -webkit-transform:none!important; -moz-transform:none!important; transform:none!important; opacity:1!important; }
	#demo .slide.index2 img.fr { left: 60%; top:25%!important; }
	#demo .slide.index2 img.ca { left: 70%; top:35%!important; }
	#demo .slide.index2 img.ct { left: 80%; top:45%!important; }
	#demo .slide.index2 img.sf { left: 60%; top:45%!important; }
	#demo .slide.index2 img.vs { left: 80%; top:25%!important; }
	#demo .slide.index2 img.fs { left: 70%; top:54%!important; }

	#demo .slide.index3 .tag { height: 30px; line-height: 30px; font-size: 12px; }
	#demo .slide.index3 .tag::after { border-bottom: 15px solid transparent; border-top: 15px solid transparent; }
	#demo .slide.index3 .tag::before, #demo .slide.index3 .tag::after { border-bottom: 15px solid transparent; border-top: 15px solid transparent; }
	#demo .slide.index3 .tag::after { border-right: 30px solid #006cb4; left: -30px; }
	#demo .slide.index3 .tag::before { border-left: 30px solid #006cb4; right: -30px; }
	#demo .slide.index3 .tag.fls { left:100px!important; top: 50px; }
	#demo .slide.index3 .tag.yvic { left:100px!important; top: 100px; }
	#demo .slide.index3 .tag.bia { left:100px; top: 150px!important; }
	#demo .slide.index3 .tag.cs { left:100px; top: 200px!important; }
	#demo .slide.index3 .tag.tboh { left:100px; top: 250px!important; }
	#demo .slide.index3 .tag.ct { right:inherit!important; left: 100px; top: 300px; }
	#demo .slide.index3 .tag.cos { right:inherit!important; left: 100px; top: 350px;}
	#demo .slide.index3 img.target { width: 100px!important; bottom: 20%; left: inherit!important; right: 20%; }
	#demo .slide.index3 img.ar1 { display: none!important; }
	#demo .slide.index3 h4 { bottom: inherit; top:10px; opacity: 1!important; right: 10px; }
}

@media (max-width: 1024px) {

	#demo { height: 500px; }
	#demo .slide { height: 500px; }

	/*Controls (Next & Previous)*/
    #demo .control a { top:37px; }
    #demo .control a.fa-angle-left { left:inherit; right: 35px; }
    #demo .control a.fa-angle-right { right:5px; }
	
}

@media (max-width: 768px) {
	
	.js_search { bottom: -50px; }
	.js_search input { width: 250px; font-size:12px; padding: 7px; }
    .js_search .searchresult { margin:12px; }

    #demo { height: 350px; }
    #demo .slide { height: 350px; }

	#demo .slide.index1 h1 { font-size: 30px; top: 25px; }
	#demo .slide.index1 h2 { font-size: 12px; top:70px; }
	#demo .slide.index1 h3 { width: 110px; }
	#demo .slide.index1 img { width: 110px; }
	#demo .slide.index1 h3.slider { left: 10%!important; bottom: 140px; }
	#demo .slide.index1 h3.carousel { left:40%; bottom: 140px!important; }
	#demo .slide.index1 h3.timeline { left: 70%; bottom: 140px; }
	#demo .slide.index1 img.slider { left: 10%!important; bottom: 65px; }
	#demo .slide.index1 img.carousel { left:40%; bottom: 65px!important; }
	#demo .slide.index1 img.timeline { left: 70%; bottom: 65px; }

	#demo .slide.index2 h2 { font-size: 13px; min-width: 130px; }
	#demo .slide.index2 h2.left { left: 20px!important; }
	#demo .slide.index2 h2.right { left: 150px!important; }
	#demo .slide.index2 h2.fr { top:20px; }
	#demo .slide.index2 h2.ca { top:60px; }
	#demo .slide.index2 h2.ct { top:100px; }
	#demo .slide.index2 h2.sf { top:140px; }
	#demo .slide.index2 h2.vs { top:180px; }
	#demo .slide.index2 h2.fs { top:220px; }

	#demo .slide.index3 .tag { width: 210px; }
	#demo .slide.index3 .tag.fls { left:50px!important; top: 20px; }
	#demo .slide.index3 .tag.yvic { left:50px!important; top: 60px; }
	#demo .slide.index3 .tag.bia { left:50px; top: 100px!important; }
	#demo .slide.index3 .tag.cs { left:50px; top: 140px!important; }
	#demo .slide.index3 .tag.tboh { left:50px; top: 180px!important; }
	#demo .slide.index3 .tag.ct { left: 50px; top: 220px; }
	#demo .slide.index3 .tag.cos { left: 50px; top: 260px;}
	#demo .slide.index3 h4 { display: none; }
}

@media (max-width: 767px) {
	/*Controls (Next & Previous)*/
    #demos .control a { font-size: 40px; }

    #demo .slide.index3 img.target { display: none!important; }
}

@media (max-width: 480px) {
	#demo .slide.index1 h1 { left: 5%; }
	#demo .slide.index1 h2 { left: 5%; }
	#demo .slide.index1 h3 { width: 100px; font-size: 11px; }
	#demo .slide.index1 img { width:100px; }
	#demo .slide.index1 h3.slider { left: 5%!important; }
	#demo .slide.index1 h3.carousel { left: 35%; }
	#demo .slide.index1 h3.timeline { left: 65%!important; }
	#demo .slide.index1 img.slider { left: 5%!important; }
	#demo .slide.index1 img.carousel { left: 35%; }
	#demo .slide.index1 img.timeline { left: 65%!important; }

	#demo .slide.index2 h2.left { left: 20px; }
	#demo .slide.index2 h2.right { left:150px; }

	#demo .slide.index2 img.icon { max-width: 30px; height: 20px; }
	#demo .slide.index2 img.fr { left: 70%; top:20%; }
	#demo .slide.index2 img.ca { left: 70%; top:35%; }
	#demo .slide.index2 img.ct { left: 70%; top:50%; }
	#demo .slide.index2 img.sf { left: 85%; top:25%; }
	#demo .slide.index2 img.vs { left: 85%; top:40%; }
	#demo .slide.index2 img.fs { left: 85%; top:55%; }

	#demo .slide.index2 h4 { font-style: 11px; right: 10px; top:10px; }
}

@media (max-width: 479px) {
	#demo .slide.index1 h3 { width: 80px; }
	#demo .slide.index1 img { width:80px; }

	#demo .slide.index2 img.icon { display: none; }
	#demo .slide.index2 h4 { display: none; }
}