@media screen and (min-width: 320px) and (max-width: 768px){
    .navbar .navbar-toggle {
        position: relative;
        width:34px;
        height: 34px;
        padding: 9px 5px;
        border-color:transparent;
        background-color: transparent;
        z-index: 1;
        display: block;
    }

    .navbar-mobile-title {
        margin-top: 70px;
        text-align: center;
    }
}

@media screen and (min-width:770px){
    .navbar .navbar-header{
        padding-left:15px;
    }

    .navbar .navbar-toggle {
        position: relative;
        width:34px;
        height: 34px;
        padding: 9px 5px;
        border-color:transparent;
        background-color: transparent;
    }

    .navbar .navbar-toggle:hover {
        border-color:transparent;
        background-color: transparent;
    }

    .navbar-mobile {
        display: none;
    }

    .navbar-desktop {
        width: 100% !important;
        margin-top: 7px;
    }

    .navbar-header .navbar-brand {
        display: none;
    }
}

@media screen and (min-width: 320px) and (max-width: 768px){
    #user-profile-form {
        margin-top: 20px;
    }

    #user-configuration-form {
        margin-top: 20px;
    }

    .side-collapse {
        top:0px;
        bottom:0;
        right:0px;
        width: 100%;
        position:fixed;
        overflow:hidden;
        transition: .4s;
        -webkit-transition: .4s;
        -moz-transition: .4s;
        z-index: 1000;
        overflow-y: auto;
    }

    .side-collapse.in {
        right: 2500px;
    }

    .side-collapse .navbar-toggle {
        padding-left: 20px;
    }

    .side-collapse .navbar-collapse {
        top: 15px;
        display: block;
    }

    .navbar-desktop {
        display: none;
    }

    .navbar-mobile-menu {
        margin-left: 40px;
    }

    .link-navbar-mobile {
        text-decoration: none;
        color: #232627;
    }

    .link-navbar-mobile:hover {
        color: #009641;
    }

    .navbar-nav > li > a{
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .navbar-nav>li>a:hover {
        background-color: transparent;
    }

    #footer-mobile {
        background-color: #FFF;
        text-align: center;
        position: relative;
        bottom: 0;
        right: 0;
        left: 0;
        padding: 16px;
    }

    #footer-mobile > a{
        text-decoration: none;
        color: #009641;
        font-weight: bold;
    }

    #footer-mobile > a:hover{
        color: #232627;
    }
}

@media screen and (min-width: 320px) and (max-width: 768px){
    .menu-profile {
        display: none;
    }
}

@media (min-width: 360px){
    #landing-container {
        margin-top: 0;
    }
    .landing-content {
        margin-top: 127px;
    }
    #login-container {
        margin-top: 0;
    }
    .login-content {
        margin-top: 0;
    }
    #register-container {
        margin-top: 25px;
    }
    .btn-position-top {
        margin-top: 20px;
    }
    .btn-position-bottom {
        margin-bottom: 20px;
    }
    a.arrow-link {
        color: #FFF;
        margin-top: -22px;
    }
    #confirmation-account-email-sent-container {
        margin-top: 50px;
    }
    #users-register-form {
        margin-top: 20px;
    }
    #reset-password-container {
        margin-top: 50px;
    }
    #reset-password-container p {
        margin-top: 80px;
    }
    #reset-password-email-sent-container {
        margin-top: 50px;
    }
    #change-password-container {
        margin-top: 50px;
    }
}

@media (min-width: 767px){
    #landing-container {
        margin-top: -3px;
    }
    .landing-content {
        margin-top: 130px;
    }
    #login-container {
        margin-top: -3px;
    }
    .login-content {
        margin-top: 0;
    }
    #register-container {
        margin-top: 25px;
    }
    .btn-position-top {
        margin-top: 20px;
    }
    .btn-position-bottom {
        margin-bottom: 20px;
    }
    a.arrow-link {
        color: #FFF;
        margin-top: -22px;
    }
    #confirmation-account-email-sent-container {
        margin-top: 25px;
    }
    #users-register-form {
        margin-top: 80px;
    }
    #reset-password-container {
        margin-top: 25px;
    }
    #reset-password-container p {
        margin-top: 80px;
    }
    #reset-password-email-sent-container {
        margin-top: 25px;
    }
    #change-password-container {
        margin-top: 25px;
    }
}

@media (min-width: 768px){
    #user-profile-form {
        margin-top: 20px;
    }

    #user-configuration-form {
        margin-top: 20px;
    }
}

/* Smartphones (portrait and landscape) */
@media screen and (min-width : 320px) and (max-width : 480px) {
    body.public-layout {
        background-image: url('/images/screen/375x667_device_iPhone6.png');
    }
}

/* iPads (portrait and landscape) */
@media screen and (min-width : 768px) and (max-width : 1024px) {
    body.public-layout {
        background-image: url('/images/screen/1024x768_device_iPad.png');
    }
}

/* Middle screens */
@media screen and (min-width: 720px) and (max-width: 1280px) {
    body.public-layout {
        background-image: url('/images/screen/1280x720_device_middle.png');
    }
}

/* Desktops and laptops */
@media screen and (min-width : 1224px) {
    body.public-layout {
        background-image: url('/images/screen/1280x800_device_middle.png');
    }
}

/* Large screens */
@media screen and (min-width : 1324px) {
    body.public-layout {
        background-image: url('/images/screen/1400x900_device_big.png');
    }
}

/*iPhone 6 Portrait*/
@media screen and (min-width: 375px) and (max-width: 667px) and (orientation : portrait) {
    body.public-layout {
        background-image: url('/images/screen/375x667_device_iPhone6.png');
    }
}

/*iPhone 6 landscape*/
@media screen and (min-width: 375px) and (max-width: 667px) and (orientation : landscape) {
    body.public-layout {
        background-image: url('/images/screen/375x667_device_iPhone6.png');
    }
}

/*iPhone 6+ Portrait*/
@media screen and (min-width: 414px) and (max-width: 736px) and (orientation : portrait) {
    body.public-layout {
        background-image: url('/images/screen/414x736_device_iPhone6Plus.png');
    }
}

/*iPhone 6+ landscape*/
@media screen and (min-width: 414px) and (max-width: 736px) and (orientation : landscape) {
    body.public-layout {
        background-image: url('/images/screen/414x736_device_iPhone6Plus.png');
    }
}