@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;
}

html {
    scroll-behavior: smooth;
    background-color: #000;
    font-size: 16px;
}

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

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

a {
    color: #b8b8b8;
    text-decoration: underline;
    line-height: 1.3;
}

p {
    line-height: 1.5;
    font-weight: lighter;
    font-size: 1.2em;
    color: #b8b8b8;
}

h2 {
    color: #7b7a7d;
    font-weight: lighter;
    letter-spacing: 0.5px;
    line-height: 1.6;
}

    h2.text {
        font-weight: 300;
        font-size: 1.2em;
    }

.leftAligned {
    text-align: left;
}

.rightAligned {
    text-align: right;
}

.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;
}

@keyframes scroll {
    0% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(60px);
    }
}

svg #wheel {
    animation: scroll ease 2s infinite;
}

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

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

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


.leftAligned {
    float: left;
}

.rightAligned {
    float: right;
}

.textAlignment {
    width: 40%;
}


#SwissolinaImage{
    display:grid;
    margin:0 auto;
}

/* 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;
}

.grecaptcha-badge{
    display:none;
}

.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;
    }


.centerFooter {
    margin: 0 auto;
    width: 300px;
    color: #aaa;
}

/* 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;
}

.centerStars {
    display: grid;
    margin: 0 auto;
    justify-self: center;
}

.button-accent {
    text-align: left;
    color: #fff;
    border-color: #fff;
    border-radius: 3px;
    background: rgba(209,87,87,1);
    background: -moz-linear-gradient(left, rgba(209,87,87,1) 0%, rgba(249,97,97,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(209,87,87,1)), color-stop(100%, rgba(249,97,97,1)));
    background: -webkit-linear-gradient(left, rgba(209,87,87,1) 0%, rgba(249,97,97,1) 100%);
    background: -o-linear-gradient(left, rgba(209,87,87,1) 0%, rgba(249,97,97,1) 100%);
    background: -ms-linear-gradient(left, rgba(209,87,87,1) 0%, rgba(249,97,97,1) 100%);
    background: linear-gradient(to right, rgba(209,87,87,1) 0%, rgba(249,97,97,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(209,87,87,1);
        background: -moz-linear-gradient(left, rgba(209,87,87,1) 0%, rgba(249,97,97,1) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(209,87,87,1)), color-stop(100%, rgba(249,97,97,1)));
        background: -webkit-linear-gradient(left, rgba(209,87,87,1) 0%, rgba(249,97,97,1) 100%);
        background: -o-linear-gradient(left, rgba(209,87,87,1) 0%, rgba(249,97,97,1) 100%);
        background: -ms-linear-gradient(left, rgba(209,87,87,1) 0%, rgba(249,97,97,1) 100%);
        background: linear-gradient(to right, rgba(209,87,87,1) 0%, rgba(249,97,97,1) 100%);
        filter: saturate(0.8);
    }


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

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

.fullOrder h3 {
    font-weight: normal;
}


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

li {
    display: inline-block;
}



/* header
================== */
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 {
    margin-top: 0.5em;
}

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

.ctaBtn {
    /*linear-gradient(to right, rgb(209 87 87) 0%, rgb(249 97 97) 100%) NEU ROT
    background: linear-gradient(to right, rgba(209,87,87,1) 0%, rgba(249,97,97,1) 100%);*/
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(left, rgba(174, 174, 174,1) 0%, rgba(255, 255, 255,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 255, 255,1)), color-stop(100%, rgba(255, 255, 255,1)));
    background: -webkit-linear-gradient(left, rgba(174, 174, 174,1) 0%, rgba(255, 255, 255,1) 100%);
    background: -o-linear-gradient(left, rgba(174, 174, 174,1) 0%, rgba(255, 255, 255,1) 100%);
    background: linear-gradient(to right, rgb(174 174 174) 0%, rgb(255 255 255) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bee7', endColorstr='#3477b1', GradientType=1 );
    border-radius: 3px;
    color: #191919;
    border: solid 1px #d0d0d0;
    padding: 0.55em 0.85em 0.55em;
    box-shadow: 0px 4px 4px rgba(0,0,0,0.2);
    text-shadow: none;
    text-decoration: none !important;
}

.ctaMore {
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(left, rgba(174, 174, 174,1) 0%, rgba(255, 255, 255,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 255, 255,1)), color-stop(100%, rgba(255, 255, 255,1)));
    background: -webkit-linear-gradient(left, rgba(174, 174, 174,1) 0%, rgba(255, 255, 255,1) 100%);
    background: -o-linear-gradient(left, rgba(174, 174, 174,1) 0%, rgba(255, 255, 255,1) 100%);
    background: linear-gradient(to right, rgb(174 174 174) 0%, rgb(255 255 255) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bee7', endColorstr='#3477b1', GradientType=1 );
    border-radius: 3px;
    color: #191919;
    border: solid 1px #d0d0d0;
    padding: 0.55em 0.85em 0.55em;
    box-shadow: 0px 4px 4px rgba(0,0,0,0.2);
    text-shadow: none;
    text-decoration: none !important;
    /* Apply the pulse animation */
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.orderBtn {
    border: none;
    cursor: pointer;
    background: rgba(209,87,87,1);
    background: -moz-linear-gradient(left, rgba(209,87,87,1) 0%, rgba(249,97,97,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(209,87,87,1)), color-stop(100%, rgba(249,97,97,1)));
    background: -webkit-linear-gradient(left, rgba(209,87,87,1) 0%, rgba(249,97,97,1) 100%);
    background: -o-linear-gradient(left, rgba(209,87,87,1) 0%, rgba(249,97,97,1) 100%);
    background: -ms-linear-gradient(left, rgba(209,87,87,1) 0%, rgba(249,97,97,1) 100%);
    background: linear-gradient(to right, rgba(209,87,87,1) 0%, rgba(249,97,97,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(209,87,87,1);
    background: -moz-linear-gradient(left, rgba(209,87,87,1) 0%, rgba(249,97,97,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(209,87,87,1)), color-stop(100%, rgba(249,97,97,1)));
    background: -webkit-linear-gradient(left, rgba(209,87,87,1) 0%, rgba(249,97,97,1) 100%);
    background: -o-linear-gradient(left, rgba(209,87,87,1) 0%, rgba(249,97,97,1) 100%);
    background: -ms-linear-gradient(left, rgba(209,87,87,1) 0%, rgba(249,97,97,1) 100%);
    background: linear-gradient(to right, rgba(209,87,87,1) 0%, rgba(249,97,97,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(209,87,87,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;
}

.selectionTextArea {
    padding: 1em 1.25em;
    background-color: #ffffff;
    border-radius: 7px;
}

.selectionText {
    line-height: 1.4;
    font-weight: normal;
}

.selectionCosts strong {
    text-decoration: underline;
}

.secTitle {
    width: 25%;
}

.secDesc {
    width: 25%;
}

.secPrice {
    width: 20%;
    text-align: right;
}

.secPuffer {
    width: 30%;
}

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

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

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

.twoRows {
    grid-row: span 2;
}


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

    .footerContainer a {
        color: rgba(209,87,87,1);
        text-decoration: none;
    }


.headerContent {
    width: 90%;
    margin: 0 auto;
    color: #fff;
    padding: 2em 0 0 0;
}


    .headerContent a {
        border: solid 1px #bbb;
        padding: 0.5em 0.75em;
        border-radius: 12px;
        color: #bbb;
        float: right;
        margin-right: 1em;
    }

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

.fullscreen-video-wrap {
    /*position: absolute;*/
    top: 0;
    left: 0;
    width: 100%;
    height: 85vh;
    overflow: hidden;
}

    .fullscreen-video-wrap video {
        min-width: 100%;
        min-height: 100%;
    }

.overview {
    z-index: 1;
}

.small-video-wrap {
    left: 0;
    top: 0;
    z-index: 250;
    width: 850px;
    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: 1080px;
        max-width: 100%;
  -webkit-transform: skewY(-10deg);
  -moz-transform: skewY(-10deg);
  -ms-transform: skewY(-10deg);
  -o-transform: skewY(-10deg);
  transform: skewY(-10deg);*/
        width: 540px;
        border-radius: 35px;
        -webkit-filter: drop-shadow(8px 8px 7px rgba(0, 0, 0, .3));
        filter: drop-shadow(8px 8px 7px rgba(0, 0, 0, .3));
    }

.header-overlay {
    height: 75vh;
    position: absolute;
    top: 0;
    left: 0;
    width: 85vh;
    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;
    }
/* title
================== */
.titleSection {
    display: grid;
}

.downArrow {
    position: fixed;
    top: 90%;
    z-index: 30;
}

    .downArrow .ctaBtn {
        margin: 0 auto;
        display: grid;
        width: 199px;
    }

.spaceShipSection {
    position: sticky;
    height: 255vh;
    z-index: 5;
    padding-top: 60em;
}

    .spaceShipSection h2 {
        margin-top: -100px;
    }

.spaceShip {
    position: fixed;
    left: -180px;
    top: 200px;
    width: 70%;
    min-width: 250px;
    max-width: 1250px;
    z-index: -1;
}

.spaceShipSection h2 {
    color: #fff;
    font-size: 2.6em;
    text-align: center;
    z-index: 1;
    position: relative;
}

.doubleLine {
    display: grid;
    max-width: 100%;
    grid-template-columns: 100%;
}

    .doubleLine a {
        display: block;
        max-width: 180px;
        font-size: 1em;
        margin-right: 1em;
    }

.galaxySection {
}


.twospan {
    grid-column: span 2;
}

.ctaMore {
    z-index: 100;
    max-height: 43px;
}

.album {
    position: fixed;
    z-index: 100;
    top: 4em;
    left: 2em;
    margin: 0em auto 2em;
    margin-bottom: 3em;
    width: 80%;
    max-height: 90%;
    max-width: 1280px;
    border: solid 1px #fff;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.closeButton {
    position: absolute;
    right: 9px;
    left: unset;
    top: 9px;
    z-index: 333;
    border: 0;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    cursor: pointer;
    background-color: transparent;
    padding: 0.08em 0.2em !important;
    font-size: 25px !important;
    color: #fff !important;
    background-color: #858585 !important;
}

    .closeButton:hover {
        background-color: #454545 !important;
    }

.galaxyDiv {
    position: sticky;
    padding: 0;
    top: 0px;
    margin-left: 50%;
    width: 50%;
    z-index: 1;
}

.galaxy2 {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

.shopImg {
    border-radius: 14px;
}

.mainStars {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #fff;

    background-image: url('../Images/starsBG.webp?v=1.5');
    background-repeat: repeat;
    z-index: 0;
}


.mainStarsConfig {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #fff;
    background-image: url('../Images/starsBG.webp?v=1.5');
    background-repeat: repeat;
    z-index: 0;
}

.stratoSection {
    width: 100%;
    background-image: url('../Images/stratoBreak.webp?v=1.5');
    background-repeat: no-repeat;
    background-size: 110%;
    background-position: bottom center;
    height: 120vh;
    position: relative;
    padding: 0;
    padding-top: 20vh;
}

    .stratoSection h1 {
        text-align: center;
    }

.stratoBreakSection {
    background: rgb(255,255,255);
    position: relative;
    padding: 0;
    margin-top: -1px;
}

.stratoContentLeft {
    display: grid;
    grid-template-columns: 20% 80%;
    background: rgb(255,255,255);
    position: relative;
    padding: 0;
    max-width: 1280px;
    margin: 0 auto;
}

    .stratoContentLeft img {
        z-index: -1;
    }

    .stratoContentLeft h2 {
        z-index: 3;
    }

.contentBottom {
    margin-bottom: 9em;
}

.stratoContentRight {
    display: grid;
    grid-template-columns: 65% 35%;
    background: rgb(255,255,255);
    position: relative;
    padding: 0;
    max-width: 1280px;
    margin: 0 auto;
}

    .stratoContentRight img {
        grid-row: span 2;
    }

    .stratoContentLeft h1,
    .stratoContentRight h1 {
        color: #6d6d6d;
        grid-column: span 2;
    }

    .stratoContentLeft p,
    .stratoContentRight p {
        color: #6d6d6d;
    }

.stratoContentLeft h2 {
    grid-column: span 2;
}

.overviewImgs {
    display: grid;
    grid-template-columns: 50% 50%;
    margin-top: 20em;
}

.logoTop {
    position: fixed;
    right: 30px;
    top: 20px;
    width: 300px;
    display: block;
    z-index: 33;
}

.logoTopConf {
    position: absolute;
    right: 30px;
    top: 0px;
    width: 300px;
    display: block;
    z-index: 33;
}

.albumDescriptor {
    position: relative;
}

.priceTag {
    position: absolute;
    bottom: 30px;
    right: 65px;
    color: #a5a4a4;
    font-weight: lighter;
}

.sectionConfigurator p {
    color: #000;
    font-weight: normal;
}

.textDescriptor {
    font-size: 1em;
    line-height: 1.2;
    color: #1f773b !important;
    margin: 0 0.15em 0.2em 1.25em;
}

.textDescriptorPrice {
    font-size: 0.85em;
    line-height: 1;
    margin: 0;
}

.albumDescriptor p {
    position: relative;
    bottom: 0.25em;
    z-index: 2;
    background-color: #656565;
    color: #fff;
    padding: 0.75em 1.25em;
    font-size: 0.95em;
    margin-top: -0.25em;
}

.costsInfo {
    color: #2e2e2e;
    font-weight: lighter;
}

.selectColor {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    grid-gap: 0.75em;
    margin-bottom: 0.5em;
}

.typeColorBox {
    font-size: 18px;
    clear: both;
    cursor: pointer;
    padding: 8px 8px 4px;
    display: inline;
    -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);
    text-align: center;
}

    .typeColorBox.active {
        border: solid 1px #87828f;
        border-radius: 5px;
    }

.detailsSection {
    background: rgb(179,179,179);
    background: linear-gradient(180deg, rgba(179,179,179,1) 0%, rgba(102,102,102,1) 100%);
    position: relative;
    padding: 0;
}

.detailsSectionContent {
    max-width: 1800px;
    margin: 0 auto;
    display: grid;
    grid-gap: 4.5em;
    grid-template-columns: 20% 25% 20%;
    justify-content: center;
}

.detailContent img,
.detailContentCenter img {
    border-radius: 35px;
    -webkit-filter: drop-shadow( 8px 8px 7px rgba(0, 0, 0, .3));
    filter: drop-shadow( 8px 8px 7px rgba(0, 0, 0, .3));
}

.detailContent p, .detailContentCenter p {
    color: #fff;
    margin-bottom: 3em;
}

.detailContent {
    margin-top: -5em;
}


.detailContentCenter {
    margin-top: -3em;
}

    .detailContent h2,
    .detailContentCenter h2 {
        font-size: 2.4em;
        color: #fff;
    }

/* 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;
}

.contentHalf {
    display: grid;
    max-width: 1280px;
    grid-template-columns: 50% 50%;
    margin: 0 auto;
    grid-gap: 1em;
    grid-column: span 2;
}

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

.orderAddress .configTitle {
    text-transform: none;
}

.configTitle {
    font-size: 1.15em;
    letter-spacing: 1px;
    color: rgba(209,87,87,1);
}

h1 {
    color: #dbdbdb;
    font-size: 2.5em;
    margin: 1em 0 0;
    letter-spacing: 1px;
    font-weight: lighter;
}


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

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


.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;
    }


.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;
}



.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;
}

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


/* footer
================== */
footer {
    color: #fff;
    text-align: center;
    padding: 2em 0;
    position: relative;
    font-size: 0.9em;
}

.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;
}

@media screen and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

@keyframes videoBackground {
    0% {
        background: #090410;
    }

    100% {
        background: #131118;
    }
}

/* 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;
}

.paddingless {
    padding: 0;
}

.full {
    width: 100%;
}

    .full img {
        width: 100%;
        background-color: #000;
    }

.teaser h1 {
    color: #fff;
}

.fullOverview h2 {
    color: #7b7a7d;
}

.teaser h2 {
    color: #aaa;
}

.fullSchutzkonzept p {
    max-width: 900px;
    margin: 0 auto;
    text-align: justify;
    padding: 1em;
}

.fullHero {
    position: relative;
    height: 100%;
    background-color: #000;
}

    .fullHero h1 {
        left: 40%;
        margin: 170px 0 0 0;
        z-index: 22;
    }

    .fullHero h2 {
        left: 40%;
        margin: 210px 0 0 0;
        z-index: 22;
    }

    .fullHero .content {
        max-width: 900px;
        margin: 0 auto;
        text-align: left;
        padding: 4em 0 0 0;
    }

.fullOverview,
.leftOverview,
.rightOverview,
.fullOrder,
.fullKontakt {
    width: 100%;
    background: #000;
}

.fullSocial {
    width: 100%;
    background: #000;
}

.fullOverview {
    background: #000 url('/Images/Lines.svg') no-repeat;
    background-position: right top;
    background-size: cover;
}

.orderSelection {
    max-width: 500px;
}

.leftOverview, .rightOverview {
    position: relative;
    display: grid;
    grid-template-columns: 40% 60%;
    padding: 200px 0 100px 0;
}

    .leftOverview .content,
    .rightOverview .content {
        padding: 0;
    }

.fullOverview .content {
    max-width: 1280px;
    margin: 0 auto;
    z-index: 1;
    position: relative;
}

.fullKontakt {
    background-color: #001d36bd;
    padding: 2em;
    position: relative;
    margin: 0 auto;
    max-width: 1200px;
    border-radius: 12px;
}

.fullSocial {
    background-color: none;
    padding: 2em;
    position: relative;
    margin: 0 auto;
    max-width: 1200px;
    border-radius: 12px;
}

.handle {
    font-size: 1.2em;
    text-decoration: none;
    margin-left: 0.5em;
    vertical-align: super;
}

.social {
    text-decoration: none;
}

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

.verticalIntended {
    padding-top: 13em;
}

.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%;
}

    .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: #f000;
}

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

.contact {
    background-color: #001d36;
    border-radius:6px;
}

.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;
    border-radius:4px;
}

.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;
}

#successMessageOrder {
    color: #42b040;
    border: dashed 1px #42b040;
    display: block;
    padding: 0.5em;
    margin-top: 1em;
    border-radius: 5px;
}


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

#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: 1em;
    margin: 0.5em 1em 0.5em 0;
    width: 100%;
    max-width: 310px;
}
/* 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;
}

.fullOrder .orderImg {
    position: fixed;
    top: 20px;
    z-index: 0;
}

.sectionConfigurator {
    display: grid;
    margin: 0 auto 20vh;
    max-width: 90%;
    min-width: 1280px;
    width: 80%;
    min-height: 800px;
    background: rgb(179,179,179);
    background: linear-gradient(131deg, rgba(179,179,179,1) 0%, rgba(102,102,102,1) 100%);
    border-radius: 18px;
    -webkit-box-shadow: 5px 5px 14px 14px rgba(49,49,49,1);
    -moz-box-shadow: 5px 5px 14px 14px rgba(49,49,49,1);
    box-shadow: 5px 5px 14px 14px rgb(49 49 49);
    padding: 0em 1.5em 3em;
}

.sectionBackButton {
    display: grid;
    margin: 0 auto 3em;
    max-width: 400px;
    width: 400px;
    height: 68px;
}

.backBtn {
    background: rgba(0,0,0);
    border: solid 1px #393939;
    border-radius: 5px;
    color: #fff;
    padding: 0.55em 0.85em 0.55em;
    text-shadow: none;
}

.sectionConfigurator h1 {
    color: rgb(74 83 81);
    font-weight: lighter;
    letter-spacing: 0;
    margin: 0.25em 0 0.25em;
}

.sectionConfigurator h2 {
    color: #2e2e2e;
    font-weight: lighter;
}


.fullOrder .content {
    background-color: rgba(0,0,0,0.7);
}

.configuratorImg {
    justify-self: end;
}

.configuratorImgArea {
    height: 600px;
    max-width: 900px;
    border-radius: 14px;
    background-color: #fff;
    position: relative;
}

    .configuratorImgArea h2 {
        text-align: center;
        text-transform: none;
        line-height: 1;
    }

    .configuratorImgArea img {
        border-radius: 14px;
    }

.costsTable p {
    line-height: 1;
}

.selectorConfigs {
    height: 600px;
}

.configurations {
    background-color: rgba(255,255,255,0.8);
    border: solid 1px #aaa;
    border-radius: 18px;
    padding: 1em 2em;
}


.selectChoice {
    margin-bottom: 1.5em;
}

    .selectChoice label {
        display: block;
    }

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

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

div.typeSelectBox {
    background-color: #fff;
    font-size: 1em;
    font-weight: lighter;
    clear: both;
    cursor: pointer;
    max-width: 300px;
    padding: 8px 15px;
    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 15px 8px 17px;
        border-color: #87828f;
        border-right: solid 1px !important;
        border-right-color: #87828f !important;
        background-color: #a8a8b5;
    }



.headerImageBg {
    opacity: 1;
}

/* -------------- MEDIA QUERY PHONE --------------*/
/* -----------------------------------------------*/

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

    .configuratorImgArea h2 {
        display: none;
    }

    .stratoSection {
        background-image: url('../Images/stratoBreakSmall.webp');
    }

    header {
        background: #fff;
        max-width: 100%;
        height: 82vh;
    }

        header .room {
            background-image: url('/Images/Swissolina13-mobile.webp?v=1.12');
            background-repeat: no-repeat;
            background-position: top center;
            background-size: contain;
            max-width: 100%;
            height: 100vh;
        }


    .planetImg {
        position: sticky;
        top: 0px;
        width: unset;
        max-width: 100%;
    }

    .doubleLine {
        display: grid;
        grid-template-columns: 100%;
    }

        .doubleLine a {
            display: block;
            font-size: 0.8em;
            margin-right: 0.5em;
            width: unset;
        }

    .downArrow {
        position: relative;
        top: 68vh;
        width: 100%;
        z-index: 30;
    }
    .scroll-hint{
        display:none;
    }

    .desktop-break {
        display: none;
    }

    .sectionBackButton {
        display: grid;
        margin: -2em auto 0.25em;
        max-width: 400px;
        width: 400px;
        height: 68px;
    }

    .backBtn {
        margin: 0 auto 0.5em;
    }

    .sectionConfigurator h2 {
        font-size: 1em;
        margin: 0;
        padding-top: 0.75em;
    }

    .sectionConfigurator h1 {
        text-align: center;
    }

    .sectionConfigurator {
        display: grid;
        margin: 0 auto 20vh;
        max-width: 95%;
        width: 100%;
        min-width: unset;
        min-height: 800px;
        background: rgb(179, 179, 179);
        background: linear-gradient(131deg, rgba(179, 179, 179, 1) 0%, rgba(102, 102, 102, 1) 100%);
        border-radius: 18px;
        -webkit-box-shadow: 5px 5px 14px 14px rgba(49, 49, 49, 1);
        -moz-box-shadow: 5px 5px 14px 14px rgba(49, 49, 49, 1);
        box-shadow: 5px 5px 14px 14px rgb(49 49 49);
        padding: 0em 0.5em 3em;
    }

    .configuratorImgArea {
        height: unset;
        border-radius: 14px;
        background-color: #fff;
    }

    .configuratorContent {
        display: grid;
        grid-gap: 0.5em;
        grid-template-columns: 100%;
    }

    .responsive-content {
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 1em;
    }

    .headerContent {
        width: 100%;
        margin: 0 auto;
        color: #fff;
        padding: 2em 0 0 0;
        position: absolute;
        bottom: 4px;
        text-align: center;
        display: grid;
        justify-content: center;
    }

    .fullHero .content {
        padding: 2em 3em;
    }

    .teaser {
        padding: 1em 1em 2em !important
    }

    .overviewImgs {
        display: grid;
        grid-template-columns: 100%;
        margin-top: 10em;
    }

    .spaceShipSection {
        position: sticky;
        min-height: 2900px;
        z-index: 5;
        padding-top: 60em;
    }

    .fullOverview {
        background: url(/Images/Lines.svg) no-repeat;
        background-position: bottom right;
        background-size: 500%;
        position: relative;
        z-index: 22;
    }

    .logoTop {
        position: fixed;
        left: 20px;
        top: 0px;
        width: 200px;
        display: block;
        z-index: 33;
    }

    .logoTopConf {
        position: relative;
        margin: 0 auto;
        display: block;
        z-index: 33;
        padding: 1em 0 0 0.25em;
    }

        .logoTopConf img {
            width: 200px;
        }

    .fullOrder {
        position: relative;
        background-color: transparent;
        max-width: 100%;
    }

    .fullHero .content h2 {
        font-size: 1.3em;
    }

    .fullscreen-video-wrap {
        height: 40vh;
    }

    .selectColor {
        display: grid;
        grid-template-columns: 33% 33% 33%;
        grid-gap: 0.2em;
        margin-bottom: 0.5em;
    }

    .stratoContentLeft, .stratoContentRight {
        grid-template-columns: 100%;
        padding: 2em 1.5em;
    }

    .galaxySection {
        margin-top: 60vh;
    }

    .spaceShipSection .spaceShip {
        top: 120vh;
        position: fixed;
        left: 0;
        top: 200px;
        width: 70%;
        min-width: 250px;
        max-width: 800px;
        z-index: 1;
    }

    .leftOverview, .rightOverview {
        grid-template-columns: 100%;
        padding: 0;
    }

        .leftOverview .content,
        .rightOverview .content {
            padding: 50px 1em 40px 1em;
        }

    .teaser {
        position: relative;
        font-size: 1.2em;
        left: 0;
        margin: 0 0 0 0;
        z-index: 22;
    }

        .teaser h2,
        .fullOverview h2 {
            font-size: 1.5em;
            z-index: 22;
        }

    .detailsSectionContent {
        grid-template-columns: 100%;
    }


    .fullSchutzkonzept {
        padding: 1em;
    }

    figure video {
        min-height: 100%;
        min-width: 100%;
        max-width: 100%;
    }

    .stratoSection {
        padding: 0 1.5em;
    }

    .contentHalf {
        display: grid;
        max-width: 100%;
        grid-template-columns: 100%;
        margin: 0 auto;
        grid-gap: 1em;
        grid-column: span 1;
        padding: 1em;
    }

    .verticalIntended {
        padding-top: 1em;
    }

    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(209,87,87,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: 100%;
    }

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

    .fullOrder .content {
        grid-template-columns: 100%;
        padding: 1em;
    }


    .fullOrder .contentLeft {
        grid-template-columns: 100%;
        padding: 1em;
    }

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

    .titleSection .logoImage {
        place-self: center;
        position: fixed;
        top: -50px;
        left: 4%;
        height: 30%;
        min-height: 60px;
        max-width: 40%;
    }

    .galaxyDiv {
        position: sticky;
        padding: 0;
        top: 350px;
        left: 180px;
        margin-left: 0;
        z-index: 1;
        width: 80%;
    }

    .spaceShipSection h2 {
        color: #fff;
        font-size: 1.9em;
        text-align: center;
    }

    .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%;
    }

    .selectorConfigs {
        height: 600px;
    }

    .secTitle {
        width: 100%;
        margin-top: 1em;
    }

    .secDesc {
        width: 60%;
    }

    .secPrice {
        width: 40%;
        text-align: right;
    }

    .selectionTextArea {
        padding: 0.75em 1em;
    }

    .selectChoice {
        display: grid;
        justify-content: center;
        grid-template-columns: 50% 50%;
    }

    .selectChoiceMobile1 {
        grid-template-columns: 50% 50% !important;
    }

    .selectChoiceMobile2 {
        grid-template-columns: 45% 30% 25% !important;
    }

    .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));
    }

    .twospan {
        grid-column: span 1;
    }

    .subLogo {
        display: none;
    }

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


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

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

    .fullOrder {
        display: grid;
        grid-gap: 1em;
        grid-template-columns: 100%;
        margin: 0 auto;
        padding: 2em 1em;
    }

        .fullOrder .content {
            margin: 0 auto;
            grid-column: 1;
            grid-row: 2;
        }

        .fullOrder .contentLeft {
            margin: 0 auto;
            grid-column: 1;
            grid-row: 1;
        }


    .stratoContentRight img {
        grid-row: unset;
        zoom: 1.4;
    }

    .stratoContentLeft img {
        grid-row: unset;
        zoom: 1.4;
        margin-top: 0;
        z-index: 0;
    }

    h2.text {
        font-weight: 300;
        font-size: 1.1em;
    }

    .album {
        top: 2em;
        left: 0.5em;
        margin: 0em auto 2em;
        margin-bottom: 1em;
        width: 100%;
        max-height: 90%;
        max-width: unset;
    }

    .detailContent h2, .detailContentCenter h2 {
        font-size: 2.1em;
        line-height: 1.2;
        color: #fff;
    }

    .textSecond {
        grid-row: 1;
    }

    .stratoContentLeft h1,
    .stratoContentRight h1 {
        grid-column: unset;
    }


    .stratoContentLeft h2 {
        grid-column: unset;
    }

    .detailContent, .detailContentCenter {

        width: 90%;
        margin-bottom:1em;
        padding-left:2em;
    }


    .orderImg {
        grid-column: 1;
        grid-row: 2;
    }

    .sectionOrder h2 {
        text-align: center;
    }

    .rebateText {
        margin-top: 5px;
        display: block;
        margin-left: 0;
    }

    h3 {
        padding-top: 1em;
    }

    .checkboxCell {
        justify-content: center;
    }

    .fullHero h1 {
        position: relative;
        font-size: 2em;
        left: 0;
        margin: 0;
        z-index: 22;
    }

    .fullHero h2 {
        position: relative;
        font-weight: normal;
        font-size: 1.5rem;
        font-weight: lighter;
        color: #4b4a52;
        left: 0;
        margin: 0;
        z-index: 22;
    }

    .formContact > * {
        padding: 0;
    }

    textarea {
        width: 100%;
    }

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

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

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

/* TABLET */
/************************************************/

@media only screen and (min-width: 40em) {
    header {
        background: #fff;
        max-width: 100%;
    }

        header .room {
            background-image: url('/Images/Swissolina13.webp?v=1.12');
            background-repeat: no-repeat;
            background-position: top center;
            margin: 0 auto;
            max-width: 1250px;
            height: 1157px;
        }

    .planetImg {
        position: sticky;
        top: 0px;
        width: unset;
        max-width: 100%;
        height: 545px;
        z-index: 1;
    }

    figure video {
        width: 100%;
    }

    .spaceShip {
        position: fixed;
        left: 0;
        top: 200px;
        width: 70%;
        min-width: 250px;
        max-width: 800px;
        z-index: 1;
    }

    .downArrow {
        position: fixed;
        top: 90%;
        z-index: 30;
    }

    .responsive-content {
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 1em;
    }

    .desktop-break {
        display: inline;
    }

    .ctaMore {
        z-index: 100;
        max-height: 36px;
        width: 240px;
    }

    .stratoBreakSection {
        background: rgb(255, 255, 255);
        position: relative;
        padding: 0;
        margin-top: -1px;
        padding-top: 2em;
    }

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

    .fullOrder {
        position: relative;
        background-color: transparent;
        max-width: 1280px;
    }

    .detailsSection {
        background: rgb(179, 179, 179);
        background: linear-gradient(180deg, rgba(179, 179, 179, 1) 0%, rgba(102, 102, 102, 1) 100%);
        position: relative;
        padding: 0;
        padding-bottom: 1em;
    }

    .detailsSectionContent {
        display: grid;
        grid-gap: 2.5em;
        grid-template-columns: 100%;
        justify-content: center;
    }

    .sectionConfigurator {
        display: grid;
        margin: 0.5em auto;
        max-width: 100%;
        min-width: unset;
        width: 95%;
    }

    .detailContent, .detailContentCenter {
        width: 70%;
        margin-bottom: 1em;
        padding:2em;
    }


    .configuratorContent {
        display: grid;
        grid-gap: 2em;
        grid-template-columns: 100%;
    }

    .twospan {
        grid-column: span 1;
    }

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

    .home-hero {
        height: auto;
    }

    .stratoContentLeft, .stratoContentRight {
        padding: 0 1.75em;
    }

    .stratoContentRight {
        grid-template-columns: 100%;
    }

    .textSecond {
        grid-row: 1;
    }

    .img {
        width: 100%;
    }

    .fullHero h1 {
        position: absolute;
        font-size: 2.0em;
        left: 30%;
        margin: 120px 0 0 0;
        z-index: 22;
    }

    .fullHero h2 {
        position: absolute;
        font-weight: normal;
        font-size: 1.25em;
        left: 30%;
        margin: 210px 0 0 0;
        z-index: 22;
    }

    .logo {
    }

    header {
        background: #000;
        min-height: 85vh;
        height: 12em;
        margin: 0;
    }


    .teaser {
        grid-column: 1;
        z-index: 22;
    }

        .teaser h1 {
            font-size: 2.5em;
        }

        .teaser h2,
        .fullOverview h2 {
            font-size: 1.5em;
            font-weight: normal;
        }

    .fullOverview {
        position: relative;
        background: url(/Images/Lines.svg) no-repeat;
        background-position: right bottom;
        background-size: cover;
        padding: 3em;
    }

    .selectorConfigs {
        height: 600px;
    }

    nav {
        position: absolute;
        top: 0;
        right: 80px;
    }

        nav a {
            font-size: 1.2rem;
        }

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

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

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

    [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: 0;
        display: grid;
        background: #000;
        padding: 0;
        z-index: 2;
        grid-column: 1;
        height: 50vh;
    }

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


    header {
        background: #fff;
        background-image: url('/Images/Swissolina13.webp?v=1.12');
        background-repeat: no-repeat;
        background-size: 100%;
        margin: 0 auto;
        max-width: 100%;
        height: unset !important;
    }


    .headerImageBg {
        opacity: 1;
        min-height: 126vh;
    }

    .titleSection .logoImage {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        width: 60vw;
        top: 45vh;
        min-height: 60px;
        max-height: 340px;
    }


    .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;
    }

    .fullOrder {
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 1em;
        margin: 0 auto;
        padding: 3em 0;
    }

        .fullOrder .content {
            padding: 2em;
            grid-column: 1;
            grid-row: 2;
        }

        .fullOrder .contentLeft {
            padding: 2em;
            grid-column: 1;
            grid-row: 1;
        }

    .contactArticle {
        margin: 0 auto;
        max-width: 1080px;
    }
        .contactArticle h1 {
            margin: 0;
        }

    .orderImg {
        grid-column: 1/ span 2;
        grid-row: 1;
    }

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

    textarea {
        width: unset;
        max-width: 500px;
    }

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

    .configuratorImgArea h2 {
        display: none;
    }
}

/* Tablet quer */
/******************************************/
@media only screen and (min-width: 60em) {
    header {
        background: #fff;
        max-width: 100%;
    }

        header .room {
            background-image: url('/Images/Swissolina13.webp?v=1.12');
            background-repeat: no-repeat;
            background-position: top center;
            margin: 0 auto;
            max-width: 1250px;
            height: 1157px;
        }

    .planetImg {
        position: sticky;
        top: 0px;
        width: unset;
        max-width: unset;
        height: 684px;
        z-index: 1;
    }


    figure video {
        width: 100%;
    }
    .titleSection .logoImage {
        position: fixed;
        left: calc(50% - min(48vw, 650px));
        transform: translateY(-50%);
        width: 22vw;
        max-width: 450px;
        top: 40vh;
    }

    .downArrow {
        position: relative;
        top: 98vh;
        left: unset;
        margin: 0 auto;
        width: 450px;
        z-index: 30;
    }

    .configuratorImgArea h2 {
        display: none;
    }
}

/* DESKTOP */
/******************************************/
@media only screen and (min-width: 70em) {

    section {
        padding: 3em;
    }

    .spaceShip {
        position: fixed;
        left: -180px;
        top: 200px;
        width: 70%;
        min-width: 250px;
        max-width: 1250px;
        z-index: -1;
    }


    figure video {
        width: 100%;
    }

    .planetImg {
        position: sticky;
        top: 0px;
        width: unset;
        max-width: unset;
        height: 910px;
        z-index: 1;
    }

    .responsive-content {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-gap: 1em;
    }

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

    .home-hero {
        height: 50vh;
        margin-top: 9em;
    }

    .twospan {
        grid-column: span 2;
    }

    .fullOrder {
        position: relative;
        background-color: transparent;
        max-width: 1480px;
    }

    .sectionConfigurator {
        display: grid;
        margin: 0.5em auto;
        max-width: 1380px;
        min-width: unset;
        width: 95%;
    }

    .detailsSectionContent {
        display: grid;
        grid-gap: 2.5em;
        grid-template-columns: 30% 30% 30%;
        justify-content: center;
    }

    .configuratorContent {
        display: grid;
        grid-gap: 2em;
        grid-template-columns: 60% 38%;
    }

    nav li {
        display: inline-block;
    }

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

    .fullHero h1 {
        position: absolute;
        font-size: 3.0em;
        left: 30%;
        margin: 260px 0 0 0;
        z-index: 22;
    }

    .fullHero h2 {
        position: absolute;
        font-weight: normal;
        font-size: 1.55em;
        left: 30%;
        margin: 340px 0 0 0;
        z-index: 22;
    }

    header {
        background: #fff;
        background-image: url('/Images/Swissolina13.webp?v=1.12');
        background-repeat: no-repeat;
        background-size: 100%;
        margin: 0 auto;
        max-width: 100%;
        height: unset !important;
    }


    .headerImageBg {
        opacity: 1;
        min-height: 126vh;
    }

    .titleSection .logoImage {
        position: fixed;
        left: calc(50% - min(45vw, 650px));
        transform: translateY(-50%);
        width: 22vw;
        max-width: 450px;
        top: 40vh;
    }

    .downArrow {
        position: relative;
        top: 96vh;
        left: unset;
        margin: 0 auto;
        width: 450px;
        z-index: 30;
    }


    .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%;
    }

    .fullOverview {
        position: relative;
        background: url(/Images/Lines.svg) no-repeat;
        background-position: right bottom;
        background-size: cover;
        padding: 3em;
    }

    .fullHero .content h2 {
        font-size: 1.7em;
    }

    .sectionFacts .sectionContent {
        grid-template-rows: 260px 30px 120px;
    }

    .specialFact {
        padding-top: 6em;
    }

    .fullOrder {
        display: grid;
        grid-gap: 1em;
        grid-template-columns: 50% 50%;
        margin: 0 auto;
        padding: 3em 0;
    }

        .fullOrder .content {
            grid-column: 2;
            grid-row: 1;
            padding: 2em;
        }

        .fullOrder .contentLeft {
            grid-column: 1;
            grid-row: 1;
            padding: 2em;
        }

    .orderImg {
        grid-column: 1/ span 2;
        grid-row: 1;
    }

    .sectionOrder .sectionContent {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 80px 70px 60px auto;
    }

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

    .fullscreen-video-wrap {
        height: 80vh;
    }

    .configuratorImgArea h2 {
        display: block;
    }

    .detailContent, .detailContentCenter {
        width: 100%;
        margin-bottom: 1em;
        padding: 0em;
    }
}

@media only screen and (min-width: 80em) {
    header {
        background: #fff;
        max-width: 100%;
    }

        header .room {
            background-image: url('/Images/Swissolina13.webp?v=1.12');
            background-repeat: no-repeat;
            background-position: top center;
            margin: 0 auto;
            max-width: 1250px;
            height: 1157px;
        }

    .home-hero {
        height: 45vh;
    }

    .upperImg {
        margin-top: -8em;
    }

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

    .title {
        font-size: 3rem;
    }

    .fullHero h1 {
        left: 50%;
        font-size: 3.5em;
    }

    .configuratorContent {
        display: grid;
        grid-gap: 2em;
        grid-template-columns: 61% 36%;
    }

    .fullHero h2 {
        left: 50%;
        font-size: 1.75em;
    }

    .formContact > * {
        padding: 0.5em;
    }

    .selectChoice {
        display: grid;
        grid-template-columns: 50% 50%;
    }

    .choiceKopf {
        display: grid;
        grid-template-columns: 55% 23% 22% !important;
    }

    .selectChoiceMobile1 {
        grid-template-columns: 50% 50% !important;
    }

    .selectChoiceMobile2 {
        grid-template-columns: 45% 30% 25% !important;
    }

    .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;
    }

    .fullOrder {
        display: grid;
        grid-gap: 1em;
        grid-template-columns: 48% 48%;
        margin: 0 auto;
        padding: 3em 0;
    }

        .fullOrder .content {
            grid-column: 2;
            grid-row: 1;
        }

    .orderImg {
        grid-column: 1/ span 2;
        grid-row: 1;
    }

    .sectionOrder .sectionContent {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 80px 70px 60px auto;
    }

    .fullscreen-video-wrap {
        height: 85vh;
    }

    .configuratorImgArea h2 {
        display: block;
    }
    .titleSection .logoImage {
        position: fixed;
        left: calc(50% - min(37vw, 600px));
        transform: translateY(-50%);
        width: 16vw;
        max-width: 350px;
        top: 37vh;
        min-height: 60px;
        max-height: 340px;
    }

    .downArrow {
        position: relative;
        top: 96vh;
        left: unset;
        margin: 0 auto;
        width: 450px;
        z-index: 30;
    }
}

@media only screen and (min-width: 90em) {
    header {
        background: #fff;
        max-width: 100%;
    }

        header .room {
            background-image: url('/Images/Swissolina13.webp?v=1.12');
            background-repeat: no-repeat;
            background-position: top center;
            margin: 0 auto;
            max-width: 1250px;
            height: 1157px;
        }

    .home-hero {
        height: 65vh;
    }

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


    .selectChoice {
        display: block;
    }

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

    .fullscreen-video-wrap {
        height: 85vh;
    }
}


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

    header {
        background: #fff;
        max-width: 100%;
    }

        header .room {
            background-image: url('/Images/Swissolina13.webp?v=1.12');
            background-repeat: no-repeat;
            background-position: top center;
            background-size: contain;
            margin: 0 auto;
            max-width: 1250px;
            height: 1157px;
        }

        .headerImageBg {
            position: sticky;
            z-index: 1;
            opacity: 1;
            min-height: 194vh;
        }

    .home-hero {
        height: 85vh;
    }

    .container {
        max-width: 40%;
    }

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