/*
* RESPONSIVE  LAYOUT
*/

/*
-------------------------------------------
    INDEX
-------------------------------------------
    1. Tablet Portrait
    2. Mobile (Landscape)
    3. Mobile (Portrait)

-------------------------------------------
*/

/* 0. All Mobile --------------------------------------------------------*/

@media only screen and (max-width: 959px) {
    .custom-background.mobile {
        background-repeat: repeat;
        background-attachment: scroll;
        background-size: auto 100%;
        }
}


/* 1. Tablet Portrait --------------------------------------------------------*/

@media only screen and (min-width: 768px) and (max-width: 959px) {

         #wrapper {
                width: 720px;
                }

         /* GRID */
        .col1 { width: 20px; }
        .col2 { width: 60px; }
        .col3 { width: 100px; }

        .col4 { width: 220px; }

        .col5 { width: 180px; }
        .col6 { width: 220px; }
        .col7 { width: 260px; }
        .col8 { width: 300px; }
        .col9 { width: 340px; }
        .col10 { width: 380px; }
        .col11 { width: 420px; }
        .col12 { width: 460px; }


        /* Layout */
        #slide-bg,
    #slider {
            height: 223px;
            }

    .loading-spinner {
            left: 47%;
            top: 46%;
            }


    /* nivo caption */
    .nivo-caption {
                max-width: 160px;
    }

    .nivo-caption p {
                font-size: 20px;
                line-height: 26px;
                letter-spacing: 0 !important;
    }

        #contentwrap { width: 500px;}

        #content,
        .m-container {
        width: 480px;
        }

    .box {
            width: 220px;
            }

    .widget-area .box {
            width: 180px;
            }





        /* single */
        .single-left {
                width: 420px;
                border-right: 0;
                text-align: center;
                }

        .single-right {
                width: 420px;
                margin-top: 5px;
                }

        ul.single-postinfo {
            margin-top: 20px;
        }

        .single-post ul.single-postinfo li {
                display: inline;
                margin: 0 10px;
                }

        .single-postinfo i {
                width: 12px !important;
                }

        ul.share {
                margin-top: 25px;
                }

        ul.share li {
                display: inline;
                vertical-align: top;
                }

        ul.share li.sharetitle {display: none;}

        .single-right .thumbnail {
                margin-top: 20px;
                }

        /* comments */
        #comments ul.children { margin:  0 0 0 20px; }

        .depth-1 .comment-body { width: 280px; }
        .depth-2 .comment-body { width: 260px; }
        .depth-3 .comment-body { width: 240px; }
        .depth-4 .comment-body { width: 220px; }
        .depth-5 .comment-body { width: 220px; }


    /* flickr widget */
        .flickr {
                width: 115%;
                }

        .flickr_badge_image img {
                width: 80px;
                height: 80px;
                }
}


/* 1. Mobile (Landscape)  ----------------------------------------------------*/
/* Note: Design for a width of 480px */

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

        .styleswitcher {display: none;}

        body.custom-background {

    }

        #top-bar {
        position: relative;
        height: auto;
    }

        #wrapper {
                width: 440px;
                }

        /* GRID */
    .col1,
        .col2,
        .col3,
        .col4,
        .col5,
        .col6,
        .col7,
        .col8,
        .col9,
        .col10,
        .col11,
        .col12 { width: 420px; }

    .widget-area .col6 { width: 380px !important; }


    /* LEFT */
        #left {
                margin-left: 0;
                width: auto;
                height: auto;
                float: none;
                font-size: 18px;
                position: relative;
                top: 0 !important;
                }

        #logo {
            padding: 0;
                }

        #topinfo,
        #search-left,
        #social {
                margin: 0 auto;
                text-align: center;
                z-index: auto;
                }

        select.sf-menu,
        #topnavi .sbHolder,
        #navi-icon,
        #search-left,
        #social,
        #logo {
                margin-top: 6px;
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
                border-radius: 4px;
                }

        #topnavi {
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
                border-radius: 4px;
                }

        #topinfo {
                width: 440px;
                background-color: transparent;
                }

    #topinfo ul{
                margin: 10px 0;
                padding: 0;
                }

        #topinfo ul li {
                width: 440px;
                border: none;
                padding: 4px 0;
                margin: 0;
                float: none;
                }

        #topinfo ul li i {
                font-size: 14px;
        }

        #search-left {
                display: none;
                }

        #social {
                width: 411px;
                z-index: auto;
                padding: 7px 14px 15px 14px;
                }


        #top-bar #social {
                clear: both;
                margin: 0;
                padding: 0;
                display: block;
                overflow: hidden;
                }

        #top-bar #social,
        #top-bar #topinfo {
                float: none;
                width: 440px;
                margin: 0 auto;
                }

        #top-bar #social ul{
            float: left;
            left: 50%;
            margin: 0 auto;
            position: relative;
            text-align: center;
            }

    #top-bar #social ul li {
            display: inline;
            float: left;
            height: 30px;
            list-style-type: none;
            position: relative;
            right: 50%;
            width: 30px;
        }


        /* navi */
        #topnavi {
                clear: both;
                background-color: transparent;
                height: 48px;
                max-width: 440px;
                width: 440px;
                margin: 0 auto;
                float: none;
                font-weight: bold;
                text-transform: uppercase;
                position: relative;
                z-index: 999;
                }

         #topnavi li {
                font-weight: normal;
                text-transform: none;
                }

        .regular-menu {display: none;}
        .responsive-menu, .mobile-menu, #navi-icon {display: block;}

        #topnavi .unclickable {display: none;}


        #topnavi {padding: 0;}

        select.sf-menu {
                -webkit-appearance: button;
                -webkit-user-select: none;
                background-position: center right;
                background-repeat: no-repeat;
                width: 100%;
                font-size: 18px;
                font-weight: bold;
                text-align: center;
                margin: 0;
                overflow: hidden;
                padding: 12px 20px;
                height: 45px;
                text-overflow: ellipsis;
                margin-top: 6px;
                text-transform: uppercase;
                border: none;
                z-index: 9999;
                opacity: 0;
                }

    #navi-icon {
        position: absolute;
        top: 0;
        width: 400px;
        text-align: center;
                padding: 12px 20px;
                height: 24px;
                overflow: hidden;
                font-size: 18px;
                font-weight: bold;
                z-index: -99;
                clear: both;
                margin: 0 auto;
                float: none;
        }

        #topnavi .sbHolder {
                display: block;
                height: 48px;
                max-width: 440px;
                position: relative;
                z-index: 9999;
                }

        #topnavi .sbSelector{
                display: block;
                height: 24px;
                left: 0;
                line-height: 20px;
                outline: none;
                overflow: hidden;
                text-indent: 10px;
                top: 0;
                max-width: 440px;
                padding: 12px;
                text-align: center;
                margin-top: 6px;
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
                border-radius: 4px;
                opacity: 0;
                }

        #topnavi .sbSelector:link,
        #topnavi .sbSelector:visited,
        #topnavi .sbSelector:hover{
                outline: none;
                text-decoration: none;
                }

        #topnavi .sbToggle{
                background: url(../images/down.png) 0 0 no-repeat;
                display: block;
                height: 20px;
                outline: none;
                position: absolute;
                right: 16px;
                top: 14px;
                width: 20px;
                }

        #topnavi  .sbToggleOpen{
                background: url(../images/up.png) 0 0 no-repeat;
                }

        #topnavi .sbOptions{
                list-style: none;
                margin: 0;
                margin-top: 26px;
                padding: 20px 0 20px 0;
                position: absolute;
                top: 20px;
                width: 440px;
                z-index: 1;
                overflow-y: auto;
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
                border-radius: 4px;
                }

        #topnavi .sbOptions li{
                padding: 0 5px;
                }

        #topnavi .sbOptions a{
                text-align: center;
                display: block;
                outline: none;
                padding: 5px 0 5px 5px;
                }

        #topnavi .sbOptions a:link,
        #topnavi .sbOptions a:visited{
                color: #fff;
                text-decoration: none;
                }

        #topnavi .sbOptions a:hover,
        #topnavi .sbOptions a:focus,
        #topnavi .sbOptions a.sbFocus{
                background-color: #444;
                }


        /* RIGHT */
    #slide-bg,
    #slider {
            height: 214px;
            }

    .loading-spinner {
            position: absolute;
            left: 47%;
            top: 46%;
            }

        #slide-bg {
                width: 440px;
                margin-top: 20px;
                padding: 0;
                background-color: transparent !important;
                }

        #slide-bg,
        #slide-bg img,
        #slider img {
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
                border-radius: 4px;
                }

    .nivo-caption {
                max-width: 145px;
                }

    .nivo-caption p {
                font-size: 15px;
                line-height: 20px;
                letter-spacing: 0 !important;
                }

    #contentwrap {
                width: 420px;
            margin-left: 0px;
            margin-top: 0;
            }

        #content,
         .m-container  {
            width: 440px;
            }

        #content,
        .page-content {
                margin-top: 20px;
                padding: 10px 0;
                }

    .welcome {margin: 0 10px;}

    /* masonry*/
    .box,
    .widget-area .box {
            width: 420px;
            }





        .box-nm {
                margin: 20px;
                }

    .postinfo-single {
            margin: 20px 0 0 0;
            }



        /* single */
        .single-left {
                width: 400px;
                border-right: 0;
                text-align: center;
                margin-left: 0px;
                }

        .single-right {
                width: 400px;
                margin-top: 5px;
                margin-right: 0px;
                }

        ul.single-postinfo {
            margin-top: 20px;
        }

        .single-post ul.single-postinfo li {
                display: inline;
                margin: 0 10px;
                }

        .single-postinfo i {
                width: 12px !important;
                }

        ul.share {
                margin-top: 25px;
                }

        ul.share li {
                display: inline;
                vertical-align: top;
                }

        ul.share li.sharetitle {display: none;}

        .single-right .thumbnail {
                margin-top: 20px;
                }


        /*  comments */
    #comments ul.children { margin: 0; }

    .depth-1 .comment-body,
    .depth-2 .comment-body,
    .depth-3 .comment-body,
    .depth-4 .comment-body,
    .depth-5 .comment-body { width: 270px; }

        .commentlist li,
        .commentlist li ul.children li {
                margin-top: 10px;
                }

        #commentform textarea {
                width: 280px;
                }

        .comment-text {
                padding-bottom: 40px;
                }

        h6#comments-number {
            padding: 0;
        }

        .nav_pagination_bottom {
                margin-left: 0;
        }

        #respond {
            margin: 0;
        }

    .comments-closed {
        margin-left: 0;
    }


        /* flickr widget */
        .flickr {
                width: 115%;
                margin-top: -13px;
                }
        .flickr_badge_image img {
                width: 80px;
                height: 80px;
                }
        .flickr_badge_image {
                margin: 13px 13px 0 -4px;
                }

          /* Shortcode pullquotes */
    .pullquote_left,
    .pullquote_right
            {
            width: 260px;
        }

}