body{
  color: #333;
  background-color: #fff;
}

.add_space{
  margin-bottom: 25px;
}
  

.hero{
    background: url("./images/sic_big_image_1.jpg") no-repeat center center; 
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    /*background-size: cover;*/
    margin-bottom: 40px;
}

.mid_hero{
     background: url("./images/sic_big_image_2.jpg") no-repeat center center; 
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    

}

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
   margin-bottom: 50px;
}

.image h1 { 
   position: absolute; 
   top: 30%; 
   left: 20%; 
   width: 30%; 
   color: white;
}

.image_shariah a { 
   position: absolute; 
   top: 30%; 
   left: 19%; 
   width: 30%; 
   /*height: 12%;*/
   color: white;
   padding-top: 1%;
   -webkit-box-shadow: 3px 3px 5px 0px rgba(1,112,168,1);
    -moz-box-shadow: 3px 3px 5px 0px rgba(1,112,168,1);
    box-shadow: 3px 3px 5px 0px rgba(1,112,168,1);

    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border: 0px solid #000000;
}

.image_kids a { 
   position: absolute; 
   bottom: 10%; 
   left: 7%; 
   width: 30%; 
   height: 12%;
   color: white;
   padding-top: 1%;
   -webkit-box-shadow: 3px 3px 5px 0px rgba(7,104,48,1);
    -moz-box-shadow: 3px 3px 5px 0px rgba(7,104,48,1);
    box-shadow: 3px 3px 5px 0px rgba(7,104,48,1);

    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border: 0px solid #000000;
}



.enrol_button{
  height: 50px;
}
.enrol_button a {
   -webkit-box-shadow: 3px 3px 5px 0px rgba(153,153,153,1);
-moz-box-shadow: 3px 3px 5px 0px rgba(153,153,153,1);
box-shadow: 3px 3px 5px 0px rgba(153,153,153,1);

border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;

}





@media (min-width: 768px){
  .image h1 {    
      font-size: 300%;
  }
  .enrol_button span{
    font-size: 100%;
  }
}

@media (min-width: 992px){
    .image h1 {    
      font-size: 400%;
  }
  .enrol_button span{
    font-size: 200%;
  }
}

@media (min-width: 1200px){
  .image h1 {    
    font-size: 500%;
  }

  .btn_font{
    font-size: 300%;
    color: green;
  }
}

.row{
  /*margin-bottom: 20px;*/
  
}

.jumbotron{
  padding: 5em inherit;
}

.info_row { 
  width:50%;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: auto;
  margin-left: auto;
  text-align:center;
  color: #0f71a7;
  font-family: didot;
}

.bottom_info{
  color: #777;
  /*margin-top: 20px;*/
  margin-bottom: 20px;
}


.bottom_info h2{
  color: #0f71a7;
  margin-bottom: 30px;
}

@media (max-width: 768px){
  .footer {    
      text-align: center;
  }
}

.footer{
  background-color: #286090;
  color: #ccc;
  height: #100%;
  /*margin: 0 auto;*/

  margin-top: 50px;
  
  padding-top: 40px;
  padding-bottom: 40px;
}

.footer a{
  color: #71CDE0;
}

.footer p{
  color: #fff;
}

ul{
  list-style-type: none;
  margin-left: 0;
  list-style: none outside none;
  padding-left: 0;
}
ul .glyphicon{
  margin-right: 15px;
}

hr{
  margin-top: 0px;
  margin-bottom: 0px;
  height: 0px;
  border: 0;
  -webkit-box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.2);
  -moz-box-shadow:    0px 0px 0px 3px rgba(0,0,0,0.2);
  box-shadow:         0px 0px 0px 3px rgba(0,0,0,0.2);
}

.page_title{
  color: #0f71a7;
}

.mod_logo{
    margin-top: 10px;
    margin-left: 7px;
}

h3{
    margin-top: 0;
    margin-bottom: 15px;
    color: #0f71a7;
  }

  p{
    font-size: 1em;
  }


.course_info{
  height: 100%;
  overflow: hidden;
  margin-bottom: 40px;

  /*background-color:green*/
}

.course_info h4{
  margin-top: 40px;
}

.courses_text{
  height: 100%;
  background-color: white;
  overflow: auto;
  float: left;
}

.course_image img{
  
  height:175px;
  padding: 0 0 0 0;
}

.course_image{ 
  padding: 0 0 0 0;
}

@media (max-width: 768px){
    .ui-accordion .ui-accordion-content {
    padding: .5em .5em;
 
    }
    .course_container{
        width:100%;
    }
}
 
.col-xs-12{
    padding-right: 5px;
    padding-left: 5px;
    }



   
.course_box {
  position: relative;
   /* padding: 10px;
    border: 1px solid black;
    font-family: Helvetica;
    width: 100px;
    left: -200px;
    bottom: -100px;*/
}

.animate2{
  position: relative;
  opacity: 0;
}