.philosopher-bold, .subhead-phi, .projecttitle, .sectiontitle, .bannertitle {
font-family: Philosopher, sans-serif;
font-style: normal;
font-weight: 700;
}
.philosopher-regular {
font-family: Philosopher, sans-serif;
font-style: normal;
font-weight: 400;
}
.poppins-light, .bodycopy.light, .light {
font-family: Poppins, sans-serif;
font-style: normal;
font-weight: 300;
}
.poppins-regular, .btntxt, .bodycopy, *, .intro {
font-family: Poppins, sans-serif;
font-style: normal;
font-weight: 400;
}
.poppins-medium, .sitemenu ul li, .bodycopy.medium, .medium {
font-family: Poppins, sans-serif;
font-style: normal;
font-weight: 500;
}
.poppins-semibold, .bodycopy.semibold, .semibold, .subhead-pop {
font-family: Poppins, sans-serif;
font-style: normal;
font-weight: 600;
}
.poppins-bold, .bodycopy.bold, .bold, .bodycopy strong, * strong, .intro strong {
font-family: Poppins, sans-serif;
font-style: normal;
font-weight: 700;
}
.bannertitle {
font-size: 7rem;
line-height: normal;
}
.bannertitle span {
font: inherit;
line-height: inherit;
display: inline-block;
}
.bannertitle span.block {
display: block;
}
.bannertitle.xl {
font-size: 9rem;
}
@media (width <= 1199px) {
.bannertitle {
font-size: 5rem;
line-height: 6rem;
}
}
@media (width <= 767px) {
.bannertitle {
font-size: 3.4rem;
line-height: 4.4rem;
}
.bannertitle span {
display: inline;
}
}
.sectiontitle {
font-size: 5.4rem;
line-height: 7rem;
}
.sectiontitle span {
font: inherit;
line-height: inherit;
display: inline-block;
}
@media (width <= 1199px) {
.sectiontitle {
font-size: 4.4rem;
line-height: 6rem;
}
}
@media (width <= 991px) {
.sectiontitle {
font-size: 3.4rem;
line-height: 4.4rem;
}
}
@media (width <= 767px) {
.sectiontitle {
font-size: 2.8rem;
line-height: 3.8rem;
}
}
.projecttitle {
font-size: 4rem;
line-height: 5.2rem;
}
.projecttitle span {
font: inherit;
line-height: inherit;
display: inline-block;
}
.projecttitle span.block {
display: block;
}
@media (width <= 1199px) {
.projecttitle {
font-size: 3.25rem;
line-height: 4.45rem;
}
}
@media (width <= 767px) {
.projecttitle {
font-size: 2.6rem;
line-height: 3.4rem;
}
}
.subhead-phi {
font-size: 2.8rem;
line-height: 3.8rem;
}
.subhead-phi span {
font: inherit;
line-height: inherit;
display: inline-block;
}
.subhead-phi span.block {
display: block;
}
.subhead-pop {
font-size: 2.4rem;
line-height: 3.4rem;
}
.subhead-pop span {
font: inherit;
line-height: inherit;
display: inline-block;
}
.subhead-pop span.block {
display: block;
}
@media (width <= 991px) {
.subhead-pop {
font-size: 2rem;
line-height: 3rem;
}
}
@media (width <= 767px) {
.subhead-pop {
font-size: 1.8rem;
line-height: 2.8rem;
}
}
.intro {
font-size: 2rem;
line-height: 3.2rem;
}
.intro span {
font: inherit;
line-height: inherit;
display: inline-block;
}
.intro span.block {
display: block;
}
.intro strong {
font-size: inherit;
}
@media (width <= 991px) {
.intro {
font-size: 1.8rem;
line-height: 3rem;
}
}
@media (width <= 767px) {
.intro {
font-size: 1.6rem;
line-height: 2.6rem;
}
}
.bodycopy, * {
font-size: 1.6rem;
line-height: 2.8rem;
}
.bodycopy span, * span {
font: inherit;
line-height: inherit;
display: inline-block;
}
.bodycopy span.block, * span.block {
display: block;
}
.bodycopy strong, * strong {
font-size: inherit;
}
.btntxt {
font-size: 1.6rem;
line-height: normal;
}
.btntxt span {
font: inherit;
line-height: inherit;
display: inline-block;
}
.btntxt span.block {
display: block;
}
:root {
--spacer: 100px;
--spaceripad: 100px;
--spacermb: 50px;
}
html {
font-size: 10px;
overflow-x: hidden;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 1.6rem;
}
body {
background-color: #e0dcd1;
height: 100%;
position: relative;
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
max-height: 100%;
}
a {
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
color: inherit;
font-size: inherit;
text-decoration: none;
transition: all .35s cubic-bezier(.175, .885, .32, 1.275);
}
a:not([href^="tel"]):hover {
color: #bc6c25;
}
ul {
list-style: none;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0 15px;
position: relative;
}
@media (width >= 1200px) {
.container {
max-width: 1170px;
}
}
@media (width >= 1600px) {
.container {
max-width: 1360px;
}
}
@media (width <= 1199px) {
.container {
max-width: 992px;
}
}
@media (width <= 991px) {
.container {
max-width: 768px;
}
}
@media (width <= 767px) {
.container {
max-width: 561px;
}
}
.containerfluid {
width: 100%;
max-width: 87.5%;
margin: 0 auto;
padding: 0 15px;
position: relative;
}
@media (width <= 1199px) {
.containerfluid {
max-width: 100%;
}
}
.spacer {
padding-bottom: var(--spacer);
padding-top: var(--spacer);
}
.spacer.notop {
padding-top: 0;
}
.spacer.nobottom {
padding-bottom: 0;
}
@media (width <= 1199px) {
.spacer {
padding-bottom: var(--spaceripad);
padding-top: var(--spaceripad);
}
}
@media (width <= 767px) {
.spacer {
padding-bottom: var(--spacermb);
padding-top: var(--spacermb);
}
}
.mspacer {
margin-bottom: var(--spacer);
margin-top: var(--spacer);
}
.mspacer.notop {
margin-top: 0;
}
.mspacer.nobottom {
margin-bottom: 0;
}
@media (width <= 1199px) {
.mspacer {
margin-bottom: var(--spacermb);
margin-top: var(--spacermb);
}
}
.m5 {
margin: 5px;
}
.m10 {
margin: 10px;
}
.m20 {
margin: 20px;
}
.m25 {
margin: 25px;
}
.m30 {
margin: 30px;
}
.m40 {
margin: 40px;
}
.m45 {
margin: 45px;
}
.m50 {
margin: 50px;
}
.m60 {
margin: 60px;
}
.m65 {
margin: 65px;
}
.m70 {
margin: 70px;
}
.m80 {
margin: 80px;
}
.m90 {
margin: 90px;
}
.m100 {
margin: 100px;
}
@media (width <= 767px) {
.m5, .m10, .m20, .m25, .m30, .m40, .m45, .m50, .m60, .m65, .m70, .m80, .m90, .m100 {
margin: 15px;
}
}
.mt5 {
margin-top: 5px;
}
.mt10 {
margin-top: 10px;
}
.mt20 {
margin-top: 20px;
}
.mt25 {
margin-top: 25px;
}
.mt30 {
margin-top: 30px;
}
.mt40 {
margin-top: 40px;
}
.mt45 {
margin-top: 45px;
}
.mt50 {
margin-top: 50px;
}
.mt60 {
margin-top: 60px;
}
.mt65 {
margin-top: 65px;
}
.mt70 {
margin-top: 70px;
}
.mt80 {
margin-top: 80px;
}
.mt90 {
margin-top: 90px;
}
.mt100 {
margin-top: 100px;
}
@media (width <= 767px) {
.mt5, .mt10, .mt20, .mt25, .mt30, .mt40, .mt45, .mt50, .mt60, .mt65, .mt70, .mt80, .mt90, .mt100 {
margin-top: 15px;
}
}
.mb5 {
margin-bottom: 5px;
}
.mb10 {
margin-bottom: 10px;
}
.mb20 {
margin-bottom: 20px;
}
.mb25 {
margin-bottom: 25px;
}
.mb30 {
margin-bottom: 30px;
}
.mb40 {
margin-bottom: 40px;
}
.mb45 {
margin-bottom: 45px;
}
.mb50 {
margin-bottom: 50px;
}
.mb60 {
margin-bottom: 60px;
}
.mb65 {
margin-bottom: 65px;
}
.mb70 {
margin-bottom: 70px;
}
.mb80 {
margin-bottom: 80px;
}
.mb90 {
margin-bottom: 90px;
}
.mb100 {
margin-bottom: 100px;
}
@media (width <= 767px) {
.mb5, .mb10, .mb20, .mb25, .mb30, .mb40, .mb45, .mb50, .mb60, .mb65, .mb70, .mb80, .mb90, .mb100 {
margin-bottom: 15px;
}
}
.bg-primary {
background-color: #6d5c40;
}
.bg-secondary {
background-color: #46462a;
}
.bg-tertiary {
background-color: #bcb4a3;
}
.bg-quaternary {
background-color: #e0dcd1;
}
.clr-white {
color: #fff;
}
.clr-primary {
color: #6d5c40;
}
.clr-secondary {
color: #46462a;
}
.clr-tertiary {
color: #bcb4a3;
}
.clr-quaternary {
color: #e0dcd1;
}
.center {
text-align: center;
}
.leftwrap, .rightwrap {
-moz-flex-shrink: 0;
-webkit-flex-shrink: 0;
flex-basis: calc(50% - 15px);
-ms-flex: 0;
flex-shrink: 0;
max-width: calc(50% - 15px);
}
@media (width <= 767px) {
.leftwrap, .rightwrap {
flex-basis: 100%;
max-width: 100%;
}
}
.mla {
margin-left: auto;
}
.tearStrip {
padding-bottom: calc(var(--spacer)  - 50px);
padding-top: calc(var(--spacer)  - 50px);
isolation: isolate;
position: relative;
}
.tearStrip:before, .tearStrip:after {
content: "";
z-index: 10;
background-color: #bcb4a3;
width: 100%;
height: 50px;
position: absolute;
left: 0;
-webkit-mask-image: url(//jjinteriordesigns.com/assets/images/tear-border-1.svg);
mask-image: url(//jjinteriordesigns.com/assets/images/tear-border-1.svg);
-webkit-mask-position: 20% 0;
mask-position: 20% 0;
}
@media (width <= 767px) {
.tearStrip:before, .tearStrip:after {
height: 20px;
-webkit-mask-size: cover;
mask-size: cover;
}
}
.tearStrip.onlytop {
padding-bottom: var(--spacer);
}
.tearStrip.onlytop:after {
content: none;
}
.tearStrip.onlybottom {
padding-top: var(--spacer);
}
.tearStrip.onlybottom:before {
content: none;
}
.tearStrip.primarytear:before, .tearStrip.primarytear:after {
background-color: #6d5c40;
}
.tearStrip.secondarytear:before, .tearStrip.secondarytear:after {
background-color: #46462a;
}
.tearStrip.quaternarytear:before, .tearStrip.quaternarytear:after {
background-color: #e0dcd1;
}
.tearStrip:before {
top: 0;
transform: translateY(calc(2px - 100%));
}
.tearStrip:after {
bottom: 0;
transform: translateY(calc(100% - 2px))rotate(.5turn);
}
.tearStrip.alttear:before, .tearStrip.alttear:after {
-webkit-mask-image: url(//jjinteriordesigns.com/assets/images/tear-border-2.svg);
mask-image: url(//jjinteriordesigns.com/assets/images/tear-border-2.svg);
}
.tearStrip.alttear.postop:after, .tearStrip.alttear.posbottom:before {
-webkit-mask-image: initial;
mask-image: initial;
}
@media (width <= 1199px) {
.tearStrip {
padding-bottom: calc(var(--spaceripad)  - 50px);
padding-top: calc(var(--spaceripad)  - 50px);
}
}
@media (width <= 767px) {
.tearStrip {
padding-bottom: calc(var(--spaceripad)  - 50px);
padding-top: calc(var(--spaceripad)  - 50px);
}
}
.zoomEffect {
overflow: hidden;
}
.zoomEffect img {
transition: all .35s;
}
.zoomEffect:hover img {
transform: scale(1.2);
}
@media (width >= 991px) {
.animate {
opacity: 0;
}
.animate.active.fadeIn {
animation: 1.5s forwards fadeIn;
}
.animate.active.fadeUp {
animation: 1.5s cubic-bezier(.175, .885, .32, 1.275) forwards fadeUp;
}
.animate.active.fadeDown {
animation: 1.5s cubic-bezier(.175, .885, .32, 1.275) forwards fadeDown;
}
.animate.active.fadeRight {
animation: 1.5s cubic-bezier(.175, .885, .32, 1.275) forwards fadeRight;
}
.animate.active.fadeLeft {
animation: 1.5s cubic-bezier(.175, .885, .32, 1.275) forwards fadeLeft;
}
.animate.active.fadeUpSmall {
animation: 1.5s cubic-bezier(.175, .885, .32, 1.275) forwards fadeUpSmall;
}
.animate.active.fadeDownSmall {
animation: 1.5s cubic-bezier(.175, .885, .32, 1.275) forwards fadeDownSmall;
}
.animate.active.fadeRightSmall {
animation: 1.5s cubic-bezier(.175, .885, .32, 1.275) forwards fadeRightSmall;
}
.animate.active.fadeLeftSmall {
animation: 1.5s cubic-bezier(.175, .885, .32, 1.275) forwards fadeLeftSmall;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes pulse {
0% {
opacity: 1;
transform: scale(.5);
}
50% {
opacity: .5;
transform: scale(1.75);
}
100% {
opacity: 0;
transform: scale(1.75);
}
}
@keyframes pulse2 {
0% {
opacity: 1;
transform: scale(.5);
}
50% {
opacity: .5;
transform: scale(1.5);
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
@keyframes fadeUp {
0% {
opacity: 0;
transform: translateY(300px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeDown {
0% {
opacity: 0;
transform: translateY(-300px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeRight {
0% {
opacity: 0;
transform: translateX(-300px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeLeft {
0% {
opacity: 0;
transform: translateX(300px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeUpSmall {
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeDownSmall {
0% {
opacity: 0;
transform: translateY(-100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeRightSmall {
0% {
opacity: 0;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeLeftSmall {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideawayright {
from {
display: block;
}
to {
opacity: 0;
transform: translateX(10px);
}
}
@keyframes slideawayleft {
from {
display: block;
}
to {
opacity: 0;
transform: translateX(-10px);
}
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
.dflex {
display: flex;
}
.dflex.inline {
display: inline-flex;
}
.dflex.align-middle {
align-items: center;
}
.dflex.align-start {
align-items: start;
}
.dflex.align-end {
align-items: end;
}
.dflex.align-center {
justify-content: center;
}
.dflex.align-bottom {
justify-content: end;
}
.dflex.pushapart {
justify-content: space-between;
}
.dflex.col {
flex-direction: column;
}
.dflex.wrap {
flex-wrap: wrap;
}
.dflex.half-col > * {
flex-basis: calc(50% - 15px);
}
@media (width <= 767px) {
.dflex.half-col > * {
flex-basis: 100%;
}
}
.dflex .no-shrink {
-moz-flex-shrink: 0;
-webkit-flex-shrink: 0;
-ms-flex: 0;
flex-shrink: 0;
}
.dflex.block4 {
flex-wrap: wrap;
}
.dflex.block4 > * {
flex-basis: calc(25% - 23px);
max-width: calc(25% - 23px);
}
@media (width <= 1199px) {
.dflex.block4 > * {
flex-basis: calc(33.3333% - 23px);
max-width: calc(33.3333% - 23px);
}
}
@media (width <= 991px) {
.dflex.block4 > * {
flex-basis: calc(50% - 23px);
max-width: calc(50% - 23px);
}
}
@media (width <= 767px) {
.dflex.block4 > * {
flex-basis: 100%;
max-width: 100%;
}
}
.dflex.block3 {
flex-wrap: wrap;
}
.dflex.block3 > * {
flex-basis: calc(33.3333% - 20px);
max-width: calc(33.3333% - 20px);
}
@media (width <= 991px) {
.dflex.block3 > * {
flex-basis: calc(50% - 20px);
max-width: calc(50% - 20px);
}
}
@media (width <= 767px) {
.dflex.block3 > * {
flex-basis: 100%;
max-width: 100%;
}
}
.dflex.g5 {
gap: 5px;
}
.dflex.g10 {
gap: 10px;
}
.dflex.g20 {
gap: 20px;
}
.dflex.g30 {
gap: 30px;
}
.dflex.g40 {
gap: 40px;
}
.dflex.g45 {
gap: 45px;
}
.dflex.g50 {
gap: 50px;
}
.dflex.g60 {
gap: 60px;
}
.dflex.g65 {
gap: 65px;
}
.dflex.g80 {
gap: 80px;
}
.dflex.g100 {
gap: 100px;
}
.dflex.g120 {
gap: 120px;
}
.dflex.g180 {
gap: 180px;
}
@media (width <= 767px) {
.dflex {
flex-wrap: wrap;
}
.dflex.g5, .dflex.g10, .dflex.g20, .dflex.g30, .dflex.g40, .dflex.g45, .dflex.g50, .dflex.g60, .dflex.g65, .dflex.g80, .dflex.g100, .dflex.g120, .dflex.g180 {
gap: 20px;
}
.dflex.mobreverse {
flex-direction: column-reverse;
}
.dflex.nowrap {
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: none;
flex-wrap: nowrap;
}
}
.beforebanner {
padding-top: 23.6rem;
}
@media (width <= 1199px) {
.beforebanner {
padding-top: 20rem !important;
}
}
@media (width <= 991px) {
.beforebanner {
padding-top: 15rem !important;
}
}
.pageloader {
z-index: 2147483647;
background-color: #e0dcd1;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
display: flex;
position: fixed;
inset: 0;
}
.pageloader #logoanim {
width: 500px;
max-width: 80vw;
height: 500px;
}
.pageloader #logoanim svg {
fill: #6d5c40;
}
.borderedbox {
outline-offset: 20px;
border-radius: 30px;
outline: 1px solid #6d5c40;
margin: 20px;
position: relative;
}
.borderedbox.lightcolor {
outline: 1px solid #bcb4a3;
}
.borderedbox.lightcolor .borderpattern {
fill: #bcb4a3;
}
.borderedbox .imgwrap {
z-index: 1;
border-radius: 30px;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.borderedbox .imgwrap img {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
}
@media (width <= 1199px) {
.borderedbox .imgwrap {
border-radius: 15px;
}
}
.borderedbox .cont {
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
background-color: #fff;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin-top: -30px;
padding: 60px 30px 30px;
transition: all .4s ease-in-out;
}
@media (width <= 991px) {
.borderedbox .cont {
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
}
.borderedbox .cont.withbgimg {
background-color: #0000;
background-image: url(//jjinteriordesigns.com/assets/images/contact-mod-bg.jpg);
background-size: cover;
border-radius: 30px;
margin-top: auto;
padding: 20px 20px 120px;
}
.borderedbox .cont.withbgimg .title {
font-size: 3.8rem;
line-height: 4.8rem;
}
@media (width <= 1199px) {
.borderedbox .cont.withbgimg .title {
font-size: 2.8rem;
line-height: 3.8rem;
}
}
.borderedbox .borderpattern {
fill: #6d5c40;
width: 262px;
height: 49px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.borderedbox .borderpattern.onlybottom {
bottom: -65px;
}
@media (width <= 1199px) {
.borderedbox .borderpattern.onlybottom {
bottom: -49px;
}
}
@media (width <= 991px) {
.borderedbox .borderpattern.onlybottom {
bottom: -38px;
}
}
.borderedbox .borderpattern.onlytop {
top: -65px;
}
@media (width <= 1199px) {
.borderedbox .borderpattern.onlytop {
top: -49px;
}
}
@media (width <= 991px) {
.borderedbox .borderpattern.onlytop {
top: -38px;
}
}
@media (width <= 1199px) {
.borderedbox .borderpattern {
width: 200px;
height: 37px;
}
}
@media (width <= 991px) {
.borderedbox .borderpattern {
width: 163px;
height: 30px;
}
}
@media (width <= 1199px) {
.borderedbox {
outline-offset: 15px;
border-radius: 20px;
margin: 15px;
}
}
@media (width <= 991px) {
.borderedbox {
outline-offset: 10px;
border-radius: 15px;
margin: 10px;
}
}
.blocknavigation .slick-btn {
all: unset;
cursor: pointer;
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
border: 2px solid #6d5c40;
border-radius: 100%;
width: 56px;
height: 56px;
transition: all .5s ease-in-out;
}
.blocknavigation .slick-btn .icon {
fill: #6d5c40;
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
width: 15px;
height: 28px;
margin: 0 auto;
transition: all .5s ease-in-out;
display: block;
}
@media (width <= 1199px) {
.blocknavigation .slick-btn .icon {
width: 10px;
height: 19px;
}
}
.blocknavigation .slick-btn:hover {
background-color: #bc6c25;
border-color: #bc6c25;
}
.blocknavigation .slick-btn:hover .icon {
fill: #fff;
}
@media (width <= 1199px) {
.blocknavigation .slick-btn {
border-width: 1px;
width: 40px;
height: 40px;
}
}
.blocknavigation .slick-dots {
flex-grow: 1;
order: 1;
display: flex;
}
.blocknavigation .slick-dots li {
width: 100%;
}
.blocknavigation .slick-dots li button {
all: unset;
cursor: pointer;
background-color: #6d5c40;
width: 100%;
height: 2px;
font-size: 0;
display: block;
}
.blocknavigation .slick-dots li.slick-active button {
border-radius: 4px;
height: 10px;
margin-top: -4px;
}
@media (width <= 561px) {
.blocknavigation .slick-dots {
order: 2;
}
}
.highlights {
margin-bottom: 4rem;
}
.highlights .item {
text-align: center;
flex-basis: calc(33.3333% - 15px);
max-width: calc(33.3333% - 15px);
position: relative;
}
.highlights .item .icon {
fill: #6d5c40;
width: 50px;
height: 50px;
margin-bottom: 10px;
}
.highlights .item .number {
font-size: 9.6rem;
line-height: 10.6rem;
}
@media (width <= 1199px) {
.highlights .item .number {
font-size: 8rem;
line-height: 9rem;
}
}
@media (width <= 991px) {
.highlights .item .number {
font-size: 6rem;
line-height: 7rem;
}
}
@media (width <= 911px) {
.highlights .item .intro, .highlights .item .subhead-pop {
font-size: 1.6rem;
line-height: 2.6rem;
}
}
@media (width <= 767px) {
.highlights .item {
flex-basis: 100%;
width: 80%;
max-width: 100%;
margin: 0 auto;
padding: 20px 0;
}
.highlights .item:first-child {
padding-top: 0;
}
.highlights .item:last-child {
padding-bottom: 0;
}
.highlights .item + .item {
border-top: 1px solid #6d5c40;
}
.highlights .item + .item:before {
content: url(//jjinteriordesigns.com/assets/images/stage-pattern.svg);
width: 100px;
height: 20px;
display: block;
position: absolute;
top: -15px;
}
}
@media (width <= 1199px) {
.highlights.spacer {
padding-bottom: 50px;
}
}
@media (width <= 767px) {
.highlights {
margin-bottom: 30px;
}
.highlights .dflex {
flex-direction: column;
}
}
.stats .item {
position: relative;
}
@media (width <= 1199px) {
.stats .item .counter {
font-size: 8rem;
line-height: 9rem;
}
}
@media (width <= 991px) {
.stats .item .counter {
font-size: 6rem;
line-height: 7rem;
}
}
@media (width <= 767px) {
.stats .item {
flex-basis: 80%;
width: 80%;
max-width: 80%;
margin: 0 auto;
padding: 20px 0;
}
.stats .item:first-child {
padding-top: 0;
}
.stats .item:last-child {
padding-bottom: 0;
}
.stats .item + .item {
border-top: 1px solid #6d5c40;
}
.stats .item + .item:before {
content: url(//jjinteriordesigns.com/assets/images/stage-pattern.svg);
width: 100px;
height: 20px;
display: block;
position: absolute;
top: -15px;
}
.stats .item.g20 {
gap: 0;
}
}
@media (width <= 991px) {
.stats {
justify-content: center;
}
}
@media (width <= 767px) {
.stats {
margin-bottom: 60px;
}
}
.videowrap {
font-size: 20px;
}
.videowrap .videowraper:before, .videowrap .videowraper:after {
content: "";
z-index: -1;
background-image: url(//jjinteriordesigns.com/assets/images/pillar-drawing.png);
width: 25.003em;
height: 100%;
position: absolute;
top: 50%;
transform: translate(50%, -50%);
}
.bodycopy + * {
margin-top: 20px;
}
.footer {
padding: 100px 0;
}
.footer .itemwrap .item {
flex-basis: calc(33.3333% - 45px);
max-width: calc(33.3333% - 15px);
position: relative;
}
.footer .itemwrap .item .logo {
fill: #bcb4a3;
width: 295px;
height: 86px;
}
@media (width <= 1199px) {
.footer .itemwrap .item .logo {
width: 220px;
height: 65px;
}
}
.footer .itemwrap .item .address .icon {
fill: #bcb4a3;
width: 20px;
height: 20px;
}
@media (width <= 767px) {
.footer .itemwrap .item .address {
gap: 10px;
}
}
@media (width <= 1199px) {
.footer .itemwrap .item .intro {
font-size: 1.6rem;
line-height: 2.6rem;
}
}
.footer .itemwrap .item .sitelinks {
column-count: 2;
}
.footer .itemwrap .item .sitelinks li + li {
margin-top: 24px;
}
@media (width <= 1199px) {
.footer .itemwrap .item .sitelinks li + li {
margin-top: 28px;
}
}
@media (width <= 992px) {
.footer .itemwrap .item .sitelinks li + li {
margin-top: 20px;
}
}
@media (width <= 767px) {
.footer .itemwrap .item .sitelinks li + li {
margin-top: 10px;
}
}
.footer .itemwrap .item .sitelinks li a {
color: #bcb4a3;
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
text-decoration: none;
transition: all .4s ease-in-out;
display: block;
}
.footer .itemwrap .item .sitelinks li a:hover, .footer .itemwrap .item .sitelinks li.current_page_item a, .footer .itemwrap .item .sitelinks li.current-menu-item a, .footer .itemwrap .item .sitelinks li.current-menu-parent a {
color: #bc6c25;
}
.footer .itemwrap .item .border {
fill: #5f6c37;
opacity: .5;
width: 16px;
height: 253px;
margin-top: 0;
position: absolute;
top: -25px;
right: -37px;
}
@media (width <= 991px) {
.footer .itemwrap .item .border {
height: 164px;
top: 6px;
}
}
@media (width <= 767px) {
.footer .itemwrap .item .border {
display: none;
}
}
@media (width <= 991px) {
.footer .itemwrap .item:first-child {
border-bottom: 1px solid #5f6c37;
flex-direction: row;
flex-basis: 100%;
justify-content: space-between;
align-items: center;
gap: 30px;
max-width: 100%;
margin-bottom: 30px;
padding-bottom: 20px;
}
.footer .itemwrap .item:first-child .border {
display: none;
}
.footer .itemwrap .item:first-child .logo {
flex-basis: calc(33.3333% - 15px);
order: 1;
max-width: calc(33.3333% - 15px);
}
.footer .itemwrap .item:first-child .socialicons {
flex-basis: calc(33.3333% - 15px);
order: 2;
justify-content: end;
max-width: calc(33.3333% - 15px);
margin-top: 0;
}
.footer .itemwrap .item:nth-child(2), .footer .itemwrap .item:nth-child(3) {
flex-basis: calc(50% - 30px);
max-width: calc(50% - 30px);
}
}
@media (width <= 767px) {
.footer .itemwrap .item:first-child {
flex-direction: row;
justify-content: start;
}
.footer .itemwrap .item:first-child .socialicons {
flex-basis: 100%;
justify-content: start;
max-width: 100%;
}
.footer .itemwrap .item:first-child .logo {
flex-basis: 280px;
max-width: 280px;
height: 83px;
}
.footer .itemwrap .item:nth-child(2), .footer .itemwrap .item:nth-child(3) {
flex-basis: 100%;
max-width: 100%;
}
.footer .itemwrap .item:nth-child(2) {
border-bottom: 1px solid #5f6c37;
margin-bottom: 30px;
padding-bottom: 30px;
}
}
.footer .itemwrap .copyright.mobile {
display: none;
}
@media (width <= 991px) {
.footer .itemwrap .copyright.mobile {
text-align: center;
border-top: 1px solid #5f6c37;
width: 100%;
margin-top: 30px;
padding: 20px 0;
display: block;
}
}
@media (width <= 767px) {
.footer .itemwrap .copyright.mobile {
text-align: left;
}
}
@media (width <= 991px) {
.footer .itemwrap .copyright.desktop {
display: none;
}
.footer .itemwrap {
flex-wrap: wrap;
}
.footer {
padding: 50px 0 0;
}
}
.socialicons {
margin-top: auto;
}
.socialicons li a {
display: block;
}
.socialicons li a .icon {
fill: #bcb4a3;
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
width: 30px;
height: 30px;
transition: all .4s ease-in-out;
display: block;
}
.socialicons li a:hover .icon {
fill: #bc6c25;
transform: scale(1.1);
}
.additionalpadding {
padding-bottom: 36rem;
}
.additionalpadding.small {
padding-bottom: 15rem;
}
.contentarea p {
color: #46462a;
}
.contentarea p + *, .contentarea h1 + * {
margin-top: 2rem;
}
.contentarea h2 {
color: #6d5c40;
font-size: 2.4rem;
font-weight: 600;
line-height: 3.4rem;
}
.contentarea h2 + * {
margin-top: 1rem;
}
.contentarea h3 {
color: #6d5c40;
font-size: 2rem;
font-weight: 600;
line-height: 3rem;
}
.contentarea h3 + * {
margin-top: 1rem;
}
.contentarea h4 {
color: #6d5c40;
font-size: 1.6rem;
font-weight: 600;
line-height: 2.6rem;
}
.contentarea h4 + * {
margin-top: 1rem;
}
.contentarea h5 {
color: #000;
font-size: 1.6rem;
font-weight: 600;
line-height: 2.6rem;
}
.contentarea h5 + * {
margin-top: 1rem;
}
.contentarea h6 {
color: #000;
font-size: 1.6rem;
font-weight: 600;
line-height: 2.6rem;
}
.contentarea h6 + * {
margin-top: 1rem;
}
@media (width <= 1199px) {
.contentarea .intro {
color: #6d5c40;
font-size: 1.8rem;
line-height: 3rem;
}
}
.contentarea .wp-block-quote {
background-image: url(//jjinteriordesigns.com/assets/images/quote-icon.svg);
background-repeat: no-repeat;
background-size: 7.6rem 4.9rem;
margin-top: 3rem;
padding-top: 6rem;
}
@media (width <= 767px) {
.contentarea .wp-block-quote {
background-size: 4rem 2.6rem;
padding-top: 4rem;
}
}
.contentarea .wp-block-quote p {
color: #6d5c40;
font-family: Philosopher, sans-serif;
font-size: 3.4rem;
font-weight: 700;
line-height: 4.4rem;
}
@media (width <= 767px) {
.contentarea .wp-block-quote p {
font-size: 2.4rem;
line-height: 3.4rem;
}
}
.contentarea .wp-block-quote + * {
margin-top: 4rem;
}
.contentarea .blackquote.dataWrap .cont {
color: #6d5c40;
font-size: 2.4rem;
line-height: 3.4rem;
}
@media (width <= 561px) {
.contentarea .blackquote.dataWrap .cont {
font-size: 2rem;
line-height: 3.2rem;
}
}
.contentarea .blackquote.dataWrap p + * {
margin-top: 0;
}
.contentarea .blackquote.dataWrap .source {
color: #6d5c40;
font-size: 1.4rem;
line-height: 2.4rem;
}
.contentarea .blackquote + * {
margin-top: 2rem;
}
.contentarea .wp-block-image {
border-radius: 30px;
overflow: hidden;
}
.contentarea .wp-block-image img {
display: block;
}
.contentarea .wp-block-image + * {
margin-top: 2rem;
}
@media (width <= 767px) {
.contentarea .wp-block-image {
border-radius: 20px;
}
}
@media (width <= 561px) {
.contentarea .wp-block-image {
border-radius: 15px;
}
}
.contentarea .wp-block-video video {
display: block;
}
.contentarea .wp-block-video + * {
margin-top: 2rem;
}
.contentarea .wp-block-embed .wp-block-embed__wrapper {
padding-bottom: 56.25%;
position: relative;
}
.contentarea .wp-block-embed .wp-block-embed__wrapper iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.contentarea .wp-block-embed .wp-element-caption {
color: #6d5c40;
font-size: 1.4rem;
}
.contentarea .wp-block-embed + * {
margin-top: 2rem;
}
.contentarea .wp-block-list li {
background-image: url(//jjinteriordesigns.com/assets/images/list-icon.svg);
background-position: 0 .8rem;
background-repeat: no-repeat;
background-size: 1.3rem 1.3rem;
padding-left: 3rem;
}
.contentarea .wp-block-list li + li {
margin-top: 1rem;
}
.contentarea .wp-block-list + * {
margin-top: 2rem;
}
.contentarea .wp-block-table table {
border-color: #6d5c40;
}
.contentarea .wp-block-table table thead {
border-bottom: 1px;
}
.contentarea .wp-block-table table thead tr {
background-color: #6d5c40;
}
.contentarea .wp-block-table table thead tr th {
text-align: left;
color: #fff;
border-color: #46462a;
padding: 1.5rem;
font-size: 2rem;
font-weight: 500;
line-height: 3rem;
}
@media (width <= 561px) {
.contentarea .wp-block-table table thead tr th {
font-size: 1.6rem;
line-height: 2.8rem;
}
}
.contentarea .wp-block-table table tbody tr td {
color: #46462a;
border-color: #bcb4a3;
font-size: 1.6rem;
line-height: 2.6rem;
}
@media (width <= 561px) {
.contentarea .wp-block-table table tbody tr td {
font-size: 1.4rem;
line-height: 2.6rem;
}
}
.contentarea .wp-block-table table tfoot {
border-top: 1px;
}
.contentarea .wp-block-table table tfoot tr {
background-color: #bcb4a3;
}
.contentarea .wp-block-table table tfoot tr td {
color: #46462a;
border-color: #9e9685;
}
@media (width <= 561px) {
.contentarea .wp-block-table table tfoot tr td {
font-size: 1.4rem;
line-height: 2.6rem;
}
}
.contentarea .wp-block-table + * {
margin-top: 2rem;
}
.contentarea a {
color: #6d5c40;
text-decoration: underline;
}
.contentarea a:hover {
color: #bc6c25;
}
.contentarea img.size-large, .contentarea img.size-full {
border-radius: 30px;
}
@media (width <= 767px) {
.contentarea img.size-large, .contentarea img.size-full {
border-radius: 20px;
}
}
@media (width <= 561px) {
.contentarea img.size-large, .contentarea img.size-full {
border-radius: 15px;
}
}
@media (width <= 991px) {
.contentarea {
flex-basis: 100%;
order: 4;
max-width: 100%;
}
}
.inputHolder.mtb {
margin: 30px 0;
display: none;
}
.inputHolder.mtb label {
text-align: center;
color: #6d5c40;
width: 100%;
margin-bottom: .5rem;
font-size: 1.42rem;
line-height: 2.4rem;
display: block;
}
@media (width <= 767px) {
.inputHolder.mtb {
display: block;
}
}
.para-spacer {
height: 30px;
}
.un-order-listing {
flex-direction: column;
gap: 20px;
width: 100%;
display: flex;
}
.un-order-listing li {
color: #46462a;
margin: 0;
padding-left: 1.8rem;
font-size: 2rem;
line-height: 3.2rem;
position: relative;
}
.un-order-listing li:before {
content: "";
background-color: #6d5c40;
width: .8rem;
height: .8rem;
position: absolute;
top: 1rem;
left: 0;
transform: rotate(-45deg);
}
@media (width <= 991px) {
.un-order-listing li {
font-size: 1.8rem;
line-height: 3rem;
}
}
@media (width <= 767px) {
.un-order-listing li {
font-size: 1.6rem;
line-height: 2.6rem;
}
}
.btn {
cursor: pointer;
height: 4rem;
}
.btn .bg {
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
fill: #6d5c40;
transition: all .5s ease-in-out;
}
.btn .text {
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
transition: all .5s ease-in-out;
}
.btn.bordered .bg {
fill: #e0dcd1;
}
.btn.bordered .border, .btn.bordered .text {
fill: #6d5c40;
}
.btn.white .bg {
fill: #fff;
}
.btn.white .text {
fill: #46462a;
}
.btn.hidden {
z-index: 8;
width: 100%;
height: 100%;
font-size: 0;
position: absolute;
top: 0;
left: 0;
}
.btn.hidden:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
@media (width <= 767px) {
.btn.hidden.mobiletext:after {
color: #6d5c40;
content: "View Details";
font-size: 1.6rem;
font-weight: 500;
text-decoration: underline;
position: absolute;
bottom: 15px;
left: 25px;
}
}
.btn:hover .bg {
fill: #bc6c25;
}
.btn:hover.white .text, .btn:hover.bordered .text {
fill: #fff;
}
.btn:hover.bordered .border {
fill: #bc6c25;
}
.btn .bg, .btn.white .bg, .btn.bordered .bg {
fill: #2e593e !important;
}
.btn:hover .bg, .btn.white:hover .bg, .btn.bordered:hover .bg {
fill: #bc6c25 !important;
}
.btn .text {
fill: #fff !important;
}
.sitebanner {
isolation: isolate;
height: 900px;
padding-top: 26.5rem;
}
.sitebanner .bnrwrap {
max-width: 66.5rem;
}
.sitebanner .bnrwrap .icon {
width: 20rem;
height: 6rem;
margin: 0 auto;
}
@media (width <= 991px) {
.sitebanner .bnrwrap .icon {
width: 15rem;
height: 4.5rem;
}
}
.sitebanner .bnrwrap .bnrlg {
text-align: center;
}
.sitebanner .bnrwrap .bnrlg * {
font: inherit;
line-height: inherit;
perspective: 10px;
}
@media (width <= 1599px) {
.sitebanner .bnrwrap .bnrlg {
font-size: 6rem;
line-height: normal;
}
}
@media (width <= 1199px) {
.sitebanner .bnrwrap .bnrlg {
font-size: 7rem;
line-height: normal;
}
}
@media (width <= 991px) {
.sitebanner .bnrwrap .bnrlg {
font-size: 5rem;
line-height: normal;
}
}
@media (width <= 767px) {
.sitebanner .bnrwrap .bnrlg {
font-size: 4rem;
line-height: normal;
}
}
@media (width <= 1599px) {
.sitebanner .bnrwrap {
max-width: 57.5rem;
}
}
@media (width <= 1199px) {
.sitebanner .bnrwrap {
max-width: 80%;
margin: 0 auto 50px;
}
}
@media (width <= 991px) {
.sitebanner .bnrwrap {
max-width: 100%;
}
}
.sitebanner .rightsecwrap {
z-index: -1;
position: absolute;
top: 50%;
right: -25%;
transform: translateY(-40%);
}
@media (width <= 1199px) {
.sitebanner .rightsecwrap {
position: relative;
top: auto;
left: 0;
right: 0;
transform: translateY(0);
}
}
@media (width <= 1599px) {
.sitebanner .rightsecwrap {
width: 80%;
}
}
@media (width <= 1199px) {
.sitebanner .rightsecwrap {
width: auto;
}
}
@media (width <= 767px) {
.sitebanner .rightsecwrap {
top: 90%;
}
}
.sitebanner .dummybg {
width: 100rem;
height: 69rem;
}
@media (width <= 991px) {
.sitebanner .dummybg {
max-width: 100%;
height: 49rem;
}
}
@media (width <= 767px) {
.sitebanner .dummybg {
width: 32rem;
height: 22.08rem;
}
}
.sitebanner .maskcontainer {
position: relative;
}
.sitebanner .color-image {
bottom: 0;
background-size: cover;
height: 100%;
transition: all 1s steps(45, end);
position: absolute;
inset: 0;
-webkit-mask-image: url(//jjinteriordesigns.com/assets/images/splash-mask-v2.png);
-webkit-mask-position: 0%;
-webkit-mask-size: cover;
}
.sitebanner .color-image.v1 {
background-image: url(//jjinteriordesigns.com/assets/images/main-banner-01.png);
}
.sitebanner .color-image.v2 {
background-image: url(//jjinteriordesigns.com/assets/images/main-banner-02.png);
}
.sitebanner .color-image.v3 {
background-image: url(//jjinteriordesigns.com/assets/images/main-banner-03.png);
}
.sitebanner .maskcontainer .color-image.active {
-webkit-mask-position: 100%;
}
@media (width <= 1199px) {
.sitebanner {
height: auto;
padding-top: 20rem;
}
}
@media (width <= 991px) {
.sitebanner {
padding-top: 12rem;
}
}
@media (width <= 767px) {
.sitebanner {
padding-top: 12rem;
}
}
.siteheader {
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
z-index: 99999999;
width: 100%;
padding: 5rem 0;
transition: all .35s cubic-bezier(.175, .885, .32, 1.275);
top: 0;
left: 0;
}
.siteheader .logo {
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
fill: #6d5c40;
height: 6.5rem;
transition: all .35s cubic-bezier(.175, .885, .32, 1.275);
}
@media (width <= 1200px) {
.siteheader .contactlink {
display: none;
}
}
@media (width >= 1025px) {
.siteheader {
position: fixed;
}
.siteheader ul li a:not([href]), .siteheader ul li .menudrop {
pointer-events: none;
}
.siteheader.slim {
background-color: #e0dcd1;
padding: 2rem;
box-shadow: 0 0 10px #0000001a;
}
.siteheader.slim .logo {
height: 4.8rem;
}
}
@media (width <= 1599px) {
.siteheader .sitemenu ul.dflex.g40 {
gap: 20px;
}
}
@media (width <= 1199px) {
.siteheader {
position: absolute;
}
.siteheader .logo {
height: 5rem;
}
}
@media (width <= 767px) {
.siteheader {
padding: 2rem 0;
}
}
.sitemenu ul li {
color: #6d5c40;
align-items: center;
gap: 13px;
font-size: 1.6rem;
display: flex;
position: relative;
}
.sitemenu ul li a {
color: inherit;
font: inherit;
padding: 20px 0;
}
.sitemenu ul li a:hover {
color: #bc6c25;
}
.sitemenu ul li .menudrop svg {
fill: #6d5c40;
width: 13px;
height: 13px;
}
@media (width >= 992px) {
.sitemenu ul li.contactmenu {
display: none;
}
}
.sitemenu ul li.current-menu-item > a, .sitemenu ul li.current-menu-parent > a {
color: #bc6c25;
}
.sitemenu ul li .sub-menu {
opacity: 0;
pointer-events: none;
background-color: #fff;
border-radius: 10px;
width: 370px;
transition: all .35s;
position: absolute;
top: 40px;
left: -10px;
transform: translateY(15px);
box-shadow: 0 1px 5px #00000026;
}
.sitemenu ul li .sub-menu li a {
padding: 15px;
display: block;
}
@media (width <= 1023px) {
.sitemenu ul li .sub-menu li a {
padding: 20px 20px 20px 30px;
font-weight: 400;
}
}
.sitemenu ul li .sub-menu li a:hover {
color: #bc6c25;
padding-left: 25px;
}
.sitemenu ul li .sub-menu li + li a {
padding-top: 0;
}
@media (width <= 1023px) {
.sitemenu ul li .sub-menu li {
border-top: 0;
}
}
.sitemenu ul li .sub-menu:after {
content: "";
border-bottom: 10px solid #fff;
border-left: 10px solid #0000;
border-right: 10px solid #0000;
width: 0;
height: 0;
display: block;
position: absolute;
top: -10px;
left: 15px;
}
@media (width <= 1023px) {
.sitemenu ul li .sub-menu:after {
display: none;
}
.sitemenu ul li .sub-menu {
opacity: 1;
color: #bcb4a3;
box-shadow: none;
background-color: #0000;
width: 100%;
position: relative;
top: auto;
left: auto;
transform: translateX(0);
}
}
.sitemenu ul li.menu-item-has-children:hover .sub-menu {
opacity: 1;
pointer-events: all;
}
@media (width <= 1199px) {
.sitemenu ul {
gap: 2rem !important;
}
}
@media (width <= 1200px) {
.sitemenu {
-o-transition: all ease .35s;
z-index: 99999;
background-color: #46462a;
width: min(90vw, 320px);
height: 100vh;
padding-top: 80px;
transition: all .35s;
position: fixed;
top: 0;
right: calc(-1 * min(90vw, 320px));
overflow-y: auto;
}
.sitemenu ul {
display: block;
transition: none !important;
}
.sitemenu ul li {
height: auto;
display: block;
}
.sitemenu ul li a {
color: #e0dcd1;
padding: 10px 15px;
line-height: 1.4;
display: block;
}
.sitemenu ul li .menudrop {
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
display: flex;
position: absolute;
top: 0;
right: 0;
}
.sitemenu ul li .menudrop svg {
fill: #fff;
width: 13px;
height: 13px;
}
.sitemenu ul li .sub-menu {
display: none;
}
.sitemenu ul li + li {
border-top: 1px dashed #6d5c40;
}
}
.hamburger {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
user-select: none;
z-index: 999999;
width: 4rem;
height: 4rem;
transition: transform .4s;
position: relative;
}
.hamburger .top {
stroke-dasharray: 40 160;
}
.hamburger .middle {
stroke-dasharray: 40 142;
transform-origin: 50%;
transition: transform .4s;
}
.hamburger .bottom {
stroke-dasharray: 40 85;
transform-origin: 50%;
transition: transform .4s, stroke-dashoffset .4s;
}
.hamburger .line {
fill: none;
stroke: #fff;
stroke-width: 5.5px;
stroke-linecap: round;
transition: stroke-dasharray .4s, stroke-dashoffset .4s;
}
@media (width >= 1200px) {
.hamburger {
display: none;
}
}
.backdrop {
z-index: 99998;
bottom: 0;
left: 0;
background-color: #0009;
width: 100%;
height: 100%;
display: none;
position: fixed;
inset: 0;
}
.open {
height: 100svh;
overflow: hidden;
}
.open .sitemenu {
right: 0;
}
.open .backdrop {
display: block;
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger .top {
stroke-dashoffset: -64px;
}
.open .hamburger .middle {
transform: rotate(90deg);
}
.open .hamburger .bottom {
stroke-dashoffset: -64px;
}
.sectionheader {
max-width: 112.8rem;
margin: 0 auto;
}
.sectionheader .border {
width: 35.8rem;
}
@media (width <= 1199px) {
.sectionheader.g40 {
gap: 30px;
}
}
@media (width <= 767px) {
.sectionheader {
max-width: 100%;
}
.sectionheader .border {
width: 60%;
}
.sectionheader.g40 {
gap: 15px;
}
}
.inputHolder {
position: relative;
}
.inputHolder select {
appearance: none;
background-image: url(//jjinteriordesigns.com/assets/images/down-arrow.png);
background-position: right 10px top 30px;
background-repeat: no-repeat;
background-size: 20px 10px;
}
.inputHolder select option {
font-size: 14px;
}
@media (width <= 767px) {
.inputHolder select option {
font-size: 12px;
}
}
.inputHolder input[type="text"], .inputHolder input[type="email"], .inputHolder input[type="tel"], .inputHolder textarea, .inputHolder select {
color: #6d5c40;
background-color: #0000;
border: 1px solid #46462a33;
border-radius: 10px;
outline: none;
width: 100%;
height: 70px;
padding: 0 15px;
display: block;
position: relative;
}
.inputHolder input[type="text"] + label, .inputHolder input[type="email"] + label, .inputHolder input[type="tel"] + label, .inputHolder textarea + label, .inputHolder select + label {
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
color: #6d5c40;
pointer-events: none;
background-color: #e0dcd1;
padding: 0 5px;
font-size: 1.6rem;
transition: all .35s cubic-bezier(.175, .885, .32, 1.275);
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
}
.inputHolder input[type="text"] + label span, .inputHolder input[type="email"] + label span, .inputHolder input[type="tel"] + label span, .inputHolder textarea + label span, .inputHolder select + label span {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.inputHolder input[type="text"]:focus + label, .inputHolder input[type="text"]:not(:placeholder-shown) + label, .inputHolder input[type="email"]:focus + label, .inputHolder input[type="email"]:not(:placeholder-shown) + label, .inputHolder input[type="tel"]:focus + label, .inputHolder input[type="tel"]:not(:placeholder-shown) + label, .inputHolder textarea:focus + label, .inputHolder textarea:not(:placeholder-shown) + label, .inputHolder select:focus + label, .inputHolder select:not(:placeholder-shown) + label {
font-size: 1.2rem;
top: -12px;
transform: translateY(0);
}
.inputHolder input[type="text"]:focus + label span, .inputHolder input[type="text"]:not(:placeholder-shown) + label span, .inputHolder input[type="email"]:focus + label span, .inputHolder input[type="email"]:not(:placeholder-shown) + label span, .inputHolder input[type="tel"]:focus + label span, .inputHolder input[type="tel"]:not(:placeholder-shown) + label span, .inputHolder textarea:focus + label span, .inputHolder textarea:not(:placeholder-shown) + label span, .inputHolder select:focus + label span, .inputHolder select:not(:placeholder-shown) + label span {
color: #bcb4a3;
font-size: 1.2rem;
}
@media (width <= 767px) {
.inputHolder input[type="text"], .inputHolder input[type="email"], .inputHolder input[type="tel"], .inputHolder textarea, .inputHolder select {
height: 55px;
}
}
.inputHolder textarea {
resize: none;
height: 190px;
padding: 15px;
}
.inputHolder textarea + label {
top: 25px;
}
.inputHolder textarea:focus + label, .inputHolder textarea:not(:placeholder-shown) + label {
top: -12px;
}
.inputHolder select + label {
font-size: 1.2rem;
top: -12px;
}
.inputHolder input[type="checkbox"] {
opacity: 0;
position: fixed;
top: -50%;
left: -50%;
}
.inputHolder input[type="checkbox"] + label {
color: #6d5c40;
cursor: pointer;
padding-left: 30px;
font-size: 1.2rem;
line-height: 1.83;
display: block;
position: relative;
}
.inputHolder input[type="checkbox"] + label .checkboxPlaceholder {
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
border: 2px solid #fff;
width: 20px;
height: 20px;
transition: all .35s cubic-bezier(.175, .885, .32, 1.275);
display: inline-block;
position: absolute;
top: 5px;
left: 0;
}
.inputHolder input[type="checkbox"] + label a {
color: #6d5c40;
font-size: inherit;
font-weight: inherit;
}
.inputHolder input[type="checkbox"] + label a:hover {
color: #000;
}
.inputHolder input[type="checkbox"]:checked + label .checkboxPlaceholder {
border-top-color: #0000;
border-right-color: #0000;
height: 10px;
transform: rotate(-45deg);
}
.inputHolder.white input[type="text"], .inputHolder.white input[type="email"], .inputHolder.white input[type="tel"], .inputHolder.white textarea, .inputHolder.white select {
border-color: #fff;
}
.inputHolder.alt input[type="text"] + label, .inputHolder.alt input[type="email"] + label, .inputHolder.alt input[type="tel"] + label, .inputHolder.alt textarea + label, .inputHolder.alt select + label, .inputHolder.alt.textarea:before {
background-color: #46462a;
}
.inputHolder input[type="text"].error, .inputHolder input[type="email"].error, .inputHolder input[type="tel"].error, .inputHolder textarea.error, .inputHolder select.error {
border-color: #bc6c25;
}
.inputHolder input[type="text"].error + label, .inputHolder input[type="email"].error + label, .inputHolder input[type="tel"].error + label, .inputHolder textarea.error + label, .inputHolder select.error + label {
color: #bc6c25;
}
.inputHolder .error:not(input, textarea) {
color: #bc6c25;
font-size: 1.2rem;
line-height: 1.6rem;
display: block;
position: relative;
}
.inputHolder.has-error input[type="checkbox"] + label .checkboxPlaceholder {
border-color: #bc6c25;
}
.inputHolder.btnwrapper .wpcf7-submit {
all: unset;
cursor: pointer;
}
.inputHolder.btnwrapper .ajaxloader {
display: none;
}
.outlinewrapper {
outline-offset: 2rem;
border-radius: 3rem;
outline: .2rem solid #e0dcd1;
margin: 2rem;
}
.outlinewrapper .figwrap {
z-index: 5;
border-radius: 3rem;
position: relative;
overflow: hidden;
}
.outlinewrapper .contwrap {
z-index: 4;
position: relative;
}
.outlinewrapper .vedicabstract {
--offset: 6.5rem;
fill: #e0dcd1;
height: 5rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.outlinewrapper .vedicabstract.topabstract {
top: calc(-1 * var(--offset));
}
.outlinewrapper .vedicabstract.bottomabstract {
bottom: calc(-1 * var(--offset));
}
.outlinewrapper .supportingvisual {
z-index: 2;
display: none;
position: absolute;
}
.outlinewrapper .supportingvisual.pot {
width: 32rem;
height: 31.5rem;
top: -20rem;
right: 5rem;
}
@media (width <= 1199px) {
.outlinewrapper .supportingvisual.pot {
width: 20rem;
height: 19.69rem;
top: -15rem;
}
}
@media (width <= 767px) {
.outlinewrapper .supportingvisual.pot {
width: 17rem;
height: 17rem;
top: -9rem;
}
}
.outlinewrapper .supportingvisual.creeper {
width: 22.5rem;
height: 36rem;
bottom: -30rem;
right: 0;
}
@media (width <= 1199px) {
.outlinewrapper .supportingvisual.creeper {
display: none !important;
}
}
.outlinewrapper.primaryoutline {
outline-color: #6d5c40;
}
.outlinewrapper.primaryoutline .vedicabstract {
fill: #6d5c40;
}
.outlinewrapper.secondaryoutline {
outline-color: #46462a;
}
.outlinewrapper.secondaryoutline .vedicabstract {
fill: #46462a;
}
.outlinewrapper.tertiaryoutline {
outline-color: #bcb4a3;
}
.outlinewrapper.tertiaryoutline .vedicabstract {
fill: #bcb4a3;
}
@media (width <= 767px) {
.outlinewrapper {
outline-offset: 1rem;
margin: 1rem;
}
.outlinewrapper .vedicabstract {
--offset: 5.5rem;
}
}
@media (width <= 561px) {
.outlinewrapper .vedicabstract {
--offset: 4.2rem;
height: 3.5rem;
}
}
.slick-slider {
box-sizing: border-box;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
display: block;
position: relative;
}
.slick-list {
margin: 0;
padding: 0;
display: block;
position: relative;
overflow: hidden;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track, .slick-slider .slick-list {
transform: translate3d(0, 0, 0);
}
.slick-track {
margin-left: auto;
margin-right: auto;
display: block;
position: relative;
top: 0;
left: 0;
}
.slick-track:before, .slick-track:after {
content: "";
display: table;
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
display: none;
}
[dir="rtl"] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
border: 1px solid #0000;
height: auto;
display: block;
}
.slick-arrow.slick-hidden {
display: none;
}
:root {
--f-spinner-width: 36px;
--f-spinner-height: 36px;
--f-spinner-color-1: #0000001a;
--f-spinner-color-2: #11181ccc;
--f-spinner-stroke: 2.75;
}
.f-spinner {
width: var(--f-spinner-width);
height: var(--f-spinner-height);
margin: auto;
padding: 0;
}
.f-spinner svg {
vertical-align: top;
width: 100%;
height: 100%;
animation: 2s linear infinite f-spinner-rotate;
}
.f-spinner svg * {
stroke-width: var(--f-spinner-stroke);
fill: none;
}
.f-spinner svg :first-child {
stroke: var(--f-spinner-color-1);
}
.f-spinner svg :last-child {
stroke: var(--f-spinner-color-2);
animation: 2s ease-in-out infinite f-spinner-dash;
}
@keyframes f-spinner-rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes f-spinner-dash {
0% {
stroke-dasharray: 1 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90 150;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 90 150;
stroke-dashoffset: -124px;
}
}
.f-throwOutUp {
animation: var(--f-throw-out-duration, .175s) ease-out both f-throwOutUp;
}
.f-throwOutDown {
animation: var(--f-throw-out-duration, .175s) ease-out both f-throwOutDown;
}
@keyframes f-throwOutUp {
to {
transform: translate3d(0, calc(var(--f-throw-out-distance, 150px) * -1), 0);
opacity: 0;
}
}
@keyframes f-throwOutDown {
to {
transform: translate3d(0, var(--f-throw-out-distance, 150px), 0);
opacity: 0;
}
}
.f-zoomInUp {
animation: var(--f-transition-duration, .2s) ease .1s both f-zoomInUp;
}
.f-zoomOutDown {
animation: var(--f-transition-duration, .2s) ease both f-zoomOutDown;
}
@keyframes f-zoomInUp {
from {
opacity: 0;
transform: scale(.975)translate3d(0, 16px, 0);
}
to {
opacity: 1;
transform: scale(1)translate3d(0, 0, 0);
}
}
@keyframes f-zoomOutDown {
to {
opacity: 0;
transform: scale(.975)translate3d(0, 16px, 0);
}
}
.f-fadeIn {
animation: var(--f-transition-duration, .2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeIn;
z-index: 2;
}
.f-fadeOut {
animation: var(--f-transition-duration, .2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeOut;
z-index: 1;
}
@keyframes f-fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes f-fadeOut {
100% {
opacity: 0;
}
}
.f-fadeFastIn {
animation: var(--f-transition-duration, .2s) ease-out both f-fadeFastIn;
z-index: 2;
}
.f-fadeFastOut {
animation: var(--f-transition-duration, .1s) ease-out both f-fadeFastOut;
z-index: 2;
}
@keyframes f-fadeFastIn {
0% {
opacity: .75;
}
100% {
opacity: 1;
}
}
@keyframes f-fadeFastOut {
100% {
opacity: 0;
}
}
.f-fadeSlowIn {
animation: var(--f-transition-duration, .5s) ease both f-fadeSlowIn;
z-index: 2;
}
.f-fadeSlowOut {
animation: var(--f-transition-duration, .5s) ease both f-fadeSlowOut;
z-index: 1;
}
@keyframes f-fadeSlowIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes f-fadeSlowOut {
100% {
opacity: 0;
}
}
.f-crossfadeIn {
animation: var(--f-transition-duration, .2s) ease-out both f-crossfadeIn;
z-index: 2;
}
.f-crossfadeOut {
animation: calc(var(--f-transition-duration, .2s) * .5) linear .1s both f-crossfadeOut;
z-index: 1;
}
@keyframes f-crossfadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes f-crossfadeOut {
100% {
opacity: 0;
}
}
.f-slideIn.from-next {
animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-slideInNext;
}
.f-slideIn.from-prev {
animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-slideInPrev;
}
.f-slideOut.to-next {
animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-slideOutNext;
}
.f-slideOut.to-prev {
animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-slideOutPrev;
}
@keyframes f-slideInPrev {
0% {
transform: translateX(100%);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes f-slideInNext {
0% {
transform: translateX(-100%);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes f-slideOutNext {
100% {
transform: translateX(-100%);
}
}
@keyframes f-slideOutPrev {
100% {
transform: translateX(100%);
}
}
.f-classicIn.from-next {
animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-classicInNext;
z-index: 2;
}
.f-classicIn.from-prev {
animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-classicInPrev;
z-index: 2;
}
.f-classicOut.to-next {
animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-classicOutNext;
z-index: 1;
}
.f-classicOut.to-prev {
animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-classicOutPrev;
z-index: 1;
}
@keyframes f-classicInNext {
0% {
opacity: 0;
transform: translateX(-75px);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes f-classicInPrev {
0% {
opacity: 0;
transform: translateX(75px);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes f-classicOutNext {
100% {
opacity: 0;
transform: translateX(-75px);
}
}
@keyframes f-classicOutPrev {
100% {
opacity: 0;
transform: translateX(75px);
}
}
:root {
--f-button-width: 40px;
--f-button-height: 40px;
--f-button-border: 0;
--f-button-border-radius: 0;
--f-button-color: #374151;
--f-button-bg: #f8f8f8;
--f-button-hover-bg: #e0e0e0;
--f-button-active-bg: #d0d0d0;
--f-button-shadow: none;
--f-button-transition: all .15s ease;
--f-button-transform: none;
--f-button-svg-width: 20px;
--f-button-svg-height: 20px;
--f-button-svg-stroke-width: 1.5;
--f-button-svg-fill: none;
--f-button-svg-filter: none;
--f-button-svg-disabled-opacity: .65;
}
.f-button {
box-sizing: content-box;
width: var(--f-button-width);
height: var(--f-button-height);
border: var(--f-button-border);
border-radius: var(--f-button-border-radius);
color: var(--f-button-color);
background: var(--f-button-bg);
box-shadow: var(--f-button-shadow);
pointer-events: all;
cursor: pointer;
transition: var(--f-button-transition);
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
display: flex;
position: relative;
}
@media (hover: hover) {
.f-button:hover:not([disabled]) {
color: var(--f-button-hover-color);
background-color: var(--f-button-hover-bg);
}
}
.f-button:active:not([disabled]) {
background-color: var(--f-button-active-bg);
}
.f-button:focus:not(:focus-visible) {
outline: none;
}
.f-button:focus-visible {
box-shadow: inset 0 0 0 var(--f-button-outline, 2px) var(--f-button-outline-color, var(--f-button-color));
outline: none;
}
.f-button svg {
width: var(--f-button-svg-width);
height: var(--f-button-svg-height);
fill: var(--f-button-svg-fill);
stroke: currentColor;
stroke-width: var(--f-button-svg-stroke-width);
stroke-linecap: round;
stroke-linejoin: round;
transform: var(--f-button-transform);
filter: var(--f-button-svg-filter);
pointer-events: none;
transition: opacity .15s;
}
.f-button[disabled] {
cursor: default;
}
.f-button[disabled] svg {
opacity: var(--f-button-svg-disabled-opacity);
}
.f-carousel__nav .f-button.is-prev, .f-carousel__nav .f-button.is-next, .fancybox__nav .f-button.is-prev, .fancybox__nav .f-button.is-next {
z-index: 1;
position: absolute;
}
.is-horizontal .f-carousel__nav .f-button.is-prev, .is-horizontal .f-carousel__nav .f-button.is-next, .is-horizontal .fancybox__nav .f-button.is-prev, .is-horizontal .fancybox__nav .f-button.is-next {
top: 50%;
transform: translateY(-50%);
}
.is-horizontal .f-carousel__nav .f-button.is-prev, .is-horizontal .fancybox__nav .f-button.is-prev {
left: var(--f-button-prev-pos);
}
.is-horizontal .f-carousel__nav .f-button.is-next, .is-horizontal .fancybox__nav .f-button.is-next {
right: var(--f-button-next-pos);
}
.is-horizontal.is-rtl .f-carousel__nav .f-button.is-prev, .is-horizontal.is-rtl .fancybox__nav .f-button.is-prev {
left: auto;
right: var(--f-button-next-pos);
}
.is-horizontal.is-rtl .f-carousel__nav .f-button.is-next, .is-horizontal.is-rtl .fancybox__nav .f-button.is-next {
right: auto;
left: var(--f-button-prev-pos);
}
.is-vertical .f-carousel__nav .f-button.is-prev, .is-vertical .f-carousel__nav .f-button.is-next, .is-vertical .fancybox__nav .f-button.is-prev, .is-vertical .fancybox__nav .f-button.is-next {
top: auto;
left: 50%;
transform: translateX(-50%);
}
.is-vertical .f-carousel__nav .f-button.is-prev, .is-vertical .fancybox__nav .f-button.is-prev {
top: var(--f-button-next-pos);
}
.is-vertical .f-carousel__nav .f-button.is-next, .is-vertical .fancybox__nav .f-button.is-next {
bottom: var(--f-button-next-pos);
}
.is-vertical .f-carousel__nav .f-button.is-prev svg, .is-vertical .f-carousel__nav .f-button.is-next svg, .is-vertical .fancybox__nav .f-button.is-prev svg, .is-vertical .fancybox__nav .f-button.is-next svg {
transform: rotate(90deg);
}
.f-carousel__nav .f-button:disabled, .fancybox__nav .f-button:disabled {
pointer-events: none;
}
html.with-fancybox {
scroll-behavior: auto;
width: auto;
overflow: visible;
}
html.with-fancybox body {
touch-action: none;
}
html.with-fancybox body.hide-scrollbar {
margin-right: calc(var(--fancybox-body-margin, 0px)  + var(--fancybox-scrollbar-compensate, 0px));
overscroll-behavior-y: none;
width: auto;
overflow: hidden !important;
}
.fancybox__container {
--fancybox-color: #dbdbdb;
--fancybox-hover-color: #fff;
--fancybox-bg: #18181bfa;
--fancybox-slide-gap: 10px;
--f-spinner-width: 50px;
--f-spinner-height: 50px;
--f-spinner-color-1: #ffffff1a;
--f-spinner-color-2: #bbb;
--f-spinner-stroke: 3.65;
box-sizing: border-box;
color: #f8f8f8;
-webkit-tap-highlight-color: #0000;
z-index: var(--fancybox-zIndex, 1050);
transform-origin: 0 0;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: none;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
overscroll-behavior-y: contain;
direction: ltr;
outline: none;
flex-direction: column;
margin: 0;
padding: 0;
display: flex;
position: fixed;
inset: 0;
overflow: visible;
}
.fancybox__container *, .fancybox__container :before, .fancybox__container :after {
box-sizing: inherit;
}
.fancybox__container::backdrop {
background-color: #0000;
}
.fancybox__backdrop {
z-index: -1;
background: var(--fancybox-bg);
opacity: var(--fancybox-opacity, 1);
will-change: opacity;
position: fixed;
inset: 0;
}
.fancybox__carousel {
box-sizing: border-box;
z-index: 10;
flex: 1;
min-height: 0;
position: relative;
overflow: clip visible;
}
.fancybox__viewport {
width: 100%;
height: 100%;
}
.fancybox__viewport.is-draggable {
cursor: move;
cursor: grab;
}
.fancybox__viewport.is-dragging {
cursor: move;
cursor: grabbing;
}
.fancybox__track {
height: 100%;
margin: 0 auto;
display: flex;
}
.fancybox__slide {
margin: 0 var(--fancybox-slide-gap) 0 0;
overscroll-behavior: contain;
backface-visibility: hidden;
flex-direction: column;
flex: none;
align-items: center;
width: 100%;
height: 100%;
padding: 4px;
display: flex;
position: relative;
overflow: auto;
transform: translate3d(0, 0, 0);
}
.fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn {
padding-top: 40px;
}
.fancybox__slide.has-iframe, .fancybox__slide.has-video, .fancybox__slide.has-html5video, .fancybox__slide.has-image {
overflow: hidden;
}
.fancybox__slide.has-image.is-animating, .fancybox__slide.has-image.is-selected {
overflow: visible;
}
.fancybox__slide:before, .fancybox__slide:after {
content: "";
flex: 0 0 0;
margin: auto;
}
.fancybox__backdrop:empty, .fancybox__viewport:empty, .fancybox__track:empty, .fancybox__slide:empty {
display: block;
}
.fancybox__content {
color: var(--fancybox-content-color, #374151);
background: var(--fancybox-content-bg, #fff);
cursor: default;
z-index: 20;
border-radius: 0;
flex-direction: column;
align-self: center;
max-width: 100%;
margin: 0;
padding: 2rem;
display: flex;
position: relative;
}
.is-loading .fancybox__content {
opacity: 0;
}
.is-draggable .fancybox__content {
cursor: move;
cursor: grab;
}
.can-zoom_in .fancybox__content {
cursor: zoom-in;
}
.can-zoom_out .fancybox__content {
cursor: zoom-out;
}
.is-dragging .fancybox__content {
cursor: move;
cursor: grabbing;
}
.fancybox__content [data-selectable], .fancybox__content [contenteditable] {
cursor: auto;
}
.fancybox__slide.has-image > .fancybox__content {
backface-visibility: hidden;
background: center / contain no-repeat;
min-height: 1px;
padding: 0;
transition: none;
transform: translate3d(0, 0, 0);
}
.fancybox__slide.has-image > .fancybox__content > picture > img {
width: 100%;
height: auto;
max-height: 100%;
}
.is-animating .fancybox__content, .is-dragging .fancybox__content {
will-change: transform, width, height;
}
.fancybox-image {
object-fit: contain;
-webkit-user-select: none;
user-select: none;
filter: blur();
width: 100%;
height: 100%;
min-height: 0;
margin: auto;
display: block;
}
.fancybox__caption {
overflow-wrap: anywhere;
color: var(--fancybox-color, currentColor);
opacity: var(--fancybox-opacity, 1);
cursor: auto;
visibility: visible;
flex-shrink: 0;
align-self: center;
max-width: 100%;
margin: 0;
padding: 14px 0 4px;
line-height: 1.375;
}
.is-loading .fancybox__caption, .is-closing .fancybox__caption {
opacity: 0;
visibility: hidden;
}
.is-compact .fancybox__caption {
padding-bottom: 0;
}
.f-button.is-close-btn {
--f-button-svg-stroke-width: 2;
z-index: 40;
position: absolute;
top: 0;
right: 8px;
}
.fancybox__content > .f-button.is-close-btn {
--f-button-width: 34px;
--f-button-height: 34px;
--f-button-border-radius: 4px;
--f-button-color: var(--fancybox-color, #fff);
--f-button-hover-color: var(--fancybox-color, #fff);
--f-button-bg: transparent;
--f-button-hover-bg: transparent;
--f-button-active-bg: transparent;
--f-button-svg-width: 22px;
--f-button-svg-height: 22px;
opacity: .75;
position: absolute;
top: -38px;
right: 0;
}
.is-loading .fancybox__content > .f-button.is-close-btn, .is-zooming-out .fancybox__content > .f-button.is-close-btn {
visibility: hidden;
}
.fancybox__content > .f-button.is-close-btn:hover {
opacity: 1;
}
.fancybox__footer {
margin: 0;
padding: 0;
position: relative;
}
.fancybox__footer .fancybox__caption {
opacity: var(--fancybox-opacity, 1);
width: 100%;
padding: 24px;
transition: all .25s;
}
.is-compact .fancybox__footer {
z-index: 20;
background: #18181b80;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.is-compact .fancybox__footer .fancybox__caption {
padding: 12px;
}
.is-compact .fancybox__content > .f-button.is-close-btn {
--f-button-border-radius: 50%;
--f-button-color: #fff;
--f-button-hover-color: #fff;
--f-button-outline-color: #000;
--f-button-bg: #0009;
--f-button-active-bg: #0009;
--f-button-hover-bg: #0009;
--f-button-svg-width: 18px;
--f-button-svg-height: 18px;
--f-button-svg-filter: none;
top: 5px;
right: 5px;
}
.fancybox__nav {
--f-button-width: 50px;
--f-button-height: 50px;
--f-button-border: 0;
--f-button-border-radius: 50%;
--f-button-color: var(--fancybox-color);
--f-button-hover-color: var(--fancybox-hover-color);
--f-button-bg: transparent;
--f-button-hover-bg: #18181b4d;
--f-button-active-bg: #18181b80;
--f-button-shadow: none;
--f-button-transition: all .15s ease;
--f-button-transform: none;
--f-button-svg-width: 26px;
--f-button-svg-height: 26px;
--f-button-svg-stroke-width: 2.5;
--f-button-svg-fill: none;
--f-button-svg-filter: drop-shadow(1px 1px 1px #18181b80);
--f-button-svg-disabled-opacity: .65;
--f-button-next-pos: 1rem;
--f-button-prev-pos: 1rem;
opacity: var(--fancybox-opacity, 1);
}
.fancybox__nav .f-button:before {
content: "";
z-index: 1;
position: absolute;
inset: -30px -20px;
}
.is-idle .fancybox__nav {
animation: .15s ease-out both f-fadeOut;
}
.is-idle.is-compact .fancybox__footer {
pointer-events: none;
animation: .15s ease-out both f-fadeOut;
}
.fancybox__slide > .f-spinner {
margin: var(--f-spinner-top, calc(var(--f-spinner-width) * -.5)) 0 0 var(--f-spinner-left, calc(var(--f-spinner-height) * -.5));
z-index: 30;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
}
.fancybox-protected {
z-index: 40;
-webkit-user-select: none;
user-select: none;
position: absolute;
inset: 0;
}
.fancybox-ghost {
object-fit: contain;
z-index: 40;
-webkit-user-select: none;
user-select: none;
pointer-events: none;
width: 100%;
height: 100%;
min-height: 0;
position: absolute;
top: 0;
left: 0;
}
.fancybox-focus-guard {
opacity: 0;
pointer-events: none;
outline: none;
position: fixed;
}
.fancybox__container:not([aria-hidden]) {
opacity: 0;
}
.fancybox__container.is-animated[aria-hidden="false"] > :not(.fancybox__backdrop, .fancybox__carousel), .fancybox__container.is-animated[aria-hidden="false"] .fancybox__carousel > :not(.fancybox__viewport), .fancybox__container.is-animated[aria-hidden="false"] .fancybox__slide > :not(.fancybox__content) {
animation: var(--f-interface-enter-duration, .25s) ease .1s backwards f-fadeIn;
}
.fancybox__container.is-animated[aria-hidden="false"] .fancybox__backdrop {
animation: var(--f-backdrop-enter-duration, .35s) ease backwards f-fadeIn;
}
.fancybox__container.is-animated[aria-hidden="true"] > :not(.fancybox__backdrop, .fancybox__carousel), .fancybox__container.is-animated[aria-hidden="true"] .fancybox__carousel > :not(.fancybox__viewport), .fancybox__container.is-animated[aria-hidden="true"] .fancybox__slide > :not(.fancybox__content) {
animation: var(--f-interface-exit-duration, .15s) ease forwards f-fadeOut;
}
.fancybox__container.is-animated[aria-hidden="true"] .fancybox__backdrop {
animation: var(--f-backdrop-exit-duration, .35s) ease forwards f-fadeOut;
}
.has-iframe .fancybox__content, .has-map .fancybox__content, .has-pdf .fancybox__content, .has-youtube .fancybox__content, .has-vimeo .fancybox__content, .has-html5video .fancybox__content {
flex-shrink: 1;
max-width: 100%;
min-height: 1px;
overflow: visible;
}
.has-iframe .fancybox__content, .has-map .fancybox__content, .has-pdf .fancybox__content {
width: calc(100% - 120px);
height: 90%;
}
.fancybox__container.is-compact .has-iframe .fancybox__content, .fancybox__container.is-compact .has-map .fancybox__content, .fancybox__container.is-compact .has-pdf .fancybox__content {
width: 100%;
height: 100%;
}
.has-youtube .fancybox__content, .has-vimeo .fancybox__content, .has-html5video .fancybox__content {
width: 960px;
max-width: 100%;
height: 540px;
max-height: 100%;
}
.has-map .fancybox__content, .has-pdf .fancybox__content, .has-youtube .fancybox__content, .has-vimeo .fancybox__content, .has-html5video .fancybox__content {
color: #fff;
background: #18181be6;
padding: 0;
}
.has-map .fancybox__content {
background: #e5e3df;
}
.fancybox__html5video, .fancybox__iframe {
background: none;
border: 0;
width: 100%;
height: 100%;
display: block;
}
.fancybox-placeholder {
clip: rect(1px, 1px, 1px, 1px) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
position: absolute !important;
overflow: hidden !important;
}
.f-carousel__thumbs {
--f-thumb-width: 96px;
--f-thumb-height: 72px;
--f-thumb-outline: 0;
--f-thumb-outline-color: #5eb0ef;
--f-thumb-opacity: 1;
--f-thumb-hover-opacity: 1;
--f-thumb-selected-opacity: 1;
--f-thumb-border-radius: 2px;
--f-thumb-offset: 0px;
--f-button-next-pos: 0;
--f-button-prev-pos: 0;
}
.f-carousel__thumbs.is-classic {
--f-thumb-gap: 8px;
--f-thumb-opacity: .5;
--f-thumb-hover-opacity: 1;
--f-thumb-selected-opacity: 1;
}
.f-carousel__thumbs.is-modern {
--f-thumb-gap: 4px;
--f-thumb-extra-gap: 16px;
--f-thumb-clip-width: 46px;
}
.f-thumbs {
-webkit-tap-highlight-color: #0000;
-webkit-user-select: none;
user-select: none;
perspective: 1000px;
flex: none;
margin: 0;
position: relative;
overflow: hidden;
transform: translateZ(0);
}
.f-thumbs .f-spinner {
z-index: -1;
background-image: linear-gradient(#ebeff2, #e2e8f0);
border-radius: 2px;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.f-thumbs .f-spinner svg {
display: none;
}
.f-thumbs.is-vertical {
height: 100%;
}
.f-thumbs__viewport {
width: 100%;
height: auto;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.f-thumbs__track {
display: flex;
}
.f-thumbs__slide {
box-sizing: content-box;
width: var(--f-thumb-width);
height: var(--f-thumb-height);
cursor: pointer;
flex: none;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
display: flex;
position: relative;
overflow: visible;
}
.f-thumbs__slide.is-loading img {
opacity: 0;
}
.is-classic .f-thumbs__viewport {
height: 100%;
}
.is-modern .f-thumbs__track {
width: max-content;
}
.is-modern .f-thumbs__track:before {
content: "";
top: 0;
bottom: 0;
left: calc((var(--f-thumb-clip-width, 0)) * -.5);
width: calc(var(--width, 0) * 1px + var(--f-thumb-clip-width, 0));
cursor: pointer;
position: absolute;
}
.is-modern .f-thumbs__slide {
width: var(--f-thumb-clip-width);
transform: translate3d(calc(var(--shift, 0) * -1px), 0, 0);
pointer-events: none;
transition: none;
}
.is-modern.is-resting .f-thumbs__slide {
transition: transform .33s;
}
.is-modern.is-resting .f-thumbs__slide__button {
transition: clip-path .33s;
}
.is-using-tab .is-modern .f-thumbs__slide:focus-within {
filter: drop-shadow(-1px 0px 0px var(--f-thumb-outline-color)) drop-shadow(2px 0px 0px var(--f-thumb-outline-color)) drop-shadow(0px -1px 0px var(--f-thumb-outline-color)) drop-shadow(0px 2px 0px var(--f-thumb-outline-color));
}
.f-thumbs__slide__button {
appearance: none;
width: var(--f-thumb-width);
border-radius: var(--f-thumb-border-radius);
cursor: pointer;
pointer-events: auto;
touch-action: manipulation;
opacity: var(--f-thumb-opacity);
background: none;
border: 0;
outline: none;
height: 100%;
margin: 0 -100%;
padding: 0;
transition: opacity .2s;
position: relative;
overflow: hidden;
}
.f-thumbs__slide__button:hover {
opacity: var(--f-thumb-hover-opacity);
}
.f-thumbs__slide__button:focus:not(:focus-visible) {
outline: none;
}
.f-thumbs__slide__button:focus-visible {
opacity: var(--f-thumb-selected-opacity);
outline: none;
}
.is-modern .f-thumbs__slide__button {
--clip-path: inset(0 calc(((var(--f-thumb-width, 0)  - var(--f-thumb-clip-width, 0))) * (1 - var(--progress, 0)) * .5) round var(--f-thumb-border-radius, 0));
clip-path: var(--clip-path);
}
.is-classic .is-nav-selected .f-thumbs__slide__button {
opacity: var(--f-thumb-selected-opacity);
}
.is-classic .is-nav-selected .f-thumbs__slide__button:after {
content: "";
border: var(--f-thumb-outline, 0) solid var(--f-thumb-outline-color, transparent);
border-radius: var(--f-thumb-border-radius);
z-index: 10;
height: auto;
animation: .2s ease-out f-fadeIn;
position: absolute;
inset: 0;
}
.f-thumbs__slide__img {
padding: var(--f-thumb-offset);
box-sizing: border-box;
pointer-events: none;
object-fit: cover;
border-radius: var(--f-thumb-border-radius);
width: 100%;
height: 100%;
margin: 0;
position: absolute;
inset: 0;
overflow: hidden;
}
.f-thumbs.is-horizontal .f-thumbs__track {
padding: 8px 0 12px;
}
.f-thumbs.is-horizontal .f-thumbs__slide {
margin: 0 var(--f-thumb-gap) 0 0;
}
.f-thumbs.is-vertical .f-thumbs__track {
flex-wrap: wrap;
padding: 0 8px;
}
.f-thumbs.is-vertical .f-thumbs__slide {
margin: 0 0 var(--f-thumb-gap) 0;
}
.fancybox__thumbs {
--f-thumb-width: 96px;
--f-thumb-height: 72px;
--f-thumb-border-radius: 2px;
--f-thumb-outline: 2px;
--f-thumb-outline-color: #ededed;
opacity: var(--fancybox-opacity, 1);
transition: max-height .35s cubic-bezier(.23, 1, .32, 1);
position: relative;
}
.fancybox__thumbs.is-classic {
--f-thumb-gap: 8px;
--f-thumb-opacity: .5;
--f-thumb-hover-opacity: 1;
}
.fancybox__thumbs.is-classic .f-spinner {
background-image: linear-gradient(#ffffff1a, #ffffff0d);
}
.fancybox__thumbs.is-modern {
--f-thumb-gap: 4px;
--f-thumb-extra-gap: 16px;
--f-thumb-clip-width: 46px;
--f-thumb-opacity: 1;
--f-thumb-hover-opacity: 1;
}
.fancybox__thumbs.is-modern .f-spinner {
background-image: linear-gradient(#ffffff1a, #ffffff0d);
}
.fancybox__thumbs.is-horizontal {
padding: 0 var(--f-thumb-gap);
}
.fancybox__thumbs.is-vertical {
padding: var(--f-thumb-gap) 0;
}
.is-compact .fancybox__thumbs {
--f-thumb-width: 64px;
--f-thumb-clip-width: 32px;
--f-thumb-height: 48px;
--f-thumb-extra-gap: 10px;
}
.fancybox__thumbs.is-masked {
max-height: 0 !important;
}
.is-closing .fancybox__thumbs {
transition: none !important;
}
.fancybox__toolbar {
--f-progress-color: var(--fancybox-color, #fffffff0);
--f-button-width: 46px;
--f-button-height: 46px;
--f-button-color: var(--fancybox-color);
--f-button-hover-color: var(--fancybox-hover-color);
--f-button-bg: #18181ba6;
--f-button-hover-bg: #464649a6;
--f-button-active-bg: #5a5a5da6;
--f-button-border-radius: 0;
--f-button-svg-width: 24px;
--f-button-svg-height: 24px;
--f-button-svg-stroke-width: 1.5;
--f-button-svg-filter: drop-shadow(1px 1px 1px #18181b26);
--f-button-svg-fill: none;
--f-button-svg-disabled-opacity: .65;
color: var(--fancybox-color, currentColor);
opacity: var(--fancybox-opacity, 1);
text-shadow: var(--fancybox-toolbar-text-shadow, 1px 1px 1px #00000080);
pointer-events: none;
z-index: 20;
flex-direction: row;
justify-content: space-between;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI Adjusted, Segoe UI, Liberation Sans, sans-serif;
display: flex;
}
.fancybox__toolbar :focus-visible {
z-index: 1;
}
.fancybox__toolbar.is-absolute, .is-compact .fancybox__toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.is-idle .fancybox__toolbar {
pointer-events: none;
animation: .15s ease-out both f-fadeOut;
}
.fancybox__toolbar__column {
flex-flow: wrap;
align-content: flex-start;
display: flex;
}
.fancybox__toolbar__column.is-left, .fancybox__toolbar__column.is-right {
flex-grow: 1;
flex-basis: 0;
}
.fancybox__toolbar__column.is-right {
flex-wrap: nowrap;
justify-content: flex-end;
display: flex;
}
.fancybox__infobar {
line-height: var(--f-button-height);
text-align: center;
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: subpixel-antialiased;
cursor: default;
-webkit-user-select: none;
user-select: none;
padding: 0 5px;
font-size: 17px;
}
.fancybox__infobar span {
padding: 0 5px;
}
.fancybox__infobar:not(:first-child):not(:last-child) {
background: var(--f-button-bg);
}
[data-fancybox-toggle-slideshow] {
position: relative;
}
[data-fancybox-toggle-slideshow] .f-progress {
opacity: .3;
height: 100%;
}
[data-fancybox-toggle-slideshow] svg g:first-child {
display: flex;
}
[data-fancybox-toggle-slideshow] svg g:last-child, .has-slideshow [data-fancybox-toggle-slideshow] svg g:first-child {
display: none;
}
.has-slideshow [data-fancybox-toggle-slideshow] svg g:last-child, [data-fancybox-toggle-fullscreen] svg g:first-child {
display: flex;
}
[data-fancybox-toggle-fullscreen] svg g:last-child, :fullscreen [data-fancybox-toggle-fullscreen] svg g:first-child {
display: none;
}
:fullscreen [data-fancybox-toggle-fullscreen] svg g:last-child {
display: flex;
}
.f-progress {
transform-origin: 0;
background: var(--f-progress-color, var(--f-carousel-theme-color, #0091ff));
z-index: 30;
-webkit-user-select: none;
user-select: none;
pointer-events: none;
height: 3px;
transition-property: transform;
transition-timing-function: linear;
position: absolute;
top: 0;
left: 0;
right: 0;
transform: scaleX(0);
}
.select2-container {
box-sizing: border-box;
vertical-align: middle;
margin: 0;
display: inline-block;
position: relative;
}
.select2-container .select2-selection--single {
box-sizing: border-box;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
height: 28px;
display: block;
}
.select2-container .select2-selection--single .select2-selection__rendered {
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 8px;
padding-right: 20px;
display: block;
overflow: hidden;
}
.select2-container .select2-selection--single .select2-selection__clear {
background-color: #0000;
border: none;
font-size: 1em;
}
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
padding-left: 20px;
padding-right: 8px;
}
.select2-container .select2-selection--multiple {
box-sizing: border-box;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
min-height: 32px;
display: block;
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
padding: 0;
list-style: none;
display: inline;
}
.select2-container .select2-selection--multiple .select2-selection__clear {
background-color: #0000;
border: none;
font-size: 1em;
}
.select2-container .select2-search--inline .select2-search__field {
box-sizing: border-box;
resize: none;
vertical-align: bottom;
word-break: keep-all;
border: none;
max-width: 100%;
height: 18px;
margin-top: 5px;
margin-left: 5px;
padding: 0;
font-family: sans-serif;
font-size: 100%;
overflow: hidden;
}
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.select2-dropdown {
box-sizing: border-box;
z-index: 1051;
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px;
width: 100%;
display: block;
position: absolute;
left: -100000px;
}
.select2-results {
display: block;
}
.select2-results__options {
margin: 0;
padding: 0;
list-style: none;
}
.select2-results__option {
-webkit-user-select: none;
user-select: none;
padding: 6px;
}
.select2-results__option--selectable {
cursor: pointer;
}
.select2-container--open .select2-dropdown {
left: 0;
}
.select2-container--open .select2-dropdown--above {
border-bottom: none;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.select2-container--open .select2-dropdown--below {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.select2-search--dropdown {
padding: 4px;
display: block;
}
.select2-search--dropdown .select2-search__field {
box-sizing: border-box;
width: 100%;
padding: 4px;
}
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.select2-search--dropdown.select2-search--hide {
display: none;
}
.select2-close-mask {
opacity: 0;
z-index: 99;
filter: alpha(opacity= 0);
background-color: #fff;
border: 0;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
margin: 0;
padding: 0;
display: block;
position: fixed;
top: 0;
left: 0;
}
.select2-hidden-accessible {
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
position: absolute !important;
overflow: hidden !important;
}
.select2-container--default .select2-selection--single {
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #444;
line-height: 28px;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
cursor: pointer;
float: right;
height: 26px;
margin-right: 20px;
padding-right: 0;
font-weight: bold;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #999;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
width: 20px;
height: 26px;
position: absolute;
top: 1px;
right: 1px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border: 4px solid #0000;
border-top: 5px solid #888;
border-bottom-width: 0;
width: 0;
height: 0;
margin-top: -2px;
margin-left: -4px;
position: absolute;
top: 50%;
left: 50%;
}
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
float: left;
}
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
left: 1px;
right: auto;
}
.select2-container--default.select2-container--disabled .select2-selection--single {
cursor: default;
background-color: #eee;
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
display: none;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-width: 0 4px 5px;
border-color: #0000 #0000 #888;
}
.select2-container--default .select2-selection--multiple {
cursor: text;
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px;
padding-bottom: 5px;
padding-right: 5px;
position: relative;
}
.select2-container--default .select2-selection--multiple.select2-selection--clearable {
padding-right: 25px;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
cursor: pointer;
height: 20px;
margin-top: 5px;
margin-right: 10px;
padding: 1px;
font-weight: bold;
position: absolute;
right: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
box-sizing: border-box;
text-overflow: ellipsis;
vertical-align: bottom;
white-space: nowrap;
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
max-width: 100%;
margin-top: 5px;
margin-left: 5px;
padding: 0 0 0 20px;
display: inline-block;
position: relative;
overflow: hidden;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
cursor: default;
padding-left: 2px;
padding-right: 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: #999;
cursor: pointer;
background-color: #0000;
border: none;
border-right: 1px solid #aaa;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
padding: 0 4px;
font-size: 1em;
font-weight: bold;
position: absolute;
top: 0;
left: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
color: #333;
background-color: #f1f1f1;
outline: none;
}
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
margin-left: 5px;
margin-right: auto;
}
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display {
padding-left: 5px;
padding-right: 2px;
}
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
border-left: 1px solid #aaa;
border-right: none;
border-radius: 0 4px 4px 0;
}
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__clear {
float: left;
margin-left: 10px;
margin-right: auto;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border: 1px solid #000;
outline: 0;
}
.select2-container--default.select2-container--disabled .select2-selection--multiple {
cursor: default;
background-color: #eee;
}
.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
display: none;
}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid #aaa;
}
.select2-container--default .select2-search--inline .select2-search__field {
box-shadow: none;
-webkit-appearance: textfield;
background: none;
border: none;
outline: 0;
}
.select2-container--default .select2-results > .select2-results__options {
max-height: 200px;
overflow-y: auto;
}
.select2-container--default .select2-results__option .select2-results__option {
padding-left: 1em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
padding-left: 0;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
margin-left: -1em;
padding-left: 2em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -2em;
padding-left: 3em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -3em;
padding-left: 4em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -4em;
padding-left: 5em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -5em;
padding-left: 6em;
}
.select2-container--default .select2-results__option--group {
padding: 0;
}
.select2-container--default .select2-results__option--disabled {
color: #999;
}
.select2-container--default .select2-results__option--selected {
background-color: #ddd;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
color: #fff;
background-color: #5897fb;
}
.select2-container--default .select2-results__group {
cursor: default;
padding: 6px;
display: block;
}
.select2-container--classic .select2-selection--single {
filter: progid:DXImageTransform. Microsoft. gradient(startColorstr= "#FFFFFFFF", endColorstr= "#FFEEEEEE", GradientType= 0);
background-color: #f7f7f7;
background-image: linear-gradient(#fff 50%, #eee 100%);
background-repeat: repeat-x;
border: 1px solid #aaa;
border-radius: 4px;
outline: 0;
}
.select2-container--classic .select2-selection--single:focus {
border: 1px solid #5897fb;
}
.select2-container--classic .select2-selection--single .select2-selection__rendered {
color: #444;
line-height: 28px;
}
.select2-container--classic .select2-selection--single .select2-selection__clear {
cursor: pointer;
float: right;
height: 26px;
margin-right: 20px;
font-weight: bold;
}
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
color: #999;
}
.select2-container--classic .select2-selection--single .select2-selection__arrow {
filter: progid:DXImageTransform. Microsoft. gradient(startColorstr= "#FFEEEEEE", endColorstr= "#FFCCCCCC", GradientType= 0);
background-color: #ddd;
background-image: linear-gradient(#eee 50%, #ccc 100%);
background-repeat: repeat-x;
border: none;
border-left: 1px solid #aaa;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
width: 20px;
height: 26px;
position: absolute;
top: 1px;
right: 1px;
}
.select2-container--classic .select2-selection--single .select2-selection__arrow b {
border: 4px solid #0000;
border-top: 5px solid #888;
border-bottom-width: 0;
width: 0;
height: 0;
margin-top: -2px;
margin-left: -4px;
position: absolute;
top: 50%;
left: 50%;
}
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
float: left;
}
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
border: none;
border-right: 1px solid #aaa;
border-radius: 4px 0 0 4px;
left: 1px;
right: auto;
}
.select2-container--classic.select2-container--open .select2-selection--single {
border: 1px solid #5897fb;
}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
background: none;
border: none;
}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-width: 0 4px 5px;
border-color: #0000 #0000 #888;
}
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
filter: progid:DXImageTransform. Microsoft. gradient(startColorstr= "#FFFFFFFF", endColorstr= "#FFEEEEEE", GradientType= 0);
background-image: linear-gradient(#fff 0%, #eee 50%);
background-repeat: repeat-x;
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
filter: progid:DXImageTransform. Microsoft. gradient(startColorstr= "#FFEEEEEE", endColorstr= "#FFFFFFFF", GradientType= 0);
background-image: linear-gradient(#eee 50%, #fff 100%);
background-repeat: repeat-x;
border-bottom: none;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.select2-container--classic .select2-selection--multiple {
cursor: text;
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px;
outline: 0;
padding-bottom: 5px;
padding-right: 5px;
}
.select2-container--classic .select2-selection--multiple:focus {
border: 1px solid #5897fb;
}
.select2-container--classic .select2-selection--multiple .select2-selection__clear {
display: none;
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
margin-top: 5px;
margin-left: 5px;
padding: 0;
display: inline-block;
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__display {
cursor: default;
padding-left: 2px;
padding-right: 5px;
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
color: #888;
cursor: pointer;
background-color: #0000;
border: none;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
padding: 0 4px;
font-size: 1em;
font-weight: bold;
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #555;
outline: none;
}
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
margin-left: 5px;
margin-right: auto;
}
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display {
padding-left: 5px;
padding-right: 2px;
}
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
border-radius: 0 4px 4px 0;
}
.select2-container--classic.select2-container--open .select2-selection--multiple {
border: 1px solid #5897fb;
}
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
border-bottom: none;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.select2-container--classic .select2-search--dropdown .select2-search__field {
border: 1px solid #aaa;
outline: 0;
}
.select2-container--classic .select2-search--inline .select2-search__field {
box-shadow: none;
outline: 0;
}
.select2-container--classic .select2-dropdown {
background-color: #fff;
border: 1px solid #0000;
}
.select2-container--classic .select2-dropdown--above {
border-bottom: none;
}
.select2-container--classic .select2-dropdown--below {
border-top: none;
}
.select2-container--classic .select2-results > .select2-results__options {
max-height: 200px;
overflow-y: auto;
}
.select2-container--classic .select2-results__option--group {
padding: 0;
}
.select2-container--classic .select2-results__option--disabled {
color: gray;
}
.select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable {
color: #fff;
background-color: #3875d7;
}
.select2-container--classic .select2-results__group {
cursor: default;
padding: 6px;
display: block;
}
.select2-container--classic.select2-container--open .select2-dropdown {
border-color: #5897fb;
}
.slick-disabled {
opacity: .6 !important;
pointer-events: none !important;
}
html.with-fancybox {
overflow: auto;
}
.fancybox__container {
z-index: 2147483647;
}
.select2-container--default {
height: 40px;
}
.select2-container--default .selection {
height: inherit;
width: 100%;
}
.select2-container--default .selection .select2-selection--single {
background-color: inherit;
color: #6d5c40;
height: inherit;
background-color: #6d5c40;
border: 1px solid #46462a;
border-radius: 2rem;
outline: none;
width: 100%;
padding: 0;
display: block;
}
.select2-container--default .selection .select2-selection--single .select2-selection__rendered {
color: #fff;
align-items: center;
width: 100%;
height: 100%;
padding: 5px 20px;
display: flex;
}
.select2-container--default .selection .select2-selection--single .select2-selection__arrow {
height: 100%;
right: 10px;
}
.select2-container--default .selection .select2-selection--single .select2-selection__arrow b {
border-top-color: #fff;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background-color: #6d5c40;
}
.select2-dropdown {
background-color: #0000;
border: 1px solid #46462a;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
.select2-results__options .select2-results__option {
background-color: #bcb4a3;
padding: 5px 20px;
}
.introwrap .icons {
height: 7rem;
margin: 0 2rem;
}
@media (width <= 991px) {
.introwrap .icons {
height: 5rem;
margin: 0 .9rem;
}
}
@media (width <= 767px) {
.introwrap .icons {
height: 3rem;
margin: 0 .5rem -.5rem;
}
}
.introwrap .sectiontitle span {
align-items: center;
display: inline-flex;
}
@media (width <= 767px) {
.introwrap .sectiontitle span {
display: inline;
}
}
.projectlistwrapper {
justify-content: space-between;
}
.projectlistwrapper .projectlistwrap {
isolation: isolate;
flex-basis: calc(50% - 15px);
margin-top: 12rem;
}
.projectlistwrapper .projectlistwrap .projectitem {
background-color: #e0dcd1;
border-radius: 3rem;
align-items: start;
position: relative;
}
.projectlistwrapper .projectlistwrap .projectitem .contwrap {
background-color: inherit;
border-radius: 3rem;
padding: 4rem 3rem;
}
.projectlistwrapper .projectlistwrap .projectitem .contwrap .detilswrap {
margin-top: 2.5rem;
}
.projectlistwrapper .projectlistwrap .projectitem .contwrap .detilswrap li {
flex-basis: calc(33.3333% - 15px);
max-width: calc(33.3333% - 15px);
margin: 0;
padding-left: 1.8rem;
position: relative;
}
.projectlistwrapper .projectlistwrap .projectitem .contwrap .detilswrap li:before {
content: "";
background-color: #6d5c40;
width: .8rem;
height: .8rem;
position: absolute;
top: 1rem;
left: 0;
transform: rotate(-45deg);
}
@media (width <= 1199px) {
.projectlistwrapper .projectlistwrap .projectitem .contwrap .detilswrap li {
flex-basis: calc(50% - 15px);
max-width: calc(50% - 15px);
font-size: 1.4rem;
line-height: 2.4rem;
}
}
@media (width <= 991px) {
.projectlistwrapper .projectlistwrap .projectitem .contwrap .detilswrap li {
flex-basis: calc(33.3333% - 15px);
max-width: calc(33.3333% - 15px);
}
}
@media (width <= 561px) {
.projectlistwrapper .projectlistwrap .projectitem .contwrap .detilswrap li {
flex-basis: 100%;
max-width: 100%;
}
}
@media (width <= 1199px) {
.projectlistwrapper .projectlistwrap .projectitem .contwrap .detilswrap {
flex-wrap: wrap;
gap: 1.5rem;
}
}
@media (width <= 767px) {
.projectlistwrapper .projectlistwrap .projectitem .contwrap .detilswrap {
gap: 1rem;
}
}
.projectlistwrapper .projectlistwrap .projectitem + .projectitem {
margin-top: 14rem;
}
@media (width <= 767px) {
.projectlistwrapper .projectlistwrap .projectitem + .projectitem {
margin-top: 10rem;
}
}
.projectlistwrapper .projectlistwrap .projectitem.special {
padding-bottom: 0 !important;
}
.projectlistwrapper .projectlistwrap .projectitem.special .contwrap {
z-index: 6;
background-color: #0000;
position: absolute;
bottom: 0;
left: 0;
}
.projectlistwrapper .projectlistwrap .projectitem.special .contwrap h2 {
line-height: 1.2;
}
@media (width <= 1199px) {
.projectlistwrapper .projectlistwrap .projectitem.special .figwrap {
min-height: 57rem;
}
}
.projectlistwrapper .projectlistwrap .projectitem.in-progress .figwrap {
position: relative;
}
.projectlistwrapper .projectlistwrap .projectitem.in-progress .figwrap:after {
content: "Project Details Coming Soon";
color: #bcb4a3;
text-align: center;
opacity: 0;
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
background-color: #000000b3;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-size: 2rem;
font-weight: 500;
line-height: 3rem;
transition: all .5s ease-in-out;
display: flex;
position: absolute;
top: 0;
left: 0;
}
@media (width <= 767px) {
.projectlistwrapper .projectlistwrap .projectitem.in-progress .figwrap:after {
font-size: 1.6rem;
line-height: 2.6rem;
}
}
.projectlistwrapper .projectlistwrap .projectitem.in-progress:hover .figwrap:after {
opacity: 1;
}
.projectlistwrapper .projectlistwrap .projectitem.white {
background-color: #fff;
}
.projectlistwrapper .projectlistwrap .projectitem.loading {
-webkit-filter: blur(10px);
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
transition: all .35s cubic-bezier(.175, .885, .32, 1.275);
}
.projectlistwrapper .projectlistwrap .projectitem .figwrap img {
width: 100%;
transition-duration: .7s;
transition-timing-function: ease-in-out;
}
@media (width <= 767px) {
.projectlistwrapper .projectlistwrap .projectitem {
outline-offset: 1rem;
margin: 1rem;
padding-bottom: 30px;
}
.projectlistwrapper .projectlistwrap .projectitem .contwrap {
padding: 2.5rem;
}
.projectlistwrapper .projectlistwrap .projectitem .contwrap .detilswrap {
margin-top: 1.5rem;
}
.projectlistwrapper .projectlistwrap .projectitem .contwrap .detilswrap li {
flex-basis: 100%;
}
}
.projectlistwrapper .projectlistwrap .projectitem:hover .figwrap img {
transform: scale(1.1);
}
.projectlistwrapper .projectlistwrap.leftblock .projectitem:nth-child(2n) .vedicabstract {
display: none;
}
.projectlistwrapper .projectlistwrap.leftblock .projectitem:last-child .supportingvisual {
display: block;
}
.projectlistwrapper .projectlistwrap.leftblock .projectitem:last-child .supportingvisual img {
margin-left: auto;
display: block;
}
.projectlistwrapper .projectlistwrap.rightblock {
padding-top: 10.622rem;
}
.projectlistwrapper .projectlistwrap.rightblock .projectitem:nth-child(odd) .vedicabstract {
display: none;
}
.projectlistwrapper .projectlistwrap.rightblock .projectitem:first-child .supportingvisual {
display: block;
}
@media (width <= 991px) {
.projectlistwrapper .projectlistwrap.rightblock {
padding-top: 9rem;
}
}
@media (width <= 767px) {
.projectlistwrapper .projectlistwrap.rightblock {
padding-top: 0;
}
}
@media (width <= 561px) {
.projectlistwrapper .projectlistwrap.rightblock {
padding-top: 5rem;
}
}
@media (width <= 1199px) {
.projectlistwrapper .projectlistwrap {
margin-top: 14rem;
}
.projectlistwrapper .projectlistwrap.additionalpadding {
padding-bottom: 30rem;
}
}
@media (width <= 1023px) {
.projectlistwrapper .projectlistwrap {
margin-top: 8rem;
}
.projectlistwrapper .projectlistwrap.additionalpadding {
padding-bottom: 0;
}
}
@media (width <= 991px) {
.projectlistwrapper .projectlistwrap {
flex-basis: 100%;
margin-top: 5rem;
}
}
@media (width <= 767px) {
.projectlistwrapper .projectlistwrap {
margin-top: 10rem;
}
}
@media (width <= 561px) {
.projectlistwrapper .projectlistwrap {
margin-top: 8rem;
}
}
@media (width <= 1023px) {
.projectlistwrapper {
flex-wrap: wrap;
margin-bottom: 15rem;
}
.projectlistwrapper.g30 {
gap: 0;
}
}
@media (width <= 767px) {
.projectlistwrapper {
margin-bottom: 11rem;
}
}
@media (width <= 561px) {
.projectlistwrapper {
margin-bottom: 8rem;
}
}
.projectbottomwrap .projectlistwrapper .projectlistwrap.additionalpadding {
padding-bottom: 20rem;
}
@media (width <= 1023px) {
.projectbottomwrap .projectlistwrapper .projectlistwrap.additionalpadding {
padding-bottom: 0;
}
.projectbottomwrap .projectlistwrapper {
margin-bottom: 10rem;
}
}
@media (width <= 561px) {
.projectbottomwrap .projectlistwrapper {
margin-bottom: 5rem;
}
}
.projectwrap .extratxt {
max-width: 44.5rem;
margin-top: -10rem;
}
@media (width <= 1599px) {
.projectwrap .extratxt {
max-width: 39rem;
}
}
@media (width <= 1199px) {
.projectwrap .extratxt {
z-index: 10;
max-width: 50rem;
margin-top: -25rem;
position: relative;
}
}
@media (width <= 1023px) {
.projectwrap .extratxt {
text-align: center;
align-items: center;
width: 500px;
max-width: 100%;
margin: -7rem auto 0;
}
}
@media (width <= 991px) {
.projectwrap .extratxt {
text-align: center;
margin-top: -5rem;
}
}
@media (width <= 561px) {
.projectwrap .extratxt {
width: 100%;
margin-top: 0;
}
}
.videowrap .videowraper {
aspect-ratio: 16 / 9;
isolation: isolate;
justify-content: center;
align-items: center;
width: 100vw;
max-width: 102rem;
margin: 2.503rem auto 0;
display: flex;
position: relative;
}
.videowrap .videowraper .videothumbnail {
cursor: pointer;
border-radius: 20px;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
.videowrap .videowraper .videothumbnail .icon {
margin: auto;
position: absolute;
inset: 0;
}
.videowrap .videowraper .videothumbnail img {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
}
.videowrap .videowraper .video {
border-radius: 20px;
width: 100%;
height: 100%;
overflow: hidden;
}
.videowrap .videowraper .video iframe {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.videowrap .videowraper .videoblock {
z-index: 1;
bottom: 0;
border-radius: 1.875rem;
width: 100%;
position: absolute;
inset: 0;
}
.videowrap .videowraper .icon {
pointer-events: none;
z-index: 2;
width: 10rem;
height: 10rem;
position: relative;
}
.videowrap .videowraper .icon .bg {
fill: #bc6c25;
transform-origin: center;
}
.videowrap .videowraper .icon .play {
fill: #fff;
}
.videowrap .videowraper:before, .videowrap .videowraper:after {
content: "";
pointer-events: none;
z-index: -1;
background-image: url(//jjinteriordesigns.com/assets/images/pillar-drawing.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 39.5rem;
height: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.videowrap .videowraper:before {
left: -23.5rem;
}
.videowrap .videowraper:after {
right: -16.5rem;
}
.videowrap .videowraper:hover .icon .bg {
animation: 5s linear infinite forwards rotate;
}
@media (width <= 1199px) {
.videowrap .videowraper {
max-width: 100%;
}
.videowrap .videowraper .icon {
width: 9.5rem;
height: 9.5rem;
}
}
@media (width <= 767px) {
.videowrap .videowraper .icon {
width: 7rem;
height: 7rem;
}
}
@media (width <= 562px) {
.videowrap .videowraper .icon {
width: 5rem;
height: 5rem;
}
}
.approachwrap {
background-image: url(//jjinteriordesigns.com/assets/images/temple-architecture-primary-v1.png);
background-position: bottom;
background-repeat: no-repeat;
background-size: 120rem 29.33rem;
padding-bottom: 33.25rem !important;
}
.approachwrap .listwrap {
perspective: 1000px;
}
.approachwrap .listwrap .listitem {
position: relative;
}
.approachwrap .listwrap .listitem .flipwrapper {
-o-transition: transform cubic-bezier(.175, .885, .32, 1.275) .75s;
transform-style: preserve-3d;
min-height: 37rem;
transition: transform .75s cubic-bezier(.175, .885, .32, 1.275);
}
.approachwrap .listwrap .listitem .flipwrapper .front, .approachwrap .listwrap .listitem .flipwrapper .back {
backface-visibility: hidden;
border-radius: 3rem;
width: 100%;
height: 100%;
position: absolute;
}
.approachwrap .listwrap .listitem .flipwrapper .front {
padding: 7rem 2.5rem;
}
.approachwrap .listwrap .listitem .flipwrapper .front svg {
fill: currentColor;
width: 6.8rem;
height: 6.8rem;
}
.approachwrap .listwrap .listitem .flipwrapper .back {
transform: rotateY(-180deg);
}
.approachwrap .listwrap .listitem .flipwrapper .ctalink:before {
content: "";
bottom: 0;
width: 100%;
height: 100%;
position: absolute;
inset: 0;
}
@media (width <= 767px) {
.approachwrap .listwrap .listitem .flipwrapper .front, .approachwrap .listwrap .listitem .flipwrapper .back {
position: static;
}
.approachwrap .listwrap .listitem .flipwrapper .front {
border-radius: 3rem 3rem 0 0;
padding: 3rem 2.5rem 0;
}
.approachwrap .listwrap .listitem .flipwrapper .back {
background-color: #e0dcd1;
border-radius: 0 0 3rem 3rem;
transform: rotateY(0);
}
.approachwrap .listwrap .listitem .flipwrapper .back p {
color: #6d5c40;
}
.approachwrap .listwrap .listitem .flipwrapper .back .ctalink {
color: #6d5c40;
margin-top: 2rem;
text-decoration: underline;
}
.approachwrap .listwrap .listitem .flipwrapper {
min-height: auto;
}
}
.approachwrap .listwrap .listitem .detailwrap {
padding: 3rem;
}
@media (width <= 767px) {
.approachwrap .listwrap .listitem .detailwrap {
padding: .5rem 2.5rem 3rem;
}
}
@media (width >= 768px) {
.approachwrap .listwrap .listitem:hover:not(.special) .flipwrapper {
transform: rotateY(-180deg);
}
}
.approachwrap .listwrap .listitem.special {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 3rem;
padding: 3rem;
}
.approachwrap .listwrap .listitem.special .contblock {
isolation: isolate;
border-radius: 1.188rem;
align-items: start;
height: 100%;
padding: 2rem;
position: relative;
overflow: hidden;
}
.approachwrap .listwrap .listitem.special .contblock .pattern {
opacity: .4;
z-index: -1;
width: calc(100% - 3.6rem);
position: absolute;
bottom: -1.8rem;
}
@media (width <= 767px) {
.approachwrap .listwrap .listitem.special .contblock .pattern {
width: 70%;
margin: 0 auto;
left: 0;
right: 0;
}
}
@media (width <= 1199px) {
.approachwrap .listwrap .listitem.special {
padding: 2rem;
}
.approachwrap .listwrap .listitem.special .g10 {
gap: 20px;
}
}
@media (width <= 767px) {
.approachwrap .listwrap .listitem.special {
min-height: 40rem;
}
}
@media (width <= 1599px) {
.approachwrap .listwrap .listitem {
flex-basis: calc(33.3333% - 23px);
max-width: calc(33.3333% - 23px);
}
}
@media (width <= 991px) {
.approachwrap .listwrap .listitem {
flex-basis: calc(50% - 23px);
max-width: calc(50% - 23px);
}
}
@media (width <= 767px) {
.approachwrap .listwrap .listitem {
flex-basis: 100%;
max-width: 100%;
}
.approachwrap .listwrap {
gap: 20px;
}
.approachwrap {
background-image: url(//jjinteriordesigns.com/assets/images/temple-architecture-primary-mobile-v1.png);
background-size: 50rem 20.7rem;
padding-bottom: 25rem !important;
}
}
.testimonialwrap .testimonialslider {
margin-top: 5rem;
}
.testimonialwrap .testimonialslider .testimonialwrapper .starrating {
height: 2.3rem;
margin-bottom: 2rem;
}
.testimonialwrap .testimonialslider .testimonialwrapper .authorwrap .authorimg {
width: 6rem;
height: 6rem;
}
.testimonialwrap .testimonialslider .testimonialwrapper .authorwrap .authorimg img {
border-radius: 100%;
display: block;
}
.testimonialwrap .testimonialslider .slick-slide {
margin: 0 5rem;
}
.testimonialwrap .testimonialslider .slick-list {
margin: 0 -5rem;
}
.testimonialwrap .blocknavigation {
margin-top: 4rem;
}
.testimonialwrap .blocknavigation .slick-btn {
-moz-flex-shrink: 0;
-webkit-flex-shrink: 0;
-ms-flex: 0;
flex-shrink: 0;
order: 1;
}
.testimonialwrap .blocknavigation .enhancement {
object-fit: cover;
object-position: right center;
flex-basis: calc(100% - 132px);
order: 3;
max-width: calc(100% - 132px);
height: 145px;
margin-top: -4rem;
}
@media (width <= 767px) {
.testimonialwrap .blocknavigation .enhancement {
height: 10rem;
}
}
@keyframes swipe {
25% {
left: 100%;
}
26% {
left: -100%;
}
}
.outlinewrapper .supportingvisual.home-pot {
width: 26rem;
top: -26rem;
}
@media (width <= 1199px) {
.outlinewrapper .supportingvisual.home-pot {
top: -19rem;
}
}
@media (width <= 991px) {
.outlinewrapper .supportingvisual.home-pot {
display: none !important;
}
}
.article-outer-wrap {
padding: 150px 0 80px;
}
.article-outer-wrap .ico {
max-width: 25px;
margin: 0 5px -5px 0;
}
.article-outer-wrap h1 {
color: #6d5c40;
text-align: center;
padding: 0 0 20px;
font-family: Philosopher, sans-serif;
font-size: 44px;
font-weight: 700;
line-height: 1.2;
}
@media (width <= 1199px) {
.article-outer-wrap h1 {
font-size: 40px;
}
}
@media (width <= 991px) {
.article-outer-wrap h1 {
font-size: 36px;
}
}
@media (width <= 767px) {
.article-outer-wrap h1 {
font-size: 32px;
}
}
@media (width <= 480px) {
.article-outer-wrap h1 {
font-size: 28px;
}
}
.article-outer-wrap h2 {
color: #6d5c40;
text-align: left;
padding: 0 0 20px;
font-family: Philosopher, sans-serif;
font-size: 34px;
font-weight: 700;
line-height: 1.2;
}
@media (width <= 991px) {
.article-outer-wrap h2 {
font-size: 32px;
}
}
@media (width <= 767px) {
.article-outer-wrap h2 {
font-size: 26px;
}
}
@media (width <= 480px) {
.article-outer-wrap h2 {
font-size: 24px;
}
}
.article-outer-wrap h3 {
color: #6d5c40;
text-align: left;
padding: 0 0 20px;
font-family: Philosopher, sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 1.2;
}
@media (width <= 991px) {
.article-outer-wrap h3 {
font-size: 24px;
}
}
@media (width <= 767px) {
.article-outer-wrap h3 {
font-size: 22px;
}
}
@media (width <= 480px) {
.article-outer-wrap h3 {
font-size: 20px;
}
}
.article-outer-wrap p {
color: #6d5c40;
padding: 0 0 20px;
font-family: Poppins, sans-serif;
font-size: 18px;
line-height: 1.6;
}
@media (width <= 1199px) {
.article-outer-wrap p {
font-size: 16px;
}
}
.article-outer-wrap p strong {
color: #6d5c40;
font-weight: 700;
}
.article-outer-wrap p i {
color: #6d5c40;
font-style: italic;
}
.article-outer-wrap p a {
color: #bc6c25;
text-decoration: underline;
}
@media (width <= 767px) {
.article-outer-wrap p {
padding-bottom: 15px;
font-size: 14px;
line-height: 1.6;
}
}
.article-outer-wrap ul {
padding: 0 0 15px;
}
.article-outer-wrap ul li {
color: #6d5c40;
padding: 0 0 0 15px;
font-family: Poppins, sans-serif;
font-size: 18px;
list-style: none;
position: relative;
}
@media (width <= 1199px) {
.article-outer-wrap ul li {
font-size: 16px;
}
}
@media (width <= 767px) {
.article-outer-wrap ul li {
font-size: 14px;
line-height: 1.6;
}
}
.article-outer-wrap ul li + li {
margin-top: 5px;
}
.article-outer-wrap ul li:before {
content: "";
background-color: #6d5c40;
width: .8rem;
height: .8rem;
position: absolute;
top: 1rem;
left: 0;
transform: rotate(-45deg);
}
@media (width <= 767px) {
.article-outer-wrap ul li:before {
width: 6px;
height: 6px;
top: 9px;
}
}
.article-outer-wrap ol {
margin: 0 0 0 15px;
padding: 0 0 15px;
}
.article-outer-wrap ol li {
color: #6d5c40;
padding: 0 0 0 15px;
font-family: Poppins, sans-serif;
font-size: 18px;
list-style: number;
}
@media (width <= 1199px) {
.article-outer-wrap ol li {
font-size: 16px;
}
}
.article-outer-wrap ol li + li {
margin-top: 5px;
}
.article-outer-wrap .title-svg-wrap svg {
max-width: 300px;
margin: 0 auto;
padding: 0 0 50px;
display: block;
}
.article-outer-wrap .gap-head {
width: 100%;
height: 30px;
}
.sitemenu ul li .sub-menu {
padding: 10px;
}
.sitemenu ul li .sub-menu li {
font-size: 14px;
}
.sitemenu ul li .sub-menu li + li {
margin-top: 10px;
}
.sitemenu ul li .sub-menu li a {
padding: 6px 15px;
line-height: 1.6;
}
.introsection .drawingvisual {
width: 90%;
}
.philosophy {
background-image: url(//jjinteriordesigns.com/assets/images/temple-architecture-v1.png);
background-position: bottom;
background-repeat: no-repeat;
background-size: 136rem 32.2rem;
padding-bottom: 38rem !important;
}
@media (width <= 1199px) {
.philosophy {
background-size: 90rem 21.3rem;
padding-bottom: 25rem !important;
}
}
@media (width <= 991px) {
.philosophy {
padding-bottom: 25rem !important;
}
}
@media (width <= 767px) {
.philosophy {
background-image: url(//jjinteriordesigns.com/assets/images/temple-architecture-mobile-v1.png);
background-size: 50rem 20.7rem;
padding-bottom: 25rem !important;
}
}
@media (width <= 561px) {
.philosophy {
background-size: 100%;
padding-bottom: 22rem !important;
}
}
.tooltip-content {
color: #6d5c40;
pointer-events: none;
opacity: 0;
background-color: #e0dcd1;
border-radius: 10px;
width: 300px;
margin-top: 0;
padding: 15px;
font-size: 1.2rem;
line-height: 2.2rem;
position: absolute;
left: 20px;
}
.jjtimeline {
padding-bottom: 0 !important;
}
.jjtimeline .timeline .founder {
flex-basis: 33.3333%;
max-width: 33.3333%;
position: relative;
bottom: 0;
}
.jjtimeline .timeline .founder img {
display: block;
}
@media (width <= 991px) {
.jjtimeline .timeline .founder {
flex-basis: 50%;
max-width: 50%;
}
}
@media (width <= 767px) {
.jjtimeline .timeline .founder {
bottom: -3.2rem;
}
}
@media (width <= 561px) {
.jjtimeline .timeline .founder {
flex-basis: 100%;
max-width: 100%;
bottom: 0;
}
.jjtimeline .timeline .founder img {
width: 60%;
margin: 0 auto;
}
}
.jjtimeline .timeline .name.formobile {
background-color: #e0dcd180;
border: 1px solid #6d5c404d;
border-radius: 10px;
width: 80%;
margin: 0 auto;
padding: .5rem 1rem;
font-size: 1.6rem;
line-height: 2.6rem;
display: none;
}
@media (width <= 561px) {
.jjtimeline .timeline .name.formobile {
display: block;
}
}
.jjtimeline .timeline .name strong {
font-weight: 600;
}
@media (width <= 561px) {
.jjtimeline .timeline .name {
display: none;
}
}
.jjtimeline .timeline .sliderwrap {
flex-basis: 66.6667%;
max-width: 66.6667%;
}
.jjtimeline .timeline .sliderwrap .timelineslider .item .year {
font-size: 8rem;
line-height: 8rem;
}
@media (width <= 1199px) {
.jjtimeline .timeline .sliderwrap .timelineslider .item .year {
font-size: 6rem;
line-height: 7rem;
}
}
@media (width <= 991px) {
.jjtimeline .timeline .sliderwrap .timelineslider .item .year {
font-size: 7rem;
line-height: 8rem;
}
}
@media (width <= 767px) {
.jjtimeline .timeline .sliderwrap .timelineslider .item .year {
font-size: 5.4rem;
line-height: 6.4rem;
}
}
@media (width <= 561px) {
.jjtimeline .timeline .sliderwrap .timelineslider .item .year {
text-align: center;
}
}
.jjtimeline .timeline .sliderwrap .timelineslider .item .description {
padding-right: 2rem;
font-size: 1.6rem;
line-height: 2.8rem;
}
.jjtimeline .timeline .sliderwrap .timelineslider .item .description span {
margin-top: .5rem;
font-size: 1.4rem;
line-height: 2.4rem;
}
.jjtimeline .timeline .sliderwrap .timelineslider .item .description .tooltip-wrap {
position: relative;
}
.jjtimeline .timeline .sliderwrap .timelineslider .item .description .tooltip-wrap .icon {
cursor: pointer;
width: 1.5rem;
height: 1.5rem;
}
.jjtimeline .timeline .sliderwrap .timelineslider .item .description .tooltip-wrap .icon .path1 {
fill: #6d5c40;
}
.jjtimeline .timeline .sliderwrap .timelineslider .item .description .tooltip-wrap .icon .path2 {
fill: #bcb4a3;
}
@media (width <= 1199px) {
.jjtimeline .timeline .sliderwrap .timelineslider .item .description {
font-size: 1.6rem;
line-height: 2.8rem;
}
}
@media (width <= 991px) {
.jjtimeline .timeline .sliderwrap .timelineslider .item .description {
margin-top: .5rem;
font-size: 1.6rem;
line-height: 2.8rem;
}
}
@media (width <= 561px) {
.jjtimeline .timeline .sliderwrap .timelineslider .item .description {
text-align: center;
padding-right: 0;
}
}
@media (width <= 1199px) {
.jjtimeline .timeline .sliderwrap .timelineslider .item {
gap: 0;
}
}
.jjtimeline .timeline .sliderwrap .blocknavigation {
gap: 20px;
margin-top: 1rem;
}
.jjtimeline .timeline .sliderwrap .blocknavigation .slick-btn.prev {
order: 2;
}
.jjtimeline .timeline .sliderwrap .blocknavigation .slick-btn.next {
order: 3;
}
@media (width <= 991px) {
.jjtimeline .timeline .sliderwrap .blocknavigation {
gap: 10px;
}
}
@media (width <= 1199px) {
.jjtimeline .timeline .sliderwrap .intro {
font-size: 1.6rem;
line-height: 2.6rem;
}
}
@media (width <= 991px) {
.jjtimeline .timeline .sliderwrap .intro {
margin-top: 20px;
}
}
@media (width <= 561px) {
.jjtimeline .timeline .sliderwrap .intro {
display: none;
}
}
@media (width <= 991px) {
.jjtimeline .timeline .sliderwrap {
flex-basis: 50%;
max-width: 50%;
}
}
@media (width <= 561px) {
.jjtimeline .timeline .sliderwrap {
flex-basis: 100%;
max-width: 100%;
margin-top: 2rem;
}
}
@media (width <= 991px) {
.jjtimeline .timeline {
flex-basis: 100%;
align-items: center;
max-width: 100%;
}
}
@media (width <= 1199px) {
.jjtimeline {
padding-bottom: 3rem !important;
}
}
@media (width <= 991px) {
.jjtimeline .g60 {
gap: 30px;
}
}
@media (width <= 561px) {
.jjtimeline {
padding-bottom: 7rem !important;
}
}
.elevatespace .happyliving {
grid-template-rows: 20.22% 13.93% 13.31% 12.08% 29.59% 10.85%;
grid-template-columns: repeat(3, calc(33.3333% - 20px));
column-gap: 30px;
margin-top: 40px;
display: grid;
}
.elevatespace .happyliving .borderedbox .supportingvisual {
z-index: 0;
height: auto;
position: absolute;
}
.elevatespace .happyliving .borderedbox .supportingvisual.one {
top: -23rem;
}
@media (width <= 1199px) {
.elevatespace .happyliving .borderedbox .supportingvisual.one {
width: 90%;
top: -16rem;
left: 0;
}
}
@media (width <= 991px) {
.elevatespace .happyliving .borderedbox .supportingvisual.one {
top: -13rem;
}
}
.elevatespace .happyliving .borderedbox .supportingvisual.two {
top: -27rem;
}
@media (width <= 1199px) {
.elevatespace .happyliving .borderedbox .supportingvisual.two {
width: 80%;
top: -15rem;
left: 3rem;
}
}
@media (width <= 991px) {
.elevatespace .happyliving .borderedbox .supportingvisual.two {
top: -11.3rem;
}
}
.elevatespace .happyliving .item:first-child {
background-color: #bcb4a3;
grid-row: 2 / 6;
}
@media (width <= 767px) {
.elevatespace .happyliving .item:first-child {
display: none;
}
}
.elevatespace .happyliving .item:nth-child(2) {
background-color: #bcb4a3;
grid-area: 1 / 2 / 4 / 3;
}
@media (width <= 991px) {
.elevatespace .happyliving .item:nth-child(2) {
grid-area: 1 / 2 / 3 / 3;
}
}
@media (width <= 767px) {
.elevatespace .happyliving .item:nth-child(2) {
grid-area: 1 / 1 / 1 / 1;
}
}
.elevatespace .happyliving .item:nth-child(3) {
grid-area: 4 / 2 / 6 / 3;
align-items: end;
display: flex;
}
.elevatespace .happyliving .item:nth-child(3) p {
font-size: 2.4rem;
line-height: 3.4rem;
}
@media (width <= 1600px) {
.elevatespace .happyliving .item:nth-child(3) p {
font-size: 1.8rem;
line-height: 3rem;
}
}
@media (width <= 1199px) {
.elevatespace .happyliving .item:nth-child(3) p {
font-size: 1.6rem;
line-height: 2.8rem;
}
}
@media (width <= 767px) {
.elevatespace .happyliving .item:nth-child(3) {
grid-area: 2 / 1 / 2 / 1;
}
}
.elevatespace .happyliving .item:nth-child(4) {
background-color: #bcb4a3;
grid-area: 3 / 3 / 7 / 3;
}
@media (width <= 767px) {
.elevatespace .happyliving .item:nth-child(4) {
display: none;
}
.elevatespace .happyliving .item {
background-color: #0000 !important;
}
.elevatespace .happyliving {
grid-template-rows: auto auto;
grid-template-columns: 100%;
row-gap: 30px;
margin-top: 30px;
}
}
.elevatespace .sechighlights .item {
flex-basis: calc(32% - 15px);
}
.elevatespace .sechighlights .item .icon {
fill: #6d5c40;
width: 7rem;
height: 7rem;
}
@media (width <= 991px) {
.elevatespace .sechighlights .item .icon {
width: 5rem;
height: 5rem;
}
}
.elevatespace .sechighlights .item .subhead-pop {
margin: 2rem 0 1rem;
}
@media (width <= 767px) {
.elevatespace .sechighlights .item {
flex-basis: 100%;
}
}
@media (width <= 991px) {
.elevatespace .g60 {
gap: 30px;
}
}
.quotesection .icon {
fill: #6d5c40;
width: 9rem;
height: 6rem;
}
@media (width <= 1199px) {
.quotesection .icon {
width: 6rem;
height: 4.3rem;
}
}
.quotesection .quotetext {
font-size: 7.4rem;
line-height: 8.4rem;
}
@media (width <= 1199px) {
.quotesection .quotetext {
font-size: 5.4rem;
line-height: 6.4rem;
}
}
@media (width <= 991px) {
.quotesection .quotetext {
font-size: 4rem;
line-height: 5rem;
}
}
@media (width <= 767px) {
.quotesection .quotetext {
font-size: 3rem;
line-height: 4rem;
}
.quotesection .g20 {
gap: 10px;
}
}
.sustainability {
z-index: -1;
height: 63rem;
padding-top: 12rem;
position: relative;
}
.sustainability .bgvisual {
object-fit: cover;
object-position: bottom center;
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
}
.sustainability .cont {
margin: 0 auto;
font-size: 3rem;
line-height: 4rem;
}
@media (width <= 991px) {
.sustainability .cont {
font-size: 2.2rem;
line-height: 3rem;
}
}
@media (width <= 767px) {
.sustainability {
height: 50rem;
padding-top: 10rem;
}
}
@media (width <= 561px) {
.sustainability {
height: 60rem;
padding-top: 20%;
}
}
.awards .sliderwrap {
width: 100%;
position: relative;
}
.awards .sliderwrap .awardsslider {
width: 83%;
margin: 0 auto;
}
.awards .sliderwrap .awardsslider .slick-list {
border-radius: 30px;
}
@media (width <= 767px) {
.awards .sliderwrap .awardsslider .slick-list {
border-radius: 20px;
}
}
.awards .sliderwrap .awardsslider .slick-list .slick-slide div div {
display: flex !important;
}
.awards .sliderwrap .awardsslider .imgwrap {
overflow: hidden;
}
.awards .sliderwrap .awardsslider .imgwrap img {
display: block;
}
@media (width <= 767px) {
.awards .sliderwrap .awardsslider {
width: 100%;
}
}
.awards .sliderwrap .blocknavigation {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.awards .sliderwrap .blocknavigation .slick-dots {
order: 2;
display: none;
}
@media (width <= 767px) {
.awards .sliderwrap .blocknavigation .slick-dots {
display: flex;
}
}
.awards .sliderwrap .blocknavigation .prev {
order: 1;
}
.awards .sliderwrap .blocknavigation .next {
order: 3;
}
@media (width <= 767px) {
.awards .sliderwrap .blocknavigation {
justify-content: center;
gap: 20px;
margin-top: 15px;
position: relative;
top: auto;
transform: translateY(0);
}
}
.relatedprojects .itemwrap {
margin-top: 6rem;
}
.relatedprojects .itemwrap .item {
cursor: pointer;
flex-basis: calc(33.33% - 15px);
max-width: calc(33.33% - 15px);
}
.relatedprojects .itemwrap .item .imgwrap img {
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
transition: all .5s ease-in-out;
}
.relatedprojects .itemwrap .item.explore {
position: relative;
}
.relatedprojects .itemwrap .item.explore .cont {
background-color: #0000;
border-radius: 30px;
justify-content: center;
height: 100%;
margin-top: 0;
padding: 3rem;
}
@media (width <= 767px) {
.relatedprojects .itemwrap .item.explore .cont .subhead-pop {
font-size: 1.6rem;
line-height: 2.6rem;
}
}
@media (width <= 991px) {
.relatedprojects .itemwrap .item.explore .cont {
flex-direction: row;
justify-content: center;
padding: 1rem;
}
}
.relatedprojects .itemwrap .item.explore .arrow {
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
border: 2px solid #6d5c40;
border-radius: 100%;
width: 5.6rem;
height: 5.6rem;
transition: all .5s ease-in-out;
}
.relatedprojects .itemwrap .item.explore .arrow a {
position: absolute;
inset: 0;
}
.relatedprojects .itemwrap .item.explore .arrow .icon {
fill: #6d5c40;
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
width: 1.5rem;
height: 2.8rem;
margin: 0 auto;
transition: all .5s ease-in-out;
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
@media (width <= 767px) {
.relatedprojects .itemwrap .item.explore .arrow .icon {
width: .8rem;
height: 1.4rem;
}
.relatedprojects .itemwrap .item.explore .arrow {
width: 3rem;
height: 3rem;
}
.relatedprojects .itemwrap .item .cont:nth-child(2) {
display: none;
}
}
.relatedprojects .itemwrap .item:hover.explore .arrow {
background-color: #6d5c40;
}
.relatedprojects .itemwrap .item:hover.explore .arrow .icon {
fill: #fff;
}
.relatedprojects .itemwrap .item:hover .imgwrap img {
transform: scale(1.1);
}
@media (width <= 991px) {
.relatedprojects .itemwrap .item:first-child, .relatedprojects .itemwrap .item:nth-child(3) {
flex-basis: calc(50% - 40px);
max-width: calc(50% - 40px);
}
.relatedprojects .itemwrap .item:nth-child(2) {
outline: 0;
flex-basis: 100%;
order: 3;
max-width: 100%;
}
.relatedprojects .itemwrap .item:nth-child(2) .cont {
padding: 0;
}
.relatedprojects .itemwrap {
flex-wrap: wrap;
justify-content: space-between;
margin-top: 3rem;
}
}
.didyouknow .mandela {
fill: #e0dcd1;
opacity: .3;
width: 66rem;
height: 33rem;
position: absolute;
bottom: -10rem;
right: 0;
transform: translateX(50%);
}
@media (width <= 991px) {
.didyouknow .mandela {
display: none;
}
}
.didyouknow .cont {
width: 66.66%;
position: relative;
}
.didyouknow .cont .tag {
margin-bottom: 1.5rem;
}
.didyouknow .cont .sectionheader {
max-width: 100%;
margin-bottom: 2rem;
}
.didyouknow .cont p {
color: #6d5c40;
margin-top: 2rem;
}
.didyouknow .cont .link, .didyouknow .cont a {
color: #6d5c40;
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
text-decoration: underline;
transition: all .4s ease-in-out;
}
.didyouknow .cont .link + *, .didyouknow .cont a + * {
margin-top: 2rem;
}
.didyouknow .cont .link:hover, .didyouknow .cont a:hover {
color: #bc6c25;
}
@media (width <= 991px) {
.didyouknow .cont {
width: 100%;
}
}
@media (width <= 767px) {
.didyouknow {
padding-bottom: 5rem !important;
}
}
@media (width <= 1199px) {
.afterbanner {
padding-bottom: 0 !important;
}
}
.ajaxfilter {
flex-wrap: wrap;
gap: 20px;
margin: 5rem 0;
}
.ajaxfilter li {
color: #6d5c40;
cursor: pointer;
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
border: 1px solid #46462a;
border-radius: 30px;
padding: 1rem 3rem;
font-size: 2rem;
transition: all .5s ease-in-out;
}
.ajaxfilter li.active, .ajaxfilter li:hover {
color: #fff;
background-color: #6d5c40;
border-color: #6d5c40;
}
@media (width <= 1199px) {
.ajaxfilter li {
padding: .5rem 2.5rem;
font-size: 1.6rem;
}
}
@media (width <= 991px) {
.ajaxfilter {
gap: 10px;
}
}
@media (width <= 767px) {
.ajaxfilter {
margin: 4rem 0 3rem;
display: none;
}
}
@media (width <= 561px) {
.ajaxfilter {
margin: 3rem 0 2rem;
}
}
.projectgallery .grid {
gap: 30px;
}
.projectgallery .grid .sm {
width: calc(35% - 15px);
}
@media (width <= 991px) {
.projectgallery .grid .sm {
width: calc(50% - 15px);
}
}
@media (width <= 561px) {
.projectgallery .grid .sm {
width: 100%;
}
}
.projectgallery .grid .md {
width: calc(65% - 15px);
}
@media (width <= 991px) {
.projectgallery .grid .md {
width: calc(50% - 15px);
}
.projectgallery .grid .md.lgh {
width: 100%;
}
}
@media (width <= 561px) {
.projectgallery .grid .md {
width: 100%;
}
}
.projectgallery .grid .lg {
width: 100%;
}
.projectgallery .grid .smh {
height: 42rem;
}
@media (width <= 1199px) {
.projectgallery .grid .smh {
height: 27rem;
}
}
@media (width <= 991px) {
.projectgallery .grid .smh {
height: 22rem;
}
}
.projectgallery .grid .lgh {
height: 87rem;
}
@media (width <= 1199px) {
.projectgallery .grid .lgh {
height: 57rem;
}
}
@media (width <= 991px) {
.projectgallery .grid .lgh {
height: 40rem;
}
}
@media (width <= 561px) {
.projectgallery .grid .lgh {
height: 22rem;
}
}
.projectgallery .grid .item {
border-radius: 30px;
position: relative;
overflow: hidden;
}
.projectgallery .grid .item .imgwrap {
width: 100%;
height: 100%;
overflow: hidden;
}
.projectgallery .grid .item .imgwrap img {
object-fit: cover;
object-position: center center;
width: 100%;
height: 100%;
display: block;
}
.projectgallery .grid .item.loading {
-webkit-filter: blur(10px);
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
transition: all .35s cubic-bezier(.175, .885, .32, 1.275);
}
.projectgallery .grid .item:before {
pointer-events: none;
content: "";
opacity: 0;
background-color: #000;
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
}
.projectgallery .grid .item:after {
pointer-events: none;
content: url(//jjinteriordesigns.com/assets/images/magnifying-glass.svg);
opacity: 0;
width: 5rem;
height: 5rem;
margin: auto;
display: block;
position: absolute;
inset: 0;
}
.projectgallery .grid .item.gallerytestimonial .contwrap {
background-color: #e0dcd1;
height: 100%;
padding: 4rem;
}
.projectgallery .grid .item.gallerytestimonial .contwrap .starrating {
height: 2.3rem;
margin-bottom: 2rem;
}
.projectgallery .grid .item.gallerytestimonial .contwrap .authorwrap .authorimg {
width: 6rem;
height: 6rem;
}
.projectgallery .grid .item.gallerytestimonial .contwrap .authorwrap .authorimg img {
border-radius: 100%;
display: block;
}
.projectgallery .grid .item.gallerytestimonial:after, .projectgallery .grid .item.gallerytestimonial:before {
display: none;
}
@media (width <= 1199px) {
.projectgallery .grid .item.gallerytestimonial {
width: 100%;
height: auto;
}
.projectgallery .grid .item.gallerytestimonial .contwrap {
padding: 3rem;
}
}
.projectgallery .grid .item:hover:before {
opacity: .5;
}
.projectgallery .grid .item:hover:after {
opacity: 1;
}
@media (width <= 991px) {
.projectgallery .grid .item:first-child {
width: 100%;
height: 40rem;
}
}
@media (width <= 561px) {
.projectgallery .grid .item:first-child {
height: 22rem;
}
}
@media (width <= 1199px) {
.projectgallery .grid .item:nth-child(3) {
width: calc(50% - 15px);
height: 27rem;
}
}
@media (width <= 991px) {
.projectgallery .grid .item:nth-child(3) {
height: 22rem;
}
}
@media (width <= 561px) {
.projectgallery .grid .item:nth-child(3) {
width: 100%;
height: 22rem;
}
}
@media (width <= 1199px) {
.projectgallery .grid .item:nth-child(4) {
width: calc(50% - 15px);
}
}
@media (width <= 991px) {
.projectgallery .grid .item:nth-child(4) {
width: 100%;
height: 40rem;
}
}
@media (width <= 561px) {
.projectgallery .grid .item:nth-child(4) {
height: 22rem;
}
}
@media (width <= 991px) {
.projectgallery .grid .item {
border-radius: 20px;
}
.projectgallery .grid .grid.sm {
width: 100%;
}
.projectgallery .grid .grid.sm .item {
width: calc(50% - 15px);
height: 22rem;
}
.projectgallery .grid .grid.lgh {
height: auto;
}
}
@media (width <= 561px) {
.projectgallery .grid, .projectgallery .grid .grid {
gap: 10px;
}
.projectgallery .grid .grid.sm, .projectgallery .grid .grid.sm .item {
width: 100%;
}
}
.projectgallery .loadmore-wrap .loadmore {
cursor: pointer;
}
.projectgallery .loadmore-wrap .loadmore.disable {
opacity: .25;
pointer-events: none;
}
.contactcomponent {
background-image: url(//jjinteriordesigns.com/assets/images/connect-comp-bg.jpg);
background-position: 100% 0;
background-repeat: no-repeat;
background-size: cover;
}
.contactcomponent .cont {
flex-basis: 50%;
align-items: start;
max-width: 50%;
}
@media (width <= 991px) {
.contactcomponent .cont {
text-align: center;
flex-basis: 100%;
align-items: center;
max-width: 100%;
}
.contactcomponent {
background-image: url(//jjinteriordesigns.com/assets/images/connect-comp-bg-mobile.jpg);
background-position: 100% 100%;
padding-bottom: 25rem;
}
}
.servicewrapper .projecttopwrap {
padding-top: 0 !important;
}
@media (width <= 1199px) {
.servicewrapper .projecttopwrap .projectlistwrapper .projectlistwrap {
margin-top: 5rem;
}
.servicewrapper .projecttopwrap .projectlistwrapper .projectlistwrap.additionalpadding {
padding-bottom: 20rem;
}
}
@media (width <= 1023px) {
.servicewrapper .projecttopwrap .projectlistwrapper {
margin-bottom: 0;
}
}
@media (width <= 991px) {
.servicewrapper .projecttopwrap .projectlistwrapper .projectlistwrap.additionalpadding {
padding-bottom: 0;
}
.servicewrapper .projecttopwrap .projectlistwrapper .projectlistwrap.rightblock {
margin-top: 10rem;
}
}
@media (width <= 767px) {
.servicewrapper .projecttopwrap {
padding-bottom: 10rem;
}
}
@media (width <= 1199px) {
.servicewrapper {
padding-bottom: 0;
}
.servicewrapper .projectbottomwrap {
padding-bottom: 5rem;
}
}
.aboutservice .servicehighlight {
margin-top: 70px;
}
@media (width <= 991px) {
.aboutservice .servicehighlight {
justify-content: center;
gap: 30px;
margin-top: 3rem;
}
.aboutservice .servicehighlight .item {
flex-basis: calc(50% - 15px);
max-width: calc(50% - 15px);
}
}
@media (width <= 767px) {
.aboutservice .servicehighlight .item {
flex-basis: 100%;
gap: 5px;
max-width: 100%;
}
}
.blogslisting .blogslistingwrap {
margin: 6rem 0;
}
.blogslisting .blogslistingwrap .blogwrap {
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
padding: 5rem 0;
transition: all .4s ease-in-out;
position: relative;
}
.blogslisting .blogslistingwrap .blogwrap:first-child {
padding-top: 0;
}
.blogslisting .blogslistingwrap .blogwrap + .blogwrap {
border-top: 1px solid #46462a;
}
.blogslisting .blogslistingwrap .blogwrap + .blogwrap .flowershape {
display: flex;
}
.blogslisting .blogslistingwrap .blogwrap .imgwrap {
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
border-radius: 30px;
transition: all .35s cubic-bezier(.175, .885, .32, 1.275);
overflow: hidden;
}
.blogslisting .blogslistingwrap .blogwrap .imgwrap img {
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
transition: all .7s ease-in-out;
display: block;
}
@media (width <= 991px) {
.blogslisting .blogslistingwrap .blogwrap .imgwrap {
border-radius: 20px;
}
}
@media (width <= 767px) {
.blogslisting .blogslistingwrap .blogwrap .imgwrap {
border-radius: 10px;
}
}
.blogslisting .blogslistingwrap .blogwrap .contwrap .time {
flex-basis: calc(25% - 15px);
max-width: calc(25% - 15px);
}
.blogslisting .blogslistingwrap .blogwrap .contwrap .time .icon {
fill: #6d5c40;
width: 6.5rem;
height: 6.5rem;
}
@media (width <= 991px) {
.blogslisting .blogslistingwrap .blogwrap .contwrap .time .icon {
width: 3rem;
height: 3rem;
}
}
@media (width <= 767px) {
.blogslisting .blogslistingwrap .blogwrap .contwrap .time .icon {
width: 2rem;
height: 2rem;
}
}
@media (width <= 991px) {
.blogslisting .blogslistingwrap .blogwrap .contwrap .time p {
font-weight: 500;
}
.blogslisting .blogslistingwrap .blogwrap .contwrap .time p br {
display: none;
}
}
@media (width <= 767px) {
.blogslisting .blogslistingwrap .blogwrap .contwrap .time p {
font-size: 1.6rem;
line-height: 2.8rem;
}
}
@media (width <= 991px) {
.blogslisting .blogslistingwrap .blogwrap .contwrap .time {
flex-direction: row;
flex-basis: 100%;
justify-content: start;
gap: 10px;
max-width: 100%;
}
}
.blogslisting .blogslistingwrap .blogwrap .contwrap .cont {
flex-basis: calc(75% - 15px);
max-width: calc(75% - 15px);
}
.blogslisting .blogslistingwrap .blogwrap .contwrap .cont .sectiontitle {
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
transition: all .5s ease-in-out;
}
.blogslisting .blogslistingwrap .blogwrap .contwrap .cont .description {
margin-top: 1.5rem;
}
.blogslisting .blogslistingwrap .blogwrap .contwrap .cont .tags {
margin-top: 3rem;
}
.blogslisting .blogslistingwrap .blogwrap .contwrap .cont .tags li {
padding-right: 1rem;
line-height: 2.4rem;
position: relative;
}
.blogslisting .blogslistingwrap .blogwrap .contwrap .cont .tags li + li {
padding-left: 1rem;
}
.blogslisting .blogslistingwrap .blogwrap .contwrap .cont .tags li + li:before {
content: "/";
font-family: "inherit";
font-size: 2.5rem;
line-height: 2.5rem;
position: absolute;
top: 0;
left: -.5rem;
}
@media (width <= 767px) {
.blogslisting .blogslistingwrap .blogwrap .contwrap .cont .tags li + li:before {
font-size: 1.8rem;
line-height: 2.8rem;
top: -.2rem;
left: -.2rem;
}
.blogslisting .blogslistingwrap .blogwrap .contwrap .cont .tags li {
font-size: 1.4rem;
line-height: 2.4rem;
}
}
@media (width <= 991px) {
.blogslisting .blogslistingwrap .blogwrap .contwrap .cont .tags {
margin-top: 2rem;
}
.blogslisting .blogslistingwrap .blogwrap .contwrap .cont {
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: 100%;
-ms-flex-direction: 100%;
flex-direction: 100%;
max-width: 100%;
}
.blogslisting .blogslistingwrap .blogwrap .contwrap {
flex-direction: column;
}
.blogslisting .blogslistingwrap .blogwrap .contwrap.g30 {
gap: 20px;
}
}
@media (width <= 767px) {
.blogslisting .blogslistingwrap .blogwrap .contwrap.g30 {
gap: 5px;
}
}
.blogslisting .blogslistingwrap .blogwrap .flowershape {
width: 100%;
display: none;
position: absolute;
top: 0;
transform: translateY(-50%);
}
.blogslisting .blogslistingwrap .blogwrap .flowershape .left, .blogslisting .blogslistingwrap .blogwrap .flowershape .right {
fill: #46462a;
width: 1.6rem;
height: 1.6rem;
}
.blogslisting .blogslistingwrap .blogwrap:hover .imgwrap img {
transform: scale(1.1);
}
.blogslisting .blogslistingwrap .blogwrap:hover .contwrap .cont .sectiontitle {
color: #46462a;
}
.blogdetail {
padding-top: 23.6rem;
}
.blogdetail .blogdetailwrap {
flex-wrap: wrap;
}
.blogdetail .blogdetailwrap .imgwrap {
border-radius: 30px;
flex-basis: 100%;
max-width: 100%;
overflow: hidden;
}
.blogdetail .blogdetailwrap .imgwrap img {
display: block;
}
@media (width <= 991px) {
.blogdetail .blogdetailwrap .imgwrap {
border-radius: 20px;
}
}
@media (width <= 767px) {
.blogdetail .blogdetailwrap .imgwrap {
border-radius: 15px;
}
}
.blogdetail .blogdetailwrap .socialicons {
flex-basis: 100%;
max-width: 100%;
}
.blogdetail .blogdetailwrap .socialicons li a .icon {
fill: #6d5c40;
}
@media (width <= 767px) {
.blogdetail .blogdetailwrap .socialicons li a .icon {
width: 2.5rem;
height: 2.5rem;
}
}
@media (width <= 991px) {
.blogdetail .blogdetailwrap .socialicons {
border-right: 2px solid #6d5c40;
flex-basis: auto;
max-width: 100%;
padding-right: 3rem;
}
}
@media (width <= 767px) {
.blogdetail .blogdetailwrap .socialicons {
border-right: 0;
gap: 10px;
padding-right: 2rem;
}
}
.blogdetail .blogdetailwrap .contentarea {
flex-basis: calc(66.6666% - 15px);
max-width: calc(66.6666% - 15px);
}
@media (width <= 991px) {
.blogdetail .blogdetailwrap .contentarea {
flex-basis: 100%;
max-width: 100%;
}
}
.blogdetail .blogdetailwrap .sidebar {
flex-basis: calc(33.3333% - 15px);
max-width: calc(33.3333% - 15px);
}
.blogdetail .blogdetailwrap .sidebar .contwrap {
position: sticky;
top: 1rem;
}
.blogdetail .blogdetailwrap .sidebar .contwrap .time {
border: 1px solid #6d5c40;
border-radius: 30px;
width: 100%;
padding: 2rem;
}
.blogdetail .blogdetailwrap .sidebar .contwrap .time .icon {
fill: #6d5c40;
width: 5rem;
height: 5rem;
}
@media (width <= 991px) {
.blogdetail .blogdetailwrap .sidebar .contwrap .time .icon {
width: 3rem;
height: 3rem;
}
}
@media (width <= 767px) {
.blogdetail .blogdetailwrap .sidebar .contwrap .time .icon {
width: 2.5rem;
height: 2.5rem;
}
}
@media (width <= 1199px) {
.blogdetail .blogdetailwrap .sidebar .contwrap .time p {
font-size: 1.8rem;
line-height: 2.8rem;
}
}
@media (width <= 991px) {
.blogdetail .blogdetailwrap .sidebar .contwrap .time p br {
display: none;
}
}
@media (width <= 767px) {
.blogdetail .blogdetailwrap .sidebar .contwrap .time p {
font-size: 1.6rem;
line-height: 2.8rem;
}
}
@media (width <= 1199px) {
.blogdetail .blogdetailwrap .sidebar .contwrap .time {
border-radius: 20px;
padding: 10px;
}
}
@media (width <= 991px) {
.blogdetail .blogdetailwrap .sidebar .contwrap .time {
border: 0;
padding: 0;
}
}
@media (width <= 767px) {
.blogdetail .blogdetailwrap .sidebar .contwrap .time {
gap: 10px;
}
}
@media (width <= 991px) {
.blogdetail .blogdetailwrap .sidebar .contwrap .item.borderedbox {
display: none;
}
.blogdetail .blogdetailwrap .sidebar {
flex-basis: auto;
max-width: 100%;
}
}
.blogdetail .blogdetailwrap .sustainability {
border-radius: 20px;
display: none;
overflow: hidden;
}
@media (width <= 991px) {
.blogdetail .blogdetailwrap .sustainability {
order: 5;
display: flex;
}
}
@media (width <= 767px) {
.blogdetail .blogdetailwrap .sustainability {
height: 35rem;
padding-top: 5rem;
}
}
@media (width <= 561px) {
.blogdetail .blogdetailwrap .sustainability {
padding-top: 3rem;
}
}
@media (width <= 767px) {
.blogdetail .blogdetailwrap {
justify-content: space-between;
}
}
@media (width <= 1199px) {
.blogdetail {
padding-top: 20rem;
}
}
@media (width <= 991px) {
.blogdetail {
padding-top: 15rem;
}
}
.project-timeline {
width: calc(100% - 200px);
margin: 100px auto 0;
position: relative;
}
@media (width <= 767px) {
.project-timeline {
width: 100%;
margin-top: 3rem;
}
}
.project-timeline div.timeline-stages {
grid-column-gap: 14rem;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
grid-template-rows: auto 3.3rem auto;
grid-template-columns: repeat(auto-fill, 140px);
grid-auto-columns: 140px;
grid-auto-flow: column;
scroll-padding: 1rem;
display: grid;
overflow: auto;
}
@media (width <= 767px) {
.project-timeline div.timeline-stages {
flex-direction: row;
gap: 30px;
display: flex;
}
}
.project-timeline div.timeline-stages > * {
scroll-snap-align: start;
}
.project-timeline div.timeline-stages::-webkit-scrollbar {
display: none;
}
.project-timeline div.timeline-stages .stage {
text-align: center;
flex-direction: column;
align-items: center;
padding: 0 30px;
display: flex;
position: relative;
}
.project-timeline div.timeline-stages .stage .stage-title {
color: #fff;
background-color: #bc6c25;
border-radius: 1.5rem;
padding: .25rem 2.5rem;
font-weight: 600;
display: inline-block;
}
.project-timeline div.timeline-stages .stage .stage-title:after {
content: "";
z-index: -1;
width: .1rem;
height: 7.2rem;
margin: auto;
position: absolute;
}
.project-timeline div.timeline-stages .stage .stage-title:before {
content: "";
z-index: -1;
border-radius: 100%;
width: .6rem;
height: .6rem;
margin: auto;
position: absolute;
}
.project-timeline div.timeline-stages .stage .stage-pattern {
position: absolute;
right: 40px;
}
.project-timeline div.timeline-stages .stage:nth-child(odd) {
flex-direction: column-reverse;
}
@media (width <= 767px) {
.project-timeline div.timeline-stages .stage:nth-child(odd) {
flex-direction: column;
}
}
.project-timeline div.timeline-stages .stage:nth-child(odd) .stage-title {
background-color: #bc6c25;
margin-top: 7.2rem;
}
.project-timeline div.timeline-stages .stage:nth-child(odd) .stage-title:after {
top: calc(50% + var(--spacer) / 2 + 1.65rem);
background-color: #bc6c25;
bottom: 0;
left: 0;
right: 0;
}
.project-timeline div.timeline-stages .stage:nth-child(odd) .stage-title:before {
background-color: #bc6c25;
bottom: calc(8.5rem - 1px);
left: 0;
right: 0;
}
@media (width <= 767px) {
.project-timeline div.timeline-stages .stage:nth-child(odd) .stage-title {
margin-top: 0;
margin-bottom: 2rem;
}
.project-timeline div.timeline-stages .stage:nth-child(odd) .stage-title:after, .project-timeline div.timeline-stages .stage:nth-child(odd) .stage-title:before {
display: none;
}
}
.project-timeline div.timeline-stages .stage:nth-child(odd) .stage-pattern {
bottom: 11px;
}
@media (width <= 767px) {
.project-timeline div.timeline-stages .stage:nth-child(odd) .stage-pattern {
display: none;
}
}
.project-timeline div.timeline-stages .stage:nth-child(2n) .stage-title {
background-color: #6d5c40;
margin-bottom: 7.2rem;
}
.project-timeline div.timeline-stages .stage:nth-child(2n) .stage-title:after {
background-color: #6d5c40;
top: 1.65rem;
left: 0;
right: 0;
}
.project-timeline div.timeline-stages .stage:nth-child(2n) .stage-title:before {
background-color: #6d5c40;
top: calc(8.5rem - 1px);
left: 0;
right: 0;
}
@media (width <= 767px) {
.project-timeline div.timeline-stages .stage:nth-child(2n) .stage-title {
margin-top: 0;
margin-bottom: 2rem;
}
.project-timeline div.timeline-stages .stage:nth-child(2n) .stage-title:after {
display: none;
top: 1.65rem;
bottom: auto;
}
.project-timeline div.timeline-stages .stage:nth-child(2n) .stage-title:before {
display: none;
top: calc(8.5rem - 1px);
}
}
.project-timeline div.timeline-stages .stage:nth-child(2n) .stage-pattern {
display: none;
top: 12px;
}
.project-timeline div.timeline-stages .stage:nth-last-child(2) .stage-pattern {
display: none;
}
.project-timeline div.timeline-stages .stage:first-child {
grid-area: 1 / 1 / 3 / 3;
}
.project-timeline div.timeline-stages .stage:nth-child(2) {
grid-area: 2 / 2 / 4 / 4;
}
.project-timeline div.timeline-stages .stage:nth-child(3) {
grid-area: 1 / 3 / 3 / 5;
}
.project-timeline div.timeline-stages .stage:nth-child(4) {
grid-area: 2 / 4 / 4 / 6;
}
.project-timeline div.timeline-stages .stage:nth-child(5) {
grid-area: 1 / 5 / 3 / 7;
}
.project-timeline div.timeline-stages .stage:nth-child(6) {
grid-area: 2 / 6 / 4 / 8;
}
.project-timeline div.timeline-stages .stage:nth-child(7) {
grid-area: 1 / 7 / 3 / 9;
}
.project-timeline div.timeline-stages .stage:nth-child(8) {
grid-area: 2 / 8 / 4 / 10;
}
.project-timeline div.timeline-stages .stage:nth-child(9) {
grid-area: 1 / 9 / 3 / 11;
}
@media (width <= 767px) {
.project-timeline div.timeline-stages .stage {
flex-basis: 100%;
min-width: 100%;
}
}
.project-timeline .timeline-divider {
z-index: -1;
background-color: #6d5c40;
grid-area: 3 / 1 / 3 / 11;
height: .2rem;
margin-top: -17px;
position: relative;
}
.project-timeline .timeline-divider:before, .project-timeline .timeline-divider:after {
content: none;
z-index: -1;
background-color: #6d5c40;
border-radius: 100%;
width: .8rem;
height: .8rem;
margin: auto;
position: absolute;
top: 0;
transform: translateY(calc(-25% - .1rem));
}
.project-timeline .timeline-divider:before {
left: 0;
}
.project-timeline .timeline-divider:after {
right: 0;
}
@media (width <= 767px) {
.project-timeline .timeline-divider {
display: none;
}
}
.project-timeline .scroll-nav {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.project-timeline .scroll-nav .arrow-btn {
all: unset;
cursor: pointer;
border: 2px solid #6d5c40;
border-radius: 100%;
width: 56px;
height: 56px;
display: block;
}
.project-timeline .scroll-nav .arrow-btn .icon {
fill: #6d5c40;
width: 15px;
height: 28px;
margin: 0 auto;
display: block;
}
@media (width <= 767px) {
.project-timeline .scroll-nav .arrow-btn .icon {
width: 10px;
height: 20px;
}
}
.project-timeline .scroll-nav .arrow-btn:hover {
background-color: #bc6c25;
border-color: #bc6c25;
}
.project-timeline .scroll-nav .arrow-btn:hover .icon {
fill: #fff;
}
.project-timeline .scroll-nav .arrow-btn.prev {
margin-left: -80px;
}
@media (width <= 767px) {
.project-timeline .scroll-nav .arrow-btn.prev {
margin-left: 0;
}
}
.project-timeline .scroll-nav .arrow-btn.next {
margin-right: -80px;
}
@media (width <= 767px) {
.project-timeline .scroll-nav .arrow-btn.next {
margin-right: 0;
}
.project-timeline .scroll-nav {
justify-content: center;
gap: 20px;
margin-top: 10px;
position: relative;
top: auto;
transform: translateY(0);
}
}
.project-timeline:after, .project-timeline:before {
content: "";
pointer-events: none;
background-image: url(//jjinteriordesigns.com/assets/images/project-timeline-shadow.png);
background-repeat: no-repeat;
width: 30px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
}
.project-timeline:before {
background-position: 0;
left: 0;
transform: scaleX(-1);
}
.project-timeline:after {
background-position: 100%;
right: 0;
}
@media (width <= 767px) {
.project-timeline:after, .project-timeline:before {
content: none;
}
}
.project-timeline.right-end:after, .project-timeline.left-end:before {
content: none;
}
.project-timeline.right-end .timeline-divider:after {
content: "";
}
.project-timeline.right-end .arrow-btn.next {
opacity: .25;
pointer-events: none;
}
.project-timeline.left-end .timeline-divider:before {
content: "";
}
.project-timeline.left-end .arrow-btn.prev {
opacity: .25;
pointer-events: none;
}
@media (width <= 1199px) {
.project-timeline {
margin: 50px auto 0;
}
}
@media (width <= 767px) {
.project-timeline {
margin: 30px auto 0;
}
}
.tippy-box[data-theme~="custom-theme"] {
color: #fff;
background-color: #333;
border-radius: 4px;
padding: 8px;
font-size: 14px;
}
.pricingLuxuriousSolutions {
padding-top: 0 !important;
}
.pricingLuxuriousSolutions .container .solutionsContent {
flex-wrap: wrap;
row-gap: 100px;
}
.pricingLuxuriousSolutions .container .solutionsContent .item {
flex-basis: calc(33.33% - 2rem);
max-width: calc(33.33% - 2rem);
}
.pricingLuxuriousSolutions .container .solutionsContent .item .title span {
font-size: 2.2rem;
line-height: 3.2rem;
display: block;
}
@media (width <= 991px) {
.pricingLuxuriousSolutions .container .solutionsContent .item {
flex-basis: calc(50% - 2rem);
max-width: calc(50% - 2rem);
}
}
@media (width <= 767px) {
.pricingLuxuriousSolutions .container .solutionsContent .item {
flex-basis: 100%;
max-width: 100%;
}
}
@media (width <= 991px) {
.pricingLuxuriousSolutions .container .solutionsContent {
justify-content: center;
}
}
@media (width <= 767px) {
.pricingLuxuriousSolutions .container .solutionsContent {
gap: 70px;
}
}
@media (width <= 1199px) {
.pricingLuxuriousSolutions .container .g100 {
gap: 60px;
}
}
.pricingsteps {
background-image: url(//jjinteriordesigns.com/assets/images/temple-architecture-primary-v1.png);
background-position: bottom;
background-repeat: no-repeat;
background-size: 120rem 29.33rem;
overflow: hidden;
padding-bottom: 33.25rem !important;
}
.pricingsteps .pricingstepsContent .item {
background-color: #e0dcd1;
border-radius: 3rem;
flex-basis: calc(33.33% - 2rem);
max-width: calc(33.33% - 2rem);
padding: 17rem 3rem 7.5rem;
position: relative;
}
@media (width <= 1199px) {
.pricingsteps .pricingstepsContent .item {
flex-basis: calc(50% - 2rem);
max-width: calc(50% - 2rem);
}
}
@media (width <= 991px) {
.pricingsteps .pricingstepsContent .item {
padding: 11rem 3rem 3.5rem;
}
}
@media (width <= 767px) {
.pricingsteps .pricingstepsContent .item {
border-radius: 2rem;
flex-basis: 100%;
max-width: 100%;
padding: 2rem;
}
}
.pricingsteps .pricingstepsContent .item .number {
color: #bcb4a3;
font-size: 15rem;
font-weight: bold;
line-height: 15rem;
position: absolute;
top: -2.7rem;
right: -.8rem;
}
@media (width <= 991px) {
.pricingsteps .pricingstepsContent .item .number {
font-size: 12rem;
line-height: 12rem;
}
}
@media (width <= 767px) {
.pricingsteps .pricingstepsContent .item .number {
font-size: 4rem;
line-height: 4rem;
position: relative;
top: auto;
right: auto;
}
}
.pricingsteps .pricingstepsContent .item.survey {
color: #fff;
outline-offset: 0;
background-color: #0000;
background-image: url(//jjinteriordesigns.com/assets/images/pricing-survey-block-bg.jpg);
background-position: center;
background-size: cover;
margin: 0;
padding: 3rem 3.5rem;
}
.pricingsteps .pricingstepsContent .item.survey .survey-content {
isolation: isolate;
border-radius: 2.8rem;
padding: 3.5rem;
position: relative;
overflow: hidden;
}
.pricingsteps .pricingstepsContent .item.survey .survey-content .pattern {
opacity: .4;
z-index: -1;
width: calc(100% - 16.6rem);
margin: auto;
position: absolute;
bottom: -1.566rem;
left: 0;
right: 0;
}
@media (width <= 991px) {
.pricingsteps .pricingstepsContent .item.survey .survey-content {
border-radius: 2rem;
padding: 2rem;
}
}
@media (width <= 767px) {
.pricingsteps .pricingstepsContent .item.survey .survey-content {
border-radius: 1rem;
}
}
.pricingsteps .pricingstepsContent .item.survey .borderpattern {
fill: #fff;
width: 162px;
}
.pricingsteps .pricingstepsContent .item.survey .borderpattern.onlybottom {
bottom: -37px;
}
@media (width <= 991px) {
.pricingsteps .pricingstepsContent .item.survey {
padding: 2rem;
}
}
@media (width <= 767px) {
.pricingsteps {
background-image: url(//jjinteriordesigns.com/assets/images/temple-architecture-primary-mobile-v1.png);
background-size: 50rem 20.7rem;
padding-bottom: 25rem !important;
}
}
.drawingitem {
fill: #6d5c40;
height: 37rem;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, calc(100% + 4.2rem));
}
.faq .faq_accordion {
counter-reset: faq-counter;
margin-top: 40px;
}
.faq .faq_accordion li {
counter-increment: faq-counter;
color: #6d5c40;
cursor: pointer;
border-bottom: 1px solid #6d5c40;
position: relative;
}
.faq .faq_accordion li:before {
content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDkiIHZpZXdCb3g9IjAgMCA0OCA0OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMjQiIGN5PSIyNC41NTk2IiByPSIyNCIgdHJhbnNmb3JtPSJyb3RhdGUoLTE4MCAyNCAyNC41NTk2KSIgZmlsbD0iI0JDQjRBMyIvPgo8cGF0aCBkPSJNMTMuNTg0NiAyMS4zNjA4TDM0LjQxOCAyMS4zNjA4TDI0LjAwMTMgMzEuNzU4M0wxMy41ODQ2IDIxLjM2MDhaIiBmaWxsPSIjRTBEQ0QxIi8+Cjwvc3ZnPgo=");
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
font-size: 2rem;
font-weight: bold;
transition: all .35s cubic-bezier(.175, .885, .32, 1.275);
display: block;
position: absolute;
top: 20px;
right: 0;
}
.faq .faq_accordion li .contentWrap {
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
max-width: 80%;
padding: 30px 0;
transition: all .35s cubic-bezier(.175, .885, .32, 1.275);
}
.faq .faq_accordion li .contentWrap .title {
padding-left: 50px;
font-size: 2rem;
font-weight: 600;
line-height: 3rem;
position: relative;
}
.faq .faq_accordion li .contentWrap .title:before {
content: counter(faq-counter, decimal-leading-zero);
font-weight: 400;
position: absolute;
top: 0;
left: 0;
}
@media (width <= 767px) {
.faq .faq_accordion li .contentWrap .title {
font-size: 1.6rem;
line-height: 2.6rem;
}
}
.faq .faq_accordion li .contentWrap .faq_content {
padding-left: 50px;
display: none;
position: relative;
}
.faq .faq_accordion li .contentWrap:hover {
cursor: pointer;
}
.faq .faq_accordion li.opened:before {
content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDkiIHZpZXdCb3g9IjAgMCA0OCA0OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMjQiIGN5PSIyNC41NTk2IiByPSIyNCIgZmlsbD0iIzZENUM0MCIvPgo8cGF0aCBkPSJNMTMuNTg0NiAyNy4zMTE1TDM0LjQxOCAyNy4zMTE1TDI0LjAwMTMgMTcuODA2OUwxMy41ODQ2IDI3LjMxMTVaIiBmaWxsPSIjRTBEQ0QxIi8+Cjwvc3ZnPgo=");
font-size: 2.4rem;
}
.faq .faq_accordion li:last-child {
border-bottom: none;
}
.error .error-wrap {
padding: 15rem 0;
}
@media (width <= 991px) {
.error .error-wrap {
flex-direction: column;
}
.error .error-wrap .chair img {
width: 70%;
margin: 0 auto;
display: block;
}
}
.error .cont .title {
font-size: 20rem;
line-height: 20rem;
}
@media (width <= 991px) {
.error .cont .title {
font-size: 15rem;
line-height: 15rem;
}
}
@media (width <= 767px) {
.error .cont .title {
font-size: 10rem;
line-height: 10rem;
}
}
.contactus {
padding-top: 23.6rem;
}
.contactus .contactform {
margin-top: 10rem;
}
.contactus .contactform .selecttype {
margin-bottom: 5rem;
}
.contactus .contactform .selecttype .title {
font-size: 2.4rem;
line-height: 3.4rem;
}
@media (width <= 991px) {
.contactus .contactform .selecttype .title {
font-size: 2rem;
line-height: 3rem;
}
}
.contactus .contactform .selecttype .optionswrap .option {
cursor: pointer;
padding-left: 3.5rem;
position: relative;
}
.contactus .contactform .selecttype .optionswrap .option .radiobutton {
cursor: pointer;
opacity: 0;
position: absolute;
}
.contactus .contactform .selecttype .optionswrap .option .radiobutton:checked + .checkmark:after, .contactus .contactform .selecttype .optionswrap .option .radiobutton:hover + .checkmark:after {
transform: translateX(-50%)translateY(-50%)scale(1);
}
.contactus .contactform .selecttype .optionswrap .option .checkmark {
border: 2px solid #6d5c40;
border-radius: 100%;
width: 2.5rem;
height: 2.5rem;
display: block;
position: absolute;
left: 0;
}
.contactus .contactform .selecttype .optionswrap .option .checkmark:after {
content: "";
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
background-color: #6d5c40;
border-radius: 100%;
width: 1.5rem;
height: 1.5rem;
transition: all .4s ease-in-out;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%)translateY(-50%)scale(0);
}
@media (width <= 991px) {
.contactus .contactform .selecttype .optionswrap .option {
font-size: 2rem;
line-height: 3rem;
}
}
@media (width <= 767px) {
.contactus .contactform .inputholderwrap.g30 {
gap: 30px;
}
}
.contactus .contactform .inputholderwrap .inputHolder.col4 {
flex-basis: calc(33.3333% - 20px);
max-width: calc(33.3333% - 20px);
}
@media (width <= 991px) {
.contactus .contactform .inputholderwrap .inputHolder.col4 {
flex-basis: calc(50% - 15px);
max-width: calc(50% - 15px);
}
}
@media (width <= 767px) {
.contactus .contactform .inputholderwrap .inputHolder.col4 {
flex-basis: 100%;
max-width: 100%;
}
}
.contactus .contactform .inputholderwrap .inputHolder.col6 {
flex-basis: calc(50% - 20px);
max-width: calc(50% - 20px);
}
@media (width <= 991px) {
.contactus .contactform .inputholderwrap .inputHolder.col6 {
flex-basis: 100%;
max-width: 100%;
}
}
.contactus .contactform .inputholderwrap .inputHolder textarea::placeholder {
color: #6d5c40;
}
.contactus .contactform .inputholderwrap .inputHolder .info {
padding: 0 0 5px 15px;
font-size: 1.4rem;
line-height: 2.4rem;
}
@media (width <= 1599px) {
.contactus .contactform .inputholderwrap .inputHolder .info {
height: 6rem;
}
}
@media (width <= 991px) {
.contactus .contactform .inputholderwrap .inputHolder .info {
height: auto;
}
}
.contactus .contactform .inputholderwrap .inputHolder.btnwrapper {
text-align: center;
width: 100%;
}
@media (width <= 1199px) {
.contactus .contactform {
margin-top: 5rem;
}
}
@media (width <= 767px) {
.contactus .contactform {
margin-top: 4rem;
}
}
@media (width <= 1199px) {
.contactus {
padding-top: 20rem;
}
}
@media (width <= 991px) {
.contactus {
padding-top: 15rem;
}
}
.map {
width: 80%;
margin: 0 auto;
}
.map .imgwrap {
overflow: hidden;
}
.map .imgwrap img {
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
width: 100%;
transition: all .5s ease-in-out;
display: block;
}
.map a:hover img {
transform-origin: bottom;
transform: scale(1.02);
}
@media (width <= 1920px) {
.map {
width: 100%;
}
.map .imgwrap {
height: 50rem;
position: relative;
}
.map .imgwrap img {
object-fit: cover;
object-position: top center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
}
@media (width <= 767px) {
.map .imgwrap {
height: 45rem;
}
}
.wpcf7.thanks-wrap {
display: none;
}
.videowrap.videobanner .videoblock {
background-color: #fff;
border-radius: 2rem;
display: flex;
}
.videowrap.videobanner .videoblock .videowraper {
width: 66.6666%;
margin: 0;
}
.videowrap.videobanner .videoblock .videowraper:before, .videowrap.videobanner .videoblock .videowraper:after {
display: none;
}
.videowrap.videobanner .videoblock .videowraper .videothumbnail img {
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
transition: all .5s ease-in-out;
}
.videowrap.videobanner .videoblock .videowraper:hover .videothumbnail img {
transform: scale(1.05);
}
@media (width <= 1199px) {
.videowrap.videobanner .videoblock .videowraper {
width: 100%;
}
}
.videowrap.videobanner .videoblock .videodetail {
flex-direction: column;
justify-content: center;
gap: 20px;
width: 33.3333%;
padding: 30px;
display: flex;
}
.videowrap.videobanner .videoblock .videodetail .projectdetail {
flex-direction: column;
gap: 1rem;
display: flex;
}
.videowrap.videobanner .videoblock .videodetail .projectdetail li {
padding-left: 1.8rem;
font-weight: 500;
position: relative;
}
.videowrap.videobanner .videoblock .videodetail .projectdetail li span {
font-weight: 300;
display: block;
}
.videowrap.videobanner .videoblock .videodetail .projectdetail li:before {
content: "";
background-color: #6d5c40;
width: .8rem;
height: .8rem;
position: absolute;
top: 1rem;
left: 0;
transform: rotate(-45deg);
}
@media (width <= 1199px) {
.videowrap.videobanner .videoblock .videodetail .projectdetail {
flex-direction: row;
justify-content: space-between;
gap: 3rem;
}
.videowrap.videobanner .videoblock .videodetail .projectdetail li {
flex-basis: calc(33.3333% - 15px);
font-size: 1.4rem;
line-height: 2.4rem;
}
}
@media (width <= 767px) {
.videowrap.videobanner .videoblock .videodetail .projectdetail {
flex-direction: column;
gap: 1rem;
}
}
@media (width <= 1599px) {
.videowrap.videobanner .videoblock .videodetail .projecttitle {
font-size: 3.6rem;
line-height: 4.6rem;
}
}
@media (width <= 1199px) {
.videowrap.videobanner .videoblock .videodetail .projecttitle {
font-size: 3.25rem;
line-height: 4.45rem;
}
}
@media (width <= 767px) {
.videowrap.videobanner .videoblock .videodetail .projecttitle {
font-size: 2.6rem;
line-height: 3.4rem;
}
}
@media (width <= 1199px) {
.videowrap.videobanner .videoblock .videodetail {
width: 100%;
}
}
@media (width <= 767px) {
.videowrap.videobanner .videoblock .videodetail {
gap: 1.5rem;
padding: 20px;
}
}
@media (width <= 1199px) {
.videowrap.videobanner .videoblock {
flex-direction: column;
}
}
.ctalink {
font-weight: 500;
text-decoration: underline;
}
.ctalink:hover {
color: #bc6c25;
}
.videolisting .videoblock {
flex-wrap: wrap;
gap: 100px 30px;
display: flex;
}
@media (width <= 991px) {
.videolisting .videoblock {
row-gap: 50px;
}
}
.videolisting .item {
flex-direction: column;
flex-basis: calc(33.3333% - 20px);
gap: 10px;
display: flex;
position: relative;
}
.videolisting .item.borderedbox {
flex-basis: calc(33.3333% - 60px);
}
.videolisting .item.borderedbox .cont.withbgimg {
height: 100%;
padding: 20px;
}
@media (width <= 991px) {
.videolisting .item.borderedbox .cont {
border-radius: 15px;
}
}
.videolisting .item.borderedbox .supportingvisual {
z-index: -1;
width: 140px;
height: 158px;
position: absolute;
top: -110px;
right: 20px;
}
@media (width <= 991px) {
.videolisting .item.borderedbox .supportingvisual {
display: none;
}
.videolisting .item.borderedbox {
flex-basis: calc(50% - 40px);
}
}
@media (width <= 561px) {
.videolisting .item.borderedbox {
flex-basis: 100%;
}
}
@media (width <= 991px) {
.videolisting .item {
flex-basis: calc(50% - 20px);
}
}
@media (width <= 561px) {
.videolisting .item {
flex-basis: 100%;
}
}
.popupvideo {
flex-direction: column;
gap: 10px;
display: flex;
position: relative;
overflow: hidden;
}
.popupvideo figure {
border-radius: 2rem;
position: relative;
overflow: hidden;
}
.popupvideo figure img {
display: block;
}
.popupvideo figure .icon {
width: 25%;
height: 25%;
margin: auto;
position: absolute;
inset: 0;
}
.popupvideo figure .icon .bg {
fill: #bc6c25;
transform-origin: center;
}
.popupvideo figure .icon .play {
fill: #fff;
}
.popupvideo .ctalink {
margin-top: auto;
}
.popupvideo .thumb img {
-o-transition: all cubic-bezier(.175, .885, .32, 1.275) .35s;
transition: all .5s ease-in-out;
}
.popupvideo .subhead-pop {
margin-top: 1.5rem;
}
.popupvideo:hover .thumb img {
transform: scale(1.1);
}
.popupvideo:hover .icon .bg {
animation: 5s linear infinite forwards rotate;
}
.videotestimonials .testimonialslider {
margin-top: 5rem;
}
.videotestimonials .testimonialslider .slick-list {
margin: 0 -5rem;
}
.videotestimonials .testimonialslider .slick-list .slick-slide {
margin: 0 5rem;
}
.videotestimonials .blocknavigation {
margin-top: 4rem;
}
.videotestimonials .blocknavigation .slick-btn {
flex-shrink: 0;
}
.videotestimonials .blocknavigation .slick-btn .prev {
order: 1;
}
.videotestimonials .blocknavigation .slick-btn .next {
order: 2;
}
.videotestimonials .blocknavigation .enhancement {
object-fit: cover;
object-position: right center;
flex-basis: calc(100% - 132px);
order: 3;
max-width: calc(100% - 132px);
height: 145px;
margin-top: -4rem;
}
@media (width <= 767px) {
.videotestimonials .blocknavigation .enhancement {
height: 10rem;
}
}