/* loperaio_sp_sale CSS */
body{ }
#GlovalNavi,#Header,.textbanner-area{ position: relative; z-index: 100; }
#Wrapper.sp_sale {
    width: 100%;
    position: relative;
    margin-top: -20px;
    min-width: 1010px;
    background: rgb(34, 34, 43);
    background-size: 100% auto;
    background-position: 50% -200px;
    overflow: hidden;

}
/*.sp_sale .bg_layer{
    position: absolute;
    top:0;
    width: 100%;
    height: 100%;
    background: url(../images/bg_icach.png)no-repeat;
    background-size: 105% auto;
    background-position: 50% 0;
    opacity: 1;
}*/
/*.sp_sale.top_0 .bg_layer{
    background-attachment: fixed;
}*/
.sp_sale .bg_layer{
    animation-duration: 2.5s;
}

#canvas {
  position:absolute;
  top: 0;
  width:100%;
  opacity: .8;
  z-index: .7;
}

.sp_sale #ContentsWrapper{
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    margin-bottom: 0;
    background: rgb(34, 34, 43) url(../images/bg_car.jpg)no-repeat 0 50% / auto 135%;
    overflow: hidden;
    transition: background-size 30s;
}
/*background-attachment: fixed;*/
.sp_sale #ContentsWrapper.set{ background-size: auto 100%; }

.sp_sale #ContentsWrapper img{
    width: 100%;
    height: auto;
}
.sp_sale #icach{
    padding: 0;
    box-sizing: border-box;
    position: relative;
    background: transparent;
}

#Wrapper h1{ margin: 0 auto; }

#Wrapper.sp_sale .box{ margin: 0 auto; }

#Wrapper .canvas_area {
    position: absolute;
    top: 0;
    width: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#Wrapper .canvas_area div{
    z-index: 10;
}

/* アイキャッチトレース */
/*.sp_sale .bg_img{
    display: inline-block;
    padding: 850px 0 0;
    min-width: 980px;
    width: 100%;
    margin: 0;
    background: url(../images/ogp_img.jpg)no-repeat;
    background-position: 0 0;
    background-size: contain;
    position: absolute;
    z-index: 1;
    opacity: 0.6;
}*/

h2.entry-title{
    width: 100%;
    margin: 0 auto;
}
.sp_sale #icach .ttl_box{
    display: block;
    margin: 0 auto 0;
    max-width: 961px;
    width: 75%;
    height: 46vw;
    min-height: 470px;
    max-height: 600px;
    position: relative;
    z-index: 2;
}
.sp_sale #icach .ttl_box img{ width: 100%; }
.sp_sale #icach .container{ display: block; height: auto; position: relative; top: -12%; right: 0; }
.sp_sale #icach .container.set{ top: 0; right: 0; }


.sp_sale .kv_img{
    position: absolute!important;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 20;
    text-align: center;
}
.sp_sale .kv_img img{ width: 100%; }

/*.sp_sale .kv_img.side_l{
    position: absolute;
    top: -5vw;
    left: 0;
    width: 7.5vw;
    min-width: 76px;
    max-width: 108px;
    animation-duration: 2.8s;
}
.sp_sale .kv_img.side_r{
    position: absolute;
    top: -5vw;
    right: 0;
    width: 7vw;
    min-width: 70px;
    max-width: 96px;
    animation-duration: 2.8s;
}
*/
/*.sp_sale .kv_img.num0{ margin-top: -1px; }*/
/* .sp_sale .ttl_box .kv_img.num0{
    width: 100%;
    height: 44vw;
    background: transparent;
    background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(170, 0, 0));
}*/

.sp_sale .ttl_box .kv_img.num1{
    right: -16.5%;
    margin: 0;
    width: 100%;
    max-width: 956px;
    height: 100%;
    text-align: right;
    animation-duration: 8s;
}
.sp_sale #icach .ttl_box .kv_img.num1 img{
    height: 100%;
    width: auto;
}
.sp_sale .ttl_box .kv_img.num2{
    margin: 7% 0 0 -3%;
    width: 87%;
    max-width: 960px;
}

.sp_sale .ttl_box .kv_img.num4{
    left: 0;
    margin: 33% 0 0 0;
    width: 100%;
    max-width: 100%;
    color: #fff;
    text-align: left;
    z-index: 20;
    animation-duration: 2s;
}
.sp_sale .ttl_box .kv_img.num4 .ttl{
    display: block;
    margin: 1.2% 0 0 2%;
    font-size: 120%;
    font-weight: 600;
}
.sp_sale .ttl_box .kv_img.num4 .txt
{
    display: block;
    margin: 1.4% 0 0 2%;
    font-size: 85%;
}
.sp_sale .ttl_box .kv_img.num4 .txt a{ margin: 0 2px; color: #fff; }
.sp_sale .ttl_box .kv_img.num5{
    display: flex;
    align-items: center;
    left: 2%;
    margin: 47% 0 0;
    width: 100%;
    max-width: 100%;
    text-align: left;
    z-index: 20;
    animation-duration: 5s;
}
.sp_sale .ttl_box .kv_img.num5 a{
    display: inline-block;
    text-decoration: none;
    font-size: 85%;
}
.sp_sale .ttl_box .kv_img.num5 a:nth-child(1){
    width: 38%;
}
.sp_sale .ttl_box .kv_img.num5 a:nth-child(2){
    margin: 0 0 0 2.2%;
    padding: 0 0 4px;
    width: 20%;
    color: #fff;
    background: url(../images/arr_r_wh.png)no-repeat 97% 30% / auto 60%;
    border-bottom: 1px solid #ccc;
}
.sp_sale .ttl_box a:hover{ opacity: .7; }

/* content_box */
.sp_sale .content_box{ visibility: hidden; }
.sect1{ width: 64%; max-width: 950px; min-width: 750px; margin: 0 auto; height: auto; padding: 0; position:relative; z-index: 11; }
.sp_sale .ct_img{
    display: block;
    margin: 0 auto;
    position: relative;
    visibility: hidden;
    transition-duration: 1.8s;
}
.sp_sale .ct_img.num0{
    position: absolute;
    text-align: center;
    width: 100%;
    animation-duration: 8s;
    z-index: 10;
    top: 37.1%;
}

.sp_sale .ct_img.num1 {
    position: absolute;
    margin-top: 25%;
    width: 100%;
    opacity: 1;
    z-index: 17;
    color: #fff;
    animation-duration: 1.5s;
}
.sp_sale .set .ct_img.num1{
    margin-top: 27.5%;
    width: 100%;
    opacity: 1;
}
.sp_sale .ct_img.num2{
    position: absolute;
    margin-top: 60%;
    right: 31%;
    width: 18.5%;
    max-width: 416px;
    opacity: .5;
    z-index: 18;
    animation-duration: 1s;
}
.sp_sale .set .ct_img.num2{
    margin-top: 59%;
    right: 47%;
    width: 53.5%;
    opacity: 1;
}
.sp_sale .ct_img.num3{
    position: absolute;
    margin-top: 59%;
    right: 49.7%;
    width: 17%;
    opacity: .5;
    max-width: 482px;
    z-index: 19;
    animation-duration: .5s;
}
.sp_sale .set .ct_img.num3{
    margin-top: 64.5%;
    right: -3.3%;
    width: 64%;
    opacity: 1;
}
.sp_sale .ct_img.num4{
    position: absolute;
    margin-top: 65%;
    right: 47.5%;
    width: 29.8%;
    opacity: .5;
    max-width: 340px;
    z-index: 17;
    animation-duration: 1s;
}
.sp_sale .set .ct_img.num4{
    margin-top: 55.5%;
    right: -17.5%;
    width: 43.8%;
    opacity: 1;
}

.sp_sale .bt_box.btn_upper{ position: relative; padding: 0 0 25px; z-index: 90; }
.sp_sale .bt_box.btn_upper img{ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); border-radius: 5px; }

.sp_sale .ct_ttl{ width: 100%; text-align: center; position: absolute; z-index: 11; }
.sp_sale .ct_ttl span{ width: 190px; display: inline-block; }
.sp_sale p.sub1{ margin: 5px auto; max-width: 776px; color: rgb(255, 230, 230); text-align: right; }

/* content_box */
.layer{ position: absolute; }
.layer img{ width: 100%; }
/*.sp_sale .content_box{ padding: 6vw 0 0; background: url(../images/bg_mid_top.png)no-repeat 50% 0 / 100% auto; }*/
.sp_sale .content_box .upper{ padding: 13vw 0 0; background: transparent; }

#ct_section{
    animation-duration: .5s;
    animation-fill-mode: both;
}


.content_box .ct2_img{ margin-bottom: 20px; }
.content_box .ct2_img.num1{ position: relative; }
.content_box .ct2_img.num1 .layer{ width: 22.4%; top: 1px; right: 5%; }

.content_box .ct2_img.num2{ position: relative; }
.content_box .ct2_img.num2 .layer{ width: 18%; top: 2px; right: 19%; }


/*.content_box .ct2_img.sub {
    width: 100%;
    float: left;
    margin: 0 auto;
    position: relative;
    text-align: center;
    z-index: 10;
}*/

/*.content_box .midle {
    padding: 40px 0;
    background: linear-gradient(transparent, rgba(95, 130, 235));
    position: relative;
    z-index: 10;
}*/
.content_box .midle {
    padding: 40px 0;
    position: relative;
    z-index: 10;
}
.content_box .midle .ttl{ margin: 20px auto 20px; width: 380px; text-align: center; }

#Wrapper.sp_sale .midle .box{
    width: 71%;
    margin: 0 auto;
    min-width: 690px;
    max-width: 842px;
    border: 0;
    border-radius: 10px;
    position: relative;
    z-index: 10;
}

#Wrapper.sp_sale .midle .box.num1{
    margin-bottom: 30px;
    border-radius: 7px;
}

.midle .box.num1 .layer{
    max-width: 168px;
    margin: 0 0 0 -10px;
}

#Wrapper.sp_sale .midle .box.num2 .layer{
    border-radius: 7px;
}

.midle .box.num2 .layer{
    max-width: 168px;
    margin: 0 0 0 -10px;
}


/*.content_box .ct3_img .layer{ position: absolute; width: 42%; right: -12px; top: -28px; }
.sp_sale #ContentsWrapper .content_box .box .ct3_img .layer img{ box-shadow: none; }
.content_box .ct3_img.sub {
    width: 33.3%;
    float: left;
    margin: 0 auto;
    position: relative;
    text-align: center;
    z-index: 10;
}*/
/*.sp_sale #ContentsWrapper .content_box .box .ct3_img img{
    max-width: 840px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}*/
/*.sp_sale #ContentsWrapper .content_box .ct3_img.sub img{
    width: 97%;
    max-width: 270px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}*/

.content_box .ct3_img .sub1{
    color: rgb(123, 123, 123);
    margin: -4.5% 0 0 4%;
    font-size: 72%;
    font-weight: 600;
    position: absolute;
}

.content_box .under{ background: #fff; text-align: center; overflow: hidden; }
.content_box .under .inner{
    animation-duration: 3.5s;
    position: relative;
    z-index: 9;
}

.ct3_img.num5{
    margin: 0 auto;
    width: 100%;
    min-width: 820px;
    max-width: 1137px;
    position: relative;
    z-index: 10;
}
.content_box .ct3_img.num5 .layer{ width: 24%; top: -30.5%; right: 10.5%; opacity:1; animation-delay: 2.7s; }

.sp_sale #ContentsWrapper .under_area img{ max-width: 640px; width: 100%; }

.bt_box.num0{
    margin: 100px auto 15px;
    animation-duration: 1s;
}

.sect2{ min-width: 740px; max-width: 980px; width: 60%; margin: 0 auto 3%; font-size: 0; }
.sect2 h3{ width: 80%; margin: 5% auto 2.5%; }
.sect2 .sub{ text-align: center; font-weight: bold; font-size: 14px; margin-bottom: 3%; }
.sect2 li{ width: 33.3%; display: inline-block; padding: 0 7.5px; box-sizing: border-box; }
.sect2 .ct2_img{ margin-bottom: 15px; }

.sp_sale .sect2 .text{ font-size: 80%; margin: -25px 0 0; padding: 0 0 5px 37px; display: block; }



.sect3 .wrap{
    min-width: 850px;
    max-width: 1140px;
    width: 75%;
    margin: 0 auto;
    padding: 90px 0;
}


.sect4 .wrap{
    min-width: 850px;
    max-width: 1140px;
    width: 75%;
    margin: 0 auto;
    padding: 90px 0;
}

.bt_box.shop h3{ width: 50%; max-width: 640px; margin: 0 auto 2%; }

.sp_sale .bt_box{ margin: 0; width: 100%; text-align: center; position: relative; font-size: 0; z-index: 9; }
.sp_sale .bt_box a{ overflow: hidden; }

.sp_sale .bt_box.btn_btm{ margin-top: -1px; padding: 60px 0 50px; }
.sp_sale .bt_box.btn_btm img{ width: 100%; border-radius: 35px; }
.sp_sale .bt_box .bt_l,.sp_sale .bt_box .bt_r{ display: inline-block; width: 34%; min-width: 320px; max-width: 401px; position: relative; border-radius: 5px; border-radius: 35px; }
.sp_sale .bt_box .bt_l{ margin-right: 30px; }
.sp_sale .bt_box .bt_l:hover,.sp_sale .bt_box .bt_r:hover{ opacity: .85; }

.bt_shop{ display: inline-block; width: 20%; min-width: 150px; max-width: 220px; margin: 0 .7%; overflow: hidden; position: relative; }
/*.sp_sale .bt_box .bt_l{ margin-right: 35px; }*/

#cp1{ margin-bottom: 40px; }
#cp1{ margin-bottom: 30px; }
#cp1 .image,#cp2 .image{ margin-right: -32px; }

.sp_sale .btm_area{ position: relative; margin-top: -1px; background: #fff; padding: 15px 0 15px; }
.sp_sale .totop{ background: #fff; }
.sp_sale #pagetop{ position: relative; width: 980px; margin: 0 auto; padding: 10px 0 15px; z-index: 11; }

/*@media screen and (min-width: 1600px){}*/
@media screen and (min-width: 1380px){
    .sp_sale .bg_layer{ background-size: 100% 554px; }
    .sp_sale .content_box .upper{ padding: 0; }
}
/*@media screen and (min-width: 1600px){}
@media screen and (min-width: 1700px){}
@media screen and (min-width: 1800px){}
@media screen and (min-width: 2140px){}

@media screen and (max-width: 1600px){}
@media screen and (max-width: 1410px){}
@media screen and (max-width: 1200px){}
@media screen and (max-width: 1150px){
    .sp_sale .content_box .upper{ padding-top: 140px; }
}*/
@media screen and (max-width: 1280px){
   .sp_sale .ttl_box .kv_img.num4,.sp_sale .ttl_box .kv_img.num5{ font-size: calc(1.25vw); }
}
@media screen and (max-width: 1020px){
    .sp_sale #icach .ttl_box{ height: 295px; }
    .sp_sale .ttl_box .kv_img.num4,.sp_sale .ttl_box .kv_img.num5{ font-size: 80%; }
}


/* animetion */
.kv_img{
    animation-duration: 2s;
    animation-fill-mode: both;
    opacity: 0;
}

.ct_img{
    animation-duration: 1s;
}
/*.ct_img.num2{
    animation-duration: 1.5s;
}
.ct_img.num3{
    animation-duration: 1.8s;
}
.ct_img.num4{
    animation-duration: 1.3s;
}*/

.content_box{
    animation-duration: 2s;
    animation-fill-mode: both;
}

.ct2_img{
    animation-duration: 2s;
    animation-fill-mode: both;
    opacity: 0;
}
.ct2_img.num1{
    animation-duration: 1.5s;
}

.ct2_img.num2{
    animation-delay: .5s;
    animation-duration: 2s;
}
.ct2_img.num3{
    animation-delay: .2s;
    animation-duration: 3s;
}

.ct2.txt{
    animation-duration: 5s;
}

.ct3_img{
    animation-duration: 2s;
}
.ct3_img.num1{
    animation-duration: 1.5s;
}

.ct3_img.num2{
    animation-duration: 2.5s;
}
.ct3_img.num3{
    animation-delay: .4s;
    animation-duration: 1s;
}
.ct3_img.num4{
    animation-delay: .6s;
    animation-duration: 1s;
}

.ct3_img.slideInUp .layer{
    animation-delay: 1s;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-name: flipInY;
    opacity: 1;
}

.ct3_img.zoomIn .layer{
    animation-delay: 0;
    animation-duration: .5s;
    animation-fill-mode: both;
    animation-name: frontInUp;
    opacity: 1;
}

.msover_b:hover img{
    animation-iteration-count:1;
    animation-duration: .5s;
    animation-fill-mode: both;
    animation-name: rubberBand;
    opacity: .7;
}

/* Animation */
.fadeInLeft {
    animation-name: fadeInLeft;
}

.fadeInRight {
    animation-name: fadeInRight;
}

.fadeInUp{
    animation-name: fadeInUp;
}

.fadeIn {
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: both;
}
.fadeOut {
    animation-name: fadeIn;
    animation-duration: 5s;
    animation-fill-mode: both;
}

.slideInUp {
    display: block!important;
    visibility: visible!important;
    animation-name: slideInUp;
}

.slideInUpL {
    display: block;
    visibility: visible!important;
    animation-name: slideInUpL;
}

.slideInDw {
    display: block;
    visibility: visible!important;
    animation-name: slideInDw;
}

.zoomIn {
    visibility: visible!important;
    animation-name: zoomIn;
}

.InRight {
    visibility: visible!important;
    animation-name: InRight;
    animation-fill-mode: both;
}

.InLeft {
    visibility: visible!important;
    animation-name: InLeft;
    animation-fill-mode: both;
}

.ZInLeft {
    animation-name: ZInLeft;
    animation-fill-mode: both;
}

.ZInRight {
    animation-name: ZInRight;
}
.BoundIN{
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-name: BoundIN;
}
.BoundIN2{
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-name: BoundIN2;
}

.rubberBand {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: rubberBand;
}

.backInDown {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: backInDown;
}
.frontInUp {
    animation-duration: .3s;
    animation-fill-mode: both;
    animation-name: frontInUp;
}

.flipInY {
    backface-visibility: visible !important;
    visibility: visible !important;
    animation-duration: 1s;
    animation-duration: var(--animate-duration);
    animation-fill-mode: both;
    animation-name: flipInY;
}


.reflection::after {
  content: "";
  display: block;
  width: 30px;
  height: 100%;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: #FFF;
  opacity: 0;
  transform: rotate(45deg);
  animation: reflect 5s ease-in-out infinite;
}


@keyframes reflect {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: .5; }
    81% { transform: scale(4) rotate(45deg); opacity: .8; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}


/*.reflection{
  animation: reflect 5s ease-in-out infinite;
  -webkit-animation: reflect 5s ease-in-out infinite;
}
.reflection.bt_r{ animation-delay: .07s; }

@keyframes reflect {
    0% { opacity: 1; }
    80% { opacity: 1; }
    81% { background: #fff; opacity: .4; }
    100% { background: transparent; opacity: 1; }
}
*/

@keyframes fadeInLeft{
    0% {
        opacity: 0;
        transform: translate3d(-100%,0,0);
    }

    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

@keyframes fadeInRight{
    0% {
        opacity: 0;
        transform: translate3d(100%,0,0);
    }

    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

@keyframes fadeInUp{
    0% {
        opacity: 0;
        transform: translate3d(0,100%,0);
    }
    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

@keyframes fadeIn{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeOut{
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}



@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.3,.3,.3);
    }
    50% {
        opacity: 1;
    }
}


@keyframes InRight {
    0%, 60%, 75%, 90%, 100% {
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
    }
    0% {
        opacity: 0;
        transform: translate3d(3000px,0,0);
    }
    50% {
        opacity: 1;
        transform: translate3d(-25px,0,0);
    }
    75% {
        transform: translate3d(15px,0,0);
    }
    95% {
        transform: translate3d(-5px,0,0);
    }
    100% {
        transform: translateZ(0);
    }
}



@keyframes InLeft {
0%, 60%, 75%, 90%, 100% {    animation-timing-function: cubic-bezier(.215,.61,.355,1);
}
    0% {
        opacity: 0;
        transform: translate3d(-3000px,0,0);
    }
    60% {
        opacity: 1;
        transform: translate3d(25px,0,0);
    }
    75% {
        transform: translate3d(-10px,0,0);
    }
    90% {
        transform: translate3d(5px,0,0);
    }
    100% {
        transform: translateZ(0);
    }
}

@keyframes ZInLeft {
    0% {
        animation-timing-function: cubic-bezier(.55,.055,.675,.19);
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(-500px,0,0);
    }
    60% {
        animation-timing-function: cubic-bezier(.175,.885,.32,1);
        opacity: .5;
        transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
    }
}

@keyframes ZInRight {
    0% {
        animation-timing-function: cubic-bezier(.55,.055,.675,.19);
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(500px,0,0);
    }
    60% {
        animation-timing-function: cubic-bezier(.175,.885,.32,1);
        opacity: .5;
        transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
    }
}

@keyframes BoundIN {
    0%{
        transform: scale(1);
    }
    42% {
        transform: scale(1.7);
    }
    70% {
        transform: scale(1);
    }
}


@keyframes BoundIN2 {
    0%{
        transform: scale(1);
    }
    14% {
        transform: scale(1.3);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.7);
    }
    70% {
        transform: scale(1);
    }
}


@keyframes slideInUp {
    0% {

        transform: translate3d(0,50%,0);
        visibility: visible;
                        opacity: 0;
    }
    100% {
        transform: translateZ(0);
                        opacity: 1;
    }
}


@keyframes slideInUpL {
    0% {

        transform: translate3d(0,150%,0);
        visibility: visible;
                        opacity: 0;
    }
    100% {
        transform: translateZ(0);
                        opacity: 1;
    }
}

@keyframes slideInDw {
    0% {

        transform: translate3d(0,-100%,0);
        visibility: visible;
                        opacity: 0;
    }
    100% {
        transform: translateZ(0);
                        opacity: 1;
    }
}

@keyframes rubberBand {
    0% {
        transform: scaleX(1);
    }
    30% {
        transform: scale3d(1.25,.75,1);
    }
    40% {
        transform: scale3d(.75,1.25,1);
    }
    50% {
        transform: scale3d(1.15,.85,1);
    }
    65% {
        transform: scale3d(.95,1.05,1);
    }
    75% {
        transform: scale3d(1.05,.95,1);
    }
    100% {
        transform: scaleX(1);
    }

}

@keyframes backInDown {
    0% {
        transform: translateY(-600px) scale(.3);
        opacity: 0;
    }
    70% {
        transform: translateY(0px) scale(.7);
        opacity: .7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/*@keyframes frontInUp {
    0% {
        transform: translateY(47%) scale(3);
        opacity: .1;
    }
    60% {
        transform: translateY(10%) scale(1.7);
        opacity: .5;
    }
    100% {
        transform: scale(1);
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}*/

@keyframes frontInUp {
    0% {
        transform: translateY(47%) scale(3);
        opacity: .1;
    }
    100% {
        transform: scale(1);
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateY(-20deg);
        animation-timing-function: ease-in;
    }
    60% {
        transform: perspective(400px) rotateY(10deg);
        opacity: 1;
    }
    80% {
        transform: perspective(400px) rotateY(-5deg);
    }
    100% {
        transform: perspective(400px);
    }
}



.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.clearfix:before {
    content: "";
    display: block;
    clear: both;
}

.clearfix {
    display: block;
}