/***********************************
------------------------------------
FLUID & RESPONSIVE GRID SYSTEM
Mobile first concept
by RELOADED
version: 2.0
Author: Reloaded - Juhász Viktor
Author URL: http://www.reloaded.hu
------------------------------------
***********************************/

.wrapper{
display: block;
width: 100%;
position: relative;
}

.container{
display: block;
position: relative;
padding: 0 0.625em;
}

/* ALL GRID BOXES */
*[class*="grid"]{
display:inline;
float: left;
position: relative;
/*apply a natural box layout model to all elements*/
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 0.625em;
width: 100%;
}

*[class*="grid"].pad-no{padding: 0;}

/*.pad5{padding: 0 0.9375em !important;}
.pad10{padding: 0 0.625em !important;}
.pad20{padding: 0 1.25em !important;}

.mar10{margin: 0 0.625em !important;}
.mar20{margin: 0 1.25em !important;}
*/

/* MOBILE */

/* GRID */
.grid-1{width: 8.33333333%;}
.grid-2{width: 16.66666667%;}
.grid-3{width: 25%;}
.grid-4{width: 33.33333333%;}
.grid-5{width: 41.66666667%;}
.grid-6{width: 50%;}
.grid-7{width: 58.33333333%;}
.grid-8{width: 66.66666667%;}
.grid-9{width: 75%;}
.grid-10{width: 83.33333333%;}
.grid-11{width: 91.66666667%;}
.grid-12{width: 100%;}
/* PUSH */
.push-1{left: 8.33333333%;}
.push-2{left: 16.66666667%;}
.push-3{left: 25%;}
.push-4{left: 33.33333333%;}
.push-5{left: 41.66666667%;}
.push-6{left: 50%;}
.push-7{left: 58.33333333%;}
.push-8{left: 66.66666667%;}
.push-9{left: 75%;}
.push-10{left: 83.33333333%;}
.push-11{left: 91.66666667%;}
.push-12{left: 100%;}
/* PULL */
.pull-1{left: -8.33333333%;}
.pull-2{left: -16.66666667%;}
.pull-3{left: -25%;}
.pull-4{left: -33.33333333%;}
.pull-5{left: -41.66666667%;}
.pull-6{left: -50%;}
.pull-7{left: -58.33333333%;}
.pull-8{left: -66.66666667%;}
.pull-9{left: -75%;}
.pull-10{left: -83.33333333%;}
.pull-11{left: -91.66666667%;}
.pull-12{left: -100%;}
/* NO PUSH & PULL */
.no-pull, .no-push{left: 0;}
/* NO MARGIN & PADDING */
.alpha {padding-left: 0; margin-left: 0;}
.omega {padding-right: 0; margin-right: 0;}

/* NOT SO SMALL MOBILE AND UP */
@media screen and (min-width: 320px){
/* GRID */
.mob-grid-1{width: 8.33333333%;}
.mob-grid-2{width: 16.66666667%;}
.mob-grid-3{width: 25%;}
.mob-grid-4{width: 33.33333333%;}
.mob-grid-5{width: 41.66666667%;}
.mob-grid-6{width: 50%;}
.mob-grid-7{width: 58.33333333%;}
.mob-grid-8{width: 66.66666667%;}
.mob-grid-9{width: 75%;}
.mob-grid-10{width: 83.33333333%;}
.mob-grid-11{width: 91.66666667%;}
.mob-grid-12{width: 100%;}
/* PUSH */
.mob-push-1{left: 8.33333333%;}
.mob-push-2{left: 16.66666667%;}
.mob-push-3{left: 25%;}
.mob-push-4{left: 33.33333333%;}
.mob-push-5{left: 41.66666667%;}
.mob-push-6{left: 50%;}
.mob-push-7{left: 58.33333333%;}
.mob-push-8{left: 66.66666667%;}
.mob-push-9{left: 75%;}
.mob-push-10{left: 83.33333333%;}
.mob-push-11{left: 91.66666667%;}
.mob-push-12{left: 100%;}
/* PULL */
.mob-pull-1{left: -8.33333333%;}
.mob-pull-2{left: -16.66666667%;}
.mob-pull-3{left: -25%;}
.mob-pull-4{left: -33.33333333%;}
.mob-pull-5{left: -41.66666667%;}
.mob-pull-6{left: -50%;}
.mob-pull-7{left: -58.33333333%;}
.mob-pull-8{left: -66.66666667%;}
.mob-pull-9{left: -75%;}
.mob-pull-10{left: -83.33333333%;}
.mob-pull-11{left: -91.66666667%;}
.mob-pull-12{left: -100%;}
/* NO PUSH & PULL */
.mob-no-pull, .mob-no-push{left: 0;}
/* NO MARGIN & PADDING */
.mob-alpha {padding-left: 0; margin-left: 0;}
.mob-omega {padding-right: 0; margin-right: 0;}
}/*end of big-mobile media*/

/* BIG MOBILE AND UP */
@media screen and (min-width: 480px){
/* GRID */
.bigmob-grid-1{width: 8.33333333%;}
.bigmob-grid-2{width: 16.66666667%;}
.bigmob-grid-3{width: 25%;}
.bigmob-grid-4{width: 33.33333333%;}
.bigmob-grid-5{width: 41.66666667%;}
.bigmob-grid-6{width: 50%;}
.bigmob-grid-7{width: 58.33333333%;}
.bigmob-grid-8{width: 66.66666667%;}
.bigmob-grid-9{width: 75%;}
.bigmob-grid-10{width: 83.33333333%;}
.bigmob-grid-11{width: 91.66666667%;}
.bigmob-grid-12{width: 100%;}
/* PUSH */
.bigmob-push-1{left: 8.33333333%;}
.bigmob-push-2{left: 16.66666667%;}
.bigmob-push-3{left: 25%;}
.bigmob-push-4{left: 33.33333333%;}
.bigmob-push-5{left: 41.66666667%;}
.bigmob-push-6{left: 50%;}
.bigmob-push-7{left: 58.33333333%;}
.bigmob-push-8{left: 66.66666667%;}
.bigmob-push-9{left: 75%;}
.bigmob-push-10{left: 83.33333333%;}
.bigmob-push-11{left: 91.66666667%;}
.bigmob-push-12{left: 100%;}
/* PULL */
.bigmob-pull-1{left: -8.33333333%;}
.bigmob-pull-2{left: -16.66666667%;}
.bigmob-pull-3{left: -25%;}
.bigmob-pull-4{left: -33.33333333%;}
.bigmob-pull-5{left: -41.66666667%;}
.bigmob-pull-6{left: -50%;}
.bigmob-pull-7{left: -58.33333333%;}
.bigmob-pull-8{left: -66.66666667%;}
.bigmob-pull-9{left: -75%;}
.bigmob-pull-10{left: -83.33333333%;}
.bigmob-pull-11{left: -91.66666667%;}
.bigmob-pull-12{left: -100%;}
/* NO PUSH & PULL */
.bigmob-no-pull, .bigmob-no-push{left: 0;}
/* NO MARGIN & PADDING */
.bigmob-alpha {padding-left: 0; margin-left: 0;}
.bigmob-omega {padding-right: 0; margin-right: 0;}
}/*end of big-mobile media*/


/* TABLET AND UP */
@media screen and (min-width: 768px){
/* GRID */
.tab-grid-1{width: 8.33333333%;}
.tab-grid-2{width: 16.66666667%;}
.tab-grid-3{width: 25%;}
.tab-grid-4{width: 33.33333333%;}
.tab-grid-5{width: 41.66666667%;}
.tab-grid-6{width: 50%;}
.tab-grid-7{width: 58.33333333%;}
.tab-grid-8{width: 66.66666667%;}
.tab-grid-9{width: 75%;}
.tab-grid-10{width: 83.33333333%;}
.tab-grid-11{width: 91.66666667%;}
.tab-grid-12{width: 100%;}
/* PUSH */
.tab-push-1{left: 8.33333333%;}
.tab-push-2{left: 16.66666667%;}
.tab-push-3{left: 25%;}
.tab-push-4{left: 33.33333333%;}
.tab-push-5{left: 41.66666667%;}
.tab-push-6{left: 50%;}
.tab-push-7{left: 58.33333333%;}
.tab-push-8{left: 66.66666667%;}
.tab-push-9{left: 75%;}
.tab-push-10{left: 83.33333333%;}
.tab-push-11{left: 91.66666667%;}
.tab-push-12{left: 100%;}
/* PULL */
.tab-pull-1{left: -8.33333333%;}
.tab-pull-2{left: -16.66666667%;}
.tab-pull-3{left: -25%;}
.tab-pull-4{left: -33.33333333%;}
.tab-pull-5{left: -41.66666667%;}
.tab-pull-6{left: -50%;}
.tab-pull-7{left: -58.33333333%;}
.tab-pull-8{left: -66.66666667%;}
.tab-pull-9{left: -75%;}
.tab-pull-10{left: -83.33333333%;}
.tab-pull-11{left: -91.66666667%;}
.tab-pull-12{left: -100%;}
/* NO PUSH & PULL */
.tab-no-pull, .tab-no-push{left: 0;}
/* NO MARGIN & PADDING */
.tab-alpha {padding-left: 0; margin-left: 0;}
.tab-omega {padding-right: 0; margin-right: 0;}

.tab-clear{
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/*
.container{
padding: 0;
}
*/

}/*end of tablet media*/

/* DESKTOP AND UP */
@media screen and (min-width: 1024px){
/* GRID */
.desk-grid-1{width: 8.33333333%;}
.desk-grid-2{width: 16.66666667%;}
.desk-grid-3{width: 25%;}
.desk-grid-4{width: 33.33333333%;}
.desk-grid-5{width: 41.66666667%;}
.desk-grid-6{width: 50%;}
.desk-grid-7{width: 58.33333333%;}
.desk-grid-8{width: 66.66666667%;}
.desk-grid-9{width: 75%;}
.desk-grid-10{width: 83.33333333%;}
.desk-grid-11{width: 91.66666667%;}
.desk-grid-12{width: 100%;}
/* PUSH */
.desk-push-1{left: 8.33333333%;}
.desk-push-2{left: 16.66666667%;}
.desk-push-3{left: 25%;}
.desk-push-4{left: 33.33333333%;}
.desk-push-5{left: 41.66666667%;}
.desk-push-6{left: 50%;}
.desk-push-7{left: 58.33333333%;}
.desk-push-8{left: 66.66666667%;}
.desk-push-9{left: 75%;}
.desk-push-10{left: 83.33333333%;}
.desk-push-11{left: 91.66666667%;}
.desk-push-12{left: 100%;}
/* PULL */
.desk-pull-1{left: -8.33333333%;}
.desk-pull-2{left: -16.66666667%;}
.desk-pull-3{left: -25%;}
.desk-pull-4{left: -33.33333333%;}
.desk-pull-5{left: -41.66666667%;}
.desk-pull-6{left: -50%;}
.desk-pull-7{left: -58.33333333%;}
.desk-pull-8{left: -66.66666667%;}
.desk-pull-9{left: -75%;}
.desk-pull-10{left: -83.33333333%;}
.desk-pull-11{left: -91.66666667%;}
.desk-pull-12{left: -100%;}
/* NO PUSH & PULL */
.desk-no-pull, .desk-no-push{left: 0;}
/* NO MARGIN & PADDING */
.desk-alpha {padding-left: 0; margin-left: 0;}
.desk-omega {padding-right: 0; margin-right: 0;}

.container{
max-width: 1100px;
margin: 0 auto;
}

*[class*="grid"]{
padding: 0 1.25em;
}

.pad10{
padding: 0 0.625em;
}

}/*end of desktop media*/


/* BIG DESKTOP */
@media screen and (min-width: 1280px){
/* GRID */
.bigdesk-grid-1{width: 8.33333333%;}
.bigdesk-grid-2{width: 16.66666667%;}
.bigdesk-grid-3{width: 25%;}
.bigdesk-grid-4{width: 33.33333333%;}
.bigdesk-grid-5{width: 41.66666667%;}
.bigdesk-grid-6{width: 50%;}
.bigdesk-grid-7{width: 58.33333333%;}
.bigdesk-grid-8{width: 66.66666667%;}
.bigdesk-grid-9{width: 75%;}
.bigdesk-grid-10{width: 83.33333333%;}
.bigdesk-grid-11{width: 91.66666667%;}
.bigdesk-grid-12{width: 100%;}
/* PUSH */
.bigdesk-push-1{left: 8.33333333%;}
.bigdesk-push-2{left: 16.66666667%;}
.bigdesk-push-3{left: 25%;}
.bigdesk-push-4{left: 33.33333333%;}
.bigdesk-push-5{left: 41.66666667%;}
.bigdesk-push-6{left: 50%;}
.bigdesk-push-7{left: 58.33333333%;}
.bigdesk-push-8{left: 66.66666667%;}
.bigdesk-push-9{left: 75%;}
.bigdesk-push-10{left: 83.33333333%;}
.bigdesk-push-11{left: 91.66666667%;}
.bigdesk-push-12{left: 100%;}
/* PULL */
.bigdesk-pull-1{left: -8.33333333%;}
.bigdesk-pull-2{left: -16.66666667%;}
.bigdesk-pull-3{left: -25%;}
.bigdesk-pull-4{left: -33.33333333%;}
.bigdesk-pull-5{left: -41.66666667%;}
.bigdesk-pull-6{left: -50%;}
.bigdesk-pull-7{left: -58.33333333%;}
.bigdesk-pull-8{left: -66.66666667%;}
.bigdesk-pull-9{left: -75%;}
.bigdesk-pull-10{left: -83.33333333%;}
.bigdesk-pull-11{left: -91.66666667%;}
.bigdesk-pull-12{left: -100%;}
/* NO PUSH & PULL */
.bigdesk-no-pull, .bigdesk-no-push{left: 0;}
/* NO MARGIN & PADDING */
.bigdesk-alpha {padding-left: 0; margin-left: 0;}
.bigdesk-omega {padding-right: 0; margin-right: 0;}

.container{
max-width: 1200px;
margin: 0 auto;
}

}/*end of desktop media*/

/* BIGGER DESKTOP */
@media screen and (min-width: 1600px){

.container{
max-width: 1400px;
margin: 0 auto;
}

}

/* HIDERS - FROM */
/* this hides an element on X or bigger screen size */
@media screen and (max-width: 319px){.from-mob{display: none !important;}}
@media screen and (max-width: 479px){.from-bigmob{display: none !important;}}
@media screen and (max-width: 767px){.from-tab{display: none !important;}}
@media screen and (max-width: 1023px){.from-desk{display: none !important;}}
@media screen and (max-width: 1279px){.from-bigdesk{display: none !important;}}

/* HIDERS - UNTIL */
/* this hides an element on X or smaller screen size */
@media screen and (min-width: 320px){.until-mob{display: none !important;}}
@media screen and (min-width: 480px){.until-bigmob{display: none !important;}}
@media screen and (min-width: 768px){.until-tab{display: none !important;}}
@media screen and (min-width: 1024px){.until-desk{display: none !important;}}
@media screen and (min-width: 1280px){.until-bigdesk{display: none !important;}}

/* HIDERS - ONLY */
/* this hides an element between X and Y screen size */
@media screen and (max-width: 320px){.no-smallmob{display: none !important;}}
@media screen and (min-width: 321px) and (max-width: 479px){.no-mob{display: none !important;}}
@media screen and (min-width: 480px) and (max-width: 767px){.no-bigmob{display: none !important;}}
@media screen and (min-width: 768px) and (max-width: 1023px){.no-tab{display: none !important;}}
@media screen and (min-width: 1024px) and (max-width: 1279px){.no-desk{display: none !important;}}
@media screen and (min-width: 1280px){.no-bigdesk{display: none !important;}}


/*BIG MOBILE - 480px to 767px*/
@media screen and (max-width: 767px){
.no-bigmob-float{float: none;}
.bigmob-center{
float: none;
margin: 0 auto;
text-align: center;
}
}


/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}
.clearfix {display: inline-block;}
* html .clearfix {	height: 1%;}
.clearfix {display: block;}