html{
position: relative;
}
/* Snow CSS */
.snowflake {
color: #fff;
font-size: 1em;
font-family: Arial, sans-serif;
text-shadow: 0px 0px 5px #8c8c8c;
pointer-events: none;
transition: 1s;
}
@-webkit-keyframes snowflakes-fall {
0% {
top: -10%;
}
100% {
top: 100%;
}
}
@-webkit-keyframes snowflakes-shake {
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
-webkit-transform: translateX(80px);
transform: translateX(80px);
}
}
@keyframes snowflakes-fall {
0% {
top: -10%
}
100% {
top: 100%
}
}
@keyframes snowflakes-shake {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(80px);
}
}
.snowflake {
position: fixed;
top: -10%;
z-index: 99999999999999999999999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
-webkit-animation-name: snowflakes-fall, snowflakes-shake;
-webkit-animation-duration: 8s, 3s;
-webkit-animation-timing-function: linear, ease-in-out;
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-play-state: running, running;
animation-name: snowflakes-fall, snowflakes-shake;
animation-duration: 8s, 3s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
animation-play-state: running, running;
font-size: 25px;
}
.snowflake:nth-of-type(0) {
left: 1%;
-webkit-animation-delay: 5.5s, 5.5s;
animation-delay: 5.5s, 5.5s;
}
.snowflake:nth-of-type(1) {
left: 10%;
-webkit-animation-delay: 6.5s, 6.5s;
animation-delay: 6.5s, 6.5s;
}
.snowflake:nth-of-type(2) {
left: 20%;
-webkit-animation-delay: 11.5s, 11.5s;
animation-delay: 11.5s, 11.5s;
}
.snowflake:nth-of-type(3) {
left: 30%;
-webkit-animation-delay: 9.5s, 9.5s;
animation-delay: 9.5s, 9.5s;
}
.snowflake:nth-of-type(4) {
left: 40%;
-webkit-animation-delay: 7.5s, 7.5s;
animation-delay: 7.5s, 7.5s;
}
.snowflake:nth-of-type(5) {
left: 50%;
-webkit-animation-delay: 13.5s, 13.5s;
animation-delay: 13.5s, 13.5s;
}
.snowflake:nth-of-type(6) {
left: 60%;
-webkit-animation-delay: 11.5s, 11.5s;
animation-delay: 11.5s, 11.5s;
}
.snowflake:nth-of-type(7) {
left: 70%;
-webkit-animation-delay: 13s, 13s;
animation-delay: 13s, 13s;
}
.snowflake:nth-of-type(8) {
left: 80%;
-webkit-animation-delay: 11.5s, 11.5s;
animation-delay: 11.5s, 11.5s;
}
.snowflake:nth-of-type(9) {
left: 90%;
-webkit-animation-delay: 13.5s, 13.5s;
animation-delay: 13.5s, 13.5s;
}
.snowflake:nth-of-type(10) {
left: 25%;
-webkit-animation-delay: 7.5s, 5.5s;
animation-delay: 7.5s, 5.5s;
}
.snowflake:nth-of-type(11) {
left: 65%;
-webkit-animation-delay: 9.5s, 8s;
animation-delay: 9.5s, 8s;
}
.snowflake:nth-of-type(12) {
left: 5%;
-webkit-animation-delay: 6.5s, 3.5s;
animation-delay: 1.5s, 3.5s;
}
.snowflake:nth-of-type(13) {
left: 10%;
-webkit-animation-delay: 6.5s, 2.5s;
animation-delay: 6.5s, 2.5s;
}
.snowflake:nth-of-type(14) {
left: 20%;
-webkit-animation-delay: 6.5s, 1s;
animation-delay: 6.5s, 1s;
}
.snowflake:nth-of-type(15) {
left: 30%;
-webkit-animation-delay: 10s, 10s;
animation-delay: 10s, 10s;
}
.snowflake:nth-of-type(16) {
left: 40%;
-webkit-animation-delay: 6s, 6s;
animation-delay: 6s, 6s;
}
.snowflake:nth-of-type(17) {
left: 50%;
-webkit-animation-delay: 8s, 8s;
animation-delay: 8s, 8s;
}
.snowflake:nth-of-type(18) {
left: 60%;
-webkit-animation-delay: 7s, 7s;
animation-delay: 7s, 7s;
}
.snowflake:nth-of-type(19) {
left: 70%;
-webkit-animation-delay: 11.5s, 11.5s;
animation-delay: 11.5s, 11.5s;
}
.snowflake:nth-of-type(20) {
left: 80%;
-webkit-animation-delay: 7s, 7s;
animation-delay: 7s, 7s;
}
.snowflake:nth-of-type(21) {
left: 90%;
-webkit-animation-delay: 6s, 6s;
animation-delay: 6s, 6s;
}
.snowflake:nth-of-type(22) {
left: 25%;
-webkit-animation-delay: 9s, 9s;
animation-delay: 9s, 9s;
}
.snowflake:nth-of-type(23) {
left: 65%;
-webkit-animation-delay: 11s, 11s;
animation-delay: 11s, 11s;
}
.lightrope {
text-align: center;
white-space: nowrap;
overflow: hidden;
position: fixed;
z-index: 120;
margin: -15px 0 0 0;
padding: 0;
pointer-events: none;
width: 100%;
transition: 1s;
top: 0;
}
.lightrope.lights-bottom {
transform: rotate(180deg);
top: calc(100vh - 40px);
}
.lightrope li {
position: relative;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
list-style: none;
margin: 0;
padding: 0;
display: block;
width: 12px;
height: 28px;
border-radius: 50%;
margin: 20px;
display: inline-block;
background: #00f7a5;
box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
-webkit-animation-name: flash-1;
animation-name: flash-1;
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.lightrope li:nth-child(2n+1) {
background: cyan;
box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
-webkit-animation-name: flash-2;
animation-name: flash-2;
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s;
}
.lightrope li:nth-child(4n+2) {
background: #f70094;
box-shadow: 0px 4.6666666667px 24px 3px #f70094;
-webkit-animation-name: flash-3;
animation-name: flash-3;
-webkit-animation-duration: 1.1s;
animation-duration: 1.1s;
}
.lightrope li:nth-child(odd) {
-webkit-animation-duration: 1.8s;
animation-duration: 1.8s;
}
.lightrope li:nth-child(3n+1) {
-webkit-animation-duration: 1.4s;
animation-duration: 1.4s;
}
.lightrope li:before {
content: "";
position: absolute;
background: #222;
width: 10px;
height: 9.3333333333px;
border-radius: 3px;
top: -4.6666666667px;
left: 1px;
}
.lightrope li:after {
content: "";
top: -14px;
left: 9px;
position: absolute;
width: 52px;
height: 18.6666666667px;
border-bottom: solid #222 2px;
border-radius: 50%;
}
.lightrope li:last-child:after {
content: none;
}
.lightrope li:first-child {
margin-left: -40px;
}
@-webkit-keyframes flash-1 {
0%, 100% {
background: #00f7a5;
box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
}
50% {
background: rgba(0, 247, 165, 0.4);
box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
}
}
@keyframes flash-1 {
0%, 100% {
background: #00f7a5;
box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
}
50% {
background: rgba(0, 247, 165, 0.4);
box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
}
}
@-webkit-keyframes flash-2 {
0%, 100% {
background: cyan;
box-shadow: 0px 4.6666666667px 24px 3px cyan;
}
50% {
background: rgba(0, 255, 255, 0.4);
box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
}
}
@keyframes flash-2 {
0%, 100% {
background: cyan;
box-shadow: 0px 4.6666666667px 24px 3px cyan;
}
50% {
background: rgba(0, 255, 255, 0.4);
box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
}
}
@-webkit-keyframes flash-3 {
0%, 100% {
background: #f70094;
box-shadow: 0px 4.6666666667px 24px 3px #f70094;
}
50% {
background: rgba(247, 0, 148, 0.4);
box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
}
}
@keyframes flash-3 {
0%, 100% {
background: #f70094;
box-shadow: 0px 4.6666666667px 24px 3px #f70094;
}
50% {
background: rgba(247, 0, 148, 0.4);
box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
}
}
.ddl-popup-christmas-button.ddl-christmas-close .close {
float: none !important;
}
#ddl-christmas-overlay {
position: fixed;
top: 0;
left: 0;
bottom: 2000px;
right: 0;
background-color: #000;
opacity: 0.7;
z-index: 999999999 !important;
transition: 0.5s;
height: 0;
}
#ddl-christmas-overlay.show {
height: 100vh;
}
.ddl-popup-christmas {
width: 100%;
margin: 0 auto;
position: fixed;
z-index: 9999999999999 !important;
max-width: 500px;
}
.ddl-popup-christmas img {
/* width: 100%; */
max-width: 100%;
max-height: 100%;
display: block;
margin: 0 auto;
}
.ddl-popup-christmas-content {
max-width: 800px;
width: 90vw;
margin: 100px auto;
background: #f3f3f3;
position: fixed;
z-index: 103;
left: 0;
right: 0;
margin: 0 auto;
border-radius: 5px;
top: 120vh;
transition: 0.5s;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
transition-duration: 0.5s !important;
background-size: cover;
background-position: center;
}
.ddl-popup-christmas-content.show {
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.ddl-christmas-close {
position: absolute;
right: 15%;
top: 10px;
width: 32px;
height: 32px;
opacity: 0.7;
z-index: 99999999999;
}
.ddl-christmas-close:hover {
opacity: 1;
}
.ddl-christmas-close:before, .ddl-christmas-close:after {
position: absolute;
left: 15px;
content: ' ';
height: 33px;
width: 5px;
background-color: #000;
}
.ddl-christmas-close:before {
transform: rotate(45deg);
}
.ddl-christmas-close:after {
transform: rotate(-45deg);
}
.christmas-hours {
max-width: 70%;
padding: 50px 0;
margin: 0 auto;
}
.christmas-hours-table {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 25px;
}
.christmas-hours-table-date, .christmas-hours-table-times {
width: 50%;
padding: 0 5%;
text-align: center;
margin: 5px 0;
text-align: left;
box-sizing: border-box;
}
.christmas-hours-table-date{
text-align: right;
/* border-right: 1.5px solid; */
}
.christmas-hours-table-times{
border-left: 2px solid;
}
img.christmas-bg {
position: absolute;
object-fit: cover;
-o-object-fit: cover;
object-position: center;
-o-object-position: center;
width: 100%;
height: 100%;
z-index: -1;
}
.christmas-hours h2{
text-align: center;
font-size: 30px;
margin-bottom: 25px;
margin-top: 0;
}
.christmas-hours-before, .christmas-hours-after {
text-align: center;
font-size: 80%;
width: 80%;
margin: 0 auto;
}
.christmas-hours-before{
margin-bottom: 20px;
}
html #ddl-overlay, html .ddl-popup{
display: none !important;
}