* { 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;  
}

/*Image Slider*/
#demo { width: 800px; height: 400px; position: relative; margin: 0 auto; }
#demo.loading * { opacity: 0!important; visibility: hidden!important; }
#demo.loading { background: url(../img/loading.gif) no-repeat center #fff; }
#demo a, #demo input { outline: none; }

/*Pagination*/
#demo .pagination { width: 50%; text-align: center; overflow: hidden; position: absolute; left: 25%; bottom: 10px; z-index: 999; }
#demo .pagination a { width: 10px; height: 10px; text-indent: -15000px; overflow: hidden; font-size: 1px; margin: 0 2px; display: inline-block; background: #fff; opacity: 0.6; border-radius: 80px; }
#demo .pagination a.active, .pagi a.find { opacity: 1; }

/*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: 0px; height: 1px; position: absolute; left: 0; bottom: 1px; background-color: #fff; 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; }

/*Slide*/
#demo .slide { height: 400px; overflow: hidden; position: absolute; left: 0; top: 0; }
#demo .slide.current { z-index: 998; }
#demo .slide a, #demo .slide img { display: block; width: 100%; }


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

    #demo { margin: 0; width:100%; height: 340px; }

    /*Slide*/
    #demo .slide { height: auto; max-height: 350px; border-top: none; border-left: none; border-right: none; }

}

@media (max-width: 735px) {

	   #demo { height: 320px; }

}

@media (max-width: 568px) {

	   #demo { height: 280px; }

}

@media (max-width: 415px) {

	   #demo { height: 190px; }

}

@media (max-width: 321px) {

	   #demo { height: 160px; }

}

/*Other*/
body #header { width: 800px; }
body #header .custom-menu li:hover > a { background: none;  color: #000; }
body #header .custom-menu li.current > a { background: none; color: #fff;  }
@media screen and (max-width: 800px) {
    body #header { width: 100%; }
}