.boxA {
    cursor:pointer; 
    position: fixed;
    top: 12px;
    left: 0 auto;
    width: 69%;
    margin: 0;
    padding: 3px;
    z-index: 1;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: 50%  50%;
    grid-template-areas: " .    boxB";
}
.boxB {
    grid-area: boxB;
    width: 100%;
    background: #FF6600;
    padding: 2px;
    border-radius: 18px;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: 1fr   16px;
    grid-template-areas: " boxC  boxD ";
}
.boxC {
    grid-area: boxC;
    width: 100%;
    background:#FFF; 
    border-radius: 16px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.boxC input{
    width: 100%;
    border:0; 
    border-radius: 16px;
    outline: none;
    font-family:lato;
    font-size:21px; 
    font-weight: bold;
    box-sizing: border-box;
    padding:7px 5px 7px 12px; 
}
.boxD {
    grid-area: boxD;
    width: 100%;
    margin-left: 6px; 
}
.boxD a {
    text-decoration: none;
    color: #FFF;
    font-weight: bold;
}
@media screen and (max-width:1024px) {
    .boxA {
        top: 4px;
    }
    .boxC input{
        font-size:20px; 
        padding:5px 5px 5px 12px; 
    }
}
@media screen and (max-width: 768px) {
    .boxA {
        top: 4px;
        grid-template-columns: 41%  59%;
    }
    .boxB {
        border-radius: 16px;
    }
    .boxC {
        border-radius: 14px;
    }
    .boxC input{
        font-size:18px; 
        border-radius: 14px;
        padding:5px 5px 5px 10px; 
    }
    .boxD a {
        text-decoration: none;
        color: #FFF;
        font-weight: bold;
        font-size:15px; 
    }
}