/* Navigation */

.menu-button {
    position: absolute;
    z-index: 1000;
    margin: 1em;
    top: 0;
    left: 0;
    padding: 0;
    width: 2.5em;
    height: 2.25em;
    text-indent: 2.5em;
    font-size: 1.5em;
    color: transparent;
    background: transparent;
    border: none;
}

.menu-button::before {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    bottom: 0.5em;
    left: 0.5em;
    background: linear-gradient(#fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%);
    content: '';
}

.menu-button:hover {
    opacity: 0.6;
}

.menu-wrap {
    display: none;
    z-index: 101;
    background: white;
    position: fixed;
    height: 100%;
    left: -200px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.menu-side a {
    display: block;
    padding: 20px 50px 20px 25px;
    font-size: 19px;
}
.menu-side span {
    margin-right: 10px;
}

.black-screen{
    width: 100%;
    height: 100%;
    background: black;
    position: fixed;
    background: rgba(0,0,0,0.6);
    z-index: 10;
    display: none;
    overflow: scroll;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {

}

/* Smartphones (landscape) ----------- */
@media only screen
    and (min-device-width : 361px)
and (max-device-width : 1040px) {
    body {
        min-width: 610px;
    }
    .header-links {
        display: none;
    }
    #open-button {
        display: block;
    }
    .row {
        margin-left: 0;
        margin-right: 0;
    }
    .container:first-child{
        /*width: 90%;*/
    }
    .header .container {
        text-align: center;
    }
    .header .container .header-logo {
        padding: 0;
    }
    .bottom-nav li, .bottom-nav li a {
        width: 100%;
    }
    .bottom-nav li a{
        padding: 20px 0;
        background: none;
    }

    #footer_bottom, .form {
        position: relative;
        padding: 0;
    }
    .wrapper {
        display: none;
    }

    #content h2 {
        text-align: center;
    }
    .header {
        background: url('/images/smartcloud/intro-bg.jpg') no-repeat center center scroll;
    }

    .navbar-nav, .navbar-nav li, #contact-form #ContactForm_verifyCode_em_ {
        margin: 0;
    }
    .eldes_login a {
        display: block !important;
        margin: 10px auto;
    }
    #ContactForm_email, #ContactForm_subject, .margin textarea{
        width: 100%;
    }
    #contact-form .button {
        margin: 20px auto 0 auto;
        display: block;
    }
    #contact-form .verify_block {

    }
    #contact-form .verifyInput {
        padding: 0px 0px 0px 10px;
        margin: 20px auto 0 auto;
        width: 100%;
        height: 50px;
        color: #787878;
    }
    #contact-form #ContactForm_verifyCode_em_{
    }
    #yw1_button{
        background: #4294a3;
        display: block;
        border: 0;
        text-transform: uppercase;
        color: #FFFFFF;
        font-size: 25px;
        font-family: 'Titillium Web', sans-serif;
        text-align: center;
        width: 250px;
        padding: 7.5px;
        margin: 0 auto;
    }
    .demo-links{
        margin-bottom: 0;
    }
    .intro{
        overflow-x:hidden;
    }
    .eldes_help, .profile_dropdown {
        display: none;
    }
    .manage_devices{
        text-align: center;
    }
    .manage_devices a {
        margin: 0 0 10px 0;
    }
    .manage_block {
        margin: 0;
    }

    .tabs {
        padding: 0;
        margin-top: 50px;
    }
    .add_device{
        margin: 20px 0 0 15px;
    }
    .create-device-block {
        margin: 0;
    }

    .float-none{
        float: none !important;
    }

    /* Devices */
    .inf_text table {
        font-size: 11px;
        width: 90%;
    }
    .device-info{
        padding-left: 0;
    }
    .add_top_up_code .top_up_code, .buy_top_up_code .buy_code{
        font-size: 11px;
    }
    a.top_up_code {
        margin-bottom: 20px;
    }
    .device_name ul{
        overflow: hidden;
    }
    .device_name ul li {
        font-size: 28px;
        width: 273px;
    }
    .head_top .col-md-3 {
        width: auto!important;
        float: none !important;
    }
    .head_top .col-md-6 {
        width: 100%;
    }
    .buy_code span {
        padding: 2px 10px 5px 35px;
    }
    .connection-box {
        padding: 0;
        margin: 0;
        display: inline-block;
    }
    .connection-box label {
        float: none !important;
        margin: 20px 0 20px 20px;
    }
    .button_delete, a.button_migrate, .device_controls{
        float:none;
    }
    #device-form{
        margin: 0;
    }
    #migrate-button{
        display: block;
        margin-bottom: 20px;
    }
    .device_controls li {
        display: block !important;
        margin-bottom: 10px !important;
    }
    #btn_config_sync {
        margin: 15px 0;
    }
    .container .configuration .control-group {
        margin-left: 10px;
    }
    .configuration input[name="GatesConfigMainForm[PSW]"], .configuration input[name="GatesConfigMainForm[IPP]"], .configuration select {
        width: 260px !important;
    }
    #btn_loadsettings_main_load, #btn_loadsettings_inout_load {
        display: block;
        margin: 20px auto;
    }
    .usersDatabase input[type="text"] {
        width: 95%!important;
    }
    table.inout td select, table.inout td input[type="text"] {
        width: 100% !important;
    }
    #gatesconfig-device-usersdatabase-grid .filter-container input[type="text"]{
        width: 360px!important;
    }
    div.form_actions span {
        display: block;
    }
    .form_actions {
        text-align: center;
        margin: 0 !important;
        float: none !important;
    }
    #gatesconfig-device-usersdatabase-grid {
        overflow: auto;
    }
    .form {
        padding: 0;
    }
    .gate-toolbar .btn-group a, #btn_getlog {
        margin: 10px 0;
    }
    .right_block {
        padding: 0 !important;
    }
    #GatesConfigSchedulersForm_startTime1, #GatesConfigSchedulersForm_endTime1 {
        width: 225px !important;
    }
    #btn_force_sync {
        margin-left: 20px;
    }

    .block {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    .eldes_login {
        width: 100%;
    }
    .bottom-menu-links .container {
        background: none;
    }
    .title br {
        display: none;
    }
    .title {
        margin: 11px 0 !important;
    }
    .controls .main .col-md-5, .controls .main .col-md-2 {
        float: none;
    }
    .hidden-xs {
        display: block !important;
    }
    .main {
        height: auto !important;
    }
    .col .list {
        height: 200px !important;
    }
    .partitionTab {
        float: none;
        text-align: left;
    }
    .partitionTab>div{
        display: inline-block;
    }
    .controlsList>div {
        min-width: 50px;
    }
    .form_actions .btn {
        width: 100%;
        margin: 10px 0;
    }
    table.inout, #profile-form .margin input, #changepassword-form .margin input {
        width: 90%;
    }
    #profile-form .btn, #changepassword-form .btn {
        margin: 0;
    }
    .button_cancel, .button{
        margin: 10px 0 !important;
        width: 100% !important;
    }
    .device_block .col-md-5 {
        float: none;!important;
        width: 100%;
    }
    .head_top .col-md-4{
        width: auto;
        float: none;
    }
    .main .col-md-2 {
        width: auto;
    }
    .loader {
        display: none;
    }
    .tab_ss, .tab_gates {
        display: inline-block;
    }
    a.add_device {
        float: none;
    }
    .manage_block h2 {
        padding: 10px 0px 20px 0px !important;
    }
    .button_save {
        margin-left: 15px !important;
    }
    .manage_block .col-md-6 {
        float: none !important;
    }
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-device-width : 360px) {
    body {
        min-width: 360px;
    }
    .header-links {
        display: none;
    }
    #open-button {
        display: block;
    }
    .header-logo img {
        width: 175px;
    }
    .device_block {
        padding: 0;
    }
    .device_block .details {
        padding-left: 0;
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }
    .container {
        width: 360px;
    }
    .header .container {
        text-align: center;
    }
    .header .container .header-logo {
        padding: 0;
    }
    .bottom-nav li, .bottom-nav li a {
        width: 100%;
    }
    .bottom-nav li a{
        padding: 20px 0;
        background: none;
    }

    #footer_bottom, .form {
        position: relative;
        padding: 0;
    }
    .wrapper {
        display: none;
    }

    #content h2 {
        text-align: center;
    }
    .header {
        background: url('/images/smartcloud/intro-bg.jpg') no-repeat center center scroll;
    }


    .navbar-nav, .navbar-nav li, #contact-form #ContactForm_verifyCode_em_ {
        margin: 0;
    }
    .eldes_login a {
        display: block !important;
        margin: 10px auto;
    }
    #ContactForm_email, #ContactForm_subject, .margin textarea{
        width: 100%;
    }
    #contact-form .button {
        margin: 20px auto 0 auto;
        display: block;
    }
    #contact-form .verify_block {

    }
    #contact-form .verifyInput {
        padding: 0px 0px 0px 10px;
        margin: 20px auto 0 auto;
        width: 100%;
        height: 50px;
        color: #787878;
    }
    #contact-form #ContactForm_verifyCode_em_{
    }
    #yw1_button{
        background: #4294a3;
        display: block;
        border: 0;
        text-transform: uppercase;
        color: #FFFFFF;
        font-size: 25px;
        font-family: 'Titillium Web', sans-serif;
        text-align: center;
        width: 250px;
        padding: 7.5px;
        margin: 0 auto;
    }
    .demo-links{
        margin-bottom: 0;
    }
    .intro{
        overflow-x:hidden;
    }
    .eldes_help, .profile_dropdown {
        display: none;
    }
    .manage_devices{
        text-align: center;
    }
    .manage_block {
        margin: 0;
    }

    .tabs {
        padding: 0;
        margin-top: 50px;
    }
    .add_device{
        float: none !important;
        margin: 20px 0 0 15px;
    }
    .create-device-block {
        margin: 0;
    }

    .float-none{
        float: none !important;
    }

    /* Devices */
    .inf_text table {
        font-size: 11px;
        width: 90%;
    }
    .device-info{
        padding-left: 0;
    }
    .add_top_up_code .top_up_code, .buy_top_up_code .buy_code{
        font-size: 11px;
    }
    a.top_up_code {
        margin-bottom: 20px;
    }
    .device_name ul{
        overflow: hidden;
    }
    .device_name ul li {
        font-size: 28px;
        width: 273px;
    }
    .buy_code span {
        padding: 2px 10px 5px 35px;
    }
    .connection-box {
        padding: 0;
        margin: 0;
        display: inline-block;
    }
    .connection-box label {
        float: none !important;
        margin: 20px 0 20px 20px;
    }
    .button_delete, a.button_migrate, .device_controls{
        float:none;
    }
    #device-form{
        margin: 0;
    }
    #migrate-button{
        display: block;
        margin-bottom: 20px;
    }
    .device_controls li {
        display: block !important;
        margin-bottom: 10px !important;
    }
    #btn_config_sync {
        margin: 15px 0;
    }
    .container .configuration .control-group {
        margin-left: 10px;
    }
    .configuration input[name="GatesConfigMainForm[PSW]"], .configuration input[name="GatesConfigMainForm[IPP]"], .configuration select {
        width: 260px !important;
    }
    #btn_loadsettings_main_load, #btn_loadsettings_inout_load {
        display: block;
        margin: 20px auto;
    }
    .usersDatabase input[type="text"] {
        width: 95%!important;
    }
    table.inout td select, table.inout td input[type="text"] {
        width: 100%!important;
    }
    #gatesconfig-device-usersdatabase-grid .filter-container input[type="text"]{
        width: 360px!important;
    }
    div.form_actions span {
        display: block;
    }
    .form_actions {
        text-align: center;
        margin: 0 !important;
        float: none !important;
    }
    #gatesconfig-device-usersdatabase-grid {
        overflow: auto;
    }
    .form {
        padding: 0;
    }
    .gate-toolbar .btn-group a, #btn_getlog {
        margin: 10px 0;
    }
    .right_block {
        padding: 0 !important;
    }
    #GatesConfigSchedulersForm_startTime1, #GatesConfigSchedulersForm_endTime1 {
        width: 225px !important;
    }
    #btn_force_sync {
        margin-left: 0;
    }
    .block {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    .bottom-menu-links .container {
        background: none;
    }
    .title {
        padding: 10px 0px 0px 30px;
    }
    .title br {
        display: none;
    }
    .controls .main .col-md-5, .controls .main .col-md-2 {
        float: none;
    }
    .hidden-xs {
        display: block !important;
    }
    .main {
        height: auto !important;
    }
    .col .list {
        height: 200px !important;
    }
    .partitionTab {
        float: none;
        text-align: left;
    }
    .partitionTab>div{
        display: inline-block;

    }
    .controlsList>div {
        min-width: 50px;
    }
    .buy_top_up_code_gate {
        margin-bottom: 20px;
    }
    .form_actions .btn {
        width: 100%;
        margin: 10px 0;
    }
    table.inout, #profile-form .margin input, #changepassword-form .margin input {
        width: 90%;
    }
    #profile-form .btn, #changepassword-form .btn {
        margin: 0;
    }
    .welcome a {
        float: none !important;
        position: relative;
    }
    .loader {
        display: none;
    }
    .update_block {
        margin: 0;
    }
    .button_save {
        margin-left: 15px !important;
    }
    #manage-administrators .button_cancel, #manage-administrators .button {
        margin: 10px 0 !important;
        width: 100% !important;
    }
    .col-md-8 .form {
        padding: 0 !important;
    }
    .grid{
        overflow: scroll;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
    /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
    /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
    /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
    /* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
    /* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
}