@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap');


ul.announcement {

    list-style:none;
    margin:0;
    padding-right: 0%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    text-align:center;
      background-color: rgba(187, 247, 255, 0.705);
      font-family: Garamond, serif;
    }
    
    li {
    
    }
    
    li a {
      color: rgb(192, 236, 247);
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-family: Garamond, serif;
    }
    
    li a:hover {
      background-color: rgb(171, 210, 226);
    }
  
  
  
  ul.menu {
    list-style:none;
    margin:0;
    padding-right: 2%;
    text-align:center;
    background-color: rgb(171, 210, 226);
      
  }
  
  li {
    display:inline-block;
  }
  
  li a {
    display:inline-block;
    padding:0;
      color: white;
      text-align: center;
  }
  
  li a:hover {
      background-color:
  }
  
  /* dropdown menu */

  .dropbtn {
    background-color: rgb(171, 210, 226);
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  .dropdown:hover .dropbtn {
    background-color: #rgb(233, 187, 187);
  }


  /* TEXT ON PICTURE */
  
  .container {
    position: relative;
    width: 100%;
    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;

  }
  
  .container img {
    width: 100%;
    height: auto;
    text-align: left;
  }
  
  .container .btn {
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: rgba(171, 210, 226, 0.733);
    color: rgb(0, 0, 0);
    font-size: 30px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: left;
    font-family: 'Raleway', sans-serif;
  }
  
  .container .btn:hover {
    background-color;
  }

  /* TEXT under picture */
.text_block {
  display: inline-block;
  background-color: rgba(171, 210, 226);
  color: #f1f1f1;
padding-top: 0%;
  border: none;
  width: 100%;
  height: relative;
  padding-left: 50;
  padding-right: 50;


}

.text {
  vertical-align: middle;
  font-size:25px;
  max-width: 40%;
  text-align: center;  
  margin-left: auto;
  margin-right: auto;
}


.text_block_2 {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0);
  color: #000000;
padding-top: 0%;
  border: none;
  width: 100%;
  height: 100px;
  padding-left: 50;
  padding-right: 50;
vertical-align: middle;
}

.text_2 {
  
  font-size:25px;
  max-width: 40%;
  text-align: center;  
  margin-left: auto;
  margin-right: auto;
  font-family:verdana;
}
.ecom_container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: auto;
  text-align: center;
}

.text_block_3 {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0);
  color: #000000;
padding-top: 0%;
  border: none;
  width: 100%;
  height: 100px;
  padding-left: 50;
  padding-right: 50;
vertical-align: middle;
}

.text_3 {
  
  font-size:35px;
  max-width: 40%;
  text-align: center;  
  margin-left: auto;
  margin-right: auto;
  font-family:verdana;
}

.block_4 {
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #ffffe6e8;
  color: rgb(0, 0, 0);
  text-align: center;
  font-family: Garamond, serif;
   }

  .b1,
  .b2,
  .b3,
  .b4 {
    position: relative;
    display: inline-block;
    text-align: left;
    font-size: 20px;
    padding-bottom: 0%;
    width: calc(100% / 4);
    padding-top: 0%;
    padding-left: 3%;
    padding-right: 3%;
    top: 0px;
    vertical-align: text-top;
  }

  .text_block_5 {
    display: inline-block;
    background-color: rgb(255, 255, 255);
    color: #000000;
  padding-top: 0%;
    border: none;
    width: 100%;
    height: 100px;
    padding-left: 50;
    padding-right: 50;
  vertical-align: middle;
  }
  
  
  .text_5 {
    
  font-size:35px;
  max-width: 40%;
  text-align: center;  
  margin-left: auto;
  margin-right: auto;
  font-family:verdana;
  }

/* picture of features */

.featured {
  display: block;
  background-color: white;
  position: relative;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: auto;
  text-align: center;
}


    /* FOOTER */
  .footer {
      left: 0;
      bottom: 0;
      width: 100%;
      background-color: #98b69481;
      color: white;
      text-align: center;
      font-family: Garamond, serif;
       }
  
       
        .f1 {
       
          padding: 0;
          margin: 0;
        }
       
        .f2 {
  
       
        }
       
        .f3 {
      
       
        }
        .f4 {
       
       
        }
        .f5 {
       
       
       
        }
       
        .f6 {
       
       
       
        }
  
        .f1,
        .f2,
        .f3,
        .f4,
        .f5,
        .f6 {
          position: relative;
          display: inline-block;
          text-align: left;
          font-size: 20px;
          padding-bottom: 0%;
          width: calc(100% / 6);
          padding-top: 0%;
          padding-left: 1%;
          padding-right: 1%;
          top: 0px;
          vertical-align: text-top;
        }