h3 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
}

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

:root {
  --blue: #10828c;
  --orange: #eba10c;
  --white: #ffffff;
  --black: #000000;
  --light-grey: #efefef;
  --light-blue: #aacfd3;
  --light-orange: rgba(235, 161, 12, 0.75);
  --medium-blue: #4ca1a9;
  --dark-grey: #676464;
  --body-fonts: "Roboto";
  --logo-fonts: "Sansation", sans-serif;
  --font-size-heading: 2.9vw;
  --font-size-subheading: 1.5vw;
  --font-size-bodytext: 1.2vw;
  --font-size-nav: 50px;
  --font-size-nav-active: 60px;
}

body {
  padding: 0;
  margin: 0;
}

#blockingRectangle {
  display: none;

}

#mobileFlexDropFilter {
  display: none;
}

#newsBurger a {
  text-decoration: none;
}

#newsWrapper {
  display: flex;
  direction: row;
}

/*navigation styles*/
.main-navigation {
  width: 22vw;
  height: 100vh;
  background-color: var(--blue);
  margin-top: 0vw;
  padding-top: 0.5vw 1vw 0vw 0vw;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  position: sticky;
 }

.navigation-dateandtime {
  font-family: var(--body-fonts);
  font-size: 1vw;
  color: var(--black);
  font-weight: 400;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-left: 1.6vw;
  margin-right: 1.6vw;
}

.logo-grundfos {
  width:22vw;
  height:auto;
  margin-top:1vh;
}

.logo-grundfos-link {
text-decoration: none;
}

.navigation-links {
font-size: 1.5vw;
display: flex;
flex-direction: column;
margin-left: 3.5vw;
margin-top: auto;
margin-bottom: auto;
top: 10vw;
font-family: var(--body-fonts);
line-height: 4vw;
color:var(--light-grey)
}

.nav-link {
color: var(--light-grey);
text-decoration: none;
}

.nav-link:hover {
color: white;
text-decoration:none;
font-size: 1.6vw;
font-weight: bolder;
}

.navigation-qr {
display: flex;
flex-direction: column;
align-items: center;
margin-top: auto;
margin-bottom: 5vh;
}

.navigation-qr-code-description {
font-family: var(--body-fonts);
color:var(--light-grey);
font-size: 0.99vw;
line-height: 0vw;
}

.navigation-qr-code-image {
width: 35%;
height: 80%;
}

#activePage {
  font-size: 1.6vw;
  font-weight: bolder;
  color: var(--white);
}

/*news styles*/

.newsContent {
  background-color: var(--white);
  width: 78vw;
  margin: 0;
  padding: 0;
}

.newsTop {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  bottom: 0;
  position: sticky;
  background-color: #ffffff;
  margin-bottom: 0;
  height: 18vh;
}

.newsH1 {
  display: block;
  justify-content: center;
  font-family: var(--body-fonts);
  font-size: var(--font-size-heading);
  font-weight: 500;
  letter-spacing: 0.2vw;
  text-align: center;
  flex: 1;
  margin-bottom: 1.5vw;
}

#newsLink {
  text-decoration: none;
  color: #000000;
}

.newsSearchIcon {
  width: 2.8vw;
  margin-right: 2vw;
}

.outerIcons {
  display: flex;
  flex-direction: column;
  width: 5vw;
}

/*icons*/
#newsIconsContainer {
  list-style-type: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 78vw;
  padding: 0;
  margin: 0;
  margin-top: 0;
  flex: 1;
  position: fixed;
  top: 8vw;
  bottom: 0;
  position: sticky;
  background-color: #ffffff;
}

.newsIcon {
  cursor: pointer;
  align-items: center;
}

.newsIconImage {
  justify-content: center;
  max-width: 3vw;
  margin: auto;
  display: block;
}

.newsIconLabel {
  justify-content: center;
  font-family: var(--body-fonts);
}

.newsFigure {
  justify-content: center;
}

/*articles*/
#newsArticleContainer {
  margin-top: 2vh;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  row-gap: 2vw;
  margin-bottom: 4vw;
}

.newsArticle {
  display: flex;
  justify-items: center;
  align-items: center;
}

.newsArticleIcon {
  padding: 1vw;
  border: 2px solid var(--light-grey);
  border-radius: 15px 0px 0px 15px;
  background-color: var(--light-blue);
  height: 6vw;
}

.newsText {
  /*contains heading, date and desription*/
  padding-left: 1vw;
  border: 2px solid var(--light-grey);
  border-radius: 0px 15px 15px 0px;
  background-color: var(--light-grey);
  height: 6vw;
  width: 45vw;
}

.newsHeader {
  display: flex;
  flex-wrap: wrap;
  font-family: var(--body-fonts);
  font-size: var(--font-size-bodytext);
  margin-bottom: 0;
  padding-bottom: 0;
  align-items: center;
}

newsH3 {
  margin-top: 0 vw;
  font-family: var(--body-fonts);
  font-size: var(--font-size-bodytext);
}

.newsDate {
  padding-right: 1vw;
  margin-left: auto;
  margin-bottom: 0.5vw;
  padding-bottom: 0;
  margin-top: 0.5vw;
  font-family: var(--body-fonts);
  font-size: var(--font-size-bodytext);
}

.newsDescription {
  font-family: var(--body-fonts);
  font-size: var(--font-size-bodytext);
  margin-top: 0;
  padding-top: 0;
  padding-right: 1vw;
  padding-bottom: 1vw;
}

#news-help-icon {
  width: 3.4vw;
  bottom: 3vh;
  position: fixed;
}

.hidden {
  display: none;
}

.dropDown {
  display: none;
}

/*RESPONSIVE DESIGN*/
/*filter page

#filterHeader {
  display: flex;
  flex-direction: row;
  text-align: center;
}

#filterUpArrow {
  width: 2vw;
  height: auto;
  margin-left: 2vw;
  margin-top: 1vw;
  color: var(--white);
  border-color: var(--white);
}

.filterText {
  font-family: var(--body-fonts);
  margin-bottom: 10vw;
  font-size: x-large;
}

#filterListWrapper {
  list-style-type: none;
}

#filterAll {
  color: var(--white);
}

#filterBody {
  background-color: var(--light-blue);
  width: 100vw;
  height: 100vh;
}

.filterNewsLink {
  text-decoration: none;
}*/

#maintenanceLink {
  text-decoration: none;
  color: #000000;
}

.navigation-mobile{
  display: none;
}

/* breakpoints*/

/*for small devices*/

@media only screen and (max-width: 599px) {
  #blockingRectangle {
    display: block;
    height: 25vh;
    width: 100vw;
    background-color: var(--white);
    z-index: 0;
    top: 8vh;
    position: fixed;
    top: 0;
    position: sticky;
  } 
 
  #newsBurger {
    display: none;
    padding-left: 20vw;
    margin-top: 5vh;
  }

  #mobileFlexDropFilter{
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  #mobileClearFilterButton{
    width: 9vw;
    margin-left: 25vw;
  }

  .dropbtn {
    background-color: var(--light-blue);
    color: black;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    width: 160px;
    text-align: left;
    border-radius: 15px;
  }

  /* The container <div> - needed to position the dropdown content */
  .dropDown {
    display: block;
    margin-top: 7vh;
    margin-left: 11vw;
    font-family: var(--body-fonts);
    background-color: var(--white);
    position: fixed;
    top: 10vh;
    background-color: var(--white);
    width: 100vw;
    height: 8vh;
  }

  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--light-blue);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 0px 0px 15px 15px;
    

  }

  /* Links inside the dropdown */
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
  .show {
    display: block;
  }

/* add a similar class here for JS to straighten the bottom corners of the dropdown header*/
.straighten {
  border-radius: 15px 15px 0px 0px;
}

  #downArrow {
    width: 6vw;
    position: fixed;
    top: 18.5vh;
    margin-left: 2vw;
  }

  #newsIconsContainer {
    display: none;
  }

  .main-navigation {
    display: none;
  }

  .newsContent {
    width: 100vw;
  }

  .newsTop {
    height: 10vh;
  }

  .newsH1 {
    display: block;
    justify-content: center;
    font-family: var(--body-fonts);
    font-size: x-large;
    font-weight: 500;
    letter-spacing: 0.2vw;
    text-align: center;
    flex: 1;
    margin-bottom: 1.5vw;
   
  }

  #newsArticleContainer {
    padding-bottom: 10vh;
    row-gap: 2.5vh;
  }

  .newsArticleIcon {
    padding: 1vw;
    border: 2px solid var(--light-grey);
    border-radius: 15px 0px 0px 15px;
    background-color: var(--light-blue);
    height: 18vw;
  }

  .newsText {
    /*contains heading, date and desription*/
    padding-left: 1vw;
    border: 2px solid var(--light-grey);
    border-radius: 0px 15px 15px 0px;
    background-color: var(--light-grey);
    height: 18vw;
    width: 45vw;
  }

  .newsHeader {
    display: flex;
    flex-wrap: wrap;
    font-family: var(--body-fonts);
    font-size: small;
    margin-bottom: 0;
    padding-bottom: 0;
    align-items: center;
  }

  newsH3 {
    margin-top: 0 vw;
    font-family: var(--body-fonts);
    font-size: small;
  }

  .newsDate {
    padding-right: 1vw;
    margin-left: auto;
    margin-bottom: 0.5vw;
    padding-bottom: 0;
    margin-top: 0.5vw;
    font-family: var(--body-fonts);
    font-size: xx-small;
  }

  .newsDescription {
    font-family: var(--body-fonts);
    font-size: x-small;
    margin-top: 0;
    padding-top: 0;
    padding-right: 1vw;
    padding-bottom: 1vw;
  }

  .newsSearchIcon {
    display: none;
    width: 2.8vw;
    margin-right: 2vw;
  }

  #news-help-icon {
    display: none;
  }

   .newsTop {
    height: 1vh;
    margin-top: 10vh;
    margin-left: 40vw;

    position: fixed;
  }

  /*MOBILE LOGO*/
  .mobile-logo {
    display: block;
    width: 100vw;
    align-items: center;
    position: fixed;
    background-color: var(--white);
    margin-bottom: 0vh;
    margin-left: 9vw;
    z-index: 5;
   top: 0;
  }

  .mobile-name {
    display: flex;
    flex-direction: row;
  }
  .main-heading-grundfos {
    font-family: var(--logo-fonts);
    color: var(--blue);
    font-weight: bold;
    font-size: 1.8rem;
    padding: 0vw 2vw 0vw 0.5vw;
    margin-bottom: 0vw;
    margin-top: none;
  }
  .main-heading-text {
    font-family: var(--logo-fonts);
    font-weight: lighter;
    color: #000000;
    font-size: 1.8rem;
    margin-bottom: 0vw;
    margin-top: none;
  }
  .horizontal-line {
    border-bottom: 0.05vw solid var(--light-grey);
    width: 100vw;
    margin-top: 0.5rem;
  }

  /*MOBILE NAVIGATION*/
  .navigation-mobile {
    background-color: var(--blue);
    display: flex;
    width: 100vw;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    height: 8vh;
    margin: auto;
    justify-items: center;
    padding-left: 7.5vw;
    padding-right: 7.5vw;
  }

.navigation {
  display: none;
}
}

/*for larger devices*/
@media only screen and (min-width: 600px) {
  .mobile-logo {
    display: none;
  }

  #newsBurger {
    display: none;
  }

  #newsArticleContainer {
    margin-top: 2vh;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    row-gap: 2vw;
    margin-bottom: 4vw;
  }
}