@charset "UTF-8";

/*
	Site Officiel Association loi 1901 DicoLSF by AWA (www.drone-awa.com | @awa : 23/6/2020)
	css pour l'historique avec l'échelle verticale du site Internet license AWA (www.drone-awa.com/license)
	@import url(font-awesome.min.css); @import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400";

	Icon : https://www.w3schools.com/icons/default.asp
	Source Ombrage : https://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-css-box-shadow-text-shadow.html
*/

/*
	Future Imperfect by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)

	Nouvelle Charte des Couleurs : background: #e89980; orange clair : #f7b5a4
	Violet = 	 #9900CC 		(R 153 ; V 0 ; B 204) 			(C 57; M 88; J 0; N 0)
	Orange Vif = #FF6600 		(R 255 ; V 102 ; B 0) 			(C 0; M 74; J 100; N 0)
	Orange = 	 #dd8800 		(R 221 ; V 136 ; B 0) 			(C 24; M 92; J 83; N 16)
	Gris = 		 #DBCDB9 		(R 219 ; V 205 ; B 185) 		(C 16; M 18; J 29; N 2)
	
	A voir avec le Violet et le Orange mais opter pour une déclinaison : Mandarine ou Pourpre ????
	Mandarine = #FCE7D9 		(R 221 ; V 188 ; B 131) 		(C 14; M 26; J 54; N 3)
	Pourpre = 	#ECC8FC 		(R 236 ; V 200 ; B 252) 		(C 7; M 21; J 56; N 0)
*/

#cd-timeline {
  position: relative;
  padding: 2em 0;
  margin-top: 2em;
  margin-bottom: 2em;
}

#cd-timeline::before {
  /* this is the vertical line */
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 4px;
  background: #9900CC;
}

@media only screen and (min-width: 1170px) {
  #cd-timeline {
    margin-top: 3em;
    margin-bottom: 3em; 
    /* Decalage de l'ensemble pour centrer */
    padding-left: 1.85rem;
  }
  /* Position du trait vertical */
  #cd-timeline::before {
    left: 50%;
    margin-left: 0.85rem; } 
}

.cd-timeline-block {
  position: relative;
  margin: 2em 0; 
}

/* Classement en décalant les Blocks */
.cd-timeline-block::after {
  clear: both;
  content: "";
  display: table; }

.cd-timeline-block:first-child {
  margin-top: 0; }

.cd-timeline-block:last-child {
  margin-bottom: 0; }

@media only screen and (min-width: 1170px) {
  .cd-timeline-block {
    margin: 4em 0; }
  .cd-timeline-block:first-child {
    margin-top: 0; }
  .cd-timeline-block:last-child {
    margin-bottom: 0; } 
}

.cd-timeline-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #9900CC, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); }

.cd-timeline-img img {
  display: block;
  width: 48px;
  position: relative;
  left: 30%;
  top: 30%;
  margin-left: -12px;
  margin-top: -12px;
  border-radius: 50%; }




.cd-timeline-img.cd-security {
  background: #9900CC; }

.cd-timeline-img.cd-option {
  background: #DBCDB9; }

.cd-timeline-img.cd-obligatoir {
  background: #FF6600; }




@media only screen and (min-width: 1170px) {
  .cd-timeline-img {
    width: 60px;
    height: 60px;
    left: 50%;
    margin-left: -30px;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden; }
  .cssanimations .cd-timeline-img.is-hidden {
    visibility: hidden; }
  .cssanimations .cd-timeline-img.bounce-in {
    visibility: visible;
    -webkit-animation: cd-bounce-1 0.6s;
    -moz-animation: cd-bounce-1 0.6s;
    animation: cd-bounce-1 0.6s; } 
}

@-webkit-keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5); }
  60% {
    opacity: 1;
    -webkit-transform: scale(1.2); }
  100% {
    -webkit-transform: scale(1); } }

@-moz-keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -moz-transform: scale(0.5); }
  60% {
    opacity: 1;
    -moz-transform: scale(1.2); }
  100% {
    -moz-transform: scale(1); } }

@keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5); }
  60% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2); }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } 
  }








.cd-timeline-content {
  position: relative;
  margin-left: 60px;
  background: #f0f1f3;
  border-radius: 0.25em;
  padding: 1em;
  box-shadow: 0 3px 0 #9900CC;              /* Couleur Violet */
}

.cd-timeline-content::after {
  clear: both;
  content: "";
  display: table; }

.cd-timeline-content h2 {
  font-family : "sign_painter" , "dancing_script" , "black_jack" , "Calibri" ;
  color: #9900CC;                         /* Couleur Violet */ 
  font-size: 1.65rem;
}

.cd-timeline-content h2 strong {
  /*font-family : "chocolate" , "arista" , "arial_rounded" , "Ardelaney" , "Calibri" ;*/
  font-family : "Raleway-ExtraBold" , "arista" , "arial_rounded" , "Ardelaney" , "Calibri" ;
  color: #FF6600;													/* Couleur Orange */ 
  font-size: 1.45rem;
}

.cd-timeline-content p, 
.cd-timeline-content .cd-read-more, 
.cd-timeline-content .cd-date {
  font-size: 13px;
  font-size: 0.8125rem;
  font-weight: bolder;
}

.cd-timeline-content .cd-read-more, 
.cd-timeline-content .cd-date {
  display: inline-block; 
}

.cd-timeline-content p {
  margin: 1em 0;
  line-height: 1.6; }

.cd-timeline-content .cd-read-more {
  float: right;
  padding: .8em 1em;
  background: #9900CC;													  /* Couleur Violet */ 
  color: #ffffff;
  border-radius: 0.25em; }

.no-touch .cd-timeline-content .cd-read-more:hover {
  background-color: #DBCDB9 !important;					/* Couleur Survol Liens Gris */ 

    -moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
		-webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
		-ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
		transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

.cd-timeline-content .cd-date {
  float: left;
  padding: .8em 0;
  font-size: 1.25rem;
  color: #9900CC;													    /* Couleur Violet */ 
  /*opacity: .7;*/
}

/* Triangle placé à Gauche de la box Blanche */
.cd-timeline-content::before {
  content: '';
  position: absolute;
  top: 16px;
  right: 100%;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-right: 7px solid #f0f1f3; }

@media only screen and (min-width: 768px) {
  .cd-timeline-content h2 {
    font-size: 20px;
    font-size: 1.45rem; }
  .cd-timeline-content h2 strong {
    font-size: 1.65rem; }
  .cd-timeline-content p {
    font-size: 16px;
    font-size: 1rem; }
  .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
    font-size: 14px;
    font-size: 0.875rem; 
  } 
}

@media only screen and (min-width: 1170px) {
  .cd-timeline-content {
    margin-left: 0;
    /* Ecart entre bord et Contenu */
    padding: 1.6em;
    /* Position du cadre Blanc avec ligne au centre */
    width: 45%; }
  
  /* Triangle placé à Droite de la box Blanche */
  .cd-timeline-content::before {
    top: 24px;
    left: 100%;
    border-color: transparent;
    border-left-color: #f0f1f3; 
  }

  .cd-timeline-content .cd-read-more {
    float: left; }
  .cd-timeline-content .cd-date {
    position: absolute;
    width: 100%;
    left: 122%;
    top: 6px;
    font-size: 16px;
    font-size: 1rem; 
  }

  /* Provoquer une fois sur deux le block à Droite */
  .cd-timeline-block:nth-child(even) .cd-timeline-content {
    float: right; }
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
    top: 24px;
    left: auto;
    right: 100%;
    border-color: transparent;
    border-right-color: #f0f1f3; }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
    float: right; }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
    left: auto;
    right: 122%;
    text-align: right; 
  }

  
  .cssanimations .cd-timeline-content.is-hidden {
    visibility: hidden; }
  .cssanimations .cd-timeline-content.bounce-in {
    visibility: visible;
    -webkit-animation: cd-bounce-2 0.6s;
    -moz-animation: cd-bounce-2 0.6s;
    animation: cd-bounce-2 0.6s; } 
}












/* Normal */
@media screen and (max-width: 1280px) {
  
}

/* Narrow */
@media screen and (max-width: 980px) {
  .cd-timeline-content h2 {
    font-size: 1.25rem;
  }

  .cd-timeline-content h2 strong {
    font-size: 1.25rem;
  }

  .cd-timeline-content .cd-date {
    font-size: 1.1rem;
  }
}

/* Narrower */
@media screen and (max-width: 840px) {
  .cd-timeline-content h2 {
    font-size: 1.25rem;
  }

  .cd-timeline-content h2 strong {
    font-size: 1.25rem;
  }

  .cd-timeline-content .cd-date {
    font-size: 1.1rem;
  }
}

/* Mobile */
@media screen and (max-width: 736px) {

  .cd-timeline-content {
    /* Ecart entre bord et Contenu */
    padding: 1.2em;
    /* Position du cadre Blanc avec ligne au centre */
    width: 90%; }

  .cd-timeline-content h2 {
    font-size: 1.25rem;
  }

  .cd-timeline-content h2 strong {
    font-size: 1.25rem;
    display: block;
  }

  .cd-timeline-content p {
    display: none; 
  }

  .cd-timeline-content .cd-date {
    font-size: 1.1rem;
  }
}
    
/* Mobile (Portrait) */
@media screen and (max-width: 480px) {

  .cd-timeline-content {
    /* Ecart entre bord et Contenu */
    padding: 0.6em;
    /* Position du cadre Blanc avec ligne au centre */
    width: 90%; }

  .cd-timeline-content h2 {
    font-size: 1.25rem;
  }

  .cd-timeline-content h2 strong {
    font-size: 1.25rem;
    display: block;
  }

  .cd-timeline-content p {
    display: none; 
  }

  .cd-timeline-content .cd-date {
    font-size: 1.1rem;
  }
}


















/* Pas trop utile */
@media only screen and (min-width: 1170px) {
  /* inverse bounce effect on even content blocks */
  .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
    -webkit-animation: cd-bounce-2-inverse 0.6s;
    -moz-animation: cd-bounce-2-inverse 0.6s;
    animation: cd-bounce-2-inverse 0.6s; } 
}

@-webkit-keyframes cd-bounce-2 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(20px); }
  100% {
    -webkit-transform: translateX(0); } 
}

@-moz-keyframes cd-bounce-2 {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100px); }
  60% {
    opacity: 1;
    -moz-transform: translateX(20px); }
  100% {
    -moz-transform: translateX(0); } 
}

@keyframes cd-bounce-2 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    -o-transform: translateX(-100px);
    transform: translateX(-100px); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px); }
  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); } 
}

@-webkit-keyframes cd-bounce-2-inverse {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-20px); }
  100% {
    -webkit-transform: translateX(0); } 
}

@-moz-keyframes cd-bounce-2-inverse {
  0% {
    opacity: 0;
    -moz-transform: translateX(100px); }
  60% {
    opacity: 1;
    -moz-transform: translateX(-20px); }
  100% {
    -moz-transform: translateX(0); } 
}

@keyframes cd-bounce-2-inverse {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    -o-transform: translateX(100px);
    transform: translateX(100px); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
    transform: translateX(-20px); }
  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); } 
}