.masonary {
    column-count: 4;
}

body {
}

header {
    background: url(../images/pattern.png) repeat top center;
    border-top: 5px solid #0d5e36;
    border-bottom: 1px solid #cfa93a;
    box-shadow: 0 4px 5px rgba(0,0,0,0.1);
    padding: 10px 0;
}

img {
    max-width: 100%;
}

a:link,
a:hover,
a:focus,
a:visited {
    color: #4670a4;
}

.content {
    margin: 50px auto 50px;
}

h2 {
    color: #0a4f2d;
    margin-bottom: 20px;
}

    h2 span {
        color: #bf9928;
    }

.BookInfo {
    margin-bottom: 15px;
}

    .list a span,
    .BookInfo span {
        color: #333 !important;
    }

.info {
    margin-bottom: 20px;
}

.btn-green {
    background-color: #0d5e36 !important;
    color: white !important;
    font-size: 14px;
    border-radius: 0;
    border: none;
}

    .btn-green:hover {
        color: #fad463 !important;
        text-decoration: none;
    }

.shadedBox {
    background-color: #f5f5f5;
    padding: 15px;
    margin-bottom: 10px;
}

.box4 {
    height: 235px;
    margin-bottom: 30px;
}

    .box4 a {
        color: white;
        font-size: 18px;
    }
/* === Sticky footer ===*/
body, body > form {
    position: relative;
    min-height: 99.5vh;
}

    body > form {
        padding-bottom: 71px;
    }

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 18px;
    background-color: #0a4628;
    color: white;
    line-height: 18px;
}

.footerContent img {
    height: 33px;
    margin-top: 0px;
    margin-bottom: 23px;
    opacity: 0.8;
}

.text-left {
    color: #FFFFFF;
    font-size: 14px;
    margin-top: 15px;
}

.footer ul li {
    display: inline-block;
    list-style: none;
}

    .footer ul li a {
        color: white;
        text-decoration: none;
        opacity: 0.85;
    }

        .footer ul li a:hover {
            opacity: 1;
        }

    .footer ul li:first-child {
        margin: 0 10px;
    }

.footer .lowerMenu {
    margin-top: 25px;
}

.subtitle {
    position: relative;
    margin-bottom: 10px;
}

    .subtitle span {
        color: #0a4f2d;
        font-size: 24px;
        background-color: white;
        display: inline-block;
        position: relative;
        z-index: 1;
        padding: 0 15px;
    }

    .subtitle h2 {
        background-color: white;
        display: inline-block;
        position: relative;
        z-index: 1;
    }

.greyLine {
    background-color: #a59d9d;
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: 10px;
    z-index: 0;
}

.greenLine {
    background-color: #d1d1d1;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 14px;
    z-index: 0;
}

.card-header h2,
.card-header button {
    border: none;
    padding: 0;
    margin: 0;
    font-size: 1.15em;
}

.card-header h2, .card-header button {
    color: #333 !important;
}

.gallery {
    border-top: 3px solid #cca432;
    border-bottom: 3px solid #cca432;
    margin-top: 5px;
    width: 100%;
    overflow-x: hidden;
}

    .gallery img {
        max-width: 100%;
    }

    .gallery > div > div {
        padding: 0;
        height: 215px;
        overflow: hidden;
        background-color: #f5f5f5;
    }

.carousel {
    margin-top: 2px;
    border-bottom: 3px solid #cca432;
}

.bannerCaption {
    background-color: #0a4f2d;
    color: white !important;
    padding: 15px 0;
    text-align: center;
}

    .bannerCaption a,
    .bannerCaption a:visited,
    .bannerCaption a:focus {
        color: #fff !important;
        text-decoration: none;
        font-size: 18px;
        cursor: pointer;
    }

        .bannerCaption a:hover {
            color: wheat !important;
            text-decoration: none !important;
        }

.nav-item .nav-link {
    color: #005123;
    padding-top: 35px;
}

.nav-item .About.dropdown-toggle,
.nav-item .About.dropdown-toggle:hover,
.nav-item .About.dropdown-toggle:focus,
.nav-item .About.dropdown-toggle:visited {
    color: #005123;
    cursor: pointer;
}

.nav-item .dropdown-item,
.nav-item .dropdown-item:hover,
.nav-item .dropdown-item:visited,
.nav-item .dropdown-item:focus {
    color: #005123;
}

    .nav-item .dropdown-item:hover,
    .nav-item .dropdown-item:focus {
        background-color: gainsboro;
    }

.dropdown-menu {
    background-color: #f5f5f5 !important;
}

.nav {
    margin-top: 25px;
}

.Home {
    background: url(../images/Home.png) top center no-repeat;
}

.About {
    background: url(../images/User.png) top center no-repeat;
}

.Events {
    background: url(../images/Events.png) top center no-repeat;
}

.Publications {
    background: url(../images/Publication.png) top center no-repeat;
}

.Gallery {
    background: url(../images/gallery.png) top center no-repeat;
}

.searchContainer {
    position: relative;
}

.search-button {
    border: none;
    color: transparent;
    width: 27px;
    height: 27px;
    position: absolute;
    top: 5px;
}

.Search {
    background: url(../images/search.png) top center no-repeat;
    border: none;
}

    .Search:focus,
    .Search:hover,
    .Search:active {
        border: none !important;
    }

.language {
    display: inline-block;
    position: absolute;
    top: -14px;
}

    .language a,
    .language .changeLang {
        display: inline-block;
        background-color: #0a4f2d;
        color: white;
        padding: 0px 11px 3px;
        text-decoration: none;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        box-shadow: 0px 0px 4px rgba(0,0,0,0.35);
        cursor: pointer;
        border: none;
    }

        .language a:hover {
            color: #fad463 !important;
        }

.container {
    position: relative;
}

.navbar-toggler {
    background-color: #0A4F2D;
    position: absolute;
    top: 0;
}

.fa.fa-bars {
    color: white;
}

.greyBox {
    padding: 20px;
    background-color: #f5f5f5;
    margin-bottom: 10px;
}

.list h3 a {
    color: #333 !important;
}

.list span {
    color: #b99322;
}

.list p span {
    color: #333;
}

span.date {
    margin: 0 10px;
}

    span.date,
    span.date span {
        color: #0a4f2d;
    }

.page-link,
.page-link:hover {
    color: #4670a4 !important;
}

.page-item.disabled .page-link {
    color: #6c757d !important;
}

.page-item.active .page-link {
    background-color: #0D6138;
    border-color: #0D6138;
    color: white !important;
}

.pagination {
    margin-top: 30px;
}

.album {
    margin-bottom: 30px;
    text-align: center;
    height: 250px;
}

    .album .caption {
        padding: 15px 0;
    }

    .album .thumbImage {
        border-top: 1px solid #d1d1d1;
        border-right: 1px solid #d1d1d1;
        border-left: 1px solid #d1d1d1;
        border-bottom: 2px solid #0a4f2d;
        padding: 5px;
        overflow: hidden;
        background-color: #f5f5f5;
        height: 190px;
    }

.box-content span {
    color: white;
}

.page-item.active .page-link {
    background-color: #0D5E36 !important;
    border-color: #0D5E36 !important;
}

.mail {
    margin-top: 15px;
    background: #fff;
    position: absolute;
    bottom: 5px;
    left: 5%;
    right: 5%;
    width: 90%;
}

    .mail a {
        display: block;
    }

.memberTeam {
    text-align: center;
    margin-top: 30px;
    border: 1px solid #d1d1d1;
    border-radius: 10px;
    padding: 30px;
    background: #f8f8f8;
    min-height: 280px;
}

    .memberTeam img {
        border-radius: 50%;
        max-width: 210px;
    }

.name {
    font-size: 24px;
    color: #B89326;
    margin: 10px 0;
}



/* Masonry grid */
.masonry {
    transition: all .5s ease-in-out;
    column-gap: 30px;
    column-fill: initial;
}

    /* Masonry item */
    .masonry .item {
        background-color: #f5f5f5;
        padding: 10px;
        border: 1px solid #e7e7e7;
        box-shadow: 2px 2px 0px rgba(0,0,0,0.15);
        margin-bottom: 15px;
        display: inline-block; /* Fix the misalignment of items */
        vertical-align: top; /* Keep the item on the very top */
    }

    .masonry.albumList .item {
        box-shadow: 1px 5px 0px rgba(0,0,0,0.25);
    }

    /* Masonry image effects */
    .masonry .item img {
        transition: all .5s ease-in-out;
        backface-visibility: hidden; /* Remove Image flickering on hover */
        width: 100%;
    }

    .masonry .item:hover img {
        opacity: .75;
    }

    /* Bordered masonry */
    .masonry.bordered {
        column-rule: 1px solid #eee;
        column-gap: 50px;
    }

        .masonry.bordered .item {
            padding-bottom: 25px;
            margin-bottom: 25px;
            border-bottom: 1px solid #eee;
        }

.caption {
    text-align: center;
    padding-top: 10px;
    border-top: 1px dotted #d1d1d1;
    margin-top: 10px;
}

/* Gutterless masonry */
.masonry.gutterless {
    column-gap: 0;
}

    .masonry.gutterless .brick {
        margin-bottom: 0;
    }

/* Masonry on tablets */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .masonry {
        column-count: 2;
    }
}

/* Masonry on big screens */
@media only screen and (min-width: 1024px) {
    .desc {
        font-size: 1.25em;
    }

    .intro {
        letter-spacing: 1px;
    }

    .masonry {
        column-count: 4;
    }

        .masonry.albumList {
            column-count: 4;
        }
}
/*=== Fonts ===*/
@font-face {
    font-family: "Raleway-SemiBold";
    src: url("../fonts/Raleway-SemiBold.eot"); /* IE9 Compat Modes */
    src: url("../fonts/Raleway-SemiBold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/Raleway-SemiBold.otf") format("opentype"), /* Open Type Font */
    url("../fonts/Raleway-SemiBold.svg") format("svg"), /* Legacy iOS */
    url("../fonts/Raleway-SemiBold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/Raleway-SemiBold.woff") format("woff"), /* Modern Browsers */
    url("../fonts/Raleway-SemiBold.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Raleway";
    src: url("../fonts/Raleway-Regular.eot"); /* IE9 Compat Modes */
    src: url("../fonts/Raleway-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/Raleway-Regular.otf") format("opentype"), /* Open Type Font */
    url("../fonts/Raleway-Regular.svg") format("svg"), /* Legacy iOS */
    url("../fonts/Raleway-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/Raleway-Regular.woff") format("woff"), /* Modern Browsers */
    url("../fonts/Raleway-Regular.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Raleway-Medium";
    src: url("../fonts/Raleway-Medium.eot"); /* IE9 Compat Modes */
    src: url("../fonts/Raleway-Medium.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/Raleway-Medium.otf") format("opentype"), /* Open Type Font */
    url("../fonts/Raleway-Medium.svg") format("svg"), /* Legacy iOS */
    url("../fonts/Raleway-Medium.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/Raleway-Medium.woff") format("woff"), /* Modern Browsers */
    url("../fonts/Raleway-Medium.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Raleway-SemiBold";
    src: url("../fonts/Raleway-SemiBold.eot"); /* IE9 Compat Modes */
    src: url("../fonts/Raleway-SemiBold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/Raleway-SemiBold.otf") format("opentype"), /* Open Type Font */
    url("../fonts/Raleway-SemiBold.svg") format("svg"), /* Legacy iOS */
    url("../fonts/Raleway-SemiBold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/Raleway-SemiBold.woff") format("woff"), /* Modern Browsers */
    url("../fonts/Raleway-SemiBold.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Raleway-Bold";
    src: url("../fonts/Raleway-Bold.eot"); /* IE9 Compat Modes */
    src: url("../fonts/Raleway-Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/Raleway-Bold.otf") format("opentype"), /* Open Type Font */
    url("../fonts/Raleway-Bold.svg") format("svg"), /* Legacy iOS */
    url("../fonts/Raleway-Bold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/Raleway-Bold.woff") format("woff"), /* Modern Browsers */
    url("../fonts/Raleway-Bold.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Raleway-ExtraLight";
    src: url("../fonts/Raleway-ExtraLight.eot"); /* IE9 Compat Modes */
    src: url("../fonts/Raleway-ExtraLight.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/Raleway-ExtraLight.otf") format("opentype"), /* Open Type Font */
    url("../fonts/Raleway-ExtraLight.svg") format("svg"), /* Legacy iOS */
    url("../fonts/Raleway-ExtraLight.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/Raleway-ExtraLight.woff") format("woff"), /* Modern Browsers */
    url("../fonts/Raleway-ExtraLight.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "DroidArabicKufi";
    src: url("../fonts/DroidArabicKufi.eot"); /* IE9 Compat Modes */
    src: url("../fonts/DroidArabicKufi.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/DroidArabicKufi.otf") format("opentype"), /* Open Type Font */
    url("../fonts/DroidArabicKufi.svg") format("svg"), /* Legacy iOS */
    url("../fonts/DroidArabicKufi.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/DroidArabicKufi.woff") format("woff"), /* Modern Browsers */
    url("../fonts/DroidArabicKufi.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "DroidArabicKufi-Bold";
    src: url("../fonts/DroidArabicKufi-Bold.eot"); /* IE9 Compat Modes */
    src: url("../fonts/DroidArabicKufi-Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/DroidArabicKufi-Bold.otf") format("opentype"), /* Open Type Font */
    url("../fonts/DroidArabicKufi-Bold.svg") format("svg"), /* Legacy iOS */
    url("../fonts/DroidArabicKufi-Bold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/DroidArabicKufi-Bold.woff") format("woff"), /* Modern Browsers */
    url("../fonts/DroidArabicKufi-Bold.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "amiri-quran";
    src: url("../fonts/amiri-quran.eot"); /* IE9 Compat Modes */
    src: url("../fonts/amiri-quran.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/AmiriQuran-Regular.otf") format("opentype"), /* Open Type Font */
    url("../fonts/AmiriQuran-Regular.svg") format("svg"), /* Legacy iOS */
    url("../fonts/AmiriQuran-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/AmiriQuran-Regular.woff") format("woff"), /* Modern Browsers */
    url("../fonts/amiri-quran.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}