@import url('https://fonts.googleapis.com/css?family=Montserrat');

/* https://www.youtube.com/watch?v=sVZX0XvEBhk */
/* la siguiente parte funciona sólo si se soporta variables css que en algunos exploradores no lo hace */
:root {
  --marquee-width: 80vw;
  --marquee-height: 20vh;
  /* --marquee-elements: 12; */ /* defined with JavaScript */
  --marquee-elements-displayed: 5;
  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
  --marquee-element-width: calc(80vw / 5);
  --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
}

#sampleanimation {
width: 50px;
height: 50px;
position: absolute;
background-color: blue;
}

#myContainer {
  width: 400px;
  height: 400px;
  position: relative;
  background: black;
}


.fimmarquee {
  width: 80vw;
  height: 8vh;
  background-color: #e6f3fc;
  color: #032238;
  overflow: hidden;
  position: relative;
}
.fimmarquee:before, .fimmarquee:after {
  position: absolute;
  top: 0;
  width: 10rem;
  height: 100%;
  content: "";
  z-index: 1;
}
.fimmarquee:before {
  left: 0;
  background: linear-gradient(to right, #111 0%, transparent 100%);
}
.fimmarquee:after {
  right: 0;
  background: linear-gradient(to left, #111 0%, transparent 100%);
}
.fimmarquee-content {
  list-style: none;
  height: 100%;
  display: flex;
  animation: fimscrolling calc(12 * 3s) linear infinite;
}
.fimmarquee-content:hover {
  animation-play-state: paused;
}

@keyframes fimscrolling {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * (80vw / 5) * 12)); }
}
.fimmarquee-content li {
  margin-top: none ;	
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
  flex-shrink: 0;
  width: calc(80vw / 5);
  font-size: calc(10vh*3/4); /* 5rem; */
  white-space: nowrap;
}

.fimmarquee-content li img {
  width: 100%;
  /* height: 100%; */
  border: 2px solid #eee;
}

.fimmarquee-content li textarea {
  pointer-events: none;
  display: inline-block;
  justify-content: left;
  vertical-align: bottom;
  overflow: hidden;
  text-align: left; 
  flex-shrink: 0;
  max-height: 150%;
  background: #e6f3fc;  
  font-size: calc(2.3vh*3/4); /* 5rem; */
  border: 0;
  margin-left: 1rem;
  resize: none;
}

@media (max-width: 600px) {
  html { font-size: 12px; }
  .marquee {
    width: 100vw;
    height: 16vh;
  }
  .fimmarquee:before, .fimmarquee:after { width: 5rem; }
  .fimmarquee-content li {
      width: calc(80vw / 3);
  }
}