﻿@charset "utf-8";

/*------------------------------------------------------------------------------------------
あらイージー！ (arra-ez)  Responsive fluid column CSS / based on flexbox
Version: 2.7.0 (2021-06-04) 
Copyright 2016-2021, ジュウロクデザイン (16design) https://16deza.com/
Licensed under MIT
------------------------------------------------------------------------------------------*/

/* ///////// !! YOUR-SETTING from here  ///////////////////////////////////////  */
.container, .std-container {width:auto; max-width:1000px; margin:0 auto; padding:0}
.semi-wide-container {width:auto; max-width:1170px; margin:0 auto; padding:0;}
.wide-container {width:auto; max-width:1280px; margin:0 auto; padding:0;}
.x-wide-container {width:auto; max-width:1440px; margin:0 auto; padding:0;}
.xx-wide-container {width:auto; max-width:1600px; margin:0 auto; padding:0;}
.xxx-wide-container {width:auto; max-width:1980px; margin:0 auto; padding:0;}
.full-container {width:100%; margin:0; padding:0;}
@media only screen and (max-width: 1040px) { .std-container {padding:0 0.4em;} }
/* ////////////////////////////////////// !! end of YOUR-SETTING  //////////  */


/* ////// arra-ez responsive set --- please custom as you like //////////////////////////  */
body, html {margin:0; padding:0;}
.shell, .shell *, .sub-shell * { box-sizing: border-box; }

.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; }

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


.solo.gutter, .full.gutter,
.shell.gap > .solo, .shell.gap > .full{ width:98%; margin:1% 1%;}
.solo.gutter.alpha, .full.gutter.alpha,
.shell.gap > .solo.alpha, .shell.gap > .full.alpha { width:99%; margin:1% 1% 1% 0;}

.solo.gutter.omega, .full.gutter.omega,
.shell.gap > .solo.omega, .shell.gap > .full.omega { width:99%; margin:1% 0 1% 1%;}
.solo.gutter.alpha.omega, .full.gutter.alpha.omega,
.shell.gap > .solo.alpha.omega, .shell.gap > .full.alpha.omega { width:100%; margin:1% 0;}
.duo.gutter, .half.gutter,
.shell.gap > .duo, .shell.gap > .half { width:48%;  margin:1% 1%;}
.duo.gutter.alpha, .full.gutter.alpha 
.shell.gap > .duo.alpha, .shell.gap > .full.alpha { width:49%; margin:1% 1% 1% 0;}
.duo.gutter.omega, .full.gutter.omega,
.shell.gap > .duo.omega, .shell.gap > .full.omega { width:49%; margin:1% 0 1% 1%;}

.trio.gutter, .one-third.gutter 
.shell.gap > .trio, .shell.gap > .one-third { /*width:calc(94% / 3); -ms-*/ width:31.333333%; margin:1% 1%;}
.trio.gutter.alpha, .one-third.gutter.alpha
.shell.gap > .trio.alpha, .shell.gap > .one-third.alpha { /*width:calc(94% / 3); -ms-*/ width:32.333333%; margin:1% 1% 1% 0;}
.trio.gutter.omega, .one-third.gutter.omega
.shell.gap > .trio.omega, .shell.gap > .one-third.omega { /*width:calc(94% / 3); -ms-*/ width:32.333333%; margin:1% 0 1% 1%;}
.two-thirds.gutter
.shell.gap > .two-thirds { /*width:calc(98% / 3 * 2); -ms-*/ width:63.666666%; margin:1% 1%;}
.two-thirds.gutter.alpha
.shell.gap >.two-thirds.alpha { /*width:calc(98% / 3 * 2); -ms-*/ width:64.166666%; margin:1% 1% 1% 0;}
.two-thirds.gutter.omega
.shell.gap > .two-thirds.omega { /*width:calc(98% / 3 * 2); -ms-*/ width:64.166666%; margin:1% 0 1% 1%;}

.quad.gutter, .quarter.gutter,
.shell.gap > .quad, .shell.gap > .quarter { width:23%; margin:1% 1%;}
.quad.gutter.alpha, .quarter.gutter.alpha,
.shell.gap > .quad.alpha, .shell.gap > .quarter.alpha { width:24%; margin:1% 1% 1% 0;}
.quad.gutter.omega, .quarter.gutter.omega,
.shell.gap > .quad.omega, .shell.gap > .quarter.omega { width:24%; margin:1% 0 1% 1%;}
.three-quarters.gutter,
.shell.gap > .three-quarters { width:72%; margin:1% 1%;}
.three-quarters.gutter.alpha,
.shell.gap > .three-quarters.alpha { width:74%; margin:1% 1% 1% 0;}
.three-quarters.gutter.omega,
.shell.gap > .three-quarters.omega { width:74%; margin:1% 0 1% 1%;}

.penta.gutter, .twenty.gutter,
.shell.gap > .penta, .twenty { width:18%; margin:1% 1%;}
.penta.gutter.alpha, .twenty.gutter.alpha, 
.shell.gap > .penta.alpha, .twenty.alpha { width:19%; margin:1% 1% 1% 1%;}
.penta.gutter.omega, .twenty.gutter.omega 
.shell.gap > .penta.omega, .twenty.omega { width:19%; margin:1% 0 1% 1%;}

.thirty.gutter,
.shell.gap > .thirty {width:28%; margin:1% 1%;} 
.thirty.gutter.alpha,
.shell.gap > .thirty.alpha {width:29%; margin:1% 1% 1% 0;} 
.thirty.gutter.omega,
.shell.gap > .thirty.omega {width:29%; margin:1% 0 1% 1%;} 

.forty.gutter,
.shell.gap > .forty {width:38%; margin:1% 1%;} 
.forty.gutter.alpha,
.shell.gap > .forty.alpha  {width:39%; margin:1% 1% 1% 0;} 
.forty.gutter.omega,
.shell.gap > .forty.omega {width:39%; margin:1% 0 1% 1%;} 

.sixty.gutter,
.shell.gap > .sixty {width:58%; margin:1% 1%;}
.sixty.gutter.alpha,
.shell.gap > .sixty.alpha {width:59%; margin:1% 1% 1% 0;}
.sixty.gutter.omega,
.shell.gap > .sixty.omega {width:59%; margin:1% 0 1% 1%;}

.seventy.gutter,
.shell.gap > .seventy {width:68%; margin:1% 1%;}
.seventy.gutter.alpha,
.shell.gap > .seventy.alpha {width:69%; margin:1% 1% 1% 0;}
.seventy.gutter.omega,
.shell.gap > .seventy.omega {width:69%; margin:1% 0 1% 1%;}

.eighty.gutter,
.shell.gap > .eighty {width:78%; margin:1% 1%;}
.eighty.gutter.alpha,
.shell.gap > .eighty.alpha {width:79%; margin:1% 1% 1% 0;}
.eighty.gutter.omega,
.shell.gap > .eighty.omega {width:79%; margin:1% 1% 0 1%;}


.shelf {display: flex; flex-direction: column;}
.shelf > .bottom {margin-top:auto;}


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



/* Universal Padding Class --- as you like */
.pd-around {padding:1.5em 1.5em;}
.pd-side {padding:0 1.5em;}
.pd-top-bottom {padding:1.5em 0;}
.pd-right {padding-right:1.5em;}
.pd-left {padding-left:1.5em;}

/* 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;}


/*** Media Query ***/
@media only screen and (max-width: 899px) {
	
	.shell.break900:not(.step) { flex-direction:column;}
	.shell.break900 > .solo, .shell.break900 > .full, .shell.break900 > .duo, .shell.break900 > .half, .shell.break900 > .trio, .shell.break900 > .one-third, .shell.break900 > .two-thirds, .shell.break900 > .quad, .shell.break900 > .quarter, .shell.break900 > .three-quarters, .shell.break900 > .penta, .shell.break900 > .twenty, .shell.break900 > .thirty, .shell.break900 > .forty, .shell.break900 > .sixty, .shell.break900 > .seventy, .shell.break900 > .eighty 
	{ width:100%; }
	.shell.break900 > .solo.gutter, .shell.break900 > .full.gutter, .shell.break900 > .duo.gutter, .shell.break900 > .half.gutter, .shell.break900 > .trio.gutter, .shell.break900 > .one-third.gutter, .shell.break900 > .two-thirds.gutter, .shell.break900 > .quad.gutter, .shell.break900 > .quarter.gutter, .shell.break900 > .three-quarters.gutter, .shell.break900 > .penta.gutter, .shell.break900 > .twenty.gutter, .shell.break900 > .thirty.gutter, .shell.break900 > .forty.gutter, .shell.break900 > .sixty.gutter, .shell.break900 > .seventy.gutter, .shell.break900 > .eighty.gutter
	{ width:98%; margin:1% 1%;}
	
	.shell.step { flex-direction:row; flex-wrap:wrap; }
	.shell.step > .duo, .shell.step > .half, .shell.step > .trio, .shell.step > .one-third, .shell.step > .two-thirds, .shell.step > .quad, .shell.step > .quarter, .shell.step > .three-quarters, .shell.step > .penta, .shell.step > .twenty, .shell.step > .thirty, .shell.step > .forty, .shell.step > .sixty, .shell.step > .seventy, .shell.step > .eighty 
	{ width:50%;}
	.shell.step > .duo.gutter, .shell.step > .half.gutter, .shell.step > .trio.gutter, .shell.step > .one-third.gutter, .shell.step > .two-thirds.gutter, .shell.step > .quad.gutter, .shell.step > .quarter.gutter, .shell.step > .three-quarters.gutter, .shell.step > .penta.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,
	.shell.step.gap > .duo, .shell.step.gap > .half, .shell.step.gap > .trio, .shell.step.gap > .one-third, .shell.step.gap > .two-thirds, .shell.step.gap > .quad, .shell.step.gap > .quarter, .shell.step.gap > .three-quarters, .shell.step.gap > .penta, .shell.step.gap > .twenty, .shell.step.gap > .thirty, .shell.step.gap > .forty, .shell.step.gap > .sixty, .shell.step.gap > .seventy, .shell.step.gap > .eighty
	{ width:48%; margin:1% 1%;}
	
}


/* Mobile Single Column ( like 7-10 inch Tablet ) */
@media only screen and (max-width: 768px) {

	.container:not(.stretch), .std-container:not(.stretch), .semi-wide-container:not(.stretch), .wide-container:not(.stretch) {padding:0 0.3em;} /* as you like */
	.container.stretch, .std-container.stretch, .semi-wide-container.stretch, .wide-container.stretch {padding:0;}

	.shell.break768:not(.step) { flex-direction:column;}
	.shell.break768 > .solo, .shell.break768 > .full, .shell.break768 > .duo, .shell.break768 > .half, .shell.break768 > .trio, .shell.break768 > .one-third, .shell.break768 > .two-thirds, .shell.break768 > .quad, .shell.break768 > .quarter, .shell.break768 > .three-quarters, .shell.break768 > .penta, .shell.break768 > .twenty, .shell.break768 > .thirty, .shell.break768 > .forty, .shell.break768 > .sixty, .shell.break768 > .seventy, .shell.break768 > .eighty
	{ width:100%; }
	.shell.break768 > .solo.gutter, .shell.break768 > .full.gutter, .shell.break768 > .duo.gutter, .shell.break768 > .half.gutter, .shell.break768 > .trio.gutter, .shell.break768 > .one-third.gutter, .shell.break768 > .two-thirds.gutter, .shell.break768 > .quad.gutter, .shell.break768 > .quarter.gutter, .shell.break768 > .three-quarters.gutter, .shell.break768 > .penta.gutter, .shell.break768 > .twenty.gutter, .shell.break768 > .thirty.gutter, .shell.break768 > .forty.gutter, .shell.break768 > .sixty.gutter, .shell.break768 > .seventy.gutter, .shell.break768 > .eighty.gutter,
	.shell.gap.break768 > .solo, .shell.gap.break768 > .full, .shell.gap.break768 > .duo, .shell.gap.break768 > .half, .shell.gap.break768 > .trio, .shell.gap.break768 > .one-third, .shell.gap.break768 > .two-thirds, .shell.gap.break768 > .quad, .shell.gap.break768 > .quarter, .shell.gap.break768 > .three-quarters, .shell.gap.break768 > .penta, .shell.gap.break768 > .twenty, .shell.gap.break768 > .thirty, .shell.gap.break768 > .forty, .shell.gap.break768 > .sixty, .shell.gap.break768 > .seventy, .shell.gap.break768 > .eighty
	{ width:98%; margin:1% 1%;}
	
	.shell:not(.keep) > .solo, .shell:not(.keep) > .full, .shell:not(.keep) > .duo, .shell:not(.keep) > .half, .shell:not(.keep) > .trio, .shell:not(.keep) > .one-third, .shell:not(.keep) > .two-thirds, .shell:not(.keep) > .quad, .shell:not(.keep) > .quarter, .shell:not(.keep) > .three-quarters, .shell:not(.keep) > .penta, .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) > .solo.gutter, .shell:not(.keep) > .full.gutter, .shell:not(.keep) > .duo.gutter, .shell:not(.keep) > .half.gutter, .shell:not(.keep) > .trio.gutter, .shell:not(.keep) > .one-third.gutter, .shell:not(.keep) > .two-thirds.gutter, .shell:not(.keep) > .quad.gutter, .shell:not(.keep) > .quarter.gutter, .shell:not(.keep) > .three-quarters.gutter, .shell:not(.keep) > .penta.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,
	.shell.gap:not(.keep) > .solo, .shell.gap:not(.keep) > .full, .shell.gap:not(.keep) > .duo, .shell.gap:not(.keep) > .half, .shell.gap:not(.keep) > .trio, .shell.gap:not(.keep) > .one-third, .shell.gap:not(.keep) > .two-thirds, .shell.gap:not(.keep) > .quad, .shell.gap:not(.keep) > .quarter, .shell.gap:not(.keep) > .three-quarters, .shell.gap:not(.keep) > .penta, .shell.gap:not(.keep) > .twenty, .shell.gap:not(.keep) > .thirty, .shell.gap:not(.keep) > .forty, .shell.gap:not(.keep) > .sixty, .shell.gap:not(.keep) > .seventy, .shell.gap:not(.keep) > .eighty
	{ width:98%; margin:1% 1%;}

	.shell.step { flex-direction:row; flex-wrap:wrap; }
	.shell.step > .duo, .shell.step > .half, .shell.step > .trio, .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 > .duo.gutter, .shell.step > .half.gutter, .shell.step > .trio.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,
	.shell.gap.step > .duo, .shell.gap.step > .half, .shell.gap.step > .trio, .shell.gap.step > .one-third, .shell.gap.step > .two-thirds, .shell.gap.step > .quarter, .shell.gap.step > .three-quarters, .shell.gap.step > .twenty, .shell.gap.step > .thirty, .shell.gap.step > .forty, .shell.gap.step > .sixty, .shell.gap.step > .seventy, .shell.gap.step > .eighty
	{ width:48%; margin:1% 1%;}

	.shell.keep-half:not(.keep), .shell.keep-half:not(.keep) { flex-direction:row !important;}
	.shell.keep-half:not(.keep) > .solo, .shell.keep-half:not(.keep) > .full {width:100% !important;}
	.shell.keep-half:not(.keep) > .duo, .shell.keep-half:not(.keep) > .half, .shell.keep-half:not(.keep) > .trio, .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% !important;}	
	.shell.keep-half:not(.keep) > .solo.gutter, .shell.keep-half:not(.keep) > .full.gutter	{ width:98% !important; margin:1% 1% !important;}
	.shell.keep-half:not(.keep) > .duo.gutter, .shell.keep-half:not(.keep) > .half.gutter, .shell.keep-half:not(.keep) > .trio.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,
	.shell.gap.keep-half:not(.keep) > .solo, .shell.gap.keep-half:not(.keep) > .full	{ width:98% !important; margin:1% 1% !important;}
	.shell.gap.keep-half:not(.keep) > .duo, .shell.gap.keep-half:not(.keep) > .half, .shell.gap.keep-half:not(.keep) > .trio, .shell.gap.keep-half:not(.keep) > .one-third, .shell.gap.keep-half:not(.keep) > .two-thirds, .shell.gap.keep-half:not(.keep) > .quarter, .shell.gap.keep-half:not(.keep) > .three-quarters, .shell.gap.keep-half:not(.keep) > .twenty, .shell.gap.keep-half:not(.keep) > .thirty, .shell.gap.keep-half:not(.keep) > .forty, .shell.gap.keep-half:not(.keep) > .sixty, .shell.gap.keep-half:not(.keep) > .seventy, .shell.gap.keep-half:not(.keep) > .eighty
	{ width:48% !important; margin:1% 1% !important;}
	
	/* Universal padding class --- as you like */
	.pd-around {padding:1.5em 1.5em;}
	.pd-side {padding:0 1.5em;}
	.ttal {text-align:left !important;}
	.ttac {text-align:center !important;}
	.ttal:not(.pd-side) { padding:0 1.5em;}
	.pd-around .ttal:not(.pd-side), .pd-side .ttal:not(.pd-side) { padding:0;}	
	.upper {margin-bottom:2em !important;}
	
}

/* Mobile Landscape Size to Tablet Portrait */
@media only screen and (min-width:661px) and (max-width:899px) {

	.shell.step { flex-direction:row; flex-wrap:wrap; }
	.shell.step > .quad { width:33.3333%;}
	.shell.step > .penta { width:25%;}	
	.shell.step > .quad.gutter, 
	.shell.gap.step > .quad { width:32.3333%; margin:1% 1%;}
	.shell.step > .penta.gutter,
	.shell.gap.step > .penta { width:23%; margin:1% 1%;}

	.shell.keep-half:not(.keep), .shell.keep-half:not(.keep) { flex-direction:row !important;}
	.shell.keep-half:not(.keep) > .quad { width:33.3333% !important;}
	.shell.keep-half:not(.keep) > .penta { width:25% !important;}
	.shell.keep-half:not(.keep) > .quad.gutter,
	.shell.gap.keep-half:not(.keep) > .quad { width:32.3333% !important; margin:1% 1% !important;}
	.shell.keep-half:not(.keep) > .penta.gutter,
	.shell.gap.keep-half:not(.keep) > .penta{ width:23% !important; margin:1% 1% !important;}

}

/* Mobile Landscape Size to Tablet Portrait */
@media only screen and (min-width:480px) and (max-width:660px) {

	.shell.step { flex-direction:row; flex-wrap:wrap; }
	.shell.step > .quad, .shell.step > .penta { width:33.3333%;}	
	.shell.step > .quad.gutter, .shell.step > .penta.gutter,
	.shell.gap.step > .quad, .shell.gap.step > .penta { width:32.3333%; margin:1% 1%;}
	.shell.keep-half:not(.keep), .shell.keep-half:not(.keep) { flex-direction:row !important;}
	.shell.keep-half:not(.keep) > .quad, .shell.keep-half:not(.keep) > .penta { width:33.3333% !important;}
	.shell.keep-half:not(.keep) > .quad.gutter, .shell.keep-half:not(.keep) > .penta.gutter,
	.shell.gap.keep-half:not(.keep) > .quad, .shell.gap.keep-half:not(.keep) > .penta { width:32.3333% !important; margin:1% 1% !important;}

}


/* Traditional SmartPhone Portrait Size */
@media only screen and (max-width: 479px) {
	
	.shell:not(.keep), .shell.step:not(.keep) { flex-direction:column;}
	.shell.step:not(.keep) > .solo, .shell.step:not(.keep) > .full, .shell.step:not(.keep) > .duo, .shell.step:not(.keep) > .half, .shell.step:not(.keep) > .trio, .shell.step:not(.keep) > .one-third, .shell.step:not(.keep) > .two-thirds, .shell.step:not(.keep) > .quad, .shell.step:not(.keep) > .quarter, .shell.step:not(.keep) > .three-quarters, .shell.step:not(.keep) > .penta, .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: margin:0;}
	.shell.step:not(.keep) > .solo.gutter, .shell.step:not(.keep) > .full.gutter, .shell.step:not(.keep) > .duo.gutter, .shell.step:not(.keep) > .half.gutter, .shell.step:not(.keep) > .trio.gutter, .shell.step:not(.keep) > .one-third.gutter, .shell.step:not(.keep) > .two-thirds.gutter, .shell.step:not(.keep) > .quad.gutter, .shell.step:not(.keep) > .quarter.gutter, .shell.step:not(.keep) > .three-quarters.gutter, .shell.step:not(.keep) > .penta.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,
	.shell.gap.step:not(.keep) > .solo, .shell.gap.step:not(.keep) > .full, .shell.gap.step:not(.keep) > .duo, .shell.gap.step:not(.keep) > .half, .shell.gap.step:not(.keep) > .trio, .shell.gap.step:not(.keep) > .one-third, .shell.gap.step:not(.keep) > .two-thirds, .shell.gap.step:not(.keep) > .quad, .shell.gap.step:not(.keep) > .quarter, .shell.gap.step:not(.keep) > .three-quarters, .shell.gap.step:not(.keep) > .penta, .shell.gap.step:not(.keep) > .twenty, .shell.gap.step:not(.keep) > .thirty, .shell.gap.step:not(.keep) > .forty, .shell.gap.step:not(.keep) > .sixty, .shell.gap.step:not(.keep) > .seventy, .shell.gap.step:not(.keep) > .eighty	
	{ width:98%; margin:1% 1%;}

	.shell.keep-half:not(.keep), .shell.keep-half:not(.keep) { flex-direction:row !important;}
	.shell.keep-half:not(.keep) > .quad, .shell.keep-half:not(.keep) > .penta { width:50% !important;}
	.shell.keep-half:not(.keep) > .quad.gutter, .shell.keep-half:not(.keep) > .penta.gutter,
	.shell.gap.keep-half:not(.keep) > .quad, .shell.gap.keep-half:not(.keep) > .penta { width:48% !important; margin:1% 1% !important;}

	.shell.keep-third:not(.keep), .shell.keep-third:not(.keep) { flex-direction:row !important;}
	.shell.keep-third:not(.keep) > .quad, .shell.keep-third:not(.keep) > .penta { width:33.3333% !important;}
	.shell.keep-third:not(.keep) > .quad.gutter, .shell.keep-third:not(.keep) > .penta.gutter,
	.shell.gap.keep-third:not(.keep) > .quad, .shell.gap.keep-third:not(.keep) > .penta { width:32.3333% !important; margin:1% 1% !important;}



	.gutter {margin:1% 1% !important;}

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

	/* Universal padding class --- as you like */
	.pd-around {padding:3.75vmin 3%;}
	.pd-side, .pd-right, .pd-left {padding:0 3%;}
	.stal {text-align:left !important;}
	.stac {text-align:center !important;}
	.stal:not(.pd-side) { padding:0 3%;}
	.pd-around .stal:not(.pd-side), .pd-side .stal:not(.pd-side) { padding:0;}	

}



@media only screen and (min-width:600px) and (max-width: 768px) {

.sub-shell { display: flex; flex-direction:row; flex-wrap:wrap; }
.sub-shell > .sub-cell { display:block; width:50%;}
.sub-shell > .sub-cell-gutter { display:block; width:48%;  margin:1% 1%;}
.sub-shell > .sub-cell-gutter.alpha { width:49%;  margin:1% 1% 1% 0;}
.sub-shell > .sub-cell-gutter.omega { width:49%;  margin:1% 0 1% 1%;}
	
}