body {
    font-size : 16px;
/*background : #FFF;*/
}



@font-face {
    font-family: "Inter UIR";
    src: url('../fonts/Inter-UI-Regular.woff');
    }
  
       
      @font-face {
        font-family: "Inter UIM";
        font-weight: Medium;
        src: url('../fonts/Inter-UI-Medium.woff');
        }

        @font-face {
            font-family: "Brela R";
            font-weight: Medium;
            src: url('../fonts/TextMeOne-Regular.ttf');
        }
  

.photoFiche {
    position : relative;
}

.nav-item  {
    font-size : 12px !important;
    font-weight : 600;
}

.nav-item.active {
    background-color:rgba(36, 196, 58, 0.3) !important;
}

.container-fluid {
    width : 100%;
    padding : 0;
    margin : 0;
    position: relative;
   
}

#blocAppel {
    font-size : 1em;
    color : rgb(249, 255, 255);
    width : 100%;
    text-align : center;
    margin-top : -7%;
    position : relative;
}

#blocAppel p {
position : absolute;
opacity : 0;
left : 62%;
width : 16%;
text-align : center;
background-color : rgba(8, 98, 126, 0.616);
animation : deplacement 2s ease forwards 2s;
}

header {
    position : relative; 
    width : 100%;
}

.row [class^="col-"] label {
    width : 150px;
}


header div.logoContainer {
    width : 400px; 
    height : 200px;
    position : absolute;
    top : 0 ;
}

@keyframes deplacement {
    to {
        left : 42%;
        opacity : 1;
    }
    }

@keyframes deplacement2 {
    to {
        left : 30%;
        opacity : 1;
    }

}

#svgLogoText g {
    animation : fill-anim 2s ease forwards 5s;
}

#svgLogoText g  path:nth-child(1) {
    stroke-dasharray : 400px;
    stroke-dashoffset : 400px;
    animation : line-anim 2s ease forwards;
}
#svgLogoText g  path:nth-child(2) {
    stroke-dasharray : 400px;
    stroke-dashoffset : 400px;
    animation : line-anim 2s ease forwards ;
}
#svgLogoText g  path:nth-child(3) {
    stroke-dasharray : 400px;
    stroke-dashoffset : 400px;
    animation : line-anim 2s ease forwards 0.6s;
}
#svgLogoText g  path:nth-child(4) {
    stroke-dasharray : 400px;
    stroke-dashoffset : 400px;
    animation : line-anim 2s ease forwards 0.9s;
}
#svgLogoText g  path:nth-child(5) {
    stroke-dasharray : 400px;
    stroke-dashoffset : 400px;
    animation : line-anim 2s ease forwards 1.2s;
}
#svgLogoText g  path:nth-child(6) {
    stroke-dasharray : 400px;
    stroke-dashoffset : 400px;
    animation : line-anim 2s ease forwards 1.5s;
}

#svgLogoText g  path:nth-child(7) {
    stroke-dasharray : 400px;
    stroke-dashoffset : 400px;
    animation : line-anim 2s ease forwards 1.8s;
}

#svgLogoText g  path:nth-child(8) {
    stroke-dasharray : 400px;
    stroke-dashoffset : 400px;
    animation : line-anim 2s ease forwards 2.1s;
}

#svgLogoText g  path:nth-child(9) {
    stroke-dasharray : 400px;
    stroke-dashoffset : 400px;
    animation : line-anim 2s ease forwards 2.4s;
}

#svgLogoText g  path:nth-child(10) {
    stroke-dasharray : 400px;
    stroke-dashoffset : 400px;
    animation : line-anim 2s ease forwards 2.7s;
}

#svgLogoText g path:nth-child(11) {
    stroke-dasharray : 400px;
    stroke-dashoffset : 400px;
    animation : line-anim 2s ease forwards 3s;
}

#svgLogoText g path:nth-child(12) {
    stroke-dasharray : 400px;
    stroke-dashoffset : 400px;
    animation : line-anim 2s ease forwards 3.3s;
}

#svgLogoText g path:nth-child(13) {
    stroke-dasharray : 400px;
    stroke-dashoffset : 400px;
    animation : line-anim 2s ease forwards 3.6s;
}

#svgLogoText g path:nth-child(14) {
    stroke-dasharray : 400px;
    stroke-dashoffset : 400px;
    animation : line-anim 2s ease forwards 3.9s;
}


#svgLogoText g path:nth-child(15) {
    stroke-dasharray : 400px;
    stroke-dashoffset : 400px;
    animation : line-anim 2s ease forwards 4.2s;
}

#svgLogoText g path:nth-child(16) {
    stroke-dasharray : 400px;
    stroke-dashoffset : 400px;
    animation : line-anim 2s ease forwards 4.5s;
}

#svgLogoText g path:nth-child(17) {
    stroke-dasharray : 400px;
    stroke-dashoffset : 400px;
    animation : line-anim 2s ease forwards 4.8s;
}



@keyframes line-anim {
    to {
        stroke-dashoffset : 0;
    }
    }

    
    @keyframes fill-anim {
    to {
        fill : #FFF;
    }
    }

    @keyframes imageLoad{
        to {
            opacity : 1;
        }
    }
    
.lazyload {
    opacity : 0;
}

.logoD {
    height : 51px;
    width : auto;
}

.petiteFleche {
    width : 25px;
    height : auto;
}

h1, h1.rouge {
    color :  white;
    width : 100%;
    text-align: center;
    text-shadow : none;
    padding : 10px 0 20px 0;
    font-size : 2em;
    background-color : rgba(18, 122, 100, 0.781);
    display : block;
    margin-bottom : 2%;
}

h1.rouge {
    background-color : rgba(172, 13, 13, 0.781);
}


h2 {
    color :  rgb(238, 170, 81);
    font-size: 1.6em;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow : none;
    margin : 20px auto; 
    width : 100%;
    text-align : center;
}

h3 {
    font-size: 1.5em;
    margin : 20px 0px;
}

.centrer2 {
    text-align: center;
}

.parImage {
    width : 100%;
    text-align : center;
}

.img-fluid {
    max-width : 50%;
    width : 50%;
     height : auto;
     margin : 0;
     padding : 0;
 }

 .img-fluid2 {
    max-width : 75%;
    width : 75%;
     height : auto;
     margin : 0;
     padding : 0;
 }

 .img-fluid3 {
    max-width : 30%;
    width : 30%;
     height : auto;
     margin : 0;
     padding : 0;
 }

.left{
    text-align : left;
    padding-top: 2%;
}

.row {
    width : 100%;
    padding : 0;
    margin : 0;
}

.row [class^="col-"] {
	padding : 30px 30px;
}

hr{
   background-color : gainsboro;
   opacity : 0.6;
}

footer {
    /*background-color: #3A3F44;*/
    background-color : rgb(1, 68, 59);
    width : 100%;
    text-align: left;
    padding-top : 25px;
    color: white;
    margin-top : 6%;
}

footer a {
   color : #f0c080;
   text-decoration: underline;
}

.ombrage {
    border: 2px solid #fff;
    -moz-box-shadow: 8px 8px 12px #aaa; 
    -webkit-box-shadow: 8px 8px 12px #aaa; 
    box-shadow: 8px 8px 12px #555; 
  } 

  .ombrage2 {
    -moz-box-shadow: 8px 0px 12px #aaa; 
    -webkit-box-shadow: 0px 0px 12px #aaa; 
    box-shadow: 9px 0px 12px #555; 
  } 

.qLabel {
    width : 18%;
    color : #000;
    font-size : 0.9em;
}



.hide{
    visibility: hidden;
}

.vignette2 {
    height : 38px;
    width : auto;
}



.nav-link:hover {
    background : rgba(100, 236, 195, 0.452) !important;
}

.verset {
    color : rgb(250, 236, 173)
}

.hadith {
    color : rgb(255, 215, 215);
}

.note {
    color : rgb(160, 243, 144);
}

.patron {
    background-image: url(../images/pelrinage.jpg);
    background-size : 100% auto;
    background-attachment: fixed, scroll;
    background-repeat: no-repeat, repeat-y;
	background-color: #FFFFFF;
}


.contenuBloc {
    background : rgb(1, 68, 59); color : white; margin : 30px 0; width  : 80%; margin-left : 10%;

}



div.defilement {
    position : absolute;
    width : 30vw;
    height: 19vw;
    display : block;
    z-index : 15000;
    top : 10vh;
    left : 59vw;
    background: url("../images/defilement.jpg") no-repeat;
    background-size : 30vw 57vw;
    border : 4px solid white;
    animation  : defilement 10s infinite;
}



@keyframes defilement {
    15% {
        background-position-y : 0vw;
    }
    
    38% {
        background-position-y :-38vw;
    }

    55% {
        background-position-y :-38vw;
    }

    73% {
        background-position-y : -19vw;
    }

    90% {
        background-position-y : -19vw;
    }

    100% {
        background-position-y : 0vw;
    }
}


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


    header {
        min-height:38vw;
        height : 38vw;
        padding-top : 40px;
        position:relative;
        background-image : url("../images/header.jpg");
        background-size : 100% 100%;
        background-repeat : no-repeat;
      
    }

    div.defilement {
        position : absolute;
        width : 30vw;
        height: 19vw;
        display : block;
        z-index : 15000;
        top : 10vh;
        left : 59vw;
        background: url("../images/defilement.jpg") no-repeat;
        background-size : 30vw 57vw;
        border : 4px solid white;
        animation  : defilement 10s infinite;
    }

    .dropdown-toggle {
        background : none;
    }

    .contenuBloc {
        width  : 94%; margin-left : 3%; 
    }


    .avecEspaces {
        margin-top  : 6%;
    }

    .imgProduit.col-8.col-md-12 + .col-4.col-md-12 {
        font-size : 0.8em;
    }


    .descriptionHeader{
        width : 80%;
        font-size : 0.8em;
        left : 10%;
        padding : 4px;
    }


    #mynavbar {
        position : absolute !important;
        top : 2px !important;
        z-index : 7000;
        left : 0px;
        width : 100%;
    }

    .navbar-toggler.hidden-lg-up {
        border : none ;
        padding : 0px;
    }

    #navbarColor01{
        background : rgba(7, 51, 38, 0.95);
        padding : 7px;
    }


    
    .nav-link {
        width : 85%;
        display: inline-block;
        padding : 2px !important;
       
    }

    body {
        font-size : 13px;
    }

    h1 {
        font-size : 2em;
    }

    h2 {
        font-size : 1.5em;
    }

    .patron {
      
     background-image : url(../images/pelrinage2.jpg);
     display: block;    position: fixed;    z-index: -10;  
     background-repeat : no-repeat ;
     background-position : 100% auto;
     -webkit-background-size: 100% auto;
     -moz-background-size: 100% auto;
     -o-background-size: 100% auto;
     background-size: 100% auto;
    }

    footer .col-md-4 div {
        display : block;
        width : 76%;
        margin-left : 12%;
    }

    header div.logoContainer {
        left : 50%;
        transform : translate(-120px,0);
    }
    
  }

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

    body {
        font-size : 1em;
    }

    .img-fluid {
        width : 70%;
        max-width : 70%;
    }

    .logoDiv {
        position : absolute; 
        top : 5px;
        left  : 70% ;
        width : 25%;
        height : auto;
    }


    .logoBas{
        width : 46%;
        height : auto;
    }

    #blocAppel {
        margin-top : -14%;
       
    }

    #blocAppel p{
        width : 40%;
        animation : deplacement2 2s ease forwards 2s;
        font-size : 0.9em;
    }

    .boutonAction {
        width : 96%;
        height : auto;
        margin : 0 1%;
     }

     header {
        min-height:73vw;
        height :73vw;
        padding-top : 40px;
        position:relative;
        background-image : url("../images/header_xs_2.jpg");
        background-size : 100% auto;
       font-size : 14px;
       width : 100%;
    }

    div.defilement {
        position : absolute;
        width : 30vw;
        height: 19vw;
        display : none;
        z-index : 15000;
        top : 25vw;
        left : 54vw;
        background: url("../images/defilement.jpg") no-repeat;
        background-size : 30vw 57vw;
        border : 4px solid white;
    }

     .navbar .dropdown-toggle::after {
        display: none;
        }

        .dropdown-toggle::after {
            display : none;
        }

        .dropdown-menu {
            top : 23% !important;
        }

    .avecEspaces {
        margin-top  : 6%;
    }



    #mynavbar {
        position : absolute !important;
        top : 7px !important;
        background-color : transparent !important;
        z-index : 9000;
        left : -7px;
    }


    h1 {
        font-size : 1.5em;
    }

    h2{
        font-size : 1.4em;
    }

    h3 {
        font-size : 1.3em;
    }
}


  @media screen and (min-width: 769px) {
 
    .logoDiv {
        position : absolute; 
        top : 30px;
        left  : 31% ;
        width : 28%;
        height : auto;
    }

    .dropdown-toggle::after {
        display : none;
    }

    
    .nav-link {
        width : 85%;
        display: inline-block;
        
    }


    #mynavbar {
        position : absolute !important;
        top : 7px !important;
        background : transparent;
        z-index : 9000 !important;
    }

    .navbar-toggler.hidden-lg-up {
        border : none ;
        padding : 0px;
    }

    #navbarColor01{
        background : rgba(7, 51, 38, 0.95);
        padding : 7px;
    }

  

    .nav-link {
        padding : 7px !important;
    }

    
    header {
        min-height:25vw;
        height : 25vw;
        padding-top : 40px;
        position:relative;
        background-image : url("../images/header.jpg");
        background-size : 100% 100%;
        background-repeat : no-repeat;
      
    }

    .separateur {
        background : url("../images/s.png") no-repeat;
        background-position-x : 75% ;
        background-position-y : 34%;
        background-size : 1px 50%;
    }

    footer {
        font-size : 0.8em;
    }    

    div.logoContainer {
        left : 10%;
    }




  }

  @media screen and (min-width: 1024px) {
    
    .nav-link {
        width : 100%;
        display: block;
    }

    .logoDiv {
        position : absolute; 
        top : 0px;
        left  : 2% ;
        width : 19%;
        height : auto;
    }

 
    .dropdown-toggle::after {
        display : inline-block;
    }

    .dropdown-menu {
        top : 0% !important;
    }

    #mynavbar {
        position : absolute;
        top : 0px;
        height : 33px;
        padding : 0 !important;
        width : 100%;
        background : transparent;
        z-index : 8000;
    }


        #navbarColor01{
            background: transparent !important;
            position : absolute !important;
            width : 100%;
            top :0px !important;
            z-index : 5000 !important;
        }

    .dons {
        background-color : rgb(214, 6, 6);
    }



    #mynavbar a {   
        font-size : 0.8em;
        color : rgba(255, 255, 255, 0.836) !important
    }
.nav-link {
        padding : 7px !important;
    }

    
    header {
        min-height:25vw;
        height : 25vw;
        padding-top : 40px;
        position:relative;
        overflow : hidden;
        background-image : url("../images/header.jpg");
        background-size : 100% 100%;
        background-repeat : no-repeat;
      
    }


    footer {
        font-size : 1em;
    }

    div.logoContainer{
        left : 1%;
    }


}
/*///////////////////*POPUP ///////////////////////*


  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
	from {opacity: 0;} 
	to {opacity: 1;}
  }
  
  @keyframes fadeIn {
	from {opacity: 0;}
	to {opacity:1 ;}
  }

 
.show {
    visibility: visible;
}
 

 
.show ~ .overlay {
    opacity: 1;
    visibility: visible;
}