.zira-celebration-bg {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999998;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, .8);
animation: ziraFade 3s ease;
}
.zira-celebration {
display: none;
position: fixed;
top: 0;
left: 5%;
width: 90%;
max-height: 100%;
overflow: auto;
z-index: 999999;
background-color: rgb(27, 68, 84);
background-color: rgba(27, 68, 84, 0.9);
background: linear-gradient(to bottom, rgb(27, 68, 84), rgb(11, 2, 27));
background: linear-gradient(to bottom, rgba(27, 68, 84, 0.9), rgba(11, 2, 27, 0.9));
border: 15px solid #e9f6ff;
border-radius: 15px;
box-shadow: 0px 0px 10px #1f1f1f;
animation: ziraFade 3s ease;
}
.zira-celebration.holiday-red {
background-color: rgb(224, 21, 21);
background-color: rgba(224, 21, 21, 0.9);
background: linear-gradient(to bottom, rgb(224, 21, 21), rgb(38, 9, 9));
background: linear-gradient(to bottom, rgba(224, 21, 21, 0.9), rgba(38, 9, 9, 0.9));
}
.zira-celebration.holiday-orange {
background-color: rgb(252, 116, 0);
background-color: rgba(252, 116, 0, 0.9);
background: linear-gradient(to bottom, rgb(252, 116, 0), rgb(179, 2, 2));
background: linear-gradient(to bottom, rgba(252, 116, 0, 0.9), rgba(179, 2, 2, 0.9));
}
.zira-celebration.holiday-yellow {
background-color: rgb(237, 210, 7);
background-color: rgba(237, 210, 7, 0.9);
background: linear-gradient(to bottom, rgb(237, 210, 7), rgb(161, 130, 0));
background: linear-gradient(to bottom, rgba(237, 210, 7, 0.9), rgba(161, 130, 0, 0.9));
}
.zira-celebration.holiday-green {
background-color: rgb(38, 130, 0);
background-color: rgba(38, 130, 0, 0.9);
background: linear-gradient(to bottom, rgb(182, 226, 4), rgb(38, 130, 0));
background: linear-gradient(to bottom, rgba(182, 226, 4, 0.9), rgba(38, 130, 0, 0.9));
}
.zira-celebration.holiday-blue {
background-color: rgb(0, 55, 125);
background-color: rgba(0, 55, 125, .9);
background: linear-gradient(to bottom, rgb(1, 169, 251), rgb(0, 55, 125));
background: linear-gradient(to bottom, rgba(1, 169, 251, 0.9), rgba(0, 55, 125, 0.9));
}
.zira-celebration.holiday-purple {
background-color: rgb(40, 0, 119);
background-color: rgba(40, 0, 119, 0.9);
background: linear-gradient(to bottom, rgb(166, 0, 208), rgb(40, 0, 119));
background: linear-gradient(to bottom, rgba(166, 0, 208, 0.9), rgba(40, 0, 119, 0.9));
}
.zira-celebration.holiday-pink {
background-color: rgb(208, 0, 139);
background-color: rgba(208, 0, 139, 0.9);
background: linear-gradient(to bottom, rgb(208, 0, 139), rgb(75, 3, 41));
background: linear-gradient(to bottom, rgba(208, 0, 139, 0.9), rgba(75, 3, 41, 0.9));
}
.zira-celebration .celebration-image {
display: block;
width: 600px;
height: auto;
margin: 0 auto;
max-width: 100%;
border: 6px solid #fbfbfb;
}
.zira-celebration .celebration-date,
.zira-celebration .celebration-message {
width: 100%;
min-height: 75px;
color: #fff;
font-weight: bold;
text-align: center;
font-size: 25px;
padding: 20px;
text-transform: uppercase;
}
.zira-celebration .celebration-close {
display: none;
position: absolute;
top: 10px;
right: 10px;
width: 19px;
height: 19px;
background: url(../../images/close-small.png) no-repeat 0 0;
cursor: pointer;
}
.new-year-theme-img {
display: none;
position: fixed;
z-index: 900;
background-repeat: no-repeat;
background-position: 0 0;
border: none;
}
.new-year-theme-img-1 {
top: 120px;
left: 0;
animation: newyearimg 10s linear infinite;
}
.new-year-theme-img-2 {
top: 0;
right: 0;
animation: newyearimg2 20s linear infinite;
}
.new-year-theme-img-3 {
bottom: 0;
right: 0;
}
.new-year-theme-img-4 {
position: absolute;
top: 0;
left: 100px;
z-index: 98;
}
.new-year-theme-img-5 {
bottom: 0;
left: 0;
width: 100%;
background-repeat: repeat-x;
}
.new-year-theme-img-6 {
position: absolute;
top: 0;
left: 0;
z-index: 98;
max-width: 100%;
animation: newyearimg2 20s linear infinite;
}
@keyframes newyearimg {
0% {
transform: translateY(-5px) rotateZ(-1deg);
}
25% {
transform: translateY(0px) rotateZ(0deg);
}
50% {
transform: translateY(5px) rotateZ(1deg);
}
75% {
transform: translateY(0px) rotateZ(0deg);
}
100% {
transform: translateY(-5px) rotateZ(-1deg);
}
}
@keyframes newyearimg2 {
0% {
transform: translateY(-5px) rotateZ(1deg) translateX(5px);
}
25% {
transform: translateY(0px) rotateZ(0deg) translateX(0px);
}
50% {
transform: translateY(5px) rotateZ(-1deg) translateX(-5px);
}
75% {
transform: translateY(0px) rotateZ(0deg) translateX(0px);
}
100% {
transform: translateY(-5px) rotateZ(1deg) translateX(5px);
}
}
@media only screen and (max-width: 767px) {
.zira-celebration .celebration-image {
border: none;
}
.zira-celebration .celebration-date,
.zira-celebration .celebration-message {
font-size: 20px;
}
.new-year-theme-img-1 {
top: auto;
bottom: 0px;
}
.new-year-theme-img-4 {
left: 0;
width: 62px;
}
}