/*************************************   MOBILE  *****************************/
.save-position, .edit-profile {
    padding: 10px 0 10px 0;
}

@media screen and (min-width: 768px) and (max-width: 1024px)  {
    .header-container {
        position: relative;
        margin: 60px 0px 20px;
    }
   .jumbotron {
        margin: 0 0 20px 0;
        height: 100%;
    }
    .jumbotron .welcome {
        margin: 20px 0 0 0;
        position: relative;
        height: 100%;
    }
    .jumbotron .container {
        height: 100%;
    }
    .profile-picture-container {
        height: 100%;
    }
    .jumbotron .welcome .profile-picture {
        top: 30px;
        background-repeat: no-repeat;
        float: left; 
        height: 165px;  
        width: 165px;
        background-size: 165px 165px; 
        margin: 0 10px 0 0;
    }
    .jumbotron .welcome .profile-picture #profileImage {
        height: 165px;
    }
    .jumbotron .welcome .profile-picture-container .button-container {
        position: absolute;
        top: 200px;
    }
    .picture-container2 {
        height: 165px;
        width: 165px;
    }
    .jumbotron .welcome .profile-info {
        float: left;
        padding: 0;
        height: 100%;
    }
    .jumbotron .welcome .profile-info h2 {
        font-size: 40px;
        font-family: 'Raleway', sans-serif;
        font-weight: 800;
    }
    .jumbotron .welcome .profile-info .panel {
        width: auto;
        margin-top: 10px;
    }
    .jumbotron .welcome .profile-info .panel .profile-message-text {
        font-size: 15px;
        line-height: 20px;
    }
    .jumbotron-menu-mobile, .profileimage-menu-mobile, .profilemessage-menu-mobile {
        
    }
    .jumbotron-menu-mobile li:first-child, .profileimage-menu-mobile li:first-child, .profilemessage-menu-mobile li:first-child {
        padding-top: 10px;
    }
    .jumbotron-menu-mobile li, .profileimage-menu-mobile li, .profilemessage-menu-mobile li {
        padding: 0 0 15px 0;
    }
    .jumbotron-submenu-mobile li, .profileimage-submenu-mobile li, .profilemessage-submenu-mobile li {
        list-style-type: none !important;
    }
    .jumbotron-menu-mobile:hover .jumbotron-submenu-mobile,
    .profileimage-menu-mobile:hover .profileimage-submenu-mobile,
    .profilemessage-menu-mobile:hover .profilemessage-submenu-mobile {
        list-style-type: none;
        position: absolute;
        display: block !important;
        width:130px;
        padding: 10px 10px 10px 20px;
        
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffff00+0,f0ad4e+100 */
        background: #ffff00; /* Old browsers */
        background: -moz-linear-gradient(top,  #ffff00 0%, #f0ad4e 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  #ffff00 0%,#f0ad4e 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  #ffff00 0%,#f0ad4e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff00', endColorstr='#f0ad4e',GradientType=0 ); /* IE6-9 */
            
    }
    .jumbotron-submenu-mobile li, .profileimage-submenu-mobile li, .profilemessage-submenu-mobile li {
        list-style-type: none !important;
    }
    #txtProfileFirstName, #txtProfileLastName, #txtProfileUserName {
        width: 100px;
    }
    .profile-message-text {
        line-height: 20px;
    }
    .show-full-profile {
        font-size: 15px !important;
        display: none;
    }
    .profileForm {
        width: 100%;
    }
    .profile-info .editActive .tox-tinymce {
        height: 350px !important;
        border-radius: 5px;
    }
    .blog .tox-tinymce {
        height: 65vh !important;
        border-radius: 5px;
    }
    .blog-row .blog-column {
        height: 85vh !important;
    }
    
    .editActive {
        z-index: 1;
        width: 100%;
        padding: 0px 20px 20px;
        top: 25px;
        height: auto;
        position: absolute;
        /*background: transparent url(../img/profile-bg.png) repeat scroll 0% 0%; */
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    .upload-form {
        margin-top: 90px;
        width: 100%;
    }
    .left-section {
        top: 10px;
    }
    .left-section {
        top: 10px;
    }
    .navbar {
        z-index: 4;
        max-height: none;
    }
    .dw-fname {
        font-size: 30px;
    }
    .dw-lname {
        font-size: 30px;
    }
    body {
        font-size: 12px;
    }
    .panel-title,
    .btn {
        font-size: 12px;
    }
    .navbar-brand {
        display: none;
    }
    #loginForm label {
        text-align: left;
    }
    .controls1, .controls2, .controls3 {
        top: -15px;
    }
    .view-blog-title {
        width: auto !important;
    }
    .view-blog-body {
        width: auto !important;
        padding: 0 10px 20px 10px !important;
    }
    .navbar-collapse {
        max-height: none;
    }

    .ui-popup-container {
        top: 80px !important;
    }
    
    #txtProfileFirstName,
    #txtProfileLastName {
        height: 20px !important;
        font-size: 15px;
        overflow-y: auto;
    }
    #txtProfileMessage {
        height: 70px !important;
        font-size: 15px;
        overflow-y: auto;
    }
    .login {
        margin: 20px 0 20px 0;
    }
}

@media screen and (min-width: 600px) and (max-width: 767px)  {
    .header-container {
        position: relative;
        margin: 60px 0px 20px;
    }
    .jumbotron {
        margin: 0 0 20px 0;
        height: 100%;
    }
    .jumbotron .welcome {
        margin: 20px 0 0 0;
        position: relative;
    }
    .jumbotron .welcome .profile-picture {
        top: 30px;
        background-repeat: no-repeat;
        float: left; 
        height: 165px;  
        width: 165px;
        background-size: 165px 165px; 
        margin: 0 10px 0 0;
    }
    .jumbotron .welcome .profile-picture #profileImage {
        height: 165px;  
    }
    .picture-container2 {
        height: 165px;
        width: 165px;
    }
    .jumbotron .welcome .profile-info {
        float: left;
        padding: 0;
        width: 64vw;
    }
    .jumbotron .welcome .profile-info h2 {
        font-size: 40px;
        font-family: 'Raleway', sans-serif;
        font-weight: 800;
    }
    .jumbotron .welcome .profile-info .panel {
        width: auto;
        margin-top: 10px;
    }
    .jumbotron .welcome .profile-info .panel .profile-message-text {
        font-size: 15px;
        line-height: 20px;
    }
    .jumbotron-menu-mobile, .profileimage-menu-mobile, .profilemessage-menu-mobile {
        display: block !important;
    }
    .jumbotron-submenu-mobile li, .profileimage-submenu-mobile li, .profilemessage-submenu-mobile li {
        list-style-type: none !important;
    }
    .jumbotron-submenu-mobile, .profileimage-submenu-mobile, .profilemessage-submenu-mobile {
        display: block !important;
    }
    #txtProfileFirstName, #txtProfileLastName, #txtProfileUserName {
        width: 100px;
    }
    .container > .navbar-collapse {
        max-height: 300px !important;
        overflow-y: auto;    
    }
    .show-full-profile {
        font-size: 15px !important;
        display: none;
    }
    .profileForm {
        width: 100%;
    }
    .editActive {
        width: auto;
        padding: 0px 20px 20px;
        top: 27px;
        position: absolute;
        /*background: transparent url("../img/profile-bg.png") repeat scroll 0% 0%;*/
        left: -176px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;        
        height: 100vh
    }
    .editActive .tox-tinymce {
        height: 65vh !important;
        border-radius: 5px;
    }
    .upload-form {
        margin-top: 90px;
        width: 100%;
    }
    .left-section {
        top: 10px;
    }
    .left-section {
        top: 10px;
    }
    .navbar {
        z-index: 4;
        max-height: none;
    }
    .dw-fname {
        font-size: 30px;
    }
    .dw-lname {
        font-size: 30px;
    }
    body {
        font-size: 12px;
    }
    .panel-title,
    .btn {
        font-size: 12px;
    }
    .navbar-brand {
        display: none;
    }
    #loginForm label {
        text-align: left;
    }
    .controls1, .controls2, .controls3 {
        /*display: none !important;*/
        left: -176px;
        width: initial;
    }
    .controls1-container, .controls3-container {
        width: 100%;
        height: 45px;
        position: absolute;
        top: -18px;
    }
    .view-blog-title {
        width: auto !important;
    }
    .view-blog-body {
        width: auto !important;
        padding: 0 10px 20px 10px !important;
    }
    .navbar-collapse {
        max-height: none;
    }
    .login {
        margin: 20px 0 20px 0;
    }
    .edit-list {
        position: relative;
        border-radius: 5px;
    }
}


@media screen and (min-width: 480px) and (max-width: 599px)  {
    .header-container {
        position: relative;
        margin: 60px 0px 20px;
    }
    .jumbotron {
        margin: 0 0 20px 0;
        height: 100%;
    }
    .jumbotron .welcome {
        position: relative;
        margin: 20px 0 0 0;
    }
    .jumbotron .welcome .profile-picture {
        top: 30px;
        background-repeat: no-repeat;
        float: left;
        height: 124px;  
        width: 124px;
        background-size: 124px 124px; 
        margin: 0 10px 0 0;
    }
    .jumbotron .welcome .profile-picture #profileImage {
        height: 124px;  
    }
    .picture-container2 {
        height: 124px;
        width: 124px;
    }
    .jumbotron .welcome .profile-info {
        float: left;
        padding: 0;
    }
    .jumbotron .welcome .profile-info h2 {
        font-size: 30px;
        font-family: 'Raleway', sans-serif;
        font-weight: 800;
    }
    .jumbotron .welcome .profile-info .panel {
        width: auto;
        margin-top: 10px;
    }
    .jumbotron .welcome .profile-info .panel .profile-message-text {
        font-size: 15px;
        line-height: 20px;
    }
    .jumbotron-menu-mobile, .profileimage-menu-mobile, .profilemessage-menu-mobile {
        display: block !important;
    }
    .jumbotron-submenu-mobile li, .profileimage-submenu-mobile li, .profilemessage-submenu-mobile li {
        list-style-type: none !important;
    }
    .jumbotron-submenu-mobile, .profileimage-submenu-mobile, .profilemessage-submenu-mobile {
        display: block !important;
    }
    #txtProfileFirstName, #txtProfileLastName, #txtProfileUserName {
        width: 100px;
    }
    .show-full-profile {
        font-size: 12px !important;
        display: none;
    }
    .container > .navbar-collapse {
        max-height: 300px !important;
        overflow-y: auto;    
    }
    .profile-info .editActive .tox-tinymce {
        height: 38vh !important;
        border-radius: 5px;
    }
    .blog .tox-tinymce {
        height: 65vh !important;
        border-radius: 5px;
    }
    .blog-row .blog-column {
        height: 85vh !important;
    }
    .editActive {
        z-index: 1;
        width: 100%;
        padding: 0px 20px 20px;
        top: -80px;
        height: 62vh;
        position: absolute;
        /*background: transparent url(../img/profile-bg.png) repeat scroll 0% 0%; */
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    .upload-form {
        margin-top: 90px;
        width: 100%;
    }
    .left-section {
        top: 10px;
    }
    .navbar {
        z-index: 4;
        max-height: none;
    }
    .dw-fname {
        font-size: 25px;
    }
    .dw-lname {
        font-size: 25px;
    }
    body {
        font-size: 12px;
    }
    .panel-title,
    .btn {
        font-size: 12px;
    }
    .navbar-brand {
        display: none;
    }
    #loginForm label {
        text-align: left;
    }
    .controls1, .controls2, .controls3 {
        display: none !important;
    }
    .view-blog-title {
        width: auto !important;
        font-size: 40px;
    }
    .view-blog-body {
        width: auto !important;
        padding: 0 10px 20px 10px !important;
    }
    .navbar-collapse {
        max-height: none;
    }
    .login {
        margin: 20px 0 20px 0;
    }
    .edit-list {
        position: relative;
        border-radius: 5px;
    }
}


@media screen and (max-width: 479px) {
    .header-container {
        position: relative;
        margin: 60px 0px 20px;
    }
    .jumbotron {
        margin: 0 0 20px 0;
        height: 100%;
    }
    .jumbotron .welcome {
        position: relative;
        margin: 0 0 0 0;
    }
    .jumbotron .welcome .profile-picture {
        top: 30px;
        background-repeat: no-repeat;
        height: 93px;  
        width: 93px;
        background-size: 93px 93px;
        
        margin: 0 auto;  
        position: absolute;
        left:0;
        right: 0;
    }
    .jumbotron .welcome .profile-picture #profileImage {
        height: 93px;  
        margin-right: 10px;
    }
    .jumbotron .welcome .profile-picture-container {
        position: relative;
    }
    .jumbotron .welcome .profile-picture-container .button-container {
        text-align: center;
        top: 90px;
    }
    .picture-container2 {
        height: 93px;
        width: 93px;
    }
    .jumbotron .welcome .profile-info {
        padding: 0;
        width: auto;
        top: 110px;
    }
    .jumbotron .welcome .profile-info h2 {
        font-size: 20px;
        font-family: 'Raleway', sans-serif;
        font-weight: 800;
        text-align: center;
    }
    .jumbotron .welcome .profile-info .panel {
        width: auto;
        margin-top: 10px;
    }
    .jumbotron .welcome .profile-info .panel .profile-message-text {
        font-size: 15px;
        line-height: 20px;
    }
    .jumbotron-menu-mobile, .profileimage-menu-mobile, .profilemessage-menu-mobile {
        display: block !important;
    }
    .jumbotron-submenu-mobile li, .profileimage-submenu-mobile li, .profilemessage-submenu-mobile li {
        list-style-type: none !important;
    }
    .jumbotron-submenu-mobile, .profileimage-submenu-mobile, .profilemessage-submenu-mobile {
        display: block !important;
    }
    #txtProfileFirstName, #txtProfileLastName, #txtProfileUserName {
        width: 100px;
    }
    .container > .navbar-collapse {
        max-height: 300px !important;
        overflow-y: auto;    
    }
    .show-full-profile {
        font-size: 12px !important;
        display: none;
    }
    .controls1-container, .controls3-container {
        width: 100%;
        height: 45px;
        position: absolute;
        top: -109px;
    }
    .profile-name {

        width: 100% !important;
    }
    .profile-info .editActive .tox-tinymce {
        height: 365px !important;
        border-radius: 5px;
    }
    .blog .tox-tinymce {
        height: 65vh !important;
        border-radius: 5px;
    }
    .blog-row .blog-column {
        height: 85vh !important;
    }
    .editActive {
        z-index: 1;
        width: 100%;
        padding: 0px 20px 20px;
        top: -66px;
        height: 410px;
        position: absolute;
        /*background: transparent url(../img/profile-bg.png) repeat scroll 0% 0%; */
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    .upload-form {
        margin-top: 90px;
        width: 100%;
    }
    .left-section {
        top: 10px;
    }
    .navbar {
        z-index: 4;
        max-height: none;
    }
    .dw-fname {
        font-size: 25px;
    }
    .dw-lname {
        font-size: 25px;
    }
    body {
        font-size: 12px;
    }
    .panel-title,
    .btn {
        font-size: 12px;
    }
    .child-panel {
        padding: 0 0 0 0;
    }
    .rating {
        display: block;
    }
    .navbar-brand {
        display: none;
    }
    #loginForm label {
        text-align: left;
    }
    .tools-divider ul li a {
        font-size: 10px;
    }
    .controls1, .controls2, .controls3 {
        /*display: none !important;*/
    }
    .view-blog-title {
        width: auto !important;
        font-size: 20px;
        padding: 20px 0 0 0 !important;
    }
    .view-blog-body {
        width: auto !important;
        padding: 0 10px 20px 10px !important;
    }
    .navbar-collapse {
        max-height: none;
    }
    .login {
        margin: 20px 0 20px 0;
    }
    .edit-list {
        position: relative;
        border-radius: 5px;
    }
}


/* Screen max 320 */
@media screen and (max-width: 320px) {
    .header-container {
        position: relative;
        margin: 60px 0px 20px;
    }
    .jumbotron {
        margin: 0 0 20px 0;
        height: 100%;
    }
    .jumbotron .welcome {
        position: relative;
        margin: 0 0 0 0;
    }
    .jumbotron .welcome .profile-picture {
        top: 30px;
        background-repeat: no-repeat;
        height: 93px;  
        width: 93px;
        background-size: 93px 93px;
        
        margin: 0 auto;  
        position: absolute;
        left:0;
        right: 0;
    }
    .jumbotron .welcome .profile-picture #profileImage {
        height: 93px;  
        margin-right: 10px;
    }
    .jumbotron .welcome .profile-picture-container {
        position: relative;
    }
    .jumbotron .welcome .profile-picture-container .button-container {
        text-align: center;
        top: 90px;
    }
    #txtProfileFirstName, #txtProfileLastName, #txtProfileUserName {
        width: 100px;
    }
    .picture-container2 {
        height: 93px;
        width: 93px;
    }
    .jumbotron .welcome .profile-info {
        padding: 0;
        width: auto;
        top: 110px;
    }
    .jumbotron .welcome .profile-info h2 {
        font-size: 20px;
        font-family: 'Raleway', sans-serif;
        font-weight: 800;
        text-align: center;
    }
    .jumbotron .welcome .profile-info .panel {
        width: auto;
        margin-top: 10px;
    }
    .jumbotron .welcome .profile-info .panel .profile-message-text {
        font-size: 13px;
        line-height: 18px;
    }
    .jumbotron-menu-mobile, .profileimage-menu-mobile, .profilemessage-menu-mobile {
        display: block !important;
    }
    .jumbotron-submenu-mobile li, .profileimage-submenu-mobile li, .profilemessage-submenu-mobile li {
        list-style-type: none !important;
    }
    .jumbotron-submenu-mobile, .profileimage-submenu-mobile, .profilemessage-submenu-mobile {
        display: block !important;
    }
    .show-full-profile {
        font-size: 12px !important;
        display: none;
    }
    .container > .navbar-collapse {
        max-height: 300px !important;
        overflow-y: auto;    
    }
    .profile-info .editActive .tox-tinymce {
        height: 38vh !important;
        border-radius: 5px;
    }
    .blog .tox-tinymce {
        height: 65vh !important;
        border-radius: 5px;
    }
    .blog-row .blog-column {
        height: 85vh !important;
    }
    .editActive {
        z-index: 1;
        width: 100%;
        padding: 0px 20px 20px;
        top: -80px;
        height: 62vh;
        position: absolute;
        /*background: transparent url(../img/profile-bg.png) repeat scroll 0% 0%; */
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    .upload-form {
        margin-top: 90px;
        width: 100%;
    }
    .left-section {
        top: 10px;
    }
    .navbar {
        z-index: 4;
        max-height: none;
    }
    .dw-fname {
        font-size: 25px;
    }
    .dw-lname {
        font-size: 25px;
    }
    body {
        font-size: 12px;
    }
    .panel-title,
    .btn {
        font-size: 12px;
    }
    .child-panel {
        padding: 0 0 0 0;
    }
    .rating {
        display: block;
    }
    .navbar-brand {
        display: none;
    }
    #loginForm label {
        text-align: left;
    }
    .tools-divider ul li a {
        font-size: 10px;
    }
    .controls1, .controls2, .controls3 {
        display: none !important;
    }
    .view-blog-title {
        width: auto !important;
        font-size: 20px;
        padding: 20px 0 0 0 !important;
    }
    .view-blog-body {
        width: auto !important;
        padding: 0 10px 20px 10px !important;
    }
    .navbar-collapse {
        max-height: none;
    }
    .login {
        margin: 20px 0 20px 0;
    }
    .edit-list {
        position: relative;
        border-radius: 5px;
    }
}