@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap"); .navigation .contact { color: #0085ff; } section.contact-section { max-width: 930px; width: 100%; margin: calc(30px + (70 - 30) * ((100vw - 300px) / (1920 - 300))) auto 0 auto; display: flex; justify-content: center; } section.contact-section h1 { width: 350px; font-size: calc(20px + (32 - 20) * ((100vw - 300px) / (1920 - 300))) auto 0 auto; font-weight: 700; } @media (max-width: 500px) { section.contact-section h1 { width: 290px; } } section.contact-section .contact-section-form { font-weight: 500; padding-right: 50px; max-width: 500px; width: 100%; } @media (max-width: 500px) { section.contact-section .contact-section-form { padding: 0 20px; } } section.contact-section .contact-section-form .profile { display: none; margin-bottom: 20px; } @media (max-width: 930px) { section.contact-section .contact-section-form .profile { display: flex; } } section.contact-section .contact-section-form .submit-button { background: #df4962; border-radius: 4px; width: 168px; height: 48px; color: white; outline: none; border: none; cursor: pointer; font-weight: 600; margin-bottom: 30px; margin: 60px auto 30px auto; display: block; } section.contact-section .contact-section-form .submit-button:hover { background: #dd405b; } section.contact-section .contact-section-form .submit-button:disabled { background: rgba(51, 69, 76, 0.5); } @media (max-width: 930px) { section.contact-section .contact-section-form .submit-button { width: 270px; } } section.contact-section .contact-section-form form div:not(.checkbox-container) { display: flex; flex-direction: column-reverse; } section.contact-section .contact-section-form form div:not(.checkbox-container) label { width: 100%; display: block; color: rgba(51, 69, 76, 0.5); margin-top: 40px; opacity: 0; font-size: 12px; transform: translateY(18px); transition: all 0.2s; pointer-events: none; } section.contact-section .contact-section-form form div:not(.checkbox-container) label.error { color: #df4962; } section.contact-section .contact-section-form form div:not(.checkbox-container) input { border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: 0; font-size: 16px; padding-bottom: 5px; font-weight: 600; font-family: "Poppins", sans-serif; color: #33454c; transition: all 0.5s; box-sizing: border-box; } section.contact-section .contact-section-form form div:not(.checkbox-container) input::placeholder, section.contact-section .contact-section-form form div:not(.checkbox-container) input::-webkit-input-placeholder, section.contact-section .contact-section-form form div:not(.checkbox-container) input::-ms-input-placeholder { font-weight: 500; transition: all 0.2s; } section.contact-section .contact-section-form form div:not(.checkbox-container) input:not(:placeholder-shown) + label, section.contact-section .contact-section-form form div:not(.checkbox-container) input:valid:not(:placeholder-shown) + label { opacity: 1; transform: translateY(0px); } section.contact-section .contact-section-form form div:not(.checkbox-container) input:active, section.contact-section .contact-section-form form div:not(.checkbox-container) input:focus { border-bottom: 2px solid #0085ff; } section.contact-section .contact-section-form form div:not(.checkbox-container) input:active + label, section.contact-section .contact-section-form form div:not(.checkbox-container) input:focus + label { opacity: 1; transform: translateY(0px); } section.contact-section .contact-section-form form div:not(.checkbox-container) input:active::placeholder, section.contact-section .contact-section-form form div:not(.checkbox-container) input:focus::placeholder { opacity: 0; } section.contact-section .contact-section-form form div:first-of-type label { margin-top: 10px; } section.contact-section .contact-section-form form .alert { display: none; color: #df4962; font-size: 10px; margin: 2px; } section.contact-section .contact-section-form form div.checkbox-container { margin-top: 50px; font-size: 13px; font-weight: 500; } section.contact-section .contact-section-form form div.error input { border-bottom: 2px solid #df4962; } section.contact-section .contact-section-form form div.error .alert { display: block; } section.contact-section .contact-section-form form div.error.checkbox-container label { color: #df4962; } section.contact-section .contact-section-image { position: relative; margin-top: 80px; } section.contact-section .contact-section-image::before { content: url(img/dots.svg); position: absolute; opacity: 0.4; top: -50px; right: -80px; z-index: -1; } section.contact-section .contact-section-image .screenshot { width: 100%; } @media (max-width: 930px) { section.contact-section .contact-section-image .screenshot { width: 90vw; } } section.contact-section .contact-section-image .profile { padding-left: 40px; } @media (max-width: 930px) { section.contact-section .contact-section-image { display: none; } } .profile { display: flex; } .profile .photo { width: 49px; height: 49px; border-radius: 3px; background: #a0ada0; margin-right: 20px; overflow: hidden; box-shadow: 0px 0px 2px rgba(51, 69, 76, 0.5); } .profile .photo img { width: 49px; } .profile .profile-description p { margin: 0; font-weight: 500; } .profile .profile-description p.name { font-size: 16px; color: #33454c; } .profile .profile-description a.email { font-size: 13px; text-decoration: none; font-weight: 500; color: rgba(51, 69, 76, 0.7); } .profile .profile-description p.occupation { font-size: 14px; color: rgba(51, 69, 76, 0.5); } .rodo { color: rgba(51, 69, 76, 0.5); font-size: 13px; font-weight: 500; max-width: 930px; width: 100%; margin: 0 auto calc(30px + (72 - 30) * ((100vw - 300px) / (1920 - 300))) auto; box-sizing: border-box; } @media (max-width: 930px) { .rodo { padding: 20px; } } .modal { position: fixed; top: 0; left: 0; bottom: 0; right: 0; display: none; overflow: auto; background-color: #000000; background-color: rgba(0, 0, 0, 0.7); z-index: 9999; } .modal.close { position: absolute; top: 0; right: 0; color: rgba(0, 0, 0, 0.3); height: 30px; width: 30px; font-size: 30px; line-height: 30px; text-align: center; } .modal.close:hover, .modal.close:focus { color: #000000; cursor: pointer; } .modal.open { display: block; } .modal .modal-window { position: relative; background-color: #FFFFFF; max-width: 540px; box-sizing: border-box; width: 100%; margin: 10% auto; padding: 40px; align-items: center; display: flex; flex-direction: column; border-radius: 8px; } .modal .modal-window .modal-title { margin-bottom: 10px; } .modal .modal-window .modal-paragraph { color: rgba(51, 69, 76, 0.5); font-weight: 500; text-align: center; } .modal .modal-window .modal-button { background: #df4962; border-radius: 4px; width: 168px; height: 48px; color: white; outline: none; border: none; cursor: pointer; font-weight: 600; width: 216px; margin-top: 30px; } .modal .modal-window .modal-button:hover { background: #dd405b; } /*# sourceMappingURL=contact.css.map */