#mobile-nav {display: none;}

.horNav {background-color: #7c1102;}

.content {margin-bottom: 2%;}

.knf, .about, .lectures, .rotateImg {box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}

.sidebar {margin-left: 1%;}
.about {margin-bottom: 1.5%;}

.knf {border-radius: 3px !important; margin-right: 0.5% !important;}
.about, .lectures {border-radius: 3px !important;}

.readMore {text-decoration: none; color: #7c1102;}
.readMore:hover {text-decoration: underline; color: #0000ff;}

h2 {margin-left: 3.2%;}
h4 {padding-top: 2%;}

.logo {width: 55%; height: auto;}
.rotateImg {width: 93%; margin-top: 1.1%; height: auto; display: block; margin-left: auto; margin-right: auto;}

.foundationImg {width: 90%; height: auto;}
/*.lectureImg {width: 60%; height: auto;}*/

.fb {width: 4%; height: auto;}

figure {}

figcaption {text-align: left; font-style: italic; padding-left: 5%; font-size: 0.9em;}

.footerBanner {background-color: #7c1102;}
.footer {font-size: 0.8em; color: #fff;}

/*nav.desktop-nav ul {list-style-type: none; margin: 0; padding: 0; width: 100%;}*/

nav.desktop-nav ul li a {display:table-cell; vertical-align: middle; height:108px;}

.nav-item a:hover {text-decoration: underline !important; color:  #f8eacb !important;}  /*#f8eacb*/


/*---------effect used to style the a element especially on hover-----------*/

/*----------------------------End of effect--------------------------------------------------------------------*/

/************************** extra small devices-portrait phones ***********************************************/
@media (max-width: 576px) {
    #desktop-nav {display: none;}
    .logo {width: 30%; height: auto; margin-bottom: 2.5%;}
    .footer p {text-align: center;}
    .rotateImg {width: 100%; height: auto;}
    figcaption {font-size: 0.8em;}
    .about {margin-top: 2%;}
    .knf {margin-left: 1%;}
}
/**************************************************************************************************************/

/**************************************** small devices-landscape phones****************************************/
@media (max-width:768px) {
    #desktop-nav {display: none;}
    .logo {width: 30%; height: auto; margin-bottom: 2.5%;}
    .footer p {text-align: center;}
    .rotateImg {width: 100%; height: auto;}
    figcaption {font-size: 0.8em;}
}
/**************************************************************************************************************/