@media (max-width : 700px) {
	
	.wrapper {
		width: 96%;
	}
	
	body {
		font-size: 11px;
	}
	
	.s-hidden {
		display: none !important;
	}
	
	.s-visible {
		display: block !important;
	}
	
	.s-inline-block {
		display: inline-block;
	}
	
	.s-pointer {
		cursor: pointer;
	}
	
	.w2x {width: 33.33%;}
	.w3x {width: 50%;}
	.w4x {width: 100%;}
	.w6x {width: 100%;}
	.w8x {width: 100%;}
	
	.c2x	{width: 50%;}
	.c3x	{width: 50%;}
	.c4x	{width: 50%;}
	.c6x 	{width: 100%;}
	.c8x 	{width: 100%;}
	
	.s-tal {
		text-align: left;
	}
	
	.s-tac {
		text-align: center;
	}
	
	.s-w05x			{width: 4.15%;}
	.s-w1x			{width: 8.33%;}
	.s-w2x			{width: 16.66%;}
	.s-w3x			{width: 25%;}
	.s-w4x			{width: 33.33%;}
	.s-w5x			{width: 41.66%;}
	.s-w6x			{width: 50%;}
	.s-w7x			{width: 58.33%;}
	.s-w8x			{width: 66.66%;}
	.s-w9x			{width: 75%;}
	.s-w10x			{width: 83.33%;}
	.s-w11x			{width: 91.66%;}
	.s-w12x			{width: 100%;}

	.s-c05x			{width: calc(0.5/12 * 100%);}
	.s-c1x			{width: calc(1/12 * 100%);}
	.s-c2x			{width: calc(2/12 * 100%);}
	.s-c3x			{width: calc(3/12 * 100%);}
	.s-c4x			{width: calc(4/12 * 100%);}
	.s-c5x			{width: calc(5/12 * 100%);}
	.s-c6x			{width: calc(6/12 * 100%);}
	.s-c7x			{width: calc(7/12 * 100%);}
	.s-c8x			{width: calc(8/12 * 100%);}
	.s-c9x			{width: calc(9/12 * 100%);}
	.s-c10x			{width: calc(10/12 * 100%);}
	.s-c11x			{width: calc(11/12 * 100%);}
	.s-c12x			{width: 100%;}
	
	.s-w10prc 		{width: 10%;}
	.s-w15prc 		{width: 15%;}
	.s-w20prc 		{width: 20%;}
	.s-w25prc 		{width: 25%;}
	.s-w30prc 		{width: 30%;}
	.s-w40prc 		{width: 40%;}
	.s-w50prc 		{width: 50%;}
	.s-w60prc 		{width: 60%;}
	.s-w70prc 		{width: 70%;}
	.s-w75prc 		{width: 75%;}
	.s-w80prc 		{width: 80%;}
	.s-w85prc 		{width: 85%;}
	.s-w90prc 		{width: 90%;}
	.s-w100prc 		{width: 100%;}
	
	.s-p0  { padding: 0 }
	.s-pt0 { padding-top: 0 }
	.s-pr0 { padding-right: 0 }
	.s-pb0 { padding-bottom: 0 }
	.s-pl0 { padding-left: 0 }
	.s-px0 { padding-left: 0; padding-right:  0 }
	.s-py0 { padding-top: 0;  padding-bottom: 0 }

	.s-p1  { padding:        var(--space-1) }
	.s-pt1 { padding-top:    var(--space-1) }
	.s-pr1 { padding-right:  var(--space-1) }
	.s-pb1 { padding-bottom: var(--space-1) }
	.s-pl1 { padding-left:   var(--space-1) }
	.s-py1 { padding-top:    var(--space-1); padding-bottom: var(--space-1) }
	.s-px1 { padding-left:   var(--space-1); padding-right:  var(--space-1) }

	.s-p2  { padding:        var(--space-2) }
	.s-pt2 { padding-top:    var(--space-2) }
	.s-pr2 { padding-right:  var(--space-2) }
	.s-pb2 { padding-bottom: var(--space-2) }
	.s-pl2 { padding-left:   var(--space-2) }
	.s-py2 { padding-top:    var(--space-2); padding-bottom: var(--space-2) }
	.s-px2 { padding-left:   var(--space-2); padding-right:  var(--space-2) }

	.s-p3  { padding:        var(--space-3) }
	.s-pt3 { padding-top:    var(--space-3) }
	.s-pr3 { padding-right:  var(--space-3) }
	.s-pb3 { padding-bottom: var(--space-3) }
	.s-pl3 { padding-left:   var(--space-3) }
	.s-py3 { padding-top:    var(--space-3); padding-bottom: var(--space-3) }
	.s-px3 { padding-left:   var(--space-3); padding-right:  var(--space-3) }

	.s-p4  { padding:        var(--space-4) }
	.s-pt4 { padding-top:    var(--space-4) }
	.s-pr4 { padding-right:  var(--space-4) }
	.s-pb4 { padding-bottom: var(--space-4) }
	.s-pl4 { padding-left:   var(--space-4) }
	.s-py4 { padding-top:    var(--space-4); padding-bottom: var(--space-4) }
	.s-px4 { padding-left:   var(--space-4); padding-right:  var(--space-4) }
	
	.s-m0  { margin:        0 }
	.s-mt0 { margin-top:    0 }
	.s-mr0 { margin-right:  0 }
	.s-mb0 { margin-bottom: 0 }
	.s-ml0 { margin-left:   0 }
	.s-mx0 { margin-left:   0; margin-right:  0 }
	.s-my0 { margin-top:    0; margin-bottom: 0 }

	.s-m1  { margin:        var(--space-1) }
	.s-mt1 { margin-top:    var(--space-1) }
	.s-mr1 { margin-right:  var(--space-1) }
	.s-mb1 { margin-bottom: var(--space-1) }
	.s-ml1 { margin-left:   var(--space-1) }
	.s-mx1 { margin-left:   var(--space-1); margin-right:  var(--space-1) }
	.s-my1 { margin-top:    var(--space-1); margin-bottom: var(--space-1) }

	.s-m2  { margin:        var(--space-2) }
	.s-mt2 { margin-top:    var(--space-2) }
	.s-mr2 { margin-right:  var(--space-2) }
	.s-mb2 { margin-bottom: var(--space-2) }
	.s-ml2 { margin-left:   var(--space-2) }
	.s-mx2 { margin-left:   var(--space-2); margin-right:  var(--space-2) }
	.s-my2 { margin-top:    var(--space-2); margin-bottom: var(--space-2) }

	.s-m3  { margin:        var(--space-3) }
	.s-mt3 { margin-top:    var(--space-3) }
	.s-mr3 { margin-right:  var(--space-3) }
	.s-mb3 { margin-bottom: var(--space-3) }
	.s-ml3 { margin-left:   var(--space-3) }
	.s-mx3 { margin-left:   var(--space-3); margin-right:  var(--space-3) }
	.s-my3 { margin-top:    var(--space-3); margin-bottom: var(--space-3) }

	.s-m4  { margin:        var(--space-4) }
	.s-mt4 { margin-top:    var(--space-4) }
	.s-mr4 { margin-right:  var(--space-4) }
	.s-mb4 { margin-bottom: var(--space-4) }
	.s-ml4 { margin-left:   var(--space-4) }
	.s-mx4 { margin-left:   var(--space-4); margin-right:  var(--space-4) }
	.s-my4 { margin-top:    var(--space-4); margin-bottom: var(--space-4) }

	.s-mxn1 { margin-left: -var(--space-1); margin-right: -var(--space-1); }
	.s-mxn2 { margin-left: -var(--space-2); margin-right: -var(--space-2); }
	.s-mxn3 { margin-left: -var(--space-3); margin-right: -var(--space-3); }
	.s-mxn4 { margin-left: -var(--space-4); margin-right: -var(--space-4); }
	
	.top_menu {
		display: block;
		top: 0;
		margin-top: 100px;
	}
	
	.top_menu li {
		display: block;
		text-transform: uppercase;
		text-align: center;
		font-size: 20px;
		line-height: 60px;
	}
	
	.top_menu li a {
		color: #333;
	}
	
	#logo {
		max-width: 150px;
	}
	
	.tab {
		margin: 0;
	}
	
	
	
	#logo-white {
		
		top: 35px;
		height: 60px;
	}
	
	#name_frame_1 {
		font-size: 1.2em;
		position: absolute;
		top: 80px;
		width: 100%;
		font-family: 'Open Sans', sans-serif;
		text-align: center;
		line-height: 1.2em;
	}
	
	.menu_frame_1_container {
		/*margin-top: -50px;*/
	}
	
	/*
	.menu_frame_1 {
		height: 100px;
	}
	
	.menu_frame_1 a .icon {
		background-size: 128px 512px;
		width: 64px;
		height: 64px;
		border-radius: 15px;
		box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
		transition: 0.3s all;
	}
	
	.menu_frame_1.menu1 a .icon {	background-position: 0 0 ;}
	.menu_frame_1.menu2 a .icon {	background-position: 0 -64px;}
	.menu_frame_1.menu3 a .icon {	background-position: 0 -128px;}
	.menu_frame_1.menu4 a .icon {	background-position: 0 -192px;}
	.menu_frame_1.menu5 a .icon {	background-position: 0 -256px;}
	.menu_frame_1.menu6 a .icon {	background-position: 0 -320px;}
	.menu_frame_1.menu7 a .icon {	background-position: 0 -384px;}
	.menu_frame_1.menu8 a .icon {	background-position: 0 -448px;}
	
	@media (orientation:portrait) {
		.menu_frame_1_container {
			width: 100%;
			max-width: 100%;
			left: 0;
			margin-top: -170px;
			margin-left: 0;
		}
		
		.menu_frame_1 {
			width: 33%;
		}
	}
	*/
}

@media (max-width : 360px) {
	
	body {
		font-size: 10px;
	}
	
	.c2x, .c3x, .c4x, .c5x, .c6x, .c7x, .c8x, .c9x, .c10x, .c11x
		{width: 100%}
		
	.w50prc {
		width: 100% !important;
	}
	
	.x-hidden {
		display: none !important;
	}
	
	.x-visible {
		display: block !important;
	}
	
	.x-w05x			{width: 4.15%;}
	.x-w1x			{width: 8.33%;}
	.x-w2x			{width: 16.66%;}
	.x-w3x			{width: 25%;}
	.x-w4x			{width: 33.33%;}
	.x-w5x			{width: 41.66%;}
	.x-w6x			{width: 50%;}
	.x-w7x			{width: 58.33%;}
	.x-w8x			{width: 66.66%;}
	.x-w9x			{width: 75%;}
	.x-w10x			{width: 83.33%;}
	.x-w11x			{width: 91.66%;}
	.x-w12x			{width: 100%;}

	.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%;}
	
	#name_frame_1 {
		display: none;
	}
}