@font-face {
    font-family: BebasNeue-Regular;
    src: url(../Font-Family/BebasNeue-Regular.ttf);
}
@font-face {
    font-family: Montserrat-Bold;
    src: url(../Font-Family/Montserrat-Bold.ttf);
}
@font-face {
    font-family: Montserrat-Regular;
    src: url(../Font-Family/Montserrat-Regular.ttf);
}
button {
    font-family: BebasNeue-Regular;
}
h1 {
    font-family: BebasNeue-Regular;
    font-size: 60px !important;
}
.sub-heading {
    font-family: BebasNeue-Regular;
    font-size: 40px !important;
}
h2 {
    font-family: BebasNeue-Regular;
}
h5 {
    font-family: BebasNeue-Regular;
    font-size: 30px !important;
}
p {
    font-family: Montserrat-Regular;
}
a {
    font-family: Montserrat-Regular;
}
li {
    font-family: Montserrat-Regular;
}
.mont {
    font-family: Montserrat-Regular;
}
/* TOP ROW*/
.top-row-container {
    font-family: Montserrat-Regular !important;
    background-color: #B8860B;
    padding-top: 10px; 
}
.contact-no {
    font-family: Montserrat-Regular !important;
    color: white !important;
}
.address {
    font-family: Montserrat-Regular !important;
    color: white;
}
@media only screen and (min-width: 1200) {
    .login-btn button {
        margin-left: -50px !important;
    }
    .support-btn {
        margin-left: -50px !important;
    }
}
.login-btn {
    color: white;
    font-size: large;
}
.support-btn {
    color: white;
    font-size: large;
}
.btn-primary {
    background-color:  rgba(0, 0, 0, 0.164);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact-no {
        text-align: center;
    }
    .address {
        text-align: center;
    }
    .login-btn {
        text-align: right;
        padding-bottom: 10px;
    }
}
/* NAVIGATION*/
li .nav-link {
    color: black ;
    font-weight: bold;
    font-size: large;
}
li .nav-link:hover {
    color: #B8860B !important;
}
.about a:hover {
    background-color: #B8860B;
    color: #fff;
}
.youth a:hover {
    background-color: #B8860B;
    color: #fff;
}
.efiks a:hover {
    background-color: #B8860B;
    color: #fff;
}
@media only screen and (max-width: 1199px) {
    li .nav-link {
        font-size: medium;
    }
}
@media only screen and (max-width: 991px) {
    li .nav-link {
        font-size: large;
    }
}
/* BANNER*/
.home-banner {
    background-image: url(../images/pexels-wendy-wei-1190298.jpg);
    background-size: cover;
    background-repeat: round;
    background-attachment: fixed;
}
.home-banner-container {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #b8870b46;
    color: white;
}
.home-banner-container h3 {
    padding-top: 20px;
}
.home-banner-container p {
    padding-top: 20px;
    font-size: larger;
}
/* FLAG IMAGE AND OUR HEROES*/
.our-heroes {
    color: white;
    background-color: #B8860B;
    padding-top: 20px;
    padding-bottom: 20px;
}
.our-heroes p {
    font-size: larger;
}
/* ANNUAL NATIONAL EFIK CONVENTION*/
.annual-efik-convention {
    color: white;
    background-color: black;
    padding-top: 50px;
    padding-bottom: 50px;
}
.annual-efik-convention h1 {
    font-size: larger;
}
.annual-efik-convention p {
    font-size: larger;
}
.register-now-btn a {
    border: solid 2px white;
    background-color: white;
    color: black;
}
.register-now-btn a:hover {
    border: solid 2px white;
    background-color: black;
    color: white;
}
/* OUR MISSION SECTION*/
.our-mission-jumbotron {
    padding-top: 400px;
    background-image: url(../images/target-min.jpg) ;
    background-size: cover;
    background-repeat: round;
    background-attachment: fixed;
}
.our-mission-section {
    color: white;
    background-color: #B8860B;
    margin-top: -200px;
    padding-top: 50px;
    padding-bottom: 70px;
}
.our-mission-section p {
    font-size: larger;
}
.learn-more-btn a {
    border: solid 2px white;
    color: white;
}
.learn-more-btn a:hover {
    border: solid 2px white;
    background-color: white;
    color: black;
}
.donate-now-btn a {
    background-color: white;
    color: black;
}
.donate-now-btn a:hover {
    
    background-color: #f3be399c;
    color: white;
}
/* EFIK LANGUAGE LESSONS WITH AUNTY JOAN*/
.efik-language-lessons-jumbotron {
    padding: 100px 0px 100px 0px;
    background-image: url(../images/ndebele-people-south-africa.jpg) ;
    background-size: cover;
    background-repeat: round;
    background-attachment: fixed;
}
.efik-language-lessons-section {
    color: white;
    background-color: #b8870b46;
    padding-top: 20px;
    padding-bottom: 20px;
}
.efik-language-lessons-section p {
    font-size: larger;
}
.more-information-btn {
    padding-top: 30px;
}
.more-information-btn button {
    background-color: white;
    color: black;
}
.more-information-btn button:hover {
    
    background-color: #B8860B;
    color: white;
}
/* OUR VISION*/
.headingCol {
    padding-top: 20px;
}
.para {
    padding-top: 50px;
}
.our-vision {
    padding-top: 50px;
    padding-bottom: 50px;
}
.our-vision img:hover {
    border: solid 6px rgba(128, 128, 128, 0.568);
}
.our-vision h2 {
    padding-bottom: 20px;
    font-weight: bolder;
}
.our-vision img {
    border: solid 10px rgba(128, 128, 128, 0.568);
}
.view-more-1 {
    padding-top: 30px;
    padding-bottom: 30px;
}
.view-more-1 a {
    border: solid 2px black;
}
.view-more-1 a:hover {
    border: solid 2px black;
    background-color: black;
    color: white;
}
.view-more-2 {
    padding-top: 30px;
    padding-bottom: 30px;
}
.view-more-2 a {
    background-color: #B8860B;
    color: white;
}
.view-more-3 {
    padding-top: 30px;
    padding-bottom: 30px;
}
.view-more-3 a {
    border: solid 2px black;
}
.view-more-3 a:hover {
    border: solid 2px black;
    background-color: black;
    color: white;
}
@media only screen and (max-width: 767px) {
    .headingCol {
        text-align: center;
    }
}
/* GET A QUOTE*/
.get-a-quote {
    background-color: black;
    color: white;
    padding: 50px 0px 60px 0px;
}
.get-a-quote p {
    font-size: larger;
}
.get-now {
    padding-top: 40px;
}
.get-now button {
    border: solid 2px white;
    color: white;
}
.get-now button:hover {
    border: solid 2px white;
    background-color: white;
    color: black;
}
/* EFIK HALL OF FAME*/
.img-row {
    padding-top: 50px;
    padding-bottom: 50px;
}
.hanger-img {
    display: flex;
    border: solid 10px rgba(128, 128, 128, 0.5);
}
.hanger-img:hover {
    border: solid 5px rgba(128, 128, 128, 0.5);
}
.img-1 {
    margin-top: -150px;
    margin-left: 40px;
    width: 150%;
}
.img-2 {
    margin-top: -30px;
    margin-left: 50px;
    width: 150%;
}
.img-3 {
    margin-top: -195px;
    margin-left: 50px;
    width: 150%;
}
.img-4 {
    margin-left: 50px;
    margin-top: -30px;
    width: 150%;
}
.img-5 {
    margin-top: -150px;
    margin-left: 70px;
    width: 150%;
}
@media only screen and (max-width: 565px) {
    #img-3 {
        margin-top: -100px !important;
    }
}
@media only screen and (max-width: 550) {
    #img-3 {
        margin-top: -90px !important;
    }
}
@media only screen and (max-width: 500) {
    #img-3 {
        margin-top: -80px !important;
    }
}
@media only screen and (max-width: 424px) {
    .hanger-img {
        width: 250%;
    }
    .img-1 {
        margin-left: 10px !important;
    }
    .img-2 {
        margin-left: 10px !important;
    }
    .img-3 {
        margin-left: 5px !important;
    }
    #img-3 {
        margin-top: -70px !important;
    }
    .img-4 {
        margin-left: 5px !important;
    }
    .img-5 {
        margin-left: 5px !important;
    }
}
@media only screen and (max-width: 390) {
    #img-3 {
        margin-top: -70px !important;
    }
}
@media only screen and (max-width: 340) {
    #img-3 {
        margin-top: -50px !important;
    }
}
/* BREAKING NEWS*/
.breakingNewsRow {
    padding-top: 50px;
}
.rowSection {
    padding-top: 20px;
}
.breaking-news-section {
    background-color: #B8860B;
    color: white;
    padding-top: 50px;
    padding-bottom: 50px;
}
.breaking-news-section-btn {
    border: solid 2px white;
    color: white;
}
@media only screen and (max-width: 767px) {
    .bullet-points {
        text-align: center ;
    }
    .bullet-points-pad-bot {
        padding-bottom: 20px;
    }
    .breakingNewsRow {
        text-align: center;
    }
    .rowSection {
        text-align: center;
    }
}
/* EFIK ART*/
.efik-art {
    padding-top: 50px;
    padding-bottom: 50px; 
}
.efik-art h1 {
    font-family: BebasNeue-Regular;
    font-size: 50px !important;
}
/* EFIK TRADITIONAL MUSIC*/
.efik-music {
    padding: 50 0 50 0;
    background-image: url(../images/Music-background.png) ;
    background-size: cover;
    background-repeat: round;
    background-attachment: fixed;
    color: white;
}
/* LATEST NEWS*/
.latest-news-container {
    padding-top: 50px;
    padding-bottom: 50px;
}
.latest-news-container img {
    border: solid 10 rgba(128, 128, 128, 0.308);
}
.latest-news-container a {
    background-color: #B8860B;
    color: white;
}
/* LATEST BLOGS*/
.latest-blogs {
    background-color: #B8860B;
    color: white;
    padding-top: 50px;
    padding-bottom: 50px;
}
.latest-blogs img {
    border: solid 10px white;
}
.latest-blogs a {
    background-color: white;
    color: #B8860B;
}
.latest-blogs a:hover {
    background-color: #e2a817d3;
    color: white;
}
.small {
    font-size: smaller;
}
.large {
    font-size: smaller;
}
/* BOT STRIP*/
.bot-strip img{
    width: 100%;
}
/* FOOTER*/
.footer {
    background-color: black;
    color: white;
    padding: 20 0 20 0;
    font-size: 90% !important;
}
@media only screen and (min-width: 1000) and (max-width: 1400) {
    #box-num {
        font-size: 35px;
    }
}
/* Media Query For News Logo*/
@media only screen and (min-width: 1120) and (max-width: 1230) {
    #news-logo {
        margin-left: 800px;
    }
}
@media only screen and (min-width: 1230) and (max-width: 2000) {
    #news-logo {
        margin-left: 900px;
    }
}
@media only screen and (min-width: 1420) and (max-width: 2000) {
    #news-logo {
        margin-left: 1000px;
    }
}
@media only screen and (min-width: 1610) and (max-width: 2000) {
    #news-logo {
        margin-left: 1200px;
    }
}
@media only screen and (min-width: 1815px) and (max-width: 2000) {
    #news-logo {
        margin-left: 1300px;
    }
}
@media only screen and (min-width: 1960) and (max-width: 2070) {
    #news-logo {
        margin-left: 1400px;
    }
}
@media only screen and (min-width: 2070) and (max-width: 2243px) {
    #news-logo {
        margin-left: 1500px;
    }
}
@media only screen and (min-width: 2243px) and (max-width: 2606px) {
    #news-logo {
        margin-left: 1600px;
        margin-top: -300px;
    }
}
/* Media Query For Our Heroes Div*/
@media only screen and (min-width: 1500px) and (max-width: 2000px) {
    #our-heroes {
        margin-left: -250px;
    }
}
@media only screen and (min-width: 2000px) and (max-width: 2606px) {
    #our-heroes {
        margin-left: -380px;
    }
}
/* Large Device*/
@media only screen and (min-width: 600px) {
    .about {
        margin-top: -10px;
        margin-left: 300px;
    }
    .youth {
        margin-top: -10px;
        margin-left: 400px;
    }
    .efiks {
        margin-top: -10px;
        margin-left: 700px;
    }
    .our-heroes {
        margin-top: 15px;
        margin-left: -100px;   
    }   
    #text {
        padding-left: 100px;
        padding-right: 100px;
    }
    .learn-more-btn {
        text-align: right;
    }
    .register-now-btn {
        text-align: left;
    }
    .donate-now-btn {
        text-align: left;
    }
    .headingCol {
        padding-top: 10px;
    }
    .para {
        padding-top: 0px;
    }
    .view-more-1 {
        padding-top: 0px;
    }
    .view-more-2 {
        padding-top: 0px;
    }
    .view-more-3 {
        padding-top: 0px;
    }
    .news-logo {
        margin-left: 1000px;
        margin-top: -200px;
        padding-bottom: 120px;
    }
    .news-img {
        width: 150%;
    }
    .copyright {
        padding-top: 50px;
    }
}
@media only screen and (max-width: 300px) {
    .traditional-music-heading {
        font-size: 20px;
    }
    #statistics-heading {
        font-size: 20px;
    }
    .home-banner h1 {
        font-size: 25px;
    }
}
@media only screen and (max-width: 600px) {
    .nav-logo {
        width: 70% !important;
    }
    .news-logo {
        text-align: center;
        margin-left: 0;
        margin-top: 0;
        padding-bottom: 0;
        padding-top: 20px;
    }
    .news-img {
        width: 100%;
    }
    .contact-no {
        text-align: center;
        padding-top: 20px;
    }
    .address {
        text-align: center;
        padding-bottom: 20px;
    }
    .login-btn {
        text-align: center;
        padding-bottom: 10;
    }
    .support-btn {
        text-align: center;
        padding-bottom: 20px;
    }
    nav {
        text-align: left;
    }
    .learn-more-btn {
        text-align: center;
    }
    .register-now-btn {
        text-align: center;
    }
    .donate-now-btn {
        text-align: center;
    }
    .art-img {
        text-align: center;
        padding-top: 20px;
    }
    .music-img {
        text-align: center;
    }
    .news-img {
        width: 50%;
    }
    .news-img-div {
        text-align: center;
    }
    .news-content {
        text-align: center;
    }
    .copyright {
        text-align: center;
    }
    .footer-logo {
        text-align: center;
    }
    #box-num {
        font-size: 35px;
    }
    .statistics-heading {
        font-size: 25px;
    }
    #box-text-size {
        font-size: 25px;
    }
    #box-num {
        font-size: 20px;
    }
    #box-text-size-2 {
        font-size: 18px;
    }
    #box-text {
        font-size: 25px;
    } 
}   
@media only screen and (min-width: 600px) and (max-width: 767px) {
    .nav-logo {
        width: 70% !important;
    }
    .about {
        margin-top: 0px;
        margin-left: 0px;
    }
    .youth {
        margin-top: 0px;
        margin-left: 0px;
    }
    .efiks {
        margin-top: 0px;
        margin-left: 0px;
    }
    .news-logo {
        text-align: center;
        padding-top: 10px;
        margin-left: 0px !important;
        margin-top: 0px !important;
        padding-bottom: 0px !important;
    }
    .news-img {
        width: 100%;
    }
    .contact-no {
        text-align: center;
        padding-top: 20px;
    }
    .address {
        text-align: center;
        padding-bottom: 20px;
    }
    .login-btn {
        text-align: center;
        padding-bottom: 10;
    }
    .support-btn {
        text-align: center;
        padding-bottom: 20px;
    }
    .our-heroes {
        margin-top: 0;
        margin-left: 0;
    }
    .learn-more-btn {
        text-align: center;
    }
    .register-now-btn {
        text-align: center;
    }
    .donate-now-btn {
        text-align: center;
    }
    .art-img {
        text-align: center;
        padding-top: 20px;
    }
    .music-img {
        text-align: center;
    }
    .news-img {
        width: 50%;
    }
    .news-img-div {
        text-align: center;
    }
    .news-content {
        text-align: center;
    }
    .copyright {
        text-align: center;
    }
    .footer-logo {
        text-align: center;
    }
    .medical-mission-img {
        width: 100%;
    }
}
@media only screen and (min-width: 765px) and (max-width: 990px) {
    .about {
        margin-top: 0;
        margin-left: 0;
    }
    .youth {
        margin-top: 0;
        margin-left: 0;
    }
    .efiks {
        margin-top: 0;
        margin-left: 0;
    }
    .img-1 {
        margin-top: -90 !important ;
    }
    .img-2 {
        margin-top: -20px;
        margin-left: 40px;
    }
    .img-3 {
        margin-top: -120 !important ;
        margin-left: 38px;
    }
    .img-4 {
        margin-top: -20px;
        margin-left: 40px;
    }
    .img-5 {
        margin-top: -93px !important ;
        margin-left: 40px;
    }
}
@media only screen and (min-width: 565px) and (max-width: 765px) {
    .img-1 {
        margin-top: -72px !important ;
        margin-left: 30px;
    }
    .img-2 {
        margin-top: -15px;
        margin-left: 35px;
    }
    .img-3 {
        margin-top: -95px !important ;
        margin-left: 30px;
    }
    .img-4 {
        margin-top: -15px;
        margin-left: 35px;
    }
    .img-5 {
        margin-top: -70 !important ;
        margin-left: 35px;
    }
}
@media only screen and (min-width: 390px) and (max-width: 565px) {
    .img-1 {
        margin-top: -65px !important ;
        margin-left: 30px;
    }
    .img-2 {
        margin-top: -15px;
        margin-left: 30px;
    }
    .img-3 {
        margin-top: -75px !important ;
        margin-left: 30px;
    }
    .img-4 {
        margin-top: -12px;
        margin-left: 32px;
    }
    .img-5 {
        margin-top: -65 !important ;
        margin-left: 30px;
    }
}
@media only screen and (min-width: 350px) and (max-width: 390px) {
    .img-1 {
        margin-top: -45px !important ;
        margin-left: 25px;
    }
    .img-2 {
        margin-top: -10;
        margin-left: 25px;
    }
    .img-3 {
        margin-top: -57 !important ;
        margin-left: 20px;
    }
    .img-4 {
        margin-top: -8px;
        margin-left: 25px;
    }
    .img-5 {
        margin-top: -42px !important ;
        margin-left: 30px;
    }
}
@media only screen and (max-width: 350px) {
    .img-1 {
        margin-top: -40px !important ;
        margin-left: 25px;
    }
    .img-2 {
        margin-top: -8px;
        margin-left: 25px;
    }
    .img-3 {
        margin-top: -52 !important ;
        margin-left: 20px;
    }
    .img-4 {
        margin-top: -8px;
        margin-left: 22px;
    }
    .img-5 {
        margin-top: -42 !important ;
        margin-left: 20px;
    }
}
@media only screen and (min-width: 770px) and (max-width: 1000px) {
    .navigation {
        text-align: right;
    }
    .navigation button {
        display: flex;
        margin-left: 440px;
        text-align: right;
    }
    #box-text-size {
        font-size: 25px;
        font-weight: bold;
    }
    #box-num {
        font-size: 20px;
        font-weight: bold;
    }
    #box-text-size-2 {
        font-size: 18px;
    }
}
@media only screen and (min-width: 990px) and (max-width: 1200px) {
    #img-3 {
        margin-top: -165px;
        margin-left: 50px;
        width: 150%;
    }
}
@media only screen and (min-width: 890px) and (max-width: 1330px) {
    .news-logo {
        margin-left: 700px;
    }
}
@media only screen and (min-width: 800px) and (max-width: 890px) {
    .news-logo {
        margin-left: 620px;
    }
}
@media only screen and (min-width: 770px) and (max-width: 800px) {
    .news-logo {
        margin-left: 600px;
    }
}
@media only screen and (min-width: 600px) and (max-width: 770px) {
    .news-logo {
        margin-left: 570px;
        margin-top: -190px;
    }
}