/* =====================================================
/* ====== GLOBAL CLICKMASK ELEMENTS & STYLES
/* ==================================================== */

#click-mask{
	background: transparent;
    display: none;
    position: absolute; top: 0; left: 0;
    height: 100%;
    width: 100%;
    z-index: 6;

    /* Testing
    background: rgba(255, 255, 255, 0.1);*/
}

#click-mask.active{
     display: block;
}

/* =====================================================
/* ====== BASE (Min 320px)
/* ==================================================== */

@media only screen {

	.text-right { text-align: right!important; }
	.text-left { text-align: left!important; }
	.text-center { text-align: center!important; }
	
	.right { float: right!important; }
	.left { float: left!important; }
	.center, .centered { float: none!important; margin: 0 auto!important; }
	
	.eat-left { padding-left:0; }
	
	.eat-right { padding-right:0; }
		
	.eat-both { padding-left:0; padding-right:0; }
	
	.column.orphinate { float:left !important; }
	
	.tick {
		border-left: 3px solid transparent;
		border-right: 3px solid transparent;
		border-top: 3px solid #AAA;
		display: inline-block;
		font-size: 0px;
		line-height: 0px;
		height: 0px;
		position: relative; top: -3px;
		width: 0px;
	}
	
}

/* =====================================================
/* ====== SMALL GRID (320px - 767px)
/* ==================================================== */

@media only screen and (min-width: 320px) and (max-width: 767px) {
	
	.small-text-right { text-align: right!important; }
	.small-text-left { text-align: left!important; }
	.small-text-center, .small-text-centered { text-align: center!important; }
	
	.small-right { float: right!important; }
	.small-left { float: left!important; }
	.small-center, .small-centered { float: none!important; margin: 0 auto!important; }
	
	.small-eat-left { padding-left:0; }
	
	.small-eat-right { padding-right:0; }
		
	.small-eat-both { padding-left:0; padding-right:0; }
	
}

/* =====================================================
/* ====== MED GRID (768px - 979px)
/* ==================================================== */

@media only screen and (min-width: 768px) and (max-width: 979px) {
	
	.medium-text-right { text-align: right!important; }
	.medium-text-left { text-align: left!important; }
	.medium-text-center, .medium-text-centered { text-align: center!important; }
	
	.medium-right { float: right!important; }
	.medium-left { float: left!important; }
	.medium-center, .medium-centered { float: none!important; margin: 0 auto!important; }
	
	.medium-eat-left { padding-left:0; }
	
	.medium-eat-right { padding-right:0; }
		
	.medium-eat-both { padding-left:0; padding-right:0; }

}


/* =====================================================
/* ====== LARGE GRID (Min 980px)
/* ==================================================== */

@media only screen and (min-width: 980px) {

	.large-text-right { text-align: right!important; }
	.large-text-left { text-align: left!important; }
	.large-text-center, .large-text-centered { text-align: center!important; }
	
	.large-right { float: right!important; }
	.large-left { float: left!important; }
	.large-center, .large-centered { float: none!important; margin: 0 auto!important; }
	
	.large-eat-left { padding-left:0; }
	
	.large-eat-right { padding-right:0; }
		
	.large-eat-both { padding-left:0; padding-right:0; }
	
}

/* REMOVE THE + and - ARROWS FROM WEBKIT TYPE=NUMBER FIELDS */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* ==============================================================================
/* ====== BUTTON STYLES
/* ============================================================================= */