/* =====================================
   Mobile
===================================== */

@media screen and (max-width:768px){

body{

    overflow-y:auto;
    overflow-x:hidden;

}

/* Hero */

.hero{

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    padding:120px 25px 50px;

    height:auto;

    min-height:100vh;

}

/* Left */

.hero-left{

    width:100%;

    margin:0;

    display:flex;

    justify-content:center;

}

/* Content */

.hero-content{

    width:100%;

    max-width:420px;

}

/* Name */

.hero-name{

    font-size:68px;

    line-height:.9;

}

/* Title */

.hero-title{

    margin-top:22px;

    font-size:16px;

    letter-spacing:8px;

}

/* Description */

.hero-description{

    margin:25px 0;

    font-size:18px;

    line-height:1.7;

}

/* Glass */

.glass-menu{

    width:100%;

    margin-top:30px;

    padding:22px;

}

/* Right */

.hero-right{

    width:100%;

    height:420px;

    margin-top:40px;

}

/* Flower */

.hero-art{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-art img{

    width:90%;

    max-width:420px;

}

/* Background */

.background-image{

    width:95vw;

}

/* Footer */

.footer{

    position:relative;

    right:auto;

    bottom:auto;

    margin-top:30px;

    text-align:center;

}

/* Scroll */

.scroll-indicator{

    display:none;

}

/* Popup panel: menu is no longer beside it, so it can take the
   full width and just sit below the top bar */

.content-panel{

    left:16px;

    right:16px;

    top:16px;

    height:88vh;

}

.panel-content{

    padding:32px;

}

.panel-body{

    flex-direction:column;

}

.panel-image{

    flex:0 0 auto;

    width:100%;

}

}