/* -- Home Page Styles -- */

.website .intro-blurb.welcome-message {
    margin:  0 auto 5px;
    padding-bottom: 5px;
    font-size:  90%;
}

/* -- Home Button Wrapper Styles -- */

.website .home-buttons {
    margin:  0 auto 0 0;
    text-align: left;
    max-width:  500px;
}
.website .home-buttons:after {
    content:  "";
    display: block;
    clear:  both;
}

.website .home-buttons > .wrapper {
    margin:  0 auto 20px;
}
.website .home-buttons > .wrapper > h4 {
    margin:  0 auto 10px;
    font-size:  80%;
    line-height:  1;
    background-color:  #fafafa;
    color:  #494949;
    padding:  3px 6px;
}


/* -- Home Button Styles -- */

.website .home-buttons .button {
    display:  block;
    float:  left;
    margin:  0 4px 4px 0;
}
.website .home-buttons .button:last-child {
    margin-right:  0;
    margin-bottom:  0;
}
.website .home-buttons .button > strong > i,
.website .home-buttons .button > em > i {
    position:  relative;
}
.website .home-buttons .button > strong > i {
    font-size:  80%;
    min-height:  1em;
    min-width:  1em;
    margin-right:  6px;
    bottom: 2px;
}
.website .home-buttons .button > em > i {
    font-size:  90%;
    margin-right:  3px;
    bottom: 1px;
}

.website .home-buttons .button.big-button {
    display:  block;
    float:  none;
    clear:  both;
    width:  auto;
    margin-left:  0;
    margin-right:  0;
}
.website .home-buttons .button.big-button + hr {
    margin:  0 auto;
    height:  0;
}
.website .home-buttons .button.sub-button {
    width:  auto;
}

.website .home-buttons .button.big-button {
    background-color: #262626;
    border-color: #090909;
}
.website .home-buttons .button.sub-button {
    background-color: #3b3b3b;
    border-color: #191919;
}

.website .home-buttons .button.sub-big-button {
    font-size:  80%;
}
.website .home-buttons .button.big-button + .sub-big-button {
    margin-top:  -10px;
    border-top-left-radius:  0;
    border-top-right-radius:  0;
    box-shadow:  inset 0 2px 2px rgb(0 0 0 / 5%);
}

.website .home-buttons .wrapper.actions {
    font-size:  80%;
}
.website .home-buttons .wrapper.actions .button.big-button em {
    font-size:  100%;
}


/* -- Business Page Button Styles -- */

.website .home-buttons .button.business-page {
    background-color: #b92f77;
    border-color: #ae2d70;
}
.website .home-buttons .button.business-page:hover {
    background-color: #c12f7a;
}

.website .home-buttons .button.business-page.sub-button {
    width:  24%;
    width:  calc(25% - 3px);
    font-size:  80%;
}
.website .home-buttons .button.business-page.sub-button strong {
    padding:  6px 6px 0;
}
.website .home-buttons .button.business-page.sub-button strong i {
    font-size:  120%;
    display:  block;
    margin:  0 auto 4px;
}
.website .home-buttons .button.business-page.sub-button strong i:before {
    position:  relative;
    z-index: 2;
}
.website .home-buttons .button.business-page.sub-button strong i:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #971c5b;
    border: 1px solid #971c5b;
}
.website .home-buttons .button.business-page.business-reports strong i:after {
    background-color: #337fcc;
    border-color: #256bb1;
}
.website .home-buttons .button.business-page.business-income strong i:after {
    background-color: #278a27;
    border-color: #1c631c;
}
.website .home-buttons .button.business-page.business-expenses strong i:after {
    background-color: #ac3b39;
    border-color: #8f2524;
}
.website .home-buttons .button.business-page.business-products strong i:after {
    background-color: #7d419f;
    border-color: #68248f;
}


/* -- Cash-Out Button Styles -- */

.website .home-buttons .button.cash-out {
    background-color: #337fcc;
    border-color: #256bb1;
}
.website .home-buttons .button.cash-out:hover {
    background-color: #3b85ce;
}

.website .home-buttons .button.sub-big-button.cash-out {
    background-color: #2f75bc;
}
.website .home-buttons .button.sub-big-button.cash-out:hover {
    background-color: #3b85ce;
}


/* -- Virtual Register Button Styles -- */

.website .home-buttons .button.virtual-register {
    background-color: #7d419f;
    border-color: #68248f;
}
.website .home-buttons .button.virtual-register:hover {
    background-color: #8546aa;
}



/* -- Income & Expense Button Styles -- */

.website .home-buttons .button.sub-button.log-income,
.website .home-buttons .button.sub-button.log-expense {
    width:  50%;
    width:  calc(50% - 2px);
}
.website .home-buttons .button.sub-button.log-income strong > i,
.website .home-buttons .button.sub-button.log-expense strong > i {
    font-size:  100%;
    bottom:  0;
}

.website .home-buttons .button.sub-button.log-income {
    background-color: #278a27;
    border-color: #1c631c;
}
.website .home-buttons .button.sub-button.log-income:hover {
    background-color: #2b972b;
}
.website .home-buttons .button.sub-button.log-expense {
    background-color: #ac3b39;
    border-color: #8f2524;
}
.website .home-buttons .button.sub-button.log-expense:hover {
    background-color: #b9302e;
}


/* -- Cute Bitmoji Picture Styles -- */

.website .home-buttons .cute-pic {
    display:  block;
    margin:  0 auto;
    padding:  20px;
    border:  1px solid #dedede;
    background-color:  #dedede;
    background-color:  rgba(0, 0, 0, 0.05);
    border-radius:  6px;
    text-align:  center;
    overflow:  hidden;
    position:  relative;
    min-height:  260px;
}
.website .home-buttons .cute-pic:before {
    content:  "";
    display:  block;
    position:  absolute;
    z-index:  1;
    top:  0;
    left:  0;
    width:  200%;
    height:  200%;
    overflow: hidden;
    background-color:  transparent;
    background-image:  none;
    background-repeat:  repeat;
    background-position:  0 0;
    background-size:  auto;
    transition:  none;
    animation: cute-pic-slide 120s linear infinite;
}
@keyframes cute-pic-slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, -50%, 0); /* The image width */
  }
}
.website .home-buttons .cute-pic img {
    position:  absolute;
    top:  50%;
    left:  50%;
    transform:  translate(-50%, -50%);
    margin:  0 auto;
    height:  230px;
    max-height: 100%;
    width:  auto;
}
.website .home-buttons .cute-pic img.back {
    z-index:  2;
    margin-left:  -2px;
    margin-bottom:  -2px;
    filter:  brightness(0);
    opacity:  0.1;
}
.website .home-buttons .cute-pic img.front {
    z-index:  3;
    margin-left:  2px;
    margin-bottom:  2px;
}

.website .home-buttons .cute-pic.acorns {
    /* border-color:  #e57943; */
}
.website .home-buttons .cute-pic.acorns:before {
    background-color:  #e39167;
    background-image:  url(../../images/misc/tile-background_acorns.png);
}


.website .home-buttons .cute-pic.back-checkers {
    background-color:  #262626;
    background-image:  url(../../images/misc/tile-background_checkers_smaller.png);
}
.website .home-buttons .cute-pic.front-items:before {
    background-color:  transparent;
    background-image:  url(../../images/misc/tile-background_items_medium.png);
}
.website .home-buttons .cute-pic.front-maple-leaves:before {
    background-color:  transparent;
    background-image:  url(../../images/misc/tile-background_maple-leaves_medium.png);
}