/* ################################################# */ /* 2025 */ /* ################################################# */ .wz.cell { position:relative; display:flex; width:100%; min-height:1px; z-index:1; align-self:center; justify-content:center; } .wz.cell > .cell-outer { display:flex; width:100%; } .wz.cell > .cell-outer > .cell-inner { display:flex; width:100%; } /* --------------------------------------------------- flow --------------------------------------------------- */ .wz.cell.fl-y > .cell-outer > .cell-inner {flex-direction:column;} .wz.cell.fl-x > .cell-outer > .cell-inner {flex-direction:row;} /* --------------------------------------------------- align horizontal on flow x --------------------------------------------------- */ .wz.cell.fl-x.ah-start > .cell-outer > .cell-inner, .wz.cell.fl-x.ah-left > .cell-outer > .cell-inner {justify-content:start;} .wz.cell.fl-x.ah-end > .cell-outer > .cell-inner, .wz.cell.fl-x.ah-right > .cell-outer > .cell-inner {justify-content:end;} .wz.cell.fl-x.ah-center > .cell-outer > .cell-inner {justify-content:center;} .wz.cell.fl-x.ah-between > .cell-outer > .cell-inner {justify-content:space-between;} .wz.cell.fl-x.ah-around > .cell-outer > .cell-inner {justify-content:space-around;} .wz.cell.fl-x.ah-evenly > .cell-outer > .cell-inner {justify-content:space-evenly;} /* --------------------------------------------------- align vertical on flow x --------------------------------------------------- */ .wz.cell.fl-x.av-center > .cell-outer > .cell-inner {align-items:center;} /* --------------------------------------------------- align horizontal on flow y --------------------------------------------------- */ .wz.cell.fl-y.ah-center > .cell-outer > .cell-inner {align-items:center;} .wz.cell.fl-y.ah-left > .cell-outer > .cell-inner {align-items:flex-start;} .wz.cell.fl-y.ah-right > .cell-outer > .cell-inner {align-items:flex-end;} /* --------------------------------------------------- align vertical on flow y --------------------------------------------------- */ /* --------------------------------------------------- block width --------------------------------------------------- */ .wz.cell.block.wd-xs > .cell-outer {max-width: var(--block-width-xs);} .wz.cell.block.wd-sm > .cell-outer {max-width: var(--block-width-sm);} .wz.cell.block.wd-md > .cell-outer {max-width: var(--block-width-md);} .wz.cell.block.wd-lg > .cell-outer {max-width: var(--block-width-lg);} .wz.cell.block.wd-xl > .cell-outer {max-width: var(--block-width-xl);} .wz.cell.block.wd-xxl > .cell-outer {max-width: var(--block-width-xxl);} .wz.cell.block.wd-full > .cell-outer {max-width: var(--block-width-full);} /* --------------------------------------------------- block style --------------------------------------------------- */ .wz.cell.block.st-light-1 { background-color: var(--st-light-1-back-col); color: var(--st-light-1-text-col); } .wz.cell.block.st-light-2 { background-color: var(--st-light-2-back-col); color: var(--st-light-2-text-col); } .wz.cell.block.st-light-3 { background-color: var(--st-light-3-back-col); color: var(--st-light-3-text-col); } .wz.cell.block.st-medium-1 { background-color: var(--st-medium-1-back-col); color: var(--st-medium-1-text-col); } .wz.cell.block.st-medium-2 { background-color: var(--st-medium-2-back-col); color: var(--st-medium-2-text-col); } .wz.cell.block.st-medium-3 { background-color: var(--st-medium-3-back-col); color: var(--st-medium-3-text-col); } .wz.cell.block.st-dark-1 { background-color: var(--st-dark-1-back-col); color: var(--st-dark-1-text-col); } .wz.cell.block.st-dark-2 { background-color: var(--st-dark-2-back-col); color: var(--st-dark-2-text-col); } .wz.cell.block.st-dark-3 { background-color: var(--st-dark-3-back-col); color: var(--st-dark-3-text-col); } /* --------------------------------------------------- cell style --------------------------------------------------- */ .wz.cell.st-light-1:not(.block) { background-color: var(--st-light-1-back-col); color: var(--st-light-1-text-col); } .wz.cell.st-light-2:not(.block) { background-color: var(--st-light-2-back-col); color: var(--st-light-2-text-col); } .wz.cell.st-light-3:not(.block) { background-color: var(--st-light-3-back-col); color: var(--st-light-3-text-col); } .wz.cell.st-medium-1:not(.block) { background-color: var(--st-medium-1-back-col); color: var(--st-medium-1-text-col); } .wz.cell.st-medium-2:not(.block) { background-color: var(--st-medium-2-back-col); color: var(--st-medium-2-text-col); } .wz.cell.st-medium-3:not(.block) { background-color: var(--st-medium-3-back-col); color: var(--st-medium-3-text-col); } .wz.cell.st-dark-1:not(.block) { background-color: var(--st-dark-1-back-col); color: var(--st-dark-1-text-col); } .wz.cell.st-dark-2:not(.block) { background-color: var(--st-dark-2-back-col); color: var(--st-dark-2-text-col); } .wz.cell.st-dark-3:not(.block) { background-color: var(--st-dark-3-back-col); color: var(--st-dark-3-text-col); } /* --------------------------------------------------- border - 1 --------------------------------------------------- */ .wz.cell.br-o-1 > .cell-outer, .wz.cell.br-o-1-t > .cell-outer, .wz.cell.br-o-1-tb > .cell-outer, .wz.cell.br-i-1 > .cell-outer > .cell-inner, .wz.cell.br-i-1-t > .cell-outer > .cell-inner, .wz.cell.br-i-1-tb > .cell-outer > .cell-inner {border-top:var(--br-1);} .wz.cell.br-o-1 > .cell-outer, .wz.cell.br-o-1-l > .cell-outer, .wz.cell.br-o-1-lr > .cell-outer, .wz.cell.br-i-1 > .cell-outer > .cell-inner, .wz.cell.br-i-1-l > .cell-outer > .cell-inner, .wz.cell.br-i-1-lr > .cell-outer > .cell-inner {border-left:var(--br-1);} .wz.cell.br-o-1 > .cell-outer, .wz.cell.br-o-1-r > .cell-outer, .wz.cell.br-o-1-lr > .cell-outer, .wz.cell.br-i-1 > .cell-outer > .cell-inner, .wz.cell.br-i-1-r > .cell-outer > .cell-inner, .wz.cell.br-i-1-lr > .cell-outer > .cell-inner {border-right:var(--br-1);} .wz.cell.br-o-1 > .cell-outer, .wz.cell.br-o-1-b > .cell-outer, .wz.cell.br-o-1-tb > .cell-outer, .wz.cell.br-i-1 > .cell-outer > .cell-inner, .wz.cell.br-i-1-b > .cell-outer > .cell-inner, .wz.cell.br-i-1-tb > .cell-outer > .cell-inner {border-bottom:var(--br-1);} /* --------------------------------------------------- border - 2 --------------------------------------------------- */ .wz.cell.br-o-2 > .cell-outer, .wz.cell.br-o-2-t > .cell-outer, .wz.cell.br-o-2-tb > .cell-outer, .wz.cell.br-i-2 > .cell-outer > .cell-inner, .wz.cell.br-i-2-t > .cell-outer > .cell-inner, .wz.cell.br-i-2-tb > .cell-outer > .cell-inner {border-top:var(--br-2);} .wz.cell.br-o-2 > .cell-outer, .wz.cell.br-o-2-l > .cell-outer, .wz.cell.br-o-2-lr > .cell-outer, .wz.cell.br-i-2 > .cell-outer > .cell-inner, .wz.cell.br-i-2-l > .cell-outer > .cell-inner, .wz.cell.br-i-2-lr > .cell-outer > .cell-inner {border-left:var(--br-2);} .wz.cell.br-o-2 > .cell-outer, .wz.cell.br-o-2-r > .cell-outer, .wz.cell.br-o-2-lr > .cell-outer, .wz.cell.br-i-2 > .cell-outer > .cell-inner, .wz.cell.br-i-2-r > .cell-outer > .cell-inner, .wz.cell.br-i-2-lr > .cell-outer > .cell-inner {border-right:var(--br-2);} .wz.cell.br-o-2 > .cell-outer, .wz.cell.br-o-2-b > .cell-outer, .wz.cell.br-o-2-tb > .cell-outer, .wz.cell.br-i-2 > .cell-outer > .cell-inner, .wz.cell.br-i-2-b > .cell-outer > .cell-inner, .wz.cell.br-i-2-tb > .cell-outer > .cell-inner {border-bottom:var(--br-2);} /* --------------------------------------------------- border - 3 --------------------------------------------------- */ .wz.cell.br-o-3 > .cell-outer, .wz.cell.br-o-3-t > .cell-outer, .wz.cell.br-o-3-tb > .cell-outer, .wz.cell.br-i-3 > .cell-outer > .cell-inner, .wz.cell.br-i-3-t > .cell-outer > .cell-inner, .wz.cell.br-i-3-tb > .cell-outer > .cell-inner {border-top:var(--br-3);} .wz.cell.br-o-3 > .cell-outer, .wz.cell.br-o-3-l > .cell-outer, .wz.cell.br-o-3-lr > .cell-outer, .wz.cell.br-i-3 > .cell-outer > .cell-inner, .wz.cell.br-i-3-l > .cell-outer > .cell-inner, .wz.cell.br-i-3-lr > .cell-outer > .cell-inner {border-left:var(--br-3);} .wz.cell.br-o-3 > .cell-outer, .wz.cell.br-o-3-r > .cell-outer, .wz.cell.br-o-3-lr > .cell-outer, .wz.cell.br-i-3 > .cell-outer > .cell-inner, .wz.cell.br-i-3-r > .cell-outer > .cell-inner, .wz.cell.br-i-3-lr > .cell-outer > .cell-inner {border-right:var(--br-3);} .wz.cell.br-o-3 > .cell-outer, .wz.cell.br-o-3-b > .cell-outer, .wz.cell.br-o-3-tb > .cell-outer, .wz.cell.br-i-3 > .cell-outer > .cell-inner, .wz.cell.br-i-3-b > .cell-outer > .cell-inner, .wz.cell.br-i-3-tb > .cell-outer > .cell-inner {border-bottom:var(--br-3);} /* --------------------------------------------------- gap --------------------------------------------------- */ .wz.cell.gp-xxs > .cell-outer > .cell-inner {gap: var(--gap-xxs);} .wz.cell.gp-xs > .cell-outer > .cell-inner {gap: var(--gap-xs);} .wz.cell.gp-sm > .cell-outer > .cell-inner {gap: var(--gap-sm);} .wz.cell.gp-md > .cell-outer > .cell-inner {gap: var(--gap-md);} .wz.cell.gp-lg > .cell-outer > .cell-inner {gap: var(--gap-lg);} .wz.cell.gp-xl > .cell-outer > .cell-inner {gap: var(--gap-xl);} .wz.cell.gp-xxl > .cell-outer > .cell-inner {gap: var(--xxl);} /* --------------------------------------------------- gap - max --------------------------------------------------- */ @media (min-width:1200px){ .wz.cell.gp-xxs > .cell-outer > .cell-inner {gap: var(--gap-xxs-max);} .wz.cell.gp-xs > .cell-outer > .cell-inner {gap: var(--gap-xs-max);} .wz.cell.gp-sm > .cell-outer > .cell-inner {gap: var(--gap-sm-max);} .wz.cell.gp-md > .cell-outer > .cell-inner {gap: var(--gap-md-max);} .wz.cell.gp-lg > .cell-outer > .cell-inner {gap: var(--gap-lg-max);} .wz.cell.gp-xl > .cell-outer > .cell-inner {gap: var(--gap-xl-max);} .wz.cell.gp-xxl > .cell-outer > .cell-inner {gap: var(--gap-xxl-max);} } /* --------------------------------------------------- padding/margin xxs --------------------------------------------------- */ .wz.cell.pd-xxs > .cell-outer > .cell-inner, .wz.cell.pd-t-xxs > .cell-outer > .cell-inner, .wz.cell.pd-tb-xxs > .cell-outer > .cell-inner, .wz.cell.mr-xxs > .cell-outer, .wz.cell.mr-t-xxs > .cell-outer, .wz.cell.mr-tb-xxs > .cell-outer {padding-top: var(--xxs);} .wz.cell.pd-xxs > .cell-outer > .cell-inner, .wz.cell.pd-b-xxs > .cell-outer > .cell-inner, .wz.cell.pd-tb-xxs > .cell-outer > .cell-inner, .wz.cell.mr-xxs > .cell-outer, .wz.cell.mr-b-xxs > .cell-outer, .wz.cell.mr-tb-xxs > .cell-outer {padding-bottom: var(--xxs);} .wz.cell.pd-xxs > .cell-outer > .cell-inner, .wz.cell.pd-l-xxs > .cell-outer > .cell-inner, .wz.cell.pd-lr-xxs > .cell-outer > .cell-inner, .wz.cell.mr-xxs > .cell-outer, .wz.cell.mr-l-xxs > .cell-outer, .wz.cell.mr-lr-xxs > .cell-outer {padding-left: var(--xxs);} .wz.cell.pd-xxs > .cell-outer > .cell-inner, .wz.cell.pd-r-xxs > .cell-outer > .cell-inner, .wz.cell.pd-lr-xxs > .cell-outer > .cell-inner, .wz.cell.mr-xxs > .cell-outer, .wz.cell.mr-r-xxs > .cell-outer, .wz.cell.mr-lr-xxs > .cell-outer {padding-right: var(--xxs);} /* --------------------------------------------------- padding/margin xxs - max --------------------------------------------------- */ @media (min-width:1200px){ .wz.cell.pd-xxs > .cell-outer > .cell-inner, .wz.cell.pd-t-xxs > .cell-outer > .cell-inner, .wz.cell.pd-tb-xxs > .cell-outer > .cell-inner, .wz.cell.mr-xxs > .cell-outer, .wz.cell.mr-t-xxs > .cell-outer, .wz.cell.mr-tb-xxs > .cell-outer {padding-top: var(--xxs-max);} .wz.cell.pd-xxs > .cell-outer > .cell-inner, .wz.cell.pd-b-xxs > .cell-outer > .cell-inner, .wz.cell.pd-tb-xxs > .cell-outer > .cell-inner, .wz.cell.mr-xxs > .cell-outer, .wz.cell.mr-b-xxs > .cell-outer, .wz.cell.mr-tb-xxs > .cell-outer {padding-bottom: var(--xxs-max);} .wz.cell.pd-xxs > .cell-outer > .cell-inner, .wz.cell.pd-l-xxs > .cell-outer > .cell-inner, .wz.cell.pd-lr-xxs > .cell-outer > .cell-inner, .wz.cell.mr-xxs > .cell-outer, .wz.cell.mr-l-xxs > .cell-outer, .wz.cell.mr-lr-xxs > .cell-outer {padding-left: var(--xxs-max);} .wz.cell.pd-xxs > .cell-outer > .cell-inner, .wz.cell.pd-r-xxs > .cell-outer > .cell-inner, .wz.cell.pd-lr-xxs > .cell-outer > .cell-inner, .wz.cell.mr-xxs > .cell-outer, .wz.cell.mr-r-xxs > .cell-outer, .wz.cell.mr-lr-xxs > .cell-outer {padding-right: var(--xxs-max);} } /* --------------------------------------------------- padding xs --------------------------------------------------- */ .wz.cell.pd-xs > .cell-outer > .cell-inner, .wz.cell.pd-t-xs > .cell-outer > .cell-inner, .wz.cell.pd-tb-xs > .cell-outer > .cell-inner, .wz.cell.mr-xs > .cell-outer, .wz.cell.mr-t-xs > .cell-outer, .wz.cell.mr-tb-xs > .cell-outer {padding-top: var(--xs);} .wz.cell.pd-xs > .cell-outer > .cell-inner, .wz.cell.pd-b-xs > .cell-outer > .cell-inner, .wz.cell.pd-tb-xs > .cell-outer > .cell-inner, .wz.cell.mr-xs > .cell-outer, .wz.cell.mr-b-xs > .cell-outer, .wz.cell.mr-tb-xs > .cell-outer {padding-bottom: var(--xs);} .wz.cell.pd-xs > .cell-outer > .cell-inner, .wz.cell.pd-l-xs > .cell-outer > .cell-inner, .wz.cell.pd-lr-xs > .cell-outer > .cell-inner, .wz.cell.mr-xs > .cell-outer, .wz.cell.mr-l-xs > .cell-outer, .wz.cell.mr-lr-xs > .cell-outer {padding-left: var(--xs);} .wz.cell.pd-xs > .cell-outer > .cell-inner, .wz.cell.pd-r-xs > .cell-outer > .cell-inner, .wz.cell.pd-lr-xs > .cell-outer > .cell-inner, .wz.cell.mr-xs > .cell-outer, .wz.cell.mr-r-xs > .cell-outer, .wz.cell.mr-lr-xs > .cell-outer {padding-right: var(--xs);} /* --------------------------------------------------- padding/margin xs - max --------------------------------------------------- */ @media (min-width:1200px){ .wz.cell.pd-xs > .cell-outer > .cell-inner, .wz.cell.pd-t-xs > .cell-outer > .cell-inner, .wz.cell.pd-tb-xs > .cell-outer > .cell-inner, .wz.cell.mr-xs > .cell-outer, .wz.cell.mr-t-xs > .cell-outer, .wz.cell.mr-tb-xs > .cell-outer {padding-top: var(--xs-max);} .wz.cell.pd-xs > .cell-outer > .cell-inner, .wz.cell.pd-b-xs > .cell-outer > .cell-inner, .wz.cell.pd-tb-xs > .cell-outer > .cell-inner, .wz.cell.mr-xs > .cell-outer, .wz.cell.mr-b-xs > .cell-outer, .wz.cell.mr-tb-xs > .cell-outer {padding-bottom: var(--xs-max);} .wz.cell.pd-xs > .cell-outer > .cell-inner, .wz.cell.pd-l-xs > .cell-outer > .cell-inner, .wz.cell.pd-lr-xs > .cell-outer > .cell-inner, .wz.cell.mr-xs > .cell-outer, .wz.cell.mr-l-xs > .cell-outer, .wz.cell.mr-lr-xs > .cell-outer {padding-left: var(--xs-max);} .wz.cell.pd-xs > .cell-outer > .cell-inner, .wz.cell.pd-r-xs > .cell-outer > .cell-inner, .wz.cell.pd-lr-xs > .cell-outer > .cell-inner, .wz.cell.mr-xs > .cell-outer, .wz.cell.mr-r-xs > .cell-outer, .wz.cell.mr-lr-xs > .cell-outer {padding-right: var(--xs-max);} } /* --------------------------------------------------- padding/margin sm --------------------------------------------------- */ .wz.cell.pd-sm > .cell-outer > .cell-inner, .wz.cell.pd-t-sm > .cell-outer > .cell-inner, .wz.cell.pd-tb-sm > .cell-outer > .cell-inner, .wz.cell.mr-sm > .cell-outer, .wz.cell.mr-t-sm > .cell-outer, .wz.cell.mr-tb-sm > .cell-outer {padding-top: var(--sm);} .wz.cell.pd-sm > .cell-outer > .cell-inner, .wz.cell.pd-b-sm > .cell-outer > .cell-inner, .wz.cell.pd-tb-sm > .cell-outer > .cell-inner, .wz.cell.mr-sm > .cell-outer, .wz.cell.mr-b-sm > .cell-outer, .wz.cell.mr-tb-sm > .cell-outer {padding-bottom: var(--sm);} .wz.cell.pd-sm > .cell-outer > .cell-inner, .wz.cell.pd-l-sm > .cell-outer > .cell-inner, .wz.cell.pd-lr-sm > .cell-outer > .cell-inner, .wz.cell.mr-sm > .cell-outer, .wz.cell.mr-l-sm > .cell-outer, .wz.cell.mr-lr-sm > .cell-outer {padding-left: var(--sm);} .wz.cell.pd-sm > .cell-outer > .cell-inner, .wz.cell.pd-r-sm > .cell-outer > .cell-inner, .wz.cell.pd-lr-sm > .cell-outer > .cell-inner, .wz.cell.mr-sm > .cell-outer, .wz.cell.mr-r-sm > .cell-outer, .wz.cell.mr-lr-sm > .cell-outer {padding-right: var(--sm);} /* --------------------------------------------------- padding/margin sm - max --------------------------------------------------- */ @media (min-width:1200px){ .wz.cell.pd-sm > .cell-outer > .cell-inner, .wz.cell.pd-t-sm > .cell-outer > .cell-inner, .wz.cell.pd-tb-sm > .cell-outer > .cell-inner, .wz.cell.mr-sm > .cell-outer, .wz.cell.mr-t-sm > .cell-outer, .wz.cell.mr-tb-sm > .cell-outer {padding-top: var(--sm-max);} .wz.cell.pd-sm > .cell-outer > .cell-inner, .wz.cell.pd-b-sm > .cell-outer > .cell-inner, .wz.cell.pd-tb-sm > .cell-outer > .cell-inner, .wz.cell.mr-sm > .cell-outer, .wz.cell.mr-b-sm > .cell-outer, .wz.cell.mr-tb-sm > .cell-outer {padding-bottom: var(--sm-max);} .wz.cell.pd-sm > .cell-outer > .cell-inner, .wz.cell.pd-l-sm > .cell-outer > .cell-inner, .wz.cell.pd-lr-sm > .cell-outer > .cell-inner, .wz.cell.mr-sm > .cell-outer, .wz.cell.mr-l-sm > .cell-outer, .wz.cell.mr-lr-sm > .cell-outer {padding-left: var(--sm-max);} .wz.cell.pd-sm > .cell-outer > .cell-inner, .wz.cell.pd-r-sm > .cell-outer > .cell-inner, .wz.cell.pd-lr-sm > .cell-outer > .cell-inner, .wz.cell.mr-sm > .cell-outer, .wz.cell.mr-r-sm > .cell-outer, .wz.cell.mr-lr-sm > .cell-outer {padding-right: var(--sm-max);} } /* --------------------------------------------------- padding/margin md --------------------------------------------------- */ .wz.cell.pd-md > .cell-outer > .cell-inner, .wz.cell.pd-t-md > .cell-outer > .cell-inner, .wz.cell.pd-tb-md > .cell-outer > .cell-inner, .wz.cell.mr-md > .cell-outer, .wz.cell.mr-t-md > .cell-outer, .wz.cell.mr-tb-md > .cell-outer {padding-top: var(--md);} .wz.cell.pd-md > .cell-outer > .cell-inner, .wz.cell.pd-b-md > .cell-outer > .cell-inner, .wz.cell.pd-tb-md > .cell-outer > .cell-inner, .wz.cell.mr-md > .cell-outer, .wz.cell.mr-b-md > .cell-outer, .wz.cell.mr-tb-md > .cell-outer {padding-bottom: var(--md);} .wz.cell.pd-md > .cell-outer > .cell-inner, .wz.cell.pd-l-md > .cell-outer > .cell-inner, .wz.cell.pd-lr-md > .cell-outer > .cell-inner, .wz.cell.mr-md > .cell-outer, .wz.cell.mr-l-md > .cell-outer, .wz.cell.mr-lr-md > .cell-outer {padding-left: var(--md);} .wz.cell.pd-md > .cell-outer > .cell-inner, .wz.cell.pd-r-md > .cell-outer > .cell-inner, .wz.cell.pd-lr-md > .cell-outer > .cell-inner, .wz.cell.mr-md > .cell-outer, .wz.cell.mr-r-md > .cell-outer, .wz.cell.mr-lr-md > .cell-outer {padding-right: var(--md);} /* --------------------------------------------------- padding/margin md - max --------------------------------------------------- */ @media (min-width:1200px){ .wz.cell.pd-md > .cell-outer > .cell-inner, .wz.cell.pd-t-md > .cell-outer > .cell-inner, .wz.cell.pd-tb-md > .cell-outer > .cell-inner, .wz.cell.mr-md > .cell-outer, .wz.cell.mr-t-md > .cell-outer, .wz.cell.mr-tb-md > .cell-outer {padding-top: var(--md-max);} .wz.cell.pd-md > .cell-outer > .cell-inner, .wz.cell.pd-b-md > .cell-outer > .cell-inner, .wz.cell.pd-tb-md > .cell-outer > .cell-inner, .wz.cell.mr-md > .cell-outer, .wz.cell.mr-b-md > .cell-outer, .wz.cell.mr-tb-md > .cell-outer {padding-bottom: var(--md-max);} .wz.cell.pd-md > .cell-outer > .cell-inner, .wz.cell.pd-l-md > .cell-outer > .cell-inner, .wz.cell.pd-lr-md > .cell-outer > .cell-inner, .wz.cell.mr-md > .cell-outer, .wz.cell.mr-l-md > .cell-outer, .wz.cell.mr-lr-md > .cell-outer {padding-left: var(--md-max);} .wz.cell.pd-md > .cell-outer > .cell-inner, .wz.cell.pd-r-md > .cell-outer > .cell-inner, .wz.cell.pd-lr-md > .cell-outer > .cell-inner, .wz.cell.mr-md > .cell-outer, .wz.cell.mr-r-md > .cell-outer, .wz.cell.mr-lr-md > .cell-outer {padding-right: var(--md-max);} } /* --------------------------------------------------- padding/margin lg --------------------------------------------------- */ .wz.cell.pd-lg > .cell-outer > .cell-inner, .wz.cell.pd-t-lg > .cell-outer > .cell-inner, .wz.cell.pd-tb-lg > .cell-outer > .cell-inner, .wz.cell.mr-lg > .cell-outer, .wz.cell.mr-t-lg > .cell-outer, .wz.cell.mr-tb-lg > .cell-outer {padding-top: var(--lg);} .wz.cell.pd-lg > .cell-outer > .cell-inner, .wz.cell.pd-b-lg > .cell-outer > .cell-inner, .wz.cell.pd-tb-lg > .cell-outer > .cell-inner, .wz.cell.mr-lg > .cell-outer, .wz.cell.mr-b-lg > .cell-outer, .wz.cell.mr-tb-lg > .cell-outer {padding-bottom: var(--lg);} .wz.cell.pd-lg > .cell-outer > .cell-inner, .wz.cell.pd-l-lg > .cell-outer > .cell-inner, .wz.cell.pd-lr-lg > .cell-outer > .cell-inner, .wz.cell.mr-lg > .cell-outer, .wz.cell.mr-l-lg > .cell-outer, .wz.cell.mr-lr-lg > .cell-outer {padding-left: var(--lg);} .wz.cell.pd-lg > .cell-outer > .cell-inner, .wz.cell.pd-r-lg > .cell-outer > .cell-inner, .wz.cell.pd-lr-lg > .cell-outer > .cell-inner, .wz.cell.mr-lg > .cell-outer, .wz.cell.mr-r-lg > .cell-outer, .wz.cell.mr-lr-lg > .cell-outer {padding-right: var(--lg);} /* --------------------------------------------------- padding/margin lg - max --------------------------------------------------- */ @media (min-width:1200px){ .wz.cell.pd-lg > .cell-outer > .cell-inner, .wz.cell.pd-t-lg > .cell-outer > .cell-inner, .wz.cell.pd-tb-lg > .cell-outer > .cell-inner, .wz.cell.mr-lg > .cell-outer, .wz.cell.mr-t-lg > .cell-outer, .wz.cell.mr-tb-lg > .cell-outer {padding-top: var(--lg-max);} .wz.cell.pd-lg > .cell-outer > .cell-inner, .wz.cell.pd-b-lg > .cell-outer > .cell-inner, .wz.cell.pd-tb-lg > .cell-outer > .cell-inner, .wz.cell.mr-lg > .cell-outer, .wz.cell.mr-b-lg > .cell-outer, .wz.cell.mr-tb-lg > .cell-outer {padding-bottom: var(--lg-max);} .wz.cell.pd-lg > .cell-outer > .cell-inner, .wz.cell.pd-l-lg > .cell-outer > .cell-inner, .wz.cell.pd-lr-lg > .cell-outer > .cell-inner, .wz.cell.mr-lg > .cell-outer, .wz.cell.mr-l-lg > .cell-outer, .wz.cell.mr-lr-lg > .cell-outer {padding-left: var(--lg-max);} .wz.cell.pd-lg > .cell-outer > .cell-inner, .wz.cell.pd-r-lg > .cell-outer > .cell-inner, .wz.cell.pd-lr-lg > .cell-outer > .cell-inner, .wz.cell.mr-lg > .cell-outer, .wz.cell.mr-r-lg > .cell-outer, .wz.cell.mr-lr-lg > .cell-outer {padding-right: var(--lg-max);} } /* --------------------------------------------------- padding/margin xl --------------------------------------------------- */ .wz.cell.pd-xl > .cell-outer > .cell-inner, .wz.cell.pd-t-xl > .cell-outer > .cell-inner, .wz.cell.pd-tb-xl > .cell-outer > .cell-inner, .wz.cell.mr-xl > .cell-outer, .wz.cell.mr-t-xl > .cell-outer, .wz.cell.mr-tb-xl > .cell-outer {padding-top: var(--xl);} .wz.cell.pd-xl > .cell-outer > .cell-inner, .wz.cell.pd-b-xl > .cell-outer > .cell-inner, .wz.cell.pd-tb-xl > .cell-outer > .cell-inner, .wz.cell.mr-xl > .cell-outer, .wz.cell.mr-b-xl > .cell-outer, .wz.cell.mr-tb-xl > .cell-outer {padding-bottom: var(--xl);} .wz.cell.pd-xl > .cell-outer > .cell-inner, .wz.cell.pd-l-xl > .cell-outer > .cell-inner, .wz.cell.pd-lr-xl > .cell-outer > .cell-inner, .wz.cell.mr-xl > .cell-outer, .wz.cell.mr-l-xl > .cell-outer, .wz.cell.mr-lr-xl > .cell-outer {padding-left: var(--xl);} .wz.cell.pd-xl > .cell-outer > .cell-inner, .wz.cell.pd-r-xl > .cell-outer > .cell-inner, .wz.cell.pd-lr-xl > .cell-outer > .cell-inner, .wz.cell.mr-xl > .cell-outer, .wz.cell.mr-r-xl > .cell-outer, .wz.cell.mr-lr-xl > .cell-outer {padding-right: var(--xl);} /* --------------------------------------------------- padding/margin xl - max --------------------------------------------------- */ @media (min-width:1200px){ .wz.cell.pd-xl > .cell-outer > .cell-inner, .wz.cell.pd-t-xl > .cell-outer > .cell-inner, .wz.cell.pd-tb-xl > .cell-outer > .cell-inner, .wz.cell.mr-xl > .cell-outer, .wz.cell.mr-t-xl > .cell-outer, .wz.cell.mr-tb-xl > .cell-outer {padding-top: var(--xl-max);} .wz.cell.pd-xl > .cell-outer > .cell-inner, .wz.cell.pd-b-xl > .cell-outer > .cell-inner, .wz.cell.pd-tb-xl > .cell-outer > .cell-inner, .wz.cell.mr-xl > .cell-outer, .wz.cell.mr-b-xl > .cell-outer, .wz.cell.mr-tb-xl > .cell-outer {padding-bottom: var(--xl-max);} .wz.cell.pd-xl > .cell-outer > .cell-inner, .wz.cell.pd-l-xl > .cell-outer > .cell-inner, .wz.cell.pd-lr-xl > .cell-outer > .cell-inner, .wz.cell.mr-xl > .cell-outer, .wz.cell.mr-l-xl > .cell-outer, .wz.cell.mr-lr-xl > .cell-outer {padding-left: var(--xl-max);} .wz.cell.pd-xl > .cell-outer > .cell-inner, .wz.cell.pd-r-xl > .cell-outer > .cell-inner, .wz.cell.pd-lr-xl > .cell-outer > .cell-inner, .wz.cell.mr-xl > .cell-outer, .wz.cell.mr-r-xl > .cell-outer, .wz.cell.mr-lr-xl > .cell-outer {padding-right: var(--xl-max);} } /* --------------------------------------------------- padding/margin xxl --------------------------------------------------- */ .wz.cell.pd-xxl > .cell-outer > .cell-inner, .wz.cell.pd-t-xxl > .cell-outer > .cell-inner, .wz.cell.pd-tb-xxl > .cell-outer > .cell-inner, .wz.cell.mr-xxl > .cell-outer, .wz.cell.mr-t-xxl > .cell-outer, .wz.cell.mr-tb-xxl > .cell-outer {padding-top: var(--xxl);} .wz.cell.pd-xxl > .cell-outer > .cell-inner, .wz.cell.pd-b-xxl > .cell-outer > .cell-inner, .wz.cell.pd-tb-xxl > .cell-outer > .cell-inner, .wz.cell.mr-xxl > .cell-outer, .wz.cell.mr-b-xxl > .cell-outer, .wz.cell.mr-tb-xxl > .cell-outer {padding-bottom: var(--xxl);} .wz.cell.pd-xxl > .cell-outer > .cell-inner, .wz.cell.pd-l-xxl > .cell-outer > .cell-inner, .wz.cell.pd-lr-xxl > .cell-outer > .cell-inner, .wz.cell.mr-xxl > .cell-outer, .wz.cell.mr-l-xxl > .cell-outer, .wz.cell.mr-lr-xxl > .cell-outer {padding-left: var(--xxl);} .wz.cell.pd-xxl > .cell-outer > .cell-inner, .wz.cell.pd-r-xxl > .cell-outer > .cell-inner, .wz.cell.pd-lr-xxl > .cell-outer > .cell-inner, .wz.cell.mr-xxl > .cell-outer, .wz.cell.mr-r-xxl > .cell-outer, .wz.cell.mr-lr-xxl > .cell-outer {padding-right: var(--xxl);} /* --------------------------------------------------- padding/margin xxl - max --------------------------------------------------- */ @media (min-width:1200px){ .wz.cell.pd-xxl > .cell-outer > .cell-inner, .wz.cell.pd-t-xxl > .cell-outer > .cell-inner, .wz.cell.pd-tb-xxl > .cell-outer > .cell-inner, .wz.cell.mr-xxl > .cell-outer, .wz.cell.mr-t-xxl > .cell-outer, .wz.cell.mr-tb-xxl > .cell-outer {padding-top: var(--xxl-max);} .wz.cell.pd-xxl > .cell-outer > .cell-inner, .wz.cell.pd-b-xxl > .cell-outer > .cell-inner, .wz.cell.pd-tb-xxl > .cell-outer > .cell-inner, .wz.cell.mr-xxl > .cell-outer, .wz.cell.mr-b-xxl > .cell-outer, .wz.cell.mr-tb-xxl > .cell-outer {padding-bottom: var(--xxl-max);} .wz.cell.pd-xxl > .cell-outer > .cell-inner, .wz.cell.pd-l-xxl > .cell-outer > .cell-inner, .wz.cell.pd-lr-xxl > .cell-outer > .cell-inner, .wz.cell.mr-xxl > .cell-outer, .wz.cell.mr-l-xxl > .cell-outer, .wz.cell.mr-lr-xxl > .cell-outer {padding-left: var(--xxl-max);} .wz.cell.pd-xxl > .cell-outer > .cell-inner, .wz.cell.pd-r-xxl > .cell-outer > .cell-inner, .wz.cell.pd-lr-xxl > .cell-outer > .cell-inner, .wz.cell.mr-xxl > .cell-outer, .wz.cell.mr-r-xxl > .cell-outer, .wz.cell.mr-lr-xxl > .cell-outer {padding-right: var(--xxl-max);} } /* ------------------------------------------------- */ /* [WIP] cellalign-stretch -align cells by flex' stretch method ? ? ? /* ------------------------------------------------- */ .wz.cell.clal-stretch > .ci > .cfo > .cfi > .cc, .wz.cell.clal-stretch > .ci > a > .cfo > .cfi > .cc {justify-content:stretch;} /* ################################################################################### */ /* ------------------------------------------------- [WIP] BASIC - cell-link ------------------------------------------------- */ .wz.cell > a { display:block; width:100%; text-decoration:none; } _____ CHILDREN{} /* ================================================= CELLS - CHILDREN ================================================= */ _____ CHILD-CHILDWRAP{} /* ------------------------------------------------- CHILD - childwrap-nowrap ------------------------------------------------- */ .wz.cell.chwr-nw > .ci > .cfo > .cfi > .cc, .wz.cell.chwr-nw > .ci > .cfo > a > .cfi > .cc {flex-wrap:nowrap;} /* ------------------------------------------------- CHILD - childwrap-wrap NEW ------------------------------------------------- */ .wz.cell.chwr-wrap > .ci > .cfo > .cfi > .cc, .wz.cell.chwr-wrap > .ci > .cfo > a > .cfi > .cc {flex-wrap:wrap;} _____ CHILD-CHILDCOLS XXL{} /* ==================================================== MEDIA QUERY - XXL ==================================================== */ @media(min-width:942px) { .wz.cell.chcl-xxl-8 > .ci > .cfo > .cfi > .cc > .wz.cell {width:12.5%;} .wz.cell.chcl-xxl-7 > .ci > .cfo > .cfi > .cc > .wz.cell {width:14.285714%;} .wz.cell.chcl-xxl-6 > .ci > .cfo > .cfi > .cc > .wz.cell {width:16.666667%;} .wz.cell.chcl-xxl-5 > .ci > .cfo > .cfi > .cc > .wz.cell {width:20%;} .wz.cell.chcl-xxl-4 > .ci > .cfo > .cfi > .cc > .wz.cell {width:25%;} .wz.cell.chcl-xxl-3 > .ci > .cfo > .cfi > .cc > .wz.cell {width:33.333333%;} .wz.cell.chcl-xxl-2 > .ci > .cfo > .cfi > .cc > .wz.cell {width:50%;} .wz.cell.chcl-xxl-1 > .ci > .cfo > .cfi > .cc > .wz.cell {width:100%;} } /* ------------------------------------------------- CHILD - childdivider top ------------------------------------------------- */ .wz.cell.chdv-t-2 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo > .cfi, .wz.cell.chdv-t-2 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo > .cfi {border-top: 1px solid #999;} .wz.cell.chdv-t-3 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo > .cfi, .wz.cell.chdv-t-3 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo > .cfi {border-top: 2px solid #f1f1f1;} .wz.cell.chdv-t-4 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo > .cfi, .wz.cell.chdv-t-4 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo > .cfi {border-top: 1px dashed #999;} .wz.cell.chdv-t-5 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo > .cfi, .wz.cell.chdv-t-5 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo > .cfi {border-top: 2px dashed #999;} .wz.cell.chdv-t-6 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo > .cfi, .wz.cell.chdv-t-6 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo > .cfi {border-top: 2px dotted #999;} /* ------------------------------------------------- CHILD - childdivider bottom ------------------------------------------------- */ .wz.cell.chdv-t-2 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo > .cfi, .wz.cell.chdv-t-2 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo > .cfi {border-bottom: 1px solid #999;} .wz.cell.chdv-t-3 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo > .cfi, .wz.cell.chdv-t-3 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo > .cfi {border-bottom: 2px solid #f1f1f1;} .wz.cell.chdv-t-4 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo > .cfi, .wz.cell.chdv-t-4 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo > .cfi {border-bottom: 1px dashed #999;} .wz.cell.chdv-t-5 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo > .cfi, .wz.cell.chdv-t-5 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo > .cfi {border-bottom: 2px dashed #999;} .wz.cell.chdv-t-6 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo > .cfi, .wz.cell.chdv-t-6 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo > .cfi {border-bottom: 2px dotted #999;} _____ CELL{} /* ================================================= CELLS - CELL ================================================= */ _____ CELL-HIDE{} /* ------------------------------------------------- CELL - hide ------------------------------------------------- */ .wz.cell.hide {display:none;} /* ------------------------------------------------- CELL - scroll ------------------------------------------------- */ .wz.cell.clsc-y { overflow-y:auto; -webkit-overflow-scrolling:touch; } _____ CELL-GROW{} /* ------------------------------------------------- CELL - grow ------------------------------------------------- */ .wz.cell.clgr-0 {flex-grow:0;} .wz.cell.clgr-1 {flex-grow:1;} .wz.cell.clgr-2 {flex-grow:2;} .wz.cell.clgr-3 {flex-grow:3;} _____ CELL-CELLWIDTH XXS{} /* ==================================================== MEDIA QUERY - XXS ==================================================== */ @media (min-width:374px) { .wz.cell.clwd-10, .wz.cell.clwd-xxs-10 {width:10%;} .wz.cell.clwd-20, .wz.cell.clwd-xxs-20 {width:20%;} .wz.cell.clwd-25, .wz.cell.clwd-xxs-25 {width:25%;} .wz.cell.clwd-30, .wz.cell.clwd-xxs-30 {width:30%;} .wz.cell.clwd-33, .wz.cell.clwd-xxs-33 {width:33.333333%;} .wz.cell.clwd-40, .wz.cell.clwd-xxs-40 {width:40%;} .wz.cell.clwd-50, .wz.cell.clwd-xxs-50 {width:50%;} .wz.cell.clwd-60, .wz.cell.clwd-xxs-60 {width:60%;} .wz.cell.clwd-66, .wz.cell.clwd-xxs-66 {width:66.666665%;} .wz.cell.clwd-70, .wz.cell.clwd-xxs-70 {width:70%;} .wz.cell.clwd-75, .wz.cell.clwd-xxs-75 {width:75%;} .wz.cell.clwd-80, .wz.cell.clwd-xxs-80 {width:80%;} .wz.cell.clwd-90, .wz.cell.clwd-xxs-90 {width:90%;} .wz.cell.clwd-100, .wz.cell.clwd-xxs-100 {width:100%;} } _____ CELL-CELLWIDTH XS{} /* ==================================================== MEDIA QUERY - XS ==================================================== */ @media (min-width:374px) { .wz.cell.clwd-xs-10 {width:10%;} .wz.cell.clwd-xs-20 {width:20%;} .wz.cell.clwd-xs-25 {width:25%;} .wz.cell.clwd-xs-30 {width:30%;} .wz.cell.clwd-xs-33 {width:33.333333%;} .wz.cell.clwd-xs-40 {width:40%;} .wz.cell.clwd-xs-50 {width:50%;} .wz.cell.clwd-xs-60 {width:60%;} .wz.cell.clwd-xs-66 {width:66.666665%;} .wz.cell.clwd-xs-70 {width:70%;} .wz.cell.clwd-xs-75 {width:75%;} .wz.cell.clwd-xs-80 {width:80%;} .wz.cell.clwd-xs-90 {width:90%;} .wz.cell.clwd-xs-100 {width:100%;} } _____ CELL-CELLWIDTH SM{} /* ==================================================== MEDIA QUERY - SM ==================================================== */ @media (min-width:442px) { .wz.cell.clwd-sm-10 {width:10%;} .wz.cell.clwd-sm-20 {width:20%;} .wz.cell.clwd-sm-25 {width:25%;} .wz.cell.clwd-sm-30 {width:30%;} .wz.cell.clwd-sm-33 {width:33.333333%;} .wz.cell.clwd-sm-40 {width:40%;} .wz.cell.clwd-sm-50 {width:50%;} .wz.cell.clwd-sm-60 {width:60%;} .wz.cell.clwd-sm-66 {width:66.666665%;} .wz.cell.clwd-sm-70 {width:70%;} .wz.cell.clwd-sm-75 {width:75%;} .wz.cell.clwd-sm-80 {width:80%;} .wz.cell.clwd-sm-90 {width:90%;} .wz.cell.clwd-sm-100 {width:100%;} } _____ CELL-CELLWIDTH MD{} /* ==================================================== MEDIA QUERY - MD ==================================================== */ @media (min-width:527px) { .wz.cell.clwd-md-10 {width:10%;} .wz.cell.clwd-md-20 {width:20%;} .wz.cell.clwd-md-25 {width:25%;} .wz.cell.clwd-md-30 {width:30%;} .wz.cell.clwd-md-33 {width:33.333333%;} .wz.cell.clwd-md-40 {width:40%;} .wz.cell.clwd-md-50 {width:50%;} .wz.cell.clwd-md-60 {width:60%;} .wz.cell.clwd-md-66 {width:66.666665%;} .wz.cell.clwd-md-70 {width:70%;} .wz.cell.clwd-md-75 {width:75%;} .wz.cell.clwd-md-80 {width:80%;} .wz.cell.clwd-md-90 {width:90%;} .wz.cell.clwd-md-100 {width:100%;} } _____ CELL-CELLWIDTH LG{} /* ==================================================== MEDIA QUERY - LG ==================================================== */ @media (min-width:633px) { .wz.cell.clwd-lg-10 {width:10%;} .wz.cell.clwd-lg-20 {width:20%;} .wz.cell.clwd-lg-25 {width:25%;} .wz.cell.clwd-lg-30 {width:30%;} .wz.cell.clwd-lg-33 {width:33.333333%;} .wz.cell.clwd-lg-40 {width:40%;} .wz.cell.clwd-lg-50 {width:50%;} .wz.cell.clwd-lg-60 {width:60%;} .wz.cell.clwd-lg-66 {width:66.666665%;} .wz.cell.clwd-lg-70 {width:70%;} .wz.cell.clwd-lg-75 {width:75%;} .wz.cell.clwd-lg-80 {width:80%;} .wz.cell.clwd-lg-90 {width:90%;} .wz.cell.clwd-lg-100 {width:100%;} } _____ CELL-CELLWIDTH XL{} /* ==================================================== MEDIA QUERY - XL ==================================================== */ @media (min-width:767px) { .wz.cell.clwd-xl-10 {width:10%;} .wz.cell.clwd-xl-20 {width:20%;} .wz.cell.clwd-xl-25 {width:25%;} .wz.cell.clwd-xl-30 {width:30%;} .wz.cell.clwd-xl-33 {width:33.333333%;} .wz.cell.clwd-xl-40 {width:40%;} .wz.cell.clwd-xl-50 {width:50%;} .wz.cell.clwd-xl-60 {width:60%;} .wz.cell.clwd-xl-66 {width:66.666665%;} .wz.cell.clwd-xl-70 {width:70%;} .wz.cell.clwd-xl-75 {width:75%;} .wz.cell.clwd-xl-80 {width:80%;} .wz.cell.clwd-xl-90 {width:90%;} .wz.cell.clwd-xl-100 {width:100%;} } _____ CELL-CELLWIDTH XXL{} /* ==================================================== MEDIA QUERY - XXL ==================================================== */ @media(min-width:942px) { .wz.cell.clwd-xxl-10 {width:10%;} .wz.cell.clwd-xxl-20 {width:20%;} .wz.cell.clwd-xxl-25 {width:25%;} .wz.cell.clwd-xxl-30 {width:30%;} .wz.cell.clwd-xxl-33 {width:33.333333%;} .wz.cell.clwd-xxl-40 {width:40%;} .wz.cell.clwd-xxl-50 {width:50%;} .wz.cell.clwd-xxl-60 {width:60%;} .wz.cell.clwd-xxl-66 {width:66.666665%;} .wz.cell.clwd-xxl-70 {width:70%;} .wz.cell.clwd-xxl-75 {width:75%;} .wz.cell.clwd-xxl-80 {width:80%;} .wz.cell.clwd-xxl-90 {width:90%;} .wz.cell.clwd-xxl-100 {width:100%;} } _____ CELL-CELLDIVIDER{} /* ------------------------------------------------- CELL - celldivider ------------------------------------------------- */ .wz.cell.cldv-t > .ci > .cfo > .cfi, .wz.cell.cldv-t > .ci > a > .cfo > .cfi {border-top: 1px solid #ccc;} _____ CELL-CELLDIVIDER{} /* ------------------------------------------------- CELL - celldivider top ------------------------------------------------- */ .wz.cell.cldv-t-2 > .ci > .cfo > .cfi, .wz.cell.cldv-t-2 > .ci > a > .cfo > .cfi {border-top: 1px solid #999;} .wz.cell.cldv-t-3 > .ci > .cfo > .cfi, .wz.cell.cldv-t-3 > .ci > a > .cfo > .cfi {border-top: 1px solid #999;} .wz.cell.cldv-t-4 > .ci > .cfo > .cfi, .wz.cell.cldv-t-4 > .ci > a > .cfo > .cfi {border-top: 1px dashed #999;} .wz.cell.cldv-t-5 > .ci > .cfo > .cfi, .wz.cell.cldv-t-5 > .ci > a > .cfo > .cfi {border-top: 2px dashed #999;} .wz.cell.cldv-t-6 > .ci > .cfo > cfi, .wz.cell.cldv-t-6 > .ci > a > .cfo > .cfi {border-top: 2px dotted #999;} /* ------------------------------------------------- CELL - celldivider bottom ------------------------------------------------- */ .wz.cell.cldv-b-2 > .ci > .cfo > .cfi, .wz.cell.cldv-b-2 > .ci > a > .cfo > .cfi {border-bottom: 1px solid #000;} .wz.cell.cldv-b-3 > .ci > .cfo > .cfi, .wz.cell.cldv-b-3 > .ci > a > .cfo > .cfi {border-bottom: 1px solid #999;} .wz.cell.cldv-b-4 > .ci > .cfo > .cfi, .wz.cell.cldv-b-4 > .ci > a > .cfo > .cfi {border-bottom: 1px dashed #999;} .wz.cell.cldv-b-5 > .ci > .cfo > .cfi, .wz.cell.cldv-b-5 > .ci > a > .cfo > .cfi {border-bottom: 2px dashed #999;} .wz.cell.cldv-b-6 > .ci > .cfo > .cfi, .wz.cell.cldv-b-6 > .ci > a > .cfo > .cfi {border-bottom: 2px dotted #999;} _____ CELL-CELLSHOW_CELLHIDE XXS{} /* ==================================================== MEDIA QUERY - XXS ==================================================== */ .wz.cell.clsh-xxs {display:block;} .wz.cell.clhd-xxs {display:none;} .wz.cell { max-width:100%; } _____ CELL-CELLSHOW_CELLHIDE XS{} /* ==================================================== MEDIA QUERY - XS ==================================================== */ @media (min-width:374px) { .wz.cell.clsh-xs {display:block;} .wz.cell.clhd-xs {display:none;} } _____ CELL-CELLSHOW_CELLHIDE SM{} /* ==================================================== MEDIA QUERY - SM ==================================================== */ @media (min-width:442px) { .wz.cell.clsh-sm {display:block;} .wz.cell.clhd-sm {display:none;} } _____ CELL-CELLSHOW_CELLHIDE MD{} /* ==================================================== MEDIA QUERY - MD ==================================================== */ @media (min-width:527px) { .wz.cell.clsh-md {display:block;} .wz.cell.clhd-md {display:none;} } _____ CELL-CELLSHOW_CELLHIDE LG{} /* ==================================================== MEDIA QUERY - LG ==================================================== */ @media (min-width:633px) { .wz.cell.clsh-lg {display:block;} .wz.cell.clhd-lg {display:none;} } _____ CELL-CELLSHOW_CELLHIDE XL{} /* ==================================================== MEDIA QUERY - XL ==================================================== */ @media (min-width:767px) { .wz.cell.clsh-xl {display:block;} .wz.cell.clhd-xl {display:none;} } _____ CELL-CELLSHOW_CELLHIDE XXL{} /* ==================================================== MEDIA QUERY - XXL ==================================================== */ @media(min-width:942px) { .wz.cell.clsh-xxl {display:block;} .wz.cell.clhd-xxl {display:none;} } /* ==================================================== MEDIA QUERY - MAX ==================================================== */ @media (min-width:1020px) { } /* ==================================================== SPECIALS ==================================================== */ .wz.cell.wz-field > .ci > .cfo { width:auto; margin:0; } .ci, .cfo, .cfi { max-height:inherit; } .wz.cell.wz-fixed { position: fixed !important; top: 0; z-index: 10; box-shadow: 0 2px 6px 0px #777; } _____ DECLARATION{} _____ BASIC{} /* ================================================= CELLS - BASIC ================================================= */ /* ------------------------------------------------- BASIC - ci last child ??? ------------------------------------------------- */ .wz.cell > .ci > *:last-child {margin-bottom:0;} /* ------------------------------------------------- BASIC - cell-link ------------------------------------------------- */ .wz.cell > .ci > a { display:block; width:100%; text-decoration:none; } /* ------------------------------------------------- BASIC - cell-image ------------------------------------------------- */ .wz.cell img { width:100%; } _____ CHILD-CHILDWRAP{} /* ------------------------------------------------- CHILD - childwrap-nowrap ------------------------------------------------- */ .wz.cell.chwr-nw > .ci > .cfo > .cfi > .cc, .wz.cell.chwr-nw > .ci > .cfo > a > .cfi > .cc {flex-wrap:nowrap;} /* ------------------------------------------------- CHILD - childwrap-wrap DEPRECATED ------------------------------------------------- */ .wz.cell.chwr-wr > .ci > .cfo > .cfi > .cc, .wz.cell.chwr-wr > .ci > .cfo > a > .cfi > .cc {flex-wrap:wrap;} /* ------------------------------------------------- CHILD - childwrap-wrap NEW ------------------------------------------------- */ .wz.cell.chwr-wrap > .ci > .cfo > .cfi > .cc, .wz.cell.chwr-wrap > .ci > .cfo > a > .cfi > .cc {flex-wrap:wrap;} _____ CHILD-CHILDCOLS XXS{} /* ==================================================== MEDIA QUERY - XXS ==================================================== */ @media (min-width:374px) { .wz.cell.chcl-xxs-8 > .ci > .cfo > .cfi > .cc > .wz.cell {width:12.5%;} .wz.cell.chcl-xxs-7 > .ci > .cfo > .cfi > .cc > .wz.cell {width:14.285714%;} .wz.cell.chcl-xxs-6 > .ci > .cfo > .cfi > .cc > .wz.cell {width:16.666667%;} .wz.cell.chcl-xxs-5 > .ci > .cfo > .cfi > .cc > .wz.cell {width:20%;} .wz.cell.chcl-xxs-4 > .ci > .cfo > .cfi > .cc > .wz.cell {width:25%;} .wz.cell.chcl-xxs-3 > .ci > .cfo > .cfi > .cc > .wz.cell {width:33.333333%;} .wz.cell.chcl-xxs-2 > .ci > .cfo > .cfi > .cc > .wz.cell {width:50%;} .wz.cell.chcl-xxs-1 > .ci > .cfo > .cfi > .cc > .wz.cell {width:100%;} } _____ CHILD-CHILDCOLS XS{} /* ==================================================== MEDIA QUERY - XS ==================================================== */ @media (min-width:374px) { .wz.cell.chcl-xs-8 > .ci > .cfo > .cfi > .cc > .wz.cell {width:12.5%;} .wz.cell.chcl-xs-7 > .ci > .cfo > .cfi > .cc > .wz.cell {width:14.285714%;} .wz.cell.chcl-xs-6 > .ci > .cfo > .cfi > .cc > .wz.cell {width:16.666667%;} .wz.cell.chcl-xs-5 > .ci > .cfo > .cfi > .cc > .wz.cell {width:20%;} .wz.cell.chcl-xs-4 > .ci > .cfo > .cfi > .cc > .wz.cell {width:25%;} .wz.cell.chcl-xs-3 > .ci > .cfo > .cfi > .cc > .wz.cell {width:33.333333%;} .wz.cell.chcl-xs-2 > .ci > .cfo > .cfi > .cc > .wz.cell {width:50%;} .wz.cell.chcl-xs-1 > .ci > .cfo > .cfi > .cc > .wz.cell {width:100%;} } _____ CHILD-CHILDCOLS SM{} /* ==================================================== MEDIA QUERY - SM ==================================================== */ @media (min-width:442px) { .wz.cell.chcl-sm-8 > .ci > .cfo > .cfi > .cc > .wz.cell {width:12.5%;} .wz.cell.chcl-sm-7 > .ci > .cfo > .cfi > .cc > .wz.cell {width:14.285714%;} .wz.cell.chcl-sm-6 > .ci > .cfo > .cfi > .cc > .wz.cell {width:16.666667%;} .wz.cell.chcl-sm-5 > .ci > .cfo > .cfi > .cc > .wz.cell {width:20%;} .wz.cell.chcl-sm-4 > .ci > .cfo > .cfi > .cc > .wz.cell {width:25%;} .wz.cell.chcl-sm-3 > .ci > .cfo > .cfi > .cc > .wz.cell {width:33.333333%;} .wz.cell.chcl-sm-2 > .ci > .cfo > .cfi > .cc > .wz.cell {width:50%;} .wz.cell.chcl-sm-1 > .ci > .cfo > .cfi > .cc > .wz.cell {width:100%;} } _____ CHILD-CHILDCOLS MD{} /* ==================================================== MEDIA QUERY - MD ==================================================== */ @media (min-width:527px) { .wz.cell.chcl-md-8 > .ci > .cfo > .cfi > .cc > .wz.cell {width:12.5%;} .wz.cell.chcl-md-7 > .ci > .cfo > .cfi > .cc > .wz.cell {width:14.285714%;} .wz.cell.chcl-md-6 > .ci > .cfo > .cfi > .cc > .wz.cell {width:16.666667%;} .wz.cell.chcl-md-5 > .ci > .cfo > .cfi > .cc > .wz.cell {width:20%;} .wz.cell.chcl-md-4 > .ci > .cfo > .cfi > .cc > .wz.cell {width:25%;} .wz.cell.chcl-md-3 > .ci > .cfo > .cfi > .cc > .wz.cell {width:33.333333%;} .wz.cell.chcl-md-2 > .ci > .cfo > .cfi > .cc > .wz.cell {width:50%;} .wz.cell.chcl-md-1 > .ci > .cfo > .cfi > .cc > .wz.cell {width:100%;} } _____ CHILD-CHILDCOLS LG{} /* ==================================================== MEDIA QUERY - LG ==================================================== */ @media (min-width:633px) { .wz.cell.chcl-lg-8 > .ci > .cfo > .cfi > .cc > .wz.cell {width:12.5%;} .wz.cell.chcl-lg-7 > .ci > .cfo > .cfi > .cc > .wz.cell {width:14.285714%;} .wz.cell.chcl-lg-6 > .ci > .cfo > .cfi > .cc > .wz.cell {width:16.666667%;} .wz.cell.chcl-lg-5 > .ci > .cfo > .cfi > .cc > .wz.cell {width:20%;} .wz.cell.chcl-lg-4 > .ci > .cfo > .cfi > .cc > .wz.cell {width:25%;} .wz.cell.chcl-lg-3 > .ci > .cfo > .cfi > .cc > .wz.cell {width:33.333333%;} .wz.cell.chcl-lg-2 > .ci > .cfo > .cfi > .cc > .wz.cell {width:50%;} .wz.cell.chcl-lg-1 > .ci > .cfo > .cfi > .cc > .wz.cell {width:100%;} } _____ CHILD-CHILDCOLS XL{} /* ==================================================== MEDIA QUERY - XL ==================================================== */ @media (min-width:767px) { .wz.cell.chcl-xl-8 > .ci > .cfo > .cfi > .cc > .wz.cell {width:12.5%;} .wz.cell.chcl-xl-7 > .ci > .cfo > .cfi > .cc > .wz.cell {width:14.285714%;} .wz.cell.chcl-xl-6 > .ci > .cfo > .cfi > .cc > .wz.cell {width:16.666667%;} .wz.cell.chcl-xl-5 > .ci > .cfo > .cfi > .cc > .wz.cell {width:20%;} .wz.cell.chcl-xl-4 > .ci > .cfo > .cfi > .cc > .wz.cell {width:25%;} .wz.cell.chcl-xl-3 > .ci > .cfo > .cfi > .cc > .wz.cell {width:33.333333%;} .wz.cell.chcl-xl-2 > .ci > .cfo > .cfi > .cc > .wz.cell {width:50%;} .wz.cell.chcl-xl-1 > .ci > .cfo > .cfi > .cc > .wz.cell {width:100%;} } _____ CHILD-CHILDCOLS XXL{} /* ==================================================== MEDIA QUERY - XXL ==================================================== */ @media(min-width:942px) { .wz.cell.chcl-xxl-8 > .ci > .cfo > .cfi > .cc > .wz.cell {width:12.5%;} .wz.cell.chcl-xxl-7 > .ci > .cfo > .cfi > .cc > .wz.cell {width:14.285714%;} .wz.cell.chcl-xxl-6 > .ci > .cfo > .cfi > .cc > .wz.cell {width:16.666667%;} .wz.cell.chcl-xxl-5 > .ci > .cfo > .cfi > .cc > .wz.cell {width:20%;} .wz.cell.chcl-xxl-4 > .ci > .cfo > .cfi > .cc > .wz.cell {width:25%;} .wz.cell.chcl-xxl-3 > .ci > .cfo > .cfi > .cc > .wz.cell {width:33.333333%;} .wz.cell.chcl-xxl-2 > .ci > .cfo > .cfi > .cc > .wz.cell {width:50%;} .wz.cell.chcl-xxl-1 > .ci > .cfo > .cfi > .cc > .wz.cell {width:100%;} } _____ CHILD-CHILDALIGN{} /* ------------------------------------------------- CHILD - childalign-start ------------------------------------------------- */ .wz.cell.chal-start > .ci > .cfo > .cfi > .cc, .wz.cell.chal-start > .ci > .cfo > a > .cfi > .cc {justify-content:flex-start;} /* ------------------------------------------------- CHILD - childalign-center ------------------------------------------------- */ .wz.cell.chal-center > .ci > .cfo > .cfi > .cc, .wz.cell.chal-center > .ci > .cfo > a > .cfi > .cc {justify-content:center;} /* ------------------------------------------------- CHILD - childalign-end ------------------------------------------------- */ .wz.cell.chal-end > .ci > .cfo > .cfi > .cc, .wz.cell.chal-end > .ci > .cfo > a > .cfi > .cc {justify-content:flex-end;} /* ------------------------------------------------- CHILD - childalign-around ------------------------------------------------- */ .wz.cell.chal-around > .ci > .cfo > .cfi > .cc, .wz.cell.chal-around > .ci > .cfo > a > .cfi > .cc {justify-content:space-around;} /* ------------------------------------------------- CHILD - childalign-between ------------------------------------------------- */ .wz.cell.chal-between > .ci > .cfo > .cfi > .cc, .wz.cell.chal-between > .ci > .cfo > a > .cfi > .cc {justify-content:space-between;} /* ------------------------------------------------- CHILD - childalign-evenly ------------------------------------------------- */ .wz.cell.chal-evenly > .ci > .cfo > .cfi > .cc, .wz.cell.chal-evenly > .ci > .cfo > a > .cfi > .cc {justify-content:space-evenly;} _____ CHILD-GUTTER{} _____ CHILD-CHILDFRAME{} /* ------------------------------------------------- CHILD - childframe ------------------------------------------------- */ .wz.cell.chfr-1 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-1 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {box-shadow: 0 2px 6px 0px #777;} .wz.cell.chfr-2 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-2 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border: 1px solid #999;} .wz.cell.chfr-3 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-3 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border: 2px solid #f1f1f1;} .wz.cell.chfr-4 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-4 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border: 1px dashed #999;} .wz.cell.chfr-5 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-5 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border: 2px dashed #999;} .wz.cell.chfr-6 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-6 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border: 2px dotted #999;} /* ------------------------------------------------- CHILD - childframe top ------------------------------------------------- */ .wz.cell.chfr-t-2 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-t-2 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border-top: 1px solid #999;} .wz.cell.chfr-t-3 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-t-3 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border-top: 2px solid #f1f1f1;} .wz.cell.chfr-t-4 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-t-4 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border-top: 1px dashed #999;} .wz.cell.chfr-t-5 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-t-5 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border-top: 2px dashed #999;} .wz.cell.chfr-t-6 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-t-6 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border-top: 2px dotted #999;} /* ------------------------------------------------- CHILD - childframe bottom ------------------------------------------------- */ .wz.cell.chfr-b-2 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-b-2 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border-bottom: 1px solid #999;} .wz.cell.chfr-b-3 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-b-3 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border-bottom: 2px solid #f1f1f1;} .wz.cell.chfr-b-4 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-b-4 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border-bottom: 1px dashed #999;} .wz.cell.chfr-b-5 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-b-5 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border-bottom: 2px dashed #999;} .wz.cell.chfr-b-6 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-b-6 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border-bottom: 2px dotted #999;} /* ------------------------------------------------- CHILD - childframe left ------------------------------------------------- */ .wz.cell.chfr-l-2 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-l-2 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border-left: 1px solid #999;} .wz.cell.chfr-l-3 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-l-3 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border-left: 2px solid #f1f1f1;} .wz.cell.chfr-l-4 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-l-4 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border-left: 1px dashed #999;} .wz.cell.chfr-l-5 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-l-5 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border-left: 2px dashed #999;} .wz.cell.chfr-l-6 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-l-6 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border-left: 2px dotted #999;} /* ------------------------------------------------- CHILD - childframe right ------------------------------------------------- */ .wz.cell.chfr-r-2 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-r-2 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border-right: 1px solid #999;} .wz.cell.chfr-r-3 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-r-3 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border-right: 2px solid #f1f1f1;} .wz.cell.chfr-r-4 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-r-4 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border-right: 1px dashed #999;} .wz.cell.chfr-r-5 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-r-5 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border-right: 2px dashed #999;} .wz.cell.chfr-r-6 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo, .wz.cell.chfr-r-6 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo {border-right: 2px dotted #999;} /* ------------------------------------------------- CHILD - childdivider top ------------------------------------------------- */ .wz.cell.chdv-t-2 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo > .cfi, .wz.cell.chdv-t-2 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo > .cfi {border-top: 1px solid #999;} .wz.cell.chdv-t-3 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo > .cfi, .wz.cell.chdv-t-3 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo > .cfi {border-top: 2px solid #f1f1f1;} .wz.cell.chdv-t-4 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo > .cfi, .wz.cell.chdv-t-4 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo > .cfi {border-top: 1px dashed #999;} .wz.cell.chdv-t-5 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo > .cfi, .wz.cell.chdv-t-5 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo > .cfi {border-top: 2px dashed #999;} .wz.cell.chdv-t-6 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo > .cfi, .wz.cell.chdv-t-6 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo > .cfi {border-top: 2px dotted #999;} /* ------------------------------------------------- CHILD - childdivider bottom ------------------------------------------------- */ .wz.cell.chdv-t-2 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo > .cfi, .wz.cell.chdv-t-2 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo > .cfi {border-bottom: 1px solid #999;} .wz.cell.chdv-t-3 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo > .cfi, .wz.cell.chdv-t-3 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo > .cfi {border-bottom: 2px solid #f1f1f1;} .wz.cell.chdv-t-4 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo > .cfi, .wz.cell.chdv-t-4 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo > .cfi {border-bottom: 1px dashed #999;} .wz.cell.chdv-t-5 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo > .cfi, .wz.cell.chdv-t-5 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo > .cfi {border-bottom: 2px dashed #999;} .wz.cell.chdv-t-6 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > .cfo > .cfi, .wz.cell.chdv-t-6 > .ci > .cfo > .cfi > .cc > .wz.cell > .ci > a > .cfo > .cfi {border-bottom: 2px dotted #999;} _____ CELL{} /* ================================================= CELLS - CELL ================================================= */ _____ CELL-HIDE{} /* ------------------------------------------------- CELL - hide ------------------------------------------------- */ .wz.cell.hide {display:none;} /* ------------------------------------------------- CELL - scroll ------------------------------------------------- */ .wz.cell.clsc-y { overflow-y:auto; -webkit-overflow-scrolling:touch; } _____ CELL-GROW{} /* ------------------------------------------------- CELL - grow ------------------------------------------------- */ .wz.cell.clgr-0 {flex-grow:0;} .wz.cell.clgr-1 {flex-grow:1;} .wz.cell.clgr-2 {flex-grow:2;} .wz.cell.clgr-3 {flex-grow:3;} _____ CELL-CELLSTYLE-BACKEND{} /* ------------------------------------------------- */ /* style backend1 /* ------------------------------------------------- */ .wz.cell.clst-backend1 > .ci > .cfo { background-color:#fff; } /* ------------------------------------------------- */ /* style backend2 /* ------------------------------------------------- */ .wz.cell.clst-backend2 > .ci > .cfo { background-color:#fafafa; } _____ CELL-CELLSTYLE{} /* ------------------------------------------------- CELL - cellstyle-scheme1 ------------------------------------------------- */ .wz.cell.clst-1 > .ci > .cfo, .wz.cell.clst-1 > .ci > a > .cfo {background-color:#efece0;} /* ------------------------------------------------- CELL - cellstyle-scheme2 ------------------------------------------------- */ .wz.cell.clst-2 > .ci > .cfo, .wz.cell.clst-2 > .ci > a > .cfo { background-color: #fafafa; } /* ------------------------------------------------- CELL - cellstyle-scheme3 ------------------------------------------------- */ .wz.cell.clst-3 > .ci > .cfo, .wz.cell.clst-3 > .ci > a > .cfo {background-color:#c2bfb3;} /* ------------------------------------------------- CELL - cellstyle-scheme4 ------------------------------------------------- */ .wz.cell.clst-4 > .ci > .cfo, .wz.cell.clst-4 > .ci > a > .cfo {background-color:#777599;} /* ------------------------------------------------- CELL - cellstyle-scheme5 ------------------------------------------------- */ .wz.cell.clst-5 > .ci > .cfo, .wz.cell.clst-5 > .ci > a > .cfo {background-color:#505460;} /* ------------------------------------------------- CELL - cellstyle-scheme6 ------------------------------------------------- */ .wz.cell.clst-6 > .ci > .cfo, .wz.cell.clst-6 > .ci > a > .cfo {background-color:#c2bfb3;} _____ CELL-CELLWIDTH XXS{} /* ==================================================== MEDIA QUERY - XXS ==================================================== */ @media (min-width:374px) { .wz.cell.clwd-10, .wz.cell.clwd-xxs-10 {width:10%;} .wz.cell.clwd-20, .wz.cell.clwd-xxs-20 {width:20%;} .wz.cell.clwd-25, .wz.cell.clwd-xxs-25 {width:25%;} .wz.cell.clwd-30, .wz.cell.clwd-xxs-30 {width:30%;} .wz.cell.clwd-33, .wz.cell.clwd-xxs-33 {width:33.333333%;} .wz.cell.clwd-40, .wz.cell.clwd-xxs-40 {width:40%;} .wz.cell.clwd-50, .wz.cell.clwd-xxs-50 {width:50%;} .wz.cell.clwd-60, .wz.cell.clwd-xxs-60 {width:60%;} .wz.cell.clwd-66, .wz.cell.clwd-xxs-66 {width:66.666665%;} .wz.cell.clwd-70, .wz.cell.clwd-xxs-70 {width:70%;} .wz.cell.clwd-75, .wz.cell.clwd-xxs-75 {width:75%;} .wz.cell.clwd-80, .wz.cell.clwd-xxs-80 {width:80%;} .wz.cell.clwd-90, .wz.cell.clwd-xxs-90 {width:90%;} .wz.cell.clwd-100, .wz.cell.clwd-xxs-100 {width:100%;} } _____ CELL-CELLWIDTH XS{} /* ==================================================== MEDIA QUERY - XS ==================================================== */ @media (min-width:374px) { .wz.cell.clwd-xs-10 {width:10%;} .wz.cell.clwd-xs-20 {width:20%;} .wz.cell.clwd-xs-25 {width:25%;} .wz.cell.clwd-xs-30 {width:30%;} .wz.cell.clwd-xs-33 {width:33.333333%;} .wz.cell.clwd-xs-40 {width:40%;} .wz.cell.clwd-xs-50 {width:50%;} .wz.cell.clwd-xs-60 {width:60%;} .wz.cell.clwd-xs-66 {width:66.666665%;} .wz.cell.clwd-xs-70 {width:70%;} .wz.cell.clwd-xs-75 {width:75%;} .wz.cell.clwd-xs-80 {width:80%;} .wz.cell.clwd-xs-90 {width:90%;} .wz.cell.clwd-xs-100 {width:100%;} } _____ CELL-CELLWIDTH SM{} /* ==================================================== MEDIA QUERY - SM ==================================================== */ @media (min-width:442px) { .wz.cell.clwd-sm-10 {width:10%;} .wz.cell.clwd-sm-20 {width:20%;} .wz.cell.clwd-sm-25 {width:25%;} .wz.cell.clwd-sm-30 {width:30%;} .wz.cell.clwd-sm-33 {width:33.333333%;} .wz.cell.clwd-sm-40 {width:40%;} .wz.cell.clwd-sm-50 {width:50%;} .wz.cell.clwd-sm-60 {width:60%;} .wz.cell.clwd-sm-66 {width:66.666665%;} .wz.cell.clwd-sm-70 {width:70%;} .wz.cell.clwd-sm-75 {width:75%;} .wz.cell.clwd-sm-80 {width:80%;} .wz.cell.clwd-sm-90 {width:90%;} .wz.cell.clwd-sm-100 {width:100%;} } _____ CELL-CELLWIDTH MD{} /* ==================================================== MEDIA QUERY - MD ==================================================== */ @media (min-width:527px) { .wz.cell.clwd-md-10 {width:10%;} .wz.cell.clwd-md-20 {width:20%;} .wz.cell.clwd-md-25 {width:25%;} .wz.cell.clwd-md-30 {width:30%;} .wz.cell.clwd-md-33 {width:33.333333%;} .wz.cell.clwd-md-40 {width:40%;} .wz.cell.clwd-md-50 {width:50%;} .wz.cell.clwd-md-60 {width:60%;} .wz.cell.clwd-md-66 {width:66.666665%;} .wz.cell.clwd-md-70 {width:70%;} .wz.cell.clwd-md-75 {width:75%;} .wz.cell.clwd-md-80 {width:80%;} .wz.cell.clwd-md-90 {width:90%;} .wz.cell.clwd-md-100 {width:100%;} } _____ CELL-CELLWIDTH LG{} /* ==================================================== MEDIA QUERY - LG ==================================================== */ @media (min-width:633px) { .wz.cell.clwd-lg-10 {width:10%;} .wz.cell.clwd-lg-20 {width:20%;} .wz.cell.clwd-lg-25 {width:25%;} .wz.cell.clwd-lg-30 {width:30%;} .wz.cell.clwd-lg-33 {width:33.333333%;} .wz.cell.clwd-lg-40 {width:40%;} .wz.cell.clwd-lg-50 {width:50%;} .wz.cell.clwd-lg-60 {width:60%;} .wz.cell.clwd-lg-66 {width:66.666665%;} .wz.cell.clwd-lg-70 {width:70%;} .wz.cell.clwd-lg-75 {width:75%;} .wz.cell.clwd-lg-80 {width:80%;} .wz.cell.clwd-lg-90 {width:90%;} .wz.cell.clwd-lg-100 {width:100%;} } _____ CELL-CELLWIDTH XL{} /* ==================================================== MEDIA QUERY - XL ==================================================== */ @media (min-width:767px) { .wz.cell.clwd-xl-10 {width:10%;} .wz.cell.clwd-xl-20 {width:20%;} .wz.cell.clwd-xl-25 {width:25%;} .wz.cell.clwd-xl-30 {width:30%;} .wz.cell.clwd-xl-33 {width:33.333333%;} .wz.cell.clwd-xl-40 {width:40%;} .wz.cell.clwd-xl-50 {width:50%;} .wz.cell.clwd-xl-60 {width:60%;} .wz.cell.clwd-xl-66 {width:66.666665%;} .wz.cell.clwd-xl-70 {width:70%;} .wz.cell.clwd-xl-75 {width:75%;} .wz.cell.clwd-xl-80 {width:80%;} .wz.cell.clwd-xl-90 {width:90%;} .wz.cell.clwd-xl-100 {width:100%;} } _____ CELL-CELLWIDTH XXL{} /* ==================================================== MEDIA QUERY - XXL ==================================================== */ @media(min-width:942px) { .wz.cell.clwd-xxl-10 {width:10%;} .wz.cell.clwd-xxl-20 {width:20%;} .wz.cell.clwd-xxl-25 {width:25%;} .wz.cell.clwd-xxl-30 {width:30%;} .wz.cell.clwd-xxl-33 {width:33.333333%;} .wz.cell.clwd-xxl-40 {width:40%;} .wz.cell.clwd-xxl-50 {width:50%;} .wz.cell.clwd-xxl-60 {width:60%;} .wz.cell.clwd-xxl-66 {width:66.666665%;} .wz.cell.clwd-xxl-70 {width:70%;} .wz.cell.clwd-xxl-75 {width:75%;} .wz.cell.clwd-xxl-80 {width:80%;} .wz.cell.clwd-xxl-90 {width:90%;} .wz.cell.clwd-xxl-100 {width:100%;} } _____ CELL-CELLMARGIN{} /* ------------------------------------------------- CELL - cellmargin-xxs / cellmargin-top-xxs ------------------------------------------------- */ .wz.cell.clmr-xxs > .ci, .wz.cell.clmr-t-xxs > .ci {padding-top: calc(3px + (6 - 3) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellmargin-xxs / cellmargin-bottom-xxs ------------------------------------------------- */ .wz.cell.clmr-xxs > .ci, .wz.cell.clmr-b-xxs > .ci {padding-bottom: calc(3px + (6 - 3) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellmargin-xxs / cellmargin-side-xxs ------------------------------------------------- */ .wz.cell.clmr-xxs > .ci, .wz.cell.clmr-s-xxs > .ci {padding-left: calc(3px + (6 - 3) * ((100vw - 320px) / (1200 - 320)));padding-right: calc(3px + (6 - 3) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellmargin-xs / cellmargin-top-xs ------------------------------------------------- */ .wz.cell.clmr-xs > .ci, .wz.cell.clmr-t-xs > .ci {padding-top: calc(6px + (12 - 6) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellmargin-xs / cellmargin-bottom-xs ------------------------------------------------- */ .wz.cell.clmr-xs > .ci, .wz.cell.clmr-b-xs > .ci {padding-bottom: calc(6px + (12 - 6) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellmargin-xs / cellmargin-side-xs ------------------------------------------------- */ .wz.cell.clmr-xs > .ci, .wz.cell.clmr-s-xs > .ci {padding-left: calc(6px + (12 - 6) * ((100vw - 320px) / (1200 - 320)));padding-right: calc(6px + (12 - 6) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellmargin-sm / cellmargin-top-sm ------------------------------------------------- */ .wz.cell.clmr-sm > .ci, .wz.cell.clmr-t-sm > .ci {padding-top: calc(9px + (18 - 9) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellmargin-sm / cellmargin-bottom-sm ------------------------------------------------- */ .wz.cell.clmr-sm > .ci, .wz.cell.clmr-b-sm > .ci {padding-bottom: calc(9px + (18 - 9) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellmargin-sm / cellmargin-side-sm ------------------------------------------------- */ .wz.cell.clmr-sm > .ci, .wz.cell.clmr-s-sm > .ci {padding-left: calc(9px + (18 - 9) * ((100vw - 320px) / (1200 - 320)));padding-right: calc(9px + (18 - 9) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellmargin-md / cellmargin-top-md ------------------------------------------------- */ .wz.cell.clmr-md > .ci, .wz.cell.clmr-t-md > .ci {padding-top: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellmargin-md / cellmargin-bottom-md ------------------------------------------------- */ .wz.cell.clmr-md > .ci, .wz.cell.clmr-b-md > .ci {padding-bottom: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellmargin-md / cellmargin-side-md ------------------------------------------------- */ .wz.cell.clmr-md > .ci, .wz.cell.clmr-s-md > .ci {padding-left: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320)));padding-right: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellmargin-lg / cellmargin-top-lg ------------------------------------------------- */ .wz.cell.clmr-lg > .ci, .wz.cell.clmr-t-lg > .ci {padding-top: calc(15px + (30 - 15) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellmargin-lg / cellmargin-bottom-lg ------------------------------------------------- */ .wz.cell.clmr-lg > .ci, .wz.cell.clmr-b-lg > .ci {padding-bottom: calc(15px + (30 - 15) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellmargin-lg / cellmargin-side-lg ------------------------------------------------- */ .wz.cell.clmr-lg > .ci, .wz.cell.clmr-s-lg > .ci {padding-left: calc(15px + (30 - 15) * ((100vw - 320px) / (1200 - 320)));padding-right: calc(15px + (30 - 15) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellmargin-xl / cellmargin-top-xl ------------------------------------------------- */ .wz.cell.clmr-xl > .ci, .wz.cell.clmr-t-xl > .ci {padding-top: calc(18px + (36 - 18) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellmargin-xl / cellmargin-bottom-xl ------------------------------------------------- */ .wz.cell.clmr-xl > .ci, .wz.cell.clmr-b-xl > .ci {padding-bottom: calc(18px + (36 - 18) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellmargin-xl / cellmargin-side-xl ------------------------------------------------- */ .wz.cell.clmr-xl > .ci, .wz.cell.clmr-s-xl > .ci {padding-left: calc(18px + (36 - 18) * ((100vw - 320px) / (1200 - 320)));padding-right: calc(18px + (36 - 18) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellmargin-xxl / cellmargin-top-xxl ------------------------------------------------- */ .wz.cell.clmr-xxl > .ci, .wz.cell.clmr-t-xxl > .ci {padding-top: calc(21px + (42 - 21) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellmargin-xxl / cellmargin-bottom-xxl ------------------------------------------------- */ .wz.cell.clmr-xxl > .ci, .wz.cell.clmr-b-xxl > .ci {padding-bottom: calc(21px + (42 - 21) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellmargin-xxl / cellmargin-side-xxl ------------------------------------------------- */ .wz.cell.clmr-xxl > .ci, .wz.cell.clmr-s-xxl > .ci {padding-left: calc(21px + (42 - 21) * ((100vw - 320px) / (1200 - 320)));padding-right: calc(21px + (42 - 21) * ((100vw - 320px) / (1200 - 320)));} _____ CELL-CELLPADDING{} /* xxs 3/ 6 xs 5/10 3/ 6 sm 8/16 6/12 md 12/24 10/20 lg 18/36 15/30 xl 24/48 21/42 xxl 30/60 */ /* ------------------------------------------------- CELL - cellpadding-xxs / cellpadding-top-xxs ------------------------------------------------- */ .wz.cell.clpd-xxs > .ci > .cfo > .cfi, .wz.cell.clpd-xxs > .ci > a > .cfo > .cfi, .wz.cell.clpd-t-xxs > .ci > .cfo > .cfi, .wz.cell.clpd-t-xxs > .ci > a > .cfo > .cfi {padding-top: calc(3px + (6 - 3) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-xxs / cellpadding-bottom-xxs ------------------------------------------------- */ .wz.cell.clpd-xxs > .ci > .cfo > .cfi, .wz.cell.clpd-xxs > .ci > a > .cfo > .cfi, .wz.cell.clpd-b-xxs > .ci > .cfo > .cfi, .wz.cell.clpd-b-xxs > .ci > a > .cfo > .cfi {padding-bottom: calc(3px + (6 - 3) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-xxs / cellpadding-left-xxs ------------------------------------------------- */ .wz.cell.clpd-xxs > .ci > .cfo, .wz.cell.clpd-xxs > .ci > a > .cfo, .wz.cell.clpd-l-xxs > .ci > .cfo, .wz.cell.clpd-l-xxs > .ci > a > .cfo, .wz.cell.clpd-s-xxs > .ci > .cfo, .wz.cell.clpd-s-xxs > .ci > a > .cfo {padding-left: calc(3px + (6 - 3) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-xxs / cellpadding-right-xxs ------------------------------------------------- */ .wz.cell.clpd-xxs > .ci > .cfo, .wz.cell.clpd-xxs > .ci > a > .cfo, .wz.cell.clpd-r-xxs > .ci > .cfo, .wz.cell.clpd-r-xxs > .ci > a > .cfo, .wz.cell.clpd-s-xxs > .ci > .cfo, .wz.cell.clpd-s-xxs > .ci > a > .cfo {padding-right: calc(5px + (10 - 5) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-xs / cellpadding-top-xs ------------------------------------------------- */ .wz.cell.clpd-xs > .ci > .cfo > .cfi, .wz.cell.clpd-xs > .ci > a > .cfo > .cfi, .wz.cell.clpd-t-xs > .ci > .cfo > .cfi, .wz.cell.clpd-t-xs > .ci > a > .cfo > .cfi {padding-top: calc(5px + (10 - 5) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-xs / cellpadding-bottom-xs ------------------------------------------------- */ .wz.cell.clpd-xs > .ci > .cfo > .cfi, .wz.cell.clpd-xs > .ci > a > .cfo > .cfi, .wz.cell.clpd-b-xs > .ci > .cfo > .cfi, .wz.cell.clpd-b-xs > .ci > a > .cfo > .cfi {padding-bottom: calc(5px + (10 - 5) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-xs / cellpadding-left-xs ------------------------------------------------- */ .wz.cell.clpd-xs > .ci > .cfo, .wz.cell.clpd-xs > .ci > a > .cfo, .wz.cell.clpd-l-xs > .ci > .cfo, .wz.cell.clpd-l-xs > .ci > a > .cfo, .wz.cell.clpd-s-xs > .ci > .cfo, .wz.cell.clpd-s-xs > .ci > a > .cfo {padding-left: calc(5px + (10 - 5) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-xs / cellpadding-right-xs ------------------------------------------------- */ .wz.cell.clpd-xs > .ci > .cfo, .wz.cell.clpd-xs > .ci > a > .cfo, .wz.cell.clpd-r-xs > .ci > .cfo, .wz.cell.clpd-r-xs > .ci > a > .cfo, .wz.cell.clpd-s-xs > .ci > .cfo, .wz.cell.clpd-s-xs > .ci > a > .cfo {padding-right: calc(5px + (10 - 5) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-sm / cellpadding-top-sm ------------------------------------------------- */ .wz.cell.clpd-sm > .ci > .cfo > .cfi, .wz.cell.clpd-sm > .ci > a > .cfo > .cfi, .wz.cell.clpd-t-sm > .ci > .cfo > .cfi, .wz.cell.clpd-t-sm > .ci > a > .cfo > .cfi {padding-top: calc(8px + (16 - 8) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-sm / cellpadding-bottom-sm ------------------------------------------------- */ .wz.cell.clpd-sm > .ci > .cfo > .cfi, .wz.cell.clpd-sm > .ci > a > .cfo > .cfi, .wz.cell.clpd-b-sm > .ci > .cfo > .cfi, .wz.cell.clpd-b-sm > .ci > a > .cfo > .cfi {padding-bottom: calc(8px + (16 - 8) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-sm / cellpadding-left-sm ------------------------------------------------- */ .wz.cell.clpd-sm > .ci > .cfo, .wz.cell.clpd-sm > .ci > a > .cfo, .wz.cell.clpd-l-sm > .ci > .cfo, .wz.cell.clpd-l-sm > .ci > a > .cfo, .wz.cell.clpd-s-sm > .ci > .cfo, .wz.cell.clpd-s-sm > .ci > a > .cfo {padding-left: calc(8px + (16 - 8) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-sm / cellpadding-right-sm ------------------------------------------------- */ .wz.cell.clpd-sm > .ci > .cfo, .wz.cell.clpd-sm > .ci > a > .cfo, .wz.cell.clpd-r-sm > .ci > .cfo, .wz.cell.clpd-r-sm > .ci > a > .cfo, .wz.cell.clpd-s-sm > .ci > .cfo, .wz.cell.clpd-s-sm > .ci > a > .cfo {padding-right: calc(8px + (16 - 8) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-md / cellpadding-top-md ------------------------------------------------- */ .wz.cell.clpd-md > .ci > .cfo > .cfi, .wz.cell.clpd-md > .ci > a > .cfo > .cfi, .wz.cell.clpd-t-md > .ci > .cfo > .cfi, .wz.cell.clpd-t-md > .ci > a > .cfo > .cfi {padding-top: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-md / cellpadding-bottom-md ------------------------------------------------- */ .wz.cell.clpd-md > .ci > .cfo > .cfi, .wz.cell.clpd-md > .ci > a > .cfo > .cfi, .wz.cell.clpd-b-md > .ci > .cfo > .cfi, .wz.cell.clpd-b-md > .ci > a > .cfo > .cfi {padding-bottom: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-md / cellpadding-left-md ------------------------------------------------- */ .wz.cell.clpd-md > .ci > .cfo, .wz.cell.clpd-md > .ci > a > .cfo, .wz.cell.clpd-l-md > .ci > .cfo, .wz.cell.clpd-l-md > .ci > a > .cfo, .wz.cell.clpd-s-md > .ci > .cfo, .wz.cell.clpd-s-md > .ci > a > .cfo {padding-left: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-md / cellpadding-right-md ------------------------------------------------- */ .wz.cell.clpd-md > .ci > .cfo, .wz.cell.clpd-md > .ci > a > .cfo, .wz.cell.clpd-r-md > .ci > .cfo, .wz.cell.clpd-r-md > .ci > a > .cfo, .wz.cell.clpd-s-md > .ci > .cfo, .wz.cell.clpd-s-md > .ci > a > .cfo {padding-right: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-lg / cellpadding-top-lg ------------------------------------------------- */ .wz.cell.clpd-lg > .ci > .cfo > .cfi, .wz.cell.clpd-lg > .ci > a > .cfo > .cfi, .wz.cell.clpd-t-lg > .ci > .cfo > .cfi, .wz.cell.clpd-t-lg > .ci > a > .cfo > .cfi {padding-top: calc(18px + (36 - 18) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-lg / cellpadding-bottom-lg ------------------------------------------------- */ .wz.cell.clpd-lg > .ci > .cfo > .cfi, .wz.cell.clpd-lg > .ci > a > .cfo > .cfi, .wz.cell.clpd-b-lg > .ci > .cfo > .cfi, .wz.cell.clpd-b-lg > .ci > a > .cfo > .cfi {padding-bottom: calc(18px + (36 - 18) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-lg / cellpadding-left-lg ------------------------------------------------- */ .wz.cell.clpd-lg > .ci > .cfo, .wz.cell.clpd-lg > .ci > a > .cfo, .wz.cell.clpd-l-lg > .ci > .cfo, .wz.cell.clpd-l-lg > .ci > a > .cfo, .wz.cell.clpd-s-lg > .ci > .cfo, .wz.cell.clpd-s-lg > .ci > a > .cfo {padding-left: calc(18px + (36 - 18) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-lg / cellpadding-right-lg ------------------------------------------------- */ .wz.cell.clpd-lg > .ci > .cfo, .wz.cell.clpd-lg > .ci > a > .cfo, .wz.cell.clpd-r-lg > .ci > .cfo, .wz.cell.clpd-r-lg > .ci > a > .cfo, .wz.cell.clpd-s-lg > .ci > .cfo, .wz.cell.clpd-s-lg > .ci > a > .cfo {padding-right: calc(18px + (36 - 18) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-xl / cellpadding-top-xl ------------------------------------------------- */ .wz.cell.clpd-xl > .ci > .cfo > .cfi, .wz.cell.clpd-xl > .ci > a > .cfo > .cfi, .wz.cell.clpd-t-xl > .ci > .cfo > .cfi, .wz.cell.clpd-t-xl > .ci > a > .cfo > .cfi {padding-top: calc(24px + (48 - 24) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-xl / cellpadding-bottom-xl ------------------------------------------------- */ .wz.cell.clpd-xl > .ci > .cfo > .cfi, .wz.cell.clpd-xl > .ci > a > .cfo > .cfi, .wz.cell.clpd-b-xl > .ci > .cfo > .cfi, .wz.cell.clpd-b-xl > .ci > a > .cfo > .cfi {padding-bottom: calc(24px + (48 - 24) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-xl / cellpadding-left-xl ------------------------------------------------- */ .wz.cell.clpd-xl > .ci > .cfo, .wz.cell.clpd-xl > .ci > a > .cfo, .wz.cell.clpd-l-xl > .ci > .cfo, .wz.cell.clpd-l-xl > .ci > a > .cfo, .wz.cell.clpd-s-xl > .ci > .cfo, .wz.cell.clpd-s-xl > .ci > a > .cfo {padding-left: calc(24px + (48 - 24) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-xl / cellpadding-right-xl ------------------------------------------------- */ .wz.cell.clpd-xl > .ci > .cfo, .wz.cell.clpd-xl > .ci > a > .cfo, .wz.cell.clpd-r-xl > .ci > .cfo, .wz.cell.clpd-r-xl > .ci > a > .cfo, .wz.cell.clpd-s-xl > .ci > .cfo, .wz.cell.clpd-s-xl > .ci > a > .cfo {padding-right: calc(24px + (48 - 24) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-xxl / cellpadding-top-xxl ------------------------------------------------- */ .wz.cell.clpd-xxl > .ci > .cfo > .cfi, .wz.cell.clpd-xxl > .ci > a > .cfo > .cfi, .wz.cell.clpd-t-xxl > .ci > .cfo > .cfi, .wz.cell.clpd-t-xxl > .ci > a > .cfo > .cfi {padding-top: calc(30px + (60 - 30) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-xxl / cellpadding-bottom-xxl ------------------------------------------------- */ .wz.cell.clpd-xxl > .ci > .cfo > .cfi, .wz.cell.clpd-xxl > .ci > a > .cfo > .cfi, .wz.cell.clpd-b-xxl > .ci > .cfo > .cfi, .wz.cell.clpd-b-xxl > .ci > a > .cfo > .cfi {padding-bottom: calc(30px + (60 - 30) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-xxl / cellpadding-left-xxl ------------------------------------------------- */ .wz.cell.clpd-xxl > .ci > .cfo, .wz.cell.clpd-xxl > .ci > a > .cfo, .wz.cell.clpd-l-xxl > .ci > .cfo, .wz.cell.clpd-l-xxl > .ci > a > .cfo, .wz.cell.clpd-s-xxl > .ci > .cfo, .wz.cell.clpd-s-xxl > .ci > a > .cfo {padding-left: calc(30px + (60 - 30) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- CELL - cellpadding-xxl / cellpadding-right-xxl ------------------------------------------------- */ .wz.cell.clpd-xxl > .ci > .cfo, .wz.cell.clpd-xxl > .ci > a > .cfo, .wz.cell.clpd-r-xxl > .ci > .cfo, .wz.cell.clpd-r-xxl > .ci > a > .cfo, .wz.cell.clpd-s-xxl > .ci > .cfo, .wz.cell.clpd-s-xxl > .ci > a > .cfo {padding-right: calc(30px + (60 - 30) * ((100vw - 320px) / (1200 - 320)));} _____ CELL-CELLFRAME{} /* ------------------------------------------------- CELL - cellframe ------------------------------------------------- */ .wz.cell.clfr-1 > .ci > .cfo, .wz.cell.clfr-1 > .ci > a > .cfo {box-shadow: 0 2px 4px 0px #777;} .wz.cell.clfr-2 > .ci > .cfo, .wz.cell.clfr-2 > .ci > a > .cfo {border: 1px solid #ccc;} .wz.cell.clfr-3 > .ci > .cfo, .wz.cell.clfr-3 > .ci > a > .cfo {border: 2px solid #f1f1f1;} .wz.cell.clfr-4 > .ci > .cfo, .wz.cell.clfr-4 > .ci > a > .cfo {border: 1px dashed #999;} .wz.cell.clfr-5 > .ci > .cfo, .wz.cell.clfr-5 > .ci > a > .cfo {border: 2px dashed #999;} .wz.cell.clfr-6 > .ci > .cfo, .wz.cell.clfr-6 > .ci > a > .cfo {border: 2px dotted #999;} /* ------------------------------------------------- CELL - cellframe top ------------------------------------------------- */ .wz.cell.clfr-frame-1-0 > .ci > .cfo, .wz.cell.clfr-frame-1-0 > .ci > a > .cfo {border-top: 1px solid #999;} .wz.cell.clfr-t-2 > .ci > .cfo, .wz.cell.clfr-t-2 > .ci > a > .cfo {border-top: 1px solid #999;} .wz.cell.clfr-t-3 > .ci > .cfo, .wz.cell.clfr-t-3 > .ci > a > .cfo {border-top: 2px solid #f1f1f1;} .wz.cell.clfr-t-4 > .ci > .cfo, .wz.cell.clfr-t-4 > .ci > a > .cfo {border-top: 1px dashed #999;} .wz.cell.clfr-t-5 > .ci > .cfo, .wz.cell.clfr-t-5 > .ci > a > .cfo {border-top: 2px dashed #999;} .wz.cell.clfr-t-6 > .ci > .cfo, .wz.cell.clfr-t-6 > .ci > a > .cfo {border-top: 2px dotted #999;} /* ------------------------------------------------- CELL - cellframe bottom ------------------------------------------------- */ .wz.cell.clfr-b-2 > .ci > .cfo, .wz.cell.clfr-b-2 > .ci > a > .cfo {border-bottom: 1px solid #999;} .wz.cell.clfr-b-3 > .ci > .cfo, .wz.cell.clfr-b-3 > .ci > a > .cfo {border-bottom: 2px solid #f1f1f1;} .wz.cell.clfr-b-4 > .ci > .cfo, .wz.cell.clfr-b-4 > .ci > a > .cfo {border-bottom: 1px dashed #999;} .wz.cell.clfr-b-5 > .ci > .cfo, .wz.cell.clfr-b-5 > .ci > a > .cfo {border-bottom: 2px dashed #999;} .wz.cell.clfr-b-6 > .ci > .cfo, .wz.cell.clfr-b-6 > .ci > a > .cfo {border-bottom: 2px dotted #999;} /* ------------------------------------------------- CELL - cellframe left ------------------------------------------------- */ .wz.cell.clfr-l-2 > .ci > .cfo, .wz.cell.clfr-l-2 > .ci > a > .cfo {border-left: 1px solid #999;} .wz.cell.clfr-l-3 > .ci > .cfo, .wz.cell.clfr-l-3 > .ci > a > .cfo {border-left: 2px solid #f1f1f1;} .wz.cell.clfr-l-4 > .ci > .cfo, .wz.cell.clfr-l-4 > .ci > a > .cfo {border-left: 1px dashed #999;} .wz.cell.clfr-l-5 > .ci > .cfo, .wz.cell.clfr-l-5 > .ci > a > .cfo {border-left: 2px dashed #999;} .wz.cell.clfr-l-6 > .ci > .cfo, .wz.cell.clfr-l-6 > .ci > a > .cfo {border-left: 2px dotted #999;} /* ------------------------------------------------- CELL - cellframe right ------------------------------------------------- */ .wz.cell.clfr-r-2 > .ci > .cfo, .wz.cell.clfr-r-2 > .ci > a > .cfo {border-right: 1px solid #999;} .wz.cell.clfr-r-3 > .ci > .cfo, .wz.cell.clfr-r-3 > .ci > a > .cfo {border-right: 2px solid #f1f1f1;} .wz.cell.clfr-r-4 > .ci > .cfo, .wz.cell.clfr-r-4 > .ci > a > .cfo {border-right: 1px dashed #999;} .wz.cell.clfr-r-5 > .ci > .cfo, .wz.cell.clfr-r-5 > .ci > a > .cfo {border-right: 2px dashed #999;} .wz.cell.clfr-r-6 > .ci > .cfo, .wz.cell.clfr-r-6 > .ci > a > .cfo {border-right: 2px dotted #999;} _____ CELL-CELLDIVIDER{} /* ------------------------------------------------- CELL - celldivider top ------------------------------------------------- */ .wz.cell.cldv-t-2 > .ci > .cfo > .cfi, .wz.cell.cldv-t-2 > .ci > a > .cfo > .cfi {border-top: 1px solid #999;} .wz.cell.cldv-t-3 > .ci > .cfo > .cfi, .wz.cell.cldv-t-3 > .ci > a > .cfo > .cfi {border-top: 1px solid #999;} .wz.cell.cldv-t-4 > .ci > .cfo > .cfi, .wz.cell.cldv-t-4 > .ci > a > .cfo > .cfi {border-top: 1px dashed #999;} .wz.cell.cldv-t-5 > .ci > .cfo > .cfi, .wz.cell.cldv-t-5 > .ci > a > .cfo > .cfi {border-top: 2px dashed #999;} .wz.cell.cldv-t-6 > .ci > .cfo > cfi, .wz.cell.cldv-t-6 > .ci > a > .cfo > .cfi {border-top: 2px dotted #999;} /* ------------------------------------------------- CELL - celldivider bottom ------------------------------------------------- */ .wz.cell.cldv-b-2 > .ci > .cfo > .cfi, .wz.cell.cldv-b-2 > .ci > a > .cfo > .cfi {border-bottom: 1px solid #000;} .wz.cell.cldv-b-3 > .ci > .cfo > .cfi, .wz.cell.cldv-b-3 > .ci > a > .cfo > .cfi {border-bottom: 1px solid #999;} .wz.cell.cldv-b-4 > .ci > .cfo > .cfi, .wz.cell.cldv-b-4 > .ci > a > .cfo > .cfi {border-bottom: 1px dashed #999;} .wz.cell.cldv-b-5 > .ci > .cfo > .cfi, .wz.cell.cldv-b-5 > .ci > a > .cfo > .cfi {border-bottom: 2px dashed #999;} .wz.cell.cldv-b-6 > .ci > .cfo > .cfi, .wz.cell.cldv-b-6 > .ci > a > .cfo > .cfi {border-bottom: 2px dotted #999;} _____ CELL-CELLSHOW_CELLHIDE XXS{} /* ==================================================== MEDIA QUERY - XXS ==================================================== */ .wz.cell.clsh-xxs {display:block;} .wz.cell.clhd-xxs {display:none;} .wz.cell { max-width:100%; } _____ CELL-CELLSHOW_CELLHIDE XS{} /* ==================================================== MEDIA QUERY - XS ==================================================== */ @media (min-width:374px) { .wz.cell.clsh-xs {display:block;} .wz.cell.clhd-xs {display:none;} } _____ CELL-CELLSHOW_CELLHIDE SM{} /* ==================================================== MEDIA QUERY - SM ==================================================== */ @media (min-width:442px) { .wz.cell.clsh-sm {display:block;} .wz.cell.clhd-sm {display:none;} } _____ CELL-CELLSHOW_CELLHIDE MD{} /* ==================================================== MEDIA QUERY - MD ==================================================== */ @media (min-width:527px) { .wz.cell.clsh-md {display:block;} .wz.cell.clhd-md {display:none;} } _____ CELL-CELLSHOW_CELLHIDE LG{} /* ==================================================== MEDIA QUERY - LG ==================================================== */ @media (min-width:633px) { .wz.cell.clsh-lg {display:block;} .wz.cell.clhd-lg {display:none;} } _____ CELL-CELLSHOW_CELLHIDE XL{} /* ==================================================== MEDIA QUERY - XL ==================================================== */ @media (min-width:767px) { .wz.cell.clsh-xl {display:block;} .wz.cell.clhd-xl {display:none;} } _____ CELL-CELLSHOW_CELLHIDE XXL{} /* ==================================================== MEDIA QUERY - XXL ==================================================== */ @media(min-width:942px) { .wz.cell.clsh-xxl {display:block;} .wz.cell.clhd-xxl {display:none;} } /* ------------------------------------------------- */ /* cell styling /* ------------------------------------------------- */ --- CELL_STYLING_scheme1{} /* ------------------------------------------------- */ /* style backend1 /* ------------------------------------------------- */ /* ------------------------------------------------- */ /* style scheme1 /* ------------------------------------------------- */ .cellstyle-scheme1 h1 { font-family: 'Junge', serif; font-weight:400; color:#bc695b; } .cellstyle-scheme1 h2 { font-family: 'Junge', serif; font-weight:400; color:#4F5359; } .cellstyle-scheme1 h3 { font-family: 'Junge', serif; font-weight:400; color:#4F5359; } .cellstyle-scheme1 h5 { font-family: 'Junge', serif; font-weight:400; color:#4F5359; } .cellstyle-scheme1 p, .cellstyle-scheme1 li { color:#4F5359; } .cellstyle-scheme1 a { color:#505460; text-decoration:none; } .cellstyle-scheme1 a:hover { color:#82858e; } /* ------------------------------------------------- */ /* style scheme2 /* ------------------------------------------------- */ --- CELL_STYLING_scheme2{} .cellstyle-scheme2 h1 { font-family: 'Junge', serif; font-weight:400; color:#bc695b; } .cellstyle-scheme2 h2 { font-family: 'Junge', serif; font-weight:400; color:#4F5359; } .cellstyle-scheme2 h3 { font-family: 'Junge', serif; font-weight:400; color:#4F5359; } .cellstyle-scheme2 h5 { font-family: 'Junge', serif; font-weight:400; color:#4F5359; } .cellstyle-scheme2 p, .cellstyle-scheme2 li { color:#4F5359; } /* ------------------------------------------------- */ /* style medium1 /* ------------------------------------------------- */ --- CELL_STYLING_medium1{} .cellstyle-medium1 p, .cellstyle-medium1 li { color:#505460; } /* ------------------------------------------------- */ /* style medium2 /* ------------------------------------------------- */ --- CELL_STYLING_medium2{} .cellstyle-medium2 a { color:#efece0; } /* ------------------------------------------------- */ /* style dark1 /* ------------------------------------------------- */ --- CELL_STYLING_dark1{} .cellstyle-dark1 h3 { font-family: 'Junge', serif; font-weight:400; color:#2D3041; color:#bc695b; } .cellstyle-dark1 p, .cellstyle-dark1 li { color:#e6e6e6; } .cellstyle-dark1 a { color:#e6e6e6; } .cellstyle-dark1 a:hover { color:#c6c6c6; text-decoration: none; } /* ------------------------------------------------- */ /* style dark2 /* ------------------------------------------------- */ --- CELL_STYLING_dark2{} .cellstyle-dark2 h3 { font-family: 'Handlee', cursive; font-family: 'Crimson Text', serif; font-weight:400; color:#bd6a5d; } .cellstyle-dark2 p, .cellstyle-dark2 li { color:#e6e6e6; } .cellstyle-dark2 a { color:#e6e6e6; } .cellstyle-dark2 a:hover { color:#c6c6c6; text-decoration: none; } /* ==================================================== MEDIA QUERY - MAX ==================================================== */ @media (min-width:1020px) { } /* ==================================================== SPECIALS ==================================================== */ .wz.cell.wz-field > .ci > .cfo { width:auto; margin:0; } .ci, .cfo, .cfi { max-height:inherit; } .wz.cell.wz-fixed { position: fixed !important; top: 0; z-index: 10; box-shadow: 0 2px 6px 0px #777; }