body { /*background: url(images/bg_pattern.png) center top #111111;*/ background: #000; padding: 0; margin: 0; overflow: hidden; cursor: none; }
body * { -webkit-box-sizing: border-box; box-sizing: border-box; }

#top { margin: 0 auto; height: 40vh; width: 100vw; text-align: center; }
#top #logo { position: absolute; z-index: 2; top: calc(40vh - 35px); left: calc(50vw - 150px); }

#links { position: relative; font-size: 0; margin: 60px auto 0; text-align: center; }

.icon { position: relative; width: 50px; height: 50px; line-height: 50px; outline: none; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); margin: 0 -2px; display: inline-block; transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s; }
.icon:hover { opacity: 1; filter: alpha(opacity=100); }
.icon svg { position: relative; z-index: 1; display: inline-block; vertical-align: middle; transform: rotate(-45deg); }
.icon svg path { transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; }
.icon:hover svg path { fill: #47b6df; transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; }

    /* Icons */
.icon .border, .icon .border2, .icon .border3, .icon .border4 { display: block; position: absolute; background: #ffffff; opacity: 0.1; transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; }

.icon .border { width: 0; top: -6px; left: -6px; height: 4px; }
.icon:hover .border { width: 58px; }
.icon .border2 { height: 0; right: -6px; top: -6px; width: 4px; }
.icon:hover .border2 { height: 58px; }
.icon .border3 { width: 0; bottom: -6px; right: -6px; height: 4px; }
.icon:hover .border3 { width: 58px; }
.icon .border4 { height: 0; left: -6px; bottom: -6px; width: 4px; }
.icon:hover .border4 { height: 58px; }

#quote { position: absolute; text-align: center; width: 100%; bottom: 0; padding: 15px; color: #3f3f3f; font-family: 'Times New Roman', Serif; font-weight: bold; font-size: 11px; line-height: 16px; font-style: italic; }
#quote span { display: block; font-weight: normal; }

canvas { display: block; }

@media screen and (max-width: 640px) {
    #top #logo { top: calc(40vh - 16px); left: calc(50vw - 110px); }
    #top #logo img { width: 220px; height: auto; }
    #top #logo:before { width: calc(50vw - 114px); right: calc(50% + 114px); }
    #top #logo:after { width: calc(50vw - 114px); left: calc(50% + 114px); }
}