.video-background {
position: relative;
width: 100%;
height: 100vh; /* Adjust as needed */
overflow: hidden;
}
#video-bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
/* set up */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-align: center;
font-size: 18px;
letter-spacing: 4px;
color: #595959;
font-family: futura-pt, sans-serif;
font-weight: 300;
font-style: light;
}
/* Mobile Styles first */
.content_wrapper{
padding: 0 50px 0 50px;
}
/* contact pg */
.contact-header{
font-size: 0.5em;
padding-top: 25em;
padding-bottom: 10em;
}
.contact-sub {
font-size:0.5em;
}
/* sub pg */
.video-grid{
width: 900px;
display: flex;
justify-content:center;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
}
/* banner */
.banner {
margin:auto;
padding-top: 7em;
padding-bottom: 7em;
font-size: 0.6em;
}
/* other + ad hoc */
.about-me {
line-height:45px;
margin: 45px 0 0 0;
}
/* body */
body {
color: #414141; /* Dark gray */
}
.inner{
max-width: 580px;
margin-left: auto;
margin-right: auto;
}
/* headings */
h1 {
margin: auto;
text-align: center;
font-family: futura-pt, sans-serif;
font-size: 1.5em;
letter-spacing: 12pt;
color: #1c1c1c;
word-wrap: break-word;
}
h2 {
font-family: futura-pt, sans-serif;
font-weight: 2;
font-style: normal;
}
h3 {
font-size: 1.2em;
font-family: futura-pt, sans-serif;
text-align: center;
letter-spacing: 4pt;
}
a {
text-decoration: none;
color: inherit;
}
a:visited {
text-decoration: none;
letter-spacing: normal;
}
/* nav */
.main-nav {
font-size: 14px;
line-height: 26px;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
padding: 0 13px;
display: flex;
justify-content: space-between;
}
/* vid */
/* video flex */
.video-grid-container{
display: flex;
justify-content: center;
}
.video-grid{
width: 900px;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.video-grid-col{
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex: 1 1 80px;
justify-content: center;
align-items: center;
width: 272px;
padding: 50px 0 50px 0;
}
.video-grid-icon {
/* border: 1px solid #fff; */
width: 272px;
height: 153px;
}
.video-grid-heading {
/* border: 1px solid #fff; */
width: 272px;
}
/* footer */
.before-foot{
padding-top:2em;
}
.footer{
/* background-color: #B7950B; mustard */
padding: 3em 0 6em 0;
font-family: "latex shadow";
}
.contact-foot{
font-family: "latex shadow";
}
.video-page-foot {
/* background-color: #000000; */
/* color: white; */
}
.video-bod {
/* background-color: #000000; */
}
/* Tablet and Desktop Styles */
@media only screen and (min-width: 691px) {
.content_wrapper{
padding: 0 200px 0 200px;
}
/* contact pg */
.contact-header{
font-size: 1.5em;
padding-top: 9em;
padding-bottom: 2em;
}
.contact-sub {
font-size:1em;
}
.banner{
font-size: 1em;
}
.before-foot{
padding-top:10em;
}
.video-grid{
flex-direction: row;
align-items: flex-start;
}
.video-grid-col{
padding: 0;
}
}
/* Ensure the parent container is relatively positioned */
.video-grid-col {
position: relative; /* This is required for absolute positioning within it */
/* No padding or margin to avoid altering the alignment */
padding: 0;
margin: 0;
}
/* Position the hover text box with exact dimensions */
.video-hover-text {
position: absolute; /* Positioning relative to the parent */
width: 272px; /* Match the image width */
height: 153px; /* Match the image height */
top: 0; /* Align with the top edge of the parent */
left: unset; /* Align with the left edge of the parent */
background-color: rgba(0, 0, 0, 0.087); /* Transparent background */
color: white; /* Text color */
text-align: center; /* Center the text horizontally */
line-height: 153px; /* Center the text vertically */
visibility: hidden; /* Hide by default */
opacity: 0; /* Transparent by default */
transition: opacity 0.3s; /* Smooth transition for hover effect */
}
/* Reveal the hover text when hovering over the grid column */
.video-grid-col:hover .video-hover-text {
visibility: visible; /* Show the hover text */
opacity: 1; /* Gradually fade in the hover box */
}
/* Anchor tag styles to cover the entire hover text box */
.video-hover-text a {
display: block; /* Make it a block-level element */
width: 100%; /* Ensure it covers the entire hover box */
height: 100%; /* Ensure it covers the entire hover box */
text-decoration: none; /* No underline */
color: white; /* Set text color */
justify-content: center; /* Center content */
align-items: center; /* Vertical alignment */
}