#superDiv
{
top:0;
left:0;
width:100%;
height:100%;
position:absolute;
overflow:hidden;
z-index:1;
padding:0;
margin:0;
background-color:#000;
}

div#div1
{
top:0;
left:0;
width:50%;
height:50%;
position:absolute;
z-index:1;
background-image:url('../images/14.jpg');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
opacity:0.4;
filter:alpha(opacity=40);
}

div#div1:hover
{
top:0;
left:0;
width:51%;
height:51%;
z-index:2;
border:3px #fff solid;
opacity:1.0;
filter:alpha(opacity=100);
-moz-box-shadow: 10px 10px 10px #000;
-webkit-box-shadow: 10px 10px 10px #000;
box-shadow: 10px 10px 10px #000;
}

#div1 span
{
display:none;
}

#div1 span:hover
{
height:33%;
width:100%;
top:67%;
position:absolute;
background-color:#fff;
overflow:hidden;
z-index:100;
display:block;
}

#div2
{
top:0;
left:50%;
width:50%;
height:50%;
position:absolute;
z-index:1;
/* background-image:url('../images/08.jpg'); */
background-size:cover;
background-position:center;
background-repeat:no-repeat;
opacity:0.4;
filter:alpha(opacity=40);
}

#div2:hover
{
top:0;
left:49%;
width:51%;
height:51%;
z-index:2;
border:3px #fff solid;
opacity:1.0;
filter:alpha(opacity=100);
-moz-box-shadow: 10px 10px 10px #000;
-webkit-box-shadow: 10px 10px 10px #000;
box-shadow: 10px 10px 10px #000;
}


#div3
{
top:50%;
left:0;
width:50%;
height:50%;
position:absolute;
z-index:1;
background-image:url('../images/03.jpg');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
opacity:0.4;
filter:alpha(opacity=40);
}

#div3:hover
{
top:49%;
left:0;
width:51%;
height:51%;
z-index:2;
border:3px #fff solid;
opacity:1.0;
filter:alpha(opacity=100);
-moz-box-shadow: 10px 10px 10px #000;
-webkit-box-shadow: 10px 10px 10px #000;
box-shadow: 10px 10px 10px #000;
}

#div4
{
top:50%;
left:50%;
width:50%;
height:50%;
position:absolute;
z-index:1;
background-image:url('../images/04.jpg');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
opacity:0.4;
filter:alpha(opacity=40);
}

#div4:hover
{
top:49%;
left:49%;
width:51%;
height:51%;
z-index:2;
border:3px #fff solid;
opacity:1.0;
filter:alpha(opacity=100);
-moz-box-shadow: 10px 10px 10px #000;
-webkit-box-shadow: 10px 10px 10px #000;
box-shadow: 10px 10px 10px #000;
}

#title
{
color:lime;
font-family:"Courier New", Courier, monospace;
font-size:20px;
font-weight:bold;
}

.text
{
color:lime;
font-family:"Courier New", Courier, monospace;
font-size:15px;
}

.noBorder
{
border:none;
}

a:link
{
color:#000;
font-size:9px;
text-decoration:none;
font-family:sans-serif;
}

a:hover
{
color:#000;
font-size:9px;
text-decoration:underline;
font-family:sans-serif;
}

a:visited
{
color:#000;
font-size:9px;
text-decoration:none;
font-family:sans-serif;
}

.popup
{
bottom:-5px;
right:-5px;
width:10px;
height:10px;
border:1px #000 solid;
background-image:url('../images/expand_white.png');
opacity:0.35;
filter:alpha(opacity=35);
z-index:100;
position:relative;
overflow:hidden;
}

.popup:hover
{
top:0;
left:0;
width:100%;
height:100%;
border:0px;
background-image:none;
opacity:1.0;
filter:alpha(opacity=100);
z-index:100;
position:relative;
}

.popup a
{
font-family:sans-serif;
color:#fff;
font-size:50px;
padding-left:50px;
}

.popup span
{
font-family:sans-serif;
color:#fff;
font-size:50px;
padding-left:50px;
}

.video-container {
    height: 100%;
    width: 100%;
    position: relative;
}

.video-container video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 0;
}

/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption {
  z-index: 1;
  position: relative;
  text-align: center;
  color: #dc0000;
  padding: 10px;
}