/**
 * Responsive breakpoint:
 * - flex-based content area
 * - navigation on another row
 */

@media (max-width: 1039px) {
    body, html {
        min-width: 0 !important;
    }

    .header-container {
        height: auto;
        background-position: top center;
    }

    .header-container .pull-left,
    .header-container .pull-right {
        float: none;
    }

    .navigation:before,
    .navigation:after {
        clear: both;
        display: table;
        content: "";
    }

    .navigation {
        margin-top: 20px;
        margin-left: 0px;
        margin-bottom: 10px;
    }

    .navigation a {
        height: auto;
    }

    .hero-unit {
        display: none;
    }

    .hero-unit-logged {
        display: block;
        height: auto !important;
        min-height: 50px;
    }


    .container,
    .container-full,
    .plus-services-container {
        width: 100%;
    }

    .container-full,
    .plus-services-container,
    .full-container {
        margin-left: 0px;
        border-right: 0px;
    }

    .container-half,
    .container-half-left,
    .container-half-right,
    .register-left,
    .register-right {
        box-sizing: border-box;
        width: 50%;
        margin-left: 0px;
    }

    .main-container .row-fluid {
        display: flex;
        flex-direction: row;
    }

    .main-container .row-fluid .content-left-container,
    .main-container .row-fluid .content-main-container {
        float: none;
        box-sizing: border-box;
    }

    .main-container .row-fluid .full-container {
        flex: 0 1 auto;
    }

    .main-container .row-fluid .content-left-container {
        flex: 0 1 25%;
    }

    .main-container .row-fluid .content-main-container {
        flex: 0 1 75%;
    }

    /** content area styles */
    .content-left-title, .content-blue-title, .content-main-title {
        min-height: 41px;
        padding-bottom: 9px;
        height: auto;
    }

    .content-left-title,
    .content-blue-title {
        background-repeat: repeat-x;
        background-color: #0C3754;
    }

    .content-main-title {
        background-repeat: repeat-x;
        background-color: #3C3D41;   
    }

    /**
     * guides
     */
    
    .guides-list .guide-block {
        width: 50%;
        box-sizing: border-box;
        margin-left: 0px;
        padding-left: 55px;
        height: auto;
    }

    .guide img {
        max-width: 100%;
    }

    .infotext,
    .infotext-half,
    .error-half,
    .error {
        width: auto;
    }


    /**
     * forms
     */
    
    .application-form {
        float: none;
    }
    
    .form-block {
        padding-left: 40px;
        padding-right: 40px;
        box-sizing: border-box;
        float: none;
    }

    .form-block strong,
    .form-block div,
    .form-block input,
    .form-block select,
    .form-block span.invalid {
        min-width: 0px;
        margin-left: 0px;
        margin-right: 0px;
        width: 50%;
        box-sizing: border-box;
    }

    .register-left {
        padding-left: 20px;
        padding-right: 20px;
    }

    .register-left .register-row span,
    .register-left .register-row input {
        width: 50%;
        margin-left: 0px;
        margin-right: 0px;
        box-sizing: border-box;
    }

    .form-block input,
    .form-block select,
    .register-row input {
        height: 30px;
    }

    .form-block input[type="submit"],
    .form-block input[type="checkbox"] {
        width: auto;
    }

    .form-block div.full-width,
    .register-left .register-row .full-width {
        /*float: none;*/
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }

    .form-block div.form-group {
        width: 100%;
    }

    .form-block div.clearfix {
        height: 0px;
        min-height: 0px;
        float: none;
        display: block !important;
    }

    .form-block div.send-form {
        width: 100%;
        /*float: none;*/
    }

    .form-block .info,
    .form-block span.invalid {
        margin-left: 50%;
        min-width: 0px;
        width: 50%;
    }

    .form-block h2,
    .form-block textarea {
        margin-left: 0px;
        margin-right: 0px;
        width: 100%;
        /*float: none;*/
        box-sizing: border-box;
    }

    .form-block textarea {
        height: 80px;
    }

    .register-right {
        padding-left: 20px;
    }

    .register-row {
        height: auto;
        min-height: 55px;
    }

    .form-block:before,
    .form-block:after,
    .register-row:before,
    .register-row:before {
        clear: both;
        display: table;
        content: "";
    }

    .register-row .captcha-container {
        margin-left: 0px !important;
    }
}

/**
 * hide star from content left title
 */
@media (max-width: 939px) {
    .content-left-title img,
    .content-blue-title img,
    .content-main-title img {
        display: none;
    }

    .title-container span {
        float: none;
        display: block;
    }
}

/**
 * Mobile header slogan, hide star from content left title
 * Oma Arkku actions
 */

@media (max-width: 899px) {
    .header-lower .container .row-fluid .span6:first-child {
        display: none;
    }

    .header-lower .container .row-fluid .header-login {
        margin-left: 0px;
        width: 100%;
        text-align: center;
        float: none;
    }

    .header-lower .container .row-fluid .header-login a {
        margin-left: 0px;
        display: inline-block;
        float: none;
    }

    .title-actions {
        display: block;
        margin-top: -10px;
        margin-bottom: 10px;
    }

    .title-actions:before,
    .title-actions:after {
        clear: both;
        display: table;
        content: "";
    }

    .title-actions .title-action {
        float: none;
    }

    /**
     * service equal heights
     */
    
    .service-primary-description {
        min-height: 140px;
    }
}

/**
 * Smaller nav breakpoint, stacked content, flex tables
 */

@media (max-width: 729px) {
     .navigation a {
        padding-left: 10px;
        padding-right: 13px;
    }

    .container-half,
    .container-half-left,
    .container-half-right,
    .plus-services-container,
    .container-full,
    .register-left {
        width: 100%;
        float: none;
        border-left: 0px;
        border-right: 0px;
    }

    .register-right {
        display: none;
    }

    .main-container .span3,
    .main-container .span9,
    .main-container .span2,
    .main-container .span10
     {
        width: 100%;
        float: none;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .main-container .row-fluid {
        flex-direction: column;
    }

    .main-container .row-fluid .content-left-container,
    .main-container .row-fluid .content-main-container {
        width: 100%;
    }

    .main-container .row-fluid .content-left-container {
        order: 2;
        border-left: 0;
        border-right: 0;
    }

    .main-container .row-fluid .content-main-container {
        order: 1;
        border-left: 0;
        margin-left: 0;
    }


    .main-container.front-page .row-fluid .content-main-container,
    .main-container.terms .row-fluid .content-main-container {
        order: 2;
    }

    .main-container.front-page .row-fluid .content-left-container,
    .main-container.terms .row-fluid .content-left-container {
        order: 1;
    }

    /**
     * front page: hide forums and news content and author
     */
    
    .content-news--front {
        display: none;
    }

    .title-news--front .news-author {
        display: none;
    }
    
    .content-left-forum {
        display: none !important;
    }

    .table-flex,
    .table-flex tbody {
        display: block;
    }

    .table-flex thead {
        display: none;
    }

    .table-flex tr {
        display: flex;
        flex-direction: column;
    }

    .table-flex tr.hide {
        display: none;
    }

    .table-flex tr:not(:last-child) {
        padding-bottom: 5px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 5px;
    }

    .table-flex td {
        flex: 0 0 auto;
        border: 0px;
    }

    .table-flex td.flex-hide {
        display: none;
    }

    .table-flex td.flex-bold {
        font-weight: bold;
    }

    /**
     * service list: hide table
     */
    
    .plus-services-properties {
        display: none;
    }

    .service-primary-description {
        min-height: 0px;
    }

    /**
     * forms: hide details;
     */
    
    .service-form-icon,
    .service-details {
        display: none !important;
    }

    /** helper */
    .hide-stacked {
        display: none !important;
    }

}

/**
 * Stacked nav breakpoint
 * Login modal
 */

@media (max-width: 599px) {
    .hamburger {
        display: block !important;
        position: absolute;
        top: 5px;
        right: 0px;
    }

    .hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {
        background-color: #fff !important;
    }

    .logo {
        margin-top: 10px;
    }

    .navigation {
        margin: 0px;
        box-sizing: border-box;
        max-height: 0px;
        transition: all 0.5s ease-in;
        overflow: hidden;
    }

    .navigation li {
        float: none;
        list-style-type: none;
        background-image: none;
    }

    .navigation.menu-mobile--open {
        max-height: 300px;
    }

    .navigation a {
        padding-left: 30px;
        border-top: 1px solid #fff;
        height: auto;
    }

    /**
     * stacker hero text
     */
    
    .hero-text-section {
        display: block;
    }

    .hero-unit-logged-text {
        margin-bottom: 10px;
    }

    .guides-list .guide-block {
        width: 100%;
        float: none;
        padding-left: 20px;
        padding-right: 20px;
    }

    #login-box {
        width: 90%;
        margin-left: 0px;
        left: 5%;
        height: auto;
        top: 50%;
        transform: translateY(-50%);
        padding-bottom: 20px;
        box-sizing: border-box;
    }

    #login-box img {
        display: none;
    }

    #login-title {
        width: 100%;
        box-sizing: border-box;
    }

    #login-form {
        margin-left: 0px;
        width: 100%;
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/**
 * Smaller breakpoint:
 * - Footer styles
 * - form elements one by row
 */

@media (max-width: 499px) {
    .footer .span3 {
        float: none;
        height: auto;
        width: auto;
        background-image: none;
        box-sizing: content-box;
    }

    .footer .span3 > a,
    .footer-row .span3 strong {
        box-sizing: border-box;
        margin-left: 0px;
        padding-left: 20px;
    }


    .footer .span3:not(:last-child) {
        margin-bottom: 0px;
    }

    .footer-row .span3 a.h, .footer-row .span4 a.h, .footer-row .span2 a.h {
        width: initial;
        float: none;
    }

    .form-block strong,
    .form-block div,
    .form-block input,
    .form-block select,
    .form-block .info,
    .form-block span.invalid,
    .register-left .register-row span,
    .register-left .register-row input {
        margin-left: 0px;
        width: 100%;
    }

    .form-block input,
    .register-left .register-row input {
        margin-top: 5px;
    }

    .form-block .hide-xs {
        display: none;
    }

    #login-form .input-small {
        height: 28px;
    }

    #login-form .input-small,
    #login-form button {
        width: 100% !important;
        display: block;
        margin-bottom: 10px;
        box-sizing: border-box;
    }
}

/**
 * Header buttons scale to responsive
 * Vhost table hide 3rd col
 */
@media (max-width: 359px) {
    .header-login .button1,
    .header-login .button2 {
        padding-left: 16px;
        padding-right: 16px;
        background-position: 50% 0%;
        width: auto;
    }

    .header-login .hide-xs {
        display: none;
    }

    .vhost-table td:nth-child(3),
    .vhost-table th:nth-child(3) {
        display: none;
    }

    .form-block {
        padding-left: 20px;
        padding-right: 20px;
    }
}