.noBorder{
border-bottom:none !important;
}
.divAdventCalendarIntro{
background-color: #fffbf6;
padding: 40px;
}
#breadcrumb_navi{
display:none !important;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.adventBoxesClass{
padding: 20px 0px;
}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.adventBoxesClass{
padding: 20px 110px;
}
}
#wrapper #left{
display:none;
}
.pop-bauble{
position: absolute !important;
top:0;
left:0;
right:0;
z-index: 999;
display:none;
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
.enlarge-bauble {
width: 4.75em !important;
height: 4.75em !important;
font-size: 4em !important;
line-height: 4.75em !important;
transition: all 6s ease;
}
.enlarge-bauble-mobile {
width: 3.3em !important;
height: 3.3em !important;
font-size: 2em !important;
line-height: 3.3em !important;
z-index: 999 !important;
transition: all 2s ease;
}
#wrapper #main{ width: 100%; left: 0;position: relative;}
@-webkit-keyframes shake {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
20% {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
40% {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
60% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
80% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes shake {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
20% {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
40% {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
60% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
80% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#main {
text-align: center;
padding: 1em;
}
.box,
.present {
width: 100%;
height: 100%;
}
.article {
display: inline-block;
width: 9em;
height: 9em;
margin: 0.5em;
-webkit-perspective: 850px;
perspective: 850px;
}
.box {
position: relative;
background: -webkit-linear-gradient(135deg, #285888 50%, #0d447d 50%);
background: linear-gradient(135deg, #285888 50%, #0d447d 50%);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 0;
transform-origin: 0;
-webkit-perspective: 850px;
perspective: 850px;
text-align: center;
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
cursor: pointer;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.box h2 {
position: absolute;
width: 3em;
height: 3em;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 0;
padding: 0.2em;
font-size: 1.3em;
line-height: 2.7em;
color: white;
background: #001021;
border-radius: 50%;
box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.15);
border-bottom: none !important;
}
.article:hover .box {
background: -webkit-linear-gradient(135deg, #285888 50%, #0d447d 50%);
background: linear-gradient(135deg, #285888 50%, #0d447d 50%);
-webkit-transform: rotateY(-97deg);
transform: rotateY(-97deg);
-webkit-perspective-origin: 0;
perspective-origin: 0;
-webkit-transition: all .4s ease-in;
transition: all .4s ease-in;
}
.article:hover .box h2 {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.article:hover .bauble {
display: inline-block;
-webkit-animation: shake 1s;
animation: shake 1s;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.openedSurprise {
background: -webkit-linear-gradient(135deg, #285888 50%, #0d447d 50%);
background: linear-gradient(135deg, #285888 50%, #0d447d 50%);
-webkit-transform: rotateY(-97deg);
transform: rotateY(-97deg);
-webkit-perspective-origin: 0;
perspective-origin: 0;
-webkit-transition: all .4s ease-in;
transition: all .4s ease-in;
}
.present {
position: absolute;
top: 0;
left: 0;
background: #0b3f7b;
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15), inset 0 0 30px 20px rgba(0, 0, 0, 0.4);
z-index: -1;
}
.bauble {
position: relative;
width: 2.75em;
height: 2.75em;
background: #da541a;
margin: 25% auto 0 auto;
font-size: 2em;
font-weight: bold;
line-height: 2.75em;
color: white;
border-radius: 50%;
}
.bauble:after {
content: "";
position: absolute;
top: -5%;
left: 50%;
margin-left: -15%;
width: 30%;
height: 10%;
background: inherit;
}
.bauble:before {
content: "";
width: 24%;
height: 20%;
position: absolute;
top: -15%;
left: 50%;
margin-left: -12%;
border-radius: 50%;
border: 0.35rem solid #da541a;
z-index: 0;
}
.article:hover .box.closedDoor { transform: none; }
#adventBoxes{background-image:url("/images/image/xmas-back.jpg");
background-color:#eaeaea;
padding-top:15px;padding-bottom:10px;}
.article .box h2 {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* customizable snowflake styling */
.snowflake {
color: #fff;
font-size: 1em;
font-family: Arial, sans-serif;
text-shadow: 0 0 5px #000;
}
@-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:9999;-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:10s,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:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
/*TIMER*/
#timer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding-top:20px;
}
.number-list {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.number-list .item {
width: 60px;
height: 60px;
background: #285888;
margin-right: 15px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
font-weight: 700;
font-family: sans-serif;
}
.unit-list {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
padding-bottom: 25px;
}
.unit-list .item {
width: 60px;
margin-right: 15px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #285888;
font-weight: bold;
font-family: sans-serif;
}
.timer-end {
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #006741;
font-weight: 700;
font-family: sans-serif;
}
.end_text{
color:#0c447c;
font-size: 28px;
padding-bottom: 20px;
}
.deal-box{
align-items: center;
justify-content: center;
display: flex;
}
.deal-img{
max-width:70%}
.deal_save{
padding: 10px;
border-radius: 10px;
margin-top: 20px;
color: #FFF;
font-size:24px;
text-align:center;
font-weight:bold;
background-color:#0c447c;
}