* {padding:0;margin:0;outline:0!important;font-family:Roboto,sans-serif;box-sizing:border-box}
:after {box-sizing:border-box}
body {background:#f5fafe url("img/hb_bg.jpg") 50% no-repeat fixed;overflow-x:hidden;background-size:cover}

a {color:#0084ff}
a:hover {text-decoration:none}
img {border:0}

.container {width:1000px;position:relative;margin:auto;padding:0}
.container:after {content:'';clear:both;display:table}


#header {background:#fff;border-bottom:1px solid #ccc;position:fixed;z-index:999;top:0;left:0;right:0}
#logo {background:url("img/logo.png") left center no-repeat;width:80px;height:50px;display:block;background-size:auto 44px;float:left}
.top_nav {float:right}
.top_nav a {display:inline-block;line-height:50px;padding:0 10px;color:#007ec4;text-decoration:none;text-transform:uppercase;font-size:13px;font-weight:500;cursor:pointer}
.top_nav a:hover {background:#eee;color:#000}


#welcome {padding:91px 0 15vh;min-height:calc(100vh - 51px)}

#welcome_logo {background:url("img/logo_simple.png") 50% 60px no-repeat;width:200px;height:180px;display:block;position:absolute;top:0;left:0;right:0;margin:auto;background-size:90%;z-index:3;text-decoration:none}
#welcome_logo > div {color:#3698dc;font-size:34px;font-weight:bold;padding:20px 0 0;position:relative;overflow:hidden}
#welcome_logo > div > span {display:inline-block;line-height:30px;position:absolute;overflow:hidden;text-overflow:clip;white-space:nowrap}
#welcome_logo > div .home {left:-53%;text-align:right;float:right;position:relative}
#welcome_logo > div .brella {color:#c33a2b;left:48%}

#welcome h1 {text-align:center;font-size:40px;padding-top:200px;margin-bottom:40px;overflow:hidden;text-overflow:clip;white-space:nowrap;line-height:60px;display:flex;flex-wrap:wrap;justify-content:center}
#welcome h1 > span {display:inline-block;line-height:60px;overflow:hidden;text-overflow:clip;white-space:nowrap;margin:0 5px}
#welcome p {margin-bottom:20px;font-size:18px;font-weight:500;text-align:center}
.register_block {margin:60px auto;text-align:center}
.register_block.footer {margin:0 auto 100px;padding-top:40px}

.btn {display:inline-block;width:auto;padding:15px 50px;color:#fff;background:#007ec4;text-decoration:none;border-radius:50px;text-transform:uppercase}
.btn:hover {box-shadow:inset 0 0 0 50px rgba(255,255,255,0.2);color:#fff}
.btn:focus {box-shadow:inset 0 0 0 50px rgba(0,0,0,0.2);color:#fff}

#content {margin-top:-15vh;background:#f1f1f1}

.feature_container {margin:auto;min-height:100vh;padding-top:60px;border-bottom:1px solid #ddd}
.feature_container > h1 {text-align:center;font-size:40px;font-weight:300;margin-bottom:15px}
.feature_container > h3 {text-align:center;font-size:20px;font-weight:300;margin-bottom:30px;color:#555}
.feature_container > .notebook {width:120%;height:664px;background:url("img/notebook_bg.jpg") center no-repeat;margin:0 auto;position:relative;left:-10%}
.feature_container > .notebook > div {height:98%;margin:auto;position:relative}
.feature_container > .notebook.nearby > div {background:url("img/nearby_img.jpg") center no-repeat}
.feature_container > .notebook.pending > div {background:url("img/pending_img.jpg") center no-repeat}
.feature_container > .notebook.calendar > div {background:url("img/calendar_img.jpg") center no-repeat}

.copyright {position:absolute;left:15px;right:15px;margin:auto;bottom:15px;text-align:center;font-size:12px;text-transform:uppercase;font-weight:bold;color:#555}


/* animation */
#welcome_logo,
#welcome_logo > div > span,
#welcome h1 > span,
.welcome_text,
#content {animation-duration:0.7s;animation-fill-mode:both;animation-timing-function:ease-in-out}
#welcome_logo {animation-name:welcome_logo;animation-delay:0.2s}
#welcome_logo > div > span {animation-name:welcome_h1;animation-delay:0.5s}
#welcome h1 > span {animation-name:welcome_h1_2;animation-delay:1s}
.welcome_text {animation-name:welcome_h2;animation-delay:1.5s}
#content {animation-name:welcome_content;animation-delay:2s}

@keyframes welcome_logo {
0% {transform:scale(0)}
100% {transform:scale(1)}
}
@keyframes welcome_h1 {
0% {width:0;letter-spacing:-20px}
100% {width:100%;letter-spacing:0}
}
@keyframes welcome_h1_2 {
0% {width:0;letter-spacing:-25px}
100% {width:auto;letter-spacing:0}
}
@keyframes welcome_h2 {
0% {transform:translateY(-20px);opacity:0}
100% {transform:translateY(0);opacity:1}
}
@keyframes welcome_content {
0% {transform:translateY(20px);opacity:0}
100% {transform:translateY(0);opacity:1}
}



@media (max-width: 1100px){
.container {width:auto;padding-left:20px;padding-right:20px}
.feature_container {min-height:80vh}
.feature_container > .notebook {background-size:100%;height:70vw}
.feature_container > .notebook > div {background-size:100%!important;width:75%}
}
@media (max-width: 500px){
.feature_container {min-height:50vh}
#welcome {padding-top:51px}
}

@media (max-width: 420px){
.top_nav a {font-size:11px;padding-right:0}
}
@media (max-width: 380px){
#welcome {padding-top:111px}
}