/* HARMONY CUSTOM CSS */

/* Change color and hover of links in the sidebar widgets */

.sidebar_list_item_title a {
    color: var(--theme-link-color) !important;
}

.sidebar_list_item_title a:hover {
    color: var(--theme-link-color-hover) !important;
}

/* Adjust h1, h2, h3 etc. in rich text editor */

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    position: relative;
    background-color: transparent !important;
    border-radius: 0 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

.layout_core_rich_text_block > h1,
.layout_core_rich_text_block > h2,
.layout_core_rich_text_block > h3,
.layout_core_rich_text_block > h4,
.layout_core_rich_text_block > h5,
.layout_core_rich_text_block > h6,
.generic_layout_container > h1,
.generic_layout_container > h2,
.generic_layout_container > h3,
.generic_layout_container > h4,
.generic_layout_container > h5,
.generic_layout_container > h6,
.layout_content > h1,
.layout_content > h2,
.layout_content > h3,
.layout_content > h4,
.layout_content > h5,
.layout_content > h6 {
    position: relative;
    background-color: transparent !important;
    border-radius: 0 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}


h1, .h1, .generic_layout_container > h1, .layout_content > h1, .layout_core_rich_text_block > h1 {
    font-weight: 700 !important;
}

h2, .h2, .generic_layout_container > h2, .layout_content > h2, .layout_core_rich_text_block > h2 {
    font-weight: 600 !important;
}

h3, .h3, .generic_layout_container > h3, .layout_content > h3, .layout_core_rich_text_block > h3 {
    font-weight: 600 !important;
}

h4, .h4, .generic_layout_container > h4, .layout_content > h4, .layout_core_rich_text_block > h4 {
    font-weight: 500 !important;
}

h5, .h5, .generic_layout_container > h5, .layout_content > h5, .layout_core_rich_text_block > h5 {
    font-weight: 500 !important;
}

h6, .h6, .generic_layout_container > h6, .layout_content > h6, .layout_core_rich_text_block > h6 {
    font-weight: 500 !important;
}

/* Adjust p sitewide */

p {
    margin: 0 0 0.4rem 0 !important;
}

/* Set button hover background hover color */

button:hover, button:focus-visible, .coverphoto_navigation_list > li > a:hover {
    background-color: var(--theme-button-background-color-hover) !important;
    opacity: .8 !important;
    transition: all .5s ease-in-out !important;
}

/* Give all buttons the same site wide border radius */

.btn, .btn-primary {
    border-radius: var(--theme-widget-radius) !important;
}

/* Make user profile buttons match the rest of the site */

.user_cover_buttons ul > li > a {
    padding: .625rem .875rem !important;
    min-height: 2.375rem;
}

.user_cover_buttons ul > li.dropdown > a {
    padding: 0 !important;
    min-height: 2.375rem;
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-radius: 50% !important;
    align-items: center;
    justify-content: center;
	border-color: var(--theme-button-border-color) !important;
    background-color: var(--theme-button-background-color) !important;
    color: var(--theme-button-font-color) !important;
}

.user_cover_buttons ul > li.dropdown > a > .icon_option_menu:before {
    content: "\f141" !important;
}

.user_cover_buttons ul > li.dropdown > a:hover {
    opacity: .8 !important;
    transition: all .5s ease-in-out !important;
	border-color: var(--theme-button-border-color-hover) !important;
    background-color: var(--theme-button-background-color-hover) !important;
}

/* Make user/group/event profile cover/avatar buttons and dropdowns match */

.dropdown-menu, .tab_pulldown_contents > ul {
    background-color: var(--theme-list-background-color);
    max-height: 25rem;
    overflow: visible !important;
    min-width: 200px !important;
}

.profile_cover_photo_wrapper .profile_cover_btn {
    display: block !important;
}

.profile_cover_options .profile_cover_btn i,
.user_cover_change_cover .dropdown > button i,
.user_cover_main_photo .user_cover_change_cover_main .dropdown > button i,
.user_cover_main_photo .user_cover_change_cover_main .dropdown > button I,
.profile_main_photo .profile_cover_options .profile_cover_btn i {
    color: var(--theme-font-color) !important;
}

.profile_cover_options .profile_cover_btn,
.user_cover_change_cover .dropdown > button,
.user_cover_main_photo .user_cover_change_cover_main .dropdown > button,
.user_cover_main_photo .user_cover_change_cover_main .dropdown > button,
.profile_main_photo .profile_cover_options .profile_cover_btn {
    background-color: var(--theme-list-background-color) !important;
    border-radius: 50% !important;
    border-color: transparent;
    width: 40px !important;
    height: 40px !important;
}

.profile_cover_options .profile_cover_btn:hover,
.user_cover_change_cover .dropdown > button:hover,
.user_cover_main_photo .user_cover_change_cover_main .dropdown > button:hover,
.user_cover_main_photo .user_cover_change_cover_main .dropdown > button:hover,
.profile_main_photo .profile_cover_options .profile_cover_btn:hover {
    opacity: .8 !important;
    transition: all .5s ease-in-out !important;
}

.user_cover_main .dropdown-menu li {
    border-bottom-width: 1px;
}

.user_cover_main .dropdown-menu {
    min-width: 200px !important;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .1)) !important;
    border-radius: 3px !important;
    background-color: var(--theme-list-background-color) !important;
    padding: 0 !important;
    font-size: var(--theme-font-size-small) !important;
    border: 0 !important;
    color: var(--theme-font-color) !important;
    overflow: visible !important;
}

.user_cover_main .user_cover_change_cover .dropdown:hover .dropdown-menu {
    display: block;
    right: 0;
}

.user_cover_main .user_cover_change_cover_main .dropdown:hover .dropdown-menu {
    display: block;
    left: 0;
}

.user_cover_main .dropdown-menu .dropdown-item {
    color: var(--theme-font-color) !important;
    padding: 10px !important;
}

.user_cover_main .dropdown-menu .dropdown-item:before, .user_cover_main block .dropdown-menu .dropdown-item > i:before {
    color: var(--theme-font-color-light) !important;
}

.user_cover_main ul.profile_options_pulldown {
    font-size: var(--theme-font-size-small) !important;
}

.user_cover_main ul.profile_options_pulldown > li:hover a, .dropdown-item:focus,  .dropdown-item:active, .dropdown-item:hover {
    background-color: var(--theme-list-background-color-alt) !important;
    text-decoration: none !important;
}

.user_cover_main .user_cover_change_cover .dropdown-menu:before {
    border-color: transparent;
    border-bottom-color: var(--theme-list-background-color) !important;
    border-style: solid;
    border-width: 10px;
    content: "";
    height: 0;
    right: 8px;
    position: absolute;
    top: -19px;
    width: 0;
    z-index: 9999;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .1)) !important;
}

.user_cover_main .user_cover_change_cover_main .dropdown-menu:before {
    border-color: transparent;
    border-bottom-color: var(--theme-list-background-color) !important;
    border-style: solid;
    border-width: 10px;
    content: "";
    height: 0;
    left: 8px;
    position: absolute;
    top: -19px;
    width: 0;
    z-index: 9999;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .1)) !important;
}

/* Adjust ol and ul lists to match in text editors */

.layout_core_rich_text_block ul, .layout_core_rich_text_block ol, .rich_content_body ul, .rich_content_body ol {
    padding: 0 0 0 0 !important;
    margin: 0 0 10px 1.875rem !important;
}

/* Adjust main logo */

.layout_core_menu_logo img {
    padding: 0 0 0 0 !important;
    max-width: 260px !important;
    height: auto;
}

/* Make blog main image fit fully */

.blog_view_photo img {
    object-fit: cover !important;
}

/* Make photo thumbs all round in sidebar widgets */

.sidebar_list_item_thumb .bg_item_photo {
    border-radius: 50% !important;
}

/* Adjust size of emoticons */

img.emoticon_img {
    width: 20px !important;
    height: 20px !important;
}

/* Change break point of main and burger menus */

/*@media (max-width: 1200px) {
.harmony_main_menu .mobile_navigation {
        display: block !important;
        padding-top: 0.3125rem;
    }
}

@media (max-width: 1200px) {
.harmony_main_menu .harmony_main_menu_nav {
        display: none !important;
    }
}

@media (max-width: 1200px) {
.harmony_main_menu {
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
    }
}*/

/* Main homepage and pages titles CSS */

.main-home-title-blue-one {
    text-align: center !important;
    font-size: 35px !important;
    color: #58B138 !important;
    font-weight: 300 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
}

.main-home-title-white-one {
    text-align: center !important;
    font-size: 35px !important;
    color: #fff !important;
    font-weight: 300 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
}

.main-home-title-gray-one {
    text-align: center !important;
    font-size: 35px !important;
    color: #5a5a5a !important;
    font-weight: 300 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
}

.dark_mode .main-home-title-gray-one {
    color: #ffffff !important;
}

.second-home-subtitle-blue-one {
    text-align: center !important;
    font-size: 25px !important;
    color: #58B138 !important;
    font-weight: 300 !important;
    font-style: italic !important;
    line-height: 1 !important;
    padding: 5px !important;
    margin: 0 !important;
    text-transform: none !important;
}

.second-home-subtitle-white-one {
    text-align: center !important;
    font-size: 25px !important;
    color: #5a5a5a !important;
    font-weight: 300 !important;
    font-style: italic !important;
    line-height: 1 !important;
    padding: 5px !important;
    margin: 0 !important;
    text-transform: none !important;
}

.second-home-subtitle-gray-one {
    text-align: center !important;
    font-size: 25px !important;
    color: #5a5a5a !important;
    font-weight: 300 !important;
    font-style: italic !important;
    line-height: 1 !important;
    padding: 5px !important;
    margin: 0 !important;
    text-transform: none !important;
}

.dark_mode .second-home-subtitle-gray-one {
    color: #ffffff !important;
}

@media only screen and (max-width: 767px) { .main-home-title-blue-one, .main-home-title-white-one, .main-home-title-gray-one { font-size: 22px !important; } }

@media only screen and (max-width: 767px) { .second-home-subtitle-blue-one, .second-home-subtitle-white-one, .second-home-subtitle-gray-one { font-size: 20px !important; } }

/* Custom page paragraph design */

.custom-page-h2 {
    background-color: transparent !important;
    border-radius: 0 !important;
    font-family: var(--theme-heading-font-family);
    font-size: var(--theme-headline-size-medium);
    text-transform: none !important;
    line-height: 1.2 !important;
	margin: -.9375rem -.9375rem 0 !important;
    padding: .9375rem !important;
    position: relative;
    font-weight: 600 !important;
}

.custom-page-h3 {
    background-color: transparent !important;
    border-radius: 0 !important;
    font-family: var(--theme-heading-font-family);
    font-size: var(--theme-headline-size-medium);
    text-transform: none !important;
    line-height: 1.2 !important;
	margin: -.9375rem -.9375rem 0 !important;
    padding: .9375rem !important;
    position: relative;
    font-weight: 600 !important;
}

.dark_mode .custom-page-h2, .dark_mode .custom-page-h3 {
    color: #ffffff !important;
}

.custom-page-paragraph-p {
    
}

/* 3 column responsive CSS */

.custom_column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.custom_row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .custom_column {
    width: 100%;
  }
}

/* FAQ PAGE CSS BEGIN */

.faq-div-wrapper {
  margin: 0;
  padding: 1rem;
}

.faq-tab {
  border-bottom: 1px solid #fff;
  margin: 0 0 0 0;
}

.faq-tab__closed {
  border-bottom: 0;
}

.faq-tab__label:hover, .faq-tab__close:hover {
  background: #89C429;
}

/* Core styles/functionality */
.faq-tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.faq-tab__content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.35s;
}

.faq-tab input:checked ~ .faq-tab__content {
  max-height: 30rem;
}

/* Visual styles */
.faq-accordion {
  color: #58B138;
  border: 1px solid;
  border-radius: 0.5rem;
  overflow: hidden;
}

.faq-tab__label,
.faq-tab__close {
  display: flex;
  color: white;
  background: #58B138;
  cursor: pointer;
}

.faq-tab__label {
  justify-content: space-between;
  padding: 1rem;
  font-weight: 700;
  font-size: inherit;
}

.faq-tab__label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  transform: rotate(90deg);
  transition: all 0.35s;
}

.faq-tab input:checked + .faq-tab__label::after {
  transform: rotate(270deg);
}

.faq-tab__content p {
  margin: 0;
  padding: 1rem 1rem 2rem 1rem;
  color: inherit;
}

.dark_mode .faq-tab__content p {
  margin: 0;
  padding: 1rem 1rem 2rem 1rem;
  color: #ffffff;
}

.faq-tab__close {
  justify-content: flex-end;
  padding: 0.7rem 1rem;
  font-size: 1.2rem;
}

/* Arrow animation */
.faq-tab input:not(:checked) + .faq-tab__label:hover::after {
  animation: bounce .5s infinite;
}

@keyframes bounce {
  25% {
    transform: rotate(90deg) translate(.25rem);
  }
  75% {
    transform: rotate(90deg) translate(-.25rem);
  }
}

/* FAQ PAGE CSS END */

/* Move reCAPTCHA v3 badge to the left */
 
 .grecaptcha-badge {
  width: 70px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  left: 4px !important;
}
.grecaptcha-badge:hover {
  width: 256px !important;
}


/* HOME SLIDER CSS BEGIN */

.outer-content-container {
    width: 100%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    position: absolute;
}

.right-content-container, .left-content-container {
    width: 48%;
    max-width: 510px;
    background-color: transparent;
    position: relative;
}

.slider-container {
 width: 100%;
 max-width: 100%;
 margin: 0 auto 0 auto;
 box-shadow: 4px 4px 13px 1px #575757;
 border-radius: 8px;
 z-index: 1;
 position: relative;
 height: 600px;
}

/*@media only screen and (min-height: 600px) {
    .slider-container {
    margin: 217px auto 0 auto;
  }
}

@media only screen and (min-height: 768px) {
    .slider-container {
    margin: 217px auto 0 auto;
  }
}

@media only screen and (min-height: 768px) and (min-width: 1366px) {
    .slider-container {
    margin: 217px auto 0 auto;
  }
}

@media only screen and (min-height: 800px) {
    .slider-container {
    margin: 225px auto 0 auto;
  }
}

@media only screen and (min-height: 900px) {
    .slider-container {
    margin: 275px auto 0 auto;
  }
}

@media only screen and (min-height: 1024px) {
    .slider-container {
    margin: 337px auto 0 auto;
  }
}

@media only screen and (min-height: 1050px) {
    .slider-container {
    margin: 350px auto 0 auto;
  }
}

@media only screen and (min-height: 1080px) {
    .slider-container {
    margin: 365px auto 0 auto;
  }
}

@media only screen and (min-height: 1200px) {
    .slider-container {
    margin: 425px auto 0 auto;
  }
}

@media only screen and (min-height: 1366px) {
    .slider-container {
    margin: 517px auto 0 auto;
  }
}

@media only screen and (min-height: 1440px) {
    .slider-container {
    margin: 555px auto 0 auto;
  }
}

@media only screen and (min-height: 2560px) {
    .slider-container {
    margin: 1105px auto 0 auto;
  }
}*/

.text-container {
 width: 100%;
 max-width: 100%;
 position: relative;
 padding: 25px 25px 0 25px;
 text-align: center;
}

.h1class {
 font-size: 40px;
 padding: 0 0 5px 0;
 color: #fff;
}

@media only screen and (min-width: 300px) and (max-width: 576px) {
.h1class {
 font-size: 20px;
    }
}

@media only screen and (min-width: 577px) and (max-width: 767px) {
.h1class {
 font-size: 24px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
.h1class {
 font-size: 30px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1280px) {
.h1class {
 font-size: 32px;
    }
}

.h2class {
 font-size: 34px;
 padding: 0 0 5px 0;
 color: #fff;
}

@media only screen and (min-width: 300px) and (max-width: 576px) {
.h2class {
 font-size: 16px;
    }
}

@media only screen and (min-width: 577px) and (max-width: 767px) {
.h2class {
 font-size: 18px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
.h2class {
 font-size: 28px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1280px) {
.h2class {
 font-size: 30px;
    }
}

.pclass {
 font-size: 32px;
 padding: 0 0 0 0;
 margin: 0 0 0.3rem 0;
 line-height: 1.1;
 color: #fff;
}

@media only screen and (min-width: 300px) and (max-width: 576px) {
.pclass {
 font-size: 14px;
    }
}

@media only screen and (min-width: 577px) and (max-width: 768px) {
.pclass {
 font-size: 16px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
.pclass {
 font-size: 25px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1280px) {
.pclass {
 font-size: 30px;
    }
}

.slider {
 width: 100%;
 position: relative;
}
 
.slider .slide {
 position: absolute;
 width: 100%;
 height: 600px;
 background-size: cover;
 background-position: center;
 animation: slider 40s infinite;
 border-radius: 8px;
 filter: grayscale(50%);
 -webkit-filter: grayscale(50%);
}
.slider .slide:nth-child(1) {
   background-image: url('https://www.earthwisecommunity.com/custom/images/bg-2.jpg');
   animation-delay: 0s;
}

.slider .slide:nth-child(2) {
   background-image: url('https://www.earthwisecommunity.com/custom/images/bg-3.jpg');
   animation-delay: -8s;
}

.slider .slide:nth-child(3) {
   background-image: url('https://www.earthwisecommunity.com/custom/images/bg-6.jpg');
   animation-delay: -16s;
}

.slider .slide:nth-child(4) {
   background-image: url('https://www.earthwisecommunity.com/custom/images/bg-4.jpg');
   animation-delay: -24s;
}

.slider .slide:nth-child(5) {
   background-image: url('https://www.earthwisecommunity.com/custom/images/bg-5.jpg');
   animation-delay: -32s;
}

@keyframes slider {
  0%, 12%, 100% {
    opacity: 1;
    animation-timing-function: ease;
    z-index: 0;
  }
  20% {
    opacity: 0;
    animation-timing-function: step-end;
    z-index: 0;
  }
  92% {
    opacity: 1;
    animation-timing-function: step-end;
    z-index: -1;
  }
}

/* HOME SLIDER CSS END */

/* Add styling to the reactions begin */

.comment_hoverbox span .reaction i {
    display: inline-block;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

.comment_hoverbox [data-text="Like"] .reaction i {
    animation-name: pulse;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
}

.comment_hoverbox [data-text="Love"] .reaction i {
    animation-name: heartBeat;
    animation-duration: 1.3s;
    animation-timing-function: ease-in-out;
}

.comment_hoverbox [data-text="Care"] .reaction i {
    animation-name: swing;
    animation-duration: 1.3s;
    transform-origin: top center;
}

.comment_hoverbox [data-text="Haha"] .reaction i {
    animation-name: pulse;
    animation-duration: .8s;
}

.comment_hoverbox [data-text="Wow"] .reaction i {
    animation-name: fadeInDown;
    animation-duration: 1.3s;
}

.comment_hoverbox [data-text="Sad"] .reaction i {
    animation-name: swing;
    animation-duration: 1.3s;
}

.comment_hoverbox [data-text="Angry"] .reaction i {
    animation-name: headShake;
    animation-duration: .8s;
}

@keyframes heartBeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.05);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(1);
    }
}

@keyframes swing {
    20% {
        transform: rotate3d(0, 0, 1, 2deg);
    }
    40% {
        transform: rotate3d(0, 0, 1, -2deg);
    }
    60% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
    80% {
        transform: rotate3d(0, 0, 1, -2deg);
    }
    to {
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes pulse {
    from {
        transform: scale3d(1, 1, 1);
    }
    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 1;
        transform: translate3d(0, -5%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes headShake {
    0% {
        transform: translateX(0);
    }
    6.5% {
        transform: translateX(-2px) rotateY(-9deg);
    }
    18.5% {
        transform: translateX(1px) rotateY(7deg);
    }
    31.5% {
        transform: translateX(-1px) rotateY(-5deg);
    }
    43.5% {
        transform: translateX(1px) rotateY(3deg);
    }
    50% {
        transform: translateX(0);
    }
}

/* Add styling to the reactions end */