.screenshot {
  margin: 2em auto;
  border-radius: 6px;
  border: 3px solid #fff; }
.screenshot:hover {
  border-color: #fff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3); }

img.icon {
  display: inline-block;
  min-height: 48px;
  max-height: 256px;
  margin: 16px; }
img.icon.scalable {
  height: 64px;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -ms-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out; }
img.icon.scalable:active, img.icon.scalable:hover {
  height: 96px;
  margin: 0;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -ms-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out; }
img.icon.small {
  height: 48px; }
img.icon.large {
  height: 64px; }

.icon-gallery {
  background-color: #fff;
  border-radius: 0.5em;
  border: 1px solid #dee2e5;
  display: block;
  margin: 1em auto;
  max-width: 744px;
  padding: 1em 0;
  text-align: center; }
.icon-gallery.dark {
  border: 1px solid rgba(0, 0, 0, 0.4);
  background: #333;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -ms-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out; }

.ubuntu-icon {
  display: block;
  margin: 0 auto;
  background: center no-repeat;
  background-size: 100%; }

#appsCarousel, #ubuntuCarousel {
  margin: 3em auto;
  text-align: center; }

.palette {
  border: 6px solid #fff;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.2); }

.example {
  background: #fff center no-repeat;
  background-size: 100%;
  border: 1px solid #dee2e5;
  display: block;
  margin: 0 auto;
  max-width: 512px; }

@media only screen and (max-width: 848px) {
  .example {
    width: 80%; } }
.sizes {
  background-image: none;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out; }
.sizes:hover {
  background: center no-repeat;
  background-size: 100%;
  display: block;
  background-image: url("/img/suru/icon-sizes-bg.png");
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out; }

ol.contents {
  margin: 1em;
  font-size: 20px;
  font-family: "overpass-mono", monospace; }
ol.contents > li {
  margin: 0.5em 0; }
ol.contents > li > a {
  padding-left: 4px; }