/* general */
body {
    background-color: #f7f6f2;
    color: black !important;
    font-size: 1rem;
}

a {
    color: #050 !important;
    transition: all .2s ease-in-out;
}

a:hover {
    color: #3a3 !important;
}

a.nolink, a.nolink:hover {
    color: inherit !important;
    text-decoration: none;
}

/* some resets */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    font-size: 1.2rem;
}
a h1, a h2, a h3, a h4, a h5, a h6 {
    color: inherit;
}

/* overrides */
/* navbar */
.navbar .dropmenu ul li a.active, 
.navbar .dropmenu ul li a:focus, 
.navbar .dropmenu ul li a:hover, 
.mobile-container .overlay-menu ul li a.active, 
.mobile-container .overlay-menu ul li a:focus, 
.mobile-container .overlay-menu ul li a:hover
 {
    color: #3a3 !important; /* even more important */
}

.navbar .dropmenu ul li a {
  text-transform: uppercase;
  font-size: 1.1rem;
  color: #666 !important;
}

.navbar {
    flex-wrap: nowrap;
}

.mobile-container .overlay-menu ul li a {
  text-transform: uppercase;    
  font-size: 2rem;
}

.mobile-container .treemenu li {
  line-height: 3rem;
  font-size: 2rem; 
  background-color: #f7f6f2;
  padding: 10px 0 15px 0;
}

.mobile-container .treemenu .toggler {
    line-height: 3rem;
}

.mobile-menu .button_container.active {
  top: 1.5rem !important;
  width: 48px;
  height: 44px;
}

.mobile-menu .button_container span {
  background: #3b9026;
}

.mobile-menu .button_container.active .top,
.mobile-menu .button_container.active .middle,
.mobile-menu .button_container.active .bottom {
  background: #3b9026;
}

#footer {
  background-color:#e7e7e7
}

/* mobile */
.overlay {
  background:#fff;
}

.mobile-logo {
    padding: 16px 16px 16px 26px;
    font-weight: 700;
}

/* buttons */
.btn, .button {
    border-color: #030;
}

.active.button, .btn.active, .btn:active, .button:active, 
.btn:focus, .btn:hover, .button:focus, .button:hover  {
   background: #fafffa;
   border-color: #030;
}

.btn-primary.button, 
.btn.btn-primary
{
    color: #fff;
    border-color: #030;
    background: #050;
}

.btn-primary.active.button, 
.btn-primary.button:active,
.btn.btn-primary.active, 
.btn.btn-primary:active,
.btn-primary.button:focus, 
.btn-primary.button:hover, 
.btn.btn-primary:focus, 
.btn.btn-primary:hover
 {
    border-color: #030;
    background: #3a3;
}

/* hero */
.modular-hero #to-start {
    bottom: 3.5rem;
    font-weight: 900;
    font-size: 3rem;
}

.hero h1 {
    font-weight: 700;
}

/* pagination */
.pagination li {
    background-color: white;
    display: inline-block;
    border: 1px solid #eee;
}

.pagination a, .pagination span {
    font-size: 1rem;
    display: inline-block;
    padding: 15px 25px;
}

/* plugins */
.social-buttons-wrap {
    right: 0px;
    position: absolute;
    text-align: right;
    z-index: 1;
}

.raised {
    top: -20px;
}

.raised-x2 {
    top: -40px;
}

/* layout helpers */

.top-more-space {
    padding-top: 6rem;
}

.bottom-nospace {
    padding-bottom: 0;
}

.noback {
    background: transparent !important;
}

/* interesting enhancements */

.relative {
    position: relative;
}

.linkcard {
    background-size: cover !important;
    position: relative;
}

/* separated to make gradient above, because it's not possible to mix inline bck image and css gradient */
.linkcard::after {
    position: absolute;
    opacity: 0.9;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,  rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.95) 33%, rgba(255, 255, 255, 0.95) 66%, rgba(255, 255, 255, 0.5) 100%);
    content: '';
    transition: opacity 0.5s; 
}

.linkcard:hover::after {
    opacity: 1;
    transition: opacity 0.5s;
}

.linkcard-body {
    z-index: 1;
}

.narrow-center {
    width: 30rem;
    margin: auto;
    padding: 1rem;
}

.stacksheets {
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.3), 0 0 300px 25px rgba(255,253,246,0.5) inset;
    padding: 24px;
    position: relative;
}

.stacksheets:before, .stacksheets:after {
    content: "";
    background: #f0f0f0;
    box-shadow: 0 0 8px rgba(0,0,0,0.2), inset 0 0 300px rgba(252,250,242,0.7);
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -2;
    transition: .5s;
}

.stacksheets:before {
    left: -5px;
    top: 2px;
    transform: rotate(-0.5deg);
}

.stacksheets:after {
    right: -3px;
    top: 0px;
    transform: rotate(2deg);
}

.sticker-items .card {
    background: white;
}

.yellow-sticknote {
    background: rgb(248, 234, 105);
    border-top-left-radius: 250px 15px;
    border-bottom-left-radius: 20px 115px;
    border-bottom-right-radius: 105px 15px;
}

/* mobile fixes */
.card-body {
    overflow-wrap: anywhere;
}

.card-body iframe {
    width: 100%;
    min-height: 300px;
}

.card-body img {
    max-width: 100%;
}