body{
    box-sizing: border-box;
    margin: 0;
    background-color: rgba(128, 128, 128, 1);
}
.iealert{
    background-color: red;
    width:100%;
    color:white;
    text-align:center;
    display:none;
    font-family:arial;
    font-size:1rem;
}

.footer{
    width: 100%;
    background-color:rgba(128, 128, 128, 1);
    text-align:right;
    font-family: arial;
    margin:0 0 0 0;
    font-style: italic;
    color:black;
    padding: 0 0 0 0;
    font-size:.9rem;
    display:inline-block;
}
.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1.5fr 1fr .7fr .7fr .7fr .1fr .1fr;
    grid-template-areas:
    ". . . blanktitle title title"
    ". . . blanksubtitle subtitle subtitle"
    ". . . phoneicon phoneicon phone"
    ". . . mailicon mailicon mail"
    ". . . blankmapicon mapicon map"
    ". . . linktitle linktitle links"
    "desc . . datestitle datestitle dates";
    font-family: arial;
    text-align: right;
    width:100%;
    min-height: 100vh;
    height:100%;
    background-image: url(../img/image.jpg);
    background-repeat:no-repeat;
    background-position: left center;
    background-size: cover;
}
.blankymapicon{
    grid-area:blankmapicon;
    background-color: rgba(256, 256, 256, .8);
}
.dates{
    grid-area:dates;
    background-color: rgba(256, 256, 256, .8);
    padding:0 1rem 0 0;
    text-align: left;
}
.datestitle{
    grid-area:datestitle;
    background-color: rgba(256, 256, 256, .8);
    padding:0 1rem 0 0;
}
.linktitley{
    grid-area:linktitle;
    background-color: rgba(256, 256, 256, .8);
    padding:0 1rem 0 0;
}

.zero{
    grid-area:desc;
    font-style: italic;
    color:white;
    text-align: left;
    padding: 0 0 0 1rem;
    font-size:.8rem;
}

.blankytitle{
    grid-area:blanktitle;
    background-color: rgba(256, 256, 256, .8);
}
.blankysubtitle{
    grid-area:blanksubtitle;
    background-color: rgba(256, 256, 256, .8);
}
.blanky2{
    grid-area:blank2;
    background-color: rgba(256, 256, 256, .8);
}

.linksy{
    grid-area:links;
    background-color: rgba(256, 256, 256, .8);
    font-size:1rem;
    padding:0 1rem 0 0;
    text-align: left;
}
.linksy a{
    color:black;
}
.linksy a:visited{
    color:black;
}
.one{
    grid-area:nav;
    background-color:rgba(256, 256, 256, .8);;
    padding:0 1rem 0 0;
}
.two{
    grid-area: title;
    font-size:1.4rem;
    background-color: rgba(256, 256, 256, .8);
    border-bottom: solid;
    padding:0 1rem 0 0;
    display: flex;
    align-items: flex-end;
}
.verticaltwo{
    flex: 1;
}
.three{
    grid-area:subtitle;
    font-size:1.2rem;
    background-color: rgba(256, 256, 256, .8);;
    padding:0 1rem 0 0;
}
.four{
    grid-area:phone;
    font-size:1rem;
    background-color: rgba(256, 256, 256, .8);
    padding:0 1rem 0 0;
}

.four a{
    text-decoration: none;
    color:black;
}
.five a{
    text-decoration: none;
    color:black;
}

.six a{
    text-decoration: none;
    color:black;
}


.fourimg{
    grid-area:phoneicon;
    background-color: rgba(256, 256, 256, .8);
    padding:0 1rem 0 0;
}
.five{
    grid-area:mail;
    font-size:1rem;
    background-color: rgba(256, 256, 256, .8);
    padding:0 1rem 0 0;
}
.fiveimg{
    grid-area:mailicon;
    background-color: rgba(256, 256, 256, .8);
    padding:0 1rem 0 0;
}


.six{
    grid-area:map;
    font-size:1rem;
    background-color: rgba(256, 256, 256, .8);
    padding:0 1rem 0 0;
    border-bottom: solid;
}

.siximg{
    grid-area:mapicon;
    background-color: rgba(256, 256, 256, .8);
    padding:0 1rem 0 0;
    border-bottom: solid;
}



@media (max-width:1200px){
    .wrapper{
        grid-template-columns: 1fr 1fr 1fr .5fr 1fr 1.5fr;
    }
}
@media (max-width:900px){
    .wrapper{
        grid-template-columns: 1fr 1fr 1fr .2fr 1fr 1.8fr;
    }
}

@media (min-width:1200px){
    .wrapper{
        grid-template-columns: 1fr 1fr 1.3fr .2fr 1.1fr 1.4fr;
    }
}

@media (max-width:700px){
    .wrapper{
        grid-template-columns: .7fr .7fr .7fr .2fr 1.3fr 2.4fr;
    }
}

@media (max-width:450px){
    .wrapper{
        grid-template-columns: 0 0 0 .2fr 1.3fr 2.4fr;
        grid-template-rows:  2fr 1fr .7fr .7fr .7fr 0fr;
    }
    .zero{
        visibility: hidden;
    }
    .brnodisplay{
        display: none;
    }
}

@media (max-width:360px){
    body{
        background-color: gray;
    }
    .wrapper{
        grid-template-columns: 0 0 0 0fr 0fr 1fr;
        grid-template-rows:   2fr 1fr .7fr .7fr .7fr .1fr .1fr;
        grid-template-areas:
        ". . . blanktitle title title"
        ". . . blanksubtitle subtitle subtitle"
        ". . . phoneicon phoneicon phone"
        ". . . mailicon mailicon mail"
        ". . . blankmapicon mapicon map"
        "desc . . linktitle linktitle links"
        ". . . datestitle datestitle dates";
        background-color: gray;
        background-image: none;
    }
    .zero{
        visibility: hidden;
    }
    .fourimg>img{
        visibility: hidden;
    }
    .fourimg{
        background-color: rgba(256, 256, 256, .8);
    }
    .fiveimg>img{
        visibility: hidden;
    }
    .fiveimg{
        background-color: rgba(256, 256, 256, .8);
    }
    .siximg>img{
        visibility: hidden;
    }
    .siximg{
        background-color: rgba(256, 256, 256, .8);
    }
    .brnodisplay{
        display: none;
    }
    .datestitle{
        background-color: rgba(256, 256, 256, .8);
        padding:0 0 0 0;
    }
    .dates{
        background-color: rgba(256, 256, 256, .8);
        padding:0 0 0 0;
    }
}

@media (-ms-high-contrast: active),(-ms-high-contrast: none) {
    .wrapper{
        background-color: white;
        background-image: none;
    }
    .footer{
        background-color:white;
    }
    .iealert{
        display: inline-block;
        position:fixed;
        font-size:1.3rem;
    }
    body{
        background-color: white;
    }
    
    .linksy{
        text-align:right;
        list-style-position:inside;
    }
    .dates{
        text-align:right;
        list-style-position:inside;
    }
    .siximg{
        border-bottom: 0;
    }
}


@supports (-ms-ime-align:auto) {
    .wrapper{
        max-height:150vh;
        overflow:auto;
    }
}