@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto/Roboto-Regular.ttf");
}

@font-face {
    font-family: "Roboto";
	font-weight: bold;
    src: url("../fonts/Roboto/Roboto-Bold.ttf");
}

@font-face {
    font-family: "Roboto";
	font-style: italic;
    src: url("../fonts/Roboto/Roboto-Italic.ttf");
}

@font-face {
    font-family: "Roboto";
    font-weight: bold;
	font-style: italic;
    src: url("../fonts/Roboto/Roboto-BoldItalic.ttf");
}

@font-face {
    font-family: "RobotoSlab";
    src: url("../fonts/Roboto_Slab/static/RobotoSlab-Medium.ttf");
}

@font-face {
    font-family: "ClashDisplay";
    src: url("../fonts/ClashDisplay/Fonts/WEB/fonts/ClashDisplay-Medium.ttf");
}


@font-face {
    font-family: "CiscoSans";
    src: url("../fonts/CiscoSans/CiscoSans.ttf");
}
@font-face {
    font-family: "CiscoSans";
	font-weight: bold;
    src: url("../fonts/CiscoSans/CiscoSans-Bold.ttf");
}
@font-face {
    font-family: "CiscoSans";
	font-style: italic;
    src: url("../fonts/CiscoSans/CiscoSans-Oblique.ttf");
}
@font-face {
    font-family: "CiscoSans";
    font-weight: bold;
	font-style: italic;
    src: url("../fonts/CiscoSans/CiscoSans-BoldOblique.ttf");
}
@font-face {
    font-family: "CiscoSansThin";
    src: url("../fonts/CiscoSans/CiscoSans-Thin.ttf");
}

:root {
    /*****************************************************************************

    <---------------- w ------------------->     overall width
       <------------- t ---------------->        tile width
                               -------->    <--  frame thickness (f)
                               -------->  <----  grooving (g)
    ////////////////////////////////////////
    // ////////////////////////////////// // ++
    // //                              // //     visible border (b) = border minus grooving
    // //  +------------------------+  // // ++
    // //  |                        |  // //
    // //  |                        |  // //
    // //  |                        |  // //
    // //  |                        |  // //
    // //  |                        |  // //
    // //  |                        |  // //
    // //  |                        |  // //
    // //  |                        |  // //
    // //  +------------------------+  // //
    // //                              // //
    // ////////////////////////////////// //
    ////////////////////////////////////////

    **************************

    /** Dimensions in inches 

    t = 8.0
    f = 1.0
    g =  0.5
    b = 1.0

    padding inside frame outer boundary to represent frame width:
        f / w = f / (t + 2f - 2g) = 1.0 / (8.0 + 2 * 1.0 - 2 * 0.5) = 1 / 9 = 11.1111%

    padding inside tile outer boundary to represent border width:
        b / (t - 2g) = 1.0 / (8.0 - 2 * 0.5) = 1 / 7 = 14.2857%

    tile height with respect to frame height:
        t / w = t / (t + 2f - 2g) = 8 / 9 = 88.8889%

    tile displacement from frame corners:
        d = (100% t / w) / 2 = (100% - 88.8889%) / 2 = 5.5556

    **************************

    t = 8.0
    f = 0.5
    g =  0.25
    b = 0.5

    w = t + 2f - 2g = 8.0 + 2 * 0.5 - 2 * 0.25 = 8.5

    f / w = 0.5 / 8.5 = 5.8824%
    b / (t - 2g) = 0.5 / (8.0 - 2 * 0.25) = 0.5 / 7.5 = 6.6667%
    t / w = 8.0 / 8.5 = 94.1176%
    d = (100% - 94.1176%) / 2 = 2.9412%

    *****************************************************************************/

    /*
    --tile-picture-tile-width-in: 8.0;
    --tile-picture-frame-thickness-in: 0.5;
    --tile-picture-grooving-in: 0.25;
    --tile-picture-visible-border-in: 0.5;

    --tile-picture-frame-width-standard: calc(100% * var(--tile-picture-frame-thickness-in) /
        (var(--tile-picture-tile-width-in) + 2 * var(--tile-picture-frame-thickness-in) - 2 * var(--tile-picture-visible-border-in)));

    --tile-picture-border-width-standard: calc(100% * var(--tile-picture-visible-border-in) /
        (var(--tile-picture-tile-width-in) - 2 * var(--tile-picture-grooving-in)));

    --tile-picture-tile-width-standard: calc(100% * var(--tile-picture-tile-width-in) /
        (var(--tile-picture-tile-width-in) + 2 * var(--tile-picture-frame-thickness-in) - 2 * var(--tile-picture-grooving-in)));

    --tile-picture-tile-dislpacement-standard: calc(100% * (1 - var(--tile-picture-tile-width-in) /
        (var(--tile-picture-tile-width-in) + 2 * var(--tile-picture-frame-thickness-in) - 2 * var(--tile-picture-grooving-in))) / 2);
    */

    --tile-picture-tile-width-mm: 203.5;
    --tile-picture-frame-thickness-mm: 8;
    --tile-picture-grooving-mm: 3.75;
    --tile-picture-visible-border-mm: 10;

    --tile-picture-frame-width-standard: calc(100% * var(--tile-picture-frame-thickness-mm) /
        (var(--tile-picture-tile-width-mm) + 2 * var(--tile-picture-frame-thickness-mm) - 2 * var(--tile-picture-visible-border-mm)));

    --tile-picture-border-width-standard: calc(100% * var(--tile-picture-visible-border-mm) /
        (var(--tile-picture-tile-width-mm) - 2 * var(--tile-picture-grooving-mm)));

    --tile-picture-tile-width-standard: calc(100% * var(--tile-picture-tile-width-mm) /
        (var(--tile-picture-tile-width-mm) + 2 * var(--tile-picture-frame-thickness-mm) - 2 * var(--tile-picture-grooving-mm)));

    --tile-picture-tile-dislpacement-standard: calc(100% * (1 - var(--tile-picture-tile-width-mm) /
        (var(--tile-picture-tile-width-mm) + 2 * var(--tile-picture-frame-thickness-mm) - 2 * var(--tile-picture-grooving-mm))) / 2);

}

body {
    font-family: "CiscoSans";
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 12px;
}

.app-name {
    font-family: "ClashDisplay";
}

#offer {
    background: var(--lead);
    color: white;
}

#display {
    background: var(--lead);
    color: white;
}

#process {
    background: var(--grass-valley);
    color: black;
}

/*
#footer {
    margin-top: auto;
    background: var(--ghost);
    color: var(--alabaster);
}
*/

#footer {
    background: linear-gradient(135deg,  #ffd57d 0%,#ed8f15 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

#menuModal .modal-body {
    background: linear-gradient(135deg,  #ffd57d 0%,#ed8f15 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: initial;
	font-size: 12px;
	color: var(--alto);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: initial;
	font-size: 12px;
	color: var(--alto);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: initial;
	font-size: 12px;
	color: var(--alto);
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: initial;
	font-size: 12px;
	color: var(--alto);
}

/*
a.header-link {
    font-size: 12px;
}
*/

a.header-link:link {
	color: var(--mortar) !important;
}

a.header-link:visited {
	color: var(--mortar) !important;
}

a.header-link:hover {
    color: var(--mortar) !important;
}

a.header-link:active {
    color: var(--mortar) !important;
}

a.display-link:link {
	color: white !important;
}

a.display-link:visited {
	color: white !important;
}

a.display-link:hover {
    color: white !important;
}

a.display-link:active {
    color: white !important;
}

a.ideas-link:link {
	color: black !important;
}

a.ideas-link:visited {
	color: black !important;
}

a.ideas-link:hover {
    color: black !important;
}

a.ideas-link:active {
    color: black !important;
}

a.community-post-author-link:link {
    color: var(--lazyShellRed);
}

a.community-post-author-link:visited {
    color: var(--lazyShellRed);
}

a.community-post-author-link:hover {
    color: var(--lazyShellRed);
}

a.community-post-author-link:active {
    color: var(--lazyShellRed);
}

a.blog-caption-link:link {
    color: var(--brightBlue);
}

a.blog-caption-link:visited {
    color: var(--brightBlue);
}

a.blog-caption-link:hover {
    color: var(--brightBlue);
}

a.blog-caption-link:active {
    color: var(--brightBlue);
}

a.blog-date-and-author-link:link {
    color: var(--iron);
}

a.blog-date-and-author-link:visited {
    color: var(--iron);
}

a.blog-date-and-author-link:hover {
    color: var(--iron);
}

a.blog-date-and-author-link:active {
    color: var(--iron);
}

a.blog-short-desc-link:link {
    color: black;
}

a.blog-short-desc-link:visited {
    color: black;
}

a.blog-short-desc-link:hover {
    color: black;
}

a.blog-short-desc-link:active {
    color: black;
}



a.footer-link:link {
	color: var(--lead) !important;
    font-family: CiscoSansThin;
}

a.footer-link:visited {
	color: var(--lead) !important;
    font-family: CiscoSansThin;
}

a.footer-link:hover {
    color: var(--lead) !important;
    font-family: CiscoSansThin;
}

a.footer-link:active {
    color: var(--lead) !important;
    font-family: CiscoSansThin;
}




a.subscribe-link:link {
    color: var(--lazyShellRed) !important;
}

a.subscribe-link:visited {
    color: var(--lazyShellRed) !important;
}

a.subscribe-link:hover {
    color: var(--lazyShellRed) !important;
}

a.subscribe-link:active {
    color: var(--lazyShellRed) !important;
}



a.no-decor-link:link {
	color: var(--mortar) !important;
}

a.no-decor-link:visited {
	color: var(--mortar) !important;
}

a.no-decor-link:hover {
    color: var(--mortar) !important;
}

a.no-decor-link:active {
    color: var(--mortar) !important;
}


a.accent-link:link {
    color: var(--lazyShellRed);
}

a.accent-link:visited {
    color: var(--lazyShellRed);
}

a.accent-link:hover {
    color: var(--lazyShellRed);
}

a.accent-link:active {
    color: var(--lazyShellRed);
}


a.tracking-link:link {
    color: var(--brightBlue);
}

a.tracking-link:visited {
    color: var(--brightBlue);
}

a.tracking-link:hover {
    color: var(--brightBlue);
}

a.tracking-link:active {
    color: var(--brightBlue);
}






.form-control {
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
}

.btn-sm {
    font-size: 14px;
}

input {
    font-size: 14px;
}

.dropdown-menu {
    font-size: 14px;
}

.navbar-nav > li {
    font-size: 14px;
}

.text-body {
    font-size: 12px;
    margin: 0px;
}

.text-footer {
    font-size: 14px;
    margin: 6px;
}

.validation {
    font-size: 12px;
    margin: 0px;
    padding-left: 12px;
}

/*
.picture-crop-control {
    background-color: blueviolet;
    opacity: 0.1;
}
*/

@media (max-width: 767.98px) {
    .photobooks-banner {
        width: 100% !important;
    }
}

.import-button {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 48px;
    border-width: 4px;
    border-style: solid;
}

.picture-editing p,span {
    font-size: 12px;
    margin: 0px;
}

p.picture-editing-detail {
    font-size: 9px;
    margin: 0px;
}

.picture-editing .form-switch .form-check-input {
    width: 50px;
    height: 30px;
}

.picture-editing .form-switch .form-check-input:checked {
    width: 50px;
    height: 30px;
}

.progress-display p {
    font-size: 12px;
    margin: 0px;
    padding: 8px;
}

.tile-picture-frame-container {
    position: relative;
    width: 100%;
    padding-top: 100%;
}

.tile-grid-picture-frame-container {
    position: relative;
    width: 100%;
    padding-top: 100%;
}

.tile-picture-frame {
    padding: var(--tile-picture-frame-width, 0%);
}

.tile-picture-border {
    /*margin: 0%;*/
    padding: var(--tile-picture-border-width, 0%);
}

/*
.tile-picture.shadow-in-frame img {
    z-index: -1;
}
*/

@media (min-width: 768px) {
    #distinctTilesCarouselInnerDiv {
        display: flex;
    }

    #distinctTilesCarouselInnerDiv .carousel-item {
        display: block;
        margin-right: 0;
        flex: 0 0 calc(100% / 3);
    }
}

.design-display {
    position: relative;
    width: 100%;
    padding-top: 100%;
    /*box-shadow: 0px  0px 10px 4px var(--bilobaflower);*/
}

p.design-details {
    font-size: 12px;
    margin: 0px;
}

.photo-display {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
}

p.photo-details {
    font-size: 12px;
    margin: 0px;
}

a.sub-menu-item-link:link {
	color: var(--iron);
    text-decoration: none;
}

a.sub-menu-item-link:visited {
	color: var(--iron);
    text-decoration: none;
}

a.sub-menu-item-link:hover {
    color: var(--iron);
    text-decoration: none;
}

a.sub-menu-item-link:active {
    color: var(--iron);
    text-decoration: none;
}

a.active-sub-menu-item-link:link {
    color: var(--lazyShellRed) !important;
    text-decoration: underline !important;
}

a.active-sub-menu-item-link:visited {
    color: var(--lazyShellRed) !important;
    text-decoration: underline !important;
}

a.active-sub-menu-item-link:hover {
    color: var(--lazyShellRed) !important;
    text-decoration: underline !important;
}

a.active-sub-menu-item-link:active {
    color: var(--lazyShellRed) !important;
    text-decoration: underline !important;
}

p.active-sub-menu-item-regular {
    color: var(--lazyShellRed) !important;
}

a.active-sub-menu-item-regular-link:link {
    color: var(--lazyShellRed) !important;
}

a.active-sub-menu-item-regular-link:visited {
    color: var(--lazyShellRed) !important;
}

a.active-sub-menu-item-regular-link:hover {
    color: var(--lazyShellRed) !important;
}

a.active-sub-menu-item-regular-link:active {
    color: var(--lazyShellRed) !important;
}

a.cancel-link:link {
    color: var(--rampantRhubarb) !important;
}

a.cancel-link:visited {
    color: var(--rampantRhubarb) !important;
}

a.cancel-link:hover {
    color: var(--rampantRhubarb) !important;
}

a.cancel-link:active {
    color: var(--rampantRhubarb) !important;
}

a.disabled img {
    opacity: 0.3;
}

.list-item {
    border-width: 1px;
    border-style: solid;
    border-color: var(--pixelWhite);
    background-color: var(--lynxWhite);
    border-radius: 1rem;
    padding: 1rem;
}

@media all and (max-width: 991px) {
    .item-action {
        display: block !important;
    }
}

.item-focussed .item-action {
	display: block !important;
}

.item-action-show {
	display: block !important;
}

a.active-picture-upload-source>div {
    border-right: 2px solid var(--lazyShellRed);
}

.show-password .show-password-off {
    display: none;
}

.show-password .show-password-on {
    display: block;
}

.hide-password .show-password-off {
    display: block;
}

.hide-password .show-password-on {
    display: none;
}

.customer-photo-selected .customer-photo-selected-off {
	display: none;
}

.customer-photo-selected .customer-photo-selected-on {
	display: block;
}

.customer-photo-unselected .customer-photo-selected-off {
	display: block;
}

.customer-photo-unselected .customer-photo-selected-on {
	display: none;
}

.customer-photo-public .customer-photo-public-off {
    display: none;
}

.customer-photo-public .customer-photo-public-on {
    display: block;
}

.customer-photo-private .customer-photo-public-off {
    display: block;
}

.customer-photo-private .customer-photo-public-on {
    display: none;
}




.discount-coupon-group-selected .discount-coupons-apply {
	display: none;
}

.discount-coupon-group-selected .discount-coupons-remove {
	display: block;
}

.discount-coupon-group-selected .discount-coupon-code {
    color: var(--lazyShellRed) !important;
}

.discount-coupon-group-unselected .discount-coupons-apply {
	display: block;
}

.discount-coupon-group-unselected .discount-coupons-remove {
	display: none;
}




.grid-visible .grid-visible-off {
	display: none;;
}

.grid-visible .grid-visible-on {
	display: block;;
}

.grid-invisible .grid-visible-off {
	display: block;
}

.grid-invisible .grid-visible-on {
	display: none;
}

.horizontal-scroll-no-scrollbar {
    overflow-x: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

.horizontal-scroll-no-scrollbar::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

.design-template-product-classification-selected img {
    border: 4px solid var(--lazyShellRed);
    border-radius: 10%;
}

.design-template-product-classification-selected p {
    color: var(--lazyShellRed);
    font-weight: bold;
}

.frame-selected img {
    display: block !important;
}

.img-w-constrained {
    width: calc(100% * var(--expansion-factor, 1) * var(--picture-zoom) / 100) !important;
    height: calc((100% * var(--expansion-factor, 1) * var(--picture-zoom) / 100) * (var(--tile-width-mm) / var(--tile-height-mm)) * (var(--orig-height-pixels) / var(--orig-width-pixels)) * var(--picture-bound-aspect-ratio)) !important;
}

.img-h-constrained {
    height: calc(100% * var(--expansion-factor, 1) * var(--picture-zoom) / 100) !important;
    width: calc((100% * var(--expansion-factor, 1) * var(--picture-zoom) / 100) * (var(--tile-height-mm) / var(--tile-width-mm)) * (var(--orig-width-pixels) / var(--orig-height-pixels)) / var(--picture-bound-aspect-ratio)) !important;
}

.unused-grid-component {
    opacity: 0.25;
}

@media all and (max-width: 767px) {
    .home-page-content {
        min-height: calc(100vh - 163px) !important;
    }
}

@media all and (min-width: 768px) {
    .home-page-content {
        min-height: calc(100vh - 84px) !important;
    }
}

@media all and (max-width: 991px) {
    #bannerActionsDiv {
        position: absolute;
        top: calc(60% - 18.5px);
    }
}

@media all and (min-width: 992px) {
    #bannerActionsDiv {
        position: absolute;
        top: calc(50% - 18.5px);
    }
}

@media all and (max-width: 991px) {
    .idea {
        height: 50vh;
        padding-left: 28.125vh;
    }
    #ideasSamplesDiv {
        width: 140.625vh;
    }
    #ideasSamplesDisplayDiv {
        overflow-x: scroll;
    }
}

@media all and (min-width: 992px) {
    .idea {
        width: 20%;
        padding-top: 35.56%;
    }
}

@media all and (max-width: 991px) {
    #communityPostsSamplesVisibleDiv {
        overflow-x: scroll;
    }
    #communityPostsSamplesOuterDiv {
        width: 225%;
        overflow: hidden;
    }
    #communityPostsSamplesDiv {
        width: 275vw;
    }
    .community-post {
        width: 75vw;
        margin-left: calc(-1% * var(--community-post-left-margin-factor) * 2.5);
        margin-right: calc(-1% * var(--community-post-right-margin-factor) * 2.5);
    }
    .inner-community-post {
        height: calc((100vw * 0.75) * (3.0 / 4.0));
    }
}

@media all and (min-width: 992px) {
    #communityPostsSamplesOuterDiv {
        width: 100%;
        overflow: hidden;
    }
    #communityPostsSamplesDiv {
        width: 125%;
    }
    .community-post {
        width: 37.5vw;
        margin-left: calc(-1% * var(--community-post-left-margin-factor) * 5);
        margin-right: calc(-1% * var(--community-post-right-margin-factor) * 5);
    }
    .inner-community-post {
        height: calc((100vw * 0.375) * (3.0 / 4.0));
    }
}

@media all and (max-width: 991px) {
    .daphub-post {
        height: 30vh;
        padding-left: 30vh;
    }
    #daphubPostsSamplesDiv {
        width: 150vh;
    }
    #daphubPostsSamplesOuterDiv {
        overflow-x: scroll;
    }
}

@media all and (min-width: 992px) {
    .daphub-post {
        width: 20%;
        padding-top: 20%;
    }
}

@media all and (max-width: 991px) {
    #reviewsSamplesDiv {
        --max-visible: 1;
        margin-left: calc(-100% * var(--position));
    }
    .review {
        width: calc(100vw * (10 / 12));
    }
}

@media all and (min-width: 992px) {
    #reviewsSamplesDiv {
        --max-visible: 3;
        margin-left: calc(-100% * var(--position) / 3);
    }
    .review {
        width: calc(100vw * (10 / 12) / 3);
    }
}

@media all and (max-width: 991px) {
    .account-menu {
        display: none;
        width: 0%;
    }

    .account-menu-display {
        display: block !important;
        width: 100% !important;
    }

    .account-contents {
        display: none;
        width: 0%;
    }

    .account-contents-display {
        display: block !important;
        width: 100% !important;
    }
}

@media all and (min-width: 992px) {
    .account-menu {
        display: block;
        width: 25%;
    }

    .account-contents {
        display: block;
        width: 75%;
    }

    a.active-menu-item>div {
        background-color: var(--siklenTofu);
        border-right: 2px solid black;
        border-radius: 5%;
        -webkit-border-radius: 5%;
        -moz-border-radius: 5%;
    }
    
    a.active-menu-item span {
        color: black;
    }
}

@media all and (min-width: 992px) {
	.customer-photo-square-container {
		position: relative;
		width: 14.28%;
		padding-top: 14.28%;
	}

	.customer-photo-square-container>div {
		padding: 0.25rem;
	}
}

@media all and (max-width: 991px) {
	.customer-photo-square-container {
		position: relative;
		width: 25%;
		padding-top: 25%;
	}

	.customer-photo-square-container>div {
		padding: 0.125rem;
	}
}

/*
@media all and (max-width: 991px) {
	.customer-photo-collection {
		max-height: calc(100vh - 260px);
		overflow-y: scroll;
	}
}

@media all and (min-width: 992px) {
	.customer-photo-selection {
		max-height: calc(100vh * 0.9 - 96px) !important;
		overflow-y: scroll;
	}
}

@media all and (max-width: 991px) {
	.customer-photo-selection {
		max-height: calc(100vh - 188px);
		overflow-y: scroll;
	}
}
*/


@media all and (min-width: 992px) {
    .customer-photo-collection {
		height: calc(100vh - 238.5px);
	}
    .customer-photo-collection-office {
		height: calc(100vh - 148px);
	}
	.customer-photo-selection {
		height: calc(100% - 97px);
	}
}

@media all and (max-width: 991px) {
    .customer-photo-collection {
		height: calc(100vh - 285.5px);
	}
    .customer-photo-collection-office {
		height: calc(100vh - 159px);
	}
	.customer-photo-selection {
		height: calc(100% - 142px);
	}
}




@media all and (min-width: 992px) {
	.customer-social-photo-album-container {
		width: 20%;
		padding: 0.5rem;
	}

	.customer-social-photo-container {
		width: 12.5%;
		padding: 0.25rem;
	}
}

@media all and (max-width: 991px) {
	.customer-social-photo-album-container {
		width: 50%;
		padding: 0.25rem;
	}

	.customer-social-photo-container {
		width: 25%;
		padding: 0.125rem;
	}
}

@media all and (min-width: 992px) {
	.picture-upload-main {
		height: 100% !important;
	}
}

@media all and (max-width: 991px) {
	.picture-upload-main {
		height: calc(100% - 88px) !important;
	}
}

@media all {
	.customer-social-photo-albums-display>.d-flex>div>.d-flex>a {
		display: none !important;
	}
	.customer-social-photo-albums-display>.d-flex>.form-check {
		display: none !important;
	}
	.customer-social-photo-albums-display>.flex-fill {
		height: calc(100% - 106px) !important;
	}
	.customer-social-photo-albums-display>.btn {
		display: none !important;
	}
}



@media all and (min-width: 992px) {
	.about-us-intro-txt-left {
		width: 62.73% !important;
	}
    .about-us-intro-txt-right {
		width: 37.27% !important;
	}
    .about-us-story-left {
        width: 55% !important;
    }
    .about-us-story-right {
        width: 45% !important;
    }
    .about-us-create-together {
        width: 60% !important;
        padding-top: 50%;
        padding-left: 0rem !important;
        padding-right: 0.25rem !important;
    }

    .about-us-create-together > div {
        position: absolute;
        top: 0rem;
        left: 0rem; 
        width: calc(100% - 0.25rem) !important;
        height: 100%;
        border-radius: 8px; 
    }

    .about-us-vision {
        width: 40% !important;
        padding-top: 50%;
        padding-left: 0.25rem !important;
        padding-right: 0rem !important;
    }

    .about-us-vision > div {
        position: absolute;
        top: 0rem;
        left: 0.25rem; 
        width: calc(100% - 0.25rem) !important;
        height: 100%;
        border-radius: 8px; 
    }

    .terms-and-conditions-intro-txt-left {
		width: 62.73% !important;
	}
    .terms-and-conditions-intro-txt-right {
		width: 37.27% !important;
	}

    .contact-us-content-left {
		width: 62.73% !important;
	}
    .contact-us-content-right {
		width: 37.27% !important;
        border-radius: 0 8px 8px 0;
	}
}

@media all and (max-width: 991px) {
	.about-us-intro-txt-left {
		width: 100% !important;
	}
    .about-us-intro-txt-right {
		width: 100% !important;
	}
    .about-us-story-left {
        width: 100% !important;
    }
    .about-us-story-right {
        width: 100% !important;
    }
    .about-us-create-together {
        width: 100% !important;
        padding-top: 120% !important;
        padding-left: 0rem !important;
        padding-right: 0rem !important;
        margin-bottom: 0.5rem;
    }

    .about-us-create-together > div {
        position: absolute;
        top: 0rem;
        left: 0rem; 
        width: 100% !important;
        height: 100% !important;
        border-radius: 8px; 
    }

    .about-us-vision {
        width: 100% !important;
        padding-top: 125% !important;
        padding-left: 0rem !important;
        padding-right: 0rem !important;
    }

    .about-us-vision > div {
        position: absolute;
        top: 0rem;
        left: 0rem; 
        width: 100% !important;
        height: 100% !important;
        border-radius: 8px;
    }

    .terms-and-conditions-intro-txt-left {
		width: 100% !important;
	}
    .terms-and-conditions-intro-txt-right {
		width: 100% !important;
	}

    .contact-us-content-left {
		width: 100% !important;
        border-radius: 8px;
        overflow: hidden;
	}
    .contact-us-content-right {
		width: 100% !important;
        border-radius: 8px;
	}
}

@media all and (max-width: 991px) {
    #displayPhotoPatternTilesInnerDiv {
        margin-left: calc((100vw - 24px) * ((1 / 6 ) - var(--position) * (4 / 6)));
    }
    #displayPhotoTilesInnerDiv {
        margin-left: calc((100vw - 24px) * ((1 / 6 ) - var(--position) * (4 / 6)));
    }
    .photo-tile {
        width: calc((100vw - 24px) * (4 / 6));
    }
}

@media all and (min-width: 992px) {
    .photo-tile {
        width: calc((100vw - 24px) * (7 / 12) - 8px);
        max-width: 600px !important;
    }
}

@media all and (max-width: 991px) {
    .picture-label-font {
        font-size: 8px !important;
    }
}

@media all and (min-width: 992px) {
    .picture-label-font {
        font-size: 12px !important;
    }
}

.animate-loader {
	border: 8px solid #f3f3f3;
	border-radius: 50%;
	border-top: 1px solid var(--pixelWhite);
	border-right: 1px solid var(--pixelWhite);
	border-bottom: 2px solid var(--lead);
	border-left: 2px solid var(--lead);
	width: 14px;
	height: 14px;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes slideRight1 {
    0%   {left: 0%;}
    100% {left: 100%;}
}

@keyframes slideRight2 {
    0%   {left: 0%;}
    85.71% {left: 85.71%;}
    85.72% {left: -14.28%;}
    100% {left: 0%;}
}

@keyframes slideRight3 {
    0%   {left: 0%;}
    71.42% {left: 71.42%;}
    71.43% {left: -28.57%;}
    100% {left: 0%;}
}

@keyframes slideRight4 {
    0%   {left: 0%;}
    57.14% {left: 57.14%;}
    57.15% {left: -42.86%;}
    100% {left: 0%;}
}

@keyframes slideRight5 {
    0%   {left: 0%;}
    42.86% {left: 42.86%;}
    42.87% {left: -57.14%;}
    100% {left: 0%;}
}

@keyframes slideRight6 {
    0%   {left: 0%;}
    28.57% {left: 28.57%;}
    28.58% {left: -71.42%;}
    100% {left: 0%;}
}

@keyframes slideRight7 {
    0%   {left: 0%;}
    14.28% {left: 14.28%;}
    14.29% {left: -85.71%;}
    100% {left: 0%;}
}