@import url("_hero-banner.css");

/* Payment */
.payment-container {position: relative; z-index: 1; padding: 80px 0; clear: both; width: 100%;}
.payment-container .kits-plugin-root {font-family: "FK Grotesk Neue", sans-serif; color: var(--body-text); font-size: 1.125rem; line-height: 150%; font-weight: normal; letter-spacing: normal; margin-bottom: 40px;}
.payment-container .kits-plugin-root ::before {display: none;}
.payment-container .error_box {background: transparent; padding: 0;}
.payment-container .error_box ul li.left {width: 30px;}
.payment-container .error_box ul li.right span {font-size: 1rem; line-height: normal; height: 30px;}
.payment-container .error_box ul li.right {height: inherit;}
.payment-container .kits-plugin-root .order_form {display: flex; flex-wrap: wrap; gap: 60px; width: 100%; padding-bottom: 0;}
.payment-container .kits-plugin-root .order_form .container {width: auto; flex:1; background: var(--white); clip-path: var(--path-24); padding: 40px;}
.payment-container .kits-plugin-root .order_form .order_summary {position: static;}
.payment-container .kits-plugin-root .col-md-8, .payment-container .kits-plugin-root .col-md-6 {width: 100%;}
.payment-container .kits-plugin-root a {font-weight: bold;}
.payment-container .kits-plugin-root .container {padding: 0; width: 100%;}


/* Payment Form */
.payment-container .kits-plugin-root .form-group {margin-bottom: 20px; position: relative;}
.payment-container .kits-plugin-root p {font-weight: bold; color: var(--brand-green); font-size: 1rem; line-height:normal; margin-bottom: 16px;}


.payment-container .form-control {font-family: "FK Grotesk Neue", sans-serif; font-weight: bold; display: block; font-size: 1rem!important; line-height: 100%!important; font-style: normal; vertical-align: middle; -webkit-appearance: none; background-color: transparent!important; color: var(--brand-blue)!important; border:1px solid var(--brand-green)!important; padding:14px 16px 14px; width: 100%; transition-duration: .75s; transition-property: all; transition-timing-function: cubic-bezier(.075,.82,.165,1); border-radius: 0; box-shadow: none !important; letter-spacing: normal!important; margin: 0;}
.payment-container .form-control:focus, .payment-container .form-control:hover {box-shadow:none!important; color: var(--brand-blue)!important; border-color: var(--brand-mint)!important;}
.payment-container select {color: var(--brand-green)!important;}

.payment-container .kits-plugin-root .form-control::-webkit-input-placeholder {color: var(--brand-green) !important;}
.payment-container .kits-plugin-root .form-control:-moz-placeholder {color: var(--brand-green) !important;}
.payment-container .kits-plugin-root .form-control::-moz-placeholder {color: var(--brand-green) !important;}
.payment-container .kits-plugin-root .form-control:-ms-input-placeholder {color: var(--brand-green) !important;}

.payment-container .kits-plugin-root .form-control:hover::-webkit-input-placeholder {color: var(--base-foreground) !important;}
.payment-container .kits-plugin-root .form-control:hover:-moz-placeholder {color: var(--base-foreground) !important;}
.payment-container .kits-plugin-root .form-control:hover::-moz-placeholder {color: var(--base-foreground) !important;}
.payment-container .kits-plugin-root .form-control:hover:-ms-input-placeholder {color: var(--base-foreground) !important;}


.payment-container .order_form .row {margin-bottom: 30px;}
.payment-container .order_form .row:last-child {margin-bottom: 0;}

.payment-container .order_form .question {background: transparent; font-size: 0; vertical-align: middle; top: 0;}
.payment-container .order_form .question:before {display: inline-block; font-size: 1rem; text-shadow: 2px 2px 0 var(--brand-mint); color: var(--brand-blue); content: "\f059"; font-family: "Font Awesome 6 Sharp"; font-style: normal; font-weight: normal;}
.payment-container .order_form .question .tooltip {font-family: "FK Grotesk Neue", sans-serif; color: var(--body-text); font-size: 0.875rem; line-height: 1.3; font-weight: normal; letter-spacing: normal; text-transform: none;}
.payment-container .order_form .question .tooltip a {position: relative; color: var(--anchor); text-decoration: none; margin-top: 5px; display: inline-block; font-weight: bold;}
.payment-container .order_form .question .tooltip a:after {content: ''; position: absolute; display: block; margin: auto; height: 4px; width: 0; bottom:-4px; transition: width .5s ease, background-color .5s ease; left: 50%; transform: translate(-50%, 0);}
.payment-container .order_form .question .tooltip a:hover:after {width: 100%; background: var(--brand-mint);}



/* Checkbox */
.payment-container input[type="checkbox"], .payment-container input[type="checkbox"]:focus {position: absolute; left: 0; width: 24px!important; height: 24px; cursor: pointer;  outline: none; padding: 0; border:1px solid var(--brand-green); top:0!important; margin: 0!important; box-shadow: none!important;}
.payment-container input[type="checkbox"]:checked:before { content: "\f00c"; font-family: "Font Awesome 6 Pro"; height: 24px; left: -1px; position: absolute; top: -1px; width: 24px; font-weight: 900; color: var(--brand-mint); font-size: 1.125rem; transform: none; clip-path: inherit; box-shadow: none; text-align: center; margin: 0; line-height: 24px; background: var(--brand-green); display: flex; justify-content: center; padding-left: 2px;}
.payment-container input[type="checkbox"]:before {display: none;}
.payment-container .for_checkbox label {padding-left:32px; display:block; cursor: pointer; line-height: 1.5; font-size: 1rem; position: relative;}
.payment-container input[type="checkbox"]{-webkit-appearance:none; appearance:none;}

/* Radio */
.payment-container input[type="radio"], .payment-container input[type="radio"]:focus {position: absolute; left: 0; width: 24px!important; height: 24px; cursor: pointer;  outline: none; padding: 0; border:1px solid var(--brand-green); top:0!important; margin: 0!important; box-shadow: none!important; border-radius: 50%;}
.payment-container input[type="radio"]:checked:before { content: " "; height: 24px; left: -1px; position: absolute; top: -1px; width: 24px; color: var(--brand-mint); box-shadow: none; text-align: center; margin: 0; line-height: 0; border: 7px solid var(--brand-green); background: var(--brand-mint); display: flex; justify-content: center; border-radius: 50%;}
.payment-container input[type="radio"]:before {display: none;}
.payment-container .kits-plugin-root .checkbox label {padding-left:32px; display:block; cursor: pointer; line-height: 1.5; font-size: 1rem; position: relative;}
.payment-container input[type="radio"]{-webkit-appearance:none; appearance:none;}
.payment-container .kits-plugin-root .radio, .payment-container .kits-plugin-root .checkbox {margin-top: 20px; margin-bottom: 15px;}


/* Quantity */
.payment-container .order_form .step1 .list > li .box .explain {text-transform: none; margin-top: 40px; font-weight: bold; padding: 0; margin-bottom: 5px;}
.payment-container .order_form .step1 .list > li .box .bottom .select_quantity > li.left a, 
.payment-container .order_form .step1 .list > li .box .bottom .select_quantity > li.right a {font-weight: normal; background: transparent; font-size: 0; position: relative; width: 20px; height: 20px;}
.payment-container .order_form .step1 .list > li .box .bottom .select_quantity > li.left a:after {content: "\f056"; font-family: "Font Awesome 6 Sharp"; font-style: normal; font-size: 1.125rem; line-height: 1; color: var(--brand-blue); text-shadow: 2px 2px 0 var(--brand-mint); font-weight: 400; position: absolute; transition: none; width: 20px; height: 20px; margin: auto; transform: none; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center;}
.payment-container .order_form .step1 .list > li .box .bottom .select_quantity > li.right a:after {content: "\f055"; font-family: "Font Awesome 6 Sharp"; font-style: normal; font-size: 1.125rem; line-height: 1; color: var(--brand-blue); text-shadow: 2px 2px 0 var(--brand-mint); font-weight: 400; position: absolute; transition: none; width: 20px; height: 20px; margin: auto; transform: none; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center;}

.payment-container .order_form .step1 .list > li .box .bottom .select_quantity > li.left a:hover:after, 
.payment-container .order_form .step1 .list > li .box .bottom .select_quantity > li.right a:hover:after {background: none;}
.payment-container .order_form .step1 .list > li .box .bottom .select_quantity > li.center input {margin: 0; box-shadow: none; font-size: 1rem; height: 50px; line-height: 50px;}
.payment-container .order_form .step1 .explanation_list > li.right {width: 100%; float: right; max-width: 223px;}
.payment-container .order_form .step1 .explanation_list > li.right ol {margin-left: 0;}
.payment-container .order_form .step1 .explanation_list a:hover:after {display: none;}
.payment-container .order_form .step1 .list > li .box .top {line-height: normal; border-color: var(--brand-green);}
.payment-container .order_form .step1 .list > li .box {padding:10px 20px 30px; height: 100%;}
.payment-container .order_form .step1 .list > li .box .bottom {width: 100%; max-width: 180px;}
.payment-container .order_form .step1 .list > li .box .pricing ol {margin-left: auto; margin-right: auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center;}
.payment-container .order_form .step1 .list > li .box .pricing ol > li.last {line-height: 1; font-size: 1rem;}
.payment-container .order_form .step1 .list {display: flex; flex-wrap: wrap;}
.payment-container .order_form .step1 .list > li {margin-bottom: 0;}


.payment-container .order_form .select_quantity li {margin: 0;}
.payment-container .order_form .select_quantity {border: 1px solid var(--brand-green); display: flex; align-items: center; justify-content: center;}

/* Step */
.payment-container .order_form .step {color: var(--heading); font-weight: 900; font-family: 'Correct XXX Condensed', sans-serif; text-transform: uppercase; font-size: 2rem; line-height: 100%; margin-bottom: 19px; letter-spacing: 0.64px; padding-left:40px; position: relative;}
.payment-container .order_form .step .circle {background: var(--heading); position: absolute; left: 0; margin: 0; top: 0; line-height: 1; display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; color: var(--white); border-radius: 50%; font-size: 1.25rem;}

/* Step 2 */
.payment-container .order_form .step2 li {margin-bottom: 0!important;}
.payment-container .order_form .step2 .form_list > li.fourth {margin-top: 1%;}

/* Step 3 */
.payment-container .order_form .step3 ul.form_list_two:last-child > li {width: 100%;}
.payment-container .order_form .step3 li {margin-bottom: 0;}


/* Order Summary */
.payment-container .order_summary .top_box {background: var(--brand-green);}
.payment-container .order_summary .top_box .title {font-weight: 900; font-family: 'Correct XXX Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.64px; line-height: 1; color: var(--white); font-size: 2rem;}

.payment-container .order_summary .top_box .inside .table {margin: 0;}
.payment-container .order_summary .top_box .inside .table tr.first {border-color:var(--brand-green);}
.payment-container .order_summary .top_box .inside .table tr {background: transparent;}
.payment-container .order_summary .top_box .inside .table tr th {text-transform: uppercase; line-height: 1; font-size: 1.25rem; text-align: center;}
.payment-container .order_summary .top_box .inside .table tr th:first-child {text-align: left;}
.payment-container .order_summary .top_box .inside .table tr td {padding: 8px 8px; font-size: 1rem; font-weight: normal; width: auto;}

.payment-container .order_summary .bottom_box ul > li.right .buy_now_button {display: inline-block; font-size:1rem; font-weight: bold; line-height: 100%; padding:16px; vertical-align: middle; cursor: pointer; border:0 none; background-color: var(--base-foreground); position: relative; transition: all .35s ease-in-out; -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; text-align: center; color: var(--white); font-family:"FK Grotesk Neue", sans-serif; text-decoration: none; overflow: hidden; z-index: 1; border-radius: 0; outline: 0; box-sizing: border-box; letter-spacing: normal; width: 100%; margin-bottom: 0;}

.payment-container .order_summary .bottom_box ul > li.right .box {border: 0 none; padding: 0; background:none;}
.payment-container .order_summary .bottom_box ul > li.right .box .top {font-weight: normal; color: var(--base-foreground); font-size: 1rem; margin-bottom: 10px;}
.payment-container .order_summary .bottom_box ul > li.right .box p a {text-decoration: none; color: var(--base-foreground);}
.payment-container .order_summary .bottom_box ul {display: flex; flex-wrap: wrap; width: 100%;}
.payment-container .order_summary .bottom_box ul > li.left {margin-bottom: 0; width: 24px; top: -2px;}
.payment-container .order_summary .bottom_box ul > li.right {width: auto; flex:1;}

.payment-container .cad1, .payment-container .cad2 {opacity: 0.75; color: var(--white);}

/* Promo Code */
.payment-container .promocode_form {border:0 none !important; border-radius: 0; clip-path: var(--path-24); padding: 40px; margin: 0 auto 20px auto;}
.payment-container .promocode_form .promocode_table {margin: 0;}
.payment-container .promocode_form .promocode_table td {border:0 none; width:auto;}
.payment-container .promocode_form .promocode_table td.center {text-align: center;}
.payment-container .promocode_form .promocode_input {font-family: "FK Grotesk Neue", sans-serif; font-weight: bold; display: block; font-size: 1rem!important; line-height: 100%!important; font-style: normal; vertical-align: middle; -webkit-appearance: none; background-color: transparent!important; color: var(--brand-blue)!important; border:1px solid var(--brand-green)!important; padding:14px 16px 14px; width: 100%; transition-duration: .75s; transition-property: all; transition-timing-function: cubic-bezier(.075,.82,.165,1); border-radius: 0!important; box-shadow: none !important; letter-spacing: normal!important; text-transform: none;}
.payment-container .promocode_form .promocode_input:focus, .payment-container .promocode_form .promocode_input:hover {box-shadow:none!important; color: var(--brand-blue)!important; border-color: var(--brand-mint)!important;}
.payment-container .promocode_form .promocode_title {font-weight: 900; font-family: 'Correct XXX Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.64px; line-height: 1; font-size: 2rem; border: 0 none;}
.payment-container .promocode_form .promocode_apply_btn {display: inline-block; font-size:1rem; font-weight: bold; line-height: 100%; padding:16px; vertical-align: middle; cursor: pointer; border:0 none; background-color: var(--base-foreground); position: relative; transition: all .35s ease-in-out; -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; text-align: center; color: var(--white); font-family:"FK Grotesk Neue", sans-serif; text-decoration: none; overflow: hidden; z-index: 1; outline: 0; box-sizing: border-box; letter-spacing: normal; width: 100%; height: inherit; border-radius: 0 !important; text-transform: none;}
.payment-container .promocode_form .promocode_info {font-size: 0.875rem; line-height: normal; text-align: left !important;}
.payment-container .promocode_form .promocode_info div {margin: 0 0 5px 0; position: relative; padding: 0 0 0 14px;}
.payment-container .promocode_form .promocode_info div:before {content: ""; width: 7px; height: 7px; left:0; display: block; position: absolute; background-color: var(--brand-green); border-radius: 50%; top: 5px;}

.payment-container .promocode_form .promocode_input::-webkit-input-placeholder {color: var(--brand-green) !important;}
.payment-container .promocode_form .promocode_input:-moz-placeholder {color: var(--brand-green) !important;}
.payment-container .promocode_form .promocode_input::-moz-placeholder {color: var(--brand-green) !important;}
.payment-container .promocode_form .promocode_input:-ms-input-placeholder {color: var(--brand-green) !important;}

.payment-container .promocode_form .promocode_input:hover::-webkit-input-placeholder {color: var(--base-foreground) !important;}
.payment-container .promocode_form .promocode_input:hover:-moz-placeholder {color: var(--base-foreground) !important;}
.payment-container .promocode_form .promocode_input:hover::-moz-placeholder {color: var(--base-foreground) !important;}
.payment-container .promocode_form .promocode_input:hover:-ms-input-placeholder {color: var(--base-foreground) !important;}

.payment-container .order_form .tip {color: #ff0000; margin-bottom: 0; font-size: 11px; font-weight: normal; position: absolute; right: 0; bottom: -12px; line-height: 1;}

/*-- media css starts here --*/
@media only screen and (max-width: 1279px) and (min-width: 810px) {
    .payment-container .container {padding: 0 32px;}
}

@media only screen and (max-width: 1199px) and (min-width:992px) {
    .order_form .step1 .explanation_list > li.right {}
    .payment-container .kits-plugin-root .order_form {gap:25px;}
    .payment-container .order_form .step1 .explanation_list > li.right {max-width: 182px;}
}

@media (max-width: 991px) {
    .payment-container .order_form .step1 .list > li {margin-bottom: 30px;} 
        .payment-container .order_form .step1 .explanation_list > li.right {max-width: 100%;}

    .payment-container .order_form .step1 .explanation_list > li.right > ol {margin-left: 0;}
    .payment-container .kits-plugin-root .order_form .order_summary {width: 100%;}
    
}
@media only screen and (max-width: 991px) and (min-width: 768px){
    .payment-container .order_form .step3 ul.form_list_two:last-child > li {margin-top: 20px;}
}

@media only screen and (max-width: 1023px) and (min-width:200px){


}

@media only screen and (max-width: 767px) and (min-width: 200px){
    .payment-container {padding: 40px 0;}
    .payment-container .kits-plugin-root .order_form .container {padding: 20px 20px 40px 20px;}
    .payment-container .order_form .step2 .form_list > li.first, .payment-container .order_form .step2 .form_list > li.second {width: 100%;}
    .payment-container .order_form .step2 .form_list > li.third {margin-left: 0; width: 66px;}
    .payment-container .order_form .step2 .form_list > li.fourth {width: auto;}
    
    .payment-container .kits-plugin-root .order_form .step2 li, .payment-container .kits-plugin-root .order_form .step3 li, .payment-container .kits-plugin-root .form-group {margin-bottom: 12px!important;}
    .payment-container .kits-plugin-root .order_form li .form-group {margin-bottom: 0!important;}
    .payment-container .order_form .tip {bottom: -12px;}
    
    .payment-container .order_summary .bottom_box ul {margin-bottom: 20px;}
    .payment-container .order_summary .top_box .inside .table tr td {font-size: 0.875rem;}
    
}


@media only screen and (max-width: 389px) {
   
}