@media only screen and (min-width: 800px) {
.mon-bloc{width:20%;}
}

@media only screen and (max-width: 799px) {
.mon-bloc{width:33%;}
}

{{button class="btn-link btn-icon icon-action" icon="fas fa-angle-double-down" link="#homepage" nobtn="1"  }}

""<div id="homepage"></div>""

/* Animation de l'icone chevron sur home */
@keyframes scroll {

    0% { opacity: 0; }
    30% { transform: translateY(0); opacity: .5; }
    90% { transform: translateY(15px); opacity: 1;}
    100% { transform: translateY(20px); opacity: 0;}

}
.icon-action {
  font-size: 4em;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  width: fit-content;
  display: block;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

h1 {
    animation: fadeIn 3s;
}

h1 {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid transparent; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    animation:
        typing 3.5s steps(26, end),
        blink-caret .75s step-end ;
}

/* The typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }

}

/* The typewriter cursor effect */
@keyframes blink-caret {
    from, to { border-color: transparent ;}
    50% { border-color: var(--secondary-color-1); }
    100% { border-color: transparent; }

}

{{ fiche.bf_date_debut_evenement|date("j M y","Europe/Paris") }}

{{ html.bf_date_debut_evenement }}

{% if date(fiche.bf_date_limite) > date() %}
<p> Les inscriptions sont fermées </p>
{%endif %}

body{font-size:17px;}
h1{font-size:3.2rem;}

{{ format('{{include page="' ~ fiche.id_fiche ~ '"}}') }}

# --- Start reserved admins info --- #}
{% if hasAcl("@admins",fiche.id_fiche) %}

  <div class="panel panel-warning">
    <div class="panel-heading  center">
      <h4><i class="far fa-hand-point-right"></i> Administration</h4>
    </div>
    <div class="panel-body">
      Projets : {{html.listeListeProjects }}
    </div>
  </div>

{% endif %}

/* section effet texte au survol */
.text-hidden {

    background-color:transparent;
    webkit-transition: all ease-out 0.3s;
    -moz-transition: all .3s ease-in-out;
    transition: background-image 2s ease;
        border: 1em solid var(--secondary-color-1);
        box-shadow: inset 0 0 0 0 var(--secondary-color-1)!important;
        }

.text-hidden:hover{

    background-image: unset !important;
    background-color:var(--secondary-color-1);
    box-shadow: inset 0 0 0 100px var(--secondary-color-1)!important;}

.text-hidden .container {

    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:630px;
    transition: all .7s ease;
    }


.text-hidden .text-hover{opacity:0;height:0;}
.text-hidden:hover .text-hover{opacity:1;height:100%;transition: all .7s ease;}

{{html.geolocation|raw}}

{{fiche.bf_description1[:250]}}

{% for tag in fiche.bf_tags|split(',') %}
<div class="trombi-content"> {{tag}} </div>
{% endfor %}

{% set fieldOptions = (form.prepared|filter(f => f.propertyname == 'checkboxListeViolence')|first).options %}
	{% for element in fiche.checkboxListeViolence|split(',')|filter(o => o is not empty) %}
      <span class=" label label-primary">  {{fieldOptions[element]|raw}}  </span>
	{% endfor %}

{% if fiche.imagebf_image is not empty %}
      {# you can choose width, height (in px)  and mode "fit" or "crop" #}
      {% set imageFileAddr = urlImage({fileName:"files/#{fiche.imagebf_image}",width:200,height:200,mode:"crop"}) %}
      {% if not(imageFileAddr is same as(false) or imageFileAddr matches '/^\\d+$/') %}
        {# imageFileAddr is not false or not integer otherwise error #}
        <img
          class="center custom-entry"
          alt="{{ fiche.bf_titre|e('html_attr') }}"
          src="{{ imageFileAddr }}"
        />
      {% endif %}
 {% endif %}

<h1 class="BAZ_fiche_titre">{{fiche.bf_titre}}</h1>

<p><span> Du </span> {{ html.bf_date_debut_evenement }} <span> au </span> {{ html.bf_date_fin_evenement }}</p>