#header{ height: 50vh; position: relative; font-size: 80px; }
h1{ text-align: center; font-size: 1em; display: none; }

#logo-container{ width: 3.5em; position: absolute; bottom: 0; left: 50%; transform: translate(-59%, 0); height: 1em; }
#logo-svg{ width: 100%; height: 100%; background: url("../img/logo-noline.svg") no-repeat; background-size: 100% auto; background-position: center bottom; transition: 1s 1.75s; opacity: 1; }
#logo-line{ position: absolute; right: -0.8em; height: 0.2em; width: 0.7em; background-color: black; bottom: 0.0175em; border-radius: 0.2em; transition: right 1s, width 1s 0.75s; }

#logo-container.hidden #logo-svg{ opacity: 1; }
#logo-container.hidden #logo-line{ opacity: 1; width: 70vw; right: 100vw; }
#logo-container.expanded #logo-line{ width: 100vw; right: calc(-100vw - 0.1em); transition: all 3s; }


#logo-mask-container{ position: absolute; left: -0.5%; top: -0.5%; width: 101%; height: 101%; }
.logo-mask{ opacity: 0; position: relative; top: 0%; height: 100%; float: left; background-color:white; transition: opacity 1s; }
#logo-container.hidden .logo-mask{ opacity: 1; }
#logo-mask-0{ transition-delay: 1.2s; width: 22%; }
#logo-mask-1{ transition-delay: 1.3s; width: 10%; }
#logo-mask-2{ transition-delay: 1.4s; width: 23.5%; }
#logo-mask-3{ transition-delay: 1.5s; width: 21.5%; }
#logo-mask-4{ transition-delay: 1.6s; width: 23%; }


#content{ font-family: lavigne-display, serif; position: relative; min-height: 50vh; font-size: 100px; padding: 3em 0.5em; text-align: center; box-sizing: border-box; }
.line{ position:relative; opacity: 1; transition: opacity 2s; }
.line.hidden{ opacity: 0; } 


#footer{ position: relative; height: 50vh; font-size: 21px; }
#subscribe-container{ position: absolute; width: 30.5em; height: 4.5em; top: 0; left: 50%; transform: translate(-50%, 0); }
#subscribe-container::before{ content: ""; position: absolute; pointer-events: none; width: 4.5em; height: 100%; border-radius: 2.25em; background-color: #c1c1c1; transition: all 0.5s ease-out; opacity: 0; z-index: -1; }
#subscribe-container #mce-EMAIL{ font-family: stolzl, sans-serif; font-weight: normal; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); background: none; border: none; height: 100%; font-size: inherit; color: white; width: 100%; padding: 0 0 0 1.5em; border-radius: 2.25em; box-sizing: border-box;  opacity: 0; transition: opacity 0.25s 0.5s; }
#subscribe-container #mce-EMAIL:focus{outline-width: 0;}
#subscribe-container #mc-embedded-subscribe{ appearance: none; -webkit-appearance: none; -moz-appearance: none; font-family: stolzl, sans-serif; font-weight: bold; font-size: inherit !important; position: absolute; right: 0.5em; top: 50%; transform: translate(0, -50%); height: 3.5em; border: none; width: 3.4em; border-radius: 2.65em !important; font-size: inherit; font-weight: 700; cursor: pointer; background-color: white; transition: all 0.25s 0.5s, color 0.02s; opacity: 0; color: black; }
#subscribe-container #mc-embedded-subscribe:hover{ color: #626262; }
#subscribe-container #mce-EMAIL::placeholder{ color: #535453; }

#subscribe-container.active::before{ content: ""; pointer-events: none; width: 100%; opacity: 1; }
#subscribe-container.active #mc-embedded-subscribe{ width: 6.5em; opacity: 1; }
#subscribe-container.active #mce-EMAIL{ opacity: 1; }


#links-container{ position: absolute; width: 980px; left: 50%; transform: translate(-50%, 0);  bottom: 4.3em; font-size: 18px; }

.social-link{ height: 3em; float: right; width: 2.75em; }
.social-link a{ width: 100%; height: 100%; }
.social-link img{ width: 100%; height: 100%; }

#link-blank{ float: left; }
#link-twitter{}
#link-linkedin{ margin-right: 1em; }

/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }



@media screen and (min-width: 1920px) {
    #header{font-size: 110px;}
    #content{font-size: 140px;}
    #footer{font-size: 20px;}
}
@media screen and (max-width: 1920px) {
    #header{font-size: 95px;}
    #content{font-size: 120px;}
    #footer{font-size: 19px;}
}
@media screen and (max-width: 1536px) {
    #header{font-size: 80px;}
    #content{font-size: 100px;}
    #footer{font-size: 18px;}
}
@media screen and (max-width: 1366px) {
    #header{font-size: 75px;}
    #content{font-size: 90px;}
    #footer{font-size: 18px;}
    #subscribe-container{ width: 28em; }
    #links-container{ width: 800px; }
}
@media screen and (max-width: 960px) {
    #header{font-size: 60px;}
    #content{font-size: 75px;}
    #footer{font-size: 16px;}
    #links-container{width: calc(100% - 60px);}
}
@media screen and (max-width: 800px) {
    #header{font-size: 55px;}
    #content{font-size: 66px;}
    #footer{font-size: 14px;}
    #links-container{ font-size: 16px; }
}
@media screen and (max-width: 640px) {
    #header{font-size: 45px;}
    #content{font-size: 60px;}
    #links-container{ width: calc(100% - 40px); font-size: 14px; }
    #subscribe-container{ width: 26em; }
}
@media screen and (max-width: 420px) {
    #header{font-size: 40px;}
    #content{font-size: 45px;}
    #footer{font-size: 13px;}
    #subscribe-container{ max-width: 80%; }
}