#header {
    background-color: #d0a277;
    padding-top: 0;
}

#navbar {
    width: 100%;
    margin-right: 4%;
}

#website-logo-img {
    width: 2%;
    display: inline-block;
}

.navigation-row {
    width: 87%;
    margin-top: 2em;
}

#nav {
    width: 100%;
    padding: 0;
}

#nav li a {
    font-weight: bolder;
    line-height: 1.3em;
    color: #000;
    padding: 0 0.75em 0.5em 0.75em;
    font-size: 1.5rem;
}

#nav li {
    border-right: 1px #408533 solid;
    padding: -1px;
}

#nav i {
    margin-top: 0.3em;
}

#nav li ul {
    width: 105%;
}

#nav li ul li a {
    font-weight: bold;
    font-size: 1.3rem;
    background-color: white;
}

#nav > li:first-child {
    border: none;
}

.today-wisdom {
    heigth: 21em;
    background-color: #8bc34a;
    overflow: hidden;
}

.today-wisdom .caption p {
    color: white;
    text-align: right;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 2.5rem;
}

/* width */
::-webkit-scrollbar {
    width: 1em;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0.5em grey;
    border-radius: 1em;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #52aa41;
    border-radius: 1em;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #4c9d3c;
}

#banner {
    position: relative;
}

#banner .main-banner {
    width: 100%;
    margin: 0 auto;
}

#banner span {
    position: absolute;
    top: -25em;
    left: 10%;
    width: 80%;
    height: 10em;
}

#banner .container {
    position: absolute;
    top: 35em;
    width: 100%;
    text-align: center;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
}

#banner strong {
    font: bold 4rem Cairo, serif;
}

#banner p {
    font: bold 2rem Cairo, serif;
    color: white;
}

.short-icon {
    height: 18.9em;
}

.tall-icon {
    height: 40em;
}

.event-section {
    width: 95%;
    margin: 0 2.5%;
    /*background-color: #9eff6a;*/
}

.event-section .frame {
    border: 2px #52aa41 solid;
    border-radius: 0.5em;
}

.event-section > h3,
.gallery-style-1 .container > h3 {
    color: #52aa41;
    font-size: 5rem;
    text-align: center;
}

.first-row .col-md-3 .frame img {
    -webkit-transition: all 0.5s ease-in;
}

/*kids*/

.kids-learning .frame .caption {
    background-color: #52aa41;
    text-align: center;
}

.kids-learning .frame .caption h5 {
    color: white;
    padding: 20px 5px;
    margin-top: 80%;
}

.kids-learning .frame .caption h5 a {
    color: white;
}

/*end of kids learning part*/
.gallery-style-1 .frame:hover img {
    opacity: 0.2;
}

/*popover for lessons hafs / warsh /kalon && letters pronunciation*/
.hafs-lessons,
.warsh-lessons,
.qalon-lessons,
.letters-pronunciation {
    position: relative;
}

.hafs-lessons .hafs-lessons-hover,
.qalon-lessons .qalon-lessons-hover,
.letters-pronunciation .letters-pronunciation-hover,
.warsh-lessons .warsh-lessons-hover,
.milisous .milisous-hover {
    visibility: hidden;
    width: 90%;
    background-color: rgba(82, 170, 65, 0.9);
    text-align: center;
    right: 5%;
    height: 73%;
    /* Position the popup */
    position: absolute;
    z-index: 1;
}

.hafs-lessons-hover h5,
.warsh-lessons-hover h5,
.letters-pronunciation h5,
.qalon-lessons-hover h5,
.milisous-hover h5 {
    padding-top: 2%;
}

.hafs-lessons-hover h5 a:hover,
.warsh-lessons-hover h5 a:hover,
.qalon-lessons-hover h5 a:hover,
.milisous-hover h5 a:hover {
    font-weight: bolder;
    color: white;
}

.hafs-lessons:hover > .caption h3 a,
.qalon-lessons:hover > .caption h3 a,
.warsh-lessons:hover > .caption h3 a,
.milisous h3 a {
    color: #8bc34a;
}

.hafs-lessons:hover .hafs-lessons-hover,
.qalon-lessons:hover .qalon-lessons-hover,
.warsh-lessons:hover .warsh-lessons-hover,
.letters-pronunciation:hover .letters-pronunciation-hover,
.milisous-hover {
    visibility: visible;
}

.hafs-lessons-hover a,
.warsh-lessons-hover a,
.qalon-lessons-hover a,
.letters-pronunciation-hover a,
.milisous-hover a {
    color: white;
}

.hafs-lessons-hover h5:first-child,
.qalon-lessons-hover h5:first-child,
.warsh-lessons-hover h5:first-child,
.milisous-hover h5:first-child {
    margin-top: -45%;
}

/*letter*/

.letters-pronunciation h5 a:hover,
.letters-pronunciation h6 a:hover {
    font-weight: bolder;
    color: white;
}

.letters-pronunciation-hover h5:first-child {
    margin-top: 10%;
}

.navbar-toggle {
    float: left;
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #158400;
}


@media(max-width: 767px) {
    .col-md-12 {
        width: 100%
    }
    .col-md-9 {
        width: 100%
    }
    .col-md-8 {
        width: 100%
    }
    .col-md-6 {
        width: 100%
    }
    .col-md-4 {
        width: 100%
    }
    .col-md-3 {
        width: 100%
    }
    .col-md-2 {
        width: 100%
    }
    .col-md-1 {
        width: 100%
    }
}

#inner-banner {
    background-size: 100%;
}