/*
Responsive Template Name: RS-1200 Prototype 45
File: Media Queries CSS
Author: OS Templates
Author URI: http://www.os-templates.com/
Licence: <a href="http://www.os-templates.com/template-terms">Website Template Licence</a>
*/

@-ms-viewport{width:device-width;} /* http://msdn.microsoft.com/en-gb/library/ie/hh869615%28v=vs.85%29.aspx */

/* 240 + 320px */

@media screen and (min-width:180px) and (max-width:360px) {
    #header, #topnav, #intro, #container, #footer, #copyright{max-width:95%; margin:0 auto;}

    #topnav ul{display:none;}
    form input[type="submit"]{margin-bottom:10px;}

    .one_half, .one_half.nogutter, 
    .one_third, .two_third, .one_third.nogutter, .two_third.nogutter, 
    .one_quarter, .two_quarter, .three_quarter, .one_quarter.nogutter, .two_quarter.nogutter, .three_quarter.nogutter, 
    .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_fifth.nogutter, .two_fifth.nogutter, .three_fifth.nogutter, .four_fifth.nogutter, 
    .one_sixth, .two_sixth, .three_sixth, .four_sixth, .five_sixth, .one_sixth.nogutter, .two_sixth.nogutter, .three_sixth.nogutter, .four_sixth.nogutter, .five_sixth.nogutter{display:block; float:none; width:auto; margin:0 0 5% 0; padding:0;}

    #header #hgroup, #header #header-contact{display:block; width:100%; float:none; margin:0 0 15px 0; padding:0; text-align:center;}
    #header #header-contact{margin:30px 0 0 0;}
    #header #header-contact li{display:block; margin:15px 0 0 0; padding:0; border:none;}
    #header #header-contact li:first-child{margin:0;}

    .calltoaction div{margin-top:30px;}
    .calltoaction div:first-child{margin-top:0;}
    .calltoaction.opt4{font-size:1.5em;}

    #blog-post #comment-count div{float:none; margin-top:10px; text-align:center;}
    #blog-post #comment-count div:first-child{margin-top:0;}
    #blog-post .list.block li > ul, #blog-post .list.block li > ol{margin:0; padding:0; list-style:none; border:none;}

    #fof{padding:30px 0 0 0;}
    #fof h1{margin:0 0 20px 0; font-size:7em;}
    #fof h2{margin:0 0 20px 0; font-size:2em;}

    #footer div{margin-bottom:5%;}
    #footer #ft_gallery li, #footer #ft_gallery .first{display:inline-block; float:left; width:auto; margin:0 10px 10px 0; padding:0; clear:none;}
    #footer #ft_gallery li img{}

    #header, #copyright{text-align:center;}
    #copyright p{float:none; line-height:1.6em;}
    #copyright p:first-child{margin-bottom:8px;}
}

/* 480px */

@media screen and (min-width:361px) and (max-width:615px) {
    #header, #topnav, #intro, #container, #footer, #copyright{max-width:95%; margin:0 auto;}

    #topnav ul{display:none;}
    form input[type="submit"]{margin-bottom:10px;}

    .one_half, .one_half.nogutter, 
    .one_third, .two_third, .one_third.nogutter, .two_third.nogutter, 
    .one_quarter, .two_quarter, .three_quarter, .one_quarter.nogutter, .two_quarter.nogutter, .three_quarter.nogutter, 
    .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_fifth.nogutter, .two_fifth.nogutter, .three_fifth.nogutter, .four_fifth.nogutter, 
    .one_sixth, .two_sixth, .three_sixth, .four_sixth, .five_sixth, .one_sixth.nogutter, .two_sixth.nogutter, .three_sixth.nogutter, .four_sixth.nogutter, .five_sixth.nogutter{display:block; float:none; width:auto; margin:0 0 5% 0; padding:0;}

    #header #hgroup, #header #header-contact{display:block; width:100%; float:none; margin:0 0 15px 0; padding:0;}
    #header #header-contact{margin:30px 0 0 0;}

    #sidebar_2 ul.nospace li{display:inline; float:left; width:30%; margin:0 0 0 5%;}
    #sidebar_2 ul.nospace li:first-child{margin-left:0;}

    #contact .contact_details > div{display:block; float:none; margin-left:0;}

    .calltoaction div{margin-top:30px;}
    .calltoaction div:first-child{margin-top:0;}

    #fof{padding:30px 0 0 0;}
    #fof h1{margin:0 0 20px 0; font-size:7em;}
    #fof h2{margin:0 0 20px 0; font-size:2em;}

    #footer div{margin-bottom:5%;}
    #footer #ft_gallery li, #footer #ft_gallery .first{display:inline-block; float:left; width:auto; margin:0 10px 10px 0; padding:0; clear:none;}

    #copyright p{float:none;}
    #copyright p:first-child{margin-bottom:8px;}
}

/* 768px */

@media screen and (min-width:616px) and (max-width:800px) {
    #header, #topnav, #intro, #container, #footer, #copyright{max-width:95%; margin:0 auto;}

    #topnav ul{display:none;}
    form input[type="submit"]{margin-bottom:10px;}

    .calltoaction.opt4 div{display:block; float:none; width:100%; margin:30px 0 0 0;}
    .calltoaction.opt4 div:first-child{margin-top:0; text-align:center;}
    .calltoaction.opt4{font-size:1.5em;}

    #fof{padding:30px 0 0 0;}
    #fof h1{margin-top:0; font-size:12em;}
    #fof h2{margin-top:0;}
}

/* 960px */

@media screen and (min-width:960px) {
    #header, #topnav, #intro, #container, #footer, #copyright{max-width:95%; margin:0 auto;}
}

/* 1028px */

@media screen and (min-width:1028px) {
    #header, #topnav, #intro, #container, #footer, #copyright{max-width:95%; margin:0 auto;}
}

/* 1200px */

@media screen and (min-width:1200px) {
    body.boxed .wrapper{max-width:1140px;}
    #header, #topnav, #intro, #container, #footer, #copyright, .stretched{max-width:1200px; margin:0 auto;}
}

/* Hide The Jquery Generated Navigation Form from 801px upwards */

@media screen and (min-width:801px) and (max-width:10000px) {
    #topnav form{display:none;}
}

/* Resize Extended Box */

@media screen and (min-width:1501px) {
    body.boxed .wrapper .stretched{margin-left:-2.6%; margin-right:-2.6%;}
}

@media screen and (max-width:360px) {

    /* hide left + right float menu */
    /* #cbp-spmenu-s1, #sticky{display:none;} */

    /* header */
    #header{max-width: 100%;height:auto !important}
    #header #hgroup{float: none;margin:0 !important;padding:0 !important;height:auto !important}
    #header #header-login{float: left;text-align: center;margin:0 !important;padding:0 !important;height:auto !important;width:100%;top:0 !important;background-color: #D6D6D6;}
    #header #header-login ul{margin:0 !important;padding:0;height: 30px;line-height: 30px;}

    /* tab */
    .rr-right { float : none; width: 100%; }

    /* menu */
    .row8 #container .three_quarter.first.nogutter, .row8 #container .one_quarter.nogutter{width:100% !important;margin:0;padding:0;}
    .clock {text-align: left !important;padding:10px 5px 5px 5px !important;margin:0 !important;}
    #topnav form { padding : 0;}
    #topnav {max-width: 100%;}
    #container {max-width: 100%;}

    /* hightlight */
    #rslides img { height : 158px !important; }

    /* search box */
    #frmsearch .one_third{width:50%;margin:10px 0;padding:0;float:left;}
    #frmsearch .one_sixth {float:left;padding:0;margin:0;}
    #frmsearch .five_sixth {float:left;margin:0;padding:0;}
    #frmsearch .push10{margin:0;padding:0;}

    /* latest events */
    #owl-carousel5 .one_third{display:none;}
    #owl-carousel5 .two_third{margin:0;padding:0;width:100%;}

    /* other stats link */
    .osldiv .rndborder{height:auto !important;}

    /* galeri + client's charter achivement + data visualisation + ilsm */
    /*.height76.rndborder {background:white;text-align: center;}*/
    .height76.rndborder img{width:100% !important;height:76px !important;}

    /* key indicators + statistics by themes */
    /*.box12{height:auto !important;overflow: auto;}*/
    .box12 .tab-wrapper2 .tab-nav li.one_half{width:100% !important;text-align: left !important;}
    .box12 .tab-wrapper2 .tab-container.box-inside.box-inside-white.pad10 #tab-3,.box12 .tab-wrapper2 .tab-container.box-inside.box-inside-white.pad10 #tab-4{background: none repeat scroll 0% 0% #FFF;height:540px !important;overflow:auto;padding: 10px;border-radius: 3px !important;}
    .box12 .tab-wrapper2 .tab-container.box-inside.box-inside-white.pad10{background:none;padding:0;margin:0;}

    /* population clock */
    .box13{height:auto !important;}
    .box13 h1.push10{margin:10px 0px 30px;}
    .popclock .two_sixth, .popclock .four_sixth{text-align: left !important;}

    /* social media */
    .box13 + .box.rndborder .pad10 .one_sixth {float:left;margin:5px 10px;}

}

@media screen and (max-width:360px) {

    /* Setting based email 09072015 */
    /* Banner Portal (sebelah login), Highlight, Latest Events, Other Stats Link, Gallery, Client's Charter Achievement, Data Visualisation , ILSM, Agency Links */
    #hgroup, .box3, .height76, .osldiv, .latest-event, .agency-links{ display : none !important; }

}