/*----------------------------------------*/
/*  Font Futura
/*----------------------------------------*/

@font-face {
    font-family: "Futura";
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/futura/futura-lig-webfont.eot);
    src: url(../fonts/futura/futura-lig-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/futura/futura-lig-webfont.woff2) format("woff2"), url(../fonts/futura/futura-lig-webfont.woff) format("woff"), url(../fonts/futura/futura-lig-webfont.svg#futuraligregular) format("svg");
}

@font-face {
    font-family: "Futura";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/futura/futura-med-webfont.eot);
    src: url(../fonts/futura/futura-med-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/futura/futura-med-webfont.woff2) format("woff2"), url(../fonts/futura/futura-med-webfont.woff) format("woff"), url(../fonts/futura/futura-med-webfont.svg#futuramedregular) format("svg");
}

@font-face {
    font-family: "Futura";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/futura/futura-bol-webfont.eot);
    src: url(../fonts/futura/futura-bol-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/futura/futura-bol-webfont.woff2) format("woff2"), url(../fonts/futura/futura-bol-webfont.woff) format("woff"), url(../fonts/futura/futura-bol-webfont.svg#futurabold) format("svg");
}










body {
    font-family: "Futura";
    overflow-x: hidden !important;
}

header .heading {
    background-color: #fff;
    height: 27px;
    line-height: 16px;
    font-size: 17px;
    border-top: 2px solid #18c47d;
}

header .img-bg, #topNav #menuBar {
    background-color: #18c47d;
}
header .img-bg{
    border-bottom: 1px dashed #fff;
    /*height:109px!important;*/
}
a.text-dark {
    margin-top: 10px;
}

    a.text-dark:hover {
        color: #416607 !important;
    }

/* Sticky Navigation */
#topNav.navScrolled {
    position: fixed;
    width: 100vw;
    top: 0;
    z-index: 1;
    box-shadow: 0px 1px 5px #232323;
    border: none !important;
}
#topNav:hover{
    z-index:1003!important;
}
header {
    position: relative!important;
}
.navbar-collapse li.nav-item a.nav-link {
    color: #fff;
    text-transform: uppercase;
    padding-top: 12px;
    padding-bottom: 12px;
}

.list-group-flush > p.list-group-item {
    font-size: 15px;
    padding: 6px 0;
    margin-bottom: 10px !important;
    border-bottom: 1px solid #18c47d;
}
    .list-group-flush > p.list-group-item:hover {
        background-color: #18c47d0f;
    }


.list-group-flush > .list-group-item-action {
    border-width: 0 0 0px;
    padding: 6px 0;
    font-size: 15px;
    text-transform: uppercase;
}

    .list-group-flush > .list-group-item-action:hover {
        color: #232323;
        background-color: #18c47d0f;
        border-bottom: 1px solid #18c47d;
    }

/*.dropdown-toggle:after{
         content: "\f107"!important;
         }
         */
.dropdown a.link-secondary {
    color: #fff;
}

.breadcrumb-item a {
    color: #fff;
}

.breadcrumb-item.active {
    color: #fff;
}

.breadcrumb-item + .breadcrumb-item:before {
    color: #fff;
    content: var(--mdb-breadcrumb-divider,">") /*!rtl: var(--mdb-breadcrumb-divider, ">") */;
}

.filter-marker {
    top: 40%;
    transform: translate3d(0,0,0);
    right: 25px;
    height: 30px;
    position: absolute;
}

    .filter-marker .bar {
        background: #ccc;
        display: block;
        height: 2px;
        margin-bottom: 2px;
        right: 7px;
        transform-origin: 50% 50%;
        transition: all .2s ease-in;
        width: 16px;
        z-index: 20;
    }

.navbar .form-outline:after:first-child {
    background: #fff !important;
}
/*#navbarFilter div[class*="col-"]{
    			font-family: "Roboto Condensed","Arial Narrow",sans-serif;
    			height: 62px;
		}*/
#navbarFilter .form-outline {
    font-family: "Roboto Condensed","Arial Narrow",sans-serif;
    height: 62px;
    /*background: #ccc;
		    content: "";
		    height: 70%;
		    left: -1px;
		    position: absolute;
		    top: 15%;
		    width: 1px;
		    z-index: 5;*/
}

#navbarFilter .dropdown-menu.show .form-check.form-check-inline {
    width: 100%;
}

#navbarFilter .form-outline .dropdown, #navbarFilter .form-outline .form-white, .navbar .input-group .form-outline input#search-input, .navbar .input-group .form-outline input#age-input, .navbar .input-group .form-outline button {
    height: 100% !important;
}

#navbarFilter div[class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.navbar .input-group .form-outline input#search-input, .navbar .input-group .form-outline input#age-input {
    padding-top: 25px;
}

#navbarFilter .form-outline .form-control.active ~ .form-label, #navbarFilter .form-outline .form-control:focus ~ .form-label {
    transform: translateY(-11px) translateY(0.1rem) scale(.8) !important;
    margin-top: 0px !important;
    margin-left: 9px;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-align: left;
    top: 15px !important;
    color: #007373 !important;
}

#navbarFilter .form-outline .form-white input:hover,
#navbarFilter .form-outline button:hover,
#navbarFilter .form-outline .form-white input.active,
#navbarFilter .form-outline button.active {
    background: #eaffdb !important;
    color: #416607 !important;
    border-radius: 0px;
}

    /*#navbarFilter .form-outline button:hover .icon-bars:before,
	  #navbarFilter .form-outline button.active .icon-bars:before{
		content:"\f130";
         transition: all .2s ease-in;

	  }*/
    #navbarFilter .form-outline button:hover .bar:nth-child(3n+1),
    #navbarFilter .form-outline button.active .bar:nth-child(3n+1) {
        right: 7px;
        top: 7px;
        position: absolute;
        width: 12px;
        transform: rotate(45deg);
    }

    #navbarFilter .form-outline button:hover .bar:nth-child(3n+2),
    #navbarFilter .form-outline button.active .bar:nth-child(3n+2) {
        opacity: 0;
        right: 0;
        top: 24px;
        transform: rotate(-135deg);
    }

    #navbarFilter .form-outline button:hover .bar:nth-child(3n),
    #navbarFilter .form-outline button.active .bar:nth-child(3n) {
        right: 0px;
        top: 7px;
        width: 12px;
        position: absolute;
        transform: rotate(135deg);
    }

#navbarFilter .form-outline .form-white:after, #navbarFilter .form-outline input#age-input:before, #navbarFilter .form-outline button:before {
    background: #cfcfcf;
    content: "";
    position: absolute;
    z-index: 2;
}
.height-unset {
    height: unset !important;
}

@media only screen and (min-width: 1025px) {
    #navbarFilter .form-outline input#age-input:before, #navbarFilter .form-outline button:before {
        height: 70%;
        left: 0;
        top: 15%;
        width: 1px;
    }

    #navbarFilter .form-outline .form-white:after {
        height: 70%;
        right: 0;
        top: 15%;
        width: 1px;
    }

    .dropdown-hover > .dropdown-menu {
        transform: translate3d(0,-100%,0);
        transition: all .2s ease-in;
    }

    .dropdown-hover:hover > .dropdown-menu {
        display: inline-block;
        transition: all .2s ease-in;
        transform: translate3d(0,0,0);
        left: 0;
    }

    .dropdown-hover > .dropdown-toggle:active {
        /*Without this, clicking will make it sticky*/
        pointer-events: none;
    }
}

@media only screen and (max-width: 1100px) {
}

.filter-label {
    text-transform: none;
}

    .filter-label .filter-category, .navbar .input-group .form-outline label {
        font-size: 15px;
        font-weight: 600;
        text-align: left;
        top: 15px;
    }

.navbar .input-group .form-outline label {
    font-weight: 100 !important;
    font-family: "Roboto Condensed","Arial Narrow",sans-serif;
}

.navbar .input-group .form-outline .form-control:focus ~ .form-label {
    top: 10px;
    padding-bottom: 4px;
}

.navbar .input-group .form-outline .form-control:focus {
}

.filter-label .selected-options {
    text-align: left;
    margin-top: 3px;
    font-size: 15px;
}

#navbarFilter .form-check-input[type=checkbox], #navbarFilter .form-check-input[type=radio] {
    background: #ccc;
    border: 1px solid #ccc !important;
    height: 22px;
    width: 22px;
}

    #navbarFilter .form-check-input[type=radio]:checked {
        border: 1px solid #ccc !important;
    }

    #navbarFilter .form-check-input[type=checkbox]:focus:after {
        background: transparent;
        border: none;
    }

    #navbarFilter .form-check-input[type=checkbox]:after {
        background: transparent;
        border: 3px solid transparent;
        border-top: 0;
        border-left: 0;
        margin-left: 8px;
        margin-top: 8px;
        height: 3px;
        width: 3px;
    }

    #navbarFilter .form-check-input[type=radio]:after {
        background: transparent;
        border: 3px solid transparent;
        height: 0px;
        width: 0px;
        left: 7px;
        top: 7px;
        transition: all .2s ease-in;
    }

    #navbarFilter .form-check-input[type=checkbox]:checked:after {
        border: 3px solid #fff;
        border-top: 0;
        border-left: 0;
        margin-left: 8px;
        margin-top: 2px;
        height: 12px;
        width: 6px;
        transition: all .2s ease-in;
    }

    #navbarFilter .form-check-input[type=radio]:checked:after {
        background: #232323;
        border-color: #232323;
        left: 10px;
        top: 10px;
        height: 12px;
        width: 12px;
        transition: all .2s ease-in;
    }

#navbarFilter .form-check-input:focus:before {
    opacity: .12;
    box-shadow: none;
    transform: none;
    transition: none;
}

#navbarFilter .form-check-input[type=checkbox]:hover,
#navbarFilter .form-check-input[type=radio]:hover {
    border: 1px solid #416607 !important;
}

.form-check-input[type=checkbox]:checked {
    background-color: #416607 !important;
    border: 1px solid #416607 !important;
}

,
.form-check-input[type=radio]:checked {
    border: 1px solid #ccc !important;
}

    .form-check-input[type=checkbox]:checked ~ label,
    .form-check-input[type=radio]:checked ~ label {
        color: #416607;
    }

    .form-check-input[type=radio]:checked:after {
        background: #232323;
        border-color: #232323;
        left: 8px;
        top: 8px;
        background-color: #232323;
    }

#menuBar li.nav-item.dropdown a.nav-link[aria-expanded=true]:before {
    border-bottom: 10px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    bottom: 0px;
    margin-left: 30px;
    z-index: 9;
    content: "";
    position: absolute;
}

#colorNavSelected .dropdown-menu:before, #recipientNavSelected .dropdown-menu:before, #trendSortNavSelected .dropdown-menu:before {
    border-bottom: 10px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    bottom: 100%;
    content: "";
    height: 12px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 0;
}

.dropdown button[data-mdb-trigger="hover"]:hover > .dropdown-menu {
    display: inline-block;
    transition: all .2s ease-in;
    transform: translate3d(0,0,0);
    left: 0;
}

.dropdown-menu {
    box-shadow: 0 0 1rem rgb(0 0 0 / 30%);
    z-index: 4;
}

    .dropdown-menu[data-mdb-popper] {
        margin-top: 10px;
    }

#body-content .row .card {
    margin: 10px 0;
    border-radius: 20px;
}

.modal.fade .modal-dialog {
    transition: transform .3s ease-out;
    transform: translateX(200px);
}

.modal.fade.show .modal-dialog {
    transform: translateX(0px);
}

.text-pink {
    color: #e30189;
}

.btn-pink {
    background: #d5d817;
    color: #416607 !important;
    border: 2px solid #416607;
}

.btn-custom, .bg-custom {
    background-color: #18c47d;
    color: #fff;
}

.btn-custom-outline-light {
    border: 1px solid #8b6c17;
    color: #fff;
}

    .btn-custom-outline-light:hover {
        border: 1px solid #fff;
        color: #fff;
    }


#CartandProfileIcons {
    transition: transform .3s ease-out;
    transform: translatey(0px);
    z-index: 9;
}

    #CartandProfileIcons.fixed-top {
        transform: translateY(100px);
    }

/* On screens that are 553px or less, set the background color to olive */
@media screen and (min-width: 1025px) {
    #CartandProfileIcons.fixed-top {
        position: fixed;
        top: 10px;
        right: 5px;
        left: inherit;
        transition: all .2s ease-in;
        transform: translate3d(0,0,0);
    }

    #headerLogo.fixed-logo {
        position: fixed;
        left: 5px;
        /*transition: all .2s ease-in;
        transform: translate3d(0,0,0);*/
        top:0px;
        z-index: 99999;
        width: fit-content;
    }
        #headerLogo.fixed-logo img {
            height: 48px;
            padding: 0 !important;
            margin: 0 !important;
        }
    #headerLogo.fixed-top-CostomizePage {
        position: fixed;
        left: 5px;
        transition: all .2s ease-in;
        transform: translate3d(0, 0, 0);
        z-index: 3;
        width: fit-content
    }
        #headerLogo.fixed-top-CostomizePage img {
            height: 48px;
            padding: 0 !important;
            margin: 0 !important;
        }
}

a, button, a i, button i {
    cursor: pointer;
}

.modal .btn, .modal input[type=text],
.modal input[type=password],
.modal input[type=email] {
    height: 45px;
    border-radius: 0px !important;
}

.modal .btn, .modal div.form-group {
    margin-top: 20px;
    font-size: 14px;
}

    .modal div.form-group:first-child {
        margin-top: 0px !important;
    }

.modal input {
    border: 1px solid #232323;
}
.modal-body button {
    border-bottom: 5px solid #58a700;
    height: 50px!important;
    margin-top: 25px!important;
}
    .modal-body button:hover {
        background-color: #fff;
        color: #58a700;
    }

/* FLIP */

@import 'https://fonts.googleapis.com/css?family=Lily+Script+One';


.flip {
    perspective: 1000px;
    transition: transform 0.5s;
    box-shadow: inset 0 0 10px #ccc;
}

.card-img {
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    transition: transform 1s;
    transform-origin: left;
}

.flip:hover .card-img {
    transform: rotateY( -40deg );
    transition: transform 0.5s;
    /*margin-left: -50px;*/
}

.front {
    position: relative;
    background: white;
    /*line-height: 300px;*/
    color: #03446A;
    text-align: center;
    font-size: 60px;
    border-radius: 5px;
    backface-visibility: hidden;
}

.back {
    position: absolute;
    background: #ddd;
    height: 300px;
    backface-visibility: hidden;
}


.bg-image-card-with-blue-envelope {
    background-image: url('../images/card-bg.png');
    /*padding: 40px 0px;*/
    /*position: relative;*/
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 100% 553px;
    font-family: "ShadowsIntoLightTwo-Regular" !important;
}


    .bg-image-card-with-blue-envelope .container {
        padding-top: 90px;
        padding-bottom: 53px;
        max-width: 940px;
    }
        .bg-image-card-with-blue-envelope .container .justify-content-center {
            background-image: url('../images/card-envelope.png');
            background-repeat: no-repeat;
            background-size: 100% 430px;
        }



@media only screen and (min-width: 1024px) {
    #topNav.sticky-top.fixed-top-header{
        position:fixed!important;
        width:100%;
    }
}
@media only screen and (max-width: 1024px) {
    .bg-image-card-with-blue-envelope .container .justify-content-center {
        background-image: none;
        background-size: unset;
    }
        .bg-image-card-with-blue-envelope .container .justify-content-center h3 {
            background-image: none !important;
            background-size: unset !important;
            position: relative !important;
            padding-top: 15px;
            padding-bottom: 15px;
            margin-top:0px!important;
            color:#000!important;
            font-weight:bold!important;
        }
    .sticky-top {
        position: fixed !important;
        width: 100%;
        top: 0px;
    }
    .bg-image-card-with-blue-envelope .container {
        padding-top: 30px!important;
    }
}
/*#flipbook {*/
    /*margin-top: 51px !important;*/
/*}*/
    .bg-image-card-with-blue-envelope .container .col-md-4 {
        text-align: left;
    }

    .bg-image-card-with-blue-envelope h3.main-heading {
        color: #fff !important;
    }

    .body-content h3.main-heading {
        color: #232323 !important;
    }

    .featured_cards {
        border-bottom: 1.5px dashed #416607;
        height: 53px;
        margin-bottom: 0px !important;
    }

    .bg-image-card-with-blue-envelope p.main-paragarph {
        font-size: 20px;
        font-weight: normal;
    }


    section.imagem {
        position: relative;
        min-height: 400px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    section .body-content {
        padding: 20px 0px;
    }

    section.imagem > article {
        font-size: 32px;
        letter-spacing: 5px;
        text-transform: uppercase;
        color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    section#img02 {
        background-color: #fff;
    }

    .carousel {
        border-radius: 30px;
        z-index: 0;
        min-height: 550px;
    }

        .carousel .carousel-inner {
            min-height: 100%;
            overflow: hidden;
            border: 4px solid #fff;
            border-radius: 30px !important;
        }

            .carousel .carousel-inner .carousel-item {
                height: 100% !important;
                padding: 50px 0px;
            }

                .carousel .carousel-inner .carousel-item .testimonial-content:before {
                    content: "“";
                    color: #8b6c17;
                    position: absolute;
                    top: 30px;
                    font-family: ui-sans-serif;
                    font-size: 150px;
                }

                .carousel .carousel-inner .carousel-item .testimonial-content:after {
                    content: "”";
                    color: #8b6c17;
                    position: absolute;
                    bottom: -30px;
                    right: 100px;
                    font-family: ui-sans-serif;
                    font-size: 150px;
                }

    .testimonial-content {
        color: #1d3e75;
        font-family: "ShadowsIntoLightTwo-Regular" !important;
    }

    .carousel-indicators {
        margin-bottom: 100px;
    }

        .carousel-indicators .active {
            opacity: 1;
            width: 80px;
        }

        .carousel-indicators [data-mdb-target] {
            height: 9px;
            border-radius: 5px;
            border: none;
        }

    .testimonial-img {
        margin-top: 10px;
        background-image: url(../images/testimonial-BG.png);
        height: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

        .testimonial-img img {
            width: 300px;
            margin: 76px 0;
            padding-left: 25px;
        }

    .testimonial-content p {
        text-align: justify;
        font-size: 20px;
    }

    .testimonial-content h3 span.text-muted {
        color: #bebebe !important;
    }


    #your-details .btn,
    #your-details input[type=text],
    #your-details input[type=number],
    #your-details input[type=password],
    #your-details input[type=email] {
        height: 40px;
        border-radius: 0 !important;
        margin-bottom: 10px;
    }

    #your-details .nav-item a:hover {
        background: #fff !important;
    }

    #your-details .btn-info.focus, .btn-info:focus, .btn-info:hover {
        color: #000;
    }

    #your-details .nav-item a.active {
        background: #dcdf15 !important;
        color: #000;
        padding-top: 9px;
        height: 40px;
        font-size: 14px;
        cursor: default;
    }

    #your-details .nav-item a {
        color: #000;
        padding-top: 9px;
        height: 40px;
        font-size: 14px;
        cursor: default;
    }

    #your-details p {
        font-size: 15px;
    }

    .trustmark-items .available-cards i {
        color: #a1a3b8;
        font-size: 30px;
    }



    .flipbook-viewport {
        /*overflow:hidden;*/
        width: 100%;
        height: 100%;
    }

        .flipbook-viewport .container {
            position: relative;
            top: 50%;
            left: 50%;
            margin: auto;
        }

    /*.page-content{
                overflow: hidden!important;
              }*/
    @supports (-moz-appearance:none) {
        .page-wrapper div {
            overflow: visible !important;
        }
    }


    .page-wrapper {
        perspective: 3000px;
        -moz-perspective: 3000px;
        -webkit-perspective: 3000px;
        transition: transform 0.5s;
        -moz-transition: transform 0.5s;
        -webkit-transition: transform 0.5s;
    }

    .flipbook-viewport .flipbook {
        /*width:58vw;
                height:85vh;
                left:-30vw;*/
        /*width:922px;*/
        width: 463px;
        /*height:553px;*/
        height: 450px;
        /*left:-416px;*/
        left: -346px;
        /*top:-300px;*/
        top: 0px;
        transition: all 1s ease-in-out 0s;
    }

    .flipbook-viewport .page {
        z-index: 9999 !important;
        overflow: hidden !important;
        width: 346px;
        height: 450px;
        background-color: white;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        perspective: 1000px;
        -moz-perspective: 1000px;
        -webkit-perspective: 1000px;
    }

    .flipbook .page {
        /*-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
                -moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
                -ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
                -o-box-shadow:0 0 20px rgba(0,0,0,0.2);
                box-shadow:0 0 20px rgba(0,0,0,0.2);*/
        height: 450px;
        /*overflow: hidden!important;*/
    }

    .flipbook-viewport .page img {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        margin: 0;
    }

    .flipbook-viewport .shadow {
        -webkit-transition: -webkit-box-shadow 0.5s;
        -moz-transition: -moz-box-shadow 0.5s;
        -o-transition: -webkit-box-shadow 0.5s;
        -ms-transition: -ms-box-shadow 0.5s;
        box-shadow: none !important;
        /*-webkit-box-shadow:0 0 20px #ccc;
                -moz-box-shadow:0 0 20px #ccc;
                -o-box-shadow:0 0 20px #ccc;
                -ms-box-shadow:0 0 20px #ccc;
                box-shadow:0 0 20px #ccc;*/
    }

    .flipbook-viewport .page-inner {
        border: 1px solid #d2d8dd;
        height: 100%;
        background-color: #fff;
        /*color: #232323;*/
    }

        /*.flipbook-viewport .double{
    width:800px;
    height:400px;
    background-size:100% 100%;
}*/
        .flipbook-viewport .page-inner.p-4 {
            padding: 2.5rem !important;
        }

    .page-content-textarea {
        height: 100%;
        border: 1px solid rgb(0 0 0 / 5%);
    }

    .options {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 15px;
    }

    button {
        display: grid;
        place-items: center;
        border-radius: 3px;
        border: none;
        background-color: #ffffff;
        outline: none;
        color: #020929;
    }

    select {
        padding: 7px;
        border: 1px solid #020929;
        border-radius: 3px;
    }

    #prevBtn {
        position: fixed;
        top: 47%;
        left: 10%;
        line-height: 25px;
        z-index: 999;
        transition: all .2s ease-in;
        transition: background .3s ease-in,opacity .3s ease-in,right .6s linear,left .6s linear;
    }

    #nextBtn {
        position: fixed;
        top: 47%;
        line-height: 25px;
        right: 10%;
        z-index: 999;
        transition: all .2s ease-in;
    }

        #prevBtn span, #nextBtn span {
            /*display: none;*/
            transition: all .2s ease-in;
            transition: background .3s ease-in,opacity .3s ease-in,right .6s linear,left .6s linear;
        }

        #prevBtn:hover, #nextBtn:hover {
            transition: all .2s ease-in;
            transition: background .3s ease-in,opacity .3s ease-in,right .6s linear,left .6s linear;
        }

            #prevBtn:hover span, #nextBtn:hover span {
                display: inline;
                transition: all .2s ease-in;
                transition: background .3s ease-in,opacity .3s ease-in,right .6s linear,left .6s linear;
            }

    .options label,
    .options select {
        font-family: "Poppins", sans-serif;
    }

    .input-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    input[type="color"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: transparent;
        width: 40px;
        height: 28px;
        border: none;
        cursor: pointer;
    }

        input[type="color"]::-webkit-color-swatch {
            border-radius: 15px;
            box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #020929;
        }

        input[type="color"]::-moz-color-swatch {
            border-radius: 15px;
            box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #020929;
        }

    .flipbook-page {
        background-color: #fff;
        height: 100%;
        width: 100%;
    }

    .text-input {
        padding: 20px;
        background-color: #fff;
        width: 361px;
        height: 490px;
        overflow: hidden;
        line-break: anywhere;
        -webkit-user-modify: read-write;
        overflow-wrap: break-word;
        pointer-events: all !important;
        font-family: 'Diet Again Regular';
    }

    .flipbook-viewport .page-inner:focus-visible {
        outline: #54b4d3 dashed 1px;
    }

    .text-input:focus-visible {
        outline: none;
    }

    .text-input img {
        display: none;
    }

    .active {
        /*background-color: #e0e9ff;*/
    }

    [contentEditable=false] {
        /*content: attr(data-text);
  font-size: 15px!important;
    left: 5%!important;
    line-height: 1.2em;
    opacity: .4;
    color: #232323;
    padding: 0 10%!important;
    pointer-events: none;
    position: relative;
    top: 50%;
    transform: translate(-50%,-50%);
    transition: opacity .2s ease-in; 
    width: 100%;
    z-index: 5;
    font-family: var(--mdb-font-roboto);*/
    }

    .imagem .container-fluid .col-card .card {
        margin-top: 10px;
        margin-bottom: -8px;
    }

    .formatted a, .formatted h1, .formatted h2, .formatted h3 {
        font-weight: 700;
    }

    .formatted h1, .formatted h2, .formatted h3, .formatted h4 {
        text-transform: uppercase;
    }

    .formatted h1, .formatted h2, .formatted h3, .formatted h4, .formatted h5, .formatted h6 {
        color: #666;
        font-weight: 500;
        line-height: normal;
        margin: 1.5em 0 0.75em;
    }

    .formatted h3 {
        font-size: 2rem;
    }

    .formatted ol > li, .formatted ul > li {
        margin-left: 1rem;
        padding-left: 0.5rem;
    }

    footer {
        background-color: #a74409 !important;
    }

        footer ul.footer-copyright li {
            margin-right: 10px;
        }


    #CartandProfileIcons .dropdown, #CartandProfileIcons button {
        display: none !important;
    }

    .dropdown-menu {
        padding: 0.5rem 10px;
    }


    @media only screen and (min-width: 990px) {
        #navbarExample4 {
            overflow: hidden !important;
        }

        .row .col-md {
            width: 16.66666666666667% !important;
            max-width: 16.66666666666667% !important;
            flex: auto;
        }
    }

    @media only screen and (max-width: 989px) {
        header {
            height: 0px !important;
        }

        div.mobile-mask {
            height: 100vh;
            width: 100vw;
            position: absolute;
            background: #fffc;
            z-index: 9;
        }

        #CartandProfileIcons.fixed-top, #headerLogo.fixed-top {
            transform: translateY(-20px) !important;
            width: fit-content;
        }

        #headerLogo {
            transform: translateY(-20px) !important;
            position: fixed;
            left: 0px;
            top: 5px;
            z-index: 1030;
        }

            #headerLogo img {
                height: 50px !important;
                margin-left: 15px !important;
                margin-top: 13px !important;
            }

        #menuBar ul li.nav-link:last-child {
            position: relative !important;
        }

        #menuBar div.container-fluid, #filterBar div.container-fluid {
            padding: 0px;
        }


        #navbarFilter .form-outline .form-white input#search-input, #navbarFilter .form-outline input#age-input, #navbarFilter .form-outline button {
            border-top: 1px solid #ccc;
            width: 100%;
        }

        #navbarFilter .form-outline .form-white input#search-input, #navbarFilter .form-outline button {
            padding-left: 20px;
        }

        #navbarFilter .form-outline .form-white label[for=search-input] {
            padding-left: 10px;
        }

        #menuBar .main-navbar {
            overflow-y: scroll;
        }

            #menuBar .main-navbar .navbar-collapse {
                width: 80vw;
                height: calc(100vh - 51px);
                position: absolute;
                right: 0;
                /*top: 51px;*/
                z-index: 999;
                background-image: url(../images/dark_blue_texture.png);
            }

        /*#menuBar .main-navbar .navbar-collapse::before {
    background: #fffc;
    content: "";
    z-index: -1;
left: 0px;
position: fixed;
width: 100%;
    height: 100vh;
}*/
        #menuBar .navbar-collapse .nav-item {
            border-top: 1px solid #ccc;
            border-left: 2px solid #416607;
            background: #fff;
        }

            #menuBar .navbar-collapse .nav-item:last-child {
                position: static !important;
            }

            #menuBar .navbar-collapse .nav-item .nav-link {
                padding-left: 15px;
                padding-right: 15px;
                color: #232323 !important;
            }

            #menuBar .navbar-collapse .nav-item .dropdown-toggle:after {
                display: inline-block;
                right: 20px;
                margin-top: 10px;
                position: absolute;
            }


        #menuBar button.navbar-toggler i.icon-bars {
            border-radius: 0px;
            width: 70px;
            height: 50px;
            padding-top: 15px;
            right: 0px;
            position: absolute;
        }

        #menuBar button.navbar-toggler[aria-expanded="true"] i.icon-bars {
            /*background: #416607;*/
            padding-top: 0px;
            font-size: 40px;
        }

        #menuBar button.navbar-toggler[aria-expanded="false"] i.icon-bars:before {
            transform: rotate(0deg);
            transition: all .1s ease-in;
        }

        #menuBar button.navbar-toggler[aria-expanded="true"] i.icon-bars:before {
            content: "\00d7";
            transform: rotate(180deg);
            transition: all .1s ease-in;
        }

        #menuBar .dropdown-menu {
            position: relative;
        }

            #menuBar .dropdown-menu div.row.my-4 {
                margin-top: 0px !important;
                margin-bottom: 0px !important;
            }

        #filterBar .dropdown-menu {
            left: 5%;
            width: 90%;
            margin-top: 0px;
            overflow: scroll;
            height: 400px;
        }

        .bg-image-card-with-blue-envelope {
            /*background-image: url(../images/cards-list_BG.png);*/
            background: #fff;
            background-size: 100% 100%;
            text-align: center !important;
        }

            .bg-image-card-with-blue-envelope .container {
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            .bg-image-card-with-blue-envelope .row {
                /*background: #fff;*/
                /*border: 10px solid #fff;
	    border-top: 50px solid #0e69e2 !important;
			  box-shadow: 9px 7px 15px rgba(140, 140, 140, 0.73);*/
            }

            .bg-image-card-with-blue-envelope img {
                height: 150px!important;
                width: 150px!important;
            }

            .bg-image-card-with-blue-envelope .container .col-md-3 {
                text-align: center !important;
                padding-bottom: 5px !important;
            }

            .bg-image-card-with-blue-envelope h3.main-heading, .body-content h3.main-heading {
                position: absolute;
                margin-top: -40px;
            }

            .bg-image-card-with-blue-envelope p.main-paragarph {
                margin-top: 20px;
            }

        #bb-bookblock2 {
            /*min-height: 1000px!important;*/
        }

        #banner-section h1 {
            text-align: left;
        }
        .bg-image-card-with-blue-envelope .container .col-md-4{
            text-align:center!important;
        }
    }

    .icon-copyright:after {
        content: "\00a9";
    }

    .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }


    @media only screen and (min-width: 1025px) {
        .d-md-none {
            display: block !important;
        }

        .d-md-block {
            display: none !important;
        }
    }

    @media only screen and (max-width: 1024px) {
        #flipbook2 {
            overflow-x: hidden !important;
            overflow-y: visible !important;
        }
        #your-details {
            margin-top: 50px;
        }

        #policies-and-terms {
            margin-top: 30px;
        }
        #your-details .content.formatted {
            padding-left: 5px!important;
            padding-right: 5px!important;
        }
        #your-details .content.formatted h1 {
            margin-top: 0px !important;
        }
        footer div.row.footer-col {
            width: 50% !important;
        }
        #your-details {
            margin-top:20px;
        }
        #your-details form .col-md-4 {
            width: 100%;
        }
            #your-details form .col-md-4 select {
                margin-bottom: 10px;
            }
        .flipbook-viewport .container {
            margin-left: -12px !important;
        }
        #flipbook {
            margin-top: 50px !important;
        }
        #headerLogo {
            transform: translateY(-20px) !important;
            position: fixed;
            left: 0px;
            top: 7px;
            z-index: 1030;
        }
        #headerLogo img {
            height: 50px !important;
            margin-left: 15px !important;
            margin-top: 13px !important;
        }
        #prevBtn span, #nextBtn span {
            display:none;
        }
        
        #bb-bookblock2 {
            width: 200% !important;
            left: -100%;
            box-shadow: none !important;
        }
           
            #bb-bookblock2 .bb-custom-firstpage {
                /*display: none!important;*/
                opacity: 0 !important;
                box-shadow: 0 2px 15px -3px rgba(0,0,0,.16),0 10px 20px -2px rgba(0,0,0,.1) !important;
            }

        .col-6 .card .p-4, #img02 .col-md-2 {
            padding: 4px !important;
        }

            .col-6 .card .card-body, #img02 .col-md-2 .card .card-body {
                padding: 5px !important;
                padding-bottom: 10px !important;
                padding-top: 0px !important;
            }


        .modal .flipbook-viewport {
            width: calc(100vw - 40px) !important;
            height: calc(150vw - 60px) !important;
            margin: auto;
        }

            .modal .flipbook-viewport .container {
                position: relative;
                top: calc(68vw);
                left: calc(-50% - 15px);
                margin: auto;
                padding: 0px !important;
            }

                .modal .flipbook-viewport .container .page-wrapper {
                    /*top: calc(50vw - 10px)!important;*/
                }

            .modal .flipbook-viewport .flipbook {
                width: calc(200vw - 40px) !important;
                height: calc(150vw - 60px) !important;
                /*left:calc(-50vw + 10px);*/
                left: -3%;
                top: calc(-68vw + 10px) !important;
                padding: 60px 0px 10px 0px !important;
            }


            .modal .flipbook-viewport .page {
                width: calc(100vw - 50px);
                height: calc(150vw - 50px);
                overflow: visible !important;
            }

        .modal #page2 .page-inner, .modal #page3 .page-inner {
            padding: 15px !important;
        }

        .modal .flipbook .page {
            height: calc(162vw - 65px);
        }

        .modal .text-input {
            width: calc(100vw - 20px);
            height: calc(162vw - 65px);
        }

        .modal #prevBtn, .modal #nextBtn, .modal #btn-2ndPage, .modal #btn-3rdPage {
            top: calc(43vh - 23px) !important;
            padding: 10px 12px !important;
        }

        .modal #prevBtn {
            left: 1px !important;
        }

        .modal #nextBtn {
            right: 1px !important;
        }

        .modal #btn-2ndPage {
            position: fixed;
            width: auto;
            left: 1px !important;
            z-index: 999;
            transition: all .2s ease-in;
        }

        .modal #btn-3rdPage {
            position: fixed;
            width: min-content;
            right: 1px !important;
            z-index: 999;
            transition: all .2s ease-in;
        }

        .modal [contentEditable=true]:empty:not(:focus):before {
            font-size: 11px !important;
            left: 3% !important;
            top: 40%;
        }
        /*.modal #flipbook {
		    height: 130vw!important;
		    width: calc(200vw - 30px)!important;
    left: -100vw;
		}
		#nextBtn {
			right: 10px!important;
		}
		#prevBtn {
			left: 10px!important;
		}*/
        footer div.container-fluid {
            padding: 1px 10px !important;
        }

        footer div.footer-col {
            width: 100% !important;
            padding: 1px 10px !important;
        }

            footer div.footer-col a {
                width: 47% !important;
                margin-right: 0 !important;
                margin-bottom: 4px;
                padding: 7px 5px;
            }
        footer div.footer-col-6:first-child,
        footer div.footer-col-6:nth-child(2) {
            width: 100% !important;
            margin-bottom:15px;
        }
        footer div.footer-col-6 {
            width: 50% !important;
            text-align: center !important;
            padding: 5px 10px !important;
        }

        footer ul.footer-copyright {
            display: none !important;
        }

        .imagem .container-fluid {
            padding-left: 15px;
            padding-right: 15px;
        }

        .form-check-input {
            width: 25px !important;
        }

        ul#ex-with-icons, ul#payment-method-with-icons {
            padding-bottom: 25px;
        }

            ul#ex-with-icons li, ul#payment-method-with-icons li {
                width: 100% !important;
            }

                ul#ex-with-icons li a, ul#payment-method-with-icons li a {
                    margin-bottom: 0px !important;
                }

        .d-md-none {
            display: none;
        }

        .d-md-block {
            display: block;
        }

        #payment-method-tab-content {
            text-align: center !important;
        }
/*        .bb-item .height-unset {
            height: 100% !important;
        }*/
      
    }

    @media only screen and (max-width: 500px) {

       /* #btn_place_order {
            padding: 15px;
        }*/

            /*#btn_place_order span {
                display: none;
            }

            #btn_place_order::before {
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                content: "\f07a";
            }*/
        footer div.container-fluid {
            padding: 1px 10px !important;
        }

        footer div.row.footer-col {
            width: 100% !important;
            padding: 1px 10px !important;
        }

            footer div.footer-col a {
                width: 47% !important;
                margin-right: 0 !important;
                margin-bottom: 4px;
                padding: 7px 2px;
            }

        footer div.footer-col-6 {
            width: 100% !important;
            text-align: center !important;
            padding: 15px 10px !important;
        }

        footer ul.footer-copyright {
            display: none !important;
        }
        #goToTopBtn{
            bottom:100px!important;
        }
       /* #page1-content{
            width:100%!important;
            height:100%!important;
        }*/
        .flipbook-viewport {
            transform: scale(0.78) translateX(25px) !important;
            transform-origin: 0 1px;
        }
        #flipbook {
            /*margin-left: -136px!important;*/
            left:11px;
        }
        .page-wrapper,
        .page {
            height: 600px!important;
            width: 463px!important;
        }
        #banner-section.bg-image {
            height: 230px!important;
            background-position: -12px;
            margin-top: 50px;
            background-size: 300% 100%;
        }
        #your-details {
            margin-top: 50px;
        }
        #policies-and-terms {
            margin-top: 30px;
        }
        #your-details .content.formatted h1 {
            margin-top: 0px !important;
        }
        .tab-content .main-heading {
            margin-top: -15px !important;
            margin-bottom:0px!important;
            position: relative!important;
        }
        #your-details .col-md-6.py-2,
        #your-details .col-md-8.py-2, 
        #your-details .col-md-4.py-2{
            padding-left: 0px;
            padding-right: 0px;
        }
    }

@media only screen and (max-width: 370px) {

    .flipbook-viewport {
        transform: scale(0.72) translateX(25px) !important;
        transform-origin: 0 1px;
    }
}
    a:focus-visible {
        border: none !important;
        outline: none !important;
    }

    #copyright {
        color: #fff !important;
    }

        #copyright a {
            color: #fff !important;
        }

    #filterBar {
        display: none !important;
    }

    .tracking-detail {
        padding: 3rem 0;
    }

    #tracking {
        margin-top: 20px;
    }

    [class*="tracking-status-"] p {
        margin: 0;
        font-size: 1.1rem;
        color: #fff;
        text-transform: uppercase;
        text-align: center;
    }

    [class*="tracking-status-"] {
        padding: 1.6rem 0;
    }

    .tracking-item {
        border-left: 4px solid #016442;
        position: relative;
        padding: 1rem 1rem 1rem 2rem;
        font-size: 0.9rem;
        margin-left: 3rem;
        min-height: 4rem;
    }

        .tracking-item:first-child {
            padding-top: 0;
            margin-top: 35px;
        }

        .tracking-item:last-child {
            padding-bottom: 4rem;
        }

        .tracking-item .tracking-date {
            margin-bottom: 0.5rem;
        }

            .tracking-item .tracking-date span {
                color: #888;
                font-size: 85%;
                padding-left: 0.4rem;
            }

        .tracking-item .tracking-content span a {
            color: cornflowerblue;
            font-size: 85%;
        }

        .tracking-item .tracking-content {
            padding: 0.5rem 0.8rem;
            background-color: #f4f4f4;
            border-radius: 0.5rem;
        }

            .tracking-item .tracking-content span {
                display: block;
                color: #767676;
                font-size: 12px;
            }

        .tracking-item .tracking-icon {
            position: absolute;
            left: -15px;
            width: 25px;
            height: 25px;
            text-align: center;
            border-radius: 50%;
            font-size: 1.1rem;
            background-color: #fff;
            color: #fff;
        }

            .tracking-item .tracking-icon i {
                font-size: 15px;
            }


    .tracking-item-pending {
        border-left: 3px dashed #d6d6d6;
        position: relative;
        padding: 0px 0px 15px 20px;
        margin-left: 12px;
    }

        .tracking-item-pending:last-child {
            /*padding-bottom: 4rem;
    height: 40px;*/
            border-left: 4px dashed #d6d6d600;
        }

        .tracking-item-pending .tracking-date {
            margin-bottom: 0.5rem;
        }

            .tracking-item-pending .tracking-date span {
                color: #888;
                font-size: 85%;
                padding-left: 0.4rem;
            }

        .tracking-item-pending .tracking-content {
            padding: 0.5rem 0.8rem;
            background-color: #f4f4f4;
            border-radius: 0.5rem;
        }

            .tracking-item-pending .tracking-content span {
                display: block;
                color: #767676;
                font-size: 13px;
            }

                .tracking-item-pending .tracking-content span a {
                    color: cornflowerblue;
                    font-size: 85%;
                }

        .tracking-item-pending .tracking-icon {
            line-height: 2.6rem;
            position: absolute;
            left: -15px;
            width: 25px;
            height: 25px;
            text-align: center;
            font-size: 1.1rem;
            background: #fff;
            border: 2px solid #d6d6d6;
        }

        .tracking-item-pending .tracking-content {
            font-weight: 500;
            font-size: 15px;
        }

    .tracking-item .tracking-icon.status-current {
        width: 35px;
        height: 35px;
        left: -20px;
    }

    .tracking-item .tracking-icon.status-intransit {
        background: #016442;
        font-size: 0.6rem;
        border-radius: 0px;
    }

    .tracking-item .tracking-icon.status-current {
        background: #016442;
        border-radius: 0;
        font-size: 0.6rem;
    }

    @media (min-width: 1600px) {

        .bg-image-card-with-blue-envelope .container {
            padding-top: 50px;
            padding-bottom: 50px;
        }
    }

    @media (min-width: 992px) {
        .tracking-item {
            /*margin-left: 10rem;*/
        }

            .tracking-item .tracking-date {
                position: absolute;
                left: -10rem;
                width: 7.5rem;
                text-align: right;
            }

                .tracking-item .tracking-date span {
                    display: block;
                }

            .tracking-item .tracking-content {
                padding: 0;
                background-color: transparent;
            }

        .tracking-item-pending {
            /*margin-left: 10rem;*/
        }

            .tracking-item-pending .tracking-date {
                position: absolute;
                left: -10rem;
                width: 7.5rem;
                text-align: right;
            }

                .tracking-item-pending .tracking-date span {
                    display: block;
                }

            .tracking-item-pending .tracking-content {
                padding: 0;
                background-color: transparent;
            }
    }

    .tracking-item .tracking-content {
        font-weight: 600;
        font-size: 15px;
        color: #232323;
    }

    .blinker {
        border: 7px solid #e9f8ea;
        animation: blink 1s;
        animation-iteration-count: infinite;
    }

    .uppercase {
        text-transform: uppercase;
    }

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

    .heart-icon {
        font-size: 18px;
        color: red;
        animation: pulse 1s infinite;
    }



    .accordion-item p {
        font-size: 20px;
    }

        .accordion-item p strong {
            font-weight: 500 !important;
            color: #2d4600;
        }

    @keyframes pulse {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.2);
        }

        100% {
            transform: scale(1);
        }
    }

    @keyframes blink {
        50% {
            border-color: #ccc;
        }
    }


.btn-success, .btn-custom, .btn-info {
    background-color: #18c47d;
    color: #fff;
    border-bottom: 3px solid #d5d817;
    border-radius: 0px !important;
    transition: 0.5s;
    height: 44px !important;
    box-shadow: 3px 6px 11px -6px rgb(0 0 0 / 64%);
}

        .btn-success.focus, .btn-success:focus, .btn-success:hover,
        .btn-custom.focus, .btn-custom:focus, .btn-custom:hover,
        .btn-info.focus, .btn-info:focus, .btn-info:hover {
            background-color: #d5d817 !important;
            color: #000 !important;
            transition: 0.5s;
            border-bottom: 3px solid #18c47d !important;
        }

/* Popup Modal Styles */
#mobile-popup {
    display: none; /* Hidden by default */
}
.pop-up-container {
    display:flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 1000;
    justify-content: center; /* Horizontal center */
    align-items: center; /* Vertical center */
    height: 100vh; /* Full viewport height */
}

#popup-content {
    background: #fff;
    padding: 20px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    width: 300px;
    height: auto;
    margin: auto;
    position: relative;
}

    #popup-content h2 {
        margin-bottom: 10px;
        font-size: 1.5em;
    }

    #popup-content p {
        margin-bottom: 20px;
        font-size: 1em;
    }

    #popup-content button {
        padding: 10px 20px;
        background: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

        #popup-content button:hover {
            background: #0056b3;
        }