*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	margin: 0;
}

[class*='c-'] {
	float: left;
	min-height: 1px;
	padding-right: 5px; /* column-space */
	padding-left: 5px; /* column-space */
}
/**********CONTENT**********/
.content {
	width: 100%;
	margin: 0 auto;
	overflow: visible;
	margin-top:0px;
}

.content_centered{
	max-width: 1140px;
	min-width: 748px; /* when using padded grid on ipad in portrait mode, width should be viewport-width - padding = (768 - 20) = 748. actually, it should be even smaller to allow for padding of grid containing element */
}

.content:after {
	content: "";
	display: table;
	clear: both;
}

.showme-m {
		display: none !important;
}

/**********COLLUM**********/
.c-1-1 {
	width: 100%;
}

.c-1-2 {
	width: 50%;
}

.c-2-3 {
	width: 66.66%;
}

.c-1-3 {
	width: 33.33%;
}
.c-3-4 {
	width: 75%;
}
.c-1-4 {
	width: 25%;
}

.c-1-5 {
	width: 20%;
}

.c-1-6 {
	width: 16.667%;
}

.c-1-12 {
	width: 8.33%
}

/**********PUSH**********/
.p-1-6 {
	margin-left: 16.667%;
}

.p-1-12 {
	margin-left: 8.33%
}
/*********PULL**********/
.p-r{
	float: right;
}

/*************ANIMATION*************/
.a-f-b{
	opacity:0;
}

.a-f-b-a{
	opacity:1;
}

@-webkit-keyframes animation-from-bottom {
	from {margin-bottom: -80px;margin-top: 80px;opacity:0;}
    to {margin-bottom: 0;margin-top: 0;opacity:1;}
}
@keyframes animation-from-bottom {
    from {margin-bottom: -80px;margin-top: 80px;opacity:0;}
    to {margin-bottom: 0;margin-top: 0;opacity:1;}
}
@-webkit-keyframes animation-show {
	from {padding-top: 40px;opacity:0;}
    to {padding-top: 0;opacity:1;}
}
@keyframes animation-show {
    from {padding-top: 40px;opacity:0;}
    to {padding-top: 0;opacity:1;}
}

.a-f-b-a {
    animation-name: animation-from-bottom;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
}

.a-f-b-a-2 {
    animation-name: animation-show;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
}
/*************TABLET****************/

@media handheld, only screen and (max-width: 1100px) {
	.content {
		width: 100%;
		min-width: 0;
		margin-left: 0;
		margin-right: 0;
		padding-left: 20px; 
		padding-right: 10px; 
	}

	[class*='c-'] {
		width: auto;
		float: none;
		padding-left: 5px;
		padding-right: 5px; 
	}


	[class*='t-'] {
		float: left;
		margin: 0 0 10px;
		padding-left: 0;
		padding-right: 10px;
		padding-bottom: 0;
	}

	.hideme-t {
		display: none !important;
		width: 0;
		height: 0;
	}
	
	/**********COLLUM TABLET**********/
	.t-1-1 {
		width: 100%;
	}

	.t-1-2 {
		width: 50%;
	}

	.t-2-3 {
		width: 66.66%;
	}

	.t-1-3 {
		width: 33.33%;
	}

	.t-1-4 {
		width: 25%;
	}
	.t-3-4 {
		width: 75%;
	}
	.t-1-5 {
		width: 20%;
	}

	.t-1-6 {
		width: 16.667%;
	}

	.t-1-12 {
		width: 8.33%
	}
}

/*************MOBILE****************/

@media handheld, only screen and (max-width: 1100px) {
	
	[class*='m-'] {
		float: left;
		margin: 0 0 10px;
		padding-left: 0;
		padding-right: 10px;
		padding-bottom: 0;
	}
	
	[class*='c-'] {
		float: left;
		margin: 0 0 10px;
		padding-left: 0;
		padding-right: 10px;
		padding-bottom: 0;
		width:100%;
	}

	.hideme-m {
		display: none !important;
		width: 0;
		height: 0;
	}
	.showme-m {
		display: block !important;
	}
	.content{
		padding-left:5px;
		padding-right:5px;
	}
	*/
	/**********COLLUM MOBILE**********/
	.m-1-1 {
		width: 100%;
	}

	.m-1-2 {
		width: 50%;
	}

	.m-2-3 {
		width: 66.66%;
	}

	.m-1-3 {
		width: 33.33%;
	}

	.m-1-4 {
		width: 25%;
	}

	.m-1-5 {
		width: 20%;
	}

	.m-1-6 {
		width: 16.667%;
	}

	.m-1-12 {
		width: 8.33%
	}
}