header {

  position: relative;

  background-color: black;

  height: 60vh;

  min-height: 25rem;

  width: 100%;

  overflow: hidden;

}



header video {

  position: absolute;

  top: 50%;

  left: 50%;

  min-width: 100%;

  min-height: 100%;

  width: auto;

  height: auto;

  z-index: 0;

  -ms-transform: translateX(-50%) translateY(-50%);

  -moz-transform: translateX(-50%) translateY(-50%);

  -webkit-transform: translateX(-50%) translateY(-50%);

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

}



header .container {

  position: relative;

  z-index: 2;

}



header .overlay {

  position: absolute;

  top: 0;

  left: 0;

  height: 100%;

  width: 100%;

  background-color: black;

  opacity: 0.5;

  z-index: 1;

}



@media (pointer: coarse) and (hover: none) {

  header {

    background: url('../img/portada.png') black no-repeat center center scroll;

  }

  header video {

    display: none;

  }

}



p{

  font-family: 'Raleway', sans-serif;

  font-size: 14px;

}







.container{

height: 100%;

align-content: center;

}



.card{

margin-top: auto;

margin-bottom: auto;

width: 400px;

background-color: rgba(255,255,255,0.5) !important;

}









.card-header h3{

color: white;

}





.input-group-prepend span{

background-color: #9624ff;

color: white;

border:0 !important;

}



.moradoClaro{

  background-color: #af59ff;

}



.btn-morado-primary{

  background-color: #9624ff;

  color: white;

}



a.linkMorado, a.linkMorado:hover{

  color: #9624ff;



}



input:focus{

outline: 0 0 0 0  !important;

box-shadow: 0 0 0 0 !important;



}



.remember{

color: white;

}



.remember input

{

width: 20px;

height: 20px;

margin-left: 15px;

margin-right: 5px;

}



.links{

color: white;

}



.links a{

margin-left: 4px;

}





.fit-image{

width: 100%;

object-fit: cover;

 /* only if you want fixed height */

}