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

#top { background: url(images/deep.jpg) no-repeat center center, #000; background-size: auto 100%; margin: 0 auto; height: 40vh; width: 100vw; text-align: center; }
#top #logo { position: absolute; z-index: 2; top: calc(40vh - 35px); left: calc(50vw - 145px); }
#top #logo:before { position: absolute; content: ""; display: block; height: 5px; width: calc(50vw - 142px); background: #fff; right: calc(50% + 142px); top: calc(40% + 14px);
    -webkit-clip-path: polygon(0% 0%, 100% 0%, calc(100% - 1px) 100%, 0 100%);
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 1px) 100%, 0 100%);
}
#top #logo:after { position: absolute; content: ""; display: block; height: 5px; width: calc(50vw - 122px); background: #fff; left: calc(50% + 128px); top: calc(40% + 14px);
    -webkit-clip-path: polygon(calc(0% + 0.5px) 0%, 100% 0%, 100% 100%, 0 100%);
    clip-path: polygon(calc(0% + 0.5px) 0%, 100% 0%, 100% 100%, 0 100%);
}

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

@media screen and (max-width: 640px) {
    #top #logo { top: calc(40vh - 22px); left: calc(50vw - 110px); }
    #top #logo svg { width: 216px; height: auto; }
    #top #logo:before { height: 4px; width: calc(50vw - 105px); right: calc(50% + 105px); top: calc(40% + 10px); }
    #top #logo:after { height: 4px; width: calc(50vw - 97px); left: calc(50% + 97px); top: calc(40% + 10px); }
}