/*#region HomeSettings*/
.homeRange {
    height: 1050px;
}

    .homeRange > nav {
        height: 970px;
        width: 250px;
        background-color: #fff;
        float: left;
        display: inline-block;
        margin: 40px;
    }
    .homeRange > nav:lang(de){
         height: 1010px;
    }
    .homeRange > nav:lang(nl){
         height: 990px;
    }
    .homeRange > nav:lang(es){
         height: 1010px;
    }
        .homeRange > nav > span.bemicron > span {
            font-family: 'Helvetica';
            font-size: 30px;
            color: #334042;
            display: inline;
            text-transform: none;
            font-weight: bold;
        }

            .homeRange > nav > span.bemicron sup {
                color: #334042;
                font-size: 17px;
                right: 10px;
                top: -3px;
                vertical-align: super;
            }

        .homeRange > nav > span > span {
            font-size: 16px;
            font-family: 'Vaud Light';
            color: #334042;
            text-transform: uppercase;
            display: block;
            margin-top: 10px;
        }

    .homeRange > section {
        height: 1050px;
        width: 664px;
        float: right;
        display: inline-block;
        background-color: #EBF4FB;
        background-image: url(Images/example.jpg);
        background-position: top left;
        background-repeat: no-repeat;
    }
    .homeRange > section:lang(de){
        height: 1090px;
    }
    .homeRange > section:lang(nl){
        height: 1070px;
    }
     .homeRange > section:lang(es){
        height: 1090px;
    }
.range .title {
    display: block;
    margin-top: 60px;
    margin-bottom: 30px;
    font-family: 'Vaud Thin';
    font-size: 30px;
    color: #485E61;
    line-height:27px;
}

.range ul {
    list-style: none;
    margin-left: 0;
}

.range li {
    font-family: 'Vaud Med';
    background-repeat: no-repeat;
    color: #6E6E6D;
    padding-top: 17px;
    padding-bottom: 30px;
    width: 237px;
    position: relative;
}

    .range li > span:first-child {
        font-size: 19px;
    }

    .range li > span sup {
        top: -0.25em;
    }

    .range li > .texte {
        font-size: 13px;
        font-family: 'Vaud Light';
        color: #6E6E6D;
        padding-top: 5px;
        display: block;
    }

    .range li > .type {
        color: #1A1A18 !important;
        font-size: 18px;
    }

    .range li > .arrow {
        float: right;
        margin-top: -2.5px;
    }

/*#region rangeColor */
.purple {
    background-image: url(Images/purpleTop.png);
}

    .purple:hover {
        background-color: #F4F1F6;
        width: 291px;
        background-image: url(Images/purpleHover.png);
        background-position: center;
        background-position-x: right;
        background-repeat: no-repeat;
    }

        .purple:hover > img {
            display: none;
        }

    .purple > span:first-child {
        color: #827296;
    }

.blue {
    background-image: url(Images/blueTop.png);
}

    .blue:hover {
        background-color: #F1F6F9;
        width: 291px;
        background-image: url(Images/blueHover.png);
        background-position: center;
        background-position-x: right;
        background-repeat: no-repeat;
    }

        .blue:hover > img {
            display: none;
        }

    .blue > span:first-child {
        color: #1BBEFF;
    }

.orange {
    background-image: url(Images/orangeTop.png);
}

    .orange:hover {
        background-color: #FEF6E7;
        width: 291px;
        background-image: url(Images/orangeHover.png);
        background-position: center;
        background-position-x: right;
        background-repeat: no-repeat;
    }

        .orange:hover > img {
            display: none;
        }

    .orange > span:first-child {
        color: #F49931;
    }

.red {
    background-image: url(Images/redTop.png);
}

    .red:hover {
        background-color: #FEF2EF;
        width: 291px;
        background-image: url(Images/redHover.png);
        background-position: center;
        background-position-x: right;
        background-repeat: no-repeat;
    }

        .red:hover > img {
            display: none;
        }

    .red > span:first-child {
        color: #F96F57;
    }

.yellow {
    background-image: url(Images/yellowTop.png);
}

    .yellow:hover {
        background-color: #FFF4DC;
        width: 291px;
        background-image: url(Images/yellowHover.png);
        background-position: center;
        background-position-x: right;
        background-repeat: no-repeat;
    }

        .yellow:hover > img {
            display: none;
        }

    .yellow > span:first-child {
        color: #FDCB6B;
    }

.green {
    background-image: url(Images/greenTop.png);
}

    .green:hover {
        background-color: #F6F9F3;
        width: 291px;
        background-image: url(Images/greenHover.png);
        background-position: center;
        background-position-x: right;
        background-repeat: no-repeat;
    }

        .green:hover > img {
            display: none;
        }

    .green > span:first-child {
        color: #6E9180;
    }

.redBrown {
    background-image: url(Images/redBrownTop.png);
}

    .redBrown:hover {
        background-color: #FEF2EC;
        width: 291px;
        background-image: url(Images/redBrownHover.png);
        background-position: center;
        background-position-x: right;
        background-repeat: no-repeat;
    }

        .redBrown:hover > img {
            display: none;
        }

    .redBrown > span:first-child {
        color: #E42424;
    }
/*#endregion*/

.order {
    background-color: transparent;
    border: none;
    background-image: url(Images/order.png);
    background-repeat: no-repeat;
    height: 43px;
    width: 255px;
    color: #fff !important;
    font-family: 'Vaud Med';
    font-size: 18px;
    text-align: left;
    padding-left: 20px;
    padding-top: 26px;
    display: block;
}

nav > .option {
    margin-left: 0;
}

    nav > .option li {
        margin-top: 14px;
        width: 240px;
        border-top: #9F9F9F 2px solid;
        list-style: none;
        color: #9F9F9F;
        font-family: 'Vaud Med';
        font-size: 17px;
        text-transform: none;
        line-height: 24px;
        margin-bottom: -5px;
    }

.articleList {
    width: 300px;
    float: right;
    display: inline-block;
}

/*#region Section 1*/
section > div > article:nth-child(1) {
    font-family: 'Vaud Thin';
    font-size: 16px;
    height: 170px;
    width: 235px;
    display: inline-block;
    float: right;
    margin-top: 35px;
    margin-right: 45px;
    line-height: 20px;
}

    section > div > article:nth-child(1) strong {
        font-family: 'Vaud Med';
    }

        section > div > article:nth-child(1) strong sup {
            top: -.25em;
            right: 4px;
        }
/*#endregion*/

/*#region Section 2 */
section > div > article:nth-child(2) {
    height: 445px;
    width: 235px;
    color: white;
    background-color: #1BBEFF;
    display: inline-block;
    float: right;
    margin-right: 45px;
    padding-bottom: 10px;
    margin-top: 10px;
}

    section > div > article:nth-child(2) ul {
        list-style: none;
    }

        section > div > article:nth-child(2) ul > li {
            font-family: 'Vaud Med';
        }

            section > div > article:nth-child(2) ul > li hr {
                width: 91%;
                color: white;
                float: right;
                margin-right: 15px;
                margin-top: 19px;
                margin-bottom: 19px;
            }

            section > div > article:nth-child(2) ul > li strong {
                display: block;
                margin-bottom: 6px;
                margin-top: 17px;
                font-size: 16px;
            }

            section > div > article:nth-child(2) ul > li a {
                color: white;
                margin-top: 13px;
                display: block;
            }

            section > div > article:nth-child(2) ul > li:nth-child(1) {
                background-image: url(Images/clock.png);
                background-position: left -4px;
                background-repeat: no-repeat;
                padding-left: 60px;
            }

            section > div > article:nth-child(2) ul > li:nth-child(2) {
                background-image: url(Images/v.png);
                background-position: left 20px;
                background-repeat: no-repeat;
                padding-left: 60px;
            }

            section > div > article:nth-child(2) ul > li:nth-child(3) {
                background-image: url(Images/eco.png);
                background-position: left 20px;
                background-repeat: no-repeat;
                padding-left: 60px;
            }
/*#endregion*/

/*#region Section 3*/
section > div > article:nth-child(3) {
    height: 206px;
    width: 215px;
    margin-top: 26px;
    color: black;
    background-color: white;
    display: inline-block;
    float: right;
    margin-right: 45px;
    padding: 10px;
    font-size: 13px;
}

.articleList > article:nth-child(3) .title {
    color: #1BBEFF;
    font-family: 'Vaud Med';
}

.articleList > article:nth-child(3) ul {
    padding-top: 15px;
    list-style: none;
    font-family: 'Vaud Thin';
    margin-left: 0;
}

    .articleList > article:nth-child(3) ul li {
        background-image: url(Images/listItem.png);
        background-position: center left;
        background-repeat: no-repeat;
        padding-left: 30px;
        margin-bottom: 7px;
    }
/*#endregion*/

/*#region InfoPanel*/
.infoPanel {
    width: 349px;
    position: absolute;
    left: 291px;
    display: none;
}


    .infoPanel > article {
        background-color: #fff;
        margin: 10px;
        padding: 10px;
        padding-bottom: 23px;
    }

        .infoPanel > article > h2 > .brand {
            font-weight: bolder;
            font-family: 'Vaud Thin';
        }

        .infoPanel > article > img {
            float: right;
            width: 103px;
        }

        .infoPanel > article > hr:nth-of-type(2) {
            display: block;
            width: 0;
            margin-bottom: 0;
            margin-top: 25px;
        }

        .infoPanel > article > h3 {
            display: inline-block;
            font-family: 'Vaud Med';
            font-size: 18px;
            margin-bottom: 10px;
            padding-bottom: 6px;
            padding-top: 5px;
            margin-left: 15px;
        }

            .infoPanel > article > h3 span {
                line-height: 25px;
            }

        .infoPanel > article > hr:first-of-type {
            margin: 0 0 10px 15px !important;
            width: 155px !important;
            float: left;
        }

        .infoPanel > article > header {
            display: block;
            font-family: 'Vaud Book';
            font-size: 16px;
            margin-bottom: 10px;
            padding-left: 15px;
            min-height: 160px;
        }

            .infoPanel > article > header > .imgPopup {
                float: right;
                margin-left: 10px;
            }

        .infoPanel > article > .desc {
            font-size: 13px;
            font-family: 'Vaud Thin';
            margin-bottom: 10px;
        }

        .infoPanel > article > input {
        }

        .infoPanel > article > a:first-of-type {
            color: #fff;
            height: 30px;
            border: none;
            font-size: 15px;
            font-weight: bolder;
            padding-right: 10px;
            display: inline-block;
            padding-top: 10px;
            text-align: center;
            padding-left: 10px;
            text-decoration: none;
        }


        .infoPanel > article > a:last-of-type {
            color: #fff;
            height: 30px;
            border: none;
            font-size: 15px;
            font-weight: bolder;
            padding-right: 10px;
            display: inline-block;
            padding-top: 10px;
            text-align: center;
            padding-left: 10px;
            text-decoration: none;
        }

        .infoPanel > article > hr {
            margin-bottom: 5px;
            padding-left: 15px;
        }

        .infoPanel > article > h5 {
            font-family: 'Vaud Thin';
            font-size: 13px;
            text-transform: uppercase;
            padding-top: 0;
            display: inline;
            line-height: 30px;
        }

    .infoPanel > h2 {
        color: #fff;
        font-family: 'Helvetica';
        font-weight: bolder;
        font-size: 23.49px;
        margin-top: 15px;
        line-height: 25px;
    }

        .infoPanel > h2 .brand {
            font-size: 24.56px;
            font-family: 'Vaud Med';
            font-weight: bolder;
            margin: 10px 4px 0 10px;
        }

            .infoPanel > h2 .brand sup {
                font-size: 13px;
                top: -15px;
            }

    .infoPanel > article hr {
        color: black;
        width: 100%;
    }

.infoPanelCyto {
    left: 630px;
    z-index: 10000;
}

.titleRank {
    margin-bottom: 10px;
}

.titleRank, .titleISO {
    line-height: 31px;
    font-family: 'Vaud Med';
    font-size: 17px;
    display: inline-block;
    padding: 0 2px 0 2px;
}

.rank, .iso {
    line-height: 31px;
    font-family: 'Vaud Med';
    font-size: 17px;
    display: inline-block;
    padding: 0 2px 0 2px;
}
/*#endregion*/

/*#region Purple InfoPanel*/
.purple > .infoPanel {
    background-color: #D8D3DE;
    top: -142px;
}

    .purple > .infoPanel > h2 > .brand {
        color: #9E92AE;
    }

    .purple > .infoPanel > article > h3 {
        color: #B26BA6;
        /*border-bottom: 2px solid #BAADC8;*/
    }

    .purple > .infoPanel > article > header {
        color: #827296;
    }

    .purple > .infoPanel > article > a:first-of-type {
        background-color: #B26BA6;
    }


    .purple > .infoPanel > article > a:last-of-type {
        background-color: #7696A7;
    }

    .purple > .infoPanel > article > h5 {
        color: #B4AAC0;
    }

    .purple > .infoPanel > article .titleRank, .purple > .infoPanel > article .titleISO {
        background-color: #E9E7ED;
        color: #827296;
    }

    .purple > .infoPanel > article .rank, .purple > .infoPanel > article .iso {
        color: #E9E7ED;
        background-color: #B4AAC0;
    }

    .purple > .infoPanel > article hr:nth-of-type(2) {
        color: #BAADC8;
        width: 100%;
    }
/*#endregion*/

/*#region Blue InfoPanel*/
.blue > .infoPanel {
    background-color: #BBD6E5;
    top: -232px;
}

    .blue > .infoPanel > h2 > .brand {
        color: #95AEBB;
    }

    .blue > .infoPanel > article > h3 {
        color: #1BBEFF;
        /*border-bottom: 2px solid #BBD6E5;*/
    }

    .blue > .infoPanel > article > header {
        color: #7696A7;
    }

    .blue > .infoPanel > article > a:first-of-type {
        background-color: #1BBEFF;
    }

    .blue > .infoPanel > article > a:last-of-type {
        background-color: #7696A7;
    }

    .blue > .infoPanel > article > h5 {
        color: #7696A7;
    }

    .blue > .infoPanel > article .titleRank, .blue > .infoPanel > article .titleISO {
        background-color: #E7EDF0;
        color: #91ABB8;
    }

    .blue > .infoPanel > article .rank, .blue > .infoPanel > article .iso {
        color: #FFFFFF;
        background-color: #7696A7;
    }

    .blue > .infoPanel > article hr:nth-of-type(2) {
        color: #BBD6E5;
        width: 100%;
    }
/*#endregion*/

/*#region Orange InfoPanel*/
.orange > .infoPanel {
    background-color: #FAD6AC;
    top: -262px;
}

    .orange > .infoPanel > h2 > .brand {
        color: #F49931;
    }

    .orange > .infoPanel > article > h3 {
        color: #F49931;
        /*border-bottom: 2px solid #F49931;*/
    }

    .orange > .infoPanel > article > header {
        color: #F49931;
    }

    .orange > .infoPanel > article > a:first-of-type {
        background-color: #F49931;
    }

    .orange > .infoPanel > article > a:last-of-type {
        background-color: #AAA291;
    }

    .orange > .infoPanel > article > h5 {
        color: #F49931;
    }

    .orange > .infoPanel > article .titleRank, .orange > .infoPanel > article .titleISO {
        background-color: #FDEDDC;
        color: #F49931;
    }

    .orange > .infoPanel > article .rank, .orange > .infoPanel > article .iso {
        color: #FFFFFF;
        background-color: #AAA291;
    }

    .orange > .infoPanel > article hr:nth-of-type(2) {
        color: #F49931;
        width: 100%;
    }
/*#endregion*/

/*#region Red InfoPanel*/
.red > .infoPanel {
    background-color: #F4C6BD;
    top: -298px;
}

    .red > .infoPanel > h2 > .brand {
        color: #E5725B;
    }

    .red > .infoPanel > article > h3 {
        color: #F96F57;
        /*border-bottom: 2px solid #F96F57;*/
    }

    .red > .infoPanel > article > header {
        color: #B79898;
    }

    .red > .infoPanel > article > a:first-of-type {
        background-color: #F96F57;
    }

    .red > .infoPanel > article > a:last-of-type {
        background-color: #B79898;
    }

    .red > .infoPanel > article > h5 {
        color: #B79898;
    }

    .red > .infoPanel > article .titleRank, .red > .infoPanel > article .titleISO {
        background-color: #FEE6E2;
        color: #F96F57;
    }

    .red > .infoPanel > article .rank, .red > .infoPanel > article .iso {
        color: #FFFFFF;
        background-color: #B79898;
    }

    .red > .infoPanel > article hr:nth-of-type(2) {
        color: #F96F57;
        width: 100%;
    }
/*#endregion*/

/*#region Yellow InfoPanel*/
.yellow > .infoPanel {
    background-color: #FDD699;
    top: -305px;
}

    .yellow > .infoPanel > h2 > .brand {
        color: #FFA82D;
    }

    .yellow > .infoPanel > article > h3 {
        color: #FFB400;
        /*border-bottom: 2px solid #FFBF27;*/
    }

    .yellow > .infoPanel > article > header {
        color: #B2987C;
    }

    .yellow > .infoPanel > article > a:first-of-type {
        background-color: #FFBF27;
    }

    .yellow > .infoPanel > article > a:last-of-type {
        background-color: #B2987C;
    }

    .yellow > .infoPanel > article > h5 {
        color: #B2987C;
    }

    .yellow > .infoPanel > article .titleRank, .yellow > .infoPanel > article .titleISO {
        background-color: #B2987C;
        color: #FFF;
    }

    .yellow > .infoPanel > article .rank, .yellow > .infoPanel > article .iso {
        color: #FFFFFF;
        background-color: #B2987C;
    }

    .yellow > .infoPanel > article hr:nth-of-type(2) {
        color: #FFBF27;
        width: 100%;
    }
/*#endregion*/

/*#region Green InfoPanel*/
.green > .infoPanel {
    background-color: #CEDBC5;
    top: -307px;
}

    .green > .infoPanel > h2 > .brand {
        color: #9DAF8E;
    }

    .green > .infoPanel > article > h3 {
        color: #45C697;
        /*border-bottom: 2px solid #D6E4C4;*/
    }

    .green > .infoPanel > article > header {
        color: #6E9180;
    }

    .green > .infoPanel > article > a:first-of-type {
        background-color: #45C697;
    }

    .green > .infoPanel > article > a:last-of-type {
        background-color: #AEC49F;
    }

    .green > .infoPanel > article > h5 {
        color: #AEC49F;
    }

    .green > .infoPanel > article .titleRank, .green > .infoPanel > article .titleISO {
        background-color: #AEC49F;
        color: #FFFFFF;
    }

    .green > .infoPanel > article .rank, .green > .infoPanel > article .iso {
        color: #FFFFFF;
        background-color: #AEC49F;
    }

    .green > .infoPanel > article hr:nth-of-type(2) {
        color: #D6E4C4;
        width: 100%;
    }
/*#endregion*/

/*#region redBrown InfoPanel*/
.redBrown > .infoPanel {
    background-color: #DECBC1;
    top: -307px;
}

    .redBrown > .infoPanel > h2 > .brand {
        color: #F95C13;
    }

    .redBrown > .infoPanel > article > h3 {
        color: #F95C13;
        /*border-bottom: 2px solid #D6E4C4;*/
    }

    .redBrown > .infoPanel > article > header {
        color: #E42424;
    }

    .redBrown > .infoPanel > article > a:first-of-type {
        background-color: #F95C13;
    }

    .redBrown > .infoPanel > article > a:last-of-type {
        background-color: #7696A7;
    }

    .redBrown > .infoPanel > article > h5 {
        color: #B4AAC0;
    }

    .redBrown > .infoPanel > article .titleRank, .redBrown > .infoPanel > article .titleISO {
        background-color: #FEEFEC;
        color: #F96F57;
    }

    .redBrown > .infoPanel > article .rank, .redBrown > .infoPanel > article .iso {
        color: #FFFFFF;
        background-color: #E63A20;
    }

    .redBrown > .infoPanel > article hr:nth-of-type(2) {
        color: #FA5D14;
        width: 100%;
    }
/*#endregion*/
/*#endregion*/

.video {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 100000;
    display: none;
}

    .video > iframe {
        height: 480px;
        left: 29%;
        top: 20%;
        width: 640px;
        position: absolute;
        display: none;
        z-index: 1000000;
    }
    .video div {
        position: absolute;
        height: 480px;
        left: 29%;
        top: 20%;
    }
.closeVideo {
    color: white;
    left: 0;
    text-align: right;
    vertical-align: top;
    z-index: 99361;
    font-family: 'Vaud Med';
    cursor: pointer;
    height: 20px;
    width: 40px;
    line-height: 40px;
    font-size: 24px;
    top: -2%;
    position: relative;
}

.rangeLink, .rangeLink:visited, .rangeLink:hover {
    color: #9f9f9f;
    font-family: 'Vaud Med';
    font-size: 17px;
    line-height: 24px;
}

.textPopup {
    display: block;
    width: 140px;
}