.fbox{ padding:25px; min-height:320px; background-color:#09C; color:#FFF;-webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;}


.fbox2{ padding:25px; min-height:320px; background-color:#29aba9; color:#FFF;-webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;}
  
 .fbox:hover ,.fbox2:hover{background-color: #036; color:#FFF; cursor:pointer;--tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);}
 


.history-tl-container{
  margin:auto;
  display:block;
  position:relative;    padding:20px; max-width:600px
}
.history-tl-container ul.tl{
    margin:10px 0;
    padding:0;
    display:inline-block;

}
.history-tl-container ul.tl li{
    list-style: none;
    margin:auto;
    margin-left:10%;
    min-height:50px;
    /*background: rgba(255,255,0,0.1);*/
    border-left:1px dashed  #00CCFF;
    padding:0 0 50px 30px;
    position:relative;
}
.history-tl-container ul.tl li:last-child{ border-left:0;}
.history-tl-container ul.tl li::before{
    position: absolute;
    left: -16px;
    top: -5px;
    content: " ";
    border: 8px solid rgba(255, 255, 255, 0.74);
    border-radius: 500%;
    background: #258CC7;
    height: 30px;
    width: 30px;
    transition: all 500ms ease-in-out;

}
.history-tl-container ul.tl li:hover::before{
    border-color:  #258CC7;
    transition: all 1000ms ease-in-out;
}
ul.tl li .item-title{ color: #fff; font-size:15px; line-height:normal;  } 
ul.tl li .timestamp{  color: #CC0;       font-size: 12px;}
.zoom{ animation:zoombg;animation-duration: 57s;
  animation-iteration-count: infinite; background-repeat:no-repeat; background-size:cover }
@keyframes zoombg{
  0% { background-position:center left} 
  50% { background-position: bottom right} 
  100% { background-position:center left} 
}

.fintro{background: rgba(1,11,19,0.6);
background: linear-gradient(180deg, rgba(1,11,19,0.6) 52%, rgba(0,150,200,0.2) 97%); width:100%; height:500px; padding:20px; padding-top:10%;}
.fvid{background: rgba(1,11,19,0.6);
background: linear-gradient(180deg, rgba(1,11,19,0.6) 52%, rgba(0,150,200,0.2) 97%);min-height:400px; position:relative}
.ftext{padding-top:20px; color:#333}
.flogo{max-width:300px; margin:0 auto; padding:20px}
.fdonate{background-color:#25aae1; color:#FFF; text-transform:uppercase; font-weight:bold;--tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);}
.fdonate:hover{background-color: #F66; color:#FFF; text-transform:uppercase; font-weight:bold; letter-spacing:1px}





.projet { 
  position: relative; 
  margin:10px; height:400px;   background-position:center center; background-size:cover; border-radius:10px
}

 

 
 


.uk-section {
  background-color: #FFF; max-width:1400px; margin:0 auto
}
.owl-carousel {
  position: relative; 
}
.owl-nav {
  position: absolute; right:20px; top:-55px
  
}
.uk-card-primary {
  border-radius: 8px;
}
h3 {
  margin-top: 10px
}
.uk-card > :last-child {
  margin-top:0;
  margin-bottom: 10px
}
p {
  margin-top: 30px;
  margin-bottom: 0;
}
.owl-next {
  background: #3286f0;
}
.owl-theme .owl-nav [class*='owl-'] {
  background: #fff; 
    display: inline-block; 
    text-align: center; 
    font-size: 25px; padding:10px
}
 

.simpbtn{padding:5px 10px; font-size:14px; border:2px solid #ccc; color:#ccc;   }
.simpbtn:hover{padding:5px 10px; font-size:14px; border:2px solid #09C; color:#09c}

.rubrique{ font-weight:bold; font-size:14px; color:#000; text-transform:uppercase; letter-spacing:2px; border-bottom:2px solid #f5f5f5; padding-bottom:5px}

.projetintro{position:absolute; bottom:0; padding:20px;background: rgb(1,11,19);
background: linear-gradient(0deg, rgba(1,11,19,0.8) 61%, rgba(0,0,0,0) 100%);  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;}
.projetintro:hover{ padding-bottom:40px}

.projetintro span{ color:#CC0;  }
.projetintro .title{font-weight:bold; font-size:1.5em; color:#FFF; line-height:normal; margin-bottom:0}
.projetintro p{ color:#FFF; margin-top:0; line-height:normal }


.content b {color:#000; display:block}


.fmobile{ display:none}


.nav-item a {
    display: block;
    color: #333;
    padding: 5px;
    text-decoration: none;
    text-transform: uppercase;
    height: auto;
    border-radius: 30px;
    margin-left: 10px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 14px;
    font-weight: 600;}
	
	
	

@media only screen and (min-width: 810px) and (max-width: 1200px) {
.vl {  width: 120px;  height: auto;  margin: 20px;} 
.nav-item a {   margin-left: 2px; font-size:12px}
 }
 
 
@media only screen and (min-width: 510px) and (max-width: 800px) {
	.fmobile{ display: block} 	 
.fbox,.fbox2{ padding:20px; min-height:450px; line-height: 26px}
.statcol .equal-col{ width:100% !important}
.fvid{ min-height:250px; position:relative}
.fvid .zm2{ width:100px; height:auto}
.ftext{padding-top:25px; color:#333; font-size:16px;  line-height: 26px}
 }

@media only screen and (min-width: 280px) and (max-width: 500px) { 	 
.fmobile{ display: block} 
	
.fintro{height:300px; padding:20px; padding-top:10%;}
.fintro h1{ font-size:20px }
.fintro h3{ font-size:16px ; line-height:normal}
.fbox,.fbox2{ padding:20px; min-height:200px; line-height: 26px}
.fvid{ min-height:250px; position:relative}
.fvid .zm2{ width:100px; height:auto}
.ftext{padding-top:25px; color:#333; font-size:16px;  line-height: 26px}
.flogo{max-width:200px; margin:0 auto; padding:20px}}