@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');
@import url('https://fonts.googleapis.com/css?family=Heebo:300,400,500,700&display=swap');
/*
 * Globals
 */

/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  background-color: #fff;
  border: .05rem solid #fff;
}


/*
 * Base structure
 */

html,
body {
  height: 100%;
}

body {
  background-color: #000000;
}

body {
  color: #fff;
  font-size: 16px;
  font-family: 'Conv_BebasNeue-Regular',sans-serif;
}
body,html,h1,h2,h3,h4,h5,h6,ul,li,p{
  margin: 0;
  padding: 0;
}


/*
 * Header
 */
.header{
  /*background-image: url("../img/img01.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;*/
  position: relative;
  overflow: hidden;
}
.header .video{
  position: absolute;
  top: 0;
  left: 0;


}
.header .texto{
  position: relative;

}
.header h1{
  color: #fedf00;
  font-size: 5rem;
  line-height: 0.8;
}
.green{
  color:#009b3a;
}
/*
 * Texto
 */
 .bloque-txt{
   background-image: url("../img/img02.jpg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }

.bloque-txt{
  color: #FFF;
  font-size: 1.25rem;
}
.bloque-txt h1{
  font-size: 3rem;
  line-height: 4rem;
}
.bloque-txt p{
  font-size: 0.9rem;
  font-family: 'Heebo', sans-serif;
  line-height: 1.2rem;
}
/*
 * BLoques
 */
 .bt-videos{
   padding-bottom: 15px;
   display: inline-block;
 }
.bloque-vid{
  text-align: center;
  display: inline-block;
  float: left;
  cursor: pointer;
}
.bloque-vid-1{
  width: 50%;
}
.bloque-vid-2{
  width: 50%;
}
.bloque-vid-3{
  width: 50%;
}
.bloque-vid-4{
  width: 50%;
}
.bloque-vid-5{
  width: 50%;
}
.bloque-vid-6{
  width: 50%;
}
.bloque-vid-7{
  width: 100%;
}
.bloque-vid .imagen{
  width: 100%;
  height: 200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  transition: box-shadow 1s;

}
.bloque-vid .imagen:hover{
  -webkit-box-shadow: inset 10px 20px 20px 30px rgba(0, 0, 0,0.6);
  -moz-box-shadow: inset 10px 20px 20px 30px rgba(0, 0, 0,0.6);
  box-shadow: inset 10px 20px 20px 30px rgba(0, 0, 0,0.6);

}
.imagen1{ background-image: url("../img/img-vid01.jpg");}
.imagen2{ background-image: url("../img/img-vid02.jpg");}
.imagen3{ background-image: url("../img/img-vid03.jpg");}
.imagen4{ background-image: url("../img/img-vid04.jpg");}
.imagen5{ background-image: url("../img/img-vid05.jpg");}
.imagen6{ background-image: url("../img/img-vid06.jpg");}
.imagen7{ background-image: url("../img/img-vid07.jpg");}
.bloque-vid .imagen .numero{
  position: absolute;
  left: 50%;
  margin-left: -55px;
  top: 50%;
  margin-top: -55px;
}
.bloque-vid h4{
  font-size: 1.85rem;
  padding-top: 10px;
  padding-bottom: 10px;
}
.video-g{
  margin-bottom: 30px;
  display: inline-block;
}
.ficha-tecnica{
  background: #151515;
  text-align: center;
  padding-top: 60px;
  padding-bottom: 60px;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #e1e1e1;
  font-size: 0.9rem;
}
.ficha-tecnica h4{
  margin-bottom: 20px;
}
.ficha-tecnica strong{
  color: #FFF;
}
.footer{
  text-align: center;
  padding-top: 60px;
  padding-bottom: 60px;

}
.texto-sinopsis{
  text-shadow: 2px 1px 4px rgba(0, 0, 0, 1);
  margin-top: 0px;

}
.sinopsis-g{
  min-height: 100%;
}
.logof{
  margin-bottom: 15px
}
/*
 * Footer
 */
 .bodygraf{
   background-color: #FFF;
 }
 .contenedor-graficos{
   position: relative;
   width: 100%;
 }
 .dias{
   margin-bottom: 30px;
 }
 .dias a{
   color:#FFF;
   margin-left: 0px;
  margin-right: 0px;
  padding: 5px 5px 5px 5px;
  font-size: 0.8rem;
 }
 .dias a:hover{
   color:#fff;
   background-color: #009b3a;
   text-decoration: none;
 }
 .dias a:first-child{
   margin-left: 0px;
 }
 .dias a:last-child{
   margin-right: 0px;
 }
 .dias .activo{
  color:#fff;
  background-color: #009b3a;
 }
 .linea{
   background-color: #000;
   padding: 60px 15px 60px 15px;
 }
 /* Small devices (landscape phones, 576px and up)*/
 @media (min-width: 576px) {
   .header h1{
     font-size: 6rem;
   }
   .bloque-txt p{
     font-size: 1rem;
     line-height: 1.3rem;
   }
   .texto-sinopsis{
     margin-top: 0px;
   }
   .bloque-vid-1{
     width: 25%;
   }
   .bloque-vid-2{
     width: 25%;
   }
   .bloque-vid-3{
     width: 25%;
   }
   .bloque-vid-4{
     width: 25%;
   }
   .bloque-vid-5{
     width: 33.33%;
   }
   .bloque-vid-6{
     width: 33.33%;
   }
   .bloque-vid-7{
     width: 33.33%;
   }
   .bloque-vid .imagen{
     width: 100%;
     height: 200px;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     position: relative;
     transition: box-shadow 1s;

   }
   .dias a{
     margin-left: 5px;
     margin-right: 5px;
     padding: 5px 5px 5px 5px;
    font-size: 1rem;
   }
 }
 /*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .header h1{
    font-size: 8rem;
  }
  .bloque-txt p{
    font-size: 1.25rem;
    line-height: 1.4rem;
  }
  .bloque-vid-1{
    width: 25%;
  }
  .bloque-vid-2{
    width: 25%;
  }
  .bloque-vid-3{
    width: 25%;
  }
  .bloque-vid-4{
    width: 25%;
  }
  .bloque-vid-5{
    width: 33.33%;
  }
  .bloque-vid-6{
    width: 33.33%;
  }
  .bloque-vid-7{
    width: 33.33%;
  }
  .bloque-vid .imagen{
    width: 100%;
    height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    transition: box-shadow 1s;

  }
  .logof{
    margin-bottom: 0px
  }
  .dias a{
    margin-left: 5px;
    margin-right: 5px;
    padding: 5px 10px 5px 10px;
   font-size: 1.3rem;
  }
}
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .bloque-vid-1{
    width: 15%;
  }
  .bloque-vid-2{
    width: 14%;
  }
  .bloque-vid-3{
    width: 14%;
  }
  .bloque-vid-4{
    width: 14%;
  }
  .bloque-vid-5{
    width: 14%;
  }
  .bloque-vid-6{
    width: 14%;
  }
  .bloque-vid-7{
    width: 15%;
  }
  .bloque-vid .imagen{
    width: 100%;
    height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    transition: box-shadow 1s;

  }
}
/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

}
