* {box-sizing: border-box; font-family: sans-serif; margin: 0; padding: 0;} html, body {height: 100%; margin: 0;} .navbar__top {position: fixed; background: #142467; display: flex; top: 0; left: 0; width: 100%; padding: 10px 20px; justify-content: space-between; align-items: center; flex-wrap: nowrap; z-index: 99;} .page-wrapper {min-height: 100vh; display: flex; flex-direction: column; padding-top: 60px;} .main-content {flex: 1;} .navbar__account {display: none; width: 40px; height: 40px; font-size: 28px; align-items: center; justify-content: center; background-color: transparent; border: 0; color: #fff; cursor: pointer;} .navbar__brand {text-decoration: none; white-space: nowrap; position: relative; display: flex; height: 40px; font-size: 32px; line-height: 40px; font-weight: bold; color: #fff;} .navbar__burger {display: none; width: 40px; height: 40px; font-size: 28px; align-items: center; justify-content: center; background-color: transparent; border: 0; color: #fff; cursor: pointer; margin: 0; padding: 0; box-sizing: border-box;} .navbar__menu ul {margin: 0; padding: 0; display: flex;} .navbar__menu.open {position: fixed; display: block; width: 100%; height: 100%; background-color: #142467; top: 60px; left: 0; text-align: center;} .navbar__menu.open ul {display: block;} .navbar__menu.open ul li {display: block;} .navbar__menu.open ul li a {font-size: 20px; padding: 20px 0;} .navbar__menu li {list-style: none; display: inline-block; line-height: 40px;} .navbar__menu li a {text-decoration: none; color: #fff; padding: 10px 20px; display: block; font-size: 16px; line-height: 16px; border-radius: 3px;} .navbar__menu li a i {margin-right: 8px;} .navbar__menu li a:hover {background: rgb(130, 130, 229);} .navbar__btn {display: flex; height: 40px;} .navbar__btn a {position: relative; display: flex; outline: 0; font-size: 16px; font-weight: 500; line-height: 40px; padding: 0 30px; margin-right: 10px; height: 100%; text-decoration: none; color: #fff; cursor: pointer; justify-content: center; align-content: center;} .navbar__btn.open {position: fixed; display: block; background-color: #142467; top: 60px; left: 0; padding: 20px; width: 100%; height: 100%; text-align: center; justify-content: center;} .navbar__btn.open a {position: relative; display: block; font-size: 20px; height: 60px; padding: 0 20px; line-height: 60px; margin-top: 10px;} .btn-login {background-color: #4c549e; border: 1px solid #6161c6;} .btn-login:hover {background: #434b8c;} .btn-danger {background-color: #ff6d4b; border: 1px solid transparent;} .btn-danger:hover {background-color: #ff592f;} .container {width: 100%; padding-right: 0.75rem; padding-left: 0.75rem; margin-right: auto; margin-left: auto;} @media (min-width: 576px) {.container {max-width: 540px; } } @media (min-width: 768px) {.container {max-width: 720px; } } @media (min-width: 992px) {.container {max-width: 960px; } } @media (min-width: 1280px) {.container {max-width: 1200px; } } @media (max-width: 900px) {.navbar__top {width: 100vw; } .navbar__btn {display: none; } .navbar__account {display: flex; } } @media (max-width: 720px) {.navbar__top {width: 100vw; } .navbar__btn, .navbar__menu {display: none; } .navbar__account, .navbar__burger {display: flex; } } body {width: 100%; height: 100%; background: #c8e8e9;} .section {display: flex; padding-top: 150px; width: 100%; align-items: center; justify-content: center;} .container {display: block; max-width: 760px;} .content {width: 100%; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 6px; padding: 40px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);} .left-side {position: relative; max-width: 370px; height: 100%; display: inline-block;} .right-side {position: relative; display: inline-block; min-width: 370px; max-width: 500px; padding-left: 70px; padding-right: 30px;} .left-side .divider {position: absolute; display: block; height: 70%; right: 0; top: 50%; transform: translateY(-50%); border-right: 2px solid #afafb6; overflow: hidden;} .left-side .details {display: block; text-align: center; padding: 16px; width: 100%;} .left-side .details i {font-size: 30px; color: #3e2093; margin-bottom: 10px;} .left-side .details .topic {font-size: 18px; font-weight: 500;} .left-side .details .text {font-size: 14px; color: #afafb6;} .right-side .title {display: block; width: 100%; font-size: 23px; font-weight: 600; color: #3e2093;} .right-side .form {display: block; width: 100%;} .input-box {display: block; position: relative; width: 100%; height: 50px; margin-top: 20px;} .message-box {display: block; position: relative; width: 100%; height: 110px; margin-top: 20px;} .input-box input, .message-box textarea {display: block; position: relative; width: 100%; height: 100%; border: 1px solid lightgray; outline: none; font-size: 16px; background-color: #fff; border-radius: 6px; padding: 8px 15px;} .icon-box {display: block; position: absolute;} .input-box .icon-box {right: 15px; top: 50%; transform: translateY(-50%);} .message-box .icon-box {right: 15px; bottom: 10%; transform: translateY(-10%);} .icon-box span {display: none; text-align: center; height: 25px; width: 25px; border: 2px solid; border-radius: 50%; line-height: 25px;} .icon-box span.icon-warning {color: #f84f31; border-color: #f84f31;} .icon-box span.icon-success {color: #23c552; border-color: #23c552;} .tips-box {display: none; position: relative; margin: 15px 0 -5px 0; padding: 8px; width: 100%; background-color: #f84f31; border-radius: 6px; color: #fff; font-size: 16px;} .tips-box:before {position: absolute; content: ""; height: 15px; width: 15px; background-color: #f84f31; right: 20px; top: -7px; transform: rotate(45deg);} .contact-btn input {margin-top: 20px; display: inline-block; color: #fff; font-size: 18px; outline: 0; border: 0; padding: 8px 16px; border-radius: 6px; background: #24a0ed; cursor: pointer; transition: all 0.3s ease;} .contact-btn input:hover {background: #1183ca;} .modal-wrapper {position: fixed; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; top: 0; left: 0; visibility: hidden;} .modal-wrapper .shadow {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #706f6f; opacity: 0;} .modal-wrapper .modal {position: absolute; width: 350px; max-width: 100%; display: block;} .modal-wrapper .modal .modal-item {width: 100%; background-color: #fff; border-radius: 3px; position: relative; display: none; margin-bottom: 10px; padding: 0;} .modal-wrapper .modal .modal-item .modal-body {padding: 35px; text-align: center;} .modal-item .modal-body .s-icon {width: 60px; height: 60px; background-color: #3cb878; color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 28px; margin: 0 auto 15px;} .modal-item.e-modal .modal-body .s-icon {background-color: #fd5664;} .modal-item.s-modal .modal-body .s-text h2 {color: #3cb878;} .modal-item.e-modal .modal-body .s-text h2 {color: #fd5664;} .modal-item .modal-body .s-text p {margin-top: 5px;} .modal-item .close {position: absolute; top: 0; right: 0; width: 30px; height: 30px; background-color: #fff; color: #000; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 16px;} .modal-item.s-modal .close:hover {background-color: #3cb878; color: #fff;} .modal-item.e-modal .close:hover {background-color: #fd5664; color: #fff;} .modal-item button {display: block; width: 100%; outline: none; border: 0; padding: 12px 15px; border-radius: 0; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; font-size: 16px; color: #fff; cursor: pointer;} .modal-item.s-modal button {background-color: #3cb878;} .modal-item.s-modal button:hover {background-color: #059249;} .modal-item.e-modal button {background-color: #fd5664;} .modal-item.e-modal button:hover {background-color: #ff0016;} .modal-wrapper.active {visibility: visible;} .modal-wrapper.active .shadow {opacity: 0.9;} .modal-item.s-modal.active, .modal-item.e-modal.active {display: block;} @media (max-width: 760px) {.content {flex-direction: column-reverse; width: 100vw; } .left-side .divider {display: none; } .right-side {padding-left: 30px; } }