/* Desktop - design for a width of 1280px
 %%%%%%%%%%%%%%%%%
 */

/* 1280px <= width */

/* @media only screen and (min-width: 1280px)  {

 .container { max-width: 1200px; }

 Special grid units
 .grid-col2-sidebar 	{ width: 20.41%; }
 .grid-col2-main		{ width: 75.58%; }
 .grid-col3-sidebar		{ width:27.01%; }
 .grid-col3-main			{ width:70.34%; }

 Hide
 .hide-below-1280 { display:inherit !important; }
 }

 /* Design for a width of less than 1024 px
 %%%%%%%%%%%%%%%%%
 */

/* width < 1024px */

@media only screen and (max-width: 1023px) {
    /* Hide */
    .hide-below-1024 {
        display: none !important;
    }
}
/* Tablet (Portrait) - design for a width of 768px
 %%%%%%%%%%%%%%%%%
 */

/* 768px <= width < 960px */

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container {
        max-width: 737px;
    }
    /* Hide */
    .hide-below-960 {
        display: none !important;
    }
}
/* All mobile - design for a width of less than 768px
 %%%%%%%%%%%%%%%%%
 */

/* width < 768px */

@media only screen and (max-width: 767px) {
    /* Grid units below 768px screen size are 100% wide with no margin - compensate margin with padding */
    .container {
        width: 94%;
        padding-left: 1%;
        padding-right: 1%;
    }
    .nested-container {
        width: 100%;
        margin-left: auto;
    }
    /* Stretch all grid units */
    .grid12-1, .grid12-2, .grid12-3, .grid12-4, .grid12-5, .grid12-6, .grid12-7, .grid12-8, .grid12-9, .grid12-10, .grid12-11, .grid12-12, .grid4-1, .grid4-2, .grid4-3, .grid2-1, .grid-full, .grid-col2-sidebar, .grid-col2-main, .grid-col3-sidebar, .grid-col3-main {
        width: 100% !important;
        /*Added "important" to override units with "no-gutter"*/
        margin-left: 0;
        margin-right: 0;
    }
    /* Vertically aligned grid
	 -------------------------------------------------------------- */
    .v-grid-container {
        display: block;
    }
    .v-grid {
        float: inherit;
        display: block;
        width: 100%;
    }
}
/* Mobile (Landscape) - design for a width of 480px
 %%%%%%%%%%%%%%%%%
 */

/* 480px <= width < 768px */

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container {
        max-width: 453px;
    }
    /* Hide */
    .hide-below-960 {
        display: none !important;
    }
    .hide-below-768 {
        display: none !important;
    }
    /* Mobile grid - modify units on mobile devices
	 -------------------------------------------------------------- */
    .mobile-grid.grid12-1 {
        width: 14.66% !important;
        margin-left: 1%;
        margin-right: 1%;
    }
    /* .grid12-1 to .grid12-2 */
    .mobile-grid.grid12-2 {
        width: 31.33% !important;
        margin-left: 1%;
        margin-right: 1%;
    }
    /* .grid12-2 to .grid12-4 */
    .mobile-grid.grid12-3 {
        width: 48% !important;
        margin-left: 1%;
        margin-right: 1%;
    }
    /* .grid12-3 to .grid12-6 */
    /**/
    .mobile-grid-half {
        width: 48% !important;
        margin-left: 1%;
        margin-right: 1%;
    }
}
/* Mobile (Landscape, iPhone 4 Portrait) - design for a width of 640px
 %%%%%%%%%%%%%%%%%
 */

/* 640px <= width < 768px */

@media only screen and (min-width: 640px) and (max-width: 767px) {
    .container {
        max-width: 602px;
    }
}
/* Mobile (Portrait) - design for a width of 320px
 %%%%%%%%%%%%%%%%%
 */

/* 320px <= width < 480px */

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .container {
        max-width: 301px;
    }
    /* Hide */
    .hide-below-960 {
        display: none !important;
    }
    .hide-below-768 {
        display: none !important;
    }
    .hide-below-640 {
        display: none !important;
    }
    .hide-below-480 {
        display: none !important;
    }
}
/* Mobile (Portrait) - design for a width of less than 320px
 %%%%%%%%%%%%%%%%%
 */

/* width < 320px */

@media only screen and (max-width: 319px) {
    .container {
        max-width: 226px;
    }
    /* Hide */
    .hide-below-960 {
        display: none !important;
    }
    .hide-below-768 {
        display: none !important;
    }
    .hide-below-480 {
        display: none !important;
    }
    .hide-below-320 {
        display: none !important;
    }
}