#hwh{position:relative;min-height:566px;}

/*SET BUTTON AND CONTENT STATES*/
.hwh-button{display:inline-block;padding:16px 32px;font-weight:700;text-transform:uppercase;position:absolute;background-color:rgba(0,0,0,.25);border:2px Solid rgba(255,255,255,.25);color:rgba(255,255,255,.5);text-align:center;font-size:18.5px;cursor:pointer;}
.hwh-button:hover{color:rgba(255,255,255,1);border:2px Solid #8d0404;background-color:rgba(0,0,0,.625);}
.hwh-button.pos1{font-size:24px;line-height:1.25;background-color:rgba(0,0,0,.625);color:rgba(255,255,255,1);border:2px Solid #8d0404;}
.hwh-button br{display:none;}
.hwh-element{background-color:rgba(0,0,0,0.0);padding:32px;height:100%;width:100%;padding-bottom:0px;position:relative;top:0px;left:0px;color:rgba(255,255,255,0);}
.hwh-element.active{background-color:rgba(0,0,0,0.625);padding:32px;height:100%;width:100%;padding-bottom:0px;position:absolute;top:0px;left:0px;color:rgba(255,255,255,1);}

.hwh-element.active.scrollAnimate{background-color:rgba(0,0,0,0.0);color:rgba(255,255,255,0);transition:.5s .5s all ease-in-out;}
.hwh-element.active.scrollAnimate.animated{background-color:rgba(0,0,0,0.625);color:rgba(255,255,255,1);}
 


.hwh-content{width:440px;position:absolute;bottom:0px;left:50%;margin-left:-220px;height:340px;}

.hwh-element h3{font-size:24px;text-transform:capitalize;line-height:1.15;margin-bottom:16px;}
.hwh-element p{font-size:17px;}


 



/*establish button sizing and margins*/
#hwh1{width:254px;margin-left:-254px;}
#hwh2{width:220px;margin-left:-220px;}
#hwh3{width:296px;margin-left:-296px;}
#hwh4{width:300px;margin-left:-300px;}
#hwh5{width:206px;margin-left:-206px;}
#hwh6{width:300px;margin-left:-300px;}
#hwh7{width:282px;margin-left:-282px;}
#hwh8{width:252px;margin-left:-252px;}
#hwh9{width:314px;margin-left:-314px;}

#hwh1.pos1{width:254px;margin-left:-127px;}
#hwh2.pos1{width:220px;margin-left:-110px;}
#hwh3.pos1{width:296px;margin-left:-148px;}
#hwh4.pos1{width:300px;margin-left:-150px;}
#hwh5.pos1{width:256px;margin-left:-103px;}
#hwh6.pos1{width:220px;margin-left:-110px;}
#hwh7.pos1{width:282px;margin-left:-141px;}
#hwh8.pos1{width:252px;margin-left:-126px;}
#hwh9.pos1{width:314px;margin-left:-157px;}

/*establish button positioning*/
.pos1{bottom:404px;left:50%;}
.pos2{bottom:380px;left:410px;}
.pos3{bottom:380px;left:800px;margin-left:0px !important;}

.pos4{bottom:276px;left:330px;}
.pos6{bottom:170px;left:330px;}
.pos8{bottom:65px;left:330px;}

.pos5{bottom:276px;left:880px;margin-left:0px !important;}
.pos7{bottom:170px;left:880px;margin-left:0px !important;}
.pos9{bottom:65px;left:880px;margin-left:0px !important;}

/*begin animations*/
.pos1, .pos2, .pos3, .pos4, .pos5, .pos6, .pos7, .pos8, .pos9{transition:left .75s ease-in-out, margin-left .75s ease-in-out, bottom .75s ease-in-out,color .25s ease-in-out,border-color .375s ease-in-out,font-size .65s ease-in-out;}
.pos3.hwh-button:hover{border:2px Solid darkorange;}
.pos4.hwh-button:hover{border:2px Solid darkorange;}
.pos7.hwh-button:hover{border:2px Solid lawngreen;}
.pos8.hwh-button:hover{border:2px Solid lawngreen;}

.hwh-element{opacity:0;}
.hwh-element.active{opacity:1;}
.hwh-element{transition: .5s opacity ease-in-out;}
.hwh-element.active{transition:2s .5s opacity ease-in-out;}



.hwh-button.pos1 .line3c{transition:.25s .5s all ease-in;}
.hwh-button .line3c{position:absolute;width:2px;height:0px;;left:50%;bottom:0px;margin-left:-1px;background-color:#8d0404;opacity:0;pointer-events:none;}
.hwh-button.pos1.active .line3c{opacity:1;height:66px;left:50%;bottom:-66px;}

.hwh-element.active .b1{transition:.5s .75s all linear;}
.hwh-element .b1{position:absolute;top:0px;width:0px;height:2px;background-color:#8d0404;left:50%;}
.hwh-element.active .b1{width:100%;left:0px;}

.hwh-element.active .b2{transition:.5s 1.25s all linear;}
.hwh-element .b2{position:absolute;left:0px;width:2px;height:0px;background-color:#8d0404;top:0px;}
.hwh-element.active .b2{height:100%;left:0px;}

.hwh-element.active .b3{transition:.5s 1.25s all linear;}
.hwh-element .b3{position:absolute;right:0px;width:2px;height:0px;background-color:#8d0404;top:0px;}
.hwh-element.active .b3{height:100%;right:0px;}

.hwh-element .b4a{position:absolute;bottom:0px;left:0px;width:0px;height:2px;background-color:#8d0404;}
.hwh-element .b4b{position:absolute;bottom:0px;right:0px;width:0px;height:2px;background-color:#8d0404;}
.hwh-element.active .b4a{transition:.25s 1.75s all linear;width:120px;}
.hwh-element.active .b4b{transition:.25s 1.75s all linear;width:320px;}

.hwh-element .line3d{position:absolute;width:2px;height:0px;background-color:#8d0404;bottom:0px;left:120px;}
.hwh-element.active .line3d{transition:.25s 2s all linear;height:96px;bottom:-96px;}