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;

}



.card{

  margin-top: auto;

  margin-bottom: auto;

  width: 400px;

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

}



.card-header h3{

  color: white;

}



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

  header {

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

    background-size: cover;

  }

  header video {

    display: none;

  }



  .card{

    width: 100%;

  }

}



p{

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

  font-size: 14px;

}







.container{

  height: 100%;

  align-content: center;

}









.input-group-prepend span{

  background-color: #856304;

  color: white;

  border:0 !important;

}



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 */

}