stylesheet.css

body, html{
  box-sizing: border-box;
}

body{
  font-family: 'Dosis', sans-serif;
  margin: 0;
  padding: 4.25rem;
}

li,ul,button,a{
  padding: 0;
  margin: 0;
  text-decoration: none;
}

h1,h2,h3,h4,h5,h6{font-family: 'Roboto Condensed'; font-weight: 400; margin: 0; padding: 0;}

q {font-style: italic;}

a {color: black;}
.spacer{ clear:both;}

.img-container {height: 100%; z-index: 1; overflow: hidden;}
.img-container img {width: 100%; transition: width, 0.3s}
.grow:hover.img-container img {
  width: 110%;
}
.dark {position: relative;}
.dark:before {
  content:'';
  width: 100%;
  height: 0;
  background-color: rgba(166, 172, 175,0.65);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transition: height, 0.5s;
}
.dark:hover:before{
  height: 100%;
}
.align-center{
  display: flex;
  align-items: center;
  justify-content: center;
}

.uppercase{
  text-transform: uppercase;
}

.word{ font-weight: 400; font-size: 150%; margin-top: 2.25rem;}

.text-center{
  text-align: center;
}
:root{
  --main-colour: #424242;
}

.logo{
  width: 25%;
  max-height: 10rem;
  overflow: hidden;
  display: inline-block;
  float: left;
}

.logo h1{
  text-transform: uppercase;
  font-weight: bold;
  color: var(--main-colour);
  font-size: 60;
  font-family: 'Roboto Condensed', sans-serif;
  margin: 0;
}

.nav-bar{
  width: 20%;
  max-height: 1.75rem;
  margin-right: 3.25rem;
  float: right;
}

.nav-bar ul{list-style-type: none; float: right;}
.nav-bar ul li{float: left; margin-left: 0.75rem;}
.nav-bar ul li a{
  color: var(--main-colour);
  display: inline-block;
  font-size: 15;
  text-transform: uppercase;
  font-family: 'Roboto Condensed', sans-serif;
}

li.regular, li.active{
  position: relative;
}

li.regular:before, li.active:before{
  height: 5%;
  background-color: #616A6B;
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  transition: width, 0.5s;
}

li.regular:before{width: 0;}
li.active:before{width: 100%;}
li.regular:hover:before {width: 100%;}
li.active:hover:before {width: 0;}

section.main{
  width: 100%;
  height: 80%;
  border-top: 0.15rem dashed var(--main-colour);
  border-bottom: 0.15rem dashed var(--main-colour);
  margin-top: 1.75rem;
}

section.main img{ filter: opacity(60%);}

section.main .box{
  position: absolute;
  max-width: 35%;
  overflow: hidden;
  font-size: 25;
  z-index: 2;
}

section.main .box h5 {
  max-width: 80%;
  margin: 3.75rem auto;
  font-size: 20;
}

section.content {
  max-width: 100%;
  padding: 3.75rem;
}

.row{ width: 100%; display: flex; justify-content: center; margin: 3.75rem auto;}

.box-large-2 {
  width: 30%;
  height: auto;
  display: inline-block;
  padding: 0.75rem;
  margin: 0 2.25rem;
}

.story-photo { width: 100%; height: 35%; }

.subtitle {
  font-family: 'Roboto Condensed';
  font-size: 20;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  margin-top: 1.75rem;
}

.subtitle h4 {text-transform: uppercase; margin-top: 1.25rem;}

.subtitle h5 {text-transform: lowercase; font-style: italic; margin-top: 1.25rem;}

.thin-section{
  max-width: 100%;
  max-height: 25%;
  overflow: hidden;
  padding: 2.75rem;
  border-top: 0.15rem solid var(--main-colour);
}

.circle{
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  border: 0.1rem solid var(--main-colour);
  overflow: hidden;
  display: inline-block;
  float: left;
  margin-left: 2.25rem;
}

.circle img{
  width: 140%;
  position: relative;
  left: -20%;
}

.thin-section .description{
  max-width: 70%;
  height: 20%;
  display: inline;
  float: left;
  margin: 1.25rem 3.75rem;
  overflow: hidden;
}

.description p{font-size: 25;}

.thin-section q{
  font-size: 50;
  text-transform: uppercase;
  text-align: center;
  margin: 0 13.25rem;
}

.thin-section q:before{ content: no-open-quote;}
.thin-section q:after{ content: no-close-quote;}

.thin-section h1 {text-transform: uppercase; text-align: center; font-size: 40;}
.thin-section h5 {font-style: italic; margin-left: 47.5%; font-size: 16; max-width: 25%;}

section.footer{
  max-width: 100%;
  height: 25%;
  padding: 0.75rem;
  position: relative;
}

section.footer h6 {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 16;
  margin-left: 1.75rem;
  text-transform: uppercase;
  color: var(--main-colour);
}
.menu {
  position: absolute;
  bottom: 0;
  right: 0;
  border-left: 0.1rem solid var(--main-colour);
  list-style-type: none;
  margin-right: 3.75rem;
}
.menu li{float: left;}
.menu li a{
  display: inline-block;
  padding: 0 0.75rem;
  border-right: 0.1rem solid var(--main-colour);
  color: var(--main-colour);
  font-family: 'Roboto Condensed', sans-serif;
}
.menu li a:hover{ color: black;}
/*stories main*/
table.subjects{
  width: 65%;
  border-collapse: collapse;
  //border: 0.1rem solid var(--main-colour);
  margin: 5.25rem auto;
}
table.subjects tr td{
  width: 49%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.25rem solid transparent;
}
table.subjects tr td img{
  filter: opacity(80%) brightness(60%);
}
table.subjects tr td .subtitle{
  max-width: 9.25rem;
  word-wrap: break-word;
  position: absolute;
  z-index: 3;
  padding: 0 0.75rem;
  font-size: 130%;
}

header{
  margin: 2.25rem auto;
  max-width: 50%;
  text-align: center;
  font-size: 130%;
}

header h2 { text-transform: uppercase; margin-bottom: 1.125rem;}
header h5 {font-style: italic;}

.large-section{
  width: 65%;
  height: 35%;
  margin: auto;
  position: relative;
}

.large-section img{
  position: absolute;
  top: -45%;
}

.large-section .subtitle{
  position: absolute;
  top: 20%;
  left: 45%;
  z-index: 3;
}
/*contact page*/
table.info{
  width: 70%;
  margin: auto;
  border: 0.15rem solid var(--main-colour);
  border-collapse: collapse;
}

table.info tr td{
  width: 50%;
  border: 0.15rem solid var(--main-colour);
  text-align: center;
  height: 11.25rem;
  overflow: hidden;
  position: relative;
}
table.info tr td img{
  width: 110%;
  position: absolute;
  top: 0;
  left: 0;
  filter: opacity(80%) brightness(70%);
}
table.info tr td h3{
  text-transform: uppercase;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 45%;
  z-index: 2;
}
table.info tr td h4{
  font-style: italic;
  position: absolute;
  top: 65%;
  left: 45%;
  z-index: 2;
}