.demo{ background-color: #E5E5E5; }
.email-signature{
background: #0a3957;
font-family: 'Noto Sans', sans-serif;
padding: 10px 10px 10px 17%;
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5);
position: relative;
}
.email-signature .signature-icon{
background: #0a3957;
width: 130px;
height: 130px;
padding: 6px 6px;
border-radius: 50%;
transform: translateY(-50%);
position: absolute;
top: 50%;
left: 6%;
z-index: 1;
}
.email-signature .signature-icon img{
width: 100%;
height: auto;
border-radius: 50%;
}
.email-signature .signature-content{
background: #fff;
padding: 10px 50px 10px 22%;
position: relative;
}
.email-signature .signature-details{
color: #EA2027;
margin: 0 0 20px;
}
.email-signature .title{
font-size: 24px;
font-weight: 600;
text-transform: uppercase;
margin: 0 0 5px;
}
.email-signature .post{
font-size: 14px;
font-style: italic;
text-transform: capitalize;
}
.email-signature .signature-content ul{
padding: 0;
margin: 0;
list-style: none;
}
.email-signature .signature-content ul li{
color: #0a3957;
font-size: 15px;
line-height: 29px;
margin-bottom: 3px;
}
.email-signature .signature-content ul li span{
color: #EA2027;
font-weight: 600;
display: inline-block;
margin-right: 7px;
}
.email-signature ul.icon{
background: #EA2027;
height: 100%;
padding: 45px 10px;
position: absolute;
top: 0;
right: 0;
}
.email-signature ul.icon a{
color: #EA2027;
background: #fff;
font-size: 18px;
text-align: center;
line-height: 30px;
width: 30px;
height: 30px;
margin: 0 0 15px;
display: block;
transition: all 0.3s ease 0s;
}
.email-signature ul.icon li a:hover{
color: #fff;
background: #EA2027;
box-shadow: 0 0 15px #fff;
}
@media screen and (max-width:576px){
.email-signature{ padding: 100px 10px 10px 10px; }
.email-signature .signature-icon{
transform: translateX(-50%);
position: absolute;
top: 20px;
left: 50%;
}
.email-signature .signature-content{
text-align: center;
padding: 70px 10px 60px;
}
.email-signature .signature-details{ margin: 0 0 10px; }
.email-signature ul.icon{
width: 100%;
height: 50px;
padding:10px;
position: absolute;
top: auto;
bottom: 0;
right: 0;
}
.email-signature ul.icon li{ display: inline-block; }
.email-signature ul.icon a{ margin: 0 3px; }
}