"Material Design Card - Responsive"
Bootstrap 4.1.1 Snippet by Siddharth Panchal

<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"> <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); } }); });

Related: See More


Questions / Comments: