@charset "UTF-8";

html {
    position: relative;
    min-height: 100%;
    font-size: 16px;
    font-family: Helvetica, Arial, sans-serif;
}

body {
    max-width: 480px;
    margin: 0 auto 120px;
    font-size: 16px;
}

ol, ul {
    padding-left: 20px;
}


/* ------------------------------------------------------------------------- */
/* -- utility -------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */


.text-brand {
    color: #085840;
}

.text-brand-secondary {
    color: #a4844e;
}

.bg-brand {
    background-color: #085840;
    color: #ffffff;
}

.bg-brand-secondary {
    background-color: #a4844e;
    color: #ffffff;
}

.btn-brand, .btn-brand:focus, .btn-brand:active, .btn-brand:hover {
    background-color: #085840;
    color: #ffffff;
}

.band {
    background-color: #085840;
    color: #ffffff;
    text-align: center;
    font-weight: bold;
    padding: 10px;
}


/* ------------------------------------------------------------------------- */
/* -- header --------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */


.header {
    background-color: transparent;
}

.header-gray {
    background-color: #f0f0f0;
}

.header-bar {
    border-top: 5px solid #a4844e;
    background-color: #085840;
    height: 60px;
    overflow: auto;
}

.header-bar-left {
    float: left;
    height: 55px;
}

.header-bar-arrow {
    width: 12px;
    margin: 5px -5px 5px 5px;
}

.header-bar-logo {
    max-width: 100px;
    margin: 5px;
}

.header-bar-right {
    display: table;
    float: right;
    height: 55px;
}

.header-bar-link {
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    vertical-align: middle;
    display: table-cell;
    padding: 0 10px;
    font-size: 0.9rem;
}

.header-bar-link:hover, .header-bar-link:active, .header-bar-link:focus {
    text-decoration: none;
    color: #ffffff;
}


/* ------------------------------------------------------------------------- */
/* -- footer --------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */


.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 480px;
    height: 120px;
    text-align: center;
    border-top: 5px solid #a4844e;
    background-color: #085840;
    color: #ffffff;
}

.footer-content {
    margin: 10px auto;
    width: 200px;
    height: 80px;
}

.footer-icon-link img {
    width: 30px;
}


/* ------------------------------------------------------------------------- */
/* -- sign in -------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */


.sign-in-title {
    font-size: 1.6rem;
    font-weight: bold;
    color: #085840;
    margin: 10px auto;
    text-align: center;
}

.go-button {
    margin: 15px auto;
    width: 100%;
    text-align: center;
}

.go-button img {
    width: 85%;
    max-width: 300px;
    margin: 0 auto;
}

/* ------------------------------------------------------------------------- */
/* -- line points ---------------------------------------------------------- */
/* ------------------------------------------------------------------------- */

.line-point-link {
    text-align: center;
    margin-bottom: 7px;
}

/* ------------------------------------------------------------------------- */
/* -- info ----------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */


.info-paragraph {
    margin: 15px auto;
}

.info-paragraph ul {
    color: #a4844e;
}

.info-paragraph ul span {
    color: #000000;
}

.info-paragraph li {
    margin-bottom: 10px;
}


/* ------------------------------------------------------------------------- */
/* -- contact -------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */


#address > div {
    display: inline-block;
    width: 32%;
    vertical-align: middle;
}

#address .form-control {
    font-size: 0.7rem !important;
}


/* ------------------------------------------------------------------------- */
/* -- overview ------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */


/* -- status --------------------------------------------------------------- */

.status {
    width: 90%;
    min-width: 290px;
    max-width: 320px;
    margin: 15px auto;
    border: 1px dashed #bbbbbb;
}

.status td {
    padding: 5px 5px;
}

.status-header {
    font-size: 0.8rem;
}

.status-line-point-icon {
    max-width: 60px;
}

.status-separator {
    height: 50px;
    width: 1px;
    display: block;
    background-color: #cacaca;
}

.status-point-text {
    font-weight: bold;
    font-size: 1.2rem;
}


/* -- progress  ------------------------------------------------------------ */


.progress-campaign {
    background-color: #d8d8d8;
    position: relative;
    overflow: visible;
    width: 100%;
    max-width: 350px;
    margin: 30px auto 0;
}

.progress-bar-campaign {
    background-color: #a4844e;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}

.progress-end {
    position: absolute;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    right: -5px;
    top: -10px;
    background-color: #d8d8d8;
}

.progress-star {
    width: 30px;
    margin: 5px;
}

.progress-text {
    font-size: 0.7rem;
    color: #5a5a5a;
}

.overview-footer {
    height: 40px;
    width: 100%;
    background-color: #ffffff;
    margin-top: -35px;
}


/* ------------------------------------------------------------------------- */
/* -- popup ---------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */

.popup {
    padding: 35% 0;
}

.popup-header {
    border-bottom: none;
    padding: 0;
    position: relative;
}

.popup-header-bg {
    width: 100%;
}

.popup-header-icon {
    position: absolute;
    right: 0;
    left: 0;
    top: 30px;
    margin: 0 auto;
    width: 64px;
}

.popup-footer {
    border-top: none;
}

.modal-dialog {
    width: 90%;
    min-width: 300px;
    max-width: 450px;
    margin: 0 auto;
}

/* ------------------------------------------------------------------------- */
/* -- branches ------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */


.container-branches {
    background-color: #ffffff;
}

.branch-area {
    margin: 10px auto;
}

.branch-area > div {
    margin: 10px auto;
}

.branch-row {
    font-size: 0.8rem;
    border-bottom: 1px dashed #bbbbbb;
}

.branch-row:last-of-type {
    border-bottom: none;
}

.branch-flag {
    padding: 0;
}

.branch-info > div {
    margin-bottom: 5px;
}

.branch-info-country {
    font-weight: bold;
    margin-right: 10px;
}

.branch-info-name {
    font-weight: bold;
}

.branch-map {
    padding: 0;
}

.branch-map-button {
    height: 100px;
}


/* ------------------------------------------------------------------------- */
/* -- campaign ------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */


.campaign-content {
    display: none;
}

/* -- loading -------------------------------------------------------------- */

.loading {
    margin: 150px auto;
    text-align: center;
    font-size: 0.8rem;
    font-weight: bold;
}

.loading img {
    max-width: 48px;
    margin-bottom: 10px;
}


/* -- branch tab  ---------------------------------------------------------- */


.branch-tab-wrapper {
    border-top: 1px dashed #bbbbbb;
    border-bottom: 1px dashed #bbbbbb;
    margin: 0 auto;
}

.branch-tab {
    width: 48%;
    display: inline-block;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 1.1rem;
    vertical-align: middle;
    color: #777777;
}

.branch-tab-active {
    color: #085840;
    font-weight: bold;
}

.branch-separator {
    display: inline-block;
    background-color: #bbbbbb;
    width: 1px;
    height: 30px;
    margin: 5px auto;
    vertical-align: bottom;
}


/* -- branch tab content --------------------------------------------------- */


.branch-tab-content {
    padding: 10px 0;
}


/* -- branch link ---------------------------------------------------------- */

.branch-link img {
    width: 36px;
}

.branch-link a, .branch-link a:hover, .branch-link a:focus, .branch-link a:active {
    color: #5f5f5f;
}

/* -- branch stamp --------------------------------------------------------- */

.container-stamp {
    background-color: #ffffff;
}

.branch-stamps {
    margin: 0 auto;
}

.stamp-icon {
    width: 18%;
    display: inline-block;
    margin: 1%;
}

.stamp-icon img {
    width: 100%;
}