/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
 
html {
    scroll-behavior: smooth;
}

div#_desktop_top_menu {
    width: 100%;
}

#top-menu {
    text-align: center;
    margin-bottom: 0;
}

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

p.text-nav-top {
    color: #000;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0;
    height: 32px;
    display: table-cell;
    vertical-align: middle;
    font-size: 12px;
    font-weight: 500;
}

.text-nav-top::after {
    content: "";
    background-image: url(/impact_nation/img/nav-top-effect.png);
    width: 40px;
    height: 35px;
    position: absolute;
    top: 0;
    background-repeat: no-repeat;
}

#custom-text p {
    margin: 0;
    display: table-cell;
    vertical-align: middle;
    height: 32px;
}

#header .menu>ul>li {
    height: 100%;
}

#wrapper {
    padding-top: 0;
}

ul.carousel-inner {
    margin-bottom: 0;
}

.slide-bottom {
    text-align: center;
    margin-top: -6rem;
    position: relative;
}

.banner-bottom {
    text-align: center;
    margin-top: -3rem;
    position: relative;
}

.f-full-width {
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    left: 50%;
}

.home-banner {
    min-height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
}

.banner-logo {
    float: right;
    margin-top: 4.5rem;
}

.banner-desc {
    max-width: 625px;
    padding-right: 3rem;
    padding-top: 4.5rem;
}

h5.banner-text-1 {
    color: #b5a16a;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 500;
    font-size: 13px;
}

h2.banner-text-2 {
    margin-bottom: 1.5rem;
    font-size: 1.7rem;
    font-weight: 400;
    text-transform: uppercase;
}

p.banner-text-3 {
    font-weight: 200;
    font-size: 15px;
}

.banner-line {
    width: 45px;
    height: 2px;
    background: #b5a16a;
}

.bg-dark {
    background-color: #000;
}

.color-white {
    color: #fff;
}

.color-dark {
    color: black;
}

main {
    overflow: hidden;
}

.block-social li a .fa {
    font-size: 1rem;
    line-height: 30px;
}

#top-menu a {
    color: #fff;
    text-align: inherit;
    text-transform: uppercase;
    font-weight: 400;
}

.block-social li a .fa:hover {
    color: #b5a16a;
}

.block-social li a:hover {
    color: transparent;
}

.category-title {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    font-weight: 400;
    color: #b5a16a;
    margin-top: 2.5rem;
}

.header-top i.material-icons {
    font-size: 2rem;
    padding-top: 6px;
}

.header-top #search_widget:hover button::before {
    background-position: -311px -116px;
}

.header-top #search_widget:hover button::before, .header-top #search_widget.inputfocus button::before {
    background-position: -310px -116px;
}

.header-top .search-widget form button[type=submit] {
    top: 0px;
    left: auto;
    right: 0px;
    bottom: 0px;
    margin: 0px;
    padding: 0px;
    outline-style: none;
    cursor: pointer;
}

.header-top #search_widget.search-widget form input[type=text] {
    width: 0px;
    padding: 0px;
    min-width: initial;
    width: 40px;
    height: 40px;
    background: transparent;
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    border: 1px solid transparent;
    margin-top: 4px;
    outline: none;
}

.header-top #search_widget.search-widget:hover form input[type=text], .header-top #search_widget.search-widget form input[type=text]:focus {
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    width: 100%;
    background: #fff;
    border-color: #b5a16a;
    padding: 0px 40px 0px 10px;
    outline: none;
}

.header-top #search_widget.search-widget form input[type=text] {
    width: 0px;
    padding: 0px;
    min-width: initial;
    width: 40px;
    height: 38px;
    background: transparent;
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    border: 1px solid transparent;
    border-radius: 8px;
    margin-top: 1px;
    margin-right: -5px;
    outline: none;
}

span.cart-products-count {
    position: absolute;
    font-size: 10px;
    top: -9px;
    margin-left: -2px;
}

#search_widget {
    width: 100%;
}

#cart #wrapper, #checkout #wrapper {
    background: linear-gradient(180deg, #f6f6f6, #fff);
}

.coupon-text{
    text-align: center;
    margin-top: 2rem;
    color: #fff;
    font-size: 11px;
    padding: 0px 15px;
}

.cart-item {
    border-bottom: 1px solid #f1f1f1;
}

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

.page-title {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-top: 2rem;
    font-size: 1.8rem;
    font-weight: 400;
    color: #b5a16a;
    text-transform: uppercase;
}

#checkout .block-promo {
    display: none;
}

button#dropdownMenu1 {
    outline-style: none;
    background: #b5a16a;
    border-radius: 30px;
    padding: 8px 12px;
    color: #fff;
}

#carousel .social-sharing.dropdown {
    bottom: -2px !important;
}

.social-sharing.dropdown {
    position: absolute;
    bottom: -18px;
    margin-left: 20px;
    z-index: 999;
}

#product .social-sharing.dropdown {
    position: fixed !important;
    left: 10px !important;
    top: 30% !important;
    bottom: unset !important;
     margin-left: unset !important;
}

.icon-gray a:hover {
    color: #fff !important;
}

.icon-gray a {
    color: #000 !important;
}

button#dropdownMenu1:hover {
    color: #000;
}

#cart #notifications {
    background: transparent;
    position: absolute;
    z-index: 999;
    width: 100%;
}

#contact #wrapper {
    background: linear-gradient(180deg, #f6f6f6, #fff);
    padding-top: 3rem;
    padding-bottom: 3rem;
}

#contact #wrapper div:first-child {
    background: #fff;
}

.icon-top {
    margin-top: 7px;
}

img.logo.img-responsive.right-slide {
    position: absolute;
    bottom: 30px;
    right: 10px;
}

.links p.h3.hidden-sm-down {
    text-transform: capitalize;
    font-size: 15px;
}

.tree-msg {
    text-align: center;
    font-size: 11px;
    display: table-cell;
    line-height: 30px;
    padding-left: 40px;
    color: #313e47;
}

.block-contact.col-md-3.links.wrapper {
    font-size: 14px;
    font-weight: 400;
}

.block-contact.col-md-3.links.wrapper i {
    color: #000;
    margin-right: 8px;
}

.row.px-3.separator-bottom {
    border-bottom: 1px solid #ccc;
    box-shadow: 0px 12px 18px -16px rgb(0 0 0 / 28%);
}

button#dropdownMenu1:before {
    content: "Share";
    position: absolute;
    color: #b5a16a;
    transform: rotateZ( -90deg );
    top: -30px;
    margin-left: -13px;
    text-transform: uppercase;
    font-size: 13px;
}

#about .page-title, #joinus .page-title, #cause .page-title{
    padding-top: 0 !important;
}

.trees {
    font-size: 10px;
    float: right;
    color: #48a100;
}

#_desktop_logo .logo {
    max-width: 130px;
}

@media (max-width: 767px) {
    .slide-bottom :first-child {
        opacity: 0;
    }
    
    span.cart-products-count {
        top: 0px;
    }
    
    .icon-top {
        margin-top: 0px !important;
    }
    
    #header .header-nav {
        max-height: 50px !important;
    }
    
    #products .product-description, .featured-products .product-description, .product-accessories .product-description, .product-miniature .product-description {
        width: 130px;
        height: 100px;
    }
    
    #products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container {
        height: 182px;
        width: 130px;
    }
    
    .page-title {
        font-size: 1.4rem;
    }
    
    .col-md-2.col-xs-12.test:before {
        display: none;
    }
    
    .col-md-2.col-xs-12.test:after {
        display: none;
    }
    
    .slide-bottom img.logo.img-responsive, .banner-bottom img.logo.img-responsive {
        max-width: 120px;
    }
    
    .slide-bottom {
        margin-top: -5rem;
    }
    
    .banner-bottom {
        margin-top: -2rem;
    }
    
    svg#Capa_1:hover, svg.icon-top:hover {
        fill: #fff !important;
    }

}


.col-md-2.col-xs-12.test:before {
    content: "";
    width: 1px;
    left: 1px;
    top: -24px;
    height: auto;
    position: absolute;
    background: #b5a16a;
    bottom: -32px;
}

.col-md-2.col-xs-12.test:after {
    content: "";
    width: 1px;
    right: 1px;
    top: -24px;
    height: auto;
    position: absolute;
    background: #b5a16a;
    bottom: -32px;
}

#product #wrapper .breadcrumb li:last-child {
    display: none;
}

#product #wrapper .breadcrumb li:nth-last-child(-n+2):after {
    content: "";
}

#product #wrapper .breadcrumb li a {
    color: #b5a16a;
}

#product #wrapper .breadcrumb li:after {
    color: #b5a16a;
}

#header .header-top {
    top: -70px;
}

.fixed-top {
    position: fixed;
    top: 0 !important;
    left: 0;
    width: 100%;
    z-index: 99999;
    background: #fff;
    transition: top 1s ease;
    box-shadow: 0px 1px 10px #999;
}

#footer .block-social {
    float: right;
}

body#checkout section.checkout-step .step-number {
    margin-right: 1.563rem;
    border: 3px solid #b5a16a;
    height: 30px;
    border-radius: 50%;
    width: 30px;
    text-align: center;
}

body#checkout section.checkout-step:not(:last-child):after {
    content: " ";
    position: absolute;
    left: 29px;
    top: 45px;
    width: 2px;
    background: #b5a16a;
    height: calc( 100% - 29px );
    z-index: 9999;
}

body#checkout section.checkout-step {
    position: relative;
}

.brand-img img {
    border: 2px solid #efefef;
}

.blockcart.cart-preview {
    padding-top: 5px;
}

.card-join {
    position: relative;
    text-align: center;
    padding: 2rem;
    border: 1px solid rgb(0 0 0 / 8%);
    transition: .5s;
}

.card-join:hover {
    -webkit-transform: scaleY(1.1);
    transform: scaleY(1.1);
    box-shadow: 0px 10px 20px rgb(0 0 0 / 8%);
    background: #b5a16a;
    transition: .5s;
}

.card-join-hover {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 3rem;
    width: 100%;
    transition: .5s;
}

.card-join:hover .card-join-b {
    opacity: 0;
    visibility: hidden;
}

.card-join:hover .card-join-hover {
    opacity: 1;
    visibility: visible;
    transition: .5s;
}

.card-join h5 {
    font-weight: 800;
    font-size: 22px;
}

svg#Capa_1:hover, svg.icon-top:hover {
    fill: #b5a16a;
}

span.animation {
    width: 29px;
    height: 45px;
    position: absolute;
    border: 3px solid #bfa373;
    border-radius: 50px;
    left: calc(50% - 14.5px);
}

span.animation::after {
    content: " ";
    width: 7px;
    height: 7px;
    position: absolute;
    background: #bfa373;
    border-radius: 50px;
    bottom: 5px;
    left: 8px;
    animation-name: swipe;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
}

@keyframes swipe {
  0%   {top:5px;}
  50%  {top:27px;}
  100% {top:5px;}
}

.cause-title {
    position: absolute;
    z-index: 1;
    background: #fff;
    bottom: 4rem;
    padding: 1rem;
    padding-right: 4rem;
}

.cause-title-right {
    position: absolute;
    z-index: 1;
    background: #fff;
    bottom: 4rem;
    padding: 1rem;
    padding-right: 4rem;
    right: 0;
}