/* # STYLESHEET INDEX # - General Styles - Layout - Header - Footer - Slideout Side Navigation - Sidebar - Page - General Elements - Homepage - Presentation Page - Blog Index - Blog Post - Index Page - General Styles - Index Page - Presenters - Index Page - Topics - Login Page - Signup Page - Testimonies Page - Buttons - Modals - Pagination # COLOR PALETTE # Red = #e21f14 Green = #3DA88E Blue = #008bce Light Bray BG = #EEEEEE Black Text Color = #242426 Gray Text Color = #747474 */ /* ================================================================================== */ /* == General Styles ================================================================ */ /* ================================================================================== */ html,body { background: #fff; font-size: 15px; line-height: 1.5em; font-family: 'Source Sans Pro', Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 400; color: #747474; overflow-x: hidden; } a { text-decoration: none; color: #3DA88E; -webkit-transition: all 0.218s; -moz-transition: all 0.218s; -ms-transition: all 0.218s; -o-transition: all 0.218s; transition: all 0.218s; } a:hover { text-decoration: none; color: #008bce; } a.more { color: #3DA88E !important; font-size: 12px; font-weight: 600; } a.more:hover { text-decoration: none; color: #008bce !important; } h1, h2, h3, h4, h5, h6 { color: #242426; } h3 { font-size: 25px; font-weight: 400; margin-bottom: 10px; } input:focus, textarea:focus { outline: none; box-shadow: none; } /* ================================================================================== */ /* == Layout ======================================================================== */ /* ================================================================================== */ .container { margin: 0 auto; max-width: 1280px; } .container:after { content: ""; display: table; clear: both; } #main { background: #e5e5e5; } #main > .container { background: #fff; box-shadow: 0px 0px 30px rgba(0,0,0,0.1); } /*Attach to BODY*/ .full-page { } .full-page-no-padding { } .split-page { } /*Full width page with padding*/ .full-page #main .container { padding: 40px 50px 50px 50px; } @media only screen and (max-width: 480px) { .full-page #main .container { padding: 30px 25px; } } @media only screen and (max-width: 320px) { .full-page #main .container { padding: 30px 20px; } } /*Full width page with NO padding*/ .full-page-no-padding #main .container { padding: 0; } /*Split Page - Main Content with Sidebar*/ .split-page #main > .container { background: #fff url(../images/template/bg-sermon.png) center; background-size: 100%; } @media only screen and (max-width: 800px) { .split-page #main > .container { background: #fff; } } .split-page #content { float: left; width: 70%; padding: 40px 50px 50px 50px; } .split-page #sidebar { float: right; width: 30%; height: 100%; } @media only screen and (max-width: 800px) { .split-page #content { float: none; width: 100%; } .split-page #sidebar { display: none; } } @media only screen and (max-width: 480px) { .split-page #content { padding: 40px 25px; } } @media only screen and (max-width: 320px) { .split-page #content { padding: 40px 20px; } } /* ================================================================================== */ /* == Header ======================================================================== */ /* ================================================================================== */ #header { background: #242426; text-align: center; height: 80px; } #header .container { position: relative; } #header h1 { height: 80px; margin: 0; position: absolute; top: 0; left: 0; z-index: 9; } #header h1 img { display: block; max-height: 80px; } #header a { color: #aaa; } #header a:hover { color: #fff; } /*Search bar in header*/ #header .search { fl/oat: left; margin-top: 22px; width: 100%; padding: 0 249px 0 270px; position: relative; } #header .search input { width: 100%; background: #313132 url(../images/template/icon-search.png) no-repeat 12px; background-size: 17px; padding: 0 15px 0 47px; border-radius: 3px; border: none; height: 36px; text-shadow: 0px 1px 1px rgba(0,0,0,0.05); } #header .search input:focus { background: #3B3B3C url(../images/template/icon-search.png) no-repeat 12px; background-size: 17px; color: #ddd; } #header .search input::-webkit-input-placeholder { color: #848485; } /*Dropdown menu in search bar*/ .search .dropdown { position: absolute; top: 0; left: 291px; } .search .dropdown-toggle { text-indent: -9999px; background: url(../images/template/icon-down-arrow.png) no-repeat 11px center; background-size: 7px 4px; border: none; width: 40px; height: 36px; opacity: 0.6; } .search .dropdown-toggle:hover { opacity: 1; } .search .dropdown-menu { left: -23px; background: #242426; min-width: 0;} .search .dropdown-menu .divider { background: #313132; } .search .dropdown-menu a { color: #aaa; } .search .dropdown-menu a:hover { background: #3B3B3C; } /*Donate and toggle button in header*/ #header .header-links { width: 229px; height: 80px; position: absolute; top: 0; right: 0; line-height: 80px; padding: 0 20px; border-left: 1px solid #313132; } #header .button { float: right; margin-top: 23px; } #header #login-link { float: left; text-shadow: 0px 1px 1px rgba(0,0,0,0.05); } #header #menu-toggle { float: right; width: 46px; height:35px; padding: 7px 0 0 0; margin: 23px 0 0 20px; border: 0; outline: none; background: rgba(255,255,255,0.15); overflow: hidden; white-space: nowrap; text-indent: 100%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); opacity: 0.9; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 1px solid rgba(0,0,0,0.4); border-radius: 3px; box-shadow: inset 0px 1px 1px rgba(255,255,255,0.2), inset 0px 10px 15px rgba(255,255,255,0.05), inset 0px -1px 1px rgba(0,0,0,0.2), inset 0px -10px 15px rgba(0,0,0,0.05), 0px -1px 1px rgba(0,0,0,0.2), 0px 1px 1px rgba(255,255,255,0.1); cursor: pointer; } #header #menu-toggle img { display: block; width: 32px; height: 19px; margin: 0 auto; } #header #menu-toggle:hover, #header #menu-toggle:focus { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; background: rgba(255,255,255,0.25); } @media only screen and (min-width: 1300px) { #header h1 { left: -18px; } #header .header-links { padding-right: 0; width: 209px; } #header .search { padding: 0 229px 0 252px; } .search .dropdown-toggle { position: absolute; left: 0px; top: -35px; } .search .dropdown { top: 36px; left: 274px; } } @media only screen and (max-width: 760px) { #header .header-links { width: auto; border: none; } #header #login-link { float: right; } #header .button { margin-left: 15px; } .search { background: #313132; position: relative; } .search input { width: 100%; background-size: 17px; padding: 0 15px 0 55px; border: none; height: 60px; text-shadow: 0px 1px 1px rgba(0,0,0,0.05); } .search .dropdown { left: 16px; } .search .dropdown-toggle { height: 60px; background-position: center; } .search .dropdown-menu { left: auto; left: -25px; top: 58px; border-radius: 0 0 4px 0; min-width: 150px; background: #313132; } } @media only screen and (max-width: 480px) { #header { height: 70px; } #header h1, #header .header-links { height: 70px; line-height: 70px; } #header h1 img { max-height: 70px; } #header a.donate { display: none; } #header #menu-toggle { margin-top: 18px; } } /* ================================================================================== */ /* == Footer ======================================================================== */ /* ================================================================================== */ #footer .container { padding: 0 50px; } #footer { clear: both; padding: 45px 0; background: #252526; } #footer h3 { color: #fff; font-size: 16px; font-weight: 700; margin: 0 0 10px 0; } #footer ul { list-style: none; padding: 0; margin: 0; } #footer .column { float: left; width: 16.6666%; } ul.apps a { display: block; border: 1px solid #515152; overflow: hidden; border-radius: 3px; /*width: 115px;*/ width: 75%; float: right; margin-bottom: 15px; background: #1A1A1B; } ul.apps a img { display: block; /*width: 100%;*/ max-width: 100px; margin: 0 auto; } .app-list { display: none; background: #1f1f20; padding: 25px 0 20px 0; } .app-list ul.apps { text-align: center; margin: 0; padding: 0; } .app-list ul.apps li { display: inline-block; } .app-list ul.apps li a { margin-bottom: 0; float: none; } .app-list ul.apps li:nth-child(2) a { margin: 0 20px; } #copyright .container { padding: 0 50px; } #copyright { background: #1a1a1b; font-size: 12px; padding: 25px 0; } #copyright .copyright { float: left; } #copyright .designed { float: right; } #copyright p { margin: 0; } #footer a, #copyright a { color: #747474; } #footer a:hover, #copyright a:hover { color: #fff; } /* Temporary styles since a column was removed. */ /* When the column is added back in, delete these styles and uncomment the changes to 'ul.apps a' */ /* At that time uncomment the media queries too. */ #footer .column { width: 18%; } #footer .column-six { width: 28%; padding-left: 40px; } /* ##^##############################################^## */ @media only screen and (min-width: 800px) { /*THIS ENTIRE MEDIA QUERY IS PURELY FOR STICKY FOOTER ON BIG SCREENS*/ html { position: relative; min-height: 100%; /*height: 100%;*/ } /*#wrapper, #main, #main .container { height: 100%; min-height: 100%; }*/ body { margin: 0 0 343px 0; /* bottom = footer height */ } #footer { position: absolute; left: 0; bottom: 72px; width: 100%; } #copyright { position: absolute; left: 0; bottom: 0; width: 100%; } .lt-ie9 body, .lt-ie9 #footer, .lt-ie9 #copyright { margin: 0; position: static; left: auto; bottom: auto; } /*Cancels sticky footer stuff in IE8*/ } @media only screen and (max-width: 800px) { #footer .container { padding: 0 10px 0 50px;} #footer .column { /*width: 20%;*/ width: 25%; } #footer .column-six { display: none; } .app-list { display: block; } ul.apps a { width: 115px; } } @media only screen and (max-width: 500px) { #copyright .copyright, #copyright .designed { display: block; float: none; text-align: center; margin: 0 auto; } #footer .container { padding: 0 50px; } #footer .column { float: none; width: 100%; marg/in-bottom: 20px; } #footer .column h3 { background: url(../images/template/icon-down-arrow.png) no-repeat right; background-size: 13px 8px; cursor: pointer; border-top: 1px solid #313132; padding: 15px 0; margin: 0; } #footer .column h3 { background: url(../images/template/icon-up-arrow.png) no-repeat right; background-size: 13px 8px;} #footer .column h3.collapsed { background: url(../images/template/icon-down-arrow.png) no-repeat right; background-size: 13px 8px; } #footer .column ul li:last-child { padding-bottom: 15px; } #footer .column-five { border-bottom: 1px solid #313132; } } @media only screen and (max-width: 480px) { #footer .container { padding: 0 25px;} } @media only screen and (max-width: 420px) { .app-list ul.apps li a { width: 82px; } .app-list ul.apps li a img { width: 100%; } .app-list ul.apps li:nth-child(2) a { margin: 0 10px; } } @media only screen and (max-width: 320px) { #footer .container { padding: 0 20px;} } /* ================================================================================== */ /* == Slideout Side Navigation ====================================================== */ /* ================================================================================== */ #side-nav { width: 300px; position: absolute; right: -300px; top: 0; height: 100%; background: #313132; box-shadow: inset 0px -10px 15px rgba(0,0,0,0.15); } #side-nav .side-nav-block { padding: 35px 40px; border-bottom: 1px solid #404041; } #side-nav .side-nav-block:last-child { border: none; } #side-nav em { display: block; color: #bcbcbc; margin: -10px 0 10px 0; font-style: italic; } #side-nav h3 { color: #fff; font-size: 18px; font-weight: 600; margin: 0 0 0.85em 0; } #side-nav ul { list-style: none; margin: 0; padding: 0; } #side-nav ul li { } #side-nav ul li a { display: block; padding: 1px 0; color: #a9a9a9; cursor: pointer; } #side-nav ul li a:hover { color: #fff; } #side-nav .side-nav-block.donation-block { display: none; } #side-nav a.donate { display: block; text-align: center; } .blocked { pointer-events: none; cursor: default; opacity: 0.5; } .openNav #wrapper { right: 0; -webkit-transform: translate3d(-300px, 0, 0); -moz-transform: translate3d(-300px, 0, 0); -ms-transform: translate3d(-300px, 0, 0); -o-transform: translate3d(-300px, 0, 0); transform: translate3d(-300px, 0, 0); -webkit-transition: -webkit-transform 500ms ease; -moz-transition: -moz-transform 500ms ease; -o-transition: -o-transform 500ms ease; transition: transform 500ms ease; } #wrapper { right: 0; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform 500ms ease; -moz-transition: -moz-transform 500ms ease; -o-transition: -o-transform 500ms ease; transition: transform 500ms ease; } @media only screen and (min-width: 1280px) { /*This just makes the sidebar a bit larger on extra large screens*/ #side-nav { width: 31%; right: -31%; } .openNav #wrapper { right: 0; -webkit-transform: translate3d(-30%, 0, 0); -moz-transform: translate3d(-30%, 0, 0); -ms-transform: translate3d(-30%, 0, 0); -o-transform: translate3d(-30%, 0, 0); transform: translate3d(-30%, 0, 0); } } @media only screen and (max-width: 480px) { #side-nav .side-nav-block.donation-block { display: block; } #side-nav { box-shadow: inset 0px 0px 15px rgba(0,0,0,0.15); } } @media only screen and (max-width: 320px) { #side-nav { width: 320px; right: -320px; } .openNav #wrapper { right: 0; -webkit-transform: translate3d(-320px, 0, 0); -moz-transform: translate3d(-320px, 0, 0); -ms-transform: translate3d(-320px, 0, 0); -o-transform: translate3d(-320px, 0, 0); transform: translate3d(-320px, 0, 0); } } /* ================================================================================== */ /* == Sidebar ======================================================================= */ /* ================================================================================== */ #sidebar { background: #EEEEEE; } #sidebar ul { list-style: none; padding: 0; margin: 0; } /*General Sidebar Block*/ #sidebar .side-block { padding: 45px; border-bottom: 1px solid #DDD; } #sidebar .side-block h3 {margin: 0 0 15px 0; } #sidebar .side-block h4 { font-size: 15px; } #sidebar .side-block a { color: #747474; } #sidebar .side-block a:hover { color: #3DA88E; } #sidebar .side-block a.more { clear: both; display: block; margin-top: 5px; } /*Ad Block*/ #sidebar .side-ad { padding: 42px; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } #sidebar .side-ad img { display: block; width: 100%; } @media only screen and (max-width: 1200px) { #sidebar .side-ad { padding: 30px; } } @media only screen and (max-width: 1150px) { #sidebar .side-ad { padding: 20px; } } @media only screen and (max-width: 900px) { #sidebar .side-ad { padding: 15px; } } /*Sponsor Block*/ #sidebar #sponsor { } #sidebar #sponsor .sponsor-box { display: table; background: #E3E3E3; margin-bottom: 20px; padding: 10px; border-radius: 5px; line-height: 1.3em; overflow: hidden; color: #242426; width: 100%; } #sidebar #sponsor .sponsor-box:hover { background: #ddd; } #sidebar #sponsor .sponsor-box:last-child { margin-bottom: 0; } #sidebar #sponsor .sponsor-box .sponsor-image { float: left; width: 72px; margin-right: 14px; border-radius: 3px; } #sidebar #sponsor .sponsor-box .sponsor-image img { width: 100%; } #sidebar #sponsor .sponsor-box h4 { font-weight: 600; display: table-cell; vertical-align: middle; width: 100%; } @media only screen and (max-width: 1100px) { #sidebar #sponsor .sponsor-box { padding: 5px; } #sidebar #sponsor .sponsor-box .sponsor-image { width: 66px; } } @media only screen and (max-width: 1030px) { #sidebar #sponsor .sponsor-box { padding: 0; } #sidebar #sponsor .sponsor-box .sponsor-image { border-radius: 0; } } /*Presentations list in the Sidebar*/ #sidebar .presentations-list { margin: 0; } #sidebar .presentations-list ul { margin: 0 -10px; } #sidebar .presentations-list ul > li > a { display: block; padding: 10px; overflow: hidden; border-radius: 5px; background: none; } #sidebar .presentations-list ul > li > a:hover { background: #f8f8f8; } /*Topics Block*/ #sidebar #topics { } #sidebar #topics ul li.first { padding-left: 5px; } #sidebar #topics ul li.first:before { content: "- "; } /*Keywords Block*/ #sidebar #keywords { overflow: hidden; } #sidebar #keywords ul { margin-top: 25px; max-height: 95px; overflow: hidden; position: relative; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } #sidebar #keywords ul:after { content: ""; display: table; clear: both; } #sidebar #keywords ul.open { max-height: none; } #sidebar #keywords li { float: left; margin: 0 8px 8px 0; font-size: 13px; } #sidebar #keywords li a { display: inline-block; background: #fff; padding: 1px 6px; border-radius: 3px; box-shadow: 0px 1px 2px rgba(0,0,0,0.15); } #sidebar #keywords li a:hover { background: #3DA88E; color: #fff; } /*Keywords Block with toggle option*/ #sidebar #keywords ul li.more-toggle { background: #bbb; color: #fff; padding: 1px 16px 1px 8px; border-radius: 3px; box-shadow: 0px 1px 2px rgba(0,0,0,0.15), 0px 0px 8px rgba(238,238,238,0.5), -5px 0px 8px rgba(238,238,238,0.5), -10px 0px 10px rgba(238,238,238,0.7), -15px 0px 10px rgba(238,238,238,0.6), -20px 0px 10px rgba(238,238,238,0.5), -25px 0px 8px rgba(238,238,238,0.5), -25px 0px 8px rgba(238,238,238,0.5); position: absolute; right: 0; bottom: -1px; cursor: pointer; font-size: 12px; } #sidebar #keywords ul li.more-toggle:after { content: ""; float: right; width: 0; position: absolute; top: 9px; right: 7px; height: 0; border-style: solid; border-width: 5px 3px 0 3px; border-color: #fff transparent transparent transparent; } #sidebar #keywords ul li.more-toggle:hover { background: #3DA88E; } #sidebar #keywords ul.open li.more-toggle { display: none; } /*List with counters*/ .counter-list { border: none !important; } .counter-list ul { } .counter-list ul li { margin-bottom: 10px; line-height: 1.2em; position: relative; } .counter-list ul li .title { display: block; line-height: 1.2em; /*font-weight: 600;*/ /*color: #242426;*/ float: left;} .counter-list ul li .count { position: absolute; right: 0; top: 2px; background: #cacaca; color: #fff; font-size: 12px; width: 28px; border-radius: 30px; text-align: center; font-weight: 600; line-height: 1.7em; -webkit-transition: all 0.218s; -moz-transition: all 0.218s; -ms-transition: all 0.218s; -o-transition: all 0.218s; transition: all 0.218s; } .counter-list ul li a { display: block; padding: 3px 36px 3px 0; overflow: hidden; } .counter-list ul li a:hover .count { background: #3DA88E; color: #fff; } /*Recent Posts*/ #sidebar .recent-posts { } #sidebar .recent-posts ul > li > a { display: block; padding: 9px 10px; overflow: hidden; border-radius: 5px; } #sidebar .recent-posts ul > li > a:hover { background: #f8f8f8; } #sidebar .recent-posts ul { margin: 0 -10px; } #sidebar .recent-posts li { overflow: hidden; } #sidebar .recent-posts li h4 { line-height: 1.2em; font-weight: 600; margin: 2px 0 0 0; } #sidebar .recent-posts li img { float: left; width: 50px; margin: 7px 10px 0 0; } #sidebar .recent-posts li .post-date { display: block; font-size: 12px; line-height: 1.5em; color: #747474; margin: 0; } /* ================================================================================== */ /* == Page - General Elements ======================================================= */ /* ================================================================================== */ .page-header { margin: 0; padding: 0; border: none; margin-bottom: 2em; } .page-header:after { content: ""; display: table; clear: both; } .page-header h1 { margin: 0 !important; } .page-header h1 a { color: #242426; } .page-header img { float: left; width: 150px; border-radius: 3px; margin-right: 25px; margin-bottom: 10px; } .page-header .info { margin-top: 10px; } .page-header .post-meta { display: block; margin-top: 5px; font-style: italic; } @media only screen and (max-width: 580px) { .page-header img { width: 60px; margin-right: 15px; } .page-header h1 { font-size: 28px; font-weight: 600; margin-top: 14px; } .page-header .info { clear: both; margin-top: 20px; } } @media only screen and (max-width: 320px) { .page-header img { width: 55px; } .page-header h1 { font-size: 25px; } .page-header .info { font-size: 13px; } } /* ================================================================================== */ /* == Home Page ===================================================================== */ /* ================================================================================== */ .home { } /*Slideshow .feature-slideshow { background: #313132; color: #fff; } .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} .flexslider { margin: 0; padding: 0; position: relative; zoom: 1; overflow: hidden; } .flexslider .slides { zoom: 1; float: left; width: 75%; } .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; position: relative;} .flexslider .slides img {width: 100%; display: block; } .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} .no-js .slides > li:first-child {display: block;} .flex-control-thumbs { position: static; overflow: hidden; float: right; width: 25%;} .flex-control-thumbs li { margin: 0; display: block; } .flex-control-thumbs img { width: 100%; display: block; opacity: .7; cursor: pointer;} .flex-control-thumbs img:hover {opacity: 1;} .flex-control-thumbs .flex-active {opacity: 1; cursor: default;} .flexslider .text { position: absolute; bottom: 10%; left: 0; width: 70%; background: #000; background: rgba(0,0,0,0.8); text-align: left; color: #fff; padding: 23px 40px 30px 40px; } .flexslider .text h2 { color: #fff; margin: 0; } .flexslider .text p { margin: 10px 0 0 0; } @media only screen and (max-width: 768px) { .flexslider .text { padding: 15px 20px 20px 20px; width: 95%; bottom: 20px; } .flexslider .text h2 { font-size: 24px; } .flexslider .text p { font-size: 14px; line-height: 1.4em; } } @media only screen and (max-width: 600px) { .flexslider .slides { float: none; width: 100%; } .flex-control-thumbs { display: none;} } @media only screen and (max-width: 480px) { .feature-slideshow { background: #242426; } .flexslider .text { position: static; width: 100%; bottom: 0; background: #242426; } } */ /*New to AudioVerse*/ .new-to-av { background: #3DA88E; color: #fff; text-align: center; } .new-to-av a { color: #fff; font-size: 30px; font-weight: 100; line-height: 1.1em; display: block; padding: 50px; background: #3DA88E; } .new-to-av a:hover { background: #008bce; } .new-to-av a:after { content: ""; width: 88px; height: 46px; position: absolute; margin: -20px 0 0 10px; background: url(../images/template/graphic-arrow.png) right bottom no-repeat; background-size: 88px 46px; } @media only screen and (max-width: 750px) { .new-to-av a:after { display: none; } } @media only screen and (max-width: 580px) { .new-to-av a { font-size: 25px; padding: 30px 20px; } } /*Ads .ad-wide { background: #eee; padding: 15px; } .ad-wide img { display: block; margin: 0 auto; } .ad-wide .leaderboard { width: 728px; height: 90px; display: none; } .ad-wide .medium-ad { width: 468px; height: 60px; display: none; } .ad-wide .mobile-ad { width: 320px; height: 50px; display: none; } @media only screen and (min-width: 750px) { .ad-wide .leaderboard { display: block; } } @media (max-width:750px) and (min-width:550px) { .ad-wide .medium-ad { display: block; } } @media only screen and (max-width: 550px) { .ad-wide .mobile-ad { display: block; } } @media only screen and (max-width: 480px) { .ad-wide { padding: 0; } } */ /*Featured Sermons*/ .featured-sermons { padding: 50px; overflow: hidden; } .featured-sermons .content-block h2 { font-size: 25px; margin: 0 0 0.7em 0; } .featured-sermons .content-block h2 i { font-size: 20px; color: #aaa; margin-top: 3px; } /*For the scroll icons*/ .featured-sermons .content-block { float: left; width: 30%; } .featured-sermons .content-block#trending-now { margin: 0 5%; } .featured-sermons .content-block a { display: block; padding: 10px; overflow: hidden; border-radius: 5px; } .featured-sermons .content-block a:hover { background: #f2f2f2; } .featured-sermons .content-block a.more:hover { background: none; } .featured-sermons .content-block ul { margin: 0 -10px; padding: 0; } .featured-sermons .content-block li { overflow: hidden; } .featured-sermons .content-block li .details { overflow: hidden; } .featured-sermons .content-block li h4 { line-height: 1em; font-weight: 600; margin: 2px 0 0 0; font-size: 15px; } .featured-sermons .content-block li img { float: left; width: 40px; border-radius: 50%; margin-right: 10px; margin-left: 2px; } .featured-sermons .content-block li p { font-size: 12px; line-height: 1.5em; color: #747474; margin: 0; } .featured-sermons .content-block li .duration { border-left: 1px solid #aaa; margin-left: 6px; padding-left: 5px; } .featured-sermons .content-block a.more { clear: both; display: block; padding: 0; } @media only screen and (max-width: 900px) { .featured-sermons { padding: 50px 30px; } } @media only screen and (max-width: 750px) { .featured-sermons { padding: 50px; } .featured-sermons .content-block { float: none; width: 100%; } .featured-sermons .content-block#trending-now { margin: 50px 0; } } @media only screen and (max-width: 450px) { .featured-sermons { padding: 0px; } .featured-sermons .content-block#trending-now { border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; margin: 0; } .featured-sermons .content-block { padding: 30px; } } @media only screen and (max-width: 350px) { .featured-sermons .content-block { padding: 25px 20px; } } /*Testimonies*/ .featured-testimonies { background: #eee; text-align: center; padding: 50px 50px 80px 50px; } .featured-testimonies h2 { font-size: 35px; margin-bottom: 0.75em; } .featured-testimonies .featured-testimony { font-size: 20px; line-height: 1.45em; font-style: italic; max-width: 800px; margin: 0 auto; padding: 0 10px; background: url(../images/template/icon-quote-l.png) left top no-repeat; background-size: 38px 32px; /*text-shadow: 0px 1px 1px rgba(255,255,255,0.1);*/ } .featured-testimonies .featured-testimony p:after { content: ""; width: 38px; height: 32px; position: absolute; margin-left: -15px; background: url(../images/template/icon-quote-r.png) right bottom no-repeat; background-size: 38px 32px; } .featured-testimonies .name { font-size: 18px; font-weight: 600; margin: 1em 0 0.3em 0; background: none; } .featured-testimonies .name span { font-weight: 400; } .featured-testimonies .more { font-size: 15px; font-style: normal; display: block; } @media only screen and (max-width: 480px) { .featured-testimonies { padding: 15px 20px 35px 20px; } .featured-testimonies h2 { font-size: 25px; } .featured-testimonies .featured-testimony { font-size: 16px; } .featured-testimonies .name { font-size: 14px; } .featured-testimonies .more { font-size: 13px; } } @media only screen and (max-width: 400px) { .featured-testimonies .featured-testimony { font-size: 15px; } } /*Social*/ .featured-social { padding: 50px; overflow: hidden; } .featured-social .content-block h2 { font-size: 25px; margin: 0 0 0.7em 0; } .featured-social .content-block h2 a { color: #242426; } .featured-social .content-block h2 a:hover { color: #008bce; } .featured-social .content-block { float: left; width: 30%; } .featured-social .content-block#facebook { margin: 0 5%; } .featured-social .content-block#facebook h2:before { content: ""; float: left; width: 32px; height: 32px; margin-right: 12px; background: url(../images/template/icon-facebook-badge.png); background-size: 100%; } .featured-social .content-block#twitter h2:before { content: ""; float: left; width: 32px; height: 32px; margin-right: 12px; background: url(../images/template/icon-twitter-badge.png); background-size: 100%; } .featured-social .content-block#youtube h2:before { content: ""; float: left; width: 32px; height: 32px; margin-right: 12px; background: url(../images/template/icon-youtube-badge.png); background-size: 100%; } .featured-social .content-block p { font-style: italic; } @media only screen and (max-width: 700px) { .featured-social { display: none; } } /*Signup for the Newsletter*/ .signup-newsletter { background: #3DA88E; color: #fff; text-align: center; padding: 40px 50px 65px 50px; } .signup-newsletter h2 { color: #fff; font-size: 25px; } .signup-newsletter p { color: #bbd9d0; margin-bottom: 2em; } .newsletter-form .email { border-radius:5px; border: none; font-size:18px; padding: 0 20px; color: #242426; outline:none; line-height:1.5; height:54px; min-width:250px; position:relative; text-align:center; box-shad//ow: inset 0px 1px 3px rgba(0,0,0,0.2); background: #3DA88E; border: 2px solid #fff; } .newsletter-form .email::-webkit-input-placeholder { color: #747474; color: #fff; -webkit-transition: 0.25s; } .newsletter-form .email:-moz-placeholder { color: #fff; -moz-transition: 0.25s; } .newsletter-form .email::-moz-placeholder { color: #fff; -o-transition: 0.25s; } .newsletter-form .email:-ms-input-placeholder { color: #fff; transition: 0.25s; } .newsletter-form.focused .email::-webkit-input-placeholder { color: #747474; } .newsletter-form.focused .email:-moz-placeholder { color: #747474; } .newsletter-form.focused .email::-moz-placeholder { ccolor: #747474; } .newsletter-form.focused .email:-ms-input-placeholder { color: #747474; } /*.newsletter-form .email:focus { box-shadow: inset 0px 0px 5px #008bce; }*/ .newsletter-form .email-submit-button { font-size:18px; color:#fff; background: #252526; border:none; border-radius:5px; line-height:1.5; min-width:105px; outline:none; height:54px; position:relative; cursor:pointer; } .newsletter-form .email-submit-button:hover { background:#1A1A1B; } .newsletter-form.focused .email, .newsletter-form.focused .email-submit-button { opacity:1; -webkit-transform:translateX(0); -moz-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0); -webkit-transition: all 0.5s cubic-bezier(0.295, 1.27, 0.59, 0.97); -moz-transition: all 0.5s cubic-bezier(0.295, 1.27, 0.59, 0.97); -o-transition: all 0.5s cubic-bezier(0.295, 1.27, 0.59, 0.97); transition: all 0.5s cubic-bezier(0.295, 1.27, 0.59, 0.97); } .newsletter-form.focused .email { text-align:left; background: #fff; min-width: 350px; } .newsletter-form.sent .email { width:54px; min-width:0; overflow:hidden; -webkit-transform:translateX(30px); -moz-transform:translateX(30px); -o-transform:translateX(30px); transform:translateX(30px); opacity:0; } .newsletter-form.sent .email-submit-button, .newsletter-form.sent .email-submit-button:hover { min-width:0; width:54px; overflow:hidden; z-index:2; background:#52b847; opacity:1; padding:8px 0 0 2px; -webkit-transform:translateX(-30px); -moz-transform:translateX(-30px); -o-transform:translateX(-30px); transform:translateX(-30px); cursor:default; } @media only screen and (min-width: 580px) { .newsletter-form .email { z-index:2; -webkit-transform:translateX(55px); -moz-transform:translateX(55px); -o-transform:translateX(55px); transform:translateX(55px); -webkit-transition: all 0.5s cubic-bezier(0.295, 1.27, 0.59, 0.97); -moz-transition: all 0.5s cubic-bezier(0.295, 1.27, 0.59, 0.97); -o-transition: all 0.5s cubic-bezier(0.295, 1.27, 0.59, 0.97); transition: all 0.5s cubic-bezier(0.295, 1.27, 0.59, 0.97); } .newsletter-form .email-submit-button { opacity:0.7; -webkit-transform:translateX(-154px) scale(0.2) ; -moz-transform:translateX(-154px) scale(0.2); -o-transform:translateX(-154px) scale(0.2); transform:translateX(-154px) scale(0.2); -webkit-transition: all 0.5s cubic-bezier(0.295, 1.27, 0.59, 0.97); -moz-transition: all 0.5s cubic-bezier(0.295, 1.27, 0.59, 0.97); -o-transition: all 0.5s cubic-bezier(0.295, 1.27, 0.59, 0.97); transition: all 0.5s cubic-bezier(0.295, 1.27, 0.59, 0.97); } } @media only screen and (max-width: 580px) { .newsletter-form .email, .newsletter-form .email-submit-button { width: 100%; margin-bottom: 15px; } } @media only screen and (max-width: 480px) { .signup-newsletter { padding: 15px 20px 35px 20px; } } /* ================================================================================== */ /* == Presentation Page ============================================================= */ /* ================================================================================== */ /*Sermon Title*/ #sermon-header { margin-bottom: 40px; position: relative; } #sermon-header:after { content: ""; display: table; clear: both; } #sermon-header .details { padding-right: 100px; } #sermon-header .sermon-title { overflow: hidden; } #sermon-header img { float: left; width: 53px; border-radius: 50%; margin-right: 13px; } #sermon-header h1 { font-size: 25px; font-weight: 600; line-height: 1.17em; margin: 0; } #sermon-header .speaker { font-size: 14px; font-weight: 400; font-style: italic; color: #747474; margin: 0; padding-left: 1px; } #sermon-header .speaker:hover { color: #3DA88E; } #sermon-header .toolbar { float: right; width: 100px; margin-top: 5px; } #sermon-header .toolbar span { float: left; width: 50px; margin-left: 10px; overflow: hidden; background: #eee; cursor: pointer; } #sermon-header .toolbar span.tool { width: 22px; height: 22px; text-indent: -9999px; background: #fff url(../images/template/icon-tools.png) no-repeat; background-size: 95px 50px; } #sermon-header .toolbar span.tool-favorite { background-position: 2px 2px; } #sermon-header .toolbar span.tool-follow { background-position: -36px 2px; } #sermon-header .toolbar span.tool-playlist { background-position: -72px 2px; } #sermon-header .toolbar span.tool-favorite:hover, #sermon-header .toolbar span.tool-favorite.active { background-position: 2px -27px; } #sermon-header .toolbar span.tool-follow:hover, #sermon-header .toolbar span.tool-follow.active { background-position: -36px -27px; } #sermon-header .toolbar span.tool-playlist:hover, #sermon-header .toolbar span.tool-playlist.active { background-position: -72px -27px; } @media only screen and (max-width: 500px) { #sermon-header .details { padding: 0; } #sermon-header .speaker { float: left; } #sermon-header .toolbar { margin: 3px 0 0 4px; float: left; } #sermon-header .toolbar span.tool { width: 18px; height: 17px; background-size: 76px 40px; margin-left: 7px; } #sermon-header .toolbar span.tool-favorite { background-position: 0px 0px; } #sermon-header .toolbar span.tool-follow { background-position: -29px 0px; } #sermon-header .toolbar span.tool-playlist { background-position: -58px 0px; } #sermon-header .toolbar span.tool-favorite:hover, #sermon-header .toolbar span.tool-favorite.active { background-position: 0px -23px; } #sermon-header .toolbar span.tool-follow:hover, #sermon-header .toolbar span.tool-follow.active { background-position: -29px -23px; } #sermon-header .toolbar span.tool-playlist:hover, #sermon-header .toolbar span.tool-playlist.active { background-position: -58px -23px; } } @media only screen and (max-width: 480px) { .sermon-page #main #content { padding-top: 20px; } #sermon-header { margin-bottom: 20px; } #sermon-header h1 { font-size: 18px; margin-top: 2px; } #sermon-header img { width: 48px; } } /*Media Player*/ #player { border-radius: 4px; margin-bottom: 35px; position: relative; overflow: hidden; } #player.player-audio { background: #3DA88E url(../images/template/player-bg4.jpg); background-size: 750px 250px; height: 250px; } #player #mediaplayer_wrapper { border-radius: 4px; overflow: hidden; } #player .video-toggle { background: #252526; background: rgba(61,61,63, 0.8); color: #fff; padding: 5px 10px; border-radius: 5px; position: absolute; top: 55px; right: 10px; cursor: pointer; opacity: 0; width: 90px; text-align: center; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } #player:hover .video-toggle { opacity: 1; } #player .player-speed { background: #252526; background: rgba(61,61,63, 0.8); color: #fff; padding: 5px 10px; border-radius: 5px; position: absolute; top: 15px; right: 10px; cursor: pointer; opacity: 0; width: 90px; text-align: center; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } #player:hover .player-speed { opacity: 1; } @media (min-width: 1200px) { #player.player-audio { background-size: 100%; } } #player .player-tools { height: 55px; width: 100%; background: rgba(0,0,0,0.6); position: absolute; bottom: 0; } #player .player-play { height: 110px; width: 110px; border: 5px solid rgba(0,0,0,0.6); border-radius: 50%; position: absolute; top: 42%; left: 50%; margin: -60px 0 0 -55px; } @media only screen and (max-width: 480px) { #player { margin: 0 -25px 15px -25px; border-radius: 0; } } @media only screen and (max-width: 320px) { #player { margin: 0 -20px 15px -20px; } } /*Sermon Tabs*/ #sermon-details { } #sermon-details.content-block { margin-bottom: 29px; } #sermon-details .nav-tabs { height: 38px; overflow: hidden; } #sermon-details .nav-tabs li { margin-right: 20px; } #sermon-details .nav-tabs li a { color: #ADADAD; text-transform: uppercase; font-weight: 600; padding: 0 2px 15px 2px; } #sermon-details .nav-tabs li.active a { color: #242426; border-color: transparent; border-bottom: 1px solid #3DA88E; box-shadow: inset 0px -1px 0px #3DA88E, 0px 1px 0px #3DA88E; mar/gin-bottom: -1px; } #sermon-details .nav-tabs li a:hover { background: none; border-color: transparent; color: #242426; } #sermon-details .nav-tabs li.active a:hover { border-bottom-color: #3DA88E; } #sermon-details .tab-content { } #sermon-details .tab-content .tab-pane { padding: 20px 0; overflow: hidden; } #sermon-details .tab-content .tab-block { display: inline-block; width: 49.5%; vertical-align: text-top; margin-bottom: 15px; } #sermon-details .tab-content .tab-block:nth-child(even) { } #sermon-details .tab-content h4 { font-size: 12px; text-transform: uppercase; font-weight: 700; } #sermon-details .tab-content ul { margin: 0; padding: 0; list-style: none; line-height: 1.3em; } #sermon-details .tab-content a { color: #747474; } #sermon-details .tab-content a:hover { color: #3DA88E; } @media only screen and (max-width: 480px) { #sermon-details .tab-content .tab-block { float: none; width: 100%; } } /*About Tab*/ #sermon-details #about { } #sermon-details #about .sponsor-image { float: left; width: 80px; margin-right: 14px; margin-top: 9px; display: none; } #sermon-details #about .sponsor-image img { width: 100%; border-radius: 3px; } @media only screen and (max-width: 800px) { #sermon-details #about .sponsor-image { display: block; } } /*Downloads Tab*/ #sermon-details #downloads { padding: 25px 0 0 0; } #sermon-details #downloads .tab-block { margin: 20px 0; } #sermon-details #downloads .tab-block img { float: left; width: 36px; height: 36px; margin-right: 15px; } #sermon-details #downloads .tab-block h4 { margin: 1px 0 0 0; font-size: 14px; } #sermon-details #downloads .tab-block ul li { display: inline; font-size: 13px; } #sermon-details #downloads .tab-block ul li a { border-right: 1px solid #aaa; padding: 0 8px 0 4px; } #sermon-details #downloads .tab-block ul li:last-child a { border: none; } #sermon-details #downloads .alert { margin: 20px 0; } /*for a special message placed inside the downloads tab*/ /*Keywords Tab*/ #sermon-details #keywords li { float: left; margin: 0 8px 8px 0; font-size: 13px; } #sermon-details #keywords li a { display: inline-block; background: #eee; color: #747474; padding: 2px 7px; border-radius: 3px; box-shad/ow: 0px 1px 2px rgba(0,0,0,0.15);} #sermon-details #keywords li a:hover { background: #3DA88E; color: #fff; } /*Transcript Tab*/ #sermon-details .tab-content #transcript .transcript-box { max-height: 400px; overflow: auto; } /*Creative Commons Badge*/ .creative-commons { margin-top: 25px; overflow: hidden; } .creative-commons img { float: left; width: 107px; margin-right: 10px; } .creative-commons p { font-size: 10px; color: #929292; margin: 0; line-height: 1.3em; } .creative-commons a { color: #929292; } .creative-commons a:hover { color: #3DA88E; } /*Other sermons in this series*/ .sermon-page #content .presentations-list, .book-page #content .presentations-list { border-top: 1px solid #ddd; padding-top: 20px; margin-bottom: 0; } /* ================================================================================== */ /* == Blog Index ==================================================================== */ /* ================================================================================== */ .index-blog { } .post-list { } .post-list ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid #eee; } .post-list ul li { overflow: hidden; border-bottom: 1px solid #eee; } .post-list ul li a { color: #747474; display: block; overflow: hidden; padding: 30px 0; } .post-list ul li a:hover { background: #f7f7f7; } .post-list ul li a:hover .read-more { color: #008bce; } .post-list ul li img { float: left; width: 30%; } .post-list ul li .post-details { float: right; width: 70%; padding-left: 25px; } .post-list ul li .post-details h2 { margin: 0; font-size: 26px; font-weight: 600; } .post-list ul li .post-details h2:hover { color: #3DA88E; } .post-list ul li .post-details .post-date { margin-top: 0.32em; font-style: italic; color: #919191; } .post-list ul li .post-details .excerpt { margin-top: 0.5em; } .post-list ul li .post-details .read-more { display: block; font-size: 13px; margin-top: 0.5em; color: #3DA88E; font-weight: 600; } @media only screen and (max-width: 480px) { .post-list ul li img { float: none; width: 100%; margin-bottom: 10px; } .post-list ul li .post-details { float: none; width: 100%; padding: 0; } .post-list ul li .post-details h2 { font-size: 23px; } } /* ================================================================================== */ /* == Blog Post ===================================================================== */ /* ================================================================================== */ .blog-post { } .post-content { } .post-content .featured-image { display: block; max-width: 100%; margin-bottom: 2em; } /* ================================================================================== */ /* == Index Page - GENERAL STYLES =================================================== */ /* ================================================================================== */ .index-page { } /*Index Page Header*/ .index-page .page-header { margin: 0 0 40px 0; padding: 0; } .index-page .page-header h1 { font-size: 25px; font-weight: 600; float: left; margin: 0;} .index-page .page-header .page-nav { float: right; margin-top: 3px; } @media only screen and (max-width: 480px) { .index-page .page-header { margin-bottom: 25px; } } /*General two column list for index pages*/ .index-list { border-top: 1px solid #ddd; margin-bottom: 0; overflow: hidden;} .index-list a { display: block; padding: 10px; overflow: hidden; border-radius: 5px; height: 70px; } .index-list a:hover { background: #f2f2f2; } .index-list a.more:hover { background: none; } .index-list ul { padding: 0; } .index-list li { overflow: hidden; float: left; display: inline; width: 48%; border-bottom: 1px solid #eee; } .index-list li:nth-child(even) { float: right; } .index-list li .details { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} .index-list li h4 { line-height: 1.2em; font-weight: 600; margin: 5px 0 0 0; } .index-list li.no-info h4 { margin-top: 14px; } .index-list li img { float: left; width: 40px; height: 40px; border-radius: 2px; margin: 5px 10px 0 0; } .index-list li p { font-size: 12px; line-height: 1.5em; color: #747474; margin: -2px 0 0 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } @media only screen and (max-width: 580px) { .index-list ul { margin: 0 -10px; } .index-list li { float: none !important; width: 100%; } .index-list a { height: auto; min-height: 70px; } } /*Full width index list with full details*/ ul.index-sermons-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid #f3f3f3; border-bottom: 1px solid #f3f3f3; } ul.index-sermons-list li { overflow: hidden; height: 64px; line-height: 64px; } ul.index-sermons-list li:nth-child(even) { background: #f7f7f7; } ul.index-sermons-list li .info { float: left; width: 50%; } ul.index-sermons-list li .meta { float: right; width: 50%; } ul.index-sermons-list li .presenter-image { float: left; width: 40px; margin-right: 10px; margin-left: 2px; overflow: hidden; } ul.index-sermons-list li img { width: 100%; border-radius: 50%; } ul.index-sermons-list li .presentation-title { font-weight: 600; color: #242426; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; padding-right: 10px; } ul.index-sermons-list li .presenter-name { color: #747474; width: 45%; float: left; padding-left: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } ul.index-sermons-list li .date { width: 25%; float: left; padding-left: 10px; } ul.index-sermons-list li .duration { width: 18%; float: left; padding-left: 10px; } ul.index-sermons-list li .type { width: 12%; float: left; padding-left: 10px; text-indent: -9999px; position: relative; } ul.index-sermons-list li .type.audio { background: url(../images/template/icon-volume.png) no-repeat center; background-size: 16px; } ul.index-sermons-list li .type.movie { background: url(../images/template/icon-imac.png) no-repeat center; background-size: 16px; } ul.index-sermons-list li .type.new:after { content: "New"; text-indent: 0; text-transform: uppercase; font-style: italic; background: #e21f14; color: #fff; font-weight: 700; font-size: 10px; padding: 0px 5px; height: 16px; line-height: 16px; position: absolute; top: 35px; left: 50%; margin-left: -14px; border-radius: 3px; text-shadow: 0px 1px 1px rgba(0,0,0,0.15); } ul.index-sermons-list li .type.new { background-position: center 12px; } @media only screen and (max-width: 950px) { ul.index-sermons-list li .info { width: 60%; } ul.index-sermons-list li .meta { width: 40%; } ul.index-sermons-list li .presenter-name { width: 60%; } ul.index-sermons-list li .date { display: none; } ul.index-sermons-list li .duration { width: 25%; } ul.index-sermons-list li .type { width: 15%; } } @media only screen and (max-width: 700px) { ul.index-sermons-list li { line-height: normal; } ul.index-sermons-list li .info { float: none; width: 100%; } ul.index-sermons-list li .meta { float: none; width: 100%; font-size: 12px; margin-top: 3px; } ul.index-sermons-list li .presenter-image { line-height: 58px; } ul.index-sermons-list li .presentation-title { padding-top: 12px; } ul.index-sermons-list li .presenter-name, ul.index-sermons-list li .date, ul.index-sermons-list li .duration, ul.index-sermons-list li .type { width: auto; display: block; width: auto; padding: 0 6px; border-right: 1px solid #a9a9a9; } ul.index-sermons-list li .presenter-name { padding-left: 0; } ul.index-sermons-list li .date { } ul.index-sermons-list li .duration { border: none; } ul.index-sermons-list li .type { display: none; } } @media only screen and (max-width: 480px) { ul.index-sermons-list li .date { display: none; } } /*List of presentations*/ .presentations-list { padding: 0; border: none; margin-bottom: 40px; clear: both; } .presentations-list:after { content: ""; display: table; clear: both; } .presentations-list a { display: block; padding: 10px 30px 10px 10px; overflow: hidden; border-radius: 5px; } .presentations-list a:hover { background: #f2f2f2; } .presentations-list a.more:hover { background: none; } .presentations-list ul { margin: 0 -10px; padding: 0; } .presentations-list li { overflow: hidden; position: relative; } .presentations-list li:nth-child(odd) a { background: #f7f7f7; } .presentations-list li:nth-child(odd) a:hover { background: #f2f2f2; } .presentations-list li .details { overflow: hidden; } .presentations-list li h4 { line-height: 1.2em; font-weight: 600; margin: 2px 0 0 0; font-size: 15px; } .presentations-list li img { float: left; width: 40px; border-radius: 50%; margin-right: 10px; margin-left: 2px; } .presentations-list li p { font-size: 12px; line-height: 1.5em; color: #747474; margin: 0; } .presentations-list li .duration { border-left: 1px solid #aaa; margin-left: 6px; padding-left: 5px; } .presentations-list li.brand-new a, .presentations-list li.new a { padding-right: 75px; } .presentations-list li.brand-new:after { content: "New"; position: absolute; right: 5px; top: 34px; right: 38px; top: 50%; margin-top: -8px; text-transform: uppercase; font-style: italic; background: #e21f14; color: #fff; font-weight: 700; font-size: 10px; padding: 0px 5px; height: 16px; line-height: 16px; position: absolute; border-radius: 3px; text-shadow: 0px 1px 1px rgba(0,0,0,0.15); } .presentations-list li.new:after { content: "New"; position: absolute; right: 4px; top: 34px; right: 38px; top: 50%; margin-top: -8px; text-transform: uppercase; font-style: italic; color: #e21f14; font-weight: 700; font-size: 11px; padding: 0px 5px; height: 16px; line-height: 14px; position: absolute; /*border: 1px solid #e21f14;*/ border-radius: 3px; } .presentations-list li .type { text-indent: -9999px; position: absolute; right: 12px; top: 12px; top: 50%; margin-top: -8px; width: 16px; height: 16px; } .presentations-list li .type.audio { background: url(../images/template/icon-volume.png) no-repeat center; background-size: 16px; } .presentations-list li .type.movie { background: url(../images/template/icon-imac.png) no-repeat center; background-size: 16px; } /* ================================================================================== */ /* == Index Page - Presenters ======================================================= */ /* ================================================================================== */ .index-presenters { } .index-presenters .index-list li img { border-radius: 50%; } /* ================================================================================== */ /* == Index Page - Topics =========================================================== */ /* ================================================================================== */ .index-topics { } .index-topics-list { border-top: 1px solid #ddd; margin-bottom: 0; overflow: hidden;} .index-topics-list ul { padding: 2% 0 0 0; } .index-topics-list li { overflow: hidden; float: left; width: 23%; margin: 0 1% 2% 1%; } .index-topics-list li .topic-title { display: block; line-height: 1.2em; font-weight: 600; margin: 5px 0 0 0; color: #242426;} .index-topics-list li .topic-meta { display: block; font-size: 12px; line-height: 1.5em; color: #747474; margin: -2px 0 0 0; } .index-topics-list li a { display: block; padding: 10px 15px; overflow: hidden; border-radius: 5px; height: 70px; background: #f7f7f7; } .index-topics-list li a:hover { background: #3DA88E; color: #fff; } .index-topics-list li a:hover span { color: #fff; } @media only screen and (max-width: 940px) { .index-topics-list li { width: 31%; } } @media only screen and (max-width: 720px) { .index-topics-list li { width: 48%; } } @media only screen and (max-width: 480px) { .index-topics-list li { width: 100%; margin: 2% 0; } .index-topics-list li a { height: 55px; padding: 3px 13px; } } /* ================================================================================== */ /* == Login Page ==================================================================== */ /* ================================================================================== */ .login-page { } .login-page h2 { font-size: 25px; margin-bottom: 1.3em; } .login-page h2 em { font-style: normal; color: #747474; } .login-page .login-box { max-width: 1000px; padding: 40px 50px 65px 50px; } .login-box { overflow: hidden; background: url(../images/template/icon-or.png) center 200px no-repeat; background-size: 60px; max-width: 600px; margin: 0 auto; } .login-box ul { float: left; width: 42%; list-style: none; margin: 0; padding: 0; } .login-box ul.signin-social { float: right; } .login-box ul li { height: 60px; margin-bottom: 20px; font-size: 20px; } .login-box ul li input { height: 100%; width: 100%; background: #eee; border: none; border-radius: 5px; padding: 0 20px; } .login-box ul li input:focus { box-shadow: inset 0px 0px 5px rgba(0,0,0,0.15); } .login-box ul li#forgot-password { font-size: 15px; height: auto; margin: -10px 0 0 0; } .signin-social li a { display: block; color: #fff; height: 100%; line-height: 60px; border-radius: 5px; overflow: hidden; } .signin-social li a span { float: left; background: rgba(0,0,0,0.12); width: 64px; height: 100%; margin-right: 22px; } .signin-social li a.signin-facebook { background: #4E64B2; } .signin-social li a.signin-facebook span { background: rgba(0,0,0,0.12) url(../images/template/icon-facebook.png) center no-repeat; background-size: 13px 26px; } .signin-social li a.signin-facebook:hover { background: #4A549C; } .signin-social li a.signin-twitter { background: #50BDF9; } .signin-social li a.signin-twitter span { background: rgba(0,0,0,0.12) url(../images/template/icon-twitter.png) center no-repeat; background-size: 30px 24px; } .signin-social li a.signin-twitter:hover { background: #57A5DA; } .signin-social li a.signin-google { background: #F74D3F; } .signin-social li a.signin-google span { background: rgba(0,0,0,0.12) url(../images/template/icon-google.png) center no-repeat; background-size: 29px 28px; } .signin-social li a.signin-google:hover { background: #D33D3C; } .signup-prompt { padding: 40px 50px 64px 50px; border-top: 1px solid #ddd; text-align: center; } @media only screen and (max-width: 768px) { .signin-social li a span { width: 58px; margin-right: 19px; } } @media only screen and (max-width: 600px) { .login-box { background-position: center 395px; } .login-box ul { float: none; width: 100%; } .login-box ul li#forgot-password { text-align: center; } .login-box ul.signin-box { margin-bottom: 125px; } } @media only screen and (max-width: 400px) { .login-box { background-position: center 380px; } .login-box ul li { font-size: 19px; } } @media only screen and (max-width: 480px) { .login-page .login-box { padding: 30px 25px; background-position: center 391px; } } @media only screen and (max-width: 320px) { .login-page .login-box { padding: 30px 20px; } } /* ================================================================================== */ /* == Signup Page =================================================================== */ /* ================================================================================== */ .signup-page { } .signup-page h2 { font-size: 25px; margin-bottom: 1.3em; } .signup-page h2 em { font-style: normal; color: #747474; } .signup-page .login-box { background-position: center 282px; max-width: 600px; } .signup-page .login-box ul { float: none; width: 100%; } .signup-page .login-box ul.signin-social { float: none; margin-bottom: 160px; } .login-box ul li#newsletter-check { height: 30px; line-height: 30px; font-size: 17px; color: #898989; } .login-box ul li#newsletter-check input#newsletter-checkbox { display: none; } .login-box ul li#newsletter-check input#newsletter-checkbox + label{ background: #eee; text-indent: -9999px; width: 30px; height: 30px; border: 6px solid #eee; border-radius: 25px; float: left; margin-right: 15px; } .login-box ul li#newsletter-check input#newsletter-checkbox:checked + label { background: #47B9A4; background: -moz-linear-gradient(top, #47B9A4 0%, #349779 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#47B9A4), color-stop(100%,#349779)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #47B9A4 0%,#349779 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #47B9A4 0%,#349779 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #47B9A4 0%,#349779 100%); /* IE10+ */ background: linear-gradient(to bottom, #47B9A4 0%,#349779 100%); /* W3C */ box-shadow: 0px 0px 1px rgba(0,0,0,0.25), inset 0px -1px 4px rgba(0,0,0,0.2); } @media only screen and (max-width: 550px) { .signup-page .login-box { background-position: center 303px; } } /* ================================================================================== */ /* == Testimonies Page ============================================================== */ /* ================================================================================== */ .testimonies-page { } /*List of testimonies*/ .testimonies-list { } .testimonies-list .testimony { margin-bottom: 40px; overflow: hidden; } .testimonies-list .testimony .testimony-text { background: #eee; padding: 20px; border-radius: 10px; } .testimonies-list .testimony .testimony-text p { font-style: italic; margin: 0 0 0.65em 0; } .testimonies-list .testimony .testimony-text p:last-child { margin-bottom: 0; } .testimonies-list .testimony .person { margin: 15px 20px 0 20px; position: relative; font-weight: bold; color: #242426; font-size: 15px; } .testimonies-list .testimony .person:before { content: ""; width: 0; height: 0; position: absolute; top: -15px; left: 30px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 10px solid #eee; } .testimonies-list .testimony:nth-child(even) .person { float: right; text-align: right; } .testimonies-list .testimony:nth-child(even) .person:before { left: auto; right: 30px; } /*Tell your story button*/ a.tell-your-story { background: #3DA88E; color: #fff; font-size: 18px; padding: 20px; display: block; border-radius: 10px; margin-bottom: 40px; position: relative; } a.tell-your-story:after { content: ""; width: 0; height: 0; position: absolute; bottom: -10px; left: auto; right: 50px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 10px solid #3DA88E; } a.tell-your-story:hover { background: #008bce; } a.tell-your-story:hover:after { border-top: 10px solid #008bce; } /* ================================================================================== */ /* == Buttons ======================================================================= */ /* ================================================================================== */ /*Global button*/ .button { display: inline-block; text-decoration: none; color: #fff !important; border: 1px solid #777; border-radius: 3px; text-shadow: 0px 1px 1px rgba(0,0,0,0.4); font-weight: 600; cursor: pointer; line-height: 33px; height: 35px; padding: 0 20px; background: #aaa; background: -moz-linear-gradient(top, #aaa 0%, #888 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aaa), color-stop(100%,#888)); background: -webkit-linear-gradient(top, #aaa 0%,#888 100%); background: -o-linear-gradient(top, #aaa 0%,#888 100%); background: -ms-linear-gradient(top, #aaa 0%,#888 100%); background: linear-gradient(to bottom, #aaa 0%,#888 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaa', endColorstr='#888',GradientType=0 ); border-color: #777; border-top-color: #888; border-bottom-color: #333; box-shadow: inset 0px 1px 0px #bbb, 0px 1px 3px rgba(0,0,0,0.3); } .button:hover { background: #bbb; background: -moz-linear-gradient(top, #bbb 0%, #999 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbb), color-stop(100%,#999)); background: -webkit-linear-gradient(top, #bbb 0%,#999 100%); background: -o-linear-gradient(top, #bbb 0%,#999 100%); background: -ms-linear-gradient(top, #bbb 0%,#999 100%); background: linear-gradient(to bottom, #bbb 0%,#999 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbb', endColorstr='#999',GradientType=0 ); border-color: #888; border-top-color: #999; border-bottom-color: #444; box-shadow: inset 0px 1px 0px #bbb, 0px 1px 3px rgba(0,0,0,0.3); } /*Medium sized button*/ .button.medium { line-height: 33px; height: 35px; padding: 0 20px; } /*Large sized button*/ .button.large { line-height: 58px; height: 60px; font-size: 20px; padding: 0 35px; box-shadow: 0px 1px 3px rgba(0,0,0,0.3); } /*Red colored button*/ .button.red { background: #e21f14; background: -moz-linear-gradient(top, #e21f14 0%, #b31b00 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e21f14), color-stop(100%,#b31b00)); background: -webkit-linear-gradient(top, #e21f14 0%,#b31b00 100%); background: -o-linear-gradient(top, #e21f14 0%,#b31b00 100%); background: -ms-linear-gradient(top, #e21f14 0%,#b31b00 100%); background: linear-gradient(to bottom, #e21f14 0%,#b31b00 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e21f14', endColorstr='#b31b00',GradientType=0 ); border-color: #961000; border-top-color: #b01c00; border-bottom-color: #7a0400; box-shadow: inset 0px 1px 0px #e53b00, 0px 1px 3px rgba(0,0,0,0.3); } .button.red:hover { background: #e21f14; background: -moz-linear-gradient(top, #e21f14 0%, #d21010 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e21f14), color-stop(100%,#d21010)); background: -webkit-linear-gradient(top, #e21f14 0%,#d21010 100%); background: -o-linear-gradient(top, #e21f14 0%,#d21010 100%); background: -ms-linear-gradient(top, #e21f14 0%,#d21010 100%); background: linear-gradient(to bottom, #e21f14 0%,#d21010 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e21f14', endColorstr='#d21010',GradientType=0 );} /*Green colored button*/ .button.green { background: #47B9A4; background: -moz-linear-gradient(top, #47B9A4 0%, #349779 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#47B9A4), color-stop(100%,#349779)); background: -webkit-linear-gradient(top, #47B9A4 0%,#349779 100%); background: -o-linear-gradient(top, #47B9A4 0%,#349779 100%); background: -ms-linear-gradient(top, #47B9A4 0%,#349779 100%); background: linear-gradient(to bottom, #47B9A4 0%,#349779 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#47B9A4', endColorstr='#349779',GradientType=0 ); border: 1px solid #319378; border-color: #319378; border-top-color: #3EA88F; border-bottom-color: #1B6E51; box-shadow: inset 0px 1px 0px #5DD6C8, 0px 1px 3px rgba(0,0,0,0.3); } .button.green:hover { background: #53C9B6; background: -moz-linear-gradient(top, #53C9B6 0%, #3EAA8C 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#53C9B6), color-stop(100%,#3EAA8C)); background: -webkit-linear-gradient(top, #53C9B6 0%,#3EAA8C 100%); background: -o-linear-gradient(top, #53C9B6 0%,#3EAA8C 100%); background: -ms-linear-gradient(top, #53C9B6 0%,#3EAA8C 100%); background: linear-gradient(to bottom, #53C9B6 0%,#3EAA8C 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#53C9B6', endColorstr='#3EAA8C',GradientType=0 ); border: 1px solid #339C81; border-color: #339C81; border-top-color: #49BAA1; border-bottom-color: #218162; box-shadow: inset 0px 1px 0px #6BE1D5, 0px 1px 3px rgba(0,0,0,0.3); } /*Outline Button*/ .button-outline { display: inline-block; font-size: 15px; text-transform: uppercase; font-weight: 600; background: none; border: 2px solid #3DA88E; border-radius: 5px; padding: 0.8em 1.2em; cursor: pointer; } .button-outline.rounded { border-radius: 2em; } .button-outline:hover { background: #3DA88E; color: #fff; } .button-outline:active { background: #338f78; border-color: #338f78; } /*Outline Button - White*/ .button-outline.white { border-color: #fff; color: #fff; } .button-outline.white:hover { background: #fff; color: #3DA88E; } .button-outline.white:active { background: #bbd9d0; border-color: #bbd9d0; } /* ================================================================================== */ /* == Modals ======================================================================== */ /* ================================================================================== */ /*This is the modal the first-time users are presented with to choose their preferred language.*/ #language-modal { } #language-modal h4 { font-size: 24px; text-align: center; } #language-modal ul { overflow: hidden; margin: 0; padding: 0; list-style: none; } #language-modal ul li { float: left; width: 50%; padding: 10px; } #language-modal ul li .btn { width: 100%; font-size: 17px; padding: 10px 12px; } /* ================================================================================== */ /* == Pagination ==================================================================== */ /* ================================================================================== */ /*Pagination*/ .pagination-wrap { text-align: center; margin: 25px 0 -28px 0; clear: both; } .pagination-wrap .pagination { border: none; margin: 0; } .pagination-wrap .pagination > li > a, .pagination-wrap .pagination > li > span { border: none; color: #747474; border-radius: 3px; margin: 0; padding: 6px 11px; } .pagination-wrap .pagination > li:first-child > a, .pagination-wrap .pagination > li:last-child > a { opacity: 0.5; text-indent: -9999px; } .pagination-wrap .pagination > li:first-child > a:hover, .pagination-wrap .pagination > li:last-child > a:hover { background-color: #eee; opacity: 0.7; } .pagination-wrap .pagination > li:first-child > a { background: url(../images/template/arrow-left.png) no-repeat center 10px; background-size: 9px 15px; } .pagination-wrap .pagination > li:last-child > a { background: url(../images/template/arrow-right.png) no-repeat center 10px; background-size: 9px 15px; } .pagination-wrap .pagination > li > a.active { background: #3DA88E; font-weight: bold; color: #fff; } /* On small screens this .pagination-wrap is hid, and replaced with the .page-nav-bottom */ .page-nav span { display: inline-block; color: #919191; } .page-nav .prev-page, .page-nav .next-page { width: 20px; height: 22px; text-indent: -9999px; opacity: 0.5; cursor: pointer; } .page-nav .prev-page:hover, .page-nav .next-page:hover { opacity: 0.75; } .page-nav .prev-page { background: url(../images/template/arrow-left.png) no-repeat center; background-size: 10px 17px; } .page-nav .next-page { background: url(../images/template/arrow-right.png) no-repeat center; background-size: 10px 17px; } /* On small screens this .page-nav-bottom replaces .pagination-wrap */ .page-nav-bottom { display: none; } .page-nav-bottom { text-align: center; margin-top: 30px; } .page-nav-bottom .prev-page { float: left; width: 40px; height: 25px; } .page-nav-bottom .next-page { float: right; width: 40px; height: 25px; } @media only screen and (max-width: 480px) { .page-nav { display: none; } .page-nav-bottom { display: block; } } /* ================================================================================== */ /* == Bug fixes ======================================================================== */ /* ================================================================================== */ /*JWPlayer when the video is loaded and then click play nothing happens*/ .jw-skin-seven .jw-display-icon-container { pointer-events: all!important }