﻿body { color: #4b4848; }
#navbar-collapse-main .navbar-nav > li > a.ecomm { color: #f15a55; }
.landing-section-heading { height: 550px; background-color: #f15a55; position: relative; }
body.diffColor .landing-section-heading { background-color: #4b4848; }

.landing-section-heading .BottomLine { position: absolute; height: 50px; width: 4px; left: 50%; bottom: -25px; cursor: pointer; }
.landing-section-heading .BottomLine .ver-line { width: 100%; height: 100%; display: block; background: linear-gradient(to bottom, transparent 50%, #4b4848 50%); background-position: 0 -50px; background-size: 100% 200%; animation: scrolldown 1.8s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite; }

@keyframes scrolldown {
    0% { background-position: 0 -50px; }
    75% { background-position: 0 0; }
    100% { background-position: 0 50px; }
}

.landing-heading-content { position: absolute; top: 50%; left: 50%; width: 100%; padding-top: 45px; text-align: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.landing-heading-content h1 { margin: 0; color: #fff; font-size: 300%; line-height: 1; font-family: 'CeraGRBlack-Richkid', 'SimplerBold'; max-width: 595px; margin: 0 auto 15px; }
.landing-heading-content p { color: #fff; font-size: 120%; line-height: 1.2; max-width: 660px; margin: 0 auto; display: block; letter-spacing: -0.75px; }

.inline-buttons { margin-top: 20px; padding: 10px; direction: ltr; }
.btn { height: 50px; font-size: 105%; letter-spacing: -0.5px; margin: 0 10px; padding: 9px; box-shadow: none; border-radius: 40px; font-family: 'SimplerBold'; }
.btn.btn-light { background-color: transparent; border: 1px solid #fff; width: 235px; }
.btn.btn-light:hover { color: #fff; }
.btn.btn-white { background-color: #fff; border: 1px solid #fff; width: 235px; color: #4b4848; height: 46px; padding: 7px; }
.btn.btn-primary { background-color: #f15a55; border-color: #f15a55; width: 235px; height: 46px; padding: 7px; font-weight: normal; }

.hide-scale { -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition: all .3s ease; transition: all .3s ease; }
.hide-scale.item-hide { -webkit-transform: scale(0, 0); transform: scale(0, 0); }
.landing-page-section { padding: 50px 0 50px; direction: ltr; }


.landing-section-title { color: #4b4848; margin: 0 0 40px 0; text-align: center; font-size: 250%; line-height: 1; font-family: 'SimplerBold'; letter-spacing: -1.25px; }

.landing-grid-row_item { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; }
.landing-grid-row_item > * { width: 50%; direction: ltr; }
.landing-grid-row_item:not(:first-child) { margin-top: 100px; }
.landing-grid-row_content > h2 { margin: 0; font-size: 250%; color: #4b4848; font-family: 'SimplerBold'; line-height: 1; max-width: 420px; }
.landing-grid-row_content > h3 { margin: 0; font-size: 200%; line-height: 1; }
.landing-grid-row_content .landing-grid-row_text { margin-top: 20px; }
.landing-grid-row_content .landing-grid-row_text p { line-height: 1.5; margin-bottom: 15px; }
.landing-grid-row_content .landing-grid-row_text h3 { font-size: 120%; line-height: 1.5; font-family: 'SimplerBold'; }
.landing-grid-row_text ol { margin: 0; }
.landing-grid-row_text ol > li { display: inline-block; position: relative; padding-right: 24px; font-size: 118%; }
.landing-grid-row_text ol > li:not(:first-child) { margin-right: 20px; }
.landing-grid-row_text ol > li:before { content: ""; position: absolute; right: 0; top: 50%; width: 20px; height: 20px; border-radius: 50%; background-image: url(../../../000Frames/site/images/check.png); background-size: contain; background-repeat: no-repeat; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.landing-grid-row_text ul { margin: 0 0 15px; list-style: none; }
.landing-grid-row_text ul > li { position: relative; padding-right: 15px; font-size: 106%; }
.landing-grid-row_text ul > li:before { content: ""; position: absolute; right: 0; top: 50%; width: 8px; height: 8px; border-radius: 50%; background-color: #65aa3e; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.landing-grid-row_item .landing-grid-row_thumb { position: relative; }

.landing-grid-row_item:nth-child(even) .landing-grid-row_content { padding-left: 40px; -ms-flex-order: 1; order: 1; }
.landing-grid-row_item:nth-child(even) .landing-grid-row_thumb { padding-left: 15px; -ms-flex-order: 0; order: 0; }


.landing-grid-row_item:nth-child(odd) .landing-grid-row_content { padding-right: 40px; -ms-flex-order: 0; order: 0; }
.landing-grid-row_item:nth-child(odd) .landing-grid-row_thumb { padding-right: 15px; -ms-flex-order: 1; order: 1; }

.lastest-sites-grid-sizer, .latest-grid-item { width: 32%; }
.lastest-sites-gutter-sizer { width: 2%; }
.latest-grid-item { margin-bottom: 2%; overflow: hidden; }

.latest-grid-item a .latest-overlay-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; background: rgba(0, 0, 0, 0.2); opacity: 0; transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; z-index: 1; }
.latest-grid-item:hover a .latest-overlay-bg { opacity: 1; }
.latest-grid-item:hover a img { transform: scale(1.01); -webkit-transform: scale(1.01); }

.smallVideoEco { position: absolute; left: 6%; bottom: 8%; width: 29.5%; height: auto; }
.bigVideoEco { width: 100%; height: auto; }



.bottom-icons-title { text-align: center; font-size: 250%; font-family: 'SimplerBold'; margin: 0; letter-spacing: -0.8px; direction: ltr; }
.bottom-icons-subtitle { text-align: center; font-size: 120%; margin: 0; letter-spacing: -0.8px; }
.bottom-icons { display: -ms-flexbox; -ms-flex-pack: justify; justify-content: space-between; max-width: 870px; margin: 45px auto 0; flex-direction: row; display: flex; flex-wrap: wrap; font-size: 85%; line-height: 1.6; }
.lotty-icon-wrapper { text-align: center; flex: 1 0 30%; /* explanation below */ margin: 5px; margin-bottom: 57px; }
.bottom-icons-action { text-align: center; }
.lottie-graphics { max-width: 87px; margin: 0 auto; max-height: 80px; margin-bottom: 12px; }
.icon-text { max-width: 216px; margin: 0 auto; }
#LottieCartOptions { width: 120px; height: 120px; }
#LottiePopup { width: 105px; height: 105px; }
#LottieEmail { width: 105px; height: 105px; }

#siteheader-navigation-container.logo-text-dark .navbar-brand svg .title-logo { fill: #f15a55; }


#siteheader-navigation-container .navbar-brand { display: block !important; }
#BonusSelect { cursor: pointer; }


@media (max-width: 991px) {
    .landing-heading-content h1, .landing-grid-row_content > h2, .landing-section-title { font-size: 185%; }
    .landing-heading-content h1 { font-size: 260%; }
    .landing-section-title { margin-bottom: 30px; }
    .landing-heading-content p, .bottom-icons-subtitle { font-size: 145%; }
    .landing-grid-row_item:nth-child(odd) .landing-grid-row_content { padding-right: 15px; }
    .landing-grid-row_item:nth-child(odd) .landing-grid-row_thumb { padding-right: 5px; }
    .landing-grid-row_item:nth-child(even) .landing-grid-row_content { padding-right: 15px; padding-left: 0; }
    .landing-grid-row_item:nth-child(even) .landing-grid-row_thumb { padding-left: 5px; }
    .landing-grid-row_content .landing-grid-row_text p { font-size: 100%; }
    .landing-grid-row_item:not(:first-child) { margin-top: 60px; }
    .landing-page-section { padding: 90px 0; }
    .landing-page-section#BonusCTA { padding-top: 0px; }
    .landing-grid-row_content > h3 { font-size: 145%; }
    .landing-grid-row_content .landing-grid-row_text { margin-top: 20px; }

    .landing-grid-row_text ol > li { padding-right: 20px; font-size: 105%; }
    .landing-grid-row_text ol > li:not(:first-child) { margin-right: 10px; }
    .landing-grid-row_text ol > li:before { width: 16px; height: 16px; }

    .bottom-icons-title { font-size: 160%; }
    .bottom-icons .icon-text { font-size: 90%; }
}

@media(max-width: 767px) {
    .btn.btn-primary { width: 85%; padding: 9px; margin-top: 30px; }
    .landing-section-heading { margin-bottom: 30px; }
    .landing-section-heading .container { padding: 0 10px; }
    .landing-section-heading .container .row { margin: 0; }
    .landing-grid-row_content > h2 { font-size: 175%; }
    .landing-grid-row_content .landing-grid-row_text p, .landing-grid-row_text ol > li { font-size: 90%; }
    .landing-heading-content h1, .landing-section-title { font-size: 165%; max-width: 90%; }
    .landing-grid-row_content > h3 { font-size: 145%; }
    .landing-page-section { padding: 30px 0; }
    .landing-page-section#BonusCTA { padding-top: 30px; }
    .inline-buttons { margin-top: 25px; }
    .btn.btn-white, .btn.btn-light { width: 100%; padding: 9px; margin: 0 auto 20px; }
    .btn-white { margin-bottom: 20px; }
    .landing-heading-content h1 { font-size: 195%; max-width: 290px; }
    .landing-heading-content p { font-size: 110%; }

    .landing-grid-row_item { display: block; }
    .landing-grid-row_item > * { width: 100%; padding: 0; }
    .landing-grid-row_text ol > li { display: block; }
    .landing-grid-row_text ol > li:not(:first-child) { margin-right: 0; }
    .landing-grid-row_text ol { margin-bottom: 20px; }
    .landing-grid-row_content .landing-grid-row_text h3 { font-size: 105%; }


    .bottom-icons-title { font-size: 175%; padding: 0 5px; text-align: revert; }
    .bottom-icons-subtitle { font-size: 135%; padding: 0 5px; text-align: revert; }
    .bottom-icons { display: block; }
    .lotty-icon-wrapper { max-width: 100%; text-align: right; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; margin: 0; margin-bottom: 20px; align-items: center; text-align: left; }
    .lotty-icon-wrapper:not(:first-child) { margin-top: 20px; }
    .lottie-graphics { width: 87px; display: inline-block; margin-bottom: 0; }
    #LottieCartOptions { width: 85px; height: auto; display: block; margin: 0 auto; }
    #LottiePopup { width: 80px; height: auto; display: block; margin: 0 10px 0 0; }
    #LottieEmail { width: 80px; height: auto; display: block; margin: 0 10px 0 0; }
    .bottom-icons .icon-text { padding-right: 15px; font-size: 108%; padding: 0; margin-right: 0; display: inline-block; direction: ltr; width: calc(100% - 90px); }
}


#OurWorksGallery .container { width: 100%; padding: 0; }
.tile-item { width: 33.3333%; height: 43vh; float: left; position: relative; }
.tile-item .tile-name { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 225%; width: 100%; color: #fff; text-align: center; font-family: 'CeraGRBlack-Richkid', 'SimplerBold'; }
.tile-inner-content { text-align: center; width: 100%; position: absolute; top: 50%; transform: translateY(-50%); }
.tile-inner-content img { max-width: 200px; }
.tile-item.tile-normal .tile-inner-content img { max-height: 140px; }
.tile-links { margin: 30px 0 0 0; padding: 0; list-style: none; width: 100%; }
.tile-links > li { display: inline-block; /*border-bottom: 2px solid #fff;*/ line-height: 1.3; margin-left: 30px; position: relative; }
.tile-links > li:last-of-type { margin-left: 0; }
.tile-links > li:not(:last-of-type):before { content: "/"; position: absolute; left: -22px; top: -2px; font-size: 145%; font-weight: bold; color: #fff; }
.tile-links > li > a { color: #fff; /*margin-left: 8px;*/ }
.tile-links > li > svg, .tile-links > li a svg { width: 6px; fill: #fff; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
.tile-links > li > a span { font-size: 118%; }
.tile-links a.hoverEffect:after { content: ""; width: 100%; height: 2px; background-color: #fff; display: block; transition: all 350ms ease-out; -webkit-transition: all 350ms ease-out; }
.tile-item .tile-front { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; visibility: visible; opacity: 1; -webkit-transition: visibility 0s linear 0s, opacity .5s, background-color .3s; transition: visibility 0s linear 0s, opacity .5s, background-color .3s; }
.tile-item:hover .tile-front { visibility: hidden; opacity: 0; transition: visibility 0s linear .3s, opacity .3s; }
.tile-back { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; background-size: cover; z-index: 1; }
.tile-back-title { position: absolute; left: 20px; top: 15px; color: #fff; font-size: 120%; font-family: 'CeraGRBlack-Richkid', 'SimplerBold'; }
.tile-links a.hoverEffect { height: 28px; }
video.projectVideo { height: 100%; min-width: 100%; min-height: 100%; max-width: 210%; width: auto; overflow: hidden; position: absolute; left: 0; right: 0; bottom: 0; top: 0; }



@media (max-width: 1024px) {
    .tile-normal { width: 50%; height: 31.25vw; float: left; position: relative; }
    .tile-item .tile-name { font-size: 6vw; }
    .tile-inner-content img { max-width: 12vw; max-height: 12vw; }
    .tile-links { margin: 3vw 0 0 0; }
    .tile-back-title { font-size: 3vw; }
}

@media (max-width: 1024px) {
    .tile-item .tile-name { font-size: 5vw; }
}

@media(max-width:991px) and (min-width:768px) {
    .tile-item.tile-normal:nth-child(n+9) { display: none; }
    .landing-page-section#ecomPopSection { padding-top: 0; }
}

@media (max-width: 767px) {
    #OurWorksGallery .landing-section-title { margin: 0 auto 30px; }
    .tile-normal { width: 100%; height: 62.5vw; }
    .tile-item.tile-open .tile-front { visibility: hidden; opacity: 0; transition: visibility 0s linear .3s, opacity .3s; }
    .tile-item .tile-name { font-size: 7vw; }
    .tile-links > li { margin-bottom: 10px; }
    .tile-back-title { top: 4%; }
    .tile-large { height: 100vw; }
    .tile-inner-content img { max-width: 125px; max-height: 125px; }
    video.projectVideo { max-width: 180%; }
}

.twentytwenty-container { border-radius: 9px; box-shadow: 5px 10px 40px 0 rgba(0, 0, 0, 0.11); max-height: 392px; }
.twentytwenty-container .border-frame { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 9px; border: 4px solid #fff; z-index: 20; }
.twentytwenty-overlay:hover .twentytwenty-before-label, .twentytwenty-overlay:hover .twentytwenty-after-label, span.twentytwenty-right-arrow, span.twentytwenty-left-arrow { opacity: 0; }
.twentytwenty-overlay:hover { background: transparent; }
.twentytwenty-handle { border: none; background-image: none; width: 78px; height: 78px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin-left: -38px; }
.twentytwenty-horizontal .twentytwenty-handle:before { z-index: 1; }
.twentytwenty-left-arrow, span.twentytwenty-left-arrow { background-image: url(../../../000Frames/site/images/drag.png); background-size: cover; opacity: 1; border: none; position: absolute; width: 78px; height: 78px; z-index: 15; top: 9px; left: 17px; }
.twentytwenty-horizontal .twentytwenty-handle:after { z-index: 1; }


#ecommFormNew .contact-form-title { font-size: 160%; text-align: center; margin-bottom: 40px; line-height: 1.2; }
#ecommFormNew fieldset { border: 0; margin-top: 0; padding-top: 0; max-width: 740px; margin: 0 auto; }
#ecommFormNew .mrw-dynamic-form .form-control { background: #ececec !important; border: 0; height: 46px; margin-bottom: 30px; box-shadow: none; }
#ecommFormNew label.mrw-form-label:not(.radioLabel) { position: absolute; z-index: 1; display: block; top: -1px; left: 12px; padding: 0 5px; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; pointer-events: none; font-size: 95%; }
#ecommFormNew .form-control:focus ~ label.mrw-form-label, #ecommFormNew .form-control.focus ~ label.mrw-form-label { top: -22px; font-size: 14px; color: #7c7c7c; padding: 0; left: 14px; }
#ecommFormNew span.error, #ecomm-pop small.error { margin: 0; padding: 0; position: absolute; right: 15px; z-index: 1; background: transparent; color: red; top: -20px; }
#ecommFormNew button.form-submit { width: 100%; height: 46px; border: none; border-radius: 23px; color: #fff; font-size: 110%; background-color: #f15a55; padding: 0; font-family: inherit; max-width: 280px; margin: 0 auto; display: block; }
#ecommFormNew.mrw-dynamic-form .form-control { border: none; height: 32px; cursor: pointer !important; border-bottom: 1px solid #4b4848; box-shadow: none; resize: none; border-radius: 0; padding: 0; min-height: 1px; margin-bottom: 50px; font-size: 95%; font-family: 'SimplerRegular', 'CeraGRMedium-Richkid'; color: #4b4848; }
.d-arr { content: ""; position: absolute; left: 15px; top: 11px; width: 15px; height: 10px; display: block; background-image: url(../../../000Frames/site/images/arr-down.png); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 1; }

@media(max-width:767px) {
    .d-arr { top: 7px; width: 12px; height: 8px; }
    #ecommFormNew button.form-submit { padding: 8px; }
    #ecommFormNew .contact-form-title { padding: 0 1.25rem; }
    .twentytwenty-container { max-height: calc(74vw - 35px); }
}

.phone-wrapper:after { content: ""; position: absolute; width: 30px; height: 40px; background: #fff; top: -9px; right: 15px; }

.phone-wrapper { position: relative; }
