@import url(../../../sites/resources/css/estils.css); /* NO ESBORRAR, enllaa amb la fulla d'estils base per a tots els microsites */


/*  Propis */

/*Desplagables*/

#showdesplega,#hidedesplega {
	display:none;
}

div#contentdesplega {
	display:none;

  background-color:#f6f6f6;
  width:100%;
  cursor:pointer;
}

input#showdesplega:checked ~ div#contentdesplega {
	display:block;
}

input#hidedesplega:checked ~ div#contentdesplega {
	display:none;
}



.apareixer{
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  color:red;
  font-weight: bold;
}

.apareixer:first-of-type {    /* For increasing performance 
                       ID/Class should've been used. 
                       For a small demo 
                       it's okaish for now */
  animation: showup 2s infinite;
}

.apareixer:last-of-type {
  width:0px;
  animation: reveal 3s infinite;
}

.apareixer:last-of-type span {
  margin-left:-355px;
  animation: slidein 3s infinite;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-800px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:355px;}
    80% {opacity:1;}
    100% {opacity:0;width:355px;}
}


p {
  font-size:12px;
  color:#999;
  margin-top:200px;
}