.Mprogress html { font-size: 62.5%; }

.Mprogress body { margin: 0; padding: 0; background-color: rgb(249, 249, 249); -webkit-font-smoothing: antialiased; font-family: "RobotoDraft","Roboto",sans-serif; font-size: 1.4rem; color: rgb(33, 33, 33);}
.Mprogress a { text-decoration: none; font-family: arial,sans-serif; font-size: 1.6rem; line-height: 2rem; }
.Mprogress .demo-block a { border-left: 5px solid; border-left-color: rgb(178, 235, 242); padding-left: 20px; color: #00BCD4; }
.Mprogress .page-header h1 { margin: 0; background-color: #00BCD4; padding: 1.8rem 0 1.8rem 2rem; color: #FFF; font-size: 3rem; font-weight: 300; line-height: 1.5; }
.Mprogress .contents { margin: 0 auto; max-width: 900px; }
.Mprogress .demo-block { margin: 0 2rem; line-height: 1.5; }
.Mprogress .demo-block h2 { color: rgb(0, 188, 212); font-size: 3rem; font-weight: 300; line-height: 40px; }

.Mprogress .demo-block.intro p { font-size: 1.8rem; }

.Mprogress .demo-block h3 { /* border-left: 5px solid; */ /* border-left-color: rgb(178, 235, 242); *//* padding-left: 20px; */ color: rgb(0, 188, 212); font-size: 2rem; font-weight: 300; line-height: 40px; }

.Mprogress .demo-block img { width: 100%; max-width: 688px; }

.Mprogress .demo-button { width: 50px; line-height: 25px; height: 25px; display: inline-block; background: #FFA500;  text-align: center; color: #FFF;  font-size: 1.7rem;  border-radius: 3px;  margin: 15px 12px 5px 0; cursor: pointer; }

.Mprogress .demo-button:hover { background: #00BCD4; }

.Mprogress .demo-button.btn-big {width: 100px; }

.Mprogress .demo-bar { margin: 10px 0; width: 100%; max-width: 690px;  height: 5px;}

.Mprogress .demo-code { background-color: #EBECEA; padding: 20px 0 20px 10px; max-width: 678px;  color: #000;}

.Mprogress .demo-code.short { padding: 0.4rem 1.3rem; line-height: 1.8; }

.Mprogress .demo-code .indent { padding-left: 25px; margin: 0; }

/* fork github*/
.Mprogress #forkongithub a { position: relative; top: 15px; left: 20px; padding: 5px 40px; background: #FFA500; color: #fff; text-align: center; font-weight: bold; transition: 0.5s;}

.Mprogress #forkongithub a:hover { background: #00BCD4; color: #fff; }
.Mprogress #forkongithub a::before, #forkongithub a::after { content: ""; width: 100%; display: block; position: absolute; top: 1px; left: 0; height: 1px; background: #fff; }

.Mprogress #forkongithub a::after {bottom: 1px; top: auto; }

@media screen and (min-width:800px) { 
  .Mprogress #forkongithub { position: absolute; display: block; top: 0; right: 0; width: 200px; overflow: hidden; height: 200px;  z-index: 9999; }
  .Mprogress #forkongithub a {width: 200px;position: absolute; top: 60px; right: -60px; left: 0; transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);-moz-transform: rotate(45deg); -o-transform: rotate(45deg); box-shadow: 4px 4px 10px rgba(0,0,0,0.5); }
}