*{
    margin:0px;
    padding:0px ;
	
	
 
	
	
}
.header{
    position: relative; bottom:150px; margin-left:100px; top:20px; display:flex; justify-content:space-around;
}
    

 #caro{
    position: relative; bottom:-100px; left: 50px; 
    margin: auto;
}
.caro{
    margin-left: -5px; padding-left:20px;
}
.caro img{
    height: 250px;
    width: 250px;

} 


 #container{
     position: relative;
     right:-50px;
     top:50px;
      width: 50%;
} 
  

  

 
  .timeline {
      list-style-type: none;
      margin: 0;
      padding: 0;
      position: relative
  }
  
   .timeline:before {
      content: '';
      position: absolute;
      top: 5px;
      bottom: 5px;
      width: 5px;
      background: #2d353c;
      left: 20%;
      margin-left: -2.5px
  } 
  
   .timeline>li {
      position: relative;
      
      min-height: 50px;
      padding-top: 25px 
      
      
  } 
  
   .timeline .timeline-time {
      position: absolute;
      left: 0;
      width: 18%;
      text-align: right;
      top: 30px
  } 
  
  .timeline .timeline-time .date,
  .timeline .timeline-time .time {
      display: block;
      font-weight: 600
  }
  
  .timeline .timeline-time .date {
      line-height: 16px;
      font-size: 40px
  }
  
   .timeline .timeline-time .time {
      line-height: 25px;
      font-size: 20px;
      position: relative;
      left: -35px;
      /* color: hsl(0, 87%, 47%) */
  } 
  
   .timeline .timeline-icon {
      left: 15%;
      position: absolute;
      width: 10%;
      text-align: center;
      top: 40px
  } 
  
   .timeline .timeline-icon a {
      text-decoration: none;
      width: 20px;
      height: 20px;
      display: inline-block;
      border-radius: 20px;
      background: #e7d9de;
      line-height: 10px;
      color: rgb(90, 12, 126);
      font-size: 14px;
      border: 5px solid #2d353c;
      transition: border-color .2s linear
  } 
  
   .timeline .timeline-body {
      margin-left: 35%;
      margin-right: 17%;
      background:linear-gradient(to left, rgb(13, 146, 146), white 50%  );
      position: relative;
      padding: 20px 25px;
      border-radius: 0px 20px 20px;
      width: 220px;
      

  } 

  .timeline .timeline-body::before {
  content: '';
  display: block;
  position: absolute;
  border: 10px solid transparent;
    border-right-color: transparent;
  border-right-color: #fff;
  left: -20px;
  top: 20px;
}
 
  

  

   .timeline-content {
       
      letter-spacing: .35px;
      line-height: 18px;
      font-size: 15px;
      /* width: 100px; */
      
     
  } 
  .timeline-content p{
      padding-top: -10px;
    

     
  }
/* #titre{
    position: relative;
    left: 120px;
    top: 100px;
}
   */
   h4{
    font-size: 22px;
    position: relative; 
     /* top: -250px;   */
    margin-left: 80px;
  
    
    
   
    text-align: center;
    
    top:40px ; 
    border-top: black 2px solid;
    border-bottom: black 2px solid;
    width: 200px;
    padding: 10px;
    font-family: 'Redressed', cursive;
   

}   


#soura{
       width:160px;
      position: sticky;
      bottom: 200px;
     left: 75%;
      opacity: 0.7;
      margin: 0 auto ;
	
	

}



form{
width: 200px;
border: black 2px solid;
margin-top: 150px ;
position: relative;
bottom: 40px;
left: 70px;
} 
.btn{
    width:100%; margin-top:10px; margin-left:-1px; margin-bottom:10px;
}
  
body{ 
    height: 100%;
    width: 100%;
    background: linear-gradient(to left,white 50% ,rgb(13, 146, 146)); 
    background-repeat: no-repeat;
	
   
      overflow-x: hidden;
 
}


h1{
   
    font-family: 'Redressed', cursive;
    position: relative;
    left: 50px;
    top: 90px;
    color:black;
    font-size: 25px;

     border-bottom: black 2px solid;
    width: 40%;
    border-top: black 2px solid;
    padding: 10px;
    text-align: center;
}

h2{
    position: relative;
    left: 60px;
    top: 80px;
    color:black;
    font-size: 15px;
    width: 240px;
    padding: 10px;
    font-family: 'Redressed', cursive;
    margin-bottom: 100px;
}

h3{
              position: relative;
              left: 50px;
              top: 100px;
              color:black;
              font-size: 15px;
              width: 230px;
              padding: 10px;
              font-family: 'Redressed', cursive;

         }



nav ul{
    /* display: flex; */
    position: relative;
    top: 15px;
    right: 0px;
    

    
}
.li{
    list-style: none;
    margin-right: 40px;
}
.li a{
  text-decoration: none; 
  font-size:20px; 
  color: black;
  font-family: 'Redressed', cursive;
}
.logo {
    height: 100px;
    width: 100px;

position: relative;
bottom:20px;
left: -60px;

}
.logo img{
    height: 100px;
    width: 100px;
}

.progress{
    position: relative;
    top: 60px;
    right: 320px;
    height:50px;
    display:flex;
    width: 300px; 
    margin-left:350px;
    margin-top:20px; 
    margin-bottom:20px;
   

}
.progress-bar{
    font-size:50px;
    /* color:black; */
    padding: 13px;
    
}
.code
{

background: linear-gradient(to left, #40a497, #6840a4);
/* width: 45em;
height: 45em; */

border-radius:0%;
padding-top: 8px ;
padding-left: 10px ;
 
 font-size:20px ;
 color:white;
 width:50px; 
 font-size:15px;

}




footer{
    background: linear-gradient(to left,white 50% ,rgb(13, 146, 146));
    height: 200px;
    width: 100%;
    margin: auto;
    position: relative;
    top: 50px;
    /* top: 150px;
    right: 50px; */
    /* border-top:black 2px solid; */
    

}
.fa-brands{
    font-size: 30px;
    margin-left: 20px;
}
footer ul{
    position: relative;
    top: 100px;
    left: 40px;
}



@media only screen and (min-width :800px) {
   
  
    body{
          height: auto;
          /* background-image: url(/View/img/ana.jpg); */
    }
    .header{
        position: relative; bottom:150px; margin-left:100px; top:20px; display:flex; justify-content:space-around
    }
   
  
   #soura{
         /* border: black 2px solid; */
         position: relative;
         left: 900px;
         bottom: 150px;
   }
  
    h1{
   
          font-family: 'Redressed', cursive;
          position: relative;
          left: 250px;
          top: 50px;
          color:black;
          font-size: 40px;
     
           border-bottom: black 2px solid;
          width: 23%;
          border-top: black 2px solid;
         
          padding-top: 10px ;
          padding-left: 50px;
          text-align: center;
     }
     
     h2{
          position: relative;
          left: 320px;
          bottom: 190px;
          color:black;
          font-size: 22px;
          width: 240px;
          padding: 10px;
          font-family: 'Redressed', cursive;
     }
     
     h3{
                    position: relative;
                    left: 250px;
                    top: 50px;
                    color:black;
                    font-size: 22px;
                    width: 230px;
                    padding: 10px;
                    font-family: 'Redressed', cursive;
     
        }

        h4{
            font-size: xx-large;
            position: relative;
            right:100px;
            left: 190px;
            text-align: center;
            
            top:30px ; 
            border-top: black 2px solid;
            border-bottom: black 2px solid;
            width: 215px;
            padding: 10px;
            font-family: 'Redressed', cursive;
            z-index: -1;
    
        }
        
        

        #caro{
             margin: auto; 
             position: relative;
             left: auto;
          
            display: flex;
        }
        .caro{
            margin-left: -5px; padding-left:20px;
            
        }
        .caro img{
            height: 250px;
            width: 250px;
            margin: 0 auto;
        
        }    
    
    
    nav ul{
          /* display: flex; */
          position: relative;
          top: 30px;
          right: -60px;
          
          
    
          
    }
    .li{
          list-style: none;
          margin-right: 30px;
    }
    .li a{
        text-decoration: none; 
        font-size:xx-large; 
        color: black;
        font-family: 'Redressed', cursive;
    }
    .logo {
          height: 100px;
          width: 100px;
    
    position: relative;
    bottom:20px;
    left: -120px;
    
    }
    .logo img{
          height: 150px;
          width: 150px;
    }



 #container{
     position: relative;
     right:-50px;
     top: 70px;
      width: 50%;
     
} 
  

  

 
  .timeline {
      list-style-type: none;
      margin: 0;
      padding: 0;
      position: relative
  }
  
   .timeline:before {
      content: '';
      position: absolute;
      top: 5px;
      bottom: 5px;
      width: 5px;
      background: #2d353c;
      left: 20%;
      margin-left: -2.5px
  } 
  
   .timeline>li {
      position: relative;
      
      min-height: 50px;
      padding-top: 25px 
      
      
  } 
  
   .timeline .timeline-time {
      position: absolute;
      left: 0;
      width: 18%;
      text-align: right;
      top: 30px
  } 
  
  .timeline .timeline-time .date,
  .timeline .timeline-time .time {
      display: block;
      font-weight: 600
  }
  
  .timeline .timeline-time .date {
      line-height: 16px;
      font-size: 40px
  }
  
   .timeline .timeline-time .time {
      line-height: 25px;
      font-size: 25px;
      position: relative;
      left: -10px;
      /* color: hsl(0, 87%, 47%) */
  } 
  
   .timeline .timeline-icon {
      left: 15%;
      position: absolute;
      width: 10%;
      text-align: center;
      top: 40px
  } 
  
   .timeline .timeline-icon a {
      text-decoration: none;
      width: 20px;
      height: 20px;
      display: inline-block;
      border-radius: 20px;
      background: #e7d9de;
      line-height: 10px;
      color: rgb(90, 12, 126);
      font-size: 14px;
      border: 5px solid #2d353c;
      transition: border-color .2s linear
  } 
  
   .timeline .timeline-body {
      margin-left: 110px;
      margin-right: 17%;
      background:linear-gradient(to left, rgb(13, 146, 146), white 50%  );
      position: relative;
      padding: 20px 25px;
      border-radius: 0px 20px 20px;
      width: 420px;
	   
      box-shadow:15px 15px 5px gray;
      

  } 

  .timeline .timeline-body::before {
  content: '';
  display: block;
  position: absolute;
  border: 10px solid transparent;
    border-right-color: transparent;
  border-right-color: #fff;
  left: -20px;
  top: 20px;
 
}

 
  

  

   .timeline-content {
       
      letter-spacing: .35px;
      line-height: 18px;
      font-size: 15px;
      /* width: 100px; */
      
     
  } 
  .timeline-content p{
      padding-top: -10px;
    

     
  }
#titre{
    position: relative;
    left: 120px;
    top: 40px;
}  

.progress{
    position: relative;
    right: 250px;
    height:50px;
    display:flex;
    width: 600px; 
    margin-left:350px;
    margin-top:50px; 
    margin-bottom:20px;
   

}
.progress-bar{
    font-size:50px;
    /* color:black; */
    padding: 13px;
    
}
.code
{

background: linear-gradient(to left, #40a497, #6840a4);
/* width: 45em;
height: 45em; */

border-radius:0%;
padding-top: 8px ;
padding-left: 10px ;
 
 font-size:20px ;
 color:white;
 width:50px; 
 font-size:18px;

}
form{
    width: 400px;
    border: black 2px solid;
    margin-top: 150px ;
    position: relative;
    bottom: 100px;
    left: 200px;
    } 
    .btn{
        width:100%; margin-top:10px; margin-left:-30px; margin-bottom:10px;
    }

    footer{
          background: linear-gradient(to left,white 50% ,rgb(13, 146, 146));
           height: 115px; 
           
           margin: auto;
          position: relative;
           top: 110px;
          /* width: 800px; */ 
          /* border:  black 2px solid; */
          
    
    }
    .fa-brands{
          font-size: 30px;
          margin-left: 20px;
    }
    footer ul{
          position: relative;
          top: 50px;
          left: 300px;
    }
}
@media only screen and (min-width :950px) {
    body{
          width:100%;
          margin:0 auto;
		width:fixed;
		
		
          }
	
	html{
    width:100%;
   
}

	
          
    .header{
        position: fixed; bottom:150px; margin-left:100px; top:20px; display:flex; justify-content:space-around
    }      
          
    nav ul{
          display: flex;
          position: relative;
          top: 35px;
          right: -100px;
          background:linear-gradient(to left,  white 50%  ,#6cbdbd(77, 165, 165) );
          z-index: +1;
          
              
          
                
          }
    .li{
          list-style: none;
          margin-right: 30px;
    }
    .li a{
          text-decoration: none; 
          font-size:xx-large; 
          color: black;
          font-family: 'Redressed', cursive;
          }
    .logo {
           height: 100px;
          width: 100px;
          position: relative;
          bottom:20px;
          left: -100px;
          
          }
    .logo img{
           height: 100px;
           width: 100px;
          }
          

   h1{
   
          font-family: 'Redressed', cursive;
          position: relative;
          left: 410px;
          top: 250px;
          color:black;
          font-size: 40px;
           
          border-bottom: black 2px solid;
         
          border-top: black 2px solid;
          padding: 10px ;
          padding-left: 50px;
           width: 30%;
    }
           
    h2{
          position: relative;
          left: 690px;
          top: 250px;
          color:black;
          font-size: 22px;
          width: 240px;
          padding: 10px;
          font-family: 'Redressed', cursive;
          }
           
    h3{
          position: relative;
          left: 400px;
          top: 240px;
          color:black;
          font-size: 22px;
          width: 230px;
          padding: 10px;
          font-family: 'Redressed', cursive;
           
          }

          #container{
            position: relative;
            right:-200px;
            top: 100px;
             width: 50%;
             z-index: -1;
       }

          #container{
            position: relative;
            right:-200px;
            top: 100px;
             width: 50%;
             z-index: -1;
       } 
       h4{
        font-size: xx-large;
        /* position: relative; */
        /* left: 400px;  */
        margin-left: 350px;
        margin-bottom :-50px; 
        margin-top: 100px;
       
        text-align: center;
        
        top:30px ; 
        border-top: black 2px solid;
        border-bottom: black 2px solid;
        width: 215px;
        padding: 10px;
        font-family: 'Redressed', cursive;
        z-index: -1;

    } 

      #caro{
             
             position: relative;
             left: 105px;
             bottom: -150px;
          
            display: flex;
        }
        .caro{
            margin-left: -5px; padding-left:20px;
            
        }
        .caro img{
            height: 300px;
            width: 320px;
            margin: 0 auto;
        
        }     
       
         
       
        
         .timeline {
             list-style-type: none;
             margin: 0;
             padding: 0;
             position: relative
         }
         
          .timeline:before {
             content: '';
             position: absolute;
             top: 5px;
             bottom: 5px;
             width: 5px;
             background: #2d353c;
             left: 20%;
             margin-left: -2.5px
         } 
         
          .timeline>li {
             position: relative;
             
             min-height: 50px;
             padding-top: 25px 
             
             
         } 
         
          .timeline .timeline-time {
             position: absolute;
             left: 0;
             width: 18%;
             text-align: right;
             top: 30px
         } 
         
         .timeline .timeline-time .date,
         .timeline .timeline-time .time {
             display: block;
             font-weight: 600
         }
         
         .timeline .timeline-time .date {
             line-height: 16px;
             font-size: 40px
         }
         
          .timeline .timeline-time .time {
             line-height: 25px;
             font-size: 25px;
             position: relative;
             left: -10px;
             /* color: hsl(0, 87%, 47%) */
         } 
         
          .timeline .timeline-icon {
             left: 15%;
             position: absolute;
             width: 10%;
             text-align: center;
             top: 40px
         } 
         
          .timeline .timeline-icon a {
             text-decoration: none;
             width: 20px;
             height: 20px;
             display: inline-block;
             border-radius: 20px;
             background: #e7d9de;
             line-height: 10px;
             color: rgb(90, 12, 126);
             font-size: 14px;
             border: 5px solid #2d353c;
             transition: border-color .2s linear
         } 
         
          .timeline .timeline-body {
             margin-left: 180px;
             margin-right: 17%;
             background:linear-gradient(to left, rgb(13, 146, 146), white 50%  );
             position: relative;
             padding: 20px 25px;
             border-radius: 0px 20px 20px;
             width: 600px;
             
       
         } 
       
         .timeline .timeline-body::before {
         content: '';
         display: block;
         position: absolute;
         border: 10px solid transparent;
           border-right-color: transparent;
         border-right-color: #fff;
         left: -20px;
         top: 20px;
       }
        
         
       
         
       
          .timeline-content {
              
             letter-spacing: .45px;
             line-height: 18px;
             font-size: 20px;
               width: 550px;  
             
            
         } 
         .timeline-content p{
             padding-top: -10px;
           
       
            
         }
       #titre{
           position: relative;
           left: 120px;
           top: 40px;
       } 
       
       .progress{
        position: relative;
        right: -20px;
        top: 50px;
        height:50px;
        display:flex;
        width: 600px; 
        margin-left:350px;
        margin-top:50px; 
        margin-bottom:20px;
       
    
    }
    .progress-bar{
        font-size:50px;
        /* color:black; */
        padding: 13px;
        
    }
    .code
    {
    
    background: linear-gradient(to left, #40a497, #6840a4);
    /* width: 45em;
    height: 45em; */
    
    border-radius:0%;
    padding-top: 8px ;
    padding-left: 10px ;
     
     font-size:25px ;
     color:white;
     width:70px; 
     
    
    }
    .fa-brands{
        font-size: 10px;
        text-align: center;
    } 
    
    form{
        width: 400px;
        border: black 2px solid;
        margin-top: 250px ;
        position: relative;
        bottom: 100px;
        left: 450px;
        } 
        .btn{
            width:100%; margin-top:10px; margin-left:-30px; margin-bottom:10px;
        } 

   #soura{
          width: 500px;
          top: -150px;
          position: relative;
           left: 770px;
         
           opacity: 0.7; 
          } 






          footer{
            background: linear-gradient(to left,white 50% ,rgb(13, 146, 146));
             height: 115px; 
            /* position: relative;
            top: 50px;
            left: -200px; */
             /* width: 130%;  */
             margin: auto;
            
      
      }
      .fa-brands{
            font-size: 30px;
            margin-left: 20px;
      }
      footer ul{
            position: relative;
            top: 50px;
            left: 500px;
            
      }







    }

@media only screen and (min-width :1920px){
        body{
            width: auto;
            margin:0 auto;
            } 
            
      .header{
          position: fixed;  display:flex; justify-content:space-around; width: 100%; height: 15%; margin-left: auto;
          /* border: black 2px solid; */
      }      
            
      nav ul{
             display: flex;
            position: relative;
            top: 40px;
            right: 230px;
            background:linear-gradient(to left,  white 50%  ,#6cbdbd(77, 165, 165) );
            z-index: +1;
            /* border: black 2px solid; */
                
            
                  
            }
      .li{
            list-style: none;
            margin-right: 50px;
      }
      .li a{
            text-decoration: none; 
            font-size:50px; 
            color: black;
            font-family: 'Redressed', cursive;
            }
      .logo {
             height: 100px;
            width: 100px;
            position: relative;
            bottom:-5px;
            left: -100px;

            /* border-top: black 2px solid; */
            }
      .logo img{
             height: 100px;
             width: 100px;
            }
            
  
      h1{
     
            font-family: 'Redressed', cursive;
            position: relative;
            left: 700px;
            top: 350px;
            color:black;
            font-size: 50px;
            
             
            border-bottom: black 2px solid;
            width: 20%;
            border-top: black 2px solid;
            padding: 10px ;
            padding-left: 50px;
      }
             
      h2{
            position: relative;
            left: 890px;
            top: 350px;
            color:black;
            font-size: 40px;
            width: 240px;
            padding: 10px;
            font-family: 'Redressed', cursive;
            }
             
      h3{
            position: relative;
            left: 700px;
            top: 340px;
            color:black;
            font-size: 40px;
            width: 280px;
            padding: 10px;
            font-family: 'Redressed', cursive;
            /* border: black 2px solid; */
             
            }
  
            #container{
              position: relative;
              right:-400px;
              top: 100px;
               width: 50%;
               margin-bottom: 150px;
               z-index: -1;
         } 
         h4{
          font-size: 45px;
         
          /* position: relative; */
          /* left: 400px;  */
          margin-left: 550px;
          margin-bottom :20px; 
          margin-top: 200px;
          
         
          text-align: center;
          
          top:30px ; 
          border-top: black 2px solid;
          border-bottom: black 2px solid;
          width: 315px;
          padding: 10px;
          font-family: 'Redressed', cursive;
          z-index: -1;
  
      } 
  
        #caro{
               
               position: relative;
               left: 405px;
               bottom: -100px;
            
              display: flex;
              margin-bottom: 200px;
          }
          .caro{
              margin-left: -5px; padding-left:20px;
              
          }
          .caro img{
              height: 300px;
              width: 320px;
              margin: 0 auto;
          
          }     
         
           
         
          
           .timeline {
               list-style-type: none;
               margin: 0;
               padding: 0;
               position: relative
           }
           
            .timeline:before {
               content: '';
               position: absolute;
               top: 5px;
               bottom: 5px;
               width: 5px;
               background: #2d353c;
               left: 20%;
               margin-left: -2.5px
           } 
           
            .timeline>li {
               position: relative;
               
               min-height: 50px;
               padding-top: 25px 
               
               
           } 
           
            .timeline .timeline-time {
               position: absolute;
               left: 0;
               width: 18%;
               text-align: right;
               top: 30px
           } 
           
           .timeline .timeline-time .date,
           .timeline .timeline-time .time {
               display: block;
               font-weight: 600
           }
           
           .timeline .timeline-time .date {
               line-height: 16px;
               font-size: 40px
           }
           
            .timeline .timeline-time .time {
               line-height: 25px;
               font-size: 25px;
               position: relative;
               left: -10px;
               /* color: hsl(0, 87%, 47%) */
           } 
           
            .timeline .timeline-icon {
               left: 15%;
               position: absolute;
               width: 10%;
               text-align: center;
               top: 40px
           } 
           
            .timeline .timeline-icon a {
               text-decoration: none;
               width: 20px;
               height: 20px;
               display: inline-block;
               border-radius: 20px;
               background: #e7d9de;
               line-height: 10px;
               color: rgb(90, 12, 126);
               font-size: 14px;
               border: 5px solid #2d353c;
               transition: border-color .2s linear
           } 
           
            .timeline .timeline-body {
               margin-left: 235px;
               margin-right: 17%;
               background:linear-gradient(to left, rgb(13, 146, 146), white 50%  );
               position: relative;
               padding: 20px 25px;
               border-radius: 0px 20px 20px;
               width: 600px;
               
         
           } 
         
           .timeline .timeline-body::before {
           content: '';
           display: block;
           position: absolute;
           border: 10px solid transparent;
             border-right-color: transparent;
           border-right-color: #fff;
           left: -20px;
           top: 20px;
         }
          
           
         
           
         
            .timeline-content {
                
               letter-spacing: .45px;
               line-height: 18px;
               font-size: 20px;
                 width: 550px;  
               
              
           } 
           .timeline-content p{
               padding-top: -10px;
             
         
              
           }
         #titre{
             position: relative;
             left: 120px;
             top: 40px;
         } 
         
         .progress{
          position: relative;
          right: -260px;
          top: 50px;
          height:50px;
          display:flex;
          width: 600px; 
          margin-left:350px;
          margin-top:40px; 
          margin-bottom:60px;
         
      
      }
      .progress-bar{
          font-size:50px;
          /* color:black; */
          
          padding: 20px;
          
      }
      .code
      {
      
      background: linear-gradient(to left, #40a497, #6840a4);
      /* width: 45em;
      height: 45em; */
      
      border-radius:0%;
      padding-top: 8px ;
      padding-left: 10px ;
       
       font-size:25px ;
       color:white;
       width:70px; 
       
      
      }
      .fa-brands{
          font-size: 10px;
          text-align: center;
      } 
      
      form{
          width: 400px;
          border: black 2px solid;
          margin-top: 250px ;
          position: relative;
          bottom: 100px;
          left: 700px;
          } 
          .btn{
              width:100%; margin-top:10px; margin-left:-30px; margin-bottom:10px;
          } 
  
      
      #soura{
            position: relative;
            left: 1300px;
            width: 500px;
            bottom: 70px;
            /* border: black 2px solid; */
            opacity: 0.7;
            }  
  
  
  
  
  
  
            footer{
              background: linear-gradient(to left,white 50% ,rgb(13, 146, 146));
               height: 135px; 
               position: static;
               /* border: #2d353c 2px solid; */
               margin: auto;
               top: auto;
               
              
        
        }
        .fa-brands{
              font-size: 30px;
              margin-left: 20px;
        }
        footer ul{
              position: relative;
              /* top: 800px; */
              left: 800px;
             
              
        }

    }