/**************** Responsive Style ****************/

@media print {
    a[href^=http]:after { content:" [" attr(href) "] "; }
    a[href^="#"]:after { content:""; }
    ul, ol { page-break-inside:avoid; }
    header, footer, #featured-area, #sidebar1, #sidebar2, #sidebar3, #wp_page_numbers, #related-post, #twos-comment, .post-meta { display:none; }
    #container, #content, #main-content, #main-content .single-content { float:none; width:100%; margin:0 auto; }
}

/* --- 1. Desktop & Large Screens (Up to 1200px) --- */
@media screen and (max-width: 1200px) {
    #main-content { width: 66%; }
    #content { width: 100%; }
    #sidebar1 { width: 27%; }
    #sidebar2 { width: 32%; }
    #sidebar2 img { max-width: 100%; }
    .single-page { width: 69% !important; }
    .single-page .single-content { width: 100% !important; }
}

@media screen and (max-width : 1050px) { 
    #wrap-introbar { width:100%; margin-top:0; background:#fff; margin-left: 0; }
}

@media only screen and (min-width : 1024px) and (max-width : 1199px) {
    #container { width:88%; }
    #img-header { margin-right:0; }
    #main-slider .caption { float: right; }
    #img-header img, #img-header object { max-width:370px; }
    #logo #slogan { width:314px; }
    #twossocial { margin-top:19px; }
    #main-menu { width:718px; }
    #main-menu li a { padding:0 10px; }
    #sidebar1 { width:25%; }
    #sidebar1 time { width:88%; }
    #main-content { width:74%; }
    #featured-area #tab-wrapper { width:65%; }
    .tabs li { margin:0 3px 5px; }
    .tabs li a { width:auto; }
    .latest-post { margin-left:12px; width:50%; }
    .latest-post img { width:100%; height:150px; }
    #tab-wrapper .latest-wrapper { width:47%; }
    .tab-container { height:298px; }
    #tab-wrapper .latest-wrapper li img { width:50px; height:50px; }
    #tab-wrapper .latest-wrapper li.latest { display:none; }
    #content { width:100%; }
    #main-content .single-content { width:75%; }
    #sidebar2 { width:312px; }
    #commentform #submit, .wpcf7-form .wpcf7-submit { float:none; margin:0; }
    ol.commentlist li div.vcard { width:210px; }
    #featured-area #slider-wrapper, #main-slider, #main-slider .container, #main-slider .slides div.slide, #main-slider .slides div.slide a img { width:377px; }
}

/* --- 2. Tablets (Up to 980px) --- */
@media screen and (max-width : 980px) { 
    #main-menu li a { color:#fff; }
    #main-menu ul { background:#34495E; }
    #tmb-slr { float: none; width: 100%; margin:15px 0 35px; }
    #container, #main-content, #content { width: 100% !important; float:none !important; }
    #sidebar1, #sidebar2 { width: 100% !important; float:none !important; margin:15px auto; }
    .single-page { width: 100% !important; clear: both; }
    .single-page .single-content { width: 100% !important; }
}

@media only screen and (min-width : 768px) and (max-width : 979px) {
    #img-header, .featured-ads img, .featured-ads object, #hadis { display:none; }
    #logo #slogan { right:282px; width:326px; }
    #nav-toggle { display:block; }
    #main-menu { position:absolute; width:150px; top:35px; right:-300px; border-radius:0 0 5px 5px; background:#25688f; border:1px solid #192e3c; }
    #main-menu li { float:none; border:none; line-height:18px; }
    #main-menu li a { padding:5px; border:none !important; }
    #main-menu li a:hover, #main-menu .current-menu-item a { background: #25688f !important; border:none !important; }
    #main-menu li.sfHover a { background: #25688f; }
    #main-menu li:hover ul, #main-menu li.sfHover ul, #main-menu li li:hover ul, #main-menu li li.sfHover ul { right:150px; top:0; }
    #featured-area #tab-wrapper { width:99%; float:none; margin:0 auto 8px; display:block; }
    .latest-post { width:412px; }
    .latest-post img { width:410px; }
    #commentform #submit, .wpcf7-form .wpcf7-submit { float:none; margin:0; }
    #featured-area #slider-wrapper, #featured-area .box { float:none; margin:0 auto 8px; }
}

@media screen and (max-width : 820px) { 
    #twossocial { margin-left:15px; }
}

/* --- 3. Mobile Phones (Up to 767px) --- */
@media screen and (max-width : 550px) { 
    #search-form { right: 0; left:0; margin:3px auto 0; }
    header .fl { position:absolute; left:0; top:0; }
    #logo { float:none; padding: 58px 14px 5px 7px; }
    #logo a { display:block; margin:auto; }
}

@media screen and (max-width: 520px) { 
    #featured-area #slider-wrapper { display:none; }
    header .fl { display: table; float: none !important; margin: 10px auto; position: static !important; }
}

@media only screen and (min-width : 480px) and (max-width : 767px) {
    #img-header, header nav, #sidebar3, footer nav, .featured-ads img, .featured-ads object { display:none; }
    #logo #slogan { right:286px; width:174px; top:118px; }
    #nav-toggle { display:block; }
    #main-menu { position:absolute; width:100px; top:35px; right:-300px; border-radius:0 0 5px 5px; background:#25688f; border:1px solid #192e3c; }
    #main-menu li { float:none; border:none; line-height:18px; }
    #main-menu li a { padding:5px; border:none !important; }
    #main-menu li a:hover, #main-menu .current-menu-item a { background: #25688f !important; border:none !important; }
    #main-menu li.sfHover a { background: #25688f; }
    #main-menu ul { width:100px; }
    #main-menu li:hover ul, #main-menu li.sfHover ul, #main-menu li li:hover ul, #main-menu li li.sfHover ul { right:100px; top:0; }
    #featured-area #tab-wrapper { width:99%; float:none; margin:0 auto 8px; display:block; }
    .tab-container { height:auto; }
    .tabs li { margin:0 13px 10px; }
    .latest-post { width:100%; float:none; margin:0 auto 15px; }
    .latest-post img { display:block; margin:0 auto 5px; }
    #tab-wrapper .latest-wrapper { width:100%; margin:0 auto; float:none; }
    .lpost-title { text-align:center; }
    #commentform #submit, .wpcf7-form .wpcf7-submit { float:none; margin:0; }
    ol.commentlist li div.vcard { width:162px; }
    footer { background:#0089A8; height:auto; padding:6px 0; }
    #copyright { width:auto; }
    #copyright p, #copyright p a { color:#fff; }
    #featured-area #slider-wrapper, #main-slider, #main-slider .container, #main-slider .slides div.slide, #main-slider .slides div.slide a img { width:430px !important; height:236px; }
    #main-slider .slides div.slide a img { height:202px; width:430px; }
    #featured-area #slider-wrapper, #featured-area .box { float:none; margin:0 auto 8px; }
    #featured-area .box { height:auto; width:99% !important; }
    #looped-slider { margin:0 auto; }
}

@media only screen and (min-width : 320px) and (max-width : 479px) {
    #img-header, #logo #slogan, header nav, #sidebar3, footer nav, #hadis, #sidebar2, .post-meta, .featured-ads img, .featured-ads object { display:none; }
    #nav-toggle { display:block; text-indent:-9999px; }
    #main-menu { position:absolute; width:75px; top:35px; right:-300px; border-radius:0 0 5px 5px; background:#25688f; border:1px solid #192e3c; }
    #main-menu li { float:none; border:none; line-height:18px; }
    #main-menu li a { padding:5px; border:none !important; }
    #main-menu li a:hover, #main-menu .current-menu-item a { background: #25688f !important; border:none !important; }
    #main-menu li.sfHover a { background: #25688f; }
    #main-menu ul { width:75px; }
    #main-menu li:hover ul, #main-menu li.sfHover ul, #main-menu li li:hover ul, #main-menu li li.sfHover ul { right:75px; top:0; }
    #commentform input, #commentform textarea, .wpcf7-form input, .wpcf7-form textarea, .wpcf7-form .wpcf7-select { width:252px; }
    .wpcf7-checkbox .wpcf7-list-item input, .wpcf7-radio .wpcf7-list-item input, .wpcf7-form .wpcf7-acceptance { width:14px; }
    #commentform #submit, .wpcf7-form .wpcf7-submit { float:none; margin:0 auto; display:block; }
    footer { background:#0089A8; height:auto; padding:6px 0; }
    #copyright { width:auto; }
    #copyright p, #copyright p a { color:#fff; }
    #featured-area .box { float:none!important; margin:0 auto 8px; max-width: 90%; clear: both; margin-bottom: 15px!important; }
}

@media only screen and (max-width : 319px) {
    #img-header, .featured-ads img, .featured-ads object, #logo #slogan, header nav, #sidebar3, footer nav, #featured-area, #sidebar2, .post-meta, #twos-comment { display:none; }
    #logo { float:none; margin:0 auto; }
    #logo a { background-size: 100%; min-width:242px; }
    #nav-toggle { display:block; text-indent:-9999px; }
    #main-menu { position:absolute; width:75px; top:35px; right:-300px; border-radius:0 0 5px 5px; background:#25688f; border:1px solid #192e3c; }
    #main-menu li { float:none; border:none; line-height:18px; }
    #main-menu li a { padding:5px; border:none !important; }
    #main-menu li a:hover, #main-menu .current-menu-item a { background: #25688f !important; border:none !important; }
    #main-menu li.sfHover a { background: #25688f; }
    #main-menu ul { width:75px; }
    #main-menu li:hover ul, #main-menu li.sfHover ul, #main-menu li li:hover ul, #main-menu li li.sfHover ul { right:75px; top:0; }
    .post-thumb { float:none; margin:0 auto 5px; }
    .roo-titr { display:block; text-align:center; }
    .post-content .post-title { text-align:center; }
    .post-thumb img { margin:0 auto; display:block; }
    #commentform input, #commentform textarea, .wpcf7-form input, .wpcf7-form textarea, .wpcf7-form .wpcf7-select { width:234px; }
    .wpcf7-checkbox .wpcf7-list-item input, .wpcf7-radio .wpcf7-list-item input, .wpcf7-form .wpcf7-acceptance { width:14px; }
    #commentform #submit, .wpcf7-form .wpcf7-submit { float:none; margin:0 auto; display:block; }
    footer { background:#0089A8; height:auto; padding:6px 0; }
    #copyright { width:auto; }
    #copyright p, #copyright p a { color:#fff; }
}
@media only screen and (max-width: 767px) {
    #container, #main-content, #content, .single-page, .single-content {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}