/* Xplosure specific styling */

/*ensure viewport is flled with black or orange */

.viewportDiv {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.div1{
  background-color: yellow;
  height: 100px;
}
.remainingDiv{
  background-color: black;
  flex-grow: 1;
}
.remainingDivOrange{
  background-color: #e85625;
  flex-grow: 1;
}
.content {
					max-width:960px;
					margin:auto;
				}
.button1 {
  background-color: grey;
  border: 1px solid white;
  color: white;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline;
  font-size: 14px;
  cursor: pointer;
  width:180px;
  margin:5px;
  word-wrap:break-word;
}
		.linkbutton{  background-color: grey;
		  border: 1px solid white;
		  color: white;
		  padding: 5px;
		  text-align: center;
		  text-decoration: none;
		  display: inline;
		  font-size: 14px;
		  cursor: pointer;
		  width:220px;
		  margin:50px;
		}
h1{font-size:36px}
.xplosure-image{max-width:680px;height:auto}img{vertical-align:middle}a{color:inherit}

html{text-size-adjust:100%}

.headerimage {
				max-width:80%;
}
.mainmenu {
			padding-bottom:15px;
}

.full-width-image {
        width:  100%;
}

body, h1,  h2, h3, h4, h5, h6 {
  font-family: Arial, Helvetica, sans-serif ;font-style: italic;
  padding:16px;
  background-color: black;
}

.img1 {
				float: right;
				padding: 10px;
				}
		.imagecentre {
						display: block;
						margin: auto;
						width: 80%;
					}
		.clearfix {
					overflow: auto;
			}
		#aboutbody {
				background-color: #e85625;
				color:white;
				font-family: Arial, Helvetica, sans-serif ;font-style: italic;
				padding: 16px;
				}
	
		/* Create two unequal columns that float next to each other */
		.column {
				float:left;
				}

		.columnarchive {
				float: left;
				height:650px;
				overflow: auto;
				}

		.left {
		  width: 80%;
		  padding: 16px;

			}
		.right {
		  width: 20%;
		  padding: 8px;
		  font-size:small;		  
		}

		.leftarchive {
		  width: 25%;
		  padding: 16px;


			}
		.rightarchive {
		  width: 75%;
		  padding: 8px;
		  font-size:small;		  
		}

		/* Clear floats after the columns */
		.row:after {
		  content: "";
		  display: table;
		  clear: both;
		}

		/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
		@media screen and (max-width: 600px) {
		  .column {
			width: 100%;
		  }
		}