HotLunches/css/mobile.scss

.menu-tougle{
    display: none;
}
@media only screen and (max-width: 600px) {

    .main-header{
        &__logo{
            width: 50%;

            a{
                overflow: hidden;
                display: inline-block;
            }

            img{
                width: 100%;
                height: auto;
            }

        }
        &__content{
            font-size: 10px;
        }
    }
    .menu-tougle{
        display: block;
        width: 25px;
        min-height: 20px;
        content: "";
        // background: yellowgreen;
        position: absolute;
        right: 5%;
        top: 0;
        z-index: 999;
        border-radius: 5px;
        border: solid 1px black;
        padding: 6px 10px;
        background: white;
    }

    span.menu-tougle__inner{
        display: block;
        background: black;
        height: 3px;
        top: initial;
        position: relative;
        width: 100%;
        right: initial;
        margin: 5px auto;
    }

    a.hideonmobile{
        display: none;
    }

    .cssplayMenu{
        ul{
            position: relative;
            width: 100%;
            display: block;
            overflow: hidden;
            border-radius: 0;
            li, li.hover{
                width: 100%;
                position: relative;
                left: auto;
                display: block;
                border-radius: 0;
                display: none;

                &.up-level{
                    display: block;

                    &.hover{
                        li{
                            display: block;
                        }
                    }
                }

                

                &:hover {
                    a{
                        background: none !important;
                        color: white !important;
                        text-shadow: none;
                    }
                    ul{
                        left: auto;
                        top: auto;
                    }
                }

                a{
                    font: 15px arial,sans-serif;
                    font-weight: 400;
                    letter-spacing: 1px;
                    padding: 13px 0;
                    display: inline-block;
                }

                a.hideonmobile{
                    display: none;
                }
            }

            ul{
                position: relative;
                width: 100%;
                left: auto;
                border: none;
                border-bottom: solid 1px white;
                border-radius: 0;
                li{
                    width: 100%;
                    position: relative;
                    left: auto;
                    display: block;
                    display: none;
                    padding-left: 10px;
                }
                

            }
        }

       

    }

    .cssplayMenu{
        > ul{
            display: none;
        }

        &.active{
            > ul{
                display: block;
                position: absolute;
                z-index: 100;
            }
        }
    }
    body{
        background: none;
        margin: 0;
    }

    body, #main, #footer-bg, .cssplayMenu, .cssplayMenu ul, table, .largeButton, a.largeButton, .container, #checkout-form, .warningframedspan{
        width: auto;
    }
    table,  .select-width400{
        width: 100%;
    }

    input[type="text"],  input[type="password"]{
        padding: 5px;
        width: 93%;
    }

    table tr td{
        // width: 100%;
        // width: auto;
        // display: block;
        padding: 0;
        margin: 0;
    }

    .btns-home table tr td{
     width: 100%;
    width: auto;
     display: block;

    }

    .smallButton, a.smallButton, .largeButton, a.largeButton, input.submit, .formButton{
        width: auto;
        display: block;
        margin: 10% 0;

        width: 100%;
        width: stretch;
        display: block;
        margin: 10% 0;
        padding: 3%;
        font-size: 14px;
        margin: 6px 0;
    }

    #footer-bg{
        background-position: bottom center;
        height: inherit;

        .smallButton, a.smallButton, .largeButton, a.largeButton, input.submit, .formButton{
            width: initial;
            display: inline-block;
        }

        table tr td {
            display: inline-block;
        }

    }

    .content-table td {
        vertical-align: text-top;
    }

    .menu-item {
        border: none;
        padding: 34px 14px;
    }
}