.scroll{position: fixed;top: 50%;left: 50%;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);letter-spacing: 1px;font-weight: 700;font-size: 2em;line-height: 2;width: 10em;text-align: center;height: 2em;color: #e74c3c;background: #fff;font-style: normal;text-transform: uppercase;opacity: 0.8;}
.scroll::after{display: block;content: '\2193';color: #fff;font-size: 3em;line-height: 1;}
/* Header styles and animations*/.ha-header{position: fixed;top: 0;left: 0;width: 100%;padding: 0;z-index: 101;font-family: 'Lato', Arial, sans-serif;-webkit-transform: translateY(0%);-moz-transform: translateY(0%);transform: translateY(0%);-webkit-transition: all 0.5s;-moz-transition: all 0.5s;transition: all 0.5s;}
.ha-header-perspective{width: 100%;height: 100%;position: relative;-webkit-perspective: 1100px;-moz-perspective: 1100px;perspective: 1100px;-webkit-perspective-origin: 50% 0;-moz-perspective-origin: 50% 0;perspective-origin: 50% 0;}
.ha-header-perspective > div{background: #fff;text-align: left;padding: 0 7%;height: 50%;width: 100%;margin: 0 auto;position: relative;text-align: justify;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;transition: all 0.5s;/*overflow: hidden;*/}
.ha-header-front{z-index: 2;-webkit-transform-origin: 50% 100%;-moz-transform-origin: 50% 100%;transform-origin: 50% 100%;}
.ha-header-perspective .ha-header-bottom{background: #ddd;-webkit-transform-origin: 50% 0%;-moz-transform-origin: 50% 0%;transform-origin: 50% 0%;z-index: 1;-webkit-transform: rotateX(-90deg);-moz-transform: rotateX(-90deg);transform: rotateX(-90deg);-webkit-transition: top 0.5s;-moz-transition: top 0.5s;transition: top 0.5s;position: absolute;top: 0;}
/* Justify inline-block elements (h1 on left side, nav on right)*/.ha-header-perspective > div::after{content: '';display: inline-block;width: 100%;}
/* Text styling*/.ha-header h1,
.ha-header h1::before,
.ha-header h1 span,
.ha-header nav,
.ha-header nav::before{display: inline-block;vertical-align: middle;text-align: left;}
.ha-header h1{font-weight: 300;font-size: 3.2em;margin: 0;color: #2d383f;cursor: default;height: 100%;z-index: 1;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;transition: all 0.5s;}
.ha-header h1::before,
.ha-header nav::before{content: '';height: 100%;}
.ha-header h1::after{content: '';width: 100px;height: 96px;background: #fff;position: absolute;z-index: 100;top: 0;left: 0;cursor: pointer;box-shadow: inset 0 8px #2d383f, inset 0 16px #fff, inset 0 24px #2d383f, inset 0 32px #fff, inset 0 40px #2d383f, inset 0 48px #fff, inset 0 56px #2d383f;opacity: 0;border: 20px solid #fff;-webkit-transition: opacity 0.5s;-moz-transition: opacity 0.5s;transition: opacity 0.5s;}
.ha-header nav{height: 100%;}
.ha-header nav a{display: inline-block;text-transform: uppercase;letter-spacing: 1px;font-weight: 700;padding: 0.2em 0.4em;margin: 0 0.4em 0;font-size: 0.8em;cursor: pointer;color: #e74c3c;outline: none;text-decoration: none;}
.ha-header nav a:hover{color: #bc3c2f;}
.ha-header nav a:last-child{margin-right: 0;}
.ha-header .ha-header-front nav a:first-child,
.ha-header .ha-header-front nav a:last-child{border: 2px solid #e74c3c;}
.ha-header .ha-header-front nav a:first-child:hover,
.ha-header .ha-header-front nav a:last-child:hover{border: 2px solid #bc3c2f;}
/* Individual states*/.ha-header-large{height: 420px;}
.ha-header-small{height: auto;}
.ha-header-hide{height: auto;-webkit-transform: translateY(-100%);-moz-transform: translateY(-100%);transform: translateY(-100%);}
.ha-header-show{height: auto;-webkit-transform: translateY(0%);-moz-transform: translateY(0%);transform: translateY(0%);}
.ha-header-show .ha-header-bottom{opacity: 0;-webkit-transition: top 0.5s, opacity 0s 0.5s;-moz-transition: top 0.5s, opacity 0s 0.5s;transition: top 0.5s, opacity 0s 0.5s;-webkit-transform: rotateX(0deg);-moz-transform: rotateX(0deg);transform: rotateX(0deg);top: 0%;}
.ha-header-subshow{height: auto;}
.ha-header-subshow .ha-header-bottom{-webkit-transition: top 0.5s;-moz-transition: top 0.5s;transition: top 0.5s;-webkit-transform: rotateX(0deg);-moz-transform: rotateX(0deg);transform: rotateX(0deg);top: 50%;}
.ha-header-shrink{height: auto;top: 50px;padding-left: 50px;padding-right: 50px;}
.ha-header-shrink .ha-header-bottom{opacity: 0;}
.ha-header-rotate{height: auto;top: 50px;padding-left: 50px;padding-right: 50px;}
.ha-header-rotate .ha-header-front{-webkit-transform: translateY(-100%) rotateX(90deg);-moz-transform: translateY(-100%) rotateX(90deg);transform: translateY(-100%) rotateX(90deg);}
.ha-header-rotate .ha-header-bottom{top: 50%;-webkit-transition: -webkit-transform 0.5s;-moz-transition: -moz-transform 0.5s;transition: transform 0.5s;-webkit-transform: rotateX(0deg) translateY(-100%);-moz-transform: rotateX(0deg) translateY(-100%);transform: rotateX(0deg) translateY(-100%);}
.ha-header-rotateBack{height: auto;top: 50px;padding-left: 50px;padding-right: 50px;}
.ha-header-rotateBack .ha-header-front{-webkit-transform: translateY(0%) rotateX(0deg);-moz-transform: translateY(0%) rotateX(0deg);transform: translateY(0%) rotateX(0deg);}
.ha-header-rotateBack .ha-header-bottom{top: 50%;-webkit-transition: -webkit-transform 0.5s;-moz-transition: -moz-transform 0.5s;transition: transform 0.5s;-webkit-transform: rotateX(-90deg);-moz-transform: rotateX(-90deg);transform: rotateX(-90deg);}
.ha-header-color{height: auto;}
.ha-header-color .ha-header-front,
.ha-header-color .ha-header-bottom{background-color:#21232f;border-bottom:1px solid #e5e9ec;}
.ha-header-color h1,
.ha-header-color nav a{color: #fff;}
.ha-header-box{height: 192px;width: 100px;top: 20px;left: 20px;}
.ha-header-box h1{padding-left: 150px;}
.ha-header-box h1,
.ha-header-box nav a{color: transparent;}
.ha-header-box h1:after{opacity: 1;}
.ha-header-box nav{opacity: 0;}
.ha-header-fullscreen{height: 100%;opacity: 0.9;}
.ha-header-fullscreen .ha-header-front{height: 100%;}
.ha-header-fullscreen .ha-header-bottom{opacity: 0;-webkit-transition: top 0.5s, opacity 0s 0.5s;-moz-transition: top 0.5s, opacity 0s 0.5s;transition: top 0.5s, opacity 0s 0.5s;-webkit-transform: rotateX(0deg);-moz-transform: rotateX(0deg);transform: rotateX(0deg);top: 50%;background: #f3796c;}
.ha-header-subfullscreen{height: 100%;opacity: 0.9;}
.ha-header-subfullscreen .ha-header-bottom{-webkit-transition: top 0.5s;-moz-transition: top 0.5s;transition: top 0.5s;-webkit-transform: rotateX(0deg);-moz-transform: rotateX(0deg);transform: rotateX(0deg);top: 50%;background: #f3796c;}
.ha-header-subfullscreen .ha-header-bottom nav a{color: #fff;}
@media screen and (max-width: 65em){body{font-size: 85%;}}
@media screen and (max-width: 60em){.ha-header-perspective > div,.ha-header nav{text-align: center;}
.ha-header h1{padding: 10px 0;height: 60%;}
.ha-header .ha-header-bottom nav{padding: 40px 0px;}
.ha-header nav{display: block;height: auto;}}
@media screen and (max-width: 38em){section{font-size: 1.3em;}
.ha-header h1{font-size: 2em;}
.ha-header nav{font-size: 60%;}}