.cd-container { width: 90%; max-width: 768px; margin: 2em auto; }
.cd-container::after { /* clearfix */ content: ''; display: table; clear: both; }
.cd-top { display: inline-block; height: 40px; width: 40px; position: fixed; bottom: 40px; right: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* image replacement properties */ overflow: hidden; text-indent: 100%; white-space: nowrap; background: #E99400 url(../images/cd-top-arrow.svg) no-repeat center 50%; visibility: hidden; opacity: 0; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; z-index: 100; }
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; }
.cd-top.cd-is-visible { /* the button becomes visible */ visibility: visible; opacity: 1; }
.cd-top.cd-fade-out { /* if the user keeps scrolling down, the button is out of focus and becomes less visible */ opacity: .5; }
.no-touch .cd-top:hover { background-color: #E99400; opacity: 1; }
@media only screen and (min-width: 768px) { .cd-top { right: 20px; bottom: 20px; } }
@media only screen and (min-width: 1024px) { .cd-top { height: 40px; width: 40px; right: 10px; bottom: 30px; } }