@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/Nunito/Nunito-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/Nunito/Nunito-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/Nunito/Nunito-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/Nunito/Nunito-ExtraBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/Roboto/Roboto-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}


/*** Sidebar ***/

.extend-Description {
  display: inline-block;
  font-size: 1.2em;
  margin-left: 0.5em;
  opacity: 1;
}


.sidebar-icon {
  margin-top: -0.3em;
  width: 1.8em;
  height: 1.8em;
}

.sidebar-logo {
  width: 2.4em;
  height: 2.4em;
  margin-left: -0.2em;
  margin-bottom: 0.1em;
}

.navbar-bottom-logo {
  width: 1.8em;
  height: 1.8em;
}

.fixed-bottom {
  display: none;
}

.nav-link {
  padding-left: 0.3em !important;
}

.sidebar-menu-basics {
  border-top: none !important;
  border-bottom: none !important;
  border-left: 2px solid grey;
  font-size: 1em;
}

/*** Elements ***/

body,
html {
  height: 100%;
  /* background-color: #10455A;  */
  background-color: #121212;
  font-family: 'Nunito';
  color: white;
}

p,
.link-to-not-in-text {
  font-size: 1.4em;
}

p {
  margin-bottom: auto;
  opacity: 0.95;
}

th,
td {
  font-size: 1em;
}

h1 {
  font-size: 4em;
  font-family: 'Roboto';
  font-weight: 700;
}

.list li {
  padding-bottom: 1em;
}

.rounded-list li {
  padding-bottom: 1em;
}

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

.image {
  width: 100%;
  height: auto;
}

.image-normal {
  width: 100%;
  height: auto;
  border-radius: 0.5em;
}

.image-small {
  height: auto;
  border-radius: 0.5em;
  width: 75%;
  opacity: 0.8;
}

.image-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.5em;
  width: 100%;
  height: auto;
}

.image-35 {
  max-width: 35em;
}

.image-20 {
  max-width: 20em;
}

.image-10 {
  max-width: 10em;
}

.pointer {
  cursor: pointer;
}

.image-side {
  height: auto;
  border-radius: 0.5em;
  width: 100%;
  opacity: 0.8;
}

.horizontal-bar {
  height: 50px;
  border-radius: 0.5em;
}

.vertical-bar {
  height: 20em;
  width: 4em;
  border-radius: 0.5em;
  color: black;
  text-align: center;
  display: inline-block;
}


.icon-biodiversity {
  width: 6em;
  padding-top: 1em;
  height: auto;
}

.icon-health {
  width: 5.5em;
  padding-top: 1em;
  height: auto;
}

/***spacers***/

.spacer-1 {
  padding: 0.5em;
}

.spacer-2 {
  padding: 1em;
}

.spacer-4 {
  padding: 2em;
}

.spacer-6 {
  padding: 3em;
}

/*colors*/
.basics-color {
  /* color: #377b7a; */
  color: #e64414
}

.causes-color {
  /* color: #e98b32; */
  color: #e64414
}

.solutions-color {
  /* color: #249630; */
  color: #e64414
}

.indirect-color {
  /* color: #04c3f9; */
  color: #e64414
}

.basics-stripe {
  height: 1.8em;
  /* background: linear-gradient(60deg, #017f7f, #0acccb); */
  background: linear-gradient(60deg, #71240c, #e64414);
  margin-top: 0.5em;
}

.causes-stripe {
  height: 1.8em;
  /* background: linear-gradient(60deg, #c96100, #ffa754); */
  background: linear-gradient(60deg, #71240c, #e64414);
  margin-top: 0.5em;
}

.solutions-stripe {
  height: 1.8em;
  /* background: linear-gradient(60deg, #00690a, #45e655); */
  background: linear-gradient(60deg, #71240c, #e64414);
  margin-top: 0.5em;
}

.headline {
  display: inline-block;
  font-weight: 700;
  padding-left: 0.3em;
  padding-right: 0.3em;
  background: #121212;
  line-height: 50px;
  margin-left: 4em;
  margin-top: -10px;
}

.headline-container {
  padding-top: 5em;
}

.headline-2-basics {
  font-family: 'Roboto';
  font-weight: 700;
  font-size: 3.2em;
  /* color: #377b7a; */
  color: #e64414
    /*border-bottom: 0.1em solid #377b7a;*/
}

.headline-2-causes {
  font-family: 'Roboto';
  font-weight: 700;
  font-size: 3.2em;
  /* color: #e98b32; */
  color: #e64414;

  /*border-bottom: 0.1em solid #e98b32;*/
}

.headline-2-solutions {
  font-family: 'Roboto';
  font-weight: 700;
  font-size: 3.2em;
  /* color: #249630; */
  color: #e64414
    /*border-bottom: 0.1em solid #249630;*/
}

.headline-2-indirect {
  font-family: 'Roboto';
  font-weight: 700;
  font-size: 3.2em;
  /* color: #04c3f9; */
  color: #e64414
    /*border-bottom: 0.1em solid #04c3f9;*/
}

.headline-3 {
  font-family: 'Roboto';
  font-weight: 700;
  font-size: 2.5em;
  opacity: 0.97;
}

.headline-4 {
  font-family: 'Roboto';
  font-weight: 600;
  font-size: 2em;
  opacity: 0.97;
}

.tab {
  margin-left: 1em;
}

.doughnut-container {
  padding: 1em 2em 2em 2em;
  margin-right: 1em;
}

.only-mobile {
  display: none;
}

.image-with-headline-basics {
  width: 100%;
  height: auto;
  margin-bottom: 0.5em;
  margin-top: 0;
  border-radius: 0.5em;
  /* border-top: 4px solid #377b7a; */
  border-top: 4px solid #e64414;
}

.image-with-headline-causes {
  width: 100%;
  height: auto;
  margin-bottom: 0.5em;
  margin-top: 0;
  border-radius: 0.5em;
  /* border-top: 4px solid #e98b32; */
  border-top: 4px solid #e64414;
}

.image-with-headline-solutions {
  width: 100%;
  height: auto;
  margin-bottom: 0.5em;
  margin-top: 0;
  border-radius: 0.5em;
  /* border-top: 4px solid #249630; */
  border-top: 4px solid #e64414;
}

.image-with-headline-indirect {
  width: 100%;
  height: auto;
  margin-bottom: 0.5em;
  margin-top: 0;
  border-radius: 0.5em;
  /* border-top: 4px solid #04c3f9; */
  border-top: 4px solid #e64414;
}

.image-with-headline-timeline {
  border-top: 4px solid #e64414;
}

.headline-image {
  margin: 0 0.5em 0 0.5em;
}

.headline-image-center-35 {
  max-width: 35em;
  display: block;
  margin-left: auto;
  margin-right: auto
}

.headline-image-center-20 {
  max-width: 20em;
  display: block;
  margin-left: auto;
  margin-right: auto
}

.no-margin-top {
  margin-top: 0;
}

.no-padding-top {
  padding-top: 0;
}

.full-width-image {
  width: 100%;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}


/***explanation***/

.explanation {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted white;
}

.explanation .explanation-text {
  visibility: hidden;
  font-size: 0.8em;
  background-color: #055075;
  text-align: center;
  padding: 0.6em;
  border: 2px solid white;
  border-radius: 0.5em;
  color: white;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  width: 20em;
  top: 100%;
  left: 50%;
  margin-left: -10em;
  /* Use half of the width (120/2 = 60), to center the tooltip */
}

.explanation .explanation-text::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  /* At the top of the tooltip */
  left: 50%;
  margin-left: -8px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent white transparent;
}

.explanation:hover .explanation-text {
  visibility: visible;
}

@media screen and (max-width: 1200px) {

  .explanation:hover .explanation-text {
    visibility: hidden;
  }

  .explanation {
    border-bottom: none;
  }

}



#image1-political {
  height: 400px;
  background-image: url(images/sources/politicalSystem/opposite.webp);
}

#image2-political {
  height: 200px;
  background-image: url(images/sources/politicalSystem/social.webp);
}

#image-banks {
  height: 400px;
  background-image: url(images/sources/economy/banks.webp);
}

#image-traffic {
  height: 400px;
  background-image: url(images/sources/sources/traffic.webp);
}

#image-overviewRenewables {
  height: 400px;
  background-image: url(images/solutions/technology/solutionsOverviewRenewables.webp);
}

#image-weather {
  height: 400px;
  background-image: url(images/introduction/weather/weather.webp);
}

#image-ipcc {
  height: 300px;
  background-image: url(images/introduction/ipcc/report.webp);
}

#image-power {
  height: 400px;
  background-image: url(images/solutions/technology/power.webp);
}

#image-thunder {
  height: 400px;
  background-image: url(images/impacts/extremeWeather/thunder.webp);
}

#image-industry {
  height: 400px;
  background-image: url(images/introduction/globalWarming/industry.webp);
}





.gradient-yellow {
  background: linear-gradient(to top, #cbff78, #a4f720);
  -webkit-text-fill-color: transparent;
}

.gradient-green {
  background: linear-gradient(to top, #43e253, #11881d);
  -webkit-text-fill-color: transparent;
}

.gradient-orange {
  background: linear-gradient(to top, #ffa754, #c96100);
  -webkit-text-fill-color: transparent;
}


.background-gradient-green {
  background: linear-gradient(60deg, #00690a, #45e655);
}


.germany-border {
  border-left: 5px solid;
  border-image: linear-gradient(to bottom, grey 33%, #d13d3d 33%, #d13d3d 66%, #fad94b 66%, #fad94b) 5;
  padding-left: 1em;
}

.world-border {
  border-left: 5px solid #4cbbed;
  padding-left: 1em;
}



.headline-bold {
  font-weight: 600;
}

.padding-left-1em {
  padding-left: 1em;
}

.rounded-list {
  counter-reset: section;
  list-style: none;
}

.rounded-list li {
  display: flex;
  align-items: center;
  margin: 0 0 10px 0;
  line-height: 39px;
  font-size: 1.2em;
  font-weight: 600;
}

.rounded-list p {
  font-weight: 300;
  font-size: 1.2em;
  margin: 0;
  margin-top: -2px;
  display: inline-block;
}

.rounded-list li:before {
  content: counter(section);
  counter-increment: section;
  display: inline-block;
  min-width: 40px !important;
  height: 40px;
  margin: 0 20px 0 0;
  border: 2px solid #158fdb;
  border-radius: 100%;
  text-align: center;
}

.list-solutions li:before {
  border: 2px solid #249630;
}

.list-causes li:before {
  border: 2px solid #e64414;
}

.list-basics li:before {
  /* border: 2px solid #377b7a; */
  border: 2px solid #e64414;
}

.footnotes {
  padding: 1em;
  margin-top: 3em;
  background-color: #1F1F1F;
  border-radius: 0.5em;
  font-family: 'Lato'
}

.footnotes p {
  font-size: 1em;
}

.link-to {
  color: #FCD000;
  font-size: inherit;
  text-decoration: none;
}

.link-to:hover {
  color: #FF8000 !important;
  text-decoration: none !important;
}

.next-article-container {
  text-align: right;
  margin: 3em 1em 2em 1em;
}

.next-article {
  font-family: 'Roboto';
  color: #e64414;
  text-decoration: none;
  line-height: 5em;
  font-size: 2em;
}

.next-article:hover {
  color: #9e2f0e !important;
  text-decoration: none !important;
}

.next-icon {
  height: 2em;
  display: inline-block;
  margin: 0.5em;
}

.next-icon:hover {
  opacity: 0.8;
}

.linkStyle {
  text-decoration: none;
  color: #FCD000;
}

.linkStyle:hover {
  color: #FF8000 !important;
  text-decoration: none !important;
}

.form-control {
  /*background-color:#123644;*/
  background-color: #1F1F1F;
  color: white;
  /*Überschreiben bootstrap*/
}

.form-control:hover,
.form-control:focus,
.form-control:active {
  border: 0.2em solid #377b7a;
  box-shadow: none;
  /*background-color:#123644;*/
  background-color: #1F1F1F;
  color: white;
  /*Überschreiben bootstrap*/
}


.list li {
  font-size: 1.4em;
  list-style: none;
}

.list li::before {
  content: "\2022";
  font-weight: bold;
  display: inline-block;
  width: 1.2em;
  margin-left: -0.9em;
}

.basic-color-list li::before {
  color: #377b7a;
}

.note {
  font-size: 1em !important;
}

.comparsion-table {
  font-size: 1.2em;
  text-align: center;
}

/*** slider show ***/

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
  background-color: #1f1f1f;
  border-radius: 1em;
  padding: 4em;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}


/*** quotes ***/


.text-container {
  max-width: 750px;
  /* Can be in percentage also. */
  height: auto;
  margin: 0 auto;
  position: relative;
}

.sidekick {
  margin-left: 2em;
  position: relative;
  padding-left: 1em;
  font-family: 'Roboto', serif;
  line-height: 2em;
  font-size: 1.3em;
  font-weight: 100;
  padding-right: 2em;
}

.sidekick-basics {
  border-left: 0.2em solid #377b7a;
}

.sidekick-causes {
  /* border-left: 0.2em solid #e98b32; */
  border-left: 0.2em solid #e64414;
}

.sidekick-basics:before,
.sidekick-basics:after {
  font-family: Calibri;
  color: #377b7a;
  font-size: 34px;
}

.sidekick-causes:before,
.sidekick-causes:after {
  font-family: Calibri;
  /* color: #e98b32; */
  color: #e64414;
  font-size: 34px;
}

.sidekick:before {
  content: '\201e'
}

.sidekick:after {
  content: '\201c';
}

.sidekick cite:before {
  content: ' \2015 '
}

/*** table ***/

.table-headline {
  margin-bottom: 0;
  line-height: 1em;
}

.table-headline p {
  text-align: right;
  margin-right: 1em;
  margin-bottom: 0.3em;
}

.table-headline-img-causes {
  /* border-bottom: 2px solid #e98b32; */
  border-bottom: 2px solid #e64414;
}

.table-headline-img-solutions {
  /* border-bottom: 4px solid #249630; */
  border-bottom: 4px solid #e64414;
  margin-bottom: -0.1em
}

.table {
  margin-top: 0 !important;
  border-radius: 0.5em;
  overflow: hidden;

}

.table-dividing-line th {
  border-top: none !important;
}

.table-dark th {
  border-color: #a5a5a5;
}

.table-dark td {
  border-color: #a5a5a5;
}

.table-dividing-line {
  border-bottom: 3px solid #a5a5a5;
  font-family: 'Roboto';
}

.table-basics-color-top {
  background: #1f1f1f;
}

.table-body-basics-color {
  background: linear-gradient(60deg, #292929, #383838);
}

.table-causes-color-top {
  /* background: #662000; */
  background: #1f1f1f;
}

.table-indirect-color-top {
  /* background: #001a24; */
  background: #1f1f1f;
}

.table-solutions-color-top {
  /* background: #001a02; */
  background: #1f1f1f;
}

.table-body-causes-color {
  /* background: linear-gradient(60deg, #212121, #2e2e2e); */
  background: linear-gradient(60deg, #292929, #383838);
}

.table-body-indirect-color {
  /* background: linear-gradient(60deg, #001e29, #032938); */
  background: linear-gradient(60deg, #292929, #383838);
}

.table-body-solutions-color {
  /* background: linear-gradient(60deg, #002603, #002e04); */
  background: linear-gradient(60deg, #292929, #383838);
}

/*** Subsidies ***/

.renewable-subsidies-circle {
  display: inline-block;
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*** Status Bar Circle ***/

.statusBar-circle {
  height: 200px;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

.progress-bar-bg {
  fill: #4d4d4d;
}

.progress-label {
  /*fill: #aaa;*/
  font-size: 40px;
  font-weight: bold;
  text-anchor: middle;
}

/*** Timeline ***/
/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  width: 1100px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 0;
}

.timeline-content-normal {
  border: 6px solid #377b7a;
  width: 950px;
  margin: 0 auto;
  padding: 2em;
  border-radius: 1em;
}

.timeline-content-worse {
  border: 6px solid #e98b32;
  width: 950px;
  margin: 0 auto;
  padding: 2em;
  border-radius: 1em;
}

.timeline-content-better {
  border: 6px solid #249630;
  width: 950px;
  margin: 0 auto;
  padding: 2em;
  border-radius: 1em;
}

.timeline-headline {
  font-family: 'Roboto';
  font-weight: 700;
  font-size: 2.2em;
  cursor: pointer;
}

.timeline-text {
  display: none;
}

.better::after {
  border: 5px solid #249630 !important;
}

.worse::after {
  border: 5px solid #e98b32 !important;
}

.normal::after {
  border: 5px solid #377b7a !important;
}

/* Container around content */
.timeline-container {
  position: relative;
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  padding-bottom: 3em;
  border-radius: 1em;
}

/* The circles on the timeline */
.timeline-container::after {
  content: '';
  position: absolute;
  width: 2em;
  height: 2em;
  right: -13px;
  background-color: white;
  border: 4px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

.timeline-container::after:first-of-type {
  background-color: blue !important;
}

/* Place the container to the left */
.timeline-left {
  left: 0;
}

/* Place the container to the right */


/* Fix the circle for containers on the right side */
.timeline-right::after {
  left: -88px;
}

/* The actual content */
.timelin-content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}

.timeline-icon {
  width: 5em;
  height: auto;
  position: absolute;
  margin-left: -6.5em;
  margin-top: 4em;
  z-index: 1;
  display: none;
}

.timeline-unfold {
  width: 2.5em;
  height: 2.5em;
  margin-left: 1em;
}

.timeline-introduction {
  border: 5px solid #377b7a;
  padding: 3em;
  border-radius: 1em;
}

.timeline-toggler {
  cursor: pointer;
}

#hide-show-button {
  background-color: #C53B11;
  border-radius: 0.5em;
  cursor: pointer;
  width: 6em;
  height: auto;
  float: right;
  margin-right: 2em;
  margin-top: 2em;
  position: sticky;
  top: 2em;
}


/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {


  /* Full-width containers */
  .timeline-container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }


  /* Make sure all circles are at the same spot */
  .timeline-left::after,
  .right::after {
    left: 15px;
  }

  /* Make all right containers behave like the left ones */
  .timeline-right {
    left: 0%;
  }

  .timeline-container::after {
    display: none;
  }

  .timeline::after {
    display: none;
  }

  .timeline-content-better {
    margin-left: 0;
    padding: 1em;
    width: 100%;
  }

  .timeline-content-worse {
    margin-left: 0;
    padding: 1em;
    width: 100%;
  }

  .timeline-content-normal {
    margin-left: 0;
    padding: 1em;
    width: 100%;
  }

  .timeline {
    width: 100%;
  }
}

/***********





***********/

@media screen and (max-width: 1500px) {

  #hide-show-button {
    display: none;
  }
}


@media screen and (max-width: 800px) {

  .timeline-container {
    padding: 0.8em;
  }

}

/*** Modifier ***/

.margin-text-2em {
  margin: 0 2em;
}

.flex {
  display: flex;
  flex-direction: row;
  margin-left: -0.5em;
  margin-right: -0.5em;
}

.flex-column {
  padding: 0.5em;
  flex: 1;
}

.flex-column-oneHalf {
  padding: 0.5em;
  flex: 1.5;
}

.flex-column-double {
  padding: 0.5em;
  flex: 2;
}

.flex-column-triple {
  padding: 0.5em;
  flex: 3;
}

.flex-column-5 {
  padding: 0.5em;
  flex: 5;
}

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

.inlineBlockContainer {
  display: inline-block;
  width: 100%;
}

.border-radius-05 {
  border-radius: 0.5em;
}

.margin-top-05em {
  margin-top: 0.5em;
}

.margin-top-1em {
  margin-top: 1em;
}

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

.margin-top-35em {
  margin-top: 3.5em;
}

.margin-top-4em {
  margin-top: 4em;
}

.margin-top--4em {
  margin-top: -4em;
}

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

.margin-bottom-2em {
  margin-bottom: 2em;
}

.margin-auto {
  margin: auto;
}

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

.underline {
  text-decoration: underline;
  font-size: 1.6em;
}

.line-height-low {
  line-height: 80%;
}

.no-top-border {
  border-top: none !important;
}

.mobile {
  display: none;
}

.min-width-8em {
  min-width: 8em;
}

.min-width-10em {
  min-width: 10em;
}

.border-top-grey {
  border-top: 2px solid grey;
}

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

.info {
  max-width: 950px;
  margin: 0 auto;
  padding-bottom: 3em;
  background: rgb(21, 108, 150);
  background: linear-gradient(135deg, rgba(5, 92, 91, 1) 0%, rgba(2, 48, 48, 1) 100%);
  /* background: linear-gradient(135deg, #025134, #023623); */
  /*background: linear-gradient(135deg, rgba(21, 108, 150, 1) 0%, rgba(4, 69, 101, 1) 100%);*/
  border-radius: 1em;
}

.padding-infoText {
  padding: 0 4em;
}

/*** Card ***/

.card p {
  color: #ededed;
}

.card {
  border-radius: 5px;
  box-shadow: 0px 30px 40px -20px #333333;
  padding: 30px;
  margin: 20px;
  background-color: #333333;
}

.card:hover {
  transform: scale(1.05, 1.05);
  box-shadow: 4px 4px 20px 10px #9effe6,
    -4px -4px 20px 10px #d9b8ff;
}

/*
background: linear-gradient(270deg, #0fffc1, #7e0fff);
*/

.card-image {
  text-align: right;
  width: 6em;
  height: 6em;
  float: right;
}

.info-image {
  text-align: right;
  width: 5em;
  height: auto;
  padding-left: 1em;
  display: inline-block;
}

.info-headline {
  font-family: 'Roboto';
  font-weight: 700;
  font-size: 2em;

}

.card-cyan {
  border-top: 3px solid hsl(180, 62%, 55%);
}

.card-red {
  border-top: 3px solid hsl(0, 78%, 62%);
}

.card-blue {
  border-top: 3px solid hsl(212, 86%, 64%);
}

.card-orange {
  border-top: 3px solid hsl(34, 97%, 64%);
}

.card-lila {
  border-top: 3px solid #c50d66;
}

.card-green {
  border-top: 3px solid #53dd48;
}

.card-darkblue {
  border-top: 3px solid #5a4ae7;
}

.card-header {
  color: #f7f7f7;
  font-weight: 600;
  display: inline-block;
  font-size: 3em !important;
}

@media (max-width: 450px) {
  .card-header {
    font-size: 1.6em !important;
  }

  .card {
    padding: 0.5em;
    margin: 0;
  }

  .card-image {
    width: 4em;
    height: 4em;
    margin-top: 1em;
  }
}



/*** hierarchy ***/

/* RESET STYLES & HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.hierarchy-container {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-align: center;
}

.hierarchy-container ol {
  list-style: none;
}

.hierarchy-rectangle {
  position: relative;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  color: #fff;
  text-align: center;
}


/* LEVEL-1 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-1 {
  width: 50%;
  margin: 0 auto 40px;
  border: 5px solid #10B981;
  border-radius: 0.5em;
  font-size: 2em;
  font-weight: 600;
}

.level-1::before {
  content: "";
  position: absolute;
  top: 105%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 2px;
  height: 25px;
  background: white;
}


/* LEVEL-2 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-2-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /*Einstellung wieviel Spalten*/
  grid-column-gap: 20px;
  padding-left: 0;
}

/*Strich*/
.level-2-wrapper::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 11.8%;
  width: 76.4%;
  height: 2px;
  background: white;
}

.level-2-wrapper::after {
  display: none;
  content: "";
  position: absolute;
  left: -20px;
  bottom: -20px;
  width: 100%;
  height: 2px;
  background: white;

}

.level-2-wrapper li {
  position: relative;
}

.level-2-wrapper>li::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
  background: white;
}

.level-2 {
  width: 70%;
  margin: 0 auto 20px;
  border: 5px solid #F59E0B;
  border-radius: 0.5em;
  font-size: 1.6em;
  font-weight: 600;
}




/* LEVEL-3 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-3-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-column-gap: 20px;
  width: 90%;
  padding-left: 0;
  margin: auto;

}



.level-3-wrapper>li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
  width: 2px;
  height: 20px;
  background: white;
}

.level-3 {
  margin: 0 auto 20px;
  border: 5px solid #3B82F6;
  border-radius: 0.5em;
}


/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 700px) {
  .rectangle {
    padding: 20px 10px;
  }

  .level-1,
  .level-2 {
    width: 100%;
  }

  .level-1 {
    margin-bottom: 20px;
  }

  .level-1::before {
    display: none;
  }

  .level-2-wrapper,
  .level-2-wrapper::after,
  .level-2::after {
    display: block;
  }

  .level-2-wrapper {
    width: 90%;
    margin-left: 10%;
  }

  .level-2-wrapper::before {
    left: -20px;
    width: 5px;
    height: 100%;
    background: #10B981;
  }

  .level-2-wrapper>li::before {
    top: 35px;
    left: -10px;
    width: 20px;
    height: 5px;
    background: #10B981;
  }

  .level-2-wrapper>li:not(:first-child) {
    margin-top: 50px;
  }
}




/*** 3D-Bar ***/

.chart-3D {
  display: flex;
  overflow: hidden;
  flex-direction: column;
}

.bar-3D {
  font-size: 3em;
  position: relative;
  width: 5em;
  padding: 1em;
  transition: transform 2s linear;
  transform: rotateX(-30deg) rotateY(-135deg);
  transform-style: preserve-3d;
  height: 12em;
}

.bar-3D.green .face.floor {
  background-color: rgba(194, 157, 11, 0.2);
}

.bar-3D.green .face>.growing-bar-3D {
  background-color: #21cc23;
}

.bar-3D .face {
  position: relative;
  bottom: 0;
  width: 2em;
  height: 2em;
  background-position: center center;
}

.bar-3D .side-0,
.bar-3D .side-1 {
  overflow: hidden;
  height: 10em;
}

.bar-3D .side-0 {
  transform: rotateY(90deg) translateZ(1em);
  background-color: rgba(204, 24, 24, 0.8);
}

.bar-3D .side-1 {
  transform: rotateY(180deg) translateY(-10em) translateZ(1em);
  background-color: rgba(161, 0, 0, 0.8);
}

.bar-3D .top {
  transform: rotateX(90deg) translateZ(21em);
  text-align: center;
  background-color: rgba(255, 92, 92, 0.8);
}

.bar-3D .floor {
  transform: rotateX(-90deg) translateY(0em) translateZ(-13em) rotate(180deg);
  text-align: center;
  background-color: transparent;
  box-shadow: 0 0 0.6em rgba(0, 0, 0, 0.3), 0.6em -1em 3em rgba(0, 0, 0, 0.3), 1em 1em 10em rgba(254, 254, 254, 0.8);
}

.bar-3D .growing-bar-3D {
  display: inline-block;
  width: 100%;
  height: 100%;
  transition: all .3s ease-in-out;
  transform: translateY(100%);
  opacity: 0;
}

.text {
  font-size: .6em;
  font-weight: 700;
  display: inline-block;
  box-sizing: content-box;
  padding: 0em .8em .8em .4em;
  text-align: center;
  opacity: 1;
  color: black;
}


.bar-3D .growing-bar-3D:before {
  font-family: 'Open Sans', sans-serif;
  font-size: .6em;
  font-weight: 700;
  display: inline-block;
  box-sizing: content-box;
  padding: .4em .8em .8em.8em;
  text-align: center;
  opacity: 1;
  color: black;
  /*border-top: 2px solid #0a4069;*/
}

.chart-3D .bar-3D-60 .face.side-0 .growing-bar-3D,
.chart-3D .bar-3D-60 .face.side-1 .growing-bar-3D {
  transform: translateY(58%);
  opacity: .8;
}

.chart-3D .bar-3D-60 .face.side-0 .growing-bar-3D:before,
.chart-3D .bar-3D-60 .face.side-1 .growing-bar-3D:before {
  content: "1265";
}



/*** Modal ***/

/* Style the Image Used to Trigger the Modal */
#myImg,
#myImg2,
#myImg3 {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {
  opacity: 0.7;
}

#myImg2:hover {
  opacity: 0.7;
}

#myImg3:hover {
  opacity: 0.7;
}

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 6;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  border-radius: 1em;
  width: 90%;
  max-width: 90%;
}

.modal-content-70 {
  margin: auto;
  display: block;
  border-radius: 1em;
  width: 70%;
  max-width: 70%;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content,
#caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: 600;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}

/*** styling vertical bar chart ***/

.vertical-bar-chart-outer-container {
  /* color: black; */
  text-align: center;
  /* font-family: 'Open Sans', sans-serif; */
}

.vertical-bar-chart-container {
  width: 800px;
  height: 500px;
  margin: auto;
  /* background-color: #fbf9ec;
  border-radius: 1em; */
}

.vertical-bar-chart text {
  fill: #F1F1F1;
}

.vertical-bar-chart .value {
  fill: black;
}

.vertical-bar-chart .tick {
  font-size: 16px;
}



/*** styling bar chart ***/


.grid path {
  stroke-width: 0;
}

.source-bar-chart {
  /* fill: #15347a !important; */
  fill: #a78b06 !important;
}

.source-bar-chart:hover {
  /* fill: #213051 !important; */
  fill: #FF8000 !important;
  opacity: 0.8;
}

/*** Home ***/

#headline-home {
  font-family: Roboto;
  margin-top: 50%;
  line-height: 1.4em;
  font-size: 5em;
  font-weight: 700;
}

#headline-2-home {
  margin-top: -0.5em;
  font-size: 2.8em;
}

#home-description {
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 2em;
  color: #d2d2d2
}

.home-icon {
  width: 3em;
  padding-top: 3em;
  opacity: 0.7;
}

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

.FAQ-answer {
  display: none;
  padding: 25px;
  font-size: 25px;
  box-sizing: border-box;
}

.FAQ-container {
  border-top: 4px solid #76230a;
  /* background-color: #76230a; */
}

.border-bottom-red {
  border-bottom: 4px solid #76230a !important;
}

.FAQ-question {
  display: flex;
  height: 6em;
  margin: auto;
  align-items: center;
  justify-content: space-between;
}

.FAQ-headline {
  font-size: 1.8em !important;
  font-family: 'Roboto';
  margin-bottom: 0
}

.FAQ-list li {
  font-size: 1em;
}

.FAQ-answer p {
  font-size: 1em;
}

.FAQ-toggler {
  content: url(icons/home/plus.png);
  width: 2.3em;
  height: auto;
  cursor: pointer;
}

.FAQ-toggler-cross {
  content: url(icons/home/cross.png);
  width: 2.1em;
  height: auto;
  cursor: pointer;
}

.home-description {
  padding: 1em 2em;
  font-size: 2em;
  text-align: left;
}


/*** global Warming ***/

.color-change {
  background-color: #1f1f1f;
  padding: 3em 0.5em;
  border-left: 8em solid #121212
}

.expand-icon {
  content: url(icons/expand.webp);
  width: 3em;
  margin-left: 0.5em;
  height: auto;
  cursor: pointer;
}

.shrink-icon:hover,
.expand-icon:hover {
  opacity: 0.9;
}

.shrink-icon {
  content: url(icons/shrink.webp);
  width: 3em;
  margin-left: 0.5em;
  height: auto;
  cursor: pointer;
}

/*** Quellen ***/

.source-outer-container {
  text-align: right;
}

.source-container {
  margin-top: 1em;
  margin-bottom: 0.5em;
  display: inline-block;
  text-align: left;
  opacity: 0.8;
  line-height: 1.2;
}

.source-container a {
  color: #fcd000;
  opacity: 0.8;
  text-decoration: none;
}

.source-container a:hover,
.link-to-not-in-text:hover {
  color: #FF8000 !important;
  text-decoration: none !important;
}

/*
.source-container > :nth-child(2){
  border-top: 1px solid #F1F1F1;
}
*/

.link-to-not-in-text {
  color: #FCD000;
  text-decoration: none;
}


.source-text {
  margin-bottom: 0;
  color: #bfbfbf;
  font-size: 1em !important;
}

/*** Einzeln ***/

.Home__picture {
  background: url(images/home_LNSO_warm.webp) no-repeat center center;
  background-size: cover;
  height: 100%;
}

.About__picture {
  background: url(images/earth-darkmode.webp) no-repeat center center;
  background-size: cover;
  height: 100%;
}

.CO2__picture {
  background: url(images/404.webp) center center;
  height: 100%;
  background-size: cover;
}

.Auswahl__logo {
  padding-right: 30px;
  height: 3em;
  width: auto;
}

/*** Navbar ***/

.navbar {
  border-bottom: 0.1em solid #F1F1F1;
  font-size: 1.5em;
  font-weight: 400;
}

.nav-link {
  color: #F1F1F1;
}

.nav-item {
  padding-right: 0.5em;
  padding-bottom: 1em;
}

.nav-item :hover {
  color: #cccccc;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(241,241,241)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}




/* Page content */
.content {
  padding: 16px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky+.content {
  padding-top: 60px;
}


/*** sidebar ***/

.sidebar {
  top: 0;
  width: 4em;
  padding-top: 1em;
  position: fixed;
  height: 100%;
  z-index: 3;
  overflow: auto;
  /*background-color: #123644;*/
  background-color: #1F1F1F;
  overflow: hidden;
}

.sidebar a {
  padding: 0.5em 0.5em 0.5em 1.2em;
  position: relative;
  text-decoration: none;
  font-size: 1.2em;
  color: #F1F1F1;
  display: block;
}

.sidebar a:hover {
  color: #cccccc;
}

.sidebar img {
  padding-left: 0;
  opacity: 0.8;
}

.sidebar-container {
  margin-left: 10em;
}

.iconSidebar-container {
  margin-left: 4em;
}

.sidebar-menu-basics {
  /*background-color: #153f4f;*/
  /*background-color: #262626;*/
  background-color: #1f1f1f;
  width: 10em;
  border-top: 0.1em solid #F1F1F1;
  border-bottom: 0.1em solid #F1F1F1;
  left: -0.25em !important;
}

.sidebar-menu-basics a {
  padding-left: 1.5em;
}

.dropdown-item-basic:hover {
  color: #cccccc;
  background-color: transparent;
}

a.anchor {
  display: block;
  position: relative;
  top: -110px;
  visibility: hidden;
}

/*** Scroll Indicator***/

/* Style the header: fixed position (always stay at the top) */
.scroll-header {
  margin-left: 4em;
  margin-top: 6em;
  top: 0;
  width: 100%;
}

/* The progress container (grey background) */
.progress-container {
  width: 100%;
  height: 8px;
  z-index: 100;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 10px;
  background-color: #04AA6D;
  width: 0%;
}

/*** Startseite ***/

#subheading-home {
  font-size: 1.5em;
  color: #C53B11;
  display: inline;
  padding: 0.2em;
  border-style: outset;
}

.feature {
  border-top: 0.1em solid #F1F1F1;
  text-align: center;
  /*background-color:#123644;*/
  background-color: #121212;
  font-size: 1em;
  z-index: 5;
  position: relative;
}

.feature__flexbox {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.feature__box a {
  text-decoration: none;
  color: white;
}

.feature__box a:hover {
  color: #cccccc;
}

.feature__box {
  padding: 1em;
}

.footer {
  border-top: 0.1em solid #F1F1F1;
  /*background-color:#123644;*/
  background-color: #121212;
  padding: 1em;
  text-align: center;
  z-index: 5;
  position: relative;
}

.footer p {
  text-align: center;
  font-size: 1em;
  padding-top: 0.5em;
  color: white;
}

/*** Kontakt ***/

.alert-success {
  margin-top: 2em;
}

.contact-form input {
  width: 100% !important;
}

.form-control-name {
  width: 30% !important;
}

.form-control-email {
  width: 30% !important;
}

.form-control-message {
  width: 100% !important;
}

.form-control-message textarea {
  height: 10em !important;
}

.contact-form label {
  font-size: 1.2em;
}

.ohnohoney {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  z-index: -1;
}


/*** Links ***/

.search-icon {
  display: inline-block;
  position: relative;
  width: 2.2em;
  height: auto;
  top: 2.9em;
  left: 1em;
  margin-right: 0.5em;
}

.link-search {
  display: inline-block;
  width: 100% !important;
  height: 3em;
  padding-left: 3.5em;
  font-size: 1.2em;
  font-weight: 600;
}

.svg-flag {
  width: 50%;
  height: auto;
  display: block;
  margin: auto;
}

.svg-flag-container {
  width: 10%;
}

/*** warming Stripes ***/


.slider {
  -webkit-appearance: none;
  width: 80%;
  height: 10px;
  border-radius: 5px;
  background: lightgray;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
  margin-bottom: 1em;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  /* background: #377b7a; */
  background: #e64414;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border-width: 3px;
  /* border-color: #377b7a; */
  border-color: #e64414;
  /* background: #377b7a; */
  background: #e64414;
  cursor: pointer;
}


.slidecontainer {
  color: #F1F1F1;
  position: relative;
  padding: 4em 1.5em 1.5em 1.5em;
  width: 60%;
  margin: auto;

}

.slidecontainer:first-child,
.slidecontainer:nth-child(2) {
  border-bottom: 1px solid #aaaaaa;
}

.ws-slider {
  text-align: center;
  color: white;
  margin-top: 3em;
}

.ws-slider p {
  font-size: 1.5em;
  display: inline-block;
}

.ws-slider h2 {
  text-decoration: underline;
  padding-bottom: 2em;
}

.warmingStripes {
  margin-top: 2em;
}

.xAxis-label {
  font-size: 1.1em;
}

.download-button {
  margin-top: 1.5em;
  border: 2px solid black;
  border-radius: 5px;
  background-color: #eee;
  color: #1c1c1c;
  font-size: 18px;
  padding: 8px 15px;
  text-decoration: none;
  display: inline-block;
  font-weight: 600;
  letter-spacing: 1px;
  margin-right: 1em;
}

#canvas {
  display: none;
}

#containerExtended {
  margin-left: auto - 12em;
  margin-right: auto;
  height: 100%;
}

#svg_Wrapper {
  margin-left: 2em;
  margin-right: 2em;
}

/*** basics page ***/

.container-basic {
  margin-top: 3em;
}

/*** Weather Climate ***/

.weatherAnimationWrapper svg {
  float: right;
  margin-bottom: 2em;
}

.avarageTempEarth {
  overflow-x: scroll;
}

.weatherForecast {
  text-align: center;
  padding-bottom: 1em;
}

.weatherBox {
  display: inline-block;
  padding: 0em 1em 0em 1em;
  ;
}

.weatherBox img {
  width: 8em;
  height: auto;
  margin-bottom: -1em;
}

.weatherAnimationButton {
  text-align: center;
  display: block;
  margin: 1.5em auto 1em auto;
}

#more {
  display: none;
}

.climateDiagram img {
  text-align: center;
  margin: auto;
  width: 100%;
}

.weatherDate {
  font-weight: 600;
  text-align: center;
}

.averageTempTextContainer {
  display: inline-block;
  width: 495px;
  margin-top: -5em;
}

.averageTempTextContainer p {
  font-weight: 600;
  font-size: 25px;
  text-align: center;
}

.weatherColumn {
  display: inline-block;
  width: 8.5em;
  padding: 1em;
  width: auto;
  vertical-align: top;
}

.weatherBox:not(:first-child) {
  border-left: 0.125em solid #F1F1F1;
}

.weatherColumn:not(:first-child) {
  border-left: 0.125em solid #F1F1F1;
}

#linkHideShow {
  color: #FCD000;
  font-size: 1.2em;
  padding-bottom: 3em;
}

/*** greenhouse effect ***/

.characteristics-img {
  width: 25em;
  height: auto;
  background-color: #2D2D2D;
  border-radius: 1em;
  padding: 0.5em;
  margin-bottom: 1em;
  margin-right: auto;
  margin-left: auto;
}

.rating-circle {
  display: inline-block;
  width: 45px;
  height: 35px;
  stroke: #f2f2f2;
  stroke-width: 2px;
}

.table-rating td {
  text-align: right;
}

.table-rating th {
  text-align: center;
}

/*** map Animation ***/

#AnimationContainer {
  padding: 2em;
}

.map-form {
  padding: 1em;
  display: inline-block;
}

.map-form-large {
  width: 20em;
  width: auto;
}

.map-control {
  width: 10em;
  width: auto;
}

.sources-table {
  color: white;
  /*Überscheiben bootstrap*/
}

.sphere {
  fill: #064273;
}

.country {
  stroke: black;
  stroke-width: 0.1px;
}

.country.highlighted {
  stroke: black;
  stroke-width: 0.5px;
}

.country:hover {
  stroke-width: 0.6px;
}

.mapColorLegend:hover {
  cursor: pointer;
}

.headlineColorLegend {
  font-size: 1.5em;
  color: white;
  font-weight: 600;
}

/*** World Animation ***/

.sphereEarth {
  fill: none;
}

#globalWarmingWorld-container canvas {
  margin-top: 1em;
  padding-bottom: 2em;
  position: absolute;
  z-index: -1;
}

#globalWarmingWorld-container svg {
  cursor: grab;
  z-index: 5;
}

.form-control-world {
  color: white;
  font-size: 1.2em;
  padding: 0.5em 0.8em;
  display: inline-block;
  background: #2d2d2d;
  border: 2px solid white;
  border-radius: 0.5em;
}


.form-group-world {
  display: inline-block;
  width: 12em;
}

#show-years-of-video{
text-align: left; position: relative; left: 1em; top: 6em; font-size: 1.2em"
}
/*** Acceleration ***/

.spiralMarginTop {
  margin-top: 4em;
}

.circle {
  margin-top: -5em;
  margin-bottom: -5em;
}

#status {
  cursor: pointer;
  font-size: 1.5em;
  color: black;
  padding: 0.5em;
  margin-top: 1em;
  display: inline-block;
  border-radius: 0.5em;
  position: relative;
  z-index: 5;
}

.icon-play3 {
  background-color: #C53B11;
}

.icon-pause2 {
  background-color: #C53B11;
}

#viz {
  margin-top: 2em;
  display: flex;
  display: -webkit-flex;
}

text.hover-text {
  fill: #F1F1F1;
  font: 12px sans-serif;
}

.axis text {
  font: 12px sans-serif;
  fill: #F1F1F1;
}

.axis line {
  stroke: #F1F1F1;
}

.axis circle {
  stroke: #F1F1F1;
  fill: none;
  stroke-dasharray: 1, 4;
}

.axis circle.red {
  stroke: #990000;
  stroke-dasharray: none;
}

.axis path {
  fill: none;
  stroke: #F1F1F1;
  shape-rendering: crispEdges;
}

.axis :last-of-type circle {
  stroke: white;
  stroke-dasharray: none;
}

div#emissions-linear svg path.period {
  stroke-width: 4px;
}

.year {
  fill: #F1F1F1;
}

.chart-linear {
  margin-top: -5px;
}

svg text {
  color: #F1F1F1;
}

.budget-line {
  fill: gray;
  font-size: 11px;
}

.spiralSources {
  text-align: center;
  font-size: 1em;
}

.spiralSources a {
  color: #FCD000 !important;
}

.spiralSources a:hover {
  color: #FF8000 !important;
  text-decoration: none !important;
}

hr {
  border: 0;
  border-top: 1px solid #2a2d2f;
  width: 40%;
  margin: 20px auto 0;
}

#credits {
  padding: 15px;
}

.spiralColumn.hidden {
  display: none;
}

.spiralColumn {
  width: 33%;
}

.climateSpirals-headline {
  text-align: center;
  font-size: 1.6em;
  font-weight: 600;
}


/*** health ***/

.disease-image {
  margin-bottom: 0.5em;
  border-radius: 0.5em;
  width: 100%;
  height: auto;
}

/*** biodiversity ***/

.text-gradient {
  line-height: 50px;
  padding-left: 1em;
  margin: 0.5em;
}

.text-gradient-left {
  padding-left: 1em;
  margin: 0.3em;
}

.text-gradient-right {
  padding-right: 1em;
  margin: 0.3em;
}


/*** extreme-weather ***/

.distinction-weather-container {
  font-weight: bold;
  border-bottom: 2px solid grey;
}

.distinction-weather-container * {
  text-align: center;
}

.distinction-weather-main {
  text-align: center;
  padding-right: 1em;
  padding-bottom: 1em;
  border-right: 2px solid grey;
}

.distinction-weather-sub {
  border-bottom: 2px solid grey;
  padding: 1em;
}

.distinction-weather-sub-lastElement {
  padding: 1em 1em 0em 1em;
}

/***waterCycle***/

.video-waterCycle {
  width: 100%;
}

/*** IPCC ***/

.link-box {
  display: block;
  margin-bottom: 1em;
  margin-left: 2em;
  text-align: center;
}

.ipcc-border-box {
  border-top: 1px solid grey;
  border-bottom: 1px solid grey;
  margin-top: 2em;
  padding: 1.5em;
  text-align: center;
}

.table-annex {
  /* background-color: #123644!important;*/
  background-color: #1F1F1F !important;
  /*background: linear-gradient(to right, #2980b9, #2c3e50)!important;*/
  border-radius: 0.2em;
  margin-top: 2em;
  margin-bottom: 2em;
}

.annex-headline {
  font-size: 1.2em;
}

/*** NavbarTop ***/

#navbar-top {
  margin-left: 1em;
  list-style: none;
  background-color: #333;
  z-index: 2;
  display: flex;
  justify-content: center;
  font-size: 1em;
}


#navbar-top li {
  display: table-cell;
  padding: 0.5em;
}

#navbar-top a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.15em;
  display: inline-block;
  padding: 1em 1.5em;
  position: relative;
}

#navbar-top a:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}

#navbar-top a:hover:after {
  width: 100%;
  left: 0;
}

.navbar-top-margin {
  margin-top: 4em;
}


.landingPage-button {
  /* background-color: #00b383; */
  /* background-color: #e64414; */

  /* background-color: #c53b11; */
  background-color: #C53B11;

  text-align: center;
  border: none;
  /* background-color: #33a9fe; */
  /*background: linear-gradient(#0033cc, #4671f2);*/
  border-radius: 1.5em;
  padding: 1em 1.5em;
  font-size: 1.4em;
  /* color: black; */
  color: white;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
}

.download-button {
  text-align: center;
  border: none;
  /*background-color: #377b7a;*/
  /* background-color: #2d2d2d; */
  background-color: #C53B11;
  /* border: 2px solid white; */
  border-radius: 1.5em;
  padding: 1em 1.5em;
  font-size: 1.2em;
  /*color: #022626;*/
  color: white;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
}

.svg-button {
  text-align: center;
  border: none;
  border: 2px solid #377b7a;
  border-radius: 1.5em;
  padding: 1em 1.5em;
  font-size: 1.2em;
  color: #377b7a;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  margin-left: 1em;
  display: none;
}

.download-button:hover {
  /* background: linear-gradient(360deg, rgba(6, 176, 175, 1) 0%, rgba(5, 206, 205, 1) 100%); */
  background: #9e2f0e;
  color: white !important;
}

.landingPage-button:hover {
  color: white !important;
  /* background-color: #0b6d54; */
  background-color: #9e2f0e;
}

.svg-button:hover {
  color: #022626;
  background-color: #377b7a;

}

.FAQ-answer p {
  font-size: 1em !important;
}


/*************




***************/


@media screen and (max-width: 1400px) {
  #navbar-top {
    display: none;
  }

  #scroll-header {
    display: none;
  }

  .navbar-top-margin {
    margin-top: 4em;
  }

}

@media screen and (max-width: 1500px) {

  .container {
    max-width: 900px;
  }

  .LGdisplayNone {
    display: none !important;
  }

}

@media screen and (max-width: 1440px) {

  .pushright {
    padding-left: 10em;
  }

  /*** climate Spirals ***/

  .spiralColumn {
    width: 100%;
  }

  .spiralMarginTop {
    margin-top: -6em;
  }

  .spiralColumn {
    margin-bottom: 2em;
  }

  .expand-icon {
    display: none;
  }

}


@media screen and (max-width: 1200px) {

  .sidebar-toggler {
    background-color: #1F1F1F;
    /*background-color: #123644;*/
    height: 2.5em;
    border-radius: 0.3em;
    margin-left: 0.5em;
  }

  .sidebar-collapse {
    margin-top: -0.3em;
    background-color: #1F1F1F;
    /*background-color: #123644;*/
    border-radius: 0em 0.5em 0.5em 0.5em;

  }

  .sidebar-menu-basics {
    width: 10.5em;
  }

  .pushright {
    padding-left: 1em;
  }

  .pushdown {
    margin-top: 5em;
  }

  .info {
    padding: 2em;
  }

}



@media screen and (max-width: 992px) {

  .sidebar {
    background-color: transparent;
  }

  .iconSidebar-container {
    margin-left: 0;
  }

  .sidebar-logo-container {
    display: none;
  }

  .MDdisplayNone {
    display: none !important;
  }

  .fixed-bottom {
    display: block;
  }

  .slidecontainer {
    padding: 1em 1em 0.5em 1em;
    width: 30em;
    margin: -0.2em auto auto auto;
    border-style: solid;
    border-width: 0.2em;
    border-color: #1c2121;
  }

  .rounded-list p {
    font-size: 1rem;
    line-height: 1.5em;
  }

  .x-overflow-md {
    overflow-x: scroll;
  }

  h1 {
    font-size: 2em;
  }

  p,
  .link-to-not-in-text {
    font-size: 1.2em;
  }

  .underline {
    font-size: 1.5em !important;
  }

  .headline-bold {
    font-size: 1.4em !important;
  }

  .list li {
    font-size: 1.2em;
  }

  .form-control-name {
    width: 100% !important;
  }

  .form-control-email {
    width: 100% !important;
  }

  .form-control-message {
    width: 100% !important;
  }

  .contact-form label {
    font-size: 1em;
  }

  .kontakt__main h2 {
    font-size: 1.5em;
    font-weight: 600;
  }

  .kontakt__adresse {
    font-size: 0.6em;
  }


  .overflow992 {
    overflow-x: scroll;
  }

  .footer {
    padding-bottom: 5em;
  }

  /***home***/

  #headline-home {
    font-size: 4em;
  }

  .home-description {
    padding: 0.5em 1em;
    font-size: 1.5em;
  }

  .FAQ-headline {
    font-size: 1.5em !important;
  }

  /***headlines***/

  .headline {
    margin-left: 1em;
  }

  h1 {
    font-size: 3rem;
  }

  .headline-2-basics {
    font-size: 2em;
  }

  .headline-2-causes {
    font-size: 2em;
  }

  .headline-2-solutions {
    font-size: 2em;
  }

  .headline-2-indirect {
    font-size: 2em;
  }

  .headline-3 {
    font-size: 1.8em;
  }

  .headline-4 {
    font-size: 1.5em;
  }

  /*** greenhouse effect ***/

  .img-half {
    width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
  }

  .table-scrollable {
    overflow-x: scroll;
  }

  /*** amplification ***/

  .image-flex {
    width: 70%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5em;
  }

  .image-noReturn {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .image-humidity {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
    width: 25em;
  }

  .image-CO2-absorption {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
  }

  .image-with-source {
    margin-bottom: 0.5em;
  }

  .spiralMarginTop {
    margin-top: -4em;
  }

  .flex-container-amplification {
    display: block;
  }

  .amplification-right {
    display: none;
  }

  .amplification-left {
    display: none;
  }

  /*** sources ***/

  .trafficEmissionGermany {
    overflow-x: scroll;
  }

}

@media screen and (max-width: 900px) {
  .flex900 {
    flex-direction: column;
  }

  .next-article {
    font-size: 1.5em;
  }

  .text-container {
    max-width: 600px;
  }

}


@media screen and (max-width: 650px) {
  .flex650 {
    flex-direction: column;
  }

  .text-gradient {
    line-height: normal;
    padding-left: 0;
    margin-bottom: 2em;
  }

  #headline-home {
    font-size: 3.5em;
  }

  #home-description {
    font-size: 1.2em;
  }

  .text-container {
    max-width: 470px;
  }

  #linkHideShow {
    font-size: 1em;
  }
}


@media screen and (max-width: 576px) {

  .info-image {
    display: none;
  }

  .shift-text-align {
    text-align: left;
  }

  .sm-margin {
    margin-left: 1em;
    margin-right: 1em;
  }

  .info {
    margin: 0 -1em;
    padding: 1em;
    border-radius: 0;
  }

  /*Graphics*/

  .headlineColorLegend {
    font-size: 1.2em !important;
  }

  .text-axis-description {
    font-size: 0.9em;
  }

  .text-axis {
    font-size: 0.5em;
  }

  .path-line-graph {
    stroke-width: 3;
  }

  #emissions-path-germany text {
    font-size: 0.9em;
  }

  .text-inside-line-graphics {
    font-size: 0.9em !important;
    font-weight: 200;
  }

  .climateSpirals-headline {
    font-size: 1.2em;
  }
}

@media screen and (max-width: 480px) {


  p {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
  }

  .display-none-mobile {
    display: none;
  }

  .only-mobile {
    display: block;
  }

  .mobile-spacer-2 {
    padding: 0.75em;
  }

  .mobile-half-center {
    width: 50%;
    margin-left: 25%;
  }

  .mobile-30-width {
    width: 30%;
  }

  .spacer-2 {
    padding: 0.75em;
  }

  .spacer-4 {
    padding: 1.5em;
  }

  .spacer-6 {
    padding: 2em;
  }

  .text-container {
    max-width: 100%;
  }

  .next-article {
    font-size: 1.2em;
  }

  .margin-text-2em {
    margin: 0;
  }

  .sidebar {
    overflow: auto;
    /*    width: 90%;*/
  }

  .sidebar-icon {
    width: 1.5em;
    height: 1.5em;
  }

  .sidebar-menu-basics {
    /*  left:10em!important;*/
    overflow: auto;
  }

  .extend-Description {
    font-size: 1em;
  }

  .dropdown-item {
    font-size: 1em;
  }

  #subheading-home {
    display: none;
  }

  .SMdisplayNone {
    display: none;
  }

  p,
  .link-to-not-in-text {
    font-size: 1em;
  }

  .next-icon {
    margin: 0.3em;
  }

  .image-stripe {
    height: 200px;
  }

  .border-bottom-mobile {
    border-bottom: 1px solid grey;
    padding-bottom: 1em;
    border-right: none !important;
  }

  .rounded-list {
    padding-left: 1em;
  }

  .comparsion-table {
    font-size: 1em !important;
  }

  .full-width-image {
    height: 200px !important;
  }

  /***home***/

  .FAQ-answer p {
    font-size: 0.8em !important;
  }

  .FAQ-list li {
    font-size: 0.8em !important;
  }

  .headline-home-container {
    margin-left: auto !important;
    text-align: center;
    position: static !important;
  }

  #headline-home {
    font-size: 3em;
    text-align: center;
    margin-top: 30%;
  }

  #headline-2-home {
    font-size: 1.4em;
    font-weight: 600;
    color: #377b7a;
    background: black;
    border-radius: 0.1em;
    padding: 0.1em;
  }

  .FAQ-headline {
    font-size: 1.3em !important;
  }

  .mobile-padding {
    padding: 0 1em;
  }

  /***global Warming***/

  #globalWarmingWorld-container svg {
    cursor: default;
  }

  #show-years-of-video {
    top: 1em;
  }

  .form-control-world {
    font-size: 1em;
    padding: 0.5em;
  }


  .questionmark {
    width: 5em !important;
  }

  .sidekick {
    font-size: 1em;
    margin-left: 0;
    padding-right: 0.5em;
  }

  .color-change {
    border-left: none;
  }

  /***headlines***/

  .headline-2-basics {
    font-size: 1.6em;
  }

  .headline-2-causes {
    font-size: 1.6em;
  }

  .headline-2-solutions {
    font-size: 1.6em;
  }

  .headline-2-indirect {
    font-size: 1.6em;
  }

  .headline-3 {
    font-size: 1.3em;
  }

  .headline-4 {
    font-size: 1.2em;
  }

  /***IPCC***/

  .link-box {
    margin-left: 0.5em;
  }

  .ipcc-border-box {
    padding: 1em;
  }

  /***extremeWeather***/

  .distinction-weather-container {
    border-bottom: 5px solid #e98b32;
  }

  .distinction-weather-main {
    border-right: none;
    border-bottom: 2px solid grey;
  }

  .distinction-weather-main-alone {
    border-bottom: none;
  }

  .distinction-weather-sub {
    border-bottom: none;
  }

  /***subsidies***/

  .renewable-subsidies-circle {
    margin-top: 10em;
  }

  /***waterCycle***/

  .video-waterCycle {
    width: 100%;
  }

  .distinction-sea-level-bar {
    display: inline-block;
    margin-bottom: 2em;
  }

  .sea-level-bar {
    display: inline-block;
  }

  .underline {
    font-size: 1.2em !important;
  }

  .headline-bold {
    font-size: 1.2em !important;
  }

  .flex {
    flex-direction: column;
  }

  .disease-image {
    width: 50%;
    margin-left: 25%;
    justify-content: center;
  }

  .source-text {
    font-size: 1em !important;
  }

  .list li {
    font-size: 1em;
  }

  .table-annex th {
    width: 1em !important;
  }

  .table-dividing-line th {
    font-size: 0.9em !important;
  }

  /***buttons***/

  .download-button {
    margin: 0;
    font-size: 1em;
  }

  .svg-button {
    margin: 0;
    font-size: 1em;
    display: none;
  }

  #svg_Wrapper {
    margin: 0 0.5em !important;
  }

  .border-top-grey {
    border: none;
  }

  .margin-top-icon {
    margin-top: 0;
  }

  .Home__picture {
    background: url(images/home_LNSO_mobile.webp) no-repeat center center;
    background-size: cover;
    height: 100%;
  }

  .feature__flexbox {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }

  .feature__box {
    padding: 0.5em;
    width: 100%;
  }

  .feature__box:nth-child(1),
  .feature__box:nth-child(2) {
    border-bottom: 0.01em dashed #f2f2f2;
  }

  .footer {
    font-size: 0.8em;
    padding: 0.5em;
  }

  h1 {
    font-size: 2.5em;
  }

  .slidecontainer p {
    font-size: 0.9em !important;
    display: inline-block;
    line-height: 0.5em;
  }

  .slidecontainer {
    width: 90%;
    overflow: auto;
  }

  .slider {
    width: 100%;

  }

  .no-margin-top {
    margin-top: 0 !important;
  }

  /*** greenhouse Effect ***/

  .characteristics-img {
    width: 100%;
    margin-right: 0;
  }

  /*** amplification ***/

  .image-flex {
    width: 100%;
  }

  .image-humidity {
    width: 100%;
  }

  .image-noReturn {
    width: 50%;
  }

  .image-CO2-absorption {
    width: 90%;
  }

  .spiralMarginTop {
    margin-top: 4em;
  }

  .padding-infoText {
    padding: 0 0;
  }

  /*** monitor ***/

  .text-gradient-left {
    padding-left: 0;
    margin-top: 0;
  }

  .text-gradient-right {
    padding-right: 0;
    margin: 0;
  }

  /***timeline***/
  .timeline-introduction {
    padding: 1em;
  }

  .timeline-unfold {
    width: 1.5em;
    height: 1.5em;
  }

  /***table***/

  /*global Warming*/
  .remove-4th-column-mobile tr>*:nth-child(4) {
    display: none;
  }



}

/*# sourceMappingURL=app.css.map */