* { margin: 0; padding: 0; }

body { overflow-x: hidden;
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 );
}

/*Team carousel*/
#demo { width:1000px; height: 325px; position: relative; margin: 0 auto 50px auto; background: #EEF1F3; padding:0; }
#demo.loading * { opacity: 0!important; visibility: hidden!important; }
#demo.loading { background: url(../img/loading.gif) no-repeat center #EEF1F3; }
#demo a, #demo input { outline: none; }

/*Pagination*/
#demo .pagination { width: 50%; text-align: center; overflow: hidden; position: absolute; left: 25%; bottom: -30px; 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: #006CB4; opacity: 0.3; 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: -42px; z-index: 999; }
#demo .control a:hover { opacity: 0.5; }
#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:#000; 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; }

/*Slide*/
#demo .slide { width: 98%; font-family: 'Roboto', sans-serif; background: #EEF1F3; padding:10px 0; color: #000; position: absolute; left: 1%; top: 0; overflow: hidden; text-align: center; }
#demo .slide.current { z-index: 998; }
#demo .slide .carousel { width:25%; padding: 0; float:left; }
#demo .slide .carousel img { position: relative; width:96%; margin: 0 auto; display: block; }
#demo .slide h1 { font-size:17px; font-weight: 300; margin: 10px 0 10px 0; }
#demo .slide h2 { font-size:14px; font-weight: 300; margin: 0; }

/*Sorting*/
#demo .sorting { font-size: 12px; font-weight: 600; color: #6C6C6C; padding: 5px 15px; background: #EEF1F3; border:none; position: absolute; bottom:-36px; left: 0; }

/*Media Query*/

/*Tablet*/
@media (max-width: 1000px) {

    #demo { width:90%; height:290px; }

    /*Slide*/
    #demo .slide .carousel { width:31%; margin: 0 1%; min-height: auto; }

}

/*Moile*/
@media (max-width: 767px) {

    body { overflow: inherit; }

    #demo { width: 60%; height:290px; }

    /*Controls (Next & Previous)*/
    #demo .control a { bottom: -35px; }

    /*Pagination*/
    #demo .pagination { width:100%; left: 0; }

    /*Sorting*/
    #demo .sorting { width: 100%; bottom: -65px; }

    /*Slide*/
    #demo .slide .carousel { width:48%; margin: 0 1%; }

}

@media (max-width: 667px) { /*iPhone 6 landscape*/

    #demo { height:270px; }

}

@media (max-width: 568px) { /*iPhone 5 landscape*/

    #demo { height:250px; }

}

@media (max-width: 414px) { /*iPhone 6 Plus portrait*/

     #demo { width: 90%; height:250px; }

}



/*Other*/
body #header { width: 900px; }
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: 900px) {
    body #header { width: 100%; }
}