@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 200;
  src: local('Titillium WebThin'), local('TitilliumWeb-Thin'), url(font/TitilliumWeb-Thin.woff) format('woff');
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: local('Titillium Web'), local('TitilliumWeb-Regular'), url(font/TitilliumWeb-Regular.woff) format('woff');
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  src: local('Titillium WebSemiBold'), local('TitilliumWeb-SemiBold'), url(font/TitilliumWeb-SemiBold.woff) format('woff');
}

html, body { margin: 0; padding: 0; }
body { font-family: 'Titillium Web', Helvetica, sans-serif; line-height: 125%; font-weight: 200; font-size: 22px; }
body {
    text-align: center;
    background: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #fafafa /*{c-bar-background-start}*/), to( #ffffff /*{c-bar-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient( #fafafa /*{c-bar-background-start}*/, #ffffff /*{c-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient( #fafafa /*{c-bar-background-start}*/, #ffffff /*{c-bar-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient( #fafafa /*{c-bar-background-start}*/, #ffffff /*{c-bar-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient( #fafafa /*{c-bar-background-start}*/, #ffffff /*{c-bar-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient( #fafafa /*{c-bar-background-start}*/, #ffffff /*{c-bar-background-end}*/);
    background-repeat: no-repeat;
}
img { border: none; }
p { margin: 0; padding: 0; }
.clear { clear: both; }
img.preview { transition: 1s all; height: 550px; }
img.preview1, img.preview3 { display: none; /* responsive */ }
img.preview:hover { height: 650px; margin-top: -50px; margin-bottom: -50px; }
div.store, div.donate { vertical-align: middle; }
img.store, img.donate { transition: 1s opacity; opacity: 0.8; margin: 5px 0; }
img.store:hover, img.donate:hover { opacity: 1.0; }
img.store.inactive { opacity: 0.33; cursor: wait; }
img.store.inactive:hover { opacity: 0.5; }
span.donate { display: inline-block; }
div.cbox { margin: auto; max-width: 1000px; padding: 10px; }
div.container { text-align: center; padding: 0 10px; }
h1, h2 { padding-bottom: 30px; }
#header { height: 44px; padding: 5px; padding-left: 55px; background: #fff url(../img/icon48.png) 3px 1px no-repeat; box-shadow: 0 0 10px 0 #ccc; margin-bottom: 20px; text-align: left; }
#footer { font-size: 18px; padding: 10px; padding-top: 0; background: #eee; border-top: 1px solid #ddd; margin-top: 30px; }
#footer h5 { margin: 0; padding: 0; }
#footer p { margin: 0; padding: 0; line-height: 120%; }
#footer table { margin: auto; text-align: left; }
#footer td { padding-left: 10px; padding-right: 10px; }
#footer .box { width: 49%; float: left; padding-right: 1%; min-width: 400px; padding-top: 10px; text-align: left; }
#buttons {
  padding: 10px;
  position: absolute;
  top: 0;
  right: 10px;
}
#buttons a { opacity: 0.75; }
#buttons a:hover { opacity: 1.0; }

div.lock { text-align: center; padding-top: 24px; }
ul.lock { padding: 0; margin: auto; list-style: none; width: auto; display: inline-block; }
ul.lock li { padding: 5px; padding-left: 35px; min-height: 24px; margin: 0; list-style: none; text-align: left; width: auto; background: transparent url(../img/lock-ico.png) top left no-repeat; }

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  padding-bottom: 40px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}

@media (min-width: 700px) {
  img.preview1 { display: inline; }
}

@media (min-width: 1000px) {
  img.preview3 { display: inline; }
}

.hero {
  background: #3fabff; /* ancient era */
  background: radial-gradient(ellipse at 50% 15%, #79c5ff 0%,#3fabff 100%);
  box-shadow: inset 0 0 10px #3385c6;
  color: #fff;
  text-shadow: 0px 1px 3px #3b3b3b;
  font-weight: 400;
}

.hero .inner {
  padding: 10px; padding-bottom: 20px;
  background: url(../img/texture.png) center center no-repeat;
}