/* Table of Contents
==================================================
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)

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

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

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .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: 28px; }
        .responsive .container .two.columns                     { width: 76px; }
        .responsive .container .three.columns                   { width: 124px; }
        .responsive .container .four.columns                    { width: 172px; }
        .responsive .container .five.columns                    { width: 220px; }
        .responsive .container .six.columns                     { width: 268px; }
        .responsive .container .seven.columns                   { width: 316px; }
        .responsive .container .eight.columns                   { width: 364px; }
        .responsive .container .nine.columns                    { width: 412px; }
        .responsive .container .ten.columns                     { width: 460px; }
        .responsive .container .eleven.columns                  { width: 508px; }
        .responsive .container .twelve.columns                  { width: 556px; }
        .responsive .container .thirteen.columns                { width: 604px; }
        .responsive .container .fourteen.columns                { width: 652px; }
        .responsive .container .fifteen.columns                 { width: 700px; }
        .responsive .container .sixteen.columns                 { width: 748px; }

        .responsive .container .one-third.column                { width: 236px; }
        .responsive .container .two-thirds.column               { width: 492px; }

        /* Offsets */
        .responsive .container .offset-by-one                   { padding-left: 48px; }
        .responsive .container .offset-by-two                   { padding-left: 96px; }
        .responsive .container .offset-by-three                 { padding-left: 144px; }
        .responsive .container .offset-by-four                  { padding-left: 192px; }
        .responsive .container .offset-by-five                  { padding-left: 240px; }
        .responsive .container .offset-by-six                   { padding-left: 288px; }
        .responsive .container .offset-by-seven                 { padding-left: 336px; }
        .responsive .container .offset-by-eight                 { padding-left: 348px; }
        .responsive .container .offset-by-nine                  { padding-left: 432px; }
        .responsive .container .offset-by-ten                   { padding-left: 480px; }
        .responsive .container .offset-by-eleven                { padding-left: 528px; }
        .responsive .container .offset-by-twelve                { padding-left: 576px; }
        .responsive .container .offset-by-thirteen              { padding-left: 624px; }
        .responsive .container .offset-by-fourteen              { padding-left: 672px; }
        .responsive .container .offset-by-fifteen               { padding-left: 720px; }
    }


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

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

    @media only screen and (max-width: 767px) {
        .responsive .container { width: 300px; }
        .responsive .columns, .column { margin: 0; }

        .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,
        .responsive .container .thirteen.columns,
        .responsive .container .fourteen.columns,
        .responsive .container .fifteen.columns,
        .responsive .container .sixteen.columns,
        .responsive .container .one-third.column,
        .responsive .container .two-thirds.column { width: 300px; }

        .responsive .container .one_half_fluid,
        .responsive .container .one_half_fluid.last,
        .responsive .container .one_third_fluid,
        .responsive .container .one_third_fluid.last,
        .responsive .container .one_fourth_fluid,
        .responsive .container .one_fourth_fluid.last,
        .responsive .container .two_third_fluid,
        .responsive .container .two_third_fluid.last,
        .responsive .container .three_fourth_fluid,
        .responsive .container .three_fourth_fluid.last,
        .responsive .container .one_fifth_fluid,
        .responsive .container .one_fifth_fluid.last { width: 100%; margin: 0; }

        /* 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,
        .responsive .container .offset-by-twelve,
        .responsive .container .offset-by-thirteen,
        .responsive .container .offset-by-fourteen,
        .responsive .container .offset-by-fifteen { padding-left: 0; }

    }


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

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

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .responsive .container { width: 420px; }
        .responsive .columns, .responsive .column { margin: 0; }

        .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,
        .responsive .container .thirteen.columns,
        .responsive .container .fourteen.columns,
        .responsive .container .fifteen.columns,
        .responsive .container .sixteen.columns,
        .responsive .container .one-third.column,
        .responsive .container .two-thirds.column { width: 420px; }

        .responsive .container .one_half_fluid,
        .responsive .container .one_half_fluid.last,
        .responsive .container .one_third_fluid,
        .responsive .container .one_third_fluid.last,
        .responsive .container .one_fourth_fluid,
        .responsive .container .one_fourth_fluid.last,
        .responsive .container .two_third_fluid,
        .responsive .container .two_third_fluid.last,
        .responsive .container .three_fourth_fluid,
        .responsive .container .three_fourth_fluid.last,
        .responsive .container .one_fifth_fluid,
        .responsive .container .one_fifth_fluid.last { width: 100%; margin: 0 0 20px 0;}

    }

/* #Media Queries
================================================== */

    /* Smaller than standard 960 (devices and browsers) */
    @media only screen and (max-width: 959px) {}

    /* Tablet Portrait size to standard 960 (devices and browsers) width = 728px*/
    @media only screen and (min-width: 768px) and (max-width: 959px) {

        /* logo */
        .responsive .logo {display: block; float: none;}
        .responsive .logo a, .responsive .logo img {margin: 0 auto;}
        .responsive .sf-menu {margin-top: 10px; float: left;}
        
        /* flexslider */
        .responsive #slider .flex-control-thumbs {bottom: -60px;}
        .responsive #slider .flex-control-thumbs li {width: 48px; height: 33px;}
        .responsive #slider .flex-control-thumbs li img {width: 42px; height: 27px;}
        .responsive .flexslider-wrapper {width: 100%; padding: 0;}
        .responsive #slider {width: 100%;}
        .responsive .flexslider-wrapper .flex-direction-nav .flex-next, .responsive .flexslider-wrapper .flexslider:hover .flex-next {right: 0;}
        .responsive .flexslider-wrapper .flex-direction-nav .flex-prev, .responsive .flexslider-wrapper .flexslider:hover .flex-prev {left: 0;}
        .responsive .home-embed img, .responsive .home-embed iframe {width: 100%; display: block;} 

        /* portfolio */
        .responsive #portfolio-filters li {margin: 0 0 14px 8px;}

        /* pricing tables */
        .responsive .pricing-3-col {width: 248px;}
        .responsive .pricing-4-col {width: 186px;}

        /* posts */
        .responsive .post-inner {width: 456px;}
        .responsive p.comment-form-author, .responsive p.comment-form-email, .responsive p.comment-form-url {width: 172px;}
        .responsive p.comment-form-author, .responsive p.comment-form-email {margin-right: 20px;}
        .responsive #commentform input {width: 150px;}
        .responsive #commentform textarea {width: 534px;}

        /* team members */
        .responsive .team-member-photo img {max-width: 112px;}

        /* widgets */
        .responsive .sidebar-search-form input#s {width: 118px;}

        /* contact page */
        .responsive .wpcf7-form textarea {width: 438px;}

        /* gallery shortcode */
        .responsive .gallery-columns-2 dl a img {width: 372px; height: 255px;}
        .responsive .gallery-columns-3 dl a img {width: 247px; height: 169px;}
        .responsive .gallery-columns-4 dl a img {width: 185px; height: 127px;}
        .responsive .gallery-columns-5 dl a img {width: 147px; height: 100px;}
        .responsive .gallery-columns-6 dl a img {width: 122px; height: 88px;}
        .responsive .gallery-columns-7 dl a img {width: 104px; height: 71px;}
    }

    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {}

    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) width = 380px */
    @media only screen and (min-width: 480px) and (max-width: 767px) {

        /* logo */
        .responsive .logo {display: block; float: none;}
        .responsive .logo a, .responsive .logo img {margin: 0 auto;}

        /* navigation */
        .responsive .navigation-wrapper #nav {display: none;}
        .responsive .navigation-wrapper .selectnav { display: inline-block !important; width: 100% !important;}

        /* flexslider */
        .responsive #slider .flex-control-thumbs {bottom: -60px;}
        .responsive #slider .flex-control-thumbs li {width: 33px; height: 23px; margin: 0 3px;}
        .responsive #slider .flex-control-thumbs li img {width: 29px; height: 19px; padding: 2px;}
        .responsive .flexslider-wrapper {width: 100%; padding: 0;}
        .responsive #slider {width: 100%;}
        .responsive .flexslider-wrapper .flex-direction-nav .flex-next, .responsive .flexslider-wrapper .flexslider:hover .flex-next {right: 0;}
        .responsive .flexslider-wrapper .flex-direction-nav .flex-prev, .responsive .flexslider-wrapper .flexslider:hover .flex-prev {left: 0;}
        .responsive .flex-caption {display: none;}
        .responsive .home-embed img, .responsive .home-embed iframe {width: 100%; display: block;} 

        /* portfolio */
        .responsive #portfolio .portfolio-item-filter {margin-bottom: 20px;}
        .responsive ul#portfolio-filters {float: left;}
        .responsive #portfolio-filters li {margin: 0 8px 14px 0;}

        /* pricing tables */
        .responsive .pricing-3-col {width: 419px;}
        .responsive .pricing-4-col {width: 209px;}

        /* posts */
        .responsive .post-inner {width: 420px;}
        .responsive .side-meta {display: none;}
        .responsive .post-inner .meta span.meta-tags {float: left;}
        .responsive .site-pagination {margin-bottom: 50px;}
        .responsive p.comment-form-author, .responsive p.comment-form-email, .responsive p.comment-form-url {width: 420px;}
        .responsive p.comment-form-author, .responsive p.comment-form-email {margin-right: 0;}
        .responsive #commentform input {width: 398px;}
        .responsive #commentform textarea {width: 398px;}

        /* team members */
        .responsive .team-member {background: transparent; padding: 0;}
        .responsive .team-member-photo {margin-bottom: 10px;}

        /* contact page */
        .responsive .wpcf7-form textarea, .responsive .wpcf7-form input {width: 398px;}
        .responsive .wpcf7-form select {width: 420px;}

        /* gallery shortcode */
        .responsive .gallery-columns-2 dl a img {width: 208px; height: 143px;}
        .responsive .gallery-columns-3 dl a img {width: 138px; height: 94px;}
        .responsive .gallery-columns-4 dl a img,
        .responsive .gallery-columns-5 dl a img,
        .responsive .gallery-columns-6 dl a img,
        .responsive .gallery-columns-7 dl a img {width: 103px; height: 71px;}

        /* footer */
        #footer-bottom .socials ul {margin-top: 20px;}
        
    }

    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    @media only screen and (max-width: 479px) {

        /* logo */
        .responsive .logo {display: block; float: none;}
        .responsive .logo a, .responsive .logo img {margin: 0 auto;}

        /* navigation */
        .responsive .navigation-wrapper #nav {display: none; width: 100%;}
        .responsive .navigation-wrapper .selectnav { display: inline-block !important; width: 100% !important;}

        /* flexslider */
        .responsive #slider .flex-control-thumbs {bottom: -55px;}
        .responsive #slider .flex-control-thumbs li {width: 23px; height: 16px; margin: 0 3px;}
        .responsive #slider .flex-control-thumbs li img {width: 19px; height: 12px; padding: 2px;}
        .responsive .flexslider-wrapper {width: 100%; padding: 0;}
        .responsive #slider {width: 100%;}
        .responsive .flexslider-wrapper .flex-direction-nav .flex-next, .responsive .flexslider-wrapper .flexslider:hover .flex-next {right: 0;}
        .responsive .flexslider-wrapper .flex-direction-nav .flex-prev, .responsive .flexslider-wrapper .flexslider:hover .flex-prev {left: 0;}
        .responsive .flex-caption {display: none;}
        .responsive .home-embed img, .responsive .home-embed iframe {width: 100%; display: block;} 

        /* portfolio */
        .responsive #portfolio .portfolio-item-filter {margin-bottom: 20px;}
        .responsive ul#portfolio-filters {float: left;}
        .responsive #portfolio-filters li {margin: 0 8px 14px 0;}

        /* pricing tables */
        .responsive .pricing-3-col, .responsive .pricing-4-col {width: 299px;}

        /* posts */
        .responsive .post-inner {width: 300px;}
        .responsive .side-meta {display: none;}
        .responsive .post-inner .meta span.meta-tags {float: left;}
        .responsive .site-pagination {margin-bottom: 50px;}
        .responsive p.comment-form-author, .responsive p.comment-form-email, .responsive p.comment-form-url {width: 300px;}
        .responsive p.comment-form-author, .responsive p.comment-form-email {margin-right: 0;}
        .responsive #commentform input {width: 278px;}
        .responsive #commentform textarea {width: 278px;}

        /* team members */
        .responsive .team-member {background: transparent; padding: 0;}
        .responsive .team-member-photo {margin-bottom: 10px;}

        /* contact page */
        .responsive .wpcf7-form textarea, .responsive .wpcf7-form input {width: 278px;}
        .responsive .wpcf7-form select {width: 300px;}

        /* gallery shortcode */
        .responsive .gallery-columns-2 dl a img {width: 148px; height: 101px;}
        .responsive .gallery-columns-3 dl a img,
        .responsive .gallery-columns-4 dl a img,
        .responsive .gallery-columns-5 dl a img,
        .responsive .gallery-columns-6 dl a img,
        .responsive .gallery-columns-7 dl a img {width: 98px; height: 67px;}

        /* footer */
        #footer-bottom .socials ul {margin-top: 20px;}
        
    }