@media screen and (max-width: 1422px) {

    div#twocol-main {
        width: 60%;
    }

    #main {
        width: 100%;
    }

    .next-question-button {
        width: 99px !important;
        margin-left: -25px;
    }
}


@media screen and (max-width: 985px) {

    #page #wrapper {
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }

    div#twocol-main {
        width: 100%;
    }

    #formResumePopUp {
        height: auto;
        width: 72%;
    }

    .tf-dialog-content {
        height: 100%
    }

    .tf-dialog-box {
        left: 47%
    }

   /* .change-button,
    .change-button:focus {
        margin-left: -85%;
    }*/

    div#header {
        width: 100% !important;
        padding: 0px;
    }

    div#subheader {
        padding-bottom: 0px;
    }

    .pagination-stepmenu ul li.stepmenu-item-active a.active,
    .pagination-stepmenu ul li.stepmenu-item-activeanswered a.activeanswered {
        display: none;
    }

    div.responsive-pagination,
    div.pagination-content {
        border: none;
        margin-top: 10px;
    }

    body .pagination-stepmenu a.next-step,
    body .pagination-stepmenu a.previous-step {
        position:relative;
    }

    body .pagination-stepmenu a.previous-step {
        left: 0px !important;
    }
}
@media screen and (max-width: 600px) {

    .header,
    .subheader {
        font-size: 20px
    }

    .pagination-stepmenu {
    width:235px;
    }


    #main {
        font-size: 14px;
    }

    .FormTitle {
        font-size: 30px;
        word-wrap: break-word;
    }

    h1 {
        font-size: 30px;
        font-weight: 600;
    }

    h2 {
        font-size: 25px;
        font-weight: 600;
    }

    h3 {
        font-size: 20px;
        font-weight: 600;
    }

    .tbl-header {
        font-size: 20px!important;
    }

    table tbody tr td:nth-child(2) {
        font-size: 14px;
    }

    table tbody tr td:nth-child(1) {
        font-size: 14px;
    }

    #formResumePopUp {
        height: auto;
        width: 75%;
    }

    .tf-dialog-box {
        left: 45%
    }

    #formResumeBox input[type="text"] {
        width: 200px !important;
        font-size: 14px;
    }

    #formResumeBox input[type="submit"] {
    width: 100%;
    }

    .tf-dialog-content {
    padding: 20px 20px 70px 20px;
    }

    .StepTitle {
        font-size: 16px;
    }

    div#header {
        width:100%!important;
        padding:0px;
    }

    a.logo-container {
        margin: 15px 0px 0px 0px;
    }

    #header a img {
        width: 130px;
        height: auto;
    }

    ul#header-link {
     width:150px;
     position:relative;
     
    }


    #header-link li {
        width: 110px;
        font-size: 14px;
        padding: 0px;
    }


    .label-active,
    .label-passive,
    .labelactiveweb,
    .text,
    .passive-text,
    .textsmall,
    .title,
    .requiredmessage,
    .introdescription-head,
    .introdescription-head3,
    .introdescription-info,
    .information,
    .grijs,
    .alert-message {
        width: 100% !important;
        font-size:14px;
    }

    div.tf-question-wrapper div.tf-label-wrapper,
    div.tf-question-wrapper div.tf-control-wrapper,
    div.tf-question-wrapper fieldset legend {
        width: 100%;
    }

    div.tf-question-wrapper fieldset legend {
        height: auto;
        display: block;
    }

    div.tf-control-wrapper fieldset > div {
        width: 100%;
        margin-left: 0;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="month"],
    input[type="week"],
    input[type="number"],
    input[type="tel"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="datetime"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    textarea,
    select {
        width: 100%;
    }


    /* Buttons */
    input[type="submit"]{
        width:auto;
    }

    input[type="file"] {
        height: 20px;
        font-size: 14px !important;
        width: 80% !important;
        color: transparent;
    }

        /*Alleen voor chrome en chromium*/
        input[type="file"]::-webkit-file-upload-button {
            font-size: 14px !important;
            height: 20px;
            padding: 0px
        }

    .toolbar ul li {
        display:block;
        font-size:15px;
    }


    .next-question-button, .next-step-button {
        background-position: center;
        background-repeat: no-repeat;
        height: 40px;
        color:#FFFFFF;
    }


    .previous-step-button {
        background-position: center;
        background-repeat: no-repeat;
        height: 40px;
        color: #227B3C;
    }

    .change-button,
    .change-button:focus {
        background-image: url('images/baseline_edit_black_36dp.png') !important;
        background-size: 26px !important;
        width: 36px !important;
        color: transparent !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-color: #227B3C !important;
        margin-left: 0px !important;
        background-position: center;
        background-repeat: no-repeat;
        height: 36px;
        color: transparent;
    }

    .generic-button,
    input[value].add-button,
    input[value].remove-button,
    .generic-button:focus,
    input[value].add-button:focus,
    input[value].remove-button:focus {
        font-size: 10px !important;
        font-weight: 500 !important;
        width: 100% !important;
        padding: 10px 0px 10px 0px !important;
    }
        .next-question-button {
        background-image: none;
        width: 100% !important;
    }

    .toolbar {
    margin-top:110px;
    }
   

    .next-step-button {
        background-image: none;
        width: 100% !important;
    }

    .next-question-button:focus,
    .next-step-button:focus {
        background-image:none;
        background-position: center;
        background-repeat: no-repeat;
    }

    .previous-step-button,
    .previous-step-button:focus {
        background-image: none;
        width: 100% !important;
    }
    
    /* Partial Date - partialdate / text */
    .partialdate-row label:nth-child(1) {
        width: 100%;
        margin: 0 0 5px 0;
        position: relative;
        top: 5px;
    }

    .partialdate-row span:nth-child(2) {
        width: calc(100% - 114px);
        top: -10px;
        left: 0;
    }

    .partialdate-row span:nth-child(3) {
        bottom: 15px;
        right: 85px;
    }

    .partialdate-row label:nth-child(4) {
        bottom: 15px;
        right: 0;
    }

    #subheader h1 {
        font-size: 25px;
        font-weight: 500;
    }

}