.loading, .sqQuestion {
    align-content: center
}

.socialNetwork ul, .validation-summary-errors ul {
    list-style-type: none
}

@font-face {
    font-family: peyda;
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url('../fonts/peyda/PeydaWeb-Regular.eot');
    src: url('../fonts/peyda/PeydaWeb-Regular.eot?') format('embedded-opentype'),url('../fonts/peyda/PeydaWeb-Regular.woff2') format('woff2'),url('../fonts/peyda/Peyda-Regular.ttf') format('truetype')
}

@font-face {
    font-family: peyda;
    font-style: normal;
    font-weight: 700;
    font-display: auto;
    src: url('../fonts/peyda/PeydaWeb-Bold.eot');
    src: url('../fonts/peyda/PeydaWeb-Bold.eot') format('embedded-opentype'),url('../fonts/peyda/PeydaWeb-Bold.woff2') format('woff2'),url('../fonts/peyda/PeydaWeb-Bold.woff') format('woff'),url('../fonts/peyda/Peyda-Bold.ttf') format('truetype')
}

* {
    font-family: peyda,Arial,sans-serif;
    box-sizing: border-box;
    direction: rtl
}

@media only screen and (max-width:992px) {
    .clientCommentUserSubTitle, .commentItem .pofileImgDiv, .contentRightCard, .introImgDiv, .menuStyle, .sectionTitle p, .supportDiv img.supportManImg, .supportMan {
        display: none
    }

    .btn {
        padding: 4px 12px
    }

    .section1Title p {
        font-size: 15px;
        text-align: justify;
        text-align-last: center
    }

    .introSec {
        animation: 40s forwards backgroudShowMobile;
        background-size: cover
    }

    .fade-in, .fade-out {
        animation-name: fade
    }

    .introSec .fp-tableCell {
        vertical-align: middle
    }

    .responsiveIconDiv {
        display: block;
        position: absolute;
        top: 12px;
        right: 25px
    }

        .responsiveIconDiv img {
            width: 25px
        }

    .SecPortfolio, .footerSection, .secAbout {
        margin-top: 50px
    }

    .SecPortfolioContent {
        width: 86%;
        margin: auto !important
    }

    .faqItemsDiv {
        margin-bottom: 80px
    }

    .raykaLogo {
        width: 30%
    }

    .InnerPageFooter .fInner, .InnerPageFooter .fInner a, .footerLinks .footerLinksItem a, .footerService .footerServiceItem a {
        font-size: 15px
    }

    .RyakanetSignContent {
        flex-direction: column;
        align-items: center
    }

    .footerSection {
        padding-bottom: 70px
    }

    .u-list-reset {
        list-style: none;
        padding-left: 0;
        margin: 0
    }

    .site-nav__link {
        padding: 12px 0;
        display: block;
        text-decoration: none;
        color: #fff;
        font-size: 17px
    }

    #header {
        z-index: 200 !important
    }

    .site-nav__menu {
        grid-area: menu;
        display: none;
        flex-direction: column;
        margin: auto;
        padding-top: 1rem;
        padding-bottom: 2rem;
        animation-duration: .2s;
        animation-timing-function: ease-in-out
    }

    .site-nav--is-open {
        height: 100vh;
        overflow-y: auto;
        display: flex;
        justify-content: center
    }

        .site-nav--is-open .site-nav__menu {
            display: flex;
            padding: 0
        }

    .fade-in {
        animation-fill-mode: forwards
    }

    .fade-out {
        animation-fill-mode: backwards
    }

    @keyframes fade {
        0% {
            opacity: 0
        }

        100% {
            opacity: 1
        }
    }

    .site-nav__curtain {
        visibility: hidden;
        position: fixed;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        z-index: 0;
        background: #966b57;
        border-radius: 50%;
        transform: translateY(100%) scale(0);
        animation-duration: .6s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards
    }

    .curtain-up {
        animation-name: curtainUp
    }

    .curtain-down {
        animation-name: curtainDown
    }

    @keyframes curtainUp {
        0% {
            border-radius: 50%;
            transform: translateY(100%) scale(1);
            visibility: visible;
            opacity: 1
        }

        50% {
            border-radius: 50%
        }

        100% {
            transform: translateY(0) scale(3,1);
            visibility: visible;
            opacity: 1;
            border-radius: 0
        }
    }

    @keyframes curtainDown {
        0% {
            border-radius: 0;
            transform: translateY(0) scale(3,1);
            opacity: 1;
            visibility: visible
        }

        50% {
            opacity: 1;
            visibility: visible;
            border-radius: 50%
        }

        99% {
            transform: translateY(100%) scale(0);
            visibility: visible;
            opacity: 1
        }

        100% {
            transform: translateY(100%) scale(0);
            opacity: 0;
            visibility: hidden
        }
    }

    .menu-button {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        cursor: pointer;
        border: none;
        outline: 0;
        padding: .5rem 0 .5rem 2rem;
        align-self: normal;
        justify-self: start;
        z-index: 10;
        grid-area: menuButton
    }

        .menu-button:active {
            transform: translateY(-.2rem)
        }

    .menu-button__lines {
        display: grid;
        gap: 5px;
        transition: .2s
    }

    .menu-button__lines--open {
        gap: 0
    }

    .menu-button__line {
        display: block;
        transition: .2s;
        content: '';
        width: 28px;
        height: 3px;
        background-color: #a58c41;
        transform-origin: center;
        border-radius: 5px;
        margin-bottom: 2px
    }

    .menu-button:hover .menu-button__lines {
        gap: 5px
    }

    .menu-button__lines--open .menu-button__line {
        grid-row-start: 1;
        grid-column-start: 1;
        transform: rotate(45deg) scale(1.3)
    }

        .menu-button__lines--open .menu-button__line:nth-child(3) {
            transform: rotate(-45deg) scale(1.3)
        }

    .section1Title .logo img {
        width: 100px
    }

    .footerImage {
        background: linear-gradient(0deg,rgb(0 0 0) 0,hsl(0deg 0% 0% / 51%) 56%,rgba(0,0,0,0) 100%)
    }

    .ContentDetailImgDiv img {
        border-radius: 10px
    }

    .InnerPageFooter .fTitle, .footerContact h2, .footerLinks h2, .footerService h2, h1.LogoTitle {
        font-size: 16px
    }

    .ContentDetailPage {
        padding: 0 !important
    }

    .InnerContent {
        margin: 50px auto;
        padding-bottom: 50px
    }

    .supportDiv .supportDibBtns {
        text-align: center
    }

    .faqQuestionDiv h3 {
        font-size: 16px;
        flex: 85%
    }

    .sqQuestion {
        flex: 15%
    }

    .responsiveMenu {
        z-index: 20;
        position: relative
    }

    .InnerPageMenu {
        height: 60px
    }

    .serviceImgDiv img {
        width: 80%
    }

    .relatedPageDivBody {
        display: flex;
        flex-direction: column
    }

        .relatedPageDivBody .relatedPageBtn {
            text-align: left
        }

    @keyframes animated-text {
        from {
            width: 0
        }

        to {
            width: 280px
        }
    }

    .fp-table {
        display: table
    }

    .fp-tableCell {
        display: table-cell
    }

    .footerImage img {
        width: 29%
    }

    .SecPortfolioContent .col-md-3, .secClientCommentsTitle {
        margin-bottom: 20px
    }

    .secAbout {
        padding: 0 20px
    }

    .secBlog, .secSupport {
        margin-top: 40px
    }

    .supportDiv .row {
        text-align: center;
        margin: auto;
    }

    .supportDiv .txt {
        padding: 0;
    }
}

@media only screen and (min-width:992px) {
    .cursor, .cursor2 {
        position: fixed;
        transform: translate(-50%,-50%);
        pointer-events: none
    }

    #footer, #header {
        display: block
    }

    .footerImage img {
        width: 9%
    }

    .btn {
        padding: 6px 24px
    }

    .introSec {
        background-size: 100%;
        animation: 16s forwards backgroudShow
    }

    .secAbout {
        background-image: url(/Images/topBg.jpg);
        background-repeat: no-repeat;
        background-position: top;
        background-size: 46%
    }

    .newsItem .newsItemImageDiv {
        margin-right: -10px
    }

    .raykaLogo {
        width: 12%
    }

    .responsiveMenu, .section1Title .logo img {
        display: none
    }

    .ContentDetailImgDiv img {
        border-radius: 5px
    }

    .supportDiv img.supportManImg {
        width: 22%;
        position: absolute;
        bottom: 0;
        left: 5%
    }

    .InnerContent {
        width: 80%;
        margin: 50px auto;
        padding-bottom: 50px
    }

    .supportDiv .supportDibBtns {
        text-align: left
    }

        .supportDiv .supportDibBtns .btn {
            padding: 4px 20px
        }

    .serviceImgDiv img {
        width: 60%
    }

    .relatedPageDivBody {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }

    .contentAlbumDiv {
        margin-top: 50px
    }

    @keyframes animated-text {
        from {
            width: 0
        }

        to {
            width: 460px
        }
    }

    .cursor {
        width: 30px;
        height: 30px;
        border-radius: 100%;
        border: 1px solid #d09173;
        transition: .2s ease-out
    }

    .cursor2 {
        width: 10px;
        height: 10px;
        border-radius: 100%;
        background-color: #d09173;
        opacity: .5;
        transition: width .3s,height .3s,opacity .3s
    }

    .cursorinnerhover {
        width: 50px;
        height: 50px;
        opacity: .5
    }

    .secContent {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center
    }

    .secContentInner {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 70%
    }

    .newsItem {
        margin-left: 10px
    }
}

.supportDiv img.supportDivSeparate.spBottom, .supportMan {
    bottom: -12px
}

.btn, .introSec, .sectionTitle h2 {
    position: relative
}

    .btn:after, .sectionTitleImg {
        width: 50px
    }

@-moz-document url-prefix() {
    html {
        scrollbar-width: none
    }
}

.text-right {
    text-align: right !important
}

.text-left {
    text-align: left !important
}

::placeholder {
    font-size: 13px
}

body {
    margin: 0;
    background: #000;
    -ms-overflow-style: none;
    line-height: 2
}

    body::-webkit-scrollbar {
        display: none
    }

.InnerContent .innerTitle, .InnerPageFooter .fTopIcon, .introButton, .logoIcon, .section1Title, .sectionTitle {
    text-align: center
}

.InnerblogItemReadMore, .SecBtn, .faqBtn, .newsItem .newsItemDescDiv .newsItemBtn, .serviceItem .serviceItemBtn {
    text-align: left
}

.sectionTitle h2 {
    color: #d4af73;
    margin: 0 0 8px
}

    .sectionTitle h2:after {
        width: 42px;
        height: 21px;
        content: " ";
        background-image: url(../Images/icon/title-bar.png);
        position: absolute;
        bottom: -26px;
        background-size: 100%;
        background-repeat: no-repeat;
        left: 50%;
        transform: translate(-50%,-50%)
    }

.sectionTitle p {
    color: #966b57;
    margin-top: 0;
    line-height: 1.6
}

.footerImage img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto
}

.introSec {
    background-image: url(../Images/s1Bg.jpg);
    background-position: center top;
    background-repeat: no-repeat
}

@keyframes backgroudShowMobile {
    from {
        background-position: 50%
    }

    to {
        background-position: 90%
    }
}

@-moz-keyframes backgroudShowMobile {
    from {
        background-position: 50%
    }

    to {
        background-position: 90%
    }
}

@-webkit-keyframes backgroudShowMobile {
    from {
        background-position: 50%
    }

    to {
        background-position: 90%
    }
}

@keyframes backgroudShow {
    from {
        background-size: 100%
    }

    to {
        background-size: 80%
    }
}

@-moz-keyframes backgroudShow {
    from {
        background-size: 100%
    }

    to {
        background-size: 80%
    }
}

@-webkit-keyframes backgroudShow {
    from {
        background-size: 100%
    }

    to {
        background-size: 80%
    }
}

.menuStyle {
    padding-top: 10px
}

    .menuStyle ul {
        margin: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 0
    }

        .fp-slidesNav ul li, .g-recaptcha, .menuStyle ul li, .readMore p {
            display: inline-block
        }

            .menuStyle ul li a, .menuStyle ul li span {
                text-decoration: none;
                color: #f1f1f1;
                display: flex;
                flex-direction: column;
                align-items: center;
                transition: .5s;
                position: relative
            }

                .menuStyle ul li a:hover, .menuStyle ul li span:hover {
                    color: #ca9075 !important
                }

            .menuStyle ul li:last-child {
                margin-left: 0
            }

            .menuStyle ul li a:before, .menuStyle ul li span:before {
                width: 30px;
                height: 30px;
                content: " ";
                background-image: url(../Images/icon/menuIconH.png);
                position: absolute;
                bottom: -26px;
                opacity: 0;
                -webkit-transition: .2s;
                -o-transition: .2s;
                -moz-transition: .2s;
                transition: .2s;
                background-size: 100%;
                background-repeat: no-repeat
            }

.btn:after, .btn:hover:after {
    transition: 1s cubic-bezier(.19, 1, .22, 1)
}

.menuStyle ul li a:hover:before, .menuStyle ul li span:hover:before {
    animation: .5s forwards fadeUp
}

@keyframes fadeUp {
    from {
        transform: translateY(15px);
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes fadeUp {
    from {
        transform: translateY(15px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

.logoIcon img {
    width: 75px;
    vertical-align: middle
}

.logo2 {
    display: none
}

.section1Title h1 {
    margin-top: 20px;
    color: #fff
}

.section1Title p {
    color: #bec6cd;
    display: inline-block;
    margin: 15px 0 30px
}

.btn:first-child, .callBtn img {
    margin-left: 10px
}

.btn {
    display: inline-block;
    color: #ca9075;
    border-radius: 5px;
    transition: .7s ease-out;
    text-decoration: none;
    border: 1px solid #ca9075;
    font-size: 14px;
    overflow: hidden;
    cursor: pointer
}

    .btn:after {
        background: #fff;
        content: "";
        height: 155px;
        left: -75px;
        opacity: .2;
        position: absolute;
        top: -50px;
        transform: rotate(35deg);
        z-index: -10
    }

    .btn:hover:after {
        left: 120%
    }

    .btn:not(:hover):after {
        animation: .5s 3s doFirst
    }

@keyframes doFirst {
    from {
        left: -75px
    }

    to {
        left: 120%;
        transition: 1s cubic-bezier(.19, 1, .22, 1)
    }
}

.serviceSec {
    background-image: url(../Images/s4Bg.jpg);
    position: relative;
    background-repeat: no-repeat;
    animation: 50s ease-out 4s forwards backgroudAboutShow;
    background-position: left bottom;
    -webkit-animation-fill-mode: forwards;
    background-size: 60%
}

@keyframes backgroudAboutShow {
    from {
        background-size: 60%
    }

    to {
        background-position: center bottom;
        background-size: 70%
    }
}

@-moz-keyframes backgroudAboutShow {
    from {
        background-size: 60%
    }

    to {
        background-position: center bottom;
        background-size: 70%
    }
}

@-webkit-keyframes backgroudAboutShow {
    from {
        background-size: 60%
    }

    to {
        background-position: center bottom;
        background-size: 70%
    }
}

.serviceItemReadMore a {
    color: #9b6f5b;
    text-decoration: none;
    font-size: 13px
}

.serviceItemReadMore img {
    width: 5px;
    vertical-align: middle;
    margin-right: 3px;
    opacity: .5
}

.serviceItem {
    border: 1px solid #9b6f5b;
    padding: 5px;
    border-radius: 8px;
    margin-bottom: 12px
}

    .serviceItem .serviceItemContent {
        background-repeat: no-repeat;
        position: relative;
        border-radius: 4px;
        padding: 6px 10px 0;
        background-size: cover
    }

    .serviceItem .serviceItemTitle a, .serviceItem .serviceItemTitle b {
        color: #ca9075;
        font-size: 17px;
        text-decoration: none
    }

    .footerContact .footerContactItem a, .footerContact .footerContactItem span, .footerLinks .footerLinksItem a, .footerService .footerServiceItem a, .serviceItem .serviceItemDesc, .serviceItem .serviceItemDesc a {
        color: #bec6cd;
        text-decoration: none
    }

.serviceItems .col-md-4:first-child .serviceItem .serviceItemTitleImg {
    background: url(../Images/icon/monitor.png) 0 0/100%
}

.serviceItems .col-md-4:first-child .serviceItem:hover .serviceItemTitle .serviceItemTitleImg {
    background: url(../Images/icon/computer-display-outline.gif)
}

.serviceItems .col-md-4:nth-child(2) .serviceItem .serviceItemTitleImg {
    background: url(../Images/icon/basket-shopping.png) 0 0/100%
}

.serviceItems .col-md-4:nth-child(2) .serviceItem:hover .serviceItemTitle .serviceItemTitleImg {
    background: url(../Images/icon/basket-shopping-card-outline.gif)
}

.serviceItems .col-md-4:nth-child(4) .serviceItem .serviceItemTitleImg {
    background: url(../Images/icon/magnifier.png) 0 0/100%
}

.serviceItems .col-md-4:nth-child(4) .serviceItem:hover .serviceItemTitle .serviceItemTitleImg {
    background: url(../Images/icon/magnifier-zoom-search-outline.gif)
}

.serviceItems .col-md-4:nth-child(3) .serviceItem .serviceItemTitleImg {
    background: url(../Images/icon/rest-api-outline.png) 0 0/100%
}

.serviceItems .col-md-4:nth-child(3) .serviceItem:hover .serviceItemTitle .serviceItemTitleImg {
    background: url(../Images/icon/rest-api-outline.gif)
}

.serviceItems .col-md-4:nth-child(5) .serviceItem .serviceItemTitleImg {
    background: url(../Images/icon/star-rating-morph.png) 0 0/100%
}

.serviceItems .col-md-4:nth-child(5) .serviceItem:hover .serviceItemTitle .serviceItemTitleImg {
    background: url(../Images/icon/star-rating-morph.gif)
}

.serviceItems .col-md-4:nth-child(6) .serviceItem .serviceItemTitleImg {
    background: url(../Images/icon/polyline-outline.png) 0 0/100%
}

.serviceItems .col-md-4:nth-child(6) .serviceItem:hover .serviceItemTitle .serviceItemTitleImg {
    background: url(../Images/icon/polyline-outline.gif)
}

.serviceItem .serviceItemTitle .serviceItemTitleImg {
    width: 30px;
    height: 30px;
    background-size: 100%;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle
}

.serviceItem:hover .serviceItemTitle .serviceItemTitleImg {
    background-size: 100% !important
}

.serviceItem .serviceItemTitle .serviceItemTitleImg img {
    vertical-align: middle
}

.serviceItem .serviceItemDesc {
    line-height: 1.6;
    font-size: 13px
}

.readMore {
    color: #f5f5f5;
    text-decoration: none;
    font-size: 13px
}

    .readMore img {
        display: inline-block;
        vertical-align: middle;
        width: 5px;
        margin-right: 2px
    }

.portfolioItemFrame {
    position: relative;
    height: 345px;
    overflow: hidden
}

.portfolioItemImgInner {
    height: auto;
    top: 10px;
    -webkit-transition: 4s,filter .3s;
    -moz-transition: 4s,filter .3s;
    -ms-transition: 4s,filter .3s;
    -o-transition: 4s,filter .3s;
    transition: 4s,filter .3s;
    position: relative;
    display: block;
    width: 93%;
    margin: auto;
    filter: grayscale(.7)
}

.SecBtn, .secAboutButton, .secAboutText p, .sendCommentBtnDiv {
    margin-top: 20px
}

.portfolioItemDiv:hover .portfolioItemImgInner {
    filter: grayscale(0)
}

.portfolioItemDiv .frameBg {
    position: absolute;
    z-index: 9999;
    background-image: url(../Images/frame.png);
    width: 100%;
    height: 101%;
    top: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.portfolioItemFrame:hover img {
    top: -40%
}

.secAboutTitle {
    text-align: right
}

    .secAboutTitle h2:after {
        right: 8%;
        left: unset;
        bottom: -34px
    }

.secAboutText p {
    color: #a9a9a9;
    text-align: justify
}

.introImgDiv img {
    width: 80%
}

.secBg {
    background-image: url(../Images/secBg.jpg)
}

.secNewsTitle {
    margin-bottom: 60px
}

.newsItem {
    background: #faebd7;
    border-radius: 5px;
    padding: 6px 0;
    margin-bottom: 12px
}

    .newsItem .row {
        margin-left: 0 !important
    }

    .newsItem .newsItemImageDiv {
        display: flex;
        padding: 5px
    }

        .newsItem .newsItemImageDiv img {
            width: 100%;
            border-radius: 5px;
            object-fit: cover
        }

    .newsItem .newsItemDescDiv {
        padding-top: 6px
    }

        .newsItem .newsItemDescDiv b {
            font-size: 16px;
            line-height: 1.7rem;
            height: 3.4rem;
            overflow: hidden;
            display: inline-block
        }

        .InnerblogItemBody a, .blogItemBody a, .callBtn a, .newsItem .newsItemDescDiv a, ul.accordion-list li div.answer a {
            text-decoration: none;
            color: #000
        }

        .newsItem .newsItemDescDiv p {
            font-size: 14px;
            line-height: 1.4rem;
            height: 2.8rem;
            overflow: hidden;
            margin-top: 0;
            margin-bottom: 10px
        }

        .newsItem .newsItemDescDiv .newsItemBtn a {
            text-decoration: none;
            color: #000;
            font-size: 13px
        }

        .newsItem .newsItemDescDiv .newsItemBtn img {
            filter: brightness(.5);
            width: 6px;
            vertical-align: middle;
            margin-right: 6px
        }

.supportDeiv {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center
}

    .supportDeiv p {
        color: #fff;
        font-size: 18px;
        display: inline-block;
        width: 80%
    }

    .supportDeiv b {
        color: #ca9075;
        font-size: 18px
    }

.blogItemBody p, .cta span, .faqBtn a {
    font-size: 14px
}

.callBtn {
    display: inline-block;
    background: #d4af73;
    padding: 5px 25px;
    border-radius: 8px
}

    .callBtn img {
        width: 14px;
        vertical-align: middle
    }

.supportMan {
    width: 16%;
    position: absolute;
    left: 6%
}

    .supportMan img {
        width: 100%
    }

.clientCommentUserTitle, .faqTitle {
    color: #d4af73
}

ul.accordion-list {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    list-style: none
}

    ul.accordion-list li {
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        background-color: #f3d29d;
        padding: 8px;
        margin: 0 auto 8px;
        border: 1px solid #fff;
        border-radius: 5px;
        cursor: pointer
    }

        ul.accordion-list li.active h3:after {
            transform: rotate(45deg)
        }

        ul.accordion-list li h3 {
            position: relative;
            display: block;
            width: 100%;
            height: auto;
            margin: 0;
            font-size: 15px;
            letter-spacing: .01em;
            cursor: pointer;
            padding-left: 25px
        }

            ul.accordion-list li h3:after {
                content: "+";
                position: absolute;
                left: 0;
                top: 0;
                color: #000;
                transition: .3s ease-in-out;
                font-size: 18px
            }

        ul.accordion-list li div.answer {
            position: relative;
            display: block;
            width: 100%;
            height: auto;
            margin: 0;
            padding: 0;
            cursor: pointer
        }

            ul.accordion-list li div.answer p {
                position: relative;
                display: block;
                padding: 20px 0 0;
                cursor: pointer;
                line-height: 160%;
                margin: 0;
                font-size: 16px;
            }

.secSupportContent {
    margin-top: 60px
}

.blogItem {
    margin: 8px;
    padding: 6px;
    border-radius: 5px;
    background-color: #faebd7
}

.subjectItemImage a img:hover {
    width: 95%;
    transition: 1.5s
}

.InnerblogItemBody, .blogItemBody {
    color: #000;
    text-align: center;
    font-size: 15px;
    padding: 0 10px
}

    .blogItemBody p {
        text-align: right;
        color: #45494c;
        line-height: 1.2rem;
        height: 3.6rem;
        overflow: hidden
    }

    .blogItemBody h4 {
        text-align: right;
        margin-top: 16px;
        line-height: 1.4;
        margin-bottom: 5px;
        height: 2.5rem;
        overflow: hidden
    }

h1.LogoTitle, h1.sectionTitle {
    margin: auto;
    white-space: nowrap;
    overflow: hidden
}

.InnerblogItemImage a, .blogItemImage a {
    display: block;
    overflow: hidden;
    border-radius: 5px;
}

.blogItemImage img {
    width: 100%;
    display: block;
    border-radius: 4px;
    object-fit: cover;
    height: 200px;
    transition: 5s;
    object-position: center
}

.contactFloatContent .item .contactImgDiv, .contactFloatContent .item span {
    display: inline-block;
    background: #c08a71;
    border-radius: 50px;
    text-align: center
}

.InnerblogItem:hover .InnerblogItemImage img, .blogItem:hover .blogItemImage img {
    transform: scale(1.2)
}

.sectionBg2 {
    background-image: url(../Images/icon/Bg2.jpg);
    background-size: cover;
    background-position: center;
    position: relative
}

.footerTitle {
    text-align: center;
    margin-bottom: 40px
}

.InnerPageFooter .fTitle, .footerContact h2, .footerLinks h2, .footerService h2 {
    color: #fff
}

.footerContactItem, .footerLinks .footerLinksItem, .footerService .footerServiceItem {
    margin-bottom: 8px
}

    .footerLinks .footerLinksItem img, .footerService .footerServiceItem img {
        width: 6px;
        vertical-align: middle;
        margin-left: 14px;
        transition: .2s
    }

.footerLinksItem:hover img, .footerServiceItem:hover img {
    transform: translateX(-4px)
}

.enamad img {
    width: 93px;
    height: 93px;
    object-fit: contain
}

.footerContact {
    margin-bottom: 12px;
    vertical-align: sub
}

    .footerContact .footerContactItem img {
        width: 15px;
        vertical-align: middle;
        margin-left: 8px
    }

.RyakanetSignContent {
    display: flex;
    justify-content: space-between;
    background-color: #1b1a1a;
    border-radius: 8px;
    margin-top: 26px;
    align-items: center
}

.footerSign {
    text-align: center;
    padding: 15px
}

    .clientCommentUserSubTitle, .footerSign span {
        color: #a9a9a9
    }

    .footerSign img {
        width: 50px;
        display: inline-block;
        vertical-align: middle
    }

.socialNetwork ul {
    display: flex;
    align-items: center
}

    .socialNetwork ul li a img {
        width: 20px;
        margin-left: 14px;
        display: block
    }

h1.LogoTitle {
    text-align: center;
    animation-delay: 1s;
    animation: 2s steps(30,end) .5s both animated-text
}

h1.sectionTitle {
    animation-delay: 1s;
    animation: 2s steps(30,end) .5s both animated-text;
    text-align: center
}

#footer, #header {
    position: fixed;
    height: 50px;
    width: 100%;
    z-index: 9;
    text-align: center;
    color: #f2f2f2;
    padding: 0
}

#header {
    top: 0;
    transition: 1s
}

#footer {
    bottom: 0
}

#infoMenu {
    bottom: 80px
}

    #infoMenu li a {
        color: #fff;
        z-index: 999
    }

.fp-enabled body, html.fp-enabled {
    margin: 0;
    padding: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent
}

.fp-section {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.fp-slide {
    float: left
}

.fp-slide, .fp-slidesContainer {
    height: 100%;
    display: block
}

.fp-slides {
    z-index: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
    -webkit-transition: .3s ease-out;
    transition: .3s ease-out
}

.fp-slidesContainer {
    float: left;
    position: relative
}

.fp-controlArrow {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    position: absolute;
    z-index: 4;
    top: 50%;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -38px;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

    .fp-controlArrow.fp-prev {
        left: 15px;
        width: 0;
        border-width: 38.5px 34px 38.5px 0;
        border-color: transparent #fff transparent transparent
    }

    .fp-controlArrow.fp-next {
        right: 15px;
        border-width: 38.5px 0 38.5px 34px;
        border-color: transparent transparent transparent #fff
    }

.fp-scrollable {
    overflow: hidden;
    position: relative
}

.fp-scroller {
    overflow: hidden
}

.iScrollIndicator {
    border: 0 !important
}

.fp-notransition {
    -webkit-transition: none !important;
    transition: none !important
}

#fp-nav {
    position: fixed;
    z-index: 100;
    top: 50%;
    opacity: 1;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translate3d(0,-50%,0)
}

    #fp-nav.fp-right {
        right: 17px
    }

    #fp-nav.fp-left {
        left: 17px
    }

.fp-slidesNav {
    position: absolute;
    z-index: 4;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    left: 0 !important;
    right: 0;
    margin: 0 auto !important
}

    .fp-slidesNav.fp-bottom {
        bottom: 17px
    }

    .fp-slidesNav.fp-top {
        top: 17px
    }

    #fp-nav ul, .fp-slidesNav ul {
        margin: 0;
        padding: 0
    }

        #fp-nav ul li, .fp-slidesNav ul li {
            display: block;
            width: 14px;
            height: 13px;
            margin: 7px;
            position: relative
        }

            #fp-nav ul li a, .fp-slidesNav ul li a {
                display: block;
                position: relative;
                z-index: 1;
                width: 100%;
                height: 100%;
                cursor: pointer;
                text-decoration: none
            }

                #fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span {
                    height: 12px;
                    width: 12px;
                    margin: -6px 0 0 -6px;
                    border-radius: 100%
                }

                #fp-nav ul li a span, .fp-slidesNav ul li a span {
                    border-radius: 50%;
                    position: absolute;
                    z-index: 1;
                    height: 4px;
                    width: 4px;
                    border: 0;
                    left: 50%;
                    top: 50%;
                    margin: -2px 0 0 -2px;
                    -webkit-transition: .1s ease-in-out;
                    -moz-transition: .1s ease-in-out;
                    -o-transition: .1s ease-in-out;
                    transition: .1s ease-in-out;
                    background: #d09173
                }

            #fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span {
                width: 10px;
                height: 10px;
                margin: -5px 0 0 -5px
            }

            #fp-nav ul li .fp-tooltip {
                position: absolute;
                top: -7px;
                color: #d4af73;
                font-size: 14px;
                white-space: nowrap;
                max-width: 220px;
                overflow: hidden;
                display: block;
                opacity: 0;
                width: 0;
                cursor: pointer
            }

            #fp-nav ul li:hover .fp-tooltip, #fp-nav.fp-show-active a.active + .fp-tooltip {
                -webkit-transition: opacity .2s ease-in;
                transition: opacity .2s ease-in;
                width: auto;
                opacity: 1
            }

            #fp-nav ul li .fp-tooltip.fp-right {
                right: 20px
            }

            #fp-nav ul li .fp-tooltip.fp-left {
                left: 20px
            }

.fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell, .fp-auto-height.fp-section, .fp-responsive .fp-auto-height-responsive .fp-slide, .fp-responsive .fp-auto-height-responsive .fp-tableCell, .fp-responsive .fp-auto-height-responsive.fp-section {
    height: auto !important
}

.fp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0
}

.InnerPageFooter, .InnerPageMenu, .contactFloatBtn, .cta, .cta span, .supportDiv, .z-50 {
    position: relative
}

.container {
    max-width: 1200px
}

.menuStyle ul li {
    margin-left: 35px
}

.s2ItemPart {
    top: 4px;
    padding: 33px;
    line-height: 1.4;
    width: 90%
}

.s2Part1 {
    margin-bottom: 10px;
    margin-top: 10px
}

.s3ItemBody {
    margin: 70px 25px 0
}

.p3ItemBottom {
    font-size: 15px;
    left: 0
}

.hover, .portfolioItem:hover .portfolioItemImgDiv:before {
    opacity: 0
}

.cursorinnerhover {
    width: 20px;
    height: 20px;
    opacity: .5
}

.cta {
    margin: auto;
    padding: 11px 15px;
    transition: .2s;
    color: #fff;
    text-decoration: none
}

    .cta:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        border-radius: 28px;
        background: rgba(255,171,157,.5);
        width: 40px;
        height: 40px;
        transition: .3s
    }

    .cta span {
        vertical-align: middle
    }

    .cta svg {
        margin-left: 10px;
        transform: translateX(-5px);
        transition: .3s;
        vertical-align: middle
    }

    .InnerPageClientCommentUserTitle, .cta:hover {
        color: #000
    }

        .cta:hover:before {
            width: 90%;
            background: #ffab9d
        }

        .cta:hover svg {
            transform: translateX(0)
        }

            .cta:hover svg path {
                stroke: #000;
                transition-delay: .2s
            }

    .cta:active {
        transform: scale(.96)
    }

.InnerPageMenu {
    -webkit-box-shadow: 0 2px 12px 0 hsl(202deg 65% 25% / 20%);
    -moz-box-shadow: 0 2px 12px 0 hsl(202deg 65% 25% / 20%);
    box-shadow: 0 2px 12px 0 hsl(202deg 65% 25% / 20%);
    border-bottom: 1px solid #bc8971;
    background: #fff
}

    .InnerPageMenu .menuStyle ul li a {
        color: #64676b
    }

    .InnerPageMenu .menuStyle {
        padding-top: 0
    }

    .InnerPageMenu .logoIcon img {
        width: 60px;
        padding-top: 5px;
        padding-bottom: 5px
    }

.InnerPageFooter {
    background: #000;
    padding-top: 50px
}

    .InnerPageFooter .fInner, .InnerPageFooter .fInner a {
        color: #bec6cd;
        text-decoration: none;
        text-align: justify
    }

    .InnerPageFooter .fTopIcon:after {
        content: '';
        position: absolute;
        width: 60px;
        height: 60px;
        top: -35px;
        border-radius: 10px;
        background: #fafbfc;
        transform: rotate(45deg);
        z-index: 0;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto
    }

    .InnerPageFooter .fTopIcon img {
        position: absolute;
        top: -15px;
        z-index: 2;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 30px
    }

.InnerSec {
    min-height: 500px
}

.footerBottomImg img {
    width: 10%;
    display: block;
    margin: auto;
    padding-top: 22px
}

.InnerPageFooter .innerIntro {
    padding-left: 10%
}

    .InnerPageFooter .innerIntro .innerIntroLogoType, .sqQuestion img {
        width: 50%
    }

.footerTop {
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    color: #fff;
    padding-bottom: 20px
}

    .footerTop p {
        font-size: 17px
    }

.footerTopBr {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left,#f0f0f000,#b2a0a0,#f0f0f000);
    background-image: -moz-linear-gradient(left,#f0f0f000,#b2a0a0,#f0f0f000);
    background-image: -ms-linear-gradient(left,#f0f0f000,#b2a0a0,#f0f0f000);
    background-image: -o-linear-gradient(left,#f0f0f000,#b2a0a0,#f0f0f000)
}

.footerBInner {
    margin: 20px auto
}

.justify-content-between {
    justify-content: space-between !important
}

.InnerContent .innerTopDes {
    color: #5d6568;
    font-size: 16px;
    margin-top: 20px;
    text-align: justify;
    line-height: 2.2
}

.innerCText * {
    font-size: 18px
}

.innerTopDes a {
    text-decoration: none;
    color: #3d3f40
}

.InnerTitle {
    text-align: center;
    font-size: 22px;
    margin-bottom: 0
}

.liDesc {
    color: #5d6568
}

.sqQuestion {
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 6px;
    background: #4cd964;
    box-shadow: 0 3px 15px rgb(76 217 100 / 50%);
    display: flex;
    align-items: center;
    justify-content: center
}

.supportDiv {
    background: #1b1a1a;
    min-height: 200px;
    border-radius: 10px;
    margin-top: 70px;
    box-shadow: 0 0 22px 1px rgb(125 133 137 / 50%);
    padding: 20px 8px
}

    .supportDiv img.supportDivSeparate {
        width: 28px;
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto
    }

        .supportDiv img.supportDivSeparate.spTop {
            top: -12px;
            transform: rotate(180deg)
        }

    .supportDiv .txt {
        color: #bc8971
    }

    .supportDiv .title {
        font-size: 22px;
        color: #fff;
        margin: 0
    }

.contactFloatContent .item, .portfolioItem a, .relatedContentDiv .relatedContentBody .title a {
    color: #000;
    text-decoration: none
}

.supportDiv .supportDibBtns .btn {
    margin-left: 5px
}

.z-50 {
    z-index: 50
}

.relatedPageDiv {
    background: #fff;
    padding: 15px 12px 8px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 25px rgb(227 229 230 / 50%);
    -moz-box-shadow: 0 0 25px rgba(227,229,230,.5);
    box-shadow: 0 0 25px rgb(227 229 230 / 50%)
}

.btnFill {
    background: #4cd964;
    color: #fff;
    border: none
}

.contactFloatContent {
    width: 120px;
    height: 0;
    text-align: right;
    margin: 0 0 10px;
    overflow: hidden;
    opacity: 0
}

    .contactFloatContent.open {
        height: 130px;
        opacity: 1
    }

    .contactFloatContent.popup-ani {
        -webkit-transition: .8s cubic-bezier(.175, .885, .32, 1.275);
        transition: .8s cubic-bezier(.175, .885, .32, 1.275)
    }

.contactFloatBtn {
    width: 65px;
    height: 65px;
    background-color: #c08a71;
    border-radius: 35px 35px 35px 6px;
    float: right;
    box-shadow: 0 .5rem 1rem rgb(0 0 0 / 15%);
    z-index: 5
}

    .contactFloatBtn .img-fab {
        height: 30px;
        width: 30px;
        background-image: url("/Images/icon/phone.svg");
        background-repeat: no-repeat;
        background-size: 80%;
        background-position: bottom;
        transform: rotate(95deg);
    }

    .contactFloatBtn .wrap {
        transform: rotate(0);
        -webkit-transition: .15s cubic-bezier(.15, .87, .45, 1.23);
        transition: .15s cubic-bezier(.15, .87, .45, 1.23);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .contactFloatBtn .ani {
        transform: rotate(45deg);
        -webkit-transition: .15s cubic-bezier(.15, .87, .45, 1.23);
        transition: .15s cubic-bezier(.15, .87, .45, 1.23)
    }

    .contactFloatBtn .close {
        background-position: center top;
        background-image: url("/Images/icon/times.svg");
        transform: rotate(-45deg);
        float: none;
        opacity: 1
    }

.contactFloatPnl {
    position: fixed;
    left: 25px;
    bottom: 25px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    animation: vibrate-move 2s infinite;
}

@keyframes vibrate-move {
    0%, 85%, 100% {
        transform: translate(0, 0);
    }

    87% {
        transform: translate(-3px, -2px);
    }

    89% {
        transform: translate(3px, 2px);
    }

    91% {
        transform: translate(-2px, 2px);
    }

    93% {
        transform: translate(2px, -2px);
    }

    95% {
        transform: translate(-2px, 1px);
    }

    97% {
        transform: translate(2px, -1px);
    }
}

.contactFloatContent .item {
    margin-bottom: 12px;
    display: block
}

    .contactFloatContent .item .contactImgDiv {
        width: 35px;
        height: 35px;
        margin-left: 10px;
        vertical-align: middle
    }

        .contactFloatContent .item .contactImgDiv img {
            padding-top: 7px;
            width: 18px
        }

    .contactFloatContent .item span {
        width: 70px;
        color: #fff
    }

.txtInnerLink {
    text-decoration: none;
    color: #035781
}

.fixed {
    position: fixed;
    width: 100%;
    top: 0;
    animation: .3s menuFixed;
    z-index: 70
}

@keyframes menuFixed {
    from {
        top: -60px
    }

    to {
        top: 0
    }
}

@-moz-keyframes menuFixed {
    from {
        top: -60px
    }

    to {
        top: 0
    }
}

@-webkit-keyframes menuFixed {
    from {
        top: -60px
    }

    to {
        top: 0
    }
}

.pointer {
    cursor: pointer
}

.portfolioItem {
    overflow: hidden;
    text-align: center;
    padding: 13px
}

.portfolioItemImgDiv {
    border: 1px solid #ca9075;
    border-radius: 5px;
    display: block;
    box-shadow: 0 0 8px 0 #e3e5e6;
    position: relative
}

.InnerblogItem, .jobItem {
    -webkit-box-shadow: 0 0 25px #e2e5e7;
    -moz-box-shadow: 0 0 25px #e2e5e7;
    margin-bottom: 30px;
    background-color: #fff
}

.portfolioItem img.portfolioWeb {
    height: 200px;
    width: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    border-radius: 3px
}

.portfolioItemTitle {
    margin-top: 20px;
    display: block
}

.portfolioItemImgDiv:after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: -20px;
    border-radius: 10px 1px 0 0;
    background: #fafbfc;
    transform: rotate(45deg);
    z-index: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    border-top: 1px solid #ca9075;
    border-left: 1px solid #ca9075
}

.portfolioItemImgDiv:before {
    content: '';
    position: absolute;
    background: #976868;
    opacity: .2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 5px;
    transition: .6s
}

.portfolioItemImgDivSep {
    position: absolute;
    bottom: -12px;
    z-index: 2;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 22px
}

.InnerblogItem {
    padding: 6px;
    border-radius: 5px;
    box-shadow: 0 0 25px #e2e5e7
}

.InnerblogItemBody p {
    font-size: 15px;
    text-align: right;
    color: #82878b;
    line-height: 1.6rem;
    height: 4.9rem;
    overflow: hidden
}

.InnerblogItemBody h4 {
    text-align: center;
    margin-top: 20px;
    line-height: 1.4;
    margin-bottom: 5px;
    height: 2.4rem;
    overflow: hidden
}

.InnerblogItemImage img {
    width: 100%;
    display: block;
    border-radius: 4px;
    object-fit: cover;
    height: 270px;
    transition: 3s;
    object-position: center
}

.InnerblogBtn {
    font-size: 15px;
    float: left
}

    .InnerblogBtn a p:hover {
        color: #ca9075;
        transition: .4s
    }

.InnerblogItemReadMore img {
    filter: brightness(.5);
    width: 5px;
    margin-right: 4px
}

.InnerblogItemReadMore a {
    color: #45494c;
    font-size: 13px
}

.jobItem {
    padding: 6px 20px;
    border-radius: 5px;
    box-shadow: 0 0 25px #e2e5e7;
    display: flex;
    flex-direction: column;
    height: 95%
}

    .jobItem h3 {
        margin-bottom: 0
    }

.h-100 {
    height: 100% !important
}

.contactIcon {
    width: 20px;
    margin-left: 5px;
    vertical-align: middle
}

.InnerContent .faqItems {
    padding-left: 0
}

    .InnerContent .faqItems ul {
        margin: 0;
    }

.contentComment {
    margin-top: 50px
}

.contentCommentTitle {
    display: inline-block;
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 17px;
    border-right: 4px solid #ca9075;
    padding-right: 8px;
    margin-right: 6px;
    border-radius: 4px
}

.contentComment #commentBody {
    resize: vertical;
}

.sendCommentPnl {
    padding: 6px 20px;
    border-radius: 15px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 25px #e2e5e7;
    -moz-box-shadow: 0 0 25px #e2e5e7;
    box-shadow: 0 0 25px #e2e5e7
}

.SendCommentResult {
    color: #3c763d;
    background-color: #dff0d8;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px
}

.commentList {
    margin-top: 50px
}

.commentItem {
    background: #fff;
    padding: 15px;
    border-radius: 15px;
    -webkit-box-shadow: 0 0 8px hsl(204deg 9% 90% / 77%);
    -moz-box-shadow: 0 0 8px hsl(204deg 9% 90% / 77%);
    box-shadow: 0 0 8px hsl(204deg 9% 90% / 77%);
    margin-bottom: 10px
}

    .commentItem .pofileImgDiv img {
        width: 50px;
        border-radius: 50%
    }

    .commentItem .commentLikeDiv img {
        width: 20px;
        vertical-align: middle;
        cursor: pointer
    }

        .commentItem .commentLikeDiv img.dislike {
            transform: rotateX(180deg) rotateY(180deg)
        }

    .commentItem .commentBody {
        margin-top: 10px
    }

    .commentItem .commentLikeDiv div:first-child {
        margin-left: 30px
    }

    .commentItem .commentDate {
        color: #7f8187
    }

.sendCommentPnl .btn {
    color: #45494c
}

.CommentReply {
    width: 90%;
    margin-right: auto
}

.gallery .row > div {
    padding: 2px
}

.gallery .lightbox img {
    width: 100%;
    position: relative;
    height: 130px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ca9176
}

.gallery .lightbox:before {
    position: absolute;
    top: 40%;
    left: 50%;
    margin-top: -13px;
    margin-left: -13px;
    opacity: 0;
    color: #fff;
    font-size: 26px;
    font-family: 'Glyphicons Halflings';
    content: '\e003';
    pointer-events: none;
    z-index: 9000;
    transition: .4s
}

.gallery .lightbox:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    background-color: rgb(153 160 167 / 70%);
    content: '';
    transition: .4s;
    height: 131px;
    border-radius: 4px
}

#baguetteBox-overlay.visible, .gallery .lightbox:hover:after, .gallery .lightbox:hover:before {
    opacity: 1
}

#baguetteBox-overlay {
    display: none;
    opacity: 0;
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000;
    background-color: rgba(0,0,0,.8);
    -webkit-transition: opacity .5s;
    transition: opacity .5s
}

    #baguetteBox-overlay .full-image {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center
    }

        #baguetteBox-overlay .full-image figure {
            display: inline;
            margin: 0;
            height: 100%
        }

        #baguetteBox-overlay .full-image img {
            display: inline-block;
            width: 90%;
            height: auto;
            max-height: 100%;
            max-width: 100%;
            vertical-align: middle;
            -webkit-box-shadow: 0 0 8px rgba(0,0,0,.6);
            -moz-box-shadow: 0 0 8px rgba(0,0,0,.6);
            box-shadow: 0 0 8px rgba(0,0,0,.6)
        }

        #baguetteBox-overlay .full-image figcaption {
            display: block;
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
            line-height: 1.8;
            white-space: normal;
            color: #ccc;
            background-color: rgba(0,0,0,.6);
            font-family: sans-serif
        }

        #baguetteBox-overlay .full-image:before {
            content: "";
            display: inline-block;
            height: 50%;
            width: 1px;
            margin-right: -1px
        }

#baguetteBox-slider {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    white-space: nowrap;
    -webkit-transition: left .4s,-webkit-transform .4s;
    transition: left .4s,transform .4s,-webkit-transform .4s,-moz-transform .4s
}

    #baguetteBox-slider.bounce-from-right {
        -webkit-animation: .4s ease-out bounceFromRight;
        animation: .4s ease-out bounceFromRight
    }

    #baguetteBox-slider.bounce-from-left {
        -webkit-animation: .4s ease-out bounceFromLeft;
        animation: .4s ease-out bounceFromLeft
    }

@-webkit-keyframes bounceFromRight {
    0%,100% {
        margin-left: 0
    }

    50% {
        margin-left: -30px
    }
}

@keyframes bounceFromRight {
    0%,100% {
        margin-left: 0
    }

    50% {
        margin-left: -30px
    }
}

@-webkit-keyframes bounceFromLeft {
    0%,100% {
        margin-left: 0
    }

    50% {
        margin-left: 30px
    }
}

@keyframes bounceFromLeft {
    0%,100% {
        margin-left: 0
    }

    50% {
        margin-left: 30px
    }
}

.baguetteBox-button#next-button, .baguetteBox-button#previous-button {
    top: 50%;
    top: calc(50% - 30px);
    width: 44px;
    height: 60px
}

.baguetteBox-button {
    background-color: transparent !important;
    position: absolute;
    cursor: pointer;
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0;
    -moz-border-radius: 15%;
    border-radius: 15%;
    color: #ddd;
    font: 1.6em sans-serif;
    -webkit-transition: background-color .4s;
    transition: background-color .4s
}

    .baguetteBox-button:focus, .baguetteBox-button:hover {
        background-color: rgba(50,50,50,.9)
    }

    .baguetteBox-button#next-button {
        right: 2%
    }

    .baguetteBox-button#previous-button {
        left: 2%
    }

    .baguetteBox-button#close-button {
        top: 20px;
        right: 2%;
        right: calc(2% + 6px);
        width: 30px;
        height: 30px
    }

    .baguetteBox-button svg {
        position: absolute;
        left: 0;
        top: 0
    }

.baguetteBox-spinner {
    width: 40px;
    height: 40px;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px
}

.baguetteBox-double-bounce1, .baguetteBox-double-bounce2 {
    width: 100%;
    height: 100%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #fff;
    opacity: .6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: 2s ease-in-out infinite bounce;
    animation: 2s ease-in-out infinite bounce
}

.baguetteBox-double-bounce2 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s
}

@-webkit-keyframes bounce {
    0%,100% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes bounce {
    0%,100% {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        transform: scale(0)
    }

    50% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1)
    }
}

.ContentDetailPage {
    padding-bottom: 5rem !important
}

.ContentDetailImgDiv img {
    width: 100%;
    border: 6px solid #dee4ea;
    object-fit: cover;
}

.ContentDetailImgDiv.PortfolioImg img {
    max-height: 250px;
    object-position: top
}

.ContentDetailPageTitle {
    font-size: 20px;
    margin: 0
}

.contentRightCard {
    border-radius: 5px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 25px #e2e5e7;
    -moz-box-shadow: 0 0 25px #e2e5e7;
    box-shadow: 0 0 25px #e2e5e7;
    margin: 20px 0
}

.contentRightCardTitle {
    border-bottom: 1px solid #eee;
    padding: 5px 15px
}

.contentRightCardBody {
    padding: 5px 15px
}

.contentTagsDiv a, .contentTagsDiv span {
    display: inline-block;
    text-decoration: none;
    background-color: #f1e7da;
    border-radius: 25px;
    padding-left: 12px;
    padding-right: 12px;
    color: #000;
    margin-bottom: 5px;
    font-size: 12px;
    margin-left: 2px
}

.contentLeftCard {
    padding-right: 5%
}

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

.card-title, .discountPercent, .form-label {
    font-weight: 700
}

.form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: #ca9075;
    outline: 0
}

input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

.relatedContentDiv {
    border-bottom: 1px solid #eee;
    padding-top: 5px
}

    .relatedContentDiv:last-child {
        border-bottom: none
    }

    .relatedContentDiv .imgDiv img {
        width: 100%;
        border-radius: 5px;
        height: 50px;
        object-fit: cover;
        object-position: top
    }

    .relatedContentDiv .relatedContentBody .title {
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden
    }

    .relatedContentDiv .relatedContentBody .abs {
        font-size: 13px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #857777
    }

.contentRightCardDiv {
    position: sticky;
    top: 100px
}

.notFound {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center
}

    .notFound canvas {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%,-50%)
    }

    .notFound .text .wrap {
        fill: #FFF
    }

    .notFound .overlay {
        width: 0
    }

        .notFound .overlay .txt {
            font-size: 12rem;
            font-weight: 900;
            letter-spacing: -.5rem
        }

        .notFound .overlay .txt2 {
            font-size: 1.5rem
        }

    .notFound h1 {
        position: relative;
        width: 300px;
        height: 400px;
        padding: 4px
    }

        .notFound h1 .fill {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden
        }

        .notFound h1 .inv {
            position: absolute;
            width: 300px;
            height: 400px;
            top: 0;
            left: 0
        }

        .notFound h1 .rect {
            fill: #fafbfc
        }

        .notFound h1 .clear {
            fill: transparent
        }

.loading {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 999999999;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed
}

.spinner:before {
    transform: rotateX(60deg) rotateY(45deg) rotateZ(45deg);
    animation: 1s linear infinite reverse rotateBefore
}

.spinner:after {
    transform: rotateX(240deg) rotateY(45deg) rotateZ(45deg);
    animation: 1s linear infinite rotateAfter
}

.spinner:after, .spinner:before {
    box-sizing: border-box;
    content: '';
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -5em;
    margin-left: -5em;
    width: 10em;
    height: 10em;
    transform-style: preserve-3d;
    transform-origin: 50%;
    perspective-origin: 50% 50%;
    perspective: 340px;
    background-size: 10em 10em;
    background-image: url("../Images/spinner.svg")
}

@keyframes rotateBefore {
    from {
        transform: rotateX(60deg) rotateY(45deg) rotateZ(0)
    }

    to {
        transform: rotateX(60deg) rotateY(45deg) rotateZ(-360deg)
    }
}

@keyframes rotateAfter {
    from {
        transform: rotateX(240deg) rotateY(45deg) rotateZ(0)
    }

    to {
        transform: rotateX(240deg) rotateY(45deg) rotateZ(360deg)
    }
}

.EndLoading .spinner:after, .EndLoading .spinner:before {
    opacity: 0;
    transition: opacity .4s
}

.EndLoading {
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
    transition: opacity .4s linear,visibility .8s,transform .5s
}

.text-decoration-none {
    text-decoration: none !important
}

::-moz-selection {
    color: #ca9075;
    background: #f1f1f1
}

::selection {
    color: #ca9075;
    background: #f1f1f1
}

.card {
    position: relative;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
    box-shadow: 0 .25rem .75rem rgb(0 0 0 / 5%)
}

.card-body {
    flex: 1 1 auto;
    padding: 1rem
}

.card-title {
    margin-bottom: .5rem
}

.card-header {
    padding: .5rem 1rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125)
}

    .card-header:first-child {
        border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0
    }

.text-muted {
    color: #6c757d !important
}

.cardBody {
    padding: 1rem
}

.discountPercent {
    font-size: 30px;
    color: #10af52;
    padding: 4px 23px;
    border-radius: 11px;
    margin: 0
}

.pN {
    font-size: 18px
}

.ribbon-wrapper {
    width: 117px;
    height: 90px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden
}

.alert, .clientCommentItem, .ribbon {
    position: relative
}

.ribbon {
    font-size: 12px;
    color: #fff;
    background-color: #cc324b;
    text-align: center;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    padding: 3px 0;
    left: -30px;
    top: 15px;
    width: 120px
}

input[type=tel] {
    text-align: left;
    direction: ltr
}

.ltr {
    direction: ltr
}

.vInput {
    letter-spacing: 18px;
    border: 0;
    background: repeating-linear-gradient(to right,#766d6d 0 26px,transparent 26px 38px) bottom/100% 2px no-repeat;
    width: 180px;
    clip-path: polygon(0 0,calc(100% - 38px) 0,calc(100% - 38px) 100%,0 100%);
    box-sizing: border-box;
    outline: 0;
    font: 4ch consolas;
    caret-color: #ccc
}

.recaptchaDiv {
    text-align: center;
    margin-top: 20px
}

.text-danger {
    color: red
}

.alert {
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem
}

.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc
}

    .alert-success .alert-link {
        color: #0c4128
    }

.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7
}

.InnerPageClientCommentBody:after, .clientCommentBody:after {
    content: "";
    position: absolute;
    right: 40px;
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
    border-bottom: 22px solid transparent
}

.alert-danger .alert-link {
    color: #6a1a21
}

.flex-column {
    flex-direction: column !important
}

.clientCommentItem {
    border-radius: 2px
}

.clientCommentBody {
    background: #222;
    color: #bec6cd;
    padding: 10px;
    margin-bottom: 20px
}

    .clientCommentBody:after {
        border-top: 23px solid #222
    }

    .clientCommentBody .clientCommentBodyInner {
        line-height: 1.8;
        font-size: 15px;
        height: 6.8rem;
        overflow: hidden
    }

.InnerPageClientCommentBodyInner p, .clientCommentBodyInner p {
    margin: 0
}

.InnerPageClientCommentUserImg, .clientCommentUserImg {
    width: 50px;
    border-radius: 50%;
    height: 50px;
    object-fit: cover
}

.InnerPageClientCommentUserInfo, .clientCommentUserInfo {
    width: 97%;
    margin: auto
}

.InnerPageClientCommentItem {
    position: relative;
    border-radius: 2px;
    margin-bottom: 30px
}

.InnerPageClientCommentBody {
    background: #efeeee;
    color: #000;
    padding: 10px;
    margin-bottom: 20px
}

    .InnerPageClientCommentBody:after {
        border-top: 23px solid #efeeee
    }

    .InnerPageClientCommentBody .clientCommentBodyInner {
        line-height: 1.8;
        font-size: 15px
    }

.InnerPageClientCommentUserSubTitle {
    color: #888
}

.faqCategoryTitle:first-child {
    margin-top: 0;
}

.faqCategoryTitle {
    display: inline-block;
    font-size: 17px;
    border-right: 4px solid #ca9075;
    padding-right: 7px;
    border-radius: 4px;
    margin: 30px 6px 6px 0;
}

.pagination {
    display: flex;
    list-style: none
}

.page-link {
    position: relative;
    color: #bc8971;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

    .page-link:hover {
        z-index: 2;
        color: #bc8971;
        background-color: #e9ecef;
        border-color: #dee2e6
    }

    .page-link:focus {
        z-index: 3;
        color: #bc8971;
        background-color: #e9ecef;
        outline: 0;
        box-shadow: none
    }

.page-item:not(:first-child) .page-link {
    margin-right: -1px
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #bc8971;
    border-color: #bc8971
}

.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6
}

.page-link {
    padding: .375rem .75rem
}

.page-item:first-child .page-link {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem
}

.page-item:last-child .page-link {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem
}