.form-box{
     padding-top: 10px;
     width: 100%;
     height: 100%;
     background-color: rgba(247, 5, 5, 0);
     position: fixed;
     top: 0px;
     left: 0;
     z-index: 999;
     overflow: hidden;
     animation: openM 0.7s ease-in;
     /* animation-delay: 0.5s; */
}
@keyframes openM {
    0%{top: 80px;}
    10%{top: 80px;}
    20%{top: 80px;}
    30%{top: 80px;}
    40%{top: 80px;}
    50%{top: 80px;}
    60%{top: 80px;}
    70%{top: 80px;}
    100%{top: 0px;}
    
}
.openForm{
    display: none;
    padding-top: 10px;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.392);
     position: fixed;
     top: 0;
     left: 0;
     z-index: 999;
     overflow: hidden;
    
}


.form-box form{
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    width: 40%;
    padding: 10px 40px;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(251, 203, 185);
    border-radius: 6px;
    margin: 0px auto;
    box-shadow: 3px 3px 6px 1px rgba(0,0,0,0.2);
    font-family: 'Play', sans-serif;
    animation: openF 0.5s ease-in;
}
@keyframes openF {
    0%{top: -100%;}
    100%{top: 0%;}
    
}
.form-box form span.close{
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    position: absolute;
    top: -50px;
    right: -50px;
    background-color: rgb(252, 194, 194);
    font-size: 30px;
    font-weight: 900;
    padding: 58px 20px 8px 20px;
    border-radius: 25%;
    cursor: pointer;
    user-select: none;
    color: white;
    transition: 0.2s;
}
.form-box form span.close:hover{
    background-color: rgb(255, 0, 0);
   

}

.form-box form h2{
    font-size: 25px;
    text-align: center;
    padding: 10px 0 0 0;
    font-weight: 600;
    color: orangered;
}

.form-box form h3{
    font-size: 18px;
    text-align: center;
    padding: 10px 0 0 0;
    font-weight: 400;
    color: rgb(91, 0, 176);
}

.form-box form .row{
    width: 100%;
    margin: 10px 0;
}

 .form-box form .row .col{
    width: 100%;
    display: inline-block;
}
 .form-box form .row .col label{
    font-size: 14px;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif;
    visibility: hidden;
    transition: 0.2s;
}
 .form-box form .row .col2{
    width: 100%;
    display: inline-block;
}

 .form-box form .row .col2 input,
 .form-box form .row .col2 select,
 .form-box form .row .col2 textarea{
    box-sizing: border-box;
    width: 100%;
    font-size: 16px;
    padding: 4px 0px;
    border-radius: 0px;
    outline: none;
    border: none;
    background-color: transparent;
    border-bottom: 1px solid gray;
    font-family: 'Play', sans-serif;
}
.form-box form .row .col2 textarea{
    resize: vertical;
}
 .form-box form .row2{
    width: 55%;
    margin: 30px auto 10px;
    
    display: flex;
    justify-content:space-around;

}

 .form-box form .row2 input[type=submit], .form-box form .row2 input[type=reset]{
    width: 48%;
    font-size: 20px;
    border: none;
    outline: none;
    border: 2px solid coral;
    background-color: transparent;
    color: orangered;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}

 .form-box form .row2 input[type=submit]:hover, .form-box form .row2 input[type=reset]:hover{
    background-color: orangered;
    color: white;
}

@media screen and (max-width: 600px){
    @keyframes openM {
        0%{top: 50px;}
        10%{top: 50px;}
        20%{top: 50px;}
        30%{top: 50px;}
        40%{top: 50px;}
        50%{top: 50px;}
        60%{top: 50px;}
        70%{top: 50px;}
        100%{top: 0px;}
        
    }
    .form-box{
        overflow: auto;
    }
    .form-box form{
        width: 98%;
        padding: 10px;
    }
    .form-box form h2{
        margin-top: 20px;
        margin-bottom: 1px;
        font-size: 19px;
        padding-bottom: 1px;
        
    }
    .form-box form h3{
        margin-top: 0px;
        padding-top: 5px;
        font-size: 16px;
        
    }
     .form-box form .row .col label{
        font-size: 13px;
    }
  
 .form-box form .row .col2 input,
 .form-box form .row .col2 select,
 .form-box form .row .col2 textarea{
        font-size: 16px;
    }
     .form-box form .row .col,
     .form-box form .row .col2{
        padding: 0;
        width: 100%;
    }
    
 .form-box form .row2{
    width: 55%;
    margin: 10px auto 10px;}
     .form-box form .row2 input[type=submit], .form-box form .row2 input[type=reset]{
        font-size: 16px;
    }
    .form-box form span.close{
        background-color: red;
        top: -60px;
        right: -60px;
        padding: 55px 20px 48px 15px;
    }
}