* {
  box-sizing: border-box;
}

body, html {
  font-size: 62.5%;
  text-size-adjust: none;
}


body {
  background-color: #FFFFFA;
  margin: 0 auto;
  display: block;
  width:100%;
  max-width: 1200px;
  min-width:320px;
  padding:0px 48px;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1C2734;
  }
}


.navigation {
  width:100%;
margin:2rem auto;
padding-bottom: 4rem;

}

.navigation ul {
margin:0 auto;
   list-style: none;
text-align: right;
}

.navigation ul li {
  display:inline-block;
  margin-left:1rem;
  }

.navigation ul li a:link, .navigation ul li a:visited, .navigation ul li a:hover, .navigation ul li a:active {
    
  cursor: pointer;
  font-family: 'Libre Franklin', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2rem;
  padding:0rem;
  color:  #333;
cursor: pointer;
background-color: #E0DDD9;
text-decoration: none;
border-radius:4px;
  padding:4px 8px;

}

.navigation ul li a:hover {
  background-color: #0081B9;
  color: #fffffa;
  cursor: pointer;
  text-decoration: none;
}


.logo {
  text-align:left;
  display: inline-block;
float:left;
margin:0 auto;
margin-block-start: 0;
margin-block-end: 0;
padding-inline-start: 0;
margin-left: -8px;

}


.navigation .logo a:link, .navigation .logo a:visited, .navigation .logo a:hover, .navigation .logo a:active {
  background-color:transparent;

}

.logo a:hover {
}



.mode {

  display:inline-block;
  width:2rem;
  height:2rem;
  background-color: transparent;
  margin:0;
  padding:0;
  line-height:1rem;
}

.center-block {
  width: 60%;
  height: 100%;
  padding: 24px;
  margin: 0 auto;
}


.photo-block {
width: 100%;
  height: auto;
  margin: 2rem auto 2rem 0;
  border-radius: 16px;
  display: inline-block;

}

 .photo {
    width:100%;
    height:auto;
    margin:0 auto;

  }



.photo img { 
  height: 28rem;
  width: auto;
  margin: 0 -40px 0 0;
  text-align: center;
  border-radius: 4px;

  }






.info-block {

width: 100%;
  margin: 32px auto;
  border-radius: 16px;

}

.content-block {


  margin: 48px auto;
  border-radius: 16px;

}

.link-block {
width: 100%;
  margin: 32px auto;
  border-radius: 16px;
  padding-bottom: 100px;

}

.line {
  width: 100%;
  height: 1px;
  background-color: #E7E7E7;
  margin: 32px auto;
  clear: both;
}

.column {

  width: 50%;
  float: left;
  clear: both;
}



h1 {
color: #333;
font-family: 'Libre Baskerville', serif;
font-size: 4rem;
font-weight: 700;
line-height: 6rem;
text-align: left;
text-transform: none;
 margin-top: 1rem;
}

h2 {
color: #333;
font-family: 'Libre Baskerville', serif;
font-size: 3rem;
font-weight: 500;
line-height: 4rem;
text-align: left;
text-transform: none;
margin-top: 1rem;
}

p {
color: #333;
font-family: 'Libre Franklin', sans-serif;
font-size: 2rem;
font-weight: 400;
line-height: 3rem;
text-align: left;


}

p.small {
font-family: 'Libre Franklin', sans-serif;
  color: #333;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2rem;
  padding:0rem;
}

@media (prefers-color-scheme: dark) {
  h1, h2, h3, p, p.small, ul {
    color: #FFFFFA;
  }
}


 /* Links */

a{
  cursor: pointer;
}

a:link, a:visited, a:hover, a:active {
color:  #333;
cursor: pointer;
background-color: #E0DDD9;
text-decoration: none;
padding: 4px 8px;
border-radius: 4px;
}


a:hover {
  background-color: #0081B9;
  color: #fffffa;
  cursor: pointer;
  text-decoration: none;
}

p.small a:link, p.small a:visited, p.small a:active {
  color: #333;
  background-color: #E0DDD9;
  text-decoration: none;
  margin-left: 8px;
  border-radius:4px;
  padding: 2px 4px;
}

p.small a:hover {
  color: #fff;
  background-color: #0081B9;
  cursor: pointer;
  text-decoration: none;
}


@media (prefers-color-scheme: dark) {
  a:link, a:visited, a:hover, a:active {
    color: #1C2734;
  }
  a:hover {
    color:#fff;
  }
}


.category {
font-family: 'Libre Franklin', sans-serif;
font-size: 1.5rem;
font-weight: 600;
line-height: 3rem;
text-align: left;

}

.portfolio-article p, .portfolio-article h2, ul.portfolio-article li, .portfolio-article ul li{

max-width:60%;
}



.portfolio-article p.introduction{

  font-style:italic;
  max-width:60%;
}


.portfolio-article img {
  width:100%;
  height:auto;
}


ul.portfolio-article {
font-family: 'Libre Franklin', sans-serif;
font-size: 2rem;
font-weight: 400;
line-height: 3rem;
text-align: left;
list-style: circle;
}

.grid-container {
  margin: 0 auto;
  width: 100%;
  height: 50vh;
  display: grid;
  grid-auto-columns: 1fr;
  gap: 1em;
  grid-template-areas: 
    'one one two two three three four four'
    'one one two two three three four four'
    'five five six six seven seven eight eight'
    'five five six six seven seven eight eight'

}

.grid-item {
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-item:nth-child(1) {
  grid-area: one;
}

.grid-item:nth-child(2) {
  grid-area: two;
}

.grid-item:nth-child(3) {
  grid-area: three;
}

.grid-item:nth-child(4) {
  grid-area: four;
}

.grid-item:nth-child(5) {
  grid-area: five;
}

.grid-item:nth-child(6) {
  grid-area: six;
}

.grid-item:nth-child(7) {
  grid-area: seven;
}

.grid-item:nth-child(8) {
  grid-area: eight;
}

@media (max-width: 1400px) {
  .grid-container {

    height: 40vh;

    grid-template-areas: 
    'one one two two three three four four'
    'one one two two three three four four'
    'five five six six seven seven eight eight'
    'five five six six seven seven eight eight'
  }
}


@media (max-width: 940px) {
  .grid-container {

    height: 80vh;
    grid-template-areas: 
    'one one two two'
    'one one two two'
    'three three four four'
    'three three four four'
    'five five six six'
    'five five six six'
    'seven seven eight eight'
    'seven seven eight eight'
  }
}

@media (max-width: 640px) {
  .grid-container {
    grid-template-areas: 
    'one one two two'
    'one one two two'
    'three three four four'
    'three three four four'
    'five five six six'
    'five five six six'
    'seven seven eight eight'
    'seven seven eight eight'

  }
}

@media (max-width: 460px) {
  .grid-container {
    grid-template-areas: 
    'one one two two'
    'one one two two'
    'three three four four'
    'three three four four'
    'five five six six'
    'five five six six'
    'seven seven eight eight'
    'seven seven eight eight'
  }
}




.caption-container {
  border-radius: 4px;
  position:relative;
display: block;
height: 100%;
width:100%;
background-color: #EEEBE6;

}



.caption-container a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  border-radius: 4px;
  background-color: none;
}

@media (prefers-color-scheme: dark) {
  .caption-container a {
      background-color: #EEEBE6;

  }

}


/*images*/

.caption-container .seek {
  background-color: #EEEBE6;
  background-image: url("portfolio/img/hero-seek.jpg");
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: center;

}

.caption-container .coles {
  background-color: #EEEBE6;
  background-image: url("portfolio/img/hero-coles.jpg");
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: center;

}

.caption-container .wahoo {
  background-color: #EEEBE6;
  background-image: url("portfolio/img/hero-wahoo.jpg");
  background-repeat: no-repeat;
background-size: 80%;
  background-position: center;

}

.caption-container .agl {
  background-color: #EEEBE6;
  background-image: url("portfolio/img/hero-agl.jpg");
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: center;

}

.caption-container .iba {
  background-color: #EEEBE6;
  background-image: url("portfolio/img/hero-iba.jpg");
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: center;

}

.caption-container .roadrunner {
  background-color: #EEEBE6;
  background-image: url("portfolio/img/hero-roadrunner.jpg");
  background-repeat: no-repeat;
background-size: 80%;
  background-position: center;

}

.caption-container .goodlife {
  background-color: #EEEBE6;
  background-image: url("portfolio/img/hero-goodlife.jpg");
  background-repeat: no-repeat;
background-size: 80%;
  background-position: center;

}

.caption-container .auspost {
  background-color: #EEEBE6;
  background-image: url("portfolio/img/hero-auspost.jpg");
  background-repeat: no-repeat;
background-size: 80%;
  background-position: center;

}


.caption-container a:hover {

opacity:0.1;
background-color: #EEEBE6;




}




.caption {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

text-align: center;
text-transform: none;
opacity: 1;
  
}


h2.caption {
  color: #333;
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 700;
}



.brand-block {
  width:100%;
  height:auto;
  margin:0px 0px 60px 0px;
}

.brand-block img {
height: 32px;
width: auto;
margin-right:64px;
margin-top:24px;
vertical-align: middle;

}



a.brand-block:link, a.brand-block:visited, a.brand-block:hover, a.brand-block:active {
color:  transparent;
cursor: pointer;
background-color: transparent;
text-decoration: none;
padding: none;
border-radius: none;
}



.portfolio-article img {
  margin-bottom:16px;
border-radius: 8px;

}








 /* Media Queries */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

  body {
  width:100%;
  height:100%;
  min-width:320px;
  }

  .navigation ul li {
    margin-bottom: 10px;

}
h1 {font-size: 3rem;line-height: 4rem;} 
p {font-size: 2rem; line-height: 3rem;} 
.center-block {width: 100%;
padding:0px;}

.center-block {
  width: 100%;
  }

  .portfolio-article p, .portfolio-article h2 {

max-width:100%;
}

h2.caption {
  visibility:hidden;
}





}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.center-block {width: 100%;
padding:0px;}

.portfolio-article p, .portfolio-article h2 {

max-width:100%;
}

body {
  width:80%;
  }







} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

body {
  width:80%;
  }

.center-block {
  width: 100%;
  height: 100%;
  padding: 24px;
  margin: 0 auto;
}

.portfolio-article p, .portfolio-article h2 {

max-width:60%;
}



} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {




} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

.center-block {
  width: 100%;
  height: 100%;
  padding: 24px;
  margin: 0 auto;
}

.line {

  width:100%;
  max-width:1200px;
}

.link-block {
  width:100%;
  max-width:1200px;
}


}