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

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

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

@font-face {
    font-family: "Montserrat";
    font-weight: bold;
	font-style: italic;
    src: url("../fonts/Montserrat/static/Montserrat-BoldItalic.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);

}

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

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

::-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.footer-link {
    font-size: 12px;
}

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

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

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

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

.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;
}

@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;
}

@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;
    }
}