html{
  background-color:#FCFCFC;
}

body{
  font-family:"Lato", Helvetica, Verdana, sans-serif;
  font-size:16px;
}

h4{
  text-transform:uppercase;
  font-size:1em;
  letter-spacing:2px;
  color: rgb(83, 156, 139);
}

#title img, #logo{
  max-height:60px;
}

#header{
  padding:0px;
}

#title{
  text-align:left;
  height:75px;
  display:table-cell;
  vertical-align:middle;
}

/*#title h1{
  font-size:2em;
    color: rgb(255, 68, 191);
}*/

#title img{
    margin-top: 10px;
}

@media (max-width: 767px) {
    #title h1 {
        font-size: 1.5em;
        text-align: center;
    }
}

#eLearningTOC{
  background-color:#FFFFFF;
  color:#666666;
  font-weight:normal;
  font-size:1em;
  min-height:475px;
  text-align:center;
  border: 1px solid #A31D23;
}

#eLearningTOC li{
  list-style:none;
  line-height:200%;
  font-size:0.9em;
  padding-top:5px;
  text-align:left;
}

#eLearningTOC img{
  margin:0 auto;
  max-height:75px;
  padding-top:10px;
}

#eLearningTOC h4{
  padding-top:0px;
  color:#A31D23;
  font-weight: bold;
}

#main{
  background:url(maarifamainimage.jpg) no-repeat;
  min-height:475px;
  background-size: cover;
  background-position:top center;
  color:#000000;
	background-color: #FFFFFF;
}

#main h1 {
  font-size:2.25em;
	padding-top: 30px;
    color: #FFFFFF;
    background-color: #000000;
    opacity: 0.8;
    padding : 20px;
/*
  text-shadow:0px 4px 6px #000000;
  -webkit-text-shadow:0px 4px 6px #000000;
  -moz-text-shadow:0px 4px 6px #000000;
*/
}

#main p {
	font-size: 1.25em;
	position: absolute;
	margin-left: -15px;
	bottom: 80px;
    color: #000000;
    background-color: #EAEAEA;
    opacity: 1;
    padding : 20px;
	width: 100%;
}

#main h1 .highlight {
    color: #37F2D5;
}

.mainText{
  font-size:0.9em;
  font-weight:300;
  line-height:150%;
  padding:5px;
  padding-left:5%;
  padding-right:20%;
  width:96%;
  height:30%;
  margin:0;
  display:inline-block;
  vertical-align:middle;
  padding-top:100px;
}

@media (max-width: 768px) {
    .mainText {
        font-size: 0.75em;
        padding-right: 0%;
        padding-left: 0%;
        line-height: 125%;
        width: 80%;
    }
    
    #main h1 {
        font-size: 1.75em;
    }
}

.sections{
  background-color:#333333;
  text-align:center;
  padding:5px;
  color:#FFFFFF;
  font-size:0.9em;
  margin-top:2px;
  margin-bottom:2px;
  border-right:2px solid #FFFFFF;
}

.sections img{
  max-height:50px;
}

.materials{
  margin-top:10px;
  margin-bottom:10px;
}

.btn{
  border-radius:0px;
  -webkit-border-radius:0px;
  -moz-border-radius:0px;
  text-transform:uppercase;
  font-size:0.75em;
  letter-spacing:1px;
}

#credits{
  font-size:0.75em;
  background-color:#F8D5AF;
  color:#000000;
  text-align:center;
  padding:10px;
	padding-top: 15px;
    margin-top: 10px;
}

form input, form button{
  margin-top:5px;
}

#footer{
  padding:5px;
  font-size:0.75em;
  color:#333333;
}

.prompt{
}

.error{
  color:#f18282;
  margin-top:10px;
  font-size:0.9em;
  line-height:110%;
}

#home{
  background-color:#000000;
}

.KPI-icons
{
  text-align: center;
}

.KPI-icons img
{
  height: 60px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.KPI-number
{
  text-align: center;
  color: #666666;
  font-weight: bold;
  line-height: 100%;
  padding-bottom: 0px;
}

.KPI-name
{
  text-align: center;
  color: #FFFFFF;
  font-size: 1em;
  line-height: 120%;
}

.KPI-name-dimmed
{
  text-align: center;
  color: #000000;
  font-size: 0.75em;
  display: none;
  line-height: 120%;
  color: #666666;
}

.KPI-placeholder
{
  height: 50px;
    position: absolute;
    bottom: 5%;
    left: 5%;
}

.executive-view
{
  margin-top: 75px;
}

.KPIs > div {
    height: 200px;
    text-align: center;
}

.KPIs > div > img {
    margin: 0px auto;
}

.vision, .mission {
    border: 1px solid rgb(83, 156, 139);
    background-color: #FAFAFA;
    margin-top: 10px;
    margin-bottom: 10px;
}


.vision h4, .mission h4 {
    color: rgb(83, 156, 139);
}

#logos img {
	max-height: 75px;
	margin: 0 auto;
}


#logos {
	margin-top: 20px;
	margin-bottom: 10px;
}