.demo{ background: #e7e7e7; }
.email-signature{
background: #fff;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
box-shadow: 10px 10px 0 -2px rgba(0, 0, 0, 0.2);
position: relative;
}
.email-signature:after{
content: '';
display: block;
clear: both;
}
.email-signature .signature-details{
width: 50%;
padding: 12px 20px 0;
float: left;
display: inline-block;
}
.email-signature .signature-img{
width: 120px;
height: 120px;
margin: 0 auto 10px;
border-radius: 50%;
border-top: 5px solid #B2CC10;
border-right: 5px solid #00b894;
border-bottom: 5px solid #B2CC10;
border-left: 5px solid #00b894;
overflow: hidden;
}
.email-signature .signature-img img{
width: 100%;
height: auto;
}
.email-signature .title{
color: #00b894;
font-size: 25px;
font-weight: 500;
line-height: 25px;
margin: 0;
}
.email-signature .post{
color: #B2CC10;
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
.email-signature .signature-content{
background: #B2CD10;
vertical-align: top;
width: 43%;
padding: 18px 0;
margin: 0;
float: left;
display: inline-block;
list-style: none;
}
.email-signature .signature-content li{
color: #000;
font-size: 15px;
line-height: 40px;
padding: 0 25px;
position: relative;
}
.email-signature .signature-content li span{
color: #fff;
background: #AC0E69;
width: 40px;
height: 40px;
line-height: 40px;
transform: translateY(-50%);
position: absolute;
left: -20px;
top: 50%;
}
.email-signature .signature-content li:nth-child(even) span{ background: #801855; }
.email-signature .icon{
padding: 0;
margin: 0;
list-style: none;
position: absolute;
top: 20px;
right: 20px;
}
.email-signature .icon li a{
color: #fff;
background: #13999A;
line-height: 40px;
width: 40px;
height: 40px;
box-shadow: 0 -5px 5px -5px #666 inset;
display: block;
}
.email-signature .icon li a:hover{ background:#0B7D7A; }
@media screen and (max-width:576px){
.email-signature{ padding: 0 0 40px 0; }
.email-signature .signature-details{
width: 100%;
padding: 20px 20px 15px;
float: none;
}
.email-signature .title{ font-size: 20px; }
.email-signature .signature-content{
width: 100%;
padding: 20px 0;
float: none;
}
.email-signature .signature-content li{ padding: 40px 0 0 0; }
.email-signature .signature-content li span{
transform: translateX(-50%) translateY(0);
left: 50%;
top: 0;
}
.email-signature .icon{
top: auto;
bottom: 15px;
left: 0;
right: 0;
margin: 0 auto;
}
.email-signature .icon li{
display: inline-block;
margin-left: -4px;
}
}