/*html{ scroll-behavior: smooth; }*/

.flex-viewport, .slider-wrap .slide img{
    /*max-height: 302.63px;*/
    max-height: 78vh;
}

@media (min-width: 768px) {
    .flex-area {
        display: flex;
        flex-direction: row;
    }

    .flex-area:nth-of-type(even) {
        flex-direction: row-reverse;
    }

    .svg_credit_card {
        display: flex;
        margin-top: 20px;
    }

    .svg_credit_card div.container {
        padding: 20px 30px !important;
        margin-top: 1.5%;
        margin-bottom: 0;
        max-width: none;
    }

    div.form-container {
        padding: 0 0 0 15px;
    }
}

@media (min-width: 992px) {
    div.svg_credit_card div.container {
        margin-top: -2%;
    }

    #top-bar {
        z-index: 299;
        border-bottom-color: rgba(0, 0, 0, 0.05);
    }

    .top-links ul li,
    #top-social li {
        border-left-color: rgba(0, 0, 0, 0.05);
    }

    #top-bar.transparent-topbar {
        background: transparent !important;
    }

    #top-bar.transparent-topbar+#header.transparent-header+#slider,
    #top-bar.transparent-topbar+#header.transparent-header+.page-title-parallax {
        margin-bottom: -257px;
        top: -257px;
    }
}

@media (max-width: 991px) {
    #header-wrap>#primary-menu {
        border-top: none;
    }

    header#header>#header-wrap {
        margin-top: -35px;
    }
}

@media (max-width: 575px) {
    #top-cart {
        display: block;
    }

    .out-filter {
        padding: 10px 0 !important;
    }

    .out-filter>.filter-area {
        width: 100%;
    }

    .filter-area>.a-filter {
        border: none;
        /*border-radius: 5px;*/
    }
}

#primary-menu ul>li>a {
    padding: 13px;
}

.heading-block>* {
    font-family: KoHo;
}

.row p {
    font-family: KoHo;
    letter-spacing: .2px;
}

#top-bar {
    display: none;
}

#primary-menu>.container {
    margin-top: -8px;
}

.sticky-header #primary-menu>.container {
    margin-top: 0;
}

#primary-menu.style-2>div #top-cart {
    margin: 18px;
}

.sticky-header #primary-menu.style-2>div #top-cart {
    margin: 18px !important;
}

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

.bg-pattern1 {
    background-image: url(images/bgs/brbg00.png);
    background-repeat: repeat-y;
}

.bg-pattern2 {
    background-image: url(images/bgs/bg2.png);
    background-repeat: repeat;
}

.bg-fade {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}

.bgcolor-dark-green {
    background-color: #193036;
}

.bgcolor-mid-green {
    background-color: #1d9000 !important;
}

.bgcolor-forest-green {
    background-color: #0b6623 !important;
}

.bgcolor-fern-green {
    background-color: #4f7942 !important;
}

.bgcolor-light-green {
    background-color: #92d718;
}

.bgcolor-lime {
    background-color: #d7e399;
}

.bgcolor-grey {
    background-color: #dddddd;
}

.fcolor-dark-green {
    color: #193036;
}

.fcolor-mid-green {
    color: #1d9000 !important;
}

.fcolor-light-green {
    color: #92d718;
}

.fcolor-lime {
    color: #d7e399;
}

.fcolor-grey {
    color: #dddddd;
}

.fcolor-gold-gradient {
    background: -webkit-linear-gradient(#b57e10, #f9df7b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fcolor-green-gradient {
    background: -webkit-linear-gradient(#d7e399, #92d718);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dark #header-wrap:not(.not-dark) #primary-menu>.container>ul>li>a:hover {
    color: #EEE;
}

#footer.dark {
    background-color: #193036 !important;
}

.dark #copyrights {
    padding: 15px 0px;
    font-size: 12px;
}

#header.sticky-style-2 {
    height: 170px;
}

#header,
#header-wrap,
#logo img {
    height: 125px;
}

.grayimg {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

#top-cart>a {
    display: inline-block;
}

.col_one_fourth.our-sister:hover img,
.link-area:hover .link-img {
    transition-duration: 0.2s;
    filter: brightness(40%);
}


.dl-btn:hover {
    background-color: darkorange;
}

.dl-area {
    width: 100%;
}

.sf-js-enabled li a div {
    font-family: KoHo;
}

.filter-img.masonry-thumbs a.filter {
    padding: .5%;
}

.container .filter-area {
    border-radius: 0;
    overflow: hidden;
    border: 0 !important;
    /*border: 1px solid;*/
    /*border-color: #B49340;*/
    /*border-right: 1px solid #B49340;*/
}

.a-filter {
    cursor: pointer;
    user-select: none;
    padding: 5px 15px;
    /*font-size: 1.2em;*/
    border-right: 1px solid #B49340;
    border-top: 0;
    text-align: center;
    transition-duration: .3s;
    overflow: hidden;
}

.a-filter:hover,
.filter-selected {
    background-color: #B49340;
}

.a-filter:last-child {
    border: none;
}

.mobile-primary-menu.dark>li>a>div {
    color: #EEEEEE;
    transition-duration: .3s;
}

.mobile-primary-menu.dark>li.current>a>div,
.mobile-primary-menu.dark>li>a>div:hover {
    color: darkorange;
}

.container.clearfix.out-filter {
    display: flex;
    justify-content: center;
}

.read-more,
.book-now {
    color: #F9DF7B;
    border: 1px solid #B49340;
    display: inline-block;
    padding: 3px 10px;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    font-weight: bold;
    font-size: 1.1em;
    transition-duration: 0.3s;
}

.book-now {
    font-size: 1.3em;
    padding: 10px 20px;
}

.read-more:hover,
.book-now:hover {
    background-color: #B49340;
    border-color: darkorange;
}

.sibsan p {
    margin-bottom: 10px;
    /*text-indent: 30px;*/
}

#primary-menu ul ul:not(.mega-menu-column) {
    top: 87%;
}

.link-block {
    margin-bottom: 15px;
}

/* css credit card */
.svg_credit_card {
    text-align: center;
}

.form-container .field-container:first-of-type {
    grid-area: name;
}

.form-container .field-container:nth-of-type(2) {
    grid-area: number;
}

.form-container .field-container:nth-of-type(3) {
    grid-area: expiration;
}

.form-container .field-container:nth-of-type(4) {
    grid-area: security;
}

.field-container input {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.field-container {
    position: relative;
}

.form-container {
    display: grid;
    grid-column-gap: 10px;
    grid-template-columns: auto auto;
    grid-template-rows: 90px 90px 90px;
    grid-template-areas: "name name""number number""expiration security";
    /*max-width: 400px;*/
    padding: 0 10px;
    color: #707070;
    margin: 0 auto;
    text-align: left;
}

.svg_credit_card label {
    /*padding-bottom: 5px;*/
    font-size: 13px;
}

.svg_credit_card input {
    margin-top: 3px;
    padding: 10px 15px;
    font-size: 16px;
    width: 100%;
    border-radius: 3px;
    border: 1px solid #dcdcdc;
}

.ccicon {
    height: 38px;
    position: absolute;
    right: 6px;
    top: calc(50% - 9%);
    width: 15%;
}

/* CREDIT CARD IMAGE STYLING */
.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}

.svg_credit_card .container {
    display: inline-block;
    /*width: 100%;*/
    max-width: 400px;
    max-height: 251px;
    height: 54vw;
    padding: 20px 0 !important;
    margin-bottom: 60px;
}

#ccsingle {
    position: absolute;
    right: 10%;
    top: 5%;
    width: 25%;
}

#ccsingle svg {
    width: 100%;
    height: 30%;
}

.creditcard svg#cardfront,
.creditcard svg#cardback {
    width: 100%;
    -webkit-box-shadow: 1px 5px 6px 0px black;
    box-shadow: 1px 5px 6px 0px black;
    border-radius: 22px;
    /*max-height: 200px;*/
}

#generatecard {
    cursor: pointer;
    float: right;
    font-size: 12px;
    color: #fff;
    padding: 2px 4px;
    background-color: #909090;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

/* CHANGEABLE CARD ELEMENTS */
.creditcard .lightcolor,
.creditcard .darkcolor {
    -webkit-transition: fill .5s;
    transition: fill .5s;
}

.creditcard .lightblue {
    fill: #03A9F4;
}

.creditcard .lightbluedark {
    fill: #0288D1;
}

.creditcard .red {
    fill: #ef5350;
}

.creditcard .reddark {
    fill: #d32f2f;
}

.creditcard .purple {
    fill: #ab47bc;
}

.creditcard .purpledark {
    fill: #7b1fa2;
}

.creditcard .cyan {
    fill: #26c6da;
}

.creditcard .cyandark {
    fill: #0097a7;
}

.creditcard .green {
    fill: #66bb6a;
}

.creditcard .greendark {
    fill: #388e3c;
}

.creditcard .lime {
    fill: #d4e157;
}

.creditcard .limedark {
    fill: #afb42b;
}

.creditcard .yellow {
    fill: #ffeb3b;
}

.creditcard .yellowdark {
    fill: #f9a825;
}

.creditcard .orange {
    fill: #ff9800;
}

.creditcard .orangedark {
    fill: #ef6c00;
}

.creditcard .grey {
    fill: #bdbdbd;
}

.creditcard .greydark {
    fill: #616161;
}

/* FRONT OF CARD */
#svgname {
    text-transform: uppercase;
}

#cardfront .st2 {
    fill: #FFFFFF;
}

#cardfront .st3 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 302.63;
}

#cardfront .st4 {
    font-size: 54.7817px;
}

#cardfront .st5 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 400;
}

#cardfront .st6 {
    font-size: 33.1112px;
}

#cardfront .st7 {
    opacity: 0.6;
    fill: #FFFFFF;
}

#cardfront .st8 {
    font-size: 24px;
}

#cardfront .st9 {
    font-size: 36.5498px;
}

#cardfront .st10 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 300;
}

#cardfront .st11 {
    font-size: 16.1716px;
}

#cardfront .st12 {
    fill: #4C4C4C;
}

/* BACK OF CARD */
#cardback .st0 {
    fill: none;
    stroke: #0F0F0F;
    stroke-miterlimit: 10;
}

#cardback .st2 {
    fill: #111111;
}

#cardback .st3 {
    fill: #F2F2F2;
}

#cardback .st4 {
    fill: #D8D2DB;
}

#cardback .st5 {
    fill: #C4C4C4;
}

#cardback .st6 {
    font-family: 'Source Code Pro', monospace;
    font-weight: 400;
}

#cardback .st7 {
    font-size: 27px;
}

#cardback .st8 {
    opacity: 0.6;
}

#cardback .st9 {
    fill: #FFFFFF;
}

#cardback .st10 {
    font-size: 24px;
}

#cardback .st11 {
    fill: #EAEAEA;
}

#cardback .st12 {
    font-family: 'Rock Salt', cursive;
}

#cardback .st13 {
    font-size: 37.769px;
}

/* FLIP ANIMATION */
.svg_credit_card .container {
    perspective: 1000px;
}

.creditcard {
    width: 100%;
    max-width: 400px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-transform 0.6s;
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
    cursor: pointer;
    margin: 0 auto;
}

.creditcard .front,
.creditcard .back {
    position: absolute;
    width: 100%;
    max-width: 400px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    color: #47525d;
    /*max-height: 200px;*/
}

.creditcard .back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.creditcard.flipped {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

/* end css credit card */

.fslider.slide-room{
    max-height: 270px;
}