@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,300&display=swap');

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

    .CStep {
      font-size: 40px;
    }
    .TStep{
      font-size: 20px;
    }
     .navbar {
       overflow: hidden;
       background-color: #000000;
       position: fixed;
       bottom: 0;
       width: 100%;
       margin: 0 0 0 0;
     }

     .navbar a {
       float: left;
       display: block;
       color: #FFFFFF;
       text-align: center;
       padding: 14px 16px;
       text-decoration: none;
       font-size: 18px;
     }

     .navbar a:hover {
       background: #704214;
       color: black;
       border-radius: 25px;
     }

     .navbar a.active {
       background-color: #704214;
       color: white;
     }
     @media screen and (max-width: 425px) {
       .navbar {
         overflow: hidden;
         background-color: #000000;
         position: fixed;
         bottom: 0;
         width: 100%;
         margin: 0 0 0 0;
       }

       .navbar a {
         float: left;
         display: block;
         color: #FFFFFF;
         text-align: center;
         padding: 14px 16px;
         text-decoration: none;
         font-size: 13px;
         margin: 0 0 0 0;
       }

       .navbar a:hover {
         background: #704214;
         color: black;
         border-radius: 25px;
       }

       .navbar a.active {
         background-color: #704214;
         color: white;
     }
     }
      .buttonsss {
           position: relative;
           background-color: #FFFFFF;
           font-size: 15px;
           color: #704214;
           padding: 70px 20px;
           width: 140px;
           height: 150px;
           text-decoration: none;
           overflow: hidden;
           cursor: pointer;
           border: 1px solid #704214;
     	  border-radius: 25px;
     	  margin: 8px 5px;
     	  }

       .buttonss {
           position: relative;
           background-color:  #FFFFFF;
           font-size: 15px;
           color: #704214;
           padding: 70px 20px;
           width: 140px;
           height: 150px;
           text-decoration: none;
           overflow: hidden;
           cursor: pointer;
           border: 1px solid #704214;
     	  border-radius: 25px;
     	  margin: 8px 5px;
     	  }

         .button {
           position: relative;
           background-color: #FFFFFF;
           font-size: 15px;
           color: #704214;
           padding: 70px 20px;
           width: 140px;
           height: 150px;
           text-decoration: none;
           overflow: hidden;
           cursor: pointer;
     	  border: 1px solid #704214;
     	  border-radius: 25px;
     	    margin: 8px 5px;
     	  }
         .buttons {
           position: relative;
           background-color: #FFFFFF;
           font-size: 15px;
           color: #704214;
           padding: 70px 20px;
           width: 140px;
           height: 150px;
           text-decoration: none;
           overflow: hidden;
           cursor: pointer;
           border: 1px solid #704214;
     	  border-radius: 25px;
     	  margin: 8px 5px;
     	  }

         @media screen and (max-width: 425px) {
           .buttonsss {
                position: relative;
                background-color: #FFFFFF;
                font-size: 15px;
                color: #704214;
                padding: 70px 20px;
                width: 75px;
                height: 120px;
                text-decoration: none;
                overflow: hidden;
                cursor: pointer;
                border: 1px solid #704214;
          	  border-radius: 25px;
          	  margin: 2px 2px;
          	  }

            .buttonss {
                position: relative;
                background-color:  #FFFFFF;
                font-size: 15px;
                color: #704214;
                padding: 70px 20px;
                width: 75px;
                height: 120px;
                text-decoration: none;
                overflow: hidden;
                cursor: pointer;
                border: 1px solid #704214;
          	  border-radius: 25px;
          	  margin: 2px 2px;
          	  }

              .button {
                position: relative;
                background-color: #FFFFFF;
                font-size: 15px;
                color: #704214;
                padding: 70px 20px;
                width: 75px;
                height: 120px;
                text-decoration: none;
                overflow: hidden;
                cursor: pointer;
          	  border: 1px solid #704214;
          	  border-radius: 25px;
          	    margin: 2px 2px;
          	  }
              .buttons {
                position: relative;
                background-color: #FFFFFF;
                font-size: 15px;
                color: #704214;
                padding: 70px 20px;
                width: 75px;
                height: 120px;
                text-decoration: none;
                overflow: hidden;
                cursor: pointer;
                border: 1px solid #704214;
          	  border-radius: 25px;
          	  margin: 2px 2px;
          	  }

         }
     .click {
       background-color: #171190;
       border: none;
       color: white;
       padding: 15px 30px;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       font-size: 16px;
       border-radius: 70px;
     }
     .click:hover {
     color: #000000;
     background-color: #000000;
     }
     body {
     background-color: #ebdbca;
     font-family: 'Montserrat', sans-serif;
     margin: 0;
     }
     /* The sidebar menu */
     .sidebar {
       height: 100%; /* 100% Full-height */
       width: 0; /* 0 width - change this with JavaScript */
       position: fixed; /* Stay in place */
       z-index: 1; /* Stay on top */
       top: 0;
       left: 0;
       background-color: #111; /* Black*/
       overflow-x: hidden; /* Disable horizontal scroll */
       padding-top: 60px; /* Place content 60px from the top */
       transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
     }

     /* The sidebar links */
     .sidebar a {
       padding: 8px 8px 8px 32px;
       text-decoration: none;
       font-size: 25px;
       color: silver;
       display: block;
       transition: 0.5s;
       border-radius: 25px;
     }

     .sidebar a:hover {
       background-color: #704214;
        border-radius: 25px;
        color: #5a5a5a;
     }

     /* Position and style the close button (top right corner) */
     .sidebar .closebtn {
       font-size: 40px;
     }

     /* The button used to open the sidebar */
     .openbtn {
       cursor: pointer;
        border-radius: 25px;
       background-color: black;
     }
     .categories {
     background-color: #000000;
     }
     .categories a {
       display: block;
       color: #FFFFFF;
       text-align: center;
       padding: 20px 20px;
       text-decoration: none;
       background-color: #704214;
       border: 1px solid #FFFFFF;
     }
     .categories a:hover {
     color: #000000;
     }
     .openbtn:hover {
       background-color: #704214;
        border-radius: 25px;
     }

     /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
     #main {
       transition: margin-left .5s; /* If you want a transition effect */
       padding: 15px;
     }

     /* On smaller screens, where height is less than 470px, change the style of the sidenav (less padding and a smaller font size) */
     @media screen and (max-height: 470px) {
       .sidebar {padding-top: 15px;}
       .sidebar a {font-size: 18px;}
     }
     ul {
     background-color: #000000;
      list-style-type: none;
       margin: 0;
       padding: 0;
       overflow: hidden;
       top: 0;
       width: 100%;
      position: fixed;
     }

     .list {
       float: left;
     }

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

     li a:hover {
       background-color: #704214;
       color: #FFFFFF;
        border-radius: 25px;
     }
     ol li {
     display: inline;
     float: left;
     }

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


     .activity {
     background-color: #5a5a5a;
      border-radius: 25px;
     }

     .active {
       background-color: #704214;
       border-radius: 25px;
     }

     table tr td {
     display: inline;
     float: left;
     margin: 0 10px;
     }

     td a {
       display: block;
       color: white;
       text-align: center;
       padding: 14px 16px;
       text-decoration: none;
       background-color: black;
     }
     td a:hover {
     background-color: #FFFFFF;
      border-radius: 25px;
      color: #000000;
     }

     .sub {
     background-color: #704214;
     position: bottom;
     }
     #myInput {
     border-radius: 70px;
     }

     #myBtn {
       display: none; /* Hidden by default */
       position: fixed; /* Fixed/sticky position */
       bottom: 20px; /* Place the button at the bottom of the page */
       right: 10px; /* Place the button 30px from the right */
       z-index: 99; /* Make sure it does not overlap */
       border: none; /* Remove borders */
       outline: none; /* Remove outline */
       background-color: #000000; /* Set a background color */
       color: white; /* Text color */
       cursor: pointer; /* Add a mouse pointer on hover */
       padding: 15px; /* Some padding */
       border-radius: 70px; /* Rounded corners */
       font-size: 18px; /* Increase font size */
     }

     #myBtn:hover {
       background-color: #704214; /* Add a dark-grey background on hover */
     }
     .logo {
     margin: 15px 10px 0 0;
     }
     div a {
     margin: 0 20px 0 0;
     }
     .bgimg {
     background-image: url('BG.png');
     height: 400px;
     width: auto;
     margin: 0 0 0 0;
     }
     .responsive {
       width: 100%;
       height: auto;
     }

     .Comments {
       width: 75%;
       height: auto;
     }
     /*.mediaFix {font-size: 70px;}
     @media screen and (max-width: 425px) {
       .mediaFix {font-size: 16px;}
     }*/
     .roboto {
       font-family: 'Roboto', sans-serif;
       font-size:40px;
       text-align: center;
       color: #704214;
     }