CHoP Overlay Login

Javascript

 $(window).init(function() {
  $('.co-reminder-header-title').text('Next Live Event'); 
});

app.on('event:live', function(){
  $('.co-chat-tab').trigger('click');
});

app.on('event:loaded', function() {
  if (window.current_user) {
    $('.content').show();
    $('.login_wrapper').hide();
  } else {
    $('.login_wrapper').show();
  }
});

(function(doc,found) {
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {

          var yourdiv = doc.querySelector(".login-links_wrapper .co-sign-in-button");

          if(found && !yourdiv){
            // Was there but is gone, do something
            $('.content').show();
            $('.login_wrapper').hide();
            found = false;

          }

          if(yourdiv){
            // Found it, do something
            found = true;

          }

        });
    });
    observer.observe(doc, { childList: true, subtree: true });
})(document,false);

window.reflowWidgetTabs = function() {
  var container, index, items, newTabs, tabContainer, tabs, reflowTabs, willOverflow;

  container    = $(".more-widgets");
  tabContainer = $(".co-widget-tabs");
  reflowTabs   = [];
  
  container.find("ul li").detach().appendTo(tabContainer);
  container.hide().find("ul").remove();
  tabContainer.removeClass('has-more-widgets');
  tabContainer.find('li').each(function(){ if(this.offsetTop > 0) { willOverflow = true; } });
  
  if( willOverflow ){ tabContainer.addClass('has-more-widgets'); }

  tabContainer.find('li').each(function(){
    if(this.offsetTop > 0) {
      reflowTabs.push(this);
    }
  });
  if (reflowTabs.length > 0) {
    newTabs = $("<ul>").append(reflowTabs);
    container.show().append(newTabs);
  }
};

var lazyReflow = _.debounce(reflowWidgetTabs, 300);
$(window).resize(lazyReflow)
$(function(){ setTimeout(function(){ reflowWidgetTabs(); }, 0); });
app.on('private-chat:add private-chat:remove', function(){ reflowWidgetTabs(); });

console.log( app );

$('.ec-playlists:not(.ec-playlists--live) .playlist').click(function() {
  var $iframe = $('<iframe frameborder="0" height="416" width="680" seamless="seamless" allowfullscreen>');
  $iframe.attr('src', $(this).data('video-url') );
  $('.co-video-player').empty().append( $iframe );
  $('html,body').animate({
    scrollTop: $('.content').offset().top
  }, 1000);
});

console.log( $('.co-reminder-header-title') );
var $interval = window.setInterval( function() {
  if( $( '.co-reminder-header-title' ).length > 0 ) {
    window.clearInterval( $interval ); 
  }  
}, 50);

function setScrimTextMargin() {
  $('.ec-scrim-text').each(function() {
    $(this).css('margin-top', '-' + ( $(this).height() / 2 ) + 'px' );
  });
}

$(window).resize( setScrimTextMargin );

setScrimTextMargin();

//var firstTimeModal = $('[data-remodal-id="modal"]').remodal();

// if the user is arriving for the first time
//if( Cookies.get('firstTime') != 'true' ) {
//  firstTimeModal.open();
//  Cookies.set('firstTime', 'true');
// }

Stylesheet CSS

body {
  background: #efefef; }

a {
  color: #64b4f2; }
  a:hover {
    color: white; }

.row {
  max-width: 90rem; }

table {
  border: none; }

table tr th,
table tr td {
  padding: 5px; }

#fixed-page-header {
  display: none; }

.content {
  display: none; }

.login_wrapper {
  padding: 4em 2em;
  min-height: 90vh;
  background-image: url("https://thechurchco-production.s3.amazonaws.com/uploads/sites/570/2018/07/VFC-SIGNUP-BG.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center; }

img#overlay-icon {
  max-width: 30%;
  margin-bottom: 1em; }

.login_wrapper h2 {
  color: white;
  font-weight: 700;
  margin-bottom: 1em;
  font-size: 22px; }

.login-links_wrapper {
  text-align: center; }

.login-links_wrapper .button {
  font-family: 'bebas';
  text-transform: uppercase; }

.login-links_wrapper #signup {
  background-color: #00adef;
  margin-bottom: 1em; 
  border-radius: 30px;
}

.login-links_wrapper #signup:hover {
  background-color: #242424; }

.login-links_wrapper #login {
  font-family: 'bebas';
  text-transform: uppercase;
  color: white;
  font-weight: 300;
  font-size: 12px; }

.login-links_wrapper #login:hover {
  color: #eee; }

.co-tab-notification:before {
  top: 4px;
  left: 2px; }

.more-widgets {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  color: #9c9c9f; }
  .more-widgets:hover {
    color: #9c9c9f;
    background-color: #f9f9f9; }
    .more-widgets:hover ul {
      display: block; }
  .more-widgets ul {
    display: none;
    position: absolute;
    bottom: 36px;
    right: 0px;
    z-index: 1000;
    background: #f9f9f9;
    list-style: none;
    margin: 0; }
    .more-widgets ul li {
      padding: 7px 13px;
      color: #9c9c9f;
      cursor: pointer; }
      .more-widgets ul li:hover {
        background: #f9f9f9; }

.full-width {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: none; }

.no-padding-right {
  padding-right: 0px; }

.no-padding-left {
  padding-left: 0px; }

/* TOP BAR */
header {
    background-color: #242424;
}

.navigation .top-bar {
  margin: 0px; }

.top-bar-section ul {
  margin-top: 7px; }

.top-bar-section ul li {
  background: none; }

.top-bar-section li:not(.has-form) a:not(.button) {
  line-height: 26px;
  padding: 0px;
  margin: 5px 20px 5px 0;
  color: white !important; }

.top-bar-section li.link:not(.has-form) a:not(.button):hover, .top-bar-section ul li.link:hover a, .top-bar-section ul li.link:hover {
  background: none !important;
  color: #00adef !important; }

.top-bar input, .top-bar .button, .top-bar button {
  top: 1px; }

.top-bar-section ul li > a.button {
  background: #00adef;
  color: #ffffff; }
  .top-bar-section ul li > a.button:hover {
    background: #242424; }

.nav-margin {
  margin: 20px 0px; }

.top-bar .name h1 {
  font-size: 22px;
  color: #000000; }

.top-bar .name img {
  max-height: 50px; }

.box {
  border-radius: 2px; }

.transparent-box {
  border: 1px solid #a5a6aa; }

.top-bar-section ul li.colored-box {
  background-color: #64b4f2; }

.top-bar-section li.colored-box:not(.has-form) a:not(.button) {
  color: #000000; }

.top-bar-section ul li > a {
  font-size: 12px;
  font-family: bebas, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.10em; }

.top-bar-section ul.co-account-dropdown li:not(.has-form) a:not(.button) {
  padding: 0 15px;
  line-height: 45px;
  background: rgba(0, 0, 0, 0);
  color: white !important; }

#give {
  color: #00adef !important; }

#give:hover {
  color: white !important; }

@media (min-width: 768px) {
  .top-bar-section ul li > a {
    font-size: 14px;
    letter-spacing: 0.14285714285714em; }

  .login_wrapper {
    padding: 6em 0; }

  img#overlay-icon {
    max-width: 10%; 
    padding-top: 175px;
    
  }

  .login_wrapper h2 {
    font-size: 1.6875rem;
    margin: 0 auto 1em; }

  .login-links_wrapper #login {
    font-size: 14px; } }
.contain-to-grid .top-bar {
  max-width: initial; }

.prayer-tagline {
  color: #000000;
  padding: 10px 0; }

.prayer-text {
  line-height: 57px; }

.co-prayer-button {
  display: inline; }

.prayer-box {
  color: #000; }

.co-live-prayer {
  border-radius: 30px;
  background-color: #00a8da;
  border: none;
  color: #ffffff;
  padding: 8px 17px; }
  .co-live-prayer:hover {
    background-color: black;
    color: white; }

.prayer-button {
  margin-left: 10px; }

.co-avatar, .co-account-avatar img {
  border-radius: 100%; }

.top-bar.expanded .toggle-topbar a {
  color: #000000; }

.top-bar .toggle-topbar.menu-icon a span::after, .top-bar .toggle-topbar.menu-icon a:hover span::after {
  box-shadow: 0 0px 0 1px #fff, 0 7px 0 1px #fff, 0 14px 0 1px #fff; }

.top-bar .toggle-topbar.menu-icon a {
  color: #fff; }

/* Account Signed in*/
.co-account {
  margin-top: 0px; }

.co-account .co-avatar {
  float: none;
  margin-right: 4px; }

.top-bar-section .co-account-dropdown {
  content: ' ';
  margin-top: 10px;
  padding: 5px 0;
  border-radius: 2px;
  z-index: 10; }

.co-avatar, .co-account-avatar img {
  border-radius: 100%; }

.dropdown:before, .co-account-dropdown:before {
  content: ' ';
  height: 0;
  position: absolute;
  width: 0;
  border: 10px solid rgba(0, 0, 0, 0);
  border-bottom-color: #313234;
  top: -20px;
  left: 50%;
  margin-left: -5px; }

.top-bar-section ul.co-account-dropdown li:not(.has-form) {
  height: auto; }

.top-bar-section ul.co-account-dropdown li:not(.has-form) a:not(.button) {
  padding: 0 15px;
  line-height: 45px;
  background: rgba(0, 0, 0, 0); }

.co-modal-settings input[type=text] {
  width: 62%; }

.co-modal-settings .co-account-avatar {
  position: absolute;
  width: 210px;
  top: 125px;
  text-align: center; }

li.co-private-chat-tab img, li.co-private-chat-tab .co-default-avatar {
  display: none; }

/* Account Signed in*/
.content {
  background-color: #efefef;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover; }

.wrapper {
  padding-bottom: 66%; }

.wrapper-positioning {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }

.full-height {
  height: 100%;
  position: absolute;
  right: 0; }

.relative {
  position: relative; }

.co-button {
  background-color: #00adef;
  font-family: 'bebas';
  text-transform: uppercase; }

button:hover, button:focus, .button:hover, .button:focus, .co-button:hover, .co-button:focus {
  background-color: #00adef; }

.co-tabs-content {
  padding-bottom: 5px;
  height: 100%;
  padding-bottom: 44px; }

.co-component-header {
  color: #a5a6aa;
  padding: 0px;
  border-bottom: 1px solid #F1F1F3; }

.co-schedule-content .co-scrollable {
  padding-left: 10px;
  padding-right: 10px; }

.co-component-header {
  padding-left: 10px;
  padding-right: 10px; }

.co-widgets {
  background-color: #fff;
  height: 100%;
  position: relative; }

.co-widget-tabs {
  background-color: #f9f9f9;
  position: absolute;
  bottom: 0;
  width: 100%;
  /* height: 36px; */
  height: 44px;
  overflow: hidden;
  color: #878787; }
  .co-widget-tabs.has-more-widgets {
    padding-right: 36px; }

.co-widget-tabs li {
  color: #a5a6aa;
  display: inline-block;
  font-size: 12px;
  padding: 12px 8px;
  text-transform: uppercase;
  font-family: bebas, sans-serif;
  font-weight: bold;
  letter-spacing: 0.05em; }

.co-widget-tabs li.co-active {
  background-color: #f9f9f9;
  color: black; }

.co-component-footer {
  border-top: 1px solid #f1f1f3;
  padding: 5px;
  background-color: #fff; }

.co-tabs-content {
  background-color: #fff; }

.co-slide-wrapper {
  padding-bottom: 16%; }

.co-slide-manager table td {
  color: black; }

.co-slide-manager > a {
  color: black; }

.co-chat-list {
  padding-top: 0px; }

.event-details {
  margin-top: 20px; }

.event-details h2 {
  font-size: 1.5rem;
  color: #000000;
  margin-bottom: 0px; }

.event-details h2 small {
  font-size: 85%;
  margin-left: 10px;
  color: #000000; }

.event-details p {
  color: #000000;
  margin-bottom: 10px; }

.co-next-service-time {
  margin-top: -6px;
  margin-bottom: 16px;
  color: #FFF; }

.share {
  margin-bottom: 20px; }

.share h6, .share .co-share {
  display: inline-block; }

.share h6 {
  font-size: 14px; }

.share .co-share {
  vertical-align: middle;
  margin-left: 5px; }

.share .co-share .co-share-button {
  font-size: 1.5rem; }

.share h6, .share .co-share .co-share-button {
  color: #000000; }

.co-share-google-plus {
  display: none; }

footer.row {
  padding-top: 10px; }

footer ul li a, footer p {
  font-size: 12px;
  color: #686869;
  text-decoration: none; }

footer ul li a:hover {
  color: #757576; }

/* Componet */
.co-component-content {
  padding-top: 45px; }

/* Schedule */
.co-event-time {
  max-width: 75px; }

.co-event-day-header {
  text-transform: capitalize;
  background: #efefef;
  padding: 6px 8px; }

.co-event-day-header h3 {
  font-size: 1rem;
  display: inline-block;
  margin: 0;
  color: #000; }

.co-event-day-date {
  float: right; }

a.co-event-reminder-button,
a.co-event-invite-button {
  color: #00adef; }

/* Schedule */
/*Pop Over*/
.co-popover.co-active {
  display: block; }

.co-popover {
  margin: 0px;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2); }

/*Pop Over*/
/* Countdown Clock */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="color"],
textarea {
  -webkit-box-shadow: inset 0 2px 2px #F1F1F3;
  -moz-box-shadow: inset 0 2px 2px #f1f1f3;
  box-shadow: inset 0 2px 2px #F1F1F3;
  border: 1px solid #E1E1E3;
  border-radius: 2px;
  transition: none; }

input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="color"]:focus,
textarea:focus {
  box-shadow: none;
  border-color: #000000;
  background: #fff; }

/* Countdown Clock */
.co-reminder-header__wrapper {
  background-color: #efefef; }

.co-reminder-header {
  color: black; }
  .co-reminder-header > div {
    padding: 16px 0px;
    text-align: center; }
  .co-reminder-header button {
    display: inline-block;
    background-color: transparent;
    color: black;
    border: 1px solid black;
    font-size: 1rem;
    line-height: 36px;
    padding: 0 1.25rem;
    margin: 10px 0px 0px 0px;
    vertical-align: top; }
    .co-reminder-header button:hover {
      background-color: #000000;
      border-color: #000000; }
    .co-reminder-header button i {
      margin-right: 8px; }

.co-header-countdown-time {
  display: inline-block;
  margin: 0px 14px 0px 16px; }

.co-reminder-header-title {
  display: inline-block;
  vertical-align: top;
  line-height: 57px; }

.co-countdown-unit {
  display: inline-block;
  padding: 8px 10px 0;
  text-align: center;
  font-weight: 100; }

.co-reminder-header button:hover {
  color: white;
  border: none; }

.co-countdown-time div:first-child {
  border-left: 1px solid #494a4e; }

.co-countdown-time div {
  border-right: 1px solid #494a4e; }

.co-countdown-digit {
  font-size: 1.8rem;
  line-height: 0.8;
  display: block; }

.co-countdown-digit-label {
  font-size: 12px;
  color: #747474; }

.co-countdown {
  color: white;
  background-color: #1d1d1f;
  text-align: center;
  position: relative; }
  .co-countdown .co-countdown-time div:first-child {
    border-left: none; }
  .co-countdown .co-countdown-time div:last-child {
    border-right: none; }
  .co-countdown .co-countdown-time {
    height: 100%; }
  .co-countdown .co-countdown-wrapper {
    padding-bottom: 29.5%;
    background-color: #313234;
    color: #fff;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d; }
  .co-countdown .co-countdown-wrapper > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }
  .co-countdown .co-countdown-unit {
    position: relative;
    top: 50%;
    margin-top: -28.5px; }
  .co-countdown .co-countdown-information {
    display: none; }

.co-countdown-header {
  text-align: center;
  background: #313234; }

.co-countdown-header > div {
  padding: 20px 0 12px; }

.co-countdown-header h2 {
  color: #FFFEFE;
  font-size: 24px;
  display: inline;
  font-weight: 200;
  vertical-align: top;
  line-height: 60px;
  margin-right: 30px; }

.co-countdown-header .co-countdown-unit {
  -webkit-transform: initial;
  transform: initial;
  top: initial;
  color: white; }

.co-countdown-header {
  background-color: #1d1d1f; }

/* Countdown Clock */
/* Chat */
.co-chat-list.co-component-content {
  padding-top: 0px; }

input.co-nickname-box-input {
  border-radius: 2px;
  width: 50%;
  display: inline;
  margin: 0;
  height: 32px;
  border: none; }

.co-chat-overlay .co-button {
  height: 32px;
  margin: 0;
  line-height: 0; }

.co-chat-box {
  box-shadow: none; }

.co-chat-box-stretcher {
  border-radius: 2px;
  padding-top: 0px; }
  .co-chat-box-stretcher > div {
    margin-left: 42px;
    padding-bottom: 0px;
    border: 1px solid #f1f1f3; }

.co-chat-container {
  padding-bottom: 50px; }

.co-chat-list {
  padding: 0px; }

.co-quality-switch {
  margin-top: 10px;
  text-transform: capitalize; }
  .co-quality-switch a {
    color: #90929C; }
  .co-quality-switch i {
    margin-right: 6px; }

footer .powered-by {
  float: right;
  text-decoration: none;
  color: #686869;
  font-size: 12px;
  position: relative; }

footer .powered-by img {
  margin-left: 5px;
  position: relative; }

/* Platform/Framework Resets */
/* - - - - - - - - - - - - - - - - - - - - - - - - - */
.co-account-dropdown li:first-child {
  padding-top: 0; }

.top-bar-section li:hover a, .top-bar-section li:not(.has-form) a:not(.button):hover {
  background-color: none; }

.co-account span {
  color: white; }
  .co-account span:hover {
    color: #00adef; }

.co-account ul li a {
  color: #fff; }

.co-account ul li:hover:not(.has-form) > a {
  color: #000; }

.co-popover input {
  margin-bottom: 0; }

.co-flyout table {
  background: transparent; }

.co-flyout {
  background: white;
  color: black; }

.co-volunteer-settings .co-flyout a {
  color: black; }

.co-volunteer-chat .co-message-main {
  background: white; }

.co-user-stat-description {
  color: black; }

.co-notification-none {
  color: black; }

.co-notifications {
  top: 65px; }

.co-volunteer-bar ~ .co-notifications {
  top: 105px; }

input + .co-error {
  margin-top: -15px;
  margin-bottom: 10px; }

.ec-section {
  padding: 4em 0; }

.ec-section--has-title {
  padding: 2em 0 4em; }

.ec-section--light {
  background-color: #efefef; }

.ec-section-title {
  margin-top: 0;
  margin-bottom: 24px;
  font-weight: 100;
  margin-bottom: 1em;
  font-size: 24px; }

.playlist {
  position: relative;
  margin-bottom: 1.875rem; }
  .playlist:before {
    content: '';
    height: 63px;
    background: url(https://chop-v3-media.s3.amazonaws.com/medias/images/000/046/078/original/play-button.png?1458873674);
    width: 63px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -32px;
    margin-top: -32px;
    display: none; }
  .playlist:after {
    content: ' ';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 1;
    opacity: 0.5;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, black 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, black 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); }
  .playlist > .playlist-info {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    z-index: 10;
    padding: 20px; }
    .playlist > .playlist-info > .playlist-title {
      color: white;
      font-size: 24px;
      margin: 0; }
    .playlist > .playlist-info > .playlist-subtitle {
      margin: 0; }

.ec-playlists .ec-scrim {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 999; }
.ec-playlists .ec-scrim-text {
  position: absolute;
  color: white;
  font-family: bebas;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  top: 50%;
  padding-left: 30px;
  padding-right: 30px;
  text-align: center; }
.ec-playlists .playlist:hover {
  cursor: pointer; }
.ec-playlists .playlist:hover:before {
  display: inline-block; }
.ec-playlists.ec-playlists--live .ec-scrim {
  display: block; }
.ec-playlists.ec-playlists--live .playlist:hover {
  cursor: auto; }
.ec-playlists.ec-playlists--live .playlist:hover:before {
  display: none; }

.co-share-button i {
  font-size: 2em;
  margin-right: 10px; }

/* Remodal */
.remodal-overlay {
  background-color: rgba(0, 0, 0, 0.5); }

.remodal .close-button {
  float: right; }

.remodal .close-button:hover {
  cursor: pointer; }

.remodal-wrapper .remodal {
  max-width: 100%;
  width: 500px;
  color: #6c6c6c; }

.remodal .orbit-bullets {
  display: block; }

.remodal .orbit-bullets li {
  margin-right: 10px; }

.remodal .orbit-bullets li.active {
  background: black; }

.reveal-modal .close-reveal-modal {
  font-size: 2.5rem;
  line-height: 1;
  position: absolute;
  top: 10%;
  right: 50%;
  color: #FFFFFF;
  font-weight: bold;
  cursor: pointer;
  width: 491px;
  transform: translate(150%, -50%); }

.reveal-modal.medium.open {
  width: 500px;
  max-width: 100% !important;
  left: 0px;
  right: 0%;
  margin: 0 auto;
  background-color: transparent;
  border: none;
  box-shadow: none; }

/* Media Queries */
/* - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Mobile */
@media screen and (max-width: 40em) {
  .co-account .co-account-dropdown {
    width: 100%; }

  .dropdown:before, .co-account-dropdown:before {
    left: 10%; }

  .contain-to-grid .top-bar.expanded {
    overflow: visible; }

  .top-bar-section ul li.avatar img {
    display: none; }

  .content .medium-8.no-padding-right {
    padding-right: 0.9375rem; }

  .co-reminder-header-title {
    display: block;
    line-height: initial; }

  .co-header-countdown-time {
    display: block;
    margin: 16px 14px 16px 16px; }

  .co-reminder-header button {
    display: block;
    margin: 0 auto; }

  .top-bar .name {
    height: 30px;
    margin: 0;
    font-size: 20px; }

  img {
    max-width: 90%; } }
@media only screen and (max-width: 30em) {
  .reveal-modal.medium.open {
    min-height: 100vh;
    top: 15%;
    left: -35% !important; } }
/* Mobile Tablet */
@media screen and (max-width: 64em) {
  .redactor_toolbar.co-component-header {
    display: none; }

  .redactor_box iframe {
    padding-top: 0px; }

  .co-close-private-chat a {
    font-size: 0px; }
    .co-close-private-chat a span {
      font-size: 30px;
      line-height: 30px; }

  .widget-container {
    padding-left: 15px !important;
    position: relative !important; }

  .co-widget-tabs {
    position: relative; }

  .co-schedule-content {
    overflow: scroll; }

  .co-tabs-content {
    padding-bottom: 0; }

  .co-tabs-content > dd.co-active {
    max-height: 400px; }

  .co-bible, .co-notes {
    height: 400px; } }
/* Large */
@media screen and (min-width: 64em) and (max-width: 74.69em) {
  .redactor_toolbar :nth-child(14), .redactor_toolbar :nth-child(15) {
    display: none; } }
.co-notification-list .co-flyout tr td {
  color: black; }

.co-volunteer-info .co-flyout a {
  color: #00adef; }

p.co-message-content a {
  color: #00adef; }
  
  
  .co-toggle-button .co-toggle-handle {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #2595ed;
    font-size: 1px;
    line-height: 20px;
    text-decoration: none;
    color: #D8DAD9;
    text-align: center;
    transition: all 0.4s cubic-bezi }

Template HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{ organization.name }}</title>
  <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
  <meta name='title' content='{{ organization.meta_title }}'>
  <meta name='description' content='{{ organization.meta_description }}'>
  <meta name='keywords' content='{{ organization.meta_keywords }}'>
  <!-- Social Sharing -->
  <meta name='og:title' content='{{ organization.meta_title }}'>
  <meta name='og:description' content='{{ organization.meta_description }}'>
  <meta name='og:url' content='{{ organization.platform_url }}'>
  <meta name='og:image' content='{{ organization.logo_url }}'>
  <!-- Social Sharing -->
  <link href='{{ organization.platform_url }}'>
  <link href='{{ organization.favicon }}' rel='icon' type='image/png'>
  
   {{ platform_head }}
  {{ foundation_css }}
  
  <link rel="stylesheet" href="https://use.typekit.net/unn8quw.css">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.7/remodal.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.7/remodal-default-theme.min.css" rel="stylesheet">

  <style type="text/css">
    {% include 'stylesheet' %}
  </style>

</head>
<body>
  <header class="row full-width">
    <div class="medium-12 columns nav-margin">
      <div class="navigation contain-to-grid">
        <nav class="top-bar" data-topbar role="navigation">
          <ul class="title-area">
            <li class="name">
              <h1 class="brand"><a href="{{ organization.website_url }}">{{ organization.brand }}</a></h1>
            </li>
             <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
          </ul>

          <section class="top-bar-section">
            <!-- Right Nav Section -->
            <ul class="right top-bar-actions">
             
              {% for link in organization.header_links %}
                <li class="link">
                  {{ link }}
                </li>
              {% endfor %}
               {% if organization.give_link %}
                <li class="link">
                  <a id="give" href="{{ organization.give_link }}" >{{ 'give' | translate }}</a>
                </li>
              {% endif %}
              <li class="link">
                {{ component.sign_in }}
              </li>
              <li>
                {{ component.sign_up }}
              </li>
              <li class="avatar">{{ component.account }}</li>
            </ul>
          </section>
        </nav>
      </div>
    </div>
  </header>


    {{ component.reminder_header }}

  
  <div class="content">
    <div class="row prayer-tagline">
      <div class="medium-12 columns text-right" role="content">
      <a style="color:#00adef" href="https://victoryfamily.church/technical-difficulties/" target="_blank">Technical issues? Contact us here.</a>
      </div>
    </div>
    <div class="row full-width relative">
      <div class="medium-8 columns no-padding-right" role="content">
        {{ component.video }}
        {{ component.slides }}
      </div>
      <div class="medium-4 columns full-height no-padding-left widget-container">
        {% widgets %}
          {% content_for_tabs %}
            {% if event.chat_enabled? %}
              {% tab_content chat %} {{ component.chat }} {% endtab_content %}
            {% endif %}
            {% if event.notes_enabled? %}
              {% tab_content notes %} {{ component.notes }} {% endtab_content %}
            {% endif %}
            {% tab_content schedule %} {{ component.schedule }} {% endtab_content %}
            {% if settings.bible_tab == '1' %}
              {% tab_content bible %} {{ component.bible }} {% endtab_content %}
            {% endif %}
            {% if event.custom_tab_enabled? %}
              {% tab_content custom-tab %} {{ component.custom_tab }} {% endtab_content %}
            {% endif %}
          {% endcontent_for_tabs %}
          {% tabs %}
            {% if event.chat_enabled? %}
              {% tab chat  %} {{ 'chat' | translate }} {% endtab %}
            {% endif %}
            {% if event.notes_enabled? %}
              {% tab notes %} {{ 'notes' | translate }} {% endtab %}
            {% endif %}
            {% tab schedule default %} {{ 'schedule' | translate }} {% endtab %}
            {% if settings.bible_tab == '1' %}
              {% tab bible %} {{ 'bible' | translate }} {% endtab %}
            {% endif %}
            {% if event.custom_tab_enabled? %}
              {% tab custom-tab %} {{ organization.custom_tab_title }} {% endtab %}
            {% endif %}
          {% endtabs %}
          <a class="more-widgets" href="#" data-behavior="tabs">
            <i class="co-icon-ellipsis-h"></i>
          </a>
        {% endwidgets %}

      </div>
    </div>
    <div class="row full-width event-details">
      <div class="medium-7 columns">
        <div>
          <h2>{{ event.title }} //<small>{{ event.speaker }}</small></h2>
          {{ component.next_service_time }}
        </div>
        <div class="share">
          {% if settings.show_social == '1' %}
            <h6>{{ 'share' | translate }}</h6>
            {{ component.share }}
            {% endif %}
          {{ component.quality_switch }}
        </div>
      </div>

      <div class="medium-5 columns prayer-text text-right hide-for-small-only" role="content">
        <div class="prayer-box" data-behavior="co-prayer-box">
          <span class="prayer-button">{{ component.prayer_button }}</span>
        </div>
      </div>

    </div>
  </div>
  
  <div class="login_wrapper">
    <img src="https://thechurchco-production.s3.amazonaws.com/uploads/sites/570/2018/06/VFC_Icon-Inverted-e1529774054516.png" id="overlay-icon"/>
    <h2>ACCESS FULL WORSHIP EXPERIENCES!</h2>
    <div class="login-links_wrapper">
      <a class="co-sign-up-button button" data-behavior="sign-up" href="#" id="signup">Sign up now</a><br>
      <a class="co-sign-in-button" data-behavior="log-in" href="#" id="login">Already have an account? Sign In</a>
    </div>
  </div>
  <footer class="row full-width">
    <div class="medium-7 small-12 columns">
      <ul class="inline-list left">
        {% for link in organization.footer_links %}
          <li>{{ link }}</li>
        {% endfor %}
        {% if organization.facebook_link %}
          <li><a href="{{ organization.facebook_link }}" target="blank">{{ 'facebook' | translate }}</a></li>
        {% endif %}
        {% if organization.twitter_link %}
          <li><a href="{{ organization.twitter_link }}" target="blank">{{ 'twitter' | translate }}</a></li>
        {% endif %}
        <li class="copyright">{% include 'copyright' %}</li>
      </ul>
    </div>
    <div class="medium-5 small-12 columns text-right">
      <a class="powered-by" href="http://churchonlineplatform.com" target="_blank">
        Powered by
        <img alt="Church Online Platform" height="25" src="{{ 'church_online_platform_logo_horizontal.png' | asset_url }}" width="173">
      </a>
    </div>
  </footer>

{{ platform_footer }}
{{ foundation_js }}

<script type="text/javascript">
    {% include 'javascript' %}
  </script>
  {{ organization.google_analytics_code }}
  
</body>
</html>