.div_modal {
  display: none;
  position: fixed;
  top: 10px;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #002640;
  opacity: .80;
  -webkit-opacity: .8;
  -moz-opacity: .8;
  filter: alpha(opacity=80);
  z-index: 920;
}


.div_contenido {
  background-color: #ecf0f5;
  box-shadow: 0 0 20px 0 #222;
  -webkit-box-shadow: 0 0 20px 0 #222;
  -moz-box-shadow: 0 0 20px 0 #222;
  display: none;
  height: auto;
  margin-left: 20%;
  margin-right: 20%;
  left: 0;
  right: 0;
  padding: 10px 10px 0px 10px;
  position: absolute;
  top: 25%;
  width: auto;
  /* min-height: 50%; */
  z-index: 930;
}

#automatica_index {
    background-color: #575757;
    color: #FFFFFF;
    font-weight: bold;
}

.actividades{
    background-color: #0074C9;
    color: #FFFFFF;
    font-weight: bold;
}

.comienzo{
    background-color: #4DC1EA;
    color: #000000;
    font-weight: bold;
}

.fin{
    background-color: #94D7EA;
    color: #000000;
    font-weight: bold;
}

/* Estilo del carrousel */
.warning {
  margin: 10px auto 0;
  width: 500px;
  text-align: center;
  font-size: 20px;
}

#scroller {
  width: 550px;
  height: 200px;
  margin: 0 auto;
  padding: 50px 0;
  /*-webkit-perspective: 500px;*/
  -moz-perspective: 500px;
  -o-perspective: 500px;
}

#scroller .item {
  width: 680px;
  display: block;
  position: absolute;
  border-radius: 10px;
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.85, transparent), to(rgba(255,255,255,0.15)));
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  z-index: 0;
}

/* Since inset shadows don't play nice with images, we'll create a pseudo element and apply our image styling to that instead */
#scroller .item:before {
  border-radius: 10px;
  width: 500px;
  display: block;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3), 0 0 0 1px rgba(0,0,0,0.4);
}

#scroller .item img {
  display: block;
  border-radius: 10px;
}

#scroller .left {
  -webkit-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
  -moz-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
  -o-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
}

#scroller .middle {
  z-index:1;
  -webkit-transform: rotateY(0deg) translateX(0) scale(1);
  -moz-transform: rotateY(0deg) translateX(0) scale(1);
  -o-transform: rotateY(0deg) translateX(0) scale(1);
}

#scroller .right {
  -webkit-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
  -moz-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
  -o-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
}

#scroller .left-hidden {
  opacity: 0;
  z-index: -1;
  -webkit-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
  -moz-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
  -o-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
}

#scroller .right-hidden {
  opacity: 0;
  z-index: -1;
  -webkit-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
  -moz-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
  -o-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
}

.nav {
  position: absolute;
  width: 500px;
  height: 30px;
  margin: 185px 0 0;
  z-index: 2;
  display: none;
}


.prev1, .next1 {
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  background-color: rgba(0,0,0,0.85);
  border-radius:15px;
  color: #E4E4E4;
  bottom: -70px;
  left: 145px;
  text-align: center;
  line-height: 26px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 0 0 1px rgba(0,0,0,0.7);
}

.next1 {
  left: inherit;
  right: -25px;
}

.prev1:hover, .next1:hover {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5), 0 0 0 1px rgba(0,0,0,0.7);                
}