:root {
    --bs-primary-rgb : rgb(119,79,52);
    --bg-accent-elephant : #F5F3ED;
    --bg-accent-brown : #DBD2BE;
}
.offcanvas {
    --bs-offcanvas-width: 620px;
    --bs-offcanvas-padding-x:3rem;
}

body,html {
    background-color: #F5F3ED;
    font-family: 'ClashGrotesk';
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;

    -webkit-font-smoothing:antialiased;
}


img, video {
    max-width: 100%;
    height: auto !important;
}
.clickable {
    cursor: pointer;
}


a {
    color:inherit;
}



.headerImage {

}
.headerImage .image img {
    width: 100% !important;
}

#cartBtn {
    position: relative;
}
#cartBtn .counter {
    min-width: 15px;
    height: 15px;
    border-radius: 20px;
    text-align: center;
    line-height: 0;
    font-size: 12px;
    padding:8px 2px 0 2px;

    position: absolute;
    right:1px;
    top:3px;
}
#cartBtn[data-count="0"] .counter {
    display: none;
}



@media screen and (min-width: 1500px) {
    .navbar .container-fluid {
        max-width: 80%;
    }
}


.navbar .nav-link {
    color: #fff !important;
    font-family: 'RealHeadPro';
    font-size: 18px;
    font-weight: 700;
}
.top-nav .nav-link {
    font-size: 15px;
    font-weight: 400;
}
.top-nav {
    margin-top: -10px;
    padding-bottom: 10px;
}
.navbar {
    background-color: #1A1310 !important;
    transition: all 0.3s;
    height: 125px;
}
body.home .navbar {
    background-color: rgba(26, 19, 16, 0.0) !important;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
}
body .navbar.withBack {
    background-color: rgba(26, 19, 16, 0.7) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
body .navbar {
    background-color: rgba(26, 19, 16, 0.7) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}


.navbar .dropdown-menu {
    pointer-events: none;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    background-color: transparent;
    border:0;
}

.navbar .dropdown-menu.show {
    pointer-events: auto;
    /*display: block;*/
    opacity: 1;
    visibility: visible;
}




.dropdown-menu-fullwidth {
    position: fixed !important;
    width:100vw !important;
    left:0 !important;
    right:0 !important;
    margin-top: 0 !important;
}


.navbar-brand {
    z-index: 1100;
}
div.logo {
    background-color: #FFF;
    border-radius:0 0 10px 10px;
    aspect-ratio: 1.625/1;
    width: 250px;
    margin-bottom: -20px;

    padding: 10px;
    padding-top: 15px;
    border:1px solid #F5F3ED;
}
.navSpacer {
    height: 165px;

    /*background: rgb(37,15,3);*/
    /*background: linear-gradient(305deg, rgba(37,15,3,1) 0%, rgba(88,44,7,1) 100%);*/
}



.form-control,
.form-select {
    border:0;
    font-size: 18px;
    font-weight: 500;
}

form .form-control,form .form-select {
    border:0;
    border-radius: 7.5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
form .input-group .input-group-text {
    background-color: #FFF;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border:0
}


.list-group {
    border:0;
}
.list-group.shadowed {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.list-group .list-group-item {
    border-left:0;
    border-right:0;
}
.list-group-item:first-child {
    border-top:0;

}
.list-group-item:last-child {
    border-bottom:0;
}




.elephant-tabs .nav-tabs {
    border-bottom:0;
}
.elephant-tabs .nav-tabs .nav-item:not(:first-child) {
    margin-left: 10px;
}
.elephant-tabs .nav-tabs .nav-link {
    background-color: #F5F3ED;
    color:#1A1210;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    padding:6px 20px;
    border-radius: 10px 10px 0 0;
    border:0;
}
.elephant-tabs .nav-tabs .nav-link.active {
    background-color: #D3C7B2;
    font-weight: 600;
}


.product-tabs .nav-tabs {
    border-bottom:0;
}
.product-tabs .nav-tabs .nav-link {
    color:#1A1210;
    font-weight: 500;
    font-size: 20px;
    line-height: 20px;
    padding:10px 40px;
    border-radius: 10px 10px 0 0;
    border:0;
}
.product-tabs .nav-tabs .nav-link.active {
    font-weight: 600;
}
.product-tabs .nav-item:first-child {
    margin-left: 25px;
}



.input-group {

}
.input-group.quantityInputGroup .btn {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 10px !important;
}
.input-group.quantityInputGroup .btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group.quantityInputGroup .btn:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


.carouselHolder .owl-nav {
    position: absolute;
    top:calc(50% - 25px);
    width: 100%;
}
.carouselHolder .owl-nav > * {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 20px !important;
    background-color: #F5F3ED;
    color:#1A130F !important;
    padding-top: 6px !important;
}
.carouselHolder .owl-nav .owl-prev {
    left: 0;
}
.carouselHolder .owl-nav .owl-next {
    right: 0;
}
.carouselHolder.owl-nav-outer .owl-nav .owl-prev {
    left: -60px;
}
.carouselHolder.owl-nav-outer .owl-nav .owl-next {
    right: -60px;
}
.carouselHolder .owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 31px;
}


.gallery-item {
    aspect-ratio: 1/1;
    background-color: #FFF;
    border-radius: 15px;
    overflow: hidden;
}
.gallery-item.gallery-item-autoheight {
    aspect-ratio: auto;
    position: relative;
}
.gallery-item .image-holder {
    background-color: #777777;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.gallery-item .gallery-caption {
    background-color: #FFF;
    border-radius: 0 0 15px 15px;
    padding: 15px;
    text-align: center;

    font-size: 15px;
    font-weight: 400;
    line-height: 120%;
}
.owl-item .gallery-item img {
    border-radius: 15px 15px 0 0;
    width:100% !important;
    height: 100% !important;
    max-width: none;
    max-height: none;
}
.object-fit-cover {
    height: 100% !important;
}



.checkoutForm .form-label {
    display: none;
}
.cartRule {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.cartRule .removeFromCartHolder {
    position: absolute;
    z-index: 2;
    right: 3px;
    top: 3px;
    border-radius: 20px;
    padding: 0;
    margin: 0;
    line-height: 0;
    width: 17px;
}


.elephantCard {
    background-color: #FFF;
    border-radius: 15px;
    border:0;
}
.elephantCard .info {
    position: relative;
}
.elephantCard .labelHolder {
    position: absolute;
    right:15px; top:10px;
}
.elephantCard .iconHolder {
    position: absolute;
    right:10px; top:10px;
    width: 50px;
    white-space: nowrap;
    text-align: right;
}
.elephantCard .iconHolder img {
    display: inline-block;
    /*margin-left: 5px;*/
    max-width: 23px;
    max-height: 23px;
    width: 100%;
    height: auto;
}
.elephantCard img.productImage {
    border-radius: 15px 15px 0 0 ;
}
.elephantCard .list-group-flush .list-group-item {
    padding:0;

    font-size: 15px;
    font-weight: 500;
}
.elephantCard .list-group-flush .list-group-item:not(:last-child) {
    border-bottom:1px dashed #1A1310;
}





.campaignHeader {
    padding-top: 120px;
    padding-bottom: 40px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

}
.campaignHeader > .container > .row {
    min-height: 65vh;
}
.campaignHeader .container {
    z-index: 2;
}
.campaignHeader .background {
    left:0; top:0;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.campaignHeader .overlay {
    left:0; top:0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #353e13;
    background: linear-gradient(345deg, rgba(53, 62, 19, 0.39) 0%, rgba(16, 18, 17, 0.69) 100%);
}

#progressSection {
    z-index: 2;
    margin-top: -100px;
}

.donationCard {
    border-radius: 15px;
}
.card-donation {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border:2px solid #FFF !important;
    position: relative;
    aspect-ratio: 16 / 10;
    padding: 10px 5px;
    border-radius: 7.5px;
}
.card-donation.active {
    border:2px solid #774F34 !important;
}

.card-period {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border:2px solid #FFF !important;
    position: relative;
    aspect-ratio: 16 / 8;
    padding: 10px 5px;
    border-radius: 7.5px;
}
.card-period.active {
    border:2px solid #774F34 !important;
}

.card-donation .badgeHolder,
.card-period .badgeHolder {
    display: none;
    position: absolute;
    width: 100%;
    left:0; top:-18px;
    text-align: center;
}
.card-donation.active .badgeHolder,
.card-period.active .badgeHolder {
    display: block;
}
.card-donation .text-center {

}
.card-donation .price {
    font-weight: 600;
    font-size: 41px;
    line-height: 100%;
    letter-spacing: -2px;
}
.card-donation .otherPrice {
    line-height: 0.9em;
    font-weight: 500;
}


.campaignCard {
    background-color: #FFF;
    border-radius: 15px;
    border:0;
}
.campaignCard .info {
    position: relative;
}
.campaignCard .labelHolder {
    position: absolute;
    right:15px; top:10px;

}
.campaignCard img.campaignImage {
    border-radius: 15px 15px 0 0 ;
}
.campaignCard .title {
    height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


.articleCard {
    background-color: #FFF;
    border-radius: 15px;
    border:0;
}
.articleCard .info {
    position: relative;
}
.articleCard .labelHolder {
    position: absolute;
    right:15px; top:10px;
}
.articleCard img.image {
    border-radius: 15px 15px 0 0 ;
}


.productCard {
    background-color: #FFF;
    border-radius: 15px;
    border:0;
}
.productCard .image {
    max-width: 100%;
    aspect-ratio: 1 / 1;
}
.productCard.subscriptionCard .image,
.productCard.subscriptionCard .productImage {
    max-width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}
.productCard .info {
    position: relative;
}
.productCard .labelHolder {
    position: absolute;
    right:15px; top:10px;
}
.productCard img.productImage {
    border-radius: 15px 15px 0 0 ;
}

.productCard .priceHolder {
    position: relative;
}
.productCard .priceHolder .card {
    position: absolute;
    right:30px;
    top:-50px;
}

.productCard .title {
    height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


.productCard .categoryHolder {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
}
.productCard .categoryHolder .rounded-pill {
    margin: -17px 15% 0 15%;
}


.productCard .tagHolder {
    position: absolute;
    z-index: 2;
    top: -15px;
    left: 20px;
}
.productCard .list-group-flush > li{
    padding:2px 0;

    border-bottom:0;
    border-bottom: 1px dashed #1A1310;
    opacity: 1;
}

.productCard.subscriptionCard .giftImage {
    position: absolute;
    right: 10px;
    top: 7px;
    width: 125px;
    z-index: 100;
}


.productInfo .productImage {
    text-align: center;
}
.productInfo .productImage img {
    display: inline-block;
}
.fo .productInfo h1 {
    font-size: 45px;
    line-height: 40px;
}
.fo .productInfo h1 + big {
    font-size: 41px;
    line-height: 30px;
}


.contentslider-item {

}
.contentslider-item .title {
    height: 1.1em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.contentslider-item .text {
    height: 4.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.elephant-header {
    padding-top: 160px;
    background-image: url('/img/assets/header-paper.jpg');
    background-position: center center;
    background-size: cover;

    z-index: 1021; /*So the submenu will not overlap*/
}
.elephant-header .card {
    border-radius: 15px;
    border:0;
    z-index: 5;
}
.elephant-header .card .card-body{
    padding: 30px;
}
.elephant-header h1 {
    font-size: 36px !important;
    line-height: 38px !important;
    font-weight: 600 !important;
}
.elephant-header .text {
    font-size: 17px;
    line-height: 130%;
    font-weight: 400;

}
.elephant-header .disclaimer {
    font-size: 15px;
    line-height: 134%;
}
.elephant-header .attributes {
    font-size: 17px;
    line-height: 125%;
    font-weight: 400;
}

.elephant-header .placeMap {
    position: absolute;
    width: 115%;
    opacity: 0.5;
    z-index: 1;
    top:-100px;
}
.elephant-header .profileImage {
    position: relative;
    aspect-ratio: 1/1;
    width:145%;
    margin-left: -200px;
}
.elephant-header .profileImage img {
    position: relative;
    display: block;
    width: 100%;
    right:-60px;
    bottom:-20px;
    z-index: 10;
}



.accordion-button:not(.collapsed) {
    background-color: var(--bg-accent-brown);
}


.pagination .page-item.active .page-link {
    background-color: #774F34;
    color:#FFFFFF;
}
.pagination .page-link, .page-link {
    border-color: #DBD2BE;
    color:#774F34;
    background-color: #F5F3ED;
}
.page-item:last-child .page-link {
    border-radius:0 20px 20px 0;
}
.page-item:first-child .page-link {
    border-radius:20px 0 0 20px;
}