Your IP : 216.73.217.62
* {
padding: 0px;
margin: 0px;
outline: none;
}
body {
font-family: 'Didact Gothic', sans-serif;
font-size: 20px;
line-height: 25px;
color: #00293c;
width: 100%;
background: #ffffff;
position: relative;
word-wrap: break-word;
text-align: justify;
-webkit-font-smoothing: antialiased!important;
font-smoothing: antialiased!important;
-moz-osx-font-smoothing: grayscale!important;
font-smooth: always!important;
}
img {
border: none;
max-width: 100%;
height: auto;
}
.width {
margin: 0px auto;
position: relative;
}
.fix {
position: fixed;
width: 100%;
bottom: 44px;
left: 0px;
}
.wishes {
text-align: center;
margin: 0 auto;
width: 800px;
background: #f5f5f5;
border: 2px solid #ddd;
position: fixed;
top: -200px;
left: 50%;
margin-left: -400px;
}
h1 {
padding: 50px;
font-size: 40px;
line-height: 45px
}
.wishes-animation {
-webkit-animation: wishes-animation 0.5s ease-in-out 13s 1 normal forwards;
-moz-animation: wishes-animation 0.5s ease-in-out 13s 1 normal forwards;
-o-animation: wishes-animation 0.5s ease-in-out 13s 1 normal forwards;
animation: wishes-animation 0.5s ease-in-out 13s 1 normal forwards;
}
.egg-c {
left: 50%;
margin-left: -94.5px;
position: absolute;
top: 20px;
height: 100%;
width: 100%;
z-index: 9;
}
.egg {
line-height: 0px;
position: absolute;
left: 0px;
bottom: 0px;
z-index: 8;
}
.egg-top {
z-index: 10px;
}
.grass {
background: url('../images/grass.png') center center repeat-x;
height: 100px;
}
.grass-bg {
background: #5aa911;
height: 30px;
bottom: 0px;
}
.grass-bg,
.grass {
position: absolute;
width: 100%;
left: 0px;
}
.grass.back {
bottom: 30px;
z-index: 7;
background-position-x: 5px;
}
.grass.front {
bottom: 0px;
z-index: 12;
}
.crack {
line-height: 0px;
height: 1px;
background: #000;
border-bottom: 1px solid #ccc;
position: absolute;
z-index: 9;
}
.cr1 {
width: 15px;
top: 169px;
left: 2px;
}
.cr2 {
width: 11px;
top: 173px;
left: 14px;
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-ms-transform: rotate(50deg);
-o-transform: rotate(50deg);
transform: rotate(50deg);
}
.cr3 {
width: 15px;
top: 172px;
left: 21px;
-webkit-transform: rotate(-38deg);
-moz-transform: rotate(-38deg);
-ms-transform: rotate(-38deg);
-o-transform: rotate(-38deg);
transform: rotate(-38deg);
}
.cr4 {
width: 13px;
top: 175px;
left: 27px;
-webkit-transform: rotate(26deg);
-moz-transform: rotate(26deg);
-ms-transform: rotate(26deg);
-o-transform: rotate(26deg);
transform: rotate(26deg);
}
.cr5 {
width: 30px;
top: 191px;
left: 149px;
-webkit-transform: rotate(42deg);
-moz-transform: rotate(42deg);
-ms-transform: rotate(42deg);
-o-transform: rotate(42deg);
transform: rotate(42deg);
}
.cr6 {
width: 19px;
top: 173px;
left: 140px;
-webkit-transform: rotate(65deg);
-moz-transform: rotate(65deg);
-ms-transform: rotate(65deg);
-o-transform: rotate(65deg);
transform: rotate(65deg);
}
.cr7 {
width: 25px;
top: 183px;
left: 130px;
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
transform: rotate(-1deg);
}
.cr8 {
width: 10px;
top: 180px;
left: 132px;
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
transform: rotate(35deg);
}
.cr9 {
width: 15px;
top: 172px;
left: 135px;
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-ms-transform: rotate(8deg);
-o-transform: rotate(8deg);
transform: rotate(8deg);
}
.chicken-main-container {
width: 100%;
position: fixed;
left: 0;
bottom: -150px;
text-align: center;
}
.chicken-container {
width: 180px;
height: 200px;
top: 0;
position: absolute;
left: 50%;
margin-left: -90px;
top: -280px;
}
.chicken-head {
background: #FFEB3B;
width: 70px;
height: 70px;
margin: 0 auto;
border: 1px solid #FFC107;
-webkit-border-radius: 50% 50% 50% 50%;
-moz-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
position: relative;
z-index: 9;
top: 20px;
}
.chicken-eye {
background: #ffffff;
width: 20px;
height: 20px;
position: absolute;
-webkit-border-radius: 50% 50% 50% 50%;
-moz-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
top: 15px;
}
.left-eye {
left: 7px;
}
.right-eye {
right: 8px;
}
.chicken-eye:after {
content: '';
display: block;
background: #000000;
width: 10px;
height: 10px;
position: absolute;
-webkit-border-radius: 50% 50% 50% 50%;
-moz-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
top: 50%;
margin-top: -5px;
left: 50%;
margin-left: -5px
}
.chicken-beak {
background: #920000;
width: 10px;
height: 15px;
position: absolute;
-webkit-border-radius: 50% 50% 50% 50%;
-moz-border-radius: 50% 50% 50% 50%;
top: 45px;
left: 50%;
margin-left: -5px;
}
.chicken-beak:after,
.chicken-beak:before {
content: '';
display: block;
width: 0px;
height: 0px;
position: absolute;
left: -5px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.chicken-beak:after {
border-top: 10px solid #dd0000;
top: 8px;
-webkit-animation: beak-animation 1s ease-in-out 11.5s infinite normal forwards;
-moz-animation: beak-animation 1s ease-in-out 11.5s infinite normal forwards;
-o-animation: beak-animation 1s ease-in-out 11.5s infinite normal forwards;
animation: beak-animation 1s ease-in-out 11.5s infinite normal forwards;
}
.chicken-beak:before {
top: -3px;
border-bottom: 10px solid #dd0000;
}
.chicken-body {
background: #FFEB3B;
width: 150px;
height: 170px;
margin: 0 auto;
border: 1px solid #FFC107;
-webkit-border-radius: 50% 50% 0% 0%;
-moz-border-radius: 50% 50% 0% 0%;
border-radius: 50% 50% 0% 0%;
position: relative;
}
.chicken-body:before,
.chicken-body:after {
content: '';
display: block;
width: 0px;
height: 0px;
position: absolute;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 160px solid #ffeb3b;
top: -40px;
z-index: -1;
}
.chicken-body:before {
left: -45px;
transform: rotate(-40deg);
-webkit-animation: left-wing-animation 0.5s ease-in-out 11.5s infinite normal forwards;
-moz-animation: left-wing-animation 0.5s ease-in-out 11.5s infinite normal forwards;
-o-animation: leff-wing-animation 0.5s ease-in-out 11.5s infinite normal forwards;
animation: left-wing-animation 0.5s ease-in-out 11.5s infinite normal forwards;
}
.chicken-body:after {
right: -45px;
transform: rotate(40deg);
-webkit-animation: right-wing-animation 0.5s ease-in-out 11.5s infinite normal forwards;
-moz-animation: right-wing-animation 0.5s ease-in-out 11.5s infinite normal forwards;
-o-animation: right-wing-animation 0.5s ease-in-out 11.5s infinite normal forwards;
animation: right-wing-animation 0.5s ease-in-out 11.5s infinite normal forwards;
}
.chicken-animation {
-webkit-animation: chicken-animation 3s ease-in-out 8.5s 1 normal forwards;
-moz-animation: chicken-animation 3s ease-in-out 8.5s 1 normal forwards;
-o-animation: chicken-animation 3s ease-in-out 8.5s 1 normal forwards;
animation: chicken-animation 3s ease-in-out 8.5s 1 normal forwards;
}
.animation-fly {
-webkit-animation: fly 1s ease-in-out 8s 1 normal forwards;
-moz-animation: fly 1s ease-in-out 8s 1 normal forwards;
-o-animation: fly 1s ease-in-out 8s 1 normal forwards;
animation: fly 1s ease-in-out 8s 1 normal forwards;
}
.animation-shake {
-webkit-animation: shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) 3s 5;
-moz-animation: shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) 3s 5;
-o-animation: shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) 3s 5;
animation: shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) 3s 5;
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
@-webkit-keyframes shake {
0% {
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
20%,
90% {
-webkit-transform: translate3d(-1px, 0px, 0px);
transform: translate3d(-1px, 0px, 0px);
}
30%,
80% {
-webkit-transform: translate3d(2px, 0px, 0px);
transform: translate3d(2px, 0px, 0px);
}
40%,
50%,
70% {
-webkit-transform: translate3d(-4px, 0px, 0px);
transform: translate3d(-4px, 0px, 0px);
}
45%,
60% {
-webkit-transform: translate3d(4px, 0px, 0px);
transform: translate3d(4px, 0px, 0px);
}
}
@-moz-keyframes shake {
0% {
-moz-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
20%,
90% {
-moz-transform: translate3d(-1px, 0px, 0px);
transform: translate3d(-1px, 0px, 0px);
}
30%,
80% {
-moz-transform: translate3d(2px, 0px, 0px);
transform: translate3d(2px, 0px, 0px);
}
40%,
50%,
70% {
-moz-transform: translate3d(-4px, 0px, 0px);
transform: translate3d(-4px, 0px, 0px);
}
45%,
60% {
-moz-transform: translate3d(4px, 0px, 0px);
transform: translate3d(4px, 0px, 0px);
}
}
@-o-keyframes shake {
0% {
-o-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
20%,
90% {
-o-transform: translate3d(-1px, 0px, 0px);
transform: translate3d(-1px, 0px, 0px);
}
30%,
80% {
-o-transform: translate3d(2px, 0px, 0px);
transform: translate3d(2px, 0px, 0px);
}
40%,
50%,
70% {
-o-transform: translate3d(-4px, 0px, 0px);
transform: translate3d(-4px, 0px, 0px);
}
45%,
60% {
-o-transform: translate3d(4px, 0px, 0px);
transform: translate3d(4px, 0px, 0px);
}
}
@keyframes shake {
0% {
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
20%,
90% {
-webkit-transform: translate3d(-1px, 0px, 0px);
-moz-transform: translate3d(-1px, 0px, 0px);
-ms-transform: translate3d(-1px, 0px, 0px);
-o-transform: translate3d(-1px, 0px, 0px);
transform: translate3d(-1px, 0px, 0px);
}
30%,
80% {
-webkit-transform: translate3d(2px, 0px, 0px);
-moz-transform: translate3d(2px, 0px, 0px);
-ms-transform: translate3d(2px, 0px, 0px);
-o-transform: translate3d(2px, 0px, 0px);
transform: translate3d(2px, 0px, 0px);
}
40%,
50%,
70% {
-webkit-transform: translate3d(-4px, 0px, 0px);
-moz-transform: translate3d(-4px, 0px, 0px);
-ms-transform: translate3d(-4px, 0px, 0px);
-o-transform: translate3d(-4px, 0px, 0px);
transform: translate3d(-4px, 0px, 0px);
}
45%,
60% {
-webkit-transform: translate3d(4px, 0px, 0px);
-moz-transform: translate3d(4px, 0px, 0px);
-ms-transform: translate3d(4px, 0px, 0px);
-o-transform: translate3d(4px, 0px, 0px);
transform: translate3d(4px, 0px, 0px);
}
}
@-webkit-keyframes fly {
0% {
bottom: 0px;
left: 0px;
}
50% {
bottom: 400px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
100% {
bottom: 0px;
left: 250px;
-webkit-transform: rotate(160deg);
transform: rotate(160deg);
}
}
@-moz-keyframes fly {
0% {
bottom: 0px;
left: 0px;
}
50% {
bottom: 400px;
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
100% {
bottom: 0px;
left: 250px;
-moz-transform: rotate(160deg);
transform: rotate(160deg);
}
}
@-o-keyframes fly {
0% {
bottom: 0px;
left: 0px;
}
50% {
bottom: 400px;
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
100% {
bottom: 0px;
left: 250px;
-o-transform: rotate(160deg);
transform: rotate(160deg);
}
}
@keyframes fly {
0% {
bottom: 0px;
left: 0px;
}
50% {
bottom: 400px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
100% {
bottom: 0px;
left: 250px;
-webkit-transform: rotate(160deg);
-moz-transform: rotate(160deg);
-ms-transform: rotate(160deg);
-o-transform: rotate(160deg);
transform: rotate(160deg);
}
}
@-webkit-keyframes chicken-animation {
0% {
bottom: -150px;
}
100% {
bottom: 0px;
}
}
@-moz-keyframes chicken-animation {
0% {
bottom: -150px;
}
100% {
bottom: 0px;
}
}
@-o-keyframes chicken-animation {
0% {
bottom: -150px;
}
100% {
bottom: 0px;
}
}
@keyframes chicken-animation {
0% {
bottom: -150px;
}
100% {
bottom: 0px;
}
}
@-webkit-keyframes beak-animation {
0% {
top: 8px;
}
50% {
top: 12px;
}
100% {
top: 8px;
}
}
@-moz-keyframes beak-animation {
0% {
top: 8px;
}
50% {
top: 12px;
}
100% {
top: 8px;
}
}
@-o-keyframes beak-animation {
0% {
top: 8px;
}
50% {
top: 12px;
}
100% {
top: 8px;
}
}
@keyframes beak-animation {
0% {
top: 8px;
}
50% {
top: 12px;
}
100% {
top: 8px;
}
}
@-webkit-keyframes left-wing-animation {
0% {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
50% {
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
100% {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
}
@-moz-keyframes left-wing-animation {
0% {
-moz-transform: rotate(-40deg);
transform: rotate(-40deg);
}
50% {
-moz-transform: rotate(-60deg);
transform: rotate(-60deg);
}
100% {
-moz-transform: rotate(-40deg);
transform: rotate(-40deg);
}
}
@-o-keyframes left-wing-animation {
0% {
-o-transform: rotate(-40deg);
transform: rotate(-40deg);
}
50% {
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
100% {
-o-transform: rotate(-40deg);
transform: rotate(-40deg);
}
}
@keyframes left-wing-animation {
0% {
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
-ms-transform: rotate(-40deg);
-o-transform: rotate(-40deg);
transform: rotate(-40deg);
}
50% {
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
100% {
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
-ms-transform: rotate(-40deg);
-o-transform: rotate(-40deg);
transform: rotate(-40deg);
}
}
@-webkit-keyframes right-wing-animation {
0% {
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
50% {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
100% {
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
}
@-moz-keyframes right-wing-animation {
0% {
-moz-transform: rotate(40deg);
transform: rotate(40deg);
}
50% {
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}
100% {
-moz-transform: rotate(40deg);
transform: rotate(40deg);
}
}
@-o-keyframes right-wing-animation {
0% {
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
50% {
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
100% {
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
}
@keyframes right-wing-animation {
0% {
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
50% {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
100% {
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
}
@-webkit-keyframes wishes-animation {
0% {
top: -200px
}
100% {
top: -2px
}
}
@-moz-keyframes wishes-animation {
0% {
top: -200px
}
100% {
top: -2px
}
}
@-o-keyframes wishes-animation {
0% {
top: -200px
}
100% {
top: -2px
}
}
@keyframes wishes-animation {
0% {
top: -200px
}
100% {
top: -2px
}
}
.author {
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.author {
padding: 5px 5%;
z-index: 9;
position: fixed;
bottom: 0px;
width: 90%;
background: #eeeeee;
font-size: 13px;
line-height: 15px;
border-top: 1px solid #cccccc;
height: 33px;
}
.author p {
margin: 0px;
}
.author p: nth-child(1) {
margin: 0px 0px 2.5px 0px;
}