/** -------------------------------------------------------------------------
*
*   CSS for Blue Moon Reptiles (frontend)
*   Author: Leyé Jin
*   Version: 0.1337
*
* ---------------------------------------------------------------------------*/

/* General styles
=============================================================================*/

/* Scrollbar styles -------------------*/
/* Width */
::-webkit-scrollbar {
   width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
   background: var(--bgs); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
   background: var(--bgp);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
   background: #888;
}

::selection {
   background: var(--bgt);
   color: var(--bgs);
   text-shadow: none;
}

/* CSS colours -------------------*/
:root {
   --bgp: #849FCC;
   --bgs: #EEE;
   --bgt: #2B2C28;
   --bgq: #A480CF;
   --bmr-danger: #DC3545;
   --bmr-danger-bg: #F8D7DA;
   --bmr-warning: #CC9A06;
   --bmr-warning-bg: #FFF3CD;
   --bmr-info: #849FCC;
   --bmr-info-bg: #EDF4FF;
   --bmr-success: #20C997;
   --bmr-success-bg: #D2F4EA;
}

/* Page elements -------------------*/
html {
   scroll-behavior: auto !important;
}

body {
   margin: 0 auto;
   padding: 0;
   position: relative;
   overflow-x: hidden;
}

#header-title {
   min-height: 100vh;
   background: url(../img/frontend-bg.jpg) no-repeat center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   padding: 100px 0 50px 0;
}

h1, h2, h3, h5, .footer-bottom {
   font-family: 'Lato', sans-serif;
   letter-spacing: 2px;
}

a, p, i, button, .alert-body, .card p, .footer-top {
   font-family: 'Cardo', sans-serif;
}

h1 {
   font-weight: 900;
}

h2 {
   color: var(--bgt);
   margin: 8px 0;
   font-weight: 900;
}

h3 {
   color: var(--bgt);
   font-weight: 400;
}

h3:before {
   position: relative;
   display: inline-block;
   left: 0;
   top: 4px;
   content: '';
   width: 12px;
   height: 32px;
   margin-right: 12px;
   transform: skew(-30deg);
   background: var(--bgp);
}

a, .card, .card i, .dbca-links .link-icon {
   -webkit-transition: 0.5s cubic-bezier(0.8, 0.01, 0.08, 1);
   transition: 0.5s cubic-bezier(0.8, 0.01, 0.08, 1);
}

a {
   color: var(--bgp);
   text-decoration: none;
}

a:hover {
   text-decoration: none;
   color: var(--bgt);
}

img {
   user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -webkit-user-select: none;
   -ms-user-select: none;
}

.img-fluid {
   border: 16px solid rgba(128, 128, 128, 0.16);
}

.sticky-top {
   top: 128px;
}

p, a {
   font-size: 18px;
   line-height: 1.8;
}

.back-to-top {
   display: none;
   position: fixed;
   z-index: 100;
   bottom: 12px;
   right: 12px;
   background: none;
   text-align: center;
   color: var(--bgs);
   font-size: 18px;
   width: 46px;
   height: 46px;
   line-height: 46px;
   border-radius: 50%;
   border: 2px solid var(--bgs);
}

.back-to-top:hover {
   color: var(--bgt);
   border: 2px solid var(--bgt);
}

.bmr-box-shadow {
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

/* Sections -------------------*/
section {
   z-index: 55;
   position: relative;
}

section:not(#intro) {
   top: 110vh;
   padding: 0 0 10vh 0;
}

.section-dark {
   background-color: var(--bgp);
   color: var(--bgs);
}

.section-dark h2, .section-dark h3 {
   color: #FFF;
}

.section-dark h3:before {
   background: #FFF;
}

.section-light {
   background-color: #FFF;
}

.section-contact:before {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   background-image: url(../img/dots.png);
   content: "";
   opacity: .05;
   background-repeat: no-repeat;
   background-position: center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   -webkit-transform: scale(-1);
   -moz-transform: scale(-1);
   -ms-transform: scale(-1);
   -o-transform: scale(-1);
   transform: scale(-1);
}

.section-black {
   background-color: var(--bgt);
   color: var(--bgs);
}

.section-black h2, .section-black h3 {
   color: #FFF;
}

.top-angle {
   position: relative;
   top: calc(-10vh + 1px);
   z-index: 55;
   width: 0;
   height: 0;
   border-right: 100vw solid transparent;
   border-bottom: 10vh solid #FFF;
}

.bottom-angle {
   position: relative;
   z-index: 55;
   width: 0;
   height: 0;
   border-left: 100vw solid transparent;
   border-top: 10vh solid var(--bgp);
}

.section-dark .top-angle {
   border-bottom: 10vh solid var(--bgp);
}

.section-black .top-angle {
   border-bottom: 10vh solid var(--bgt);
}

.bg-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0.4;
  background-color: var(-bgt);
}

.fixed {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

/* Dividers -------------------*/
.divider span {
   display: inline-block;
   vertical-align: middle;
   font-size: 32px;
}

.divider .fas {
   font-size: 20px;
   margin: 0 20px;
   color: var(--bgp);
}

.section-dark .divider .fas {
   color: var(--bgs);
}

.divider .line {
   width: 25%;
   border-bottom: 2px solid var(--bgs);
}

/* Buttons -------------------*/
button {
   background: none;
   border: 0;
   transition: 0.3s;
   -webkit-transition: 0.3s;
}

button:disabled, button:disabled:hover {
   background: var(--bgs);
}

button:disabled span, button:disabled:hover span {
   color: var(--bgt);
}

button:disabled::before {
   display: none;
}

.bmr-btn {
   padding: 8px 16px;
   height: 48px;
   font-family: "Lato";
   position: relative;
   text-align: center;
   overflow: hidden;
   color: #FFF;
   transform: skewX(-30deg);
   outline: none;
}

.bmr-btn::before {
   position: absolute;
   top: 0;
   height: 100%;
   content: '';
   width: 150%;
   left: -200%;
   background: var(--bgt);
   -webkit-transition: 0.6s cubic-bezier(0.8, 0.01, 0.08, 1);
   transition: 0.6s cubic-bezier(0.8, 0.01, 0.08, 1);
}

.bmr-btn:hover::before {
   transform: translateX(100%);
}

.bmr-btn:active::before {
   transform: translateX(90%);
}

.bmr-btn:focus {
   outline: none;
}

.bmr-btn span {
   position: relative;
   transform: skewX(30deg);
   display: block;
   color: #FFF;
   font-size: 16px;
   -webkit-transition: 0.6s cubic-bezier(0.8, 0.01, 0.08, 1);
   transition: 0.6s cubic-bezier(0.8, 0.01, 0.08, 1);
}

.bmr-btn-normal {
   background: var(--bgp);
}

.bmr-btn-special {
   background: var(--bgq);
}

.bmr-btn-white {
   background: var(--bgs);
}

.bmr-btn-white span {
   color: var(--bgt);
}

.bmr-btn:hover.bmr-btn-white span {
   color: var(--bgs);
}

.bmr-btn-red {
   background: var(--bmr-danger);
}

/* Alerts -------------------*/
.alert {
   display: flex;
   border-radius: 0;
   border-right: none;
   border-bottom: none;
   border-top: none;
}
.alert i {
   font-size: 32px;
   margin-right: 16px;
}

.alert a, .alert b {
   display: contents;
}

.alert-body {
   padding-left: 16px;
   font-size: 16px;
}

.alert-danger {
   color: var(--bmr-danger);
   border-left: 8px solid var(--bmr-danger);
   background-color: var(--bmr-danger-bg);
}

.alert-warning {
   color: var(--bmr-warning);
   border-left: 8px solid var(--bmr-warning);
   background-color: var(--bmr-warning-bg);
}

.alert-info {
   color: var(--bmr-info);
   border-left: 8px solid var(--bmr-info);
   background-color: var(--bmr-info-bg);
}

.alert-success {
   color: var(--bmr-success);
   border-left: 8px solid var(--bmr-success);
   background-color: var(--bmr-success-bg);
}

/* Preloader -------------------*/
.preloader-wrapper {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: var(--bgp);
   z-index: 99;
   font-family: 'Lato';
   user-select: none;
}

.preloader-progress {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100vh;
   padding: 0;
   background-color: var(--bgs);
}

.preloader-bar {
   position: relative;
   height: 100vh;
   background-color: var(--bgp);
}

.preloader-center {
   width: 180px;
   height: 180px;
   line-height: 180px;
   position: relative;
   text-align: center;
   margin: auto;
}

.preloader-circle {
   position: absolute;
   top: calc(50% - 90px);
   left: calc(50% - 90px);
   width: 180px;
   height: 180px;
}

.preloader-circle svg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   -webkit-animation: loading-rotate 5s linear infinite;
   -moz-animation: loading-rotate 5s linear infinite;
   -ms-animation: loading-rotate 5s linear infinite;
   -o-animation: loading-rotate 5s linear infinite;
   animation: loading-rotate 5s linear infinite;
}

@-webkit-keyframes loading-rotate {
   0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

@keyframes loading-rotate {
   0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

.preloader-circle svg circle:last-child {
   stroke: var(--bgt);
   stroke-dashoffset: 0;
   stroke-dasharray: 2400, 3150;
   -webkit-animation: loading-anim 4s linear infinite;
   -moz-animation: loading-anim 4s linear infinite;
   -ms-animation: loading-anim 4s linear infinite;
   -o-animation: loading-anim 4s linear infinite;
   animation: loading-anim 4s linear infinite;
   transform-origin: center center;
}

@-webkit-keyframes loading-anim {
   0% {
      stroke-dashoffset: 0;
      stroke-dasharray: 0, 4000;
   }
   100% {
      stroke-dashoffset: -1350;
      stroke-dasharray: 3000, 4500;
   }
}

@keyframes loading-anim {
   0% {
      stroke-dashoffset: 0;
      stroke-dasharray: 0, 4000;
   }
   100% {
      stroke-dashoffset: -1350;
      stroke-dasharray: 3000, 4500;
   }
}

.preloader-value {
   position: absolute;
   top: calc(50% - 50px);
   left: calc(50% - 50px);
   width: 100px;
   padding: 26px 0;
   font-size: 32px;
   text-align: center;
}

.preloader-value-big {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   font-size: 320px;
   color: rgba(0,0,0,0.1);
}

/* Loading spinner -------------------*/
.loading-overlay {
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 49;
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   display: none;
}

.loading-overlay svg {
   background: none;
   position: relative;
   top: 37%;
}

/* Modals -------------------*/
.modal-content {
   border: 0;
   border-radius: 0 !important;
}

.modal-backdrop {
   opacity: 0.8!important;
}

.carousel-indicators {
   position: relative;
   background-color: var(--bgs);
}

.carousel-indicators [data-bs-target] {
   height: 24px;
   background-color: var(--bgp);
}

.carousel-control-next, .carousel-control-prev, .carousel-control-next-icon, .carousel-control-prev-icon {
   -webkit-transition: 0.3s all;
   transition: 0.3s all;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
   height: 4rem;
   filter: invert(1);
}

.carousel-control-next:focus .carousel-control-next-icon, .carousel-control-next:hover .carousel-control-next-icon {
   transform: translateX(8px);
}

.carousel-control-prev:focus .carousel-control-prev-icon, .carousel-control-prev:hover .carousel-control-prev-icon {
   transform: translateX(-8px);
}

.modal .close {
   position: absolute;
   right: 0;
   top: 0;
   z-index: 2;
   margin: 16px 16px 0 0;
   padding: 8px 12px;
   cursor: pointer;
   background: var(--bgs);
   -webkit-transition: 0.3s;
   transition: 0.3s;
}

.modal .close i {
   font-size: 32px;
}

.modal .close:hover {
   opacity: 0.6;
}

.modal .close:focus {
   outline: none;
}

.modal .details-column {
   background-color: var(--bgp);
}

.modal-header {
   border: 0;
}

.modal-header h2 {
   color: #FFF;
}

.modal-description {
   background-color: var(--bgs);
   border-left: 8px solid var(--bgt);
}

.modal-description p {
   color: var(--bgt);
   margin: 12px 0;
}

.modal-details p {
   margin: 0;
}

.modal-price span {
   font-size: 32px;
   font-weight: bold;
}

.modal-details .modal-sticker {
   text-align: center;
   padding: 8px 0;
}

.modal-details .modal-animal-id {
   background: var(--bmr-success-bg);
}

.modal-details .modal-animal-dob {
   background: var(--bmr-warning-bg);
}

.modal-details i {
   font-size: 24px;
}

.gender-m {
   background: var(--bmr-info-bg);
}

.gender-m i {
   color: var(--bmr-info);
}

.gender-f {
   background: #F7D6E6;
}

.gender-f i {
   color: var(--bs-pink);
}

.gender-o {
   background: var(--bgt);
}

.gender-o i {
   color: var(--bgs);
}

.modal-parents {
   color: #FFF;
   font-weight: bold;
}

.modal-parents .parent-link:first-child {
   background-color: var(--bgs);
   color: var(--bgq);
}

.modal-parents .parent-link:nth-child(2) {
   background-color: var(--bgt);
}

.modal-parents .parent-link-disabled:first-child {
   background-color: var(--bgs);
   color: var(--bgq);
   opacity: 0.3;
   cursor: not-allowed;
}

.modal-parents .parent-link-disabled:nth-child(2) {
   background-color: var(--bgt);
   opacity: 0.3;
   cursor: not-allowed;
}

.modal-share {
   overflow: hidden;
   cursor: pointer;
   height: 48px;
   background-color: var(--bgs);
   -webkit-transition: 0.3s all;
   transition: 0.3s all;
   transform: skewX(-30deg);
}

.modal-share .container-links {
   width: 256px;
   height: 48px;
}

.modal-share .container-links i {
   transform: skewX(30deg);
}

.modal-share .social-link {
   width: 25%;
   height: 100%;
   padding-top: 8px;
   text-align: center;
}

.modal-share .social-link:first-child:hover {
   background-color: #3B5998;
   color: var(--bgs);
}

.modal-share .social-link:nth-child(2):hover {
   background-color: var(--bgt);
   color: var(--bgs);
}

.modal-share .social-link:nth-child(3):hover {
   background-color: #E60023;
   color: var(--bgs);
}

.modal-share .social-link:nth-child(4):hover {
   background-color: #FF4500;
   color: var(--bgs);
}

.copy-link-btn {
   width: 100%;
}

.copy-link-btn i {
   font-size: 20px;
   margin-left: 8px;
}

.modal.fade .modal-dialog {
   transform: scale(1.05);
   opacity: 0.5;
   transition: all .2s linear;
}

.modal.show .modal-dialog {
   opacity: 1;
   transform: scale(1);
}

.modal-open {
  padding-right: 0 !important;
  overflow-y: auto;
}

/* Cards -------------------*/
.card {
   padding: 16px;
   overflow: hidden;
   border-radius: 0;
}

.card:after {
   content: "";
   position: absolute;
   bottom: 0;
   right: 0;
   border-left: 64px solid transparent;
   border-bottom: 64px solid var(--bgs);
}

.card h5 {
   color: var(--bgt);
   font-size: 24px;
   position: relative;
   z-index: 3;
}

.card p {
   color: var(--bgt);
   position: relative;
   z-index: 3;
}

.card i {
   background-color: var(--bgs);
   padding: 16px;
   color: var(--bgp);
   font-size: 32px;
   border-radius: 50%;
   margin-bottom: 16px;
   position: relative;
   z-index: 3;
}

.card span {
   user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   position: absolute;
   font-size: 96px;
   top: -12px;
   left: 64px;
   -webkit-text-fill-color: transparent;
   -webkit-text-stroke: 1px;
   z-index: 2;
   white-space: nowrap;
   color: var(--bgs);
}

.card:hover {
   background-color: var(--bgs);
}

.card:hover  i {
   background-color: var(--bgp);
   color: var(--bgs);
}

.card .card-title {
   display: inline;
}

.list-card {
   position: relative;
   margin: 8px 12px;
}

.list-card-separator {
   position: absolute;
   width: 64px;
   right: 43.5%;
   height: 256px;
   background-color: var(--bgs);
   z-index: 8;
   clip-path: polygon(0 0, 100% 0, 55% 100%, 0% 100%);
   -webkit-transition: all .3s;
   transition: all .3s;
}

.list-businesses .list-card-separator {
   right: 33%;
}

.list-card-desc-container {
   padding: 0 16px 0 0;
}

.list-card-desc {
   overflow: scroll;
   background: var(--bgs);
   color: var(--bgt);
   height: 256px;
   padding: 16px 16px 0 16px;
   -webkit-transition: all .3s;
   transition: all .3s;
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

.list-card-desc::-webkit-scrollbar { /* WebKit */
   width: 0;
   height: 0;
}

.list-card-img {
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-position: center;
   height: 256px;
   -webkit-transition: all .3s;
   transition: all .3s;
}

.list-card-icon {
   position: absolute;
   right: 8px;
   bottom: 8px;
   padding: 8px 16px;
   color: var(--bgt);
   background: var(--bgs);
   width: 48px;
   -webkit-transition: all .3s;
   transition: all .3s;
}

.list-card-icon:hover {
   opacity: 0.6;
   cursor: pointer;
}

.list-card:hover .list-card-desc {
   background-color: #DDD;
}

.list-card:hover .list-card-separator {
   background-color: #DDD;
}

.list-card:hover .list-card-img {
   transform: scale(1.05);
}

.list-card hr {
   margin: 4px 0;
}

.list-card p {
   font-size: 16px;
   margin-bottom: 0;
   overflow-wrap: break-word;
}

.list-card .list-card-link {
   font-size: 32px;
   margin-right: 16px;
}

/* Toasts -------------------*/
.toast {
   border-radius: 0;
   left: 50%;
   position: fixed;
   transform: translate(-50%, 0px);
   bottom: 0;
   z-index: 100;
   padding: 8px;
   font-size: 16px;
   border-left: none;
   border-right: none;
   border-top: none;
   box-shadow: 0 0 10px -2px var(--bgp);
}

/* Tables -------------------*/
.table {
   margin-top: 16px;
   color: var(--bgp);
}

.table thead {
   background-color: var(--bgs);
   color: #FFF;
}

/* Top navigation menu
=============================================================================*/
/* Navbar -------------------*/

#main-nav {
   z-index: 60;
}

#main-nav .navbar-nav {
   margin: 8px 0 0 0;
}

#main-nav .navbar-brand {
   opacity: 0;
   margin-left: 32px;
}

#main-nav .nav-item {
   margin: 0 4px;
}

#main-nav .nav-link {
   width: 128px;
}

#main-nav .dropdown-toggle {
   color: rgba(255, 255, 255, 0.7);
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
}


#main-nav .nav-link:hover, #main-nav.navbar-down .nav-link:hover {
   color: #FFF !important;
}

#main-nav .nav-item .active {
   color: var(--bgs);
}

/* Navbar down -------------------*/
#main-nav.navbar-down {
   border-bottom: 1px solid var(--bgp);
   background-color: rgba(238,238,238,0.8);
}

#main-nav.navbar-down .navbar-brand {
   opacity: 1;
}

/* Intro section
=============================================================================*/
#intro {
   z-index: 50;
   width: 100%;
   min-height: 100vh;
   position: fixed;
   top: 0;
   user-select: none;
}

#intro h1 {
   color: var(--bgt);
   letter-spacing: 8px;
   transform: skewX(30deg);
}

#intro h1 span {
   transition: 1s;
   display: block;
   transform: translateX(32px);
   opacity: 0;
}

#intro h1 .anim-fadeInRight {
   transform: translateX(0);
   opacity: 1;
}

#intro h1 span:first-child {
   transition-delay: 0.1s;
}
#intro h1 span:nth-child(2) {
   margin-right: 32px;
   transition-delay: 0.2s;
}
#intro h1 span:last-child {
   margin-right: 64px;
   color: var(--bgp);
   transition-delay: 0.3s;
}

#intro .scroll-down {
   position: absolute;
   top: calc(100vh - 50px);
   left: 50%;
   font-size: 24px;
   color: var(--bgp);
   margin: 0 0 16px -8px;
   -webkit-animation: sd01 3s infinite;
   animation: sd01 3s infinite;
   z-index: 59;
}

@-webkit-keyframes sd01 {
   0% {
      -webkit-transform: translate(0, 0);
   }
   50% {
      -webkit-transform: translate(0, 18px);
   }
   100% {
      -webkit-transform: translate(0, 0);
   }
}

@keyframes sd01 {
   0% {
      transform: translate(0, 0);
   }
   50% {
      transform: translate(0, 18px);
   }
   100% {
      transform: translate(0, 0);
   }
}

#intro .brand-logo {
   position: absolute;
   z-index: 53;
   width: 100%;
   padding: 16vh 50px;
   text-align: right;
}

#intro .brand-logo img {
   width: 300px;
}

#intro .carousel-content {
   position: absolute;
   z-index: 53;
   top: calc(100vh - 192px);
   padding: 0 64px;
   text-align: right;
}

#intro .carousel-text {
   transform: skewX(-30deg);
   border-right: 4px solid var(--bgp);
}

#intro .carousel-overlay-skew {
   background: rgba(255,255,255,0.95);
   transform: skewX(-30deg);
   right: -58%;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 51;
   position: absolute;
}

#intro .carousel-overlay-skew:before {
   content: '';
   background: var(--bgs);
   left: -32px;
   top: 0;
   width: 1%;
   height: 100%;
   position: absolute;
}

#intro .carousel-overlay-skew:after {
   content: '';
   background: var(--bgp);
   left: -80vw;
   top: -50vh;
   width: 20%;
   height: 100%;
   position: absolute;
}

#intro .carousel-item {
   width: 100%;
   height: 100vh;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-position: center;
   display: flex;
   justify-content: flex-end;
}

#intro .long-string {
   letter-spacing: -1px;
   font-size: smaller;
}

/* About
=============================================================================*/
#about .socials {
   color: var(--bgp);
   font-size: 80px;
   line-height: 0;
}

#about .socials:hover {
   color: var(--bgt);
}

/* Shop
=============================================================================*/
.grid {
   width: 90%;
}

.grid-sizer, .grid-item { width: 32.6%; }

figure {
   overflow: hidden;
   margin: 0;
   position: relative;
   cursor: pointer;
}

figcaption {
   height: 100%;
   width: 100%;
   opacity: 0;
}

figure .caption-overlay {
   background-color: rgba(0,0,0,0.8);
   height: 100%;
   width: 100%;
   position: absolute;
   top: 0;
}

figure .caption-text {
   margin: 0 auto;
}

figcaption, figure .animal-name, figure .animal-badges {
   -webkit-transition: all .3s;
   transition: all .3s;
}

figure i {
   font-size: 32px;
   color: var(--bgp);
}

figure .animal-name {
   background-color: var(--bgp);
   color: var(--bgs);
   font-size: 14px;
   text-transform: uppercase;
   font-family: 'Lato', sans-serif;
   margin: 0;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   z-index: 2;
}

.section-dark figure .animal-name {
   background-color: var(--bgs);
   color: var(--bgt);
}

figure .animal-badges {
   position: absolute;
   top: 8px;
   left: 0px;
   background: rgba(238, 238, 238, 0.9);
}

figure .animal-badge-gender, figure .animal-badge-price {
   display: inline-block;
   font-size: 24px;
   padding: 6px 24px 6px 12px;
}

figure .animal-badge-gender {
   clip-path: polygon(0 0, 100% 0%, 56% 100%, 0% 100%);
}

figure:hover figcaption {
   opacity: 1;
}

figure:hover .animal-name {
   -webkit-transform: translateY(0px);
   transform: translateY(0px);
   opacity: 1;
}

.charity {
   height: 400px;
   cursor: auto;
}

.charity .charity-img {
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
   transition: 0.3s;
}

.charity .charity-content {
   position: absolute;
   top: 0;
   left: 0;
   background-color: rgba(0,0,0,0.6);
   transform: scale(1.07);
   transition: 0.3s;
   overflow-y: auto;
}

.charity .charity-name {
   color: var(--bgp);
   text-align: center;
}

.charity .charity-text {
   font-size: 16px;
   color: var(--bgs);
   min-height: 32px;
}

.charity .charity-text span {
   float: left;
}

.charity .charity-EFT-L {
   user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   padding: 2px 8px;
   background-color: var(--bgp);
   color: var(--bgs);
}

.charity .charity-EFT-R {
   padding: 2px 8px;
   background-color: var(--bgs);
   color: var(--bgt);
}

.charity .bmr-btn, .charity .bmr-btn span {
   visibility: hidden;
   opacity: 0;
   -webkit-transition: all 0s linear 0s;
   transition: all 0s linear 0s;
}

.charity:hover .bmr-btn, .charity:hover .bmr-btn span {
   visibility: visible;
   opacity: 1;
   -webkit-transition: all 0.2s linear 0.3s;
   transition: all 0.2s linear 0.3s;
}

.charity:hover .charity-img, .charity:focus .charity-img, .charity:active .charity-img {
   filter: blur(3px);
   transform: scale(0.92);
}

.charity:hover .charity-content, .charity:focus .charity-content, .charity:active .charity-content {
   opacity: 1;
   transform: scale(1);
}

/* Licensing section
=============================================================================*/
.accordion-button {
   font-size: 18px;
}

.accordion-button:hover {
   background-color: var(--bgs);
}

.accordion-button:focus {
   border-color: unset;
   outline: 0;
   box-shadow: none;
}

.accordion-button:not(.collapsed) {
   background-color: var(--bgs);
}

.licensing-categories .category-row {
   border-bottom: 1px solid var(--bgs);
}

.licensing-categories .category-animal {
   display: inline;
   position: relative;
   top: 2px;
}

.licensing-categories .category-animal i {
   color: #999;
}

.licensing-categories .category-animal-img {
   width: 32px;
   height: 32px;
}

.dbca-links {
   width: 100%;
   background-color: #FFF;
   display: block;
   color: var(--bgt);
}

.dbca-links .link-icon {
   position: relative;
   left: 0;
   display: inline-block;
   padding: 8px 16px;
   color: var(--bgt);
}

.dbca-links .icon-left {
   background-color: var(--bgs);
   color: var(--bgp);
}

.dbca-links:hover {
   background-color: #DDD;
}

.dbca-links:hover .icon-left {
   background-color: #CCC;
}

/* Pet sitting section
=============================================================================*/


/* Contact section
=============================================================================*/
#contact-cards i, #contact-general i {
   font-size: 24px;
}

#contact-general i {
   position: relative;
   top: 5px;
   margin-right: 5px;
}

#contact-social i {
   font-size: 48px;
   color: var(--bgs);
}

#contact-cards .card-header {
   font-weight: bold;
}

/* Footer
=============================================================================*/
.footer {
   color: var(--bgs);
   position: relative;
   top: 110vh;
   z-index: 1;
}

.footer p {
   margin: 16px 0 8px 0;
}

.footer-top {
   padding: 64px 0;
   background: linear-gradient(0deg, rgba(0,33,86,0.6), rgba(0,35,69,0.2)), url(../img/footer-bg.jpg) center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-repeat: no-repeat;
}

.footer-top a {
   font-size: 32px;
   margin: 0 8px;
   transition: all 0.3s;
   -webkit-transition: all 0.3s;
}

.footer-top a:hover {
   color: var(--bgs);
}

.footer-bottom {
   background-color: var(--bgp);
   padding: 32px 0;
}

/* Forms
=============================================================================*/
.bmr-form {
   margin: 0 auto;
   padding: 16px 32px;
   position: relative;
}

.bmr-form .loader-circle {
   position: absolute;
}

.bmr-form h2 {
   color: var(--bgt);
}

.bmr-form p {
   font-size: 16px;
   margin: 0;
}

.bmr-form .store-inquiry, .bmr-form .pet-sitting-inquiry {
   height: 0px;
}

.bmr-form .store-inquiry .form-floating, .bmr-form .pet-sitting-inquiry .form-floating, .bmr-form .pet-sitting-inquiry p {
   display: none;
}

.bmr-form input[type="text"],
.bmr-form input[type="email"],
.bmr-form select,
.bmr-form textarea {
   color: var(--bgp) !important;
   background-color: #F5F5F5;
   border-radius: 0;
   font-size: 16px;
   border: 1px solid var(--bgp);
}

.bmr-form input[type="text"],
.bmr-form input[type="email"],
.bmr-form select {
   -webkit-transition: all .3s;
   transition: all .3s;
}

.bmr-form label {
   font-family: 'Lato', sans-serif;
}

.bmr-form .form-floating>.form-control:focus~label::after, .bmr-form .form-floating>.form-select~label::after , .form-floating>.form-control:not(:placeholder-shown)~label::after {
   background: #F5F5F5;
}

.bmr-form .form-floating>textarea {
   min-height: 128px;
}

.bmr-form input[type="text"]:focus,
.bmr-form input[type="email"]:focus,
.bmr-form select:focus,
.bmr-form textarea:focus {
   border-color: var(--bgt) !important;
   background-color: #F5F5F5;
   box-shadow: none;
}

.bmr-form .input-group {
   margin: 4px 0;
   flex-wrap: nowrap;
}

.bmr-form .input-group-text {
   background: var(--bgp) !important;
   color: #FFF !important;
   border: none !important;
   border-radius: 2px 0px 0px 2px;
   height: 40px;
}

.bmr-form button {
   margin: 16px 0;
   width: 200px;
}

.bmr-form .bmr-form-result-msg {
   display: none;
}

.google-message {
   text-align: center;
}

.google-message a {
   font-size: 16px;
}

.google-message a:hover {
   color: var(--bgt);
}

.grecaptcha-badge {
   visibility: hidden;
}


/* Responsive styles
=============================================================================*/
@media screen and (min-width: 1399.98px) {
   #intro .brand-logo img {
      width: 23%;
   }
}
@media screen and (max-width: 1199.98px) {
   .loader-value-big {
       top: calc(50vh - 128px);
       left: calc(50vw - 208px);
       font-size: 160px;
   }
   
   #main-nav .bmr-btn-outline, #main-nav .bmr-btn-outline span {
      transform: none;
   }
   
   #main-nav {
      padding: 0 12px;
   }
   
   #main-nav .navbar-brand {
      padding: 0 8px;
      margin-left: 0;
   }
   
   #main-nav .navbar-brand img {
      margin: 8px 0;
   }

   #main-nav .navbar-toggler {
      background: none;
      border: 0;
   }
   
   #main-nav .navbar-toggler:focus, #main-nav .navbar-toggler:active {
      box-shadow: none;
   }
   
   #main-nav .toggler-bars {
      position: relative;
      display: inline-block;
      width: 32px;
      height: 2px;
      -webkit-transition: .3s;
      transition: .3s;
      background: var(--bgp);
      top: -6px;
   }

   #main-nav .toggler-bars:after, #main-nav .toggler-bars:before {
      content: "";
      position: absolute;
      display: inline-block;
      width: 32px;
      height: 2px;
      -webkit-transition: .3s;
      transition: .3s;
      left: 0;
      background: var(--bgp);
   }

   #main-nav .toggler-bars:before {
      top: 10px;
   }

   #main-nav .toggler-bars:after {
      top: -10px;
   }
   
   #main-nav .offcanvas-header .btn-close {
      position: absolute;
      right: 16px;
      top: 16px;
      font-size: 20px;
   }
   
   #main-nav .navbar-nav {
      margin: 0;
   }
   
   #main-nav .navbar-nav .nav-link {
      display: block;
      width: 100%;
   }
   
   #main-nav .bmr-btn {
      transform: skewX(0);
   }
   
   #main-nav .bmr-btn span {
      transform: skewX(0);
   }
   
   #main-nav .navbar-nav .nav-item {
      margin: 2px 0;
   }
   
   #main-nav .navbar-nav .nav-item:nth-last-child(2), #main-nav .navbar-nav .nav-item:last-child {
      border: none;
   }
   
   #intro .brand-logo {
      padding: 20vh 50px;
   }
   
   #intro .brand-logo img {
      width: 250px;
   }
   
   .modal .shop-item-img {
      height: 512px;
   }
   
   .licensing-categories .category-animal {
      font-size: 14px;
   }
}

@media screen and (max-width: 991.98px) {
   .preloader-value-big {
      font-size: 160px;
   }
   
   #intro .brand-logo {
      text-align: center;
      padding: 5%;
   }
   
   #intro .brand-logo img {
      width: 300px;
      filter: brightness(2);
   }

   #intro .carousel-overlay-skew {
      display: none;
   }
   
   #intro .carousel-item {
      background-color: rgba(0, 0, 0, 0.2);
      background-blend-mode: overlay;
      background-position: 36%;
   }
   
   #intro .carousel-content {
      padding: 0;
      text-align: center;
      width: 100%;
      top: calc(100vh - 256px);
   }
   
   #intro .carousel-text {
      background: rgba(0,0,0,0.75);
      transform: none;
      border: none;
      padding: 12px 0;
   }
   
   #intro .long-string {
      letter-spacing: 4px;
      font-size: 24px;
   }
   
   #intro h1 {
      color: var(--bgs);
      transform: none;
   }
   
   #intro h1 span:nth-child(2), #intro h1 span:last-child {
      margin-right: 0;
   }
   
   .list-businesses .list-card-separator {
      right: 35%;
   }
   
   .grid-sizer, .grid-item {
      width: 49%;
   }
   
   #licensing .img-fluid {
      display: none;
   }
}

@media screen and (max-width: 767.98px) {
   #intro .brand-logo img {
      width: 250px;
   }
   
   #intro h1 {
      font-size: 24px;
   }
   
   #intro h1 span {
      margin: 4px 0;
   }
   
   .list-businesses .list-card-separator {
      right: 33%;
   }
   
   .grid-sizer, .grid-item {
      width: 100%;
   }
   
   .bmr-form {
      padding: 0;
   }
}

@media screen and (max-width: 575.98px) {
   .modal-share {
      margin-bottom: 16px;
   }
   
   .modal-share .container-links {
      width: 100%;
   }
   
   .list-card-separator {
      display: none;
   }
   
   .list-card-desc-container {
      padding: 0;
   }
   
   .charity .charity-text {
      font-size: 14px;
   }
   
   .charity .charity-EFT {
      display: block;
      float: none !important;
   }
   
   .dbca-links {
      font-size: 14px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
   }
}

@media screen and (max-height: 599.98px) {
   #intro .brand-logo {
      padding: 2%;
   }
   
   #intro .brand-logo img {
      width: 150px;
   }
   
   #intro .carousel-content {
      top: calc(100vh - 160px);
   }
   
   #intro h1 {
      font-size: 20px;
   }
   
}

@media screen and (max-height: 599.98px) and (min-width: 991.98px) {
   
   #intro .brand-logo img {
      width: 250px;
   }
   
}