/*Modal 1*/

        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgb(0 42 11 / 42%); /* Black w/ opacity */
        }


        /*Modal transition*/
        .modal{
            animation: fadeInAnimation ease 2s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }
        @keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }


        /* Modal Content */
        .modal-content {
            background-color: ;
            margin: auto;
            padding: 20px;
            border: 1px solid #02c35842;
            width: 50%;
            /*border-radius: 5px;*/
        }


        @media only screen and (max-width: 520px){ 
 
            
            .modal-content {
                padding: 8px;
                width: 70%;
            }

        }


        #myBtn1 {
          bottom: 20px;
          right: 30px;
          font-size: 14px;
          border: none;
          outline: none;
          background-color: #00544b;
          color: #72eda9;
          cursor: pointer;
          padding: 12px;
          border-radius: 5px;

          /*margin-top: 10px;*/
          border: 2px solid #72eda9cc;
        }


        #myBtn1:active:focus {
                box-shadow: 0 0 0 0.1rem rgb(114 237 169 / 46%) !important;
                background: transparent !important;
            }


         #myBtn1:hover {
                background-color: #01584eb0;
            }



        /* The Close Button */
        .close1 {
            color: #02c358;
            float: right;
            font-size: 28px;
            font-weight: bold;
            padding: 5px 15px;
            border: 1px solid #02c358;
            border-radius: 5px;
            }

        .close1:hover,
        .close1:focus {
            color: #02c358;
            text-decoration: none;
            cursor: pointer;
        }


 /*Modal 2*/


         /* The Modal (background) */
        .modal2 {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgb(0 42 11 / 50%); /* Black w/ opacity */
        }


        /*Modal transition*/
        .modal2{
            animation: fadeInAnimation ease 2s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }
        @keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }


        /* Modal Content */
        .modal-content2 {
            background-color: ;
            margin: auto;
            padding: 20px;
            border: 1px solid #02c35842;
            width: 50%;
            /*border-radius: 5px;*/
        }


        @media only screen and (max-width: 520px){ 
 
            
            .modal-content2 {
                padding: 8px;
                width: 70%;
            }

        }


        
        #myBtn2 {
          bottom: 20px;
          right: 30px;
          font-size: 14px;
          border: none;
          outline: none;
          background-color: #00544b;
          color: #72eda9;
          cursor: pointer;
          padding: 12px;
          border-radius: 5px;

          /*margin-top: 10px;*/
          border: 2px solid #72eda9cc;
        }


        #myBtn2:active:focus {
                box-shadow: 0 0 0 0.1rem rgb(114 237 169 / 46%) !important;
                background: transparent !important;
            }


         #myBtn2:hover {
                background-color: #01584eb0;
            }


        /* The Close Button */
        .close2 {
            color: #02c358;
            float: right;
            font-size: 28px;
            font-weight: bold;
            padding: 5px 15px;
            border: 1px solid #02c358;
            border-radius: 5px;
            }

        .close2:hover,
        .close2:focus {
            color: #02c358;
            text-decoration: none;
            cursor: pointer;
        }



   /*Modal 3*/


         /* The Modal (background) */
        .modal3 {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgb(0 42 11 / 50%); /* Black w/ opacity */
        }


        /*Modal transition*/
        .modal3{
            animation: fadeInAnimation ease 2s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }
        @keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        /* Modal Content */
        .modal-content3 {
            background-color: ;
            margin: auto;
            padding: 20px;
            border: 1px solid #02c35842;
            width: 50%;
            /*border-radius: 5px;*/
        }


        @media only screen and (max-width: 520px){ 
 
            
            .modal-content3 {
                padding: 8px;
                width: 70%;
            }

        }


         #myBtn3 {
          bottom: 20px;
          right: 30px;
          font-size: 14px;
          border: none;
          outline: none;
          background-color: #00544b;
          color: #72eda9;
          cursor: pointer;
          padding: 12px;
          border-radius: 5px;

          /*margin-top: 10px;*/
          border: 2px solid #72eda9cc;
        }


        #myBtn3:active:focus {
                box-shadow: 0 0 0 0.1rem rgb(114 237 169 / 46%) !important;
                background: transparent !important;
            }


         #myBtn3:hover {
                background-color: #01584eb0;
            }



        /* The Close Button */
        .close3 {
            color: #02c358;
            float: right;
            font-size: 28px;
            font-weight: bold;
            padding: 5px 15px;
            border: 1px solid #02c358;
            border-radius: 5px;
            }

        .close3:hover,
        .close3:focus {
            color: #02c358;
            text-decoration: none;
            cursor: pointer;
        }



  /*Modal 4*/


         /* The Modal (background) */
        .modal4 {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgb(0 42 11 / 50%); /* Black w/ opacity */
        }


        /*Modal transition*/
        .modal4{
            animation: fadeInAnimation ease 2s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }
        @keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        /* Modal Content */
        .modal-content4 {
            background-color: ;
            margin: auto;
            padding: 20px;
            border: 1px solid #02c35842;
            width: 50%;
            /*border-radius: 5px;*/
        }


        @media only screen and (max-width: 520px){ 
 
            
            .modal-content4 {
                padding: 8px;
                width: 70%;
            }

        }


         #myBtn4 {
          bottom: 20px;
          right: 30px;
          font-size: 14px;
          border: none;
          outline: none;
          background-color: #00544b;
          color: #72eda9;
          cursor: pointer;
          padding: 12px;
          border-radius: 5px;

          /*margin-top: 10px;*/
          border: 2px solid #72eda9cc;
        }


        #myBtn4:active:focus {
                box-shadow: 0 0 0 0.1rem rgb(114 237 169 / 46%) !important;
                background: transparent !important;
            }


         #myBtn4:hover {
                background-color: #01584eb0;
            }


        /* The Close Button */
        .close4 {
            color: #02c358;
            float: right;
            font-size: 28px;
            font-weight: bold;
            padding: 5px 15px;
            border: 1px solid #02c358;
            border-radius: 5px;
            }

        .close4:hover,
        .close4:focus {
            color: #02c358;
            text-decoration: none;
            cursor: pointer;
        }



          /*Modal 5*/


         /* The Modal (background) */
        .modal5 {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgb(0 42 11 / 50%); /* Black w/ opacity */
        }

        /*Modal transition*/
        .modal5{
            animation: fadeInAnimation ease 2s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }
        @keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        /* Modal Content */
        .modal-content5 {
            background-color: ;
            margin: auto;
            padding: 20px;
            border: 1px solid #02c35842;
            width: 50%;
            /*border-radius: 5px;*/
        }


        @media only screen and (max-width: 520px){ 
 
            
            .modal-content5 {
                padding: 8px;
                width: 70%;
            }

        }


        #myBtn5 {
          bottom: 20px;
          right: 30px;
          font-size: 14px;
          border: none;
          outline: none;
          background-color: #00544b;
          color: #72eda9;
          cursor: pointer;
          padding: 12px;
          border-radius: 5px;

          /*margin-top: 10px;*/
          border: 2px solid #72eda9cc;
        }


        #myBtn5:active:focus {
                box-shadow: 0 0 0 0.1rem rgb(114 237 169 / 46%) !important;
                background: transparent !important;
            }


         #myBtn5:hover {
                background-color: #01584eb0;
            }



        /* The Close Button */
        .close5 {
            color: #02c358;
            float: right;
            font-size: 28px;
            font-weight: bold;
            padding: 5px 15px;
            border: 1px solid #02c358;
            border-radius: 5px;
            }

        .close5:hover,
        .close5:focus {
            color: #02c358;
            text-decoration: none;
            cursor: pointer;
        }


@media only screen and (max-width: 360px){ 
 
 #myBtn1 {
            bottom: 20px;
            right: 30px;
            font-size: 14px;
            /* border: none; */
            border: 2px solid #72eda9a1;
            outline: none;
            background-color: #01584ee3;
            color: #72eda9;
            cursor: pointer;
            padding: 8px;
            border-radius: 5px;
            margin-top: 0; 
        }

  #myBtn1:active:focus {
    box-shadow: 0 0 0 0.1rem rgb(114 237 169 / 46%) !important;
    background: transparent !important;
       }



 #myBtn2 {
            bottom: 20px;
            right: 30px;
            font-size: 14px;
            /* border: none; */
            border: 2px solid #72eda9a1;
            outline: none;
            background-color: #01584ee3;
            color: #72eda9;
            cursor: pointer;
            padding: 8px;
            border-radius: 5px;
            margin-top: 0; 
        }

  #myBtn2:active:focus {
    box-shadow: 0 0 0 0.1rem rgb(114 237 169 / 46%) !important;
    background: transparent !important;
       }


  
  #myBtn3 {
            bottom: 20px;
            right: 30px;
            font-size: 14px;
            /* border: none; */
            border: 2px solid #72eda9a1;
            outline: none;
            background-color: #01584ee3;
            color: #72eda9;
            cursor: pointer;
            padding: 8px;
            border-radius: 5px;
            margin-top: 0; 
        }

  #myBtn3:active:focus {
    box-shadow: 0 0 0 0.1rem rgb(114 237 169 / 46%) !important;
    background: transparent !important;
       }



  #myBtn4 {
            bottom: 20px;
            right: 30px;
            font-size: 14px;
            /* border: none; */
            border: 2px solid #72eda9a1;
            outline: none;
            background-color: #01584ee3;
            color: #72eda9;
            cursor: pointer;
            padding: 8px;
            border-radius: 5px;
            margin-top: 0; 
        }

  #myBtn4:active:focus {
    box-shadow: 0 0 0 0.1rem rgb(114 237 169 / 46%) !important;
    background: transparent !important;
       }



  #myBtn5 {
            bottom: 20px;
            right: 30px;
            font-size: 14px;
            /* border: none; */
            border: 2px solid #72eda9a1;
            outline: none;
            background-color: #01584ee3;
            color: #72eda9;
            cursor: pointer;
            padding: 8px;
            border-radius: 5px;
            margin-top: 0; 
        }

  #myBtn5:active:focus {
    box-shadow: 0 0 0 0.1rem rgb(114 237 169 / 46%) !important;
    background: transparent !important;
       }

 }