section.video{
}

.video-container{
  height:100vh;
  width:100%;

  overflow: hidden;
  object-fit: cover;

  position: relative;
}

video.videobg{
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
}

img.videobg{
  width: 100%;
  height: 100%;
  object-fit:cover;
}

@media (min-aspect-ratio: 16/9) {

}

@media (max-aspect-ratio: 16/9) {

}

video.videobg{
  height: 100%;
  width:100%;

  object-fit: cover;

  position: relative;
}

.video-color-cache{
  position: absolute;

  width:100%;
  height:100%;

  top:0px;
  left: 0px;

  background-color: rgba(255,255,255,0.05);
}

.banner{
  transition-property: all;
  transition-duration: 0.3s;

  position:absolute;
  height:220px;
  width:100%;

  bottom:0px;

  background-color: rgba(255,255,255,0.6);

  display: flex;
  flex-direction: row;

  justify-content: center;
}

.banner-description{
  margin-top:auto;
  margin-bottom: auto;

  flex-direction: column;
}

.banner-text{
  max-width: 460px;

  margin-left: 80px;
  margin-right: 80px;
  
  text-transform : uppercase;
  font-weight: 500;
}

.banner-text > a{
  color : black;
}

.banner-button{

  transition-property: all;
  transition-duration: 0.1s;
  transition-timing-function: ease-out;

  cursor: pointer;

  width:50%;

  font-size: 18px;

  text-align: center;
  border:solid black 1px;
  padding:12px;

  background-color: transparent;
}

a.bannerbutton{
  color:black;
  font-weight: 400;
}

a.bannerbutton:hover{
  color:white;
}

.banner.out-video{
  display: none;
}

.banner-button:hover{

  border: solid transparent 1px;

  background-color: var(--primary-color);
  
  color: white;
}

.banner-button:hover .bannerbutton{
  
  color: white;
}

@media only screen and (min-width: 0px) and (max-width: 480px){

.video-container{
  max-height:60vw;
  width:100%;
}

.banner.in-video{
  display: none;
}

.banner.out-video{
  position: unset;
  bottom: unset;
  display: block;
  height:unset;
}

.banner-text{
  font-size: 4vw;
  margin:20px;
}

}

@media only screen and (min-width: 1280px) and (max-width: 1400px){

.banner{
  height:150px;
}

.banner-text{
  max-width: 380px;
  font-size: 16px;
}

.banner-button{
  font-size: 14px;
}

}

@media only screen and (min-width: 900px) and (max-width: 1279px){

.banner{
}

.banner-text{
  max-width: 380px;
  margin-left: 60px;
  margin-right: 60px;
}

}

@media only screen and (min-width: 480px) and (max-width: 900px){

.banner{
  height:400px;
  flex-direction: column;
  align-items: flex-start;
}

.banner-text{
  font-size: 20px;
}

.banner-description{
  margin-top:20px;

}

}