/**site**/


html { 
    box-sizing: border-box;
    scroll-behavior: smooth;
    background-color: #D0D0D0;
}

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

  a {
    text-decoration: none;
    color: inherit;
  }

  a:hover {
    color: #800;
  }

  a:active {
    color: #800;
  }


  /**Typography**/

  h1 {
    font-family: "montserrat";
    font-size: 1.9vw;
    font-weight: 900;
    white-space: pre;
    text-align: center;
    line-height: 0.8;
    color: #800;
    margin: 8px 0px 0px 0px;
  }

  h2 {    
    font-family: "montserrat";
    font-size: 1vw;
    font-weight: 100;
    white-space: pre;
    text-align: center;
    line-height: 0.8;
    color: #800;
    margin: 8px 0px 0px 0px;
  }

  h3 {
    font-family: "montserrat";
    font-size: 1vw;
    font-weight: 100;
    white-space: pre;
    text-align: center;
    line-height: 0.8;
    color: #3F5248;
    margin: 8px 0px 0px 0px;
  }

  h2.blockTitle {
    font-size: 1vw;
    font-weight: 100;
    white-space: normal;
    hyphens: auto;
    color: #f6E4AF;
    text-align: left;
    margin: 8px 8px 14px 10px;
  }

  h2.blockTitleDark {
    font-size: 1vw;
    font-weight: 100;
    white-space: normal;
    hyphens: auto;
    color: #3F5248;
    text-align: left;
    margin: 8px 8px 14px 10px;
  }

  p.blockText {
    font-family: "hind";
    font-size: .9vw;
    line-height: 1;
    hyphens: auto;
    color: white;
    margin: 8px 8px 8px 10px;
  }

  p.blockTextDark {
    font-family: "hind";
    font-size: .9vw;
    line-height: 1;
    hyphens: auto;
    color: black;
    margin: 8px 8px 8px 10px;
  }

  p.caption {
    font-family: "hind";
    font-size: .7vw;
    line-height: 1;
    hyphens: auto;
    color: black;
    margin: 16px 12px 8px 12px;
  }

  .brss {
    font-size: 1.4vw;
    font-weight: 600;
    color: #800;
  }

  .script {
    font-family: "yesteryear";
    font-weight: 100;
    color: black;
  }

  .skinny {
    font-size: 1vw;
    font-weight: 100;
  }

   /**CSS for browsers less than 660px**/


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

    /** Utilities **/
  
    :root {
      --tbwf: 52;
    }

    
  /**Typography modified for screensze**/

  h1 {
    font-size: 2.6vw;
  }

  h2 {    
    font-size: 1.4vw;
  }

  h3 {
    font-size: 1.4vw;
  }

  h2.blockTitle {
    font-size: 3.2vw;
  }

  h2.blockTitleDark {
    font-size: 3.2vw;
  }

  p.blockText {
    font-size: 2.8vw;
  }

  p.blockTextDark {
    font-size: 2.8vw;
  }

  p.caption {
    font-size: 2vw;
  }

  .brss {
    font-size: 3.2vw;
  }

  #wrapper {
    max-width: 660px; 
    margin: auto;
    scroll-behavior: smooth;
    width: 100%;
    height: auto;
}

/**Base**/

/**BaseImages**/

#baseImages {
  width: 100%;
  height: 1900px;
  display: grid;
  grid-template-columns: repeat(96, 1fr);   
  grid-template-rows: repeat(54, 1fr);
  margin: 0px 0px 0px 0px;
}

#backgroundImage{
  grid-column-start: 1;
  grid-column-end: span 96;
  grid-row-start: 1;
  grid-row-end: span 54;
  background-image: url(images-ph/PH-660.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
}
  
  #baseImageCircleBig {
    grid-column-start: 12;
    grid-column-end: span 40;
    grid-row-start: 1;
    grid-row-end: span 36;
    background-image: url("images-ph/darkCircle.png");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    margin: 0px 0px 0px 0px;
  }
  
  .baseImageCircleBig-home{
    mix-blend-mode: soft-light;
  }
  
  #orchid {
    grid-column-start: 8;
    grid-column-end: span 66;
    grid-row-start: 5;
    grid-row-end: span 66;
    background-image: url("images-tab/orchidMasked.png");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 17;
  }
  
  #colorCircles {
    grid-column-start: 1;
    grid-column-end: span 34;
    grid-row-start: 5;
    grid-row-end: span 44;
    background-image: url("images-ph/colorcircles.png");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 6;
  }
  
  #bigLogo {
    grid-column-start: 34;
    grid-column-end: span 40;
    grid-row-start: 1;
    grid-row-end: span 40;
    background-image: url(images-tab/bigLogo.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10;
    margin: 0px 0px 0px 0px;
  }
  
  #smallLogo {
    grid-column-start: 62;
    grid-column-end: span 18;
    grid-row-start: 38;
    grid-row-end: span 18;
    background-image: url(images-ph/smallLogo.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10;
    margin: 0px 0px 0px 0px;
  }
  
  #redDot {
    grid-column-start: 86;
    grid-column-end: span 7;
    grid-row-start: 6;
    grid-row-end: span 5;
    background-image: url(images-ph/reddot.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10;
    margin: 0px 0px 0px 0px;
  }


  #hamburger {
    grid-column-start: 80;
    grid-column-end: span 3;
    grid-row-start: 1;
    grid-row-end: span 3;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 22;
    margin: 10px 0px 0px 0px;
    z-index: 1000;
  }
  
   /* Dropdown Button */
   .dropbtn {
    background-color:#800;
    opacity: 0;
    padding: 8px;
    border: none;
    cursor: pointer;
    z-index: 1000;
  }
  
  /* Dropdown button on hover & focus */
  .dropbtn:hover, .dropbtn:focus {
    background-color: #800;
    z-index: 1000;
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
    z-index: 1000;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    margin: 0px 0px 0px -140px;
    min-width: 240px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    opacity: .9;
    z-index: 1000;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: #800;
    font-family: montserrat;
    font-size: .9rem;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    z-index: 1000;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: #ddd}
  
  /* 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: flex;
    flex-direction: column;
    z-index: 1000;} 

  
  
  
      /**baseText**/
/**Headlines**/

#baseTextHeadline-1 {
  grid-column-start: 56;
  grid-column-end: span 36;
  grid-row-start: 7;
  grid-row-end: span 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: rgba(255,255,255, 0.8);
  z-index: 10;
}

  /**linkButtons**/

#linkButtons{
  grid-column-start: 62;
  grid-column-end: span 32;
  grid-row-start: 18;
  grid-row-end: span 40;  
  padding: 4px 4px 4px 4px; 
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  z-index: 15;
}

  #linkButtons H2 {
    font-size: 1rem;
    line-height: 1rem;  
    font-weight: 900;
  }
  
  #linkButtons p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9rem;
    font-style: italic;
    margin: -12px 0px 0px 30px;
    color: #3F5248;
  }
  
  #baseTextBlock-4 {
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0px 0px 30px 0px;
    background-color: rgba(152,168,135, 0.5);
  }
  
  #baseTextBlock-5 {
    background-size: contain;
    background-repeat: no-repeat;  
    margin: 0px 0px 30px 0px; 
    background-color: rgba(152,168,135, 0.5);
  }
  
  #baseTextBlock-6 {
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0px 0px 30px 0px;
    background-color: rgba(152,168,135, 0.5);
  }
  
  /**captions**/
  
  #caption-1 {
    grid-column-start: 2;
    grid-column-end: span 18;
    grid-row-start: 4;
    grid-row-end: span 3;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rgba(255,255,255, 0.8);
    z-index: 10;
  }
  
  #caption-1 p {
    font-size: .7rem;
    line-height: .9rem;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  /**lengthy text section**/
  
  /**baseText**/
  
  #baseText {
    width: 58%;
    height: auto;
    z-index: 16;
    margin: -1520px 0px 0px 4%;  
    display: flex;
    flex-direction: column;
  }
  
  /**textBlocks**/
  
  #baseTextBlock-2 {
    height: auto;
    background-size: contain;
    background-repeat: no-repeat;  
    padding: 40px 20px 20px 20px;
    background-color: rgba(152,168,135, 0.8);
    z-index: 16;
  }
  
  #baseTextBlock-2 h2 {
    font-size: 1.4rem;
    line-height: 1.4rem;
    font-weight: 900;
  }
  #baseTextBlock-2 p {
    font-size: .9rem;
    line-height: 1.2rem;
    font-family: Arial, Helvetica, sans-serif;
  }
  }


  

  /**CSS for browsers between 660px and 960px**/


  @media only screen and (max-width: 960px) and (min-width: 660px) {

    /** Utilities **/
  
    :root {
      --tbwf: 52;
    }

    
  /**Typography modified for screensize**/

  h1 {
    font-size: 1.9vw;
  }

  h2 {    
    font-size: 1vw;
  }

  h3 {
    font-size: 1vw;
  }

  h2.blockTitle {
    font-size: 2vw;
  }

  h2.blockTitleDark {
    font-size: 2vw;
  }

  p.blockText {
    font-size: 1.6vw;
  }

  p.blockTextDark {
    font-size: 1.6vw;
  }

  p.caption {
    font-size: 1.4vw;
  }

  .brss {
    font-size: 1.8vw;
  }

  #wrapper {
    max-width: 960px; 
    margin: auto;
    scroll-behavior: smooth;
    width: 100%;
    height: auto;
}
  
  /**Base**/
  /**BaseImages**/
  
  #baseImages {
    width: 100%;
    height: 1740px;
    display: grid;
    grid-template-columns: repeat(96, 1fr);   
    grid-template-rows: repeat(54, 1fr);
    margin: 0px 0px 0px 0px;
  }

  #backgroundImage{
    grid-column-start: 1;
    grid-column-end: span 96;
    grid-row-start: 1;
    grid-row-end: span 56;
    background-image: url(images-tab/Tab-960.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  #baseImageCircleBig {
    grid-column-start: 12;
    grid-column-end: span 40;
    grid-row-start: 1;
    grid-row-end: span 36;
    background-image: url("images-tab/darkcircle.png");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10;
    margin: 0px 0px 0px 0px;
  }
  
  .baseImageCircleBig-home{
    mix-blend-mode: soft-light;
  }
  
  #orchid {
    grid-column-start: 6;
    grid-column-end: span 50;
    grid-row-start: 7;
    grid-row-end: span 50;
    background-image: url("images-tab/orchidMasked.png");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 17;
  }
  
  #colorCircles {
    grid-column-start: 1;
    grid-column-end: span 42;
    grid-row-start: 8;
    grid-row-end: span 23;
    background-image: url("images-tab/colorcircles.png");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 6;
  }
  
  #newColorCircles {
    grid-column-start: 25;
    grid-column-end: span 30;
    grid-row-start: 30;
    grid-row-end: span 38;
    background-image: url(images-tab/newCircles.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 7;
  }
  
  #bigLogo {
    grid-column-start: 37;
    grid-column-end: span 26;
    grid-row-start: 1;
    grid-row-end: span 8;
    background-image: url(images-tab/bigLogo.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10;
    margin: 0px 0px 0px 0px;
  }
  
  #smallLogo {
    grid-column-start: 58;
    grid-column-end: span 13;
    grid-row-start: 40;
    grid-row-end: span 13;
    background-image: url(images-tab/smallLogo.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10;
    margin: 0px 0px 0px 0px;
  }
  
  #redDot {
    grid-column-start: 80;
    grid-column-end: span 7;
    grid-row-start: 10;
    grid-row-end: span 5;
    background-image: url(images-tab/reddot.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 12;
    margin: 0px 0px 0px 0px;
  }

  #hamburger {
    grid-column-start: 68;
    grid-column-end: span 3;
    grid-row-start: 1;
    grid-row-end: span 3;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 22;
    margin: 10px 0px 0px 0px;
    z-index: 1000;
  }
  
   /* Dropdown Button */
   .dropbtn {
    background-color:#800;
    opacity: 0;
    padding: 8px;
    border: none;
    cursor: pointer;
    z-index: 1000;
  }
  
  /* Dropdown button on hover & focus */
  .dropbtn:hover, .dropbtn:focus {
    background-color: #800;
    z-index: 1000;
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
    z-index: 1000;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 240px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    opacity: .9;
    z-index: 1000;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: #800;
    font-family: montserrat;
    font-size: .9rem;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    z-index: 1000;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: #ddd}
  
  /* 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: flex;
    flex-direction: column;
    z-index: 1000;} 


/**Headlines**/

#baseTextHeadline-1 {
  grid-column-start: 60;
  grid-column-end: span 24;
  grid-row-start: 12;
  grid-row-end: span 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: rgba(255,255,255, 0.8);
  z-index: 10;
}

  /**linkButtons**/

#linkButtons{
  grid-column-start: 60;
  grid-column-end: span 32;
  grid-row-start: 18;
  grid-row-end: span 40;  
  padding: 4px 4px 4px 4px; 
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  z-index: 15;
}

  #linkButtons H2 {
    font-size: 1.4rem;
    line-height: 1.4rem;  
    font-weight: 900;
  }
  
  #linkButtons p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9rem;
    font-style: italic;
    margin: -12px 0px 0px 30px;
    color: #3F5248;
  }
  
  #baseTextBlock-4 {
    background-size: contain;
    background-repeat: no-repeat;
   
    margin: 0px 0px 30px 0px;
    background-color: rgba(152,168,135, 0.5);
  }
  
  #baseTextBlock-5 {
    background-size: contain;
    background-repeat: no-repeat;  
  
    margin: 0px 0px 30px 0px; 
    background-color: rgba(152,168,135, 0.5);
  }
  
  #baseTextBlock-6 {
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0px 0px 30px 0px;
    background-color: rgba(152,168,135, 0.5);
  }
  
  /**captions**/
  
  #caption-1 {
    grid-column-start: 2;
    grid-column-end: span 14;
    grid-row-start: 6;
    grid-row-end: span 3;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rgba(255,255,255, 0.8);
    z-index: 10;
  }
  
  #caption-1 p {
    font-size: .7rem;
    line-height: .9rem;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  /**lengthy text section**/
  
  /**baseText**/
  
  #baseText {
    width: 52%;
    height: auto;
    z-index: 16;
    margin: -1260px 0px 0px 5%;  
    display: flex;
    flex-direction: column;
  }
  
  /**textBlocks**/
  
  #baseTextBlock-2 {
    height: auto;
    background-size: contain;
    background-repeat: no-repeat;  
    padding: 40px 20px 20px 20px;
    background-color: rgba(152,168,135, 0.8);
    z-index: 16;
  }
  
  #baseTextBlock-2 h2 {
    font-size: 1.4rem;
    line-height: 1.4rem;
    font-weight: 900;
  }
  #baseTextBlock-2 p {
    font-size: .9rem;
    line-height: 1.2rem;
    font-family: Arial, Helvetica, sans-serif;
  }

  }

  /**CSS for browsers between 960px and 1320 px**/
  
  @media only screen and (max-width: 1320px) and (min-width: 960px) {

  /** Utilities **/

  :root {
    --tbwf: 9;
  }

  
  h1 {
    font-size: 1.9vw;
  }

  h2 {    
    font-size: 1vw;
  }

  h3 {
    font-size: 1vw;
  }

  h2.blockTitle {
    font-size: 1.1vw;
  }

  h2.blockTitleDark {
    font-size: 1.1vw;
  }

  p.blockText {
    font-size: .9vw;
  }

  p.blockTextDark {
    font-size: .9vw;
  }

  p.caption {
    font-size: .8vw;
  }

  .brss {
    font-size: 1.4vw;
  }

  #wrapper {
    max-width: 1320px; 
    margin: auto;
    scroll-behavior: smooth;
    width: 100%;
    height: auto;
}

/**Base**/

/**BaseImages**/

#baseImages {
  width: 100%;
  height: 900px;
  display: grid;
  grid-template-columns: repeat(96, 1fr);   
  grid-template-rows: repeat(54, 1fr);
  margin: 0px 0px 0px 0px;
}

#backgroundImage{
  grid-column-start: 1;
  grid-column-end: span 96;
  grid-row-start: 1;
  grid-row-end: span 54;
  background-image: url(images-ms/MS-1320.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
}


#hamburger {
  grid-column-start: 82;
  grid-column-end: span 3;
  grid-row-start: 1;
  grid-row-end: span 3;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 22;
  margin: 10px 0px 0px 0px;
  z-index: 1000;
}

 /* Dropdown Button */
 .dropbtn {
  background-color:#800;
  opacity: 0;
  padding: 8px;
  border: none;
  cursor: pointer;
  z-index: 1000;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #800;
  z-index: 1000;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  z-index: 1000;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 240px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  opacity: .9;
  z-index: 1000;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #800;
  font-family: montserrat;
  font-size: .9rem;
  padding: 8px 16px;
  text-decoration: none;
  display: block;
  z-index: 1000;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* 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: flex;
  flex-direction: column;
  z-index: 1000;} 

#baseImageCircleBig {
  grid-column-start: 4;
  grid-column-end: span 39;
  grid-row-start: 2;
  grid-row-end: span 39;
  background-image: url("images-ms/darkcircle.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
  margin: 0px 0px 0px 0px;
}

.baseImageCircleBig-home{
  mix-blend-mode: soft-light;
}

#orchid {
  grid-column-start: 1;
  grid-column-end: span 30;
  grid-row-start: 3;
  grid-row-end: span 30;
  background-image: url("images-ms/orchidMasked.png");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 10;
}

#colorCircles {
  grid-column-start: 3;
  grid-column-end: span 40;
  grid-row-start: 10;
  grid-row-end: span 38;
  background-image: url("images-ms/colorcircles.png");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 6;
}

#bigLogo {
  grid-column-start: 52;
  grid-column-end: span 30;
  grid-row-start: 1;
  grid-row-end: span 15;
  background-image: url(images-ms/bigLogo.png);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
  margin: 0px 0px 0px 0px;
}

#smallLogo {
  grid-column-start: 10;
  grid-column-end: span 9;
  grid-row-start: 44;
  grid-row-end: span 9;
  background-image: url(images-ms/smallLogo.png);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
  margin: 0px 0px 0px 0px;
}

#redDot {
  grid-column-start: 78;
  grid-column-end: span 7;
  grid-row-start: 15;
  grid-row-end: span 5;
  background-image: url(images-ms/reddot.png);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
  margin: 0px 0px 0px 0px;
}

    /**Headlines**/

#baseTextHeadline-1 {
  grid-column-start: 60;
  grid-column-end: span 18;
  grid-row-start: 19;
  grid-row-end: span 3;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: rgba(255,255,255, 0.8);
  z-index: 24;
}

/**linkButtons**/

#linkButtons{
  grid-column-start: 64;
  grid-column-end: span 18;
  grid-row-start: 28;
  grid-row-end: span 40;  
  padding: 4px 4px 4px 4px; 
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  z-index: 15;
}

#linkButtons H2 {
  font-size: 1.4rem;
  line-height: 1.4rem;  
  font-weight: 900;
}

#linkButtons p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .9rem;
  font-style: italic;
  margin: -12px 0px 0px 30px;
  color: #3F5248;
}

#baseTextBlock-4 {
  background-size: contain;
  background-repeat: no-repeat;
 
  margin: 0px 0px 30px 0px;
  background-color: rgba(152,168,135, 0.5);
}

#baseTextBlock-5 {
  background-size: contain;
  background-repeat: no-repeat;  

  margin: 0px 0px 30px 0px; 
  background-color: rgba(152,168,135, 0.5);
}

#baseTextBlock-6 {
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0px 0px 30px 0px;
  background-color: rgba(152,168,135, 0.5);
}

/**captions**/

#caption-1 {
  grid-column-start: 3;
  grid-column-end: span 12;
  grid-row-start: 20;
  grid-row-end: span 4;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: rgba(255,255,255, 0.5);
  z-index: 20;
}

#caption-1 p {
  font-size: .7rem;
  line-height: .9rem;
  font-family: Arial, Helvetica, sans-serif;
}

/**scrollable section**/

#scrollBox{
  height: 60vh;
  margin: -630px 0px 0px 0px;
  -ms-overflow-style: none; 
  scrollbar-width: none; 
  overflow-y: scroll;
  overflow-x: none;
  scroll-behavior: smooth;
  z-index: 16;
}

/**baseText**/

#baseText {
  width: 32%;
  z-index: 16;
  margin: 0px 0px 0px 22%;  
  display: flex;
  flex-direction: column;
}

/**textBlocks**/

#baseTextBlock-2 {
  height: auto;
  background-size: contain;
  background-repeat: no-repeat;  
  padding: 40px 20px 20px 20px;
  background-color: rgba(152,168,135, 0.8);
  z-index: 16;
}

#baseTextBlock-2 h2 {
  font-size: 1.4rem;
  line-height: 1.4rem;
  font-weight: 900;
}
#baseTextBlock-2 p {
  font-size: .9rem;
  line-height: 1.2rem;
  font-family: Arial, Helvetica, sans-serif;
}
}

  
   /**CSS for browsers larger than 1320 px**/


@media only screen and (min-width: 1320px) {

  /** Utilities **/

  :root {
    --tbwf: 9;
  }

  #wrapper {
    max-width: 1920px; 
    margin: auto;
    scroll-behavior: smooth;
    width: 100%;
    height: auto;
}

/**Base**/

/**BaseImages**/

#baseImages {
  width: 100%;
  height: 800px;
  display: grid;
  grid-template-columns: repeat(96, 1fr);   
  grid-template-rows: repeat(54, 1fr);
  margin: 0px 0px 0px 0px;
}

#backgroundImage{
  grid-column-start: 1;
  grid-column-end: span 96;
  grid-row-start: 1;
  grid-row-end: span 54;
  background-image: url(images-ls/LS-1920.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
}


#hamburger {
  grid-column-start: 82;
  grid-column-end: span 3;
  grid-row-start: 1;
  grid-row-end: span 3;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 22;
  margin: 10px 0px 0px 0px;
  z-index: 1000;
}

 /* Dropdown Button */
 .dropbtn {
  background-color:#800;
  opacity: 0;
  padding: 8px;
  border: none;
  cursor: pointer;
  z-index: 1000;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #800;
  z-index: 1000;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  z-index: 1000;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 240px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  opacity: .9;
  z-index: 1000;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #800;
  font-family: montserrat;
  font-size: .9rem;
  padding: 8px 16px;
  text-decoration: none;
  display: block;
  z-index: 1000;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* 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: flex;
  flex-direction: column;
  z-index: 1000;} 

#baseImageCircleBig {
  grid-column-start: 4;
  grid-column-end: span 39;
  grid-row-start: 2;
  grid-row-end: span 39;
  background-image: url("images-ls/darkcircle.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
  margin: 0px 0px 0px 0px;
}

.baseImageCircleBig-home{
  mix-blend-mode: soft-light;
}

#orchid {
  grid-column-start: 1;
  grid-column-end: span 30;
  grid-row-start: 3;
  grid-row-end: span 30;
  background-image: url("images-ls/orchidMasked.png");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 10;
}

#colorCircles {
  grid-column-start: 3;
  grid-column-end: span 40;
  grid-row-start: 10;
  grid-row-end: span 38;
  background-image: url("images-ls/colorCircles.png");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 6;
}

#bigLogo {
  grid-column-start: 52;
  grid-column-end: span 30;
  grid-row-start: 1;
  grid-row-end: span 15;
  background-image: url(images-ls/bigLogo.png);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
  margin: 0px 0px 0px 0px;
}

#smallLogo {
  grid-column-start: 10;
  grid-column-end: span 9;
  grid-row-start: 44;
  grid-row-end: span 9;
  background-image: url(images-ls/smallLogo.png);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
  margin: 0px 0px 0px 0px;
}

#redDot {
  grid-column-start: 78;
  grid-column-end: span 7;
  grid-row-start: 15;
  grid-row-end: span 5;
  background-image: url(images-ls/reddot.png);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
  margin: 0px 0px 0px 0px;
}

    /**Headlines**/

#baseTextHeadline-1 {
  grid-column-start: 60;
  grid-column-end: span 18;
  grid-row-start: 19;
  grid-row-end: span 3;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: rgba(255,255,255, 0.8);
  z-index: 24;
}

/**linkButtons**/

#linkButtons{
  grid-column-start: 64;
  grid-column-end: span 18;
  grid-row-start: 28;
  grid-row-end: span 40;  
  padding: 4px 4px 4px 4px; 
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  z-index: 15;
}

#linkButtons H2 {
  font-size: 1.4rem;
  line-height: 1.4rem;  
  font-weight: 900;
}

#linkButtons p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .9rem;
  font-style: italic;
  margin: -12px 0px 0px 30px;
  color: #3F5248;
}

#baseTextBlock-4 {
  background-size: contain;
  background-repeat: no-repeat;
 
  margin: 0px 0px 30px 0px;
  background-color: rgba(152,168,135, 0.5);
}

#baseTextBlock-5 {
  background-size: contain;
  background-repeat: no-repeat;  

  margin: 0px 0px 30px 0px; 
  background-color: rgba(152,168,135, 0.5);
}

#baseTextBlock-6 {
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0px 0px 30px 0px;
  background-color: rgba(152,168,135, 0.5);
}

/**captions**/

#caption-1 {
  grid-column-start: 3;
  grid-column-end: span 12;
  grid-row-start: 20;
  grid-row-end: span 4;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: rgba(255,255,255, 0.5);
  z-index: 20;
}

#caption-1 p {
  font-size: .7rem;
  line-height: .9rem;
  font-family: Arial, Helvetica, sans-serif;
}

/**scrollable section with charts with top write-up also**/

#scrollBox{
  height: 60vh;
  margin: -460px 0px 0px 0px;
  -ms-overflow-style: none; 
  scrollbar-width: none; 
  overflow-y: scroll;
  overflow-x: none;
  scroll-behavior: smooth;
  z-index: 16;
}

/**baseText**/

#baseText {
  width: 32%;
  z-index: 16;
  margin: 0px 0px 0px 22%;  
  display: flex;
  flex-direction: column;
}

/**textBlocks**/

#baseTextBlock-2 {
  height: auto;
  background-size: contain;
  background-repeat: no-repeat;  
  padding: 40px 20px 20px 20px;
  background-color: rgba(152,168,135, 0.8);
  z-index: 16;
}

#baseTextBlock-2 h2 {
  font-size: 1.4rem;
  line-height: 1.4rem;
  font-weight: 900;
}
#baseTextBlock-2 p {
  font-size: .9rem;
  line-height: 1.2rem;
  font-family: Arial, Helvetica, sans-serif;
}

}