/* ----------- iPad 1, 2, Mini and Air ----------- */


/* Portrait and Landscape */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {}


/* Portrait */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
    #results-img-on-pc {
        display: none;
    }
    #results-img-on-mobile {
        display: block;
        background: url("../images/new/Bottom_Answer.jpg") no-repeat;
        background-position: center;
        background-size: 780px;
        padding: 100px 100px 100px 100px;
    }
    #result-right {
        display: none;
    }
    #result-bottom {
        display: block;
        margin-top: 50px;
        border-top: 1px solid #ddd;
        padding-top: 20px;
    }
    a.button-image::before {
        top: 320%;
    }
    #wrapper {
        width: 100% !important;
    }
    .home-set {
        /* background: #fff url(../images/new/Backgroundlarge.jpg);
        background-size: 2300px;
        background-position: top right;
        background-repeat: no-repeat; */
        background: #fff url(../images/new/Background-300.jpg);
        background-size: 1200px;
        background-position: 85%;
        background-repeat: no-repeat;
        overflow: hidden;
    }
    #newsletterform {
        margin-bottom: 100px !important;
    }
    /* QUESTIONs  part */
    .content {
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
    }
    /*#questionsContainer {
      width: 100%;
    }*/
    .img-bottom {
        width: 100%;
    }
    #questionNav {
        width: 100%;
    }
    .questionNavButton {
        margin-bottom: 15px;
    }
    .img-bottom-set1 {
        margin-top: -850px;
    }
    /*.question {
      width: 100% !important;
    }*/
    .set-mobile-question {
        width: 700px;
    }
    #questions ul.images {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-column-gap: 160px;
    }
    #questions ul.images li {
        padding: 5px;
    }
    .image-list {
        width: auto;
        max-height: 200px;
        /* max-width: 80px; */
    }
    #questionsContainer {
        max-height: 800px;
    }
    .result-image {
        width: 100%;
    }
    .image-results {
        width: 100%;
    }
    .image-right {
        width: 100%;
    }
    #stilarter ul {
        text-align: center;
    }
    #graph {
        background: url(../images/graph.jpg) no-repeat left center;
        width: auto;
        height: 510px;
    }
    .bar {
        width: 55px;
    }
    #legend {
        padding-left: 45px;
    }
    .legend {
        width: 100px;
        font: bold 14px "Crimson Text", sans-serif;
        /* padding-right: 30px; */
        margin-left: 10px;
    }
    .logo {
        margin-top: 70px;
    }
    .img-bottom-set {
        margin-top: -1000px;
    }
    /* Results */
    #stilarter ul li a {
        width: 125px;
        font-size: 12px;
    }
}


/* Landscape */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    #results-img-on-pc {
        display: none;
    }
    #results-img-on-mobile {
        display: block;
        background: url(../images/new/Bottom_Answer.jpg) no-repeat;
        background-position: bottom;
        background-size: 1100px;
        padding: 300px 100px 100px 100px;
        margin-top: 100px;
    }
    #result-right {
        display: block;
    }
    #result-bottom {
        display: none;
    }
    .home-set {
        /* background: #fff url(../images/new/Backgroundlarge.jpg);
        background-size: 2000px;
        background-position: right top;
        background-repeat: no-repeat; */
        background: #fff url(../images/new/Background-300.jpg);
        background-size: 1200px;
        background-position: 85%;
        background-repeat: no-repeat;
        overflow: hidden;
    }
    a.button-image::before {
        top: 390%;
    }
    #wrapper {
        width: 100% !important;
    }
    #newsletterform {
        margin-bottom: 100px !important;
    }
    /* QUESTIONs  part */
    .content {
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
    }
    /*#questionsContainer {
      width: 100%;
    }*/
    .img-bottom {
        width: 800px;
    }
    #questionNav {
        width: 100%;
    }
    .questionNavButton {
        margin-bottom: 15px;
    }
    .img-bottom-set1 {
        margin-top: -850px;
    }
    /*.question {
      width: 100% !important;
    }*/
    .set-mobile-question {
        width: 700px;
    }
    #questions ul.images {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-column-gap: 190px;
    }
    #questions ul.images li {
        padding: 5px;
    }
    .image-list {
        width: auto;
        max-height: 250px;
        /* max-width: 80px; */
    }
    #questionsContainer {
        max-height: 900px;
    }
    .result-image {
        width: 100%;
    }
    .image-results {
        width: 100%;
    }
    .image-right {
        width: 100%;
    }
    #stilarter ul {
        text-align: center;
    }
    #graph {
        background: url(../images/graph.jpg) no-repeat left center;
        width: auto;
        height: 510px;
    }
    .bar {
        width: 55px;
    }
    #legend {
        padding-left: 45px;
    }
    .legend {
        width: 100px;
        font: bold 14px "Crimson Text", sans-serif;
        /* padding-right: 30px; */
        margin-left: 10px;
    }
    .logo {
        margin-top: 70px;
    }
    .img-bottom-set {
        margin-top: -1000px;
    }
    /* Results */
    #stilarter ul li a {
        width: 150px;
        font-size: 12px;
    }
}


/* ----------- iPad 3, 4 and Pro 9.7" ----------- */


/* Portrait and Landscape */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {}


/* Portrait */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    #results-img-on-pc {
        display: none;
    }
    #results-img-on-mobile {
        display: block;
        background: url("../images/new/Bottom_Answer.jpg") no-repeat;
        background-position: center;
        background-size: 780px;
        padding: 100px 100px 100px 100px;
    }
    #result-right {
        display: none;
    }
    #result-bottom {
        display: block;
        margin-top: 50px;
        border-top: 1px solid #ddd;
        padding-top: 20px;
    }
    a.button-image::before {
        top: 320%;
    }
    #wrapper {
        width: 100% !important;
    }
    .home-set {
        /* background: #fff url(../images/new/Backgroundlarge.jpg);
        background-size: 2300px;
        background-position: top right;
        background-repeat: no-repeat; */
        background: #fff url(../images/new/Background-300.jpg);
        background-size: 1500px;
        background-position: 90% 20%;
        background-repeat: no-repeat;
        overflow: hidden;
    }
    #newsletterform {
        margin-bottom: 100px !important;
    }
    /* QUESTIONs  part */
    .content {
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
    }
    /*#questionsContainer {
      width: 100%;
    }*/
    .img-bottom {
        width: 100%;
    }
    #questionNav {
        width: 100%;
    }
    .questionNavButton {
        margin-bottom: 15px;
    }
    .img-bottom-set1 {
        margin-top: -850px;
    }
    /*.question {
      width: 100% !important;
    }*/
    .set-mobile-question {
        width: 700px;
    }
    #questions ul.images {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-column-gap: 160px;
    }
    #questions ul.images li {
        padding: 5px;
    }
    .image-list {
        width: auto;
        max-height: 200px;
        /* max-width: 80px; */
    }
    #questionsContainer {
        max-height: 800px;
    }
    .result-image {
        width: 100%;
    }
    .image-results {
        width: 100%;
    }
    .image-right {
        width: 100%;
    }
    #stilarter ul {
        text-align: center;
    }
    #graph {
        background: url(../images/graph.jpg) no-repeat left center;
        width: auto;
        height: 510px;
    }
    .bar {
        width: 55px;
    }
    #legend {
        padding-left: 45px;
    }
    .legend {
        width: 100px;
        font: bold 14px "Crimson Text", sans-serif;
        /* padding-right: 30px; */
        margin-left: 10px;
    }
    .logo {
        margin-top: 70px;
    }
    .img-bottom-set {
        margin-top: -1000px;
    }
    /* Results */
    #stilarter ul li a {
        width: 125px;
        font-size: 12px;
    }
}


/* Landscape */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    #results-img-on-pc {
        display: none;
    }
    #results-img-on-mobile {
        display: block;
        background: url(../images/new/Bottom_Answer.jpg) no-repeat;
        background-position: bottom;
        background-size: 1100px;
        padding: 300px 100px 100px 100px;
        margin-top: 100px;
    }
    #result-right {
        display: block;
    }
    #result-bottom {
        display: none;
    }
    .home-set {
        /* background: #fff url(../images/new/Backgroundlarge.jpg);
        background-size: 2000px;
        background-position: right top;
        background-repeat: no-repeat; */
        background: #fff url(../images/new/Background-300.jpg);
        background-size: 1200px;
        background-position: 85%;
        background-repeat: no-repeat;
        overflow: scroll;
    }
    a.button-image::before {
        top: 390%;
    }
    #wrapper {
        width: 100% !important;
    }
    #newsletterform {
        margin-bottom: 100px !important;
    }
    /* QUESTIONs  part */
    .content {
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
    }
    /*#questionsContainer {
      width: 100%;
    }*/
    .img-bottom {
        width: 800px;
    }
    #questionNav {
        width: 100%;
    }
    .questionNavButton {
        margin-bottom: 15px;
    }
    .img-bottom-set1 {
        margin-top: -850px;
    }
    /*.question {
      width: 100% !important;
    }*/
    .set-mobile-question {
        width: 700px;
    }
    #questions ul.images {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-column-gap: 190px;
    }
    #questions ul.images li {
        padding: 5px;
    }
    .image-list {
        width: auto;
        max-height: 250px;
        /* max-width: 80px; */
    }
    #questionsContainer {
        max-height: 900px;
    }
    .result-image {
        width: 100%;
    }
    .image-results {
        width: 100%;
    }
    .image-right {
        width: 100%;
    }
    #stilarter ul {
        text-align: center;
    }
    #graph {
        background: url(../images/graph.jpg) no-repeat left center;
        width: auto;
        height: 510px;
    }
    .bar {
        width: 55px;
    }
    #legend {
        padding-left: 45px;
    }
    .legend {
        width: 100px;
        font: bold 14px "Crimson Text", sans-serif;
        /* padding-right: 30px; */
        margin-left: 10px;
    }
    .logo {
        margin-top: 70px;
    }
    .img-bottom-set {
        margin-top: -1000px;
    }
    /* Results */
    #stilarter ul li a {
        width: 150px;
        font-size: 12px;
    }
}


/* ----------- iPad Pro 10.5" ----------- */


/* Portrait and Landscape */

@media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (-webkit-min-device-pixel-ratio: 2) {}


/* Portrait */


/* Declare the same value for min- and max-width to avoid colliding with desktops */


/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/

@media only screen and (min-device-width: 834px) and (max-device-width: 834px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {}


/* Landscape */


/* Declare the same value for min- and max-width to avoid colliding with desktops */


/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/

@media only screen and (min-device-width: 1112px) and (max-device-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {}


/* ----------- iPad Pro 12.9" ----------- */


/* Portrait and Landscape */

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {}


/* Portrait */


/* Declare the same value for min- and max-width to avoid colliding with desktops */


/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/

@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {}


/* Landscape */


/* Declare the same value for min- and max-width to avoid colliding with desktops */


/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/

@media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {}