/* *********************************************************************************************************************
	One% CSS grid- - 12 grid-umns Fluid CSS grid- System

	Why One% ? Let’s count ...
		we have 12 grid-umns (magic number divided by 2, 3, 4, 6)

		for 12 grid-umns we need 11 margins

		so if we count margin 3%, then 3% * 11 margins = 33%

		and if we count width of 1 grid-umn 5.5%, than 5.5% * 12 grid-umns = 66%

		in the end we have 33% + 66% = 99% aaand ???

		1% is still here so that's the name - One%

	2 starting options ? Let’s count a bit more ...
		1200px - perfectly fits 1280 screens
			12 grid-umns
			margin 3% / 36px (full-width)
			grid-1 5.5% / 66px (full-width)

		1000px - perfectly fits 1024 screens
			12 grid-umns
			margin 3% / 30px (full-width)
			grid-1 5.5% / 55px (full-width)
*/
/* ***********************************************Main container for all*******************************************************/

.onepcssgrid-1000,
.onepcssgrid-1200 {
    margin: 0 auto;
    padding: 0 0 0 1%;
    /* THAT'S THE NAME ;) */
}
.onepcssgrid-1200 {
    max-width: 1220px;
	clear: both;
}
.onepcssgrid-1000 {
    max-width: 1020px;
}
.onerow {
    clear: both;
    width: 100%;
	
}
/* *********************************************************************************************************************
 * Common grid-umns definitions
 */

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12 {
    float: left;
    margin: 0 3% 0 0;
    padding: 0;
}
.grid-1.last,
.grid-2.last,
.grid-3.last,
.grid-4.last,
.grid-5.last,
.grid-6.last,
.grid-7.last,
.grid-8.last,
.grid-9.last,
.grid-10.last,
.grid-11.last,
.grid-12 {
    margin: 0;
}
.grid-1 {
    width: 5.5%;
}
.grid-2 {
    width: 14%;
}
.grid-3 {
    width: 22.5%;
}
.grid-4 {
    width: 31%;
}
.grid-5 {
    width: 39.5%;
}
.grid-6 {
    width: 48%;
}
.grid-7 {
    width: 56.5%;
}
.grid-8 {
    width: 65%;
}
.grid-9 {
    width: 73.5%;
}
.grid-10 {
    width: 82%;
}
.grid-11 {
    width: 90.5%;
}
.grid-12 {
    width: 99%;
    margin: 0;
}
.grid-1 img,
.grid-2 img,
.grid-3 img,
.grid-4 img,
.grid-5 img,
.grid-6 img,
.grid-7 img,
.grid-8 img,
.grid-9 img,
.grid-10 img,
.grid-11 img,
.grid-12 img {
    width: 100%;
    height: auto;
    display: block;
}
@media all and (max-width: 1024px) {
    .onepcssgrid-1200 {
        width: 98%!important;
		padding:0px !important;
    }
    .footer_wrapper ul li {
        width: 100%!important;
    }
}
@media all and (max-width: 768px) {
    .grid-1,
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .grid-6,
    .grid-7,
    .grid-8,
    .grid-9,
    .grid-10,
    .grid-11,
    .grid-12 {
        float: none;
        width: 99%;
        margin: 0 auto;
    }
    .grid-1 .last,
    .grid-2 .last,
    .grid-3 .last,
    .grid-4,
    .grid-5 .last,
    .grid-6 .last,
    .grid-7 .last,
    .grid-8 .last,
    .grid-9 .last,
    .grid-10 .last,
    .grid-11 .last {
        margin: 10px 0px;
    }
}