/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .responsive .boxed-layout .main-content                               { width: 100%; }
        .responsive .container                                  { width: 768px; }
        .responsive .container .column,
        .responsive .container .columns                         { margin-left: 10px; margin-right: 10px;  }
        .responsive .column.alpha, .responsive .columns.alpha               { margin-left: 0; margin-right: 10px; }
        .responsive .column.omega, .responsive .columns.omega               { margin-right: 0; margin-left: 10px; }

        .responsive .container .one.column                      { width: 44px; }
        .responsive .container .two.columns                     { width: 108px; }
        .responsive .container .three.columns                   { width: 172px; }
        .responsive .container .four.columns                    { width: 236px; }
        .responsive .container .five.columns                    { width: 300px; }
        .responsive .container .six.columns                     { width: 364px; }
        .responsive .container .seven.columns                   { width: 428px; }
        .responsive .container .eight.columns                   { width: 492px; }
        .responsive .container .nine.columns                    { width: 556px; }
        .responsive .container .ten.columns                     { width: 620px; }
        .responsive .container .eleven.columns                  { width: 684px; }
        .responsive .container .twelve.columns                  { width: 748px; }

        /* Offsets */
        .responsive .container .offset-by-one                   { padding-left: 64px; }
        .responsive .container .offset-by-two                   { padding-left: 128px; }
        .responsive .container .offset-by-three                 { padding-left: 192px; }
        .responsive .container .offset-by-four                  { padding-left: 256px; }
        .responsive .container .offset-by-five                  { padding-left: 320px; }
        .responsive .container .offset-by-six                   { padding-left: 384px; }
        .responsive .container .offset-by-seven                 { padding-left: 448px; }
        .responsive .container .offset-by-eight                 { padding-left: 512px; }
        .responsive .container .offset-by-nine                  { padding-left: 576px; }
        .responsive .container .offset-by-ten                   { padding-left: 640px; }
        .responsive .container .offset-by-eleven                { padding-left: 704px; }

        /* Sidebar */
        .responsive .container .sidebar.four.columns            { width: 220px; }
        .responsive .sidebar.sidebar-right                      { margin-left: 25px; }
        .responsive .sidebar.sidebar-left                       { margin-right: 25px; }

        /*
        *       Styles for 700px
        */

        .responsive .header .columns { width: 100% !important; margin: 0 0 20px;}
        .responsive .navigation-wrapper {margin-top: 0;}
        .responsive .navigation-wrapper .sf-menu {display: none !important;}
        .responsive .navigation-wrapper select {display: block !important; width: 748px !important;}
        .responsive .header .logo {float: none; display: block; text-align: center;}
        .responsive .header .logo img {margin: 0 auto;}

        .responsive .flex-caption {font-size: 12px;line-height: 18px;padding: 10px 15px;}

        .responsive p.comment-form-author,
        .responsive p.comment-form-email,
        .responsive p.comment-form-url,
        .responsive #commentform input,
        .responsive #commentform textarea {width: 470px;}
        .responsive p.comment-form-author,
        .responsive p.comment-form-email {margin-right: 0;}

        .responsive .portfolio-item.w1h1, .responsive .portfolio-item.w1h1 img {width: 236px; height: 158px;}
        .responsive .portfolio-item.w1h2, .responsive .portfolio-item.w1h2 img {width: 236px; height: 336px;}
        .responsive .portfolio-item.w2h1, .responsive .portfolio-item.w2h1 img {width: 492px; height: 158px;}
        .responsive .portfolio-item.w2h2, .responsive .portfolio-item.w2h2 img {width: 492px; height: 336px;}
        .responsive .portfolio-item.w2hx, .responsive .portfolio-item.w1hx img {width: 236px;}
        .responsive.single-portfolio p.comment-form-author,
        .responsive.single-portfolio p.comment-form-email,
        .responsive.single-portfolio p.comment-form-url,
        .responsive.single-portfolio #commentform input,
        .responsive.single-portfolio #commentform textarea {width: 726px;}

        .responsive #toTop {bottom: 70px;}

        .responsive table.responsive-table {margin-bottom: 0;}
        .responsive .pinned {position: absolute; left: 0; top: 0; width: 35%; overflow: hidden; overflow-x: scroll;}
        .responsive .pinned table {border-right: none; border-left: none; width: 100%;}
        .responsive .pinned table th,
        .responsive .pinned table td {white-space: nowrap;}
        .responsive .pinned td:last-child {border-bottom: 0;}
        .responsive div.table-wrapper {position: relative; margin-bottom: 20px; overflow: hidden;}
        .responsive div.table-wrapper div.scrollable table {margin-left: 35%;}
        .responsive div.table-wrapper div.scrollable {overflow: scroll; overflow-y: hidden;}  
        .responsive table.responsive-table td,
        .responsive table.responsive-table th {position: relative; white-space: nowrap; overflow: hidden;}
        .responsive table.responsive-table th:first-child,
        .responsive table.responsive-table td:first-child,
        .responsive table.responsive-table.pinned td {display: none;}


    }

/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .responsive .boxed-layout .main-content               { width: 100%; }
        .responsive .container                  { width: 420px; }
        .responsive .columns, .responsive .column { margin: 0 0 20px; }

        .responsive .container .one.column,
        .responsive .container .two.columns,
        .responsive .container .three.columns,
        .responsive .container .four.columns,
        .responsive .container .five.columns,
        .responsive .container .six.columns,
        .responsive .container .seven.columns,
        .responsive .container .eight.columns,
        .responsive .container .nine.columns,
        .responsive .container .ten.columns,
        .responsive .container .eleven.columns,
        .responsive .container .twelve.columns { width: 420px; }

        .responsive .container .mt-one-half,
        .responsive .container .mt-one-third,
        .responsive .container .mt-two-third,
        .responsive .container .mt-three-fourth,
        .responsive .container .mt-one-fourth,
        .responsive .container .mt-one-fifth,
        .responsive .container .mt-two-fifth,
        .responsive .container .mt-three-fifth,
        .responsive .container .mt-four-fifth,
        .responsive .container .mt-one-sixth,
        .responsive .container .mt-five-sixth,
        .responsive .mt-custom-col.col-2 .mt-col-inner,
        .responsive .mt-custom-col.col-3 .mt-col-inner,
        .responsive .mt-custom-col.col-4 .mt-col-inner { width: 100%; margin: 0 0 20px; }

        /* Offsets */
        .responsive .container .offset-by-one,
        .responsive .container .offset-by-two,
        .responsive .container .offset-by-three,
        .responsive .container .offset-by-four,
        .responsive .container .offset-by-five,
        .responsive .container .offset-by-six,
        .responsive .container .offset-by-seven,
        .responsive .container .offset-by-eight,
        .responsive .container .offset-by-nine,
        .responsive .container .offset-by-ten,
        .responsive .container .offset-by-eleven { padding-left: 0; }

        /* Sidebar */
        .responsive .container .sidebar.four.columns            { width: 420px; margin-top: 40px; margin-bottom: 0; padding-bottom: 0;}
        .responsive .sidebar.sidebar-right                      { margin-left: 0px; -webkit-box-shadow: none; box-shadow: none; border-left: 0; background: none; }
        .responsive .sidebar.sidebar-left                       { margin-right: 0px; -webkit-box-shadow: none; box-shadow: none; border-right: 0; background: none; }
        .responsive .sidebar.sidebar-right .sidebar-inner       { padding: 0 0 20px 0; }
        .responsive .sidebar.sidebar-left .sidebar-inner        { padding: 0 0 20px 0; }


        /*
        *       Styles for a width of 480px
        */

        .responsive .top-info .columns,
        .responsive .page-title .columns {margin: 0;}

        .responsive .header .columns { width: 100% !important; margin: 0 0 20px;}
        .responsive .navigation-wrapper {margin-top: 0;}
        .responsive .navigation-wrapper .sf-menu {display: none !important;}
        .responsive .navigation-wrapper select {display: block !important; width: 420px !important;}
        .responsive .header .logo {float: none; display: block; text-align: center;}
        .responsive .header .logo img {margin: 0 auto;}
        .responsive .top-header .both ul,
        .responsive .top-header .both ul li {float: none;margin: 0 auto;text-align: center;}
        .responsive .top-header .both p {text-align: center;}

        .responsive .flex-caption {display: none;}

        .responsive .meta-side {width: 45px;margin-right: 15px;}
        .responsive .meta-date .day {padding: 8px 0;font-size: 16px;}
        .responsive .meta-date .month {padding: 2px 0 0;font-size: 11px;}
        .responsive .meta-date .year {font-size: 10px;padding: 0 0 2px;}

        .responsive .pricing-3-col,
        .responsive .pricing-4-col {width: 100%; margin-left: 0px;}

        .responsive #toTop {display: none !important;}
        .responsive #footer-nav {float: left;}
        .responsive #footer-nav a {margin: 0 10px 0 0; padding: 0 10px 0 0; border-width: 0 1px 0 0;}

        .responsive p.comment-form-author,
        .responsive p.comment-form-email,
        .responsive p.comment-form-url,
        .responsive #commentform input,
        .responsive #commentform textarea {width: 398px;}
        .responsive p.comment-form-author,
        .responsive p.comment-form-email {margin-right: 0;}

        .responsive .standard .portfolio-item {margin: 0 auto 20px;}
        .responsive .portfolio-item.w1h1, .responsive .portfolio-item.w1h1 img,
        .responsive .portfolio-item.w1h2, .responsive .portfolio-item.w1h2 img,
        .responsive .portfolio-item.w2h1, .responsive .portfolio-item.w2h1 img,
        .responsive .portfolio-item.w2h2, .responsive .portfolio-item.w2h2 img,
        .responsive .portfolio-item.w2hx, .responsive .portfolio-item.w1hx img {width: 420px; height: auto;}
        .responsive.single-portfolio p.comment-form-author,
        .responsive.single-portfolio p.comment-form-email,
        .responsive.single-portfolio p.comment-form-url,
        .responsive.single-portfolio #commentform input,
        .responsive.single-portfolio #commentform textarea {width: 398px;}

        .responsive .mt-button,
        .responsive input.wpcf7-submit,
        .responsive #cancel-comment-reply-link,
        .responsive .reply .comment-reply-link,
        .responsive .logged-in-as a {padding: 2px 6px;height: 12px;line-height: 12px;font-size: 8px;}
        .responsive .mt-button.medium {padding: 3px 8px;height: 14px;line-height: 14px;font-size: 8px;}
        .responsive .mt-button.large {padding: 4px 10px;height: 15px;line-height: 15px;font-size: 10px;}

        .responsive table.responsive-table {margin-bottom: 0;}
        .responsive .pinned {position: absolute; left: 0; top: 0; width: 35%; overflow: hidden; overflow-x: scroll;}
        .responsive .pinned table {border-right: none; border-left: none; width: 100%;}
        .responsive .pinned table th,
        .responsive .pinned table td {white-space: nowrap;}
        .responsive .pinned td:last-child {border-bottom: 0;}
        .responsive div.table-wrapper {position: relative; margin-bottom: 20px; overflow: hidden;}
        .responsive div.table-wrapper div.scrollable table {margin-left: 35%;}
        .responsive div.table-wrapper div.scrollable {overflow: scroll; overflow-y: hidden;}  
        .responsive table.responsive-table td,
        .responsive table.responsive-table th {position: relative; white-space: nowrap; overflow: hidden;}
        .responsive table.responsive-table th:first-child,
        .responsive table.responsive-table td:first-child,
        .responsive table.responsive-table.pinned td {display: none;}


    }

/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 479px) {
        .responsive .boxed-layout .main-content               { width: 100%; }
        .responsive .container                  { width: 300px; }
        .responsive .columns, .responsive .column { margin: 0 0 20px;}

        .responsive .container .one.column,
        .responsive .container .two.columns,
        .responsive .container .three.columns,
        .responsive .container .four.columns,
        .responsive .container .five.columns,
        .responsive .container .six.columns,
        .responsive .container .seven.columns,
        .responsive .container .eight.columns,
        .responsive .container .nine.columns,
        .responsive .container .ten.columns,
        .responsive .container .eleven.columns,
        .responsive .container .twelve.columns { width: 300px; }

        .responsive .container .mt-one-half,
        .responsive .container .mt-one-third,
        .responsive .container .mt-two-third,
        .responsive .container .mt-three-fourth,
        .responsive .container .mt-one-fourth,
        .responsive .container .mt-one-fifth,
        .responsive .container .mt-two-fifth,
        .responsive .container .mt-three-fifth,
        .responsive .container .mt-four-fifth,
        .responsive .container .mt-one-sixth,
        .responsive .container .mt-five-sixth,
        .responsive .mt-custom-col.col-2 .mt-col-inner,
        .responsive .mt-custom-col.col-3 .mt-col-inner,
        .responsive .mt-custom-col.col-4 .mt-col-inner { width: 100%; margin: 0 0 20px; }

        /* Offsets */
        .responsive .container .offset-by-one,
        .responsive .container .offset-by-two,
        .responsive .container .offset-by-three,
        .responsive .container .offset-by-four,
        .responsive .container .offset-by-five,
        .responsive .container .offset-by-six,
        .responsive .container .offset-by-seven,
        .responsive .container .offset-by-eight,
        .responsive .container .offset-by-nine,
        .responsive .container .offset-by-ten,
        .responsive .container .offset-by-eleven { padding-left: 0; }

        /* Sidebar */
        .responsive .container .sidebar.four.columns            { width: 300px; margin-top: 40px; margin-bottom: 0; padding-bottom: 0; }
        .responsive .sidebar.sidebar-right                      { margin-left: 0px; -webkit-box-shadow: none; box-shadow: none; border-left: 0; background: none; }
        .responsive .sidebar.sidebar-left                       { margin-right: 0px; -webkit-box-shadow: none; box-shadow: none; border-right: 0; background: none; }
        .responsive .sidebar.sidebar-right .sidebar-inner       { padding: 0 0 20px 0; }
        .responsive .sidebar.sidebar-left .sidebar-inner        { padding: 0 0 20px 0; }


        /*
        *       Styles for a width of 320px
        */

        .responsive .top-info .columns,
        .responsive .page-title .columns {margin: 0;}

        .responsive .header .columns { width: 100% !important; margin: 0 0 20px;}
        .responsive .navigation-wrapper {margin-top: 0;}
        .responsive .navigation-wrapper .sf-menu {display: none !important;}
        .responsive .navigation-wrapper select {display: block !important; width: 300px !important;}
        .responsive .header .logo {float: none; display: block; text-align: center;}
        .responsive .header .logo img {margin: 0 auto;}
        .responsive .top-header .both ul,
        .responsive .top-header .both ul li {float: none;margin: 0 auto;text-align: center;}
        .responsive .top-header .both p {text-align: center;}

        .responsive .flex-caption {display: none;}

        .responsive .meta-side {width: 45px;margin-right: 15px;}
        .responsive .meta-date .day {padding: 8px 0;font-size: 16px;}
        .responsive .meta-date .month {padding: 2px 0 0;font-size: 11px;}
        .responsive .meta-date .year {font-size: 10px;padding: 0 0 2px;}

        .responsive .pricing-3-col,
        .responsive .pricing-4-col {width: 100%; margin-left: 0px;}

        .responsive #toTop {display: none !important;}
        .responsive #footer-nav {float: left;}
        .responsive #footer-nav a {margin: 0 10px 5px 0; padding: 0 10px 0 0; border-width: 0 1px 0 0;}

        .responsive p.comment-form-author,
        .responsive p.comment-form-email,
        .responsive p.comment-form-url,
        .responsive #commentform input,
        .responsive #commentform textarea {width: 278px;}
        .responsive p.comment-form-author,
        .responsive p.comment-form-email {margin-right: 0;}

        .responsive .standard .portfolio-item {margin: 0 auto 20px;}
        .responsive .portfolio-item.w1h1, .responsive .portfolio-item.w1h1 img,
        .responsive .portfolio-item.w1h2, .responsive .portfolio-item.w1h2 img,
        .responsive .portfolio-item.w2h1, .responsive .portfolio-item.w2h1 img,
        .responsive .portfolio-item.w2h2, .responsive .portfolio-item.w2h2 img,
        .responsive .portfolio-item.w2hx, .responsive .portfolio-item.w1hx img {width: 300px; height: auto;}
        .responsive.single-portfolio p.comment-form-author,
        .responsive.single-portfolio p.comment-form-email,
        .responsive.single-portfolio p.comment-form-url,
        .responsive.single-portfolio #commentform input,
        .responsive.single-portfolio #commentform textarea {width: 278px;}

        .responsive .mt-button,
        .responsive input.wpcf7-submit,
        .responsive #cancel-comment-reply-link,
        .responsive .reply .comment-reply-link,
        .responsive .logged-in-as a {padding: 2px 6px;height: 12px;line-height: 12px;font-size: 8px;}
        .responsive .mt-button.medium {padding: 3px 8px;height: 14px;line-height: 14px;font-size: 8px;}
        .responsive .mt-button.large {padding: 4px 10px;height: 15px;line-height: 15px;font-size: 10px;}

        .responsive table.responsive-table {margin-bottom: 0;}
        .responsive .pinned {position: absolute; left: 0; top: 0; width: 35%; overflow: hidden; overflow-x: scroll;}
        .responsive .pinned table {border-right: none; border-left: none; width: 100%;}
        .responsive .pinned table th,
        .responsive .pinned table td {white-space: nowrap;}
        .responsive .pinned td:last-child {border-bottom: 0;}
        .responsive div.table-wrapper {position: relative; margin-bottom: 20px; overflow: hidden;}
        .responsive div.table-wrapper div.scrollable table {margin-left: 35%;}
        .responsive div.table-wrapper div.scrollable {overflow: scroll; overflow-y: hidden;}  
        .responsive table.responsive-table td,
        .responsive table.responsive-table th {position: relative; white-space: nowrap; overflow: hidden;}
        .responsive table.responsive-table th:first-child,
        .responsive table.responsive-table td:first-child,
        .responsive table.responsive-table.pinned td {display: none;}


    }