/*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */
    @media only screen and (min-width : 320px) {
      .profile-avatar{   
          bottom: 0px;
      }
      .profile-content{
      }
      .profile-name{
        font-size: 2em;
        color: #FFFFFF;
      }
      .profile-username{
        font-size: 0.5em;
        color: #FFFFFF;
      }
      .vert-center{
        display: flex;
        align-items: center;
      }
      .avatar{
        width: 175px;
        height: 175px;
        z-index: 2;
      }
      .profile-image{
        z-index: 3;
        bottom: -90px;
        position: absolute;
        border: 10px solid #1b1b1b;
        border-radius: 10px;
      }
      .menu-bar{
        position: absolute;
        background-color: #1b1b1b;
        height: auto;
        width: 100%
      }
      .menu-bar-box{
        display: inline-block;
        line-height: 1;
        padding: 10px;
      }
      .profile-user-desc{
        position: absolute;
        background-color: #FFFFFF;
        height: auto;
        width: 100%;
        padding-top: 10px;
      }
      .vert-center-horiz{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .user-question-number{
        font-size: 1.5em;
        color: #FFFFFF;
        padding-left: 5px;
      }
      .user-question{
        font-size: 1.2em;
        color: #FFFFFF;
      }
      .profile-recent-questions{
        margin-top: 20px;
      }
      .two-option-img-one{
        position: absolute;
        clip: rect(0px,174px,200px,110px);
        margin-left:-110px;
      }
      .two-option-img-two{
        position: absolute;
        clip: rect(0px,174px,200px,110px);
        margin-left:-46px;
      }
      .three-option-img-one{
        position: absolute;
        clip: rect(0px,190px,200px,110px);
        margin-left:-110px;
      }
      .three-option-img-two{
        position: absolute;
        clip: rect(0px,190px,200px,110px);
        margin-left:-41px;
      }
      .three-option-img-three{
        position: absolute;
        clip: rect(0px,190px,200px,110px);
        margin-left: 29px;
      }
      .four-option-img-one{
        position: absolute;
        clip: rect(0px,168px,200px,110px);
        margin-left: -110px;
      }
      .four-option-img-two{
        position: absolute;
        clip: rect(0px,168px,200px,110px);
        margin-left: -57px;
      }
      .four-option-img-three{
        position: absolute;
        clip: rect(0px,168px,200px,110px);
        margin-left: -2px;
      }
      .four-option-img-four{
        position: absolute;
        clip: rect(0px,168px,200px,110px);
        margin-left: 53px;
      }
      .five-option-img-one{
        position: absolute;
        clip: rect(0px,156px,200px,110px);
        margin-left: -110px;
      }
      .five-option-img-two{
        position: absolute;
        clip: rect(0px,156px,200px,110px);
        margin-left: -65px;
      }
      .five-option-img-three{
        position: absolute;
        clip: rect(0px,156px,200px,110px);
        margin-left: -20px;
      }
      .five-option-img-four{
        position: absolute;
        clip: rect(0px,156px,200px,110px);
        margin-left: 25px;
      }
      .five-option-img-five{
        position: absolute;
        clip: rect(0px,156px,200px,110px);
        margin-left: 70px;
      }
    }

    /* Extra Small Devices, Phones */
    @media only screen and (min-width : 480px) {
        .profile-avatar{
            bottom: 0px;
        }
      .profile-content{

      }
    .profile-cover-img{
            height: 200px  !important;
        }
      .profile-name{
        font-size: 1em;
        color: #FFFFFF;
      }
      .profile-username{
        font-size: 0.5em;
        color: #FFFFFF;
      }
      .vert-center{
        display: flex;
        align-items: center;
      }
      .avatar{
        width: 175px;
        height: 175px;
        z-index: 2;
      }
      .profile-image{
        z-index: 3;
        bottom: -75px;
        position: absolute;
        border: 7.5px solid #1b1b1b;
        border-radius: 7.5px;
      }
      .menu-bar{
        position: absolute;
        background-color: #1b1b1b;
        height: auto;
        width: 100%
      }
      .menu-bar-box{
        display: inline-block;
        line-height: 1;
        padding: 10px;
      }
      .profile-user-desc{
        position: absolute;
        background-color: #FFFFFF;
        height: auto;
        width: 100%;
        padding-top: 10px;
      }
      .vert-center-horiz{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .user-question-number{
        font-size: 1.5em;
        color: #FFFFFF;
        padding-left: 5px;
      }
      .user-question{
        font-size: 1.2em;
        color: #FFFFFF;
      }
      .profile-recent-questions{
        margin-top: 20px;
      }
      .two-option-img-one{
        position: absolute;
        clip: rect(0px,200px,200px,110px);
        margin-left:-110px;
      }
      .two-option-img-two{
        position: absolute;
        clip: rect(0px,200px,200px,110px);
        margin-left:-25px;
      }
      .three-option-img-one{
        position: absolute;
        clip: rect(0px,168px,200px,110px);
        margin-left:-110px;
      }
      .three-option-img-two{
        position: absolute;
        clip: rect(0px,169px,200px,110px);
        margin-left:-51px;
      }
      .three-option-img-three{
        position: absolute;
        clip: rect(0px,168px,200px,110px);
        margin-left: 6px;
      }
      .four-option-img-one{
        position: absolute;
        clip: rect(0px,154px,200px,110px);
        margin-left: -110px;
      }
      .four-option-img-two{
        position: absolute;
        clip: rect(0px,154px,200px,110px);
        margin-left: -68px;
      }
      .four-option-img-three{
        position: absolute;
        clip: rect(0px,154px,200px,110px);
        margin-left: -24px;
      }
      .four-option-img-four{
        position: absolute;
        clip: rect(0px,154px,200px,110px);
        margin-left: 20px;
      }
      .five-option-img-one{
        position: absolute;
        clip: rect(0px,150px,200px,110px);
        margin-left: -110px;
      }
      .five-option-img-two{
        position: absolute;
        clip: rect(0px,150px,200px,110px);
        margin-left: -70px;
      }
      .five-option-img-three{
        position: absolute;
        clip: rect(0px,150px,200px,110px);
        margin-left: -45px;
      }
      .five-option-img-four{
        position: absolute;
        clip: rect(0px,150px,200px,110px);
        margin-left: -10px;
      }
      .five-option-img-five{
        position: absolute;
        clip: rect(0px,150px,200px,110px);
        margin-left: 25px;
      }
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
        .profile-avatar{
            bottom: 0px;
        }
      .profile-content{
      }
      .profile-name{
        font-size: 1.5em;
        color: #FFFFFF;
      }
      .profile-username{
        font-size: 1em;
        color: #FFFFFF;
      }
      .vert-center{
        display: flex;
        align-items: center;
      }
      .avatar{
        width: 175px;
        height: 175px;
        z-index: 2;
      }
      .profile-image{
        z-index: 3;
        bottom: -75px;
        position: absolute;
        border: 7.5px solid #1b1b1b;
        border-radius: 7.5px;
      }
      .menu-bar{
        position: absolute;
        background-color: #1b1b1b;
        height: auto;
        width: 100%
      }
      .menu-bar-box{
        display: inline-block;
        line-height: 1;
        padding: 10px;
      }
      .profile-user-desc{
        position: absolute;
        background-color: #FFFFFF;
        height: auto;
        width: 100%;
        padding-top: 10px;
      }
      .vert-center-horiz{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .user-question-number{
        font-size: 1.5em;
        color: #FFFFFF;
        padding-left: 5px;
      }
      .user-question{
        font-size: 1.2em;
        color: #FFFFFF;
      }
      .profile-recent-questions{
        margin-top: 20px;
      }

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
        .profile-avatar{
            bottom: 0px;
            margin-left: 20px;
            height: 250px !important;
            width: 250px !important;
        }
      .profile-content{
      }
      .profile-name{
        font-size: 1.2em;
        color: #FFFFFF;
      }
      .profile-username{
        font-size: 0.75em;
        color: #FFFFFF;
      }
      .vert-center{
        display: flex;
        align-items: center;
      }
      .avatar{
        width: 175px;
        height: 175px;
        z-index: 2;
      }
      .profile-image{
        z-index: 3;
        bottom: -65px;
        position: absolute;
        border: 7.5px solid #1b1b1b;
        border-radius: 7.5px;
      }
      .menu-bar{
        position: absolute;
        background-color: #1b1b1b;
        height: auto;
        width: 100%
      }
      .menu-bar-box{
        display: inline-block;
        line-height: 1;
        padding: 10px;
      }
      .profile-user-desc{
        position: absolute;
        background-color: #FFFFFF;
        height: auto;
        width: 100%;
        padding-top: 10px;
      }
      .vert-center-horiz{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .user-question-number{
        font-size: 1.5em;
        color: #FFFFFF;
        padding-left: 5px;
      }
      .user-question{
        font-size: 1.2em;
        color: #FFFFFF;
      }
      .profile-recent-questions{
        margin-top: 20px;
      }
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
        .profile-avatar{
            bottom: 0px;
            margin-left: 0px;
            height: 250px !important;
            width: 250px !important;
        }
      .profile-content{
        padding-top: 160px;
          zoom 1;
      }
      .profile-cover{
        width: 100%;
        height: 400px;
         overflow: hidden;
      }
        .profile-cover-img{
            height: 400px !important;
        }
      .profile-cover > img {
        position: relative;
        width: 100%;
        top: 30%;
        margin-top: -20%;
       }
      .profile-name{
        font-size: 1.5em;
        color: #FFFFFF;
      }
      .profile-username{
        font-size: 1em;
        color: #FFFFFF;
      }
      .vert-center{
        display: flex;
        align-items: center;
      }
      .avatar{
        width: 175px;
        height: 175px;
        z-index: 2;
      }
      .profile-image{
        z-index: 3;
        position: absolute;
        border: 7.5px solid #1b1b1b;
        border-radius: 7.5px;
      }
      .menu-bar{
        position: absolute;
        background-color: #1b1b1b;
        height: auto;
        width: 100%
      }
      .menu-bar-box{
        display: inline-block;
        line-height: 1;
        padding: 10px;
      }
      .profile-user-desc{
        position: absolute;
        background-color: #FFFFFF;
        height: auto;
        width: 100%;
        padding-top: 10px;
      }
      .vert-center-horiz{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .user-question-number{
        font-size: 1.5em;
        color: #FFFFFF;
        padding-left: 5px;
      }
      .user-question{
        font-size: 1.2em;
        color: #FFFFFF;
      }
      .profile-recent-questions{
        margin-top: 20px;
      }
      input unconnect { display: none; }
      input:hover .connected { display: none; }
      input:hover .unconnect { display: inline; }
        .row.make-columns {column-count: 2 !important; -moz-column-count: 2 !important;}

    }



    /*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {
        .profile-avatar{
            bottom: 0px;
            margin-left: 0px;
            height: 200px !important;
            width: 200px !important;
        }
      .profile-content{
        padding-top: 160px;
      }
      .profile-cover-img{
        height: 400px !important;
      }
      .profile-name{
        font-size: 1.5em;
        color: #FFFFFF;
      }
      .profile-username{
        font-size: 1em;
        color: #FFFFFF;
      }
      .vert-center{
        display: flex;
        align-items: center;
      }
      .avatar{
        width: 175px;
        height: 175px;
        z-index: 2;
      }
      .profile-image{
        z-index: 3;
        bottom: -85px;
        position: absolute;
        border: 7.5px solid #1b1b1b;
        border-radius: 7.5px;
      }
      .menu-bar{
        position: absolute;
        background-color: #1b1b1b;
        height: auto;
        width: 100%;
      }
      .menu-bar-box{
        display: inline-block;
        line-height: 1;
        padding: 10px;
        min-height: 71px !important;
      }
      .profile-user-desc{
        position: absolute;
        background-color: #FFFFFF;
        height: auto;
        width: 100%;
        padding-top: 10px;
      }
      .vert-center-horiz{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .user-question-number{
        font-size: 1.5em;
        color: #FFFFFF;
        padding-left: 5px;
      }
      .user-question{
        font-size: 1.2em;
        color: #FFFFFF;
      }
      .profile-recent-questions{
        margin-top: 20px;
      }
    .row.make-columns {column-count: 2 !important; -moz-column-count: 2 !important;}

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
        .profile-avatar{
            bottom: 0px;
            margin-left: 0px !important;
        }
      .profile-content{
          padding-top: 0px;
      }
        .profile-cover-img{
            height: 300px  !important;
        }
      .profile-name{
        font-size: 1.2em;
        color: #FFFFFF;
      }
      .profile-username{
        font-size: 0.75em;
        color: #FFFFFF;
      }
      .vert-center{
        display: flex;
        align-items: center;
      }
      .avatar{
        width: 175px;
        height: 175px;
        z-index: 2;
      }
      .profile-image{
        z-index: 3;
        bottom: -80px;
        position: absolute;
        border: 7.5px solid #1b1b1b;
        border-radius: 7.5px;
      }
      .menu-bar{
        position: absolute;
        background-color: #1b1b1b;
        min-height: 56px !important;
        height: auto;
        width: 100%
      }
      .menu-bar-box{
        display: inline-block;
        line-height: 1;
        padding: 10px;
      }
      .profile-user-desc{
        position: absolute;
        background-color: #FFFFFF;
        height: auto;
        width: 100%;
        padding-top: 10px;
      }
      .vert-center-horiz{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .user-question-number{
        font-size: 1.5em;
        color: #FFFFFF;
        padding-left: 5px;
      }
      .user-question{
        font-size: 1.2em;
        color: #FFFFFF;
      }
      .profile-recent-questions{
        margin-top: 20px;
      }

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
        .profile-avatar{
            bottom: 0px;
            margin-left: 30px;
            height: 200px !important;
            width: 200px !important;
        }
      .profile-content{
      }
        .profile-cover-img{
            height: 300px  !important;
        }
      .profile-name{
        font-size: 1.3em;
        color: #FFFFFF;
      }
      .profile-username{
        font-size: 0.75em;
        color: #FFFFFF;
      }
      .vert-center{
        display: flex;
        align-items: center;
      }
      .avatar{
        width: 175px;
        height: 175px;
        z-index: 2;
      }
      .profile-image{
        z-index: 3;
        bottom: -80px;
        position: absolute;
        border: 7.5px solid #1b1b1b;
        border-radius: 7.5px;
      }
      .menu-bar{
        position: absolute;
        background-color: #1b1b1b;
        height: auto;
        width: 100%
      }
      .menu-bar-box{
        display: inline-block;
        line-height: 1;
        padding: 10px;
      }
      .profile-user-desc{
        position: absolute;
        background-color: #FFFFFF;
        height: auto;
        width: 100%;
        padding-top: 10px;
      }
      .vert-center-horiz{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .user-question-number{
        font-size: 1.3em;
        color: #FFFFFF;
        padding-left: 5px;
      }
      .user-question{
        font-size: 1em;
        color: #FFFFFF;
      }
      .profile-recent-questions{
        margin-top: 20px;
      }

    }

    /* Extra Small Devices, Phones */
    @media only screen and (max-width : 480px) {
        .profile-avatar{
            bottom: 0px;
            height: 150px !important;
            width: 150px !important;
        }
      .profile-content{
        padding-top: 0px;
      }
        .profile-cover-img{
            height: 150px !important;
        }
      .profile-cover{
        width: 100%;
        height: 150px;
         overflow: hidden;
      }
      .profile-cover > img {
        position: relative;
        width: 100%;
        top: 30%;
        margin-top: -20%;
       }
      .profile-name{
        font-size: 1.3em;
        color: #FFFFFF;
      }
      .profile-username{
        font-size: 0.75em;
        color: #FFFFFF;
      }
      .vert-center{
        display: flex;
        align-items: center;
      }
      .avatar{
        width: 175px;
        height: 175px;
        z-index: 2;
      }
      .profile-image{
        z-index: 3;
        bottom: -80px;
        position: absolute;
        border: 7.5px solid #1b1b1b;
        border-radius: 7.5px;
      }
      .menu-bar{
        position: absolute;
        background-color: #1b1b1b;
        height: auto;
        width: 100%
      }
      .menu-bar-box{
        display: inline-block;
        line-height: 1;
        padding: 10px;
      }
      .profile-user-desc{
        position: absolute;
        background-color: #FFFFFF;
        height: auto;
        width: 100%;
        padding-top: 10px;
      }
      .vert-center-horiz{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .user-question-number{
        font-size: 1.2em;
        color: #FFFFFF;
        padding-left: 5px;
      }
      .user-question{
        font-size: 1em;
        color: #FFFFFF;
      }
      .profile-recent-questions{
        margin-top: 20px;
      }
    }

    /* Custom, iPhone Retina */
    @media only screen and (max-width : 320px) {
        .profile-avatar{
            bottom: 0px;
            height: 150px !important;
            width: 150px !important;
        }
      .profile-content{
      }
      .profile-name{
        font-size: 2em;
        color: #FFFFFF;
      }
      .profile-username{
        font-size: 0.5em;
        color: #FFFFFF;
      }
      .vert-center{
        display: flex;
        align-items: center;
      }
      .avatar{
        width: 175px;
        height: 175px;
        z-index: 2;
      }
      .profile-image{
        z-index: 3;
        bottom: -90px;
        position: absolute;
        border: 10px solid #1b1b1b;
        border-radius: 10px;
      }
      .menu-bar{
        position: absolute;
        background-color: #1b1b1b;
        height: auto;
        min-height: 100px;
        width: 100%
      }
      .menu-bar-box{
        display: inline-block;
        line-height: 1;
        padding: 10px;
      }
      .profile-user-desc{
        position: absolute;
        background-color: #FFFFFF;
        height: auto;
        width: 100%;
        padding-top: 10px;
      }
      .vert-center-horiz{
        display: flex;
        align-items: center;

      }
      .user-question-number{
        font-size: 1.5em;
        color: #FFFFFF;
        padding-left: 5px;
      }
      .user-question{
        font-size: 1.2em;
        color: #FFFFFF;
      }
      .profile-recent-questions{
        margin-top: 20px;
      }
      .two-option-img-one{
        position: absolute;
        clip: rect(0px,220px,200px,110px);
        margin-left:-110px;
      }
      .two-option-img-two{
        position: absolute;
        clip: rect(0px,220px,200px,110px);
        margin-left:0px;
      }
      .three-option-img-one{
        position: absolute;
        clip: rect(0px,190px,200px,110px);
        margin-left:-110px;
      }
      .three-option-img-two{
        position: absolute;
        clip: rect(0px,190px,200px,110px);
        margin-left:-41px;
      }
      .three-option-img-three{
        position: absolute;
        clip: rect(0px,190px,200px,110px);
        margin-left: 29px;
      }
      .four-option-img-one{
        position: absolute;
        clip: rect(0px,168px,200px,110px);
        margin-left: -110px;
      }
      .four-option-img-two{
        position: absolute;
        clip: rect(0px,168px,200px,110px);
        margin-left: -57px;
      }
      .four-option-img-three{
        position: absolute;
        clip: rect(0px,168px,200px,110px);
        margin-left: -2px;
      }
      .four-option-img-four{
        position: absolute;
        clip: rect(0px,168px,200px,110px);
        margin-left: 53px;
      }
      .five-option-img-one{
        position: absolute;
        clip: rect(0px,156px,200px,110px);
        margin-left: -110px;
      }
      .five-option-img-two{
        position: absolute;
        clip: rect(0px,156px,200px,110px);
        margin-left: -65px;
      }
      .five-option-img-three{
        position: absolute;
        clip: rect(0px,156px,200px,110px);
        margin-left: -20px;
      }
      .five-option-img-four{
        position: absolute;
        clip: rect(0px,156px,200px,110px);
        margin-left: 25px;
      }
      .five-option-img-five{
        position: absolute;
        clip: rect(0px,156px,200px,110px);
        margin-left: 70px;
      }

    }
.profile-nav-items{
    font-size: 1.5em;
    color: #fff !important;
}
.profile-user-info{
    font-size: 15px;
}
.profile-nav-items a{
    background-color: #1b1b1b !important;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}
.avatar{
    height: auto !important;
    width: auto !important;
}