.sky-gradient {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(22%, #3080f1), color-stop(50%, #b0ebf1), color-stop(#f2f0d0), color-stop(75%, white));
    background: linear-gradient(#3080f1  22%, #b0ebf1 50%, #f2f0d0, white  75%);
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.hero-logo {
    width: 80vw;
    max-width: 280px;
    height: 25vw;
    max-height: 86px;
    position: absolute;
    background: url(../images/logo-newtoon-medium.png) center no-repeat;
    background-size: contain;
    top: calc(26vh - 50px);
    left: 50%;
    margin-right: -50%;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    z-index: 2;
}

.hero-text {
    position: absolute;
    width: 80vw;
    max-width: 340px;
    top: calc(26vh - 50px);
    left: 50%;
    margin-right: -50%;
    -webkit-transform: translate(-50%, 15px);
    transform: translate(-50%, 15px);
    font-size: 14px;
    color: white;
    text-align: center;
    letter-spacing: .5px;
    font-weight: normal;
    z-index: 2;
}

#hero-container {
    position: relative;
    max-width: 1920px;
    height: 100vh;
    min-height: 700px;
    max-height: 1440px;
    margin: 0 auto;
    z-index: 2;
    /*Change to -1*/
}

#scene {
    width: 100%;
    height: calc(100% + 100px);
    overflow: hidden;
}

.layer {
    width: 110%;
    margin-left: -5%;
    height: calc(100% - 100px);
    pointer-events: none;
}

.layer1 {
    background-image: url(../images/hero-layer-0.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto;
    position: absolute;
    width: 100%;
    height: 100%;
    margin-top: -40px;
}

.layer2 {
    background-image: url(../images/hero-layer-1.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto;
    /*position: absolute;*/
    width: 100%;
    height: 100%;
    margin-top: -35px;
}

.layer3 {
    background-image: url(../images/hero-layer-3.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto;
    position: absolute;
    width: 1874px;
    height: calc(100% + 80px);
    left: 50%;
    margin-right: -50%;
    -webkit-transform: translate(calc(-50% + 340px), -30px);
    transform: translate(calc(-50% + 340px), -30px);
    pointer-events: none;
}

.layer4 {
    background-image: url(../images/hero-layer-4.png);
    background-position: center bottom;
    background-size: auto;
    background-repeat: no-repeat;
    position: absolute;
    width: 1874px;
    height: calc(100% + 80px);
    left: 50%;
    margin-right: -50%;
    -webkit-transform: translate(calc(-50% - 270px), -20px);
    transform: translate(calc(-50% - 270px), -20px);
    pointer-events: none;
}

.sectionbuttons {
    position: absolute;
    width: 95vw;
    max-width: 760px;
    height: 580px;
    max-height: 65vh;
    top: 100vh;
    left: 50%;
    margin-right: -50%;
    -webkit-transform: translate(-50%, calc(-100% - 35px));
    transform: translate(-50%, calc(-100% - 35px));
    overflow: visible; /* look this, if it's nescesary change it */
    padding-top: 0px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
}

.sectionbuttons .btHero1,
.sectionbuttons .btHero2,
.sectionbuttons .btHero3 {
    color: #3080f1;
}

.btHero1,
.btHero2,
.btHero3 {
    padding: 18px;
    padding-right: 80px;
    font-size: 24px;
    border: 2px solid white;
    border-radius: 5px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: 55px 20px;
    grid-template-rows: 55px 20px;
    
}

.btHero1 {
    background: url(../images/bg-hero-panel-1.png) no-repeat 20px 100px, white;
}

.btHero2 {
    background: url(../images/bg-hero-panel-2.png) no-repeat 20px 90px, white;
}

.btHero3 {
    background: url(../images/bg-hero-panel-3.png) no-repeat 18px 90px, white;
}
.btHero3:before {
    content: "";
    height: 22px;
    width: 32px;
    position: absolute;
    background: url(../images/Bird.png);
    background-repeat: no-repeat;
    top: -20px;
    right: -7px;    
}

@media (max-height: 700px) {
    .hero-logo {
        top: 132px;
    }
    .hero-text {
        top: 132px;
    }
    .sectionbuttons {
        max-height: 455px;
        top: 700px;
    }
    
    
}

@media only screen and (min-height: 1020px) {
    .sectionbuttons {
        top: 100vh;
    }
}

@media only screen and (min-height: 1440px) {
    .sectionbuttons {
        top: 1440px;
    }
}

@media (max-width: 670px) {
    .hero-text {
        font-size: calc(10px + 1.5vw);
    }
    .btHero1,
    .btHero2,
    .btHero3 {
        font-size: 3.5vw;
    }
}

@media (max-width: 540px) {
    .sectionbuttons {        
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        -ms-grid-rows: 1fr 1fr 1.2fr;
        grid-template-rows: 1fr 1fr 1.2fr;
        grid-row-gap: 6px;
        overflow: visible;
    }
    .btHero1 {
        font-size: 20px;
        background: url(../images/bg-hero-panel-1b.png) no-repeat 50px 10px, white;
    }
    .btHero2 {
        font-size: 20px;
        background: url(../images/bg-hero-panel-2b.png) no-repeat 85px 15px, white;    
        -webkit-box-shadow: 5px 5px 20px #abe5fa;    
        box-shadow: 5px 5px 20px #abe5fa;
    }
    .btHero3 {
        font-size: 20px;
        background: url(../images/bg-hero-panel-3b.png) no-repeat 100px 15px, white;
    }
    .sectionbuttons .mybutton {
        margin-top: -30px;
    }
    
    .btHero3:before {        
        background: none;        
    }
}


/*GOOEY BUTTON*/
.button {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: transparent;
    border: none;
    -webkit-box-shadow: inset 0px 0px 0px 2px #fff;
    box-shadow: inset 0px 0px 0px 2px #fff;
    color: white;
    /*Font Color*/
    display: inline-block;
    font-size: 16px;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 6px 14px;
    border-radius: 4px;
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.button:hover {
    background-color: white;
    color: #ff9c00;
    /*Font Color*/
    -webkit-transition: 0s;
    transition: 0s;
}

.button:active {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

.button--bubble {
    position: relative;
    z-index: 2;
    color: white;
    background: none;
}

.button--bubble:hover {
    background: none;
}

.button--bubble:hover+.button--bubble__effect-container .circle {
    background: white;
}

.button--bubble:hover+.button--bubble__effect-container .button {
    background: white;
    /*Hover Color*/
    -webkit-transition: 0s;
    transition: 0s;
}

.button--bubble:active+.button--bubble__effect-container {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

.button--bubble__container {
    position: relative;
    display: inline-block;
}

.button--bubble__container .effect-button {
    position: absolute;
    width: 50%;
    height: 25%;
    top: 50%;
    left: 25%;
    z-index: 1;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: background 0.1s ease-out;
    transition: background 0.1s ease-out;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
    /*TODO*/
}

.button--bubble__effect-container {
    position: absolute;
    display: block;
    width: 200%;
    height: 400%;
    top: -150%;
    left: -50%;
    -webkit-filter: url("#goo");
    filter: url("#goo");
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
    pointer-events: none;
}

.button--bubble__effect-container .circle {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 15px;
    background: white;
    -webkit-transition: background 0.1s ease-out;
    transition: background 0.1s ease-out;
    display: none;
}

.button--bubble__effect-container .circle.top-left {
    top: 40%;
    left: 27%;
}

.button--bubble__effect-container .circle.bottom-right {
    bottom: 40%;
    right: 27%;
}

.goo {
    position: absolute;
    visibility: visible;
    width: 1px;
    height: 1px;
}

.button--bubble__container {
    top: 50%;
    margin-top: -25px;
}