.box {
padding:24px;
margin-bottom:24px;
border-radius:4px;
}

#box1 {
color:#eee;
background: #28343b; /* Old browsers */
background: -moz-linear-gradient(left, #28343b 0%, #3a3e42 64%, #686c72 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#28343b), color-stop(64%,#3a3e42), color-stop(100%,#686c72)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #28343b 0%,#3a3e42 64%,#686c72 100%); /* Chrome10+,Safari5.1+ */;
margin-bottom:24px;
}

#box1 a {
color: #fff;
font-weight: bold;
}

#box2 {
color:#eee;
background: #820000; /* Old browsers */
background: -moz-linear-gradient(left, #820000 0%, #ff7700 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#820000), color-stop(100%,#ff7700)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #820000 0%,#ff7700 100%); /* Chrome10+,Safari5.1+ */
}
.hddimg svg {
}

.hddimg {
transition: all 0.5s ease;
display:inline-block;
vertical-align:top;
margin:0 24px 24px 0;
}

.box h3 {
font-size:220%;
color:#eee;
margin-top:0;
font-weight:normal;
}

.box ul {
display:inline-block;
font-size:18px;
max-width:42%;
margin:0 24px 24px 0;
}

.costbox {
text-align:center;
padding:1em;
border-radius:100%;
display:inline-block;
margin:0;
float:right;
}

.costbox p {
font-size:250%;
font-weight:700;
margin:0;
}

#costbox1 {
background:#fa00a8;
color:#fff;
}

#costbox2 {
background:#1663fa;
color:#fff;
}

.cbfooter {
width:100%;
font-size:18px;
display:inline-block;
}

 @media (max-width: 600px) {
	
	.box {text-align:center;}
	
	.costbox {float:none;}
	
	.box ul {max-width:100%; width:100%; list-style-type:none;}
	
	.hddimg {
	transition: all 0.5s ease;
	-webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
	margin:0;
	}
	.cbfooter {margin-top:1em; text-align:left;}
 }