@media only screen and (min-device-width: 641px){
    #menu div.rollout.hidden{
        display:block !important;
    }

    
}


@media only screen and (max-device-width: 640px){

    #tutorial{
        width:90%; 
        max-width:90%;
        transform:translateX(-50%);
        
    }

    #tutorial > div.main{
        width:100%;
    }
    #tutorial > div.main > div.content{
        font-size:2vmax;
    }

    #tutorial > div.option.next{
        font-weight:bold;
        padding:2vmax;
    }

    #tutorial > div.option:hover,
    #tutorial > div.option.next:hover
    {
        margin-left:0;
        width:100%;
    }

    #tutorial > div.option,
    #tutorial > div.option.prev,
    #tutorial > div.option.close
    {
        width:100%;
        margin-left:0;
        font-size:2vmax;
        padding:1vmax;
        font-weight: normal;
        text-align: center;
    }

    #tutorial > div.main > div.arrow{
        top:-2.1vmax;
        position: fixed;
    }

    #tutorial > div.main > div.arrow > div.point{
        transform: rotate(45deg) translate(90%, 0%);
    }

    #menu{
        top:auto; left:50%;
        transform:translateX(-50%);
        bottom:0; right:auto;
        text-align: auto;
        border:none;
        background:none;
        box-shadow:none;
    }

    #content{
        top:0.25vmax;
        left:.25vmax; right:.25vmax;
    }

    #menu div.rollout{
        position: absolute;
        left:50%; 
        transform:translate(-50%, -100%);
        top:0%;
        transition:all 0.1s ease-out;
        width:200%;
    }

    #menu a{
        padding:1.5vmax;
        font-size:3vmax;
        display:block;
        position: relative;
        top:auto; right:auto;
        border-radius:1vmax;
    }
    #menu a.green{background:rgb(200,255,200); color:#355;}
    #menu a.yellow{background:rgb(255,240,200); color:#765;}
    #menu a.red{background:rgb(255,200,200); color:#755;}  
    #menu a.logout{background:rgb(255,200,200); color:#755;}  
    #menu a.blue{background:rgb(200,200,255); color:#557;}  

    #menu a img{
        margin:0; 
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
    }
    
    

    
    #g-signin2{
        position: fixed;
        right:0.5vmax;
        top:0.5vmax;
        height:5vmax;
        overflow:hidden;
    }

    #g-signin2 span.abcRioButtonContents{
        font-size:3vmax !important;
        vertical-align: middle;
        padding:1vmax;
        display:inline-block;
    }

    #g-signin2 div.abcRioButtonIcon, #g-signin2 div.abcRioButtonIcon *{
        height:4.5vmax; 
        width:4.5vmax;
        
    }


    #menu div.hidden{
        transform:translate(-50%, 0%);
        top:100%;
    }
    #menu div.button{
        background: linear-gradient(rgba(255,255,255,.9) 1%, rgba(200,200,200,.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        border:0.55vmax #FFF solid; 
        border-top-left-radius:2vmax; 
        border-top-right-radius:2vmax; 
        border-bottom:none;
        display:block;
        font-size:4vmax;
        padding:2vmax 4vmax;
        color:#FFF;
        text-shadow:0.2vmax 0.2vmax 0.4vmax rgba(0,0,0,.5);
        box-shadow:0.2vmax 0.2vmax 0.4vmax rgba(0,0,0,.5);
        
    }
    #menu div.button:active{
        background:rgba(255,255,255,.75);
    }


    *.desktopOnly{
        display:none;
    }

    #wrap div.border{
        padding:1vmax;
    }
    
    /* Overlay */
    #overlay > div.content{
        width:90%;
    }



    /* Cook helper */
    #cookHelper div.header{
        display:flex;
        top:-1vmax; 
        justify-content: space-between;
        z-index:10000;
    }
    #cookHelper div.header div{
        width:32.9%; margin:0;
        display: block;
        position: relative;
    }

    #cookHelper > div.center{
        height:100%;
        width:100%;
        z-index:9000;
        top:0; bottom:0;
        height:auto; max-height: none;
    }

    #cookHelper > div.center > div.content{
        border-radius:0;
        background: linear-gradient(to bottom, #7a7a7a 1%,#4f4f4f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        position: absolute;
        top:0; bottom:0;
    }

    #cookHelper > div.center > div.content > div.nav{
        margin-top:7vmax;
        font-size:3vmax;
        line-height: 150%;
    }

    #cookHelper > div.center #jasdoge.pop{
        transform:scale(1,1); 
        bottom:2vmax;
        right:5vmax;
    }

    #cookHelper > div.center > div.content h1{
        font-size:4vmax; 
        color:#EEE;
        margin-bottom:2vmax;
    }
    #cookHelper > div.center > div.content p.bottom{
        font-size:2vmax;
        color:#EEE;
    }
    



    #cookHelper > div.center > div.content > div.centerer > div.left.ingredientRollout{
        display:none !important;
    }
    #cookHelper > div.center > div.content > div.centerer > div.right{
        width:auto;
        background:none;
        box-shadow:none;
        padding:0;
    }





    #cookHelper > div.ingredientRolloutButton{
        position:absolute;
        bottom:0; left:50%;
        transform:translateX(-50%);
        z-index:9003;
        background: linear-gradient(rgba(255,255,255,.9) 1%, rgba(200,200,200,.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        border:0.55vmax #FFF solid; 
        border-top-left-radius:2vmax; 
        border-top-right-radius:2vmax; 
        border-bottom:none;
        display:block;
        font-size:4vmax;
        padding:3vmax 4vmax;
        color:#FFF;
        text-shadow:0.2vmax 0.2vmax 0.4vmax rgba(0,0,0,.5);
        box-shadow:0.2vmax 0.2vmax 0.4vmax rgba(0,0,0,.5);
        min-width:35vmax; 
    }

    #cookHelper > div.ingredientRolloutButton span{
        transform:rotate(-90deg); 
        text-shadow:none;
        color:#000;
        vertical-align: bottom;
        display:inline-block;
        transition: transform 0.2s ease-in-out;
    }

    #cookHelper > div.ingredientRolloutButton.open span{
        transform:rotate(90deg); 
    }

    #cookHelper > div.ingredientRollout{
        position:absolute;
        max-height:75%;
        bottom:0;
        left:0; right:0;
        background:rgba(255,255,255,.9);
        z-index:9002;
        transition:transform 0.25s ease-out;
        padding-bottom:9vmax;
        display:block;
    }
    #cookHelper div.ingredientRollout.hidden{
        display:block !important;
        transform:translateY(100%);
    }

    

}