@charset 'UTF-8';
@import 'reset.css';
.center-element
{
    text-align: center;
}
.fix_overflow
{
    overflow: visible;
}
.container-fluid
{
    max-width: 1000px;
    min-height: 100%;
    margin-right: auto;
    margin-left: auto;
}
.body_bg
{
    background-color: #f44e5b;
}
.hide-lg
{
    display: none;
}
/*----------------------------------------------------
    header
----------------------------------------------------*/
header
{
    width: 100%;
    height: 60px;

    background: #fff;
}
header .inner
{
    position: relative;

    clear: both;
    overflow: hidden;

    width: 950px;
    margin: 0 auto 10px;
}
header .inner h1
{
    width: 100%;
}
header .inner h1 img
{
    float: left;

    margin: 15px;
}
header .inner h1 span
{
    font-size: .9em;

    display: block;
    float: right;

    padding-top: 25px;
    padding-right: 25px;

    text-align: right;

    color: #999;
}
header .inner h1 span a
{
    text-decoration: none;

    color: #999;
}
header .inner h1 span a:hover
{
    color: #c90b0e;
}

#main
{
    position: relative;

    clear: both;
    /*overflow: hidden;*/

    width: 100%;

    background-color: #f44e5b;
}
article
{
    display: block;
    clear: both;
    overflow: hidden;

    height: auto;
}

.inner
{
    font-family: '微軟正黑體', Verdana, Arial, Helvetica, sans-serif;

    position: relative;
    /*overflow: hidden;*/

    max-width: 1000px;
    height: auto;
    margin: 0 auto;
}
.anchor-target
{
    position: relative;
    top: -6em;

    display: block;
    visibility: hidden;
}
.content_wrapper
{
    box-sizing: border-box;
    width: 100%;
    padding: 0 0 1vw;

    border-top: 0;
}

.content_bg_color
{
    background: rgba(255,255,255,1);
    background:    -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 47%, rgba(242,242,242,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(250,250,250,1)), color-stop(100%, rgba(242,242,242,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 47%, rgba(242,242,242,1) 100%);
    background:      -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 47%, rgba(242,242,242,1) 100%);
    background:     -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 47%, rgba(242,242,242,1) 100%);
    background:         linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 47%, rgba(242,242,242,1) 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2', GradientType=0 );
}
/*==event content==*/

.desktop-wide-bg .inner img.title_bg
{
    position: absolute;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;

    display: inline-block;

    width: 100%;
    max-width: 638px;
    margin-top: 1%;
}
.desktop-wide-bg .inner img.desktop_title
{
    position: relative;
    z-index: 20;
    left: 0;

    display: inline-block;

    width: 100%;
    max-width: 394px;
    margin-top: 150px;
}
.desktop-wide-bg .inner img.firework02
{
    position: absolute;
    right: 3%;
    bottom: 12%;

    animation: spin 20s linear infinite reverse;
    animation-delay: 1300ms;
}
.desktop-wide-bg .inner img.firework01
{
    position: absolute;
    z-index: 2;
    top: 10%;
    right: 20%;

    animation: spin 15s linear infinite;
    animation-delay: 1200ms;
}
@keyframes spin
{
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
    }
}
.desktop-wide-bg
{
    text-align: center;

    background-color: #ffea60;
    background-image: url(../images/top_bg_bottom.png), url(../images/top_bg.png);
    background-repeat: no-repeat, no-repeat;
    background-position: bottom center, center top;
    background-size: contain, cover;
}

.desktop-wide-bg .inner img.subtitle
{
    position: relative;
    z-index: 20;
    top: -48px;
    right: 0;
    left: 0;

    display: inline-block;

    width: 100%;
    max-width: 615px;
}
.desktop-wide-bg .inner img.timer
{
    position: relative;
    z-index: 30;
    right: -10%;

    display: inline-block;

    margin-bottom: 12%;

    animation-duration: 3.5s;
    animation-iteration-count: infinite;

    animation-fill-mode: both;
    -webkit-filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, .3)); /* Safari 6.0 - 9.0 */
            filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, .3));
}
.desktop-wide-bg .inner img.timer:hover
{
    animation-play-state: paused;
}
img.photo
{
    position: absolute;
    z-index: 10;
    top: 32px;
    left: -5%;

    display: inline-block;

    width: 100%;
    max-width: 550px;
}
/*==product list==*/
.list-block_wrapper
{
    position: relative;
    z-index: 30;

    display:         flex;
    display: -webkit-flex;

    margin-bottom: 6%;
    margin-top:2%;
    /*padding: 0 2%;*/

            justify-content: space-around;
    -webkit-justify-content: space-around;
            align-items: center;
    -webkit-align-items: center;
}
.list-block_container
{
    position: relative;

    display:         flex;
    display: -webkit-flex;

    width: 46%;
    min-height: 456px;
    padding-top: 18px;

    text-align: center;

    color: #342f2d;
    border-width: 5px;
    border-style: solid;
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: white;

            align-items: flex-end;
    -webkit-align-items: flex-end;
            flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: center;
}

.list-block_container.border-green
{
    border-color: #0ee286;
}
.list-block_container.border-purple
{
    border-color: #a914f4;
}
.list-block_container.border-blue
{
    border-color: #00b7ee;
}
.list-title
{
    display: block;
    width: 100%;
    max-width: 600px;
    margin: auto;
	z-index:12;
	position: relative
		
}
.center-element h3
{ color:#fff;
	font-weight: 800;
	font-size:2.2em;
	 margin: auto;
	z-index:12;
	position: relative;
	font-style:italic;
	
}
.product_img
{
    width: 100%;
    max-width: 365px;
    margin-bottom: 3%;
}
.regular_text
{
    display: block;
    width: 100%;

}
.regular_text > h4
{
    font-size: 1.5em;
    line-height: 1.2;
    font-weight: 800;

}

dd.light_text
{
    font-size: 1.313em;
    font-weight: 300;
    line-height: 1.5;

    width: 100%;
	color: #FD0307
}
dt.highlight_text
{
    font-size: 1.8em;
    font-weight: 800;
    line-height: 1.5;

    width: 100%;

    color: black;
}
a.list-btn
{
    font-size: 1.8em;
    font-weight: 800;
    line-height: 1.8;

    position: relative;
    bottom: 0;

    display: flex;

    width: 100%;
    margin-top: 2%;

    transition: 400ms ease;
    letter-spacing: .1vw;

    color: #ff0;

    align-items: center;
    justify-content: center;
}
a.list-btn.green-btn
{
    background-color: #0ee286;
	width:100%
}
a.list-btn.purple-btn
{
    background-color: #a914f4;
}
a.list-btn.blue-btn
{
    background-color: #00b7ee;
}
img.hvr-icon
{
    display: inline-block;

    margin: auto 1%;
    height: 27px;
}

.mobile_top
{
    width: 100%;
}
.m-timer
{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    display: block;

    width: 85%;
    max-width: 504px;
    margin-right: auto;
    margin-left: auto;

    animation-duration: 3.5s;
    animation-iteration-count: infinite;

    animation-fill-mode: both;
    -webkit-filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, .3)); /* Safari 6.0 - 9.0 */
            filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, .3));
}

/*==end of product list==*/
/*==end of event content*/
/*=Notice row=*/
.notice-row
{
    line-height: 1.5;

    padding: 2vw 0;

    color: #666;
    background-color: white;
}
.notice-row .notice-inner
{
    width: 90%;
    margin: 0 auto;
}
.notice-row h4
{
    font-size: 1.125em;

    text-align: center;
}
.highlight
{
    font-weight: 800;

    color: #e4007f;
}
.notice-row ol
{
    padding-left: 1.5em;
}
.notice-row ol li
{
    margin-bottom: .5vw;
}
/*== end of Notice row==*/
.up
{
    width: 90%;
    margin: 0 auto;

    text-align: right;
}

footer
{
    position: absolute;
    left: 0;

    width: 100%;
}

footer .inner_b,
footer .inner_w
{
    font-size: .6825em;
    line-height: 70px;

    overflow: hidden;

    width: 1000px;
    margin: 0 auto;

    text-align: right;
}

footer .inner_b
{
    color: #000;
    background: #fff;
}

footer .inner_b .logo,
footer .inner_w .logo
{
    line-height: 1;

    float: left;

    margin-top: 15px;
}

footer .inner_w
{
    color: #fff;
    background: #000;
}

footer .copy
{
    margin-right: 20px;
}


.sales{
	width:85%;
	margin:0px auto;
	clear:both;
	font-size:2.5em;
	font-weight:bold;
	letter-spacing:1px;
	text-align:center;
	font-family:"微軟正黑體", "黑體", Arial, Helvetica, sans-serif;
	color:#fff;
	padding-bottom: 2em
	}
.sales .call{
	/*font-size:1.5em;*/
	font-style:italic;
	}	
.sales .notice{
	font-size:0.65em;
	font-weight:normal;
	}
@media screen and (max-width: 600px)
{
    hide-sm
    {
        display: none;
    }
    header
    {
        width: 100%;
        height: 70px;
        margin: 0 auto;
    }    header a.game-logo img
    {
        max-width: 150px;
        margin: 17px 0 20px 10px;
    }

    #main
    {
        height: auto;
        overflow: hidden;
    }
    .section01 p
    {
        font-size: 5vw;
        line-height: 1.6;

        margin-bottom: 7vw;

        letter-spacing: 0;
    }
}

@media screen and (max-width: 1199px) and (min-width: 768px)
{
    header .inner,
    article .inner
    {
        width: 95%;
    }
    header a.game-logo img
    {
        margin-top: 12px;
    }
    header .inner p span
    {
        padding-top: 26px;
    }
    .brand-logo
    {
        background-size: 100%;
    }
}
@media screen and (max-width: 1366px) and (min-width: 1024px)
{
	
	    img.photo
    {
		width: 75% !important;
      left: 3%;
    }
    .product_img
    {
        width: 85%;
    }
}
@media screen and (max-width: 1024px) and (min-width: 768px)
{
    .product_img
    {
        width: 85%;
    }
}
@media screen and (max-width: 767px)
{
    header .inner {
    width: 100%;
    }
    .hide-lg-md
    {
        display: block;
    }
    .hide-lg
    {
        display: block;
    }
    .hide-sm
    {
        display: none;
    }
    .content_wrapper
    {
        height: auto;
    }

    article
    {
        width: 100%;
    }
     #main
    {
        height: auto;
        overflow: hidden;
    }

    footer .inner_b,
    footer .inner_w
    {
        width: auto;
    }
    .container-fluid
    {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }
    .content_wrapper
    {
        padding: 3vw 4vw;
    }
    .list-block_container
    {
        width: 95%;
        padding-top: 10.5%;

        align-items: initial;
        -webkit-align-items: initial;
    }
    .list-block_container:nth-child(even)
    {
        top: auto;

        margin: 6% auto;
    }
    .product_img
    {
        width: 85%;
        max-width: 380px;
        height: 100%;
    }
    .list-block_wrapper
    {
        top: auto;

                flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
    }

    a.list-btn
    {
        font-size: 8vw;

        letter-spacing: 2px;
		
   
    }
    .list-title
    {
        /* position: absolute; */
        top: 1%;

        display: inline-block;
        /* left: 36%; */

        width: 100%;
        max-width: 277px;
    }
    .list-block_wrapper
    {
        margin-bottom: 12%;
    }
    .desktop-wide-bg
    {
        background-image: unset;
    }
}
@media screen and (max-width: 540px)
{
	
	
	
	.center-element h3
{ color:#fff;
	font-size:1.6em;
	margin: auto 10%;
	z-index:12;
	position: relative;
	font-style:italic;
	line-height: 140% 
}
	
    header .inner
    {
        width: 100%;
    }

    .notice ul
    {
        width: auto;
    }
    .notice ul li
    {
        font-size: 1em;
        line-height: 1.4;
    }


    footer .inner_b .logo,
    footer .inner_w .logo
    {
        clear: both;

        margin-top: 8px;
    }
	
	
	.sales{
	width:95%;
	margin:0px auto;
	font-size:1.45em;
	letter-spacing:normal;
	}
.sales .call{
	font-size:1.2em;
	line-height: 1.5;
	}
	.sales .call span
	{
		display: block;
	}
.sales .notice{
	font-size:0.6em;
	}
}
@media screen and (max-width: 832px) and (min-width: 768px)
{
    img.photo
    {
		width: 75% !important;
      left: -2%;
    }
    .desktop-wide-bg .inner img.desktop_title
    {
        left:16%;
    }
    .desktop-wide-bg .inner img.timer
    {
        margin-bottom:7%;
        right:-7%;
        max-width: 220px;
    }
    .desktop-wide-bg .inner img.subtitle
    {
        top:-60px;
    }
    .desktop-wide-bg .inner img.firework02
    {
        right:auto;
        left:3%;
        bottom:8%;
    }
    .product_img
    {
        width: 85%;
    }
    .list-block_wrapper
    {
        align-items: initial;
    }
    .list-block_container
    {
        padding-top:25px;
    }
    .list-title
    {
        margin: 0 auto 3%;
    }

}
@media screen and (max-width: 832px) and (min-width: 625px)
{
    header .inner p span
    {
        padding-top: 25px;
    }
    footer .inner_b,
    footer .inner_w
    {
        line-height: 1;

        padding: 1% 0 1% 2%;
    }
    footer .inner_b .logo,
    footer .inner_w .logo
    {
        margin-top: 2px;
    }
    footer .copy
    {
        display: inline-table;

        margin-top: 16px;
    }
}
@media screen and (max-width: 624px)
{
    footer .inner_b,
    footer .inner_w
    {
        font: 11px/1.3em Verdana, Geneva, sans-serif;

        text-align: left;
    }
}

@media screen and (max-width: 624px) and (min-width: 435px)
{
    footer .copy
    {
        float: right;

        margin: 23px 20px 20px;
    }
}

@media screen and (max-width: 434px)
{
    footer .copy
    {
        float: left;

        margin: 19px 0 20px 20px;
    }
}
@media screen and (max-width: 374px) and (min-width: 300px)
{
    .list-block_container
    {
        width: 100%;
    }
    .product_img {
    width: 93%;}
}
/*for Edge browser settings*/
@media screen\0
{
    
    .list-block_wrapper,
    .list-block_container
    {
        flex: 0 1 auto;
    }
}
@media screen and (max-width: 767px), screen\9
{
    
    .list-block_wrapper,
    .list-block_container
    {
        flex: 0 1 auto;
    }
}
/*end of Edge browser settings*/
/*css effect*/


.smack
{
    -webkit-transform-origin: 50% 50%!important;
            transform-origin: 50% 50%!important;
    -webkit-animation: smack 1500ms linear both;
            animation: smack 1500ms linear both;
}

/* Generated with Bounce.js. Edit at https://goo.gl/51kj7G */

@-webkit-keyframes smack
{
    0%
    {
        -webkit-transform: matrix3d(.5, 0, 0, 0, 0, .5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(.5, 0, 0, 0, 0, .5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    3.2%
    {
        -webkit-transform: matrix3d(.673, .192, 0, 0, .126, .673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(.673, .192, 0, 0, .126, .673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    4.5%
    {
        -webkit-transform: matrix3d(.743, .25, 0, 0, .163, .743, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(.743, .25, 0, 0, .163, .743, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    6.41%
    {
        -webkit-transform: matrix3d(.836, .301, 0, 0, .196, .836, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(.836, .301, 0, 0, .196, .836, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    9.01%
    {
        -webkit-transform: matrix3d(.94, .308, 0, 0, .201, .94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(.94, .308, 0, 0, .201, .94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    12.71%
    {
        -webkit-transform: matrix3d(1.032, .234, 0, 0, .154, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1.032, .234, 0, 0, .154, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    13.51%
    {
        -webkit-transform: matrix3d(1.044, .212, 0, 0, .14, 1.044, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1.044, .212, 0, 0, .14, 1.044, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    17.92%
    {
        -webkit-transform: matrix3d(1.07, .098, 0, 0, .066, 1.07, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1.07, .098, 0, 0, .066, 1.07, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    18.92%
    {
        -webkit-transform: matrix3d(1.069, .077, 0, 0, .052, 1.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1.069, .077, 0, 0, .052, 1.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    25.23%
    {
        -webkit-transform: matrix3d(1.038, -.001, 0, 0, -.001, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1.038, -.001, 0, 0, -.001, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    29.03%
    {
        -webkit-transform: matrix3d(1.016, -.015, 0, 0, -.01, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1.016, -.015, 0, 0, -.01, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    31.43%
    {
        -webkit-transform: matrix3d(1.006, -.017, 0, 0, -.011, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1.006, -.017, 0, 0, -.011, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    34.63%
    {
        -webkit-transform: matrix3d(.997, -.014, 0, 0, -.01, .997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(.997, -.014, 0, 0, -.01, .997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    40.14%
    {
        -webkit-transform: matrix3d(.992, -.007, 0, 0, -.005, .992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(.992, -.007, 0, 0, -.005, .992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    56.46%
    {
        -webkit-transform: matrix3d(1, .001, 0, 0, .001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1, .001, 0, 0, .001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    62.36%
    {
        -webkit-transform: matrix3d(1.001, .001, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1.001, .001, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    81.48%
    {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    84.68%
    {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    100%
    {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}

@keyframes smack
{
    0%
    {
        -webkit-transform: matrix3d(.5, 0, 0, 0, 0, .5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(.5, 0, 0, 0, 0, .5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    3.2%
    {
        -webkit-transform: matrix3d(.673, .192, 0, 0, .126, .673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(.673, .192, 0, 0, .126, .673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    4.5%
    {
        -webkit-transform: matrix3d(.743, .25, 0, 0, .163, .743, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(.743, .25, 0, 0, .163, .743, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    6.41%
    {
        -webkit-transform: matrix3d(.836, .301, 0, 0, .196, .836, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(.836, .301, 0, 0, .196, .836, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    9.01%
    {
        -webkit-transform: matrix3d(.94, .308, 0, 0, .201, .94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(.94, .308, 0, 0, .201, .94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    12.71%
    {
        -webkit-transform: matrix3d(1.032, .234, 0, 0, .154, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1.032, .234, 0, 0, .154, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    13.51%
    {
        -webkit-transform: matrix3d(1.044, .212, 0, 0, .14, 1.044, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1.044, .212, 0, 0, .14, 1.044, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    17.92%
    {
        -webkit-transform: matrix3d(1.07, .098, 0, 0, .066, 1.07, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1.07, .098, 0, 0, .066, 1.07, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    18.92%
    {
        -webkit-transform: matrix3d(1.069, .077, 0, 0, .052, 1.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1.069, .077, 0, 0, .052, 1.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    25.23%
    {
        -webkit-transform: matrix3d(1.038, -.001, 0, 0, -.001, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1.038, -.001, 0, 0, -.001, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    29.03%
    {
        -webkit-transform: matrix3d(1.016, -.015, 0, 0, -.01, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1.016, -.015, 0, 0, -.01, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    31.43%
    {
        -webkit-transform: matrix3d(1.006, -.017, 0, 0, -.011, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1.006, -.017, 0, 0, -.011, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    34.63%
    {
        -webkit-transform: matrix3d(.997, -.014, 0, 0, -.01, .997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(.997, -.014, 0, 0, -.01, .997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    40.14%
    {
        -webkit-transform: matrix3d(.992, -.007, 0, 0, -.005, .992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(.992, -.007, 0, 0, -.005, .992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    56.46%
    {
        -webkit-transform: matrix3d(1, .001, 0, 0, .001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1, .001, 0, 0, .001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    62.36%
    {
        -webkit-transform: matrix3d(1.001, .001, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1.001, .001, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    81.48%
    {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    84.68%
    {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    100%
    {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}
@keyframes bounceInRight
{
    from,
    60%,
    75%,
    90%,
    to
    {
        animation-timing-function: cubic-bezier(.215, .610, .355, 1.000);
    }

    from
    {
        transform: translate3d(1200px, 0, 0);

        opacity: 0;
    }

    60%
    {
        transform: translate3d(-25px, 0, 0);

        opacity: 1;
    }

    75%
    {
        transform: translate3d(10px, 0, 0);
    }

    90%
    {
        transform: translate3d(-5px, 0, 0);
    }

    to
    {
        transform: none;
    }

}

.bounceInRight
{
    animation-name: bounceInRight;
}
@keyframes shake
{
    from,
    to
    {
        transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90%
    {
        transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80%
    {
        transform: translate3d(10px, 0, 0);
    }
}

.shake
{
    animation-name: shake;
}
/* Icon Wobble Horizontal */
@-webkit-keyframes hvr-icon-wobble-horizontal
{
    16.65%
    {
        -webkit-transform: translateX(6px);
                transform: translateX(6px);
    }
    33.3%
    {
        -webkit-transform: translateX(-5px);
                transform: translateX(-5px);
    }
    49.95%
    {
        -webkit-transform: translateX(4px);
                transform: translateX(4px);
    }
    66.6%
    {
        -webkit-transform: translateX(-2px);
                transform: translateX(-2px);
    }
    83.25%
    {
        -webkit-transform: translateX(1px);
                transform: translateX(1px);
    }
    100%
    {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}
@keyframes hvr-icon-wobble-horizontal
{
    16.65%
    {
        -webkit-transform: translateX(6px);
                transform: translateX(6px);
    }
    33.3%
    {
        -webkit-transform: translateX(-5px);
                transform: translateX(-5px);
    }
    49.95%
    {
        -webkit-transform: translateX(4px);
                transform: translateX(4px);
    }
    66.6%
    {
        -webkit-transform: translateX(-2px);
                transform: translateX(-2px);
    }
    83.25%
    {
        -webkit-transform: translateX(1px);
                transform: translateX(1px);
    }
    100%
    {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}


/*end of css effect*/