@media (min-width: 500px) {

@media (min-width: 500px) {
 
   :root {
      --mediaHeight: 25vh;
      --conHeight: 50vh;
      --varTop: 6vh; 
      --varBottom: 5vh;
      --varFontSizeH1: 3rem;   
      --varFontSizeH2: 2.5vh;
      --varFontSizeH3: 2.5vh;
      --varFontSizeText: 2vh;
      --varFontSizeLogo: 3.5vh;
      --varFontSizeTitle: 5px;
      --varFontSizeBottom: 1.5vh;
      --varFontSizeLang: 1vh;
      --varH1Padding: 8vh;
      --varMaxWidth: 1500px;
      --varContWidth: min(60vw,calc(0.6*var(--varMaxWidth)));
      --varMediaWidth: min(40vw,calc(0.4*var(--varMaxWidth)));
      --varMenuTopFontSize: 18px;
      --varMenuTopElementMargin: min(4vw,80px);
      --mainColor: #2F4F4F;
      }

#centerContainer{
      width: min(100vw,calc(var(--varMaxWidth)));
      margin-left:  auto;
      margin-right: auto;
      padding-left: 0;
      padding-right: 0;
      margin-top: 0;
      }

      .contentWrapper{
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      margin-bottom: 5vh;
      height: 100vh;
      width: min(100vw,calc(var(--varMaxWidth)));
      margin-left: auto;
      margin-right: auto;
      background-image: url('../img/strommast.jpg');
      background-size: 100% 100%;
}

      .topnav {
      display: none;
    }

        .spacer{
      height: var(--varTop);
      width: 100%;
      background-color: white;
    }

.innerContentWrapper{
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 80vh;
  max-width: 900px;
  margin-top: 10vh;
  margin-bottom: auto;


 }

.titleContent{

  display:  flex;
  border-radius: 2px;
  margin-left: auto;
  margin-bottom: 5vh;
  width: 30vw;
  max-width: 485px;
  height: 12vh;
  background: white;
  vertical-align:middle;
}

.titleContent H1{
     
      margin: auto;
      text-decoration: none;
      font-family: "Roboto",'Syncopate', sans-serif;
      text-shadow:  4px 4px 8px grey;
      /*font-size: min(var(--varFontSizeH1),40px);*/
      font-size: min(var(--varFontSizeCenterContnetH1), var(--varMaxFontSizeCenterContnetH1));
      background-color: white;
      color: #3b6363;
}

.titleContent h2{
      margin: 0;
}


      /* menu section start */

     
    .wrapperTop{
      
      display: flex;
      padding: 0;
      height: var(--varTop);
      background-color: white;
      /* below is new */
      z-index: 7;
      width: min(100vw,calc(var(--varMaxWidth)));
      position: fixed;
    }

      .myLogo {
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-top: 0.8vh;
      margin-left: 1vw;
      height: var(--varTop);
      font-size: var(--varFontSizeLogo);
      color:  #2F4F4F;
      /*width: 8vw;*/
      /*padding: 1.25vw;*/
      font-family: sans-serif;
      text-align: left;
      text-decoration: none;
      font-weight: bold;
      z-index: 4;
    }

    .myLogo:hover{
      text-decoration: underline;
    }

    .menuTop {
      height: var(--varTop);
      color: darkslategrey;
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      text-align: center;
      z-index: 3;
    }

    .menuTop nav{  
      margin-left: 5vw;
      height: var(--varTop);
      display: flex;
      align-items: center;
      justify-content: left;
    }

    .menuTop a {
      color: darkslategrey;
      margin-right:  var(--varMenuTopElementMargin);
      margin-top: 1vh;
      text-decoration: none;
      float: left;
      font-size: --varMenuTopFontSize
    }

    #firstElement{
      margin-left: 0;
    }

    .menuTop a:hover {
      font-weight: 600;
    }

    .menuLang {
      height: var(--varTop);
      margin-left: auto;
      margin-top: 2vh;
      font-family: 'Roboto','Syncopate', sans-serif;
      text-align: center;
       z-index: 3;
    }

    .menuLang nav{
      margin-right: 3vw;

    }


    .menuLang a {
      color: #2F4F4F;
      margin-left:  2vw;
      margin-top: 0;
      text-decoration: none;
      float: right;
      font-size: font-size: min(0.9vw,18px);
    }

    .menuLang a:hover {
      font-weight: 600;
    }

    .menuBottom {
        /*background-color: darkslategrey;*/
        background: linear-gradient(#3b6363, #2F4F4F);
        width: min(100vw,var(--varMaxWidth));
        height: var(--varBottom);
        bottom: 0px;
        font: white;
    }

    .menuBottom nav {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      margin-right: auto;
      width: auto;
      height: var(--varBottom);
      font-family: 'Roboto', sans-serif;
      } 

    .menuBottom a {
      margin-left:  2vw;
      margin-right: 2vw;
      text-decoration: none;
      font-size: var(--varFontSizeBottom);
      color: white;
      float: left;
      text-align: center;
    }

    .menuBottom a:hover {
      font-weight: 600;
      cursor: default;
      
    }

    /* menu section end */



/* media > 500px end */
}