.contacts_layout { .contacts_container { padding-top: 20px; .contacts_title_div { width: max-content; display: flex; justify-content: flex-start; margin: 0; .contacts_title { font-size: 24px; line-height: 23px; color: $black-color; font-family: $main-font; font-weight: 700; position: relative; margin-bottom: 20px; &:after { position: absolute; content: ''; background-color: $yellow-color; height: 3px; left: 0; right: 0; bottom: -5px; } } } .contacts_section_div { display: flex; justify-content: space-between; padding-bottom: 30px; @media(max-width: 1199px) { flex-wrap: wrap; } .contacts_section { @media(max-width: 1199px) { align-items: center; flex-direction: column; display: flex; margin-bottom: 17px; width: 100%; } @media(min-width: 1200px) { padding-left: 99px; } .contacts_subtitle { margin-top: 71px; font-size: 30px; line-height: 29px; color: $black-color; font-family: $main-font; margin-bottom: 30px; @media(max-width: 1199px) { font-size: 24px; line-height: 23px; margin-top: 20px; } } .contacts_img_div { width: 80px; height: 80px; border-radius: 50%; background-size: cover; .contacts_img { width: 100%; height: 100%; } } .contacts_name { margin-top: 30px; font-size: 30px; line-height: 29px; color: $black-color; font-family: $main-font; font-weight: 700; margin-bottom: 35px; @media(max-width: 1199px) { font-size: 18px; line-height: 17px; } } .contacts_ul { @media(max-width: 1199px) { flex-direction: column; display: flex; } .contacts_li { display: flex; align-items: center; @media(max-width: 1199px) { justify-content: center; margin-bottom: 28px; } .contact_link { position: relative; text-decoration: none; svg { width: 38px; height: 38px; @media(max-width: 1199px) { width: 28px; height: 28px; } } .mail { color: $black-color; font-family: $main-font; font-size: 18px; line-height: 17px; font-weight: 400; margin-left: 13px; @media(max-width: 1199px) { font-size: 16px; line-height: 15px; } } &:after { background: none repeat scroll 0 0 transparent; bottom: -6px; content: ""; display: block; height: 1px; left: 50%; position: absolute; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; } &:hover { &:after { background: #000000; width: 100%; left: 0; bottom: -6px; content: ""; display: block; height: 1px; position: absolute; transition: width 0.3s ease 0s, left 0.3s ease 0s; } } } &:not(:last-child) { margin-bottom: 32px; } } .contacts_li_phone { .phone_link { position: relative; text-decoration: none; svg { width: 30px; height: 30px; @media(max-width: 1199px) { width: 23px; height: 23px; } } .phone_number { color: $black-color; font-family: $main-font; font-size: 18px; line-height: 17px; font-weight: 400; margin-left: 20px; @media(max-width: 1199px) { font-size: 16px; line-height: 15px; } } &:after { background: none repeat scroll 0 0 transparent; bottom: -6px; content: ""; display: block; height: 1px; left: 50%; position: absolute; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; } &:hover { &:after { background: #000000; width: 100%; left: 0; bottom: -6px; content: ""; display: block; height: 1px; position: absolute; transition: width 0.3s ease 0s, left 0.3s ease 0s; } } } } } } .form_section { width: 100%; @media(min-width: 1200px) { width: 50%; } .contacts_form_div { border: 1px solid $yellow-color; padding: 20px 26px; @media(max-width: 1199px) { max-width: 358px; margin: 0 auto; } @media(min-width: 1200px) { width: 61%; padding: 20px 40px; } .contacts_form_title { font-size: 24px; line-height: 23px; color: $black-color; font-family: $main-font; font-weight: 400; text-align: center; margin-bottom: 20px; } .contacts_registration_div { .contacts_registration_ul { .contacts_registration_li { display: flex; flex-direction: column; margin-bottom: 18px; .contacts_registration_label { color: $black-color; font-family: $main-font; font-weight: normal; font-size: 18px; line-height: 17px; margin-bottom: 3px !important; } .form_input, .registration_textarea { border: 1px solid $grey-color; min-height: 40px; outline: none; padding-left: 5px; resize: none; &:active, &:focus { border: 1px solid $black-color; } } .registration_textarea { min-height: 120px; padding: 5px; } } } .send_button_container { display: flex; justify-content: center; margin-top: 35px; .contacts_send_button { padding: 21px; font-size: 16px; line-height: 106.2%; font-family: $main-font; border: none; cursor: pointer; background-color: $yellow-color; color: $black-color; width: 100%; font-weight: 700; letter-spacing: 0.1em; &:hover { background-color: #000000; color: #ffffff; } } } } } } } } } .application_accepted { text-align: center; margin-bottom: 30px; display: none; color: $black-color; font-family: $main-font; font-size: 16px; line-height: 23px; .btn_close_container { display: flex; justify-content: center; align-items: center; width: 100%; padding-top: 40px; .contacts_close_btn { border: none; background-color: $yellow-color; color: $black-color; font-family: $main-font; font-size: 14px; font-weight: normal; padding: 5px 10px; width: 50%; } } }