/* Extra small devices (phones, 600px and down) */
@media (min-width:320px) and (max-width:600px){

    /* styles (default) */
    html {
        font-size:14px;
    }
    a, i{
        color:unset;
        cursor: pointer;
    }
    body {
        font-weight: 300;
        color: var(--subtheme-color);
        overflow-x: hidden;
        font-weight:400;
        font-size:16px;
        background: var(--default-background);
    }

    /* Navigation Bar */
    .nav-top-01 {
        padding:2rem 1.25rem;
        color:#fff;
        top:0;
        position:sticky;
        width:100%;
        left:0;
    }

    .web-navi-left {
        display:none;
    }
    .web-navi-right {
        width:100%;
        position:relative;
        margin-left:0%;
    }


    /* background */
    .bg-default
    {
        background: #000;
        position: relative;
        min-height: 100vh;
    }
    .bg-01 {
        /*background: url('../img/Background/WB1.png') center/cover no-repeat;*/
        background-image: url('../../img/Background/MB1.png?v=1.1');
        background-attachment: fixed;
        position: relative;
        min-height: 100vh;
        background-position-y: 0px;
        background-size:100%;
        background-repeat: no-repeat;
    }
    .bg-02 {
        /*background: url('../img/Background/WB2.png') center/cover no-repeat;*/
        background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url('../img/Background/MB2.png?v=1.1');
        background-attachment: fixed;
        position: relative;
        min-height: 100vh;
        z-index: 1;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .section-01 {
        z-index: 2;
        position: relative;
    }
    .section-02 {
        padding: 0 1.25rem 5rem;
        min-height: 100vh;
        min-width: 100%;
    }
    .section-03 {
        padding: 2rem 2.5rem 5rem;
        z-index: 1;
        min-height: 100vh;
        min-width: 80vw;
        margin-left: 0vw;
    }
    .section-04 {
        padding: 0.5rem 1.25rem 8rem;
        z-index: 1;
        min-height: 100vh;
    }



























    /* styles (pages) */

    /*packagege*/
    .package-reminder {
        
    }
    .package-info {
        
    }
    .package-card {
        
    }
    .package-card .package-card-cover {
        width: 19.938rem;
    }
    .package-card-box {
        width: 19.938rem;height:100%;position:absolute;top:0;left:0;border-radius:5px;padding:1.2rem 1.25rem;
    }
    .package-card-box .small-logo {
        width: 8.25rem;height:auto;
    }
    .package-card-box .small-type {
        padding:3.5rem 0;text-transform:uppercase;text-align:left;color: #d2af6d;font-size: 0.688rem;font-family:krefit;
    }
    .package-card-box .bottom-side {
        position:absolute;bottom:1.2rem;left:1.25rem;width:88%;
    }
    .package-card-box .cardholder-name, .package-card-box .cardholder-country {
        color: #d2af6d;font-size: 0.688rem;font-family:krefit;text-transform:uppercase
    }
    .package-card-box .cardholder-date {
        color: #d2af6d;font-size: 0.688rem;font-family:krefit;
    }
    .cardholder-country-img {
        width: 1rem;height:auto;margin-left:0.5rem;
    }
    .card-term-title {
        padding-bottom:0.5rem;
        margin-top:1rem;
    }
    .card-term-desc {
       
    }

    /* buy */
    .wallett-box {
        
    }
    .wallett-box .wallet-type {
        
    }
    .wallett-box .wallet-sub {
        
    }
    .wallett-box .wallet-value {
        
    }
    .wallett-reminder {
        
    }
    .reminder-02 {
        
    }
    .summary-boxx {
        left:0;padding: 1rem 1.25rem;
        width:100%;
    }
    .summary-boxx .lbl-summary {
        color: #696969;font-size: 0.688rem;padding-bottom:0.125rem;
    }
    .summary-boxx .val-summary {
        color: #000;font-size: 0.938rem;font-weight: bold;
    }

    /*package info*/
    .package-info-reminder {
        
    }
    .package-info-info {
        display: block;
    }
    .package-info-card {
        
    }
    .package-info-card .package-info-card-cover {
        width: 100%;
    }
    .package-info-card-box {
        
    }
    .package-info-card-box .small-logo {
        
    }
    .package-info-card-box .small-type {
        
    }
    .package-info-card-box .bottom-side {
        
    }
    .package-info-card-box .cardholder-name, .package-info-card-box .cardholder-country {
        
    }
    .package-info-card-box .cardholder-date {
        
    }



















    .copyright {padding-top:25px;padding-bottom:10px;text-align:center;font-size: 11px;color: #b9b9b9;}

    .-onlyweb {display:none ;}
    .-onlymob {display:block ;}

    /* Navigation Bar */
    .web-navbar {display:flex;min-height:100vh;}
    .web-navbar .left-sidebar {width:17%;background-image: linear-gradient(to top, #212d4f, #18203a);position:fixed;height:100vh;z-index:30;}
    .web-navbar .left-sidebar .logobox {padding:55px 40px;}
    .web-navbar .left-sidebar .side-navoption {margin:0 20px;border-top:1px solid #232f54;}
    .nav-option {display:flex;align-items:center;padding:12px 0;border-bottom:1px solid #232f54;color:#5e6c9c;}
    .nav-option i.sidelogo {font-size:15px;color:#5e6c9c;}
    .nav-option span {font-size: 12px;margin-left:15px;}
    .nav-option .mr-auto{margin-left:auto;}
    .nav-option .back-i {font-size:11px;color:#5e6c9c;}
    .nav-option.actived {color:#d2af6d;}
    .nav-option.actived i.sidelogo {font-size:15px;color:#d2af6d;}
    .nav-option.actived span {font-size: 12px;margin-left:15px;}
    .nav-option.actived .mr-auto{margin-left:auto;}
    .nav-option.actived .back-i {font-size:11px;color:#d2af6d;}
    .nav-option:hover {color:#d2af6db6;}
    .nav-option:hover i.sidelogo {font-size:15px;color:#d2af6db6;}
    .nav-option:hover span {font-size: 12px;margin-left:15px;}
    .nav-option:hover .mr-auto{margin-left:auto;}
    .nav-option:hover .back-i {font-size:11px;color:#d2af6db6;}
    .header-side {width:100%;padding-left:0;}
    .header-box {background-color: #fff;box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);padding:18px 40px;display:flex;justify-content:right;align-items:center;position:fixed;width:83%;z-index:30;}
    .header-box .big-title {margin-right:auto;color: #273155;font-size: 20px;font-family: 'Fira Sans', sans-serif !important;font-size: 20px;}
    .header-box .right-sideopt {display:flex;color:#000;gap:25px;align-items:center;}
    .header-box .right-sideopt {font-size: 13px;}
    .header-box .btn-sideright .side-i{background: -webkit-linear-gradient(326deg, rgba(253,197,9,1) 0%, rgba(252,113,16,1) 60%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;margin-right:8px}
    .header-box .btn-sideright .back-i {font-size:6px;margin-left:7px;}
    .header-box .logout-i {color: #f00;font-size: 13px;text-decoration: underline;}
    .nav-content {padding:80px 18px 100px;position:relative;}

    /* Form Input #1 */
    .form-box-01 {padding-top:22px;}
    .form-box-01 .label-form-01 {color: #273155;font-size: 13px;padding-bottom:3px;}
    .form-box-01 .form-input-01 {position:relative;}
    .form-box-01 .form-input-01 input {background-color: #fff;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);border-radius: 10px;padding:8px 18px;width:100%;font-size: 13px;border:none;outline:none;font-family: 'Fira Sans', sans-serif !important;font-weight:bold;}
    .form-box-01 .form-input-01 input::placeholder { color: #b9b9b9;font-family: 'Fira Sans', sans-serif !important;font-size:13px;}
    .form-box-01 .form-input-01 input:focus {box-shadow: 0 2px 4px 0 #d2af6d;}
    .form-box-01 .form-input-01 .action-form-01 {position:absolute;right:18px;top:8px}
    .form-box-01 .form-input-01 .action-form-01 .open {font-size:13px;}
    .form-box-01 .form-input-01 .action-form-01 .closes {font-size:14px;}
    .form-box-01 .form-input-01 .label-form-01 {position:absolute;top:8px;left:18px;color: #273155;font-size: 13px;font-family: 'Fira Sans', sans-serif !important;}
    .username-space {padding-left:50px !important;}
    /* Form Selection #1 */



    /* Form Button #1 */
    .padding-submitbtn {padding-top:28px;}
    .btn-submits {background-color: #273155;border-radius: 10px;padding:11px;color:#fff;width:100%;max-width:200px;border:none;font-size: 14px;font-family: 'Fira Sans', sans-serif !important;}
    .btn-submits:hover {background-color: #27315588;}

    /* END of Default Elements */



    /* START Login Template */
    .before-login-bg {min-height:100vh;background-image: url('../../img/Elements_new/BG-05.png');background-size:100%;background-repeat:no-repeat;background-attachment: fixed;}
    .before-login-flex {display:block;justify-content:space-between;padding:0;}
    .before-login-flex .left-side {width:100%}
    .before-login-flex .right-side {width:100%}
    .before-login-flex .right-content {padding-top:25px;padding-left:20px;padding-right:20px;}

    .btn-language {color: #273155;font-size: 0.813rem;font-family: 'Fira Sans', sans-serif !important;background:transparent;border:none;outline:none;padding:0px;}
    .btn-language i {font-size:7px;margin-left:6px;}
    .btn-language:hover {color:#d2af6d;}

    .mobile-topnav-01 {display:flex;align-items:center;padding:25px 18px;background:white;z-index:40;}
    .mobile-topnav-01 img {width:140px;}
    .mobile-leftside {margin-left:auto;text-align:right;}
    .mobile-pfixed {position:fixed;width:100%;z-index:40;}

    .mobile-bottom-nav {background-image: linear-gradient(to bottom, #212d4f, #18203a);box-shadow: 0 2px 10px 0 rgba(71, 176, 146, 0.2);padding:12px 0px 15px;position:fixed;bottom:0;width:100%;}
    .mobile-bottom-box {display:flex;justify-content:space-around;}
    .nav-option-bottom i{color: #546291;font-size:1rem;}
    .nav-option-bottom .label-nav-bottom {font-size: 0.625rem;color: #546291;padding-top:0.188rem;}
    .nav-option-bottom.activeds i{color: #d2af6d;font-size:1rem;}
    .nav-option-bottom.activeds .label-nav-bottom {font-size: 0.625rem;color: #d2af6d;padding-top:0.188rem;}
    /* END of Login Template */

    /* START Navigation Switch Bar #1 */
    .switch-bar{border: solid 1px #d2af6d;border-radius: 10px;display:flex;color: #d2af6d;font-size: 0.813rem;margin-top:35px;}
    .switch-option {width:50%;text-align:center;padding:5px;font-size: 0.813rem;}
    .switch-option.left.actived { background-color: #d2af6d;border-top-left-radius:10px;border-bottom-left-radius:10px;color: #fff;font-family: 'Fira Sans', sans-serif !important;}
    .switch-option.right.actived { background-color: #d2af6d;border-top-right-radius:10px;border-bottom-right-radius:10px;color: #fff;font-family: 'Fira Sans', sans-serif !important;}
    .switch-option.left:hover {background-color: #d2af6d33;border-top-left-radius:10px;border-bottom-left-radius:10px;color: #d2af6d;font-family: 'Fira Sans', sans-serif !important;}
    .switch-option.right:hover { background-color: #d2af6d33;border-top-right-radius:10px;border-bottom-right-radius:10px;color: #d2af6d;font-family: 'Fira Sans', sans-serif !important;}
    .switch-option.left:hover.actived { background-color: #d2af6d;border-top-left-radius:10px;border-bottom-left-radius:10px;color: #fff;font-family: 'Fira Sans', sans-serif !important;}
    .switch-option.right:hover.actived { background-color: #d2af6d;border-top-right-radius:10px;border-bottom-right-radius:10px;color: #fff;font-family: 'Fira Sans', sans-serif !important;}
    .reminder {padding-top:14px;color: #626262;font-size: 12px;text-align:center;font-family: 'Fira Sans', sans-serif !important;}
    /* END of Navigation Switch Bar #1 */




    /******************************** LOGIN ********************************/
    .login-form {
        width:100%;
    }
    .login-session {
        display:flex;color:#fff;align-items:center;padding:2rem 1.25rem;min-height:90vh;
    }
    .login-logo {
        width: 6.225rem;margin-bottom:1.438rem;
    }
    .s-logo {
        width: 17.225rem;
    }
    .login-welcome {
        color: #d2af6d;line-height: 1.78;font-size: 1.125rem;font-weight: bold;padding-bottom:1.938rem;
    }
    .login-navbar {
        border: solid 1px #d2af6d;background-color: #142046;margin-bottom:1rem;
    }
    .login-navbar .bars {
        padding:0.5rem;width:50%;color: #d2af6d;font-size: 0.813rem;font-weight: bold;
    }
    .login-navbar .bars:hover {
        background-color: #d2af6d5d;
    }
    .login-navbar .bars.bolded {
        background-color: #d2af6d;
        color: #142046;
    }
    
    .redirect-boxx {
        padding:2rem 0;
    }
    .forget-password-redirect {
        color: #fff;font-size: 0.875rem;font-weight: 500;font-size: 0.875rem;text-decoration: underline;
    }
    
    .form-boxx {
        padding:0.5rem 0;text-align:center
    }
    .btn-main {
        background-color: #d2af6d;
        padding:1rem 2rem;
        width:12.5rem;
        color: #142046;
        font-size: 0.875rem;
        font-weight: bold;
        border:none;
    }
    .btn-main:hover {
        background-color: #d2af6de7;
    }

    /******************************** LOGIN ********************************/

    
 
}