#contener-video{
  border-radius: 5px solid red;
  width: 100%;
  height: 300px;
}

#video-principal{

  position: relative;
  margin-top: 30%;
  margin-bottom: -50%;

  min-width: 100%;
  min-height: 100%;

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  z-index: -1000;
}

@media (min-width: 2560px){

#contener-video{
  border-radius: 5px solid red;
  width: 100%;
  height: 300px;
}

#video-principal{

  position: relative;
  margin-top: 30%;
  margin-bottom: -50%;

  min-width: 100%;
  min-height: 100%;

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-70%);

  z-index: -1000;
}

}

@media (min-width: 1920px){
  #contener-video{
  border-radius: 5px solid red;
  width: 100%;
  height: 300px;
}

#video-principal{

  position: relative;
  margin-top: 30%;
  margin-bottom: -50%;

  min-width: 100%;
  min-height: 100%;

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-70%);

  z-index: -1000;
}
}

@media (min-width: 1440px){
 #contener-video{
  border-radius: 5px solid red;
  width: 100%;
  height: 300px;
}

#video-principal{

  position: relative;
  margin-top: 30%;
  margin-bottom: -50%;

  min-width: 100%;
  min-height: 100%;

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-55%);

  z-index: -1000;
}
}

@media (min-width: 1366px){
  #contener-video{
  border-radius: 5px solid red;
  width: 100%;
  height: 300px;
}

#video-principal{

  position: relative;
  display: block;
  margin-top: 20%;
  margin-bottom: -30%;

  width: 100%;
  height: auto;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  z-index: -1000;
}
}

@media (min-width: 1280px){
 
 #contener-video{
  width: 100%;
  height: 300px;
}

  #video-principal{
  
  max-width: 100%;
  position: relative;
  display: block;
  margin-top: 20%;
  margin-bottom: -30%;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  z-index: -1000;
}
}

@media (min-width: 1024px) and (max-width: 1060px){
 #contener-video{
  width: 100%;
  height: 300px;
}

  #video-principal{
  
  max-width: 100%;
  position: relative;
  display: block;
  margin-top: 20%;
  margin-bottom: -30%;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  z-index: -1000;
}
}

@media (min-width: 970px) and (max-width: 1000px){
 #contener-video{
  width: 100%;
  height: 300px;
}

  #video-principal{
  
  max-width: 100%;
  position: relative;
  display: block;
  margin-top: 20%;
  margin-bottom: -30%;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  z-index: -1000;
}
}

@media (min-width: 950px) and (max-width: 970px){
  #contener-video{
  width: 100%;
  height: 300px;
}

  #video-principal{
  
  max-width: 100%;
  position: relative;
  display: block;
  margin-top: 20%;
  margin-bottom: -30%;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  z-index: -1000;
}
}

@media (min-width: 901px) and (max-width: 950px){
 #contener-video{
  width: 100%;
  height: 300px;
}

  #video-principal{
  
  max-width: 100%;
  position: relative;
  display: block;
  margin-top: 20%;
  margin-bottom: -30%;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  z-index: -1000;
}
}

@media (min-width: 870px) and (max-width: 900px){
 #contener-video{
  width: 100%;
  height: 300px;
}

  #video-principal{
  
  max-width: 100%;
  position: relative;
  display: block;
  margin-top: 20%;
  margin-bottom: -30%;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  z-index: -1000;
}
}

@media (min-width: 850px) and (max-width: 870px){
 #contener-video{
  width: 100%;
  height: 300px;
}

  #video-principal{
  
  max-width: 100%;
  position: relative;
  display: block;
  margin-top: 20%;
  margin-bottom: -30%;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  z-index: -1000;
}
}

@media (min-width: 800px) and (max-width: 850px){
 #contener-video{
  width: 100%;
  height: 300px;
}

  #video-principal{
  
  max-width: 100%;
  position: relative;
  display: block;
  margin-top: 20%;
  margin-bottom: -30%;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  z-index: -1000;
}
}

@media (min-width: 750px) and (max-width: 799px){
 #contener-video{
  width: 100%;
  height: 300px;
}

  #video-principal{
  
  max-width: 100%;
  position: relative;
  display: block;
  margin-top: 18%;
  margin-bottom: -30%;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  z-index: -1000;
}
}

@media (min-width: 700px) and (max-width: 750px){
 #contener-video{
  width: 100%;
  height: 300px;
}

  #video-principal{
  
  max-width: 100%;
  position: relative;
  display: block;
  margin-top: 20%;
  margin-bottom: -30%;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  z-index: -1000;
}
}

@media (min-width: 670px) and (max-width: 700px){
 #contener-video{
  width: 100%;
  height: 300px;
}

  #video-principal{
  
  max-width: 100%;
  position: relative;
  display: block;
  margin-top: 20%;
  margin-bottom: -30%;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  z-index: -1000;
}
}

@media (min-width: 650px) and (max-width: 670px){
 #contener-video{
  width: 100%;
  height: 300px;
}

  #video-principal{
  
  max-width: 100%;
  position: relative;
  display: block;
  margin-top: 50%;
  margin-bottom: -30%;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(50%);

  z-index: -1000;
}
}

@media (min-width: 630px) and (max-width: 650px){
 #contener-video{
  width: 100%;
  height: 300px;
}

  #video-principal{
  
  max-width: 100%;
  position: relative;
  display: block;
  margin-top: 20%;
  margin-bottom: -30%;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  z-index: -1000;
}
}

@media (min-width: 600px) and (max-width: 630px){
 #contener-video{
  width: 100%;
  height: 300px;
}

  #video-principal{
  
  max-width: 100%;
  position: relative;
  display: block;
  margin-top: 20%;
  margin-bottom: -30%;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  z-index: -1000;
}
}

@media (min-width: 550px) and (max-width: 600px){
 #contener-video{
  width: 100%;
  height: 300px;
}

  #video-principal{
  
  max-width: 100%;
  position: relative;
  display: block;
  margin-top: 20%;
  margin-bottom: -30%;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  z-index: -1000;
}
}

@media (min-width: 500px) and (max-width: 550px){
 #contener-video{
  width: 100%;
  height: 300px;
}

  #video-principal{
  
  max-width: 100%;
  position: relative;
  display: block;
  margin-top: 20%;
  margin-bottom: -30%;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  z-index: -1000;
}
}

@media (min-width: 480px) and (max-width: 500px){
 #contener-video{
  width: 100%;
  height: 300px;
}

  #video-principal{
  
  max-width: 100%;
  position: relative;
  display: block;
  margin-top: 20%;
  margin-bottom: -30%;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  z-index: -1000;
}
}

@media (min-width: 425px) and (max-width: 480px){
 #contener-video{
  width: 100%;
  height: 300px;
}

  #video-principal{
  
  max-width: 100%;
  position: relative;
  display: block;
  margin-top: 20%;
  margin-bottom: -30%;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  z-index: -1000;
}
}

@media (min-width:415px) and (max-width: 425px){
 #contener-video{
  width: 100%;
  height: 300px;
}

  #video-principal{
  
  max-width: 100%;
  position: relative;
  display: block;
  margin-top: 20%;
  margin-bottom: -30%;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  z-index: -1000;
}
}

@media (min-width:375px) and (max-width: 414px){
 #contener-video{
  width: 100%;
  height: 600px;
 }

  #video-principal{
  
  max-width: 100%;
  position: relative;
  display: block;
  margin-top: 20%;
  margin-bottom: -10%;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-10%);

  z-index: -1000;
}
}

@media (min-width:320px) and (max-width: 360px){
 #contener-video{
  width: 100%;
  height: 300px;
 }

  #video-principal{
  
  max-width: 100%;
  position: relative;
  display: block;
  margin-top: 15.5%;
  margin-bottom: -15%;
  

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-23%);

  z-index: -1000;
}
}