* { margin: 0; padding: 0; }

body {
background: rgba(142,158,171,1);
background: -moz-linear-gradient(left, rgba(142,158,171,1) 0%, rgba(238,242,243,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(142,158,171,1)), color-stop(100%, rgba(238,242,243,1)));
background: -webkit-linear-gradient(left, rgba(142,158,171,1) 0%, rgba(238,242,243,1) 100%);
background: -o-linear-gradient(left, rgba(142,158,171,1) 0%, rgba(238,242,243,1) 100%);
background: -ms-linear-gradient(left, rgba(142,158,171,1) 0%, rgba(238,242,243,1) 100%);
background: linear-gradient(to right, rgba(142,158,171,1) 0%, rgba(238,242,243,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e9eab', endColorstr='#eef2f3', GradientType=1 );
overflow-x:hidden; 
}

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

/*Pagination*/
#demo .pagination { width: 100%; text-align: center; overflow: hidden; position: absolute; left: 0; bottom: -65px; z-index: 999; }
#demo .pagination a { width: 100px; height: 54px; overflow: hidden; margin: 0 5px; display: inline-block; }
#demo .pagination a img { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
#demo .pagination a.active img, #demo .pagination a.find img { -webkit-filter: grayscale(0%); filter: grayscale(0%); }

/*Controls (Next & Previous)*/
#demo .control a { width: 40px; height: 40px; background-size: 100%; background-repeat: no-repeat; position:absolute; top:306px; z-index: 999; }
#demo .control a:hover { opacity: 0.5; }
#demo .control a.prev { left: 20px; background-image: url(../img/prev.png); }
#demo .control a.next { right: 20px; background-image: url(../img/next.png); }

/*Play & Pause*/
#demo .process { width: 0px; height: 1px; 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:'Open Sans',sans-serif; font-size:15px; font-weight:600; color:#000; border:none; padding:12px;  background:url(../img/search-icon-fs.png) no-repeat 96% center #dddddd; 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; }
#demo .slide.current { z-index: 998; }

/*Youtube Video Cover Div*/
#demo .slide .cover { width: 100%; height: 100%; opacity: 0.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 { text-align: center; background: url("../img/bg-1-1160.jpg") no-repeat center #BDF0E3; background-size: 140% auto; }
#demo .slide.index1 img.aeonian-t { margin-top: 70px; }
#demo .slide.index1 h1 { font-size: 55px; font-weight: 900; color:#475159; letter-spacing: 15px; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; }
#demo .slide.index1 h2 { font-size: 25px; font-weight: 600; color:#006CB4; margin-top: 65px; -webkit-animation-duration: 2.5s; animation-duration: 2.5s; }
#demo .slide.index1 h3 { font-size: 20px; font-weight: 400; color:#fff; margin-top: 15px; text-shadow: 1px 1px 1px #333; -webkit-animation-duration: 4s; animation-duration: 4s; }

/*Slide 2*/
#demo .slide.index2 { background: url("../img/bg-2-1160.jpg") no-repeat center #BDF0E3; background-size: 101% auto; }
#demo .slide.index2 h1 { font-size: 55px; font-weight: 900; color:#475159; position: absolute; left: 100px; top: 60px; -webkit-animation-duration: 2s; animation-duration: 2s; }
#demo .slide.index2 h2 { font-size: 25px; font-weight: 600; color:#006CB4; position: absolute; left: 100px; top: 130px; letter-spacing: 3px; -webkit-animation-duration: 4s; animation-duration: 4s; }
#demo .slide.index2 h3 { font-size: 17px; font-weight: 400; color:#fff; text-shadow: 1px 1px 1px #333; position: absolute; left:150px; -webkit-animation-duration: 5s; animation-duration: 5s; }
#demo .slide.index2 h3:before { font-family: FontAwesome; font-size: 14px; position: relative; top: -2px; content: "\f00c"; margin-right: 10px; }
#demo .slide.index2 h3.first { top:220px; }
#demo .slide.index2 h3.second { top:255px; }
#demo .slide.index2 h3.third { top:290px; }
#demo .slide.index2 h3.forth { top:325px; }
#demo .slide.index2 h3.fifth { top:360px; }
#demo .slide.index2 h3.sixth { top:395px; }
#demo .slide.index2 h3.seventh { top:430px; }
#demo .slide.index2 h3.eighth { top:465px; }
#demo .slide.index2 img { position: absolute; }
#demo .slide.index2 img.imac { right: 166px; bottom: 100px; }
#demo .slide.index2 img.ipad { right: 35px; bottom: 100px; }
#demo .slide.index2 img.iphone { right: 525px; bottom: 100px; }
#demo .slide.index2 img.imac-screen { width: 308px; right: 187px; bottom: 191px; opacity: 0; }
#demo .slide.index2 img.ipad-screen { width: 113px; right: 103px; bottom: 129px; opacity: 0; }
#demo .slide.index2 img.iphone-screen { width: 66px; right: 492px; bottom: 124px; opacity: 0; }

/*Slide 3*/
#demo .slide.index3 { background: url("../img/bg-3-1160.jpg") no-repeat center #BDF0E3; background-size: 101% auto; }
#demo .slide.index3 h1 { font-size: 55px; font-weight: 900; color:#475159; position: absolute; left: 100px; top: 80px; -webkit-animation-duration: 2s; animation-duration: 2s; }
#demo .slide.index3 h2 { font-size: 25px; font-weight: 600; color:#006CB4; position: absolute; left: 100px; top: 150px; letter-spacing: 3px; -webkit-animation-duration: 4s; animation-duration: 4s; }
#demo .slide.index3 a { font-size: 18px; font-weight: 400; color:#fff; text-decoration: none; text-shadow: 1px 1px 1px #333; position: absolute; left:100px; -webkit-animation-duration: 5s; animation-duration: 5s; }
#demo .slide.index3 a:before { font-family: FontAwesome; font-size: 14px; position: relative; top: -2px; content: "\f00c"; margin-right: 10px; }
#demo .slide.index3 a:hover { color: #475159; text-shadow:none; }
#demo .slide.index3 a.first { top:320px; }
#demo .slide.index3 a.second { top:355px; }
#demo .slide.index3 a.third { top:390px; }
#demo .slide.index3 a.forth { top:425px; }
#demo .slide.index3 a.fifth { top:320px; left: 360px; }
#demo .slide.index3 a.sixth { top:355px; left: 360px; }
#demo .slide.index3 a.seventh { top:390px; left: 360px; }
#demo .slide.index3 a.eighth { top:425px; left: 360px; }
#demo .slide.index3 img { position: absolute; }
#demo .slide.index3 img.setting1 { width: 250px; right: 70px; top: 70px; }
#demo .slide.index3 img.setting2 { width: 110px; right: 140px; top: 370px; }
#demo .slide.index3 img.setting3 { width: 150px; right: 310px; top: 300px; }

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


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

    #demo { width:100%; height: 500px; }

    #demo .slide { height: 500px; border-left: none; border-right: none; }

    #demo .control a { width:30px; height:30px; top:235px; }

    .js_search input { width: 400px; }

    #demo .slide.index1 { background-size: auto auto!important; }
    #demo .slide.index1 img.aeonian-t { margin-top: 50px; width: 200px; }
    #demo .slide.index1 img.aeonian-b { width: 200px; }
    #demo .slide.index1 h1 { font-size: 50px; }
    #demo .slide.index1 h2 { font-size: 25px; margin-top: 45px; }
    #demo .slide.index1 h3 { font-size: 18px; margin-top: 15px; }
    
    #demo .slide.index2 { background-size: auto auto; }
    #demo .slide.index2 h1 { font-size: 50px; left: 80px; }
    #demo .slide.index2 h2 { font-size: 25px; left: 80px; top: 125px; }
    #demo .slide.index2 h3 { font-size: 17px; left: 80px; }
    #demo .slide.index2 h3.first { top:200px; }
    #demo .slide.index2 h3.second { top:230px; }
    #demo .slide.index2 h3.third { top:260px; }
    #demo .slide.index2 h3.forth { top:290px; }
    #demo .slide.index2 h3.fifth { top:320px; }
    #demo .slide.index2 h3.sixth { top:350px; }
    #demo .slide.index2 h3.seventh { top:380px; }
    #demo .slide.index2 h3.eighth { top:405px; }
    
    #demo .slide.index3 { background-size: auto auto; }
    #demo .slide.index3 h1 { font-size: 50px; left: 80px; }
    #demo .slide.index3 h2 { font-size: 25px; left: 80px; top: 135px; }
    #demo .slide.index3 a { font-size: 17px; left: 80px; }
    #demo .slide.index3 a.first { top:230px; }
    #demo .slide.index3 a.second { top:260px; }
    #demo .slide.index3 a.third { top:290px; }
    #demo .slide.index3 a.forth { top:320px; left: 80px; }
    #demo .slide.index3 a.fifth { top:350px; left: 80px; }
    #demo .slide.index3 a.sixth { top:380px; left: 80px; }
    #demo .slide.index3 a.seventh { top:410px; left: 80px; }
    #demo .slide.index3 a.eighth { top:440px; left: 80px; }
    
}

@media (max-width: 1023px) {

    #demo .slide.index2 img.imac { width: 250px; right: 131px; }
    #demo .slide.index2 img.ipad { width: 90px; right: 35px!important; }
    #demo .slide.index2 img.iphone { width: 50px; right: 385px!important; }
    #demo .slide.index2 img.imac-screen { display: none; }
    #demo .slide.index2 img.ipad-screen { display: none; }
    #demo .slide.index2 img.iphone-screen { display: none; }

    #demo .slide.index3 img.setting1 { width: 210px; right: 100px; top: 110px; }
    #demo .slide.index3 img.setting2 { width: 80px; right: 170px!important; top: 340px; }
    #demo .slide.index3 img.setting3 { width: 110px; right: 270px!important; top: 290px; }

}

@media (max-width: 768px) {
    #demo .control a { top:inherit; bottom: 10px; }
    #demo .control a.prev { left: inherit; right: 45px; }
    #demo .control a.next { right: 10px; }

    .js_search { bottom: -70px; }
    .js_search input { width: 60%; padding: 10px; }
    .js_search .searchresult { margin: 15px; }

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

    #demo .slide.index1 img.aeonian-t { margin-top: 40px; width: 150px; }
    #demo .slide.index1 img.aeonian-b { width: 150px; }
    #demo .slide.index1 h1 { font-size: 40px; }
    #demo .slide.index1 h2 { font-size: 20px; margin-top: 40px; }
    #demo .slide.index1 h3 { font-size: 18px; }

    #demo .slide.index2 h1 { font-size: 40px; left: 20px; }
    #demo .slide.index2 h2 { font-size: 20px; left: 20px; top: 115px; }
    #demo .slide.index2 h3 { font-size: 15px; left: 20px!important; }
    #demo .slide.index2 h3.first { top:170px; }
    #demo .slide.index2 h3.second { top:195px; }
    #demo .slide.index2 h3.third { top:220px; }
    #demo .slide.index2 h3.forth { top:245px; }
    #demo .slide.index2 h3.fifth { top:270px; }
    #demo .slide.index2 h3.sixth { top:295px; }
    #demo .slide.index2 h3.seventh { top:320px; }
    #demo .slide.index2 h3.eighth { top:345px; }
    #demo .slide.index2 img.imac { display: none; }
    #demo .slide.index2 img.ipad { right:50px!important; }
    #demo .slide.index2 img.iphone { right:200px!important; }

    #demo .slide.index3 h1 { font-size: 40px; left: 20px; top: 60px; }
    #demo .slide.index3 h2 { font-size: 20px; left: 20px; top: 110px; }
    #demo .slide.index3 a { font-size: 15px; left: 20px; }
    #demo .slide.index3 a.first { top:190px; }
    #demo .slide.index3 a.second { top:215px; }
    #demo .slide.index3 a.third { top:240px; }
    #demo .slide.index3 a.forth { top:265px; left: 20px; }
    #demo .slide.index3 a.fifth { top:290px; left: 20px; }
    #demo .slide.index3 a.sixth { top:315px; left: 20px; }
    #demo .slide.index3 a.seventh { top:340px; left: 20px; }
    #demo .slide.index3 a.eighth { top:365px; left: 20px; }
    #demo .slide.index3 img.setting1 { width: 210px; right: 50px!important; top: 50px; }
    #demo .slide.index3 img.setting2 { width: 80px; right: 120px!important; top: 270px!important;; }
    #demo .slide.index3 img.setting3 { width: 110px; right: 220px!important;; top: 230px; }

}

@media (max-width: 767px) {

    #demo .pagination a { width: 70px; height: auto; }
    #demo .pagination a img { width: 100%; }

    #demo .slide.index2 img.ipad { display: none; }
    #demo .slide.index2 img.iphone { right: 50px!important; }

    #demo .slide.index3 img.setting1 { display: none; }
    #demo .slide.index3 img.setting2 { display: none; }
    #demo .slide.index3 img.setting3 { right: 50px!important; }

}

@media (max-width: 568px) {

    #demo .slide.index1 { background-size: auto 100%; }
    #demo .slide.index1 h2 { margin-top: 30px; }
    #demo .slide.index1 h3 { font-size: 11px; font-weight: 900; margin-top: 15px; }

    #demo .slide.index2 { background-size: auto 100%; }    

    #demo .slide.index3 { background-size: auto 100%; }   

}


/*Other*/
body #header .custom-menu li:hover > a { background: none;  color: #000; }
body #header .custom-menu li.current > a { background: none; color: #fff;  }
body #otherdetail { padding-top: 100px; }