/*  _    _                _           
 | |  | |              | |          
 | |__| | ___  __ _  __| | ___ _ __ 
 |  __  |/ _ \/ _` |/ _` |/ _ \ '__|
 | |  | |  __/ (_| | (_| |  __/ |   
 |_|  |_|\___|\__,_|\__,_|\___|_|   
                                    
                                    */

.header {
    overflow: hidden;
    background-color: #ffff;
   
    padding-left: 25%;
    padding-right: 25%;
    padding-top: 20px;
  }
  
  /* Style the header links */
  .header a {

      font-weight: bold;
    float: left;
    color:#303030;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 18px;
    line-height: 25px;
    border-radius: 4px;
   
  }
  
  /* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
  .header a.logo {
    font-size: 35px;
    font-family: var(--font-base,"PT Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif);
    font-weight: bold;
  
    
  }
  
  /* Change the background color on mouse-over */
  .header a:hover {
    cursor: pointer;
    color: #1279be;
    
    
  }
  
  /* Style the active/current link
  .header a.active {
    
    color: #303030;
  }
  */
  /* Float the link section to the right */
  .header-right {
    float: right;
  }
  
  /* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other 
  @media screen and (max-width: 500px) {
    .header a {
      float: none;
      display: block;
      text-align: left;
    }
    .header-right {
      float: none;
    }
  }
  */



  .Download-button{

    

    background-color: DodgerBlue;
    border: none;
    color: white;
    padding: 12px 20%;
    cursor: pointer;
    font-size: 20px;
    border-radius: 30px;
    outline: none;
    font-weight: bold;
    
    
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
    transition: background-color 0.4s;
  }

  .Download-button:hover /* Eigenschaften beim Überfahren mit der Maus */
      {
      background-color: #2b2b2b; /* Neue Farbe */
      }



  .software-banner{
    text-align: center;
    font-size: 200%;
    color: #303030;
    
  }

 
  body, html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  
   
    
  height:100%;
  
  display: block;
    
  
  }



/*   _____                            
 |_   _|                           
   | |  _ __ ___   __ _  __ _  ___ 
   | | | '_ ` _ \ / _` |/ _` |/ _ \
  _| |_| | | | | | (_| | (_| |  __/
 |_____|_| |_| |_|\__,_|\__, |\___|
                         __/ |     
                        |___/       */


.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image:  url(images/splash.jpg);
  
  min-height: 500px;
  max-height: 100000px;
  
  overflow: hidden;
    

 
  
  /* Set a specific height */
  
  margin-top: 20px;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Place text in the middle of the image */
.hero-text {
    
    font-size: 23px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}






/*                  _     
                   | |    
   ___ __ _ _ __ __| |___ 
  / __/ _` | '__/ _` / __|
 | (_| (_| | | | (_| \__ \
  \___\__,_|_|  \__,_|___/
                          */

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 500px;
  margin: auto;
  text-align: center;
  font-family: arial;
  border-radius: 20px;
  padding: 30px;
}

.price {
  color: grey;
  font-size: 22px;
}


.card button:hover {
  opacity: 0.7;
}

.Download-button2{
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 20%;
  cursor: pointer;
  font-size: 20px;
  border-radius: 30px;
  outline: none;
  font-weight: bold;
  
  
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
  transition: background-color 0.4s;
}


.Download-button2:hover 
{
  background-color: #2b2b2b;
}




.prouductbanner{
  text-align: center;
}

/* 
                    _                   _        _                 
                   | |                 | |      (_)                
   ___ __ _ _ __ __| |   ___ ___  _ __ | |_ __ _ _ _ __   ___ _ __ 
  / __/ _` | '__/ _` |  / __/ _ \| '_ \| __/ _` | | '_ \ / _ \ '__|
 | (_| (_| | | | (_| | | (_| (_) | | | | || (_| | | | | |  __/ |   
  \___\__,_|_|  \__,_|  \___\___/|_| |_|\__\__,_|_|_| |_|\___|_|   
                                                                   
                                                                   */

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
  justify-content: center;
  display: flex;
 
  
 
}
li {
  padding: 10px;
  float: left;
  text-decoration: none;
} 

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}