<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="//code.jquery.com/jquery-1.11.1.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">
<section class="container py-5 text-center">
<h2>Material Design Card - Responsive</h2>
<hr/><br/><br/>
<div class="row active-with-click">
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Red">
<h2>
<span>Siddharth Panchal</span>
<strong>
<i class="fa fa-fw fa-magic"></i>
Front-End-Developer
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
</div>
</div>
<a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a target="_parent" href="#!" class="fa fa-fw fa-facebook ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-twitter ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-linkedin ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-google-plus ripple"></a>
</div>
</article>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Blue-Grey">
<h2>
<span>Siddharth Panchal</span>
<strong>
<i class="fa fa-fw fa-magic"></i>
Front-End-Developer
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
</div>
</div>
<a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a target="_parent" href="#!" class="fa fa-fw fa-facebook ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-twitter ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-linkedin ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-google-plus ripple"></a>
</div>
</article>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Pink">
<h2>
<span>Siddharth Panchal</span>
<strong>
<i class="fa fa-fw fa-magic"></i>
Front-End-Developer
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
</div>
</div>
<a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a target="_parent" href="#!" class="fa fa-fw fa-facebook ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-twitter ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-linkedin ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-google-plus ripple"></a>
</div>
</article>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Purple">
<h2>
<span>Siddharth Panchal</span>
<strong>
<i class="fa fa-fw fa-magic"></i>
Front-End-Developer
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
</div>
</div>
<a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a target="_parent" href="#!" class="fa fa-fw fa-facebook ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-twitter ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-linkedin ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-google-plus ripple"></a>
</div>
</article>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Deep-Purple">
<h2>
<span>Siddharth Panchal</span>
<strong>
<i class="fa fa-fw fa-magic"></i>
Front-End-Developer
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
</div>
</div>
<a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a target="_parent" href="#!" class="fa fa-fw fa-facebook ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-twitter ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-linkedin ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-google-plus ripple"></a>
</div>
</article>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Indigo">
<h2>
<span>Siddharth Panchal</span>
<strong>
<i class="fa fa-fw fa-magic"></i>
Front-End-Developer
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
</div>
</div>
<a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a target="_parent" href="#!" class="fa fa-fw fa-facebook ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-twitter ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-linkedin ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-google-plus ripple"></a>
</div>
</article>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Blue">
<h2>
<span>Siddharth Panchal</span>
<strong>
<i class="fa fa-fw fa-magic"></i>
Front-End-Developer
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
</div>
</div>
<a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a target="_parent" href="#!" class="fa fa-fw fa-facebook ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-twitter ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-linkedin ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-google-plus ripple"></a>
</div>
</article>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Light-Blue">
<h2>
<span>Siddharth Panchal</span>
<strong>
<i class="fa fa-fw fa-magic"></i>
Front-End-Developer
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
</div>
</div>
<a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a target="_parent" href="#!" class="fa fa-fw fa-facebook ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-twitter ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-linkedin ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-google-plus ripple"></a>
</div>
</article>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Cyan">
<h2>
<span>Siddharth Panchal</span>
<strong>
<i class="fa fa-fw fa-magic"></i>
Front-End-Developer
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
</div>
</div>
<a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a target="_parent" href="#!" class="fa fa-fw fa-facebook ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-twitter ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-linkedin ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-google-plus ripple"></a>
</div>
</article>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Teal">
<h2>
<span>Siddharth Panchal</span>
<strong>
<i class="fa fa-fw fa-magic"></i>
Front-End-Developer
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
</div>
</div>
<a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a target="_parent" href="#!" class="fa fa-fw fa-facebook ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-twitter ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-linkedin ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-google-plus ripple"></a>
</div>
</article>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Green">
<h2>
<span>Siddharth Panchal</span>
<strong>
<i class="fa fa-fw fa-magic"></i>
Front-End-Developer
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
</div>
</div>
<a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a target="_parent" href="#!" class="fa fa-fw fa-facebook ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-twitter ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-linkedin ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-google-plus ripple"></a>
</div>
</article>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Light-Green">
<h2>
<span>Siddharth Panchal</span>
<strong>
<i class="fa fa-fw fa-magic"></i>
Front-End-Developer
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
</div>
</div>
<a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a target="_parent" href="#!" class="fa fa-fw fa-facebook ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-twitter ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-linkedin ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-google-plus ripple"></a>
</div>
</article>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Lime">
<h2>
<span>Siddharth Panchal</span>
<strong>
<i class="fa fa-fw fa-magic"></i>
Front-End-Developer
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
</div>
</div>
<a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a target="_parent" href="#!" class="fa fa-fw fa-facebook ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-twitter ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-linkedin ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-google-plus ripple"></a>
</div>
</article>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Yellow">
<h2>
<span>Siddharth Panchal</span>
<strong>
<i class="fa fa-fw fa-magic"></i>
Front-End-Developer
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
</div>
</div>
<a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a target="_parent" href="#!" class="fa fa-fw fa-facebook ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-twitter ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-linkedin ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-google-plus ripple"></a>
</div>
</article>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Amber">
<h2>
<span>Siddharth Panchal</span>
<strong>
<i class="fa fa-fw fa-magic"></i>
Front-End-Developer
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
</div>
</div>
<a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a target="_parent" href="#!" class="fa fa-fw fa-facebook ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-twitter ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-linkedin ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-google-plus ripple"></a>
</div>
</article>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Orange">
<h2>
<span>Siddharth Panchal</span>
<strong>
<i class="fa fa-fw fa-magic"></i>
Front-End-Developer
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
</div>
</div>
<a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a target="_parent" href="#!" class="fa fa-fw fa-facebook ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-twitter ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-linkedin ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-google-plus ripple"></a>
</div>
</article>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Deep-Orange">
<h2>
<span>Siddharth Panchal</span>
<strong>
<i class="fa fa-fw fa-magic"></i>
Front-End-Developer
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
</div>
</div>
<a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a target="_parent" href="#!" class="fa fa-fw fa-facebook ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-twitter ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-linkedin ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-google-plus ripple"></a>
</div>
</article>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Brown">
<h2>
<span>Siddharth Panchal</span>
<strong>
<i class="fa fa-fw fa-magic"></i>
Front-End-Developer
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
</div>
</div>
<a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a target="_parent" href="#!" class="fa fa-fw fa-facebook ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-twitter ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-linkedin ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-google-plus ripple"></a>
</div>
</article>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Grey">
<h2>
<span>Siddharth Panchal</span>
<strong>
<i class="fa fa-fw fa-magic"></i>
Front-End-Developer
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
</div>
</div>
<a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a target="_parent" href="#!" class="fa fa-fw fa-facebook ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-twitter ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-linkedin ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-google-plus ripple"></a>
</div>
</article>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Blue-Grey">
<h2>
<span>Siddharth Panchal</span>
<strong>
<i class="fa fa-fw fa-magic"></i>
Front-End-Developer
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
</div>
</div>
<a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a target="_parent" href="#!" class="fa fa-fw fa-facebook ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-twitter ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-linkedin ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-google-plus ripple"></a>
</div>
</article>
</div>
</div>
</section>
@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,700&display=swap");
.container{margin-top:20px}
.fa-spin-fast{-webkit-animation:fa-spin-fast .1s infinite linear;animation:fa-spin-fast 0.1s infinite linear}
@-webkit-keyframes fa-spin-fast{0%{-webkit-transform:rotate(0);transform:rotate(0)}
100%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}
@keyframes fa-spin-fast{0%{-webkit-transform:rotate(0);transform:rotate(0)}
100%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}
.material-card{position:relative;height:0;padding-bottom:calc(100% - 16px);margin-bottom:6.6em}
.material-card h2{position:absolute;top:calc(100% - 16px);left:0;width:100%;padding:10px 16px 10px 20px;height:82px;color:#fff;font-size:1.4em;line-height:1.6em;margin:0;z-index:10;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s;box-shadow: 0 2px 20px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);}
.material-card h2 span{display:block}
.material-card h2 strong{font-weight:300;display:block;font-size:.76em}
.material-card h2:after,.material-card h2:before{content:' ';position:absolute;left:0;top:-16px;width:0;border:8px solid;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s}
.material-card h2:after{top:auto;bottom:0}
@media screen and (max-width:767px){.material-card.mc-active{padding-bottom:0;height:auto}
}
.material-card.mc-active h2{top:0;padding:10px 16px 10px 90px}
.material-card.mc-active h2:before{top:0}
.material-card.mc-active h2:after{bottom:-16px}
.material-card .mc-content{position:absolute;right:0;top:0;bottom:16px;left:16px;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s;box-shadow:0 2px 20px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);}
.material-card .mc-btn-action{position:absolute;right:16px;top:15px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border:5px solid;width:54px;height:54px;line-height:46px;text-align:center;color:#fff!important;cursor:pointer;z-index:20;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s}
.material-card .mc-btn-action:hover{box-shadow:0 0px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);transition:all 0.3s ease;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;}
.material-card.mc-active .mc-btn-action{top:62px;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);}
.material-card .mc-description{position:absolute;top:100%;right:30px;left:30px;bottom:54px;overflow:hidden;opacity:0;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-ms-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
.material-card .mc-footer{height:0;overflow:hidden;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s}
.material-card .mc-footer h4{position:absolute;top:200px;left:30px;padding:0;margin:0;font-size:16px;font-weight:700;-webkit-transition:all .4s;-moz-transition:all 0.4s;-ms-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
.material-card .mc-footer a{display:block;float:left;position:relative;width:40px;height:40px;margin-left:10px;font-size:16px;color:#fff;line-height:36px;text-decoration:none;top:200px;border-radius:50px;}
.material-card .mc-footer a:nth-child(1){-webkit-transition:all .1s;-moz-transition:all .1s;-ms-transition:all .1s;-o-transition:all .1s;transition:all .1s}
.material-card .mc-footer a:nth-child(2){-webkit-transition:all .2s;-moz-transition:all .2s;-ms-transition:all .2s;-o-transition:all .2s;transition:all .2s}
.material-card .mc-footer a:nth-child(3){-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s}
.material-card .mc-footer a:nth-child(4){-webkit-transition:all .4s;-moz-transition:all .4s;-ms-transition:all .4s;-o-transition:all .4s;transition:all .4s}
.material-card .mc-footer a:nth-child(5){-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}
.material-card .img-container{overflow:hidden;position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s;}
.material-card.mc-active .img-container{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;left:0;top:12px;width:55px;height:55px;z-index:20}
.img-fluid{max-width:100%}
.material-card.mc-active .mc-content{padding-top:5.6em}
@media screen and (max-width:767px){.material-card.mc-active .mc-content{position:relative;margin-right:16px}
}
.material-card.mc-active .mc-description{top:50px;padding-top:5.6em;opacity:1;text-align:left;}
@media screen and (max-width:767px){.material-card.mc-active .mc-description{position:relative;top:auto;right:auto;left:auto;padding:50px 30px 70px 30px;bottom:0}
}
.material-card.mc-active .mc-footer{overflow:visible;position:absolute;top:calc(100% - 16px);left:16px;right:0;height:72px;display:flex;align-items:center;justify-content:center; box-shadow:0 2px 20px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);}
.material-card.mc-active .mc-footer a{top:0;border:2px solid #e8eaf6;}
.material-card.mc-active .mc-footer h4{top:27px;left:20px;font-weight:400;}
.material-card.Red h2{background-color:#DC3545}
.material-card.Red h2:after{border-top-color:#DC3545;border-right-color:#DC3545;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Red h2:before{border-top-color:transparent;border-right-color:#DC3545;border-bottom-color:#DC3545;border-left-color:transparent}
.material-card.Red.mc-active h2:before{border-top-color:transparent;border-right-color:#DC3545;border-bottom-color:#DC3545;border-left-color:transparent}
.material-card.Red.mc-active h2:after{border-top-color:#DC3545;border-right-color:#DC3545;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Red .mc-btn-action{background-color:#DC3545}
.material-card.Red .mc-btn-action:hover{background-color:#DC3545}
.material-card.Red .mc-footer h4{color:#DC3545}
.material-card.Red .mc-footer a{background-color:#DC3545}
.material-card.Red.mc-active .mc-content{background-color:#e7b3ba45}
.material-card.Red.mc-active .mc-footer{background-color:#dc354552}
.material-card.Red.mc-active .mc-btn-action{border-color:#FCE4EC}
.material-card.Blue-Grey h2{background-color:#607d8b}
.material-card.Blue-Grey h2:after{border-top-color:#607d8b;border-right-color:#607d8b;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Blue-Grey h2:before{border-top-color:transparent;border-right-color:#263238;border-bottom-color:#263238;border-left-color:transparent}
.material-card.Blue-Grey.mc-active h2:before{border-top-color:transparent;border-right-color:#607d8b;border-bottom-color:#607d8b;border-left-color:transparent}
.material-card.Blue-Grey.mc-active h2:after{border-top-color:#263238;border-right-color:#263238;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Blue-Grey .mc-btn-action{background-color:#607d8b}
.material-card.Blue-Grey .mc-btn-action:hover{background-color:#263238}
.material-card.Blue-Grey .mc-footer h4{color:#263238}
.material-card.Blue-Grey .mc-footer a{background-color:#263238}
.material-card.Blue-Grey.mc-active .mc-content{background-color:#eceff1}
.material-card.Blue-Grey.mc-active .mc-footer{background-color:#cfd8dc}
.material-card.Blue-Grey.mc-active .mc-btn-action{border-color:#eceff1}
.material-card.Pink h2{background-color:#e91e63}
.material-card.Pink h2:after{border-top-color:#e91e63;border-right-color:#e91e63;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Pink h2:before{border-top-color:transparent;border-right-color:#880e4f;border-bottom-color:#880e4f;border-left-color:transparent}
.material-card.Pink.mc-active h2:before{border-top-color:transparent;border-right-color:#e91e63;border-bottom-color:#e91e63;border-left-color:transparent}
.material-card.Pink.mc-active h2:after{border-top-color:#880e4f;border-right-color:#880e4f;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Pink .mc-btn-action{background-color:#e91e63}
.material-card.Pink .mc-btn-action:hover{background-color:#880e4f}
.material-card.Pink .mc-footer h4{color:#880e4f}
.material-card.Pink .mc-footer a{background-color:#880e4f}
.material-card.Pink.mc-active .mc-content{background-color:#fce4ec}
.material-card.Pink.mc-active .mc-footer{background-color:#f8bbd0}
.material-card.Pink.mc-active .mc-btn-action{border-color:#fce4ec}
.material-card.Purple h2{background-color:#9c27b0}
.material-card.Purple h2:after{border-top-color:#9c27b0;border-right-color:#9c27b0;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Purple h2:before{border-top-color:transparent;border-right-color:#4a148c;border-bottom-color:#4a148c;border-left-color:transparent}
.material-card.Purple.mc-active h2:before{border-top-color:transparent;border-right-color:#9c27b0;border-bottom-color:#9c27b0;border-left-color:transparent}
.material-card.Purple.mc-active h2:after{border-top-color:#4a148c;border-right-color:#4a148c;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Purple .mc-btn-action{background-color:#9c27b0}
.material-card.Purple .mc-btn-action:hover{background-color:#4a148c}
.material-card.Purple .mc-footer h4{color:#4a148c}
.material-card.Purple .mc-footer a{background-color:#4a148c}
.material-card.Purple.mc-active .mc-content{background-color:#f3e5f5}
.material-card.Purple.mc-active .mc-footer{background-color:#e1bee7}
.material-card.Purple.mc-active .mc-btn-action{border-color:#f3e5f5}
.material-card.Deep-Purple h2{background-color:#673ab7}
.material-card.Deep-Purple h2:after{border-top-color:#673ab7;border-right-color:#673ab7;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Deep-Purple h2:before{border-top-color:transparent;border-right-color:#311b92;border-bottom-color:#311b92;border-left-color:transparent}
.material-card.Deep-Purple.mc-active h2:before{border-top-color:transparent;border-right-color:#673ab7;border-bottom-color:#673ab7;border-left-color:transparent}
.material-card.Deep-Purple.mc-active h2:after{border-top-color:#311b92;border-right-color:#311b92;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Deep-Purple .mc-btn-action{background-color:#673ab7}
.material-card.Deep-Purple .mc-btn-action:hover{background-color:#311b92}
.material-card.Deep-Purple .mc-footer h4{color:#311b92}
.material-card.Deep-Purple .mc-footer a{background-color:#311b92}
.material-card.Deep-Purple.mc-active .mc-content{background-color:#ede7f6}
.material-card.Deep-Purple.mc-active .mc-footer{background-color:#d1c4e9}
.material-card.Deep-Purple.mc-active .mc-btn-action{border-color:#ede7f6}
.material-card.Indigo h2{background-color:#3f51b5}
.material-card.Indigo h2:after{border-top-color:#3f51b5;border-right-color:#3f51b5;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Indigo h2:before{border-top-color:transparent;border-right-color:#1a237e;border-bottom-color:#1a237e;border-left-color:transparent}
.material-card.Indigo.mc-active h2:before{border-top-color:transparent;border-right-color:#3f51b5;border-bottom-color:#3f51b5;border-left-color:transparent}
.material-card.Indigo.mc-active h2:after{border-top-color:#1a237e;border-right-color:#1a237e;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Indigo .mc-btn-action{background-color:#3f51b5}
.material-card.Indigo .mc-btn-action:hover{background-color:#1a237e}
.material-card.Indigo .mc-footer h4{color:#1a237e}
.material-card.Indigo .mc-footer a{background-color:#1a237e}
.material-card.Indigo.mc-active .mc-content{background-color:#e8eaf6}
.material-card.Indigo.mc-active .mc-footer{background-color:#c5cae9}
.material-card.Indigo.mc-active .mc-btn-action{border-color:#e8eaf6}
.material-card.Blue h2{background-color:#2196f3}
.material-card.Blue h2:after{border-top-color:#2196f3;border-right-color:#2196f3;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Blue h2:before{border-top-color:transparent;border-right-color:#0d47a1;border-bottom-color:#0d47a1;border-left-color:transparent}
.material-card.Blue.mc-active h2:before{border-top-color:transparent;border-right-color:#2196f3;border-bottom-color:#2196f3;border-left-color:transparent}
.material-card.Blue.mc-active h2:after{border-top-color:#0d47a1;border-right-color:#0d47a1;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Blue .mc-btn-action{background-color:#2196f3}
.material-card.Blue .mc-btn-action:hover{background-color:#0d47a1}
.material-card.Blue .mc-footer h4{color:#0d47a1}
.material-card.Blue .mc-footer a{background-color:#0d47a1}
.material-card.Blue.mc-active .mc-content{background-color:#e3f2fd}
.material-card.Blue.mc-active .mc-footer{background-color:#bbdefb}
.material-card.Blue.mc-active .mc-btn-action{border-color:#e3f2fd}
.material-card.Light-Blue h2{background-color:#03a9f4}
.material-card.Light-Blue h2:after{border-top-color:#03a9f4;border-right-color:#03a9f4;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Light-Blue h2:before{border-top-color:transparent;border-right-color:#01579b;border-bottom-color:#01579b;border-left-color:transparent}
.material-card.Light-Blue.mc-active h2:before{border-top-color:transparent;border-right-color:#03a9f4;border-bottom-color:#03a9f4;border-left-color:transparent}
.material-card.Light-Blue.mc-active h2:after{border-top-color:#01579b;border-right-color:#01579b;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Light-Blue .mc-btn-action{background-color:#03a9f4}
.material-card.Light-Blue .mc-btn-action:hover{background-color:#01579b}
.material-card.Light-Blue .mc-footer h4{color:#01579b}
.material-card.Light-Blue .mc-footer a{background-color:#01579b}
.material-card.Light-Blue.mc-active .mc-content{background-color:#e1f5fe}
.material-card.Light-Blue.mc-active .mc-footer{background-color:#b3e5fc}
.material-card.Light-Blue.mc-active .mc-btn-action{border-color:#e1f5fe}
.material-card.Cyan h2{background-color:#00bcd4}
.material-card.Cyan h2:after{border-top-color:#00bcd4;border-right-color:#00bcd4;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Cyan h2:before{border-top-color:transparent;border-right-color:#006064;border-bottom-color:#006064;border-left-color:transparent}
.material-card.Cyan.mc-active h2:before{border-top-color:transparent;border-right-color:#00bcd4;border-bottom-color:#00bcd4;border-left-color:transparent}
.material-card.Cyan.mc-active h2:after{border-top-color:#006064;border-right-color:#006064;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Cyan .mc-btn-action{background-color:#00bcd4;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);}
.material-card.Cyan .mc-btn-action:hover{background-color:#006064}
.material-card.Cyan .mc-footer h4{color:#006064;font-weight:400;}
.material-card.Cyan .mc-footer a{background-color:#006064}
.material-card.Cyan.mc-active .mc-content{background-color:#e0f7fa}
.material-card.Cyan.mc-active .mc-footer{background-color:#b2ebf2}
.material-card.Cyan.mc-active .mc-btn-action{border-color:#e0f7fa}
.material-card.Teal h2{background-color:#009688}
.material-card.Teal h2:after{border-top-color:#009688;border-right-color:#009688;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Teal h2:before{border-top-color:transparent;border-right-color:#004d40;border-bottom-color:#004d40;border-left-color:transparent}
.material-card.Teal.mc-active h2:before{border-top-color:transparent;border-right-color:#009688;border-bottom-color:#009688;border-left-color:transparent}
.material-card.Teal.mc-active h2:after{border-top-color:#004d40;border-right-color:#004d40;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Teal .mc-btn-action{background-color:#009688}
.material-card.Teal .mc-btn-action:hover{background-color:#004d40}
.material-card.Teal .mc-footer h4{color:#004d40}
.material-card.Teal .mc-footer a{background-color:#004d40}
.material-card.Teal.mc-active .mc-content{background-color:#e0f2f1}
.material-card.Teal.mc-active .mc-footer{background-color:#b2dfdb}
.material-card.Teal.mc-active .mc-btn-action{border-color:#e0f2f1}
.material-card.Green h2{background-color:#4caf50}
.material-card.Green h2:after{border-top-color:#4caf50;border-right-color:#4caf50;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Green h2:before{border-top-color:transparent;border-right-color:#1b5e20;border-bottom-color:#1b5e20;border-left-color:transparent}
.material-card.Green.mc-active h2:before{border-top-color:transparent;border-right-color:#4caf50;border-bottom-color:#4caf50;border-left-color:transparent}
.material-card.Green.mc-active h2:after{border-top-color:#1b5e20;border-right-color:#1b5e20;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Green .mc-btn-action{background-color:#4caf50}
.material-card.Green .mc-btn-action:hover{background-color:#1b5e20}
.material-card.Green .mc-footer h4{color:#1b5e20}
.material-card.Green .mc-footer a{background-color:#1b5e20}
.material-card.Green.mc-active .mc-content{background-color:#e8f5e9}
.material-card.Green.mc-active .mc-footer{background-color:#c8e6c9}
.material-card.Green.mc-active .mc-btn-action{border-color:#e8f5e9}
.material-card.Light-Green h2{background-color:#8bc34a}
.material-card.Light-Green h2:after{border-top-color:#8bc34a;border-right-color:#8bc34a;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Light-Green h2:before{border-top-color:transparent;border-right-color:#33691e;border-bottom-color:#33691e;border-left-color:transparent}
.material-card.Light-Green.mc-active h2:before{border-top-color:transparent;border-right-color:#8bc34a;border-bottom-color:#8bc34a;border-left-color:transparent}
.material-card.Light-Green.mc-active h2:after{border-top-color:#33691e;border-right-color:#33691e;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Light-Green .mc-btn-action{background-color:#8bc34a}
.material-card.Light-Green .mc-btn-action:hover{background-color:#33691e}
.material-card.Light-Green .mc-footer h4{color:#33691e}
.material-card.Light-Green .mc-footer a{background-color:#33691e}
.material-card.Light-Green.mc-active .mc-content{background-color:#f1f8e9}
.material-card.Light-Green.mc-active .mc-footer{background-color:#dcedc8}
.material-card.Light-Green.mc-active .mc-btn-action{border-color:#f1f8e9}
.material-card.Lime h2{background-color:#cddc39}
.material-card.Lime h2:after{border-top-color:#cddc39;border-right-color:#cddc39;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Lime h2:before{border-top-color:transparent;border-right-color:#827717;border-bottom-color:#827717;border-left-color:transparent}
.material-card.Lime.mc-active h2:before{border-top-color:transparent;border-right-color:#cddc39;border-bottom-color:#cddc39;border-left-color:transparent}
.material-card.Lime.mc-active h2:after{border-top-color:#827717;border-right-color:#827717;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Lime .mc-btn-action{background-color:#cddc39}
.material-card.Lime .mc-btn-action:hover{background-color:#827717}
.material-card.Lime .mc-footer h4{color:#827717}
.material-card.Lime .mc-footer a{background-color:#827717}
.material-card.Lime.mc-active .mc-content{background-color:#f9fbe7}
.material-card.Lime.mc-active .mc-footer{background-color:#f0f4c3}
.material-card.Lime.mc-active .mc-btn-action{border-color:#f9fbe7}
.material-card.Yellow h2{background-color:#ffeb3b}
.material-card.Yellow h2:after{border-top-color:#ffeb3b;border-right-color:#ffeb3b;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Yellow h2:before{border-top-color:transparent;border-right-color:#f57f17;border-bottom-color:#f57f17;border-left-color:transparent}
.material-card.Yellow.mc-active h2:before{border-top-color:transparent;border-right-color:#ffeb3b;border-bottom-color:#ffeb3b;border-left-color:transparent}
.material-card.Yellow.mc-active h2:after{border-top-color:#f57f17;border-right-color:#f57f17;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Yellow .mc-btn-action{background-color:#ffeb3b}
.material-card.Yellow .mc-btn-action:hover{background-color:#f57f17}
.material-card.Yellow .mc-footer h4{color:#f57f17}
.material-card.Yellow .mc-footer a{background-color:#f57f17}
.material-card.Yellow.mc-active .mc-content{background-color:#fffde7}
.material-card.Yellow.mc-active .mc-footer{background-color:#fff9c4}
.material-card.Yellow.mc-active .mc-btn-action{border-color:#fffde7}
.material-card.Amber h2{background-color:#ffc107}
.material-card.Amber h2:after{border-top-color:#ffc107;border-right-color:#ffc107;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Amber h2:before{border-top-color:transparent;border-right-color:#ff6f00;border-bottom-color:#ff6f00;border-left-color:transparent}
.material-card.Amber.mc-active h2:before{border-top-color:transparent;border-right-color:#ffc107;border-bottom-color:#ffc107;border-left-color:transparent}
.material-card.Amber.mc-active h2:after{border-top-color:#ff6f00;border-right-color:#ff6f00;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Amber .mc-btn-action{background-color:#ffc107}
.material-card.Amber .mc-btn-action:hover{background-color:#ff6f00}
.material-card.Amber .mc-footer h4{color:#ff6f00}
.material-card.Amber .mc-footer a{background-color:#ff6f00}
.material-card.Amber.mc-active .mc-content{background-color:#fff8e1}
.material-card.Amber.mc-active .mc-footer{background-color:#ffecb3}
.material-card.Amber.mc-active .mc-btn-action{border-color:#fff8e1}
.material-card.Orange h2{background-color:#ff9800}
.material-card.Orange h2:after{border-top-color:#ff9800;border-right-color:#ff9800;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Orange h2:before{border-top-color:transparent;border-right-color:#e65100;border-bottom-color:#e65100;border-left-color:transparent}
.material-card.Orange.mc-active h2:before{border-top-color:transparent;border-right-color:#ff9800;border-bottom-color:#ff9800;border-left-color:transparent}
.material-card.Orange.mc-active h2:after{border-top-color:#e65100;border-right-color:#e65100;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Orange .mc-btn-action{background-color:#ff9800}
.material-card.Orange .mc-btn-action:hover{background-color:#e65100}
.material-card.Orange .mc-footer h4{color:#e65100}
.material-card.Orange .mc-footer a{background-color:#e65100}
.material-card.Orange.mc-active .mc-content{background-color:#fff3e0}
.material-card.Orange.mc-active .mc-footer{background-color:#ffe0b2}
.material-card.Orange.mc-active .mc-btn-action{border-color:#fff3e0}
.material-card.Deep-Orange h2{background-color:#ff5722}
.material-card.Deep-Orange h2:after{border-top-color:#ff5722;border-right-color:#ff5722;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Deep-Orange h2:before{border-top-color:transparent;border-right-color:#bf360c;border-bottom-color:#bf360c;border-left-color:transparent}
.material-card.Deep-Orange.mc-active h2:before{border-top-color:transparent;border-right-color:#ff5722;border-bottom-color:#ff5722;border-left-color:transparent}
.material-card.Deep-Orange.mc-active h2:after{border-top-color:#bf360c;border-right-color:#bf360c;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Deep-Orange .mc-btn-action{background-color:#ff5722}
.material-card.Deep-Orange .mc-btn-action:hover{background-color:#bf360c}
.material-card.Deep-Orange .mc-footer h4{color:#bf360c}
.material-card.Deep-Orange .mc-footer a{background-color:#bf360c}
.material-card.Deep-Orange.mc-active .mc-content{background-color:#fbe9e7}
.material-card.Deep-Orange.mc-active .mc-footer{background-color:#ffccbc}
.material-card.Deep-Orange.mc-active .mc-btn-action{border-color:#fbe9e7}
.material-card.Brown h2{background-color:#795548}
.material-card.Brown h2:after{border-top-color:#795548;border-right-color:#795548;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Brown h2:before{border-top-color:transparent;border-right-color:#3e2723;border-bottom-color:#3e2723;border-left-color:transparent}
.material-card.Brown.mc-active h2:before{border-top-color:transparent;border-right-color:#795548;border-bottom-color:#795548;border-left-color:transparent}
.material-card.Brown.mc-active h2:after{border-top-color:#3e2723;border-right-color:#3e2723;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Brown .mc-btn-action{background-color:#795548}
.material-card.Brown .mc-btn-action:hover{background-color:#3e2723}
.material-card.Brown .mc-footer h4{color:#3e2723}
.material-card.Brown .mc-footer a{background-color:#3e2723}
.material-card.Brown.mc-active .mc-content{background-color:#efebe9}
.material-card.Brown.mc-active .mc-footer{background-color:#d7ccc8}
.material-card.Brown.mc-active .mc-btn-action{border-color:#efebe9}
.material-card.Grey h2{background-color:#9e9e9e}
.material-card.Grey h2:after{border-top-color:#9e9e9e;border-right-color:#9e9e9e;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Grey h2:before{border-top-color:transparent;border-right-color:#212121;border-bottom-color:#212121;border-left-color:transparent}
.material-card.Grey.mc-active h2:before{border-top-color:transparent;border-right-color:#9e9e9e;border-bottom-color:#9e9e9e;border-left-color:transparent}
.material-card.Grey.mc-active h2:after{border-top-color:#212121;border-right-color:#212121;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Grey .mc-btn-action{background-color:#9e9e9e}
.material-card.Grey .mc-btn-action:hover{background-color:#212121}
.material-card.Grey .mc-footer h4{color:#212121}
.material-card.Grey .mc-footer a{background-color:#212121}
.material-card.Grey.mc-active .mc-content{background-color:#fafafa}
.material-card.Grey.mc-active .mc-footer{background-color:#f5f5f5}
.material-card.Grey.mc-active .mc-btn-action{border-color:#fafafa}
.material-card.Blue-Grey h2{background-color:#607d8b}
.material-card.Blue-Grey h2:after{border-top-color:#607d8b;border-right-color:#607d8b;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Blue-Grey h2:before{border-top-color:transparent;border-right-color:#263238;border-bottom-color:#263238;border-left-color:transparent}
.material-card.Blue-Grey.mc-active h2:before{border-top-color:transparent;border-right-color:#607d8b;border-bottom-color:#607d8b;border-left-color:transparent}
.material-card.Blue-Grey.mc-active h2:after{border-top-color:#263238;border-right-color:#263238;border-bottom-color:transparent;border-left-color:transparent}
.material-card.Blue-Grey .mc-btn-action{background-color:#607d8b}
.material-card.Blue-Grey .mc-btn-action:hover{background-color:#263238}
.material-card.Blue-Grey .mc-footer h4{color:#263238}
.material-card.Blue-Grey .mc-footer a{background-color:#263238}
.material-card.Blue-Grey.mc-active .mc-content{background-color:#eceff1}
.material-card.Blue-Grey.mc-active .mc-footer{background-color:#cfd8dc}
.material-card.Blue-Grey.mc-active .mc-btn-action{border-color:#eceff1}
body{background-color:#eceff1;color:#37474f;font-family:'Rubik', sans-serif !important;font-weight:300;font-size:14px}
h1,h2,h3{font-weight:200}
h2{font-weight:100!important;text-transform:uppercase;letter-spacing:2px;color:#212529}
.ripple{position:relative;overflow:hidden;transform:translate3d(0,0,0)}
.ripple:after{content:"";display:block;position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;background-image:radial-gradient(circle,#000 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10,10);opacity:0;transition:transform .5s,opacity 1s}
.ripple:active:after{transform:scale(0,0);opacity:.2;transition:0s}
.material-card h2{text-align:left;font-size:16px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;white-space:nowrap;}
@media(min-width:576px) and (max-width:767.98px){.material-card.mc-active .img-container{top:20px;width:45px;height:45px;}.material-card h2{font-size:12px;}.material-card.mc-active h2{padding:10px 16px 10px 70px;}.material-card.mc-active .mc-footer h4{top:-32px;}.material-card .mc-btn-action{width:48px;height:48px;line-height:39px;right:12px;}
}
$(function() {
$('.material-card > .mc-btn-action').click(function () {
var card = $(this).parent('.material-card');
var icon = $(this).children('i');
icon.addClass('fa-spin-fast');
if (card.hasClass('mc-active')) {
card.removeClass('mc-active');
window.setTimeout(function() {
icon
.removeClass('fa-arrow-left ripple')
.removeClass('fa-spin-fast')
.addClass('fa-bars');
}, 800);
} else {
card.addClass('mc-active');
window.setTimeout(function() {
icon
.removeClass('fa-bars')
.removeClass('fa-spin-fast')
.addClass('fa-arrow-left ripple');
}, 800);
}
});
});
