.homepagepopup { top: 120px !important; left: 480px !important; display: block !important; width: auto !important; } /*POSTCODE SEARCH BOX CSS*/ .search_restaurants { height: 200px; position: relative; display: flex; justify-content: center; align-items: center; } .sswing { animation: sswing ease-in-out 1s infinite alternate; transform-origin: center -20px; float: left; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); } .sswing img { border: 5px solid #f8f8f8; display: block; } .sswing:after { content: ""; position: absolute; width: 20px; height: 20px; border: 1px solid #999; top: -10px; left: 50%; z-index: 0; border-bottom: none; border-right: none; transform: rotate(45deg); } /* nail */ .sswing:before { content: ""; position: absolute; width: 5px; height: 5px; top: -14px; left: 54%; z-index: 5; border-radius: 50% 50%; background: #000; } @keyframes sswing { 0% { transform: rotate(3deg); } 100% { transform: rotate(-3deg); } } .search_restaurants .box { display: flex; justify-content: center; align-items: center; width: 100%; } .autocomplete .dropdown-menu { position: absolute; bottom: 0 !important; left: 50% !important; width: 100% !important; transform: translate (-50%, -50%); } .search_restaurants input { background: #fff !important; color: #333 !important; height: 55px !important; font-size: 1.3rem !important; font-weight: 500 !important; border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important; } .search_restaurants .search_btn { display: inline-block; width: 150px; height: 55px; background-color: #125fca; color: #fff; font-weight: 500; border: none; box-shadow: 0 3px 4px 0 rgb(0 0 0 / 25%); cursor: pointer; } .search_restaurants .btns { display: flex; align-items: center; } .search_restaurants .deliverybtn i { font-size: 1.5rem; } .search_restaurants input { margin: 0 !important; border: none !important; } .search_restaurants input:focus { border: none !important; box-shadow: none !important; } .search_restaurants .icon { height: 55px; background: #fff; color: #333; position: relative; width: 36px; } .search_restaurants .autocomplete .dropdown-menu { position: absolute; display: none; left: 50% !important; width: 100% !important; transform: translate(-50%, -13px); z-index: 999; height: 550px; overflow: auto; /*background: #fff;*/ } .search_restaurants .autocomplete .dropdown-menu a { text-decoration: none; display: inline-block; width: 100%; color: #4f4d4b; font-weight: 500; margin-top: 10px; font-size: 16px; text-align: left; } .search_restaurants .dropdown-menu li { background-color: #fff; padding: 3px 15px; border-bottom: 1px solid #dedede; } .search_restaurants .dropdown-menu li:hover { background-color: #ffe6f3; } .search_restaurants .icon { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .search_restaurants .icon i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .search_restaurants .takewaybtn { background-color: #f89323 !important; padding: 10px; /*bottom: 10px;*/ } .search_restaurants .bg { width: 80%; padding: 20px; background: #0000001f; } .search_restaurants .autocomplete { position: relative; width: 75%; } .search_restaurants .search_btn { margin-left: 10px; } #show_zipcode_prompt { transform: translateY(-50%) !important; overflow-y: initial !important; } #show_zipcode_prompt.modal .modal-content { padding: 0; } #show_zipcode_prompt .search_restaurants .bg { width: 95%; } .res_logo { width: 180px; margin: auto; margin-top: 200px; } .btn-grad { transition: 0.5s; background-size: 200% auto; color: white; box-shadow: 0 0 20px #eee; border-radius: 10px; } .btn-grad:hover { background-position: right center; /* change the direction of the change here */ color: #fff; text-decoration: none; } .search_restaurants .takewaybtn { background-image: linear-gradient( to right, #ff512f 0%, #f09819 51%, #ff512f 100% ); } .search_restaurants .deliverybtn { background-image: linear-gradient( to right, #da22ff 0%, #9733ee 51%, #da22ff 100% ); } @media (min-width: 1100px){ .search_restaurants { height: 150px; } } @media (min-width: 768px) { .search_restaurants input:focus::placeholder { font-size: 1.2rem !important; transition: 0.2s; } .search_restaurants .res_logo { display: none; } #show_zipcode_prompt { width: 60%; top: 45% !important; border-radius: 10px !important; overflow: hidden; background: transparent; } .search_restaurants .bg { border: 1px dashed #bab6b6; } } @media only screen and (max-width: 992px) { #show_zipcode_prompt { top: 50% !important; } .search_restaurants .box { align-items: stretch; position: relative; height: 120px; } .search_restaurants .btns { position: absolute; top: 80px; } .search_restaurants .icon { box-shadow: none; height: 45px; } .search_restaurants .autocomplete { box-shadow: none; width: 100%; } .search_restaurants .search_btn { height: 45px; } .search_restaurants input { font-size: 16px !important; height: 45px !important; } .search_restaurants .takewaybtn { padding: 5px; } .search_restaurants .bg { width: 96%; } #show_zipcode_prompt .search_restaurants .bg { width: 100%; background: transparent; } #show_zipcode_prompt.modal { width: 95%; } #show_zipcode_prompt { top: 50% !important; } #show_zipcode_prompt .search_restaurants { padding: 20px; align-items: initial; } } @media (max-width:768px){ .search_restaurants { background-image: url("../images/resbg.jpg"); background-size: cover; } } .msgarea { position: absolute; bottom: 9px; color: #fff; background: #000; padding: 4px 10px; border-radius: 5px; font-size: 1.2rem; font-weight: 500; } /*POSTCODE SEARCH BOX CSS*/