/* *** Custom Grid *** */

.grid,
.unit { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* Set up some rules to govern the grid */
.grid { display: block; clear: both; }
.grid .unit { float: left; width: 100%; padding: 10px; }

/* This ensures the outer gutters are equal to the (doubled) inner gutters. */
.grid .unit:first-child { /*padding-left: 20px;*/ }
.grid .unit:last-child { /*padding-right: 20px;*/ }

/* Nested grids already have padding though, so let’s nuke it */
.unit .unit:first-child { padding-left: 0; }
.unit .unit:last-child { padding-right: 0; }

.unit .grid:first-child > .unit { padding-top: 0; }
.unit .grid:last-child > .unit { padding-bottom: 0; }

/* Let people nuke the gutters/padding completely in a couple of ways */
.no-gutters .unit,
.unit.no-gutters { padding: 0 !important; }

/* Wrapping at a maximum width is optional */
.wrap .grid,
.grid.wrap { max-width: 1180px; margin: 0 auto; }

/* Width classes also have shorthand versions numbered as fractions
 * For example: for a grid unit 1/3 (one third) of the parent width,
 * simply apply class="w-1-3" to the element. */

 /****************DEFAULT GRID****************/
.grid .w-1-1 { width: 100%; }

.grid .w-1-2 { width: 50%; }

.grid .w-1-3 { width: 33.3332%; }

.grid .w-2-3 { width: 66.6665%; }

.grid .w-1-4 { width: 25%; }

.grid .w-3-4 { width: 75%; }

.grid .w-1-5 { width: 20%; }

.grid .w-2-5 { width: 40%; }

.grid .w-3-5 { width: 60%; }

.grid .w-4-5 { width: 80%; }  
 
 /****************CUSTOMIZED GRID****************/
 .grid .p5 { width :5%; }  
 
 .grid .p10 { width: 10%; }  
 
 .grid .p15 { width: 15%; }  
 
 .grid .p20 { width: 20%; }  
 
 .grid .p25 { width: 25%; }  
 
 .grid .p30 { width: 30%; }  
 
 .grid .p35 { width: 35%; }  
 
 .grid .p40 { width: 40%; }  
 
 .grid .p45 { width: 45%; }  
 
 .grid .p50 { width: 50%; }  
 
 .grid .p55{ width: 55%; }  
 
 .grid .p60 { width: 60%; }  
 
 .grid .p65 { width: 65%; }  
 
 .grid .p70 { width: 70%; }  
 
 .grid .p75 { width: 75%; }  
 
 .grid .p80 { width: 80%; }  
 
 .grid .p85 { width: 85%; }  
 
 .grid .p90 { width: 90%; }  
 
 .grid .p95 { width: 95%; }  
 
 .grid .p100 { width: 100%; }  

/* Clearfix after every .grid */
.grid { *zoom: 1; }

.grid:after { clear: both; }

.grid:before,
.grid:after { display: table; content: ""; line-height: 0; }


/* Utility classes */
.align-center { text-align: center; }
.align-left   { text-align: left; }
.align-right  { text-align: right; }

.pull-left    { float: left; }
.pull-right   { float: right; }

/* Responsive Stuff */
@media screen and (max-width: 568px) {

    /* Stack anything that isn’t full-width on smaller screens */
    .main-navigation ul { margin-left: 0; }
	.main-navigation ul li { float: none; text-align: center; }

    .grid .unit { width: 100% !important; } /*padding-left: 20px; padding-right: 20px;*/

    .unit .grid .unit { padding-left: 0px; padding-right: 0px; }

    /* Sometimes, you just want to be different on small screens */
    .center-on-mobiles { text-align: center !important; }

    .hide-on-mobiles { display: none !important; }

}

/* Expand the wrap a bit further on larger screens */
@media screen and (min-width: 1180px) {

    .wider .grid { max-width: 1180px; margin: 0 auto; }

}
/*
.grid,
.unit { -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; transition: all .25s ease-in-out; }
*/

/* *** End of Custom Grid *** */