@charset "utf-8";
.sermon-grid{ position: relative; margin: 50px 0; display: inline-block; width: 100%; }
.sermon-slide{ position: relative; margin: 50px 0 0; width: 100%; }
.sermon-icon{ position: absolute; width: 50px; height: 50px; text-align: center; top: -30px; margin: 0 auto; left: 0; right: 0; background-color: #f7a987; z-index: 1; color: #ffffff; border: 3px solid #050c0f; font-size: 22px; }
.sermon-icon i{ position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; right: 0; }
.sermon-grid-thumb{ position: relative; overflow: hidden; margin-bottom: 25px; }
.sermon-play{ text-align: center; position: absolute; bottom: 0; left: 0; right: 0; }
.sermon-play ul{ margin: 0; }
.sermon-play li { display: inline-block; -webkit-transform: translateY(100%); transform: translateY(100%); transition: all .4s ease-in-out; }
.sermon-play li:nth-child(1){ transition-delay: .2s; }
.sermon-play li:nth-child(2){ transition-delay: .4s; }
.sermon-play li:nth-child(3){ transition-delay: .6s; }
.sermon-grid:hover .sermon-play li, .sermon-slide:hover .sermon-play li{ -webkit-transform: translateY(-10px); transform: translateY(-10px); }
.sermon-play ul li a { width: 45px; height: 45px; text-align: center; font-size: 18px; line-height: 45px; display: block; color: #fff; margin-right: 8px; background-color: #050c0f; }
.sermon-play ul li a:hover{ background-color: #f7a987; }

/**** List ***/
.sermon-list{ background-color: #ffffff; position: relative; margin: 0 0 30px; background-color: #f7f7f7; }
.sermon-list .sermon-grid-thumb{ width: 150px; margin: 0; }
.sermon-list .sermon-grid-data{ width: calc(100% - 180px); padding: 15px; position: relative; }
.sermon-list .sermon-play{ left: 15px; right: auto; bottom: 15px; }
.sermon-list .sermon-play li{ -webkit-transform: translateY(0); transform: translateY(0); }
.sermon-list .sermon-play ul li a{ width: 30px; height: 30px; font-size: 12px; line-height: 30px; border-radius: 50px; }

/**** Featured Sermon ***/
.featured-sermon{ background-color: #ffffff; position: relative; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; }
.inner-featured-sermon{ padding: 2em; }
.feat-sermon-thumb{ flex: 1; }
.feat-sermon-content{ flex: 3; margin-left: 50px; }
.feat-sermon-content .sermon-play{ position: relative; text-align: left; margin-bottom: 15px; }
.feat-sermon-content .sermon-play ul li{ -webkit-transform: translateY(0); transform: translateY(0); }
.feat-sermon-content .sermon-play ul li a{ width: 35px; height: 35px; border-radius: 20px; line-height: 35px; font-size: 14px; }