LPcss.css

.clear{
  clear:both;
}

.floatl{
  float:left;
}

.floatr{
  float:right;
}

.imgvertc{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}

img{
  border:none;
}

.marhc{
  margin-left:auto;
  margin-right:auto;
}

.none{
  display:none;
}

.col-1{
  display:inline-block;
  width:100%;
  box-sizing:border-box;
  clear:both;
}

.col-2{
  display:inline-block;
  width:50%;
  box-sizing:border-box;
  text-align:center; /* For directly include <a> */
  float:left;
}

.col-3{
  display:inline-block;
  width:33%;
  box-sizing:border-box;
  text-align:center; /* For directly include <a> */
  float:left;
}

.col-2.l, .col-3.l{
  clear:left;
}

.nobg{
  background:none !important;
}

.noborder{
  border:none !important;
}

.imgvertc{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}

/*region Color*/
.color-white {
  color:#ffffff;
}
/*endregion*/
/*region Font*/
.font-16-mq-14,
.font-16-mq-12,
.font-16-mq-12-16,
.font-16-mq-10{
  font-size:16px;
}
/*endregion*/
/*region width*/
w-80p-mq-100p {
  width:80%;
}
/*endregion*/
/*region margin */
.m-8-0{
  margin:8px 0;
}
.m-0{
  margin:0px;
}
.m-t-0{
  margin-top:0px;
}
.m-5{
  margin:5px;
}
.m-5-0{
  margin:5px 0;
}
.m-lr-auto{
  margin-left:auto;
  margin-right:auto;
}
/*endregion*/
/*region padding*/
.p-0{
  padding:0px;
}
.p-5{
  padding:5px;
}
.p-10{
  padding:10px;
}
.p-15{
  padding:15px;
}
.p-20{
  paddding:20px;
}
.p-b-10{
  padding-bottom:10px;
}
.p-t-15{
  padding-top:15px;
}
.p-t-20{
  padding-top:20px;
}
.p-v-20{
  padding-top:20px;
  padding-bottom:20px;
}
.p-l-20{
  padding-left:20px;
}
.p-l-30{
  padding-left:30px;
}
.p-5-0{
  padding:5px 0;
}
/*endregion*/
/*region spacer*/
.sp-clear {
  width:100%;
  height:0px;
  margin:0px;
  padding:0px;
  clear:both;
  display:block;
  box-sizing:border-box;
}
.sp-10{
  /* <div class="sp-clear sp-10">&nbsp;</div> */
  padding:5px;
}
.sp-20{
  padding:10px;
}
.sp-30{
  padding:15px;
}
.sp-40{
  padding:20px;
}
/*endregion*/
.block-center{
  display:block;
  margin:0 auto;
}

/*region Flex*/
.flex-r-nw-sb{
  /* row nowrap space-between */
  display:flex;
  flex-flow: row nowrap;
  justify-content:space-between;
}
.flex-r-nw-sb-center{
  display:flex;
  flex-flow:row nowrap;
  justify-content:space-between;
  align-items:center;
}
.flex-r-nw-sb-fs {
  /* row nowrap space-between don't stretch on y for each row */
  display:flex;
  flex-flow: row nowrap;
  justify-content:space-between;
  align-items:flex-start;
}
.flex-r-nw-fs-center{
  display:flex;
  justify-content:flex-start;
  flex-flow:row nowrap;
  align-items:center;
}
.flex-r-w-fs{
  display:flex;
  flex-flow:row wrap;
  justify-content:flex-start;
}
.flex-r-w-fs-center,
.flex-r-w-fs-center-mq-r-w-sa-center{
  /* mq
  div.UniqueClass.flex-r-w-fs-center-mq-r-w-sa-center {
     justify-content:space-around;
  }
  */
  display:flex;
  flex-flow:row wrap;
  justify-content:flex-start;
  align-items:center;
}
.flex-r-w-sb-fs,
.flex-r-w-sb-fs-mq-r-w-sb-center{
  display:flex;
  flex-flow:row wrap;
  justify-content:space-between;
  align-items:flex-start;
}
/*endregion*/

/*region media queries*/
@media only screen and (max-width:1920px){}

/* iPadPro@H1366 */
@media only screen and (max-width:1400px){}

/* iPad@H1024 */
@media only screen and (max-width:1267px){}

/* iPadPro@1024 */
@media only screen and (max-width:1201px){}

@media only screen and (max-width:1023px){}

@media only screen and (max-width:967px){}

/* iPad@768, iPhone6+@H736, Nexus 6P/5X@H732 */
@media only screen and (max-width:867px){}

/* iPhone6@H667 */
@media only screen and (max-width:697px){}

/* GalaxyS5@H640 */
@media only screen and (max-width:645px){}

/* iPhone5@H568 */
@media only screen and (max-width:597px){}

@media only screen and (max-width:467px){}

/* iPhone6+@414, Nexus 6P/5X@412 */
@media only screen and (max-width:420px){}

/* iPhone6@375, GalaxyS5@360 */
@media only screen and (max-width:375px){}

/* iPhone5@320 */
@media only screen and (max-width:320px){}
/*endregion*/