﻿
/** Small Devices **/
/** @media only screen and (min-width : 300px) and (max-width : 1024px) **/

@media only screen and (max-width: 768px)
{
    html
    {
        border: 0px solid yellow;
    }

    div.SubContainer div.banner div.inside-banner div.bx-wrapper div.bx-viewport div#slider.bxslider div
    {
        /*  width:auto !important;*/
    }

    .header .container, .inside-header, .inside-main-menu, .top-menu, .inside-banner, .inside-banner-img, .inside-banner-img img, .inside-banner-nav, .inside-bottom-content, .inside-bottom-blocks, .inside-footer-design, .inside-header, .main-menu .container, .subpage-content-area, .inside-subpage-bottom-content, .HomeBlocks, .inside-subpage-banner, .inside-subpage-title
    {
        width: auto !important;
    }

    .header .container .row
    {
        margin-right: 15px !important;
        margin-left: 15px !important;
    }

    .logo
    {
        padding-right: 0px;
        text-align: right;
    }

    .banner
    {
        /* height: 200px; */
    }
    .inside-banner
    {
        /* height: 200px; */
        /* width: 90% !important; */
    }

    .bx-wrapper
    {
        margin: 0px !important;
    }

    .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto
    {
        /*bottom:-200px !important;*/
    }

    .slicknav_nav
    {
        /*display:block !important;*/
    }

    .inside-banner-caption
    {
        width: 90% !important;
        font-size: 12px; /*  margin-top:-72%;*/
        margin-right: 5%;
        overflow: hidden;
    }

    .inside-banner-img
    {
        height: auto !important;
    }
    .inside-banner-img img, .bx-wrapper img
    {
        width: 100% !important;
        height: auto !important;
    }
    .AdvArea
    {
        width: 97% !important;
    }
    .social-media
    {
        display: none;
    }

    .search-box, .search-btn
    {
        display: none;
    }


    #myNavbar
    {
        padding-top: 30px;
    }

    .myNav
    {
        width: 100%;
    }
    .HomeIcon
    {
        display: none;
    }
    .navbar-nav > li
    {
        float: right;
        clear: both;
        text-align: right;
    }
    .myNav ul.nav.navbar-nav li a
    {
        font-size: 14px;
    }
    .nav > li > a:focus, .nav > li > a:hover, .nav .open > a, .nav .open > a:focus, .nav .open > a:hover, .navbar-nav > li > .dropdown-menu
    {
        -webkit-border-radius: 0px !important;
        -moz-border-radius: 0px !important;
        border-radius: 0px !important;
        -webkit-border-bottom-right-radius: 0px !important;
        -webkit-border-bottom-left-radius: 0px !important;
        -moz-border-radius-bottomright: 0px !important;
        -moz-border-radius-bottomleft: 0px !important;
        border-bottom-right-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
    }
    .dropdownimage
    {
        display: none;
    }

    .navbar-nav .open .dropdown-menu
    {
        background-color: #ffffffb3;
    }

    .subpage-bottom-content
    {
        width: 90% !important;
        margin-left: 5%;
        margin-right: 5%;
    }
    .subpage-banner
    {
        height: 80px;
    }
    .inside-subpage-banner
    {
        height: 80px;
    }
    .inside-subpage-title
    {
        font-size: 16px;
        height: 80px;
        line-height: 80px;
        margin-top: 0px;
        padding: 0;
    }
    div.subpage-left-blk p img
    {
        max-width: 100%;
    }

    .subpage-right-blk
    {
        display: none;
    }
    .Archive .dropdown
    {
        float: none !important;
        margin-bottom: 0.3em;
    }

    ul#GImageGallery
    {
        margin: auto !important;
        padding: auto !important;
    }

    .HBlockIn
    {
        width: 98% !important;
    }
    .HBlockIn img
    {
        /* width: 100%; */
        margin: auto;
    }

.prayTitle {text-align: center}
    .prayText
    {
        margin-top: 3%;
    }
    .subpage-left-blk.NewsListing
    {
        padding-top: 0px !important;
    }
    .subpage-left-blk
    {
        width: 100%;
    }
    .subpage-left-blk h1
    {
        margin-right: 2%;
    }
    .search-text-box
    {
        border: 0px !important;
        width: 70%;
        float: right;
        background-color: transparent;
        color: #9d0915;
        height: 36px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
    }
    .imgmobsearch
    {
        color: #9d0915;
        width: 30%;
        border: 0px;
        float: left;
        border-right: 1px solid #9d0915;
        height: 36px;
        background-color: #edf1f0;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
    }
    #slick
    {
        margin-top: 0.5em;
        display: block !important;
    }
    .slicknav_menu
    {
        /* display: none; */
    }
    #menu
    {
        border: 1px solid red;
        display: none;
    }
    imgmobsearch
    {
        background-image: url("/gif/search-btn.png");
    }
    /* #menu is the original menu */

    #silk
    {
        display: block !important;
        border: 1px solid;
    }
    .js .slicknav_menu
    {
        display: block !important;
    }
    .nav.navbar.myNav
    {
        display: none !important;
    }
    .slicknav_menu .slicknav_menutxt
    {
        display: none;
    }

    .main-menu
    {
        display: none;
    }

    div.SGImage img.img-responsive
    {
        margin: auto auto !important;
        padding-top: 1em;
        padding-bottom: 1em;
    }
    ul#videogalleryitemcontainer
    {
        padding: 0px;
        margin: 0px;
    }

    ul#videogalleryitemcontainer.Profiles li .grid-item-content div.SGText
    {
        max-height: 60px !important;
        height: auto !important;
    }
}

@media only screen and (min-width : 300px) and (max-width :768px) and (orientation:landscape)
{
    .banner
    {
        /* height: 285px; */
    }

    .inside-banner-caption
    {
        width: 94% !important;
        margin-right: 3%;
        margin-left: 0px;
    }

    div.SGImage
    {
        background-color: transparent !important;
    }

    div.SGImage img.img-responsive
    {
        border: 15px solid #deddda;
        padding: 0px !important;
    }
    .subpage-content-area
    {
        width: 100% !important;
    }

}

