@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700&display=swap');

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body,
html {
    /*font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;*/
    font-family: "Raleway", "Arial", sans-serif;
    line-height: 1.15;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    font-size: 22px;
    overflow: hidden;
    scroll-behavior: smooth;
    color: inherit;
    cursor: default;
    float: none;
    text-align: left;
    font-weight: normal;
    height: 100vh;
    min-height: 100vh;
    width: 100vw;
}

/*----------------------*/

.textsmall {
    font-size: small;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

.pheader {
    color: red;
    font-size: x-large;
    margin-bottom: .5em;
}

.special {
    margin-bottom: .5em;
    border-bottom: 1px solid lightgray;
}

strong {
    color: blue;
    margin-bottom: .5em;
}

.dipstripMsg {
    animation: slideIn 1.2s ease forwards .8s;
    visibility: hidden;
    font-size: 24px;
    color: black;
    padding-bottom: .5em;
    padding-top: .5em;
}

.infoMsg {
    animation: expand 1.2s ease forwards .8s;
    visibility: hidden;
    color: red;
}

/*-------------------------------------*/
.pgcontainer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr 2.5em;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "header"
        "main"
        "footer";
    height: 100%;
    width: 100%;
}

header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: fit-content fit-content;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "logo"
        "info";
    grid-area: header;
}

.logo {
    grid-area: logo;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .logo img {
        height: 160px;
        width: 250px;
        object-fit: cover;
    }

.info {
    grid-area: info;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas:
        "ws phone";
    background: hsla(0, 2%, 61%, 0.45);
}

.ws {
    grid-area: ws;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: larger;
    color: palevioletred;
}

    .ws h1 {
        color: red;
        font-size: 1.6em;
    }

.phone {
    grid-area: phone;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (min-width:250px) and (max-width:768px) {
    header {
        grid-template-columns: 1fr;
        grid-template-areas:
            "logo"
            "info";
        grid-template-rows: 3em fit-content;
    }

    .logo {
        grid-area: logo;
    }
        .logo img {
            height: 160px;
            width: 250px;
            object-fit: cover;
            
        }
    .info {
        grid-area: info;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        gap: 0px 0px;
        grid-template-areas:
            "phone";
    }

    .ws {
        display: none;
    }

    .phone {
        text-align: center;
        width: 100%;
    }
}

main {
    grid-area: main;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "content";
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
}

.content {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "top"
        "lower";
    grid-area: content;
    padding: .5em;
    margin-left: .1em;
    width: 100%;
}

.top {
    grid-area: top;
}

.lower {
    display: grid;
    grid-template-columns: 1fr 13em;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "text quotation";
    grid-area: lower;
 
}

/*ul {
    list-style-type: circle;
}*/

.text {
    grid-area: text;
    padding-left: .5em;
}

.quotation {
    grid-area: quotation;
    align-self: end;
    justify-self: right;
}

    .quotation img {
        height: 160px;
        width: 250px;
        object-fit: contain;
    }

@media screen and (min-width:250px) and (max-width:768px) {
    .lower {
        grid-template-columns: 1fr;
        grid-template-areas:
            "text";
    }

    .quotation {
        display: none !important;
    }

        .quotation img {
            display: none !important;
        }
}

footer {
    grid-area: footer;
    height: 100%;
    width: 100%;
    background: hsla(0, 2%, 61%, 0.45);
    /*  display: flex;
    align-items: center;
    justify-content: center;*/
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "message"
        "copyright";
}

.copyright {
    grid-area: copyright;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: xx-small;
}

.message {
    grid-area: message;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (min-width:250px) and (max-width:768px) {
    footer {
        grid-template-rows: 1fr;
    }

    .message {
        font-size: medium;
    }
}

.overlay {
    z-index: 2;
    height: 5em;
    width: 15em;
    top: 12em;
    left: 10em;
    opacity: 0.4;
    position: absolute;
    border: 1px solid lightgray;
    box-shadow: 5px 5px 5px lightgray;
    border-radius: 8px;
}

@media screen and (min-width:250px) and (max-width:768px) {
    .overlay {
        height: 5em;
        width: 12em;
        top: 22em;
        left: 3em;
    }
}

.ovcontent {
    width: 100%;
    height: 100%;
    background: hsla(0, 100%, 50%, 0.45);
}

    .ovcontent p {
        color: black;
    }