/* Responsive */

body{
    padding: 50px 0 0 0;
}

.row{
    margin-left: 0;
    margin-right: 0; 
    padding: 10px;  
}

.row.get-paid-panel {
    padding: 4%;
}

.recommended label{
    width: auto !important;
    margin-right: 20px;
}

.recommended input{
    width: 65% !important;
}

.parental-confirmation-container .formpanel-group.textarea-yourself {
    height: 8em;
    float: left;
    width: 100%;
}

.profile-container .section-container .formpanel.home-address {
    height: auto;
}

.profile-container .formpanel {
    float: left;
    width: 100%;
}

.profile-container .state input, .profile-container .zip input, .profile-container .apt input {
    width: 4em;
}

.profile-container .footer-left,
.profile-container .footer-right{
    margin: 0;
}

.dropdown-menu{
    left: inherit;
    right: 0;
}

.payment-container .edit-current-payment {
    float: right;
    margin-top: 15px;
    margin-left: 0;
}

.payment-container .direct-deposit-info, .debit-card-info{
    float: left;
    width: 100%;
}

.payment-container .formpanel-group {
    width: 100%;
    float: left;
    height: auto;
    padding: 10px 0;
}

.col-xs-6.col-xs-offset-3.avatar-img-box {
    margin-left: 0;
    width: 100%;
}

@media screen and (min-width: 1229px){

    .recommendations-container .col-xs-4,
    .recommendations-container .col-xs-5{
        margin: 0 !important;
        width: 50% !important;
    }

    .payment-container .edit-current-payment {
        margin-top: 40px;
    }
}

@media screen and (max-width: 1200px){

    .payment-container .direct-deposit-info, 
    .payment-container .debit-card-info{
        float: left;
        width: 100%;
    }

    .payment-container .current-payment-info img {
        margin-left: 0;
        margin-bottom: 10px;
    }

    .payment-container .account-number-last4, .account-holder {
        float: left;
        width: 100%;
        padding: 5px 0;
    }

    .payment-container .expirationdate {    
        float: left;
        width: 100%;
        padding: 5px 0 0 0;
    }

    #resendconsent {
        color: #aea69c;
        font-weight: 500;
        margin-left: 4.0em;
    }
}

@media screen and (min-width: 1024px) {

    .profile-container .formpanel-body input{
        width: 69%;
    }

    .profile-container .formpanel-body input.bg_status{
        width: 14em;
    }

    .profile-container .twitter-typeahead{
        /*width: 49%;*/
        width: 57%;
    }

    .step-container .twitter-typeahead{
        /*width: 49%;*/
        width: 54%;
    }

    .profile-container .ui-select-container {
        width: 59%;
    }

    .step-container #school{
        width: 100%;
    }

    .profile-container #school{
        width: 100%;
    }

    .profile-container .state input, .profile-container .zip input, .profile-container .apt input {
        width: 4em;
    }

    .profile-container #streetAddress {
        width: 70%;
    }

    .profile-container .section-container{
        padding: 1em;
    }

    .experience-container .group-sliders label {
        width: 30%;
    }

    .experience-container .form-inline label{
        width: 50%;
        float: left;
    }

    .experience-container .slider.slider-horizontal {
        width: 60%;
    }

    .experience-container .formpanel-group {
        float: left;
        width: 100%;
    }

    .experience-container .form-radios-yesno {
        float: right;
        width: 40%;
        margin: 0 !important;
    }

    .recommendations-container .recommendations-sitter-profile {
        margin: 2em 3em !important;
    }

    .recommendations-container .formpanel-body input {
        width: 75%;
        margin-left: 15px;
    }

    .recommendations-container .recommendations label.control-label {
        width: 3em;
    }

    .recommendations-container .sent-recommendations li{
        width: 100%;
    }

}

@media screen and (min-width: 1024px) and (max-width: 1229px) {

    .profile-container .state input, .profile-container .zip input, .profile-container .apt input {
        width: 3em;
        font-size: 11px;
    }

    .profile-container #streetAddress {
        width: 60%;
        font-size: 11px;
    }

    .recommendations-container .col-xs-4,
    .recommendations-container .col-xs-5{
        width: 100%;
    }

}

@media screen and (min-width: 901px) {


}

@media screen and (max-width: 1024px) {

    .experience-container .slider.slider-horizontal {
        width: 100%;
        margin-left: 0;
    }

    .experience-container .form-radios-yesno {
        margin-left: 0 !important;
        float: left;
    }

    .recommendations-container .col-xs-4,
    .recommendations-container .col-xs-5{
        width: 100%;
    }

    .recommendations-container .formpanel-body input {
        width: 70%;
    }

    .recommendations-container .recommendations label.control-label {
        width: 3em;
    }

    .recommendations-container .sent-recommendations li{
        width: 100%;
    }

}

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

    .profile-container .section-container .col-sm-6{
        width: 100%;
        margin: 0;
    }

    .photoedit-container .col-xs-6.col-xs-offset-3.avatar-img-box {
        margin-left: 0;
        width: 100%;
    }
}

@media screen and (min-width: 768px) and (max-width: 900px) { 

    .recommended .step-container .col-xs-6{
        width: 100%;
        margin: 0;
    }

    .profile-container .formpanel-body input {
        width: 12em;
    }

    .profile-container .state input, .profile-container .zip input, .profile-container .apt input {
        width: 4em;
    }

    .profile-container .nav-sitter a,
    .experience-container  .nav-sitter a,
    .recommendations-container  .nav-sitter a,
    .payment-container .nav-sitter a,
    .photoedit-container .nav-sitter a {
        font-size: 12px;
    }

}

@media(min-width:768px) {

    .profile-container .nav-sitter li,
    .experience-container  .nav-sitter li,
    .recommendations-container  .nav-sitter li,
    .payment-container .nav-sitter li,
    .photoedit-container .nav-sitter li {
        border-bottom: 1px solid #dce4ea;
        height: inherit;
        line-height: 30px;
    } 

    .recommendations-container .recommendations-sitter-profile{
        margin: 0;
    }

}

@media(max-width:768px) {

    .container{
        width: 100%;
    }

    .col-xs-6.col-sm-6.left-column-form, 
    .col-xs-6.col-sm-6.right-column-form{
        padding: 0;
    }

    .footer .footer-left,
    .footer .footer-right,
    .footer .pull-right{
        width: 100%;
        margin: 0;
        text-align: center;
    }

    .footer label{
        float: initial;
    }

    .step-container {
        width: 100%;
        padding: 15px;
    }

    .spritesteps-container{
        width: 100%;
        height: inherit;
    }

    .formpanel-verifyphone{
        max-width: 100%;
    }

    .slider.slider-horizontal {
        width: 100%;
        margin-left: 0;
        float: left;
        margin-bottom: 30px !important;
    }

    .group-sliders.formpanel-group label {
        width: 100%;
    }

    .form-radios-yesno {
        margin-left: 0 !important;
    }

    .recommended #fourth .formpanel-body input, .recommended #last .formpanel-body input{
        width: 11em;
    }

    .recommended .col-xs-6{
        width: 100%;
    }

    .recommended .step-container .col-xs-8, 
    .recommended .step-container .col-xs-6,
    .recommended .step-container .col-xs-4{
        width: 100%;
    }    

    .recommended .step-container .col-xs-offset-2,
    .recommended .step-container .col-xs-offset-1{
        margin-left: 0;
    }

    .parental-confirmation-container .col-xs-6{
        width: 100%;
        margin: 0;
    }

    .recommendations-container .recommendations-sitter-profile{
        margin: 0 0 1em 0;
    }

    .payment-container .direct-deposit-info, 
    .payment-container .debit-card-info{
        padding: 1em;
    }
}

@media(min-width:737px) {

    .verifyphone {
        left: 55%;
        top: 3px
    }

    .profile-container .verifyphone {
        left: 170px;
        top: 3px;
    }

    .left-column-form .formpanel-body label.radio{
        width: 7em;
    } 

    .left-column-form .formpanel-body label{
        width: auto;
        margin-right: 10px;
    }  

    .left-column-form .formpanel-body input{
        width: 70%;
    }

}

@media(max-width:570px) {
   
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, 
    .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, 
    .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, 
    .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, 
    .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, 
    .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, 
    .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, 
    .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, 
    .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, 
    .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, 
    .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, 
    .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{
        padding: 0;
    }

    .col-xs-6.col-sm-6.left-column-form, 
    .col-xs-6.col-sm-6.right-column-form{
        width: 100%;
    }

    /*.section-container {
        padding: 1em;
    }*/

    .btn-primary[disabled], .btn-primary.disabled{
        width: 100%;
    }

    .formpanel-body label{
        width: auto;
        margin-right: 15px;
    }

    .step-buttons a {
        width: 100%;
    }

    .step-buttons {
        padding: 10px;
    }

    .step-buttons .pull-right {
        width: 100%;
    }

    #streetAddress {
        width: 9em;
    }

    .pac-container {
        left: 9% !important;
        width: 81% !important;
    }

    .formpanel-body input {
        width: 13em;
    }

    .state input, .zip input, 
    .apt input {
        width: 5em !important;
    }

    .state label.control-label {
        width: 3em;
    }

    .zip label.control-label, 
    .apt label.control-label {
        width: 1em;
    }

    .verifyphone {
        top: 3px;
        left: 157px;
    }

    .slider.slider-horizontal {
        font-size: 10px;
    }

    .recommended .step-container .col-xs-8, 
    .recommended .step-container .col-xs-6,
    .recommended .step-container .col-xs-4,
    .get-paid-panel .col-xs-6{
        width: 100%;
    }    

    .recommended .step-container .col-xs-offset-2,
    .recommended .step-container .col-xs-offset-1{
        margin-left: 0;
    }

    .sent-to li {
        width: 100%;
    }

    #fourth button, #last button {
        margin-left: 0;
    }

    .checkyouremail .btn {
        width: auto;
    }

    .parental-confirmation-container div.left.img-div{
        margin: 0;
    }

    .parental-confirmation-container .col-xs-10{
        width: 100%;
        margin: 0;
    }

    .parental-confirmation-container .applying-sitter:before{
        display: none;
    }

    #parentalConsentModal .col-xs-8{
        width: 100%;
        margin: 0;
    }

    .step-container .row-hear-about-us {
        padding: 0 2%;
    }

}

    
@media screen and (min-width: 571px) {

    .step-container .row {
        padding: 2%;
    }

    .profile-container .formpanel-body label {
        width: auto;
        margin-right: 15px;
    }

    .profile-container .address label.control-label {
        margin-right: 5px;
    }

    .row-hear-about-us .left-column-form .formpanel-body input {
        width: 40%;
    }

}

@media screen and (min-width: 571px) and (max-width: 736px) { 

    .verifyphone {
        top: 33px;
        left: 80px;
    }

    .profile-container .verifyphone {
        top: 3px;
        left: 140px;
    }

    .city input {
        width: 12em !important;
    }

    .city label.control-label {
        width: 3em;
    }

    .state input, .zip input, .apt input {
        width: 3em;
    }

    .profile-container .formpanel-body input {
        width: 12em;
    }
}

@media(max-width:435px) {

    .spritesteps-container {
        background: transparent;
    }

    .spritesteps {
        margin: 0 30%;
    }

    .parental-confirmation-container .btn-decline,
    .parental-confirmation-container .btn-recommend,
    .parental-confirmation-container .pull-right{
        width: 100%;
    }

    #parentalConsentModal .modal-dialog {
        width: 90%;
    }

    .experience-container .btn-primary {
        width: 100%;
    }

}

@media(max-width:380px) {

    .profile .city{
        margin-top: 20px;
    }

    .profile-container .section-container,
    .experience-container .section-container,
    .recommendations-container .section-container{
        padding: 0;
    }

    .experience-container .slider.slider-horizontal {
        width: 90%;
        margin-left: 15px;
    }

    .recommendations-container .recommendations .btn-back {
        width: 100%;
        margin: 0;
    }

    input[type="range"].cropit-image-zoom-input {
        width: 100%;
    }

    .cropit-preview-image {
        width: 500px;
    }

    .cropit-preview-image-container{
        width: 70% !important;
        height: 70% !important;
    }

    .image-editor {
        margin: 0 3%;
    }

    .photoedit-container .image-editor{
        margin: 0 auto 2em auto;
    }

}

@media screen and (max-width: 768px) {
    .white-section-login .paragraphs-container {
        padding: 0 1em 1em 0;
    }

    .paragraphs-container > ul {
        list-style-type: none;
        padding-left: 0;
    }

    .paragraphs-container > ul > li {
        margin-top: 1em;
    }

    .login-hide-mobile {
        display: none;
    }

    .login-show-mobile {
        display: block;
    }

    .picture-header h1 {
        line-height: 1.4;
        margin-top: 5%;
    }

    .sitter-mobile-login-container,
    .parent-mobile-login-container {
        text-align: center;
    }

    .white-section-login .parent-mobile-login-container h3,
    .white-section-login .sitter-mobile-login-container h3 {
        font-size: 1.4em;
        font-weight: 600;
        text-transform: none;
    }

    .btn-login-fb-mobile {
        background: url('https://s3.amazonaws.com/bambinola/btn-login-fb4.png') no-repeat;
        background-size: cover;
        display: block;
        height: 50px;
        margin: 0 auto;
        width: 156px;
    }

    .white-section-login p.termsofuse {
        color: #999;
        font-size: 0.9em;
        text-align: center;
    }

    .white-section-login p.termsofuse a,
    .white-section-login p.termsofuse a:hover,
    .white-section-login p.termsofuse a:active,
    .white-section-login p.termsofuse a:link {
        color: #777;
        font-size: inherit;
        font-weight: normal;
    }
}

@media screen and (max-width: 480px) {
    .sitter-mobile-login-container,
    .parent-mobile-login-container {
        width: 100%;
    }
}