.text-theme,
.text-hover-theme a:hover,
.text-hover-theme .active > a {
  color: #22b66e !important; }

.nav-active-theme .nav-link.active,
.nav-active-theme .nav > li.active > a,
.btn.theme,
.btn.b-theme:hover,
.btn.b-theme:focus,
.pace .pace-progress,
.theme {
  color: rgba(255, 255, 255, 0.85) !important;
  background-color: #22b66e !important; }

.b-theme,
.nav-border,
nav.nav-border {
  border-color: #22b66e !important; }

.btn.theme-accent,
.btn.b-theme-accent:hover,
.btn.b-theme-accent:focus {
  color: rgba(255, 255, 255, 0.85) !important;
  background-color: #22b66e !important; }

.theme-accent {
  color: rgba(255, 255, 255, 0.85) !important;
  background-color: #22b66e !important; }

.sidenav .nav-border .active > a,
.sidenav .nav-active-text .active > a {
  color: #22b66e; }

.fill-theme {
  fill: #22b66e; }

.stroke-theme {
  stroke: #22b66e; }

/* MadMax */

.text-current {
  color: #02964e !important;
}
.text-current:focus,
.text-current:hover {
  color: #22762e !important;
}
.dark .text-current {
  color: #22b66e !important;
}
.dark .text-current:focus,
.dark .text-current:hover {
  color: #32c67e !important;
}
.table-hover thead .header-cols th,
.table-hover tbody tr:hover {
  color: #22b66e;
  background-color: rgba(0, 0, 0, 0.075);
}
.pagination .active .page-link,
.pagination .active .page-link:hover,
.pagination .active .page-link:focus,
.pagination .active a,
.pagination .active a:hover,
.pagination .active a:focus {
  background-color: #22b66e !important;
  border-color: #22b66e !important;
}
.input-group-append button.btn.btn-outline-secondary.border-left-0:hover {
  color: #fff;
  background: #22762e !important;
}
.gj-picker-bootstrap [role="header"],
.gj-picker-bootstrap [role="footer"] {
  color: #fff;
  background: #22762e;
}
.gj-picker-bootstrap [role="header"] .selected {
  color: #ff0;
}
.gj-picker-bootstrap [role="footer"] button.btn.btn-default {
  color: #22762e;
}

/* popa custom */

html,
body {
  background-color: #ECFEE4;
  background-image: url('../../img/bg1.jpg');
  background-position: 0 0;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}
body .bg-left {
  position: fixed;
  bottom: 0;
  left: 0;
  text-align: left;
  z-index: 1;
}
body .bg-right {
  position: fixed;
  top: 25%;
  right: 0;
  text-align: right;
  z-index: 1;
}
body .body-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:  100%;
  z-index: 2;
}
body .ribbon {
  height: 200px;
  text-align: center;
}
body .ribbon img {
  margin-top: 1rem;
  padding: 10px;
  width: 100%;
  opacity: 0.75;
  background-color: #fff;
  border: 2px solid #a5aa90;
  border-radius: 50%;
}
h1.site-title {
  padding-left: 2rem;
  font-family: "Great Vibes", cursive;
  font-size: 4rem;
  line-height: 2rem;
  font-weight: bold;
  color: #22b66e;
  color: #fff;
  stroke: 1px #060;
  -webkit-text-stroke: 1px #060;
}
.poem-menu,
.poem-content {
  position: relative;
  padding: 3rem;/*
  min-height: 200px;*/
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 2px solid #A5AA9C;
}
.poem-tl {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.poem-tr {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.poem-bl {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.poem-br {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}
.poem-top {
  position: absolute;
  left: calc(50% - 100px);
  top: 30px;
  z-index: 1;
}
.poem-inner {
  font-size: 1.25rem;
  padding-bottom: 8rem;
  background-image: url('../../img/top.png');
  background-position: 50% 100%;
  background-repeat: no-repeat;
}
.poem-audio {
  margin: 0 auto;
  padding: 0 0 0 .5rem;
  width: 300px;
  text-align: center;
}
.poem-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.poem-btns {
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 100%;
  text-align: center;
}
.poem-btns a {
  display: inline-block;
  margin: 0 10px;
  width: 40px;
  height: 40px;
  color: #22b66e;
  text-align: center;
  border: 2px solid #A5AA9C;
  border-radius: 50%;
}
.poem-btns a i {
  position: relative;
  top: 8px;
}
.fade-in {
  opacity: 1;
  transition: opacity .75s ease-in;
}
.fade-out {
  opacity: 0;
  transition: opacity .75s ease-out;
}
.box {
  background-color: transparent;
  border: 2px solid #ccc;
}
/* responsive */

@media (min-width: 576px) {
  .poem-content {
    padding: 4rem;
  }
}
@media (min-width: 768px) {
  .poem-content {
    padding: 5rem;
  }
}
@media (min-width: 992px) {
  .poem-content {
    padding: 6rem;
  }
}
@media (min-width: 1200px) {
  .poem-content {
    padding: 8rem;
  }
}