/***************************************************
** SCREEN STYLESHEET v1.1
***************************************************/





/*
** GENERAL 
*/


#wpadminbar {
  display: none;
}

body {
  color: #FFF;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 300;
  background-color: #0B1D26;
}

section {
  padding-top: 10em;
  padding-bottom: 10em;
}

@media (min-width: 1400px) {

  section {
    padding-top: 15em;
    padding-bottom: 15em;
  }

}

strong,
b {
  font-weight: 700;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
}

.wrapper {
  -webkit-overflow-scrolling: touch;
}

.main {
  padding: 0;
  background-color: #0B1D26;
  box-shadow: 0 0 5em #0B1D26;
  z-index: 2;
}

.heading {
  font-family: 'NotesESAbold', sans-serif;
  font-weight: normal;
}

.language-el .heading {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
}

.heading.section {
  color: #E8E8E4;
  margin-top: 0;
}

.subheading {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 300;
  color: #8197A6;
}

.content a {
  color: #8197A6;
}
.menu a,
.caption a {
  color: #FFF;
}

.back-home, .external-url {
  font-size: 1.2em;
  font-weight: 500;
  display: block;
  clear: both;
  color: #8197A6;
}

.menu a:hover,
.content a:hover,
.caption a:hover,
.back-home:hover,
.external-url:hover {
  text-decoration: underline;
}

.image-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  z-index: 0;
  margin: 0;
}

.stellar {
  transition: none;
}





/*
** MENU 
*/


.esa-header.close,
.main.close {
  transform: translateX(0vw);
}

.esa-header.open,
.main.open {
  transform: translateX(80vw);
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 80vw;
  height: 100vh;
  padding: 2em;
  background-color: #0F2733;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  overflow-y: auto;
}

.menu.close {
  transform: translateX(10em) scale(0.8);
  pointer-events: none;
}

.menu.open {
  transform: translateX(0) scale(1);
  pointer-events: all;
}

@media (min-width: 768px) {

  .menu {
    width: 50vw;
    transition-duration: 0.4s;
  }
  
  .esa-header.open,
  .main.open {
    transform: translateX(50vw);
  }

}

@media (min-width: 1025px) {

  .menu {
    width: 35vw;
  }
  
  .esa-header.open,
  .main.open {
    transform: translateX(35vw);
  }

}

@media (min-width: 1400px) {

  .menu {
    width: 20vw;
  }
  
  .esa-header.open,
  .main.open {
    transform: translateX(20vw);
  }

}

.navigation {
  padding-bottom: 5em;
}

.menu .heading {
  text-transform: uppercase;
  color: #8197A6;
}

.menu .exploring-discovering,
.menu .science-exploration {
  color: #F1666A;
}

.menu .monitoring-safeguarding,
.menu .space-safety-security {
  color: #6DCFF6;
}

.menu .connecting-benefiting,
.menu .applications {
  color: #76C8AE;
}

.menu .designing-operating,
.menu .enablers-support {
  color: #FFCC4E;
}





/*
** COVER 
*/


#cover {
  padding: 0;
}

.brand {
  max-height: 80px;
}

@media (min-width: 400px) {
  
  .brand {
    max-height: 100px;
  }

}

@media (min-width: 768px) {
  
  .brand {
    max-height: 150px;
  }

}

#cover .heading {
  margin-top: 0.75em;
}

#cover .subheading {
  max-width: 700px;
  margin-top: 1em;
  margin-bottom: 0;
  font-size: 1.25em;
  font-weight: 500;
  color: #FFF;
  line-height: 1.5;
  text-align: center;
}

#cover .subheading a {
  text-decoration: underline;
}

@media (min-width: 1024px) {

  #cover .heading {
    max-width: 70vw;
  }

}

@media (min-width: 1400px) {

  .brand {
    max-height: 200px;
  }

  #cover .heading {
    font-size: 3.5em;
    max-width: 80vw;
  }

}





/*
** HERO
*/


.hero .heading {
  margin-top: 1em;
  margin-bottom: 0;
  text-align: center;
  font-size: 2em;
}

@media (min-width: 400px) {

  .hero .heading {
    font-size: 2.5em;
  }

}

@media (min-width: 1400px) {

  .hero .heading {
    font-size: 3.5em;
  }

}





/*
** PILLARS
*/


#pillars {
  padding: 5em 0 0;
}

.single #pillars {
  padding-bottom: 15vh;
}

#pillars .container-full {
  max-width: 1000px;
}

@media (min-width: 1400px) {

  #pillars {
    padding: 0;
    margin-top: -1em;
  }

  #pillars .container-full {
    max-width: 1800px;
  }

}

#pillars .col {
  padding-bottom: 2em;
}

.pillar {
  padding: 4em 2em;
}

.pillar .pillar-heading {
  margin-top: 0;
  text-transform: uppercase;
}

.pillar .abstract b {
  display: block;
  margin-bottom: 1em;
  color: #003247;
  font-family: 'NotesESAbold', sans-serif;
}

.pillar.exploring-discovering .abstract b,
.pillar.science-exploration .abstract b {
  color: #CF1D39;
}

.pillar.monitoring-safeguarding .abstract b,
.pillar.space-safety-security .abstract b {
  color: #00619E;
}

.pillar.connecting-benefiting .abstract b,
.pillar.applications .abstract b {
  color: #008E7A;
}

.pillar.designing-operating .abstract b,
.pillar.enablers-support .abstract b {
  color: #F47920;
}

@media (min-width: 768px) and (max-width: 1023px) {

  .pillar-heading {
    font-size: 2.8em;
  }

}

@media (min-width: 1400px) and (max-width: 1720px) {

  .pillar {
    padding-left: 1.5em;
    padding-right: 1.5em;
  }

  .pillar .pillar-heading {
    font-size: 2.2em;
  }

  .abstract {
    font-size: 1.25em;
  }

  .pillar .pillar-entry .heading {
    font-size: 1.15em;
  }

}

@media (min-width: 1400px) {

  #pillars .col {
    padding-bottom: 0;
  }

}

.pillar-entry {
  position: relative;
  overflow: hidden;
}

.pillar .pillar-entry .heading {
  margin: 0 0 0 1em;
  z-index: 1;
}
.pillar .pillar-entry:hover .heading {
  margin-left: 1.25em;
}

@media (max-width: 399px) {

  .pillar .pillar-heading {
    font-size: 2.6em;
  }

  .pillar .pillar-entry .heading {
    font-size: 1.3em;
  }

}

.pillar .pillar-entry .arrow {
  width: 3em;
  flex: 0 0 auto;
  margin-left: auto;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  z-index: 1;
}
.pillar .pillar-entry:hover .arrow {
  width: 4em;
  color: #FFF !important;
}


.pillar-entry .image-bg {
  transition-duration: 1s;
}
.pillar-entry:hover .image-bg {
  transform: scale(1.1);
}


/* Exploring & Discovering */

.pillar.exploring-discovering,
.pillar.science-exploration {
  background-color: #F1666A;
}

.pillar.exploring-discovering .pillar-heading,
.pillar.science-exploration .pillar-heading {
  color: #960136;
}

.pillar.exploring-discovering .pillar-entry,
.pillar.science-exploration .pillar-entry {
  height: 6em;
  background-color: #ED1B2F;
  margin-bottom: 1em;
}
.pillar.exploring-discovering .pillar-entry:hover,
.pillar.science-exploration .pillar-entry:hover {
  background-color: #960136;
} 

.pillar.exploring-discovering .pillar-entry .arrow,
.pillar.science-exploration .pillar-entry .arrow {
  background-color: #960136;
  color: #F1666A;
}
.pillar.exploring-discovering .pillar-entry:hover .arrow,
.pillar.science-exploration .pillar-entry:hover .arrow {
  background-color: #CF1D39;
}


/* Monitoring & Safeguarding */

.pillar.monitoring-safeguarding,
.pillar.space-safety-security {
  background-color: #6DCFF6;
}

.pillar.monitoring-safeguarding .pillar-heading,
.pillar.space-safety-security .pillar-heading {
  color: #1E3378;
}

.pillar.monitoring-safeguarding .pillar-entry,
.pillar.space-safety-security .pillar-entry {
  height: 6em;
  background-color: #009BDB;
  margin-bottom: 1em;
}
.pillar.monitoring-safeguarding .pillar-entry:hover,
.pillar.space-safety-security .pillar-entry:hover {
  background-color: #1E3378;
} 

.pillar.monitoring-safeguarding .pillar-entry .arrow,
.pillar.space-safety-security .pillar-entry .arrow {
  background-color: #1E3378;
  color: #6DCFF6;
}
.pillar.monitoring-safeguarding .pillar-entry:hover .arrow,
.pillar.space-safety-security .pillar-entry:hover .arrow {
  background-color: #00619E;
}


/* Connecting & Benefiting */

.pillar.connecting-benefiting,
.pillar.applications {
  background-color: #76C8AE;
}

.pillar.connecting-benefiting .pillar-heading,
.pillar.applications .pillar-heading {
  color: #006762;
}

.pillar.connecting-benefiting .pillar-entry,
.pillar.applications .pillar-entry {
  height: 6em;
  background-color: #00AE9D;
  margin-bottom: 1em;
}
.pillar.connecting-benefiting .pillar-entry:hover,
.pillar.applications .pillar-entry:hover {
  background-color: #006762;
} 

.pillar.connecting-benefiting .pillar-entry .arrow,
.pillar.applications .pillar-entry .arrow {
  background-color: #006762;
  color: #76C8AE;
}
.pillar.connecting-benefiting .pillar-entry:hover .arrow,
.pillar.applications .pillar-entry:hover .arrow {
  background-color: #008E7A;
}


/* Designing & Operating */

.pillar.designing-operating,
.pillar.enablers-support {
  background-color: #FFCC4E;
}

.pillar.designing-operating .pillar-heading,
.pillar.enablers-support .pillar-heading {
  color: #A75534;
}

.pillar.designing-operating .pillar-entry,
.pillar.enablers-support .pillar-entry {
  height: 6em;
  background-color: #FBAB18;
  margin-bottom: 1em;
}
.pillar.designing-operating .pillar-entry:hover,
.pillar.enablers-support .pillar-entry:hover {
  background-color: #A75534;
} 

.pillar.designing-operating .pillar-entry .arrow,
.pillar.enablers-support .pillar-entry .arrow {
  background-color: #A75534;
  color: #FFCC4E;
}
.pillar.designing-operating .pillar-entry:hover .arrow,
.pillar.enablers-support .pillar-entry:hover .arrow {
  background-color: #F47920;
}





/*
** INTRO
*/


.boxed-text {
  background: #335E6F;
  padding: 2em;
  margin-top: 5em;
}

@media (min-width: 768px) {

.boxed-text {
  margin-left: -2em;
  margin-right: -20vw;
}

}

.boxed-text p {
  margin-bottom: 0;
}





/*
** STATS
*/


section.alternative {
  background-color: #0F2733;
}

.entry {
  margin: 10em auto;
}
.entry:first-child {
  margin-top: 5em;
}
.entry:last-child {
  margin-bottom: 0;
}

@media (min-width: 1400px) {

  .entry {
    width: 50%;
  }

}

#stats figure {
  margin-top: 5em;
}

@media (min-width: 768px) {

  #stats figure {
    margin-top: 3.5em;
  }

}

#stats .stats-pie figure {
  text-align: center;
}

.stats-pie img {
  width: 100%;
}

.caption {
  font-size: 1.25em;
  color: #8197A6;
  margin: 2em 0 0;
}

.question {
  padding-left: 2em;
  text-align: left;
}

.question .heading{
  z-index: 1
}
.question .heading::before {
  display: block;
  content: "";
  width: 70px;
  height: 70px;
  background: url('../img/quote.svg') scroll no-repeat center transparent;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.question p {
  color: #8197A6;
}

.question ul {
  padding: 1.5em 0 0 1em;
}

.question li {
  position: relative;
  font-size: 0.85em;
  list-style-type: disc;
  padding-left: 0.5em;
}





/*
** PARTICIPANTS
*/

@media (min-width: 768px) {

  #participants .row.two .col:first-child {
    padding-right: 5em;
  }

}

@media (min-width: 1400px) {

  #participants .row.two .col:first-child {
    width: 35%;
  }

  #participants .row.two .col:last-child {
    width: 65%;
  }
}

.countries {
  margin-top: -2em;
}

.country {
  width: 50%;
  padding: 2em 0;
  border-bottom: 2px solid #003247;
}
.country:last-child {
  border-color: transparent;
}
.country:nth-last-child(2) {
  border-color: transparent;
}

@media (min-width: 1025px) {

  .country {
    width: 33.33333%;
  }
  .country:nth-last-child(2) {
    border-color: #003247;
  }

}

@media (min-width: 1400px) {

  .country {
    width: 25%;
  }
  .country:nth-last-child(2) {
    border-color: transparent;
  }

}

.country img {
  width: 3.6rem;
  height: 3.6rem;
}

.country label {
  margin-left: 1em;
  line-height: 1.25em;
}





/*
** MAP
*/

#map .boxed-text {
  padding: 4em;
  margin: 0;
  background-color: #8197A6;
}

#map .heading {
  margin-top: 0;
}

.map {
  margin-top: 3em;
}

@media (min-width: 768px) {

  .map {
    margin-top: -3em;
  }

}





/*
** FOOTER
*/

footer {
  background-color: #003247;
  padding: 5em 0 10em;
}

footer .heading {
  text-transform: uppercase;
}

footer .brand {
  margin-top: 3em;
  height: 50px;
}

footer a:hover {
  text-decoration: underline;
}

.lang-item img {
  vertical-align: middle;
  height: 2rem;
  margin-right: 0.3em;
  margin-bottom: 0.15em;
}

.hashtag {
  height: 28px;
  margin-top: 3em;
  margin-bottom: 8em;
}

.credits {
  font-size: 0.8em;
  color: #8197A6;
  margin-top: auto;
}

@media (min-width: 768px) {

  footer .col:last-child {
    align-items: flex-end;
  }

}





/*
** SINGLE
*/

article {
  padding-bottom: 15vh;
}

.single .content {
  max-width: 1000px;
}

.single .content p {
  font-size: 1.2em;
}

.single article .heading {
  margin-top: 0;
}

@media (min-width: 1400px) {
  
  .single article .heading {
    font-size: 8em;
  }

}

.programme-hero {
  padding: 10em 0 5em;
  position: relative;
  display: flex;
}

@media (min-width: 1400px) {
  .programme-hero {
    padding: 10em 0;
  }
}

.programme-hero .container {
  z-index: 1;
}

.pillars-exploring-discovering .programme-hero,
.pillars-science-exploration .programme-hero {
  background-color: #CF1D39;
}

.pillars-monitoring-safeguarding .programme-hero,
.pillars-space-safety-security .programme-hero {
  background-color: #00619E;
}

.pillars-connecting-benefiting .programme-hero,
.pillars-applications .programme-hero {
  background-color: #008E7A;
}

.pillars-designing-operating .programme-hero,
.pillars-enablers-support .programme-hero {
  background-color: #F47920;
}

.programme-hero .heading {
  margin: 0;
}

@media (max-width: 767px) {
  .alignleft,
  .alignright,
  .aligncenter,
  .alignnone {
    float: none !important;
    display: block;
  }
}

article img {
  margin: 3em 0;
}

@media (min-width: 768px) {
  article img {
    margin: 0 1.5em 0 0;
  }
}

.wp-caption-text {
  color: #8197A6;
}

article iframe,
article embed,
article object {
  max-height: 15em;
}

@media (min-width: 768px) {

  article iframe,
  article embed,
  article object {
    max-height: 30em;
  }

}






/*
** MISC
*/


#cookie-notice {
  margin: 10px auto;
  width: 95%;
  min-width: 95%;
  max-width: 95%;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.8) !important;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.5);
  color: #fff !important;
}

#swipebox-slider {
    height: calc(100% - 100px);
    top: 50px;
}

.menu {
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow: -moz-scrollbars-none;
}
.menu::-webkit-scrollbar { 
  display: none;
}



/*
** COVER BUTTONS
*/

.hero__buttons {
  display: flex;
  flex-direction: column;
  margin-top: 48px;
  align-items: center;
  justify-content: center;
}

.hero__button {
  margin-top: 16px;
}
.hero__button:first-child {
  margin-top: 0;
}

.hero__button--primary {
  background-color: #8197A6;
  border-color: #8197A6;
  color: #FFF;
}

.hero__button--secondary {
  background-color: #335E6F;
  border-color: #335E6F;
  color: #FFF;
}

.hero__button--primary:hover,
.hero__button--secondary:hover {
  background-color: #FFF;
  border-color: #FFF;
  color: #003247;
}

@media (min-width: 768px) {

  .hero__buttons {
    flex-direction: row;
  }

  .hero__button {
    margin-top: 0;
    margin-left: 16px;
  }
  .hero__button:first-child {
    margin-left: 0;
  }

}