/* ========================================= */
/*  Title: CSS Styling for Senecacrew.com    */
/*  Last Updated on: 11/29/2021              */
/* ========================================= */
/* ======== Common css for website ========= */
/* ========================================= */
html { height: 100%; }
body { background-color: #f0f0f0 ; /* rgb(240, 240, 240) */ }
.page-bg {
    background-color: #ffffff ;
    background-image: url(../img/iCommon/main-bg.png);
    background-repeat: repeat;
}
.txt-shadow-wht {
    text-shadow: 1px 1px 1px #ffffff;
}
.txt-shadow-blk {
    text-shadow: 1px 1px 1px #000000;
}
.bx-shadow {
    box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, .6);
}
.rounded-custom {
    border-radius: 0.875rem !important;
}
.head-divider,
.foot-divider {
    height: 10px;
    background-color: rgb(220, 160, 80);
    background-image: url(../img/iCommon/divider-bg.jpg);
    background-repeat: repeat-x;
}
/* ================================================= */
/* ========== Temporary css for Testing  =========== */
/* ================================================= */
.view-btn {
    background-color: rgba(0, 0, 0, .6);
    border: 2px rgba(0, 0, 0, 1) solid;
    border-radius: 10px;
}
.view-btn a,
.view-btn a:link {
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
}
.view-btn a:hover,
.view-btn a:focus {
    color: rgba(255, 255, 102, 1);
}
/* ================================================= */
/* ========== Welcome Login Landing Page =========== */
/* ================================================= */
.welcome-bg {
    background-image: url(../img/iWelcome/Cover1c-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #AFAFAF; /* rgb(175,175,175) */
    z-index: -100;
}
.img-01 {
    background-image: url(../img/iWelcome/Cover1c-bg.jpg);
}
.img-02 {
    background-image: url(../img/iWelcome/Cover2c-bg.jpg);
}
.img-03 {
    background-image: url(../img/iWelcome/Cover3c-bg.jpg);
}
.img-04 {
    background-image: url(../img/iWelcome/Cover4c-bg.jpg);
}
.img-05 {
    background-image: url(../img/iWelcome/Cover5c-bg.jpg);
}
.img-06 {
    background-image: url(../img/iWelcome/Cover6c-bg.jpg);
}
@media (min-width: 576px) {
    .welcome-bg {
        background-image: url(../img/iWelcome/Cover1b-bg.jpg);
    }
    .img-01 {
        background-image: url(../img/iWelcome/Cover1b-bg.jpg);
    }
    .img-02 {
        background-image: url(../img/iWelcome/Cover2b-bg.jpg);
    }
    .img-03 {
        background-image: url(../img/iWelcome/Cover3b-bg.jpg);
    }
    .img-04 {
        background-image: url(../img/iWelcome/Cover4b-bg.jpg);
    }
    .img-05 {
        background-image: url(../img/iWelcome/Cover5b-bg.jpg);
    }
    .img-06 {
        background-image: url(../img/iWelcome/Cover6b-bg.jpg);
    }
}
@media (min-width: 1200px) {
    .welcome-bg {
        background-image: url(../img/iWelcome/Cover1a-bg.jpg);
    }
    .img-01 {
        background-image: url(../img/iWelcome/Cover1a-bg.jpg);
    }
    .img-02 {
        background-image: url(../img/iWelcome/Cover2a-bg.jpg);
    }
    .img-03 {
        background-image: url(../img/iWelcome/Cover3a-bg.jpg);
    }
    .img-04 {
        background-image: url(../img/iWelcome/Cover4a-bg.jpg);
    }
    .img-05 {
        background-image: url(../img/iWelcome/Cover5a-bg.jpg);
    }
    .img-06 {
        background-image: url(../img/iWelcome/Cover6a-bg.jpg);
    }
}
.welcome-title {
    color: #ffffff;
    font-size: calc(1.375rem + 1.5vw);
    font-weight: 400;
    text-shadow: 2px 2px 0px #000000;
}
.welcome-title .sm-size {
    font-size: calc(1.375rem + 1.5vw);
    font-weight: 400;
}
@media (min-width: 420px) {
    .welcome-title {
        font-size: calc(2.00rem + 1.5vw);
        font-weight: 400;
    }
}
@media (min-width: 768px) {
    .welcome-title {
        font-size: 5.00rem;
        font-weight: 300;
    }
}
.login-box {
    position: relative;
    color: rgba(0, 0, 0, 1);
    background-color: rgba(255, 255, 255, .5);
    border: rgba(255, 255, 255, .8) 3px solid;
    border-radius: 15px 15px 15px 15px;
    box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .8);
}
.login-box .display-5 {
    font-weight: 400;
}
.login-box .error-msg {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(204, 0, 51, .8);
    border-radius: 4px 4px 4px 4px;
    padding: 3px 10px 3px 10px;
    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .6);
}
/* ========================================= */
/* ========== Main Navigation Top ========== */
/* ========================================= */
.nav-title {
    font-size: calc(1.25rem + 1.5vw);
    text-shadow: 1px 1px 0px #ffffff;
    font-weight: 400;
}
@media (min-width: 420px) {
    .nav-title {
        font-size: calc(2.00rem + 1.5vw);
    }
}
@media (min-width: 768px) {
    .nav-title {
        font-size: 3.00rem;
        font-weight: 300;
        text-shadow: 2px 2px 3px #ffffff;
    }
}
.navbar-bg {
    height: auto;
    background-color: rgb(220, 160, 80);
    background-image: none;
    background-repeat: no-repeat;
    border-bottom: 4px rgba(0, 0, 0, 0.3) solid;
    box-shadow: 4px 4px 12px 0 rgba(0, 0, 0, 0.5);
}
.navlogo-hide {
    display: none;
}
@media (min-width: 576px) { /* 768 */
    .navlogo-hide {
        display: inline-block;
    }
    .navbar-bg {
        background-image: url(../img/iCommon/main-nav-bg.jpg);
        background-repeat: repeat-x;
        border-bottom: none;
    }
}

.gal-btn {
    width: auto;
    font-size: 0.875rem;
    font-weight: 400;
    background-color: rgba(255, 255, 255, .5);
    /*background-color: rgba(220, 160, 80, .5);*/
    border-radius: 0.2rem;
    padding: 0.25rem 0.5rem;
    margin: 1px 1px 1px 1px;
    /*box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.6);*/
}


#gallery-cards .card {
    background-color: rgba(255, 255, 255, 0.5);
}

#gallery-cards .card-body {
    background-color: rgba(255, 255, 255, 1);
}

#gallery-cards .card-text {
    font-size: .875rem;
}

/* ========================================== */
/* ========== Page header layout ============ */
/* ========================================== */
.display-3-custom {
    font-size: calc(1.375rem + 3.3vw);
    font-weight: 300;
    line-height: 1.0;
}
@media (min-width: 1200px) {
    .display-3-custom {
        font-size: 4rem;
        line-height: 1.2;
    }
}
.head-title-spacing {
    margin-top: 0rem;
}
@media (min-width: 992px) {
    .head-title-spacing {
        margin-top: 2.0rem;
    }
}
@media (min-width: 1200px) {
    .head-title-spacing {
        margin-top: 3.5rem;
    }
}
hr.custom-head1 {
    height: 16px;
    border: 0;
    background-color: rgba(0, 0, 0, 0.5);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1.0), rgba(255, 255, 255, 1.0));
}
hr.custom-head2 {
    height: 16px;
    border: 0;
    background-color: rgba(0, 0, 0, 0.5);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1.0), rgba(0, 0, 0, 1.0));
}
.head-bg {
    background-color: #ffffff;
    background-image: url(../img/iCommon/header-bg.png);
    background-repeat: repeat;
}

.notice-box {
    background-color: #ffffff;
    padding: 15px 15px 15px 15px;
    margin: 30px 8px 30px 8px;
}

.chalknotice-box {
    background-color: #000000;
    background-image: url(../img/iHome/chalkboard-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 15px 15px 15px 15px;
    margin: 30px 8px 30px 8px;
    color: #ffffff;
}

.corknotice-box {
    background-color: #ffffff;
    background-image: url(../img/iHome/corkboard-bg.jpg);
    background-repeat: repeat;
    padding: 15px 15px 15px 15px;
    margin: 30px 8px 30px 8px;
    color: #000000;
}

/* ========================================== */
/* ====== Edit Modals >  Section ============ */
/* ========================================== */
.modal-content .dates-header,
.modal-content .sites-header,
.modal-content .QA-header,
.modal-content .photoedit-header,
.modal-content .notice-head {
    background-color: #ffffff;
    background-image: url(../img/iCommon/header-bg.png);
    background-repeat: repeat;
}
.modal-content .dates-footer,
.modal-content .sites-footer,
.modal-content .QA-footer,
.modal-content .photoedit-footer,
.modal-content .notice-footer {
    background-color: #ffffff;
    background-image: url(../img/iCommon/main-bg.png);
    background-repeat: repeat;
}

.modal-content .dates-body,
.modal-content .sites-body,
.modal-content .QA-body,
.modal-content .photoedit-body,
.modal-content .notice-body {
    background-color: #EBEBEB;
}

.QA-body a:link,
.QA-body a:visited,
.QA-body a:active {
    color: #000099;
}

.QA-body a:hover {
    color: #660000;
}

/* ========================================= */
/* ===== Home > Campground Section ========= */
/* ========================================= */
.campground-sec td,
.comment-sec td {
    font-size: 1.00rem;
}
@media (min-width: 576px) {
    .campground-sec td,
    .comment-sec td {
        font-size: 1.25rem;
    }
}
/* ========================================= */
/* ==== Gallery > Photo Card Section ======= */
/* ========================================= */




/* ========================================= */
/* ==== Gallery > Photo View Modal ========= */
/* ========================================= */
.modal-backdrop
{
    opacity:0.7 !important;
}
.imgclose-btn {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, .8);
    background-color: rgba(0, 0, 0, .5);
    border: 2px #ffffff solid;
    border-radius: .75rem;
    padding: 0px 8px 2px 8px;
    margin: 7px 7px 7px 7px;
}

.imgclose-btn a,
.imgclose-btn a:link {
    text-decoration: none;
    color: rgba(255, 255, 255, .8);
}
.imgclose-btn a:hover,
.imgclose-btn a:focus {
    text-decoration: underline;
    color: #FFFF00;
}

/* ========================================= */
/* ========== Main Website Footer ========== */
/* ========================================= */
.site-footer {
    padding:45px 15px 20px 15px;
    font-size:15px;
    line-height:24px;
    color: rgb(165, 165, 165);
}
.site-footer hr {
    border-top-color:#bbb;
    opacity:0.5;
}
.site-footer hr.small {
    margin:20px 0;
}
.site-footer h6 {
    color:#fff;
    font-size:16px;
    text-transform:uppercase;
    text-align: center;
    margin-top: 5px;
    letter-spacing:2px;
}
@media (min-width: 768px) {
    .site-footer h6 {
        text-align: left;
    }
}
.site-footer a {
    color:rgb(144, 145, 145);
}
.site-footer a:hover {
    color:#3366cc;
    text-decoration:none;
}
.footer-links {
    text-align: center;
    padding-left:0;
    list-style:none;
}
@media (min-width: 768px) {
    .footer-links {
        text-align: left;
    }
}
.footer-links li {
    display:block;
}
.footer-links a {
    color:rgb(144, 145, 145);
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover {
    color: rgba(255, 255, 153, 1);
    text-decoration:none;
}
.footer-links.inline li {
    display:inline-block;
}

.foot-bg {
    background-color: #26272b ;
    background-image: linear-gradient(to bottom, #26272b 80%, #000000);
}

/* ========================================= */
/* ========== Common CSS for Site ========== */
/* ========================================= */

hr.custom-wht {
    border: 0;
    height: 4px;
    background: rgba(255, 255, 255, .8);
}
.cardimg,
.cardimg1 {
    max-width: 150px;
}

@media (min-width: 576px) {
    .cardimg {
        max-width: 97px;
    }
    .cardimg1 {
        max-width: 130px;
    }

}

.card-footer-bg{
    background-image: linear-gradient(to bottom, #dca050, #9a7038);
}

.card-shadow {
    box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, .6);
}

.card-shadow:hover {
    box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, .9);
}

#backtoTop {
        width: 50px;
        line-height: 50px;
        overflow: hidden;
        z-index: 999;
        display: none;
        cursor: pointer;
        position: fixed;
        bottom: 50px;
        right: 0;
        background-color: #fff; /*#DDD;  */
        background-image: linear-gradient(to top, rgba(220, 160, 80, 1.0), rgba(255, 255, 255, 1.0));
        color: #000;  /*#555; */
        text-align: center;
        font-size: 30px;
        text-decoration: none;
        border-radius: 7px 0px 0px 7px;
        box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.8);
}
#backtoTop:hover {
        background-color: #9084a0;
        background-image: linear-gradient(to top, rgba(255, 255, 255, 1.0), rgba(220, 160, 80, 1.0));
        color: rgb(255, 255, 255);
        color: #000000;
        box-shadow: -2px 2px 5px 0 rgba(0, 0, 0, 1.0);
}

.editor-icon,
.editor-icon a,
.editor-icon a:link,
.editor-icon a:visited {
    font-size: 1.5rem;
    color: #000000;
}
.editor-icon a:hover,
.editor-icon a:focus {
    color: #CC0000; /* red */
}

.w-icon {
    width: 10% !important;
}

@media (min-width: 992px) {
    .w-icon {
        width: 7% !important;
    }
}

/* ========================================== */
/* ========== CSS Buttons for Site ========== */
/* ========================================== */
.nav-btn, .modal-btn, .gal-btn {
    width: 100%;
    color: #000000;
    font-size: 1.25rem;
    font-weight: 400;
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, .5);
    margin: 0px 0px 6px 0px;
    padding: 1px 8px 3px 8px;
    box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, .5);
}

.nav-btn {
    width: 100%;
}
.modal-btn {
    width: auto;
}
.modal-btn-close {
    color: #ffffff;
    background-color: #999999;
}

.gal-btn {
    width: auto;
    font-size: 0.875rem;
    border-radius: 0.2rem;
    padding: 0.25rem 0.5rem;
    margin: 1px 1px 1px 1px;
}

.nav-btn:hover,
.modal-btn:hover,
.gal-btn:hover {
    color: #fff;
    background-color: #a34003;
    background-image: linear-gradient(to bottom, #a34003, #f6a800, #a34003);
    border-color: #a34003;
}
.modal-btn-close:hover {
    color: #000000;
    background-color: #CCCCCC;
    background-image: linear-gradient(to bottom, #999999, #CCCCCC, #999999);
    border-color: #777777;
}

.btn-check:focus + .nav-btn,
.btn-check:focus + .modal-btn,
.btn-check:focus + .gal-btn,
.nav-btn:focus {
    color: #000000;
    background-color: #ffffff;
    border-color: #000000;
    box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); /* greyish */
}
.btn-check:checked + .nav-btn,
.btn-check:active + .nav-btn,
.nav-btn:active,
.nav-btn.active,
.btn-check:checked + .modal-btn,
.btn-check:active + .modal-btn,
.modal-btn:active,
.modal-btn.active,
.btn-check:checked + .gal-btn,
.btn-check:active + .gal-btn,
.gal-btn:active,
.gal-btn.active,
.show > .nav-btn.dropdown-toggle {
    color: #000000;
    background-color: #ffffff;
    border-color: #000000);
}
.btn-check:checked + .nav-btn:focus,
.btn-check:active + .nav-btn:focus,
.nav-btn:active:focus,
.nav-btn.active:focus,
.btn-check:checked + .modal-btn:focus,
.btn-check:active + .modal-btn:focus,
.modal-btn:active:focus,
.modal-btn.active:focus,
.btn-check:checked + .gal-btn:focus,
.btn-check:active + .gal-btn:focus,
.gal-btn:active:focus,
.gal-btn.active:focus,
.show > .nav-btn.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); /* greyish */
}
.nav-btn:disabled,
.nav-btn.disabled,
.modal-btn:disabled,
.modal-btn.disabled,
.gal-btn:disabled,
.gal-btn.disabled {
    color: #fff;
    background-color: #212529;
    border-color: #212529; /* darkish */
}
.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, .8)' stroke-width='5' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.custom-toggler.navbar-toggler {
    border-color: rgb(255,255,255);
}

@font-face {
    font-family: MyChalk1;
    src: url(../assets/fonts/Filmcryptic.ttf);
}

@font-face {
    font-family: MyCork1;
    src: url(../assets/fonts/entsani.ttf);
}

.chalkfont1 {
    font-family: MyChalk1;
    color: #ffffff;
}

.corkfont1 {
    font-family: MyCork1;
    color: #990000;
}

.chalkfont1 .title {
    font-size: 2rem;
}
.chalkfont1 p {
    font-size: 1.50rem;
}

.corkfont1 .title {
    font-size: 1.75rem;
}
.corkfont1 p {
    font-size: 1.25rem;
}

@media (min-width: 768px) {
    .chalkfont1 .title {
        font-size: 3rem;
    }
    .chalkfont1 p {
        font-size: 2.00rem;
    }
    .corkfont1 .title {
        font-size: 2.5rem;
    }
    .corkfont1 p {
        font-size: 1.5rem;
    }
}