@charset "utf-8";
/*
 * Name     : px-strap.css
 * Version  : 1.0
 * Author   : onepixel studio
 * Date     : 2022-12-01
 ---------------------------------------------------
 Table of contents
 ---------------------------------------------------
    01. Root
    02. Layout
    03. Buttons
    04. Checkboxes
    05. Helper
    06. Pagination
    07. Modal
    08. Animation
    09. Media queries
---------------------------------------------------
*/

/* ------------------------------
 * Root
------------------------------ */
:root {
    --animate-duration: 0.5s;
    --animate-delay: 0.1s;
}

/* ------------------------------
 * Layout
------------------------------ */
.container {max-width: 1712px; margin-left: auto; margin-right: auto; padding-left: 26px; padding-right: 26px}
.container-full {width: 100%}

/* ------------------------------
 * Buttons
------------------------------ */
.button-r {display: inline-flex; font-size: 20px; font-weight: 700; line-height: 1.2; padding: 0 36px; height: 60px; border-radius: 43px; align-items: center; cursor: pointer; outline: 0; vertical-align:middle}
.button-r.button--dark {color: #fff; background-color: #191f28}
.button-r.button--white {color: #010f15; background-color: #fff}
.button-p {display: inline-flex; font-size: 20px; font-weight: 700; line-height: 1; padding: 0 36px; height: 63px; border: 1px solid transparent; border-radius: 6px; align-items: center; justify-content: center; cursor: pointer; outline: 0}
.button-p.button--default {color: #6b7684; border-color: #ededed; background-color: #fff}
.button-p.button--primary {color: #fff; background-color: #fed541}

/* ------------------------------
 * Checkboxes
------------------------------ */
.custom-check-container {position: relative; display: -ms-flexbox; display: flex; align-items: center}
.custom-check-container > label {display: inline-block; max-width: 100%; min-height: 18px; color: #858f9b; line-height: 1.1875; margin-bottom: 0; padding-left: 18px; cursor: pointer}
.custom-check-container > label .custom-check {position: absolute; top: 0; margin: 0 0 0 -18px; border: 0; appearance: none; -webkit-appearance: none; -moz-appearance: none}
.custom-check-container > label .custom-check::before {content: ''; position: absolute; top: 0; left: 0; width: 18px; height: 18px; border: 2px solid #e9e9e9; border-radius: 3px; background-color: transparent; transition: border-color .1s ease-in-out, background-color .1s ease-in-out; cursor: pointer}
.custom-check-container > label .custom-check::after {content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 8px; border: 2px solid #fff; border-top: none; border-right: none; border-radius: 2px; opacity: 0; transform: rotate(-45deg); transition: opacity .1s ease-in-out}
.custom-check-container > label span {display: inline-block; font-size: 16px; font-weight: 500; color: #858f9b; letter-spacing: -0.02em; line-height: 1.1875; letter-spacing: -0.02em; padding-left: 11px}
.custom-check-container > label .custom-check:checked::before {border-color: #ffb42b !important; background-color: #ffb42b !important}
.custom-check-container > label .custom-check:checked::after {opacity: 1}

/* ------------------------------
 * Helper
------------------------------ */
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;clip: rect(0,0,0,0); white-space: nowrap; border: 0}
.fw-100 {font-weight: 100 !important}
.fw-200 {font-weight: 200 !important}
.fw-300 {font-weight: 300 !important}
.fw-400 {font-weight: 400 !important}
.fw-500 {font-weight: 500 !important}
.fw-600 {font-weight: 600 !important}
.fw-700 {font-weight: 700 !important}
.fw-800 {font-weight: 800 !important}
.fw-900 {font-weight: 900 !important}
.text-left {text-align: left !important}
.text-center {text-align: center !important}
.text-right {text-align: right !important}
.w-50 {width: 50% !important}
.w-100 {width: 100% !important}
.p-0 {padding: 0 !important}
.pt-0 {padding-top: 0 !important}
.pb-0 {padding-bottom: 0 !important}
.py-0 {padding-top: 0 !important; padding-bottom: 0 !important}
.pl-0 {padding-left: 0 !important}
.pr-0 {padding-right: 0 !important}
.px-0 {padding-left: 0 !important; padding-right: 0 !important}
.m-0 {margin: 0 !important}
.mt-0 {margin-top: 0 !important}
.mb-0 {margin-bottom: 0 !important}
.my-0 {margin-top: 0 !important; margin-bottom: 0 !important}
.ml-0 {margin-left: 0 !important}
.mr-0 {margin-right: 0 !important}
.mx-0 {margin-left: 0 !important; margin-right: 0 !important}

/* ------------------------------
 * Pagination
------------------------------ */
.pagination {display: flex; padding-top: 31px; align-items: center; justify-content: center}
.pagination > ul {display: flex; align-items: center; justify-content: center}
.pagination > ul > li {margin: 0 2px}
.pagination > ul > li > a {display: flex; width: 40px; height: 40px; font-size: 20px; font-weight: 600; color: #6b7684; border-radius: 50%; align-items: center; justify-content: center}
.pagination > ul > li > a.active, .pagination > ul > li > a:hover {background-color: #ececec}
.pagination > ul > li > a.arrow-link {background-size: 8px auto; background-position: center; background-repeat: no-repeat}
.pagination > ul > li > a.arrow-link.prev {background-image: url(../images/common/pagination_prev.svg)}
.pagination > ul > li > a.arrow-link.next {background-image: url(../images/common/pagination_next.svg)}

/* ------------------------------
 * Modal
------------------------------ */
.modal-container {display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 1130}
.modal-container .modal-backdrop {position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,.4); z-index: 10}
.modal-container .modal {position: absolute; top: 50%; left: 50%; width: 550px; max-width: calc(100% - 72px); max-height: 840px; border-radius: 6px; background-color: #fff; transform: translate(-50%,-50%); overflow-y: auto; z-index: 20}
.modal-container .modal .modal-header {position: relative; display: flex; padding: 28px 30px 30px; flex-wrap: wrap; justify-content: center; align-items: center}
.modal-container .modal .modal-header .modal-close {position: absolute; top: 50%; right: 30px; width: 28px; height: 28px; margin-top: -14px; padding: 0; border: 0; background-image: url(../images/common/modal_close.svg); background-size: 17.5px 17.5px; background-position: center; background-repeat: no-repeat; background-color: transparent; cursor: pointer; outline: none}
.modal-container .modal .modal-header .modal-title {font-size: 25px; font-weight: 700; color: #191f28; line-height: 1.32}
.modal-container .modal .modal-body {padding: 6px 30px 30px}
.modal-container .modal .modal-footer {padding: 15px 30px 30px}

/* ------------------------------
 * Animation
------------------------------ */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* ------------------------------
 * Media queries
------------------------------ */
@media (min-width: 768px) {
    .mobile-only {display: none !important}
}

@media (min-width: 992px) {
    [data-animated*='fade'] {opacity: 0}
}

@media (max-width: 767px) {
    .button-r {font-size: 16px; line-height: 1.1875; padding: 0 30px; height: 51px}

    .custom-check-container > label .custom-check {top: 2px}
    .custom-check-container > label span {font-size: 14px; padding-left: 9px}

    .mobile-hide {display: none !important}

    .pagination {padding-top: 36px}
    .pagination > ul > li {margin: 0 4px}
    .pagination > ul > li > a {width: 28px; height: 28px; font-size: 16px}
    .pagination > ul > li > a.arrow-link {background-size: 6.79px auto}
}