/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
/* min.css => https://cssminifier.com/ */
@charset "utf-8";
html { -webkit-text-size-adjust: none; -webkit-overflow-scrolling: touch; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	outline: none;
	text-decoration: none;
}
u{text-decoration: underline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, main,
footer, header, hgroup, menu, nav, section {
	display: block;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	outline: none;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
input,textarea{outline:none;box-sizing:border-box;}
/* reset end */

/* add custom common class*/
.fixed:after{content:""; display:table;clear:both;}
.nowrap{white-space:nowrap;}
.center{text-align: center;margin-left:auto;margin-right: auto;}
.right{text-align: right !important;}
.left{text-align: left !important;}
.top{vertical-align: top !important;}
.middle{vertical-align: middle;}
.relative{position:relative !important;}
.absolute{position:absolute !important;width:100%;}
.top-0{top:0;}
.left-0{left:0;}
.right-0{right:0;}
.bottom-0{bottom:0;}
.block{display:block !important;}
.inline{display:inline !important;}
.inline-block{display:inline-block !important;}
.pull-r{float: right !important;}
.pull-l{float: left !important;}
.hide {display: none !important;}
.show {display: block !important;}
.no-border{border:none !important;}
.no-margin{margin:0 !important;}
.no-padding{padding:0 !important;}
.no-scroll{height:100% !important;overflow:auto !important;}
.w10{width:10% !important;}
.w20{width:20% !important;}
.w30{width:30% !important;}
.w35{width:35% !important;}
.w40{width:40% !important;}
.w50{width:50% !important;}
.w55{width:55% !important;}
.w60{width:60% !important;}
.w65{width:65% !important;}
.w70{width:70% !important;}
.w80{width:80% !important;}
.w90{width:90% !important;}
.w100{width:100% !important;}
.wv100{width:100vw !important;}
.h100{height:100% !important;}
.hv100{height:100vh !important;}
@media only screen and (max-width: 320px) { 
	.w55{width:59.5% !important;}
	.w35{width:34.5% !important;}
	.w40{width:44.2% !important;}
}

/* add custom layout class*/
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-family: inherit;font-weight:bold;color:inherit;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{font-weight: inherit;}
h1 {font-size:2em;}
h2 {font-size:1.5em;}
h3 {font-size:1.33em;}
h4 {font-size:1.17em;}
h5 {font-size:0.83em;}
h6 {font-size:0.67em;}
em {font-style:italic;}
strong {font-weight:bold !important;}
small {font-size:50% !important;}
.normal {font-weight:normal !important;}
.bold {font-weight:bold !important;}

/* form coltrols */
textarea.textarea,
input.input {
    display: inline-block;
	width: 99.9%;
	box-sizing: border-box;
	padding: .75em;
	margin: 0 .2em;
	font-size: .9em;
	font-weight: bold;
	line-height: 1.25;
	border: 1px solid #cdd0d8;
	border-radius: .1em;
	background-color: #fff;
	outline: #ff7d27;
	color:#222;
	overflow: visible;
    background-image: none;
    -webkit-background-clip: padding-box;
	background-clip: padding-box;	
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
}
textarea.textarea:hover,
textarea.textarea:focus,
input.input:hover,
input.input:focus{border: 1px solid #ff7d27;}
textarea.textarea::placeholder,
input.input::placeholder{color:#aaa;}
input.input:-ms-input-placeholder{color:#aaa;}
input.input::-ms-input-placeholder{color:#aaa;}
input.input:disabled,
input.input:read-only{background-color: #f1f1f1;color:#aaa;}
input.input:disabled{cursor: not-allowed;}
input.input.sm{font-weight:normal;width: auto;padding: .44em .55em;}
input[type=checkbox].checkbox{transform:scale(1.5);}

a.button,
button.button{
	display: inline-block;
    font-weight: bold;
    line-height: 1.25;
	text-align: center;
	box-sizing: border-box;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
	user-select: none;
	overflow: visible;
	border:none;
	outline: none;
	padding: .75em 1.5em;
	margin:.25em;
    font-size: .9em;
	border-radius: 2px;
	background-color: #ff7d27;
    color: #fff;
    cursor: pointer;
    transition: all ease-in 0.3s;
    -webkit-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;
}
a.button:hover,
a.button:active,
a.button:focus,
button.button:hover{background-color:#c1530b;color:#fff;}
button.button:focus{background-color:#c1530b;color:#fff;}
a.button.disabled,
button.button:disabled{background-color: #c7c7c7;color:#fff;cursor: not-allowed;}
button.button.cancel{background-color:#959595;color:#fff;}
.button.sm{font-weight:normal; padding: .44em 1em;background:#fff;color:#222;border:1px solid rgba(146, 168, 181, 0.23);border-radius: 3px;}
.button.sm.active,
.button.sm:hover,
.button.sm:focus{background-color:#ff7d27;color:#fff;}
.button.large{border-radius:0 !important;padding: 1em 2.5em;font-size:1.2em;}

.button.line{background:#fff;color:#222;border:1px solid #dcdcdc;}
.button.line.active{background:#fff;border-color:#ff7d27;color:#ff7d27;}
.button.line:hover,
.button.line:focus{background-color:#ff7d27;border-color:#ff7d27;color:#fff;}
.button.fx-120{width:120px !important;}
.button.fx-160{width:160px !important;}


.select {position: relative;display: inline-block;width: 100%;}
.select select {display: inline-block;width: 100%;cursor: pointer;
	width: 99.9%;
	box-sizing: border-box;
	padding: .75em;
	margin: 0 .2em;
	font-size: .9em;
	font-weight: bold;
	line-height: 1.25;
	border: 1px solid #cdd0d8;
	border-radius: .25em;
	background-color: #fff;
	outline: #ff7d27;
	color:#aaa;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;	
}
.select select::-ms-expand {display: none;}
.select select:hover,
.select select:focus {border: 1px solid #ff7d27;color:#222;}
.select select:disabled {opacity: 0.5;pointer-events: none;}
.select__arrow {
position: absolute;
top: 16px;
right: 15px;
width: 0;
height: 0;
pointer-events: none;
border-style: solid;
border-width: 8px 5px 0 5px;
border-color: #7b7b7b transparent transparent transparent;
}
.select select:hover ~ .select__arrow,
.select select:focus ~ .select__arrow {border-top-color: #000;}
.select select:disabled ~ .select__arrow {border-top-color: #ccc;}



.flow-text {font-weight: 300;margin-bottom:4%;}
@media only screen and (min-width: 360px) { .flow-text {font-size: 1.3rem;}}
@media only screen and (min-width: 390px) { .flow-text {font-size: 1.3rem;}}
@media only screen and (min-width: 420px) { .flow-text {font-size: 2.248rem;}}
@media only screen and (min-width: 450px) { .flow-text {font-size: 2.272rem;}}
@media only screen and (min-width: 480px) { .flow-text {font-size: 2.296rem;}}
@media only screen and (min-width: 510px) { .flow-text {font-size: 2.32rem;}}
@media only screen and (min-width: 540px) {	.flow-text {font-size: 2.344rem;}}
@media only screen and (min-width: 570px) { .flow-text {font-size: 2.368rem;}}
@media only screen and (min-width: 600px) { .flow-text {font-size: 2.392rem;}}
@media only screen and (min-width: 630px) {	.flow-text {font-size: 2.416rem;}}
@media only screen and (min-width: 660px) { .flow-text {font-size: 2.44rem;}}
@media only screen and (min-width: 690px) { .flow-text {font-size: 2.464rem;}}
@media only screen and (min-width: 720px) { .flow-text {font-size: 2.488rem;}}
@media only screen and (min-width: 750px) { .flow-text {font-size: 2.512rem;}}
@media only screen and (min-width: 780px) {	.flow-text {font-size: 2.536rem;}}
@media only screen and (min-width: 810px) {	.flow-text {font-size: 2.56rem;}}
@media only screen and (min-width: 840px) {	.flow-text {font-size: 2.584rem;}}
@media only screen and (min-width: 870px) {	.flow-text {font-size: 2.608rem;}}
@media only screen and (min-width: 900px) { .flow-text {font-size: 2.632rem;}}
@media only screen and (min-width: 930px) { .flow-text {font-size: 2.656rem;}}
@media only screen and (min-width: 960px) { .flow-text {font-size: 2.68rem;}}

/* debug */
.bx{border:1px dotted skyblue;}
.bx.c{background:rgba(0,0,0,.2);}
.bg{margin:0;padding: 0;height:1000vh;background-repeat: no-repeat !important;background-position: center top !important;}
.guideline{width:1000px;background:url('../data/bg_10px.png');height: 100vh;margin: 0 auto;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index: -9999;}
.guideline.b{background:url('../data/bg_10px_black.png');}
.guideline.w{background:url('../data/bg_10px_white.png');}
/* debug end */