@charset "utf-8";

/* CSS Document */
/******************************************************************************

 layout

******************************************************************************/
body {
 color: #000;
 background: #FFF;
 position: relative;
 font-feature-settings: "palt";
 overflow-x: hidden;
}
@media screen and (max-width: 767px) {
 #wrapper {
  font-size: 12px;
  line-height: 1.75em;
 }
}

#container {
 width: 100%;
 position: relative;
}


#num {
 position: fixed;
 top:1em;
 left: 1em;
 font-size: 200%;
 z-index: 100;
 color: #FF0000;
}
@media screen and (max-width: 1070px) {
  #num { color: #FF0099;}
}
/******************************************************************************

 common

******************************************************************************/
.section {
 margin-bottom: 6em;
 position: relative;
}
@media screen and (max-width: 1070px) {
 .section {
  margin-bottom: 2em;
 }
}
.contents_inner {
 padding: 0 7%;
}
@media screen and (max-width: 1070px) {
 .contents_inner {
  padding: 0 4%;
  box-sizing: border-box;
 }
}
.maxW_1200 {
 max-width: 1200px;
 margin: 0 auto;
}
.maxW_900 {
 max-width: 900px;
 margin: 0 auto;
}
.maxW_800 {
 max-width: 800px;
 margin: 0 auto;
}
h2.tit {
 font-size: 375%;
 line-height: 1.4em;
 margin-bottom: 0.5em;
}
@media screen and (max-width: 767px) {
 h2.tit {
  font-size: 300%;
 }
}
h2.tit span.small {
 font-weight: 83%;
}
h3.headline {
 font-size: 312.5%;
 line-height: 1.3em;
 margin-bottom: 0.5em;
}
@media screen and (max-width: 767px) {
 h3.headline {
  font-size: 250%;
 }
}
h3.mi {
 font-size: 250%;
 line-height: 1.4em;
 margin-bottom: 0.5em;
}
@media screen and (max-width: 767px) {
 h3.mi {
  font-size: 180%;
 }
}
h4.submi {
 font-size: 175%;
 line-height: 1.4em;
 margin-bottom: 0.5em;
}
@media screen and (max-width: 767px) {
 h4.submi {
  font-size: 150%;
 }
}

.text_46 {
 font-size: 287.5%;
 line-height: 1.75em;
}
.text_40 {
 font-size: 250%;
 line-height: 1.75em;
}
.text_22 {
 font-size: 137.5%;
 line-height: 1.75em;
}
@media screen and (max-width: 1070px) {
 .text_22 {
  font-size: 112.5%;
  line-height: 1.75em;
 }
}
.text_18 {
 font-size: 112.5%;
 line-height: 1.75em;
}
@media screen and (max-width: 1070px) {
 .text_18 {
  font-size: 100%;
  line-height: 1.75em;
 }
}
.text_16 {
 font-size: 100%;
 line-height: 1.75em;
}
@media screen and (max-width: 1070px) {
 .text_16 {
  font-size: 87.5%;
  line-height: 1.75em;
 }
}

.lead {
 font-size: 137.5%;
 line-height: 1.75em;
 margin-bottom: 1.75em;
}
@media screen and (max-width: 1070px) {
 .lead {
  font-size: 112.5%;
  line-height: 1.75em;
 }
}
.body_copy {
 font-size: 112.5%;
 line-height: 1.75em;
}
@media screen and (max-width: 1070px) {
 .body_copy {
  font-size: 100%;
  line-height: 1.75em;
 }
}
.lead p{
 margin-bottom: 1em;
}


sup,sub {
 font-size: 60%;
}
small {
 font-size: 87.5%;
}
ul.listMark li {
 margin-left: 1em;
 text-indent: -1em;
 line-height: 1.4em;
 margin-bottom: 0.5em;
}

.linkBtn a {
 padding: 0.5em 2.5em;
 font-size: 16px;
 color: #000 !important;
 background: none;
 border: 2px solid #000;
 border-radius: 2em;
 -webkit-transition:all 0.3s ease-in-out;
 transition:all 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
 .linkBtn a {
  font-size: 14px;
 }
}
@media screen and (min-width: 1071px) {
 .linkBtn a:hover{
  color: #FFF !important;
  border-color: #d5001c;
 }
}

.icon_play {
 position: relative;
}
.icon_play:after {
 content: "";
 display: block;
 width: 5em;
 height: 5em;
 background: url("../images/icon_play.png") no-repeat center center;
 background-size: 100% 100%;
 position: absolute;
 top:50%;
 left: 50%;
 transform: translate(-50%,-50%);
}
@media screen and (max-width: 1070px) {
 .icon_play:after {
  width: 3em;
  height: 3em;
 }
}

.radius {
 border-radius: 1em;
 overflow: hidden;
}
@media screen and (max-width: 1070px) {
 .radius {
  border-radius: 0.6em;
 }
}

.comingsoon:before {
 content: "Coming soon";
 font-size: 180%;
 color: #b9b9b9;
 position: absolute;
 bottom: 2em;
 left: 50%;
 transform: translateX(-50%);
}
@media screen and (max-width: 1070px) {
 .comingsoon:before { 
  font-size: 150%;
 }
}
@media screen and (min-width: 1071px) {
 .sponly { display: none;}
}
@media screen and (max-width: 1070px) {
  .pconly { display: none;}
}
/******************************************************************************

 mainView

******************************************************************************/
#mainView {
 position: relative;
 /*background: url(../images/mv_pc.jpg) no-repeat center center;
 background-size: cover;*/
 background: #000;
 min-height: 500px;
 height: 630px;
 overflow: hidden;
}
@media screen and (max-width: 1070px) {
 #mainView {
  /*background: url(../images/mv_sp.jpg) no-repeat center center;
  background-size: cover;*/
  min-height:auto;
 }
}
#mainView .videoWrap {
 line-height: 0;
 font-size: 0;
}
#mainView video{
 width: 100%;
 height: auto;
 position: absolute;
 top:50%;
 left: 50%;
 transform: translate(-50%,-50%);
}
#mainView #videoWrap_pc { display: block;}
#mainView #videoWrap_sp { display: none;}
@media screen and (max-width: 1070px) {
 #mainView #videoWrap_pc { display: none;}
 #mainView #videoWrap_sp { display: block;}
}
#mainView .videoWrap.tate video{
 width: auto !important;
 height: 100% !important;
}

/******************************************************************************

 photoBack

******************************************************************************/
.photoBack {
 position: relative;
 overflow: hidden;
}
.photoBack__bg {
 content: "";
 display: block;
 background: rgba(0,0,0,0.7);
 width: 100%;
 height: 100%;
 position: absolute;
 top:0;
 left: -100%;
 opacity: 1;
}
.photoBack__bg.on {
 left: 0;
}
.photoBack__bg.on.close {
 left: -100%;
}
.photoBack__inner {
 color: #FFF;
 width: 100%;
 text-align: center;
 position: absolute;
 top:50%;
 left: 50%;
 transform: translate(-50%,-50%);
 z-index: 3;
 transition-delay: 0.5s;
 animation-delay: 0.5s;
}
.js-fromBottom_inner.on{
 -webkit-animation-name: fromBottom_inner;
 animation-name: fromBottom_inner;
 
}
@-webkit-keyframes fromBottom_inner {
 0% { transform: translate(-50%,-30%); opacity: 0;}
 100% { transform: translate(-50%,-50%); opacity: 1;}
}
@keyframes fromBottom_inner {
 0% { transform: translate(-50%,-30%); opacity: 0;}
 100% { transform: translate(-50%,-50%); opacity: 1;}
}

.js-fromBottom_inner.on.close{
 -webkit-animation-name: fromBottom_inner_close;
 animation-name: fromBottom_inner_close;
 transition-delay: 0.5s;
 animation-delay: 0.5s;
}
@-webkit-keyframes fromBottom_inner_close {
 0% { transform: translate(-50%,-50%); opacity: 1;}
 100% { transform: translate(-50%,-30%); opacity: 0;}
}
@keyframes fromBottom_inner_close {
 0% { transform: translate(-50%,-50%); opacity: 1;}
 100% { transform: translate(-50%,-30%); opacity: 0;}
}

.photoBack__close {
 display: block;
 width: 1.5em;
 height: 1.5em;
 border-radius: 50%;
 background: #FFF;
 position: absolute;
 top:2em;
 right: 2em;
 z-index: 3;
 cursor: pointer;
}
.photoBack__close:before,
.photoBack__close:after {
 content: "";
 display: block;
 width: 50%;
 height: 2px;
 background: #000;
 position: absolute;
 top:50%;
 left: 50%;
}
.photoBack__close:before {
 transform: translate(-50%,-50%) rotate(-45deg);
}
.photoBack__close:after {
 transform: translate(-50%,-50%) rotate(45deg);
}

.photoBack__close.on.close:before {
 content: none;
}
.photoBack__close.on.close:after {
 background: none;
 width: 70%;
 height: 1px;
 border-bottom: 3px dotted #000;
 transform: translate(-50%,-50%);
 margin-top: -1px;
}

@media screen and (max-width: 1070px) {
 .sns_Sec .photoBack {
  margin-bottom: 5em;
 }
 .sns_Sec .photoBack__inner,
 .sns_Sec .js-fromBottom_inner.on{
  position: relative;
  color: #000;
  top:auto !important;
  left: auto !important;
  transform: none !important;
 }
 .sns_Sec .photoBack__bg {
  display: none;
 }
 .sns_Sec figure {
  margin: 0 auto 1em;
 }
 .sns_Sec .photoBack__close.on {
  display: none;
 }
}
/******************************************************************************

 slide_item

******************************************************************************/
.slide_item {
 padding: 0 7%;
}
.slide_item__ph {
 width: 48%;
}
@media screen and (max-width: 1070px) {
 .slide_item__ph {
  margin-bottom: 1em;
 }
}
.slide_item__cntents {
 width: 44%;
 text-align: left;
}
.concept_nav .swiper-wrapper {
 padding-bottom: 0;
}
@media screen and (min-width: 1071px) {
 .concept_nav .swiper-wrapper {
  display: inline-block;
  width: auto;
  text-align: center;
 }
}
.concept_nav .swiper-slide {
  width: auto;
  padding: 0 1em;
}
@media screen and (min-width: 1071px) {
 .concept_nav .swiper-slide {
  display: inline-block;
  padding: 0 1em 1em;
 }
}

.concept_nav {
 font-size: 125%;
 line-height: 1.6em;
}
@media screen and (max-width: 1070px) {
 .concept_nav {
  padding: 0 4%;
  box-sizing: border-box;
 }
}
.concept_nav .swiper-slide span {
 padding-bottom: 0.4em;
 position: relative;
 cursor: pointer;
}
.concept_nav .swiper-slide span:after{
 content: "";
 display: block;
 width: 0%;
 height: 2px;
 background: #00b0f4;
 position: absolute;
 left: 0;
 bottom: 0;
 -webkit-transition:width 0.3s ease-in-out;
 transition:width 0.3s ease-in-out;
}
.concept_nav .swiper-slide-thumb-active span:after {
 width: 100%;
}
/******************************************************************************

 artist

******************************************************************************/
.artist {
 
 margin-bottom: 4em;
}
.artist__ph{
 margin: 0 auto 2em;
}
.artist__ph.imma{
 max-width: 520px;
}
.artist__info {
 margin-bottom: 2em;
}
.artist__info .text_18,
.artist__info .text_16{
 margin-bottom: 1.5em;
}
.artist__interview {
 margin-bottom: 3em;
}
.artist__interview dt.btn{
 font-size: 150%;
 display: inline-block;
 margin: 0 auto;
 padding: 0.5em 0;
 text-decoration: underline;
 cursor: pointer;
}
.artist__interview dt.arrow{
 text-align: center;
 width: 3em;
 padding: 0.5em 0;
 margin: 0 auto;
 cursor: pointer;
}
.artist__interview dt.arrow:after{
 content: "";
 display: block;
 margin: 0 auto;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 12px 8px 0 8px;
 border-color: #000000 transparent transparent transparent;
 -webkit-transition:transform 0.3s ease-in-out;
 transition:transform 0.3s ease-in-out;
}
.artist__interview.active dt.arrow:after{
 transform: rotate(-180deg);
}
.artist__interview dd {
 max-width: 900px;
 margin: 0 auto 1em;
}
.artist__icon {
 width: 13%;
}
@media screen and (max-width: 1070px) {
 .flexWrap .artist__icon {
  width: 30%;
  margin: 0 auto 1em;
 }
}
.artist__comment {
 width: 82%;
 text-align: left;
}
.artist__comment p{
 margin-bottom: 1em;
}
.artist__comment p:last-child{
 margin-bottom: 0;
}
.artist__profile {
 margin-bottom: 1em;
}
/******************************************************************************

 intro_Sec

******************************************************************************/
@media screen and (max-width: 420px) {
 .intro_Sec {
  font-size: 3.5vw;
 }
}
.intro_Sec h2{
 margin-bottom: 0.2em;
}
.intro_Sec h3.mi {
 margin-bottom: 1.5em;
}
.intro_Sec h3 span{
 display: inline-block;
}
.intro_Sec h3 .big{
 font-size: 115%;
}
.intro_Sec p+p{
 margin-top: 1.75em;
}

/******************************************************************************

 music_Sec

******************************************************************************/
.music_logo_wrap {
 margin-bottom: 2em;
 flex-wrap:nowrap;
 -webkit-flex-wrap:nowrap;
}
.music_logo_wrap li{
 padding: 0 1em;
}
@media screen and (max-width: 1070px) {
 .music_logo_wrap li:first-child{
  width: 30%;
 }
 .music_logo_wrap li:last-child{
  width: 55%;
 }
}
.music_logo_wrap li+li{
 border-left: 2px solid #000;
}
.music_logo_wrap li img{
 vertical-align: middle !important;
}
@media screen and (max-width: 1070px) {
 .music_wrap {
  /*width: 86%;*/
  margin: 0 auto 1em;
 }
}
.music_wrap h3.mi{
 margin-bottom: 1em;
}
.music__playlist {
 margin-bottom: 3em;
}
.music__playlist li {
 width: 23%;
}
@media screen and (max-width: 1070px) {
 .music__playlist li {
  width: 48%;
 }
 .music__playlist li:nth-child(1),
 .music__playlist li:nth-child(2) {
  margin-bottom: 2em;
 }
}
.music__playlist figure{
 border-radius: 0.5em;
 max-width: 170px;
 margin: 0 auto 1em;
 box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
@media screen and (max-width: 1070px) {
 .music__playlist figure{
  max-width: 250px;
 }
}
.music__listen_only{
 margin: 0 auto 3em;
}
.music__listen_only p{
 font-size: 112.5%;
 line-height: 1.75em;
 margin-bottom: 0.5em;
}
.music__listen_only figure{
 display: block;
 width: 15%;
 max-width: 50px;
 margin: 0 auto;
}
.musician {
 max-width: 1000px;
 margin: 0 auto 3em;
}
.musician__ph {
 width: 48%;
 margin-bottom: 1em;
}
.musician__detail {
 width: 48%;
 text-align:left;
}
.musician__detail_head {
 margin-bottom: 1em;
}
.music__video {}
@media screen and (max-width: 1070px) {
 .music__video {
  /*width: 86%;*/
  margin: 0 auto 4em;
 }
}

.music_Sec .artist__comment {
 width: 100%;
 text-align: left;
}

.copylight {
 position: relative;
 padding-left: 2em;
 font-size: 70%;
 line-height: 1.5em;
 padding-top: 5em;
 margin-bottom: 1em;
}
.jasrac {
 position: absolute;
 left: 50%;
 bottom: 0;
 transform: translateX(-50%);
}
.jasrac_logo {
 width: 75px;
 margin: 0 auto 0.5em;
}
@media screen and (max-width: 1070px) {
 .jasrac {
  position: static;
  left: 0;
  transform: none;
  margin-bottom: 0.5em;
 }
 .jasrac_logo {
  margin-left: 0;

 }
} 
/******************************************************************************

 StoryStreamWidgetApp

******************************************************************************/
.live_Sec #StoryStreamWidgetApp {
 margin-bottom: 4.375em;
}
@media screen and (max-width: 1070px) {
 .live_Sec #StoryStreamWidgetApp {
  margin-bottom: 3em;
 }
}
#wrapper .stry-widget .stry-widget-inner .square-pane .no-burns.landscape .main-image {
 height: 100%;
 width: auto;
}
#wrapper .stry-widget .stry-widget-inner .portrait-pane .no-burns.landscape .main-image, 
#wrapper .stry-widget .stry-widget-inner .portrait-pane .no-burns.square .main-image {
    height: 100%;
    width: auto;
}
#wrapper .stry-widget .content-item-footer .stry-source .stry-avatar {
 height: 28px;
 width: 28px;
}

/*
 bottomBanner
******************************************/
.p-bottomBanner {
 width: 100%;
 position: fixed;
 top:auto;
 bottom: 0;
 background: rgba(0,0,0,0.7);
 z-index: 50;
 text-align: center;
 box-sizing: border-box;
}
@media screen and (max-width: 1070px) {
 .p-bottomBanner {
  font-size: 14px;
 }
}
.p-bottomBanner.is-static{
 position:static;
}
.p-bottomBanner__home {
 background: #000;
 position: relative;
 height: 90px;
}
.p-bottomBanner__contents {
 justify-content: center;
 -webkit-justify-content:center;
}
@media screen and (max-width: 1070px) {
 .p-bottomBanner__home {
  height: 95px;
 }
 .p-bottomBanner__inner {
  padding: 0 4% !important;
 }
 .p-bottomBanner__text {
  font-size: 90%;
  margin-bottom: 5px;
 }
 .p-bottomBanner__btn {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto !important;
 }
}


/*
 floatingBanner
******************************************/
.p-floatingBanner {
 position: fixed;
 right: 1%;
 bottom: 12%;
 width: 100px;
 height: 100px;
 overflow: hidden;
 z-index: 99;
 box-shadow: 0 0 5px rgba(0,0,0,0.3);
 background: #FFF;
}
.fadeIn {
 opacity: 0;
 visibility: hidden;
 -webkit-transition: 0.6s ease-in-out;
 transition: 0.6s ease-in-out;
}
.fadeIn.show{
 opacity:1;
 visibility: visible;
}
@media only screen and (min-width: 1070px) {
 .p-floatingBanner {
  width: 160px;
  height: 160px;
 }
}
.p-floatingBanner a{
 display: block;
 background: #FFF;
 padding: 2px;
 text-decoration: none;
 -webkit-transition: 0.3s ease-in-out;
 transition: 0.3s ease-in-out;
}
.p-floatingBanner a p {
 color: #000 !important;
}
@media only screen and (min-width: 1070px) {
 .p-floatingBanner a{
  padding:  3px;
 }
}
.p-floatingBanner a .text{
 padding: 0.3em;
 margin: 0;
 position: relative;
 text-align: left;
 font-size: 81%;
 line-height: 1.4em;
}
@media screen and (max-width: 1070px) and (min-width: 768px){
 .p-floatingBanner a .text{
  font-size: 9px;
  line-height: 1.4em;
 }
}
@media only screen and (max-width: 767px) {
 .p-floatingBanner a .text{
  font-size: 9px;
  line-height: 1.4em;
 }
}

.p-floatingBanner a .text:before {
 content: "";
 font-family: pag-iconfont;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 position: absolute;
 top: 50%;
 right: 0;
 color: #d5001c;
}
@media only screen and (min-width: 1070px) {
 .p-floatingBanner a .text:before {
  right: 0.5em
 }
}
/*
 linkBtn textLink
******************************************/
.c-textLink a{
 text-decoration: underline;
}
.c-linkBtn {
 display: inline-block;
 position: relative;
 -webkit-transition: 0.3s ease-in-out;
 transition: 0.3s ease-in-out;
}
.c-linkBtn a{
 display: block;
 padding: 0.87em 2em;
 font-size: 100%;
 line-height: 1.5em;
 text-align: center;
 text-decoration: none;
 color: #FFF;
 background: #333;
 min-width: 200px;
 box-sizing: border-box;
}
@media screen and (max-width: 1070px) {
 .c-linkBtn a{
  padding: 0.75em 2em;
  min-width: initial;
 }
}
.c-linkBtn.btn-red a {
 background: #d5001c;
 color: #FFF;
}
/*
 arrow
******************************************/
.c-arrow {
 position: relative;
}
.c-arrowRight:after{
 content: "";
 display: block;
 width: 1.5em;
 height: 1.5em;
 background: url('data:image/svg+xml;utf8,<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9px" height="14px"><path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M9.009,7.000 L1.952,14.009 L0.541,12.607 L6.186,7.000 L0.541,1.393 L1.952,-0.008 L7.597,5.599 L7.597,5.598 L9.009,7.000 Z"/></svg>') no-repeat center center;
 background-position: 100% auto;
 position: absolute;
 top:50%;
 right: 1em;
 transform: translateY(-50%);
 pointer-events: none;
}
.c-arrowLeft {
 padding-left: 3em !important;
}
.c-arrowLeft:after{
 content: "";
 display: block;
 width: 1.5em;
 height: 1.5em;
 background: url('data:image/svg+xml;utf8,<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9px" height="14px"><path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M9.009,7.000 L1.952,14.009 L0.541,12.607 L6.186,7.000 L0.541,1.393 L1.952,-0.008 L7.597,5.599 L7.597,5.598 L9.009,7.000 Z"/></svg>') no-repeat center center;
 background-position: 100% auto;
 position: absolute;
 top:50%;
 left: 1em;
 transform: translateY(-50%);
 pointer-events: none;
}
.c-arrowBack:after{
 content: "";
 display: block;
 width: 1.2em;
 height: 1.2em;
 background: url('data:image/svg+xml;utf8,<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9px" height="14px"><path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M2,5.6L2,5.6L7.6,0L9,1.4L3.4,7L9,12.6L7.6,14L0.5,7L2,5.6z"/></svg>') no-repeat center center;
 background-position: 100% auto;
 position: absolute;
 top:50%;
 left: 1em;
 transform: translateY(-50%);
 pointer-events: none;
}

.u-pd__1 { padding-top: 1em; padding-bottom: 1em;}
/******************************************************************************

 lib

******************************************************************************/
/*** swiper ***/
.swiper-wrapper {
 padding-bottom: 0px;
}
.swiper-button-next {
 background: url("https://cdn.porsche.co.jp/sp/assets/common_img/arrow_next_bk_pc.png") no-repeat center center;
 width: 50px;
 height: 50px;
 margin-top: -0px;
 left: auto;
 right: 2.5%;
}
.swiper-button-next:hover {
 background: url("https://cdn.porsche.co.jp/sp/assets/common_img/arrow_next_rd_pc.png") no-repeat center center;
}
.swiper-button-prev{
 background: url("https://cdn.porsche.co.jp/sp/assets/common_img/arrow_prev_bk_pc.png") no-repeat center center;
 width: 50px;
 height: 50px;
 margin-top: -0px;
 left: 2.5%;
 right: auto;
}
.swiper-button-prev:hover{
 background: url("https://cdn.porsche.co.jp/sp/assets/common_img/arrow_prev_rd_pc.png") no-repeat center center;
}
@media screen and (max-width: 1070px) {
 .swiper-button-next,
 .swiper-button-prev{
  width: 25px;
  height: 25px;
  top:20%;
 }
}

/******************************************************************************

 @keyframes

******************************************************************************/
/* move ****************************************************/
.js-scrMove,
.js-mvMove{
 opacity: 0;
 -webkit-transition: 1s cubic-bezier(.785, .135, .15, .86) 0s;
 transition:  1s cubic-bezier(.785, .135, .15, .86) 0s;
}
.js-scrMove.on,
.js-mvMove.on{
 opacity:1;
 -webkit-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 animation-duration:1s;
 visibility: visible !important;
}


.js-piace {
 -webkit-transition: 0.3s cubic-bezier(.785, .135, .15, .86) 0s;
 transition:  0.3s cubic-bezier(.785, .135, .15, .86) 0s;
}
.js-piace.on {
 -webkit-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: piace;
 animation-name: piace;
}
@-webkit-keyframes piace {
 0% { transform: translateX(-50px);}
 100% { transform: translateX(0);}
}
@keyframes piace {
 0% {  transform: translateX(-50px);}
 100% { transform: translateX(0);}
}

.js-fromBottom.on{
 -webkit-animation-name: fromBottom;
 animation-name: fromBottom;
}
@-webkit-keyframes fromBottom {
 0% { transform: translateY(50px);}
 100% { transform: translateY(0);}
}
@keyframes fromBottom {
 0% {  transform: translateY(50px);}
 100% { transform: translateY(0);}
}