/* Create a top navigation bar with a black background color  */

html {

  margin: 0;
}

body {

   
  background-color: #ffffff;
  padding: 0px;
  font-family: Verdana, sans-serif;
}
/* TODO: add sticky nav bar with help of JS:https://www.w3schools.com/howto/howto_js_navbar_sticky.asp */
.topnav {
    position: fixed;
    top: 0%;
    left: 0%;
    height: 50px;
    width: 100%;
    padding-right: 20px;
    background-color:  rgba(125, 186, 0, 1); /*#333;*/
    overflow: hidden;
   
    z-index: 999;
  }



.top-bar {
    display: none;
  }

   /* Menu Container */
  .menu {
    display: none;
    
  }

  .menu-btn {
   
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    
  }
   
  /* Style the links inside the navigation bar */
  .topnav a {

    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
  
    background-color: #ddd;
    color: black;
  }
  
  /* Create a right-aligned (split) link inside the navigation bar */
  .topnav a.split {
  
    float: right;
    background-color: rgb(182, 10, 10);
    color: rgb(255, 255, 255);
  }

  .topnav a.split:hover {
  
    background-color: #ddd;
    color:rgb(182, 10, 10);
  }

   /*  div for green box*/

  .positioned-div {
    position: absolute;
   
    top: 50px;;
    left: 0;
    width: 100%;
    
    
  }
  
  .green-box {
    position: relative;
    top: 10px;
    left: 0px;
    width: 100%;
    height: 250px;
    background-color: rgb(125, 186, 0);
  
    align-items: center;
    z-index: 0;
  }

  

  #logo {
    position: absolute;
    top: 50%;
    transform: translate(0 , -50%);

    padding-left: 70px;
    width: 500px;
    
  }
 
  #shadow {
    /*box-shadow: 2px 2px 5px #777, -2px -2px 5px #ccc;*/
    border-radius: 10px;
  }
  .green-box p {
    color: white;
    font-size: 20px;
    line-height: 10px;
   
  } 

  
  .alltext {
    font-family: Verdana, sans-serif;   /*'Rajdhani', serif;*/
    font-size: 10px;
  }

  .onecolumntext {
    display: flex;
    position: relative;
    top: 5vh;
   
    font-family: Verdana, sans-serif;
    font-size: 20px;
    /*margin:0% 10% 5% 10%;*/
    padding: 5%;
    line-height: 30px;
    text-align: justify;
    
  }

  .images {
    
    display:flex;
    width: 20%;
    height: 20%;
    flex-direction: column;
    margin-right: 60px; /* add some space between the images and text */
    margin-top: 60px;

    
    
    
  }
  .images2 {
    position: relative;
    left: 30%;
    
    transform: translate(-30%, 0);
    white-space: nowrap;

  
      
  }

  .images2 img{
    position: relative;
    display:inline-block;
    vertical-align: top;
   
    width:50%;
    /*padding:15px;*/  
      

  }

  .images img {
    margin-bottom: 50%; /* add a 10px margin bottom to each image */
  }

  .text {
    column-count: 1; /* set the column count to 1*/
    width: 80%;
  }

  p{
    display:block;
  }

 

  hr {

    position: relative;
    top: 1vh;
    border: 0;
    height: 1px;
    padding: 0;
    margin: 0%;
    background-color: grey;
  }

  * {
    box-sizing: border-box;
  }
  
  
   
  
  h1 {
    display:block;
    font-size: 30px;
    word-break: break-all;
  }
  
  .row {
    margin: 8px -16px;
    font-size: 20px;
  }
  
  /* Add padding BETWEEN each column (if you want) */
  .row,
  .row > .column {
    padding: 8px;
  }
  
  /* Create four equal columns that floats next to each other */
  .column {
    float: left;
    width: 25%;
  }
  
  /* Clear floats after rows */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Content */
  .content {
    background-color: white;
    padding: 10px;
  }
  
 
  
 

  p {
    /*font-style: italic;*/
    font-weight: normal;
    margin: 5% 10% 5% 10%;  /* top right bottom left */

  }

  #empty.p {

    font-weight: normal;
  }

   /* Center the iframe element on the page */
   .myIframe {
       position: relative;
       left: 50%;
       transform: translate(-50%, 0);
       margin-top: 20px;
       width: 550px;;
       height: 450px;
       /*border: 1px solid gray;*/
       border-radius: 10px;
       box-shadow: 5px 5px 10px #ccc;
       background-color: rgb(125, 186, 0);
            
   }

   .positioned-div-bottom {
    position: absolute;   
    left: 0%;   
    width: 100%;
    background-color: rgb(228, 20, 20); /*remove this */
    
  }
  
  
  .bottom-container {
        position:relative;
        bottom: 0;
        display: flex;
        left: 0px;
        width: 100%;
        height: 130px;    
        background-color: rgb(48, 48, 48);
        padding: 0px;
       
        
      }

      .left-column {
        position: relative;
        top: 0px;
       
        left: 0px;
        width: 200px;
        height: 130px;
        background-color: rgb(48, 48, 48);
        color: white;
        text-align: left;
        padding: 25px;
        font-size: 15px;
        line-height: .8;
      
        
        
        
      }

    
      .right-column {
        position: absolute;
        top: 50%;
        transform: translate(0% , -50%);
        right: 0px;
        width: 250px;
        background-color: rgb(48, 48, 48);
        
      }
      .bottom_logo{

        width: 200px;
        height: auto;
        margin-left: 30px;

      }
      a {
        text-decoration: none; /* remove underline */
        color: white; /* set text color to white */
        display: block; /* display links as block elements to stack them */
        line-height: 1.5;
      }
      

    /* Responsive layout - makes a two column-layout instead of four columns */
  @media only screen and (max-width: 2000px) {


    .images {
      display: flex;
    }
    .images2    {
      display: none;
    }
    .images3    {
      display: none;
    }

    .onecolumntext {
      display: flex;
      position: relative;
      top: 5vh;
     
      font-family: Verdana, sans-serif;
      font-size: 20px;
      /*margin:0% 10% 5% 10%;*/
      padding: 5%;
      line-height: 30px;
      text-align: justify;
      
    }


   
  }

    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media only screen and (max-width: 1500px) {
    .images {
      display: none;
    }


    .images2    {
      
      display: inline-block;
      justify-content: center;
      position: relative;
      left: 50%;
      
      transform: translate(-50%, 0);
    }

    .images2 img {

      width: 350px;
    }

    .images3    {
      display: none;
    }


    .green-box{
      height: 150px;
     
    }

    #logo {
    padding-left: 42px;
    width: 311px;
    }

    
    
     
  }

  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  /* start the vertical menue here */
@media only screen and (max-width: 1020px) and (min-height: 450px){
  .images {
    display: none;
  }
  .images2    {
    display:none;
  }

  .images3    {
    
   
    display:flex;
    justify-content: center;
  }

  .images3 img {
   
   
    
    max-width:300px;
  }

  .positioned-div {
    position: absolute;
    top: 50px;;
    left: 0;
    width: 100%;
    
  }

  .green-box{
    height: 150px;
    background-color:  rgb(125, 186, 0);

  }

      #logo {
    padding-left: 42px;
    width: 311px;
    }

  .topnav  {
    display: none;

  }

    .topnav a {
      display: none;
      float: left;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 20px;
    }
    .top-bar {
      position: fixed;

      top: 0%;
      left: 0%;
      height: 50px;
      width: 100%;
      
      z-index: 1;

      background-color:rgba(125, 186, 0, 1); /*#333;*/
      display: flex;
      align-items: center;
    }

     /* Menu Container */
     .menu {
      display: block;
      position: absolute;
   
      margin-block-start: 150px;
      height: 300px;
      width: 250px;
      position: fixed;
      z-index: 995;
      top: 60px;
      right:-250px;
      background-color:rgba(28, 29, 27, 0.95); /*#333;*/
      overflow-x: hidden;
      transition: 0.5s;
      
    }
    	.menu-pos {
        position:absolute;
        top: 10px;


      }

      /* Menu Items */
      .menu a {
             
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-family: Verdana, sans-serif;
        font-size: 17px;
        color: #f1eeee;
        display: block;
        transition: 0.3s;
        z-index: 995;
      }

      /* Menu button */
      .menu-btn {
        position: absolute;
        right: 0;
        margin-left: 20px;
        font-size: 20px;
        color: white;
        cursor: pointer;
      }


      /* Menu button */
      .right_menu-btn {
        position: absolute;
        right: 0;
        margin-left: 20px;
        font-size: 20px;
        color: white;
        cursor: pointer;
      }

      .menu-open .menu {
        right: 0;
      }


      .menu a:hover {
  
        background-color: #ddd;
        color: black;
      }
      
      .menu a.split {
      
        
        background-color: rgb(179, 6, 6);
        color: rgb(255, 255, 255);
      }
    
      .menu a.split:hover {
      
        background-color: #ddd;
        color:rgb(180, 13, 13);
      }


    h1 {
      font-size: 20px;
      word-break: break-all;
    }
    .onecolumntext {
      display: flex;
      position: relative;
      top: 5vh;
     
      font-family: Verdana, sans-serif;
      font-size: 15px;
      /*margin:0% 10% 5% 10%;*/
      padding: 5%;
      line-height: 25px;
      text-align:left;
      
    }
   
}

@media only screen and (max-width: 1020px) and (max-height: 450px){
  .images {
    display: none;
  }
  .images2    {
    display:none;
  }

  .images3    {
    
   
    display:flex;
    justify-content: center;
  }

  .images3 img {
   
   
    
    max-width:300px;
  }

  .positioned-div {
    position: absolute;
    top: 50px;;
    left: 0;
    width: 100%;
    
  }

  .green-box{
    height: 150px;
    background-color:  rgb(125, 186, 0);

  }

      #logo {
    padding-left: 42px;
    width: 311px;
    }

  .topnav  {
    display: none;

  }

    .topnav a {
      display: none;
      float: left;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 20px;
    }
    .top-bar {
      position: fixed;

      top: 0%;
      left: 0%;
      height: 50px;
      width: 100%;
      
      z-index: 1;

      background-color:rgba(125, 186, 0, 1); /*#333;*/
      display: flex;
      align-items: center;
    }

     /* Menu Container */
     .menu {
      display: block;
      position: absolute;
   
      margin-block-start: 0px;
      height: 300px;
      width: 250px;
      position: fixed;
      z-index: 995;
      top: 60px;
      right:-250px;
      background-color:rgba(28, 29, 27, 0.95); /*#333;*/
      overflow-x: hidden;
      transition: 0.5s;
      
    }
    	.menu-pos {
        position:absolute;
        top: 10px;


      }

      /* Menu Items */
      .menu a {
             
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-family: Verdana, sans-serif;
        font-size: 17px;
        color: #f1eeee;
        display: block;
        transition: 0.3s;
        z-index: 995;
      }

      /* Menu button */
      .menu-btn {
        position: absolute;
        right: 0;
        margin-left: 20px;
        font-size: 20px;
        color: white;
        cursor: pointer;
      }

      /* Menu button */
      .right_menu-btn {
        position: absolute;
        right: 0;
        margin-left: 20px;
        font-size: 20px;
        color: white;
        cursor: pointer;
      }

      .menu-open .menu {
        right: 0;
      }


      .menu a:hover {
  
        background-color: #ddd;
        color: black;
      }
      
      /* Create a right-aligned (split) link inside the navigation bar */
      .menu a.split {
      
        
        background-color: rgb(179, 6, 6);
        color: rgb(255, 255, 255);
      }
    
      .menu a.split:hover {
      
        background-color: #ddd;
        color:rgb(180, 13, 13);
      }



    h1 {
      font-size: 20px;
      word-break: break-all;
    }
    .onecolumntext {
      display: flex;
      position: relative;
      top: 5vh;
     
      font-family: Verdana, sans-serif;
      font-size: 15px;
      /*margin:0% 10% 5% 10%;*/
      padding: 5%;
      line-height: 25px;
      text-align:left;
      
    }
   
}