@import url('https://fonts.googleapis.com/css?family=Roboto');
body{
    background-color: #f9f8f5;
  }
h1{
    text-align: center;
    color: #FFF;
    font-size:20px;
    font-family:elephant;
}
@media only screen and (max-width: 900px){
	ul{
		height: 350px;
		flex-direction: column;
		text-align: center;
	}
}

 @import url('https://fonts.googleapis.com/css?family=Roboto');
 body{
     font-family: 'Roboto', sans-serif;
}
 h1{
     text-align: center;
     color: #4181ee;
}

 .div1{/*div1 yenye ina contenir ma sieges*/
     width: 1000px;
     min-height: auto;
     background: #f9f8f5;
     padding: 10px;
	 margin: auto;
}
.div1 h1{
  font-size: 1.9rem;
	text-align: center;
	clear: both;
	color: rgb(91, 151, 141);
	text-shadow: -3px 3px 3px rgb(63, 29, 128), -1px 1px 1px red;
}
 .div1 h2{
    text-align: center;
    font-family: verdana;
    font-size: 0.9rem;
	color: #070107;
}

.div1 p{
  text-align: center;
  font-family: verdana;
  font-size: 1.0rem;
color: #070107;
}

.card h6{
  text-align: left;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 1.0rem;
color: #070107;
}
 .card{ /*card ya ma sieges*/
    width: 280px;
     height: 365px;
     background: #f0f8ff;
     padding: 10px;
     box-sizing: border-box;
     margin:10px;
     box-shadow: 5px 6px 18px -4px rgb(78, 78, 78);
	   margin-top: 5px;
     margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 3px 6px 3px;
}

.card h2 {font-size: 30px;
    justify-content: center;
}
.card h3 {font-size: 20px;
    justify-content: center;
}
.card9{ /*card ya repcof*/
  width: 340px;
   height: 355px;
   background: #f0f8ff;
   padding: 10px;
   box-sizing: border-box;
   margin:10px;
   box-shadow: 5px 6px 18px -4px rgb(78, 78, 78);
   margin-top: 5px;
   margin-left: -1px;
   -webkit-border-radius: 0 6px 6px 6px;
   -moz-border-radius: 0 6px 6px;
   border-radius: 0 3px 6px 3px;

}
.card9 h6 {
  font-size: 15px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: normal;
  color: #034349;
}
.card9 h3 {
  font-size: 20px;
  justify-content: center;
}
h3 {
	font-size:15px;
	color: #2aa55b;
	font-family: Bookman old style;
  justify-content: center;
}

h5 {
	font-size:13px;
	color: #222223;
	font-family: verdana;
  text-align: center;
}

.slide4-title{
   font-size: 40px;
   font-family: arial black;
}
.wrapper{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.card1{/*membre de la representation*/
    width: 380px;
    height: 120px;
     background: #242425;
     padding: 5px;
     box-sizing: border-box;
     color: rgb(15, 237, 52);
     font-size: 10px;
     margin:3px;
     box-shadow: 0px 2px 18px -4px rgb(7, 7, 7);
     box-shadow: 0px 2px 18px -4px pink;
     -webkit-border-radius: 0 6px 6px 6px;
     -moz-border-radius: 6px;
     border-radius: 6px;
  }
  .card1 select {
    background: #c9ccce;
    width: 320px;
    height: 50px;
    padding: 10px;
    font-size: 15px;
    font-weight: 500;
    border: none;
    box-shadow: 0px 3px 5px 0px #414041, 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    -webkit-appearance: button;
    outline: none;
    box-shadow: 0px 2px 18px -4px rgb(3, 3, 3);
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
  }

  .card2{/*membre de la representation*/
    width: 380px;
    height: 120px;
     background: #242425;
     padding: 5px;
     box-sizing: border-box;
     color: rgb(15, 237, 52);
     font-size: 10px;
     margin:3px;
     box-shadow: 0px 2px 18px -4px rgb(7, 7, 7);
     box-shadow: 0px 2px 18px -4px pink;
     -webkit-border-radius: 0 6px 6px 6px;
     -moz-border-radius: 6px;
     border-radius: 6px;
  }
  .card2 select {
    background: #c9ccce;
    width: 320px;
    height: 50px;
    padding: 10px;
    font-size: 15px;
    font-weight: 500;
    border: none;
    box-shadow: 0px 3px 5px 0px #414041, 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    -webkit-appearance: button;
    outline: none;
    box-shadow: 0px 2px 18px -4px rgb(3, 3, 3);
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
  }


  .card3{/*membre de la representation*/
    width: 380px;
    height: 120px;
     background: #242425;
     padding: 5px;
     box-sizing: border-box;
     color: rgb(15, 237, 52);
     font-size: 10px;
     margin:3px;
     box-shadow: 0px 2px 18px -4px rgb(7, 7, 7);
     box-shadow: 0px 2px 18px -4px pink;
     -webkit-border-radius: 0 6px 6px 6px;
     -moz-border-radius: 6px;
     border-radius: 6px;
  }
  .card3 select {
    background: #c9ccce;
    width: 320px;
    height: 50px;
    padding: 10px;
    font-size: 15px;
    font-weight: 500;
    border: none;
    box-shadow: 0px 3px 5px 0px #fcf7fc, 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    -webkit-appearance: button;
    outline: none;
    box-shadow: 0px 2px 18px -4px rgb(3, 3, 3);
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
  }


/* Make form look nice on smaller screens */
@media only screen and (max-width: 580px) {
  #contact-form{
     left: 3%;
     margin-right: 3%;
     width: 90%;
     margin-left: 0;
     padding-left: 3%;
     padding-right: 3%;
  }
}
h3 {margin-top:1em;}  

/* Hide select dropdown boxes at load (except for the course box) */
#bed-specialisation { display:none;}
#bed-year-level { display:none;}
#mteach-specialisation { display:none;}
#mteach-year-level { display:none;}

select {/*selectionner pour cencerne le croyant*/
  display: block;
  color:taupe; 
  background: #c9ccce;
  width: auto;
  height: 50px;
  padding: 10px;
  font-size: 16px;
  font-family: elephant;
  font-weight: 500;
  border: none;
  box-shadow: 0px 3px 5px 0px #04f14b,
    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
 }


/*	
	hii yote iko hapa chini inahusu tableau ya ba apotres (Table Responsive) */

 @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
 
 body {
   font-family: 'Open Sans', sans-serif;
   font-weight: 300;
   line-height: 1.0em;
   color:#A7A1AE;
   background-color:#f9f8f5;
 }
 
 h1 {
   font-size:3em; 
   font-weight: 300;
   line-height:1em;
   text-align: center;
   color: #4DC3FA;
 }
 
 h2 {
   font-size:1em; 
   font-weight: 300;
   text-align: center;
   display: block;
   line-height:1em;
   padding-bottom: 2em;
   color: #f8f5f5;
 }
 
 h2 a {
   font-weight: 700;
   text-transform: uppercase;
   color: #f6f6f6;
   text-decoration: none;
 }
 
 .container th h1 {
     font-weight: bold;
     font-size: 1em;
   text-align: left;
   color: #185875;
 }
 
 .container td {
     font-weight: normal;
     font-size: 1em;
   -webkit-box-shadow: 0 2px 2px -2px #0E1119;
      -moz-box-shadow: 0 2px 2px -2px #0E1119;
           box-shadow: 0 2px 2px -2px #0E1119;
 }
 
 .container {
     text-align: left;
     overflow: hidden;
     width: 90%;
     margin: 0 auto;
     display: table;
     
 }
 
 .container td, .container th {
     padding-bottom: 5px;
     padding-top: 5px;
   padding-left:6px;  
 }
 
 /* Background-color of the odd rows */
 .container tr:nth-child(odd) {
     background-color: #050801;
 }
 
 /* Background-color of the even rows */
 .container tr:nth-child(even) {
     background-color: #3d5050;
 }
 
 .container th {
     background-color: #84bcf4; /*cette couleur est pour la 1ere ligne horizontale*/
 }
 
 .container td:first-child { color: #f9f4f5; }
 
 .container tr:hover {
    background-color: #464A52;
 -webkit-box-shadow: 0 6px 6px -6px #0E1119;
      -moz-box-shadow: 0 6px 6px -6px #0E1119;
           box-shadow: 0 6px 6px -6px #0E1119;
 }
 
 .container td:hover {
   background-color: #fa0707ea;
   color: #f8f8f5;
   font-weight: bold;
   
   box-shadow: #03d4e7 -1px 1px, #079542 -2px 2px, #030782 -3px 3px, #f0ea30 -4px 4px, #5c025a -5px 5px, #090908 -6px 6px;
   transform: translate3d(6px, -6px, 0);
   
   transition-delay: 0s;
     transition-duration: 0.4s;
     transition-property: all;
   transition-timing-function: line;
 }
 
 @media (max-width: 800px) {
 .container td:nth-child(4),
 .container th:nth-child(4) { display: none; }
 }
 
 .footer {
  background: #000033;
  padding: 20px;
}
.h6{
  color: #f0f0f0;
}

.social {
  display: flex;
  justify-content: center;
}

.social i {
  font-size: 36px;
  color: rgb(9, 9, 243);
  padding: 13px;
}

.footerLogo {
  display: flex;
  justify-content: center;
}

.footerText {
  text-align: center;
  color: rgb(7, 151, 10);
}
.footerText h6{
  color: rgb(7, 151, 10);
}