@media only screen and (min-width: 768px) {
    /* The Modal (background) */
        .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 999; /* Sit on top */
        padding-top: 15%; /* 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: rgba(0,0,0,0.4); /* Black w/ opacity */
        }
        
        /* Modal Content */
        .modal-content {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        padding: 0;
        border: 1px solid #888;
        width: 50%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
        }


        .modal2 {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 999; /* Sit on top */
        padding-top: 15%; /* 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: rgba(0,0,0,0.4); /* Black w/ opacity */
        }
        
        /* Modal Content */
        .modal-content2 {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        padding: 0;
        border: 1px solid #888;
        width: 50%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
        }


        .btn-change{
        width: 300px;
        height: 45px;
        background: transparent;
        box-shadow: 0 0 1px #ccc;
        -webkit-transition: all 0.5s ease-in-out;
        color: #fff;
        border-radius: 10px;
    }
    .btn-change:hover{
        -webkit-transform: scale(1.1);
        background: #f8991d;
    }


    .btn-changepopup{
        width:300px;
        background-color: #314967;
        height: 60px;
        box-shadow: 0 0 1px #ccc;
        -webkit-transition: all 0.5s ease-in-out;
        color: #fff;
        border-radius: 10px;
        font-size: 40px;
        margin-bottom: 30px;
    }
    .btn-changepopup:hover{
        -webkit-transform: scale(1.1);
        background: #f8991d;
    }
    .modal-body2 {
        padding: 2px 16px;
        height: 280px;       
        margin-top: 32px;
        margin-bottom: 55px;
    }
    .modal-body {
        padding: 2px 16px;
        height: 280px;
        margin-bottom: -50px;
    }
    }
    @media only screen and (min-width: 1440px) {
    /* The Modal (background) */
        .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 999; /* Sit on top */
        padding-top: 15%; /* 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: rgba(0,0,0,0.4); /* Black w/ opacity */
        }
        
        /* Modal Content */
        .modal-content {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        padding: 0;
        border: 1px solid #888;
        width: 50%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
        }


        .modal2 {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 999; /* Sit on top */
        padding-top: 15%; /* 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: rgba(0,0,0,0.4); /* Black w/ opacity */
        }
        
        /* Modal Content */
        .modal-content2 {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        padding: 0;
        border: 1px solid #888;
        width: 50%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
        }


        .btn-change{
        width: 300px;
        height: 45px;
        background: transparent;
        box-shadow: 0 0 1px #ccc;
        -webkit-transition: all 0.5s ease-in-out;
        color: #fff;
        border-radius: 10px;
    }
    .btn-change:hover{
        -webkit-transform: scale(1.1);
        background: #f8991d;
    }


    .btn-changepopup{
        width:300px;
        background-color: #314967;
        height: 60px;
        box-shadow: 0 0 1px #ccc;
        -webkit-transition: all 0.5s ease-in-out;
        color: #fff;
        border-radius: 10px;
        font-size: 40px;
        margin-bottom: 30px;
    }
    .btn-changepopup:hover{
        -webkit-transform: scale(1.1);
        background: #f8991d;
    }
    .modal-body2 {
        padding: 2px 16px;
        height: 232px;
        margin-bottom: 32px;     
    }
    .modal-body {
        padding: 2px 16px;
        height: 200px;
        margin-top: 81px;
        margin-bottom: 32px;
    }
    }
    
    

    @media only screen and (max-width: 768px) {
        .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 999; /* Sit on top */
        padding-top: 15%; /* 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: rgba(0,0,0,0.4); /* Black w/ opacity */
        }
        
        /* Modal Content */
        .modal-content {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        padding: 0;
        border: 1px solid #888;
        width: 50%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s;
        margin-top: 200px;
        }


        .modal2 {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 999; /* Sit on top */
        padding-top: 15%; /* 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: rgba(0,0,0,0.4); /* Black w/ opacity */
        font-size: 50px;
        }
        
        /* Modal Content */
        .modal-content2 {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        padding: 0;
        border: 1px solid #888;
        width: 50%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s;
        margin-top: 200px;
        }

        .btn-change{
            width: 300px;
            height: 45px;
            background: transparent;
            box-shadow: 0 0 1px #ccc;
            -webkit-transition: all 0.5s ease-in-out;
            color: #fff;
            border-radius: 10px;
            margin-right: 50px;
        }
        .btn-change:hover{
            -webkit-transform: scale(1.1);
            background: #f8991d;
        }


        .btn-changepopup{
            width: 110px;
            background-color: #314967;
            height: 60px;
            box-shadow: 0 0 1px #ccc;
            -webkit-transition: all 0.5s ease-in-out;
            color: #fff;
            border-radius: 10px;
            margin-top: -100px;
            margin-bottom: 50px;
            margin-right:15px;
            font-size: 17px;
        }
        .btn-changepopup:hover{
            -webkit-transform: scale(1.1);
            background: #f8991d;
        }
        .modal-body2 {
            padding: 2px 16px;
            height: 300px;            
        }
        .modal-body {
            padding: 2px 16px;
            height: 300px;
        }
    }

    

    
    
    /* Add Animation */
    @-webkit-keyframes animatetop {
      from {top:-50%; opacity:0} 
      to {top:0; opacity:1}
    }
    
    @keyframes animatetop {
      from {top:-50%; opacity:0}
      to {top:0; opacity:1}
    }
    
    /* The Close Button */
    .close {
      color: rgb(19, 168, 255);
      float: right;
      font-size: 28px;
      font-weight: bold;
    }
    
    .close:hover,
    .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }
    
    .modal-header {
      padding: 2px 16px;
      background-color: #ffffff;
      color: rgb(0, 0, 0);
    }
    
    
    
    .modal-footer {
      padding: 2px 16px;
      background-color: #ffffff;
      color: rgb(0, 0, 0);
    }
    
    
    /********************/


    /* The Modal (background) */
    
    
    /* Add Animation */
    @-webkit-keyframes animatetop {
      from {top:-50%; opacity:0} 
      to {top:0; opacity:1}
    }
    
    @keyframes animatetop {
      from {top:-50%; opacity:0}
      to {top:0; opacity:1}
    }
    
    /* The Close Button */
    .close2 {
      color: rgb(19, 168, 255);
      float: right;
      font-size: 28px;
      font-weight: bold;
    }
    
    .close2:hover,
    .close2:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }
    
    .modal-header2 {
      padding: 2px 16px;
      background-color: #ffffff;
      color: rgb(0, 0, 0);
    }
    
    .modal-body2 {padding: 2px 16px;}
    
    .modal-footer2 {
      padding: 2px 16px;
      background-color: #ffffff;
      color: rgb(0, 0, 0);
    }