/* Custom CSS Overrides for MicheleF Theme */
:root {
    --orange: #fbad50;
    --dark: #222222;
    --pink: #fdf4f5;
    --lt-blue: #DDEDF1;
    --lt-brown: #726B5D;
    --dk-brown: #544526;
    --dk-grey: #545454;
    --ltr-brown: #aea594;
}

/** BUILT-IN FONTS **/
@font-face {
    font-family: 'TantTwinkle';
    src: url('../fonts/TANTWINKLE.ttf');
    font-weight: normal;
    font-style: normal;
}

/** BS 5 Stuff **/
.d-flex { display: flex !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-end { justify-content: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.mb-3 { margin-bottom: 1.5rem !important; }

/* Misc Body */
.ccm-page { width: inherit; height: inherit; }
.cke_float .cke_top { margin-top: -75px; } /* Editor correction for in editing mode */
a img { max-width: 100%; height: auto; }


/* Headings */
h1, .h1 { font-family: 'TantTwinkle', sans-serif !important; text-transform: uppercase; }
h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: 'Montserrat', sans-serif !important; font-weight: 200; }
h2, .h2, h3, .h3 { margin: 3rem 0; }
.col-title .h1 { font-size: 3rem; color: #fff; }

/* Body */
body, .FeaturedPost p, .PopularPosts .item-title a, .PopularPosts .item-snippet, .PopularPosts .item-title a {
    font-family: 'Montserrat', Sans-serif;
    font-weight: 200;
    font-style: normal;
}
#main img.ccm-image-block { max-width: 100%; height: auto; }

.PopularPosts .item-title a { font-weight: 400; }

/* Featured Links */
#main .ccm-block-feature-link { padding-bottom: 2rem; }

/* Borders -- Not sure we need to keep these */
.border-top, .border-bottom { height: 10px; }
.border-left, .border-right { width: 10px; }

/* Header Nav Bar */
.navbar-inverse { margin: 10px 10px 0; }
#mainNavBar { display: flex; justify-content: flex-end; align-items: center; }
.main-menu ul > li > a { font: 300 13px 'Montserrat', Sans-serif; text-transform: uppercase; }
#mainNavBar > li { float: none; margin-top: 10px; position: initial; }
#mainNavBar > li a { position: initial;  -webkit-transform: translateY(0); transform: translateY(0); }
#mainNavBar li a:hover, .main-menu ul li a:focus { color: var(--orange); background: transparent; }
#mainNavBar li a.nav-selected, .main-menu ul li a.nav-path-selected { color: var(--orange); }


/* Logo */
.navbar-header img { height: 150px; width: auto; }
.top-nav-collapse img { height: 90px; margin-top: 7.5px; }

/** Sidebar **/
.sidebar .widget { padding-bottom: 20px !important; margin-bottom: 30px; }
div.ccm-block-page-list-page-entry-horizontal div.ccm-block-page-list-page-entry-thumbnail img {
    width: 90px;
    height: auto;
}
div.ccm-block-page-list-description { font-size: smaller; }

/** Buttons **/
.btn {
    background: var(--pink);
    border: none;
    color: var(--dk-brown);
    font-weight: 200;
    margin-top: 10px;
    padding: 10px 40px;
    border-radius: 0;
    text-transform: uppercase;
    transition: all .2s ease-in-out
}
.btn:hover, .btn:focus { background: var(--ltr-brown); border-color: var(--dk-grey); border: none; }
.btn:hover, .btn:focus { background: #aea594; }
.btn-primary a:hover, .btn-primary a:focus { color: #000; }

/* About Page */
.about-img img { max-width: 100%; }
.about-container {
    position: relative; top: -50dvh; max-width: 90%; margin: auto;
}
.about-container .row { display: flex; position: absolute; z-index: 100; left: 20%; background: #fff; padding: 2rem 0; border: 2px solid var(--ltr-brown); }
.about-desc { padding: 3rem 4rem; line-height: 2rem; }
.about-img img { height: auto; max-width: 100%; }
#about { margin-bottom: 3rem; }
.page-template-about-page #main { padding-left: 22% !important; }
.page-template-about-page h1, .page-template-about-page .h1 { color: var(--lt-brown); margin-bottom: 1rem; }

/* Community Page */
.ccm-page-id-265 #about div[class^="col-md-"] { min-width: 50%; }
.ccm-page-id-265 #about .about-desc { padding: 3rem; }


/** Contact Page **/
.ccm-page-id-266 .container {
    padding-right: 30px;
    padding-left: 30px;
}


/** Footer **/

/* Social Links */
#social-footer .fa-icon-wrap a { color: #fff !important; }
#footer-wrapper { background: none; }
#footer-wrapper .credit a { font-family: 'Montserrat', Sans-serif; font-weight: 200; }
#social-footer .fa-icon-wrap { padding: 20px; }
#social-footer .fa-icon-wrap a { background: var(--lt-brown); }
#social-footer .fa-icon-wrap a:hover, #social-footer .fa-icon-wrap a:focus { background: var(--pink); color: var(--lt-brown) !important; }

/** IN EDIT MODE - Add block bar is covered up by header--fix it **/
div.ccm-panel { z-index: 1000; }




/**** RESPONSIVENESS ************************************************************/

@media screen and (max-width: 1200px) {
    #about { margin-bottom: 8rem; }
}

@media screen and (max-width: 991px) {
    #mainNavBar { flex-direction: column; align-items: flex-start; }
    /* Mobile Menu */
    #mainNavBar ul { max-width: 100%; }
    #mainNavBar ul li { padding-bottom: 5px; }
    #mainNavBar li a { line-height: 2; }

    #about { margin-bottom: -2rem; }
}


@media screen and (max-width: 768px) {
    .halfscreen { height: 60%; margin-bottom: 0; background-position: 50% -130px !important; }
    .navbar-header img { height: 100px; }
    #main .Blog img.ccm-image-block {
        width: 100%;
        height: auto;
    }

    #FeaturedPost1 a img, #FeaturedPost1 img { max-width: 350px; }
}

@media screen and (max-width: 480px) {
    #about { margin-bottom: 2rem; }
}

@media screen and (max-width: 380px) {
    .navbar-header img { height: 85px; }
    .halfscreen { height: 65%; margin-bottom: 25px; background-position: 50% -80px !important; }

    #about { margin-bottom: 6rem; }
}

@media screen and (max-width: 320px) {
    #about { max-width: 250px; margin: auto; margin-bottom: 30rem; }
}