body{
  /*width: 526px;*/
  margin: auto;
  font-family: 'Open Sans', Arial, sans-serif;
}
.attention {
  background-color: #0690ce;
  text-align: center;
  padding: 20px 0;
  color: #fff;
}
.attention h2 {
  margin: 0;
  margin-bottom: 14px;
  color: #fff;
  font-size: 28px;
  font-weight: 300;
}
.attention span {
  font-weight: bold;
  color: white;
}
.attention p {
  margin-bottom: 0;
  font-size: 18px;
}
.wrapper{
  padding: 0 10px;
  background-color: #fcfcfc;
  border-top: 2px solid #0690ce;
  margin-bottom: 30px;
}
.wrapper h1{font-size: 18px;}
.wrapper a{color: #0690ce;}
.wrapper a:hover{text-decoration: none;}
.info-content ul {
  margin: 0;
  list-style-type: none;
  padding-left: 30px;
  margin-bottom: 20px;
  position: relative;
}
.info-content li {
  margin-bottom: 4px;
  padding-left: 4px;
}
.info-content li:before {
  position: absolute;
  left: 3px;
  content: '\2713';
  font-weight: 400;
  color: #fff;
  background-color: #0690ce;
  border-radius: 16px;
  width: 24px;
  height: 24px;
  text-align: center;
  font-size: 14px;
  line-height: 22px;
}
.info-content h1 img{
  vertical-align: -8px;
  margin-right: 8px;
}

.test {
  box-sizing: border-box;
  padding: 0 10px;
  position: relative;
  padding-bottom: 20px;
}
.test h1{text-align: center;margin: 0;}
.test ul{padding-left: 16px;
font-size: 18px;}
.test li{line-height: 32px;}

.info-price{
  margin-top: 20px;
  text-align: center;
  font-weight: normal;
  font-size: 24px;
}
.info-price p{margin: 0;}
.buy-now-btn{
  width: 170px;
color: #fff;
border-radius: 6px;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
background-color: #0690ce;
padding: 10px;
display: inline-block;
line-height: 1.7em;
margin: 8px;
text-align: center;
text-decoration: none;
margin-top: 20px;
}
.buy-now-btn:hover{
  text-decoration: none;
opacity: .9;
}
.star{font-size: 14px;position: relative;top: -4px;}
.old-price{font-size: 29px;
font-weight: 500;
color: #999;
text-decoration: line-through;
margin-left: 4px;}
.dollar-sign{
  color: #0690ce;
font-size: 29px;
position: relative;
top: -12px;
font-weight: 500;
}
.price{
  color: #0690ce;
font-size: 40px;
font-weight: 700;
line-height: 1em;
}
.more{
background: #3a3a3a;
padding: 10px;
text-align: center;
margin: 0;
color: white;
font-weight: 300;
letter-spacing: .02em;
}
.percent-off{
  font-size: 14px;
color: crimson;
text-transform: uppercase;
font-style: italic;
}
.info ul{
list-style-type: none;
width: 340px;
padding-left: 0;
margin: 0 auto;
}
.info ul li{
  position: relative;
  padding-left: 20px;
}
.info ul li:before{
content: '\002B';
color: crimson;
font-weight: bold;
font-size: 20px;
margin-right: 3px;
position: absolute;
left: 4px;
}

#accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 10px;
  width: 340px;
  margin: auto;
  display: block;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  font-size:18px;
  background: #444;
  color: white;
}
#accordion.active, #accordion:hover{background-color: #202020;}
.panel {background-color: white;overflow: hidden;max-height:0;transition: max-height 0.2s ease-out;} 
button#accordion::after {content: '\002B';color: rgb(197, 184, 165);font-weight: bold;float: right;margin-left: 5px;}
button#accordion.active::after {content: "\2212";}

@media screen and (min-device-width : 3840px)
{
  /*body
  {
    font-size: 150%;
  }*/
.attention{padding: 28px 0;}
  .attention h2{font-size: 130%;}
  .attention p{font-size: 110%;}
  .info ul, #accordion{width: 80% !important;}
  #accordion{font-size: 110% !important;}
  .info-price{font-size: 100% !important;}
  .info-content h1{
    font-size: 100%;
  }
  .info ul{
    font-size: 90% !important;
  }
.info ul li{padding:8px 0;}

  .info-content ul{
    font-size: 100%;
  }
  .price-table th{
    font-size: 110%;
  }
  .more{ margin-bottom: 20px; }

  .price, .old-price, .buy-now-btn{font-size: 100% !important;}
  .buy-now-btn{width: auto !important;}
  .percent-off{font-size: 100% !important;}
}

html,body{
  height: 100%;
}

.d-none{display: none;}