@charset "utf-8";

.eggs {text-align: center; overflow: hidden; }
.absorbed .eggs-info .eggstop { opacity: 0; visibility: hidden; top: 56px; }
.eggs-info { position: relative; text-align: center; float: left;}
.eggs-info .eggsimg { position: relative;}
.eggstop { position: relative; z-index: 5; border-radius: 50%; }
.eggs-info .eggsimg .eggstop:before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url(../images/radius.png) center no-repeat; background-size: cover !important; transform: scale(0.8); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); visibility: hidden; transition: 426ms 0ms ease-in-out; }
.eggs-info .eggsimg figure { display: block; line-height: 1; overflow: hidden; position: relative; border-radius: 50%; overflow: hidden; }
.eggs-info .eggsimg figure img { display: block; line-height: 1; width: 100%; height: auto; border-radius: 50%; overflow: hidden; }
.eggstext { width: 100%; position: absolute; left: 0; top: 50%; text-align: center; margin-top: -20px; }
.eggstext strong { display: block; width: 91px; height: 48px; line-height: 1; margin: auto; margin-bottom: 20px; text-align: center; }
.eggstext strong img { max-width: 100%; height: auto; margin: auto; line-height: 0; }
.eggs-info .eggstext strong.aa { background: url(../images/aa.png) center no-repeat; }
.eggs-info .eggstext strong.gu { background: url(../images/egge.png) center no-repeat; }
.eggs-info .eggstext strong.omg { background: url(../images/omg.png) center no-repeat; }
.eggstext span { display: block; text-align: center; color: #fff; font-size: 32px; line-height: 1; margin-bottom: 15px; }
.eggstext b { display: block; line-height: 1; text-align: center; color: #ffdb83; font-size: 30px; font-weight: normal; }
.eggs-info .eggsimg .eggstop:hover:before { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); visibility: visible; ransition: 426ms 150ms ease-in-out; }
.eggs-info .eggstop:hover { -webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); -webkit-animation: beat 0.5s 1; animation: beat 0.5s 1; }
.eggs-info:hover .more { opacity: 1; top: 0; filter: alpha(opacity=100); }
.more { width: 164px; height: 49px; margin: auto; margin-top: 22px; position: relative; border-radius: 26px; background: #ee7133; top: 30px; opacity: 0; transition: 380ms ease-in-out; filter: alpha(opacity=0); }
.more a, .more span { display: block; padding-left: 36px; text-align: left; line-height: 49px; color: #fff; font-size: 16px; background: url(../images/arrow.png) 121px center no-repeat; }

@keyframes fadedown {
    from { transform: translateY(-100%); opacity: 0; }

    to { transform: translateY(0); opacity: 1; }
}

@-webkit-keyframes arrow {
    0% { opacity: 0; -webkit-transform: translate3d(0px, 0px, 0px); }
    33% { opacity: 1; }
    66% { opacity: 1; }
    100% { opacity: 0; -webkit-transform: translate3d(0px, 10px, 0px); }
}

@keyframes arrow {
    0% { opacity: 0; transform: translate3d(0px, 0px, 0px); }
    33% { opacity: 1; }
    66% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(0px, 10px, 0px); }
}

@keyframes beat {
    from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }

    25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); }

    50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); }

    75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }

    from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }

    25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); }

    50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); }

    75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }
}

@-webkit-keyframes beat {
    from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }

    25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); }

    50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); }

    75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }

    from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }

    25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); }

    50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); }

    75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }
}