/******************************************************************************/
/*                                   HEADER                                   */
/*                                                                            */
/* Display header accordingly to the size of the screen, it only applies to   */
/* home page.                                                                 */
/******************************************************************************/
@media
  only screen and (max-width: 375px),
  only screen and (max-width: 375px) and (-webkit-min-device-pixel-ratio: 2) {
    .comparator-header {
        padding-bottom: 1em;
    }

    .comparator-header .dynamic-flexbox-wrapper {
        display: block;
    }

    .comparator-header .title {
        margin-top: 3%;
        font-size: 0.75em;
        padding: 0;
    }

    .gems-logo1 {
        display: none;
    }

    .gems-logo2 {
        display: block;
        max-height: 70px;
    }

    .eeca-logo {
        max-height: 30px;
        margin-bottom: 10%;
        margin-top: 10%;
    }

    .gems-title {
        min-width: 11.5em;
        max-width: 11.5em;
    }

    .eeca-title {
        min-width: 10em;
        max-width: 10em;
    }
}

/* Media query for iPhones (Excluding iPhone 6) */
/* This extends the above media query. */
@media
  only screen and (max-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
    .comparator-header .dynamic-flexbox-wrapper {
        margin-right: 0.5em;
    }.

    .eeca-logo {
        margin-top: 1em;
        margin-bottom: 1em;
    }

    .gems-title {
        min-width: 10em;
        max-width: 10em;
    }

    .eeca-title {
        min-width: 9em;
        max-width: 9em;
    }
}

@media
  only screen and (min-width: 376px) and (max-width: 500px) {
    .comparator-header {
        padding-bottom: 1em;
        width: 100%;
    }

    .comparator-header .dynamic-flexbox-wrapper {
        display: block;
    }

    .comparator-header .title {
        margin-top: 3%;
    }

   .gems-logo1 {
        display: none;
    }

    .gems-logo2 {
        display: block;
        max-height: 70px;
        margin-bottom: 0.5em;
    }

    .eeca-logo {
        max-height: 50px;
        margin-top: 0.4em;
        margin-bottom: 1em;
    }

    .comparator-header .title {
        font-size: 0.85em;
    }

    .gems-title {
        min-width: 12.5em;
        max-width: 13em;
        padding-top: initial;
    }

    .eeca-title {
        min-width: 10.5em;
        max-width: 11em;
    }
}

@media
  only screen and (min-width: 501px) and (max-width: 639px) {
    .comparator-header .dynamic-flexbox-wrapper {
        display: block;
        width: auto;
        max-width: 50%;
    }

    .comparator-header .title {
        margin-top: 3%;
    }

    .gems-logo1 {
        display: none;
    }

    .gems-logo2 {
        display: block;
        max-width: 30%;
        max-height: 120px;
    }

    .eeca-logo {
        max-width: 60%;
        max-height: 90px;
        margin-bottom: 1.7em;
    }

    .gems-title {
        min-width: 15.5em;
        max-width: 15.5em;
        padding-top: 0.5em;
    }

    .eeca-title {
        min-width: 12em;
        max-width: 12em;
    }
}

@media
  only screen and (min-width: 640px) and (max-width: 999px) {
    .comparator-header .title {
        font-size: 1.05em;
    }

    .comparator-header .dynamic-flexbox-wrapper {
        display: block;
    }

    .comparator-header .title {
        margin-top: 3%;
    }

    .eeca-logo {
        margin-bottom: 1.7em;
    }

    .gems-title {
        min-width: 16em;
        max-width: 16em;
        padding-top: 0.5em;
    }

    .eeca-title {
        min-width: 13em;
        max-width: 13em;
    }
}

@media
 only screen and (min-width: 1000px) {
    .comparator-header .title {
        font-size: 1.2em;
    }

    .gems-logo1 {
        display: block;
    }

    .gems-logo2 {
        display: none;
    }

    .eeca-logo {
        max-width: 50%;
        max-height: 70px;
    }

    .gems-title {
        min-width: 20em;
        max-width: 20em;
        padding-top: initial;
    }

    .eeca-title {
        min-width: 16em;
        max-width: 16em;
    }
}

/******************************************************************************/
/*                                    HOME                                    */
/******************************************************************************/
.home-box .background {
    overflow: hidden;
    background-size: cover;
    width: 100%;
    height: 25em;
    position: absolute;
    left: 0;
    z-index: -100;
}

.home-box .content {
    color: #FFFFFF;
    position: relative;
    z-index: 100;
}

.home-box .inner-content {
    margin-left: 5%;
}

.home-box .indented {
    padding-left: 1.5vw;
}

.home-box .title-box {
    min-width: 5em;
    max-width: 60%;
    font-size: 5em;
    height: 4em
}

.home-box .title-box h1 {
    font-size: inherit;
    margin-top: 2em;
    position: absolute;
}

.home-box .search-box {
    color: #0B2331;
    float: left;
    font-size: 1.2em;
    font-weight: 300;
    min-width: 5em;
    width: 80%
}

.home-box .search-box h2 {
    color: inherit;
    font-size: 1.5em;
    font-weight: inherit;
    margin: 0;
    padding-top: 1em;
}

.home-box .search-box label {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* The select box is hide by Select2 plugin. Width is the only property       */
/* honored by the plugin.                                                     */
.home-box .search-box select, .home-box .search-box .select2 {
    width: 90% !important;
}

.home-box .sample-box {
    color: #FFFFFF;
    float: left;
    font-size: 0.7em;
    margin-top: 7.5em;
    text-align: center;
    width: 15em;
}

.home-box .sample-box img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1em;
    width: 3.5em;
    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:   -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

.home-box .disclaimer {
    clear: both;
    font-size: 0.8em;
    padding-top: 1em;
    padding-right: 10%;
}

@media only screen and (max-width: 360px) {
    .home-box .background {
        background: url(/static/webpack_bundles/dist/img/home_background_xs-03a37.png) bottom left no-repeat;
    }
}

@media only screen and (max-width: 833px) {
    /* At this size the sample-box comes down. Style it accordingly. */
    .home-box .sample-box {
        margin-top: 2.5em;
        margin-left: 1.5vw;
    }
}

@media only  {
    .home-box .background {
        background: url(/static/webpack_bundles/dist/img/home_background_s-6ffab.png) bottom left no-repeat;
    }
}

@media only screen and (max-width: 360px), screen and (min-width: 360px) {
    .home-box .background {
        height: 10em;
    }

    .home-box .title-box {
        font-size: 2em;
        height: 3em;
        min-width: 6.8em;
    }

    .home-box .title-box h1 {
        margin-top: 1.5em;
    }
}

@media only screen and (min-width: 480px) {
    .home-box .background {
        background: url(/static/webpack_bundles/dist/img/home_background_m-0ea51.png) bottom left no-repeat;
        height: 16.5em;
    }

    .home-box .title-box {
        font-size: 3em;
        height: 4em;
        min-width: 6.8em;
    }

    .home-box .title-box h1 {
        margin-top: 2.2em;
    }
}

/* Media query for iPhones in landscape. */
@media only screen
  and (min-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .home-box .title-box {
        font-size: 2em;
    }
}

@media only screen and (min-width: 640px) {
    .home-box .title-box {
        font-size: 2.8em;
    }
}

@media only screen and (min-width: 720px) {
    .home-box .background {
        background: url(/static/webpack_bundles/dist/img/home_background_l-585ae.png) bottom left no-repeat;
    }
}

@media only screen and (min-width: 1280px) {
    .home-box .background {
        background: url(/static/webpack_bundles/dist/img/home_background_xl-dd2e0.png) bottom left no-repeat;
    }
}

@media only screen and (min-width: 2550px) {
    .home-box .background {
        background: url(/static/webpack_bundles/dist/img/home_background_xxl-6f50c.png) bottom left no-repeat;
    }
}

/* CSS targeting IE 10 and 11                                                 */
/*                                                                            */
/* Media queries are needed after support to Conditional Comments was dropped */
/* from them.                                                                 */

/******************************************************************************/
/*                               LAYOUT STYLES                                */
/******************************************************************************/
@media all and (-ms-high-contrast: active), (-ms-high-contrast:none) {
    .vertical-flexbox-wrapper {
        width: 100vw;              /* IE 11 */
    }

    .comparator-header .dynamic-flexbox-wrapper div {
        -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 1;         /* OLD - Firefox 19- */
        width: 100%;               /* For old syntax, otherwise collapses. */
        -webkit-flex: 1;          /* Chrome */
        -ms-flex: 1 1 auto;       /* IE 10 */
        flex: 1 1 auto;           /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }
}