/************************************************************************************
RESET
*************************************************************************************/

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/************************************************************************************
GRID
*************************************************************************************/

.container {
  position: relative;
  width: 100%;
  max-width: 1350px;
  margin: 0 auto;
  padding: 0 5%;
  box-sizing: border-box;
}

.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
}

@media (min-width: 800px) {

  .column,
  .columns {
    margin-left: 4%;
    padding: 0;
  }

  .column:first-of-type,
  .columns:first-of-type {
    margin-left: 0;
  }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}

.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both;
}

/************************************************************************************
GENERAL STYLING
*************************************************************************************/


@-webkit-keyframes fadein {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadein {
  from {opacity: 0;}
  to {opacity: 1;}
}

:root {
  --red: #d2232a;
  --red2: #d95943;
  --red3: #e18067;
  --blue: #8BB4F2;
  --blue-light: #A2BFEA;
  --back: #353B3D;
}

body {
  background-color: #fff;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 28px;
	color: var(--red);
	text-align: left;
	animation: fadein .3s ease-in .1s both;
  line-height: 1.2;
}

a:link, a:visited {
	text-decoration: none;
	transition: transform .4s;
	outline: none;
  color: var(--red);
}

a:active {
	outline: none;
}

a.button {
  display: inline-block;
  color: #fff;
  border-radius: 5px;
  padding: 20px 35px;
  background-image: linear-gradient(135deg, var(--red) 0%, var(--red2) 100%);
  transition:  .4s;
  margin: 30px 0;
  font-weight: 400;
  font-size: 80%;
}

a.button:hover {
  transform: scale(.95,.95);
}

p {
  margin: 0 0 20px;
}

h1{
  font-size: 50px;
  margin: 0 0 80px;
	line-height: 1;
  color: #333;
  font-weight: 900;
}

h2 {
  font-weight: 900;
  font-size: 30px;
  margin: 0 0 20px;
  color: var(--red);
}

h3, h4, h5 {
	font-size: 30px;
  font-weight: 500;
	margin: 0 0 20px;
}

em {
  font-style: italic;
}

b, strong {
	font-weight: 500;
}

hr {
  border-width: 0;
  border-top: 2px solid var(--blue);
}

ul {
  margin: 0 0 20px 0;
}

article figure, article iframe {
  margin: 80px 0;
  width: 80%;
}


@media (max-width: 600px) {
  body {
    font-size: 28px;
  }

  h1 {
    font-size: 59px;

  }

  h2, h3, h4, h5 {
    font-size: 28px;
  }

  article figure, article iframe {
    margin: 40px 0;
    width: 100%;
  }

}

@media (max-width: 400px) {
  body {
    font-size: 22px;
  }

  h1 {
    font-size: 48px;
  }

}

/************************************************************************************
HEADER
*************************************************************************************/

.logo svg {
  width: 450px;
  margin-top: 30px;
}

.menu {
  width: 100%;
  padding: 5px 0;
  border-bottom: 15px solid transparent;
  border-image: linear-gradient(135deg, var(--red) 0%, var(--red3) 100%) 1;
  margin: 20px 0 50px;
}

.menu a {
  font-size: 22px;
  margin-right: 5px;
}

[aria-current]:not([aria-current="false"]) {
  font-weight: 600;
}

@media (max-width: 500px) {
  .menu a {
    font-size: 21px;
  }

  .logo svg {
    width: 300px;
  }
}

/************************************************************************************
FOOTER
*************************************************************************************/

footer {
  margin-top: 100px;
  padding: 20px 0;
  background-color: var(--red3);
  background-image: linear-gradient(135deg, var(--red) 0%, var(--red2) 51%, var(--red) 100%);
  font-size: 60%;
  color: #fff;
  text-align: center;
  font-weight: 400;
}

footer a {
  display: inline-block;
  transition: .3s;
  margin-top: 5px;
  color: #fff !important;
}

/************************************************************************************
HOME PAGE
*************************************************************************************/





/************************************************************************************
PROJECTS
*************************************************************************************/

ul.projects {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

ul.projects li {
  width: 32%;
  margin-right: 2%;
  margin-bottom: 4%;
}

ul.projects li:nth-of-type(3n+0) {
  margin-right: 0;
}

ul.projects li h2 {
  font-family: 'Chaco Black', sans-serif;
  font-variant-ligatures: discretionary-ligatures;
  font-style: normal;
  font-size: 30px;
  margin: 10px 0 0;
}

ul.projects li p {
  margin-top: 5px;
  font-size: 17px;
  line-height: 1.3;
}

@media (max-width: 799px) {
  ul.projects li {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10%;
    float: none;
  }
}

.project {
  margin: 50px 0;
}

.project .project-category {
  margin-bottom: 5px;
  font-size: 22px;
}

.project h1 {
  margin: 50px 0;
}

.project .project-text {
  margin: 50px 0 100px;
}

.project-text figure,
.project-text iframe {
  margin: 60px 0;
}


.project-credits {
  border-top: 1px solid var(--blue);
  padding: 10px 0 0;
  margin: 0 0 100px;
  font-size: 80%;
}

.project-credits ul {
  list-style: none;
  padding: 0;
}

ul.project-gallery {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.project-gallery li {
  width: 48%;
  margin-right: 4%;
  float: left;
}

ul.project-gallery li:nth-of-type(2n+0) {
  margin-right: 0;
}

ul.project-gallery li figure {
  position: relative;
  margin-bottom: 10%;
}

ul.project-gallery li figcaption {
  position: absolute;
  bottom: -28px;
  left: 0;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  color: var(--blue-light);
  line-height: 1.1;
  padding: 5px 0;
}

@media (max-width: 799px) {
  .project .project-text {
    margin: 50px 0 50px;
  }

  .project-text figure,
  .project-text iframe {
    margin: 40px 0;
  }

  .project-credits {
    margin: 0 0 50px;
  }

  ul.project-gallery li {
    width: 100%;
    margin-right: 0;
  }
}

@media (max-width: 399px) {
  .project .project-category {
    font-size: 21px;
  }
}

/************************************************************************************
AUDIO AIDS
*************************************************************************************/

.audio-aids {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.audio-aid {
  width: 45%;
  padding-top: 20px;
  border-bottom: 5px solid var(--red3);
}

.audio-aid:nth-last-of-type(even) {
  margin-right: 10%;
}


.audio-aid p {
  border-top: 1px solid var(--red3);
  padding-top: 10px;
  font-size: 20px;
  margin: 5px 0;
}

@media (max-width: 799px) {
  .audio-aid {
    width: 100%;
  }
  .audio-aid:nth-last-of-type(even) {
    margin-right: 0;
  }
}


/************************************************************************************
BLOG
*************************************************************************************/

.blog article h2 {
  font-family: 'Chaco Black', sans-serif;
  font-variant-ligatures: discretionary-ligatures;
  font-style: normal;
  font-size: 50px;
}

.blog article {
  padding: 50px 0;
}

.blog article img {
  border-left: 20px solid var(--purple);
}

.blog article:first-of-type {
  padding-top: 8px;
}

.blog article:last-of-type {
  border-bottom: none;
}

.blog article .post-meta {
  border-bottom: 0;
  font-size: 80%;
  margin-bottom: 40px;
}

.blog article .post-meta span {
  border-bottom: 1px solid var(--blue);
  padding: 0 50px 5px 5px;
}

.blog article .button {
  margin-top: 20px;
}

.pagination {
  border-top: 5px solid var(--purple);
  padding-top: 20px;
}

.pagination a:first-of-type {
  margin-right: 20px;
}

.pagination a {
  background-color: var(--green);
  color: var(--beige);
  padding: 2px 10px 5px;
  border-radius: 7px;
  transition: .2s;
}

.post-meta {
  border-bottom: 1px solid var(--green);
}

.post-date {
  font-size: 90%;
}