/*----------------------------------------------------------------------------------------------------*/
/*--RESPONSIVE STYLES---------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------*/

.row /* make it shrink */
{
    min-width: 0;
}

/*
    suggested breakpoints

    1200px

    1000px

    800px

    500px

    420px

 */

@media screen and (max-width: 1000px) { /*tablet in landscape or small laptp*/
    .row
    {
        min-width: 100%;
    }
    .push-features .span-1-3
    {
        width:50%;
    }

    /* at this width, 1-10 down to 1-6 columns become a little cramped, so double their width - this basically puts them on two / three rows */
    .span-1-10
    {
        width: 20%;
    }
}

@media screen and (max-width: 800px) { /*tablet in portrait mode, phablet in landscape*/

    .span-1-10, .span-1-9
    {
        width : 20%;
    }

    .span-5-12, .span-1-6
    {
        width : 33.333%;
    }
    .span-1-8, .span-1-7
    {
        width : 25%;
    }

    .span-5-9, .span-4-9, .span-1-2, .span-5-12
    {
        width: 100%;
    }
    .span-3-9, .span-2-9, .span-1-9
    {
        width: 33.333%;
    }
    .span-5-9, .span-4-9
    {
        width: 66.666%;
    }

    .social_links .social li
    {
        display:inline-block;
        float:none;
    }

    main .span-1-3,
    main .span-1-4
    {
        width: 100%;
    }
    main .span-2-3,
    main .span-3-4
    {
        width: 100%;
    }

    nav
    {
        display:none;
    }
    #btn-menu
    {
       display:block !important;
    }
    #mob-nav
    {
        overflow:hidden;
        /*display:block !important;*/
    }

    .widget
    {
        /*text-align:center;*/
    }
    .gallery .gallery-item
    {
        width:50% !important;
    }

    .gallery .gallery-columns-3 .gallery-item
    {
        width:100% !important;
    }



    header .widget
    {
        width:100%;
        float: none;
    }

    .logo
    {
        text-align:center;
        line-height:4em;
    }
    .logo a
    {
        margin:0 auto 10px auto !important;
        max-width: 100%;
    }

    h1
    {
        font-size:2.8em;
    }
    h2
    {
        font-size:2.4em;
    }
    h3
    {
        font-size:2.2em;
    }

    .col
    {
        overflow:hidden;
        word-wrap: break-word;
    }

    h1, h2, h3, h4, h5, h6, p, blockquote
    {
        /*text-align:center;*/
    }

    footer ul
    {
        /*text-align:center;*/
    }

    #nav-mob
    {
        display:block;
    }

    #logo-nav .row
    {
        display: block;
    }

    .gallery-item
    {
        width:50%;
    }

    .subnav li
    {
        text-align:center;
    }

    .no-mo-inline,
    .no-mo-block
    {
        display:none;
    }

    .show-mo-inline
    {
        display:inline;
    }

    .show-mo-block
    {
        display:block;
    }

    footer .widget
    {
        width:100%;
    }

    .social
    {
        text-align:center;
    }
    .social li
    {
        display:inline-block;
    }

    .push-features a img
    {
        width:100%;
    }
    .push-features .col.span-1-4, .push-features .col.span-1-6, .push-features .col.span-1-5, .push-features .col.span-1-3
    {
        width: 50%;
    }
    .push-features .col.span-1-3:last-of-type
    {
        width:100%;
    }

    footer .sidebar, header .sidebar
    {
        display:block;
    }
    .sidebar-header li.widget, .sidebar-footer li.widget
    {
        width: 50%;
        float: left;
        flex: none;
        display: block;
    }
    footer .sidebar li.widget:nth-child(2n+1)
    {
        clear:both;
    }
}

@media screen and (max-width:420px) { /*mobile in portrait mode*/
    .col
    {
        width: 100%; /* all columns full width */
    }
    footer .sidebar li.widget
    {
        width: 100%;
    }
    #copyright .col p
    {
        text-align:center;
    }
}