@import url('https://fonts.googleapis.com/css?family=Cairo:400,600,700&display=swap&subset=arabic');
html {
	margin-top: 0 !important;	 
}body {
    font-family: 'Cairo';
    margin: 0px;
    background:#fff;
    text-align: left;
    direction: ltr;
}
.site {
    overflow: hidden;
}
 #MobileNavigation{display:none;}
 .container {
    max-width: 1701px;
    width: 100%;
    margin: 0 auto;
}
section.madina .ContentPage.container {
        max-width: 1640px;
    }
.header {
        position: relative;
    z-index: 99;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    background: #132C29;
    height: 80px;
    display: block;
}
.header .container{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.logosite, .blockmenu {
    display: inline-block;
    float: right;
}
.logosite{margin-top: 7px;}
.lng{
    display: inline-block;
    float: right;
    padding: 3px 20px;
    position: relative;
}
.lng ul{
	position: absolute;
	top: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
	background: #fff;
	width: 73px;
	display: none;
}
.lng ul li{display:block;}
.lng ul li a{
    display: block;
    padding: 5px 14px;
    color: #000;
}
.lng ul li a:hover{
	background: #000;
	color: #fff;
}
.lng > a{
	background: url(../images/lang.png) no-repeat center left;
	height: 17px;
	min-width: 17px;
	display: block;
	color: #fff;
	/* font-weight: bold; */
	font-size: 13px;
	padding-left: 29px;
}
.lng:hover ul{display:block}
.blockmenu {
    position: relative;
    z-index: 1;
    width: max-content;
    width: -moz-max-content;
    margin: 0 auto;
    float: none;
    display: flex;
    padding-top: 13px;
    flex-direction: row-reverse;
}
.logoleft {
    /* position: absolute; */
    /* margin-left: 21px; */
    margin-top: 11px;
    float: right;
}
.blockmenu ul.mod-list.nav {
    text-align: center;
    float: none;
    margin: 0px auto;
    padding: 0 !important;
}
.header .mod-list.nav > li {
    display: inline-block;
    float: left;
    flex: 1 0;
    padding: 0 5px;
}
.header .mod-list.nav > li > a {
    font-size: 19px;
    color: #ffffff;
    display: block;
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 5px 5px;
    background: none !important;
    outline: none;
}
.mod-list.nav > li.active > a, .mod-list.nav > li > a:hover {
    color: #E3AC14;
    background: transparent;
}
/*************/

.centered {/*
  display: flex;
  align-items: center;
  justify-content: center;
  text-align:center;*/
}
.content-wrapper {
	width: 100%;
	height: 100%;
	color: #fff;
	text-transform: uppercase;
	will-change: transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
	transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
	z-index: 99;
	position: inherit;
}
#landing .content-wrapper{
  color:#333;
}
.content-title {
  font-size: 36px;
  line-height: 1.4;
  margin: 0 0 40px;
}
p{
}
#title{
	font-size: 4vh;
	color: #666;
	margin: 20px 0 0 0;
}
.section{
	position: fixed;
	width: 100%;
	/* max-width: 1920px; */
	margin: 0 auto;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	animation: 1s linear;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
	/* background-size: cover; */
	background-repeat: no-repeat;
	background-position: center center;
}
 
section#contact{  
  background: url(../images/sky.png)  no-repeat top center;
}
section#contact .maskbg:before{background-position:top center}
.section#landing:before{
	content:'';
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	z-index: -1;
	width:100%;
	height:550px;
	background: url(../images/cloud.png) repeat-x bottom center;
	background-size:100%;
	
}

.content-wrapper{}
.content-wrapper:before{
	
}
.zoom{
	width:100%;
	overflow:hidden;
	height:100%;
	position: relative;
}
.siel, .siel{
	position:absolute;
	width: 60%;
}
.siel1{
	top: 18%;
	right:0;
	transform: translateX(50%);
}
.siel2{
	bottom:0;
	/* transform: translateX(50%); */
	left: -17%;
}
.oiseau{
	position:absolute;
	/* left:0; */
	right: 42%;
	margin:0 auto;
	bottom:50px;
/*	animation-name: oiseau;
	animation-duration: 19s;
	animation-delay: 50s;*/
}
.logo{
	/* width:max-content; */
	display: flex;
	margin:0 auto;
	text-align:center;
	position: absolute;
	left: 0;
	right: 0;
	top: 282px;
	justify-content: center;
	align-items: center;
}
 
img.logointro.small {
  /* position: absolute; */
  /* transform: translate(-50%, -50%); */
  width: 58%;
  max-width:189px;
  /* transition: all 0.8s ease; */
}
.logo-animate {
  width: 300px !important;
  animation: scaleDown 1.2s forwards;
}

@keyframes scaleDown {
  0% { width: 400px; }
  100% { width: 160px; }
}


div#fp-nav {
    /* position: absolute; */
    position: relative;
    /* top: 80px; */
    top: 0;
    width: 100%;
    left: 0;
    margin-top: 0 !important;
    right: 0 !important;
    background: #ffffff;
    min-height: 76px;
    display: flex !important;
    align-content: center;
    justify-content: center;
    /* padding-top: 15px; */
    flex-direction: row-reverse;
    z-index: 90;
    box-shadow: 1px 3px 20px rgb(255 255 255);
}
.madina-mode div#fp-nav{box-shadow: 1px 20px 20px rgb(255 255 255);}
body.fp-viewing-our-work #fp-nav, body.fp-viewing-home #fp-nav{display: none !important;}
#fp-nav ul {
 /*   text-align: center;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;*/
	
}
#fp-nav ul {
    margin-top: 15px;
    display: flex;
    position: relative;
    /* height: 15px; */
    cursor: pointer;
    flex-shrink: 0;
    /* float: left; */
    /* color:#000; */
    direction: ltr;
    /* padding: 0; */
}
div#fp-nav li {
    display: inline-block;
    float: none;
    margin: 0;
} 
 div#fp-nav ul li:nth-child(3) .fp-tooltip{text-align: left;color:#156E3D;padding-right: 60px;padding-left: 10px;opacity: 0.4;    font-weight: bold;} 
.madina-mode div#fp-nav ul li:nth-child(1) .fp-tooltip{opacity: 0.4;}
 div#fp-nav  ul li:nth-child(1) .fp-tooltip{text-align: right;color:#E3AC14;padding-left: 4px;padding-right: 10px;    font-weight: bold;}
.madina-mode div#fp-nav ul li:nth-child(3) .fp-tooltip{opacity: 1;}

 div#fp-nav  ul li:nth-child(3) .fp-tooltip:before{
	 content: '';
	 background: url(../images/icon_nabawi.png) no-repeat;
	 background-size: 100%;
	 position:absolute;
	 right: 0;
	 top: -23px;
	 width: 44px;
	 height: 50px;
	}
 div#fp-nav ul li:nth-child(1) .fp-tooltip:before{
	 content: '';
	 background: url(../images/icon_haram.png) no-repeat;
	 background-size: 100%;
	 position:absolute;
	 width: 31px;
	 height: 62px;
	 left: 5px;
	 top: -23px;
	}
/*div#fp-nav ul li:first-child, div#fp-nav ul li:last-child{display:none !important}*/
button#theme-toggle-btn {
    background: transparent;
    border: 0;
    outline: none;
}
.picto-item {
    position: relative;
    cursor: help;
}
li.-mode{width:45px}
.theme-switch i {
    display: inline-block;
    position: relative;
    width: 45px;
    height: 18px;
    border-radius: 2rem;
    background-color: #e5b021;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    float: right;
    margin-top: 2px;
}
.madina-mode .theme-switch i { background-color: #376c5f;}
 
.theme-switch i:before {
    content: "";
    display: block;
    opacity: 1;
    width: 17px;
    height: 16px;
    margin-top: 0px;
    background-color: #fff;
    box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
    position: absolute;
    border-radius: 2rem;
    transition: all 0.2s;
    left: 3px;
}

.madina-mode .theme-switch i:before {
    left: 26px;
}
/***************************/
.siel1{
	top: 18%;
	right:0;
	transform: translateX(0);
}
.siel2_a{
	bottom:0;
	transform: translateX(0);
	left: -17%;
}
section.makkah {
    background: url(../images/sky.png)  no-repeat top center;
    background-size:100%;
}
section.makkah:before, section.makkah:after, section.madina:before, section.madina:after{content:'';position:absolute;}
section.makkah:before{
  background: url(../images/kaaba_web.png) no-repeat bottom center;
  /* width: 100%; */
  height: 100%;
  right: -43px;
  left: 0;
  bottom: 0;
  background-size: 100%;
}
section.makkah:after{
  background: url(../images/maqam_ibrahim.png) no-repeat bottom left;
  width: 190px;
  height: 366px;
  bottom: -16px;
  left: 29%;
  background-size: 100%;
}
 section.makkah .maskbg{
	background: url(../images/arce_makkah_2.png) repeat-x top 40px center;
	z-index: 9;
}
 section.makkah .maskbg:after{
	content:'';
	position:absolute;
	left:0;
	right:0;
	bottom: 0;
	width:100%;
	z-index: 30;
	background: url(../images/cloud.png) repeat-x bottom center;
	height: 550px;
	background-size: 100%;
}

section.madina {
    background: url(../images/sky_madina.png)  no-repeat top center;
    background-size: cover;
}
 
section.madina:before{
  background: url(../images/gree_arche.png) no-repeat bottom right;
  width: 569px;
  height: 826px;
  right: 35%;
  bottom: 0;
  background-size: 100%;
}
section.madina:after{
  background: url(../images/madinah_mosque.png) no-repeat bottom left;
  width: 294px;
  height: 545px;
  bottom: 0px;
  left: 29%;
  background-size: 100%;
  z-index: 0;
}
section.madina .maskbg{
	 background: url(../images/cloud_madina.png) repeat-x bottom -42px center;
	 z-index: 8;
	 background-size: 100%;
}
section.madina .maskbg:after{
	 content:'';
	 position:absolute;
	 width:100%;
	 height: 100%;
	 background: url(../images/arche_masjid_nabawi.png) repeat-x top 80px center;
	 left:0;
	 right:0;
	 top:0;
	 bottom: 0;
	 background-size: 100%;
}
.makah_arc{margin:0 auto;text-align:center;width:100%}
.maskbg{position:relative;overflow: hidden;width: 100%;height: 100vh;}
.maskbg:before{
	content:'';
	position:absolute;
	left:0;
	right:0;
	top: 0;
	width:100%;
	z-index: 30;
	height: 100%;
	background-size: 100%;
}
section.makkah .maskbg:before{
    background: url(../images/sunlight_2.png) repeat-x top 75px center;background-size: 100%;
}
section.madina .maskbg:before{background: url(../images/sunlight_2.png) repeat-x top 127px center;background-size: 210%;}

/******************/
.LinkBoxA, .LinkBoxB{
	display:block;
	max-width: 338px;
	margin: 0 auto;
}
.Box, .BoxB{
	display:block;
	position:relative;
	border-radius:10px;
	color: #fff;
	text-align: left;
	margin-bottom: 10px;
	font-size: 15px;
	text-decoration: none !important;
	overflow: hidden;
	text-transform: none;
}
.Box{
		/* background-color: #af995d !important; */
}
.BoxB{
}
.Box:hover div{
	background-color: #ffffff !important;
	color: #af995d;
}

.BoxB:hover div{
	background-color: #ffffff !important;
	color: #af995d;
}

.madina .BoxB:hover div{
	background-color: #ffffff !important;
	color: #156e3d;
}
.Box1 span{
	background: url(../images/box1.png) no-repeat  right 20px center;
}
.Box2 span{
	background: url(../images/box2.png) no-repeat right 20px center;
}
.Box3 span{
	background: url(../images/box3.png) no-repeat  right 20px center;
}
.Box4 span{
	background: url(../images/ahadith.png) no-repeat  right 20px center;
}
.Box5 span{
	background: url(../images/ad3ya.png) no-repeat  right 20px center;
}
.Box6 span{
	background: url(../images/mis7af.png) no-repeat  right 20px center;
}
.Box7{margin-top:15px;}
.Box7 span{
	background: url(../images/arafa.png) no-repeat  right 20px center;
}
.Box span, .BoxB span{
	display:block;
	/* margin: 0 0 20px; */
	padding:16px 0 0;
	font-weight:bold;
	padding: 25px 70px 16px 22px;
	text-align: center;
	text-transform: uppercase;
	min-height: 74px;
}

.makkah .Box span {background-color: #af995d !important; }
.madina .BoxB span {background-color: #156e3d !important; }
.Box div, .BoxB div{
	display:block;
	padding:16px 0 0;
	padding: 14px 28px 18px;
	color: #5e4215;
	/* color: #fff; */
}
.makkah .Box div {background: rgb(227 172 20 / 23%); }
.madina .BoxB div {background: rgb(21 110 61 / 35%);color: #156e3d;color: #fff;}

.Box a, .BoxB a{position:absolute;left:0;top:0;width:100%;height:100%}
.LinkBox2{
	display: flex;
	margin: 20px auto 10px;
	text-align:center;
	max-width: 360px;
}
.LinkBox2 a{
	display:block;
	width: 29%;
	padding-bottom: 10px;
	padding-top: 82px;
	padding-right: 5px;
	padding-left: 5px;
	margin: 0 2% 10px;
	float: right;
	color:#af995d;
	background-color: #fff !important;
	border-radius: 10px;
	text-decoration:none !important;
	position:relative
}

.LinkBox2.LinkBoxB a{
     color:#0f4e2b
}
.LinkBox2 a:hover{
    background-color: #9d7332 !important;color:#fff
}

.LinkBox2.LinkBoxB a:hover{
    background-color: #0f4e2b !important;color:#fff
}
.LinkBox2 a:before{
	content:'';position:absolute;top:10px;left:0;right:0;width:61px;height:61px;margin:0 auto
}
.LinkBox2 .Box10:before{
	background: url(../images/fatiha_b.png) no-repeat top  center;background-size:100%;
}
.LinkBox2 .Box11:before{
	background: url(../images/risala_b.png) no-repeat top center;
	background-size:100%;
}
.LinkBox2 .Box12:before{
	background:url(../images/makraa_b.png) no-repeat top center;background-size:100%;
}
.LinkBox2.LinkBoxB .Box10:before{
	background: url(../images/fatiha_a.png) no-repeat top  center;background-size:100%;
}
.LinkBox2.LinkBoxB .Box11:before{
	background:url(../images/risala_a.png) no-repeat top  center;background-size:100%;
}
.LinkBox2.LinkBoxB .Box12:before{
	background:url(../images/makraa_a.png) no-repeat top  center;background-size:100%;
}
.LinkBox2 .Box10:hover:before{
	background: url(../images/fatiha_hover.png) no-repeat top  center;background-size:100%;
}
.LinkBox2 .Box11:hover:before{
	background:url(../images/risala_hover.png) no-repeat top  center;background-size:100%;
}
.LinkBox2 .Box12:hover:before{
	background:url(../images/makraa_hover.png) no-repeat top  center;background-size:100%;
}
.CadreTime {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 339px;
    margin: 0 auto 0;
}

.topCadre {
    background: rgb(255 255 255 / 76%);
    display: block;
    width: 100%;
    padding: 32px 0 30px;
    color: #9D7331;
    font-size: 25px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
}

.madina .topCadre {color:#156e3d}
.topCadre h2 {
    color: #E3AC14;
    font-size: 55px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 10px;
    padding: 0;
}
.madina .topCadre h2 {color:#156e3d}
.basCadre {
    display: block;
    background: rgb(227 172 20 / 75%);
    width: 100%;
    padding: 16px 15px;
    color: #fff;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    font-size: 17px;
    text-align: center;
}
#imamName {/* font-weight:bold; */}
.madina .basCadre{background: rgb(21 110 61 / 35%);}
.madina .basCadre, .madina .basCadre strong {/* color:#156e3d; */}
.basCadre strong {
    color: #fff;
}
.Boxlive{
	background:#fff;
	border-radius: 50px;
	margin-top: 14px;
	width: 100%;
	min-height: 44px;
	font-size: 12px;
	color: #AF995D;
	text-align: center;
	padding: 8px 4px;
	font-weight: bold;
	position: relative;
	display: flex;
}
.Boxlive a{display:inline-block;padding-top: 0px;text-align: center;min-height: 37px;color: #AF995D;cursor: pointer;}
.Boxlive a:first-child{background: url(../images/video.svg) no-repeat left center;padding-left: 40px;border-right: 1px solid #AF995D;padding-right: 10px;}
.Boxlive a:last-child{background: url(../images/video.svg) no-repeat right center;padding-right: 40px;padding-left: 10px;}

.madina-mode .Boxlive, .madina-mode .Boxlive a{color: #0F4E2B;}
.madina-mode .Boxlive a:first-child{border-right: 1px solid #0F4E2B;}
a.text_Boxlive.inactive {
    color: grey;
    opacity: 0.5;
    cursor: default;
}
.ContentPage {
    margin-top: 520px;
    box-sizing:border-Box;
    padding-bottom: 130px;
}
/***************************/
.section:nth-child(4){
	 
}
.section.fp-completely.active{
	z-index: 20;
}
.section.active .content-wrapper{
  transform:translateX(-20vh);
	transition: all 5s cubic-bezier(0.22, 0.44, 0, 1) !important;
}
.section.fp-completely .content-wrapper{
	transform:translateX(20vh);
	transition: all 5s cubic-bezier(0.22, 0.44, 0, 1) !important;
}
.section.fp-completely.active .content-wrapper{
	margin-top: 0;
	transform:translateY(0);
	position: relative;
	z-index: 40;
	overflow-y: auto;
}
.section.prev.down{
	animation-name: toup;
}
.section.active.up{
	animation-name: fromup;
}
.section.active.down{
	animation-name: fromdown;
	/*z-index: 12;*/
}
.section.next.up{
	animation-name: todown;
	z-index: 12;
}
 
@keyframes fromdown {
  from {
  	transform:translateX(50%);
  }
  100% {
  	transform:translateX(0%);
  }
}

@keyframes toup {
  from {
		z-index: 20;
  	transform:translateX(0%);
  }
  100% {
		z-index: 20;
  	transform:translateX(-100%);
  }
}

@keyframes fromup {
  from {
		z-index: 20;
  	transform:translateX(-100%);
  }
  100% {
		z-index: 20;
  	transform:translateY(0%);
  }
}
@keyframes todown {
  from {
  	transform:translateX(0%);
  }
  100% {
  	transform:translateX(50%);
  }
}


.parapage ::-webkit-scrollbar {
  width: 2px;
  height: 10px;
}

.parapage ::-webkit-scrollbar-thumb {
  background: transparent;
}

.parapage ::-webkit-scrollbar-track {
  background: transparent;
}

div#navigationMenu {
    display: none;
}
.mobile-nav{
		display:none
	}
	
nav.mobile-nav{margin: 0;}
nav.mobile-nav a {
    color: #fff;
    margin: 0px 30px 0;
    font-size: 23px;
}
.col-md-4.mobile {
    display: none;
}
.contact .ContentPage {
    margin-top: 180px;
}
.Display_form {
    display: block;
    max-width: 500px;
    margin: 0 auto 200px;
}

input,textarea {
    width: 100%;
    border-radius: 5px;
    border: 1px solid #ccc;
    min-height: 50px;
    padding: 5px 10px;
}

h3.content-title {
    text-align: center;
    font-weight: bold;
}

button.btn.jsn-form-submit {
    background: #000;
    color: #fff;
    margin: 20px auto 0;
    display: block;
    float: none;
    padding: 5px 40px 7px;
    font-size: 20px;
}

button.btn.jsn-form-submit:hover {
    background: #a37722;
    color: #fff;
}

.control-group label {
    display: none;
}

.control-group {
    margin: 0 0 15px;
}

.LinkBox2.mobile {
    display: none;
}
div#countdown_m, div#countdown {
    font-size: 46px;
    text-align: center;
    font-family: monospace;
}
/********************/
@media(max-width:1700px){
	section.makkah .maskbg {
    background-size: 100%;
}
	section.makkah:before { 
    bottom: -60px; 
}
	section.makkah:after {
    background-size: 66%;
}
	section.makkah .maskbg:after {
    background-position: bottom -60px center !important;
}

section.madina:before {
    background-size: 77%;
}
	
section.madina:after {
    background-size: 77%;
    left: 33%;
}
}
@media(max-width:1700px){
	.ContentPage.container {
    max-width: 1500px; 
}
	.logo {
    top: 250px;
}
}
@media(max-width:1500px){
	.ContentPage.container {
    max-width: 1280px; 
}
		.logo {
    top: 230px;
}
	.LinkBoxA, .LinkBoxB { 
	    max-width: 300px; 
	}
	.CadreTime { 
	    max-width: 300px; 
	}
	.LinkBox2 { 
    max-width: 320px;
}
	section.madina:before {
    background-size: 65%;
}
section.madina:after {
    background-size: 65%; 
}
	section.madina .maskbg:after { 
    background: url(../images/arche_masjid_nabawi.png) repeat-x top 90px center; 
    background-size: 100%;
}
	section.madina .logo{top:255px;}
}

@media(max-width:1350px){

 	section.makkah .ContentPage.container {
    max-width: 1160px;
    margin-top: 474px;
}
		section.madina .maskbg:after {
    background: url(../images/arche_masjid_nabawi.png) repeat-x top 100px center;
    background-size: 104%;
}
	section.madina 	.ContentPage.container {
    max-width: 100%;
    margin-top: 474px;
}
		.LinkBoxA, .LinkBoxB,.CadreTime {
	    max-width: 310px;
	}
	.Box, .BoxB {
    font-size: 14px; 
}
	.Box span, .BoxB span {
    /* padding: 17px 20px 20px; */
}
		.LinkBox2 {max-width: 320px;}
	.topCadre h2 {     font-size:45px; }
	.topCadre {padding: 25px 0 10px;font-size: 18px;}
	.basCadre {     font-size: 16px;}
	.LinkBox2 a{padding-top: 65px;font-size: 12px;}
	.LinkBox2 .Box10:before, .LinkBox2.LinkBoxB .BoxB10:before, .LinkBox2 .Box10:hover:before, .LinkBox2.LinkBoxB .BoxB10:hover:before{background-size:80%;}
	.LinkBox2 .Box11:before, .LinkBox2.LinkBoxB .BoxB11:before, .LinkBox2 .Box11:hover:before, .LinkBox2.LinkBoxB .BoxB11:hover:before{background-size:80%;}
    .LinkBox2 .Box12:before, .LinkBox2.LinkBoxB .BoxB12:before, .LinkBox2 .Box12:hover:before, .LinkBox2.LinkBoxB .BoxB12:hover:before{background-size:80%;}
}
@media(max-width:1100px){
section.makkah .maskbg {
     background-size:110%
}
	section.madina .maskbg:after {
    background-size: 140%;
}
	img.logointro.small {max-width: 170px;}
	.ContentPage.container {
    max-width: 1160px;
    margin-top: 450px;
}
		section.makkah { 
    background-size: cover;
}
	section.makkah .maskbg {
    background-size: cover;
}
	section.makkah:after {
    left: 20%;
    background-size: 55%;
    bottom: 20px;
}
	    section.madina:before { 
        right: 29%;
    }
	
	    section.madina:after { 
        left: 29%;
    }
	section.madina .maskbg{background-size:100%;background-position: bottom -29px  center;}
}
@media(max-width:991px){
	section.makkah { 
    background-size: cover;
}
	section.makkah .maskbg {
    background-size: cover;
}
	.col-md-4.web {
		display: none;
	}
	.col-md-4.mobile {
		display: block;
	}
		.LinkBox2.web {
    display: none;
} 
.LinkBox2.mobile {
    display: block;
}
.CadreTime { 
    margin: 0 auto 20px;
}
	section.makkah .maskbg:after {
        background-position: bottom -37px center !important;
    }
	    section.makkah:before {
        bottom: 0px;
    }
}
@media(max-width:900px){
	header nav.navigation{display:none}
	.lng{margin-top: 1px;padding: 5px 5px;}
	.mobile-nav{
		display:block
	}
	.logo img {
}
	section.makkah .maskbg:before{
    /* background: url(../images/sunlight_2.png) repeat-x top 100px center; */
}
	    section.makkah:after {
        left: 10%;
        background-size: 50%;
    }
	    section.madina .maskbg:after {
        background-size: cover; 
    }
	  section.madina:before { 
        right: 20%;
    }  section.madina:after { 
        left: 20%;
    }
}

@media(max-width:1100px) and (min-height:1000px){
	  section.makkah:after {
        left: 15%;
        background-size: 100%;
        bottom: -15px;
    }
	
	  section.makkah:before {
        left: 15%;
        background-size: 150%;
        bottom: 0px;
    }
	.col-md-4{width:100%;float:none}
	.logo {
        top: 280px;
    }
	section.madina .logo {
        top: 280px;
    }
	.ContentPage.container {
        margin-top: 480px;
    }
	section.makkah .maskbg {
    background: url(../images/arce_makkah_2.png) repeat-x top -10px center;
		background-size:cover;
}
	    section.madina .maskbg:after {
        background-size: cover;background-position:bottom -40px center
    }
	  section.madina:before {
        right: 10%;
    }
	  section.madina:after {
        left: 10%;
    }
}
@media(max-width:900px) and (min-height:1000px){
	  section.makkah:after {
        left: 15%;
        background-size: 73%;
        bottom: -15px;
    }
	section.madina .maskbg:after {
        background-position: top 50px center;
    }
 
}
@media(max-width:700px){
	 section.makkah:after {
        left: 0%;
        background-size: 65%;
        bottom: 20px;
    }
	  section.madina:before { 
        right: 15%;background-size: 60%;
    }  section.madina:after { 
        left: 15%;background-size: 60%;
    }
}
@media(max-width:500px){
section.madina .maskbg:after {
        background-position: bottom center;
        background-size: cover;
    }
	section.madina .maskbg:before {
    background: url(../images/sunlight_2.png) repeat-x top 147px center;
    background-size: 320%;
}
	  section.madina:before { 
        right: 0;background-size: 60%;
    }  section.madina:after { 
        left: 0;background-size: 60%;
    }
	.custom.logo-vision img {
    max-width: 45px;
}
 	.logo img {
    /* max-width: 50%; */
}
	.ContentPage {
    margin-top: 425px;
}
	.topCadre { 
    padding: 28px 0 30px;
	}
	.LinkBox2 a{font-size:11px}
	.Box div, .BoxB div {
		display:none
}
	.Box span, .BoxB span {
    text-align: right;
    padding: 16px 80px 16px 22px;
    min-height: 54px;
    overflow: hidden;
    background-position: center right 20px;
}
	.topCadre h2 {
    font-size: 38px;
}

.logo {
    top: 230px;
}
div#countdown_m, div#countdown {
    font-size: 40px;
}
	section.makkah .maskbg {
}
     section.makkah .maskbg:after {
        background-position: bottom  center !important;
    }
	    section.makkah:before {
        background-size:150%
    }
	    section.madina .logo {
        top: 200px;
    }
	    section.madina .ContentPage.container { 
        margin-top: 400px;
    }
		.LinkBox2 a {
    font-size: 12px;
    width: 100%;
    padding: 60px 10px 15px;
}
}
@media(max-width:480px){
 
 nav.mobile-nav a { 
    margin: 0px 10px 0; 
}
	.CadreTime,.LinkBoxA, .LinkBoxB {
    max-width: 287px;
    }
	.topCadre{   font-size: 18px;}
	.basCadre{font-size: 15px;padding: 16px;line-height: 1.8;}

	.LinkBox2 a:before{width:45px;height:45px;}
	    .LinkBox2 .Box10:before, .LinkBox2.LinkBoxB .BoxB10:before, .LinkBox2 .Box10:hover:before, .LinkBox2.LinkBoxB .BoxB10:hover:before {
        background-size: 100%;
    }
	section.madina .maskbg {
        background-size: 171%;
        background-position: bottom center;
    }
}
@media(max-width:430px){
     section.makkah:before {
        background-size:200%
    }
	.Boxlive {font-size:13px}
 
	    .topCadre {
        padding: 20px 0 17px;
        font-size: 17px;
    }
		.LinkBox2 {
    max-width: 262px;
}
	div#fp-nav ul li  .fp-tooltip {font-size: 12px;padding-top: 5px;}
	 div#fp-nav  ul li:nth-child(3) .fp-tooltip:before{
	 width: 35px;
	 height: 43px;
	 top: -16px;
	}
	div#fp-nav ul li:nth-child(3) .fp-tooltip {
    padding-right: 43px;
    padding-top: 2px;
}
	div#fp-nav ul li:nth-child(1) .fp-tooltip {
 padding-top: 2px;
}
 div#fp-nav ul li:nth-child(1) .fp-tooltip:before{
	 width: 26px;
	 height: 56px;
	 top: -22px;
	}
}
@media(max-width:400px){
	.Boxlive{display:block;background: transparent;border-radius: 0;}
	.Boxlive a{
		border-radius: 50px;
		display: block;
		margin: 5px 0;
		padding: 14px 10px;
		background-color: #fff !important;
	}
	a.text_Boxlive.inactive {
    color: grey;
    opacity: 0.8;
    cursor: default;
}
}
@media (max-width: 340px) {
	#fp-nav ul{
		margin-top: 32px;
		padding: 0;
	}
	    div#fp-nav ul li:nth-child(3) .fp-tooltip {
        padding-right: 24px;
        padding-top: 2px;
    }
    div#fp-nav ul li:nth-child(1) .fp-tooltip:before {
        width: 16px;
        height: 37px;
        top: -32px;
        left: 34px;
    }
	    div#fp-nav ul li:nth-child(3) .fp-tooltip:before {
        width: 32px;
        height: 43px;
        top: -35px;
        right: 56px;
    }
}

/*********** interne **********/
a.pdf {
    display: block;
    width: max-content;
    margin: 0 auto 30px;
    padding: 8px 20px;
    background: #000;
    color: #fff;
    border-radius: 5px;
}
a.pdf:hover{background:#fff;color:#000}

#madina{display:none;}
.madina-mode section#madina{
    display:block;
}
.madina-mode section.makkah{
    display:none;
}
}


/****************** dark mode *************/

#theme-mode  .theme-switch i{
	margin: calc(var(--side-icon-height)/2 - 0.375rem) calc(var(--side-icon-width)/2 - 0.75rem);
}
 #theme-mode  .theme-switch{
	grid-gap: var(--side-menu-item-grid-gap);
}
 #theme-mode .picto-item {
    position: relative;
    cursor: help;
}
 #theme-mode .theme-switch i{
    display: inline-block;
    position: relative;
    width: 10px;
    height: 30px;
    border-radius: 2rem;
    background-color: #ffffff;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    float: none;
}

 #theme-mode .theme-switch i:before{
    content: "";
    display: block;
    opacity: 1;
    width: 10px;
    height: 10px;
    margin-top: -2px;
    background-color: #0f4e2b;
    box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
    position: absolute;
    border-radius: 2rem;
    transition: all 0.2s;
    left: 0;
    top: 3px;
}
 .dark-mode   #theme-mode .theme-switch i:before{
	top: 20px;
}
 .dark-mode  #theme-mode .theme-switch i:before{
	
}
 #theme-mode{
         position: fixed;
         left: -8px;
         top: 40%;
         background: #595c5b;
         padding: 13px 13px 13px 17px;
         -webkit-border-top-right-radius: 5px;
         -webkit-border-bottom-right-radius: 5px;
         -moz-border-radius-topright: 5px;
         -moz-border-radius-bottomright: 5px;
         border-top-right-radius: 5px;
         border-bottom-right-radius: 5px;
         border: 0;
         outline: none;
 }
.dark-mode div#fp-nav {
    background: #727171;
    color: #fff;
}
.dark-mode  div#fp-nav ul li:nth-child(3) .fp-tooltip{color:#fff;}  
.dark-mode  div#fp-nav  ul li:nth-child(1) .fp-tooltip{ color:#fff; }
.dark-mode .madina .topCadre {
    color: #fff;
}
 
.dark-mode .topCadre {
    background: rgb(39 31 31 / 90%); 
    color: #fff;  
}
.dark-mode .madina .topCadre h2 {
    color: #fff;
}
.dark-mode .topCadre h2 {
    color: #fff; 
}
.dark-mode .makkah .Box span {
    background-color: #000 !important;
}
.dark-mode .madina .BoxB span {
    background-color: #000 !important;
}
.dark-mode .makkah .Box div {
    background: rgb(0 0 0 / 23%);color:#fff
}
.dark-mode .madina .BoxB div {
    background: rgb(0 0 0 / 23%);color:#fff
}
.dark-mode .makkah .Box:hover div, .dark-mode .madina .BoxB:hover div { 
    color: #000000;
}
.dark-mode .madina .basCadre {
    background: rgb(0 0 0 / 35%);
}
.dark-mode .makkah .basCadre {
    display: block;
    background: rgb(0 0 0 / 35%);
}
.dark-mode .Boxlive {
    background: #000000; 
    color: #ffffff; 
 
}
.dark-mode a.text_Boxlive, .dark-mode a.text_Boxlive.inactive {
    color:  #ffffff; 
}
.dark-mode .LinkBox2 a { 
    color: #000000;
    background-color: #aaaaaa !important; 
}