@import "reset.css";

body {font-family: 'Roboto', sans-serif; color:#58585a; font-size:18px;}

sup {
  vertical-align: super;
  font-size: 13px;
}

p {
  font-size:18px;
  line-height:200%;
}

p + p, p + h2, ul + h2, p + h3, ul + h3 {margin-top:30px;}

h3 {font-size:18px; font-weight:600;}

strong {font-weight:600;}
em {font-style:italic;}

ul {
  list-style-type:disc;
  margin-left:1.35em;
}

ul li {
  padding:4px 0;
  line-height:200%;
}

hr {
  margin:80px 0;
  height:1px;
  background:#44c5e9;
  border:none;
}

.header, .footer {width:100%; height:auto;}

.wrap {
  max-width:1200px;
  margin:0 auto;
  padding:80px 20px;
}

h2 {
  color:#4b81c1;
  font-weight:600;
  font-size:30px;
  margin-bottom:30px;
}

.machine img {
  float:right;
  width:35%;
}

.knee .right {
  float:right;
  width:35%;
}

.knee img {
  margin-right:-40px;
  height:auto;
  width:100%;
}

.knee .left {
  width:63%;
  float:left;
}


footer {
  background:#f3f3f4;
  color:#8b8d90;
  padding:60px 0;
  margin:-3px 0 -20px 0;
}

footer p {
  line-height:130%;
  font-size:17px;
}

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

  .knee img {
    max-width:100%;
    width:100%;
    height:auto;
    float:none;
  }

  .knee .left, .knee .right {
    width:100%;
    float:none;
  }

}

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

  .benefits {
    margin-bottom:30px;
  }

  .benefits img {
    float:none;
    margin:0 auto;
    display:block;
  }


  footer {
    padding:0;
  }

  hr {
    margin:40px 0;
  }
}