.mobile-inner-nav a{

      -webkit-animation-duration: 0.8s;

      animation-duration: 0.8s;

      -webkit-animation-fill-mode: both;

      animation-fill-mode: both;

      -webkit-animation-name: bounceInRight;

      animation-name: bounceInRight;

    }



      

    @-webkit-keyframes bounceInRight {

      from, 60%, 75%, 90%, to {

        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

      }



      from {

        opacity: 0;

        -webkit-transform: translate3d(3000px, 0, 0);

        transform: translate3d(3000px, 0, 0);

      }



      60% {

        opacity: 1;

        -webkit-transform: translate3d(-25px, 0, 0);

        transform: translate3d(-25px, 0, 0);

      }



      75% {

        -webkit-transform: translate3d(10px, 0, 0);

        transform: translate3d(10px, 0, 0);

      }



      90% {

        -webkit-transform: translate3d(-5px, 0, 0);

        transform: translate3d(-5px, 0, 0);

      }



      to {

        -webkit-transform: none;

        transform: none;

      }

    }



    @keyframes bounceInRight {

      from, 60%, 75%, 90%, to {

        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

      }



      from {

        opacity: 0;

        -webkit-transform: translate3d(3000px, 0, 0);

        transform: translate3d(3000px, 0, 0);

      }



      60% {

        opacity: 1;

        -webkit-transform: translate3d(-25px, 0, 0);

        transform: translate3d(-25px, 0, 0);

      }



      75% {

        -webkit-transform: translate3d(10px, 0, 0);

        transform: translate3d(10px, 0, 0);

      }



      90% {

        -webkit-transform: translate3d(-5px, 0, 0);

        transform: translate3d(-5px, 0, 0);

      }



      to {

        -webkit-transform: none;

        transform: none;

      }

    }

.mobile{

    width: 100%;

    position: absolute;

    right: 0;

    top: 0;

    z-index: 999;

    display: none;

}

.mobile-inner{

    width: 550px;

    margin-right: auto;

    margin-left: auto;

    background-color: #fafafa;

    position: relative;

}

.mobile-inner img{

    width: 100%;

    margin-bottom: 30px;

}

.mobile-inner p{

    color: #676767;

    line-height: 25px;

    font-size: 16px;

    padding-bottom: 30px;

    padding-right: 30px;

    padding-left: 30px;

    margin:0px;

}

.mobile-inner-header{

    background:none;

    width: 30%;

    height: 50px;

    position: absolute;

    top:-6px;

    right: 0px;

}

.mobile-inner-header-icon{

    color: #661e68;

    height: 70px;

    font-size:25px;

    text-align: center;

    float:right;

    width: 50px;

    position: relative;

    -webkit-transition: background 0.5s;

    -moz-transition: background 0.5s;

    -o-transition: background 0.5s;

    transition: background 0.5s;

     background: none

}

.mobile-inner-header-icon:hover{

    background:none;

    cursor: pointer;

}

.mobile-inner-header-icon span{

    position: absolute;

    left: calc((100% - 25px) / 2);

    top: calc((100% - 1px) / 2);

    width: 25px;

    height: 3px;

    background-color: #e6bb61;

}

.mobile-inner-header-icon span:nth-child(1){

transform: translateY(4px) rotate(0deg);

    }

.mobile-inner-header-icon span:nth-child(2){

transform: translateY(-4px) rotate(0deg);

    }

    







    

.mobile-inner-header-icon-click span:nth-child(1){

    animation-duration: 0.5s;

    animation-fill-mode: both;

    animation-name: clickfirst;

    }       

.mobile-inner-header-icon-click span:nth-child(2){

    animation-duration: 0.5s;

    animation-fill-mode: both;

    animation-name: clicksecond;

    }

    





@keyframes clickfirst {

  0% {

      transform: translateY(4px) rotate(0deg);

      

  }



  100% {

    transform: translateY(0) rotate(45deg);

  }

}   







@keyframes clicksecond {

  0% {

      transform: translateY(-4px) rotate(0deg);

  }



  100% {

    transform: translateY(0) rotate(-45deg);

  }

}   



.mobile-inner-header-icon-out span:nth-child(1){

    animation-duration: 0.5s;

    animation-fill-mode: both;

    animation-name: outfirst;

    }       

.mobile-inner-header-icon-out span:nth-child(2){

    animation-duration: 0.5s;

    animation-fill-mode: both;

    animation-name: outsecond;

    }



@keyframes outfirst {

  0% {

    transform: translateY(0) rotate(-45deg);

  }



  100% {

    transform: translateY(-4px) rotate(0deg);

  }

}   







@keyframes outsecond {

  0% {

    transform: translateY(0) rotate(45deg);

  }



  100% {

    transform: translateY(4px) rotate(0deg);

  }

}



.mobile-inner-nav{

    background-color: rgba(140,140,140,0.9);

    width: 100%;

    position: absolute;

    top: 45px;

    left: 0px;

    padding: 10px 0 30px 0;

    z-index: 999999;

    display: none;

}

.mobile-inner-nav li{ margin:0 10px ;}

.mobile-inner-nav a{

    display: inline-block;

    line-height: 50px;

    text-decoration: none;

    width: 100%;

   

    color: #FFFFFF;

    border-bottom: solid 1px rgba(255,255,255,0.3);

    -webkit-transition: all 0.5s;

    -moz-transition: all 0.5s;

    -o-transition: all 0.5s;

    transition: all 0.5s;

    font-weight:300;

    font-size: 14px;

}

.mobile-inner-nav a:hover{

    color: rgba(255,255,255,0.4);

    border-bottom: solid 1px rgba(255,255,255,0.2);

}