#inteliContainer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}


/* iPhone 4, 4s */
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {

    #inteliContainer {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
    }
}

/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
    
    #inteliContainer {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
    }

}


/* iPhone 5, 5s */
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
    
    #inteliContainer {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 87vh;
    }

}

/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
    
    #inteliContainer {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
    }

}


/* iPhone 6, 6s */
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
    
    #inteliContainer {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 88vh;
    }

}

/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
    
    #inteliContainer {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
    }

}


/* iPhone 6+, 6s+ */
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
    
    #inteliContainer {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 90vh;
    }

}

/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
    
    #inteliContainer {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
    }

}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#demoOverlayPanel {
    background-color: white;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: 0;
    display: none;
}

#helpOverlayPanel {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 110;
    background-color: #f1f2f2;
}

#loadingOverlayPanel {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 110;
    background-color: #f1f2f2;
}

#installFinishPanel {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 103;
    opacity: 0.8;
    background-color: #f1f2f2;
}

#menuOverlayPanel {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 120;
    opacity: 0;
    background-color: #f1f2f2;
}

#menuBar {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 71px;
    z-index: 111;
    background-color: #f1f2f2;
}

#menuHelpPanel {
    width: 100%;
    height: 100%;
    z-index: 112;
    background-color: #f1f2f2;
}

#menuHelpFlexPanel {
    width: 100%;
    height: 100%;
    z-index: 112;
}

#menuHelpImage {
    position: absolute;
}

#menuHelpBar {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 71px;
    z-index: 113;
    background-color: #f1f2f2;
}

#menuHelpTextBar {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 71px;
    z-index: 113;
}

#menuHelpTextBar p {
    font-family: 'Gilroy Bold', Helvetica, Arial, sans-serif;
    font-size: 16px;
    text-transform: none;
    padding: 0;
    letter-spacing: 0;
    background-color: #f1f2f2;
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 7px;
    padding-bottom: 7px;
    /*border-radius: 5px;
    -webkit-border-radius: 5px;*/
    z-index: 114;
}

#menuHelpCloseIcon {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 150px;
    height: 71px;
    z-index: 114;
}

#menuCloseIcon {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 150px;
    height: 71px;
    z-index: 111;
}

#helpBar {
    position: absolute;
    background-color: #f1f2f2;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 40px;
    z-index: 111;
}

#helpImageContainer {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 112;
}

#helpImage {
    position: absolute;
    top: 40px;
    z-index: 112;
}

#helpLanding {
    position: absolute;
    top: 40px;
    z-index: 112;
}

#helpImageLink {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 113;
}

#loadingImageLink {
    position: absolute;
    left: -10px;
    top: 0px;
    z-index: 113;
}

#helpImageIcon {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 113;
}

#helpImageOverview {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 113;
}

#helpImageSmall {
    position: absolute;
    right: 0px;
    bottom: 0px;
    margin-bottom: 5px;
    margin-right: 5px;
    z-index: 113;
}

#infoTextPanel {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 71px;
    pointer-events: none;
    z-index: 104;

}

#infoTextPanel p {
    font-family: 'Gilroy Bold', Arial, sans-serif;
    font-size: 16px;
    padding: 7px 14px;
    text-transform: none;
    /*padding: 0;
    letter-spacing: 0;
    background-color: #f1f2f2;
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 7px;
    padding-bottom: 7px;*/
    /*border-radius: 5px;
    -webkit-border-radius: 5px;*/
}

.infoTextContentNormal {
    font-weight: normal;
}

.infoTextContentBold {
    font-weight: bold;
}

#threeCanvas {
    width: 100%;
    height: 100%;
    /* Disable long press to highlight */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* The parent UI container */
#uiContainer {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#loadingFullPanel {
    background-color: white;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 111;
    /*display: none;*/
}

#loadingImage {
    position: absolute;
    left: 0px;
    top: 0px;
}

#infoLinesCanvas {
    position: absolute;
    left: 0px;
    bottom: -1px;
    width: 298px;
    height: 297px;
    z-index: 111;
    pointer-events: none;
}

#installProgCanvas {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 186px;
    height: 186px;
    z-index: 111;
    pointer-events: none;
}

/* The "loading" bar panel - anchored to the corner. */
#loadingBarPanel {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 112;
}

#loadingBarPanel img {
    position: absolute;
    left: 0px;
    bottom: 0px;
}

#loadingDemo {
    position: absolute;
    left: 53px;
    bottom: 75px;
    opacity: 1.0;
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    font-weight: normal;
    color: #000;
    font-size: 24px;
    letter-spacing: 0;
    margin-bottom: 0;
    margin-top: 0;
}

#loadingAction {
    position: absolute;
    left: 100px;
    bottom: 217px;
    opacity: 1.0;
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    font-weight: normal;
    color: #000;
    font-size: 22px;
    letter-spacing: 0;
    margin-bottom: 0;
    margin-top: 0;
}

#loadingInfo {
    position: absolute;
    left: 205px;
    bottom: 123px;
    opacity: 1.0;
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    font-weight: normal;
    color: #000;
    font-size: 24px;
    letter-spacing: 0;
    margin-bottom: 0;
    margin-top: 0;
}

.flexbox-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    -webkit-box-align: center;

    align-items: center;
    justify-content: center;
}

.flexbox-container-vert {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    -webkit-box-align: center;

    align-items: center;
    justify-content: center;
    flex-direction: column;
    -webkit-flex-direction: column;
}

#menuFlexContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#menuHelpPanel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.menuFlexItems {
    margin: 18px;
}

/*@font-face {
    font-family: Apercu;
    src: url("images/ApercuMono.otf") format("opentype");
}

@font-face {
    font-family: Calibre;
    src: url("images/Calibre-Regular.otf") format("opentype");
}*/

@font-face {
    font-family:'Gilroy Bold';
    src: url('images/Gilroy-Bold.eot');
    src: url('images/Gilroy-Bold.eot?#iefix') format('embedded-opentype'),
         url('images/Gilroy-Bold.woff2') format('woff2'),
         url('images/Gilroy-Bold.woff') format('woff'),
         url('images/Gilroy-Bold.svg#Gilroy-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}
@font-face {
    font-family:'Gilroy Regular';
    src: url('images/Gilroy-Regular.eot');
    src: url('images/Gilroy-Regular.eot?#iefix') format('embedded-opentype'),
         url('images/Gilroy-Regular.woff2') format('woff2'),
         url('images/Gilroy-Regular.woff') format('woff'),
         url('images/Gilroy-Regular.svg#Gilroy-Regular') format('svg');
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

.tiltStandardText {
    font-size: 18px;
    color: #000;
    font-family: 'Gilroy Bold', Helvetica, Arial, sans-serif;
}

.tiltInstallEndText {
    font-size: 3vw;
    color: #000;
    font-family: 'Gilroy Bold', Helvetica, Arial, sans-serif;
    text-align: center;
    margin-bottom: 60px;
}

.tiltInstallSmallText {
    font-size: 1.5vw;
    color: #000;
    font-family: 'Gilroy Regular', Helvetica, Arial, sans-serif;
    text-align: center;
}

#installDescTextParent {
    position: absolute;
    right: 226px;
    bottom: 70px;
    left: 40px;
    height: 80px;
    background-color: #f1f2f2;
    /*border-radius: 5px;
    -webkit-border-radius: 5px;*/
}

#installDescText {
    font-size: 16px;
    color: #000;
    font-family: 'Gilroy Regular', Helvetica, Arial, sans-serif;
    text-align: center;
    text-transform: lowercase;
}

/* The main buttons */
#systemPanel {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 101;
}

#systemDemo {
    position: absolute;
    left: 23px;
    bottom: 24px;
}

#systemAction {
    position: absolute;
    left: 92px;
    bottom: 182px;
}

#systemInfo {
    position: absolute;
    left: 182px;
    bottom: 93px;
}

#systemDemoSel {
    position: absolute;
    left: 23px;
    bottom: 24px;
}

#systemActionSel {
    position: absolute;
    left: 92px;
    bottom: 182px;
}

#systemInfoSel {
    position: absolute;
    left: 182px;
    bottom: 93px;
}

#hoverAction {
    position: absolute;
    left: 191px;
    bottom: 207px;
}

#hoverDemo {
    position: absolute;
    left: 154px;
    bottom: 44px;
}

#hoverInfo {
    position: absolute;
    left: 284px;
    bottom: 126px;
}

#systemBG {
    position: absolute;
    left: 0px;
    bottom: 0px;
    pointer-events: none;
}

/* The product name */
#productPanel {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 102;
    pointer-events: none;
}

#productName {

    font-family: 'Gilroy Regular', Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #000;
    font-size: 16px;

    margin-top: 7px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 202px;

    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;

    text-align: center;
}

#fakeInfoPanel {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 71px;
    z-index: 100;
    background-color: #f1f2f2;
}

/* The info panel at the top of the screen */
#infoPanel {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 71px;
    z-index: 101;
}

#infoPanel img {
    position: absolute;
    margin-left: 100px;
    left: 0px;
    top: 0px;
    z-index: 102;
}

#infoPanel p {
    font-family: 'Gilroy Regular', Helvetica, Arial, sans-serif;
    color: #000;
    font-size: 23px;

    margin-top: 5px;
    margin-bottom: 0px;
    margin-left: 150px;
    margin-right: 0px;

    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;

    z-index: 102;
}


#footerPanel {
     position: absolute;
     left: 0px;
     bottom: 0px;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 113;
 }

#smallLogoPanel {
    position: absolute;
    left: -10px;
    top: 0px;
    /*pointer-events: none; */
    z-index: 123;
}

#smallLogoPanel img {
    width: 225px;
    height: 75px;
}

#installNextButton {
    position: absolute;
    left: 0px;
    top: 50px;
    width: 70px;
    height: 60px;
    font-family: 'Gilroy Regular', Helvetica, Arial, sans-serif;
    color: #000;
    font-size: 21px;
    text-align: center;
}


#footerPanel p {
    margin-left: 18%;
    margin-right: 18%;
    font-family: 'Gilroy Regular', Helvetica, Arial, sans-serif;
    color: #000;
    font-size: 10px;
    text-align: center;
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-transform: none;
    padding: 0;
    letter-spacing: 0;
}


.footerText {
    font-family: 'Gilroy Regular', Helvetica, Arial, sans-serif;
    color: #000;
    font-size: 10px;
    text-align: center;
    margin: auto;
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
}

#fullscreenPanel {
    position: absolute;
    right: 0px;
    top: 0px;
    /*z-index: 102;*/
    z-index: 104;
}

#hoverDownload {
    position: absolute;
    right: 74px;
    top: 34px;
    z-index: 102;
}

#helpIcon {
    position: absolute;
    right: 100px;
    top: 4px;
    width: 32px;
    height: 32px;

    z-index: 102;
}

#menuIcon {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 150px;
    height: 71px;
    /*z-index: 102;*/
    z-index: 104;
}

#techIcon {
    position: absolute;
    right: 184px;
    top: 0px;
    width: 240px;
    height: 40px;

    z-index: 102;
}

#soundIcon {
    position: absolute;
    right: 58px;
    top: 4px;
    width: 32px;
    height: 32px;

    z-index: 102;
}

#fullscreenIcon {
    position: absolute;
    right: 6px;
    top: 4px;
    width: 54px;
    height: 32px;

    z-index: 102;
}

#infoOverlay {
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 99;
    text-align: center;

}

#infoOverlayZoom {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 686px;
    height: 677px;
    z-index: 102;
    background-color: white;
    overflow: hidden;

}

#infoOverlayZoomOutline {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 686px;
    height: 677px;
    z-index: 105;

    overflow: visible;

}

#installOverlay {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    /*z-index: 102;*/
    z-index: 104;
    text-align: center;
    pointer-events: none;
}

#installRepeatParent {
     position: absolute;
     left: 0px;
     width: 100%;
     top: 48%;
     z-index: 102;
 }

#installTitleIcon {
    /*position: relative;
    left: 30px;*/
    display: none !important;
}

#installOpenBtn,
#installCircle,
#installCircleStatus {
    position: absolute;
    right: 0;
    bottom: 0;
}

#installCircleStatus {
    pointer-events: all;
}


#installRepeat {
    position: absolute;
    right: 30px;
    top: 0;
}

#installBack {
    position: absolute;
    left: 30px;
    top: 0;
}

#infoMacroImg {
    position: absolute;
    left: 0;
    top: 0;
}

#infoMacroClose {
    position: absolute;
    right: 0;
    top: -44px;
    z-index: 111;
}


#infoMacroImgBorder {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#infoMacroPanZoom,
#infoOverlayBG,
#infoOverlayBGFlash,
.balloonOverlay {
    position: absolute;
    right: 0;
    bottom: 0;
}

#infoOverlayBG {
    right: -5px;
}

.balloonOverlay {
    width: 150px;
    height: 150px;
    font-family: 'Gilroy Regular', Helvetica, Arial, sans-serif;
    color: #000;
    font-size: 22px;
    padding: 0;
}


/* Other iPhone-specific styles */

/* iPhone 4, 4s */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {

    #infoTextPanel p,
    #menuHelpTextBar p {
        font-size: 21px;
        text-transform: none;
        padding: 0;
        letter-spacing: 0;
        background-color: #f1f2f2;
        padding: 14px 28px 14px 14px;
    }

}


/* iPhone 5, 5s */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {

    #infoTextPanel p,
    #menuHelpTextBar p {
        text-transform: none;
        padding: 0;
        letter-spacing: 0;
        background-color: #f1f2f2;
        padding: 10px 28px 10px 14px;
    }

    #infoTextPanel p {
        font-size: 16px;
        max-width: 60vw;
        text-align: center;
    }

    #menuHelpTextBar p {
        font-size: 17px;
    }

}


/* iPhone 6, 6s */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {

    #infoTextPanel p,
    #menuHelpTextBar p {
        font-size: 18px;
        text-transform: none;
        padding: 0;
        letter-spacing: 0;
        background-color: #f1f2f2;
        padding: 10px 28px 10px 14px;
    }

}


/* iPhone 6+, 6s+ */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {

    #infoTextPanel p,
    #menuHelpTextBar p {
        font-size: 21px;
        text-transform: none;
        padding: 0;
        letter-spacing: 0;
        background-color: #f1f2f2;
        padding: 10px 28px 10px 14px;
    }

}