/*Main colors*/
/*Fonts*/
/*standard*/
/*slider*/
/*General*/
/* ===============================================================================
    = Fonts
=============================================================================== */
/*Nunito*/
@font-face {
  font-family: 'Nunito';
  src: url("../../fonts/Nunito-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Nunito';
  src: url("../../fonts/Nunito-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'Nunito';
  src: url("../../fonts/Nunito-Light.ttf") format("truetype");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: 'Nunito';
  src: url("../../fonts/Nunito-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: 'Nunito';
  src: url("../../fonts/Nunito-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal; }

/* ==================================================
    =720px
===================================================== */
@media only screen and (max-width: 720px) {
  /* ================================================== Widget grid */
  .col-ss-12 {
    width: 100%; }
  .col-ss-11 {
    width: 91.66666667%; }
  .col-ss-10 {
    width: 83.33333333%; }
  .col-ss-9 {
    width: 75%; }
  .col-ss-8 {
    width: 66.66666667%; }
  .col-ss-7 {
    width: 58.33333333%; }
  .col-ss-6 {
    width: 50%; }
  .col-ss-5 {
    width: 41.66666667%; }
  .col-ss-4 {
    width: 33.33333333%; }
  .col-ss-3 {
    width: 25%; }
  .col-ss-2 {
    width: 16.66666667%; }
  .col-ss-1 {
    width: 8.33333333%; }
  .col-ss-hidden {
    display: none; }
  /* -------------------------------------------------------------------------- Login page */
  .login-main {
    padding-top: 100px; }
  .login-content {
    padding: 0 20px; }
    .login-content .col-left {
      width: 100%;
      padding: 0; }
    .login-content .col-right {
      width: 100%;
      padding: 0;
      margin-bottom: 30px; }
      .login-content .col-right h2 {
        font-size: 25px;
        line-height: 30px; }
  /* -------------------------------------------------------------------------- Dashboard */
  .slider-tabs {
    top: 410px; }
    .slider-tabs li {
      padding: 8px 5px; }
      .slider-tabs li a {
        font-size: 12px; }
  .widget-grid .widget-h-1 .widget-inner {
    height: auto; }
  .widget-grid .widget-map .widget-inner, .widget-grid .widget-map .wap-wrapper {
    min-height: 400px; }
  /* ================================================== Prelogin ATM Branch */
  .page-prelogin-atm .login-main {
    padding-top: 90px; }
  .prelogin-full .inner {
    height: auto; }
  .prelogin-full h2 {
    font-size: 20px; }
  .prelogin-full .col-left {
    width: 100%;
    float: none; }
  .prelogin-full .col-right {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    height: 300px; }
    .prelogin-full .col-right.prelogin-map {
      height: 300px; }
  /* ================================================== Payments */
  .account-row .account-single .account-box .account-main {
    width: 100%; }
  .account-row .account-single .account-box .main-balance {
    width: 100%; }
    .account-row .account-single .account-box .main-balance p {
      text-align: left;
      padding-left: 80px; }
  /* ================================================== Prelogin Product Catalogue */
  .prelogin-full .col-right, .prelogin-full .product-list {
    height: auto; }
  .product-slider .product-inner {
    padding-left: 20px;
    padding-right: 20px; }
  .product-slider .slider-button-prev, .product-slider .slider-button-next {
    display: none; }
  .product-slider .slick-dots {
    top: auto;
    bottom: 0; }
  .product-slider h3 {
    font-size: 25px; }
  .product-single .product-info li {
    width: 100%; }
    .product-single .product-info li:nth-child(odd) {
      margin-right: 0; }
  .account-small-slider .single-slide .small-slider .slide {
    width: 550px;
    margin-left: auto;
    margin-right: auto; }
  .account-small-slider .single-slide .slider-button-prev, .account-small-slider .single-slide .slider-button-next {
    display: none; }
  /* ================================================== Prelogin Sign up */
  .sign-up-data-check .half {
    width: 100%;
    padding: 0; }
    .sign-up-data-check .half:nth-child(2) {
      width: 100%;
      padding: 0; }
  #map-canvas-signup {
    margin-top: 20px; }
  /* ================================================== Cards */
  .custom-table.card-limit .checkbox-wrap-2.fl-r {
    float: left !important; }
  /* ================================================== Calendar */
  .calendar .table-head {
    display: none; }
  .calendar .table-body {
    border-top: 1px solid #d0d0d0; }
  .calendar .td {
    width: 100%;
    height: auto;
    min-height: 40px; }
    .calendar .td a {
      padding: 10px; }
    .calendar .td p {
      position: static;
      margin-bottom: 0;
      float: left; }
      .calendar .td p span {
        display: inline-block;
        margin-left: 10px; }
    .calendar .td .event-wrapper:last-child {
      margin-bottom: 0; }
  .transaction-tracker-wrapper {
    position: static;
    bottom: 0;
    left: 0;
    float: right; }
  .time-lapse-trigger {
    width: 100%;
    margin: 20px auto 25px; }
  /* ================================================== Bill presentment */
  .custom-table .action-wrap-1 .btn-1, .custom-table .action-wrap-1 .btn-2 {
    display: inline-block;
    width: 100%;
    margin-right: 0%;
    margin-bottom: 10px;
    float: none; }
  .custom-table .action-wrap-1 .btn-1:last-child, .custom-table .action-wrap-1 .btn-2:last-child {
    margin-bottom: 0; }
  .table-corner-button {
    position: static;
    margin: 10px 0; }
  /* ================================================== Tips and tricks */
  .widget.widget-tips-and-tricks .widget-header {
    margin-bottom: 40px; }
  .widget.widget-tips-and-tricks .tips {
    position: relative;
    bottom: 0; }
  .widget.widget-tips-and-tricks:before {
    border-width: 0 65px 65px 0; }
  .widget.widget-tips-and-tricks:after {
    content: "";
    width: 25px;
    height: 26px;
    position: absolute;
    top: 8px;
    right: 16px;
    background: url(../../img/icons/lightbulb-icon.png) no-repeat center center;
    background-size: 25px; }
  #page-header-left {
    width: 100%;
    height: 50px;
    overflow: hidden; }
    #page-header-left .site-branding {
      padding: 0px 0px 0px 0px;
      height: 50px;
      position: relative;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      margin-top: 0px;
      margin-bottom: 0px;
      width: 170px;
      float: right; }
        #page-header-left .site-branding h1 {
            float: right;
            margin-right: 20px;
            margin-top: 7px;
            font: 400 50px/1.3 "Nunito", "Roboto", sans-serif;
        }
      #page-header-left .site-branding .site-logo a {
        background-size: 130px;
        overflow: hidden; }
    #page-header-left .profile, #page-header-left .main-nav {
      display: none; }
  .page-header-left_footer {
    display: none; }
  #main {
    margin: 0px; }
  .slider-tabs {
    top: auto !important; }
  .list-options {
    top: 60px !important; }
  .page-header-left_wrapper .menu-btn {
    padding-top: 18px;
    padding-left: 20px; }
    .page-header-left_wrapper .menu-btn ul {
      padding-top: 18px;
      padding-left: 35px; }
  #page-header-left.mobile {
    width: 260px;
    height: 100%;
    overflow: visible; }
    #page-header-left.mobile .site-branding {
      float: right;
      margin-top: 0;
      width: 100%;
      padding: 0;
      margin-bottom: 20px;
      /*@include box-shadow(-4px 6px 12px rgba(241, 241, 241, 0.8));*/
      height: 50px; }
        #page-header-left.mobile .site-branding h1 {
            float: none;
            margin-right: 0px;
            margin-top: 0px;
            font: 400 32px/1.3 "Nunito", "Roboto", sans-serif;
            padding-left: 70px;
        }
      #page-header-left.mobile .site-branding .site-logo a {
        background-size: contain;
        background-position: 80%;
        overflow: visible;
        height: 35px;
        margin-top: -7px; }
    #page-header-left.mobile .profile, #page-header-left.mobile .main-nav {
      display: block; }
    #page-header-left.mobile .page-header-left_wrapper .menu-btn {
      top: 0px;
      z-index: 100; }
      #page-header-left.mobile .page-header-left_wrapper .menu-btn ul {
        padding-top: 18px;
        padding-left: 35px;
        padding-bottom: 14px;
        height: 50px; }
        #page-header-left.mobile .page-header-left_wrapper .menu-btn ul .first {
          transform: rotate(-45deg);
          position: absolute;
          top: 23px;
          -webkit-transition: transform 0.3s, top 0.3s;
          /* Safari */
          transition: transform 0.3s, top 0.3s; }
        #page-header-left.mobile .page-header-left_wrapper .menu-btn ul .second {
          display: none; }
        #page-header-left.mobile .page-header-left_wrapper .menu-btn ul .third {
          transform: rotate(45deg);
          position: absolute;
          top: 23px;
          -webkit-transition: transform 0.3s, top 0.3s;
          /* Safari */
          transition: transform 0.3s, top 0.3s; }
  .page-header-left_wrapper .menu-btn {
    padding-top: 0px;
    padding-left: 0px;
    margin-left: -20px; }
    .page-header-left_wrapper .menu-btn ul {
      padding-top: 18px;
      padding-left: 35px;
      padding-bottom: 14px;
      height: 50px; }
      .page-header-left_wrapper .menu-btn ul .first {
        transform: rotate(180deg);
        position: unset;
        top: unset;
        -webkit-transition: transform 0.3s, top 0.3s;
        /* Safari */
        transition: transform 0.3s, top 0.3s; }
      .page-header-left_wrapper .menu-btn ul .second {
        display: block;
        -webkit-transition: display 0.5s;
        /* Safari */
        transition: display 0.5s; }
      .page-header-left_wrapper .menu-btn ul .third {
        transform: rotate(180deg);
        position: unset;
        top: unset;
        -webkit-transition: transform 0.3s, top 0.3s;
        /* Safari */
        transition: transform 0.3s, top 0.3s; }
  .page-header-left_footer {
    display: block; }
  #main-side {
    margin: 50px 0 0 0; }
  .profile-img-group {
    width: 120px;
    height: 120px;
    position: relative;
    margin: 100px auto 40px auto; }
  .popup-24 {
    /*height: 100%;*/ }
  .popup-box.popup-wide {
    height: auto;
    max-width: 720px;
    width: 96% !important;
    top: 0; }
  .popup-24 .category, .popup-24 .add-new {
    width: 100%; }
  .pfm-categorization-rules .widget-options .options-list {
    top: -10px; }
  .steps li {
    margin-top: 10px; }
  .popup-narrow {
    width: 100%; }
  .popup-box {
    max-width: 900px;
    width: 100%;
    top: 0;
    left: 0;
    -webkit-transform: translate(0%, 0%);
    -moz-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    transform: translate(0%, 0%); }
  .col-header:nth-child(2):before, .col:nth-child(2):before {
    display: none; }
  .pfm-transactions-list .custom-table .row-1 .col:before, .widget-transactions-pfm .custom-table .row-1 .col:before, .pfm-financial-calendar .custom-table .row-1 .col:before, .pfm-financial-treemap .custom-table .row-1 .col:before, .pfm-financial-donut .custom-table .row-1 .col:before, .pfm-financial-bar .custom-table .row-1 .col:before {
    display: none; }
  .pfm-transactions-list .custom-table .col, .widget-transactions-pfm .custom-table .col, .pfm-financial-calendar .custom-table .col, .pfm-financial-treemap .custom-table .col, .pfm-financial-donut .custom-table .col, .pfm-financial-bar .custom-table .col {
    padding: 8px 8px;
    position: relative; }
  .pfm-transactions-list .custom-table .text-6, .widget-transactions-pfm .custom-table .text-6, .pfm-financial-calendar .custom-table .text-6, .pfm-financial-treemap .custom-table .text-6, .pfm-financial-donut .custom-table .text-6, .pfm-financial-bar .custom-table .text-6 {
    padding-left: 50px; }
  .pfm-transactions-list .trigger-2, .widget-transactions-pfm .trigger-2, .pfm-financial-calendar .trigger-2, .pfm-financial-treemap .trigger-2, .pfm-financial-donut .trigger-2, .pfm-financial-bar .trigger-2 {
    top: -94px;
    right: 10px; }
  .pfm-financial-goals .widget {
    margin-top: 60px; }
  .pfm-financial-goals .pfm-goal_progress-bar {
    width: 90%; }
  .pfm-categorization-rules .trigger-2 {
    top: -44px;
    right: 0; }
  .pfm-categorization-rules .custom-table .text-6 {
    padding-left: 10px; }
  .popup-24 .amount, .popup-24 .total-amount {
    margin: 15px 10px 0px 0px;
    width: 50%; }
  .popup-24 .category {
    width: 100%; }
  .popup-24 .remove {
    margin: 51px 0px 0px 12px; }
  .account-box .main-balance p {
    margin-top: -4px; } }

/* ==================================================
    =680px
===================================================== */
@media only screen and (max-height: 680px) {
  #page-header-left.mobile {
    overflow-x: hidden; }
  .page-header-left_footer {
    position: relative;
    margin-top: 20%; }
  #page-header-left .site-branding {
    padding: 0px 7px 0px 21px; }
  .profile-bar a {
    margin-left: 26px; } }