* {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}

.btn {display:inline-block;width:auto;padding:15px 50px;color:#fff;background:#007ec4;text-decoration:none;border-radius:50px;text-transform:uppercase;text-align:center}
.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}
.btn.red {background:#c42e00}


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


.side_container {display:flex;flex-wrap:wrap;height:100vh}
.side_container > div {float:left;width:50%;padding-top:240px;padding-bottom:40px}
.side_container > div > h1 {margin-bottom:90px;font-size:45px;overflow:hidden;text-overflow:clip;white-space:nowrap;line-height:60px}
.text_block {clear:both;opacity:0}
.text_block > h2 {margin-bottom:30px;font-size:38px;font-weight:300}
.text_block > .side_text {font-size:18px;margin-bottom:30px;font-weight:500}
.homeowners .text_block {border-right:1px solid #fff;padding-right:10px}
.professionals .text_block {border-left:1px solid #fff;padding-left:10px}
.professionals {text-align:right}
.professionals > h1 {float:right;text-align:right}

.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 */
#logo,
#logo > div > span,
.side_container > div > h1,
.side_container > div > .text_block {animation-duration:0.7s;animation-fill-mode:both;animation-timing-function:ease-in-out}
#logo {animation-name:welcome_logo;animation-delay:0.2s}
#logo > div > span {animation-name:welcome_h1;animation-delay:0.5s}
.side_container > div > h1 {animation-name:welcome_h1}
.homeowners > h1 {animation-delay:1s}
.professionals > h1 {animation-delay:1.5s}
.side_container > div > .text_block {animation-name:welcome_h2;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_h2 {
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}
}
@media (max-width: 880px){
.side_container > div > h1 {font-size:35px;white-space:normal;line-height:40px;height:80px}
.text_block > h2 {font-size:28px}
.text_block > .side_text {font-size:16px}
}
@media (max-width: 500px){
.side_container > div > h1 {font-size:28px}
.text_block > h2 {font-size:24px}
.text_block > .btn {width:100%;padding:15px}
}
@media (max-width: 340px){
.side_container {height:100%}
.side_container > div > h1 {font-size:25px;line-height:30px;height:60px;margin-bottom:20px}
.text_block > h2 {font-size:20px;font-weight:400}
}