<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!------------------ Card Effect Style : Demo - 1 --------------->
<div class="container">
<h3 class="text-center">Card Effect Style : Demo - 1</h3>
<div class="row my-5 justify-content-center">
<div class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-10">
<div class="email-signature1">
<div class="signature-content">
<div class="signature-details">
<h2 class="title">Jhon Doe</h2>
<span class="post">Web Developer / CEO</span>
</div>
<ul class="inner-content">
<li><span class="fa fa-map-marker fa-lg text-white"></span> #2021, Lorem Ipsum</li>
<li><span class="fa fa-mobile fa-lg text-white"></span> 0987654321</li>
<li><span class="fa fa-envelope text-white"></span> mail@example.com</li>
<li><span class="fa fa-globe text-white"></span> yourwebsite.com</li>
</ul>
</div>
<div class="signature-img">
<img src="https://www.w3schools.com/bootstrap/img_avatar4.png" alt="">
</div>
<ul class="icon">
<li><a href=""><i class="fa fa-facebook-f"></i></a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
<li><a href=""><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<hr>
<!------------------ Card Effect Style : Demo - 2 --------------->
<div class="container">
<h3 class="text-center">Card Effect Style : Demo - 2</h3>
<div class="row my-5 justify-content-center">
<div class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-10">
<div class="email-signature2">
<div class="signature-details">
<h2 class="title">Jhon doe</h2>
<span class="post">web developer / Founder</span>
</div>
<ul class="signature-content">
<li>0987654321 <span class="fa fa-mobile fa-lg"></span></li>
<li>mail@example.com <span class="fa fa-envelope"></span></li>
<li>#2021, Lorem Ipsum <span class="fa fa-map-marker fa-lg"></span></li>
<li>www.yourwebsite.com <span class="fa fa-globe"></span></li>
</ul>
<div class="signature-icon">
<i class="fa fa-user"></i>
</div>
<ul class="icon">
<li><a href=""><i class="fa fa-facebook-f"></i></a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
<li><a href=""><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<hr>
<!------------------ Card Effect Style : Demo - 3 --------------->
<div class="container">
<h3 class="text-center">Card Effect Style : Demo - 3</h3>
<div class="row my-5 justify-content-center">
<div class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 ">
<div class="email-signature3">
<div class="signature-img">
<img src="https://www.w3schools.com/bootstrap/img_avatar1.png" alt="">
</div>
<div class="signature-details">
<h2 class="title">Jhon Doe</h2>
<span class="post">web developer</span>
</div>
<ul class="signature-content">
<li><span class="fa fa-mobile fa-lg"></span> 0987654321</li>
<li><span class="fa fa-map-marker fa-lg"></span> #2021, Lorem Ipsum</li>
<li><span class="fa fa-envelope"></span> mail@example.com</li>
</ul>
<ul class="icon">
<li><a href=""><i class="fa fa-facebook"></i></a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
<li><a href=""><i class="fa fa-google-plus"></i></a></li>
</ul>
<span class="signature-website">www.yourwebsite.com</span>
</div>
</div>
</div>
</div>
<hr>
<!------------------ Card Effect Style : Demo - 4 --------------->
<div class="container">
<h3 class="text-center">Card Effect Style : Demo - 4</h3>
<div class="row my-5 justify-content-center">
<div class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-10">
<div class="email-signature4">
<div class="signature-img">
<img src="https://www.w3schools.com/bootstrap/img_avatar1.png" alt="">
</div>
<div class="content">
<div class="signature-details">
<h3 class="title">Steve Thomas</h3>
<span class="post">Web Developer</span>
</div>
<ul class="signature-content">
<li><span class="fa fa-phone"></span> +0987654321</li>
<li><span class="fa fa-envelope"></span> mail@example.com</li>
<li>www.yourwebsite.com</li>
</ul>
<ul class="icon">
<li><a href="" class="fa fa-facebook"></a></li>
<li><a href="" class="fa fa-twitter"></a></li>
<li><a href="" class="fa fa-linkedin"></a></li>
<li><a href="" class="fa fa-google-plus"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<hr>
<!------------------ Card Effect Style : Demo - 5 --------------->
<div class="container-fluid py-5" style="background:#dddcda">
<div class="container">
<h3 class="text-center">Card Effect Style : Demo - 5</h3>
<div class="row my-5 justify-content-center">
<div class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-10">
<div class="email-signature5">
<div class="signature-icon">
<i class="fa fa-user"></i>
</div>
<ul class="signature-content">
<li><h3 class="title">Jhon doe</h3></li>
<li><span class="post">Web Designer</span></li>
<li>Address: #2021 Lorem Ipsum</li>
<li>Mobile: (123) 456-7890</li>
<li>Email: mail@example.com</li>
</ul>
<ul class="icon">
<li><a href="" class="fa fa-facebook"></a></li>
<li><a href="" class="fa fa-google-plus"></a></li>
<li><a href="" class="fa fa-twitter"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<hr>
<!------------------ Card Effect Style : Demo - 6 --------------->
<div class="container-fluid py-5" style="background:#dddcda">
<div class="container">
<h3 class="text-center">Card Effect Style : Demo - 6</h3>
<div class="row my-5 justify-content-center">
<div class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-10">
<div class="email-signature6">
<div class="signature-details">
<div class="signature-icon">
<i class="fa fa-user"></i>
</div>
<h3 class="title">Jhon doe</h3>
<span class="post">Web Designer / CEO</span>
<ul class="icon">
<li><a href="" class="fa fa-facebook"></a></li>
<li><a href="" class="fa fa-google-plus"></a></li>
<li><a href="" class="fa fa-twitter"></a></li>
</ul>
</div>
<ul class="signature-content">
<li><span>A</span>#2021 Lorem Ipsum</li>
<li><span>M</span> +0987654321</li>
<li><span>T</span> (123) 456-7890</li>
<li><span>E</span> mail@example.com</li>
<li><a href=""><span>www.yourwebsite.com</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<hr>
<!------------------ Card Effect Style : Demo - 7 --------------->
<div class="container-fluid py-5" style="background:#E6E6E6">
<div class="container">
<h3 class="text-center">Card Effect Style : Demo - 7</h3>
<div class="row my-5 justify-content-center">
<div class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-10">
<div class="email-signature7">
<div class="signature-icon">
<i class="fa fa-user"></i>
</div>
<div class="signature-detail">
<h2 class="title">Jhon Doe</h2>
<span class="post">Web Designer</span>
</div>
<ul class="icon">
<li><a href="" class="fa fa-facebook"></a></li>
<li><a href="" class="fa fa-google-plus"></a></li>
<li><a href="" class="fa fa-twitter"></a></li>
</ul>
<ul class="signature-content">
<li><span>A</span>#2021 Lorem Ipsum</li>
<li><span>M</span>(123) 456-7890</li>
<li><span>E</span> mail@example.com</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<hr>
<!------------------ Card Effect Style : Demo - 8 --------------->
<div class="container-fluid py-5" style="background:#e7e7e7">
<div class="container">
<h3 class="text-center">Card Effect Style : Demo - 8</h3>
<div class="row my-5 justify-content-center">
<div class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 ">
<div class="email-signature8">
<div class="signature-details">
<div class="signature-img">
<img src="https://www.w3schools.com/bootstrap/img_avatar1.png" alt="">
</div>
<h2 class="title">Michel Doe</h2>
<span class="post">web designer</span>
</div>
<ul class="signature-content">
<li><span class="fa fa-mobile fa-lg"></span> 0987654321</li>
<li><span class="fa fa-envelope"></span> mail@example.com</li>
<li><span class="fa fa-globe"></span> www.yourwebsite.com</li>
<li><span class="fa fa-map-marker fa-lg"></span> #2021, Lorem Ipsum</li>
</ul>
<ul class="icon">
<li><a href=""><i class="fa fa-facebook"></i></a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
<li><a href=""><i class="fa fa-google-plus"></i></a></li>
<li><a href=""><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<hr>
<!------------------ Card Effect Style : Demo - 9 --------------->
<div class="container">
<h3 class="text-center">Card Effect Style : Demo - 9</h3>
<div class="row my-5 justify-content-center">
<div class="col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8">
<div class="email-signature9">
<div class="signature-img">
<img src="https://www.w3schools.com/bootstrap/img_avatar1.png" alt="">
</div>
<div class="signature-details">
<h2 class="title">Jhon Doe</h2>
<span class="post">Web Developer / Founder</span>
</div>
<ul class="signature-content">
<li><span>Phone:</span> 0987654321</li>
<li><span>Email:</span> #2021, Lorem Ipsum</li>
<li><span>Address:</span> mail@example.com</li>
</ul>
<ul class="icon">
<li><a href=""><i class="fa fa-facebook"></i></a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
<li><a href=""><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<hr>
<!------------------ Card Effect Style : Demo - 10 --------------->
<div class="container-fluid py-5" style="background:#F6DACF">
<div class="container">
<h3 class="text-center">Card Effect Style : Demo - 10</h3>
<div class="row my-5 justify-content-center">
<div class="col-md-offset-3 col-md-6 col-sm-offset-1 col-sm-10">
<div class="email-signature10">
<div class="signature-img">
<img src="https://www.w3schools.com/bootstrap/img_avatar4.png" alt="">
</div>
<div class="signature-details">
<h2 class="title">Johne Doe</h2>
<span class="post">web designer / Developer</span>
</div>
<ul class="signature-content">
<li><span class="fa fa-map-marker fa-lg"></span> #2021, Lorem Ipsum</li>
<li><span class="fa fa-envelope"></span> mail@example.com</li>
<li><span class="fa fa-phone fa-lg"></span> 0987654321</li>
<li><span class="fa fa-globe"></span> yourwebsite.com</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<hr>
h3{margin: 2em 0em;}
.my-5{margin:7em 0em !important;}
/*********************** Demo - 1 *******************/
.email-signature1{background:#fff;font-family:Lato,sans-serif;padding:25px;box-shadow:0 0 10px rgba(0,0,0,.4);position:relative;z-index:1}
.email-signature1:before{content:"";background:linear-gradient(to right,#f01c4e ,#69177d);width:47%;height:100%;position:absolute;top:0;right:0;z-index:-1}
.email-signature1 .signature-content{color:#fff;background:#001f38;width:65%;padding:20px}
.email-signature1 .signature-details{text-align:center;margin:0 0 10px;display:inline-block}
.email-signature1 .title{font-size:24px;font-weight:600;text-transform:uppercase;margin:0}
.email-signature1 .post{font-size:14px}
.email-signature1 .inner-content{padding:0 40px 0 0;margin:0;list-style:none}
.email-signature1 .inner-content li{color:#fff;font-size:15px;line-height:35px;display:block}
.email-signature1 .inner-content li span{color:#001f38;background:linear-gradient(to right,#f01c4e ,#69177d);text-align:center;line-height:25px;width:25px;height:25px;margin-right:6px;border-radius:5px}
.email-signature1 .signature-img{background:#fff;width:160px;height:160px;padding:7px;overflow:hidden;transform:translateY(-50%);position:absolute;top:50%;right:13%;z-index:1}
.email-signature1 .signature-img img{width:100%;height:auto}
.email-signature1 .icon{padding:0;margin:0;list-style:none;transform:translateY(-50%);position:absolute;top:50%;right:20px}
.email-signature1 .icon li a{color:#f01c4e;background:#fff;font-size:18px;text-align:center;line-height:30px;width:30px;height:30px;margin:15px 0;border-radius:50%;display:block;transition:all .3s ease 0s}
.email-signature1 .icon li a:hover{color:#fff;background:#f01c4e;text-decoration:none;box-shadow:0 0 10px #fff}
@media screen and (max-width:767px){.email-signature1 .signature-img{right:17%}
}
@media screen and (max-width:576px){.email-signature1{padding:17px}
.email-signature1:before{width:100%;height:50%;top:auto;bottom:0}
.email-signature1 .signature-content{text-align:center;width:100%;padding:20px 10px 50px}
.email-signature1 .inner-content{padding:0}
.email-signature1 .inner-content li{line-height:40px}
.email-signature1 .signature-img{margin:0 auto;transform:translateY(0);position:relative;right:0;top:-35px}
.email-signature1 .icon{text-align:center;transform:translateY(0) translatex(50%);top:auto;bottom:10px;right:50%}
.email-signature1 .icon li{display:inline-block}
.email-signature1 .icon li a{margin:0 5px 0}
}
/*********************** Demo - 2 *******************/
.demo{background-color:#4a5069}
.email-signature2{background:#fff;font-family:Karla,sans-serif;padding:30px 35px 30px 30px;box-shadow:0 0 10px rgba(0,0,0,.4);position:relative;z-index:1}
.email-signature2:before{content:"";background:linear-gradient(to right,#da4453,#89216b);width:100%;height:19%;position:absolute;bottom:0;left:0;z-index:-1}
.email-signature2 .signature-details{color:#89216b;width:50%;margin-bottom:20px;display:inline-block}
.email-signature2 .title{font-size:24px;font-weight:700;text-transform:uppercase;margin:0}
.email-signature2 .post{font-size:15px;text-transform:capitalize}
.email-signature2 .signature-content{color:#000;font-size:14px;line-height:35px;text-align:right;width:50%;padding:0 33px 0 0;margin:30px 0 60px;display:inline-block;float:right;list-style:none;position:relative}
.email-signature2 .signature-content li{position:relative}
.email-signature2 .signature-content li span{color:#fff;background:#89216b;line-height:25px;text-align:center;width:25px;height:25px;border-radius:5px;position:absolute;right:-33px;top:4px}
.email-signature2 .signature-icon{color:rgba(255,255,255,.5);background:linear-gradient(to right,#da4453,#89216b);font-size:50px;text-align:center;line-height:125px;width:140px;height:140px;border:7px solid #fff;display:inline-block}
.email-signature2 .icon{text-align:right;padding:0;margin:0;list-style:none;position:absolute;right:35px;bottom:13px}
.email-signature2 .icon li{text-align:center;margin:0 0 0 8px;display:inline-block}
.email-signature2 .icon li a{color:#89216b;background:#fff;font-size:15px;line-height:29px;text-align:center;width:28px;height:28px;border-radius:50%;display:block;transition:all .3s ease 0s}
.email-signature2 .icon li a:hover{color:#fff;background:#89216b;box-shadow:0 0 10px -3px #fff;text-decoration:none;}
@media screen and (max-width:576px){.email-signature2{text-align:center;padding:20px 20px 60px 20px}
.email-signature2 .signature-details{width:100%;margin:0 0 10px}
.email-signature2 .title{font-size:20px}
.email-signature2 .signature-content{text-align:center;width:auto;padding:0;margin:0 auto 20px;float:none;display:inline-block}
.email-signature2 .signature-content li{margin-top:30px}
.email-signature2 .signature-content li span{transform:translateX(50%);top:-25px;right:50%}
.email-signature2 .signature-icon{margin:0 auto;float:none;display:block}
.email-signature2 .icon{text-align:center;width:100%;transform:translateX(-50%);bottom:15px;left:50%}
}
/*********************** Demo - 3 *******************/
.email-signature3{font-family:'Roboto Condensed',sans-serif;background:linear-gradient(-45deg,#ced6e0,#dfe4ea);padding:0 0 60px 180px;box-shadow:10px 10px 10px rgba(0,0,0,.2);position:relative}
.email-signature3 .signature-img{background:linear-gradient(-45deg,#e82c56,#fc718e);width:145px;height:145px;padding:10px 10px;overflow:hidden;position:absolute;top:25px;left:17px}
.email-signature3 .signature-img img{width:100%;height:auto}
.email-signature3 .signature-details{color:#fff;background:linear-gradient(to right,#e82c56,#fc718e);padding:15px 15px;margin-bottom:15px;box-shadow:0 3px 10px rgba(0,0,0,.3)}
.email-signature3 .title{font-size:24px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin:0 0 5px;display:inline-block}
.email-signature3 .title:after{content:'/';display:inline-block;margin:0 0 0 5px}
.email-signature3 .post{font-size:15px;font-weight:500;letter-spacing:1px;text-transform:capitalize;display:inline-block}
.email-signature3 .signature-content{color:#5a5a5a;font-size:16px;line-height:35px;padding:0 0 0 10px;margin:0;list-style:none}
.email-signature3 .signature-content li span{margin:0 6px 0 0}
.email-signature3 .icon{padding:0;margin:0;list-style:none;box-shadow:0 -1px 10px rgba(0,0,0,.3);position:absolute;bottom:0;left:0}
.email-signature3 .icon li{margin-right:-35px;display:inline-block;-webkit-clip-path:polygon(29% 0,100% 0,69% 100%,0 100%);clip-path:polygon(29% 0,100% 0,69% 100%,0 100%)}
.email-signature3 .icon li:first-child{-webkit-clip-path:polygon(0 0,100% 0,69% 100%,0 100%);clip-path:polygon(0 0,100% 0,69% 100%,0 100%)}
.email-signature3 .icon li a{color:#fff;background:linear-gradient(to right,#e82c56 50%,#fc718e);font-size:18px;line-height:45px;height:45px;padding:0 40px;display:block;transition:all .3s ease 0s}
.email-signature3 .icon li a:hover{background:linear-gradient(to right,#373c44 50%,#57606f);text-decoration:none;}
.email-signature3 .signature-website{font-size:16px;position:absolute;bottom:10px;right:20px}
@media screen and (max-width:576px){.email-signature3{padding:180px 0 75px 0}
.email-signature3 .signature-img{top:17px;left:0;right:0;margin:0 auto}
.email-signature3 .signature-details{text-align:center}
.email-signature3 .title{display:block}
.email-signature3 .title:after{display:none}
.email-signature3 .post{display:block;margin:0}
.email-signature3 .signature-content{padding:0;margin-bottom:7px;text-align:center}
.email-signature3 .icon{box-shadow:none;transform:translateX(-50%);bottom:42px;left:50%}
.email-signature3 .icon li{margin:0 3px;-webkit-clip-path:none;clip-path:none}
.email-signature3 .icon li:first-child{-webkit-clip-path:none;clip-path:none}
.email-signature3 .icon li a{text-align:center;line-height:30px;width:30px;height:30px;padding:0}
.email-signature3 .signature-website{transform:translateX(50%);right:50%;bottom:10px}
}
/*********************** Demo - 4 *******************/
:root{--color_1:#fff;--color_2:#EA2027;--color_3:#a31519}
.email-signature4{font-family:Roboto,sans-serif;padding:0 0 0 140px;position:relative}
.email-signature4 .signature-img{width:165px;height:165px;border:10px solid #fff;box-shadow:10px -10px 0 var(--color_2);transform:translateY(-50%) rotate(45deg);overflow:hidden;position:absolute;top:50%;left:35px}
.email-signature4 .signature-img img{width:140%;height:auto;margin-top:-30px;margin-left:-30px;transform:rotate(-45deg)}
.email-signature4 .content{color:var(--color_1);background:radial-gradient(var(--color_2),var(--color_2),var(--color_3));padding:15px 15px 15px 120px}
.email-signature4 .signature-details:after{content:'';background-color:var(--color_1);height:2px;width:80px;margin:10px 0 0;display:block}
.email-signature4 .title{font-size:25px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin:0}
.email-signature4 .post{font-size:18px;letter-spacing:1px;text-transform:capitalize;display:block}
.email-signature4 .signature-content{margin:0;padding:10px 0 5px 0;list-style:none}
.email-signature4 .signature-content li{font-size:17px;line-height:25px}
.email-signature4 .signature-content li span{font-size:15px;font-weight:600;margin-right:7px;display:inline-block}
.email-signature4 .signature-content li:last-child{margin:0}
.email-signature4 .icon{padding:0;margin:0;list-style:none}
.email-signature4 .icon li{display:inline-block;margin:0 5px 0 0}
.email-signature4 .icon li a{color:var(--color_1);font-size:15px;text-align:center;line-height:25px;height:25px;width:25px;border-radius:10px 0;transition:all .3s ease 0s}
.email-signature4 .icon li a:hover{color:var(--color_2);background-color:#fff;text-decoration:none;box-shadow:0 0 20px var(color_3)}
@media screen and (max-width:767px){.email-signature4{padding:0;margin-top:130px}
.email-signature4 .signature-img{box-shadow:10px 10px 0 var(--color_2);margin:0 auto;transform:translateY(0) rotate(45deg);left:0;right:0;top:-110px}
.email-signature4 .content{padding:110px 15px 15px;text-align:center}
.email-signature4 .signature-details:after{margin:15px auto 0}
.email-signature4 .signature-content{padding:10px 10px 10px 0}
.email-signature4 .icon{padding:0}
}
/*********************** Demo - 5 *******************/
.email-signature5{background:#e1f0f4;font-family:Poppins,sans-serif;padding:20px 20px 20px 200px;border:15px solid #fff;border-radius:0 100px;box-shadow:5px 5px 20px rgba(0,0,0,.4);overflow:hidden;position:relative;z-index:1}
.email-signature5 .signature-icon{color:#fff;background:#00b6d6;font-size:100px;line-height:200px;text-align:center;width:170px;height:100%;position:absolute;top:0;left:0}
.email-signature5 .signature-icon:after,.email-signature5 .signature-icon:before{content:'';position:absolute;right:-1px;top:0;width:100%;height:110%;background-color:#476670;opacity:.15;transform:rotate(-3deg);transform-origin:top right;z-index:-1}
.email-signature5 .signature-icon:after{transform:rotate(-8deg)}
.email-signature5 .signature-content{margin:0 0 15px;padding:0;list-style:none;display:block}
.email-signature5 .signature-content li{color:#476670;font-size:15px;font-weight:300;margin-bottom:5px}
.email-signature5 .signature-content li:first-child{margin:0}
.email-signature5 .title{color:#476670;font-size:20px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin:0;display:block}
.email-signature5 .post{color:#476670;font-size:17px;font-weight:400;text-transform:uppercase;display:block}
.email-signature5 .icon{font-size:22px;padding:0;margin:0;list-style:none}
.email-signature5 .icon li{display:inline-block;margin:0 5px}
.email-signature5 .icon li a{color:#fff;background-color:#00b6d6;padding:5px;transition:all .3s ease 0s}
.email-signature5 .icon li a:hover{background-color:#476670;text-decoration:none;}
@media screen and (max-width:767px){.email-signature5{padding:180px 0 15px 0;border-width:10px}
.email-signature5 .signature-icon{width:100%;height:150px;line-height:150px}
.email-signature5 .signature-icon:after,.email-signature5 .signature-icon:before{height:100%;transform:rotate(0);right:0;top:auto;bottom:-8px}
.email-signature5 .signature-icon:after{bottom:-18px}
.email-signature5 .icon,.email-signature5 .signature-content{text-align:center}
}
/*********************** Demo - 6 *******************/
.email-signature6{font-family:Poppins,sans-serif;background:#fff;position:relative}
.email-signature6 .signature-details{color:#fff;background:#124680;text-align:center;text-transform:uppercase;width:50%;padding:20px;display:inline-block}
.email-signature6 .signature-icon{color:#124680;background:#efefef;font-size:60px;text-align:center;line-height:100px;width:100px;height:100px;margin:0 auto 20px;border-radius:50%}
.email-signature6 .title{font-size:25px;font-weight:700;letter-spacing:1px;margin:0}
.email-signature6 .post{display:block;font-size:17px;letter-spacing:1px;margin:0 0 15px}
.email-signature6 .icon{font-size:16px;padding:0;margin:0;list-style:none}
.email-signature6 .icon li{display:inline-block;margin:0 5px}
.email-signature6 .icon li a{color:#124680;background-color:#fff;text-align:center;line-height:28px;height:28px;width:28px;border-radius:50%;transition:all .3s ease 0s}
.email-signature6 .icon li a:hover{color:#fff;background-color:#124680;box-shadow:0 0 0 2px #fff;text-decoration:none;}
.email-signature6 .signature-content{width:170px;margin:0;padding:0;list-style:none;position:absolute;right:25%;top:50%;transform:translateY(-50%) translateX(50%)}
.email-signature6 .signature-content li{color:#476670;font-size:14px;font-weight:300;margin-bottom:12px}
.email-signature6 .signature-content li span{color:#124680;font-weight:600;margin-right:7px;display:inline-block}
.email-signature6 .signature-content li:last-child{margin:0}
.email-signature6 .signature-content li a span{margin:0}
@media screen and (max-width:479px){.email-signature6 .signature-details{width:100%;padding:20px}
.email-signature6 .title{font-size:20px}
.email-signature6 .signature-content{text-align:center;position:relative;top:auto;bottom:0;right:50%;transform:translateY(0) translateX(50%)}
}
/*********************** Demo - 7 *******************/
.email-signature7{background:#fff;font-family:Poppins,sans-serif;padding:0 0 0 200px;position:relative;z-index:1;overflow:hidden}
.email-signature7:after,.email-signature7:before{content:'';height:100%;width:35%;background:#0a3957;position:absolute;left:0;top:0;z-index:-1;-webkit-clip-path:polygon(0 0,70% 0,100% 50%,70% 100%,0 100%);clip-path:polygon(0 0,70% 0,100% 50%,70% 100%,0 100%)}
.email-signature7:after{height:90%;width:32%;background:#ca3436;transform:translateY(-50%);top:50%;left:30px;z-index:-2}
.email-signature7 .signature-icon{color:#fff;background:#b6b2b3;font-size:60px;line-height:100px;text-align:center;width:100px;height:100px;border-radius:50%;transform:translateY(-50%);position:absolute;top:50%;left:7%}
.email-signature7 .signature-detail{padding:27px 0 20px 25px;border-bottom:3px solid #ca3436}
.email-signature7 .title{color:#ca3436;font-size:22px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin:0}
.email-signature7 .post{color:#ca3436;font-size:17px}
.email-signature7 .icon{font-size:16px;padding:0;margin:0;list-style:none;position:absolute;right:15px;top:28px}
.email-signature7 .icon li{display:inline-block;margin:0 2px}
.email-signature7 .icon li a{color:#fff;background-color:#0a3957;text-align:center;line-height:28px;height:28px;width:28px;border-radius:5px}
.email-signature7 .icon li a:hover{background-color:#ca3436}
.email-signature7 .signature-content{margin:0;padding:10px 0 10px 25px;list-style:none;display:block}
.email-signature7 .signature-content li{color:#949494;font-size:15px;margin-bottom:3px}
.email-signature7 .signature-content li span{color:#ca3436;font-weight:600;margin-right:7px;display:inline-block}
@media screen and (max-width:1200px){.email-signature7{padding:0 0 0 218px}
}
@media screen and (max-width:767px){.email-signature7{padding:185px 0 50px 0}
.email-signature7:before{width:100%;height:40%;-webkit-clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}
.email-signature7:after{background:#ca3436;width:90%;height:38%;transform:translateY(0) translateX(-50%);top:23px;left:50%;-webkit-clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}
.email-signature7 .signature-icon{transform:translateX(-50%) translateY(0);top:22px;left:50%}
.email-signature7 .signature-detail{text-align:center;padding:0 0 10px}
.email-signature7 .icon{transform:translateX(50%);top:auto;right:50%;bottom:15px}
.email-signature7 .signature-content{text-align:center;padding:10px 0 0}
}
/*********************** Demo - 8 *******************/
.email-signature8{background:#fff;font-family:'Roboto Condensed',sans-serif;text-align:center;box-shadow:10px 10px 0 -2px rgba(0,0,0,.2);position:relative}
.email-signature8:after{content:'';display:block;clear:both}
.email-signature8 .signature-details{width:50%;padding:12px 20px 0;float:left;display:inline-block}
.email-signature8 .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-signature8 .signature-img img{width:100%;height:auto}
.email-signature8 .title{color:#00b894;font-size:25px;font-weight:500;line-height:25px;margin:0}
.email-signature8 .post{color:#b2cc10;font-size:15px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.email-signature8 .signature-content{background:#b2cd10;vertical-align:top;width:43%;padding:18px 0;margin:0;float:left;display:inline-block;list-style:none}
.email-signature8 .signature-content li{color:#000;font-size:15px;line-height:40px;padding:0 25px;position:relative}
.email-signature8 .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-signature8 .signature-content li:nth-child(even) span{background:#801855}
.email-signature8 .icon{padding:0;margin:0;list-style:none;position:absolute;top:20px;right:20px}
.email-signature8 .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-signature8 .icon li a:hover{background:#0b7d7a}
@media screen and (max-width:576px){.email-signature8{padding:0 0 40px 0}
.email-signature8 .signature-details{width:100%;padding:20px 20px 15px;float:none}
.email-signature8 .title{font-size:20px}
.email-signature8 .signature-content{width:100%;padding:20px 0;float:none}
.email-signature8 .signature-content li{padding:40px 0 0 0}
.email-signature8 .signature-content li span{transform:translateX(-50%) translateY(0);left:50%;top:0}
.email-signature8 .icon{top:auto;bottom:15px;left:0;right:0;margin:0 auto}
.email-signature8 .icon li{display:inline-block;margin-left:-4px}
}
/*********************** Demo - 9 *******************/
:root{--main-color:#F83B71}
.email-signature9{background:linear-gradient(#f2f2f2,#dbdbdb,#eaeaea);font-family:Lato,sans-serif;padding:20px 10px 20px 200px;overflow:hidden;position:relative}
.email-signature9:after,.email-signature9:before{content:'';background:linear-gradient(to right,#555 49%,#666 50%);height:100%;width:30px;box-shadow:0 0 10px #000;position:absolute;left:80px;top:0}
.email-signature9:after{width:34px;left:auto;right:0}
.email-signature9 .signature-img{height:130px;width:130px;border:4px solid var(--main-color);transform:translateY(-50%);position:absolute;left:30px;top:50%}
.email-signature9 .signature-img img{width:100%;height:auto}
.email-signature9 .signature-details{margin:0 0 10px}
.email-signature9 .title{color:var(--main-color);font-size:20px;font-weight:600;text-transform:uppercase;margin:0 0 5px}
.email-signature9 .post{font-size:17px;font-style:italic}
.email-signature9 .signature-content{color:#000;font-size:15px;line-height:25px;padding:0;margin:0;list-style:none}
.email-signature9 .signature-content li span{margin-right:6px}
.email-signature9 .icon{width:30px;padding:0;margin:0;list-style:none;transform:translateY(-50%);position:absolute;right:0;top:50%;z-index:1}
.email-signature9 .icon li a{color:#fff;background-color:transparent;font-size:16px;text-align:center;line-height:25px;height:25px;width:25px;margin:15px 0;display:block;transition:all .3s ease 0s}
.email-signature9 .icon li a:hover{color:var(--main-color);background-color:#fff;text-decoration:none}
@media screen and (max-width:576px){.email-signature9{padding:150px 20px 40px 20px}
.email-signature9:after,.email-signature9:before{background:linear-gradient(to bottom,#555 49%,#666 50%);width:100%;height:35px;top:60px;left:0;transform:translateY(0)}
.email-signature9:after{top:auto;bottom:0}
.email-signature9 .signature-img{top:10px;left:50%;transform:translateY(0) translateX(-50%)}
.email-signature9 .signature-content,.email-signature9 .signature-details{text-align:center}
.email-signature9 .icon{text-align:center;width:100%;height:30px;transform:translateY(0);top:auto;bottom:0}
.email-signature9 .icon li{display:inline-block}
.email-signature9 .icon li a{margin:0 15px 0}
}
/*********************** Demo - 10 *******************/
.email-signature10{background:#fff;font-family:'Roboto Condensed',sans-serif;padding:50px 20px 15px 120px;box-shadow:10px 10px 3px rgba(0,0,0,.2);overflow:hidden;position:relative}
.email-signature10:before{content:"";background:linear-gradient(to right,#f39c12 49%,#f1c40f 50%);width:18px;height:100%;position:absolute;top:0;left:0}
.email-signature10 .signature-img{background:#fff;width:140px;height:140px;padding:3px;border-radius:50%;border:5px solid #f1c40f;overflow:hidden;position:absolute;top:15px;left:30px;z-index:1}
.email-signature10 .signature-img img{width:100%;height:auto;border-radius:50%}
.email-signature10 .signature-details{color:#fff;background:#3498db;text-align:center;padding:15px 10px 15px 50px;margin-bottom:20px;border-right:15px solid #2980b9}
.email-signature10 .title{font-size:25px;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin:0}
.email-signature10 .post{font-size:16px;font-weight:400;text-transform:uppercase;letter-spacing:1px}
.email-signature10 .signature-content{padding:20px 10px 0 0;margin:0;list-style:none;position:relative}
.email-signature10 .signature-content:after,.email-signature10 .signature-content:before{content:"";background:#2980b9;width:4px;height:100%;position:absolute;top:0;left:-25px}
.email-signature10 .signature-content:after{background:#f1c40f;height:80%;top:20px;left:-35px}
.email-signature10 .signature-content li{color:#95afc0;font-size:16px;margin:0 0 10px;display:block}
.email-signature10 .signature-content li span{color:#f1c40f;font-size:20px;text-align:center;line-height:23px;height:23px;width:25px;margin:2px 2px 0 0}
@media screen and (max-width:576px){.email-signature10{padding:200px 0 15px}
.email-signature10:before{background:linear-gradient(to bottom,#f39c12 49%,#f1c40f 50%);width:100%;height:15px}
.email-signature10 .signature-img{margin:0 auto;top:26px;left:0;right:0}
.email-signature10 .signature-details{padding:10px;border-right:none}
.email-signature10 .signature-content{text-align:center;padding:0}
.email-signature10 .signature-content:after,.email-signature10 .signature-content:before{width:60%;height:4px;transform:translateX(-50%);top:-103px;left:50%}
.email-signature10 .signature-content:after{width:45%;top:-112px}
}
/*********************** Demo - 11 *******************/
/*********************** Demo - 12 *******************/
/*********************** Demo - 13 *******************/
/*********************** Demo - 14 *******************/
/*********************** Demo - 15 *******************/
