@charset "utf-8";
@import url("navi.css");
@import url("forms.css");
@import url("tables.css");
/* ----------------------------------------------FLIP CLOCK------------------------------------- */
.bordered{
box-shadow:0px 0px 3px 1px #222;
}
.flipclock {
display: flex;
justify-content: center;
padding-bottom: 0px;
box-sizing: border-box;
}
.flipclock * {
box-sizing: inherit;
}
.leaf {
display: flex;
flex-direction: column;
margin: 0 4px;
perspective: 300px;
}
.leaf::after {
content: attr(data-label);
position: absolute;
top: 100%;
left: 50%;
margin-top: 8px;
transform: translateX(-50%);
color: #fff;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
opacity: 0.5;
}
.top, .bottom, .leaf-front, .leaf-back {
position: relative;
display: block;
height: 34px;
width: 60px;
background-color: #252525;
color: #fff;
overflow: hidden;
border-color: #2D3748;
}
.top span, .bottom span, .leaf-front span, .leaf-back span {
position: absolute;
left: 50%;
width: 100%;
height: 68px;
text-align: center;
font-family: "Impact", sans serif;
font-size: 40px;
line-height: 68px;
transform: translateX(-50%);
}
.leaf._3-digits .top, .leaf._3-digits .bottom, .leaf._3-digits .leaf-front, .leaf._3-digits .leaf-back {
width: 148px;
}
.top, .leaf-front {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
margin-bottom: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.top span, .leaf-front span {
top: 0;
}
.leaf-front {
position: absolute;
z-index: 10;
}
.bottom, .leaf-back {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top-style: solid;
border-top-width: 1px;
}
.bottom span, .leaf-back span {
bottom: 0;
}
.leaf-back {
position: absolute;
top: 34px;
z-index: 10;
}
@media screen and (max-width: 600px) {
.flipclock {
padding: 3vw;
margin-top:-10px;
}
.leaf {
margin: 0 0.6666666667vw;
}
.leaf::after {
margin-top: 1.3333333333vw;
font-size: 3vw;
}
.top, .bottom, .leaf-front, .leaf-back {
height: 10.6666666667vw;
width: 20vw;
}
.top span, .bottom span, .leaf-front span, .leaf-back span {
height: 21.3333333333vw;
font-size: 13.3333333333vw;
line-height: 21.3333333333vw;
}
.leaf._3-digits .top, .leaf._3-digits .bottom, .leaf._3-digits .leaf-front, .leaf._3-digits .leaf-back {
width: 24.6666666667vw;
}
.top, .leaf-front {
border-top-left-radius: 1vw;
border-top-right-radius: 1vw;
}
.bottom, .leaf-back {
border-bottom-left-radius: 1vw;
border-bottom-right-radius: 1vw;
}
.leaf-back {
top: 10.6666666667vw;
}
}
.leaf-front {
transform-origin: bottom center;
transform: rotateX(0deg);
transform-style: preserve-3d;
transition-delay: 0.3s;
}
.leaf-back {
transform-origin: top center;
transform: rotateX(90deg);
transform-style: preserve-3d;
transition-delay: 0s;
}
.bottom::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0%;
background: #000;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
filter: blur(10px);
}
.flip .leaf-front {
transform: rotateX(-90deg);
transition: transform 0.3s ease-in, background-color 0.3s ease-in, color 0.3s ease-in;
transition-delay: 0s;
color: #000;
background-color: #737373;
}
.flip .leaf-back {
transform: rotateX(0deg);
transition: transform 0.3s ease-in, background-color 0.3s ease-in, color 0.3s ease-in;
transition-delay: 0.3s;
}
.flip .bottom::before {
transition: height 0.3s ease-in-out;
transition-delay: 0.15s;
height: 100%;
}
.countdown {
margin: 10px;
position: relative;
left: 50px;
bottom: 0px;
display: flex;
align-items: right;
justify-content: right;
margin-right: 0;
}