body { margin: 0; padding: 0; } .page-not-found { width: 100%; height: 100%; box-sizing: border-box; } .page-not-found__page-content { width: 100%; overflow: hidden; } .page-not-found__wrapper-left { height: 25vh; background: url('https://p2-ofp.static.pub/ShareResource/page-not-found/Photo-bg.png') no-repeat center center / cover; padding: 1rem 3rem; display: flex; align-items: flex-end; } .page-not-found__wrapper-right { position: relative; z-index: 1; padding: 10vh 0; background: url('https://p2-ofp.static.pub/ShareResource/page-not-found/blue-pattern.png') no-repeat center center / cover; } .page-not-found__title { color: #fff; font-size: 2rem; line-height: 1.2; font-weight: 100; } .page-not-found__title strong { font-weight: 500; } .page-not-found__content { background: transparent linear-gradient(134deg, #000 0%, #333f48 100%) 0% 0% no-repeat padding-box; z-index: 3; display: flex; flex-direction: column; justify-content: center; padding: 5vh 3rem; position: relative; } .page-not-found__content__title { font-size: 1.2rem; color: #fff; margin: 0; margin-bottom: 1.5rem; } .page-not-found__content__form { display: flex; margin: 0; } .page-not-found__content__form-group { width: 100%; display: flex; height: 40px; border: 1px solid #f8f8f8; border-radius: 4px; background: #fff; margin-bottom: 1.5rem; } .page-not-found__content__input { width: 100%; border: none; flex-grow: 2; background: transparent; padding: 0 10px; } .page-not-found__content__input::placeholder { color: #000; } .page-not-found__content__button { border: none; background: #eee; width: 40px; height: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; } .page-not-found__content__button img { width: 50%; } .page-not-found__nav { margin: 0; padding: 0; list-style: none; margin-bottom: 1rem; flex-wrap: wrap; } .page-not-found__nav-item { margin-bottom: .8rem; word-break: keep-all; } .page-not-found__nav-item a { color: #fff; word-break: keep-all; text-decoration: none; font-size: 1.2rem; } .page-not-found__contact-phone a { color: #fff; text-decoration: none; font-size: 1.2rem; } @media (min-width: 768px) { .page-not-found__wrapper-left { height: 40vh; padding: 3rem 5rem; } .page-not-found__wrapper-right { height: auto; } .page-not-found__title { color: #fff; font-size: 3rem; line-height: 1.2; font-weight: 100; } .page-not-found__content { padding: 5rem; } .page-not-found__nav { display: flex; } .page-not-found__nav-item { margin-bottom: 0; margin-right: 30px; padding-right: 30px; display: flex; align-items: center; } .page-not-found__nav-item:not(:last-child) { border-right: 2px solid #fff; } } @media (min-width: 1140px) { .page-not-found__wrapper-right, .page-not-found__wrapper-left { height: 80vh; } .page-not-found__wrapper-left { padding: 5rem; } .page-not-found__title { font-size: 4rem; } .page-not-found__content { background: transparent linear-gradient(134deg, #000 0%, #333f48 100%) 0% 0% no-repeat padding-box; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 0 3rem; height: 100%; } }