/*columns*/
.w20 { width: 20%; float: left; }
.w25 { width: 25%; float: left; }
.w33 { width: 33.33%; float: left; }
.w40 { width: 40%; float: left; }
.w50 { width: 50%; float: left; }
.w60 { width: 60%; float: left; }
.w66 { width: 66.66%; float: left; }
.w75 { width: 75%; float: left; }
.w80 { width: 80%; float: left; }
.wmax { width: 100%; }
.wmax-table { width: 100%; display: table; }
.hmax { height: 100%; }
.w20, .w25, .w33, .w40, .w50, .w60, .w66, .w75, .w80, .wmax, .wmax-table {
    min-height: 1px;
}
.row {
    display: block;
    margin: 0;
    min-height: 1px;
    padding: 0;
}
.row:after {
    clear: both;
    display: table;
    content: "";
}

/*display*/
.no-display     { display: none; }
.table          { display: table; }
.block          { display: block; }
.inline         { display: inline; }
.inline-block   { display: inline-block; }
.no-border      { border: none; }
.transparent-border { border-color: transparent;}

.no-float { float: none !important; }
.float-left { float: left; }
.float-right { float: right; }
.clr { clear: both; }

/*font*/
.font-black { color: #000; }
.font-white { color: #fff; }
.font-grey { color: #b3b3b3; }
.font-12 { font-size: 12px; }
.font-14 { font-size: 14px; }
.font-16 { font-size: 16px; }
.font-18 { font-size: 18px; }
.font-20 { font-size: 20px; }
.font-24 { font-size: 24px; }
.font-28 { font-size: 28px; }
.font-32 { font-size: 32px; }
.no-wrap { white-space: nowrap; }
.text-deco-none { text-decoration: none; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;}
/*margin*/
.no-margin  { margin: 0 !important; }
.m5       { margin: 5px; }
.m10      { margin: 10px; }
.m20      { margin: 20px; }
.mt5       { margin-top: 5px; }
.mt10      { margin-top: 10px; }
.mt20      { margin-top: 20px; }
.mt30      { margin-top: 30px; }
.mr5       { margin-right: 5px; }
.mr10      { margin-right: 10px; }
.mr20      { margin-right: 20px; }
.mb5       { margin-bottom: 5px; }
.mb10      { margin-bottom: 10px; }
.mb20      { margin-bottom: 20px; }
.mb30      { margin-bottom: 30px; }
.mb50      { margin-bottom: 50px; }
.ml5       { margin-left: 5px; }
.ml10      { margin-left: 10px; }
.ml20      { margin-left: 20px; }

/*padding*/
.no-padding { padding: 0 !important; }
.p5        { padding: 5px; }
.p10       { padding: 10px; }
.p20       { padding: 20px; }
.p30       { padding: 30px; }
.pt5       { padding-top: 5px; }
.pt10      { padding-top: 10px; }
.pt20      { padding-top: 20px; }
.pr5       { padding-right: 5px; }
.pr10      { padding-right: 10px; }
.pr20      { padding-right: 20px; }
.pb5       { padding-bottom: 5px; }
.pb10      { padding-bottom: 10px; }
.pb20      { padding-bottom: 20px; }
.pl5       { padding-left: 5px; }
.pl10      { padding-left: 10px; }
.pl20      { padding-left: 20px; }

.master-padding {margin: 2rem 4rem}

/*align*/
.center { margin-left: auto; margin-right: auto; display: block; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.vert-align, .vert-align-md { position: relative; top: 50%; transform: translateY(-50%); }

/*position*/
.rel { position: relative; }
.abs { position: absolute; }
.fixed { position: fixed; }

@media (max-width: 992px) {
    /*.vert-align-md { top: 0%; translateY:}*/
    .no-display-sm { display: none; }
}
@media (max-width: 768px) {
    .no-display-xs { display: none; }
}

.custom-fade-out {
    opacity: 0;
    transition: 0.5s all;
}
.custom-fade-in {
    opacity: 1;
    transition: 0.5s all;
}

.custom-readmore {
    position: relative;
    max-height: 9.6em;
    overflow: hidden;
}
.custom-readmore:after {
    position: absolute;
    content: "";
    left: -30px;
    top: -30px;
    right: -30px;
    bottom: 0;
    backgorund: green;
    box-shadow: 0px -6px 15px 0px #fff inset;
    pointer-events: none;
}

/*custom overflow ellipsis*/
.custom-ellipsis, .custom-ellipsis *  {
  overflow: hidden;
  position: relative; 
  line-height: 1.4em;
  max-height: 8.4em; 
  text-align: justify;  
  margin-right: -1em;
  padding-right: 1em;
}
.custom-ellipsis:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}
.custom-ellipsis:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white;
}