@charset "utf-8";

/*------------------------------------------------------------------------------------------
(arra-ez)  Responsive fluid column CSS / based on flexbox
Version: 2.1.0 (2016-09-14) 
Copyright 2016, 16design
Licensed under MIT
------------------------------------------------------------------------------------------*/

/* ///////// !! YOUR-SETTING from here  ///////////////////////////////////////  */
.wide_container	{ 
	margin: 0 auto;
	width:100%;	
 }
 
.ly_container, .ly_img_container { 
	min-width:320px; 
	max-width:1000px; 
	}
.ly_container	{
	margin: 4rem auto;
	padding:0;
	}
.ly_img_container	{ 
	margin: 0 auto ;
	padding:0;
	}	

header,footer	{
	width:100%;
	}		
.ly_header_inner, .ly_footer_inner {
	margin: auto ; 
	padding:0 auto;
	min-width:320px; 
	max-width:1000px;
	}

/* header footer
------------------------------------------------------------*/



/* ////////////////////////////////////// !! end of YOUR-SETTING  //////////  */


/* ////// arra-ez responsive set --- please custom as you like //////////////////////////  */
body, html {margin:0; padding:0;}

.shell { display: flex; flex-direction:row; flex-wrap:wrap; }
.shell.reverse { display: flex; flex-direction:row-reverse; flex-wrap:wrap; }
.shell.nowrap-x { flex-wrap:nowrap; }
.shell.left { justify-content:flex-start; }
.shell.center, .shell.x-center { justify-content:center; }
.shell.right { justify-content:flex-end; }
.shell.fill, .shell.fill-x, .shell.split { justify-content:space-between; }
.shell.equalize { justify-content:space-around; }
.shell.top { align-items:flex-start; }
.shell.middle, .shell.y-center { align-items:center; }
.shell.baseline { align-items:baseline; }
.shell.bottom { align-items:flex-end; }
.shell > .grow-x {flex-grow:1;}
.stretch, .grow-y { align-self:stretch; }

.full { width:100%;}
.half { width:50%;}
.one-third { width:calc(100% / 3);}
.two-thirds { width:calc(100% / 3 * 2);}
.quarter { width:25%;}
.three-quarters { width:75%;}
.twenty { width:20%;}
.thirty { width:30%;} 
.forty { width:40%;} 
.sixty { width:60%;}
.seventy { width:70%;}
.eighty { width:80%;}

.full.gutter { width:98%; margin:1em 1%;}
.half.gutter { width:48%;  margin:1em 1%;}
.one-third.gutter { width:calc(94% / 3); margin:1em 1%;}
.two-thirds.gutter { width:calc(97% / 3 * 2); margin:1em 1%;}
.quarter.gutter { width:23%; margin:1em 1%;}
.three-quarters.gutter { width:73%; margin:1em 1%;}
.twenty.gutter { width:18%; margin:1em 1%;}
.thirty.gutter { width:28%; margin:1em 1%;} 
.forty.gutter{ width:38%; margin:1em 1%;} 
.sixty.gutter { width:58%; margin:1em 1%;}
.seventy.gutter { width:68%; margin:1em 1%;}
.eighty.gutter { width:78%; margin:1em 1%;}

.centering {text-align:center;}
.centering > * { margin-left:auto !important; margin-right:auto !important;}

.vtCentering	{ align-items:center; }

/* clearfix --- for use together with legacy float layout */
.clearfix:before, .clearfix:after { content: " "; display: table;}
.clearfix:after { clear: both;}
.clearfix { *zoom: 1;}
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;}


/* Tablet, SmartPhone landscape */
@media only screen and (max-width: 959px) {

.ly_container	{
	margin: 2rem auto;
	}

.shell:not(.keep) > .full, 
.shell:not(.keep) > .half, 
.shell:not(.keep) > .one-third, 
.shell:not(.keep) > .two-thirds, 
.shell:not(.keep) > .quarter, 
.shell:not(.keep) > .three-quarters, 
.shell:not(.keep) > .twenty, 
.shell:not(.keep) > .thirty, 
.shell:not(.keep) > .forty, 
.shell:not(.keep) > .sixty, 
.shell:not(.keep) > .seventy, 
.shell:not(.keep) > .eighty
 	{ width:100%; margin:0; }	
	
.shell:not(.keep) > .full.gutter, 
.shell:not(.keep) > .half.gutter, 
.shell:not(.keep) > .one-third.gutter, 
.shell:not(.keep) > .two-thirds.gutter, 
.shell:not(.keep) > .quarter.gutter, 
.shell:not(.keep) > .three-quarters.gutter, 
.shell:not(.keep) > .twenty.gutter, 
.shell:not(.keep) > .thirty.gutter, 
.shell:not(.keep) > .forty.gutter, 
.shell:not(.keep) > .sixty.gutter, 
.shell:not(.keep) > .seventy.gutter, 
.shell:not(.keep) > .eighty.gutter
	{ width:92%; margin:1em 4%;}

.shell.step { flex-direction:row; flex-wrap:wrap; }
.shell.step > .half, 
.shell.step > .one-third, 
.shell.step > .two-thirds, 
.shell.step > .quarter, 
.shell.step > .three-quarters, 
.shell.step > .twenty, 
.shell.step > .thirty, 
.shell.step > .forty, 
.shell.step > .sixty, 
.shell.step > .seventy, 
.shell.step > .eighty 
	{ width:50%;}
	
.shell.step > .half.gutter, 
.shell.step > .one-third.gutter, 
.shell.step > .two-thirds.gutter, 
.shell.step > .quarter.gutter, 
.shell.step > .three-quarters.gutter, 
.shell.step > .twenty.gutter, 
.shell.step > .thirty.gutter, 
.shell.step > .forty.gutter, 
.shell.step > .sixty.gutter, 
.shell.step > .seventy.gutter, 
.shell.step > .eighty.gutter
	{ width:46%; margin:1em 2%;}

.shell.keep-half:not(.keep) { flex-direction:row;}
.shell.keep-half:not(.keep) > .full, 
.shell.keep-half:not(.keep) > .half, 
.shell.keep-half:not(.keep) > .one-third, 
.shell.keep-half:not(.keep) > .two-thirds, 
.shell.keep-half:not(.keep) > .quarter, 
.shell.keep-half:not(.keep) > .three-quarters, 
.shell.keep-half:not(.keep) > .twenty, 
.shell.keep-half:not(.keep) > .thirty, 
.shell.keep-half:not(.keep) > .forty, 
.shell.keep-half:not(.keep) > .sixty, 
.shell.keep-half:not(.keep) > .seventy, 
.shell.keep-half:not(.keep) > .eighty	
 	{ width:50%;}	
	
.shell.keep-half:not(.keep) > .full.gutter, 
.shell.keep-half:not(.keep) > .half.gutter, 
.shell.keep-half:not(.keep) > .one-third.gutter, 
.shell.keep-half:not(.keep) > .two-thirds.gutter, 
.shell.keep-half:not(.keep) > .quarter.gutter, 
.shell.keep-half:not(.keep) > .three-quarters.gutter, 
.shell.keep-half:not(.keep) > .twenty.gutter, 
.shell.keep-half:not(.keep) > .thirty.gutter, 
.shell.keep-half:not(.keep) > .forty.gutter, 
.shell.keep-half:not(.keep) > .sixty.gutter, 
.shell.keep-half:not(.keep) > .seventy.gutter, 
.shell.keep-half:not(.keep) > .eighty.gutter
	{ width:46%; margin:1em 2%;}
	
	
/* Universal padding class --- as you like */
	

	
}

/* SmartPhone Portrait size */
@media only screen and (max-width: 520px) {

.ly_container	{
	margin: 1rem auto;
	}

.shell.step:not(.keep) > .full, 
.shell.step:not(.keep) > .half, 
.shell.step:not(.keep) > .one-third, 
.shell.step:not(.keep) > .two-thirds, 
.shell.step:not(.keep) > .quarter, 
.shell.step:not(.keep) > .three-quarters, 
.shell.step:not(.keep) > .twenty, 
.shell.step:not(.keep) > .thirty, 
.shell.step:not(.keep) > .forty, 
.shell.step:not(.keep) > .sixty, 
.shell.step:not(.keep) > .seventy, 
.shell.step:not(.keep) > .eighty	
 	{ width:100%; margin: 0;}
	
.shell.step:not(.keep) > .full.gutter, 
.shell.step:not(.keep) > .half.gutter, 
.shell.step:not(.keep) > .one-third.gutter, 
.shell.step:not(.keep) > .two-thirds.gutter, 
.shell.step:not(.keep) > .quarter.gutter, 
.shell.step:not(.keep) > .three-quarters.gutter, 
.shell.step:not(.keep) > .twenty.gutter, 
.shell.step:not(.keep) > .thirty.gutter, 
.shell.step:not(.keep) > .forty.gutter, 
.shell.step:not(.keep) > .sixty.gutter, 
.shell.step:not(.keep) > .seventy.gutter, 
.shell.step:not(.keep) > .eighty.gutter	
	{ width:92%; margin:1em 4%;}

/* Single Column --- Universal margin-bottom class */
.shell.automa > , .shell.automa > .gutter {margin-bottom:1em !important;}


}