.share-dialog {
    display: none;
    width: 95%;
    box-shadow: 0 0px 15px -3px rgba(0, 0, 0, .4);
    z-index: -1;
    padding: 20px;
    background-color: #fff;
}


.share-dialog i {
    width: 20px;
    height: 20px;
    margin-right: 7px;
    font-size: 20px;
}

.share-dialog button,
.share-dialog .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: capitalize;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 2px;
    cursor: pointer;
    border: none;
}

.share-dialog button:hover,
.share-dialog .button:hover {
    border-color: #cdd;
}

.share-dialog .share-button,
.share-dialog .copy-link {
    padding-left: 30px;
    padding-right: 30px;
}

.btn-facebook {
    background-color: #3b5998;
}

.btn-messenger {
    background: #0080f7;
}

.btn-whatsapp {
    background: #48c355;
}

.btn-viber {
    background: #7f4790;
}

.btn-skype {
    background: #27a3e3;
}

.btn-sms {
    background: #111;
}

.copy-link {
    background: #fcb800;
    color: #000 !important;
}

.share-button,
.share-dialog {
    position: fixed;
    bottom: -500px;
    left: 0;
    top: auto;
    width: 100%;
    z-index: 999999;
    transition: all 400ms cubic-bezier(.92, .12, 0, .66);
}

.share-dialog.is-open {
    display: block;
    bottom: 0;
    margin-bottom: 60px;
}

.share-dialog header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    align-items: center;
}

.dialog-title {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    text-transform: capitalize;
    color: #111;
}

.share-dialog .targets {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(6, 1fr);
}

.share-dialog .close-button {
    background-color: transparent;
    border: none;
    padding: 0;
    color: #111;
}

.share-dialog .close-button i {
    margin-right: 0;
}

.share-dialog .link {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 4px;
    background-color: #eee;
    margin-top: 20px;
}

.share-dialog .pen-url {
    margin-right: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pen-url {
    color: #191716;
}

.buy-now {
    background-color:#44c767;
    border-radius:28px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-size:16px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}
.buy-now:hover {
    background-color:#5cbf2a;
}
.buy-now:active {
    position:relative;
    top:1px;
}

.send-gift {
    background-color:#C70039;
    border-radius:28px;
    border:1px solid #97002b;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-size:16px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #C70039;
}
.send-gift:hover {
    background-color: #b90036;
    color: #ffffff;
}
.send-gift:active {
    position:relative;
    top:1px;
}

.refer-friend {
    background-color: #007dc7;
    border-radius:28px;
    border:1px solid #0268ab;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-size:16px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #0268ab;
}
.refer-friend:hover {
    background-color: #0251ab;
}
.refer-friend:active {
    position:relative;
    top:1px;
}


@media (max-width: 767px) {
    .share-dialog .targets {
        grid-gap: 15px;
        grid-template-columns: repeat(2, 1fr);
    }
}