@media (max-width : 480px) {
	
	.wrapper {
		width: 100%;
		margin: 0 auto;
	}
	
	body {
		font-size: 12px;
	}
	
	.file-box {
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		margin: 0 0 30px 0;
		position: relative;
		display: block;
		overflow: hidden;
	}
	
	.x-visible {display: block;}
	
	.x-w10prc 		{width: 10%;}
	.x-w15prc 		{width: 15%;}
	.x-w20prc 		{width: 20%;}
	.x-w25prc 		{width: 25%;}
	.x-w30prc 		{width: 30%;}
	.x-w40prc 		{width: 40%;}
	.x-w50prc 		{width: 50%;}
	.x-w60prc 		{width: 60%;}
	.x-w70prc 		{width: 70%;}
	.x-w75prc 		{width: 75%;}
	.x-w80prc 		{width: 80%;}
	.x-w85prc 		{width: 85%;}
	.x-w90prc 		{width: 90%;}
	.x-w100prc 		{width: 100%;}


	.x-w180 			{width: 180px;}
	.x-w150 			{width: 150px;}
	.x-w360 			{width: 360px;}

	.x-c05x			{width: calc(0.5/12 * 100%);}
	.x-c1x			{width: calc(1/12 * 100%);}
	.x-c2x			{width: calc(2/12 * 100%);}
	.x-c3x			{width: calc(3/12 * 100%);}
	.x-c4x			{width: calc(4/12 * 100%);}
	.x-c5x			{width: calc(5/12 * 100%);}
	.x-c6x			{width: calc(6/12 * 100%);}
	.x-c7x			{width: calc(7/12 * 100%);}
	.x-c8x			{width: calc(8/12 * 100%);}
	.x-c9x			{width: calc(9/12 * 100%);}
	.x-c10x			{width: calc(10/12 * 100%);}
	.x-c11x			{width: calc(11/12 * 100%);}
	.x-c12x			{width: 100%;}




	/* padding */

	.x-p0  { padding: 0 }
	.x-pt0 { padding-top: 0 }
	.x-pr0 { padding-right: 0 }
	.x-pb0 { padding-bottom: 0 }
	.x-pl0 { padding-left: 0 }
	.x-px0 { padding-left: 0; padding-right:  0 }
	.x-py0 { padding-top: 0;  padding-bottom: 0 }

	.x-p1  { padding:        .5rem }
	.x-pt1 { padding-top:    .5rem }
	.x-pr1 { padding-right:  .5rem }
	.x-pb1 { padding-bottom: .5rem }
	.x-pl1 { padding-left:   .5rem }
	.x-py1 { padding-top:    .5rem; padding-bottom: .5rem }
	.x-px1 { padding-left:   .5rem; padding-right:  .5rem }

	.x-p2  { padding:        1rem }
	.x-pt2 { padding-top:    1rem }
	.x-pr2 { padding-right:  1rem }
	.x-pb2 { padding-bottom: 1rem }
	.x-pl2 { padding-left:   1rem }
	.x-py2 { padding-top:    1rem; padding-bottom: 1rem }
	.x-px2 { padding-left:   1rem; padding-right:  1rem }

	.x-p3  { padding:        2rem }
	.x-pt3 { padding-top:    2rem }
	.x-pr3 { padding-right:  2rem }
	.x-pb3 { padding-bottom: 2rem }
	.x-pl3 { padding-left:   2rem }
	.x-py3 { padding-top:    2rem; padding-bottom: 2rem }
	.x-px3 { padding-left:   2rem; padding-right:  2rem }

	.x-p4  { padding:        4rem }
	.x-pt4 { padding-top:    4rem }
	.x-pr4 { padding-right:  4rem }
	.x-pb4 { padding-bottom: 4rem }
	.x-pl4 { padding-left:   4rem }
	.x-py4 { padding-top:    4rem; padding-bottom: 4rem }
	.x-px4 { padding-left:   4rem; padding-right:  4rem }

	/* margin */

	.x-m0  { margin:        0 }
	.x-mt0 { margin-top:    0 }
	.x-mr0 { margin-right:  0 }
	.x-mb0 { margin-bottom: 0 }
	.x-ml0 { margin-left:   0 }
	.x-mx0 { margin-left:   0; margin-right:  0 }
	.x-my0 { margin-top:    0; margin-bottom: 0 }

	.x-m1  { margin:        .5rem }
	.x-mt1 { margin-top:    .5rem }
	.x-mr1 { margin-right:  .5rem }
	.x-mb1 { margin-bottom: .5rem }
	.x-ml1 { margin-left:   .5rem }
	.x-mx1 { margin-left:   .5rem; margin-right:  .5rem }
	.x-my1 { margin-top:    .5rem; margin-bottom: .5rem }

	.x-m2  { margin:        1rem }
	.x-mt2 { margin-top:    1rem }
	.x-mr2 { margin-right:  1rem }
	.x-mb2 { margin-bottom: 1rem }
	.x-ml2 { margin-left:   1rem }
	.x-mx2 { margin-left:   1rem; margin-right:  1rem }
	.x-my2 { margin-top:    1rem; margin-bottom: 1rem }

	.x-m3  { margin:        2rem }
	.x-mt3 { margin-top:    2rem }
	.x-mr3 { margin-right:  2rem }
	.x-mb3 { margin-bottom: 2rem }
	.x-ml3 { margin-left:   2rem }
	.x-mx3 { margin-left:   2rem; margin-right:  2rem }
	.x-my3 { margin-top:    2rem; margin-bottom: 2rem }

	.x-m4  { margin:        4rem }
	.x-mt4 { margin-top:    4rem }
	.x-mr4 { margin-right:  4rem }
	.x-mb4 { margin-bottom: 4rem }
	.x-ml4 { margin-left:   4rem }
	.x-mx4 { margin-left:   4rem; margin-right:  4rem }
	.x-my4 { margin-top:    4rem; margin-bottom: 4rem }

	.x-mxn1 { margin-left: -.5rem; margin-right: -.5rem; }
	.x-mxn2 { margin-left: -1rem; margin-right: -1rem; }
	.x-mxn3 { margin-left: -2rem; margin-right: -2rem; }
	.x-mxn4 { margin-left: -4rem; margin-right: -4rem; }

	.x-ml-auto { margin-left: auto }
	.x-mr-auto { margin-right: auto }
	.x-mx-auto { margin-left: auto; margin-right: auto; }

	.x-mb1em { margin-bottom: 1em; }
	.x-ml1em { margin-left: 1em; }
	.x-mr1em { margin-right: 1em; }
	.x-mt1em { margin-top: 1em; }

	.x-h100prc		{height: 100%;}
	.x-mh100prc		{min-height: 100%;}

	.x-tac,	.x-center	{text-align: center;}
	.x-tar			{text-align: right;}
	.x-tal 			{text-align: left;}

	.x-vat			{vertical-align: top;}
	.x-vac 			{vertical-align: middle;}
	.x-vab			{vertical-align: bottom;}

	.x-relative 		{position: relative;}
	.x-absolute 		{position: absolute;}

	.x-block			{display: block}
	.x-inline-block,	.x-inline_block
					{display: inline-block;}
	.x-inline			{display: inline;}

	.x-pointer 		{cursor: pointer;}

	.x-clear_all 		{clear: both; float: none;}

	.x-nowrap			{white-space: nowrap;}
	.x-border 		{border: 1px solid rgba(0, 0, 0, 0.2);}
	.x-bb 			{border-bottom: 1px solid rgba(0, 0, 0, 0.2);}
	.x-noborder 		{border: 0 !important;}

	.x-left 			{float: left;}
	.x-right 			{float: right;}
	.x-clear			{clear:both; float: none;}

	.x-disp_none,	.x-hidden		{display: none;}

	.x-z-1 			{z-index: 1;}
	.x-z-2 			{z-index: 2;}
	.x-z-3 			{z-index: 3;}
	.x-z-4 			{z-index: 4;}
	.x-z-5 			{z-index: 5;}
	.x-z-6 			{z-index: 6;}
	.x-z-7 			{z-index: 7;}
	.x-z-8 			{z-index: 8;}
	.x-z-9 			{z-index: 9;}
	.x-z-10			{z-index: 10;}

	.x-uc 			{text-transform: uppercase; letter-spacing: 0.05em;}

	.x-overflow-hidden{overflow: hidden;}
	.x-ofhidden 		{overflow: hidden;}
	.x-tr 			{display: table-row;}
	.x-td 			{display: table-cell;}
	.x-table 			{display: table;}
	
}