.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; }