/* ============== Responsive code for mobile phones and tablets starting here ============== */

/* For resolutions with a width of 1366px (iPad Pro) and below*/
@media only screen and (max-device-width: 1024px), 
		screen and (max-device-width:1366px) and (-webkit-min-device-pixel-ratio: 1.5), 
		screen and (max-device-width:1366px) and (-webkit-min-device-pixel-ratio: 2) {

    /* ============== General / Home / Registratie / Afgerond ============== */

    html{
        min-height: 0;
    }

    body{
        background-image: none;
    }

    body.background-image div.content{
        background: none;
        color: white;
        padding-bottom: 0;
    }

    body.background-image{
        background-image: url("https://media.dilemmamanager.nl/media/19/Achtergrond-landscape.jpg");
		background-color: #D74B3C;
        background-size: cover;
    }

    div.logo, div.footer-info{
        display: none;
    }
    
    body.background-image img.logo-white{
        display: inline-block;
    }

    img.logo-white{
        width: 50%;
        margin-bottom: 2vw;
    }

    div.main{
        width: 100%;
        padding-bottom: 0;
        margin: 0;
        padding: 0;
        -webkit-text-size-adjust: 100% !important;
    }

    div.assessment{
        padding: 0;
    }

    div.content{
        margin: 0;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 2%;
        padding-bottom: 4%;
        box-shadow: none;
        color: #3e3d40;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
    }

    div.content.assessment{
        font-size: 2.7vw;
    }

    div.content.assessment p{
        font-size: initial;
    }

    div.content.assessment h1{
        font-size: 2.5vw;
    }

    div.content h1 + form + p{
        font-size: 2.5vw;
    }

    img.thumb-icon{
        display: inline-block;
        width: 15vw;
    }

    body.background-image{
        text-align: center;
    }

    body.background-image div.content .button{
        background-color: rgba(0, 0, 0, 0);
        border: 2px solid white;
        float: none;
        outline: none;
    }
    
    body.background-image div.content .button:active{
        background-color: #cc2b19;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        outline: none;
    }
    
    body.background-image:not(.portrait) div.footer{
        display: none;
    }

    body.background-image div.content.assessment{
        padding-top: 8vw;
        padding-left: 18vw !important;
        padding-right: 18vw !important;
    }

    body.background-image div.content.assessment input{
        margin-top: 8vw;
    }

    body.background-image p:first-child{
        padding-bottom: 5vw;
    }

    div.content .button{
        height: auto;
        font-size: 2.3vw;
        background-color: #e74c3c;
        padding: 0.8vw 4vw 0.8vw 4vw;
        margin-top: 1vw;
        border-radius: 1.1vw;
        -webkit-appearance: none;
        outline: none;
    }
    div.content p font span{
        color: white !important;
    }

    div.content.assessment font[size="4"]{
        font-size: 3vw;
    }

    div.content.assessment font{
        font-size: 2.2vw;
    }

    div.content .registration-heading{
        font-size: 3vw;
        margin-top: 0;
        font-weight: 400;
        color: #e74c3c;
    }

    div.content div form table tr td:first-child{
        width: 18vw !important;
    }

    .textfield{
        width: 35vw;
    }

    div.content div form table tr td, .textfield, .combobox, select.datum{
        font-size: 2.4vw;
        font-weight: 400;
        color: #3e3d40;
        padding-top: 0.4vw;
        padding-bottom: 0.4vw;
    }

    div.content table{
        width: 100%;
        height: 100%;
    }
    div.clear{
        height: 0;
    }
    
    div.prop{
        height: 2vh;
    }

    /* Progressbar */

    table#progressbar{
        border-collapse: collapse;
        border: none !important;
        height: 2.5vw;
        width: 100%;
        margin-top: 1vw;
        margin-bottom: 1vw;
    }
    table#progressbar .done{
        background-color: #e74c3c !important;
        border-radius: 0.7vw 0 0 0.7vw;
    }
    table#progressbar .remaining{
        background-color: #eceded !important;
        border-radius: 0 0.7vw 0.7vw 0;
    }

    /* Radio button styling */ 

    input[type="radio"]{
        position:relative;
        border: 0px;
        width: 4vw;
        height: 4vw;
    }

    input[type="radio"]:before{
        content: "";
        position: absolute;
        background-color: #eceded;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    input[type=radio]:checked:before {
        background-color: #eb6864;
        color: red;
    }

    /* Button for next question (different from .button)  */

    div.footer{
        position: absolute;
        display: inline-block;
        width: auto;
        height: 0;
        margin: 0;
        margin-bottom: 5vh;
        padding: 0;
        right: 5vw;
        bottom: 5vw;
    }
    a.next{
        background-color: #e74c3c;
        margin: 0;
        padding: 1vw;
        height: auto;
        font-size: 2.6vw;
        border-radius: 1.1vw;
        outline: none;
    }
    a.next:active, div.content .button:active{
        background-color: #cc2b19;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        outline: none;
    }

    /* ============== items-ordenen ============== */

    form[name="investeringsmeter"] table tr td{
        font-size: 2vw;
    }
    form[name="investeringsmeter"] table{
        width: 65%;
    }
    
    form[name="investeringsmeter"] table tr td br{
        display: none;
    }
    
    form[name="investeringsmeter"] table:nth-child(4) tr:nth-child(2) td:nth-child(1){
        padding: 17% 0 20% 2.5%;
    }

    form[name="investeringsmeter"] table:nth-child(4) tr:nth-child(2) td:nth-child(1) input{
        margin-top: 2vw;
    }

    table#tbl_left, table#tbl_right{
        width: 29vw !important;
    }

    form[name="investeringsmeter"] table:nth-child(4) tr:nth-child(1) td:nth-child(1){
        padding: 0;
        margin: 0;
    }   

    form[name="investeringsmeter"] table:nth-child(4) tr:nth-child(1) td:nth-child(2){
        width: 12vw !important;
        padding-right: 1.5vw !important;
        padding-left: 1.5vw !important;
        padding-bottom: 1.7vw !important;
        text-align: center;
    }

    form[name="investeringsmeter"] table:nth-child(4) tr:nth-child(1) td:nth-child(2) input{
        margin-top: 3vw;
    }

    form[name="investeringsmeter"] table:nth-child(4) tr:nth-child(1) td:nth-child(4),
    form[name="investeringsmeter"] table:nth-child(4) tr:nth-child(3) td:nth-child(1)
    {
        padding-left: 1.7vw;
    }
    .order, .order_selected{
        padding-left: 0 !important;
        margin: 0 !important;
    }

    form[name="investeringsmeter"] table:nth-child(1) {
        margin-top: 2vw;
    }

    form[name="investeringsmeter"] table:nth-child(4){
        margin-top: 1vw;
    }

    form[name="investeringsmeter"] table:nth-child(5){
        position: absolute;
        top: 11vw;
        right: 3vw;
        width: 16vw;
        height: 0;
        margin: 0;
        color: white;
        background-color: #e74c3c;
        border-radius: 1.2vw;
        padding: 3% 0.5% 3% 0.5%;
    }
    form[name="investeringsmeter"] table:nth-child(5) tr td{
        font-size: 1.8vw;
    }

    form[name="investeringsmeter"] input[type="image"]{
        width: 5vw;
    }
    
    form[name="investeringsmeter"] div + div.footer{
        right: 3vw;
    }

    /* ============== meest-minst ============== */

    form[name="assessment"], form[name="assessment"] table{
        font-size: 2.5vw;
        color: #3e3d40;
    }

    form[name="assessment"] p{
        font-size: 2.5vw !important;
    }

    form[name="assessment"] br{
        display: none;
    }

    form[name="assessment"] table{
        width: 80%;
    }

    form[name="assessment"] table tr:first-child{
        font-weight: bold;
    }

    form[name="assessment"] table + br + p + table tr td{
        padding: 1.25% 0 1.25% 0;
    }

    /* ============== multiple-choice / informatie-pagina ============== */

    form[name="dilemmameter"] br:nth-child(2):first-of-type,
    form[name="dilemmameter"] br:nth-child(10)
    {
        display: none;
    }

    form[name="dilemmameter"] table tr td{
        font-size: 2vw;
        color: #3e3d40;
    }

    form[name="dilemmameter"] table tr:last-child{
        height: 100%;
    }

    form[name="dilemmameter"] p{
        font-size: 2.3vw !important;
        color: #3e3d40;
        margin-bottom: 0;
    }

    /* multiple-choice-3 add padding */
    form[name="dilemmameter"] table.multiple-choice-answers tr td + td > b{
        padding-left: 2vw;
    }

    form[name="dilemmameter"] div > h1, form[name="dilemmameter"] div + table{
        margin-top: 4vw;
    }

    form[name="dilemmameter"] h1{
        margin-top: 3vw;
        font-size: 2.5vw;
        color: #3e3d40;
    }

    .multiplechoice-questions__row td{
        border-top: 1px solid lightgray;
        padding-top: 1.5%;
        padding-bottom: 1.5%;
    }

    .multiplechoice-questions{
        margin-top: -1%;
    }

    .multiplechoice-questions{
        display: block;
        height: 45vh !important;
        overflow-y: scroll;
        margin-top: 3vw;
    }

    .multiplechoice-questions__header{
        position: absolute;
        top: 12vw;
        backface-visibility: hidden;
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        -webkit-transform: perspective(2.5vw) translateZ(0);
        -moz-backface-visibility: hidden;
        -moz-transform: translateZ(0);
    }

    .multiplechoice-questions__header, .multiplechoice-questions__row{
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    .multiplechoice-questions tr td:first-child{
        width: 36%;
    }

    .multiplechoice-questions tr td:last-child{
        width: 0;
    }

    .multiplechoice-questions__header{
        width: calc(90% - 1em);
    }

    form[name="dilemmameter"]{
        margin-bottom: 7vw !important;
    }

    /* ============== open-vraag / open-vragen ============== */

    form[name="openquestion"] h1{
        font-size: 2.5vw;
        color: #3e3d40;
        font-weight: normal !important;
    }

    form[name="investeringsmeter"] table + br,
    form[name="investeringsmeter"] div + br
    {
        display: none;
    }

    form[name="investeringsmeter"] p b{
        font-size: 2.5vw !important;
        font-weight: normal;
        padding-bottom: 30vw !important;
    }

    form[name="openquestion"] #answer,
    form[name="investeringsmeter"] #answer, 
    form[name="investeringsmeter"] #complement,
    form[name="investeringsmeter"] #reaction
    {
        font-size: 2.5vw;
        width: 60vw;
        height: 13vw;
        border: 1px solid #3e3d40;;
        color: #3e3d40;
        margin-top: 1.5vw;
    }

    /* ============== all capaciteitentest pages ============== */

    form[name="test"]{
        font-size: 2.5vw;
    }

    form[name="test"] table tr td span{
        font-size: 2.5vw !important;
    }

    form[name="test"] table tr td {
        font-size: 2.5vw !important;
    }

    form[name="test"] table tr td{
        padding-bottom: 1vw;
    }

    form[name="test"] table tr td input[type="radio"]{
        margin-right: 2vw
    }

    span#timer{
        margin-top: 2vw !important;
        padding: 1vw !important;
        border-radius: 1vw;
        border: 0.2vw solid red !important;
    }
    p.warning{
        font-size: 2.5vw !important;
        background-color: #eceded;
        border: none;
        padding-left: 5.2vw;
        margin-left: -5vw;
        margin-right: -5vw;
    }

    div.content.assessment span + h1{
        font-size: 2.5vw;
        margin-bottom: 3vw;
    }

    div.content.assessment span + h1 + br{
        display: none;
    }

    .selected img{
        padding: 4%;
        border: 0.5vw solid rgba(255,0,0,0.7);
        transition: 0.5s;
        -moz-transition: 0.5s;
        -webkit-transition: 0.5s;
    }

    table.answers__table tr td.multi-line-answer input[type="radio"]{
        display: none;
    }
    
    table.answers__table tr td.single-line-answer{
        padding-bottom: 0;
        padding-top: 1vw;
    }

    table.answers__table br:nth-child(1), 
    table.answers__table br:nth-child(2), 
    table.answers__table br:nth-child(6),  
    table.answers__table br:nth-child(7){
        display: none;
    }

    table.answers__table br:nth-child(4), table.answers__table br:nth-child(5){
        display: block;
    }
    
    table.answers__table table{
        margin-bottom: 0.5vw;
    }

    table.answers__table{
        font-size: 2.5vw !important;
    }

    table.numeric, table.numeric span, table.numeric .number, table.answers__table .number {
        font-size: 3.5vw !important;
    }

    table.numeric .number,
    table.answers__table .number{
        height: 4vw;
        width: 7vw;
        border: 1px solid black;
    }

    div.intro-info br:nth-child(3){
        display: none;
    }

    div.intro-info {
        padding-bottom: 10vw;
    }

    table.answers__table .img-fullsize{
        width: 100% !important;
        height: auto !important;
    }
    
    /* vragenlijst */
        
    div.questionnaire,
    div.questionnaire table tr td,
    div.questionnaire table tr td span,
    div.questionnaire table tr td p,
    div.questionnaire table tr td select,
    div.questionnaire .textarea,
    div.questionnaire .textfield{
        font-size: 2.5vw !important;
    }
    
    div.questionnaire h1{
        font-size: 3vw !important;
    }
    

/*     ============== vragenlijst-1 ============== 

     Lege td's aan begin weghalen 
    div.questionnaire-1 form > table > tbody > tr:first-child td:first-child,
    div.questionnaire-1 form > table > tbody > tr:nth-child(3) > td:first-child,
    div.questionnaire-1 form > table > tbody > tr:nth-child(3) > td:first-child + td
    {
        display: none;
    }

    div.questionnaire-1 table tr td{
        font-size: 1.6vw !important;
    }

    div.questionnaire-1 table:first-child tr:nth-child(2){
        display: none;
    }

    div.questionnaire-1 table table{
        display: block;
        height: 32vw !important;
        overflow-y: auto;
        margin-top: 4vw;
    }

    div.questionnaire-1 table table tr{
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    div.questionnaire-1 table table tr td:first-child{
        width: 45%;
    }

    div.questionnaire-1 table table tr:first-child{
        position: absolute;
        top: 13.5vw;
        original value: 86.4%
        width: calc(89.5% - 1em);
    }

    div.questionnaire-1 table table tr:first-child td{
        font-weight: bold;
    }

    div.questionnaire-1 table table tr td{
        border-left: none !important;
        border-right: none !important;
    }

     ============== vragenlijst-2 ============== 
    
    div.questionnaire-2 form > table > tbody > tr:first-child td:first-child,
    div.questionnaire-2 form > table > tbody > tr:nth-child(2) > td:first-child,
    div.questionnaire-2 form > table > tbody > tr:nth-child(3) > td:first-child,
    div.questionnaire-2 form > table > tbody > tr:nth-child(3) > td:first-child + td,
    div.questionnaire-2 form > table > tbody > tr:nth-child(5) > td:first-child,
    div.questionnaire-2 form > table > tbody > tr:nth-child(6) > td:first-child,
    div.questionnaire-2 form > table > tbody > tr:nth-child(7) > td:first-child,
    div.questionnaire-2 form > table > tbody > tr:nth-child(7) > td:first-child + td{
        display: none;
    }
    
    div.questionnaire-2 form > table > tbody > tr:nth-child(4) > td:first-child{
        padding: 0;
    }
    
    div.questionnaire-2 form > table > tbody > tr:nth-child(3) > td:nth-child(3) > table  tr  td:first-child,
    div.questionnaire-2 form > table > tbody > tr:nth-child(7) > td:nth-child(3) > table tr td:first-child{
        width: 40% !important;
    }
    
    div.questionnaire-2 table tr{
        display: table;
        width: 100%;
        table-layout: fixed;
    }
    
    div.questionnaire-2 table tr td{
        font-size: 2vw !important;
    }
    
    div.questionnaire-2  table table{
        margin-bottom: 2vw;
    }
    
     ============== vragenlijst-3 ============== 
        
    div.questionnaire-3{
        margin-bottom: 5vw;
    }
    
    div.questionnaire-3 h1{
        margin-bottom: 3vw;
    }
    
    div.questionnaire-3 form > table > tbody > tr > td:first-child{
        display: none;
    }
    
    div.questionnaire-3 form table tr td{
        padding-bottom: 0;
    }
    
    div.questionnaire-3 form > table > tbody > tr > td{
        padding-bottom: 2vw;
    }
    
    div.questionnaire-3 form > table > tbody > tr:first-child td{
        padding-bottom: 0.5vw;
    }
    
    div.questionnaire-3 table tr td p{
        margin: 0;
    }
    
    div.questionnaire-3 form > table > tbody > tr > td,
    div.questionnaire-3 table table td,
    div.questionnaire-3 table tr td span,
    div.questionnaire-3 table tr td p,
    div.questionnaire-3 .datum,
    div.questionnaire-3 .textfield{
        font-size: 2.5vw !important;
    }
    
    div.questionnaire-3 .textfield{
        width: 90%;
    }
    
    div.questionnaire-3 form > table > tbody > tr:nth-child(13) > td:nth-child(2),
    div.questionnaire-3 form > table > tbody > tr:nth-child(15) > td:nth-child(2){
        padding-top: 3vw;
    }
    
     ============== vragenlijst-4 ============== 
    
    div.questionnaire-4 table tr td{
        font-size: 2vw !important;
    }
    
    div.questionnaire-4 form > table > tbody > tr:first-child td:first-child,
    div.questionnaire-4 form > table > tbody > tr td:first-child
    {
        display: none;
    }
    
    div.questionnaire-4 .textarea, div.questionnaire-4 .textfield{
        width: 50vw;
        font-size: 2vw;
        margin-top: 1vw;
        margin-bottom: 1.5vw;
    }
    div.questionnaire-4 .textarea{
        height: 8vw;
    }
    
     ============== vragenlijst-5 ============== 
    
    div.questionnaire-5 table tr td, 
    div.questionnaire-5 table tr td p,
    div.questionnaire-5 table tr td input,
    div.questionnaire-5 table tr td select,
    div.questionnaire-5 table tr td span,
    div.questionnaire-5 table tr td .textarea,
    div.questionnaire-5 table tr td .textfield
    div.questionnaire-5 table tr td .datum{
        font-size: 2.2vw !important;
        margin: 0;
        padding: 0;
        margin-bottom: 1vw;
   }
   
    div.questionnaire-5 table tr td .textarea,
    div.questionnaire-5 table tr td .textfield:not(#question6_4){
        width: 46.5vw;
    }
   
   div.questionnaire-5{
       padding-bottom: 8vw;
   }*/
}

/* All resolutions of 736px (iPhone 6 plus) in width and below*/
@media only screen and (max-device-width: 736px) {

    /* ============== Home / Registratie / Afgerond ============== */ 

    body.portrait div.content.assessment{
        padding-top: 6vw;
    }

    body.portrait div.content.assessment input{
        margin-top: 6vw;
    }
    
    body.background-image div.content.assessment{
        padding-top: 4vw;
    }

    body.portrait p:first-child{
        padding-bottom: 3vw;
    }

    div.content h1 + form + p{
        font-size: 2vw;
    }

    div.content.assessment p font{
        font-size: 2.5vw;
    }

    /* ============== items-ordenen ============== */ 

    form[name="investeringsmeter"] table:nth-child(4) tr:nth-child(2) td:nth-child(1){
        padding: 10vw 0 10vw 2vw;
    }

    form[name="investeringsmeter"] table:nth-child(4) tr:nth-child(1) td:nth-child(1){
        padding: 0;
    }
    .order, .order_selected{
        padding-left: 0 !important;
    }

    form[name="investeringsmeter"] table:nth-child(1) {
        margin-top: 0;
    }

    form[name="investeringsmeter"] table:nth-child(4){
        margin-top: 1vw;
    }

    /* ============== multiple-choice / informatie-pagina ============== */ 

    form[name="dilemmameter"] div > h1, form[name="dilemmameter"] div + table{
        margin-top: 2vw;
    }

    /* ============== open-vraag / open-vragen ============== */ 

    form[name="openquestion"] #answer,
    form[name="investeringsmeter"] #answer, 
    form[name="investeringsmeter"] #complement,
    form[name="investeringsmeter"] #reaction
    {
        height: 11vw !important;
    }

    /* ============== all capaciteitentest pages ============== */

    table.answers__table tr:nth-child(2) td{
        padding-top: 0;
    }

    /* ============== vragenlijst-1 ============== */

}

/* Force landscape*/
@media only screen and (orientation:portrait) and (max-device-width: 1024px), 
		screen and (orientation:portrait) and (max-device-width:1366px) and (-webkit-min-device-pixel-ratio: 1.5), 
		screen and (orientation:portrait) and (max-device-width:1366px) and (-webkit-min-device-pixel-ratio: 2) {
    body{
        background-image: url("https://media.dilemmamanager.nl/media/19/Achtergrond-portrait.jpg") !important;
		background-color: #D74B3C;
        background-size: cover;
    }
    
    body.background-image div.content,
    body.background-image div.content h1{
        background: none;
        color: white;
    }

    body.background-image div.content.assessment font[size="2"]{
        font-size: 4.4vw !important;
    }

    body.background-image div.content.assessment p:first-child{
        margin-bottom: 8vw;
    }

    body.background-image div.content.assessment input{
        margin-top: 10vw;
        font-size: 6vw;
    }
    
    img.logo-white{
        margin-top: 10vw;
        margin-bottom: 7vw;
        width: 80%;
    }

    div.footer-info{
        display: none;
    }

    body:not(.portrait) div.content, body:not(.portrait) div.footer{
        display: none !important;
    }

    body:not(.portrait) div.logo{
        display: inline-block;
        background-image: url("../images/icoon_draaien.png");
        background-size: cover;
        width: 25vw !important;
        height: 25vw !important;
        position: absolute;
        margin: 0;
        top: 15%;
        left: 37%;
    }

    body:not(.portrait) div.logo img{
        width: 0;
        height: 0;
        overflow: hidden;
        visibility: hidden;
    }

    body:not(.portrait) div.main {
        text-align: center;
        padding: 62vw 14vw 0 14vw;
    }

    body:not(.portrait) div.main:before{
        content: "Voor een goede weergave van de vragenlijst, is het nodig dat je jouw scherm een kwartslag draait.";
        color: white;
        font-size: 6vw;
        visibility: visible;
        text-align: center;
    }
}