.altitudeContainer{
    color:#d2d2d2;
    text-shadow: 2px 2px 2px rgb(0, 0, 0);
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
        -ms-flex-direction:column;
            flex-direction:column;
    position:absolute;
    left: 25px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    height:425px;
    bottom: 70px;
}

.altitudeTitle{
    color:#d2d2d2;
    text-shadow: 2px 2px 2px rgb(0, 0, 0);
    position:absolute;
    top:120px;
    left:5px;
}

#backButton{
    /* margin-left:5px; */
}

button{
    -webkit-box-shadow: 3px 3px 4px 0 rgba(0,0,0,.281);
            box-shadow: 3px 3px 4px 0 rgba(0,0,0,.281);
    background-color: rgba(255, 255, 255, 0.4);
    border: none;
    /* border-color: rgba(255, 255, 255, 0.4); */
    /* border-width: 1px; */
    padding-top:3px;
    padding-bottom:3px;
}

button:hover{
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 2px 2px 3px 0 rgba(255, 255, 255, 0.281);
            box-shadow: 2px 2px 3px 0 rgba(255, 255, 255, 0.281);
}

button img{
    height:30px;
}

.buttonContainer{
    /* background: aqua;  */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-bottom: 5px;
}

#expandButton,
#shrinkButton{
    position:absolute;
    top:5px;
    right:5px;
}

#expandButton:hover,
#shrinkButton:hover{
    -webkit-box-shadow: 3px 3px 4px 0 rgba(0,0,0,.281);
            box-shadow: 3px 3px 4px 0 rgba(0,0,0,.281);
    background-color: #7accc3;
}

#expandButton img,
#shrinkButton img{
    height: 15px;
}

.firstLayer{
    /* background: radial-gradient(rgb(255, 255, 255), #BA0D0D); */
    background: radial-gradient(#f79ea8, #cc7a83);
}

.fifthLayer{
    background: radial-gradient(#a1d7f8, #7aaccc);
}

.fourthLayer{
    background: radial-gradient(#f3e99e,#ccc37a);
}

h1{
    color:black;
    text-shadow: 2px 2px 2px rgba(207, 207, 207, 0.74)!important;
    font-size: 1.5em;
    margin:0;
}

.imgContainer{
    /* background: magenta; */
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.imgContainer img{
    /* box-shadow: 2px 2px 4px 0 rgba(0,0,0,.281); */
    max-height: 160px;
    max-width:100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.infoContainer{
    background: -webkit-gradient(linear, left top, left bottom, from(#7accc3), to(#55a0e4));
    background: linear-gradient(#7accc3, #55a0e4);
    display: grid;
    grid-gap: 5px;
    grid-template-rows: 2fr 5fr 3fr 44px;
    padding-left:5px;
    padding-right:5px;
    padding-top:5px;
    -webkit-box-shadow:4px 4px 6px 0 rgba(0,0,0,.281);
            box-shadow:4px 4px 6px 0 rgba(0,0,0,.281);
    position:relative;
    overflow-y:auto;
    overflow-x:visible;
    color: black;
}

.infoContainerMinimized{
    background: -webkit-gradient(linear, left top, left bottom, from(#7accc3), to(#55a0e4));
    background: linear-gradient(#7accc3, #55a0e4);
    position:relative;
    -webkit-box-shadow:4px 4px 6px 0 rgba(0,0,0,.281);
            box-shadow:4px 4px 6px 0 rgba(0,0,0,.281);
}

.invisible{
    visibility: hidden;
}

main{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:650px;
    grid-gap: 5px;
    margin-bottom:35px;
    /* margin-top:5px; */
}

#nextButton{
    /* margin-right: 5px; */
}

.overlayContainer{
    position:absolute;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* width:100%; */
    height:100%;
    top:0;
    left:0;
}



.secondLayer{
    background: radial-gradient(#c7a6fc,#9a7acc);
}

.sliderContainer{
    /* background:cyan; */
    background-image: url("../images/atmosphere.png");
    background-repeat: no-repeat;
    background-position:center;
    position: relative;
    height: 650px;
    overflow:hidden;
}

#slider-vertical{
    position:absolute;
    bottom: 10px;
    left:10px;
}
#slider-vertical text{
    color:#ffffff;
    stroke: #ffffff;
}

.text{
    background:rgba(255, 255, 255, 0.4);
    -webkit-box-shadow: 2px 2px 4px 0 rgba(0,0,0,.281);
            box-shadow: 2px 2px 4px 0 rgba(0,0,0,.281);
    display:grid;
    padding:10px;
    grid-template-rows: 5fr 1fr;
}

.text p{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; 
    /* margin:0; */
}

#textButton{
    font-weight: bold;
    text-shadow: 2px 2px 2px rgba(207, 207, 207, 0.74);
}

.thirdLayer{
    background: radial-gradient(#dafca5,#accc7a);
}

.title{
    /* background: red; */
    -webkit-box-shadow: 2px 2px 4px 0 rgba(0,0,0,.281);
            box-shadow: 2px 2px 4px 0 rgba(0,0,0,.281);
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 5px;
}

/* .value-transition{
    color:#d2d2d2
} */

@media screen and (max-width: 700px){
    .dark{
        color:black;
        text-shadow: 1px 1px 1px rgb(255, 255, 255);
    }
    .expanded .dark{
        color:#d2d2d2;
    text-shadow: 2px 2px 2px rgb(0, 0, 0);
    }
    h1{
        font-size: 1.3em;
    }
    main{
       grid-template-columns:100px auto; 
       /* grid-template-rows: auto; */
       margin-bottom: 20px;
    }


}

@media screen and (max-width: 450px){
    .altitudeContainer{
        left:0;
        visibility:hidden;
    }
    .altitudeTitle{
        -webkit-transform: rotate(-90deg);
                transform: rotate(-90deg);
        left:0;
        top:100px;
    }
    .expanded .altitudeContainer{
        left: 25px;
        visibility: visible;
    }
    .expanded .altitudeTitle{
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        top:120px;
        left:5px;
    }
    h1{
        font-size:1em;
    }
    main{
       grid-template-columns:50px auto; 
       /* grid-template-rows: auto; */
       margin-bottom:7px;
    }
    #slider-vertical{
        position:absolute;
        bottom: 10px;
        left:-35px;
    }
    .expanded #slider-vertical{
        left: 10px;
    }
}

.expanded{
    grid-template-columns:auto 35px; 
}

.hidden{
    display:none;
}