html, body {
 margin: 0;
 padding: 0;
 scroll-behavior: smooth;
 direction : rtl;
 }
 
.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
body { 
 background:url("../images/zakhrafa.jpg") no-repeat center center fixed;
 
 font-family: 'Amiri_r', 'Book Antiqua', sans-serif; 
 
 /*font-size: 100%;*/
 
 -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
 }
 
/*
h1 {
 font-size: 200%; 
 color: navy; 
 text-align: center;
 font-weight: bold;
 }
*/
h4 {
 font-size: 150%; 
 color: #336699; 
 
 font-family: 'ae_AlBattar', 'Book Antiqua', sans-serif; 
 
 }

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  /*display: none;*/
  text-align: center;
}
/* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */
.icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Style the icon bar links */
.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover {
  background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}


form {
  /*border: 4px solid #f1f1f1;*/
  direction:rtl;
  padding-top:10px;
}
input {
	font-family: 'Droid Arabic Naskh', Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
}
textarea {
	font-family: 'Amiri_r', Verdana, Arial, Helvetica, sans-serif;
}
select {
	font-family: 'ae_AlBattar', Verdana, Arial, Helvetica, sans-serif;

}

input[type=submit]:hover {
  opacity: 0.8;
  
}
label {
    font-size: 16px;
	font-family: 'AE Sindibad', Verdana, Arial, Helvetica, sans-serif;
}
img {
    max-width: 100%;
    height: auto;
    
}
th{
    text-align: right;
}
.divider1 {
    width: 200px;
    height: 2px;
    background: #336699; 
    margin: 0 auto;
}
.divider2 {
    width: 200px;
    height: 2px;
    background: #fff; 
    margin: 0 auto;
}
.divider3 {
    width: 100%;
    height: 10px;
    background: #fff; 
    margin: 0 auto;
}
.container-fluid {
	/*padding:70px;*/
}
.container {
	width:80%;
	background-color:white;
	box-shadow:0 0 5px #999;
	border-radius: 5px;
	padding:0 16px;
}
#entete {
	font-family : 'ae_AlBattar', Arial, Sans-Serif;
	font-weight: bold;
	font-size:14px;
	/*filter:alpha(opacity=50);*/
}
#tasnifat {
	margin-bottom : 20px;
}

.tahnia {
	position: absolute;
	top:170px;
	left:10%;
	margin-left:5px;
	height:240px;
	width:14%;
	background : url('../images/ramadan_albab.png') no-repeat center;
	background-size: 100% 240px;
	box-shadow:0 0 5px #999;
	border-radius: 5px;
	z-index:1;
}
#head_site {
	margin-top:60px;
    /*padding: 10px 0 10px 0;*/
}
section .heading {
    text-align: center;
    /*padding-bottom: 10px;*/
}
#menu_rc {
	cursor: pointer;
}

.card-header .accicon {
  float: center;
  font-size: 20px;  
  width: 1.2em;
}
.rotate {
    -moz-transition: all .5s linear;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
}
.rotate.down {
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

.btn-light .btn-primary .btn-info {
	font-family: 'Droid Arabic Naskh', Verdana, Arial, Helvetica, sans-serif;
	font-size:25px;
}


.btn .badge {
	top:-6px;
	margin-right:4px;
}

.card-body {
  padding:5px;

 }
/* MENU */
#mynavbar {
	direction:rtl;
}
.navbar {
    background-color: rgba(21, 163, 229, 0.7); 
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: bold;
}

.navbar .navbar-nav {
    
    text-align: center;
    font-size: 20px;
	
}
.navbar .navbar-collapse {
    text-align: center;
    
}
.navbar li a {
    color:#fff !important;
    margin: 6px;
	text-align:right;
	font-weight:bold;
}
.navbar li a:hover, .navbar-nav li.active a {
    color:#336699 !important;
    background-color: #fff !important;
	border-radius: 5px;
	
}
.navbar-light .navbar-nav .nav-link.active {
    background-color: #fff;
	color:#336699 !important;
}


.navbar-nav > li > .dropdown-menu {
 
background-color: rgba(21, 163, 229, 0.7);
 
}
 
.navbar-nav > li > .dropdown-menu > li > a {
 
color: #d7e2e9;
 
}
 
.navbar-nav > li > .dropdown-menu > li > a:hover,
 
.navbar-nav > li > .dropdown-menu > li > a:focus {
 
color: #e5dbdb;
 
background-color: #425766;

}

.dropdown-submenu {
  position: relative;
  direction:rtl;
  
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  margin-top: -1px;
  background-color: rgba(21, 163, 229, 0.7);
  padding-right:3em;
  padding-bottom:2em;
  list-style-image: url('../images/livre_ico.png');
}
.nav-item {
	white-space: nowrap;
}

.heading h4{
  text-align:center;
  margin:50px 0;
  color:#444;
  letter-spacing: 4px;
  font-family: 'amiri_b', Verdana, Arial, Helvetica, sans-serif;
  }
.my_container {
	border: 2px solid #336699;	
	/*background: url('../images/fond_zwaka.jpg');*/
	
}
/*#projett_site {
	margin-top: 90px;
}*/
.projet_site {
	position: absolute;
	top:170px;
	right:10%;
	margin-right:5px;
	height:240px;
	width:14%;
	background : url('../images/label_albab_d.gif') no-repeat center;
	background-size: 100% 240px;
	/*
	background : url('../images/ramadan2019.png') no-repeat center;
	background : url('../images/hijria_1441.jpg') no-repeat center;
	background : url('../images/higria_1438.png') no-repeat center;
	background : url('../images/aid_moubarak_said.jpg') no-repeat center;
	background : url('../images/tahnia_mawlid_1436.jpg') no-repeat center;
	*/
	box-shadow:0 0 5px #999;
	border-radius: 5px;
	z-index:1;
}
.projet_site:hover {
	border-radius: 10px;
	box-shadow:0 0 10px #999;
	opacity:0.9;
}
#col_left {
	margin-top: 5px;
	
}
#col_right {
	margin-top: 5px;
	
}
#col_right h4{
	font-size: 18px;
}

.banner_bahit {
	height: 200px;
	background : url('../images/banner_bahit_coran.jpg') no-repeat;
	background-size: 100% 100% ;
	background-position: center;
	margin-top:5px;
	margin-bottom:5px;
	margin-left:5px;
	border: 1px solid #ebebeb;
	border-radius: 10px;
	opacity:0.7;
}
.banner_bahit:hover {
	box-shadow:0 0 15px #888;
	opacity:1.2;
}
.banner_youtube {
	height: 200px;
	background : url('../images/youtube_ch.png') no-repeat;
	background-size: 100% 100% ;
	background-position: center;
	margin-top:5px;
	margin-bottom:5px;
	margin-left:5px;
	border: 1px solid #ebebeb;
	border-radius: 10px;
	opacity:0.7;
}
.banner_youtube:hover {
	box-shadow:0 0 15px #888;
	opacity:1.2;
}
#khotba {
	
	opacity:0.7;
}
#khotba:hover {
	border-radius: 10px;
	box-shadow:0 0 10px #999;
	opacity:0.9;
}
/* jadid */
#jadid {
	/* border: 4px solid #f1f1f1;*/
	font-family: 'AE Sindibad', Tahoma, Geneva, sans-serif;
    font-size: 14px;
}
#jadid h1 {
	font-family: 'Amiri_b', Tahoma, Geneva, sans-serif;
	font-size: 20px;
	color:#78bc6d;
}
#jadid h3 {
	font-size: 22px;
}
#jadid h4 {
	font-size: 18px;
}
#jadid p {
	font-size: 20px;
	font-family: 'Amiri_b', Tahoma, Geneva, sans-serif;
}
.jadid_titre {
	display:block;
	margin-left: auto;
	margin-right: auto;
	width: 340px;
	height: 50px;
	font-family: 'AE Sindibad', Tahoma, Geneva, sans-serif;
    font-size: 24px;
	background: url('../images/aya-frame.png') no-repeat;
	text-align:center;
	line-height:200%;
	margin-bottom:20px;

}
.maqalat_titre {
	display:block;
	
	margin-top:10px;
	font-family: 'AE Sindibad', Tahoma, Geneva, sans-serif;
    font-size: 16px;
	background: url('../images/cadre_1.jpg') center no-repeat;
	background-size:90% 90%;
	padding:10px 20px 10px 15px;
	text-align:center;
	
}
#maqal_titre {
	
	bottom:10px;
	width:50%;"
	
}
#maqal h5 {
	font-family : 'ae_AlBattar', Arial, Sans-Serif;
	font-size:22px;
	color:#78bc6d;
	
	padding: 10px;
}

#maqalat h5 {
	font-size: 17px;
	color:#336699;
	font-weight: bold;
}
#maqalat h4 {
	font-size: 22px;
	color:#336699;
	
}
#maqalat{
	margin-left: auto;
	margin-right: auto;
	line-height:200%;
}
.card-img-overlay {
	/*top:40px;*/
}
#tawqi3at {
	text-align:center;
}
#ta3lik h6 {
	font-weight : bold;
	color:#339999;
	background-color : #ccffbb;
}
.maqal_champ {
	margin-bottom:50px;
}
#maqal_contenu h1 {
	font-family : 'ae_AlBattar', Arial, Sans-Serif;
	font-size: 22px;
	color:#daa520;
	text-align:center; 
	Line-Height: 200%;
}
#maqal_contenu h2 {
	font-size: 20px;
	color:#336699;
	border-radius: 10px;
	box-shadow:0 0 20px #336699;
	width: 50%;
	padding: 10px;
}
#maqal_contenu h4 {
	font-size: 18px;
	color:#336699;
	font-family: 'AE Sindibad', Tahoma, Geneva, sans-serif;
	font-weight: bold;
}
#maqal_contenu h5 {
	font-size: 20px;
	color:#336699;
	font-family: 'Amiri_b', Tahoma, Geneva, sans-serif;
}
#maqal_contenu {
	font-family : 'Droid Arabic Naskh', 'Amiri_b', Arial, Sans-Serif;
	font-size: 16px;
	background-color:#EDF7F2;
	display:block;
	/*margin-top:40px;*/
	text-align:justify; 
	Line-Height: 300%;
	padding:10px;
	border-radius: 10px;
	box-shadow:0 0 10px #336699;
	color : #002F2F;
	-moz-user-select:none;
    -webkit-user-select:none;
}

.bout:hover {
    border-radius: 10px;
	box-shadow:0 0 10px #336699;
	opacity:0.7;
}

.profile-picture {
    text-align: center;
    margin: 0 auto;
    float:none;
}
#about .heading h1{
    color: #fff;
    
}
#about .heading h3{
    color: #000;
}

#projet {
    background: #fff;
}
#projet .heading h2 {
    color:#336699;
 
}
#projet .heading h2 {
    color:#336699;

}

#espace_khotab {
	background : linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url('../images/rosasses.jpg') center center;
	/*opacity:0.7;*/
	margin-left: auto;
	margin-right: auto;
	margin:10px;
	box-shadow:0 0 10px #999;
	border: 1px solid #bdebcc;
	border-radius: 10px;
	padding-bottom:50px;
	text-align:right;
}
#espace_khotab h2{
	text-align:center;
	font-family : 'ae_AlBattar', Arial, Sans-Serif;
	font-size: 18px;
}
#espace_khotab  h1{
	font-family : 'Amiri_b', Arial, Sans-Serif;
	font-size: 20px;
	text-align:center;
	background-image: url('../images/aya-frame.png');
	background-size: 70% 70% ;
	background-position: center;
	background-repeat: no-repeat;
	line-height: 480%;
}
#espace_khotab ul {
	margin:0;
	margin-bottom: 5px;
	font-family: 'AE Sindibad', Tahoma, Geneva, sans-serif;
	font-family: 'Droid Arabic Kufi', serif;
	font-size: 14px;
	font-weight: bold;
	/*background-color:#7FC6BC;*/
	
}
.img_container {
  position: relative;
  width: 100%;
  margin-top:10px;
  /*max-width: 400px;*/
}
.img_container img {
  width: 100%;
  height: auto;
}

.img_container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}
.img_container .btn:hover {
  background-color: black;
}
#footer {
    background: #333;
    padding: 20px 0 40px;
}
#footer .glyphicon {
    font-size: 15px;
    margin:20px;
    color:#336699;
    height: 30px;
}

#footer .glyphicon:hover {
    font-size: 27px;
    
}
#footer h5 {
    color:#fff;
    font-weight: normal;
	font-size: 12px;
}
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  left: 220px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  /*background-color: red;   Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
  background-image:url("../images/hfleche.png");
  background-attachment:scroll;
  background-repeat : no-repeat;
  background-position: top;
  background-size:  cover;
  box-shadow: 0 0 3pt 2pt #82a0c2;
}

#myBtn:hover {
  box-shadow: 0 0 3pt 2pt red;
}
.form-group {
    padding: 0 20px 0 20px;
    /* width: 50%;*/
}

.div_center {
    text-align: center;
}

.alert {
	margin : 15px 20px 15px 45px;
}



/*
.fa {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

.fa:hover {
    opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}

/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-envelope {
  background: #3B5998;
  color: white;
}*/

carousel-indicators li {
     text-indent: 0px;
     text-align: center;
     color: red;
     margin: 0 2px;
     width: 30px;
     height: 30px;
     border: none;
     border-radius: 100%;
     line-height: 30px;
     background-color: #999;
     transition: all 0.25s ease;
}
 .carousel-indicators .active, .hover {
     margin: 0 2px;
     width: 30px;
     /*height: 30px;*/
     background-color: #337ab7;
}
.panel-heading {
    cursor: pointer;
}
/* CSS Method for adding Font Awesome Chevron Icons */
 .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family:'FontAwesome';
    content:"\f146";
    float: right;
    color: inherit;
}
.panel-heading.collapsed .accordion-toggle:after {
    /* symbol for "collapsed" panels */
    content:"\f0fe";
}


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

img {
	background-size: 50% ;
}
section jadid{
	margin-top:0px;
    /*padding: 10px 0 10px 0;*/
}
#resultat h5 {
	font-size: 14px;	
}
#myBtn {
	left:20px;
	bottom: 30px;
}

#pied_page h5 {
	font-size: 14px;
}
#espace_khotab {
	background : none;
}
audio {
	width:200;
}
#maqal_contenu {
	Line-Height: 200%;
	
}
#maqal_contenu h1 {
	Line-Height: 150%;
}
#maqal_contenu h2 {
	font-size: 18px;
	Line-Height: 150%;
	width: 100%;
}
#maqal h6 {
	font-size: 14px;
}

#maqal_titre {
	bottom:20px;
	width:100%;"
}
.container {
	width:100%;
}
#myCarousel {
	
}
#jadid p {
	font-size: 16px;
}
.navbar li a {
    text-align: center;
}

}
@media (max-width:767px) and (orientation: landscape) {
    #head_right {
        display: none;
    }
	.banner {
        display: none;
    }
}
@media (min-width:767px) and (orientation: landscape) {	
	.container {
		max-width:100%;
	}
}