/* MultiGrid CSS CODE */
/* Grid designed by Pavel Kozlov http://pavelkozlov.com */
/* Set Max-Min width */
.bin {
    width:1140px;
    min-width:280px;
    }


/*** !!! Do not edit below this line, use Grid calculator to adjust variables !!! ***/

/* Grid Margins */
.g1, .g2, .g3, .g4, .g5, .g6, /* Equal Split Columns, CSS applied on element */
.g31, .g32, .g41, .g42, .g43, .g51, .g52, .g53, .g54, .g61, .g62, .g63, .g64, .g65, /* Unequal split columns, CSS applied on element */
.g2p > div, .g3p > div, .g4p > div, .g5p > div, .g6p > div, /* Child element split (CSS class on parent element DIV.class > DIV model) */
.g2p > li, .g3p > li, .g4p > li, .g5p > li, .g6p > li,  /* Child element split (CSS class on parent element UL.class > li model) */
.g121, .g122, .g123, .g124, .g125, .g126, .g127, .g128, .g129, .g1210, .g1211, /* 12 grid cols */
.ggl, .ggs, .g55, .g45 { margin-right:2%; margin-left:2%; float: left; } /* Custom ratio columns, CSS applied on element */

/* Equal Column Split  */

.g1, .g1p > li, .g1p > div { width:96% }
.g2, .g2p > li, .g2p > div { width:46% }
.g3, .g3p > li, .g3p > div { width:29.33333333% }
.g4, .g4p > li, .g4p > div { width:21% }
.g5, .g5p > li, .g5p > div { width:16% }
.g6, .g6p > li, .g6p > div { width:12.66666667% }

/* Unequal split classes */

.g31 { width:29.33333333% }
.g32 { width:62.66666667% }
.g41 { width:21% }
.g42 { width:46% }
.g43 { width:71% }
.g51 { width:16% }
.g52 { width:36% }
.g53 { width:56% }
.g54 { width:76% }
.g61 { width:12.66666667% }
.g62 { width:29.33333333% }
.g63 { width:46% }
.g64 { width:62.66666667% }
.g65 { width:79.33333333% }

/* 12 Column Grid */
.g121 { width:4.333333333% } /* One col */ 
.g122 { width:12.66666667% } /* two col */
.g123 { width:21% } /* three col */
.g124 { width:29.33333333% } /* four col */
.g125 { width:37.66666667% } /* five col */
.g126 { width:46% } /* six col */
.g127 { width:54.33333333% } /* seven col */
.g128 { width:62.66666667% } /* eight col */
.g129 { width:71% } /* nine col */ 
.g1210 { width:79.33333333% } /* ten col */
.g1211 { width:87.66666667% }  /* 11 col */ 

/* Custom: golden ratio */
.ggl { width:68% }
.ggs { width:24% }

/* Custom split 55/45 */
.g55 { width:51% }
.g45 { width:41% }

.bin {
    max-width: 90%;
    margin: 0 auto;
    position: relative;
    }

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
.clear { clear:both }
.clear:after,
.clear:before,
.bin:after {
    content: "";
    display: table;
    clear: both;
    }
/* Prevent lists from default behavious */
ul.g2p, ul.g3p, ul.g4p, ul.g5p, ul.g6p { padding: 0; list-style:none }
ul.g2p li:before, ul.g3p li:before, ul.g4p li:before, ul.g5p li:before, ul.g6p li:before { display:none}

@media only screen and (max-width: 900px) { /* for iPad landscape */
    .bin { max-width: 100% }
    .g3, /* resize g3 to full width */
    .g31, .g32, .g41, .g42, .g43, .g51, .g52, .g53, .g54, .g61, .g62, .g63, .g64, .g65, 
   .g121, .g122, .g123, .g124, .g125, .g126, .g127, .g128, .g129, .g1210, .g1211,
    .g2p > li, .g3p > li, .g4p > li, .g5p > li, .g6p > li, 
    .ggl, .ggs, .g55, .g45 { width: 96% } /* Max width of all elements in mobile view */

    /* Resize even split classes in a custom way */
    .g2, .g4, .g2p > div, .g2p > li, .g4p > div, .g4p > li { width: 46% } /* Keep g2, resize g4 to g2 */
    .g6,  .g6p > div, .g6p > li { width: 29.33333333% } /*Resize g6 to g3 size */

}

@media only screen and (max-width: 640px) {
    .g2, .g4, .g5, .g6, /* resize other equal split to full width */
    .g2p > div, .g2p > li, .g4p > div, .g4p > li, .g5p > div, .g5p > li, .g6p > div, .g6p > li { width: 96% }
}