homepage

.main.view_homepage #document_title {
display: none;
}

.main.view_homepage {
  width: 100%;
  min-height: 34em;
  height: calc(100% - 14em);
  background-image: url("/data/f205233a-c443-4e6d-ba76-199a2641455f");
  background-size: cover;
  background-position: top center;
}
.main.view_homepage .homepage {
  width: calc(100% - 16em);
  margin: auto;
}

.homepage header {
  float: left;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  background-color: #c55;
  overflow: hidden;
}
.homepage header > div {
  position: relative;
  z-index: 110;
  background-color: #fff;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}
.homepage header > div > a {
  display: block;
  width: 20em;
  height: 5.25em;
  padding: 2.5em 1.5em 0.75em 1.5em;
  margin: 0;
}
.homepage header > div > a > img {
  width: inherit;
  height: inherit;
  padding: 0;
  margin: 0;
  border: none;
}
.homepage header > div ul {
  list-style-type: none;
  width: 15em;
  padding: 0;
  margin: auto;
  overflow: hidden;
}
.homepage header > div ul > li {
  float: left;
  width: 5em;
  height: 6em;
}
.homepage header > div ul > li > a {
  display: block;
  width: 4em;
  height: 4em;
  padding: 0.5em 0.5em 1.5em 0.5em;
  line-height: 4em;
  font-size: 1em;
  text-decoration: none;
  transition: all 0.3s;
}
.homepage header > div ul > li > a > span {
  display: block;
  width: inherit;
  height: inherit;
  text-align: center;
  border-radius: 5em;
  color: #fff;
  font-size: 1.4em;
  transition: font-size 0.1s;
}
.homepage header > div ul > li > a:hover {
  width: 5em;
  height: 5em;
  padding: 0;
  line-height: 5em;
}
.homepage header > div ul > li > a:hover > span {
  font-size: 1.8em;
}
.homepage header > div ul > li:nth-child(1) > a > span {
  background-color: #e41;
}
.homepage header > div ul > li:nth-child(2) > a > span {
  background-color: #083;
}
.homepage header > div ul > li:nth-child(3) > a > span {
  background-color: #918;
}
.homepage header > hgroup {
  position: relative;
  z-index: 100;
  height: 0;
  transition: height 1s;
}
.homepage header > hgroup.start {
  height: 22.5em;
}
.homepage header > hgroup > ul {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 22.5em;
  padding: 0;
  margin: 0;
}
.homepage header > hgroup > ul > li {
  padding: 0;
  margin: 0;
   line-height: 0;
}
.homepage header > hgroup > ul > li:first-child > a {
  padding-top: 1em;
}
.homepage header > hgroup > ul > li:last-child > a {
  padding-bottom: 1em;
}
.homepage header > hgroup > ul > li:nth-child(1) > a > div {
  background-image: url("/data/972f8a94-32ac-428f-943a-d95431c2ea7b");
}
.homepage header > hgroup > ul > li:nth-child(2) > a > div {
  background-image: url("/data/03a814df-58f2-4192-a5ec-2585da427033");
}
.homepage header > hgroup > ul > li:nth-child(3) > a > div {
  background-image: url("/data/b2f561c0-f4c8-443a-b5ed-f2e909283812");
}
.homepage header > hgroup > ul > li:nth-child(4) > a > div {
  background-image: url("/data/5722f0b6-514b-43ed-9110-8bb38b8e0326");
}
.homepage header > hgroup > ul > li:nth-child(5) > a > div {
  background-image: url("/data/7c3e0bc9-8e68-45df-8a37-fa459e739737");
}
.homepage header > hgroup > ul > li:nth-child(6) > a > div {
  background-image: url("/data/ce1f7724-2f2f-4969-81c2-39eecb403721");
}
.homepage header > hgroup > ul > li > a {
  display: block;
  padding: 0 2em;
  text-decoration: none;
  overflow: hidden;
}
.homepage header > hgroup > ul > li > a > div {
  float: left;
  width: 3em;
  height: 3em;
  margin: 0.25em;
  border-radius: 4em;
  background-color: #000;
  background-size: 100% 100%;
  transition: all 0.2s;
}
.homepage header > hgroup > ul > li > a > span {
  display: block;
  width: calc(100% - 4.5em);
  padding: 0 1.5em 0 0;
  margin: 0.75em auto 0 auto;
  height: 2em;
  line-height: 2em;
  color: #000;
  text-align: center;
  border-top-right-radius: 0.4em;
  border-bottom-right-radius: 0.4em;
  background-color: #fff;
  transition: all 0.2s;
}
.homepage header > hgroup > ul > li > a:not(.inactive):hover > div {
  width: 3.5em;
  height: 3.5em;
  margin: 0;
}
.homepage header > hgroup > ul > li > a:not(.inactive):hover > span {
  padding: 0 0.5em 0 0;
  width: calc(100% - 1.5em);
  font-size: 1.15em;
  background-color: #fd6;
  margin: 0.45em auto 0 auto;
}

.homepage header > hgroup > ul > li > a.inactive {
  cursor: default;
}
.homepage header > hgroup > ul > li > a.inactive > span,
.homepage header > hgroup > ul > li > a.inactive:hover > span {
  color: #777;
  background-color: #ccc;
}

.homepage aside {
  float: right;
}
.homepage aside > a {
  display: block;
  float: left;
  width: 5em;
  height: 5em;
  margin: 0;
  opacity: 0.9;
  padding: 1em 0.25em;
  transition: all 0.2s;
}
.homepage aside > a > img {
  width: inherit;
  height: inherit;
  border: none;
}
.homepage aside > a:hover {
  width: 5.5em;
  height: 5.5em;
  padding: 0.75em 0;
  opacity: 1;
}

Spinner

Login