* { padding: 0; margin: 0; } input[type=text]::-ms-clear { display: none; width : 0; height: 0; } input[type=text]::-ms-reveal { display: none; width : 0; height: 0; } input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-search-results-button, input::-webkit-search-results-decoration { display: none; } hr { border: none; background-color: #707070; height: 1px; width: 1121px; margin: 0 auto; } @font-face { font-family: 'monsterrat_regular'; src: url('fonts/monsterrat/Montserrat-Regular.ttf'); } @font-face { font-family: 'monsterrat_bold'; src: url('fonts/monsterrat/Montserrat-Bold.ttf'); } .wrapper { max-width: 1200px; margin: 0 auto; background: linear-gradient(#ffffff, #d1e3ff, #a5c8ff); box-shadow: 0 0 60px #b5d2ff; padding: 0 20px; } .header { display: flex; max-width: 1042px; justify-content: space-between; margin-bottom: 29px !important; margin: 0 auto; } .logo_name { display: flex; width: 340px; justify-content: space-between; align-items: center; } .logo_name > p { width: 218px; font-size: 20px; font-family: 'monsterrat_regular'; } .header_buttons { width: 602px; margin-top: 38px; } .top_header { width: 630px; } .top_header > h1 { font-family: 'monsterrat_bold'; text-shadow: 0 5px 6px #00000063; font-size: 35px; text-align: center; } .top_buttons { width: 330px; display: flex; justify-content: space-between; margin: 0 auto; } .top_buttons > button { font-family: 'monsterrat_regular'; background-color: #ffffff; border: 1px solid #707070; box-shadow: 0 3px 6px #00000063; padding: 5px 25px; border-radius: 17px; font-size: 20px; height: 45px; } .top_buttons > button:hover { cursor: pointer; } #hr_between { margin: 0 20px; } .quick_links_search { display: flex; max-width: 1121px; height: 100px; margin: 0 auto; position: relative; } .quick_links_search > .link_buttons { width: 350px; display: flex; align-items: center; justify-content: space-between; margin-right: 0px; } .hide_first_top_menu { position: absolute; top: 118.5px; width: 360px; height: 150px; background-color: #ffffff; border: 1px solid #707070; border-radius: 35px; box-shadow: 0 3px 6px #707070; display: flex; align-items: center; justify-content: center; display: none; } .hide_first_top_menu > ul { padding: 0; list-style-type: none; text-align: center; line-height: 2.5; font-family: 'monsterrat_regular'; font-size: 20px; } .hide_first_top_menu > ul > li > a { text-decoration: none; color: #000000; } .hide_second_top_menu { position: absolute; top: 118.5px; width: 360px; height: 250px; background-color: #ffffff; border: 1px solid #707070; border-radius: 35px; box-shadow: 0 3px 6px #707070; display: flex; align-items: center; justify-content: center; display: none; } .hide_second_top_menu > ul { padding: 0; list-style-type: none; text-align: center; line-height: 2.5; font-family: 'monsterrat_regular'; font-size: 20px; } .hide_second_top_menu > ul > li > a { text-decoration: none; color: #000000; } .link_buttons > button { font-family: 'monsterrat_regular'; background-color: #ffffff; border: 1px solid #707070; box-shadow: 0 3px 6px #00000063; padding: 5px 25px; border-radius: 17px; font-size: 20px; height: 45px; } .link_buttons > button:hover { cursor: pointer; } .link_buttons > button[id='top_btn_1'] { padding: 5px 11px; } .link_buttons > button[id='top_btn_2'] { padding: 5px 47px; } .quick_links_search > hr { border: none; width: 1px; background-color: #707070; height: 100px; margin: 0; } .quick_links_search > .search_field { width: 727px; display: flex; align-items: center; justify-content: center; } .search_field > form { width: 727px; height: 45px; display: flex; position: relative; border-radius: 17px; } .search_field > form > input[id="search_input_top"] { width: 727px; border-radius: 17px; border: 1px solid #707070; text-align: center; font-size: 20px; font-family: 'monsterrat_regular'; } .search_field > form > button[id="send_btn_1"] { position: absolute; right: 0; border: none; background: none; height: 45px; width: 45px; } .search_field > form > button[id="send_btn_1"]:hover { cursor: pointer; } .search_field > form > button[id="send_btn_2"] { position: absolute; right: 0; border: none; background: none; height: 45px; width: 45px; display: none; } .search_field > form > button[id="send_btn_2"]:hover { cursor: pointer; } main { height: 1000px; } #left{ float: left; } #right{ margin-top: 20px; float: right; } footer { max-width: 1121px !important; margin: 0 auto; display: flex; justify-content: space-between; margin-top: 20px; flex-wrap: wrap; border-top: 1px solid #707070; padding: 20px 0; } #right > p, #left > p { font-family: 'monsterrat_regular'; display: flex; align-items: center; } #left { display: inline-flex; justify-content: space-between; align-items: center; width: 460px; } #left img { float: left; } .fa-map { color: #00923e; } .fa-phone { color: #00923e; } @media (max-width: 1121px) { .wrapper { max-width: 1000px; } hr { width: 1000px; } .top_header > h1 { font-size: 30px; text-align: center; } .top_buttons > button { height: 35px; } .quick_links_search { max-width: 1000px; height: 75px; } #hr_between { height: 75px; } .link_buttons > button { font-size: 16px; height: 35px; } .search_field { width: 500px; } .search_field > form { width: 650px; height: 35px; } #send_btn_1 { height: 35px; width: 35px; margin-right: 10px; } .hide_first_top_menu { top: 90px; width: 330px; height: 120px; } .hide_first_top_menu > ul { font-size: 16px; } .hide_second_top_menu { top: 90px; width: 330px; height: 200px; } .hide_second_top_menu > ul { font-size: 16px; } } @media (max-width: 1000px) { .wrapper { max-width: 850px; } hr { width: 850px; } .logo_name > p { font-size: 16px; width: 180px; } .top_header { width: 550px; } .top_header > h1 { font-size: 25px; } .top_buttons { width: 270px; } .top_buttons > button { height: 28px; font-size: 16px; } .quick_links_search { max-width: 850px; height: 75px; } #hr_between { height: 75px; } .link_buttons { width: 260px !important; } .link_buttons > button { font-size: 16px; height: 28px; font-size: 14px; } .search_field { width: 530px !important; } .search_field > form { width: 530px; height: 28px; } #send_btn_1 { display: none; } #send_btn_2 { display: block; width: 28px; height: 28px; } .link_buttons > button[id='top_btn_2'] { padding: 5px 30px; } .search_field > form > input[id="search_input_top"] { font-size: 16px; } .hide_first_top_menu { top: 90px; width: 280px; height: 105px; } .hide_first_top_menu > ul { font-size: 14px; } .hide_second_top_menu { top: 90px; width: 280px; height: 175px; } .hide_second_top_menu > ul { font-size: 14px; } } @media (max-width: 850px) { .wrapper { max-width: 650px; } .logo_name > img { transform: scale(0.8); } .header { max-width: 650px !important; margin-bottom: 10px !important; } .logo_name > p { font-size: 14px; width: 150px; } .header_buttons { width: 500px; } .header_buttons > .top_header { width: 400px; } .top_header > h1 { font-size: 22px; } hr { width: 650px; } .search_field { width: 350px !important; } .search_field > form { width: 350px; } #right { margin-top: 20px; margin: 0 auto; } } @media (max-width: 660px) { .header { flex-wrap: wrap; justify-content: center; } .logo_name { width: 270px; } .logo_name > p { font-size: 21px; width: 170px; } .header_buttons { margin-top: 10px !important; } .top_header { margin: 0 auto; } .quick_links_search { flex-wrap: wrap; max-width: 500px; justify-content: center; padding: 15px 0; } #hr_between { display: none; } .search_field { margin-top: 10px; } .hide_first_top_menu, .hide_second_top_menu { top: 60px; z-index: 1; width: 350px; border-radius: 10px; } #left { margin-left: 20px; } } @media (max-width: 490px) { #left > p { width: 150px; } #left { width: 300px; justify-content: space-around; margin: 0 auto; } #right { margin-top: 20px; } } @media (max-width: 390px) { .top_header { width: 250px !important; } .top_header > h1 { font-size: 23px; } .search_field, form { width: 250px !important; } .hide_first_top_menu, .hide_second_top_menu { width: 250px; } } @media (max-width: 350px) { #right { width: 250px !important; } .fa-map { margin-right: 10px; } }