/* ________________________________________ PORTRAIT ________________________________________ */

@media (orientation: portrait) {

    :root {
        --fSize_Dft: 6.15vw;
        --footHeight: 52vw;
    }

    body {
        font-size: var(--fSize_Dft);
        line-height: calc(var(--fSize_Dft) * 1.2);
        background-color: white;
        background-size: auto 100%;
    }
    h1 {
        font-size: calc(var(--fSize_Dft) * 1.32);
    }
    h4 {
        font-size: calc(var(--fSize_Dft) * 1.04);
        margin: 10vw 0 -4.5vw 0;
    }
    div#mainDiv {
        width: 100%;
    }
    div#iPhoneCol {
        display: none;
    }
    div#mainCol {
        margin-top: 0;
        margin-bottom: 0;
        width: auto;
        height: auto;
        padding: 2vw 2vw 0 2vw;
        float: none;
    }
    div#mainCol_Top {
        height: 47vw;
    }
    #logo {
        width: 47%;
        height: auto;
        right: 2vw;
    }
    div#mainText p {
        margin-right: 2vw;
    }
    img#line {
        width:calc(100% - 2vw);
        height: auto;
    }
    div#mainCol nav img {
        margin-top: 7px;
        width: 100%;
        height: auto;
    }
    div#mainCol nav a#btn_Privacy,
    div#mainCol nav a#btn_Support
    {
        display: none;
    }
    div#mainCol nav a#btn_ScreenShots {
        display: inline;
    }
    a#supMail{
        font-size: calc(var(--fSize_Dft) * 0.87);
    }
    ul {
        padding-left:5.5vw;
    }
    ul li {
        font-size: var(--fSize_Dft);
        line-height: calc(var(--fSize_Dft) * 1.07);
    }
    p#h_para2 .span1{
        display: block;
        line-height: calc(var(--fSize_Dft) * 0.8);
        text-align: left;
        margin-top: 1.5vw;
        margin-bottom: 3vw;
        padding: 1.5vw 0 2vw 2vw;
        background: url("i2/grass_block_double.png");
        background-size: 100% 100%;/*req.*/
    }
    p#h_para2 .span1 span:nth-child(1){
        font-size: calc(var(--fSize_Dft) * 0.82);
        display: inline-block;
        width: 100%;
    }
    p#h_para2 .span1 span:nth-child(2){
        font-size: calc(var(--fSize_Dft) * 1.03);
    }
    #h_para1{
        display: none;
    }
    body div#mainText p#h_para2{
        clear: both;
        margin-top: 0;
    }
    p#h_para2 .span2{
        display: inline-block;
    }
    p#h_para2 .span3{
        display: inline-block;
        margin-top: 3vw;
    }
    #mainText img.appleBtn {
        display: inline-block;
        width: 136px;
        height: auto;
    }
    div#ft_Wrap{
        grid-template-columns:none;
        grid-template-rows:none;
        background-size: 
            120vw auto, 
            auto 100%;
    }
    div#ft_L, div#ft_R {
        display: none;
    }
    div#ft_M{
        position: relative;
        background-size: 100px 110px;
        line-height: calc(var(--fSize_Dft) * 1.1);
    }
    div#ft_M span#ft_c1, div#ft_M span#ft_c2 {
        display: block;
        float: left;
        width: 47%;
        margin-top: 8vw;
    }
    div#ft_M a{
        display: block;
        clear: both;
        margin-top: 1vw;
        margin-left: 2vw;
    }
    div#ft_M a:first-of-type {
        margin-top: 2.5vw;
        margin-left: 2vw;
    }
    div#ft_Wrap a.lnk_ScreenShots {
        display: block;
    }
    body span#cpyRgt_1, body span#cpyRgt_2 {
        font-size: calc(var(--fSize_Dft) * 0.8);
        margin-left: 2vw;
    }
    div#ft_CprRgt{
        display: block;
        position: absolute;
        bottom: 2vw;
    }
    span#cpyRgt_1 {
        clear: both;
        display: block;
        margin-left: 0;
        padding-top: 0;
    }
    span#cpyRgt_2 {
        clear: both;
        display: block;
    }
    
    
}/* (End of Portrait)*/



















/* ________________________________________ vvvVVVvvv ________________________________________ */



















/* ________________________________________ LANDSCAPE ________________________________________ */
@media (orientation: landscape) {

    :root {
        --footHeight: 30vw;
        --fSize_Dft: 2.0vw; /* Default */
    }

    body {
        font-size: var(--fSize_Dft);
        line-height: calc(var(--fSize_Dft) * 1.2);
        background-color: white;
        background-size: auto 100%;
    }
    h1 {
        font-size: calc(var(--fSize_Dft) * 2.25);
        margin-top: 0;
        margin-bottom: 4vw;
    }
    h4 {
        font-size: calc(var(--fSize_Dft) * 1.45);
        line-height: calc(var(--fSize_Dft) * 1.0);
        margin: 5vw 0 0 0;
    }
    div#mainDiv {
        width: 100%;
    }
    div#iPhoneCol {
        display: none;
    }
    div#mainCol {
        margin-top: 0;
        margin-bottom: 0;
        width: auto;
        height: auto;
        padding: 2vw 2vw 1vw 2vw;
        float: none;
    }
    div#mainCol_Top {
        height: 10vw;
    }
    #logo {
        top: 0;
        width: 15%;
        height: auto;
        right: 0;
    }
    div#mainText p {
        margin-right: 0;
    }
    img#line {
        display:none;
    }
    div#mainCol nav {
        width: 75%;
        padding-bottom: 3vw;
    }
    div#mainCol nav img {
        width: 28%;
        height: auto;
        margin-top: 7px;
        margin-right: 2vw;
    }
    div#mainCol nav a#btn_Privacy,
    div#mainCol nav a#btn_Support
    {
        display: none;
    }
    div#mainCol nav a#btn_ScreenShots {
        display: inline;
    }
    ul {
        padding-left:5.5vw;
    }
    ul li {
        font-size: var(--fSize_Dft);
        line-height: calc(var(--fSize_Dft) * 1.1);
    }
    div#mainText p#h_para2 {
        text-align: left;
    }
    p#h_para2 span.span1{
        display: inline;
        line-height: calc(var(--fSize_Dft) * 2.2);
        margin-top: 1.5vw;
        margin-bottom: 3vw;
        padding: 1.5vw 1.5vw 1vw 2vw;
        text-align: left;
        background: url("i2/grass_block_double.png");
        background-size: 100% 100%;/*req.*/
    }
    p#h_para2 span.span1 span:nth-child(1),
    p#h_para2 span.span1 span:nth-child(2){
        display: inline;
        font-size: var(--fSize_Dft);
    }
    #h_para1{
        display: none;
    }
    body div#mainText p#h_para2{
        clear: both;
        margin-top: 0;
    }
    p#h_para2 span.span2,
    p#h_para2 span.span3{
        display: block;
        margin: 0;
    }    
    #mainText img.appleBtn {
        display: inline-block;
        width: 136px;
        height: auto;
    }
    div#ft_Wrap{
        display: block;
        grid-template-columns:none;
        grid-template-rows:none;
        background-size: 
            80vw auto, 
            auto 100%;
    }
    div#ft_L, div#ft_R {
        display: none;
    }
    div#ft_M{
        position: relative;
        background-size: 100px 110px;
        line-height: calc(var(--fSize_Dft) * 1.2);/* (!) */
    }
    div#ft_M span#ft_c1, div#ft_M span#ft_c2 {
        display: block;
        float: left;
        width: 47%;
        margin-top: 5vw;
    }
    div#ft_M a{
        display: block;
        clear: both;
        margin-top: 1vw;
        margin-left: 2vw;
    }
    div#ft_M a:first-of-type {
        margin-top: 2.5vw;
        margin-left: 2vw;
    }
    div#ft_Wrap a.lnk_ScreenShots {
        display: block;
    }
    body span#cpyRgt_1, body span#cpyRgt_2 {
        margin-left: 2vw;
    }
    div#ft_CprRgt{
        display: block;
        position: absolute;
        bottom: 2vw;
    }
    span#cpyRgt_1 {
        clear: both;
        
        margin-left: 0;
        padding-top: 0;
    }
    span#cpyRgt_2 {
        clear: both;
        
    }
    
    

    
    /* Tweak */
    div#ft_M{
        font-size: 19pt;
        line-height: 3.7vw;
    }
    
    
    
    
    
}/* (End of Landscape)*/