#video-main-container{
	display: flex; 
    flex-direction: row;
    justify-content: flex-end;
	background-color: black; 
    position:relative; 
}
#hp-video{
    max-height: 500px;
    object-fit: cover;
}
#video-overlay-container{
	display: flex; 
    flex-direction: row; 
    width: 100%; 
    height: 100%; 
    justify-content: space-between; 
    z-index: 3; 
    background-color: transparent; 
    position: absolute;  
    top: 0px !important;
}
#video-controls-container{
	display: flex; 
    flex-direction: column; 
    width: 70px; 
    height: 100%; 
    justify-content: space-between; 
    align-items: center; 
    background-color: transparent; 
}
#video-playback-container{
	display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: fit-content;
	height: fit-content;
}
#video-mute-container{
	display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30px; 
    height: 30px; 
   	background: #2F2F2F;
    border-radius: 50%;
    margin-bottom: 17px;
}
#video-playback-container button {
	background-color: transparent;
	border: 4px solid rgba(255, 255, 255, 0.75);
	border-radius: 50%;
	padding: 6px 10px;
	color: rgba(255, 255, 255, 0.75);
    margin-top: 21px;
    margin-right: 14px;
}

#video-playback-container button:focus-visible {
	  outline: 5px auto rgba(204, 255, 0);
	  -webkit-outline: 5px auto rgba(204, 255, 0);
	  -moz-outline: 5px auto rgba(204, 255, 0);
	  -ms-outline: 5px auto rgba(204, 255, 0);
	  -o-outline: 5px auto rgba(204, 255, 0);
	  border: 3px solid rgba(204, 255, 0);
}

#pause-video-svg {
	transform:translate(0px, -2px);
    display: inline-block;
}
#play-video-svg {
 transform:translate(3px, -2px);
 display: none;
}
#video-logo-container {
	display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #77823D;
    width: 32rem;
    gap: 2rem;
}
#video-logo-container img {
    height: 4rem;
}

#video-logo-container h1{
      font-size: 4rem;
}

@media (min-width:700px) and (max-width: 990px) {

    #video-logo-container{
	width: 24rem;
    }

}

@media (min-width:320px) and (max-width:700px) {
	#video-logo-container img{
      height: 50px;
	}
    #video-logo-container{
      justify-content: center;
 	  align-items: center;
	width: 12rem;
	gap: 1rem;
    }
    #video-logo-container h1{
      font-size: 2rem;
	margin-bottom: 0.25rem;
    }
	 
    #video-logo-container div p {
      font-size: 1.2rem !important;
    }

}