<!-- Styles -->

 html, body {
     /*background-color: #abbec7;*/
     background-color: #ff0000;
     color: #636b6f;
     font-family: 'Nunito', sans-serif;
     font-weight: 200;
     height: 58vh;
     margin: 0;
 }

/* Small devices (landscape phones, 544px and up) */
@media (max-width: 490px) {
    .h2 {font-size: 1.5rem; color: #000000;}
    .h4 {font-size: 1.2rem;}
    .display-1 {font-size: 3.0rem;} /*1rem = 16px*/
    .uname {display: none;}
}

@media (min-width:491px) and (max-width: 768px) {
    .h2 {font-size:1.5rem;} /*1rem = 16px*/

}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width:769px) and (max-width: 992px) {
    .h2 {font-size:2rem;} /*1rem = 16px*/
}

/* Large devices (desktops, 992px and up) */
@media (min-width:993px) and (max-width: 1200px) {
    .h2 {font-size:2.5rem;} /*1rem = 16px*/
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1201px) {
    .h2 {font-size:3rem;} /*1rem = 16px*/
}

.profile_contents{padding:15px 0 85px}


.feather-16{
    width: 16px;
    height: 16px;
}
.feather-24{
    width: 24px;
    height: 24px;
}
.feather-32{
    width: 32px;
    height: 32px;
}

.learn_more_dotted {
    text-decoration: underline dotted;
}

.modal-backdrop {
    z-index: 100000 !important;
}

.modal {
    z-index: 100001 !important;
}

.flex-center {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 3%;
}

.position-ref {
    position: relative;
}


.content {
    text-align: center;
    border-color: #aab2bf;
    border-width: 3px;
}

/*.offer {*/
/*    text-align: center;*/
/*    !*font-size: 1.5em;*!*/
/*    padding: 1%;*/
/*    !*margin-bottom: 1%;*!*/
/*    background-color: #f8fafc;*/
/*    color: #000000;*/
/*    border:1px solid rgba(0, 0, 0, 0.57);*/
/*    border-radius: 1%;*/
/*    box-shadow: 3px 3px 3px #9c9fa2;*/
/*}*/

#confirmation {
    text-align: center;
    /*font-size: 1.0em;*/
    padding:1%;
    padding-bottom: 3%;
    padding-left: 5%;
    padding-right: 5%;
    width: 100%;
    /*color: #535656;*/
    /*border:1px solid #ffffff;*/
}

/*.paypal-button-container{*/
/*    text-align: center;*/
/*    font-size: 1.0em;*/
/*    padding-left:5%;*/
/*    padding-right:5%;*/
/*    padding-top:1%;*/
/*}*/

/*.stripe_button {*/
    /*display: block;*/
    /*font-size: .9em;*/
    /*background: #020202;*/
    /*color: #fff;*/
    /*box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);*/
    /*border-radius: 14px;*/
    /*border: 0;*/
    /*font-weight: 400;*/
    /*width: 100%;*/
    /*height: 45px;*/
    /*outline: none;*/
    /*cursor: pointer;*/
    /*transition: all 0.15s ease;*/

/*}*/
/*.stripe_button:focus {*/
/*    background: #9c9fa2;*/
/*}*/

/*.stripe_button:hover {*/
/*    transform: translateY(-1px);*/
/*    box-shadow: 0 7px 14px 0 rgba(50, 50, 93, 0.1),*/
/*    0 3px 6px 0 rgba(0, 0, 0, 0.08);*/
/*}*/

.stripe_button_active:hover {
    color: #a9a3a3;
}

/*.stripe_button:active {*/

/*}*/

/*.stripe-button-container{*/
/*    padding-left:5%;*/
/*    padding-right:5%;*/
/*    padding-bottom:1%;*/
/*    padding-top: 3%;*/
/*}*/


.tip_page_headline {
    font-size: 1.0em;
    font-weight: bold;
}


.follow {
    padding-top:5%;
    display: none;
    padding-bottom:5%;
}

.profile_pic {
    /*margin: 2%;*/
    width:134px;
    height:134px;
    border:1px solid #9c9fa2;
    border-radius: 50% !important;
    box-shadow: 3px 3px 3px #9c9fa2;
    overflow: visible;
    position: absolute;
    top: 105px;
    /*margin: 0 auto;*/
    /*margin-right: auto;*/
    margin-left: -62px;
    /*left: 120px;*/
    z-index: 3;
}

/*.bodyContainer{*/
/*    padding: 15px;*/
/*    width: 800px;*/
/*    margin: auto;*/
/*}*/

/*.prof_banner{*/
/*    margin-top: 0px;*/
/*    position: relative;*/
/*    z-index: -1;*/
/*}*/

.bepo_logo{
    margin-top: -260px;
    position: relative;
}

.bepo_logo_ost{
    margin-top: -220px;
    position: relative;
}

.button-color {
    background-color: #f4c242;
    border-color: #adacab;
    font-size: .6em;
    color: #000000;
}

/*#spinner {*/
/*    background-color: #ffffff;*/
/*    font-size: 2.3em;*/
/*    width: 70%;*/
/*    margin-left:10%;*/
/*    margin-right: 10%;*/
/*    !* border: #fff; *!*/
/*    text-align: center;*/
/*    color:#000000;*/
/*}*/

/*.X_tip_calc {*/
/*    font-size: 1.0em;*/
/*    color: #636b6f;*/
/*}*/

/*.transaction_charge {*/
/*    font-size: 1.0em;*/
/*    color: #464c4f;*/
/*    width: 80%;*/
/*    padding:1px;*/
/*    border: #fff;*/
/*    text-align: right;*/
/*    color: #636b6f;*/
/*    margin: 15px 5px 15px 20px;*/
/*}*/


.comment {
    background-color: #ffffff;
    width: 70%;
    padding:0%;
    margin: 2%;
    border: #fff;
    text-align: center;
    color:#000000;
}

.comment-container {
    font-size: 0.9em;
    padding-top:1%;
    padding-bottom:3%;
    margin: 4%;
    text-align: center;
    border: #000000;
    background-color: #fff;
    border: 1px solid #d5c7c7;
}

.os-tip-container{
    margin-top:-100px;
    z-index: 1000;
}
.os-tip {
    font-size: 0.9em;
    padding-top:1%;
    padding-bottom:3%;
    margin: 2%;
    border: #000000;
    background-color: #fff;
    border: 1px solid #d5c7c7;
    width:80%;
}

#rating-container {
    font-size: 1.5em;
    padding-top:0%;
    /*padding-bottom:10%;*/
    margin: 2%;
    justify-content: center;
    text-align: center;
    border: #000000;
    /*background-color: #ac921f;*/
    display: none;
}

/*.slider {*/
/*    height:5px;*/
/*    margin-top: 50px;*/
/*    background:#000000;*/
/*    border-radius:2px;*/
/*    position:relative;*/
/*    justify-content: center;*/
/*}*/

/*.slider .ui-slider-range {*/
/*    border-radius:2px;*/
/*    background:#fff;*/
/*    position:absolute;*/
/*    left:0;*/
/*    top:0;*/
/*    bottom:0;*/
/*    justify-content: center;*/
/*}*/
/*.slider .ui-slider-handle {*/
/*    cursor:move;*/
/*    cursor: grab;*/
/*    cursor: -webkit-grab;*/
/*    width:32px;*/
/*    height:32px;*/
/*    position:absolute;*/
/*    outline:none;*/
/*    top:0;*/
/*    z-index:1;*/
/*    border-radius:50%;*/
/*    background:#fff;*/
/*    box-shadow:0 2px 7px rgba(0,0,0,0.2);*/
/*    margin:-1px 0 0 0;*/
/*    -webkit-transform: translate(-50%,-50%);*/
/*    transform: translate(-50%,-50%);*/
/*    transition: box-shadow .3s ease;*/
/*}*/
/*.slider .ui-slider-handle .smiley {*/
/*    position:absolute;*/
/*    left:50%;*/
/*    bottom:100%;*/
/*    width:32px;*/
/*    height:32px;*/
/*    border-radius:50%;*/
/*    border:2px solid #000;*/
/*    opacity:0;*/
/*    -webkit-transform: translate(-50%,-12px);*/
/*    transform: translate(-50%,-12px);*/
/*    transition:all .3s ease0s;*/
/*}*/
/*.slider .ui-slider-handle .smiley:before, .slider .ui-slider-handle .smiley:after {*/
/*    content:'';*/
/*    width:4px;*/
/*    height:4px;*/
/*    border-radius:50%;*/
/*    background:#000;*/
/*    position:absolute;*/
/*    top:8px;*/
/*}*/
/*.slider .ui-slider-handle .smiley:before {*/
/*    left:7px;*/
/*}*/
/*.slider .ui-slider-handle .smiley:after {*/
/*    right:7px;*/
/*}*/
/*.slider .ui-slider-handle .smiley svg {*/
/*    width:16px;*/
/*    height:7px;*/
/*    position:absolute;*/
/*    left:50%;*/
/*    bottom:5px;*/
/*    margin:0 0 0 -8px;*/
/*}*/
/*.slider .ui-slider-handle .smiley svg path {*/
/*    stroke-width:3.4;*/
/*    stroke:#000;*/
/*    fill:none;*/
/*    stroke-linecap: round;*/
/*}*/
/*.slider .ui-slider-handle.ui-state-active {*/
/*    cursor: grabbing;*/
/*    cursor: -webkit-grabbing;*/
/*    box-shadow:0 4px 12px rgba(0,0,0,0.32);*/
/*}*/
/*.slider .ui-slider-handle.ui-state-active + .text {*/
/*    -webkit-transform: translate(0,-80px);*/
/*    transform: translate(0,-80px);*/
/*    transition: -webkit-transform .3s ease0s;*/
/*    transition: transform .3s ease0s;*/
/*    transition: transform .3s ease0s, -webkit-transform .3s ease0s;*/
/*}*/
/*.slider .ui-slider-handle.ui-state-active .smiley {*/
/*    opacity:1;*/
/*    -webkit-transform: translate(-50%,-12px);*/
/*    transform: translate(-50%,-12px);*/
/*    transition:all .3s ease .1s;*/
/*}*/
/*.slider .text {*/
/*    position:absolute;*/
/*    bottom:100%;*/
/*    left:0;*/
/*    right:0;*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    -webkit-transform: translate(0,-44px);*/
/*    transform: translate(0,-44px);*/
/*    transition: -webkit-transform .3s ease .2s;*/
/*    transition: transform .3s ease .2s;*/
/*    transition: transform .3s ease .2s, -webkit-transform .3s ease .2s;*/
/*    !*font-size:16px;*!*/
/*}*/
/*.slider .text strong {*/
/*    color:#000;*/
/*    font-weight:bold;*/
/*}*/

/*#panel_complete, .bepo-tag-fail, .bepo-tag-success, .first-name-fail, .first-name-success, .last-name-fail, .last-name-success, .email-fail, .email-success, .password-fail, .password-success, .panel1_down, .panel2_down, .panel3_down {*/
/*    display: none;*/
/*}*/

.wrapper {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: #FFF;
    border: 1px solid #D4E0D7;
}

.badge {
    height: 50px;
    background: #58C777;
    width: 200px;
    text-align: center;
    font-size: 20px;
    line-height: 50px;
    font-family: sans-serif;
    color: #FFF;
    transform: rotate(-45deg);
    position: relative;
    top: -2px;
    left: -70px;
    box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 0.34);
}

.badge:after {
    position: absolute;
    content: '';
    display: block;
    height: 100px;
    width: 100px;
    background: #EDF1EE;
    top: -55px;
    left: 130px;
    transform: rotate(-45deg);
    box-shadow: -115px -121px 0px 0px #EDF1EE;
}

.badge .left {
    position: absolute;
    content: '';
    display: block;
    top: 50px;
    left: 25px;
    height: 8px;
    width: 8px;
    background: linear-gradient(135deg, rgba(90, 146, 106, 1) 50%,rgba(90, 146, 106, 0) 50.1%);
}

.badge .right {
    position: absolute;
    content: '';
    display: block;
    top: 50px;
    left: 157px;
    height: 8px;
    width: 8px;
    background: linear-gradient(135deg, rgba(90, 146, 106, 1) 50%,rgba(90, 146, 106, 0) 50.1%);
    transform: rotate(90deg);
}


/*.form-group {*/
/*    margin: 5px auto;*/
/*}*/

/*.form-control {*/
/*    float: left;*/
/*}*/

/*#inputStreet {*/
/*    width: 95%;*/
/*}*/

/*#inputCity {*/
/*    width: 60%;*/
/*}*/

/*#inputState {*/
/*    width: 35%;*/
/*}*/

/*#inputZip {*/
/*    width: 45%;*/
/*}*/

/*#inputPostalCode {*/
/*    width: 45%;*/
/*}*/

/*#inputCounty {*/
/*    width: 45%;*/
/*}*/

/*#inputCountry {*/
/*    width: 50%;*/
/*}*/

/*#address_error{*/
/*    width:100%;*/
/*}*/

/*#inputPhone {*/
/*    width: 45%;*/
/*    float: left;*/
/*}*/

/* Dropdown Button */
.dropbtn {
    background-color: #04AA6D;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

/*!* The search field *!*/
/*#myInput {*/
/*    box-sizing: border-box;*/
/*    background-image: url('searchicon.png');*/
/*    background-position: 14px 12px;*/
/*    background-repeat: no-repeat;*/
/*    font-size: 16px;*/
/*    padding: 14px 20px 12px 45px;*/
/*    border: none;*/
/*    border-bottom: 1px solid #ddd;*/
/*}*/

/*!* The search field when it gets focus/clicked on *!*/
/*#myInput:focus {outline: 3px solid #ddd;}*/

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {

    position: absolute;
    background-color: #f6f6f6;
    min-width: 230px;
    border: 1px solid #ddd;
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

/*.carousel-control-prev-icon {*/
/*    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;*/
/*}*/

/*.carousel-control-next-icon {*/
/*    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;*/
/*}*/

/*.carousel-indicators li {*/
/*    background-color: #000000;*/
/*}*/

/*.qr_code_kit_images {*/
/*    border: 1px solid black;*/
/*    margin:15px;*/
/*    filter: drop-shadow(10px 10px 4px #9c9fa2);*/
/*}*/

/*.profile_type_images {*/
/*    !*border: 1px solid black;*!*/
/*    margin:15px;*/
/*    filter: drop-shadow(10px 10px 4px #9c9fa2);*/
/*}*/

.star-rating {
    /*line-height:12px;*/
    /*font-size:1.15em;*/
    color:gray;
}

.star-rating .fa-star{color: #294DFD;}