.open {position: fixed; top: 31px; right: 130px; width: 30px; height: 30px; display: block; cursor: pointer;
       -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear}
.open span {display: block; float: left; clear: both; height: 4px; width: 21px; border-radius: 40px; background-color: #fff;
        position: absolute; right: 3px; top: 3px; overflow: hidden; -webkit-transition: all 0.4s ease; transition: all 0.4s ease}
.open span:nth-child(1) {z-index: 9}
.open span:nth-child(2) {margin-top: 9px}
.open span:nth-child(3) {margin-top: 18px}
.sub-menu {-webkit-transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    height: 0; width: 0; right: -60px; top: -22PX; position: absolute; background-color: #f8359c; border-radius: 0 0 0 80%; 
    z-index: 18; overflow: hidden; border-left: 40px solid #f9555b; border-bottom: 40px solid #f9555b}
.open .sub-menu {border-bottom-color: #fff; border-left-color: #fff}
.sub-menu li {display: block; float: right; clear: both; height: auto; margin-right: -160px;
             -webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
             transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)}
.sub-menu li:first-child {margin-top: 245px}
.sub-menu li:nth-child(1) {-webkit-transition-delay: 0.05s}
.sub-menu li:nth-child(2) {-webkit-transition-delay: 0.10s}
.sub-menu li:nth-child(3) {-webkit-transition-delay: 0.15s}
.sub-menu li:nth-child(4) {-webkit-transition-delay: 0.20s}
.sub-menu li:nth-child(5) {-webkit-transition-delay: 0.25s}
.sub-menu li:nth-child(6) {-webkit-transition-delay: 0.30s}
.sub-menu li:nth-child(7) {-webkit-transition-delay: 0.35s}

.sub-menu li a {color: #fff; display: block; float: left; font-size: 23px; line-height: 34px; text-transform: uppercase; width: 100%;
                transform: perspective(1px) translateZ(0px)}

.sub-menu li a:after {background: #fff; content: ""; position: absolute; left: 0; right: 100%; height: 3px; transition-duration: 0.3s;
        transition-property: right; transition-timing-function: ease-out; bottom: 0}
.sub-menu li a:hover:after, .sub-menu li a:focus:after, .sub-menu li a:active:after { right: 0}
.oppenned .sub-menu {opacity: 1; height: 650px; width: 650px; border-color: #f00881 !important}
.oppenned span:nth-child(1) {margin: -13px 0 0 0}
.oppenned span:nth-child(2) {overflow: visible}
.oppenned span:nth-child(1), .oppenned span:nth-child(3) {z-index: 100; -webkit-transform: rotate(45deg); transform: rotate(45deg)}
.oppenned span:nth-child(1) {-webkit-transform: rotate(45deg) translateY(12px) translateX(12px);
                             transform: rotate(45deg) translateY(12px) translateX(12px)}
.oppenned span:nth-child(2) {height: 600px; width: 560px; right: -160px; top: -160px; border-radius: 0 0 0 75%; background-color: #d80875;}

.oppenned span:nth-child(3) {
    -webkit-transform: rotate(-45deg) translateY(-10px) translateX(10px);
    transform: rotate(-45deg) translateY(-10px) translateX(10px)}
.oppenned li {margin-right: 220px}
.button {display: block;float: left; clear: both; padding: 20px 40px; background: #fff; border-radius: 3px; border: 2px solid #10a1ea;
         overflow: hidden; position: relative}
.button:after {-webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease;
        transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease;
        content: ""; position: absolute; height: 200px; width: 400px;
        -webkit-transform: rotate(45deg) translateX(-540px) translateY(-100px);
        transform: rotate(45deg) translateX(-540px) translateY(-100px); background: #10a1ea; z-index: 1}
.button:before {-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        transition: -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        content: attr(title); position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; z-index: 2; text-align: center;
        padding: 20px 40px; -webkit-transform: translateY(200px); transform: translateY(200px)}
.button:hover {text-decoration: none}
.button:hover:after {-webkit-transform: translateX(-300px) translateY(-100px); transform: translateX(-300px) translateY(-100px)}
.button:hover:before {-webkit-transform: translateY(0); transform: translateY(0)}



/***************  add new **************/

@media only screen and (max-width: 480px) {

.sub-menu li a {font-size: 28px;line-height: 38px;}


}

/***************  add new close **************/