body {
font-family : Arial, Helvetica, sans-serif;
margin : 0;
}
div.gallery 
{
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.column {
float : left;
}
.left {
width : 10%;
}
.right {
width : 90%;
}
.container {
position : relative;
text-align : center;
}
.bg-img {
background-image : url("https://darfield-main-colliery.co.uk/img/bg-image.png");
min-height : 300px;
background-position : center;
background-repeat : no-repeat;
background-size : cover;
position : relative;
}
.button {
background-color : #ff0000;
 border: none;
  color: white;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;

}
.button4 
{border-radius: 12px;}
.container {
position : absolute;
margin : 20px;
width : auto;
}
.topnav {
overflow : hidden;
background-color : #333;
}
.topnav a {
float : left;
display : block;
color : #f2f2f2;
text-align : center;
padding : 14px 16px;
text-decoration : none;
font-size : 17px;
}
.navbar a:hover {
background : #ddd;
color : black;
}
.center {
display : block;
margin-left : auto;
margin-right : auto;
width : 50%;
}
ul {
list-style-type : none;
margin : 0;
padding : 0;
overflow : hidden;
background-color : #FF0000;
}
li {
float : left;
}
li a {
display : block;
color : white;
text-align : center;
padding : 14px 16px;
text-decoration : none;
}
li a:hover {
background-color : #111;
}
.column {
float : left;
width : 33.33%;
}
.row:after {
content : "";
display : table;
clear : both;
}
.ex1 {
padding : 35px;
}
.ex2 {
padding : 35px;
}
.responsive {
width : 50%;
height : auto;
}
h1 {
display : block;
color : red;
font-size : 18px;
margin : 10px;
font-weight : bold;
text-align : center;
}
h2 {
display : block;
color : red;
font-size : 18px;
margin : 10px;
font-weight : bold;
text-align : center;
}
h3 {
display : block;
color : red;
font-size : 18px;
margin : 10px;
font-weight : bold;
text-align : center;
}
/* Style the video: 100% width and height to cover the entire window */
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

/* Style the button used to pause/play the video */
#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
}
h4 {
display : block;
color : red;
font-size : 18px;
margin : 10px;
font-weight : bold;
text-align : center;
}
h5 {
display : block;
color : red;
font-size : 18px;
margin : 10px;
font-weight : bold;
text-align : center;
}
h6 {
display : block;
color : red;
font-size : 18px;
margin : 10px;
font-weight : bold;
text-align : center;
}
p {
text-align : left;
padding : 20px;
}

p1 {
text-align : center;
padding : 20px;
}
.div {
text-align : center;
}
.all-browsers {
margin : 0;
padding : 5px;
background-color : lightgray;
}
footer {
text-align : center;
padding : 5px;
color : white;
}