/* =========================================================
   MONI ORIGINALS THEME OVERRIDES
   Load AFTER bootstrap.min.css
   ========================================================= */


/* =========================================================
   STYLE CUSTOMIZE HERE: COLOR VARIABLES
   Change these first for easy site-wide updates.
   ========================================================= */

:root {
    --mo-bg: #ffffff;
    --mo-text: #404040;
    --mo-text-soft: #6e6e6e;

    --mo-charcoal: #404040;
    --mo-charcoal-dark: #2f2f2f;
    --mo-charcoal-light: #d8d8dc;

    --mo-pink-soft: #f0d5e9;
    --mo-pink-soft-2: #f7e8f1;
	
	--mo-pink-bold: #C04A7A;
	--mo-pink-bold-2: #e86f9f;

    --mo-border: #e7e7ea;
    --mo-border-medium: #d5d5d9;
    --mo-border-dark: #a5a5aa;

    --mo-white: #ffffff;

    --mo-shadow-soft: rgba(0, 0, 0, 0.06);
    --mo-shadow-softer: rgba(0, 0, 0, 0.04);
    --mo-shadow-focus: rgba(64, 64, 64, 0.15);
}


/* =========================================================
   STYLE CUSTOMIZE HERE: GLOBAL BASE / FONTS
   ========================================================= */

body {
    background-color: var(--mo-bg);
    color: var(--mo-text);
    font-family: corbertregular, "Open Sans", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.428571429;
}

body i,
body em {
    font-family: corbertitalic, Georgia, serif;
}

a,
a:link {
    color: var(--mo-text);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--mo-text-soft);
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--mo-text);
    font-family: albaregular, "Open Sans", Arial, sans-serif;
}

h1,
.h1 {
    font-size: 24px;
    font-weight: bold;
}

h2,
.h2 {
    font-size: 18px;
}

h3,
.h3 {
    font-size: 16px;
}

h4,
.h4 {
    font-size: 14px;
}

h5,
.h5 {
    font-size: 12px;
}

h6,
.h6 {
    font-size: 11px;
}


/* =========================================================
   STYLE CUSTOMIZE HERE: REUSABLE TEXT / THEME CLASSES
   ========================================================= */

.alba {
    font-family: albaregular, "Open Sans", Arial, sans-serif;
}

.albaPink,
.albaPink a,
.mauvylous,
.mauvylous a {
    color: var(--mo-text);
    font-family: albaregular, "Open Sans", Arial, sans-serif;
}

.albaPink a:hover,
.mauvylous a:hover {
    color: var(--mo-text-soft);
    text-decoration: underline;
}

.albaGreen {
    color: var(--mo-charcoal);
    font-family: albaregular, "Open Sans", Arial, sans-serif;
}

.pinkGradient,
.navHeaderClass {
    background: var(--mo-pink-soft-2);
    background: radial-gradient(circle, var(--mo-white) 0%, var(--mo-pink-soft) 100%);
}


/* =========================================================
   STYLE CUSTOMIZE HERE: LAYOUT AREAS
   ========================================================= */

.main-div {
    padding: 20px;
}

.side-extra {
    padding: 10px;
}

.site-header {
    min-height: 200px;
    background: none;
}

.header-divider {
    height: 1px;
    background-color: #c0c0c0;
}

.footer {
    color: var(--mo-text);
    margin-top: 50px;
    margin-bottom: 0;
    padding: 15px;
    min-height: 50px;
    background-color: var(--mo-bg);
}


/* =========================================================
   STYLE CUSTOMIZE HERE: NAVBAR / TOGGLE
   ========================================================= */

.navbar {
    margin-right: -15px;
    margin-left: -15px;
    margin-bottom: 20px;
    background-color: var(--mo-white);
    border: 1px solid transparent;
    box-shadow: 0 4px 10px var(--mo-shadow-soft);
}

.navbar-brand {
    padding: 5px;
}

.navbar-toggle {
    background-color: var(--mo-white);
    border: 0;
}

.navbar-default .navbar-toggle {
    border-color: transparent;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: var(--mo-white);
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: var(--mo-charcoal);
}


/* =========================================================
   STYLE CUSTOMIZE HERE: MOBILE NAV HEIGHT
   This controls how much room the mobile menu gets.
   Lower the 90px number to allow more visible menu height.
   ========================================================= */

.navbar-collapse {
    overflow-x: visible;
    padding-right: 15px;
    padding-left: 15px;
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    -webkit-overflow-scrolling: touch;
}

.navbar-collapse.in {
    overflow-y: auto;
}

@media (max-width: 767px) {
    .navbar-collapse {
        max-height: calc(100vh - 90px);
    }

    .navbar-nav {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .navbar-nav > li > a {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .navbar-nav .open .dropdown-menu > li > a,
    .navbar-nav .open .dropdown-menu .dropdown-header {
        padding: 6px 15px 6px 25px;
        line-height: 1.4;
    }
}

@media (min-width: 768px) {
    .navbar-collapse {
        width: auto;
        border-top: 0;
        box-shadow: none;
    }

    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }

    .navbar-collapse.in {
        overflow-y: visible;
    }
}


/* =========================================================
   STYLE CUSTOMIZE HERE: DESKTOP SIDEBAR NAV
   Flush left on large screens with softer border/shadow.
   ========================================================= */

@media (min-width: 768px) {
    .sidebar-nav {
        padding-left: 0;
        margin-left: 0;
    }

    .sidebar-nav .navbar {
        margin-left: 0;
        margin-right: 0;
        background-color: var(--mo-white);
        border: 1px solid var(--mo-border);
        border-left: 0;
        border-radius: 0 0 8px 0;
        box-shadow: 0 3px 10px var(--mo-shadow-softer);
    }

    .sidebar-nav .navbar .navbar-collapse {
        padding: 0;
        max-height: none;
        background-color: var(--mo-white);
        border-radius: 0 0 8px 0;
        font-weight: bold;
        z-index: auto;
    }

    .sidebar-nav .navbar ul {
        float: none;
    }

    .sidebar-nav .navbar li {
        float: none;
        display: block;
    }

    .sidebar-nav .navbar li a {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}


/* =========================================================
   STYLE CUSTOMIZE HERE: NAV / DROPDOWN COLORS
   ========================================================= */

.nav > li > a:hover,
.nav > li > a:focus {
    background-color: var(--mo-charcoal-light);
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
    background-color: var(--mo-charcoal-light);
    border-color: var(--mo-charcoal);
}

.dropdown-menu {
    font-size: 14px;
    background-color: var(--mo-white);
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

.dropdown-menu > li > a {
    color: var(--mo-text);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    color: var(--mo-white);
    background-color: var(--mo-charcoal);
}


/* =========================================================
   STYLE CUSTOMIZE HERE: SEARCH AREA
   ========================================================= */

.searchPad {
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .searchPad {
        margin-top: 10px;
        margin-right: 10px;
        padding: 5px;
    }
}


/* =========================================================
   STYLE CUSTOMIZE HERE: FORM FIELDS
   ========================================================= */

textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select {
    border: 1px solid var(--mo-border-medium);
    border-radius: 8px;
    background-color: var(--mo-bg);
    color: var(--mo-text);
}

select option {
    background-color: var(--mo-bg);
    color: var(--mo-text);
}

select option:hover,
select option:checked {
    background-color: var(--mo-pink-soft); /* pale pink */
}

.form-control {
    border-color: var(--mo-border-medium);
    border-radius: 8px;
}

.form-control:focus {
    border-color: var(--mo-border-dark);
    box-shadow: 0 0 6px var(--mo-shadow-focus);
}


/* =========================================================
   STYLE CUSTOMIZE HERE: BUTTON COLORS
   ========================================================= */

button,
.submitButton {
    background-color: var(--mo-charcoal);
    color: var(--mo-white);
    border-radius: 5px;
    font-weight: bold;
}

button {
    border: 1px solid var(--mo-charcoal);
}

.submitButton {
    border: 0;
}

button:hover,
button:focus,
.submitButton:hover,
.submitButton:focus {
    background-color: var(--mo-charcoal-dark);
    color: var(--mo-white);
}




.cartButton {
    background-color: var(--mo-pink-bold);
    color: var(--mo-white);
    border-radius: 5px;
    font-weight: bold;
}

.cartButton {
    border: 0;
}

.cartButton:hover,
.cartButton:focus {
    background-color: var(--mo-pink-bold-2);
    color: var(--mo-white);
}
/* =========================================================
   STYLE CUSTOMIZE HERE: OPTIONAL BOOTSTRAP BUTTON OVERRIDES
   Uncomment only if you use .btn-primary classes.
   ========================================================= */


.btn-primary {
    color: var(--mo-white);
    background-color: var(--mo-charcoal);
    border-color: var(--mo-charcoal);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    color: var(--mo-white);
    background-color: var(--mo-charcoal-dark);
    border-color: var(--mo-charcoal-dark);
}



/* =========================================================
   IMAGE HELPERS
   ========================================================= */

.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 400px) {
    .rightPic {
        float: right;
        margin: 10px;
    }

    .leftPic {
        float: left;
        margin: 10px;
    }
}

@media (max-width: 399px) {
    .rightPic {
        clear: right;
    }

    .leftPic {
        clear: left;
    }
}

.kindaShady {
    box-shadow: 7px 10px 10px #000;
}

.social-icon {
    width: 48px;
    height: 48px;
    margin: 10px;
}


/* =========================================================
   MARQUEE
   ========================================================= */

@media (max-width: 767px) {
    .marquee {
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
        white-space: nowrap;
        box-sizing: border-box;
        animation: marquee 20s linear infinite;
    }
}

@media (min-width: 768px) {
    .marquee {
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
        white-space: nowrap;
        box-sizing: border-box;
        animation: marquee 60s linear infinite;
    }
}

.marquee:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    from { text-indent: 100%; }
    to   { text-indent: -100%; }
}

/* Pull sidebar closer to screen edge on larger screens, or there is huge gutter to left of menu */
@media (min-width: 768px) {
    .big-menu {
        margin-left: -60px;
		margin-right: 10px;
		padding: 0;
    }
}

/* for products.php page */

.img-square-frame {
    width:100%;
    aspect-ratio:1/1;      /* keeps the box square */
    display:flex;
    align-items:center;    /* vertical centering */
    justify-content:center;/* horizontal centering */
    overflow:hidden;
}

.img-square-frame img {
    max-width:100%;
    max-height:100%;
}

/* for products detail page so they only center if NOT mobile, only change on large screens, otherwise, they stack nicely */

@media (min-width: 768px) {
	.img-square-frame_detail {
		width:100%;
		aspect-ratio:1/1;      /* keeps the box square */
		display:flex;
		align-items:center;    /* vertical centering */
		justify-content:center;/* horizontal centering */
		overflow:hidden;
	}

	.img-square-frame_detail img {
		max-width:100%;
		max-height:100%;
	}
}

.img-hover {
    transition: transform 0.25s ease;
}

.img-hover:hover {
    transform: scale(1.05);
}