/*
    howto "yellowhite" color #fcfce7;

    howto.logo_colours:
            gold: 236, 197, 125  #ecc57d
           green:  86, 173, 133  #56ad85
         Netblue:   0,  80, 143  #00508f
       Waterblue: 202, 216, 237  #cad8ed

*/


.logo-div-clickable {
    color: inherit;
}

.gwfo-logo-div {
    position: fixed;
    z-index: 2001;
    left: 5px;
    top: 8px;
    /*border:1px solid red;*/
}

.gwfo-logo-img-div {
    padding-left: 0px;
    padding:7px;
    padding-bottom:0px;
}
    .gwfo-logo-img-div img {
        height: 70px;
        width: 70px;
        /*border:1px solid red;*/
    }

.logo-div {
    left: calc(20px + 87px); /* <------- move with .logo-div-imxge (below) */
    border-radius: 0px;
    height: 80px;
    position: fixed;
    width: 258px; /*width of the square showing on hover*/
    top: 10px;
    text-align: left;
    border: 0px solid red;
    z-index: 1000; /*minimum of 1000 to allow hover and activation */
}

    .gwfo-logo-div:hover,
    .logo-div:hover {
        border: 0px solid red;
        box-shadow: inset 1px 1px 1px #bdc3c7, inset -4px -4px 8px #f9f9f9;
    }
    .gwfo-logo-div:active,
    .logo-div:active {
        border-radius: 0;
        box-shadow: inset 4px 4px 8px #bdc3c7, inset -4px -4px 8px #f9f9f9;
    }

.logo-div-imxge {
    left: calc(20px + 240px); /* <------- move with .logo-div (above) */
    border: 0px solid orange; /*howto.where*/
    position: fixed;
    top: 10px;
    cursor: pointer;
}

    .logo-div-imxge img {
        position: relative;
        z-index: 1000;
        /* POSITION THE LOGO IMAGE RELATIVE TO THE MENU */
        margin-top: 7px;
        margin-left: 8px;
        height: 58px;
        padding: 4px;
        padding-right: 0px;
        opacity: 1.0;
    }

        .logo-div-imxge img:hover {
        }

        .logo-div-imxge img:active {
        }

.logo-waternet {
    /*
        This is the logo!! We thus specify the font and size no matter what the global font 
        and size specified above is to ensure a pixel-perfect layout 
    */
    font-family: NotoSans;
    font-size: 30px;
    top: 0px;
    margin-left: 32px;
    margin-left: 16px;
    position: absolute;
}

.logo-for_pourle {
    /*
        This is the logo!! We thus specify the font and size no matter what the global font 
        and size in pixels specified above is 
    */
    font-family: NotoSans;
    font-size: 16px;
    top: 38px;
    margin-left: 4px; /* increases moves "for/pour le" closer to the word Canada */
    position: absolute;
    line-height: 16px;
    text-align: right;
}

.logo-canada {
    /*
        This is the logo!! We thus specify the font and size no matter what the global font 
        and size in pixels specified above is 
    */
    font-family: NotoSans;
    font-size: 30px;
    top: 32px;
    margin-left: 62px;
    position: absolute;
    color: red;
}

.logo-div-text {
    margin-right: 100px;
}



/*@media only screen and (max-width: 480px) {*/
@media (pointer: coarse) {
    .gwfo-logo-div {
        left: 0px;
        top: 11px;
        /*height:50px;*/ /* so hovered square does not droop below menu confines*/
    }

    .gwfo-logo-img-div {
        padding-left: 4px;
    }

        .gwfo-logo-img-div img {
            height: 50px;
            width: 50px;
        }

    .logo-div {
        /*left: calc(-42px + 100px);*/
        left: calc(50vw - 100px); /* <------- move with .logo-div-imxge (below) */
        top: 10px;
        width: 166px;
        overflow: hidden;
        z-index: 999;
        /*border:1px solid green;*/
        height: 64px;
    }

    .logo-div-imxge { /* the W */
        /*left: calc(-42px + 190px);*/
        left: calc(50vw - 100px + 90px); /* <------- move with .logo-div (above) */
        top: 18px;
        /*border: 1px solid red;*/
    }

        .logo-div-imxge img {
            margin-top: 1px;
            /*margin-left: -4px;*/
            height: 38px;
            padding: 4px;
            padding-right: 0px;
            /*border:1px solid black;*/
        }

    .logo-waternet {
        font-size: 18px;
        top: 8px;
        margin-left: 15px;
    }

    .logo-for_pourle {
        font-size: 11px;
        top: 30px;
        margin-left: 4px;
        line-height: 10px;
    }

    .logo-canada {
        font-size: 18px;
        top: 29px;
        margin-left: 44px;
        color: red;
    }


    .logo-div-text {
    }
}