Search Bar within a container or frame

I have a real estate website. My live site is https://chucktanner.com My staging site is https://tannercstage.wpengine.com/. I want the Text and search buttons to scroll in on my staging site as it does on my live site. Also, I want to make the search bar in my staging site smaller like my live site. I have gone into theme options on my staging site but not exactly sure how to edit the container/frame to make the search bar smaller. The following is some of the current coding in my theme options.
input[type=“date”], input[type=“email”], input[type=“number”], input[type=“password”], input[type=“search”], input[type=“tel”], input[type=“text”], input[type=“url”], select, textarea, .woocommerce .quantity input.qty {
border-color: #666666 !important;
}
.sidx-searchform .sidx-suggestions-input{
background: rgba(0, 0, 0, 0.2) !important;}
.sidx-container input[type=“text”]{
color: #ffffff; font-size: 20px; font-weight 900; font-family: Trurong, Arial, Sans-Serif;}
.sidx-basic .sidx-field{
font-size: 20px;}
.sidx-button.sidx-primary, .sidx-container button.sidx-primary{
background: rgba(0, 0, 0, 0.3) !important; font-size: 30px;}

.sidx-container .sidx-searchform .sidx-field {
height: 60px !important
}
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.iframe-container iframe{
position: absolute;
top:0;
left: 0;
width: %;
height: 100%;
}
THANK YOU SO MUCH FOR ANY ADVICE YOU COULD OFFER!!!