@import url('https://fonts.googleapis.com/css?family=Cabin+Condensed');
body {
  margin: 0;
  padding: 0 0 60px 0;
  font-size: 13pt;
  font-family: 'Cabin Condensed', sans-serif;
  background: url('../apps/img/fond.jpg');
  color: #000;
  --color-clair: #d9ffc6;
  --color-moyen: #96c56f;
  --color-fonce: #476a2a;
}
a {
  text-decoration: none;
  color: var(--color-fonce);
  transition: color 0.3s ease;
  text-shadow: 2px 2px 5px #777;
}
a:hover { 
  color: tomato;
  text-shadow: 2px 2px 2px #ccc;
}
input, button, textarea {
  font-size: 13pt;
  padding: 5px 10px;
  font-family: 'Cabin Condensed', sans-serif;
}
button { cursor: pointer; }
.flashed {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 1px 1px 3px #000;
  text-shadow : 1px 1px 1px #fff;
  margin: 5px;
}
.success {
  border: 3px ridge green;
  background: #e2f4e6;
  color: green; 
}
.info {
  border: 3px ridge orange;
  background: #f9f6cd;
  color: #f67810;
}
.error {
  border: 3px ridge #eb5a55;
  background: #fce5e4;
  color: red;
}
.alert {
  border: 3px ridge #175a88;
  background: #cae4f6;
  color: blue;
}
.RotationY {
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
}
#menuToggle {
  display: block;
  position: absolute;
  top: 40px;
  left: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}
#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}
#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: tomato;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child { transform-origin: 0% 0%; }
#menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; }
#menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: royalblue;
}
#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); }
#menu {
  position: absolute;
  width: 280px;
  margin: -100px 0 0 -50px;
  padding: 20px 0;
  padding-top: 125px;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier( 0.77, 0.2, 0.05, 1.0);
  -webkit-box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.75);
  background: #ffffff;
  background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #dcf0d8 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#dcf0d8 100%);
  background: radial-gradient(ellipse at center, #ffffff 0%,#dcf0d8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dcf0d8',GradientType=1 );
}
#menu li {
  padding: 10px 40px;
  font-size: 22px;
  border-bottom: 1px solid transparent;
}
#menu li:hover { 
  border-bottom: 1px solid #476a2a;
  padding: 10px 0 10px 70px;
  -webkit-transition:.25s ease-in-out;
  -moz-transition:.25s ease-in-out;
  -o-transition:.25s ease-in-out;
  transition:.25s ease-in-out;
}
#menuToggle input:checked ~ ul { transform: none; }
#quran {
  height: 150px;
  margin-top: 20px;
}
#hero { position: relative; }
#hero video {
  width: 100%;
  height: 100vh;
  background-position: absolute;
  z-index: 10;
  object-fit: cover;
  margin: 0;
}
#hero .content {
  background: rgba( 0, 0, 0, 0.5);
  z-index: 20;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  margin: -15% 0 0 -25%;
  text-align: center;
}
#hero .content h1 {
  color: #fff;
  font-weight: 600;
}
#hero .content h3 {
  color: #fff;
  font-weight: 300;
}
#Coran {
  position: absolute;
  width:75%;
  margin : 10px auto;
}
.Titre_Page {
  padding: 17px 0 0 110px;
  letter-spacing: 2px;
}
.Titre_Page img {
  float: right;
  height: 90px;
  margin: 5px 20px;
}
.Content {
  clear: both;
}
#Wait {
  display: none;
  text-align: center;
  margin-top: 70px;
}
#Validation { display: none; }
.f_field {
  width: 285px;
  margin: auto;
  border: 3px ridge var(--color-moyen);
  background: #ffffff;
  background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #dcf0d8 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#dcf0d8 100%);
  background: radial-gradient(ellipse at center, #ffffff 0%,#dcf0d8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dcf0d8',GradientType=1 );
}
.form, .f_select {
  font-family: 'PT Sans', sans-serif;
  font-size: 13pt;
  width: 280px;
  background: #fff;
  border: 1px solid var(--color-moyen);
  padding: 5px;
  display: block;
}
.f_div {
  margin: 3px 0 5px 0;
  text-align: left;
}
.f_label {
  color: var(--color-fonce);
  margin-top: 3px;
  font-size: 11pt;
  line-height: 11pt;
}
.f_legend {
  color: grey;
  padding: 0px 5px;
  font-size: 9pt;
  font-style: italic;
  margin-left: 10px;
}
.f_error {
  color: #f00;
  font-size: 9pt;
  animation-iteration-count: infinite;
}
.f_textarea { 
  resize: none; 
  width: 280px;
}
.Div_Btn {
  text-align: center;
  margin-top: 10px;
  padding-top: 5px;
  border-top: 1px dotted grey;
}
.Titre_H4 {
  color: var(--color-fonce);
  padding: 0 0 7px 15px;
  text-align: center;
  margin-top: 10px;
  letter-spacing: 1px;
  font-weight: normal;
}
.Shadow {
  -webkit-box-shadow: 3px 3px 3px 0px rgba(61,60,61,1);
  -moz-box-shadow: 3px 3px 3px 0px rgba(61,60,61,1);
  box-shadow: 3px 3px 3px 0px rgba(61,60,61,1);
}
.noDepassText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center; 
  background: #333; 
  padding: 5px; 
  color: #fff;
  letter-spacing: 1px;
}
.Link {
  color: #00f;
}
.Link:hover {
  color: #f00;
  cursor: pointer;
}
/*-----------------------------------------------
  LOADER
-----------------------------------------------*/
    .Div_loader {
        width: 120px;
        height: 120px; 
        margin: 50px auto;
    }
    .Div_loader img {
        position: absolute;
        width: 100px;
        margin: 20px 0 0 -40px;
    }
    .loader {
        border: 11px solid var(--color-moyen);
        border-radius: 50%;
        border-top: 11px solid #777;
        width: 120px;
        height: 120px;
        -webkit-animation: loader_spin 1s linear infinite;
        animation: loader_spin 1s linear infinite;
    }
    @-webkit-keyframes loader_spin {
        0% { -webkit-transform: rotate(360deg); }
        100% { -webkit-transform: rotate(0deg); }
    }
    @keyframes loader_spin {
        0% { transform: rotate(360deg); }
        100% { transform: rotate(0deg); }
    }

  .Back {
    background: var(--color-clair);
    background: -moz-linear-gradient(top, var(--color-clair) 5%, var(--color-moyen) 100%);
    background: -webkit-linear-gradient(top, var(--color-clair) 5%,var(--color-moyen) 100%);
    background: linear-gradient(to bottom, var(--color-clair) 5%,var(--color-moyen) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--color-clair)', endColorstr='var(--color-moyen)',GradientType=0 );
  }