*, *::before, *::after { margin: 0px; padding: 0px; border: none; outline: none; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; scroll-behavior: smooth; } button { outline: none; } button:focus { outline: none; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /*** ==================================================================== Global Settings ==================================================================== ***/ body { font-family: 'Poppins', sans-serif; font-size: 14px; color: #000; line-height: 1.7em; font-weight: 400; background: #fff; position: relative; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; } body.active { overflow: hidden; } a { text-decoration: none; color: #000; } h1, h2, h3, h4, h5, h6 { position: relative; font-weight: normal; margin: 0px; background: none; line-height: 1.6em; } /* Typography */ h1 { font-size: 4em; } h2 { font-size: 40px; } h3 { font-size: 34px; } h4 { font-size: 22px; } h5 { font-size: 20px; } h6 { font-size: 18px; } p { position: relative; line-height: 1.8em; } .auto_container { position: relative; max-width: 1640px; padding: 0px 100px; margin: 0 auto; } ul, li { list-style: none; padding: 0px; margin: 0px; } /* Root =================== ========================= */ :root { --blue: #003197; --rgba-blue: rgba(0, 49, 151, .1); --rgba-black: rgba(0, 0, 0, .2); --rgba-white: rgba(250, 250, 250, .2); --text-32: 32px; --text-20: 20px; --text-18: 18px; --text-16: 16px; --item-row: row; --product-col: column; --color: blue; --product-box-margin: 0 -20px; --item-width: calc(25% - 40px); --item-padding: 25px 30px; --item-margin: 0 20px 40px; --item-radius: 10px; --item-element-width: 100%; --item-element-border: none; --item-element-margin: 10px 0; --item-img-paddimg: 0; --item--align: unset; --cursor: unset; } [data-theme="row"] { --item-row: column; --product-col: row; --color: red; --product-box-margin: 0; --item-width: calc(100% - 2px); --item-padding: 0; --item-margin: 0; --item-radius: 0; --item-element-width: 17%; --item-element-margin: 0; --item-element-border: 1px solid var(--rgba-black); --item-img-paddimg: 10px 25px; --item--align: center; --cursor: pointer; } /* Accaunt ============================================ */ .acc_lang { position: fixed; top: 50px; right: 80px; background: #fff; border-radius: 10px; z-index: 130; border: 1px solid #b3a9a9; } .acc_lang .auto_container { padding: 0; } .acc_lang .inner { display: flex; align-items: center; padding: 10px 15px; } .acc_lang-item { font-size: 14px; font-weight: 600; line-height: 1.5; display: block; margin-right: 20px; transition: .2s linear; -ms-transition: .2s linear; -webkit-transition: .2s linear; text-transform: uppercase; } .acc_lang-item:hover { color: var(--blue); } .acc_lang-item:last-child { margin-right: 0; } /* Accaunt end ======================================== */ /* Home page */ /* Register ============================================ */ .register { position: fixed; top: 0; left: 0; /* top: 50%; left: 50%; transform: translate(-50%, -50%); */ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; z-index: 100; } .register.active { display: flex; } .register::after { content: ''; position: absolute; top: 0; left: 0; /* background: rgba(0, 49, 151, .5); */ background: url("../images/IMG-2.png") no-repeat center; background-size: cover; width: 100%; height: 100%; z-index: -2; } .register::before { content: ''; position: absolute; top: 0; left: 0; background: rgba(0, 49, 151, .2); width: 100%; height: 100%; z-index: -1; } .register_wrap { /* position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); */ /* width: 100%; height: 100%; */ display: flex; align-items: center; justify-content: center; } .register_body { display: flex; align-items: center; background: #fff; border-radius: 10px; width: 95%; height: 650px; margin: auto; /* position: absolute; top: 50%; left: 50%; transform: translate(-50%, 10%); */ } .register_buttons { display: flex; align-items: center; justify-content: center; flex-direction: column; -ms-flex-direction: column; height: 100%; } .user_btn { display: flex; align-items: center; justify-content: center; flex-direction: column; -ms-flex-direction: column; padding: 50px; height: 100%; width: 100%; cursor: pointer; } #btn-1.active { background: rgba(0, 49, 151, .1); width: 100%; } #btn-2.active { background: rgba(0, 49, 151, .1); width: 100%; } .user_btn span { font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--blue); margin-top: 10px; } .register_banner { background: url("../images/bg_2.png") no-repeat center; background-size: cover; -webkit-background-size: cover; /* width: 780px; */ /* height: 630px; */ border-radius: 10px; position: relative; padding: 80px; } .register_logo { width: 160px; height: 160px; } .register_logo img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .register_title { margin: 40px 0 30px; font-size: 60px; font-weight: 700; line-height: 1.4; color: #fff; text-transform: uppercase; } .register_text { font-size: var(--text-32); font-weight: 400; line-height: 1.4; color: #fff; margin-bottom: 70px; } .register_foot { display: flex; align-items: center; } .register_mail { width: 20px; height: 16px; margin-right: 30px; } .register_mail img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .register_link { font-size: var(--text-20); font-weight: 400; line-height: 1.4; color: #fff; } .register_content { display: none; height: 100%; } .register_content.active { /* display: block; */ display: flex; justify-content: center; flex-direction: column; } .register_content_2 { display: none; height: 100%; } .register_content_2.active { /* display: block; */ display: flex; justify-content: center; flex-direction: column; } .register_form { display: flex; align-items: center; flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; padding: 65px; } .form_title { font-size: 40px; font-weight: 400; line-height: 1.4; margin-bottom: 30px; width: 100%; } .form_text { font-size: var(--text-20); font-weight: 400; line-height: 1.4; margin-bottom: 30px; } .form_link { text-decoration: underline; color: #0056FF; cursor: pointer; } .register_input { width: 100%; margin-bottom: 30px; position: relative; } .pl-100 input { padding-left: 100px !important; } .phone_box { position: absolute; top: 19px; left: 10px; display: flex; align-items: center; } .iti__country { cursor: pointer; } .phone_box-flag { width: 20px; height: 20px; margin-right: 20px; position: relative; cursor: pointer; } .phone_box-flag::after { content: ''; position: absolute; top: 50%; right: -12px; width: 8px; height: 4px; clip-path: polygon(0 0, 50% 100%, 100% 0); -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0); -o-path: polygon(0 0, 50% 100%, 100% 0); -moz-path: polygon(0 0, 50% 100%, 100% 0); -ms-path: polygon(0 0, 50% 100%, 100% 0); background: #000; } .phone_box-code { font-size: 18px; font-weight: 400; line-height: 1.3; } .register_input input { padding: 15px 30px; width: calc(100% - 3px); font-size: var(--text-20); font-weight: 400; line-height: 1.4; border: 1px solid var(--rgba-black); border-radius: 10px; } .register_input input::placeholder { font-size: var(--text-20); font-weight: 400; line-height: 1.4; color: rgba(0, 0, 0, .3); } .form_btn { width: 100%; text-align: center; background: var(--blue); border-radius: 10px; color: #fff; padding: 20px; border: none; cursor: pointer; font-size: var(--text-20); font-weight: 400; line-height: 1.4; } .error_body { display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; } .error_link { color: var(--blue); background: #fff; padding: 10px 20px; cursor: pointer; font-size: 16px; font-weight: 500; line-height: 1.5; border-radius: 5px; } /* Profile ======================= */ .profile_info-group { display: flex; align-items: center; margin-right: 10px; } .mobile_user-profile, .mobile_profile-navs { display: none; } .profile_icon { width: 20px; height: 20px; } .profile_icon img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .profile_bio { position: relative; } .profile { display: flex; align-items: center; } .mobile_profile { display: none; align-items: center; } .profile_head { display: flex; align-items: center; cursor: pointer; } .profile_text { margin: 0 15px; font-size: var(--text-18); font-weight: 400; line-height: 1.3; } .profile_drop { display: none; flex-direction: column; -ms-flex-direction: column; -moz-flex-direction: column; -o-flex-direction: column; -webkit-flex-direction: column; justify-content: center; position: absolute; top: calc(100% + 52px); /* bottom: -440px; */ right: 0; /* left: -30px; */ width: 350px; background: #fff; z-index: -1; -webkit-box-shadow: 0px 6px 4px -1px var(--rgba-black); box-shadow: 0px 6px 4px -1px var(--rgba-black); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .profile_drop.active { display: flex; /* animation: profile 1s linear; */ } @keyframes profile { 0% { /* max-height: 0; */ /* opacity: 0; */ } 100% { max-height: 100%; /* opacity: 1; */ } } .profile_item { display: flex; align-items: center; margin-right: 20px; cursor: default; } .p-0 { padding: 0 !important; } .p-0 .profile_text { white-space: nowrap; } .profile_drop .profile_item { padding: 25px 30px; margin-right: 0; border-bottom: 1px solid rgba(0, 0, 0, .3); cursor: pointer; } .profile_drop .profile_item:hover { background: #f5f5f5; } .profile_drop .profile_item:last-child { border: none; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .add_post_btn { background: var(--blue); background: #003197; display: flex; align-items: center; padding: 10px 30px; border-radius: 5px; color: #fff; margin-left: 10px; } .post_icon { width: 20px; height: 20px; margin-right: 10px; } .post_icon img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .post_text { font-size: 16px; font-weight: 400; line-height: 1.3; } /* Balance ====================== */ .balance_tabs { display: flex; } .balance_link { padding: 25px 15px; border-radius: 5px; cursor: pointer; width: 300px; text-align: center; background: #F2F6FF; margin-right: 30px; font-size: 18px; font-weight: 400; line-height: 1.3; } .balance_link.active { background: var(--blue); color: #fff; } .balance_link:last-child { margin-right: 0; } .balance_box { margin-top: 50px; } .balance_source { display: none; } .balance_source.active { display: block; position: relative; animation: open_balance .2s linear; } @keyframes open_balance { 0% { /* margin-top: 0; */ top: 50px; } 100% { top: 0; } } @-webkit-keyframes open_balance { 0% { /* margin-top: 0; */ top: 50px; } 100% { top: 0; } } .fill_balance-text { margin: 30px 0 50px; font-size: 16px; line-height: 1.5; font-weight: 400; } .form_txt { font-size: 18px; font-weight: 400; line-height: 1.5; margin-bottom: 30px; } .post_form-3 { display: flex; align-items: end; flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; position: relative; margin: -25px -20px 0; } .send_btn { background: var(--blue); color: #fff; border: none; border-radius: 5px; padding: 20px 50px; cursor: pointer; font-size: var(--text-18); font-weight: 400; line-height: 1; display: block; } .post_footer-text { color: #E2E2E2; font-size: 20px; line-height: 1.3; font-weight: 400; display: block; width: 100%; margin-top: 30px; margin: 30px 20px 0; } .post_footer-text span { color: red; } .post_form-3 .post_upload_item { margin-bottom: 0 !important; } .post_form-3 .upload_group label { padding: 20px; } /* Change Password ============================================= */ .password { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 49, 151, .5); backdrop-filter: blur(10px); z-index: 10; display: none; } .password.active { display: block; } .pass_wrap { position: relative; z-index: 11; } .pass_mail { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); border-radius: 20px; width: 720px; background: #fff; padding: 80px 60px; } .pass_change { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); border-radius: 20px; width: 720px; background: #fff; padding: 80px 60px; display: none; } .pass_change.active { display: block; } .pass_title { font-size: 40px; font-weight: 700; line-height: 1.3; margin-bottom: 25px; } .pass_input { width: 100%; margin-bottom: 30px; } .pass_input input { font-size: 20px; font-weight: 400; line-height: 1.3; border: 1px solid #E2E2E2; border-radius: 5px; padding: 15px 30px; width: 100%; } .pass_input input::placeholder { font-size: 20px; font-weight: 400; line-height: 1.3; color: #E2E2E2; } .pass_btn { width: 100%; text-align: center; font-size: 20px; font-weight: 400; line-height: 1.3; color: #ffff; background: var(--blue); border-radius: 5px; padding: 20px 0; } /* Change Password end ============================================= */ /* Header Top ============================================= */ .header_top { padding: 15px 0; background: #f8f8f8; border-bottom: 1px solid var(--rgba-black); position: relative; } .top_wrap { display: flex; align-items: center; justify-content: space-between; } .top_btn { display: none; cursor: pointer; transition: all .15s linear; -webkit-transition: all .15s linear; -o-transition: all .15s linear; -ms-transition: all .15s linear; -moz-transition: all .15s linear; } .top_btn:hover { opacity: .5; } .top_btn.active { display: block; } .info_block { display: flex; align-items: center; } .header_contact { display: flex; align-items: center; margin-right: 40px; position: relative; } .info_block .header_contact:last-child { margin-right: 0; } .info_block:last-child .header_contact:before { content: ''; position: absolute; top: 0; right: -20px; width: 1px; height: 20px; background: var(--rgba-black); } .info_block:last-child .header_contact:last-child:before { display: none; } .header_icon { width: 22px; height: 16px; margin-right: 10px; } .header_icon img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .header_icon svg { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .trend_line { animation: trendUp 6.8s linear infinite; animation-delay: .5s; stroke-dasharray: 100; pointer-events: none; } .trend_arrow { animation: trendUp 6.8s linear infinite; animation-delay: .5s; stroke-dasharray: 120; pointer-events: none; } @keyframes trendUp { 0% { stroke-dashoffset: -31; } 25% { stroke-dashoffset: 31; } 50% { stroke-dashoffset: 31; } 75% { stroke-dashoffset: 31; } 100% { stroke-dashoffset: 31; } } .head_text { font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--blue); } .currency { font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--blue); margin-right: 10px; text-transform: uppercase; } .head_num { font-size: 14px; font-weight: 400; line-height: 1.4; } .head_group { display: flex; align-items: center; } /* Header ============================================= */ .header { -webkit-box-shadow: 0px 6px 4px -1px var(--rgba-black); box-shadow: 0px 6px 4px -1px var(--rgba-black); z-index: 5; position: relative; } .header_wrap { padding: 15px 0; display: flex; align-items: center; justify-content: space-between; /* -webkit-box-shadow: 0px 15px 4px -10px var(--rgba-black); box-shadow: 0px 15px 4px -10px var(--rgba-black); */ } .header_logo { display: flex; align-items: center; } .header_img { width: 100px; height: 100px; margin-right: 10px; } .header_img svg { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } #logo_top, #logo_left, #logo_right, #logo_bottom { animation: top 4s linear infinite; } #logo_right { animation-delay: .3s; } #logo_bottom { animation-delay: .5s; } #logo_left { animation-delay: .8s; } @keyframes top { 30% { fill: #aba17d; } 35% { fill: #003197; } 40% { fill: #0056ff; } 45% { fill: #003197; } /* 100% { fill: #aba17d; } */ } .link { margin: 30px 0 0 0; display: flex; align-items: center; justify-content: center; } .home_link { display: block; } .home_link span { display: block; margin: 0 auto; padding: 12px 40px; background: var(--blue); color: #fff; font-size: 16px; font-weight: 500; line-height: 1.3; border-radius: 5px; cursor: pointer; } .header_img img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .logo_text { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--blue); } .mobile_register { display: none; } .head_buttons { display: flex; align-items: center; } .register_btn { padding: 15px 40px; background: #01BF60; border-radius: 5px; margin-right: 20px; display: flex; align-items: center; cursor: pointer; transition: all .15s linear; -webkit-transition: all .15s linear; -o-transition: all .15s linear; -ms-transition: all .15s linear; -moz-transition: all .15s linear; } .register_btn:hover { opacity: .8; } .btn_icon { width: 20px; height: 16px; margin-right: 10px; } .btn_icon img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .btn_text { font-size: var(--text-20); font-weight: 700; line-height: 1.4; color: #fff; } .log_in { padding: 15px 40px; background: var(--blue); border-radius: 5px; display: flex; align-items: center; cursor: pointer; transition: all .15s linear; -webkit-transition: all .15s linear; -o-transition: all .15s linear; -ms-transition: all .15s linear; -moz-transition: all .15s linear; } .log_in:hover { opacity: .8; } /* Navs ===================================== */ .navs_wrap { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; position: relative; background: var(--blue); border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; -webkit-box-shadow: inset 0px 5px 3px 0px rgb(39, 39, 39); box-shadow: inset 0px 5px 3px 0px rgb(39, 39, 39); } .nav_wrap-box { display: flex; align-items: center; } .notification_box { margin-right: 40px; position: relative; } .notification_box::after { content: ''; position: absolute; top: 60%; right: -20px; transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); width: 10px; height: 6px; background: #fff; clip-path: polygon(100% 0, 0 0, 50% 100%); -webkit-clip-path: polygon(100% 0, 0 0, 50% 100%); -o-clip-path: polygon(100% 0, 0 0, 50% 100%); -ms-clip-path: polygon(100% 0, 0 0, 50% 100%); -moz-clip-path: polygon(100% 0, 0 0, 50% 100%); } .notification_header { display: flex; align-items: center; cursor: pointer; } .notification_header p { color: #fff; font-size: 18px; line-height: 1.4; font-weight: 400; margin: 0 0 0 10px; } .natification_icon { width: 14px; height: 16px; } .natification_icon img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .notification_area { position: absolute; top: 100%; left: 0; width: 300px; max-height: 400px; overflow-y: auto; background: #fff; border-radius: 5px; padding: 10px; z-index: 10; -webkit-box-shadow: 0px 6px 4px -1px var(--rgba-black), 0px -3px 4px -1px var(--rgba-black); -moz-box-shadow: 0px 6px 4px -1px var(--rgba-black), 0px -3px 4px -1px var(--rgba-black); box-shadow: 0px 6px 4px -1px var(--rgba-black), 0px -3px 4px -1px var(--rgba-black); display: none; } .notification_area::-webkit-scrollbar { height: 10px; top: 20px; width: 6px; } .notification_area::-webkit-scrollbar-thumb { height: 5px; background: #d5d5d5; border-radius: 20px; } .notification_area.active { display: block; top: calc(100% + 40px); } .notification_area-item { padding: 15px 10px; position: relative; display: block; } .notification_area-item::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--blue); opacity: .3; } .notification_area-item:last-child::after { display: none; } .notification_are-title { font-size: 15px; font-weight: 500; line-height: 1.4; margin-bottom: 5px; color: var(--blue); } .notification_area-time { font-size: 14px; font-weight: 400; line-height: 1.4; color: #b4b4b4; } .accord_notification { max-height: 0; overflow: hidden; transition: max-height 0.1s ease-out; -ms-transition: max-height 0.1s ease-out; -moz-transition: max-height 0.1s ease-out; -o-transition: max-height 0.1s ease-out; -webkit-transition: max-height 0.1s ease-out; background: rgb(235, 235, 235); border-radius: 5px; padding: 0 15px; } .accord_notification .notification_area-time { color: #000; } .accord_notification .notification_area-item::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -webkit-transform: translateX(-50%); width: 95%; height: 1.3px; z-index: 1; background: var(--blue); opacity: .6; } .accord_notification .notification_are-title { font-size: 14px; } .links { display: flex; align-items: center; } .nav_link { display: block; color: #fff; position: relative; font-size: var(--text-20); font-weight: 400; line-height: 1.4; margin-right: 80px; transition: all .15s linear; -webkit-transition: all .15s linear; -moz-transition: all .15s linear; -ms-transition: all .15s linear; -o-transition: all .15s linear; } .nav_link:hover { opacity: .8; } .nav_link::after { content: ''; position: absolute; top: 50%; right: -40px; transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); width: 2px; height: 30px; background: var(--rgba-white); } .nav_link:last-child { margin-right: 0; } .nav_link:last-child::after { display: none; } .burger { width: 30px; height: 30px; cursor: pointer; display: none; } .burger img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .languages { padding: 15px 20px; background: var(--rgba-white); border-radius: 5px; display: flex; align-items: center; } .lang_item { display: block; color: #fff; opacity: .5; font-size: var(--text-20); font-weight: 400; line-height: 1.4; margin-right: 30px; text-transform: uppercase; position: relative; transition: all .15s linear; -webkit-transition: all .15s linear; -o-transition: all .15s linear; -ms-transition: all .15s linear; -moz-transition: all .15s linear; } .lang_item.active { opacity: 1; } .lang_item:hover { opacity: .8; } .lang_item::after { content: ''; position: absolute; top: 50%; right: -15px; transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); width: 2px; height: 25px; background: var(--blue); } .lang_item:last-child::after { display: none; } .lang_item:last-child { margin-right: 0; } .stick { position: fixed; top: 0; left: 0; width: calc(100% - 0px); z-index: 11; padding: 15px 0; background: #f9f9f9; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); transition: all .1s linear; -o-transition: all .1s linear; -moz-transition: all .1s linear; -webkit-transition: all .1s linear; } .stick-2 { position: fixed; top: 55px; left: 0; width: calc(100% - 0px); z-index: 12; transition: all .1s linear; -o-transition: all .1s linear; -moz-transition: all .1s linear; -webkit-transition: all .1s linear; } /* Intro ======================================= */ .intro { padding: 50px 0 0; } .intro_body { display: flex; align-items: center; } .intro_slider { /* background: url("../images/slide.png") no-repeat center; background-size: cover; -webkit-background-size: cover; */ position: relative; width: calc(100% - 40px); /* height: 480px; */ margin-right: 40px; margin-bottom: 0 !important; border-radius: 10px; overflow: hidden; z-index: 1; display: flex; flex-direction: column; -ms-flex-direction: column; -webkit-flex-direction: column; justify-content: center; } .intro_slider::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 49, 151, .5); z-index: -1; } .link { margin: 30px 0 0 0; display: flex; align-items: center; justify-content: center; } .home_link { display: block; } .home_link span { display: block; margin: 0 auto; padding: 12px 40px; background: var(--blue); color: #fff; font-size: 16px; font-weight: 500; line-height: 1.3; border-radius: 5px; cursor: pointer; } .slider_item { width: 100%; height: 540px; position: relative; display: block !important; } .slider_item-img::before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 49, 151, .5); } .slider_item-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .slick-slide.slick-current .slider_item-img { animation: slider_img 10s linear; } @keyframes slider_img { 0% { transform: scale(2); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(1); } } .slider_item-img img { width: 100%; height: 100%; object-fit: cover; -o-object-fit: cover; } .slider_title { font-size: var(--text-32); font-weight: 700; line-height: 1.4; margin-bottom: 20px; } .slider_text { font-size: var(--text-20); font-weight: 400; line-height: 2; } .slider_content { text-align: center; color: #fff; z-index: 5; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width: 80%; } .advert { width: 380px; margin-bottom: 0 !important; } .advert_item { width: 100%; width: 380px !important; height: 540px; /* height: auto; */ /* max-height: 480px; */ } .advert_item img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; border-radius: 10px; } .categories { display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap; -moz-flex-wrap: wrap; -o-flex-wrap: wrap; -webkit-flex-wrap: wrap; margin: 50px -20px 0; } .cat_item { width: calc(20% - 40px); margin: 15px 20px; padding: 40px 20px; display: flex; align-items: center; justify-content: center; flex-direction: column; -ms-flex-direction: column; /* background: rgba(0, 86, 255, .1); */ background: var(--rgba-blue); } .cat_item:hover { background: rgba(0, 49, 151, .2); } .cat_photo { width: 140px; height: 140px; margin-bottom: 30px; } .cat_photo img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .cat_text { color: var(--blue); font-size: var(--text-20); font-weight: 700; line-height: 1.4; text-align: center; } /* Product =================================================== */ .product { padding: 100px 0; } .product_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 50px; } .product_head-row { display: flex; align-items: center; } .product_head-row .add_post_btn { margin-left: 40px; } .mobile_add-btn { display: none; } .my_advert-bg { position: relative; height: 500px; } .product_title { font-size: var(--text-32); font-weight: 700; line-height: 1.4; /* color: var(--blue); */ } .sort_by { display: flex; align-items: center; } .sort_icon { width: 40px; height: 40px; cursor: pointer; transition: all .15s linear; -webkit-transition: all .15s linear; -o-transition: all .15s linear; -moz-transition: all .15s linear; -ms-transition: all .15s linear; } .sort_icon:hover { opacity: 1; } #inline { opacity: .5; } #card { opacity: 1; } .sort_icon:first-child { margin-right: 40px; } .category_search { display: flex; align-items: center; justify-content: space-between; margin-bottom: 50px; } .category_input { width: 380px; position: relative; } .category_input input { border: 1px solid #F1F1F1; border-radius: 10px; font-size: 16px; font-weight: 400; line-height: 1.3; padding: 25px 50px 25px 30px; width: calc(100% - 0px); } .category_input input::placeholder { font-size: 16px; font-weight: 400; line-height: 1.4; color: rgba(0, 0, 0, .5); } .category_loupe { position: absolute; top: 50%; right: 30px; transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 20px; height: 20px; cursor: pointer; } .category_loupe img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .category_select { position: relative; width: 250px; } .category_select::after { position: absolute; content: ""; top: 50%; right: 20px; transform: translateY(-50%); width: 0; height: 0; border: 6px solid #000; border-color: #000 transparent transparent transparent; pointer-events: none; } .category_select select { font-size: 16px; font-weight: 400; line-height: 1.4; padding: 15px 15px 15px 15px; cursor: pointer; margin-bottom: 10px; width: 100%; appearance: none; } .category_select select option:first-child { display: none; } .product_box { display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; margin: var(--product-box-margin); flex-direction: var(--item-row); } .inline_head { background: var(--blue); padding: 20px 0; border-top-right-radius: 5px; border-top-left-radius: 5px; display: none; align-items: center; } .inline_item { color: #fff; font-size: var(--text-16); font-weight: 700; line-height: 1.4; text-align: center; width: 17%; } .inline_item:nth-child(3) { margin-left: 10px; } .inline_num { display: none; align-items: center; justify-content: center; border-right: var(--item-element-border); font-size: var(--text-20); width: var(--item-element-width); font-weight: 400; line-height: 1.4; } .product_item { width: var(--item-width); margin: var(--item-margin); padding: var(--item-padding); border: 1px solid var(--rgba-black); border-radius: var(--item-radius); display: flex; align-items: unset; justify-content: space-between; flex-direction: var(--product-col); cursor: var(--cursor); transition: all .2s linear; -o-transition: all .2s linear; -ms-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; } .product_item:hover { -webkit-box-shadow: 3px 3px 5px 10px rgba(90, 90, 90, 0.1), -3px -3px 5px 10px rgba(90, 90, 90, 0.1); -moz-box-shadow: 3px 3px 5px 10px rgba(90, 90, 90, 0.1), -3px -3px 5px 10px rgba(90, 90, 90, 0.1); box-shadow: 3px 3px 5px 10px rgba(90, 90, 90, 0.1), -3px -3px 5px 10px rgba(90, 90, 90, 0.1); transform: translateY(-0.9px); -webkit-transform: translateY(-0.9px); -o-transform: translateY(-0.9px); -moz-transform: translateY(-0.9px); -ms-transform: translateY(-0.9px); } .item_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .item_lot { font-size: var(--text-16); font-weight: 400; line-height: 1.4; color: #a8a8a8; } .item_num { font-size: var(--text-20); font-weight: 700; line-height: 1.4; color: var(--blue); } .item_photo { height: 180px; width: var(--item-element-width); border-right: var(--item-element-border); padding: var(--item-img-paddimg); } .item_photo img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .item_group { display: flex; align-items: var(--item--align); justify-content: center; flex-direction: column; -ms-flex-direction: column; width: var(--item-element-width); border-right: var(--item-element-border); margin: var(--item-element-margin); } .product_item .item_group:last-child { border: none !important; } .item_title { font-size: var(--text-20); font-weight: 700; line-height: 1.4; color: var(--blue); margin-top: 20px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .item_sub_title { font-size: var(--text-16); font-weight: 400; line-height: 1.4; color: #000; text-align: var(--item--align); margin: 10px 0; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .item_name { font-size: var(--text-20); font-weight: 700; line-height: 1.4; color: var(--blue); text-align: var(--item--align); } .item_sub_name { font-size: var(--text-16); font-weight: 400; line-height: 1.4; color: var(--rgba-black); } .item_btn { display: block; margin-top: 20px; padding: 10px 30px; background: var(--blue); border-radius: 5px; max-width: 140px; text-align: center; font-size: var(--text-16); font-weight: 400; line-height: 1.4; color: #fff; transition: all .15s linear; -webkit-transition: all .15s linear; -o-transition: all .15s linear; -ms-transition: all .15s linear; -moz-transition: all .15s linear; } .item_btn:hover { opacity: .8; } .item_row { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; } .item_row .item_btn { margin-top: 0; } .views { display: flex; align-items: center; } .views span { width: 20px; height: 20px; margin-right: 7px; } .views span img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .views p { font-size: 16px; font-weight: 400; line-height: 1.4; } /* Product end =================================================== */ /* Footer =================================================== */ .footer { padding: 50px 0 20px; background: url("../images/footer-bg.png") no-repeat center; background-size: cover; -webkit-background-size: cover; width: 100%; height: 100%; } .footer_content { display: flex; /* align-items: center; */ } .foot_outer { display: flex; justify-content: space-between; width: 100%; } .foot_logo { display: flex; } .footer_img { width: 100px; height: 100px; margin-right: 20px; } .footer_img img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .foot_logo_text { font-size: 20px; font-weight: 700; line-height: 1.4; color: #fff; } .foot_logo img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .foot_col-inner { display: flex; align-items: flex-start; } .foot_col-inner .foot_box { margin-right: 15px; } .foot_col-inner .foot_box:last-child { margin-right: 0; } .foot_col { margin-right: 50px; } .mt20 { margin-top: 45px; } .foot_col:last-child { margin-right: 0; } .foot_title { font-size: var(--text-20); font-weight: 700; line-height: 1.4; color: #fff; margin-bottom: 20px; } .foot_box { padding-left: 20px; } .foot_item { display: block; color: #fff; margin-bottom: 10px; font-size: var(--text-16); font-weight: 400; line-height: 1.4; } .foot_phone-box { display: flex; align-items: flex-start; } .foot_phone-box a { font-size: var(--text-16); font-weight: 400; line-height: 1.4; display: block; color: #fff; } .foot_phone-text { font-size: var(--text-16); font-weight: 400; line-height: 1.4; margin-right: 10px; } .copyright { color: #fff; font-size: var(--text-16); font-weight: 400; line-height: 1.4; margin-top: 80px; } /* Footer end =================================================== */ /* Category Page ==================================================================== */ /* Category ======================================================== */ .category { padding: 50px 0 100px; } .cat_tabs { display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap; -moz-flex-wrap: wrap; -o-flex-wrap: wrap; -webkit-flex-wrap: wrap; margin-bottom: 100px; margin: 0 -20px 20px -20px; } .tab_link { width: calc(25% - 40px); text-align: center; border-radius: 10px; background: var(--rgba-blue); color: var(--blue); padding: 35px 10px; margin-right: 40px; margin: 0 20px 20px 20px; cursor: pointer; font-size: var(--text-20); font-weight: 700; line-height: 1.4; display: flex; align-items: center; justify-content: center; transition: all .15s linear; -webkit-transition: all .15s linear; -o-transition: all .15s linear; -ms-transition: all .15s linear; -moz-transition: all .15s linear; } .tab_link:hover { background: rgba(0, 49, 151, .2); } .tab_link.active { background: var(--blue); color: #fff; } .tab_source { display: none; } .tab_source.active { display: block; } .cat_end { display: flex; align-items: center; margin-top: 100px; } .cat_arrow { background: var(--blue); padding: 15px; /* width: 10px; height: 10px; */ border-radius: 5px; display: flex; align-items: center; justify-content: center; transition: all .15s linear; -webkit-transition: all .15s linear; -o-transition: all .15s linear; -ms-transition: all .15s linear; -moz-transition: all .15s linear; } .cat_arrow:hover { opacity: .8; } .cat_arrow img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .left img { transform: rotate(180deg); -o-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); } .cat_form { margin: 0 10px; } .cat_form input { width: 70px; padding: 5px; background: #EAF0F1; border-radius: 5px; font-size: var(--text-20); font-weight: 700; line-height: 1.4; text-align: center; } .cat_form input::placeholder { font-size: var(--text-20); font-weight: 700; line-height: 1.4; color: #000; } .cat_page { font-size: var(--text-20); font-weight: 700; line-height: 1.4; color: var(--rgba-black); margin-left: 20px; } .category_block { padding-top: 100px; } .main_title { font-size: var(--text-32); font-weight: 700; line-height: 1.4; margin-bottom: 50px; } /* News ======================================== */ .news { padding-top: 100px; } .news.news_page { padding: 50px 0 100px; } .news .cat_end { margin-top: 40px; } .news_row { margin-bottom: 50px; display: flex; align-items: center; justify-content: space-between; } .news_row .main_title { margin-bottom: 0 !important; } .all_news { font-size: 16px; font-weight: 500; line-height: 1.4; } .news_box { display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; margin: -10px; } .news_box-item { width: calc(33.33% - 20px); margin: 0 10px 40px 10px; } .news_box-item-photo { width: 100%; height: 300px; position: relative; overflow: hidden; border-radius: 10px; margin-bottom: 15px; } .news_box-item-photo img { width: 100%; height: 100%; object-fit: cover; -o-object-fit: cover; transition: all .3s linear; -ms-transition: all .3s linear; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; } .news_box-item-photo img:hover { transform: scale(1.05); } .news_link { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; z-index: 2; background: var(--blue); border-radius: 3px; display: flex; align-items: center; justify-content: center; transition: all .3s linear; -ms-transition: all .3s linear; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; } .news_link:hover { transform: scale(1.2); } .news_link img { width: 40%; height: 40%; object-fit: contain; -o-object-fit: contain; } .news_box-item-title { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--blue); font-family: 'Poppins', sans-serif; } .news_box-item-date { font-size: 14px; font-weight: 400; line-height: 1.3; margin: 10px 0; font-family: 'Poppins', sans-serif; } .news_box-item-txt { font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: .5px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-family: 'Poppins', sans-serif; } /* News end ==================================== */ /* Product detail Page ==================================================================== */ /* Product detail ======================================================== */ .detail { padding: 100px 0; } .detail_body { display: flex; } .detail_info { /* display: flex; */ /* align-items: flex-end; */ /* justify-content: space-between; */ width: calc(100% - 50px); margin-left: 50px; } .detail_info-inner { display: flex; justify-content: space-between; } .detail_gallery { display: flex; } .detail_photo_box { margin-right: 10px; width: 380px; } .detail_photo { width: 380px; height: 225px; cursor: pointer; } .detail_photo img { width: 100%; height: 100%; object-fit: cover; -o-object-fit: cover; } /* ============================================== */ .detail_for_navs { /* display: none !important; */ width: 100px; margin-left: 10px; } .detail_for_navs .slick-list { padding: 0 0 15% 0 !important; } /* ============================================== */ .detail_photo_nav { width: 100px; height: 60px; } .detail_photo_nav img { width: 100%; height: 100%; object-fit: cover; -o-object-fit: cover; } /* .detail_about { margin-left: 50px; } */ .detail_title { font-size: var(--text-32); font-weight: 700; line-height: 1.4; margin-bottom: 30px; width: 100%; } .detail_row { /* display: flex; align-items: center; */ margin-bottom: 20px; } .detail_name { font-size: 16px; font-weight: 700; line-height: 1.4; margin-right: 20px; margin-bottom: 5px; color: #a8a8a8; } .detail_value { font-size: var(--text-20); font-weight: 400; line-height: 1.4; color: var(--blue); } .green { color: #01BF60; } .red { color: #FF0000; } .detail_description { margin-top: 50px; } .description_title { font-size: 16px; font-weight: 700; line-height: 1.4; margin-bottom: 20px; color: #a8a8a8; } .detail_text { font-size: var(--text-20); font-weight: 400; line-height: 1.4; } .detail_table { margin: 50px 0; /* border-radius: 10px; */ overflow: hidden; display: flex; /* justify-content: center; */ /* flex-direction: column; -ms-flex-direction: column; */ } .table_group { display: flex; align-items: center; justify-content: center; flex-direction: column; -ms-flex-direction: column; width: 20%; text-align: center; } .title_item { font-size: var(--text-20); font-weight: 400; line-height: 1.4; color: #fff; background: var(--blue); width: 100%; padding: 20px 0; } .table_item { font-size: var(--text-20); font-weight: 400; line-height: 1.4; padding: 30px 0; width: 100%; border: 1px solid var(--rgba-black); overflow: hidden; } .detail_buttons { display: flex; align-items: center; justify-content: space-between; } .btn_group { display: flex; align-items: center; } .btn { border-radius: 10px; text-align: center; padding: 20px 50px; cursor: pointer; font-size: var(--text-20); font-weight: 400; line-height: 1.4; color: #fff; transition: all .15s linear; -webkit-transition: all .15s linear; -o-transition: all .15s linear; -ms-transition: all .15s linear; -moz-transition: all .15s linear; } .btn:hover { opacity: .8; } .btn--green { background: #01BF60; } .btn--blue { background: var(--blue); } .btn--border { border: 1px solid var(--blue); color: var(--blue); margin-right: 30px; } .btn--border:hover { opacity: .8; border: 1px solid rgba(0, 49, 151, .6); } .detail_box { margin-top: 50px; } .seller_info { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); backdrop-filter: blur(5px); z-index: 20; display: none; } .seller_info.active { display: block; } .seller_inner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); background: #fff; padding: 50px; border-radius: 10px; width: 700px; } .seller_title { font-size: 32px; font-weight: 700; line-height: 1.4; margin-bottom: 50px; } .seller_row { display: flex; margin-bottom: 30px; } .seller_row:last-child { margin-bottom: 0; } .seller_icon { width: 40px; height: 40px; margin-right: 15px; } .seller_icon img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .seller_label { font-size: 16px; font-weight: 700; line-height: 1.3; margin-bottom: 5px; color: var(--blue); } .seller_text { font-size: 20px; font-weight: 600; line-height: 1.4; } /* Contact Page ======================================================================== */ /* Contact ============================================================= */ .contact { padding: 100px 0; } .contact_body { display: flex; } .contact_content { width: calc(70% - 30px); margin-right: 30px; } .contact_title { font-size: var(--text-32); font-weight: 700; line-height: 1.4; margin-bottom: 50px; } .contact_form { display: flex; align-items: center; flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; margin: -30px -20px; overflow: hidden; } .contact_input { width: calc(50% - 40px); margin: 30px 20px; display: flex; flex-direction: column; -ms-flex-direction: column; } .contact_input input { width: calc(100% - 0px); padding: 15px 30px; border: 1px solid var(--rgba-black); border-radius: 5px; font-size: var(--text-20); font-weight: 400; line-height: 1.4; } .contact_input input::placeholder { font-size: var(--text-20); font-weight: 400; line-height: 1.4; color: var(--rgba-black); } .contact_input label { font-size: var(--text-20); font-weight: 400; line-height: 1.4; margin-left: 30px; margin-bottom: 20px; } .contact_comment { width: calc(100% - 40px); margin: 30px 20px; display: flex; flex-direction: column; -ms-flex-direction: column; } .contact_comment textarea { width: calc(100% - 0px); max-width: calc(100% - 0px); min-width: calc(30% - 60px); max-height: calc(400px - 60px); min-height: calc(200px - 60px); padding: 15px 30px; border: 1px solid var(--rgba-black); border-radius: 5px; font-family: 'Poppins', sans-serif; resize: none; font-size: var(--text-20); font-weight: 400; line-height: 1.4; } .contact_comment textarea::placeholder { font-size: var(--text-20); font-weight: 400; line-height: 1.4; color: var(--rgba-black); font-family: 'Poppins', sans-serif; } .contact_comment label { font-size: var(--text-20); font-weight: 400; line-height: 1.4; margin-left: 30px; margin-bottom: 20px; } .contact_form .btn { margin: 30px 20px; } .contact_info { width: calc(30% - 30px); margin-left: 30px; } .contact_row { display: flex; margin-bottom: 30px; } .contact_row:last-child { margin-bottom: 0; } .contact_icon { width: 40px; height: 40px; margin-right: 20px; } .contact_icon img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .row_content { width: calc(100% - 60px); } .contact_sub_title { font-size: var(--text-16); font-weight: 400; line-height: 1.4; color: var(--blue); } .contact_text { font-size: var(--text-20); font-weight: 400; line-height: 1.4; } .contact_map { width: 100%; margin-top: 100px; } /* New post ================================ */ .news_post { padding: 70px 0 100px; } .news_post-box { display: flex; align-items: flex-start; } .news_post-info { width: calc(100% - 450px); margin-right: 50px; } .news_post-info-title { color: #000; font-weight: 700; font-size: 22px; line-height: 28px; } .news_post-info-date { font-size: 16px; line-height: 26px; color: #a2a2a2; font-weight: 400; margin: 10px 0 20px; } .news_post-info-photo { width: 100%; height: 500px; background: #e5e5e5; margin-bottom: 40px; } .news_post-info-photo img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .news_post-info-txt p { margin-bottom: 15px; font-size: 16px; line-height: 26px; margin-bottom: 20px; letter-spacing: 0.5px; } .news_box-item-txt:last-child { margin-bottom: 0; } .news_post-aside { width: 400px; } .news_aside-title { font-size: 16px; line-height: 20px; font-weight: 700; text-transform: uppercase; /* margin-bottom: 20px; */ color: #242424; border-bottom: 1px solid #dcdcdc; padding-bottom: 20px; } .news_aside-item { border-bottom: 1px solid #dcdcdc; padding: 18px 0; } .news_aside-item:last-child { border-bottom: unset; } .news_aside-item-date { font-size: 12px; line-height: 20px; color: #a2a2a2; font-weight: 400; } .news_aside-item-title { color: #000; font-weight: 500; font-size: 15px; line-height: 20px; margin: 10px 0 0 0; display: block; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* New post end ============================ */ /* Add post =========================================== */ .post { padding: 100px 0; } .post_wrap { overflow: hidden; } .post_tabs { display: flex; align-items: center; margin: 0 -20px 50px; } .post_link { width: calc(33.33% - 40px); margin: 0 20px; text-align: center; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--blue); background: #F2F6FF; padding: 30px 10px; border-radius: 10px; cursor: pointer; } .error_span { /* position: absolute; left: 0; bottom: 0; */ margin-top: 5px; display: block; } .t-c { text-align: center; width: 100%; } .show_span { font-size: 18px; font-weight: 600; line-height: 1.5; margin: 10px 0; width: 100%; } .new_group { display: flex; align-items: center; width: 100%; margin-top: 20px; } .new_group .item_btn { margin-top: 0; padding: 10px 15px; width: calc(50% - 10px); } .new_group .item_btn:first-child { margin-right: 10px; } .delete_item_btn { background: rgb(255, 0, 0); } .full_btn { width: 100%; max-width: 100%; } .post_link.active { color: #fff; background: var(--blue); } .post_form { display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; position: relative; margin: -25px -20px 0; } .post_form-2 .btn_bg { margin-top: 50px; } .simple_group { display: flex; align-items: center; flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; } .post_input { width: calc(33.33% - 40px); margin: 25px 20px 0; position: relative; /* padding-bottom: 25px; */ } .post_input input { border: 1px solid rgba(0, 0, 0, .5); border-radius: 5px; padding: 15px 30px; width: calc(100% - 0px); font-size: var(--text-20); font-weight: 400; line-height: 1.3; } .error_txt { font-size: 13px; font-weight: 400; line-height: 1.4; color: red; margin-top: 5px; display: inline-block; } .verify_input input { padding-right: 60px; } .post_input input[type="password"]::placeholder { padding-top: 10px; } .post_input input::placeholder { color: rgba(0, 0, 0, .5); font-size: var(--text-18); font-weight: 400; line-height: 1; } .post_input label { font-size: var(--text-18); font-weight: 400; line-height: 1; margin-left: 10px; margin-bottom: 20px; display: block; } .post_input label span { color: red; } .post_in label { font-size: var(--text-18); font-weight: 400; line-height: 1; margin-left: 20px; margin-bottom: 20px; display: block; } .post_in label span { color: red; } .verify { position: absolute; top: 55px; right: 30px; width: 20px; height: 20px; cursor: pointer; pointer-events: none; } .verify svg rect { fill: #003197; } .verify svg { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .verify.disabled { pointer-events: unset; } .verify.disabled svg path { stroke: #ABA17D; } .post_comment { width: calc(100% - 40px); margin: 25px 20px; position: relative; /* padding-bottom: 25px; */ } .post_comment textarea { border: 1px solid rgba(0, 0, 0, .5); border-radius: 5px; padding: 15px 30px; width: calc(100% - 0px); font-family: 'Poppins', sans-serif; font-size: var(--text-20); font-weight: 400; line-height: 1.3; resize: none; } .post_comment label { font-size: var(--text-18); font-weight: 400; line-height: 1; margin-left: 20px; margin-bottom: 20px; display: block; } .post_comment label span { color: red; } .bank { width: 100%; margin: 15px 10px 0; display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap; -moz-flex-wrap: wrap; -o-flex-wrap: wrap; -webkit-flex-wrap: wrap; } .bank_group { width: calc(33.33% - 20px); margin: 10px; } .bank_group:last-child { margin-bottom: 0; } .bank_title { font-size: 20px; font-weight: 600; line-height: 1.3; margin-bottom: 10px; } .bank_text { font-size: 16px; font-weight: 400; line-height: 1.4; margin-bottom: 5px; padding-left: 20px; } .bank_form .post_upload_box { /* width: calc(67% - 45px); */ width: 550px; margin: 25px 20px 0; } /* .bank_form .post_upload_item { margin: 25px 0; } */ .upload_label { font-size: var(--text-18); font-weight: 400; line-height: 1; margin-left: 20px; margin-bottom: 20px; display: block; } .upload_label span { color: red; } .bank_form .post_upload_box .post_upload_item { width: 100%; margin: 25px 0; } .btn_bg { width: calc(100% - 40px); margin: 25px 20px; } .post_btn { background: var(--blue); color: #fff; border: none; border-radius: 5px; padding: 20px 50px; cursor: pointer; font-size: var(--text-18); font-weight: 400; line-height: 1; margin: 0 auto; display: block; } .tab_info { display: none; } .tab_info.active { display: flex; } .eye { width: 20px; height: 20px; position: absolute; top: 57px; right: 30px; cursor: pointer; } .eye img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .eye_on.active { display: block; } .eye_on { display: none; } .eye_off.active { display: none; } .add_post_text { font-size: 20px; font-weight: 400; line-height: 1.3; margin-top: 30px; text-align: center; width: 100%; } .add_post_text span { color: red; } /* Custom select ============= */ .custom-select { position: relative; width: calc(100% - 0px); padding: 20px 30px; border: 1px solid #E2E2E2; border-radius: 5px; background: #F9F9F9; font-size: var(--text-18); font-weight: 400; line-height: 1; } .custom-select select { display: none; } .select-selected { background-color: #f9f9f9; color: #000; } .select-selected:after { position: absolute; content: ""; top: 50%; right: 30px; transform: translateY(-30%); width: 0; height: 0; border: 6px solid #000; border-color: #000 transparent transparent transparent; } .select-selected.select-arrow-active:after { border-color: transparent transparent #000 transparent; top: 50%; transform: translateY(-70%); } .select-items div, .select-selected { color: #000; cursor: pointer; } .select-items div { padding: 5px; border-radius: 3px; } .select-items { position: absolute; background-color: #fff; top: calc(100% + 10px); left: 0; right: 0; z-index: 99; padding: 10px 5px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 5px; } .select-hide { display: none; } .select-items div:hover, .same-as-selected { background: #E2E2E2; } /* custom select */ .library { padding: 100px 0; } .upload_group { display: flex; align-items: center; border: 1px solid #E2E2E2; border-radius: 5px; } .upload_group label { font-size: 16px; font-weight: 400; line-height: 1.3; background: #E2E2E2; border-radius: 5px; margin: 0; padding: 15px; cursor: pointer; } .form_group { width: calc(100% - 170px); } .alert-danger p { font-size: 20px; font-weight: 500; line-height: 1.5; } .form_group label { background: transparent; width: calc(100% - 0px); cursor: unset; padding: 0 0 0 10px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .form_group label span { color: rgba(0, 0, 0, .4); } .post_input_box { display: flex; align-items: center; margin-top: 40px; } .post_input_text { width: calc(100% - 210px); color: rgba(0, 0, 0, .4); font-size: 14px; font-weight: 400; line-height: 1.3; } .post_input_gal { display: flex; align-items: center; } .post_input_img { width: 60px; height: 60px; margin-right: 5px; } .post_input_img:last-child { margin-right: 0; } .my-select { width: 100%; position: relative; /* padding-bottom: 25px; */ } .p-b { padding-bottom: 0; } .my-select::after { position: absolute; content: ""; top: 30px; right: 30px; transform: translateY(-30%); width: 0; height: 0; /* display: ; */ border: 6px solid #000; border-color: #000 transparent transparent transparent; } .my-select select { width: 100%; border: 1px solid rgba(0, 0, 0, .5); padding: 15px 30px; border-radius: 5px; font-size: var(--text-20); font-weight: 400; line-height: 1.3; appearance: none; -ms-appearance: none; -moz-appearance: none; -o-appearance: none; -webkit-appearance: none; cursor: pointer; /* box-sizing: content-box; */ } .my-select select option:first-child { display: none; } .my-select select option { font-size: 16px; line-height: 2.5 !important; padding: 30px 0 !important; font-weight: 400; height: 50px; min-height: 50px !important; margin: 20px 0 !important; } /* .add_upload { text-align: center; width: fit-content; margin: 30px auto 20px; cursor: pointer; font-size: 20px; font-weight: 500; line-height: 1.3; margin-top: 30px; margin-bottom: 20px; text-decoration: underline; color: var(--blue); user-select: none; } */ .select_trash { position: absolute; top: 60%; right: 10px; width: 15px; height: 20px; cursor: pointer; } .select_trash img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .select_delete { position: absolute; top: 5px; right: 5px; cursor: pointer; width: 15px; height: 15px; } .select_delete img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .hidden { display: none; } .post_upload_box { display: flex; align-items: center; width: 100%; } .post_upload_item { width: calc(33.33% - 40px); margin: 25px 20px; } .post_upload_img { margin: 0 auto 20px; width: 80%; height: 150px; } .post_upload_img img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .post_upload_item .post_input { width: 100%; margin: 0; } /* Add post end ======================================= */ /* Chat ========================================= */ .chat { padding: 100px 0; } .chat_wrap { position: relative; } #more_btn { background: transparent; border: none; width: 100%; text-align: center; font-size: 15px; font-weight: 500; line-height: 1.4; position: relative; margin-bottom: 20px; cursor: pointer; font-style: italic; } #more_btn::before { content: ''; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -webkit-transform: translateX(-50%); border: 6px solid #000; border-color: transparent transparent #000 transparent; animation: load_arrow .8s ease-in infinite; } @keyframes load_arrow { 0% { top: -12px; } 50% { top: -15px; } 100% { top: -12px; } } .chat_box { display: flex; border: 1px solid #e2e2e2; border-radius: 10px; overflow: hidden; z-index: 7; /* position: relative; */ } .chat_people { width: 30%; border-right: 1px solid #e2e2e2; height: 620px; overflow-y: auto; position: relative; background: #fff; } .chat_people::-webkit-scrollbar { display: none; } .chat_people::-webkit-scrollbar-track { display: none; } .chat_people::-webkit-scrollbar-thumb { display: none; } .chat_area-inner::-webkit-scrollbar { width: 10px; } .chat_area-inner::-webkit-scrollbar-track { background: #fff; border: 1px solid #e2e2e2; border-radius: 5px; } .chat_area-inner::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 5px; } .chat_area { width: 70%; height: 620px; padding: 10px 10px 100px; position: relative; } .chat_wall { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; -ms-flex-direction: column; -moz-flex-direction: column; -o-flex-direction: column; -webkit-flex-direction: column; z-index: -1; } .chat_wall_img { width: 100px; height: 100px; } .chat_wall_img img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .chat_wall_text { font-size: 24px; font-weight: 700; line-height: 1.5; color: var(--blue); margin-top: 10px; text-align: center; width: 60%; } .chat_area-inner { overflow-y: auto; height: 100%; padding: 20px; /* z-index: 3; */ background: #fff; /* display: none; */ } .chat_area-inner.active { display: block; } .person { background: #f5f5f5; padding: 30px; border-bottom: 1px solid #e2e2e2; position: relative; cursor: pointer; } .person:hover { background: #c9c9c9; } .person:hover .person_message { width: calc(100% - 50px); } .delete { cursor: pointer; position: absolute; bottom: 20px; right: 20px; width: 20px; height: 20px; display: none; z-index: 2; background-color: transparent; } .delete:hover { animation: trash .5s linear infinite; } @keyframes trash { 0% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } 100% { transform: rotate(-7deg); } } .delete img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; pointer-events: none; } .person:hover .delete { display: block; } .person:last-child { border-bottom: none; } .person.active { background: var(--blue); color: #fff; } .person_name { font-size: var(--text-18); font-weight: 700; line-height: 1.3; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; } .person_message { font-size: 14px; font-weight: 400; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .chat_alert { position: absolute; top: 12px; right: 15px; border-radius: 50%; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--blue); font-size: 10px; font-weight: 300; line-height: 1.3; } .chat_alert.active { display: none; } .friend_message { width: 60%; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 30px; margin-bottom: 30px; background: #f5f5f5; overflow-x: hidden; } .my_message { width: 60%; border-bottom-left-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 30px; margin: 0 0 30px auto; background: var(--blue); color: #fff; overflow-x: hidden; } .friend_message .message_time { color: rgba(0, 0, 0, .5); font-style: italic; margin-bottom: 10px; } .my_message .message_time { color: rgba(250, 250, 250, .5); font-style: italic; margin-bottom: 10px; } .message_text { font-size: 14px; font-weight: 400; line-height: 1.3; } .message_form { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 60px); border: 1px solid #e2e2e2; border-radius: 10px; overflow: hidden; background: #fff; } .chat_burger { width: 30px; height: 30px; position: absolute; top: -40px; left: 20px; display: none; cursor: pointer; } .chat_burger svg { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .message_input { width: 100%; height: 100px; } .message_input textarea { font-size: var(--text-16); font-weight: 400; line-height: 1.3; padding: 20px 90px 20px 20px; width: 100%; min-height: 100%; font-family: 'Poppins', sans-serif; resize: none; } .message_input textarea::-webkit-scrollbar { display: none; } .form_file { position: absolute; top: 20px; right: 55px; z-index: 1; } .message_btn { position: absolute; top: 20px; right: 20px; background: none; border: none; cursor: pointer; width: 20px; height: 20px; z-index: 1; } .message_btn img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .label_img { width: 20px; height: 20px; } .label_img img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .anchor { cursor: pointer; } .empty_area { position: relative; height: 420px; } /* Custom file-input ============================ */ .inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; cursor: pointer; } .inputfile+label { max-width: 80%; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; display: inline-block; overflow: hidden; font-size: var(--vacancy_text); font-weight: 400; line-height: 1.5; } .inputfile+label { display: none; } .inputfile:focus+label, .inputfile.has-focus+label { outline: 1px dotted #000; outline: -webkit-focus-ring-color auto 5px; } .inputfile+label * { pointer-events: none; } /* Custom file-input ============================ */ /* Chat end ======================================= */ /* Modal ================================ */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); display: none; z-index: 20; } .modal.active { display: block; } .modal_inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width: calc(100% - 80px); max-width: 400px; background: #fff; border-radius: 10px; padding: 30px; } .modal_title { font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--blue); margin-bottom: 30px; text-align: center; } .modal_btn-box { display: flex; align-items: center; justify-content: space-around; margin: 0 -10px; } .modal_btn-box button { width: calc(50% - 34px); margin: 0 10px; border: 1px solid #eeee; border-radius: 5px; cursor: pointer; padding: 7px; transition: all .1s linear; } .reset-form:hover { background: rgba(255, 0, 0, 0.795); color: #fff; } .accept-form:hover { background: #003097c0; color: #fff; } /* Modal end ================================ */ /* Message ======================================= */ .thanks { padding: 200px 0; } .thanks_title { font-size: 32px; font-weight: 700; line-height: 1.3; margin-bottom: 20px; text-align: center; } .thanks_text { font-size: 24px; font-weight: 400; line-height: 1.3; text-align: center; width: 100%; } /* Message end ======================================= */ /* Basket =========================================== */ .basket_box { display: flex; align-items: flex-start; } .basket_data { width: calc(65% - 30px); margin-right: 30px; overflow: hidden; border-radius: 10px; } .basket_info { width: calc(35% - 30px); margin-left: 30px; border: 1px solid #f1f1f1; /* overflow: hidden; */ border-radius: 10px; } .basket_table table { width: 100%; text-align: center; border: 1px solid #f1f1f1; border-collapse: collapse; } .basket_table table thead th, .basket_table table tbody td { width: 25%; } .basket_table table thead th { padding: 20px 0; background: var(--blue); color: #fff; font-size: 16px; font-weight: 700; line-height: 1.5; } .basket_table table tbody td { border: 1px solid #f1f1f1; } .basket_table table thead tr th:last-child { width: 15%; } .basket_table table tbody tr td:last-child { width: 15%; } .basket_table table tbody tr td:nth-child(2) { padding: 20px 10px; } .basket_item_title { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--blue); } .basket_item_text { font-size: 16px; font-weight: 400; line-height: 1.3; margin-top: 10px; } .basket_delete { cursor: pointer; width: 20px; height: 24px; margin: auto; } .basket_delete img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .basket_img { width: calc(100% - 20px); height: 95px; margin: auto; } .basket_img img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .basket_info_title { font-size: 20px; font-weight: 700; line-height: 1.1; color: #fff; background: var(--blue); padding: 20px; border-top-right-radius: 10px; border-top-left-radius: 10px; } .basket_info_item { padding: 30px 40px 30px; position: relative; } .pay_link { display: block; padding: 20px 10px; background: var(--blue); color: #fff; font-size: 18px; font-weight: 400; line-height: 1.3; border-radius: 5px; margin-top: 50px; width: 100%; text-align: center; } .basket_info_item .basket_info_box:last-child { margin-bottom: 0; } .basket_info_item::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -webkit-transform: translateX(-50%); width: 90%; height: 1px; background: #f1f1f1; } .basket_info_box { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; } .basket_info_name { font-size: 16px; font-weight: 400; line-height: 1.3; } .basket_info_cash { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--blue); } .basket_info_select label { font-size: 16px; font-weight: 400; line-height: 1.3; margin-bottom: 20px; display: block; } .basket_info_select .custom-select { background: #F9F9F9; border: 1px solid #E2E2E2; } .basket_info_select .select-items div:hover { background: #E2E2E2; } /* Basket end ======================================= */ /* Replenishment History ======================================= */ .history_table { width: 100%; overflow-x: auto; } .history_table table { width: 100%; text-align: center; border: 1px solid #F1F1F1; border-collapse: collapse; border-radius: 20px; } .history_table table td { border: 1px solid #F1F1F1; padding: 30px 7px; font-size: 20px; font-weight: 500; line-height: 1.3; } /* .history_table table tbody tr:last-child td:first-child { border-bottom-left-radius: 20px; } .history_table table tbody tr:last-child td:last-child { border-bottom-right-radius: 20px; } .history_table table th:first-child { border-top-left-radius: 5px; } .history_table table th:last-child { border-top-right-radius: 5px; } */ .history_table table th { color: #fff; background: var(--blue); padding: 30px 10px; font-size: 16px; font-weight: 400; line-height: 1.3; } .approved { color: #01BF34; } .denied { color: #FF0000; } /* Replenishment History end ======================================= */ /* Add post 3 ======================================= */ .add_post-3 { display: flex; align-items: flex-start; } .add_post-3 .basket_info { width: 440px; margin-left: 60px; margin-top: 0; } .add_post-box { width: calc(100% - 500px); display: flex; text-align: center; flex-wrap: wrap; -ms-flex-wrap: wrap; -moz-flex-wrap: wrap; -o-flex-wrap: wrap; } .bank_transfer { width: 100%; margin: 0 15px; } .bank_transfer .add_post_box-item { width: calc(25% - 10px); } .add_post-box-item { margin: 0 5px; } .add_post_box-item { border: 2px solid #F2F6FF; border-radius: 5px; width: calc(33.33% - 10px); margin: 0 5px 20px 5px; } .add_post_box-item .add_post_box-item-row:first-child { background: #F2F6FF; } .add_post_box-item-row { padding: 20px 10px; /* display: flex; align-items: center; justify-content: center; */ } .add_post-box-title { color: #003197; font-size: 16px; font-weight: 400; line-height: 1.4; } .add_post-box-text { color: #000; font-size: 16px; font-weight: 400; line-height: 1.4; } /* Add post 3 end ======================================= */ /* Terms =========================================== */ .term { padding: 100px 0; } .term_box { display: flex; align-items: flex-start; } .term_aside { width: calc(35% - 25px); margin-right: 25px; border: 2px solid #F1F1F1; border-radius: 5px; overflow: hidden; } .term_main { width: calc(65% - 25px); margin-left: 25px; } .term_aside-title { background: var(--blue); padding: 20px 40px 20px 40px; color: #fff; font-size: 20px; font-weight: 700; line-height: 1.3; } .aside_term-tab { font-size: 16px; font-weight: 400; line-height: 1.3; color: #000; cursor: pointer; padding: 30px 40px 30px 40px; position: relative; border-bottom: 1px solid #F1F1F1; } .aside_term-tab:last-child { border-bottom: unset; } .aside_term-tab::after { content: ''; position: absolute; top: 50%; right: 40px; width: 10px; height: 10px; transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); background: #000; clip-path: polygon(0 0, 0% 100%, 100% 50%); -ms-clip-path: polygon(0 0, 0% 100%, 100% 50%); -moz-clip-path: polygon(0 0, 0% 100%, 100% 50%); -o-clip-path: polygon(0 0, 0% 100%, 100% 50%); -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%); } .aside_term-tab.active { color: var(--blue); background: #F2F6FF; } .aside_term-tab.active::after { background: var(--blue); } .open_info { display: none; } .open_info.active { display: block; } .term_main-info { position: relative; animation: tab .3s linear; } .term_main-title { font-size: 32px; font-weight: 700; line-height: 1.3; margin-bottom: 30px; } .term_main-info p { font-size: 17px; font-weight: 400; line-height: 1.7; letter-spacing: .5px; word-spacing: .7px; margin-bottom: 20px; } @keyframes tab { 0% { top: 50px; } 100% { top: 0; } } @-webkit-keyframes tab { 0% { top: 20px; } 100% { top: 0; } } /* Terms end ======================================= */ /* Import table page ======================================= */ /* Import table page end ==================================== */ /* Export table page ======================================= */ .export { padding: 100px 0; } .export_table { width: 100%; overflow-x: auto; } .export_table table { border: 1px solid #E5E7EB; border-collapse: collapse; width: 100%; text-align: center; } .export_table thead { background: #E5E7EB; border-bottom: 1px solid #E5E7EB; } .export_table thead th { font-size: 14px; padding: 15px 5px; } .export_table tbody tr { border-bottom: 1px solid #E5E7EB; transition: all .2s linear; -ms-transition: all .2s linear; -moz-transition: all .2s linear; -o-transition: all .2s linear; -webkit-transition: all .2s linear; } .export_table tbody tr:nth-of-type(even) { background-color: rgba(243, 244, 246, 1); } .export_table tbody tr:hover { background-color: rgba(0, 49, 151, .1); } .export_table tbody tr td { padding: 15px 5px; font-size: 14px; } .table_info-row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #E5E7EB; padding-bottom: 20px; } .table_info-title { font-size: 16px; font-weight: 500; line-height: 1.5; color: rgba(55, 65, 81, 1); max-width: 670px; } .table_info-group { display: flex; align-items: center; } .table_download { cursor: pointer; background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.4; padding: 7px 10px; border-radius: 3px; margin-right: 10px; } .table_filter { position: relative; } .table_filter-icon { width: 32px; height: 32px; border: 1px solid var(--blue); border-radius: 3px; cursor: pointer; padding: 5px; } .table_filter-icon svg { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .table_filter-info { position: absolute; top: 0; left: -310px; width: 300px; background: #f3f3f3; padding: 20px; border-radius: 5px; display: none; } .table_filter-info.active { display: block; } .table_filter-info::after { content: ''; position: absolute; top: 0; right: -5px; width: 10px; height: 15px; background: #f3f3f3; clip-path: polygon(0 0, 0% 100%, 100% 50%); -ms-clip-path: polygon(0 0, 0% 100%, 100% 50%); -moz-clip-path: polygon(0 0, 0% 100%, 100% 50%); -o-clip-path: polygon(0 0, 0% 100%, 100% 50%); -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%); } .table_filter-info-title { font-size: 15px; font-weight: 500; line-height: 1.5; border-bottom: 1px solid #E5E7EB; text-align: center; margin-bottom: 10px; padding-bottom: 5px; } .table_filter-info-check { margin-bottom: 10px; } .table_filter-info-check input { margin-right: 5px; } .table_filter-info-check input, .table_filter-info-check label { cursor: pointer; } .table_box { display: flex; align-items: center; margin: 30px 0 20px; } .table_box-search { margin-right: 15px; width: calc(100% - 15px); max-width: 200px; } .table_box-search:last-child { margin-right: 0; } input::-webkit-calendar-picker-indicator { display: none !important; } .table_box-search input { width: 100%; padding: 10px 15px; font-size: 14px; font-weight: 500; line-height: 1.4; border: 1px solid var(--blue); border-radius: 5px; } .table_box-search input:focus { box-shadow: 0px 0px 5px 0.1px var(--blue); } .table_box-search datalist { width: 100%; padding: 10px 15px; font-size: 14px; font-weight: 500; line-height: 1.4; border: 1px solid var(--blue); border-radius: 5px; } .w300 { min-width: 300px !important; max-width: 300px !important; } /* Export table page end ==================================== */ /* Media Query ======================================================= */ @media(max-width: 1600px) { :root { --text-32: 30px; } .auto_container { padding: 0 85px; } .register_body { width: 90%; height: 600px; } .user_btn { padding: 45px; } .register_banner { padding: 80px 70px; } .register_logo { width: 150px; height: 150px; } .register_title { margin: 35px 0 25px; font-size: 55px; } .register_text { margin-bottom: 65px; } .register_form { padding: 50px 55px; } .form_title { font-size: 38px; margin-bottom: 25px; } .register_input { margin-bottom: 25px; } .detail_about { margin-left: 30px; } } @media(max-width: 1500px) { :root { --text-32: 28px; } .register_body { width: 90%; height: 580px; } .user_btn { padding: 40px; } .register_banner { padding: 75px 65px; } .register_logo { width: 145px; height: 145px; } .register_title { margin: 30px 0 20px; font-size: 55px; } .register_text { margin-bottom: 60px; } .register_form { padding: 45px 50px; } .form_title { font-size: 36px; margin-bottom: 25px; } .register_input { margin-bottom: 25px; } .categories { margin: 50px -15px 0; } .cat_item { padding: 30px 15px; margin: 15px; width: calc(20% - 30px); } .cat_photo { width: 140px; height: 140px; margin-bottom: 25px; } .detail_body { flex-direction: column; -ms-flex-direction: column; } .detail_info { justify-content: unset; margin-top: 40px; } .detail_about { margin-left: 0; margin-right: 40px; } .detail_photo { width: 575px; height: 290px; } .detail_photo_box { width: 575px; } .detail_info { margin-left: 0; } .detail_info-inner { justify-content: unset; } .detail_other { margin-left: 50px; } } @media(max-width: 1400px) { :root { --text-20: 18px; --text-32: 26px; --item-width: calc(33.33% - 40px); } [data-theme="row"] { --item-width: calc(100% - 2px); } .auto_container { padding: 0 80px; } .user_btn { padding: 40px 30px; } .register_btn { padding: 10px 25px; } .log_in { padding: 10px 25px; } .navs_wrap { padding: 15px 30px; } .notification_area.active { top: calc(100% + 30px); } .nav_link { margin-right: 60px; } .nav_link::after { right: -30px; } .languages { padding: 10px 15px; } .lang_item { margin-right: 20px; } .lang_item::after { right: -11px; } .sort_icon { width: 30px; height: 30px; } .sort_icon:first-child { margin-right: 30px; } .contact_content { width: calc(65% - 30px); } .contact_info { width: calc(35% - 30px); } .profile_drop { /* bottom: -441px; */ top: calc(100% + 52px); } } @media(max-width: 1300px) { .register_body { width: 100%; } .error_body { height: 100%; } .user_btn { padding: 25px 30px; } .register_banner { padding: 70px 55px; } .contact { padding: 70px 0; } .header_img { width: 80px; height: 80px; margin-right: 10px; } .logo_text { font-size: 18px; } .footer_img { width: 80px; height: 80px; } .foot_logo_text { font-size: 18px; } .advert { display: none; } .intro_slider { width: 100%; margin-right: 0; } .categories { flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; margin: 50px -10px 0; } .cat_item { padding: 30px 10px; margin: 10px; width: calc(25% - 20px); } .cat_photo { width: 110px; height: 110px; } .item_photo { height: 150px; } .cat_tabs { margin-bottom: 70px; flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; } .tab_link { width: calc(50% - 40px); } .profile_drop { top: calc(100% + 41px); } .category_block { padding-top: 50px; } /* News ===================== */ .news_box-item-photo { height: 230px; } /* News end ================= */ /* Basket =============== */ .basket_item_title { font-size: 18px; } .basket_box { flex-direction: column; -ms-flex-direction: column; -moz-flex-direction: column; -o-flex-direction: column; -webkit-flex-direction: column; } .basket_data { margin-right: 0; width: 100%; } .basket_table table tbody tr td:nth-child(2) { padding: 10px; } .basket_img { height: 95px; } .basket_info { width: 500px; margin-left: 0; margin-top: 50px; } .chat_wall_text { width: 70%; font-size: 22px; } .chat_wall_img { width: 80px; height: 80px; } /* Add post 3 ======================================= */ .add_post-box { width: calc(100% - 430px); } .bank_transfer { width: 100%; } .bank_transfer .add_post_box-item { width: calc(33.33% - 10px); } .add_post-3 .basket_info { margin-left: 30px; width: 400px; } /* Add post 3 end ======================================= */ } @media(max-width: 1200px) { .auto_container { padding: 0 50px; } .pass_mail, .pass_change { padding: 40px; width: calc(100% - 50px); max-width: 650px; } .pass_title { font-size: 30px; } .pass_input input { padding: 12px 20px; font-size: 16px; } .pass_btn { padding: 12px 0; font-size: 16px; } .pass_input { margin-bottom: 20px; } .acc_lang { right: 50px; top: 30px; } .register_banner { display: none; } .error_body { display: flex; } .user_btn { border-right: 1px solid var(--rgba-black); } .item_photo { height: 120px; } .footer_content { align-items: unset; flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; } .foot_outer { width: 100%; } .foot_col { width: 45%; } .detail_table { flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; } .table_group { width: 25%; } .contact_body { flex-direction: column; -ms-flex-direction: column; } .contact_content { width: calc(100% - 0px); margin-right: 0; } .contact_info { width: calc(100% - 0px); margin-left: 0; margin-top: 60px; } .post { padding: 60px 0; } .contact_title { margin-bottom: 35px; } .thanks_title { font-size: 28px; } .thanks_text { font-size: 21px; } .person { padding: 20px; } .chat_area, .chat_people { height: 550px; } .bank_title { font-size: 18px; } .bank_text { font-size: 14px; } .bank_group { width: calc(40% - 20px); } /* News post ============================ */ .news_post-info { width: calc(100% - 330px); margin-right: 30px; } .news_post-aside { width: 300px; } /* News post end ======================== */ /* Replenishment History ======================================= */ .history_table { border: 1px solid #f1f1f1; } .history_table table { width: 1250px; } /* Add post 3 ======================================= */ .add_post-box { flex-wrap: wrap; -ms-flex-wrap: wrap; -moz-flex-wrap: wrap; -o-flex-wrap: wrap; -webkit-flex-wrap: wrap; width: 100%; } .add_post-3 { flex-direction: column; -ms-flex-direction: column; -moz-flex-direction: column; -webkit-flex-direction: column; } .add_post-3 .basket_info { margin-left: 0; margin-top: 50px; } .add_post-box-title, .add_post-box-text { font-size: 14px; height: 39px; } /* Terms ===================== */ .term_aside-title { padding: 20px 30px; font-size: 18px; } .aside_term-tab { padding: 20px 30px; font-size: 16px; } .term_aside { width: calc(35% - 15px); margin-right: 15px; } .term_main { width: calc(65% - 15px); margin-left: 15px; } .aside_term-tab::after { right: 25px; } .term_main-title { font-size: 28px; } } @media(max-width: 1000px) { :root { --item-width: calc(50% - 40px) } [data-theme="row"] { --item-width: calc(100% - 2px); } .auto_container { padding: 0 30px; } .acc_lang { right: 30px; } .burger { display: block; } .notification_box { display: none; } .links_bg { position: fixed; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(0, 49, 151, .5); z-index: 15; transition: all .3s linear; -ms-transition: all .3s linear; -moz-transition: all .3s linear; -o-transition: all .3s linear; -webkit-transition: all .3s linear; } .links { position: fixed; top: 0; left: -100%; /* left: 0; */ width: 50%; height: 100%; padding: 70px 30px; align-items: unset; flex-direction: column; -ms-flex-direction: column; transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; overflow: auto; background: #fff; z-index: 15; } .links.active { left: 0; } .links_bg.active { left: 0; } .nav_link { color: #000; margin-right: 0; padding: 25px 0 10px; border-bottom: 1px solid #000; } .nav_link::after { content: ''; position: absolute; top: unset; bottom: 20px; right: -50px; width: calc(100% + 100px); height: 3px; background: #000; display: none; } /* Mobile User links ==================== */ .profile { display: none !important; } .mobile_user-profile { display: block; cursor: pointer; width: 40px; height: 40px; } .mobile_user-profile img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } .mobile_profile-navs { position: fixed; top: 0; right: -100%; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); z-index: 10; display: block; transition: all .2s linear; -ms-transition: all .2s linear; -moz-transition: all .2s linear; -o-transition: all .2s linear; -webkit-transition: all .2s linear; } .mobile_profile-navs.active { right: 0; } .mobile_profile-inner { position: fixed; top: 0; right: -100%; width: calc(70% - 60px); height: 100%; background: #fff; padding: 30px; overflow-y: auto; -ms-overflow-style: none; /* IE 11 */ scrollbar-width: none; /* Firefox 64 */ transition: all .3s linear; -ms-transition: all .3s linear; -moz-transition: all .3s linear; -o-transition: all .3s linear; -webkit-transition: all .3s linear; } .mobile_profile-navs.active .mobile_profile-inner { right: 0; } .mobile_profile-inner::-webkit-scrollbar { display: none; } .mobile_user-name { text-align: center; width: 100%; font-size: 20px; font-weight: 700; line-height: 1.4; margin-bottom: 50px; } .mobile_user-item { padding: 20px 10px; display: flex; align-items: center; position: relative; } .mobile_user-item:nth-child(2)::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #003197; } .mobile_user-item::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #003197; } .mobile_user-item-icon { width: 20px; height: 20px; margin-right: 15px; } .mobile_user-item-icon img { width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } /* Mobile User links end ================= */ /* News ========================= */ .news_box-item { width: calc(50% - 20px); margin-bottom: 30px; } /* News end ===================== */ /* News post ============================ */ .news_post-info { width: 100%; margin-right: 0px; } .news_post-aside { display: none; } .news_post-info-title { font-size: 18px; } .news_post-info-date { font-size: 14px; } .news_post-info-photo { height: 350px; } .news_post-info-txt p { font-size: 14px; } /* News post end ======================== */ .info_block:last-child .header_contact:last-child { display: none; } .info_block .header_contact:nth-child(2) { margin-right: 0; } .info_block .header_contact:nth-child(2)::before { display: none; } .info_block:last-child .header_contact:before { right: -10px; } .header_contact { margin-right: 20px; } .intro_slider, .slider_item { height: 480px; } .btn_group { flex-direction: column; -ms-flex-direction: column; } .btn--border { margin-right: 0; margin-bottom: 20px; width: 100%; } .table_group { width: 33.33%; } .detail, .product, .contact { padding: 60px 0; } .foot_col { width: 50%; margin-top: 40px; } /* ------------------------------------------- */ .post_input { width: calc(50% - 40px); } .profile { flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; -moz-flex-direction: column; -webkit-flex-direction: column; justify-content: center; } .profile_head { margin-right: 0; margin-bottom: 10px; } .profile_drop { right: 0; left: unset; /* bottom: -416px; */ top: calc(100% + 25px); width: 320px; } .foot_outer { margin-top: 35px; } .header_img { width: 60px; height: 60px; } .logo_text { font-size: 16px; } .footer_img { width: 60px; height: 60px; } .foot_logo_text { font-size: 16px; } /* My post 2 =================== */ .post_upload_box { flex-wrap: wrap; -ms-flex-wrap: wrap; -moz-flex-wrap: wrap; -o-flex-wrap: wrap; -webkit-flex-wrap: wrap; overflow: hidden; } .post_upload_item { width: calc(50% - 40px); } .upload_group label { padding: 10px; } .form_group label { padding: 0 0 0 10px; } .my_advert-bg { height: 350px; } .my_advert-bg .chat_wall_text { font-size: 18px; } /* Basket ============= */ .basket_table { overflow-x: auto; width: 100%; padding-bottom: 10px; } .basket_table::-webkit-scrollbar { height: 10px; top: 20px; overflow: visible; } .basket_table::-webkit-scrollbar-thumb { height: 5px; background: #d5d5d5; border-radius: 20px; } .basket_table table { width: 1100px; } .basket_info_cash { font-size: 18px; } .basket_info_select .custom-select { font-size: 16px; } /* Chat ==================== */ .chat_people { position: absolute; top: 0; left: -100%; transition: all .3s linear; -ms-transition: all .3s linear; -moz-transition: all .3s linear; -o-transition: all .3s linear; -webkit-transition: all .3s linear; z-index: 5; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .chat_people.active { left: 0; } .chat_people.active .chat_area { margin-left: 100px; } .chat_area { width: 100%; } .chat_burger { display: block; } /* Seller ---------------- */ .seller_inner { padding: 30px; width: 80%; } .seller_title { font-size: 24px; margin-bottom: 20px; } .seller_label, .seller_text { font-size: 14px; } .seller_icon { width: 30px; height: 30px; } .bank_form .post_upload_box { width: calc(50% - 45px); } .bank_form .post_input input { padding: 10px 20px; } /* Terms ===================== */ .term_box { flex-direction: column; -ms-flex-direction: column; -moz-flex-direction: column; -webkit-flex-direction: column; } .term_aside { margin-right: 0; width: 100%; } .term_main { margin-left: 0; width: 100%; margin-top: 50px; } .term_main-title { font-size: 24px; margin-bottom: 20px; } .term_main-info p { font-size: 14px; margin-bottom: 10px; } } @media(max-width: 900px) { :root { --text-20: 16px; } .notification_area.active { top: calc(100% + 20px); } .phone_box-code { font-size: 16px; } .phone_box { top: 18px; } .navs_wrap { padding: 10px 20px; } .post_comment textarea { padding: 10px 15px; height: 50px; } .burger { width: 25px; height: 25px; } .head_buttons { flex-direction: column; -ms-flex-direction: column; align-items: unset; } .register_btn { padding: 10px 15px; margin-right: 0; margin-bottom: 10px; justify-content: center; } .log_in { justify-content: center; } .btn_icon { margin-right: 5px; } .category { padding: 30px 0 70px; } .cat_photo { width: 90px; height: 90px; } .sort_by { display: none; } .detail_photo { width: 400px; height: 225px; } .detail_photo_box { width: 400px; } .table_group { width: 50%; } .contact_form { margin: -20px 0; } .contact_input { width: 100%; margin: 20px 0; } .contact_comment { width: 100%; margin: 20px 0; } .basket_table table { width: 1000px; } .thanks_title { font-size: 24px; } .thanks_text { font-size: 18px; } .thanks { padding: 150px 0; } .chat_people { width: 40%; } .cat_item { width: calc(33.33% - 20px); margin: 10px; } /* Footer ==================== */ .foot_outer { flex-wrap: wrap; -ms-flex-wrap: wrap; -moz-flex-wrap: wrap; -o-flex-wrap: wrap; } .foot_col { width: calc(50% - 50px); } } @media(max-width: 800px) { .error_body { padding: 50px 35px; } .register_logo { width: 100px; height: 100px; } .register_title { font-size: 44px; } .register_text { font-size: 22px; margin-bottom: 50px; } .form_title { font-size: 28px; } .contact_title { font-size: 22px; } .stick-2 { top: 50px; } .accord_notification { padding: 0 10px; } .accord_notification .notification_area-title, .accord_notification .notification_area-time { font-size: 12px; } .register_body { height: auto; flex-direction: column; -ms-flex-direction: column; } .register_buttons { flex-direction: row; -ms-flex-direction: row; width: 100%; } .user_btn { padding: 20px; } .bank_transfer { width: 100%; } .bank_transfer .add_post_box-item { width: calc(50% - 10px); } .detail_info { flex-direction: column; -ms-flex-direction: column; align-items: unset; } .tab_link { width: calc(50% - 40px); margin-bottom: 20px; margin-right: 20px; } .top_btn { display: none !important; } .basket_table table { width: 900px; } .category_select { width: 180px; } .friend_message, .my_message { width: 70%; } .bank_form .post_input { width: 100%; margin: 15px 20px; } .bank_form .post_upload_box { width: 100%; margin: 10px 20px; } .bank_form .post_upload_box .post_upload_item { margin: 0; } .fill_balance-text { margin: 20px 0 30px; } .categories { margin: 50px 10px 0; } .cat_item { width: calc(50% - 20px); margin: 10px; } /* Replenishment History ======================================= */ .history_table { border: 1px solid #f1f1f1; } .history_table table { width: 900px; } .history_table table th { padding: 20px 5px; font-size: 14px; } .history_table table td { padding: 20px 7px; font-size: 16px; } .cat_end { margin-top: 60px; } } @media(max-width: 700px) { :root { --text-32: 26px; --text-18: 16px } .profile_head { flex-direction: column-reverse; -ms-flex-direction: column-reverse; -moz-flex-direction: column-reverse; -o-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; } .profile_head .profile_item { margin-top: 10px; } .profile_head .profile_item:last-child { margin-top: 0; } .new_group { flex-direction: column; -ms-flex-direction: column; -moz-flex-direction: column; -o-flex-direction: column; -webkit-flex-direction: column; } .new_group .item_btn { width: 100%; max-width: 100%; } .new_group .item_btn:first-child { margin-right: 0; margin-bottom: 10px; } .languages { padding: 10px; } .lang_item { margin-right: 15px; } .lang_item::after { right: -7px; height: 20px; } .navs_wrap { padding: 10px 15px; } .info_block:first-child .header_contact:first-child { display: none; } .head_buttons { display: none; } .mobile_register { display: block; margin-top: 50px; } .profile { display: none; } .mobile_profile { display: flex; align-items: center; justify-content: center; /* flex-wrap: wrap; -ms-flex-wrap: wrap; -moz-flex-wrap: wrap; -o-flex-wrap: wrap; -webkit-flex-wrap: wrap; */ flex-direction: column; margin-top: 50px; } .mobile_profile .profile_head { width: 100%; margin-right: 0; margin-bottom: 20px; flex-direction: row; } .intro_slider, .slider_item { height: 420px; } .foot_outer { margin-top: 30px; flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; } .foot_col { width: 100%; } .foot_col:last-child { margin-top: 50px; } .detail_buttons { flex-direction: column; -ms-flex-direction: column; justify-content: unset; } .detail_about { margin-right: 0; } .btn, .btn_group { width: 100%; } .btn--green { margin-bottom: 20px; } .contact_title { margin-bottom: 20px; } .copyright { margin-top: 50px; } .bank_transfer { width: 100%; margin: 0; } /* News ========================= */ .news_box-item { width: calc(100% - 20px); margin-bottom: 30px; } .news_box-item-photo { width: 80%; margin: 0 auto 15px; } /* News end ===================== */ /* --------------------------------- */ .post { padding: 60px 0 90px; } .post_form { margin: 0; } .post_form-3 { margin: 0; } .balance_tabs { flex-direction: column; -ms-flex-direction: column; -moz-flex-direction: column; } .balance_link { margin: 0 0 15px 0; padding: 15px; width: 100%; font-size: 16px; } .send_btn { font-size: 14px; padding: 15px 50px; } .post_form-3 .bank { margin-bottom: 25px; } .balance_link:last-child { margin: 0 !important; } .post_input label { margin: 0 0 12px 10px; } .upload_group label { margin: 0; } .post_input, .post_comment { width: 100%; margin: 12px 0; } .post_upload_item { width: 100%; margin: 12px 0; } .post_upload_img { width: 40%; height: 130px; } .post_btn { padding: 14px 30px; } .add_post_text { margin-top: 10px; font-size: 17px; } .post_text { white-space: nowrap; } .item_row { flex-direction: column; align-items: unset; } .views { margin-top: 15px; } .profile_drop { width: 270px; /* bottom: -445px; */ top: calc(100% + 52px); font-size: 14px; right: unset; left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -webkit-transform: translateX(-50%); margin-bottom: 50px; } .profile_item { padding: 15px 10px; } .basket_table table { width: 800px; } .basket_info { width: 90%; margin: 30px auto 0; } .chat_people { width: 50%; } .chat_wall_text { width: 80%; font-size: 20px; } .chat_wall_img { width: 60px; height: 60px; } .friend_message, .my_message { width: 80%; } .person { padding: 10px 20px; } .person_name { font-size: 14px; } .chat_alert { width: 18px; height: 18px; font-size: 8px; } .person_message { font-size: 12px; } .chat_area, .chat_people { height: 470px; } .bank_group { width: 100%; margin: 10px 0; } .bank_form .post_input { margin: 15px 0px; } .bank_form .post_upload_box { margin: 10px 0px; } .upload_label { margin: 0 0 12px 10px; } .detail_info-inner { flex-direction: column; -ms-flex-direction: column; -moz-flex-direction: column; -o-flex-direction: column; -webkit-flex-direction: column; } .detail_info { margin-left: 0; } .add_post_box-item { width: calc(50% - 10px); } /* Modal ========================= */ .person_message { width: calc(100% - 40px); } .delete { bottom: 10px; right: 16px; width: 16px; height: 16px; } /* forms ================= */ .verify { right: 20px; top: 45px; } .eye { top: 45px; right: 20px; } } @media(max-width: 600px) { :root { --item-margin: 0 10px 40px; --product-box-margin: 0 -10px; --item-width: calc(50% - 20px); } .auto_container { padding: 0 15px; } .acc_lang { right: 15px; } .register_input input { padding: 10px 15px; } .phone_box { top: 12px; } .phone_box-code { font-size: 14px; } .mobile_user-profile { width: 30px; height: 30px; } .mobile_profile-inner { width: calc(95% - 40px); padding: 20px; } .mobile_user-name { font-size: 18px; margin-bottom: 25px; } .mobile_user-item { padding: 15px 10px; } .mobile_user-item-icon { width: 15px; height: 15px; } .mobile_user-item-text { font-size: 14px; } .bank_transfer { width: 100%; } .bank_transfer .add_post_box-item { width: 100%; margin: 0 0 20px 0; } .links { width: 70%; } .info_block:last-child .header_contact:nth-child(2) { display: none; } .info_block:last-child .header_contact { margin-right: 0; } .info_block:last-child .header_contact:before { display: none; } .table_group { width: 100%; } .detail_photo { width: 100% !important; height: 220px; } .detail_photo_box { width: 100%; } .detail_photo_box { margin-right: 0; } .detail_for_navs { display: none; } .categories { margin: 30px 0 0; } .detail_description { margin-top: 30px; } .cat_item { width: calc(50% - 20px); margin: 10px; } .cat_tabs { margin: 0 0 70px 0; } .tab_link { width: 100%; margin: 0 0 20px 0; } /* .contact_title { margin-bottom: 30px; } */ .contact { padding: 40px 0; } .contact_map { margin-top: 50px; } .add_post_btn { /* padding: 10px; */ width: 100%; justify-content: center; } .post_text { font-size: 14px; } .profile_text { font-size: 14px; } .profile_head .profile_text { font-size: 16px; } .profile_drop { /* bottom: -420px; */ top: calc(100% + 52px); } .category_search { flex-direction: column; -ms-flex-direction: column; -moz-flex-direction: column; -o-flex-direction: column; -webkit-flex-direction: column; align-items: unset; } .category_input { width: 100%; } .category_loupe { width: 16px; } .category_select { width: 200px; margin-top: 20px; } .thanks_title { font-size: 20px; } .thanks_text { font-size: 16px; } .friend_message, .my_message { width: 90%; } .chat_area, .chat_people { height: 450px; } .chat_area { padding: 7px 7px 40px; } .chat_area-inner { padding: 5px; } .message_form { bottom: 10px; width: calc(100% - 30px); left: 48%; } .chat { padding: 75px 0; } .form_file { top: 55px; right: 20px; } .message_input textarea { padding: 20px 50px 20px 20px; } .friend_message, .my_message { padding: 20px; } .empty_area { height: 320px; } /* News post ============================ */ .news_post { padding: 40px 0 60px; } .news_post-info-photo { height: 250px; } /* News post end ======================== */ /* Seller ---------------- */ .seller_inner { padding: 20px; width: 95%; } .seller_title { font-size: 20px; margin-bottom: 20px; } .seller_label, .seller_text { font-size: 14px; } .seller_row { margin-bottom: 10px; } .detail_other { margin-left: 30px; } .product_head { flex-direction: column; -ms-flex-direction: column; -moz-flex-direction: column; align-items: flex-start; } .product_head-row .add_post_btn { display: none; } .mobile_add-btn { display: flex; align-items: center; justify-content: center; max-width: 250px; margin: 10px auto; } .fill_balance-text { margin: 20px 0 30px; font-size: 14px; } /* Add post 3 ======================================= */ .add_post-3 .basket_info { width: 100%; } .pay_link { padding: 15px 10px; font-size: 14px; } /* Terms ===================== */ .term_aside-title { font-size: 16px; padding: 15px 20px; } .aside_term-tab { font-size: 14px; padding: 15px 20px; } .aside_term-tab::after { width: 8px; height: 8px; right: 20px; } .term_main { margin-top: 30px; } .term_main-title { font-size: 18px; } .slider_title { text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .slider_text { text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } } @media(max-width: 500px) { :root { --text-32: 22px; --text-20: 14px; } .pass_mail, .pass_change { padding: 30px; } .pass_title { font-size: 24px; } .pass_input input { padding: 12px 15px; font-size: 14px; } .pass_input input::placeholder { font-size: 14px; } .pass_btn { padding: 12px 0; font-size: 16px; } .pass_input { margin-bottom: 20px; } .contact_title { font-size: 18px; } .links { width: 85%; } .form_title { margin-bottom: 20px; font-size: 24px; } .register_form { padding: 20px 30px; } .register_input { margin-bottom: 15px; } .user_btn { padding: 10px; } .user_btn img { width: 20px; height: 15px; } .burger { width: 20px; height: 20px; } .languages { padding: 5px 10px; } .top_wrap { justify-content: center; } .info_block:first-child .header_contact { display: none; } .info_block:last-child .header_contact:before { display: block; } .info_block:last-child .header_contact:nth-child(2) { display: flex; margin-left: 20px; } .info_block:last-child .header_contact:nth-child(2)::before { display: none; } /* .item_row { align-items: center; } */ .views { margin: 15px auto 0 auto; } /* News ========================= */ .news_box-item-photo { width: 100%; height: 210px; } /* News end ===================== */ .product_box { margin: 0; } .product_item { width: 100%; margin: 0 0 40px; } .item_btn { max-width: 100%; } .detail, .product { padding: 30px 0; } .detail_photo { height: 155px; } .foot_col:last-child { margin-top: 30px; } .copyright { margin-top: 30px; } .cat_end { margin-top: 15px; } .cat_photo { width: 85px; height: 85px; } .profile_drop { width: 300px; /* bottom: -360px; */ top: calc(100% + 52px); font-size: 14px; right: -72px; margin-bottom: 0; } .header_img { width: 50px; height: 50px; } .logo_text { font-size: 13px; width: 200px; } .footer_img { width: 50px; height: 50px; } .foot_logo_text { font-size: 14px; } .basket_info { width: 100%; margin: 30px auto 0; } .basket_info_item { padding: 20px; } .basket_img { height: 70px; } .basket_table table { width: 650px; } .basket_table table thead th, .basket_item_title, .basket_item_text, .basket_info_name, .basket_info_cash { font-size: 14px; } .error_span { font-size: 12px; } .t-c { width: 100%; text-align: center; } .contact_input { margin: 10px 0; } .contact_input label, .contact_comment label { margin-left: 15px; margin-bottom: 10px; } .btn { padding: 15px 35px; } .contact_input input, .contact_comment textarea { padding: 10px 15px; } .thanks { padding: 100px 0; } .thanks_title { font-size: 18px; } .thanks_text { font-size: 14px; } .chat_people { width: 70%; } .chat_wall_text { width: 98%; font-size: 17px; } .bank_group { margin: 5px 0; } .bank_form .upload_group label { font-size: 12px; text-align: center; display: flex; align-items: center; justify-content: center; } .bank_form .additional { padding: 0 0 0 5px; } } @media(max-width: 420px) { .acc_lang { top: 40px; } .register_logo { width: 85px; height: 85px; } .register_title { font-size: 36px; margin: 20px 0 10px; } .register_text { font-size: 16px; margin-bottom: 25px; } .error_link { font-size: 14px; padding: 8px 15px; } .intro { padding-top: 30px; } .foot_outer { margin-top: 0; } .form_group { width: calc(100% - 130px); } .slider_title { font-size: 20px; } .post_input input, .my-select select { padding: 10px 15px; } .my-select::after { top: 20px; } .custom-select { padding: 10px 15px; } .post_input input::placeholder { font-size: 14px; } .library, .post { padding: 70px 0; } .profile_drop { width: 240px; /* bottom: -385px; */ top: calc(100% + 52px); font-size: 14px; right: -42px; padding-bottom: 30px; } .links { padding: 20px; } .post { padding: 30px 0 55px; } .post_btn { padding: 10px 20px; font-size: 14px; } .add_post_text { font-size: 15px; } .post_upload_img { height: 85px; } .post_input label { font-size: 14px; } .my_advert-bg { height: 250px; } .foot_logo_text { font-size: 12px; } .seller_title { font-size: 20px; margin-bottom: 20px; } .seller_label, .seller_text { font-size: 12px; } .seller_icon { width: 26px; height: 26px; } .bank_title { font-size: 16px; } .post_form-2 .btn_bg { margin-top: 30px; } .upload_label { font-size: 14px; } /* News post ============================ */ .news_post-info-photo { height: 100%; background: transparent; margin-bottom: 30px; } /* News post end ======================== */ /* Add post 3 ======================================= */ .add_post_box-item { width: calc(100% - 10px); } .add_post-box-title, .add_post-box-text { display: block; -webkit-line-clamp: unset; overflow: unset; height: unset; } /* Modal ============================ */ .modal_title { font-size: 18px; } .modal_btn-box button { width: calc(50% - 15px); } .cat_photo { margin-bottom: 15px; width: 70px; height: 70px; } .cat_text { font-size: 12px; } }