/*
Theme Name: Christian Motivation
Author: @bamacaerick
Author URI: https://triworking.com
Version: 4.0.1
Requires PHP: > 7.4
*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

.skip-link {
  left: -9999rem;
  top: 2.5rem;
  z-index: 999999999;
  text-decoration: underline;
}

.skip-link:focus {
  display: block;
  left: 6px;
  top: 7px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  line-height: normal;
  padding: 15px 23px 14px;
  z-index: 100000;
  right: auto;
}

.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active) {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.container {
  max-width: 540px;
}

.section-separator {
  margin-top: 1rem;
  margin-bottom: 1rem;
  background-color: #bebebe;
  height: 4px !important;
}

html,
body,
.container {
  min-height: 100%;
}

body {
  padding-bottom: 50px;
}

.video-wrapper {
  height: 90vh;
}
.video-component {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 90vh;
  overflow: hidden;
  background-color: #000000;
}
.video-component::after {
  content: "";
  display: block;
  padding-top: 177.78%;
}
.video-component-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-audiotoggle-btn {
  position: absolute;
  top: 90px;
  left: 10px;
  border: 0;
  border-radius: 5px;
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  width: auto;
  display: block;
  padding: 7px 10px 7px 40px;
  background: rgba(0, 0, 0, 0.5) url("./assets/img/icons/speaker-off.svg") 10px center no-repeat;
  background-size: 20px;
  z-index: 9;
}
.video-audiotoggle-btn.unmuted {
  background-image: url("./assets/img/icons/speaker-on.svg");
}
.video_music {
  position: absolute;
  bottom: 45px;
  z-index: 9;
}
.video_music-item {
  background: transparent url("./assets/img/icons/music.svg") left center no-repeat;
  text-shadow: 1px 1px 1px #000000;
  background-size: auto 20px;
  display: inline-block;
  color: #ffffff;
  padding-left: 30px;
  padding-bottom: 5px;
}

.comments-total {
  color: #000;
  font-weight: bold;
}
.comments-item_thumb-wrapper {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}
.comments-item_thumb-img {
  width: 50px;
  height: 50px;
  -o-object-fit: cover;
     object-fit: cover;
}
.comments-item_body-user {
  color: #525251;
  font-size: 13px;
  font-weight: bold;
}
.comments-item_body-comment {
  font-size: 15px;
}
.comments-item_body-date-reply {
  color: #747373;
  font-size: 13px;
  font-weight: bold;
}
.comments-item_body-reply-btn {
  border: 0;
  background: none;
  color: #747373;
  font-size: 13px;
  font-weight: bold;
}
.comments-item_likes-icon {
  border: 0;
  background: none;
  color: #747373;
  font-size: 13px;
  font-weight: bold;
  width: 50px;
  display: block;
  padding: 0;
}
.comments-item_likes-icon span {
  background: transparent url("./assets/img/icons/heart.svg") center top no-repeat;
  display: block;
  padding-top: 18px;
}

.header {
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
  right: 0;
  height: 70px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9;
  padding: 10px 0;
}
.header-logo {
  height: 50px;
  width: auto;
}

.videocard-thumbnail {
  display: block;
  width: 100%;
  height: 200px;
}
.videocard-thumbnail-img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.videocard-data {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 15px;
  right: 15px;
}
.videocard-data_profile-avatar {
  width: 15px;
  height: 15px;
  overflow: hidden;
  border-radius: 50%;
  display: block;
}
.videocard-data_profile-avatar-img {
  display: block;
  width: 15px;
  height: 15px;
  -o-object-fit: cover;
     object-fit: cover;
}
.videocard-data_profile-user {
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 1px #000000;
}
.videocard-data-likes {
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 1px #000000;
  padding-left: 15px;
  background: transparent url("./assets/img/icons/heart-white.svg") left center no-repeat;
  background-size: 12px;
}

.sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 60px;
  display: flex;
  padding: 0;
  overflow: hidden;
  flex-direction: column;
  padding-bottom: 30px;
  z-index: 9;
}
.sidebar-share-modal {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  position: fixed;
  width: 300px;
  height: 230px;
  padding: 30px;
  border-radius: 12px;
  background-color: #ffffff;
  z-index: 9999;
  display: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.sidebar-share-modal.active {
  display: block;
}
.sidebar-share-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: transparent url("./assets/img/icons/close.svg") center center no-repeat;
  background-size: contain;
  border-radius: 50%;
  border-color: #747373;
  width: 30px;
  height: 30px;
}
.sidebar-share-modal-content {
  margin-top: 25px;
}
.sidebar-content {
  margin-top: auto;
  text-align: center;
}
.sidebar-app {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  margin: 0 auto 15px;
}
.sidebar-app.rotate {
  animation: rotating 2s linear infinite;
}
.sidebar-app-img {
  display: block;
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
}
.sidebar-likes-btn {
  border: 0;
  background: none;
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  width: 50px;
  display: block;
  padding: 0;
  margin: 0 auto 15px;
  text-shadow: 1px 1px 1px #000000;
}
.sidebar-likes-btn span {
  background: transparent url("./assets/img/icons/heart-big.svg") center top no-repeat;
  background-size: 25px;
  display: block;
  padding-top: 25px;
  text-shadow: 1px 1px 1px #000000;
}
.sidebar-comments-btn {
  border: 0;
  background: none;
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  width: 50px;
  display: block;
  padding: 0;
  margin: 0 auto 15px;
}
.sidebar-comments-btn span {
  background: transparent url("./assets/img/icons/comments.svg") center top no-repeat;
  background-size: 25px;
  display: block;
  padding-top: 25px;
  text-shadow: 1px 1px 1px #000000;
}
.sidebar-share-btn {
  border: 0;
  background: none;
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  width: 50px;
  display: block;
  padding: 0;
  margin: 0 auto 15px;
}
.sidebar-share-btn span {
  background: transparent url("./assets/img/icons/share.svg") center top no-repeat;
  background-size: 25px;
  display: block;
  padding-top: 20px;
  text-shadow: 1px 1px 1px #000000;
}
.sidebar-account {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  margin: 0 auto 25px;
  border: 2px solid #ffffff;
}
.sidebar-account-img {
  display: block;
  width: 36px;
  height: 36px;
  -o-object-fit: contain;
     object-fit: contain;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.social-icon {
  padding-left: 30px;
  background-size: 20px auto;
  background-repeat: no-repeat;
  background-position: left center;
  display: inline-block;
  line-height: 30px;
  text-decoration: none;
  color: #747373;
}
.social-icon.whatsapp {
  background-image: url("./assets/img/icons/whatsapp.svg");
}
.social-icon.sms {
  background-image: url("./assets/img/icons/sms.svg");
}
.social-icon.email {
  background-image: url("./assets/img/icons/email.svg");
}
.social-icon.copylink {
  background-image: url("./assets/img/icons/hyperlink-icon.svg");
}