body {
background: rgba(0, 0, 0, 0) url("pamphlet.jpg") repeat fixed 0 0 / cover ;
  color: #333;
font-family: 'Metamorphous', cursive !important;
  font-size: 14px;
  line-height: 1.42857;
}
	
li {
  border: 1px solid;
  color: #fff;
  list-style: none;
  padding: 15px 15px 13px 20px;
}
.list-ul a {
  float: right;

  color: Red;
}
.Quraan {
  margin: 2% auto 0;
  width: 70%;
}
.pull-left.text-logo {
  color: #fff;
  font-size: 30px;
  margin-top: 7%;
}
.Quraan {
  margin-top: 3%;
  width: 70%;
}   
.text-center.text-logo {
  color: #fff;
  font-size: 42px;
  margin-top: 25px;
}
.text-center.logo{
  color: #fff;
    margin-top: 15px;
}
ol, ul {
  margin: 0;
  padding: 0;
}
.list-ul a:hover {
  background: #d46037 -moz-linear-gradient(center top , #d4c937, #a43010) no-repeat scroll 0 0;
  
}
.list-ul a {
    background-color: #D46037;
    /* For WebKit (Safari, Chrome, etc) */
    background: #D46037 -webkit-gradient(linear, left top, left bottom, from(#D4C937), to(#D46037)) no-repeat;
    /* Mozilla,Firefox/Gecko */
    background: #D46037 -moz-linear-gradient(top, #D4C937, #D46037) no-repeat;
    /* IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#D4C937, endColorstr=#D46037) no-repeat;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#D4C937, endColorstr=#D4C937)" no-repeat;
     border-radius: 2px;
    color: #fff;
    float: right;
    margin-top: -7px;
    padding: 6px 25px;
    text-decoration: none;
}

.pull-right.logo {
  float: right;
  position: relative;
  right: 280px;
}
.text-center.text-logo a {
  color: yellow;
  font-size: 16px;
  font-weight: 600;
  text-shadow: 2px 2px 2px #000;
}

@media only screen and (max-width : 768px) {
  .list-ul a {
  background: #d46037 -moz-linear-gradient(center top , #d4c937, #d46037) no-repeat scroll 0 0;
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  float: right;
  margin: -8px auto 0;
  padding: 6px 25px;
  text-align: left;
  text-decoration: none;
  }
  li {
border: 1px solid;
color: #fff;
list-style: outside none none;
margin: 0 auto;
padding: 20px 10px 15px;
text-align: center;
width: 100%;
}
}

@media only screen and (max-width : 640px){
.list-ul a {
  background: #d46037 -moz-linear-gradient(center top , #d4c937, #d46037) no-repeat scroll 0 0;
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  float: right;
  margin: -8px auto 0;
  padding: 6px 25px;
  text-align: left;
  text-decoration: none;
  }
  li {
border: 1px solid;
color: #fff;
list-style: outside none none;
margin: 0 auto;
padding: 20px 10px 15px;
text-align: center;
width: 100%;
}
.Quraan {
    min-width: 350px;
}

}


@media only screen and (max-width :480px)
{

li {
border: 1px solid;
color: #fff;
list-style: outside none none;
margin: 0 auto;
padding: 20px 10px 15px;
text-align: center;
width: 100%;
}
.list-ul a {
background: #d46037 -moz-linear-gradient(center top , #d4c937, #d46037) no-repeat scroll 0 0;
border-radius: 2px;
color: #fff;
display: inline-block;
float: none;
margin: 10px auto 0;
padding: 6px 25px;
text-align: left;
text-decoration: none;
}
.Quraan {
    width: 80%;
    margin: 3% 10%;
    min-width: auto;
    max-width: 325px;
}

}
@media only screen and (max-width : 320px)
{

li {
border: 1px solid;
color: #fff;
list-style: outside none none;
margin: 0 auto;
padding: 20px 10px 15px;
text-align: center;
width: 100%;
}
.list-ul a {
background: #d46037 -moz-linear-gradient(center top , #d4c937, #d46037) no-repeat scroll 0 0;
border-radius: 2px;
color: #fff;
display: inline-block;
float: none;
margin: 10px auto 0;
padding: 6px 25px;
text-align: left;
text-decoration: none;
}

}