html { scroll-behavior: smooth; } .panel[data-type=splash-image] {   background-color: #2f2424;   overflow: hidden;   width: 100%;   height: calc(100vh - 2.6111111111em);   position: relative;   transition: height .1s ease }  .panel[data-type=splash-image] .bg-img {   position: absolute;   margin: auto;   -webkit-backface-visibility: hidden;   backface-visibility: hidden;   min-width: calc(100% + 1px);   min-height: calc(100% + 1px);   overflow: hidden;   width: auto;   height: auto;   top: 0;   left: 0;   -webkit-transform: none;   transform: none;   max-width: none;   max-height: none }  @supports ((-webkit-transform:translate3d(0, 0, 0)) or (transform:translate3d(0, 0, 0))) {   .panel[data-type=splash-image] .bg-img {     top: 50%;     left: 50%;     -webkit-transform: translate3d(-50%, -50%, 0) scale(1);     transform: translate3d(-50%, -50%, 0) scale(1)   } }  .panel[data-type=splash-image] #splash--scroller, .panel[data-type=splash-image] #splash--wordmark {   margin-left: 0;   height: auto;   position: absolute;   display: block;   -webkit-backface-visibility: hidden;   backface-visibility: hidden;   padding: 0 }  .panel[data-type=splash-image] #splash--wordmark {   transition: font-size .5s ease;   width: auto;   top: 50%;   left: 50%;   -webkit-transform: translate(-50%, -50%);   transform: translate(-50%, -50%) }  @media only screen and (max-width:575px) {   .panel[data-type=splash-image] #splash--wordmark {     font-size: 3.8146972656em   } }  @media only screen and (min-width:576px) and (max-width:767px) {   .panel[data-type=splash-image] #splash--wordmark {     font-size: 4.768371582em   } }  @media only screen and (min-width:768px) and (max-width:1023px) {   .panel[data-type=splash-image] #splash--wordmark {     font-size: 5.9604644775em   } }  @media only screen and (min-width:1024px) and (max-width:1499px) {   .panel[data-type=splash-image] #splash--wordmark {     font-size: 7.4505805969em   } }  @media only screen and (min-width:1500px) {   .panel[data-type=splash-image] #splash--wordmark {     font-size: 7.4505805969em   } }  .panel[data-type=splash-image] #splash--scroller {   bottom: .25em;   width: 100%;   text-align: center;   font-size: 1.25em;   line-height: 1.4;   margin: 0;   padding: 3em 0 0 }  @media only screen and (min-width:768px) {   .panel[data-type=splash-image] #splash--scroller {     padding-top: 2.2em   } }  .panel[data-type=splash-image] #splash--scroller:before {   display: block;   z-index: -1;   content: "";   position: absolute;   top: -1em;   bottom: -.5em;   left: 0;   right: 0 }  .panel[data-type=splash-image] #splash--scroller a {   text-decoration: none;   display: inline-block;   padding: 0 1em }  .panel[data-type=splash-image] #splash--scroller a:after {   font-family: icofont;   content: "\eb19";   display: block;   padding-top: 0;   padding-bottom: .25em;   transition: all .2s ease-out }  .panel[data-type=splash-image] #splash--scroller a:active:after, .panel[data-type=splash-image] #splash--scroller a:focus:after, .panel[data-type=splash-image] #splash--scroller a:hover:after {   padding-top: .25em;   padding-bottom: 0 }  .panel[data-type=splash-image] #splash--wordmark {   color: #fff;   text-shadow: 0 0 30px rgba(0, 0, 0, .3) }  .panel[data-type=splash-image] #splash--scroller {   text-shadow: 0 0 30px rgba(0, 0, 0, .3) }  .panel[data-type=splash-image] #splash--scroller a {   color: #fff }  .panel[data-type=splash-image] #splash--scroller:before {   background: linear-gradient(180deg, transparent 0, #020202 75%);   opacity: .75 }  .panel[data-type=splash-image].theme--white #splash--wordmark {   color: #8c1515;   text-shadow: 0 0 30px hsla(0, 0%, 100%, .7) }  .panel[data-type=splash-image].theme--white #splash--scroller {   text-shadow: 0 0 30px hsla(0, 0%, 100%, .7) }  .panel[data-type=splash-image].theme--white #splash--scroller a {   color: #000 }  .panel[data-type=splash-image].theme--white #splash--scroller:before {   background: linear-gradient(180deg, transparent 0, #fff 45%);   opacity: .85 }  .panel[data-type=splash-image].theme--choco #splash--wordmark {   color: #fff;   text-shadow: 0 0 30px rgba(0, 0, 0, .7) }  .panel[data-type=splash-image].theme--choco #splash--scroller {   text-shadow: 0 0 30px rgba(0, 0, 0, .7) }  .panel[data-type=splash-image].theme--choco #splash--scroller a {   color: #fff }  .panel[data-type=splash-image].theme--choco #splash--scroller:before {   background: linear-gradient(180deg, transparent 0, #020202 67%);   opacity: .6 }  .panel[data-type=splash-image].theme--choco #splash--scroller {   /*!*/ }  @supports (-webkit-font-smoothing:subpixel-antialiased) and (-webkit-font-smoothing:antialiased) {   @media screen and (-webkit-max-device-pixel-ratio: 1.2395833333333333), screen and (max-resolution: 119dpi) {     .panel[data-type=splash-image].theme--choco #splash--scroller {       -webkit-font-smoothing: antialiased     }   }   @media screen and (-webkit-min-device-pixel-ratio:1.25),   screen and (min-resolution:120dpi) {     .panel[data-type=splash-image].theme--choco #splash--scroller {       -webkit-font-smoothing: subpixel-antialiased     }   } }  #splash--scroller, #splash--wordmark {   z-index: 50; } .bounce {   -moz-animation: bounce 3s infinite;   -webkit-animation: bounce 3s infinite;   animation: bounce 3s infinite; }  @-moz-keyframes bounce {   0%,   20%,   50%,   80%,   100% {     -moz-transform: translateY(0);     transform: translateY(0);   }   40% {     -moz-transform: translateY(-10px);     transform: translateY(-10px);   }   60% {     -moz-transform: translateY(-5px);     transform: translateY(-5px);   } }  @-webkit-keyframes bounce {   0%,   20%,   50%,   80%,   100% {     -webkit-transform: translateY(0);     transform: translateY(0);   }   40% {     -webkit-transform: translateY(-10px);     transform: translateY(-10px);   }   60% {     -webkit-transform: translateY(-10px);     transform: translateY(-10px);   } }  @keyframes bounce {   0%,   20%,   50%,   80%,   100% {     -moz-transform: translateY(0);     -ms-transform: translateY(0);     -webkit-transform: translateY(0);     transform: translateY(0);   }   40% {     -moz-transform: translateY(-15px);     -ms-transform: translateY(-15px);     -webkit-transform: translateY(-15px);     transform: translateY(-15px);   }   60% {     -moz-transform: translateY(-5px);     -ms-transform: translateY(-5px);     -webkit-transform: translateY(-5px);     transform: translateY(-5px);   } } 