html {
  box-sizing: border-box;
  height: 100%;
  scroll-behavior: smooth;
}

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

/* ---- typography ---- */

@font-face {
  font-family: SIRegular;
  src: url("../fonts/si_regular.woff") format("woff"), url("../fonts/si_regular.svg") format("svg"), url("../fonts/si_regular.eot") format("eot"), url("../fonts/si_regular.otf") format("otf");
}

@font-face {
  font-family: SILight;
  src: url("../fonts/si_light.woff") format("woff"), url("../fonts/si_light.svg") format("svg"), url("../fonts/si_light.eot") format("eot"), url("../fonts/si_light.otf") format("otf");
}

@font-face {
  font-family: SIMedium;
  src: url("../fonts/si_medium.woff") format("woff"), url("../fonts/si_medium.svg") format("svg"), url("../fonts/si_medium.eot") format("eot"), url("../fonts/si_medium.otf") format("otf");
}

@font-face {
  font-family: SISemiBold;
  src: url("../fonts/si_semibold.woff") format("woff"), url("../fonts/si_semibold.svg") format("svg"), url("../fonts/si_semibold.eot") format("eot"), url("../fonts/si_semibold.otf") format("otf");
}

@font-face {
  font-family: SIBold;
  src: url("../fonts/si_bold.woff") format("woff"), url("../fonts/si_bold.svg") format("svg"), url("../fonts/si_bold.eot") format("eot"), url("../fonts/si_bold.otf") format("otf");
}

@font-face {
  font-family: SIItalic;
  src: url("../fonts/si_italic.woff") format("woff"), url("../fonts/si_italic.svg") format("svg"), url("../fonts/si_italic.eot") format("eot"), url("../fonts/si_italic.otf") format("otf");
}

body {
  font-family: SIRegular;
  font-size: 21px;
  line-height: 1.4;
  color: #222;
  background-color: #fff;
  margin: 0;
  padding: 0px 47.5px 40px 47.5px;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---- generic ---- */

img {
  border: 0;
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

h2 {
  font-family: SIMedium;
  font-weight: 100;
  font-size: 35px;
  line-height: 1.3;
  margin:0;
}

h3 {
  font-family: SIMedium;
  font-weight: 100;
  font-size: 21px;
  line-height: 1.3;
}

h4 {
  font-weight: 100;
  font-size: 28px;
  line-height: 1.3;
}

h5 {
  font-weight: 100;
  font-size: 28px;
  line-height: 1.3;
}

a {
  color: #757575;
  text-decoration: none;
  transition: color 0.5s;
}

a:hover {
  color: #222;
  border-bottom: solid 1px #000000;
  padding-bottom: 1px;
}

p {
  margin: 0;
}

b {
  font-style: normal;
  font-weight: normal;
  font-family: SISemiBold;
}

i {
  font-style: normal;
  font-weight: normal;
  font-family: SIItalic;
}

ul {
  list-style-type: initial;
  list-style-position: outside;
}

figure {
  margin:0;
  display: table;
  width: 100%;
}

figcaption {
  display: table-caption;
  caption-side: bottom;
}

sup {
  font-size: 10px;
}

p.read-more {
  padding: 35px 0 0 0;
}

/* ---- page ----*/

#page {
  position: relative;
  height: 100%;
}

/* ---- header ----*/

.header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0px 75.5px 0px;
}

nav.main-menu {
  margin-top: 15px;
}

nav.main-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav.main-menu li {
  float: left;
}

nav.main-menu li a {
  display: block;
  margin: 0px 25px 0 0;
  color: #757575;
  text-decoration: none;
  transition: color 0.5s;
}

nav.main-menu li a:hover {
  color: #222;
  border-bottom: solid 1px #000000;
  padding-bottom: 1px;
}

nav.main-menu li a.selected {
  color: #222;
}

nav.secondary-menu {
  padding: 0 0 35px 0;
}

nav.secondary-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav.secondary-menu li {
  float: left;
}

nav.secondary-menu li a {
  
  margin: 0px 25px 0 0;
  color: #757575;
  text-decoration: none;
  transition: color 0.5s;
}

nav.secondary-menu li a:hover {
  color: #222;
  border-bottom: solid 1px #000000;
  padding-bottom: 1px;
}

nav.secondary-menu li a.selected {
  color: #222;
}

nav.secondary-menu .filter {
  padding: 0 0 14px 0;
}

.header h1 {
  width: 200px;
  padding: 12px 0 0 0;
  margin: 0px;
}

/* ---- main ----*/

.main .intro h2 {
  font-family: SIRegular;
}

.main .intro h2 a {
  font-size: 21px;
  
}

.main .article {
  max-width: 50%;
  padding: 0 0 49px 0;
}

.main .article p {
  padding-bottom: 21px;
}

.main .article h2 {
  margin:0;
  padding-bottom: 49px;
}

.main .article h3 {
  font-family: SISemiBold;
  margin-top: 35px;
}

.main .article h4 {
  margin: 0px 21px 56px 21px;
}

.main .article h5 {
  margin: 14px 21px 35px 21px;
}

.main .article blockquote {
  margin-top:0;
  margin-right: 21px;
  margin-left: 21px;
  padding-bottom: 21px;
}

.main .article ul {
  margin: 0;
  padding: 0 21px 21px 42px;
}


.main .article .figure img {
  padding: 0 0 21px 0;
}

.main .article figure figcaption {
  font-size: 15px;
  padding: 15px 0 49px 0;
}

.main .article .embed-container {
  position: relative;
  padding-bottom: 100%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.main .article .embed-container iframe,
.main .article .embed-container object,
.main .article .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.main .article .long-screen {
  max-width: 375px;  
}

/* ---- section intro ----*/

section.intro {
  max-width: 50%;
  padding-bottom: 49px;
}



/* ---- section highlighted-hero ----*/

.highlighted-hero {
  display: none;
  margin-bottom: 14px;
}

.highlighted-banner {
  position: relative;
}

.highlighted-banner h3 {
  line-height: 1.2;
  opacity: 0;
  transition: all ease .5s;
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 0 25px 15px 0;
  margin: 0;
  z-index: 2;
}

.highlighted-banner a {
  color: #222;
  text-decoration: none;
  transition: none;
}

.highlighted-banner a:hover {
  border-bottom: none;
  
}

.highlighted-banner:hover h3 {
  opacity: 1;
}

.highlighted-banner p {
  font-family: SIRegular;
}

.highlighted-banner:hover p {
  opacity: 1;
}

.highlighted-banner img {
  transition: all ease .5s;
}

.highlighted-banner:hover img {
  filter: opacity(15%);
}

.highlighted {
  padding: 0 0 49px 0;
}

.highlighted .highlighted-banner {
  /* width: ((100% - (($column-count - 1) * $gutter-width)) / $column-count); sent gutter width 1.5% i column count 3*/
  width: 32.333%;
  margin-right: 1.5%;
  float: left;
  margin-bottom: 14px;
}

.highlighted .highlighted-banner:nth-child(3n) {
  margin-right: 0;
}

/* ---- .footer----*/

.footer {
  padding: 20px 0 49px 0;
  border-top: 1px solid black;
}

nav.footer-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav.footer-menu li {
  float: left;
}

nav.footer-menu li a {
  display: block;
  margin: 0px 25px 0px 0;
  padding: 0px 0 0 0;
  text-decoration: none;
  color: #757575;
  text-decoration: none;
  transition: color 0.5s;
}

nav.footer-menu li a:hover {
  color: #222;
  border-bottom: solid 1px #000000;
  padding-bottom: 1px;
}

.footer .credits {
  padding: 35px 0 0 0;
}

.footer .credits p {
  margin: 0px;
  font-size: 14px;
}

.main .back-to-top a {
  float:right;
  padding-top: 20px;
  padding-bottom: 20px;
}

.main .back-to-top a:hover {
  border-bottom: none;
}

.main .back-to-top img{
  width: 40px;
}

/* ---- clearfix ---- */

nav.main-menu ul:after, nav.secondary-menu ul:after, .highlighted:after, nav.footer-menu ul:after {
  content: "";
  display: table;
  clear: both;
}

/* ---- responsive ---- */

@media (max-width: 1380px) {
  section.intro {
    max-width: 70%;
    padding-bottom: 35px;
  }

  section.intro h2 {
    font-size: 35px;
  }

  .main .article {
    max-width: 60%;
  }
}

@media (max-width: 1200px) {
  section.intro {
    max-width: 80%;
  }
}

@media (max-width: 1075px) {
  section.intro {
    max-width: 85%;
  }
}

@media (max-width: 1024px) {
  .highlighted-banner h3 {
    font-size: 14px;
    line-height: 1.2;
    background: rgba(255, 255, 255, 0.8);
    opacity: 100;
    transition: none;
    top: 0px;
    left: 0px;
    right: 0px;
    padding: 7px 21px 21px 7px;
    z-index: 2;
  }
}

@media (max-width: 870px) {
  section.intro {
    max-width: 100%;
  }
 
  .highlighted .highlighted-banner {
    /* width: ((100% - (($column-count - 1) * $gutter-width)) / $column-count); sent gutter width 1.5% i column count 3*/
    width: 49.25%;
    margin-right: 1.5%;
  }
  .highlighted .highlighted-banner:nth-child(3n) {
    margin-right: 1.5%;
  }
  .highlighted .highlighted-banner:nth-child(2n) {
    margin-right: 0;
  }
  .main .article {
    max-width: 70%;
    padding: 0 0 49px 0;
  }
  nav.secondary-menu {
    padding: 0 0 21px 0;
  }
}

@media (max-width: 767px) {

  section.intro {
    max-width: 100%;
    padding-bottom: 28px;
  }
  section.intro h2{
    font-size: 28px;
  }
  .header h1 {
    width: 150px;
  }
  .highlighted {
    padding: 0 0 42px 0;
  }
  .footer {
    padding: 20px 0 42px 0;
  }
  .main .article {
    max-width: 80%;
  }

  .main .article h2 {
    line-height: 1.2;
  }
}

@media (max-width: 640px) {
  .header {
    padding: 20px 0px 45px 0px;
  }

  section.intro {
    max-width: 100%;
    padding-bottom: 21px;
  }

  section.intro h2 {
    font-size: 21px;    
  }

  .highlighted {
    padding: 0 0 35px 0;
  }

  .highlighted .highlighted-banner {
    width: 100%;
    float: none;
  }

  .highlighted .highlighted-banner:nth-child(n) {
    margin-right: 0;
  }

  nav.main-menu li {
    float: none;
  }

  nav.footer-menu li {
    float: none;
  }

  nav.footer-menu li a {
    margin: 0px 0px 0px 0;
  }

  .footer {
    padding: 20px 0 21px 0;
  }

  .footer .credits {
    padding: 35px 0 0 0;
  }
}

@media (max-width: 620px) {

    .header {
      padding: 10px 0px 45px 0px;
    }

    body {
      padding: 0px 28px 40px 28px;
    }

    .main .article {
      max-width: 100%;
    }
}

@media (max-width: 500px) {

  .main .article h2 {
    font-size: 35px;
    padding-bottom: 35px;
  }

}

@media (max-width: 416px) {
    .highlighted .highlighted-banner {
      width: 100%;
    }
    .main .article p  {
      font-size: 17.5px;
    }

    .main .article h3  {
      font-size: 17.5px;
    }

    .main .article h4 {
      font-size: 21px;
     
    }

    .main .article blockquote  {
      font-size: 17.5px;
    }

    .main .article ul  {
      font-size: 17.5px;
    }

    .main .article h2 {
      font-size: 28px;
      padding-bottom: 28px;
    }
}

@media (max-width: 620px) {
    .header {
      padding: 10px 0px 45px 0px;
    }
    body {
      padding: 0px 28px 40px 28px;
    }
    .main .article {
      max-width: 100%;
    }
}

@media (max-width: 500px) {
  .main .article h2 {
    font-size: 35px;
    padding-bottom: 35px;
  }
}

@media (max-width: 416px) {
    body {
      padding: 0px 14px 0px 14px;
    }

    .highlighted .highlighted-banner {
      width: 100%;
    }
    .main .article p  {
      font-size: 17.5px;
    }

    .main .article h3  {
      font-size: 17.5px;
    }

    .main .article blockquote  {
      font-size: 17.5px;
    }

    .main .article ul  {
      font-size: 17.5px;
    }

    .main .article h2 {
      font-size: 28px;
      padding-bottom: 28px;
    }
  }