*
{
	box-sizing: border-box;
}


.span-page-width
{
	width: 100%;
}

.span-full-width
{
	width: 100%;
}

.span-page-width,
.span-full-width
{
	content: "";
	clear: both;
	display: block;
}


.col-wrap
{
	width: 100%;
	margin: 0px 0px 0px 0px;
}

.col-wrap-2nd
{
	width: calc(100% + 20px);
	margin: 0px -10px 0px -10px;
}

.col-wrap-shop
{
	width: 100%;
	padding: 0 8px;
}

.col-wrap:after,
.col-wrap-2nd:after,
.col-wrap-shop:after
{
	content: "";
	clear: both;
	display: block;
}



.hide-on-mobile,
.hide-on-tablet
{
	display: none;
}


/* ========================================================================== */
/* COL RESET
/* ========================================================================== */
[class*="col-i"]
{
	float: left;
	padding: 0 10px;
	width: 100%;
	margin-bottom: 10px;
}

[class*="col-m"]
{
	float: left;
	padding: 0 10px;
	width: 100%;
	margin-bottom: 10px;
}

[class*="col-t"]
{
	float: left;
	padding: 0 10px;
	width: 100%;
	margin-bottom: 10px;
}

[class*="col-d"]
{
	float: left;
	padding: 0 10px;
	width: 100%;
	margin-bottom: 10px;
}

/* ========================================================================== */
/* MOBILE ONLY
/* ========================================================================== */
@media only screen and (max-width: 599px)
{
	.mobile-only {display: block;}
	
	.col-m-2 {width: 16.6666%;}
	.col-m-3 {width: 25%;}
	.col-m-4 {width: 33.3333%;}
	.col-m-6 {width: 50%;}
	.col-m-9 {width: 75%;}
	.col-m-10 {width: 83.3333%;}
	
	.collections .col-m-6
	{
		padding: 0 4px;
	}

	.collections .col-wrap
	{
		padding: 0 6px;
	}	
}


@media only screen and (min-width: 320px) and (max-width: 599px)
{
	.col-wrap-shop
	{
		padding: 0 4px;
	}

	.col-t-shop {float: left; width: 50%; padding: 6px;}
	.col-t-shop:nth-child(2n+1){clear: left;}
}


/* ========================================================================== */
/* TABLET
/* ========================================================================== */
@media only screen and (min-width: 600px) and (max-width: 989px)
{
	.mobile-only {display: none;}
	.hide-on-mobile {display: block;}

	.col-wrap-shop
	{
		padding: 0 4px;
	}

	/* For tablets: */
	.col-t-1 {width: 8.3333%;}
	.col-t-2 {width: 16.6666%;}
	.col-t-shop {float: left; width: 33.3333%; padding: 6px;}
	.col-t-3 {width: 25%;}
	.col-t-4 {width: 33.3333%;}
	.col-t-5 {width: 41.6666%;}
	.col-t-6 {width: 50%;}
	.col-t-7 {width: 58.3333%;}
	.col-t-8 {width: 66.6666%;}
	.col-t-9 {width: 75%;}
	.col-t-10 {width: 83.3333%;}
	.col-t-11 {width: 91.6666%;}
	.col-t-12 {width: 100%;}

	.col-t-shop:nth-child(3n+1){clear: left;}
	.col-t-4:nth-child(3n+1){clear: left;}
	.col-t-6:nth-child(2n+1){clear: left;}
	
	.collections .col-t-3
	{
		padding: 0 4px;
	}

	.collections .col-wrap
	{
		padding: 0 6px;
	}
}


/* ========================================================================== */
/* DESKTOP
/* ========================================================================== */
@media only screen and (min-width: 990px)
{
	.mobile-only {display: none;}
	.hide-on-mobile {display: block;}
	.hide-on-tablet {display: block;}
	
	.span-page-width
	{
		width: 980px;
		margin: 0 auto;
	}
	
	[class*="col-d"]
	{
		padding: 0 15px;
	}
	
	.col-wrap-2nd
	{
		width: 100%;
		margin: 0px -15px 0px -15px;
	}	
	
	.col-wrap-shop
	{
		padding: 0 7px;
	}

	/* For desktop: */
	.col-d-1 {width: 8.3333%;}
	.col-d-2 {width: 16.6666%;}
	.col-d-shop {float: left; width: 20%; padding: 8px;}
	.col-d-3 {width: 25%;}
	.col-d-4 {width: 33.3333%;}
	.col-d-5 {width: 41.6666%;}
	.col-d-6 {width: 50%;}
	.col-d-7 {width: 58.3333%;}
	.col-d-8 {width: 66.6666%;}
	.col-d-9 {width: 75%;}
	.col-d-10 {width: 83.3333%;}
	.col-d-11 {width: 91.6666%;}
	.col-d-12 {width: 100%;}

	.col-t-shop:nth-child(5n+1){clear: left;}
	.col-t-4:nth-child(3n+1){clear: left;}
	
	.collections .col-d-3
	{
		padding: 0 4px;
	}

	.collections .col-wrap
	{
		padding: 0 11px;
	}
}


/* ========================================================================== */
/* LARGE SCREEN
/* ========================================================================== */
@media only screen and (min-width: 1400px)
{
	.span-page-width
	{
		width: 1170px;
		margin: 0 auto;
	}
	[class*="col-d"]
	{
		padding: 0 20px;
	}

	.col-wrap-2nd
	{
		width: 100%;
		margin: 0px -20px 0px -20px;
	}	

	.col-wrap-shop
	{
		padding: 0 11px;
	}
	
	.col-t-shop
	{
		width: 20%;
		padding: 9px;
	}
	
	.collections .col-d-3
	{
		padding: 0 4px;
	}

	.collections .col-wrap
	{
		padding: 0 16px;
	}	
	
}


/* ========================================================================== */
/* IMAGES
/* ========================================================================== */
.responsive-img
{ 
	max-width: 100%; 
	height: auto; 
}







/* ========================================================================== */
/* TEST
/* ========================================================================== */
.cell-content
{
	border: 1px solid #dddddd;
}