@font-face {
  font-family: "Rubik Black";
  font-display: swap;
  font-weight: 900;
  src: local("Rubik Black"), url("/fonts/rubik/Rubik-Black.ttf") format("truetype");
}

@font-face {
  font-family: "Rubik Bold";
  font-display: swap;
  font-weight: 700;
  src: local("Rubik Bold"), url("/fonts/rubik/Rubik-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Rubik Medium";
  font-display: swap;
  font-weight: 600;
  src: local("Rubik Medium"), url("/fonts/rubik/Rubik-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Rubik Regular";
  font-display: swap;
  font-weight: 400;
  src: local("Rubik Regular"), url("/fonts/rubik/Rubik-Regular.ttf") format("truetype");
}


@font-face {
  font-family: "Rubik Light";
  font-display: swap;
  font-weight: 300;
  src: local("Rubik Light"), url("/fonts/rubik/Rubik-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Lora Regular";
  font-display: swap;
  font-weight: 400;
  src: local("Lora"), url("/fonts/lora/Lora-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Lora Italic";
  font-display: swap;
  font-weight: 200;
  font-style: italic;
  src: local("Lora"), url("/fonts/lora/Lora-Italic.ttf") format("truetype");
}

@font-face {
  font-family: "Lora Bold";
  font-display: swap;
  font-weight: 600;
  src: local("Lora"), url("/fonts/lora/Lora-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Lora Bold Italic";
  font-display: swap;
  font-weight: 600;
  font-style: italic;
  src: local("Lora"), url("/fonts/lora/Lora-BoldItalic.ttf") format("truetype");
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "Lora Regular", "Times", "Times New Roman", serif;
  line-height: 1.65em;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

.list-reset {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Rubik Bold", "Arial", sans-serif;
}

h1 {
  font-size: 2.35em;
  line-height: 1.15em;
}

h2 {
  line-height: 1.15em;
  margin-bottom: 0.5em;
  margin-top: 1.5em;
}

a {
  color: #0052B1;
  text-underline-offset: .2rem;
}

hr {
  border: 1px dotted #E0EAF7;
}

img {
  max-width: 100%;
}

a:hover, a:focus {
  text-decoration-color: #63C827;
}

figcaption {
  font-family: "Rubik Light";
  font-size: .9em;
}

figcaption p {
  margin: 0;
}

video {
  max-width: 100%;
  width: 100% !important;
  height: auto !important;
}

.video-wrapper {
  position: relative;
  padding: 8px 40px;
  overflow-x: hidden;
}

/* structural elements */

.wrapper {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto 1fr auto;
  grid-row-gap: 3.5em;
  grid-template-areas: 
    "hd hd hd hd hd hd hd hd hd hd hd hd"
    "main main main main main main main main sd sd sd sd"
    "ft ft ft ft ft ft ft ft ft ft ft ft";
}

/* mobile layout */
@media screen and (max-width: 1000px) {
  .wrapper {
    grid-auto-rows: auto 1fr 1fr 3.45em;
    grid-template-areas: 
      "hd hd hd hd hd hd hd hd hd hd hd hd"
      "main main main main main main main main main main main main"
      "sd sd sd sd sd sd sd sd sd sd sd sd"
      "ft ft ft ft ft ft ft ft ft ft ft ft";    
  }

  .site-main-navigation {
    display: none !important;
  }

  .mobile-menu-btn-wrapper {
    display: block !important;
    position: fixed;
    top: 1em;
    right: 1.5em;
    width: 28px;
    height: 20px;
    z-index: 101;
    background: white;
    padding: .6em .45em;
    border-radius: .5em;
    box-shadow: 0px 1px 3px rgba(0,82,177,0.2);
  }

  .mobile-menu-btn {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: 28px;
    height: 20px;
    mask: url("/img/menu-mask.svg");
    -webkit-mask-image: url("/img/menu-mask.svg");
    -webkit-mask: url("/img/menu-mask.svg");
    -webkit-size: cover;
    background: #0052B1;
    cursor: pointer;
  }  

  .mobile-menu-btn:hover, .mobile-menu-btn:focus {
    cursor: pointer;
    background: #63C827;
  }

  .site-main-navigation {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
}

@media screen and (min-width: 1200px) {
  .wrapper {
    grid-template-areas: 
      "hd hd hd hd hd hd hd hd hd hd hd hd"
      "main main main main main main main main main sd sd sd"
      "ft ft ft ft ft ft ft ft ft ft ft ft";
  }  
}

/* big screens layout */
@media screen and (min-width: 1600px) {
  .site-header {
    grid-column-start: 2 !important;
    grid-column-end: 12 !important;
    position: initial !important;
  }

  .site-main {
    grid-column-start: 2 !important;
    grid-column-end: 9 !important;
  }

  .site-sidebar {
    grid-column-start: 9 !important;
    grid-column-end: 12 !important;
  }
}

.site-header, .site-footer, .site-main {
  padding: 0 2em;
  z-index: 100;
}

.site-header {
  position: relative;
  grid-area: hd;
  padding-top: 2em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

/* center the logotype on the mobile view */
@media screen and (max-width: 1000px) {
  .site-header {
    justify-content: center;
  }

  .logotype {
    padding-top: 1em;
    flex-direction: column;
    justify-content: center;
  }

  .logotype img {
    width: 145px;
  }
}

.site-footer, .site-sidebar {
  font-size: .9em;
}

.site-footer {
  padding: .8em 2em;
  font-family: "Rubik Light";
  grid-area: ft;
  background: #E0EAF7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.site-main {
  grid-area: main;
}

.site-sidebar {
  grid-area: sd;
  z-index: 100;
}

.logotype {
  display: flex;
  align-items: center;
  margin-left: -1em;
}

.logotype img {
  width: 100px;
}

.logotype a {
  font-family: "Rubik Black", "Arial", sans-serif;
  font-size: .9em;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .6ex;
}

.logotype a:hover, .logotype a:focus {
  color: #63C827;
}

.mobile-menu-btn-wrapper {
  display: none;
}

.mobile-menu {
  display: none;
}

.mobile-menu.active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2em;
  grid-template-areas:
    "langs lanags"
    "nav nav"
    "news news";

  position: fixed;
  top: 0;
  right: 0;
  overflow-y: scroll;

  background: white;
  padding: 2em;
  z-index: 120;
  min-width: 60%;
  max-width: 75%;
  height: 100%;
  box-shadow: 0.5em 0.5em 2.5em rgba(0,0,0,0.4);
}

.mobile-site-nav { grid-area: nav; }
.mobile-translations { grid-area: langs; }
.mobile-recent-news { grid-area: news; }

.site-main-navigation {
  margin: 1em 0;
}

.site-main-navigation ul {
  display: flex;
  flex-wrap: wrap;
  z-index: 100;
}

.site-main-navigation ul li {
  margin: 0 .5rem;
  z-index: 100;
}

.site-main-navigation ul li:last-child {
  margin: 0 0 0 .5rem;
}

.site-main-navigation ul li:first-child {
  margin: 0 .5rem 0 0;
}

.site-main-navigation a {
  font-family: "Rubik Regular", "Arial", sans-serif;
  padding: .35em .8em;
  letter-spacing: .1ex;
  text-decoration: none;
  background: #0052B1;
  color: white;
}

.site-main-navigation a.active {
  background: #63C827;
}

.site-main-navigation a:hover, .site-main-navigation a:focus {
  background: #63C827;
}

.language-menu-item a {
  font-family: "Rubik Medium", "Arial", sans-serif;
  padding: .35em .4em;
  border-radius: 1em;
  text-decoration: none;
  background: white;
  color: #0052B1;
}

.language-menu-item a:hover, .language-menu-item a:focus {
  background: #63C827;
  color: white;
}

/* stylistic elements */

.page-description {
  font-family: "Rubik Light", "Arial", sans-serif;
  font-size: 2.25em;
  line-height: 1.15em;
  color: #0052B1;
  margin-bottom: 4rem;
}

@media screen and (max-width: 500px) {
  .page-description {
    font-size: 2em;
  }
}

.recent-news-list {
  display: grid;
  grid-column-gap: 4em;
  grid-template-columns: 1fr;
}

@media screen and (max-width: 1000px) {
  .recent-news-list {
    grid-template-columns: 1fr;
  }
}

.site-summary-list {
  margin-bottom: 4rem;
  display: flex;
  flex-wrap: wrap;
}

.site-summary-list a, .list-view article h2 a, .single-view h2 a {
  text-decoration-thickness: .2rem;
}

.site-summary-list h2, .site-summary-list p {
  margin: 0;
  margin-right: 2em;
}

.site-summary-list p {
  margin-top: .5em;
}

.site-summary-list-item {
  width: 33%;
  margin-bottom: 2em;
}

@media screen and (max-width: 1000px) {
  .site-summary-list-item {
    width: 50%;
  }
}

@media screen and (max-width: 500px) {
  .site-summary-list-item {
    width: 100%;
  }
}

.site-sidebar-wrapper {
  background: #E0EAF7;
  margin: 0 2em;
  padding-bottom: 1.5em;
}

.site-sidebar-wrapper header {
  padding: 1.25em 1.5em;
  background: #0052B1;
  color: white;
  margin-bottom: 1em;
}

.site-sidebar-wrapper h3, h4 {
  margin: 0;
}

.site-sidebar-wrapper h3 {
  font-family: "Rubik Regular";
}

.site-sidebar-wrapper h4 {
  font-family: "Lora Bold";
  line-height: 1.25em;
}

.site-sidebar-item {
  padding: .5em 1.5em;
  font-family: "Rubik Light", "Arial", sans-serif;
}

.site-sidebar-item p {
  margin: 0;
  font-size: 1.35em;
  line-height: 1.25em;
}

.header-graphics-1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 30em;
  z-index: 10;
  transform: rotate(-15deg);
}

/* using pseudo-element to not rotate an image, but only tha mask */
.header-graphics-1:before {
  content: "";
  position: absolute;
  top: -3em;
  right: -9em;
  width: 300px;
  height: 30em;
  background: url("/img/human-cell@2x.jpg") no-repeat;
  background-size: contain;
}

.header-graphics-2 {
  position: absolute;
  top: 4em;
  right: -9em;
  width: 400px;
  height: 30em;
  z-index: 9;
  transform: rotate(-105deg);
  background: #0052B1;
}

@media screen and (max-width: 1000px) {
  .header-graphics-1 {
    display: none;
  }
}

.single-view footer, .list-view footer {
  font-family: "Rubik Light", "Arial", sans-serif;
  font-size: .9em;
}

.small-sans {
  font-family: "Rubik Light", "Arial", sans-serif;
  font-size: .9em;
}

.p0 {
  padding: 0;
}

.m0 {
  margin: 0;
}

.pt02 {
  padding-top: .2em;
}

.pr1 {
  padding-right: 1em;
}

.pl1 {
  padding-left: 1em;
}

.pr2 {
  padding-right: 2em;
}

.pl2 {
  padding-left: 2em;
}

.mb1 {
  margin-bottom: 1em;
}

.mb2 {
  margin-bottom: 2em;
}

.mb4 {
  margin-bottom: 4em;
}

.mr1 {
  margin-right: 1em;
}

.ml1 {
  margin-left: 1em;
}

.eu-wrapper {
  display: flex;
  align-items: center;
}

.eu-wrapper img {
  width: 50px;
  height: auto;
  margin-left: 1em;
}

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-w50 {
  width: 50%;
}

.text-right {
  text-align: right;
}

.dark-blue {
  color: #0052B1;
}

.thick-underline {
  text-decoration-thickness: .2rem;
}

.two-cols {
  column-count: 2;
}