section {
    width: 100%;
    height: 100vh;
}


section[data-id="2"] { background: #ffffff; }
section[data-id="3"] { background: F1F2F5; }

/* SECTIONS / SECTION-1 */

section[data-id="1"] { 
    background: #F1F2F5;
    min-height: 730px;
 }

#blueBG{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 480px;
    background-image: linear-gradient(180deg, #2FCCFC 0%, #1D71F2 100%);
    z-index: 0;
    transform: skewY(-4.5deg);
    transform-origin: top left;
}

#blueLine {
    position: absolute;
    top: 482px;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #1d72f2;
    z-index: 0;
    transform: skewY(-4.5deg);
    transform-origin: top left;
}

/* SHOWCASE */
#showcase {
    background: url(images/iphone.png);
    width: 262px;
    height: 513px;
    position: absolute;
    /* top: 233px; */
    top: 50%;
    left: 50%;
    margin-left: -131px;
    margin-top: -225px;
    z-index: 3;
}

#slogan{
    color: #fff;
    font-size: 50px;
    cursor: default;
    user-select: none;
}

#dlAppStore {
    position: relative;
    width: 180px;
    outline: none;
    cursor: pointer;
    transition: transform 200ms ease;
}

#dlAppStore:hover {
    transform: scale(1.1);
}

#showcaseSelector {
    width: 100%;
    height: 70px;
    position: absolute;
    bottom: calc(20% - 150px);
    font-size: 16px;
}

#showcaseSelector > .content {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

#showcaseSelector p{
    text-align: center;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    user-select: none;

    transition: background 160ms ease;
}

#showcaseSelector p:hover, 
#showcaseSelector p[data-active="true"] {
    background: #D8D9DC;
}

.showcaseDetail {
    display: none;
}

#showcaseHeadline,
#showcaseText {
    margin-left: 50px;
}

#showcaseHeadline {
    margin-top: 180px;
    margin-bottom: 80px;
    color: #fff;
    font-size: 25px;;
    height: 60px;
}

#showcaseText {
    color: #222;
    font-size: 17px;;
}

#showcaseWatch {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 160px;
    margin-Left: -320px;
    margin-top: 20px;
    z-index: 2;

    transition: margin-left 500ms ease;
}

#showcaseWatch > img {
    width: 100%;
}

#showcaseWatch[data-hidden="true"] {
    margin-left: -80px !important;
}

/* SECTIONS / SECTION-2 / BLOCK */

.block {
    background: #F1F2F5;
    margin: 20px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
}

.blockContent {
    margin-left: 20px;;
}

.blockHeadline {
    font-size: 20px;
}

.blockText {
    background: url(images/iphone.png);
    width: 262px;
    height: 513px;
    position: absolute;
    /* top: 233px; */
    top: 50%;
    left: 50%;
    margin-left: -131px;
    margin-top: -225px;
}

@media only screen and (max-height: 900px) {
    #blueBG { transition: height 200ms ease; }

    #blueLine { transition: top 200ms ease; }

    #showcase, #showcaseWatch {  transition: transform 500ms ease, margin-bottom 200ms ease; }

    #showcaseWatch {  transition: margin-left 500ms ease; }

    #showcaseHeadline {  transition: margin-top 200ms ease; }

    #showcaseSelector { transition: bottom 200ms ease; }
}

@media only screen and (min-width: 2500px) {
    #blueBG {
        height: 560px;
    }

    #blueLine {
        top: 562px;
    }
}


@media only screen and (max-width: 1200px) {
    #showcaseHeadline {
        margin-top: 220px;
    }
    #showcaseText {
        font-size: 14px;
    }
}

@media only screen and (max-height: 800px) {

    #blueBG {
        height: 310px;
    }

    #blueLine {
        top: 312px;
    }

    #showcaseHeadline {
        margin-top: 60px;
    }

    #showcaseSelector {
        bottom: 10px;
    }

    #showcase {
        transform: scale(0.9);
        margin-top: -285px;
    }

    #showcaseWatch {
        transform: scale(0.9);
        margin-top: -55px;
    }
}

/* this is, because if the screen is short but wide, the bg is  */
@media only screen and (max-height: 800px) and (min-width: 1200px) {
    #showcaseHeadline {
        margin-top: 30px;
    }
}


@media only screen and (max-height: 800px) and (max-width: 1200px) {
    #slogan {
        font-size: 38px;
        margin-bottom: 120px;
    }
}

@media only screen and (max-height: 700px) {
    #showcase {
        transform: scale(0.8);
        margin-top: -285px;
    }

    #showcaseWatch {
        transform: scale(0.8);
        margin-left: -224px;
        margin-top: -70px;
    }

    #showcaseHeadline{
        font-size: 23px;
    }

    #showcaseText {
        font-size: 14px;
    }
}

/*** Mobile ***/

#showcase-scroll {
    display: none;

    background: url(images/iphone.png);
    width: 262px;
    height: 523px;
    position: fixed;
    

    top: 50%;
    left: 50%;
    margin-left: -131px;
    margin-top: -225px;
    z-index: 3;


}

#showcase-scroll-inner {
    width: calc(100% - 20px);
    position: absolute;
    left: 12px;
    top: 10px;
    background: black;
}

#showcase-scroll-inner > img {
    width: 100%;
    margin-bottom: 50px;
    display: block;
}

/* #showcase-scroll-inner > img:last-of-type {
    margin-bottom: 0;
} */

#showcase-scroll-clip {
    position: absolute;
    width: calc(100% - 15px);
    height: calc(100% - 15px);
    border-radius: 35px;
    overflow: hidden;
    left: 5px;
    top: 5px;
}

#showcase-scroll:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    
    background-image:    url(../images/phone_bezel_ipx.png);
    background-size:     cover;                      
    background-repeat:   no-repeat;
    background-position: center center;              

    pointer-events: none; 
}

.showcase-scroll-page {
    width: 207px;
    height: 461px;
    padding: 20px 10px 10px 10px;
    background: white;

    margin-bottom: 50px;
}

.showcase-scroll-page > h1 {
    font-size: 18px;
}

.showcase-scroll-page > p {
    font-size: 13px;
}

.showcase-scroll-page:last-of-type {
    margin-bottom: 0;
    text-align: center;
}

#dlAppStore-mobile {
    margin-top: 50px;
}

#links-mobile {
    margin-top: 60px;
}

#links-mobile > a {
    display: block;
    margin: 20px 0;
}

/*and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) */
@media only screen and (max-width: 500px) { 

    header > .content {
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    header nav {
        display: none !important;
    }

    .columns, 
    #showcaseSelector,
    #showcase,
    #showcaseWatch,
    footer p:last-of-type {
        display: none !important;
    }

    #showcase-scroll {
        display: block;
    }

    #blueBG,
    #blueLine {
        position: fixed;
    }

    footer p:first-of-type {
        width: 100vw;
        text-align: center;
        font-size: 10px;
    }
}