article {
  background-color: #FCFCFC;
  border-radius: 8px;
  box-shadow: 0 3px 8px -1px #333;
}

article h3 {
  font: normal 22px Verdana, Arial, Helvetica, sans-serif;
  padding: 10px 0 0 20px;
  color: #009;
  margin: 0;
}

article h3:nth-child(2) {
  color: #660;
  padding: 10px 0 20px 40px;
  font: italic normal 24px Verdana, Arial, Helvetica, sans-serif;
  letter-spacing: -1px;
}

article p {
  font-size: .96rem;
  line-height: 20px;
  padding: 0 5px 15px;
  text-align: justify;
  margin: 0;
}

article p span {
  font-size: 16px;
  color: #33339F;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

article p span.brown {
  color: #600;
}

article p span.blue {
  color: #00C;
}

article p span.red {
  color: #900;
}

article ul {
  font: 14px Verdana, Arial, Helvetica, sans-serif;
  list-style-position: inside;
  position: relative;
  left: 8px;
  margin: 0;
}

article ul li {
  padding: 0 20px 10px 0;
}

article .mid-content {
  height: 275px;
  margin: 20px 0 0;
}

article .mid-content p {
  font: 14px Verdana, Arial, Helvetica, sans-serif;
}

article .mid-content .left_cont {
  float: left;
  min-height: 275px;
  width: 48%;
  border-right: 1px solid #999;
}

article .mid-content .left_cont .desc {
  color: #FFF;
  text-align: center;
  background-color: #333;
  padding: 5px 10px;
  border-bottom: 4px solid #A00;
  margin: 0;
}

article .mid-content .freon {
  background: url(../images/icon_green.png) no-repeat left 3px;
  height: auto;
  margin: 10px 0 8px;
  padding: 5px 10px 4px 30px;
}

article .mid-content .oil {
  background: url(../images/icon_blue.png) no-repeat left center;
  height: auto;
  margin: 10px 0;
  padding: 5px 10px 0 30px;
}

article .mid-content .no_grf {
  padding: 0 10px 0 30px;
}

article .mid-content .no_grf:last-child {
  margin: 10px 0 0;
}

article .mid-content .no_grf span {
  font-size: 14px;
  color: #900;
}

article .mid-content .flash {
  float: right;
  width: 51%;
  height: 100%;
}

article .bottom-content {
  padding: 10px 0 0;
  margin: 15px 0 0;
}

article .bottom-content p {
  font-size: 14px;
  padding: 0 0 5px 10px;
  margin: 0 0 0.6em;
}

article .bottom-content .hear {
  font-size: 18px;
  font-style: italic;
  color: #069;
  padding: 5px 0 10px 10px;
  border-bottom: 1px solid #999;
  width: 65%;
}

article .bottom-content .gold {
  font-size: 18px;
  color: #660;
  padding: 0 0 5px 10px;
  letter-spacing: -1px;
}

article #next {
  padding: 8px 0 0;
}

article #next p {
  font: italic 18px Verdana, Arial, Helvetica, sans-serif;
  color: #936;
  margin: 0;
  padding: 0;
}

article #next .new {
  padding: 2px 0 4px 15px;
  background-color: #DDD;
  width: 35%;
  margin: 5px 0 0;
}

article #next .tech {
  font-style: normal;
  color: #333;
  padding: 8px 200px 0 15px;
  letter-spacing: -1px;
}

article #next .tech span {
  color: #060;
  font-size: 18px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

article #next .more {
  font-style: italic;
  color: #333;
  padding: 8px 0 0 15px;
}

article #next .more .orange {
  font-size: 20px;
  color: #F60;
}

article #next .more .purple {
  font-size: 20px;
  color: #603;
  font-family: Arial, Helvetica, sans-serif;
}

article #next img.alignright {
  margin: 0 0 0.6em 1.5em;
}

/*   TABLET  : 768px -----------------------------   */
@media only screen and (max-width: 985px) and (min-width: 768px) {
  article.page {
    padding: 10px 15px 25px;
  }
  article.page img.alignleft {
    width: 30%;
  }
}

/*   Tablet  : 800px -----------------------------   */
@media only screen and (max-width: 800px) {
  article.page img.alignleft {
    width: 25%;
  }
  article.page .mid-content {
    float: none;
    display: none;
  }
}

/*   Phone  : 480px -----------------------------   */
@media only screen and (max-width: 640px) and (min-width: 480px) {
  article.page {
    padding: 5px 10px 15px;
    width: 94%;
  }
  article.page h3, article.page h3:nth-child(2) {
    font-size: 20px;
    padding: 10px 0;
  }
  article.page img.alignleft {
    margin: 0 20px 15px 0;
    padding: 0;
    width: 30%;
  }
  article.page .mid-content {
    height: 0px;
    margin: 0;
  }
  article.page .mid-content .left_cont {
    float: none;
    display: none;
  }
  article.page .mid-content .flash {
    float: none;
    display: none;
  }
  article.page ul {
    padding: 0 0 0 10px;
    margin: 0 0 15px;
  }
  article.page .bottom-content {
    margin: 0;
    padding: 0 5px;
  }
  article.page .bottom-content p {
    padding: 0 0 8px;
    margin: 0;
  }
  article.page .bottom-content p.gold {
    padding: 0 0 10px;
  }
  article.page .bottom-content p.hear {
    width: 75%;
    font-size: 17px;
  }
  article.page img.alignright {
    width: 30%;
  }
  article.page #next {
    height: auto;
    padding: 8px 0 0;
  }
  article.page #next p.new {
    text-align: left;
  }
  article.page #next p.tech {
    padding: 8px 15px 0;
  }
  article.page p {
    text-align: justify;
  }
}

/*   Phone  : 320px -----------------------------   */
@media only screen and (max-width: 479px) {
  article.page {
    width: 94%;
    padding: 5px 8px 15px;
  }
  article.page h3 {
    font-size: 18px;
    padding: 8px 0 0 5px;
  }
  article.page h3:nth-child(2) {
    padding: 10px 0 10px 5px;
    font-size: 18px;
  }
  article.page img.alignleft {
    margin: 0 auto 12px;
    padding: 0;
    float: none;
    width: 50%;
    display: block;
  }
  article.page p {
    text-align: justify;
  }
  article.page ul {
    padding: 0 0 5px 5px;
  }
  article.page .mid-content {
    height: 0px;
  }
  article.page .mid-content .left_cont {
    float: none;
    display: none;
  }
  article.page .mid-content .flash {
    float: none;
    display: none;
  }
  article.page .bottom-content {
    margin: 0;
    padding: 0 5px;
  }
  article.page .bottom-content p {
    padding: 0 0 5px;
  }
  article.page .bottom-content p.gold {
    padding: 0 0 5px;
  }
  article.page .bottom-content p.hear {
    width: 90%;
    font-size: 16px;
  }
  article.page img.alignright {
    width: 40%;
    display: block;
  }
  article.page #next {
    height: auto;
  }
  article.page #next p.new {
    width: 40%;
    font-size: 16px;
    padding: 2px 15px 4px;
    text-align: left;
  }
  article.page #next p.tech {
    font-size: 16px;
    padding: 8px 10px 0;
    text-align: left;
  }
  article.page #next p.more {
    font-size: 16px;
    padding: 8px 10px 0;
  }
  article.page #next p.more span.orange {
    font-size: 16px;
  }
  article.page #next p.more span.purple {
    font-size: 16px;
  }
}