/*Cycle2*/ #live-stream .cycle-ss { width: 100%; margin: 0; padding: 0; position: relative; overflow: hidden; } #live-stream .cycle-ss .slide { width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } #live-stream .cycle-ss img { display: block; width: 100%; height: auto; } .disabled { opacity: .5; filter: alpha(opacity=50); } #live-stream .cycle-pager { position: absolute; bottom: 0; left: 0; text-align: center; width: 100%; z-index: 500; overflow: hidden; padding: 0 0 1rem; } #live-stream .cycle-pager span { line-height: 1; font-size: 0; width: 14px; height: 14px; display: inline-block; background-color: transparent; border: 2px solid #ededed; cursor: pointer; margin: 0 6px; opacity: 1; border-radius: 50%; transition: all 0.3s ease; } @media (min-width:1200px) {#live-stream .cycle-pager span { width: 18px; height: 18px; } } #live-stream .cycle-pager span:hover { opacity: .5; } #live-stream .cycle-pager span.cycle-pager-active { background-color: #4072d7; opacity: 1; } #live-stream .pager { display: block; visibility: hidden; position: absolute; font-size: 1.5em; top: 50%; margin-top: -.5em; color: #ffffff; z-index: 500; cursor: pointer; opacity: .5; transition: all 0.3s ease; } @media (min-width: 992px) { #live-stream .pager { font-size: 3em; } } #live-stream .pager:hover { opacity: 1; } #live-stream .pager-prev { left: .5rem; } @media (min-width: 768px) { #live-stream .pager-prev { left: 1rem; } } #live-stream .pager-next { right: .5rem; } @media (min-width: 768px) { #live-stream .pager-next { right: 1rem; } } .disabled { opacity: .5; filter: alpha(opacity=50); } #live-stream .links-container {justify-content: space-between; margin-top: 2em; margin-bottom: 2em; } #live-stream .links-container .btn { width: 100%; display: block; margin-bottom: .5rem; } #live-stream .links-container > div:last-child .btn { margin-bottom: 0; } @media (min-width: 992px) {#live-stream .links-container .btn { margin-bottom: 0; } #live-stream .one-half img, #live-stream .one-third img, #live-stream .one-fourth img { max-width: 100%; min-width: 100%; height: auto; } #live-stream .banner { display: block; width: 100%; } } @media (min-width: 992px) { #live-stream .banner { display: -webkit-box; display: flex; } } #live-stream #rotator, #live-stream #live-stream-content { position: relative; width: 100%; } @media (min-width: 992px) { #live-stream #rotator, #live-stream #live-stream-content { flex-basis: 75%; } /* #live-stream.live #live-stream-content { flex-basis: 100%; } */ } #live-stream .banner.full #live-stream-content, #live-stream .banner.full #rotator { flex-basis: 100%; width: 100%;} #live-stream #live-stream-content { display: none; } #live-stream #live-stream-content .content-wrap { position: relative; height: 0; padding-bottom: 56.25%; /* 16:9 */ } #live-stream #live-stream-content p { line-height: 0; margin-bottom: 0; } #live-stream #live-stream-content iframe, #live-stream #live-stream-content object { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none !important; outline: none !important; } #live-stream #rotator { position: relative; } #live-stream #rotator img { width: 100%; height: auto; } #live-stream #rotator ul { padding: 0; margin: 0; } #live-stream #rotator li { display: none; width: 100%; margin: 0; padding: 0; list-style-type: none; line-height: 0; } #live-stream #rotator li:first-child, #live-stream #rotator .cycle-slide { display: block; } #live-stream #rotator a { display: block; line-height: 0; } #live-stream #rotator .pager { display: block; visibility: visible; } #live-stream .countdown { padding: 1em 1.5em .7em; display: none; } @media (min-width:768px) { #live-stream .countdown { padding: 1.5em 1.5em 1.2em; } } #live-stream .countdown .live { display: none; line-height: 1; font-size: 1.5rem; margin-bottom: 0; } #live-stream .countdown .timer { font-size: .9125rem; line-height: 1.3; margin-bottom: 0; } @media (min-width: 768px) { #live-stream .countdown .timer { font-size: 1.5rem; line-height: 1.3; } } @media (min-width: 992px) { #live-stream .countdown .timer { line-height: 1; } } #live-stream .countdown .timer h3 { display: inline-block; margin-right: 1em; font-size: 1em; line-height: 1; margin-bottom: 0; } #live-stream .countdown .timer span { text-transform: uppercase; } #live-stream .countdown .timer .delimiter { margin: 0 .25em; font-weight: 300; vertical-align: 3px; } #live-stream #twitter { width: 100%; overflow-y: hidden; height: 360px; position: relative; } @media (min-width: 992px) { #live-stream #twitter { flex-basis: 25%; overflow-y: hidden; height: auto; position: relative; } /* #live-stream.live #twitter { display: none; } */ } #live-stream .title { position: absolute; width: 100%; z-index: 2; top: 0; } #live-stream #twitter #tweets { padding: 3.5em 1.5em 2em; overflow-y: scroll; position: absolute; top: 0; bottom: 0; right: 0; left: 0; } #live-stream #twitter .title, #live-stream #twitter .follow { display: block; padding: .5em 1.25em; } #live-stream #twitter .title { font-size: 20px; } #live-stream #twitter .follow { font-size: 16px; font-weight: 700; text-align: center; transition: background-color 0.15s ease-in-out; line-height: 2; position: absolute; bottom: 0; left: 0; width: 100%; } #live-stream #twitter .follow > span { font-size: 1.2em; vertical-align: -1.5px; padding-right: 3px; } #live-stream #twitter p { margin-bottom: 1.5em; font-size: 1rem; line-height: 1.5; } #live-stream #twitter h5 { margin-bottom: 0; font-size: 1em; } #live-stream #twitter .time { font-size: 11px; margin-left: 5px; text-transform: uppercase; } #live-stream #twitter ::-webkit-scrollbar { width: 14px; } #live-stream #twitter ::-webkit-scrollbar-track { padding: 0 4px; } #live-stream #twitter ::-webkit-scrollbar-thumb { border-radius: 14px; } #live-stream #footer-sections { margin-top: 2rem; justify-content: space-between; } #live-stream #footer-sections > div { margin-bottom: 2rem; } #live-stream #footer-sections > div:last-of-type { margin-bottom: 0; } @media (min-width:992px) {#live-stream #footer-sections { margin-top: 3rem; } #live-stream #footer-sections > div { margin-bottom: 0 !important; } } #live-stream #footer-sections .section { text-align: center; } #live-stream #footer-sections .section > *:last-child, #live-stream #footer-sections .section .details > *:last-child { margin-bottom: 0; } #live-stream #footer-sections h3 { line-height: 1.35; } #live-stream #footer-sections h5 { margin-bottom: 5px; } #live-stream #footer-sections .widget.sermon h5 { margin-bottom: 0; line-height: 1.35; } #live-stream #footer-sections .widget.sermon p.sermon-date { margin-bottom: .25em; margin-top: -5px; font-size: .85em; } #live-stream #footer-sections .events .event-times { font-size: .85em; } #live-stream #footer-sections .media-icons { padding: 0; margin: 0 0 1em 0; list-style: none; text-align: center; } #live-stream #footer-sections .media-icons li { display: inline-block; margin: 0 .25rem .25rem; } #live-stream #footer-sections .media-icons li a { font-size: 20px; text-align: center; } #live-stream #footer-sections .events .info { flex-basis: 82%; text-align: left; } #live-stream #footer-sections .events .info h5 { line-height: 1.3; margin-bottom: 0.25em; } #live-stream #footer-sections .import { font-size: 14px; } #live-stream.live #live-stream-content { display: block; } #live-stream.live #rotator { display: none; } #live-stream.live .countdown .timer { display: none; } #live-stream.live .countdown .live { display: block; } #live-stream .countdown .number { margin-right: 2px; } #live-stream #footer-sections .ls-event { text-align: center; } #live-stream #footer-sections .ls-event .date { width: 150px; margin: 0 auto; padding: 1.75rem 0 1.25rem; margin-bottom: 2rem; } #live-stream #footer-sections .ls-event .date span { display: block; padding: 0; line-height: 1; } #live-stream #footer-sections .ls-event .date span.day { font-size: 4.5rem; text-transform: uppercase; font-weight: 700; padding: 0 .25rem; } #live-stream #footer-sections .ls-event .date span.month { font-size: 1.125rem; text-transform: uppercase; letter-spacing: .3em; } .media-icons li { display: inline-block; margin: 0 1rem 0 0; } .media-icons li a { display: block; font-size: 1.5rem; } /* Overrides - modify these as needed ----------------------------------------- */