*
{
	box-sizing: border-box;
}

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

.col-wrap
{
	/*
	width: 100%;
	margin: 0px 0px 0px 0px;
	*/
	width: calc(100% - 28px);
	margin: 0px 10px 0px 14px;
}

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

.col-wrap:after,
.col-wrap-no-margin:after
{
	content: "";
	clear: both;
	display: block;
}



.visible-s  {display: none;}
.visible-m  {display: none;}
.visible-l  {display: none;}
.visible-xl {display: none;}

.hidden-s   {display: block;}
.hidden-m   {display: block;}
.hidden-l   {display: block;}
.hidden-xl  {display: block;}

.visible-xs {display: block;}
.hidden-xs  {display: none;}


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

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

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

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

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



/* ========================================================================== */
/* XS SCREEN (smaller than 480px)
/* ========================================================================== */
.col-xs-1 {width: 8.3333%;}
.col-xs-2 {width: 16.6666%;}
.col-xs-3 {width: 25%;}
.col-xs-4 {width: 33.3333%;}
.col-xs-5 {width: 41.6666%;}
.col-xs-6 {width: 50%;}
.col-xs-7 {width: 58.3333%;}
.col-xs-8 {width: 66.6666%;}
.col-xs-9 {width: 75%;}
.col-xs-10 {width: 83.3333%;}
.col-xs-11 {width: 91.6666%;}
.col-xs-12 {width: 100%;}


/* ========================================================================== */
/* S SCREEN (between 480px and 768px)
/* ========================================================================== */
@media (min-width: 480px)
{
	.col-s-1 {width: 8.3333%;}
	.col-s-2 {width: 16.6666%;}
	.col-s-3 {width: 25%;}
	.col-s-4 {width: 33.3333%;}
	.col-s-5 {width: 41.6666%;}
	.col-s-6 {width: 50%;}
	.col-s-7 {width: 58.3333%;}
	.col-s-8 {width: 66.6666%;}
	.col-s-9 {width: 75%;}
	.col-s-10 {width: 83.3333%;}
	.col-s-11 {width: 91.6666%;}
	.col-s-12 {width: 100%;}

	.visible-xs {display: none;}
	.visible-m  {display: none;}
	.visible-l  {display: none;}
	.visible-xl {display: none;}

	.hidden-xs  {display: block;}
	.hidden-m   {display: block;}
	.hidden-l   {display: block;}
	.hidden-xl  {display: block;}

	.visible-s  {display: block;}
	.hidden-s   {display: none;}
	
	#login .login-frame
	{
		width: 430px;
	}

}


/* ========================================================================== */
/* M SCREEN (between 768px and 992px)
/* ========================================================================== */
@media (min-width: 768px)
{
	.col-m-1 {width: 8.3333%;}
	.col-m-2 {width: 16.6666%;}
	.col-m-3 {width: 25%;}
	.col-m-4 {width: 33.3333%;}
	.col-m-5 {width: 41.6666%;}
	.col-m-6 {width: 50%;}
	.col-m-7 {width: 58.3333%;}
	.col-m-8 {width: 66.6666%;}
	.col-m-9 {width: 75%;}
	.col-m-10 {width: 83.3333%;}
	.col-m-11 {width: 91.6666%;}
	.col-m-12 {width: 100%;}
	
	.visible-xs {display: none;}
	.visible-s  {display: none;}
	.visible-l  {display: none;}
	.visible-xl {display: none;}

	.hidden-xs  {display: block;}
	.hidden-s   {display: block;}
	.hidden-l   {display: block;}
	.hidden-xl  {display: block;}

	.visible-m  {display: block;}
	.hidden-m   {display: none;}

	.span-page-width
	{
		width: 750px;
		margin: 0 auto;
	}

}


/* ========================================================================== */
/* L SCREEN (between 992px and 1200px)
/* ========================================================================== */
@media (min-width: 992px)
{
	.col-l-1 {width: 8.3333%;}
	.col-l-2 {width: 16.6666%;}
	.col-l-3 {width: 25%;}
	.col-l-4 {width: 33.3333%;}
	.col-l-5 {width: 41.6666%;}
	.col-l-6 {width: 50%;}
	.col-l-7 {width: 58.3333%;}
	.col-l-8 {width: 66.6666%;}
	.col-l-9 {width: 75%;}
	.col-l-10 {width: 83.3333%;}
	.col-l-11 {width: 91.6666%;}
	.col-l-12 {width: 100%;}

	.visible-xs {display: none;}
	.visible-s  {display: none;}
	.visible-m  {display: none;}
	.visible-xl {display: none;}

	.hidden-xs {display: block;}
	.hidden-s  {display: block;}
	.hidden-m  {display: block;}
	.hidden-xl {display: block;}

	.visible-l  {display: block;}
	.hidden-l  {display: none;}

	.span-page-width
	{
		width: 980px;
		margin: 0 auto;
	}

}



/* ========================================================================== */
/* XL SCREEN (larger than 1200px)
/* ========================================================================== */
@media (min-width: 1200px)
{
	.col-xl-1 {width: 8.3333%;}
	.col-xl-2 {width: 16.6666%;}
	.col-xl-3 {width: 25%;}
	.col-xl-4 {width: 33.3333%;}
	.col-xl-5 {width: 41.6666%;}
	.col-xl-6 {width: 50%;}
	.col-xl-7 {width: 58.3333%;}
	.col-xl-8 {width: 66.6666%;}
	.col-xl-9 {width: 75%;}
	.col-xl-10 {width: 83.3333%;}
	.col-xl-11 {width: 91.6666%;}
	.col-xl-12 {width: 100%;}

	.visible-xs {display: none;}
	.visible-s  {display: none;}
	.visible-m  {display: none;}
	.visible-l  {display: none;}

	.hidden-xs  {display: block;}
	.hidden-s   {display: block;}
	.hidden-m   {display: block;}
	.hidden-l   {display: block;}

	.visible-xl {display: block;}
	.hidden-xl  {display: none;}
	
	.span-page-width
	{
		width: 1170px;
		margin: 0 auto;
	}
	
	#login .login-frame
	{
		width: 400px;
	}
}


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