* { box-sizing: border-box; }

/*
 *
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video
{ margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }

body { line-height:1; }
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0;   border-top:1px solid #cccccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
*/

cursor-pt {cursor: pointer }

.flex { display: flex; }
.row { display: flex; flex-direction: row; }
.column { display: flex; flex-direction: column; }

.jc-start { justify-content: flex-start; }
.jc-end { justify-content: flex-end; }
.jc-around { justify-content: space-around; }
.jc-between { justify-content: space-between; }
.jc-space-around { justify-content: space-around; }
.jc-space-between { justify-content: space-between; }

.ai-start { align-items: flex-start; }
.ai-end { align-items: flex-end; }
.ai-center { align-items: center; }
.ai-strench { align-items: strench; }
.ai-baseline { align-items: baseline; }

.ac-start { align-content: flex-start; }
.ac-end { align-content: flex-end; }
.ac-center { align-content: center; }
.ac-strench { align-content: strench; }
.ac-around { align-content: space-around; }
.ac-between { align-content: space-between; }

.as-start { align-self: flex-start; }
.as-end { align-self: flex-end; }
.as-center { align-self: center; }
.as-baseline { align-self: baseline; }
.as-base { align-self: baseline; }

.ta-left { text-align: left; }
.ta-center { text-align: center; }
.ta-right { text-align: right; }

.td-underline { text-decoration: underline; }

.va-top { vertical-align: top; }
.va-middle { vertical-align: middle; }
.va-bottom { vertical-align: bottom; }

.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-inblock { display: inline-block; }
.d-iblock { display: inline-block; }

/* widths */
.w-100 { width: 100%; }
.w-95 { width: 95%; }
.w-90 { width: 90%; }
.w-80 { width: 80%; }
.w-75 { width: 75%; }
.w-70 { width: 70%; }
.w-66 { width: 66%; }
.w-60 { width: 60%; }
.w-50 { width: 50%; }
.w-40 { width: 40%; }
.w-33 { width: 33%; }
.w-30 { width: 30%; }
.w-25 { width: 25%; }
.w-20 { width: 20%; }
.w-15 { width: 15%; }
.w-10 { width: 10%; }
.w-5  { width: 5%; }

.w100 { width: 100%; }
.w95 { width: 95%; }
.w90 { width: 90%; }
.w80 { width: 80%; }
.w75 { width: 75%; }
.w70 { width: 70%; }
.w66 { width: 66%; }
.w60 { width: 60%; }
.w50 { width: 50%; }
.w40 { width: 40%; }
.w33 { width: 33%; }
.w30 { width: 30%; }
.w25 { width: 25%; }
.w20 { width: 20%; }
.w15 { width: 15%; }
.w10 { width: 10%; }
.w5  { width: 5%; }

.m0 { margin: 0px; }
.m4 { margin: 4px; }
.m8 { margin: 8px; }
.m12 { margin: 12px; }
.m16 { margin: 16px; }
.mauto { margin: auto; }

.mt72 { margin-top: 72px; }
.mt66 { margin-top: 66px; }
.mt60 { margin-top: 60px; }
.mt56 { margin-top: 56px; }
.mt52 { margin-top: 52px; }
.mt48 { margin-top: 48px; }
.mt44 { margin-top: 44px; }
.mt40 { margin-top: 40px; }
.mt32 { margin-top: 32px; }
.mt28 { margin-top: 28px; }
.mt24 { margin-top: 24px; }
.mt20 { margin-top: 20px; }
.mt16 { margin-top: 16px; }
.mt14 { margin-top: 14px; }
.mt12 { margin-top: 12px; }
.mt10 { margin-top: 10px; }
.mt8 { margin-top: 8px; }
.mt6 { margin-top: 6px; }
.mt4 { margin-top: 4px; }
.mt2 { margin-top: 2px; }
.mt0 { margin-top: 0px; }

.mb48 { margin-bottom: 48px; }
.mb40 { margin-bottom: 40px; }
.mb32 { margin-bottom: 32px; }
.mb28 { margin-bottom: 28px; }
.mb24 { margin-bottom: 24px; }
.mb20 { margin-bottom: 20px; }
.mb16 { margin-bottom: 16px; }
.mb14 { margin-bottom: 14px; }
.mb12 { margin-bottom: 12px; }
.mb10 { margin-bottom: 10px; }
.mb8 { margin-bottom: 8px; }
.mb6 { margin-bottom: 6px; }
.mb4 { margin-bottom: 4px; }
.mb2 { margin-bottom: 2px; }
.mb0 { margin-bottom: 0px; }

.mtb16 { margin-top: 16px; margin-bottom: 16px; }
.mtb14 { margin-top: 14px; margin-bottom: 14px; }
.mtb12 { margin-top: 12px; margin-bottom: 12px; }
.mtb10 { margin-top: 10px; margin-bottom: 10px; }
.mtb8 { margin-top: 8px; margin-bottom: 8px; }
.mtb6 { margin-top: 6px; margin-bottom: 6px; }
.mtb4 { margin-top: 4px; margin-bottom: 4px; }
.mtb2 { margin-top: 2px; margin-bottom: 2px; }
.mtb0 { margin-top: 0px; margin-bottom: 0px; }


.mr48 { margin-right: 48px; }
.mr32 { margin-right: 32px; }
.mr28 { margin-right: 28px; }
.mr24 { margin-right: 24px; }
.mr20 { margin-right: 20px; }
.mr16 { margin-right: 16px; }
.mr14 { margin-right: 14px; }
.mr12 { margin-right: 12px; }
.mr10 { margin-right: 10px; }
.mr8 { margin-right: 8px; }
.mr6 { margin-right: 6px; }
.mr4 { margin-right: 4px; }
.mr2 { margin-right: 2px; }
.mr0 { margin-right: 0px; }

.ml48 { margin-left: 48px; }
.ml32 { margin-left: 32px; }
.ml28 { margin-left: 28px; }
.ml24 { margin-left: 24px; }
.ml20 { margin-left: 20px; }
.ml16 { margin-left: 16px; }
.ml14 { margin-left: 14px; }
.ml12 { margin-left: 12px; }
.ml10 { margin-left: 10px; }
.ml8 { margin-left: 8px; }
.ml6 { margin-left: 6px; }
.ml4 { margin-left: 4px; }
.ml2 { margin-left: 2px; }
.ml0 { margin-left: 0px; }

.mlr48 { margin-left: 48px; margin-right: 48px; }
.mlr32 { margin-left: 32px; margin-right: 32px; }
.mlr28 { margin-left: 28px; margin-right: 28px; }
.mlr24 { margin-left: 24px; margin-right: 24px; }
.mlr20 { margin-left: 20px; margin-right: 20px; }
.mlr16 { margin-left: 16px; margin-right: 16px; }
.mlr14 { margin-left: 14px; margin-right: 14px; }
.mlr12 { margin-left: 12px; margin-right: 12px; }
.mlr10 { margin-left: 10px; margin-right: 10px; }
.mlr8 { margin-left: 8px; margin-right: 8px; }
.mlr6 { margin-left: 6px; margin-right: 6px; }
.mlr4 { margin-left: 4px; margin-right: 4px; }
.mlr2 { margin-left: 2px; margin-right: 2px; }
.mlr0 { margin-left: 0px; margin-right: 0px; }
.mlrauto { margin-left: auto; margin-right: auto; }



/* -- font-size -- */
.fs-8  { font-size: 8px; }
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }

.fs8   { font-size: 8px; }
.fs10 { font-size: 10px; }
.fs11 { font-size: 11px; }
.fs12 { font-size: 12px; }
.fs14 { font-size: 14px; }
.fs16 { font-size: 16px; }
.fs18 { font-size: 18px; }
.fs20 { font-size: 20px; }
.fs24 { font-size: 24px; }
.fs28 { font-size: 28px; }
.fs32 { font-size: 32px; }
.fs36 { font-size: 36px; }
.fs40 { font-size: 40px; }

.fw-bold { font-weight: bold; }
.fw-normal { font-weight: normal; }
.fw-b { font-weight: bold; }
.fw-n { font-weight: normal; }
.fwb { font-weight: bold; }
.fwn { font-weight: normal; }

.fs-italic { font-style: italic; };
.fs-oblique { font-style: oblique; };
.fs-normal { font-style: normal; };
.fs-i { font-style: italic; };
.fs-em { font-style: italic; };
.fs-o { font-style: oblique; };
.fs-n { font-style: normal; };


/* -- padding -- */
.pl16 { padding-left: 16px; }
.pl14 { padding-left: 14px; }
.pl12 { padding-left: 12px; }
.pl10 { padding-left: 10px; }
.pl8 { padding-left: 8px; }
.pl6 { padding-left: 6px; }
.pl4 { padding-left: 4px; }
.pl2 { padding-left: 2px; }
.pl0 { padding-left: 0px; }

.pr16 { padding-right: 16px; }
.pr14 { padding-right: 14px; }
.pr12 { padding-right: 12px; }
.pr10 { padding-right: 10px; }
.pr8 { padding-right: 8px; }
.pr6 { padding-right: 6px; }
.pr4 { padding-right: 4px; }
.pr2 { padding-right: 2px; }
.pr0 { padding-right: 0px; }

.pb16 { padding-bottom: 16px; }
.pb14 { padding-bottom: 14px; }
.pb12 { padding-bottom: 12px; }
.pb10 { padding-bottom: 10px; }
.pb8 { padding-bottom: 8px; }
.pb6 { padding-bottom: 6px; }
.pb4 { padding-bottom: 4px; }
.pb2 { padding-bottom: 2px; }
.pb0 { padding-bottom: 0px; }

.pt16 { padding-top: 16px; }
.pt14 { padding-top: 14px; }
.pt12 { padding-top: 12px; }
.pt10 { padding-top: 10px; }
.pt8 { padding-top: 8px; }
.pt6 { padding-top: 6px; }
.pt4 { padding-top: 4px; }
.pt2 { padding-top: 2px; }
.pt0 { padding-top: 0px; }

.p16 { padding: 16px; }
.p14 { padding: 14px; }
.p12 { padding: 12px; }
.p10 { padding: 10px; }
.p8 { padding: 8px; }
.p6 { padding: 6px; }
.p4 { padding: 4px; }
.p2 { padding: 2px; }
.p0 { padding: 0px; }


.p-fixed { position: fixed; }
.p-absolute { position: absolute; }
.p-relative { position: relative; }

.bot0 { bottom: 0; }
.bot4 { bottom: 4px; }
.bot8 { bottom: 8px; }
.bot12 { bottom: 12px; }
.bot16 { bottom: 16px; }

.r0 { right: 0; }
.r4 { right: 4px; }
.r8 { right: 8px; }
.r12 { right: 12px; }
.r16 { right: 16px; }