:root {


  --color-1 : #0b5ed7;
  --color-2 : #123456;
  --color-3 : #160108;
  --color-4 : #48516A;
  --color-5 : #EFEAE6;
  --color-6 : #FFFFFF;
  --color-7 : #372C25;

/*

  --color-1 : #0b5ed7;
  --color-2 : #123456;
  --color-3 : #160108;
  --color-4 : #48516A;
  --color-5 : #EFEAE6;
  --color-6 : #FFFFFF;
  --color-7 : #372C25;

*/


--body-user-seperator-border : #0b5ed7;


/* BTN Orange Pastel */

  --body-user-btn-color_Orange : #ef6c00;
  --body-user-btn-bg_Orange : #fff3e0;
  --body-user-btn-border_Orange : #fff3e0;
  --body-user-btn-icon-color_Orange : #ef6c00;

  --body-user-btn-color-hover_Orange : #e65100;
  --body-user-btn-bg-hover_Orange : #ffe0b2;
  --body-user-btn-border-hover_Orange : #ffe0b2;
  --body-user-btn-icon-color-hover_Orange : #e65100;


/* BTN Red Pastel */

  --body-user-btn-color_Red : #333;
  --body-user-btn-bg_Red : #f4cccc;
  --body-user-btn-border_Red : #f4cccc;
  --body-user-btn-icon-color_Red : #333;

  --body-user-btn-color-hover_Red : #333;
  --body-user-btn-bg-hover_Red : #e6bcbc;
  --body-user-btn-border-hover_Red : #e6bcbc;
  --body-user-btn-icon-color-hover_Red : #333;

/* BTN Vert Pastel */

  --body-user-btn-color_Green : #2e7d32; /* Vert principal (texte/icône) */
  --body-user-btn-bg_Green : #e8f5e9;    /* Vert très clair (fond) */
  --body-user-btn-border_Green : #e8f5e9;
  --body-user-btn-icon-color_Green : #2e7d32;

  --body-user-btn-color-hover_Green : #1b5e20; /* Vert plus foncé (hover) */
  --body-user-btn-bg-hover_Green : #c8e6c9;    /* Fond vert pastel plus soutenu */
  --body-user-btn-border-hover_Green : #c8e6c9;
  --body-user-btn-icon-color-hover_Green : #1b5e20;

/* BTN Violet Pastel */

  --body-user-btn-color_Purple : #6a1b9a; /* Violet principal (texte/icône) */
  --body-user-btn-bg_Purple : #f3e5f5;    /* Violet très clair (fond) */
  --body-user-btn-border_Purple : #f3e5f5;
  --body-user-btn-icon-color_Purple : #6a1b9a;

  --body-user-btn-color-hover_Purple : #4a148c; /* Violet plus foncé (hover) */
  --body-user-btn-bg-hover_Purple : #e1bee7;    /* Fond violet pastel plus soutenu */
  --body-user-btn-border-hover_Purple : #e1bee7;
  --body-user-btn-icon-color-hover_Purple : #4a148c;



/* GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL */
/* GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL */
/* GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL */
/* GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL  GENERAL */



/* Variable CSS Nav : Nav */
  
  --Nav-bg : #FFFFFF;

  --Nav-icon-bg : #0b5ed7;
  --Nav-icon-color : #FFFFFF; /* Se met dans le code html pour enlever la border quand on clic sur l'icone */
  /* Si on veut changer la couleur de l'icone il faut la changer dans le svg plus bas en RGB */

  

  --Nav-link-color : #160108;
  --Nav-link-bg : #FFFFFF;
  --Nav-link-border : #FFFFFF;

  --Nav-link-color-hover : #d3d3d3;
  --Nav-link-bg-hover : #FFFFFF;
  --Nav-link-border-hover : #FFFFFF;

  --Nav-btn-color : #FFFFFF;
  --Nav-btn-bg : #0b5ed7;
  --Nav-btn-border : #FFFFFF;
  --Nav-btn-icon-color : #160108;

  --Nav-btn-color-hover : #FFFFFF;
  --Nav-btn-bg-hover : #160108;
  --Nav-btn-border-hover : #0b5ed7;
  --Nav-btn-icon-color-hover : #160108;


/* Variable CSS Form : Form */
  
  --Form-bg : #EFEAE6;

  --Form-h1 : #FFFFFF;
  --Form-h1-light : #FFFFFF;
  --Form-p : #160108;

  --Form-input_bg : #FFFFFF;
  --Form-input-color : #686674;
  --Form-input_border : #EBEBEB;

  --Form-btn-color : #FFFFFF;
  --Form-btn-bg : #0b5ed7;
  --Form-btn-border : #FFFFFF;
  --Form-btn-icon-color : #160108;

  --Form-btn-color-hover : #FFFFFF;
  --Form-btn-bg-hover : #160108;
  --Form-btn-border-hover : #0b5ed7;
  --Form-btn-icon-color-hover : #160108;


/* Variable CSS Block footer : BFooter*/
  
  --BFooter-bg : #160108;

  --BFooter-icon : #FFFFFF;

  --BFooter-title : #160108;
  --BFooter-p : #FFFFFF;


/* Variable CSS Block sidebard : BSideB*/
  
  --BSideB-bg : #0b5ed7;

  --BSideB-icon : #FFFFFF;

/* Variable CSS Block cookie modal : BCookieM*/
  
  --BCookieM-bg : #FFFFFF;

  --BCookieM-title : #160108;

  --BCookieM-p : #160108;

  --BCookieM-btn-color : #FFFFFF;
  --BCookieM-btn-bg : #0b5ed7;
  --BCookieM-btn-border : #FFFFFF;
  --BCookieM-btn-icon-color : #FFFFFF;

  --BCookieM-btn-color-hover : #FFFFFF;
  --BCookieM-btn-bg-hover : #160108;
  --BCookieM-btn-border-hover : #FFFFFF;
  --BCookieM-btn-icon-color-hover : #FFFFFF;


  --BCookieM_refuse-btn-color : #FFFFFF;
  --BCookieM_refuse-btn-bg : #6c757d;
  --BCookieM_refuse-btn-border : #FFFFFF;
  --BCookieM_refuse-btn-icon-color : #FFFFFF;

  --BCookieM_refuse-btn-color-hover : #FFFFFF;
  --BCookieM_refuse-btn-bg-hover : #565e64;
  --BCookieM_refuse-btn-border-hover : #FFFFFF;
  --BCookieM_refuse-btn-icon-color-hover : #FFFFFF;


/* Variable CSS footer 2 : BFooter2*/
  
  --BFooter2-bg : #0b5ed7;

  --BFooter2-color : #FFFFFF;

  --BFooter2-a-color : #FFFFFF;


/* INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  */
/* INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  */
/* INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  */
/* INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  INDEX  */




/* Variable CSS Block services : BS */
  
  --BS-bg : #FFFFFF;

  --BS-icon : #0b5ed7;

  --BS-h2 : #160108;
  --BS-h2-light : #0b5ed7;

  --BS-p : #160108;

  --BS-div-h3 : #d41c5b;
  --BS-div-h3-light : #d41c5b;
  --BS-div-bg : #F5F5F5;
  --BS-div-p : #160108;
  --BS-div-border : #0b5ed7;

  --BS-btn-color : #d41c5b;
  --BS-btn-bg : #0b5ed7;
  --BS-btn-border : #FFFFFF;
  --BS-btn-icon-color : #160108;

  --BS-btn-color-hover : #160108;
  --BS-btn-bg-hover : #EFEAE6;
  --BS-btn-border-hover : #0b5ed7;
  --BS-btn-icon-color-hover : #160108;

/*
  --BS-icon : #ff0076;

  --BS-h2 : #3e6070;
  --BS-h2-light : #7e4dfc;

  --BS-p : #3e6070;

  --BS-div-h3 : #ff0076;
  --BS-div-h3-light : #160108;
  --BS-div-bg : #EFEAE6;
  --BS-div-p : #3e6070;
  --BS-div-border : #ff0076;

  */



/* Variable CSS Block process : BPr */
  
  --BPr-bg : #FFFFFF;

  --BPr-icon : #EFEAE6;

  --BPr-h2 : #160108;
  --BPr-h2-light : #d41c5b;

  --BPr-p : #160108;

  --BPr-icon-color : #0b5ed7;

  --BPr-btn-color : #FFFFFF;
  --BPr-btn-bg : #0b5ed7;
  --BPr-btn-border : #FFFFFF;
  --BPr-btn-icon-color : #FFFFFF;

  --BPr-btn-color-hover : #160108;
  --BPr-btn-bg-hover : #EFEAE6;
  --BPr-btn-border-hover : #0b5ed7;
  --BPr-btn-icon-color-hover : #160108;


/* Variable CSS Block infos : BIn */
  
  --BIn-bg : #F5F5F5;

  --BIn-icon : #0b5ed7;

  --BIn-h2 : #160108;
  --BIn-h2-light : #0b5ed7;

  --BIn-p : #160108;

  --BIn-card-1-h3_color : #160108;
  --BIn-card-1-p_color : #160108;
  --BIn-card-1-bg : #FFFFFF;

  --BIn-card-2-h3_color : #160108;
  --BIn-card-2-p_color : #160108;
  --BIn-card-2-bg : #FFFFFF;

  --BIn-card-3-h3_color : #FFFFFF;
  --BIn-card-3-p_color : #FFFFFF;
  --BIn-card-3-bg : #0b5ed7;

  --BIn-card-4-h3_color : #FFFFFF;
  --BIn-card-4-p_color : #FFFFFF;
  --BIn-card-4-bg : #0b5ed7;

  --BIn-card-5-h3_color : #FFFFFF;
  --BIn-card-5-p_color : #FFFFFF;
  --BIn-card-5-bg : #160108;

  --BIn-card-6-h3_color : #FFFFFF;
  --BIn-card-6-p_color : #FFFFFF;
  --BIn-card-6-bg : #160108;

  --BIn-btn-color : #FFFFFF;
  --BIn-btn-bg : #0b5ed7;
  --BIn-btn-border : #FFFFFF;
  --BIn-btn-icon-color : #FFFFFF;

  --BIn-btn-color-hover : #FFFFFF;
  --BIn-btn-bg-hover : #160108;
  --BIn-btn-border-hover : #FFFFFF;
  --BIn-btn-icon-color-hover : #FFFFFF;



/* ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML */
/* ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML */
/* ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML */
/* ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML  ML */


/* Variable CSS Block ML Header : ML-Header */

  --ML-Header-bg : #EFEAE6;
  
  --ML-Header-h1 : #160108;


/* Variable CSS Block ML cards : ML-cards */

  --ML-cards-bg : #FFFFFF;
  
  --ML-cards-h4 : #160108;
  --ML-cards-hr : #0b5ed7;
  --ML-cards-ul : #160108;
  --ML-cards-a : #0b5ed7;





/* RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD */
/* RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD */
/* RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD */
/* RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD  RGPD */




/* Variable CSS Block RGPD Header : RGPD-Header */

  --RGPD-Header-bg : #EFEAE6;
  
  --RGPD-Header-h1 : #160108;
  --RGPD-Header-p : #160108;
  --RGPD-Header-a : #0b5ed7;


/* Variable CSS Block RGPD cards : RGPD */
  
  --RGPD-cards-container-bg : #EFEAE6;

  --RGPD-cards-bg : #FFFFFF;
  
  --RGPD-cards-h4 : #0b5ed7;
  --RGPD-cards-hr : #160108;
  --RGPD-cards-p : #160108;
  --RGPD-cards-a : #0b5ed7;



/* NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL */
/* NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL */
/* NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL */
/* NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL */


  --Nav-general-bg : #FFFFFF;

  --Nav-general-icon-bg : #0b5ed7;
  --Nav-general-icon-color : #FFFFFF; /* Se met dans le code html pour enlever la border quand on clic sur l'icone */
  /* Si on veut changer la couleur de l'icone il faut la changer dans le svg plus bas en RGB */



  --Nav-general-link-color : #160108;
  --Nav-general-link-bg : #FFFFFF;
  --Nav-link-border : #FFFFFF;

  --Nav-general-link-color-hover : #d3d3d3;
  --Nav-general-link-bg-hover : #FFFFFF;
  --Nav-general-link-border-hover : #FFFFFF;



/* NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL */
/* NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL */
/* NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL */
/* NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL  NAV GENERAL */


/* NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER */
/* NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER */
/* NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER */
/* NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER */


/* Variable CSS Nav : Nav */
  
  --Nav-user-bg : #FFFFFF;

  --Nav-user-icon-bg : #0b5ed7;
  --Nav-user-icon-color : #FFFFFF; /* Se met dans le code html pour enlever la border quand on clic sur l'icone */
  /* Si on veut changer la couleur de l'icone il faut la changer dans le svg plus bas en RGB */

  

  --Nav-user-link-color : #160108;
  --Nav-user-link-bg : #FFFFFF;
  --Nav-user-link-border : #FFFFFF;
  --Nav-user-link-icon-color : #0b5ed7;

  --Nav-user-link-color-hover : #d3d3d3;
  --Nav-user-link-bg-hover : #FFFFFF;
  --Nav-user-link-border-hover : #FFFFFF;

  --Nav-user-btn-color : #FFFFFF;
  --Nav-user-btn-bg : #0b5ed7;
  --Nav-user-btn-border : #FFFFFF;
  --Nav-user-btn-icon-color : #160108;

  --Nav-user-btn-color-hover : #FFFFFF;
  --Nav-user-btn-bg-hover : #160108;
  --Nav-user-btn-border-hover : #0b5ed7;
  --Nav-user-btn-icon-color-hover : #160108;


/* NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER */
/* NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER */
/* NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER */
/* NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER  NAV USER */

/* BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER */
/* BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER */
/* BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER */
/* BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER */

  --body-user-bg : #F6F9FC;

  --body-user-hr-bg : #0b5ed7;

  --body-user-h2-color : #160108;


  --body-user-btn-color : #1e3a8a;
  --body-user-btn-bg : #dbeafe;
  --body-user-btn-border : #FFFFFF;
  --body-user-btn-icon-color : #160108;

  --body-user-btn-color-hover : #1e40af;
  --body-user-btn-bg-hover : #bfdbfe;
  --body-user-btn-border-hover : #0b5ed7;
  --body-user-btn-icon-color-hover : #160108;


/* BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER */
/* BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER */
/* BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER */
/* BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER  BODY USER */


}










/* CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL */
/* CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL */
/* CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL */
/* CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL  CSS GENERAL */


/* CARD ANNONCES */


.cards_annonce:hover {
  transform: scale(1.02); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}



   
/* NavBar */

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(255,255,255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }



/* Add Shadow Effect on BTN */

.btn{
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}

/* Font Family */

body{
    font-family: 'Nunito', sans-serif;
}


/* Hover Effect */

.boxGDA:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.2); 
  color: red;
}


/* Parallax */

.parallaxDND {
  /* The image used */
  background-image: url("design/img/technicien-sanitaire-se-trouvant-sous-evier.jpg");

  /* Set a specific height */
  min-height: 300px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}




/* Pour word rotating */



/* 2nd affichage */ 


.sentence{
    color: #222;
    font-size: 30px;
    text-align: left;
}
/*Wrapper*/
.wrapper{
   background-color: #f5f5f5;
   /*font-family: 'Raleway', sans-serif;*/
   /*margin: 100px auto;
   padding: 40px 40px;*/
   /*position: relative;*/
  /* width: 70%;*/
}

/*Vertical Sliding*/
.slidingVertical{
  /* display: inline;*/
   text-indent: 8px;
}
.slidingVertical span{
   animation: topToBottom 12.5s linear infinite 0s;
   -ms-animation: topToBottom 12.5s linear infinite 0s;
   -webkit-animation: topToBottom 12.5s linear infinite 0s;
   /*color: #00abe9;*/
   opacity: 0;
   overflow: hidden;
   position: absolute;
}
.slidingVertical span:nth-child(2){
   animation-delay: 2.5s;
   -ms-animation-delay: 2.5s;
   -webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
   animation-delay: 5s;
   -ms-animation-delay: 5s;
   -webkit-animation-delay: 5s;
}
.slidingVertical span:nth-child(4){
   animation-delay: 7.5s;
   -ms-animation-delay: 7.5s;
   -webkit-animation-delay: 7.5s;
}
.slidingVertical span:nth-child(5){
   animation-delay: 10s;
   -ms-animation-delay: 10s;
   -webkit-animation-delay: 10s;
}

/*topToBottom Animation*/
@-moz-keyframes topToBottom{
   0% { opacity: 0; }
   5% { opacity: 0; -moz-transform: translateY(-50px); }
   10% { opacity: 1; -moz-transform: translateY(0px); }
   25% { opacity: 1; -moz-transform: translateY(0px); }
   30% { opacity: 0; -moz-transform: translateY(50px); }
   80% { opacity: 0; }
   100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
   0% { opacity: 0; }
   5% { opacity: 0; -webkit-transform: translateY(-50px); }
   10% { opacity: 1; -webkit-transform: translateY(0px); }
   25% { opacity: 1; -webkit-transform: translateY(0px); }
   30% { opacity: 0; -webkit-transform: translateY(50px); }
   80% { opacity: 0; }
   100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
   0% { opacity: 0; }
   5% { opacity: 0; -ms-transform: translateY(-50px); }
   10% { opacity: 1; -ms-transform: translateY(0px); }
   25% { opacity: 1; -ms-transform: translateY(0px); }
   30% { opacity: 0; -ms-transform: translateY(50px); }
   80% { opacity: 0; }
   100% { opacity: 0; }
}