body{background:#FF3399;overflow: auto;background-attachment: fixed;float: left;width:auto;height: 100%;z-index:-999;-moz-background-size: cover;-webkit-background-size: cover;background-size: cover;cursor: url(http://cur.cursors-4u.net/symbols/sym-5/sym452.cur), progress !important;}
#date{color:gold;  font-size:15px;position: absolute; left: 0%;top:0%;width:100%;text-align:center;}
#menu_tohfa{top:8%;right:0%;width:100%;height:auto;display:inline-block;text-align:center;position:absolute;z-index:5;}
.div-tohfa{width:50px;height: auto;text-align:center;display:inline-block;}
.div-tohfa:hover{cursor:pointer;z-index:10;-ms-transform: scale(1.2,1.2); /* IE 9 */-webkit-transform: scale(1.2,1.2); /* Safari */transform: scale(1.2,1.2); /* Standard syntax */	-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */transition: width 2s, height 2s, transform 2s;} 
.icon-stop{top:2%;right:2%;width:auto;height:auto;display:none;position:absolute;z-index:9999;}
#zone_fadl_tohfa{top:18%;left:0%;width:100%;height:100%;position:absolute;z-index:0;}
#coran_fadl{top:1%;left:1%;width:98%;height:40%;position:absolute;font-size:10px;box-shadow: 0 8px 12px rgba(0,0,0, 1.7);z-index:1;}
#lecture,.fadl-coran-video{top:0%;left:0%;width:100%;height:100%;z-index:4;border: 4px inset #F0E68C;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}	
.fadl-coran-video{display:none;background:black;}
#zone_tohfa{top:42%;right:1%;width:98%;height:40%;position:absolute;font-size:10px;box-shadow: 0 8px 12px rgba(0,0,0, 1.7);z-index:1;}
#image-tohfa,#image-tartil,.tohfa-video{top:0%;right:0%;width:100%;height:100%;position:absolute;border: 4px inset #F0E68C;box-shadow: 0 4px 12px  rgba(0, 0,0, 1.7);z-index:4;}
#image-tohfa,.tohfa-video{display:none;background:black;}	
.icon-tohfa{display:none;top:2%;right:2%;width:40px;height:40px;position:absolute;z-index:2;border-radius:10px;box-shadow: 0 8px 12px rgba(0,0,0,1.7);z-index:10;}
#icon-video-tohfa{right:20%;}	
.icon-horof{top:-20%;right:2%;width:35px;height:35px;position:absolute;z-index:2;border-radius:100px;box-shadow: 0 8px 12px rgba(0,0,0,0.7);}
#retour_horof{display:none;border-radius:10px;z-index:3;}
#btn_on{position: fixed;top:2%;left:2%;width:auto;height:auto;z-index:200;border-radius:100px;background:transparent;border: 0px solid pink;}
#btn_off{display:none;position: fixed;top:2%;left:2%;width:auto;height:auto;z-index:200;border-radius:100px;background:transparent;border: 0px solid pink;}

.icon-horof:hover,#retour_horof:hover,.icon-tohfa:hover{cursor: pointer;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
#coran_horof{top:110%;left:0%;width:100%;height:40%;position:absolute;background:transparent;margin-bottom:10px;z-index:1;}
#gallery_horof{top:0%;left:0%;width:100%;height:auto;margin:auto;padding:auto;position:absolute;z-index:1;display:block;padding-left:0px;padding-right:0px;}
.video_horof{top:0%;left:0%;width:100%;height:auto;z-index:2;background:transparent;display:none;border: 4px inset #F0E68C;box-shadow: 0 4px 8px rgba(0,0,0,1.2);}
#back:hover,.icon-horof:hover,#stop_fadl:hover,#stop_tohfa:hover{cursor: pointer;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
#back{top:3px; right:3px;width:auto;height:auto;position:absolute;border: 2px outset #3DE5D1;box-shadow: 0 4px 12px  rgba(0, 0,0, 1.7);}
#haut:hover{cursor: pointer;}
#haut{top:90%; right:1%; width:30px;height:40px;position: fixed;display:none;z-index:100;} 
/*
	<section id="gallery_horof">	
		<div class="container"style="left:0%;top:0%;width:auto;height:auto;padding-left:0px;padding-top:0px;position:absolue;">
			<div id="myCarousel" class="carousel slide"style="width:100%;height:auto;position:absolue;border: 4px inset #F0E68C;box-shadow: 0 4px 8px rgba(0,0,0,1.2);" data-ride="carousel">
				<!-- Indicators -->
				<ol class="carousel-indicators">
					<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
					<li data-target="#myCarousel" data-slide-to="1"></li>
					<li data-target="#myCarousel" data-slide-to="2"></li>
					<li data-target="#myCarousel" data-slide-to="3"></li>
					<li data-target="#myCarousel" data-slide-to="4"></li>
					<li data-target="#myCarousel" data-slide-to="5"></li>
					<li data-target="#myCarousel" data-slide-to="6"></li>
					<li data-target="#myCarousel" data-slide-to="7"></li>
					<li data-target="#myCarousel" data-slide-to="8"></li>
					<li data-target="#myCarousel" data-slide-to="9"></li>
					<li data-target="#myCarousel" data-slide-to="10"></li>
				</ol>
			<!-- Wrapper for slides -->
				<div class="carousel-inner" role="listbox">
					<div class="item active"><img src="../image/Slide_horof0.png"></div>
					<div class="item"><img src="../image/Slide_horof1.png"></div>
					<div class="item"><img src="../image/Slide_horof2.png"></div>
					<div class="item"><img src="../image/Slide_horof3.png"></div>
					<div class="item"><img src="../image/Slide_horof4.png"></div>
					<div class="item"><img src="../image/Slide_horof5.png"></div>
					<div class="item"><img src="../image/Slide_horof6.png"></div>
					<div class="item"><img src="../image/Slide_horof7.png"></div>
					<div class="item"><img src="../image/Slide_horof8.png"></div>
					<div class="item"><img src="../image/Slide_horof9.png"></div>
					<div class="item"><img src="../image/Slide_horof10.png"></div>
				</div>
			<!-- Left and right controls -->
				<a class="left carousel-control" href="#myCarousel" style="color:red;width:5%;height:100%;" data-slide="next"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only"></span></a>
				<a class="right carousel-control" href="#myCarousel" style="color:red;width:5%;height:100%;" data-slide="prev"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only"></span></a>
			</div>
		</div>
	</section>