.container {
  width: auto;
  text-align: center;
  justify-content: center;
  display: flex;
  background-color: rgb(238, 224, 224);
}

.container1 { /*Hii ni container ya ma cartes ya ma suiege*/
  width: auto;
  height: 360px;
  padding: 15px;
  background-color: rgb(238, 224, 224);
  display: inline-block;
  justify-content: center;
}

.container2 { /* card1 c'est pour la representation - sur la partie dropdown*/
  width: auto;
  height: auto;
  padding-bottom: 1px;
  background-color: rgb(238, 224, 224);
  display: inline-block;
  justify-content: center;
}

.container3 { /*c'est pour le Messager*/
  width: 100%;
  height: auto;
  padding-bottom: 1px;
  background-color: rgb(238, 224, 224);
  display: inline-block;
  justify-content: center;
}

.container4 {/*c'est pour le contact form*/
  width: auto;
  padding: 20px;
  text-align: center;
  justify-content: center;
  display: flex;
  background-color: rgb(16, 1, 1);
}

.container5 {/*c'est pour nos cantiques*/
  width: auto;
  padding: 5px;
  text-align: center;
  justify-content: center;
  display: flex;
  background-color: rgb(238, 224, 224);
}

.container5 p {/*c'est pour nos cantiques*/
  color: #f1f6f6;
}

.container6 {/*c'est pour nos cantiques dropdown */
  width: auto;
  height: 220px;
  padding: 5px;
  display: inline-block;
  justify-content: center;
  background-color: rgb(238, 224, 224);
}
.container7 {/*c'est pour les cantiques en texte*/
  width: 100%;
  height: 220px;
  padding: 5px;
  display: inline-block;
  justify-content: center;
  background-color: rgb(16, 1, 1);
}
.container8 {/*c'est pour les alphabet mu dictionnaire */
  width: auto;
  height: 220px;
  padding: 5px;
  padding-bottom: 10px;
  display: inline-block;
  justify-content: center;
  background-color: rgb(238, 224, 224);
}
.container9 { /*Hii ni container ya qui somme-nous*/
  width: auto;
  height: auto;
  padding: 15px;
  background-color: rgb(2, 2, 32);
  display: inline-block;
  justify-content: center;
}

 .cq {/*Hii ni container ya qui sommes-nous yenye inabeba photo ya wantashi*/
  text-align: center;
  width: auto;
  margin: 0 auto;
  padding: 10px;
  display: inline-block;
  display: flex;
  justify-content: center;
 }

.cq {
background-color: #02083f;
	display: flex;
	flex-wrap: wrap;
	flex-grow: 1;
	align-items: stretch;
}

.cq-image {
	flex-grow: 1;
	flex-shrink: 0;
	width: 100%;
	margin: .2em .5em;
	text-align: center;
	img {
		min-height: 100%;
		width: 100%;
	}
}

.cq-content {
	margin: .2em .5em;
	flex-shrink: 1; 
	flex-grow: 999; 
	flex-basis: 60%;
	font-size: .85em
}

 .card{ /*card ya ma sieges*/
   background: #f0f8ff;
   box-sizing: border-box;
   box-shadow: 1px 1px 4px -4px rgb(8, 8, 8);
   border-radius: 3px 3px 6px 3px;
   border: solid 1px rgba(110, 103, 103, 0.322);
   display: inline-block;
   height: 350px;
   margin-top: 5px;
   padding: 10px;
   text-align: left;
   text-shadow: none;
   -webkit-border-radius: 6px 6px 6px 6px;
   -moz-border-radius: 6px 6px 6px;
   width: 260px;
}

 .card1{ /* card1 c'est pour la representation - sur la partie dropdown*/
   align-items: center;
   background: #f0f8ff;
   border: solid 1px rgba(110, 103, 103, 0.322);
   box-sizing: border-box;
   box-shadow: 1px 1px 9px -4px rgba(17, 17, 17, 0.75);
   border-radius: 5px 5px 6px 5px;
	display: inline-block;
   height: 110px;
   justify-content: center;
   margin-top: 15px;
   padding-left: 6px;
   width: 270px;
}

.card1 h3{
   font-size: 0.9rem;
   margin-bottom: 25px;
   color: #f6f0f3;
   font-family: Georgia, 'Times New Roman', Times, serif;
   text-shadow: 1px 1px 1px 0px rgba(190, 213, 75, 0.75);
}
select {
   display: block;
   background: #f0f8ff;
   border: solid 0.1px rgba(247, 241, 241, 0.322);
   width: auto;
   height: 50px;
   margin-top: -20px;
   padding: 9px;
   font-size: 15px;
   font-family: Arial;
   font-weight: 500;
   border-radius: 3px 3px 3px 3px;
   box-shadow: 1px 1px 1px 1px #d6d4d4;
  }

 .card2 { /*card ya*/
   width: 500px;
   height: auto;
   display: inline-block;
   background: #f0f8ff;
   text-align: left;
   text-shadow: none;
   margin-top: 5px;
   padding: 10px;
   box-sizing: border-box;
   box-shadow: 5px 6px 18px -4px rgb(78, 78, 78);
   -webkit-border-radius: 0 6px 6px 6px;
   -moz-border-radius: 0 6px 6px;
   border-radius: 0 3px 6px 3px;
   border: solid 2px rgb(233, 242, 156);
}

 .card3{ /*card ya messager*/
   width: 480px;
   height: auto;
   display: inline-block;
   background: #82bef2;
   text-align: left;
   text-shadow: none;
   margin-top: 5px;
   padding: 5px;
   box-sizing: border-box;
   box-shadow: 5px 6px 18px -4px rgb(78, 78, 78);
   -webkit-border-radius: 0 6px 6px 6px;
   -moz-border-radius: 0 6px 6px;
   border-radius: 0 3px 6px 3px;
   border: solid 2px rgb(233, 242, 156);
}

 .card4{ /*card ya photo ya messager*/
   width: 490px;
   height: 100%;
   display: inline-block;
   background: #f0f8ff;
   background-size: cover;
   text-align: left;
   text-shadow: none;
   margin-top: 5px;
   padding: 1px;
   box-sizing: border-box;
   box-shadow: 5px 6px 18px -4px rgb(78, 78, 78);
   -webkit-border-radius: 0 6px 6px 6px;
   -moz-border-radius: 0 6px 6px;
   border-radius: 0 3px 6px 3px;
   border: solid 2px rgb(233, 242, 156);
}

.card4-image {
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 150px;
   background-size: cover;
	width: 100%px;
	margin: .2em .5em;
	text-align: center;
	img {
		min-height: 100%;
		width: 100%;
	}
}

@media only screen and (max-width: 580px) {
  .card3, .card4{
    max-width: 100%;
  }
}

 .card5{ /*card ya messager - suite 1 */
   width: 480px;
   height: auto;
   display: inline-block;
   background: #434648;
   text-shadow: none;
   margin-top: 5px; 
   padding: 5px;
   box-sizing: border-box;
   box-shadow: 5px 6px 18px -4px rgb(78, 78, 78);
   -webkit-border-radius: 0 6px 6px 6px;
   -moz-border-radius: 0 6px 6px;
   border-radius: 0 3px 6px 3px;
   border: solid 2px rgb(233, 242, 156);
}
.card5 p{
   text-align: left;
   color: rgba(248, 242, 242, 0.5);
}
.card p{
   color: #000;
}
 .card6{ /* card6 c'est pour nos cantiques - sur la partie dropdown*/
   width: 300px;
   height: 100px;
   margin: 8px;
   padding: 1px;
   background-color: #094b6c;
   box-sizing: border-box;
   justify-content: center;
	display: inline-block;
   align-items: center; 
   border: 1px solid;
   border-radius: 0.3rem;
   padding: 1rem;
}
.card6 h3{
   font-size: 0.9rem;
   margin-top: 1px;
   color: #f6f0f3;
   font-family: Georgia, 'Times New Roman', Times, serif;
   text-shadow: 1px 1px 1px 0px rgba(190, 213, 75, 0.75);
}

 .card7{ /*card ya ma sieges*/
   width: 260px;
   height: 350px;
   display: inline-block;
   background: #f0f8ff;
   text-align: left;
   text-shadow: none;
   margin-top: 5px;
   padding: 10px;
   box-sizing: border-box;
   box-shadow: 5px 6px 18px -4px rgb(78, 78, 78);
   -webkit-border-radius: 0 6px 6px 6px;
   -moz-border-radius: 0 6px 6px;
   border-radius: 0 3px 6px 3px;
   border: solid 2px rgb(233, 242, 156);
}
  .card8{ /*card ya ma alphabet mu disctionnaire*/
   width: 40px;
   height: 40px;
   display: inline-block;
   background-color: rgb(228, 219, 219);
   margin-left: 0px;
   text-align: center;
   padding-top: 1px;
   box-sizing: border-box;
   box-shadow: 2px 2px 3px -4px rgb(78, 78, 78);
   -webkit-border-radius: 0 6px 6px 6px;
   -moz-border-radius: 0 6px 6px;
   border-radius: 1px 1px 2px 2px;
   border: solid 1px rgb(189, 189, 178);
}
.card8-text { /*hii ni ya ma alphabet mu dictionnaire*/
  color:#1c33b8;
  font-size: 1.5rem;
  text-align: center;
  margin-top: 1px;
  font-weight: bolder;
  text-shadow:1px 1px 0 rgb(153, 153, 148);
}
 .card9{ /*card ya messager*/
   width: 340px;
   height: auto;
   display: inline-block;
   background: #191c1f;
   text-align: justify;
   text-shadow: none;
   margin-top: 5px;
   padding: 10px;
   box-sizing: border-box;
   box-shadow: 5px 6px 18px -4px rgb(11, 11, 11);
   -webkit-border-radius: 6px 6px 6px 6px;
   -moz-border-radius: 6px 6px 6px;
   border-radius: 6px 6px 6px 6px;
   border: solid 1px rgb(84, 84, 78);
 }
 .card5-title{
     margin-top: 0;
     font-size: 16px;
     font-weight: 600;
     letter-spacing: 1.2px;
}

#contact-form {
   background-color:rgba(203, 5, 5, 0.9);
   padding: 10px 20px 30px 20px;
   width:50%;
   margin: auto;
   border-radius:7px;
   -webkit-border-radius:7px;
   -moz-border-radius:7px;
}
#contact-form input,   
#contact-form select,   
#contact-form textarea,   
#contact-form label { 
   font-size: 15px;  
   margin-bottom: 2px;
   font-family: Arial, san-serif;
} 
#contact-form input,   
#contact-form select,   
#contact-form textarea { 
   width:100%;
   background: sky blue;
   border: 0; 
   -moz-border-radius: 4px;  
   -webkit-border-radius: 4px;  
   border-radius: 4px;
   margin-bottom: 25px;  
   padding: 4px;  
}  
#contact-form input:focus,   
#contact-form select:focus,   
#contact-form textarea:focus {  
   background-color: sky blue; 
}  
#contact-form textarea {
   width:100%;
   height: 150px;
}
#contact-form button[type="submit"] {
   cursor:pointer;
   width:100%;
   border:none;
   color:#e70808;
   margin:0 0 5px;
   padding:10px;
   border-radius:5px;
}
#contact-form button[type="submit"]:hover {
   background-image:linear-gradient(bottom, #9C215A 0%, #A82767 52%);
   background-image:-moz-linear-gradient(bottom, #9C215A 0%, #A82767 52%);
   background-image:-webkit-linear-gradient(bottom, #9C215A 0%, #A82767 52%);
   -webkit-transition:background 0.3s ease-in-out;
   -moz-transition:background 0.3s ease-in-out;
   transition:background-color 0.3s ease-in-out;
}
#contact-form button[type="submit"]:active {
   box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
}
input:required, textarea:required {  
   box-shadow: none;
   -moz-box-shadow: none;  
   -webkit-box-shadow: none;  
   -o-box-shadow: none;  
} 
#contact-form .required {  
   font-weight:bold;  
   color: #0455a7;      
}

/* Hide success/failure message
   (especially since the php is missing) */
#failure, #success {
   color: #6EA070; 
   display:none;  
}

/* 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;}