/* Add here all your css styles (customizations) */
@font-face {
    font-family: 'CustomFont';
    src: url('../fonts/mod20-webfont.woff2') format('woff2'), url('../fonts/mod20-webfont.woff') format('woff'), url('../fonts/MOD20.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
                    


.btn-u {
    border: 0;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    font-weight: 400;
    padding: 6px 13px;
    position: relative;
    background: #72c02c;
    white-space: nowrap;
    display: inline-block;
    text-decoration: none;
}

    .btn-u:hover {
        color: #fff;
        text-decoration: none;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    .btn-u.btn-block {
        text-align: center;
    }

a.btn-u {
    /*padding: 4px 13px;*/
    /*vertical-align: middle;*/
}

.btn-u-sm,
a.btn-u-sm {
    padding: 3px 12px;
}

.btn-u-lg,
a.btn-u-lg {
    font-size: 18px;
    padding: 10px 25px;
}

.btn-u-xs,
a.btn-u-xs {
    font-size: 12px;
    padding: 2px 12px;
    line-height: 18px;
}

/*Button Groups*/
.btn-group .dropdown-menu > li > a {
    padding: 3px 13px;
}

.btn-group > .btn-u,
.btn-group-vertical > .btn-u {
    float: left;
    position: relative;
}

    .btn-group > .btn-u:first-child {
        margin-left: 0;
    }

/*For FF Only*/
@-moz-document url-prefix() {
    .footer-subsribe .btn-u {
        padding-bottom: 4px;
    }
}

@media (max-width: 768px) {
    @-moz-document url-prefix() {
        .btn-u {
            padding-bottom: 6px;
        }
    }
}

/*Buttons Color*/
.btn-u:hover,
.btn-u:focus,
.btn-u:active,
.btn-u.active,
.open .dropdown-toggle.btn-u {
    background: #5fb611;
}

.btn-u-split.dropdown-toggle {
    border-left: solid 1px #5fb611;
}

.btn-u.btn-u-blue {
    background: #3498db;
}

    .btn-u.btn-u-blue:hover,
    .btn-u.btn-u-blue:focus,
    .btn-u.btn-u-blue:active,
    .btn-u.btn-u-blue.active,
    .open .dropdown-toggle.btn-u.btn-u-blue {
        background: #2980b9;
    }

.btn-u.btn-u-split-blue.dropdown-toggle {
    border-left: solid 1px #2980b9;
}

.btn-u.btn-u-red {
    background: #e74c3c;
}

    .btn-u.btn-u-red:hover,
    .btn-u.btn-u-red:focus,
    .btn-u.btn-u-red:active,
    .btn-u.btn-u-red.active,
    .open .dropdown-toggle.btn-u.btn-u-red {
        background: #c0392b;
    }

.btn-u.btn-u-split-red.dropdown-toggle {
    border-left: solid 1px #c0392b;
}

.btn-u.btn-u-orange {
    background: #e67e22;
}

    .btn-u.btn-u-orange:hover,
    .btn-u.btn-u-orange:focus,
    .btn-u.btn-u-orange:active,
    .btn-u.btn-u-orange.active,
    .open .dropdown-toggle.btn-u.btn-u-orange {
        background: #d35400;
    }

.btn-u.btn-u-split-orange.dropdown-toggle {
    border-left: solid 1px #d35400;
}

.btn-u.btn-u-sea {
    background: #1abc9c;
}

    .btn-u.btn-u-sea:hover,
    .btn-u.btn-u-sea:focus,
    .btn-u.btn-u-sea:active,
    .btn-u.btn-u-sea.active,
    .open .dropdown-toggle.btn-u.btn-u-sea {
        background: #16a085;
    }

.btn-u.btn-u-split-sea.dropdown-toggle {
    border-left: solid 1px #16a085;
}

.btn-u.btn-u-green {
    background: #2ecc71;
}

    .btn-u.btn-u-green:hover,
    .btn-u.btn-u-green:focus,
    .btn-u.btn-u-green:active,
    .btn-u.btn-u-green.active,
    .open .dropdown-toggle.btn-u.btn-u-green {
        background: #27ae60;
    }

.btn-u.btn-u-split-green.dropdown-toggle {
    border-left: solid 1px #27ae60;
}

.btn-u.btn-u-yellow {
    background: #f1c40f;
}

    .btn-u.btn-u-yellow:hover,
    .btn-u.btn-u-yellow:focus,
    .btn-u.btn-u-yellow:active,
    .btn-u.btn-u-yellow.active,
    .open .dropdown-toggle.btn-u.btn-u-yellow {
        background: #f39c12;
    }

.btn-u.btn-u-split-yellow.dropdown-toggle {
    border-left: solid 1px #f39c12;
}

.btn-u.btn-u-default {
    background: #95a5a6;
}

    .btn-u.btn-u-default:hover,
    .btn-u.btn-u-default:focus,
    .btn-u.btn-u-default:active,
    .btn-u.btn-u-default.active,
    .open .dropdown-toggle.btn-u.btn-u-default {
        background: #7f8c8d;
    }

.btn-u.btn-u-split-default.dropdown-toggle {
    border-left: solid 1px #7f8c8d;
}

.btn-u.btn-u-purple {
    background: #9b6bcc;
}

    .btn-u.btn-u-purple:hover,
    .btn-u.btn-u-purple:focus,
    .btn-u.btn-u-purple:active,
    .btn-u.btn-u-purple.active,
    .open .dropdown-toggle.btn-u.btn-u-purple {
        background: #814fb5;
    }

.btn-u.btn-u-split-purple.dropdown-toggle {
    border-left: solid 1px #814fb5;
}

.btn-u.btn-u-aqua {
    background: #27d7e7;
}

    .btn-u.btn-u-aqua:hover,
    .btn-u.btn-u-aqua:focus,
    .btn-u.btn-u-aqua:active,
    .btn-u.btn-u-aqua.active,
    .open .dropdown-toggle.btn-u.btn-u-aqua {
        background: #26bac8;
    }

.btn-u.btn-u-split-aqua.dropdown-toggle {
    border-left: solid 1px #26bac8;
}

.btn-u.btn-u-brown {
    background: #9c8061;
}

    .btn-u.btn-u-brown:hover,
    .btn-u.btn-u-brown:focus,
    .btn-u.btn-u-brown:active,
    .btn-u.btn-u-brown.active,
    .open .dropdown-toggle.btn-u.btn-u-brown {
        background: #81674b;
    }

.btn-u.btn-u-split-brown.dropdown-toggle {
    border-left: solid 1px #81674b;
}

.btn-u.btn-u-dark-blue {
    background: #4765a0;
}

    .btn-u.btn-u-dark-blue:hover,
    .btn-u.btn-u-dark-blue:focus,
    .btn-u.btn-u-dark-blue:active,
    .btn-u.btn-u-dark-blue.active,
    .open .dropdown-toggle.btn-u.btn-u-dark-blue {
        background: #324c80;
    }

.btn-u.btn-u-split-dark.dropdown-toggle {
    border-left: solid 1px #324c80;
}

.btn-u.btn-u-light-green {
    background: #79d5b3;
}

    .btn-u.btn-u-light-green:hover,
    .btn-u.btn-u-light-green:focus,
    .btn-u.btn-u-light-green:active,
    .btn-u.btn-u-light-green.active,
    .open .dropdown-toggle.btn-u.btn-u-light-green {
        background: #59b795;
    }

.btn-u.btn-u-split-light-green.dropdown-toggle {
    border-left: solid 1px #59b795;
}

.btn-u.btn-u-dark {
    background: #555;
}

    .btn-u.btn-u-dark:hover,
    .btn-u.btn-u-dark:focus,
    .btn-u.btn-u-dark:active,
    .btn-u.btn-u-dark.active,
    .open .dropdown-toggle.btn-u.btn-u-dark {
        background: #333;
    }

.btn-u.btn-u-split-dark.dropdown-toggle {
    border-left: solid 1px #333;
}

.btn-u.btn-u-light-grey {
    background: #585f69;
}

    .btn-u.btn-u-light-grey:hover,
    .btn-u.btn-u-light-grey:focus,
    .btn-u.btn-u-light-grey:active,
    .btn-u.btn-u-light-grey.active,
    .open .dropdown-toggle.btn-u.btn-u-light-grey {
        background: #484f58;
    }

.btn-u.btn-u-split-light-grey.dropdown-toggle {
    border-left: solid 1px #484f58;
}

/*Bordered Buttons*/
.btn-u.btn-brd {
    color: #555;
    /*font-weight: 200;*/
    background: none;
    padding: 5px 13px;
    border: solid 1px transparent;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

    .btn-u.btn-brd:hover {
        background: none;
        border: solid 1px #eee;
    }

    .btn-u.btn-brd:focus {
        background: none;
    }

    .btn-u.btn-brd.btn-brd-hover:hover {
        color: #fff !important;
    }

.btn-u.btn-brd {
    border-color: #72c02c;
}

    .btn-u.btn-brd:hover {
        color: #5fb611;
        border-color: #5fb611;
    }

    .btn-u.btn-brd.btn-brd-hover:hover {
        background: #5fb611;
    }

    .btn-u.btn-brd.btn-u-blue {
        border-color: #3498db;
    }

        .btn-u.btn-brd.btn-u-blue:hover {
            color: #2980b9;
            border-color: #2980b9;
        }

        .btn-u.btn-brd.btn-u-blue.btn-brd-hover:hover {
            background: #2980b9;
        }

    .btn-u.btn-brd.btn-u-red {
        border-color: #e74c3c;
    }

        .btn-u.btn-brd.btn-u-red:hover {
            color: #c0392b;
            border-color: #c0392b;
        }

        .btn-u.btn-brd.btn-u-red.btn-brd-hover:hover {
            background: #c0392b;
        }

    .btn-u.btn-brd.btn-u-orange {
        border-color: #e67e22;
    }

        .btn-u.btn-brd.btn-u-orange:hover {
            color: #d35400;
            border-color: #d35400;
        }

        .btn-u.btn-brd.btn-u-orange.btn-brd-hover:hover {
            background: #d35400;
        }

    .btn-u.btn-brd.btn-u-sea {
        border-color: #1abc9c;
    }

        .btn-u.btn-brd.btn-u-sea:hover {
            color: #16a085;
            border-color: #16a085;
        }

        .btn-u.btn-brd.btn-u-sea.btn-brd-hover:hover {
            background: #16a085;
        }

    .btn-u.btn-brd.btn-u-green {
        border-color: #2ecc71;
    }

        .btn-u.btn-brd.btn-u-green:hover {
            color: #27ae60;
            border-color: #27ae60;
        }

        .btn-u.btn-brd.btn-u-green.btn-brd-hover:hover {
            background: #27ae60;
        }

    .btn-u.btn-brd.btn-u-yellow {
        border-color: #f1c40f;
    }

        .btn-u.btn-brd.btn-u-yellow:hover {
            color: #f39c12;
            border-color: #f39c12;
        }

        .btn-u.btn-brd.btn-u-yellow.btn-brd-hover:hover {
            background: #f39c12;
        }

    .btn-u.btn-brd.btn-u-default {
        border-color: #95a5a6;
    }

        .btn-u.btn-brd.btn-u-default:hover {
            color: #7f8c8d;
            border-color: #7f8c8d;
        }

        .btn-u.btn-brd.btn-u-default.btn-brd-hover:hover {
            background: #7f8c8d;
        }

    .btn-u.btn-brd.btn-u-dark {
        border-color: #555;
    }

        .btn-u.btn-brd.btn-u-dark:hover {
            color: #333;
            border-color: #333;
        }

        .btn-u.btn-brd.btn-u-dark.btn-brd-hover:hover {
            background: #333;
        }

    .btn-u.btn-brd.btn-u-light-grey {
        border-color: #585f69;
    }

        .btn-u.btn-brd.btn-u-light-grey:hover {
            color: #484f58;
            border-color: #484f58;
        }

        .btn-u.btn-brd.btn-u-light-grey.btn-brd-hover:hover {
            background: #484f58;
        }

    .btn-u.btn-brd.btn-u-purple {
        border-color: #9b6bcc;
    }

        .btn-u.btn-brd.btn-u-purple:hover {
            color: #814fb5;
            border-color: #814fb5;
        }

        .btn-u.btn-brd.btn-u-purple.btn-brd-hover:hover {
            background: #814fb5;
        }

    .btn-u.btn-brd.btn-u-aqua {
        border-color: #27d7e7;
    }

        .btn-u.btn-brd.btn-u-aqua:hover {
            color: #26bac8;
            border-color: #26bac8;
        }

        .btn-u.btn-brd.btn-u-aqua.btn-brd-hover:hover {
            background: #26bac8;
        }

    .btn-u.btn-brd.btn-u-brown {
        border-color: #9c8061;
    }

        .btn-u.btn-brd.btn-u-brown:hover {
            color: #81674b;
            border-color: #81674b;
        }

        .btn-u.btn-brd.btn-u-brown.btn-brd-hover:hover {
            background: #81674b;
        }

    .btn-u.btn-brd.btn-u-dark-blue {
        border-color: #4765a0;
    }

        .btn-u.btn-brd.btn-u-dark-blue:hover {
            color: #324c80;
            border-color: #324c80;
        }

        .btn-u.btn-brd.btn-u-dark-blue.btn-brd-hover:hover {
            background: #324c80;
        }

    .btn-u.btn-brd.btn-u-light-green {
        border-color: #79d5b3;
    }

        .btn-u.btn-brd.btn-u-light-green:hover {
            color: #59b795;
            border-color: #59b795;
        }

        .btn-u.btn-brd.btn-u-light-green.btn-brd-hover:hover {
            background: #59b795;
        }

    .btn-u.btn-brd.btn-u-light {
        color: #fff;
        border-color: #fff;
    }

        .btn-u.btn-brd.btn-u-light:hover {
            border-color: #fff;
        }

        .btn-u.btn-brd.btn-u-light.btn-brd-hover:hover {
            background: #fff;
            color: #555 !important;
        }


::selection {
    background-color: darkblue;
    ;
    color: white;
}


html {
    scroll-behavior: smooth;
}

#js-header {
    border-bottom: 10px double #3597d3;
    background: linear-gradient(to bottom, #D6EAF6, white );
    background-clip: padding-box; /* Ensures the gradient is inside the padding area, and border stays white */
}


ul {
    font-size: 1.25rem;
    font-weight: 300;
}

#logo {
    margin: 20px 0;
    width: 60%;
}

.bg-filter {
    background-image: url(../img/shade.svg?1);
    z-index: 999;
    background-size: cover;
    position: absolute;
    height: 100%;
    width: 100%;
}

#newsletter_menu li {
    margin: 15px 0;
}

    #newsletter_menu li a {
        color: white;
    }

        #newsletter_menu li a:visited {
            color: white;
        }

        #newsletter_menu li a:hover {
            color: #ababab;
        }

.dzsparallaxer .container {
    z-index: 99999999;
}


.quad {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    //margin-top: 50px;
}

    .quad > .d-block {
        margin: 0 10px;
    }

#issueDate {
    font-family: 'Modern No. 20', 'Times New Roman', Times, serif;
    font-weight: 500;
    color: #333;
    margin-bottom: 0;
    font-size: 34px;
}


#news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.divimage {
    height: 160%;
    background-size: cover;
}

.nextdoor {
    display: inline-block; /* Ensure it behaves like a block to respect dimensions */
    border-radius: 0.25em; /* Apply the border-radius */
    overflow: hidden; /* Prevent the SVG from overflowing outside the rounded border */
    top: 28px;
}

#social-icon {
    width: 100%;
    height: 100%;
    display: block; /* Removes any extra space under the SVG */
}

    #social-icon rect {
        transition: fill 0.3s ease; /* Smooth transition for background color */
    }

    #social-icon path {
        transition: fill 0.3s ease; /* Smooth transition for the line color */
    }

    /* Hover effect */
    #social-icon:hover rect {
        fill: rgb(52, 152, 219); /* Change background to blue on hover */
    }

    #social-icon:hover path {
        fill: #FCFCFC; /* Change lines to white on hover */
    }

#boardImg {
    width: 40%;
    float: right;
    padding-left:5px;
    }
.article-img-left {
    width: 30%;
    float: left;
    padding-right: 5px;
}
.article-img-right {
    width: 30%;
    float: right;
    padding-left: 5px;
} 

.border-toggle {
    border-right: 1px solid;
}

@media only screen and (min-width: 1200px) {
    #date-box {
        margin-top: 5rem;
    }
}

@media only screen and (max-width: 1199px) and (min-width: 992px) {
    #date-box {
        margin-top: 2rem
    }
}

@media only screen and (max-width:1086px) {
    #issueDate{font-size:29px; min-width:145px;}


}


    @media only screen and (max-width:991px) {
        .reverse-mobile {
            flex-direction: column-reverse;
        }

        #boardImg{width:100%; padding-left:0;}
        .article-img-left{width:100%; padding-right:0;}
        .article-img-right {
            width: 100%;
            padding-left: 0;
        }
        .g-px-100 {
            padding-left: 4rem !important;
            padding-right: 4rem !important;
        }

        #logo {
            width: 300px;
        }

        .border-toggle {
            border-right: none;
            border-bottom: 1px solid;
            padding-bottom: 45px;
        }

        #subscribe {
            padding-top: 35px;
        }
    }

    @media only screen and (max-width: 925px) {
        #issueDate {
            font-size: 25px
        }
    }


    @media only screen and (max-width: 768px) {

        #news-header {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            justify-items: center;
        }

        #logo {
            margin: 0;
        }

        #news-header :nth-child(1) {
            grid-column-start: 1;
            grid-row-start: 2;
            margin-left: auto;
        }

        #news-header :nth-child(2) {
            grid-column: span 2 / span 2;
            grid-column-start: 1;
            grid-row-start: 1;
        }

        #news-header :nth-child(3) {
            grid-column-start: 2;
            grid-row-start: 2;
            margin-right: auto;
        }

        #issueDate {
            font-size: 22px
        }

        .divimage {
            height: 400px !important;
            transform: none !important;
        }

        .dzsparallaxer.height-is-based-on-content {
            height: 400px !important;
        }

        .dzsparallaxer .container {
            padding-top: 6rem !important;
        }

        .g-px-100 {
            padding-left: 4rem !important;
            padding-right: 4rem !important;
        }

        h1 {
            font-size: 3rem !important;
        }
    }

    @media only screen and (max-width: 550px) {

        .g-px-100 {
            padding-left: 2.5rem !important;
            padding-right: 2.5rem !important;
        }
    }

    @media only screen and (max-width: 350px) {
        #logo {
            width: 100%;
        }

        .g-px-100 {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }