/*
    font-family: 'Cinzel', serif;
    font-family: 'Shadows Into Light Two', cursive;
    font-family: 'Marcellus SC', serif;
    font-family: 'Wire One', sans-serif;
    font-family: 'Rouge Script', cursive;
    logo orig size 2000 x 1200
*/


body {
    background-color: #e1dada;
    font-family: 'Marcellus SC', sans-serif;
    height:100%;
}


#page {
    position: relative;
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}

    #page #page_head {
        position: relative;
        background-color: #fff;
        z-index: 500;
    }

        #page #page_head #grm {
            position: relative;
            background-image: url("../images/logos/GRM_LOGO-orange.png");
            background-repeat: no-repeat;
        }

a:link, a:visited, a:active {
    color: #000;
    text-decoration: none;
}

/*hamburger menu*/
.topnav {
    position: relative;
    overflow: hidden;
    background-color: #333;
    z-index: 500;
}

    .topnav a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 10px 10px;
        text-decoration: none;
        font-size: 14px;
        font-family: 'Marcellus SC', sans-serif;
    }

        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

.active {
    background-color: #4CAF50;
    color: white;
}

.topnav .icon {
    display: none;
}



@media screen and (max-device-width: 768px) {
    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon, .navigation {
        float: right;
        display: block;
    }
}

@media screen and (max-device-width: 768px) {
    .topnav.responsive {
        position: relative;
    }

        .topnav.responsive .icon {
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
        }
}


/* Smartphones (portrait and landscape) ----------- */

@media only screen and (max-device-width : 319px) {
    #page div {
        display: none;
    }

    #page::after {
        content: "please use larger device to visit us.";
        margin: auto;
        font-size: 22vw;
        text-align: center;
    }
}


@media only screen and (min-device-width : 320px) and (max-width : 480px) {

    #page {
        width: 96%;
        box-shadow: 0 0 20px #999;
        margin-bottom: 50px;
        padding: 5px;
        min-height: 600px;
    }

        #page #page_head {
            display: block;
        }


        #page #page_content {
            position: relative;
            /*width:100%;*/
            background-color: #ddd;
            height: 100px;
            display: block;
            padding: 10px;
        }

        #page #page_foot {
            position: relative;
            /*width:100%;*/
            background-color: #ccc;
            height: 100px;
            display: block;
            padding: 10px;
        }

        #page #page_head #grm {
            position: relative;
            background-position: left top;
            
            line-height: 50px;
            background-size: 80px;
            margin-bottom: 10px;
            padding-left: 70px;
        }

            #page #page_head #grm h1 {
                position: relative;
                font-size: 17px;
                line-height: 20px;
                padding-top: 10px;
                text-wrap: none;
            }

            #page #page_head #grm h2 {
                position: relative;
                font-size: 25px;
                line-height: 23px;
                padding-left: 20px;
                margin-top: -12px;
                font-family: 'Wire One';
            }


    .topnav {
        font-size: 1vw;
    }
}

@media only screen and (min-device-width : 479px) and (max-device-width : 768px) {

    #page {
        width: 96%;
        box-shadow: 0 0 20px #999;
        margin-bottom: 50px;
        padding: 5px;
        min-height: 600px;
    }

        #page #page_head {
            display: block;
        }


        #page #page_content {
            position: relative;
            /*width:100%;*/
            background-color: #ddd;
            height: 100px;
            display: block;
            padding: 10px;
        }

        #page #page_foot {
            position: relative;
            /*width:100%;*/
            background-color: #ccc;
            height: 100px;
            display: block;
            padding: 10px;
        }

        #page #page_head #grm {
            position: relative;
            background-position: left top;
            height: 60px;
            line-height: 50px;
            background-size: 100px;
            margin-bottom: 10px;
            padding-left: 90px;
        }

            #page #page_head #grm h1 {
                position: relative;
                font-size: 30px;
                line-height: 8px;
                padding-top: 20px;
                text-wrap: none;
            }

            #page #page_head #grm h2 {
                position: relative;
                font-size: 14px;
                line-height: 10px;
                padding-left: 20px;
                margin-top: -2px;
                font-family: 'Shadows Into Light Two', cursive;
            }
}

@media only screen and (min-device-width : 767px) and (max-device-width : 1024px) {

    #page {
        width: 96%;
        box-shadow: 0 0 20px #999;
        margin-bottom: 50px;
        padding: 5px;
        min-height: 600px;
    }

        #page #page_head {
            display: block;
        }


        #page #page_content {
            position: relative;
            /*width:100%;*/
            background-color: #fff;
            height: 100px;
            display: block;
            padding: 10px;
        }

        #page #page_foot {
            position: relative;
            /*width:100%;*/
            background-color: #ccc;
            height: 100px;
            display: block;
            padding: 10px;
        }

        #page #page_head #grm {
            position: relative;
            background-position: left top;
            height: 60px;
            line-height: 50px;
            background-size: 100px;
            margin-bottom: 10px;
            padding-left: 90px;
        }

            #page #page_head #grm h1 {
                position: relative;
                font-size: 30px;
                line-height: 8px;
                padding-top: 20px;
                text-wrap: none;
            }

            #page #page_head #grm h2 {
                position: relative;
                font-size: 14px;
                line-height: 10px;
                padding-left: 20px;
                margin-top: -2px;
                font-family: 'Shadows Into Light Two', cursive;
            }
}