#recommendations {width:100%; max-width:768px; margin:0 auto 20px auto; background:#3e3e3e; padding:10px 0 0 0; position:relative; z-index:10;}
#recommendations .content-inner {width:95%; max-width:671px; margin:-10px auto 0 auto; text-align:center;}
#recommendations .content-inner.plain {margin:0 auto; text-align:right;}
#recommendations .content-inner h1 {float:right; color:#a0bb5a;}
#recommendations .content-inner p {padding:5px 0; margin:0;}
#recommendations .content-inner a {color:#a0bb5a;}
#recommendations .content-inner a:hover {color:#d1d1d1;}
#recommendations h2 a {position:relative;}
#recommendations h2 a p {position:absolute; top:-40px; left:-84px; text-align:center; width:200px; color:#a0bb5a; text-decoration:underline;}

#recommendations .content-outer {width:100%; text-align:right; position:relative; border-bottom:2px solid #a0bb5a;}
#recommendations .content-outer:before {content:""; display:block; width:6%; height:22px; background:#a0bb5a; position:absolute; left:0; bottom:0;}
#recommendations .content-outer.mediumgrey {background:#5d5d5d;}
#recommendations .content-outer .content-inner {margin:0 auto;}

#recommendations .content-inner #topmatrix {clear:right; margin-top:20px;}
#recommendations .content-inner #topmatrix ul {padding:0; margin:0; list-style:none;}
#recommendations .content-inner #topmatrix ul li {width:20%; float:right; text-align:center;}
#recommendations .content-inner #topmatrix ul li a {display:block; font:400 13px/25px 'Lato', arial, sans-serif; text-decoration:none; border-left:1px solid #3e3e3e; border-bottom:1px solid #3e3e3e;}
#recommendations .content-inner #topmatrix ul li span {display:block; font:400 13px/25px 'Lato', arial, sans-serif; border-left:1px solid #3e3e3e; border-bottom:1px solid #3e3e3e;}
#recommendations .content-inner #topmatrix ul li a:hover {color:#fff; background:#a0bb5a;}
#recommendations .content-inner #topmatrix ul li .lightgrey {color:#3e3e3e; background:#a8a8a8;}
#recommendations .content-inner #topmatrix ul li .mediumgrey {color:#e6e6e6; background:#5d5d5d;}
#recommendations .content-inner #topmatrix ul li .darkgrey {color:#e6e6e6; background:#3e3e3e;}
#recommendations .content-inner #linksgreen {clear:right; width:100%; width:calc(100% - 1px); height:25px; background:#a0bb5a;}

#recommendations .content-inner .links {padding:20px 0; text-align:right;}

#recommendations .content-inner .rightpic {width:25%; float:right; padding-top:11px}
#recommendations .content-inner .rightpic img {display:block; width:90%; max-width:127px; border:1px solid #bbb7b7; margin:10px 0;}

#recommendations .content-inner .textleft {float:left; width:72%;}

#links img.to-top {position:fixed; right:50%; bottom:25px; cursor:pointer; z-index:1000; margin-right:-500px;}
#links img.mobile-to-top {display:none;}

@media only screen and (max-width:700px) {
html, body {background:#3e3e3e;}
#recommendations .content-inner #topmatrix ul li {width:25%;}
}
@media only screen and (max-width:600px) {
html, body {background:#3e3e3e;}
#recommendations .content-inner #topmatrix ul li {width:50%;}
#recommendations .content-inner #topmatrix ul li.blank {display:none;}
#recommendations .content-inner #topmatrix ul li .darkgrey {color:#e6e6e6; background:#5d5d5d;}

#recommendations .content-inner .rightpic {width:100%; float:none;}
#recommendations .content-inner .rightpic h2 {padding-bottom:10px;}
#recommendations .content-inner .rightpic img {margin-left:10px; margin-top:0; float:right;}
#recommendations .content-inner .textleft {clear:right; float:none; width:100%; padding-top:10px;}
}
@media only screen and (max-width:1200px) {
#links img.to-top {display:none;}
#links img.mobile-to-top {display:block; cursor:pointer; z-index:1000;}
}
@media only screen and (max-height:620px) {
#links img.to-top {display:none;}
#links img.mobile-to-top {display:block; cursor:pointer; z-index:1000;}
}