/*color codes*/

/* end */

/*generic content mid*/
.mid { }
.mid .mid-cnt { margin: auto; padding: 0 50px; }
.mid .mid-cnt.full { margin: auto; padding: 0 0px; }
.mid .mid-cnt.full > div { padding-left: 40px; padding-right: 40px; }
.mid .mid-wrap { position: relative; }
.mid .mid-cnt .content img { max-width: 100%; line-height: 150%; }
.mid .mid-cnt .content p { margin: 0 0 20px; line-height: 175%; }
.mid .mid-cnt .content-wrap a.link { display: inline-block; color: #0072ca; padding: 5px 0px 5px 30px; background-image: url('../image/link-icon.png'); background-position: left center; background-repeat: no-repeat; }
.mid .mid-cnt .content-wrap a.link:hover { color: #363636; background-image: url('../image/link-icon-hvr.png'); }

/*for scaling 110% and above*/
@media (-webkit-min-device-pixel-ratio: 1.1)  {
  .mid .mid-cnt { padding: 0 36px; }
  .mid .mid-cnt.full > div { padding-left: 27px; padding-right: 27px; }
  .mid .mid-cnt .content-wrap a.link { padding: 4px 0px 4px 20px; }
  .mid .mid-cnt .content-wrap a.link { background-size: 14px; }
}

/*screen up till 640*/
@media screen and (max-width: 640px) {
  .mid .mid-cnt {   padding: 0 15px; }
  .mid .mid-cnt.full > div { padding-left: 15px; padding-right: 15px; }
  /*for scaling 110% and above*/
  @media (-webkit-min-device-pixel-ratio: 1.1)  {
    .mid .mid-cnt { padding: 0 10px; }
    .mid .mid-cnt.full > div { padding-left: 10px; padding-right: 10px; }
  }

}

/*screen up till 512*/
@media screen and (max-width: 512px) {
}

/*screen up till 480*/
@media screen and (max-width: 480px) {
}


/*screen up till 372*/
@media screen and (max-width: 372px) {
}