@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,800,900');

:root {
    --clr-text: #1C2B39;
    --clr-primary: #00A8E6;
    --clr-secondary: #df7b26;
    --clr-tertiary: #d9eaf7;
    --clr-accent-dark: #1b91df;
    --clr-accent-green: #2ECC40;
    --clr-accent-red: #FF4136;
    --clr-accent-blue: #059FE1;
    --clr-accent-blue-light: #1D9ED9;
    --clr-accent-blue-lighter: #9BC6EA;
    --clr-accent-orange-light: #ECB95B;
    --clr-accent-orange-lighter: #F2CE8E;
}


* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Raleway', sans-serif;
    text-align: center;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: rgba(136,190,231,1);
    text-decoration: none;
}

p {
    line-height: 1.5;
    font-weight: lighter;
    font-size: 1.15em;
}

.container {
    width: 95%;
    margin: 0 auto;
}

.clearfix::after,
section::after,
footer::after {
    content: '';
    display: block;
    clear: both;
}

.leftFloated {
    float: left;
}

.rightFloated {
    float: right;
}

.hidden {
    display: none !important;
}

.smaller {
    font-size: 0.8em;
}

.highlight {
    color: #00A8E6;
    font-weight: bold;
}

/* Column System
================== */
[class^=col-] {
    width: 100%;
    margin-top: 1em;
}

    [class^=col-]:first-child {
        margin-top: 0;
    }

.col-1 {
    width: 33.33333334%;
    float: left;
}


/* typography
================== */

.title {
    font-size: 1.75rem;
    margin-bottom: 1.8em;
    font-family: 'Ubuntu', sans-serif;
    text-shadow: 0px 4px 4px rgba(10,10,10,0.1);
    padding: 0.5em;
}

    .title span {
        margin-top: .8rem;
        font-weight: 300;
        display: block;
        font-size: 0.5em;
        text-align: left;
    }

.title-cta {
    font-size: 1.7em;
    margin: 0 0 .5em;
}

.subTitle h1 {
    margin: 0;
    padding: 0 0 2em;
    text-align:center;
}

.subTitleLogo {
width:200px;
margin-bottom:2em;
}

.unstyled-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

    .unstyled-list a {
        line-height: 1.4;
    }

/* buttons */

.button {
    text-align: left;
    background: none;
    display: inline-block;
    font-size: 1.15rem;
    text-decoration: none;
    text-transform: uppercase;
    border-width: 2px;
    border-style: solid;
    padding: .5em 1.75em;
}

.button-accent {
    text-align: left;
    color: #fff;
    border-color: #fff;
    border-radius: 3px;
    background: rgba(136,190,231,1);
    background: -moz-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(136,190,231,1)), color-stop(100%, rgba(52,119,177,1)));
    background: -webkit-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
    background: -o-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
    background: -ms-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
    background: linear-gradient(to right, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bee7', endColorstr='#3477b1', GradientType=1 );
    font-weight: bold;
}

    .button-accent:hover,
    .button-accent:focus {
        color: #fff;
        background: rgba(136,190,231,1);
        background: -moz-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(136,190,231,1)), color-stop(100%, rgba(52,119,177,1)));
        background: -webkit-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
        background: -o-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
        background: -ms-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
        background: linear-gradient(to right, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
        filter: saturate(0.8);
    }


.button-dark {
    color: #121212;
    border-color: #232323;
}

    .button-dark:hover,
    .button-dark:focus {
        background: #232323;
        color: #fff;
    }
/* header
================== */

header {
    position: relative;
    left: 0;
    right: 0;
    margin: 1.8em 9em;
}


nav {
    margin-top: 3em;
}

    nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    nav li {
        display: inline-block;
        margin: 1em 0.86em;
    }

    nav a {
        font-weight: 600;
        text-decoration: none;
        text-transform: uppercase;
        font-size: .85rem;
        letter-spacing: 1px;
        padding: .75em;
        color: #fff;
        text-shadow: 0px 3px 3px rgba(0,0,0,0.5);
    }

        nav a:hover,
        nav a:focus {
            color: #ddd;
        }

.home-hero {
    height: 75vh;
    padding-top: 0;
}

.booking-header,
.contact-header {
    height: 25vh;
    padding-top: 0;
    background-image: url('../Images/bookingHero.jpg');
    background-repeat: no-repeat;
    background-position-y: 0;
    background-size: 100%;
    margin: 0 auto;
    padding: 1.8em 9em;
}

.logo {
    width: 9.5em;
    margin-top:0.5em;
}

.booking-header .logo {
    width: 7em;
    margin-top: 0.5em;
}

.ctaBtn {
    background: rgba(136,190,231,1);
    background: -moz-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(136,190,231,1)), color-stop(100%, rgba(52,119,177,1)));
    background: -webkit-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
    background: -o-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
    background: -ms-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
    background: linear-gradient(to right, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bee7', endColorstr='#3477b1', GradientType=1 );
    border-radius: 3px;
    color: #fff;
    padding: 0.55em 0.85em 0.55em;
    box-shadow: 0px 4px 4px rgba(0,0,0,0.2);
    text-shadow: none;
}

.orderBtn {
    border:none;
    cursor:pointer;
    background: rgba(136,190,231,1);
    background: -moz-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(136,190,231,1)), color-stop(100%, rgba(52,119,177,1)));
    background: -webkit-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
    background: -o-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
    background: -ms-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
    background: linear-gradient(to right, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bee7', endColorstr='#3477b1', GradientType=1 );
    border-radius: 3px;
    color: #fff;
    margin-top: 2em;
    margin-left: -2em;
    padding: 0.75em 0.95em 0.75em;
    box-shadow: 0px 4px 4px rgba(0,0,0,0.2);
    text-shadow: none;
    text-decoration: none;
    display: block;
    font-weight: bold;
    font-size: 1.4em;
    width: 300px;
    text-transform: uppercase;
}

.soft-table .orderBtn,
.orderTable .orderBtn {
    background: rgba(136,190,231,1);
    background: -moz-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(136,190,231,1)), color-stop(100%, rgba(52,119,177,1)));
    background: -webkit-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
    background: -o-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
    background: -ms-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
    background: linear-gradient(to right, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bee7', endColorstr='#3477b1', GradientType=1 );
    border-radius: 3px;
    color: #fff;
    padding: 0.75em 0.95em 0.75em;
    box-shadow: 0px 4px 4px rgba(0,0,0,0.2);
    text-shadow: none;
    text-decoration: none;
    display: block;
    font-weight: normal;
    font-size: 1.2em;
    width: 300px;
    text-transform: uppercase;
}


.backBtn {
    background: rgba(136,190,231,1);
    border-radius: 3px;
    color: #fff;
    margin: 1em 0;
    padding: 0.5em 0.95em 0.5em;
    box-shadow: 0px 4px 4px rgba(0,0,0,0.2);
    text-shadow: none;
    text-decoration: none;
    display: block;
    font-weight: normal;
    font-size: 1.1em;
    width: 250px;
}


.costsWarning {
    color: #00A8E6;
    font-size: 0.9em;
    padding-top: 0em;
    font-weight: bold;
}

.v-header {
    height: 100vh;
    display: flex;
    align-items: center;
    color: #fff;
}

.container {
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: left;
}


.footerContainer {
    margin: 6em auto;
    text-align: left;
    display: grid;
    width: 100%;
}

    .footerContainer a {
        color: rgba(136,190,231,1);
        text-decoration: none;
    }


.unstyled-list li:first-child {
    margin-bottom: 0.5em;
}

.fullscreen-video-wrap {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    overflow: hidden;
    margin-top: -10vh;
    /*filter: saturate(0.27) ;
  -webkit-transform: skewY(10deg);
  -moz-transform: skewY(10deg);
  -ms-transform: skewY(10deg);
  -o-transform: skewY(10deg);
  transform: skewY(10deg);*/
}

.small-video-wrap {
    position: relative;
    left: 0;
    top: 0;
    z-index: -1;
    width: 700px;
    height: 394px;
    overflow: hidden;
    margin-top: 0;
    /*filter: saturate(0.27) ;
  -webkit-transform: skewY(10deg);
  -moz-transform: skewY(10deg);
  -ms-transform: skewY(10deg);
  -o-transform: skewY(10deg);
  transform: skewY(10deg);*/
}
figure {
    margin: 0;
   
}
figure video {
    min-height: 100%;
    min-width: 100%;
    mask: url('../Images/mask.svg');
    mask-size: cover;
    -webkit-mask: url('../Images/mask.svg');
    -webkit-mask-size: cover;
    mix-blend-mode: overlay;
    /*
  -webkit-transform: skewY(-10deg);
  -moz-transform: skewY(-10deg);
  -ms-transform: skewY(-10deg);
  -o-transform: skewY(-10deg);
  transform: skewY(-10deg);*/
}

.header-overlay {
    height: 75vh;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 1;
    background: #225470;
    opacity: 0.85;
}

.header-content {
    z-index: 2;
}

    .header-content h1 {
        font-size: 50px;
        margin-bottom: 0;
    }

    .header-content p {
        font-size: 1.5rem;
        display: block;
        padding-bottom: 2rem;
    }


/* content
================== */
.sectionFacts {
    width: 100%;
    background-image: url('../Images/BackgroundCircles.svg');
    background-repeat: no-repeat;
    background-position-y: 60px;
    background-size: 100%;
    padding-top: 0;
}

.sectionBack {
    padding: 0;
}

.sectionContent {
    margin: 0 auto;
    display: grid;
    max-width: 1280px;
    grid-gap: 20px;
}


.fact {
    max-width: 650px;
    grid-gap: 20px;
}


h1 {
    color: #00A8E6;
    font-size: 2.5em;
}

h2 {
    text-transform: uppercase;
    color: #00A8E6;
    font-size: 1.5em;
    line-height:1.6
}


h3 {
    text-transform: uppercase;
    color: #00A8E6;
    font-size: 1.25em;
    padding-top:2em;
}

.factImg {
    width: 180px;
    justify-self: center;
}

.sectionDetailImages {
    margin: 5em 0 6em;
    background: rgb(2,0,36);
    background: -moz-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,154,222,1) 50%, rgba(2,0,36,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,154,222,1) 50%, rgba(2,0,36,1) 100%);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,154,222,1) 50%, rgba(2,0,36,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#020024",GradientType=1);
}

.sectionDetailImages img {
    align-self: center;
    border-radius: 5px;
    box-shadow: 0 10px 30px 0 rgba(49,52,57,.3), 0 10px 30px rgba(0,0,0,.08);
}

.sectionSwissQuality {
    background: rgb(2,0,36);
    background: -moz-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(236,28,36,1) 0%, rgba(145,17,22,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(236,28,36,1) 0%, rgba(145,17,22,1) 100%);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(236,28,36,1) 0%, rgba(145,17,22,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#911116",GradientType=1);
}

    .sectionSwissQuality h1 {
        color: #fff;
    }

    .sectionSwissQuality p {
        color: #fff;
    }

.swissCrossImg {
    width: 140px;
}

.sectionSwissQuality .sectionContent {
    text-align: left;
    grid-template-columns: 15% 85%;
    max-width: 750px;
}

.sectionGehause {
    background-image: url('../Images/BackgroundCircles.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
}

    .sectionGehause .sectionContent {
        text-align: right;
        margin: 3em auto;
    }

.sectionData {
    justify-content: center;
    background-color: #121212;
    background-image: url('../Images/BackgroundCircles.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top;
}

    .sectionData .sectionContent {
        text-align: left;
        max-width: 960px;
        padding: 1em;
        grid-template-columns: 100%;
    }

.sectionEmotionVideo .sectionContent {
    text-align: left;
    grid-template-rows: 80px 30px 60px auto;
    margin-bottom: 0em;
    padding: 2em 0 3em;
}

.sectionOrder .sectionContent {
    text-align: left;
    margin-bottom: 3em;
    border: solid 1px #f1f1f1;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 19px 40px -20px;
    background: rgb(249,249,249);
    background: -moz-linear-gradient(140deg, rgba(249,249,249,1) 0%, rgba(228,251,255,1) 100%);
    background: -webkit-linear-gradient(140deg, rgba(249,249,249,1) 0%, rgba(228,251,255,1) 100%);
    background: linear-gradient(140deg, rgba(249,249,249,1) 0%, rgba(228,251,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f9f9f9",endColorstr="#e4fbff",GradientType=1);
    padding: 2em 0 3em;
}


.sectionBookingDetails .sectionContent {
    text-align: left;
    grid-template-columns: 40% 60%;
    margin-bottom: 3em;
    border: solid 1px #f1f1f1;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 19px 40px -20px;
    background-color: rgb(255, 255, 255);
    padding: 2em 0 3em;
}

.sectionInfos .sectionContent {
    text-align: left;
    grid-template-columns: 100%;
    margin-bottom: 3em;
    border: solid 1px #f1f1f1;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 19px 40px -20px;
    background-color: rgb(255, 255, 255);
    padding: 3em;
}

.sectionInfos .sectionContent p, 
.sectionInfos .sectionContent h3{    
    padding: 0;
    margin:0;
}

.orderImg {
    width: 450px;
    justify-self: center;
    grid-row: 2 / span 3;
}

.sectionOrder .sectionContent h1 {
    text-align: center;
}

.colorItem {
    cursor: pointer;
}

div.selectedColor {
    border: solid 2px #00A8E6;
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 5px #9ecaed;
}

.personalizedInfos {
    border: solid 1px #aaa;
    background-color: #fff;
    margin: 2em 2em 2em 0;
    padding: 1em;
}

    .personalizedInfos h4 {
        color: #00A8E6;
    }

    .personalizedInfos h4,
    .personalizedInfos p {
        margin: 0;
    }

.orderColorOrange {
    color: #504e4f;
}

.price {
    color: #504E4F;
    margin-top: 0.5em;
    margin-left: 1em;
    font-size: 1.95em;
    font-style: italic;
    font-weight: bold; 
}

.priceExcl {
    color: #999;
    font-size: 0.5em;
    margin-left: 1em;
    font-style: italic;
    font-weight: normal;
}

.rebateNow {
    line-height: 1.5;
    color: #b33445;
}

.rebateNowTop {
    line-height: 1.2;
    font-size: 1.8em;
    color: #feaf1f;
    background-color: rgba(20,20,20,0.4);
    max-width: 350px;
    padding: 10px 20px;
}

.rebateNow .rebateText {
    margin:0;
    background-color: #b33445;
}

.priceNormal {
    color: #999;
    font-size: 0.7em;
    margin-left: 0;
    font-style: italic;
    font-weight: normal;
}

.rebateText {
    background-color: #b33445;
    padding: 5px 7px;
    color: #fff;
    font-size: 0.85em;
   
    font-style: italic;
    font-weight: bold;
}

.sectionOrder .sectionContent h1 {
    grid-column: 1 / span 2;
}


/* footer
================== */
footer {
    background: #232323;
    color: #fff;
    text-align: left;
    padding: 5em 0;
}

.btn {
    background: #34b3a0;
    color: #fff;
    font-size: 1.2rem;
    padding: 1rem 2rem;
    text-decoration: none;
}


.section {
    padding: 20px 0;
}

.section-b {
    background: #333;
    color: #fff;
}

/* tables
====================== */
.wrap-table {
    border-radius: 3px;
    overflow: hidden;
    border: solid 1px #ddd;
    width: 100%;
    -webkit-box-shadow: 0px 0px 3px 3px rgba(230,230,230,0.16);
    -moz-box-shadow: 0px 0px 3px 3px rgba(230,230,230,0.16);
    box-shadow: 0px 0px 3px 3px rgba(230,230,230,0.16);
    background-color: #fff;
    margin-bottom: 3em;
}

.table {
    width: 100%;
    display: table;
    margin: 0;
}

.table, .row {
    width: 100% !important;
}

.row {
    display: table-row;
    background: #fff;
}


    .first p {
        margin-right: 1.5em;
    }

.row .cell {
    font-family: Verdana;
    font-size: 15px;
    color: #1C2B39;
    line-height: 1.3;
    font-weight: unset !important;
    padding: 0.1em 0 0.1em 1em;
    border-bottom: 1px solid #f2f2f2;
}

.cell p {
    line-height: 1.7;
}

    .cell img {
        display: inline;
        margin-right: 1em;
    }


.soft-table {
    overflow: hidden;
    width: 100%;
    background-color: #fff;
    margin-bottom: 3em;
}

    .soft-table div:nth-of-type(1n) {
        width: 240px;
    }

    .soft-table div:nth-of-type(2n) {
        width: 480px;
    }


    .soft-table .row .cell {
        padding: 0;
    }

    .soft-table .row .price {
        padding: 0;
    }

.orderTable .row {
    display:grid;
}

.inputCell {
    display: grid;
    justify-items: stretch;
    width: 100%;
    padding: 0 !important;
}

    .inputCell h3 {
        padding: 0;
        margin: 1em 0 0.5em;
    }


.checkboxInput {
    width:24px;
    height: 24px;
    margin-right:10px;
}

.checkboxCell {
    display: flex;
    align-items: center;
}

.gehauseImg {
    max-width: 400px;
    width: 400px;
}
/* select inputs
====================== */
.select-css {
    display: block;
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.3;
    color: #222;
    padding: .4em 1.4em .5em .8em;
    width: 100%;
    max-width: 15em;
    height: 2.25em;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: .5em;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}
.longSelect {
    max-width: 260px;
}

    .select-css::-ms-expand {
        display: none;
    }

    .select-css:hover {
        border-color: #888;
    }

    .select-css:focus {
        border-color: #aaa;
        box-shadow: 0 0 1px 1px rgba(59, 153, 252, .7);
        box-shadow: 0 0 0 3px -moz-mac-focusring;
        color: #222;
        outline: none;
    }

    .select-css option {
        font-weight: normal;
    }

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
    background-position: left .7em top 50%, 0 0;
    padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
    color: graytext;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}

    .select-css:disabled:hover, .select-css[aria-disabled=true] {
        border-color: #aaa;
    }

/* Other Color Palette styles */
.otherColorPalette {
    display: grid;
    grid-template-columns: repeat(5,30px);
    grid-template-rows: repeat(3,30px);
    grid-gap: 1em;
    margin-top: 1em;
}

.colorItem {
    width: 30px;
    height: 30px;
    border: solid 1px #888;
    background-color: #ea6414;
}

.color1 {
    background-color: #34b3a0;
}

.color2 {
    background-color: #225470;
}

.color3 {
    background-color: #ea6414;
}

.color4 {
    background-color: #1f5850;
}

.color5 {
    background-color: #78b334;
}

.color6 {
    background-color: #b1b334;
}

.color7 {
    background-color: #8f34b3;
}

.color8 {
    background-color: #b33445;
}

.color9 {
    background-color: #34b3a8;
}

.color10 {
    background-color: #b33445;
}

.color11 {
    background-color: #b334b3;
}

/* CONTACT FROM */

.sectionContact {
    padding: 0 0 6em;
}

.narrowSection {
    padding: 3em 0 0 0;
}

.sectionContact .sectionContent {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-row-gap: 3.5em;
    grid-column-gap: 3.5em;
    grid-column: 1 / span 6;
    padding-top: 5.75em;
}

.company-info h3, .company-info ul {
    text-align: center;
    margin: 1.25rem 0 1rem 0;
    list-style: none;
}

.contact h3 {
    text-align: left;
    margin: 1.25rem;
    list-style: none;
}

.company-info {
    background: #f2f2f2;
}

    .company-info li {
        color: #5a6670;
        line-height: 1.5em;
        text-align: left;
    }

.contact {
    background: #faf9ff;
}

.formContact > * {
    padding: 1em;
}

.contact form .full {
    grid-column: 1 / 3;
}

.contact form p {
    color: #111;
    margin: 0;
}

.formContact p {
    color: #111;
    margin: 0;
}

.contact form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0;
    text-align: left;
    margin: 0 0 1em 1em;
}

.contact input[type=text] {
    margin: 0.5em 0em !important;
}

    .contact form textarea {
        font-size: 1.05em;
        line-height: 1.5em;
        height: 7em;
        padding: 0.75em 0 2em 0.75em;
    }

    .contact form button, .contact form input, .contact form textarea {
        padding: 0.8em 0.5em;
        border: 1px solid #92bde7;
    }

textarea {
    font-family: arial, sans-serif;
    font-size: 1.2em;
    padding: 1em;
}

#successMessage {
    color: #42b040;
    border: dashed 1px #42b040;
    padding: 0.5em;
    margin-top: 1em;
}

#errorMessage {
    color: #b04040;
    border: dashed 1px #b04040;
    padding: 0.5em;
    margin-top: 1em;
}

#errorMessage {
    display: none;
    visibility: hidden;
}

input[type=text] {
    height: 35px;
    padding: 1em 0.5em;
    font-size: 1.2em;
    margin:1em 0em;    
}
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: #666;
    -webkit-box-shadow: none;
    transition: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #999; 
}

.largeInput {
    width: 340px;
}

.smallInput {
    width: 65px;
}

::-webkit-input-placeholder { /* Edge */
    text-transform: uppercase;
    font-size: 0.8em;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-size: 0.8em;
    text-transform: uppercase;
}

::placeholder {
    text-transform: uppercase;
    font-size: 0.8em;
}



.selectChoice {
    margin-bottom: 1.5em;
}

.selectChoice label {
    display: block;
}

.typeSelectBox.typeSelectBox:nth-of-type(1) {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: 0;
}

.typeSelectBox.typeSelectBox:last-of-type {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-right: solid 1px #aaa;
}

div.typeSelectBox {
    background-color: #fff;
    font-size: 18px;
    clear: both;
    cursor: pointer;
    max-width: 300px;
    padding: 8px 24px;
    display: inline;
    border-top: solid 1px #aaa;
    border-bottom: solid 1px #aaa;
    border-left: solid 1px #aaa;
    -webkit-box-shadow: 0px 0px 3px 3px rgba(230,230,230,0.26);
    -moz-box-shadow: 0px 0px 3px 3px rgba(230,230,230,0.26);
    box-shadow: 0px 0px 3px 3px rgba(230,230,230,0.26);
    background-size: 18px;
    background-position: left center;
    background-repeat: no-repeat;
    text-align: center;
}

    div.typeSelectBox:hover {
        border-color: #ccc;
    }

    div.typeSelectBox.active {
        padding: 8px 23px 8px 24px;
        border-color: var( --clr-secondary);
        border-right: solid 1px !important;
        border-right-color: var(--clr-secondary) !important;
        background-color: var(--clr-accent-orange-lighter);
    }


@media only screen and (max-width:40em) {

    header {
        margin: 1.8em 2em;
    }
    .container {
        max-width: 90%;
        margin: 10em auto;
    }

    h1 {
    font-size:2em;
    }

    .small-video-wrap {
        width:100%;
    }

    .fullscreen-video-wrap {
        margin-top: 0;
    }

    .fullscreen-video-wrap {
        margin-top: -2vh;
    }

    section {
        padding: 1em;
    }

    .title {
        font-size: 2.1rem;
        text-align: center;
        background-color: rgba(10,10,10,0.4);
        box-shadow: 0px 4px 4px rgba(0,0,0,0.2);
        color: #fff;
        margin-bottom: 0.5em;        
    }

    nav {
        position: fixed;
        background-color: rgba(136,190,231,1);
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        z-index: 12;
    }
    nav li {
        margin: 0;
        padding: 0.25em 0.5em;
        display: block;
    }
    nav li:nth-child(1) {
        margin-bottom:0.25em;
    }
    nav a {
        font-size:1rem;
    }

    .home-hero {
        height: auto;
    }
    .contact form textarea {
        width: 85%;
    }

    .sectionFacts .sectionContent {
        grid-template-rows: auto;
    }


    .button-accent {
        justify-self: center;
        display: grid;
        margin: 0 auto;
        align-self: center;
        max-width: 240px;
    }


    .cell p {
        padding-right: 0;
    }
        .fact {
        margin:0 auto;
    }
    .specialFact {
        padding-top: 0em;
    }
    .sectionEmotionVideo .sectionContent {
        grid-template-columns: 100%;
        grid-template-rows: auto;
    }
    
    .cell {
        display: block;
        text-align:center;
    }

    .first {
        width: unset;
        text-align: center;
    }
    .sectionEmotionVideo .sectionContent {
        grid-template-columns: 100%;
    }
    .selectChoice {
        display: grid;
        justify-content: center;
    }
    .typeSelectBox.typeSelectBox:nth-of-type(1) {
        border-right: solid 1px #aaa;
    }
    
    .sectionSwissQuality .sectionContent {
        text-align: left;
        grid-template-columns: 100%;
        max-width: 100%;
    }
    .sectionGehause .sectionContent {
        grid-template-columns: 100%;
        max-width: 960px;
    }
    .sectionDetailImages img {
        margin-top: 0;
        margin-bottom: 1em;
    }

    .soft-table .row .cell {
        padding: 0 1.5em;
        width: 100%;
    }

    .sectionOrder .sectionContent {
        grid-template-columns: 100%;
        grid-template-rows: auto auto auto auto;
        justify-content: center;
        justify-items: center;
    }

    .sectionBookingDetails .sectionContent {
        grid-template-columns: 100%;
    }

        .sectionBookingDetails .sectionContent h2 {
            text-align: center;
        }

    .sectionOrder .sectionContent h1 {
        grid-column: 1;
    }
    footer {
        padding: 1em 0 8em;
    }

    .footerContainer {
        grid-template-columns: 100%;
        margin: 0 auto;
        padding: 0 1em;
    }

    .soft-table .orderBtn,
    .orderTable .orderBtn {
        margin: 1em auto;
    }

    .logo {
        -webkit-filter: drop-shadow( 4px 4px 5px rgba(0, 0, 0, .3));
        filter: drop-shadow( 4px 4px 5px rgba(0, 0, 0, .3));
    }

    .subLogo {
        display:none;
    }

    figure video {
        margin-left: -18em;
        animation-iteration-count: 1;
        animation: videoSlide 5s ease-in-out;
    }

    .booking-header, .contact-header {
        background-size: cover;
    }

    textarea {
        width: 90%;
        max-width: 90%;
    }


    .sectionOrder form {
        padding-left:2em;
    }

    .orderBtn {
        margin-left: 0;
        width: 250px;
        font-size: 1.1em;
    }

    .sectionOrder h2 {
        text-align:center;
    }
    .rebateText {
        margin-top:5px;
        display: block;
        margin-left:0;
    }
    h3 {
        padding-top: 1em;
    }

    .checkboxCell {
        justify-content: center;
    }
}

@keyframes videoSlide {
    0% {
        margin-left:-3em;
    }

    100% {
        margin-left: -18em;
    }
}


@media only screen and (min-width: 40em) {

    .sectionContent {
        grid-template-columns: 1fr;
    }

    .container {
        max-width: 90%;
        margin: 15em auto;
    }

    .home-hero {
        height: auto;
    }

    .logo {
        float: left;
    }

    nav {
        float: right;
    }

        nav a {
            font-size: 1.2rem;
        }

        nav li {
            margin: 2em 0.35em;
            display: block;
        }

    [class^=col-] {
        float: left;
        padding: 0 1em;
        margin-top: 0;
    }

        [class^=col-]:first-child {
            padding-left: 3em;
        }

        [class^=col-]:last-child {
            padding-right: 6em;
        }

    .col-3 {
        width: 50%;
    }

    .col-1 {
        width: 100%;
    }

    .cell p {
        padding-right: 1em;
    }

    .typeSelectBox.typeSelectBox:nth-of-type(1) {
        border-right: none;
    }


    .booking-header, .contact-header {
        background-size: cover;
    }

    .title {
        font-size: 2.5rem;
        color: #fff;
        background-color: rgba(20,20,20,0.4);
        text-align: left;
    }

        .title span {
            margin-top: .9rem;
        }

    .fullscreen-video-wrap {
        margin-top: -10vh;
    }

    .soft-table .row .cell {
        padding: 0;
    }

    header {
        height: 12em;
        margin: 1.8em 3em;
    }

    .title-cta {
        font-size: 2em;
    }

    .button {
        font-size: 1.5rem;
    }

    .contact form textarea {
        width: 85%;
    }

    .cell {
        display: table-cell;
        text-align: left;
    }

    .first {
        width: 320px;
        text-align: right;
    }

    .subLogo {
        justify-self: unset;
        width: 9.5em;
        display: none;
    }

    .sectionEmotionVideo .sectionContent {
        grid-template-columns: 100%;
        grid-template-rows: auto auto;
    }

    .sectionBookingDetails .sectionContent {
        grid-template-columns: 40% 60%;
    }

    .sectionOrder form {
        margin-left: 0em;
    }

    textarea {
        width: unset;
        max-width:unset;
    }
    .footerContainer {
        max-width: 960px;
        grid-template-columns: 33% 33% 33%;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 60em) {

    section {
        padding: 3em;
    }
    .sectionContent {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .home-hero {
        height: 50vh;
        margin-top: 9em;
    }

    nav li {
        display: inline-block;
    }


    .container {
        max-width: 80%;
        margin: 0 0 0 auto;
    }

    .title {
        font-size: 2.5rem;
        color: #fff;
        background-color: rgba(20,20,20,0.4);
        text-align: left;
    }

    .contact form textarea {
        width: 85%;
    }


    .sectionFacts .sectionContent {
        grid-template-rows: 260px 30px 120px;
    }
    .specialFact {
        padding-top: 6em;
    }
    .sectionSwissQuality .sectionContent {
        text-align: left;
        grid-template-columns: 15% 85%;
        max-width: 960px;
    }

    .sectionGehause .sectionContent {
        grid-template-columns: 75% 25%;
        max-width: 960px;
    }
    .sectionDetailImages img {
        margin-top: -8em;
        margin-bottom: -8em;
    }

    .sectionOrder .sectionContent {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 80px 70px 60px auto;
    }
    .subLogo {
        justify-self: unset;
        width: 9.5em;
        display: inline;
    }
}

@media only screen and (min-width: 80em) {
    .home-hero {
        height: 45vh;
    }

    .container {
        max-width: 48%;
        margin: 0 0 0 auto;
    }

    .title {
        font-size: 3rem;
    }

    .formContact > * {
        padding: 0.5em;
    }

    .selectChoice {
        display: grid;
    }

    .formContact {
        grid-row: 1;
        color: #fff;
        display: grid;
        grid-template-columns: 1fr 2fr;
    }
    .fact {
        margin: 0;
    }
    .sectionEmotionVideo .sectionContent {
        grid-template-columns: 50% 50%;
    }
    .soft-table .orderBtn,
    .orderTable .orderBtn {
        margin: 1em 0;
    }

}

@media only screen and (min-width: 90em) {

    .home-hero {
        height: 65vh;
    }

    .container {
        max-width: 48%;
        margin: 0 0 0 auto;
    }


    .selectChoice {
        display: block;
    }
    .title {
        font-size: 3rem;
        max-width: 680px;
    }
}


@media only screen and (min-width: 100em) {

    header {
        height: 12em;
        margin: 0 auto;
        max-width: 1400px;
    }

    .home-hero {
        height: 55vh;
    }

    .fullscreen-video-wrap {
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin-top: 0;
        justify-content: center;
        background: #fff;
        align-items: start;
        padding: 0;
        display: grid;
        grid-template-rows: 60%;
    }

    .container {
        max-width: 40%;
    }

    .fullscreen-video-wrap figure {
        max-width: 1900px;
        z-index: 2;
        width: 1500px;
        /* margin: 0 auto; */
    }
}