article { display:flex; background-color: #333; }

section.middle { border-bottom: 4px solid #222; }

section.left { display:flex; flex-wrap:wrap;  max-width: 24px; background-color: #222; }
.boxA { display:flex; align-self:center; justify-content:center; margin-left: -158px; transform: rotate(-90deg);}
.boxA h1 { width: 340px; text-align: center; color: rgba(255,255,255,0.6); margin: 0; font-size: 0.9em; }

section.middle { display:flex; flex-wrap:wrap; padding: 40px; }
.boxB { flex: 4 0 160px; display:flex; justify-content:center; align-self:center; }
.boxB a { border-bottom: none;}
.boxC { flex: 30 0 300px; padding:0 20px; align-self:center; }
.boxD { flex: 24 0 300px; padding:0 20px 0 0; align-self:center; }
.boxD ol > li { margin-bottom: 1.2em; }
.boxD ul > li { margin-bottom: 1.4em; list-style-type: none; }
.boxD ul > li:before { content: '\25CF'; color: #42affa; display: inline-block; width: 1em; margin-left: -1em; }

.product img { width:110px; height:110px; background-color:#555; padding:15px;
    border: 4px solid; border-color: #666 #222 #222 #666; }
.product img:hover { background-color: #666; border-color: #777 #333 #333 #777;}
.product img:active { background-color:#575757; border-color: #222 #666 #666 #222; }

section.right { display:flex; flex-wrap:wrap; max-width: 24px; background-color: #222; }
.boxE { display:flex; align-self:center; justify-content:center; margin-left: -158px; transform: rotate(90deg);}
.boxE h1 { width: 340px; text-align: center; color: rgba(255,255,255,0.6); margin: 0; font-size: 0.9em; }

.appname {
  	font-size: 1.1em;   
  	font-weight: bold;
  	text-transform: uppercase;
  	letter-spacing: 1px;
  	color: #42affa;
}
.rw {
  	text-transform: uppercase;
  	letter-spacing: 1px;
}
@media only screen and (max-width: 564px) {
       section.left,
       section.right { display:none; }
}