.demo{ background-color: #E5E5E5; }
.email-signature{
background: #fff;
font-family: 'Noto Sans', sans-serif;
text-align: center;
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5);
}
.email-signature .signature-details{
color: #fff;
padding: 15px 15px 20px;
margin: 0 0 15px;
overflow: hidden;
position: relative;
z-index: 1;
}
.email-signature .signature-details:before{
content: "";
background: #f83b71;
width: 100%;
height: 170px;
border-radius: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}
.email-signature .title{
font-size: 24px;
font-weight: 600;
text-transform: uppercase;
margin: 0 0 5px;
}
.email-signature .post{
font-size: 16px;
text-transform: capitalize;
}
.email-signature .icon{
padding: 0;
margin: 0 0 10px;
list-style: none;
}
.email-signature .icon li{
margin: 0 5px;
display: inline-block;
}
.email-signature .icon li a{
color: #4D5C63;
font-size: 18px;
transition: all 0.3s ease;
}
.email-signature ul.icon li a:hover{ color: #f83b71; }
.email-signature .signature-content{
width: 235px;
padding: 0 15px;
margin: 0 0 12px;
text-align: left;
list-style: none;
display: inline-block;
}
.email-signature .signature-content li{
color: #4D5C63;
font-size: 15px;
line-height: 25px;
padding-left: 23px;
margin-bottom: 5px;
position: relative;
}
.email-signature .signature-content li span{
color: #f83b71;
position: absolute;
left: 0;
top: 6px;
}
.email-signature .signature-icon{
background: #f83b71;
width: 120px;
height: 120px;
padding: 5px;
margin: 0 auto -20px;
clip-path: polygon(100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
}
.email-signature .signature-icon img{
width: 100%;
height: auto;
clip-path: polygon(100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
}
.email-signature .signature-footer{
color: #fff;
background: #4D5C63;
padding: 35px 12px 10px;
clip-path: polygon(50% 45%, 100% 0, 100% 100%, 0 100%, 0 0);
}