body {
    margin: 0;
    padding: 0;
    border: none;
}

:target {
    border-style: solid;
    border-width: 1px 0px;
    border-color: red;
}



/*-------------------------------------------------------------
	PAGE LAYOUT 
-------------------------------------------------------------*/
.publicNotice {
    width: 100%;
    background-color: red;
    color: white;
    display: inline-block;
    position: relative;
    padding: 0;
    border: none;
    margin: 0;
    text-align: center;
    font-family: arial;
    font-size: 12px;
}

.pageContent {
    width: 100%;
    min-height: calc(100% - 3.13rem - 46px); /* 3.13rem is the Header size, 46px is the Footer Size */
    display: inline-block;
    position: relative;
    padding: 0;
    border: none;
    margin: 0;
}

.pageFooter {
    height: 46px;
    width: 100%;
    display: block;
    position: relative;
    padding: 0px;
    border: none;
    margin: 0px;
}

/*-------------------------------------------------------------
	IMAGE PANEL
-------------------------------------------------------------*/

.panelImage {
    height: 900px;
    width: 100%;
    /*min-width: 600px; */
    display: block;
    float: left;
    position: relative;
    margin: 0;
    border: none;
    padding: 0;
    background-color: gray;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.panelImageTextLeft {
    text-align: left;
    position: absolute;
    left: 20px;
    Top: 30%;
    bottom: 20px;
    right: 76%;
    min-width: 250px;
    background-color: InfoText;
    opacity: .7;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
}

.panelImageTextRight {
    text-align: left;
    position: absolute;
    left: 76%;
    Top: 30%;
    bottom: 20px;
    right: 20px;
    min-width: 250px;
    background-color: InfoText;
    opacity: .7;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
}

@media screen and (max-width: 1300px) {
    .panelImageTextRight {
        left: calc(76% - ((250px + 20px + 20px + 20px) - 24%));
    }
}

.panelImageBlockLeft {
    position: absolute;
    top: 700px;
    left: 400px;
    width: 200px;
}

    .panelImageBlockLeft img {
        width: 200px;
    }

.panelImageBlockRight {
    position: absolute;
    top: 700px;
    right: calc(24% - 100px);
    width: 200px;
}

    .panelImageBlockRight img {
        width: 200px;
    }

.panelImageTextLeftWide {
    text-align: left;
    display: block;
    position: relative;
    float: left;
    margin: 250px 40px;
    min-width: 250px;
    background-color: InfoText;
    opacity: .7;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
}
    .panelImageTextLeftWide > .indent-p > a {
        color: white;
        cursor: pointer;
    }

.panelImageTextRightWide {
    text-align: left;
    display: block;
    position: relative;
    float: right;
    margin: 250px 40px;
    min-width: 250px;
    background-color: InfoText;
    opacity: .7;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
}

    .panelImageTextRightWide > .indent-p > a {
        color: white;
        cursor: pointer;
    }

@media screen and (max-width: 1200px) {
    .panelImageTextLeftWide, .panelImageTextRightWide {
        margin: 225px 20px;
    }
}

@media screen and (max-width: 1100px) {
    .panelImageTextLeftWide, .panelImageTextRightWide {
        margin: 175px 20px;
    }
}

@media screen and (max-width: 500px) {
    .panelImageTextLeftWide, .panelImageTextRightWide {
        margin: 175px 10px;
    }
}


.panelImageBlockLeftWide {
    position: absolute;
    top: 100px;
    left: 40px;
    width: 200px;
}

    .panelImageBlockLeftWide img {
        width: 200px;
    }

.panelImageBlockRightWide {
    position: absolute;
    top: 100px;
    right: 20px;
    width: 200px;
}

    .panelImageBlockRightWide img {
        width: 200px;
    }

@media screen and (max-width: 1200px) {
    .panelImageBlockLeftWide, .panelImageBlockRightWide {
        top: 75px;
    }
}

@media screen and (max-width: 1100px) {
    .panelImageBlockLeftWide, .panelImageBlockRightWide {
        top: 25px;
    }
}

@media screen and (max-width: 500px) {
    .panelImageBlockLeftWide, .panelImageBlockRightWide {
        top: 25px;
    }
}
/*-------------------------------------------------------------
	CONTACY US PANEL & TEXT
-------------------------------------------------------------*/

.panelMapBlock {
    position: absolute;
    top: 380px;
    left: 20px;
    width: calc(100% - 40px);
}

    .panelMapBlock iframe {
        border-radius: 20px;
        width: 100%;
        height: 500px;
    }

.panelMapTextRight {
    position: absolute;
    Top: 20px;
    left: calc(100% - 250px - 20px);
    bottom: 60%;
    right: 20px;
    background-color: InfoText;
    opacity: .7;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
}
    .panelMapTextRight a {
        color: white;
    }

    .triangle-up {
        position: absolute;
        left: 20px;
        top: 300px;
        width: 0;
        height: 0;
        border-left: 400px solid transparent;
        border-right: calc(100vw - 460px) solid transparent;
        border-bottom: 86px solid lightgoldenrodyellow;
        opacity: .5;
    }

/*-------------------------------------------------------------
	CONTENT PANEL
-------------------------------------------------------------*/
.panelContent {
    width: 100%;
    display: table;
    float: left;
    position: relative;
    margin: 0;
    border: none;
    padding: 0 0 40px 0;
    background-color: lightslategrey;
}

    .panelContent > .title {
        text-align: center;
        color: white; /* #272e42; */
        opacity: .7;
    }

/*-------------------------------------------------------------
	FIXED WIDTH ROW
-------------------------------------------------------------*/

.titleRow {
    width: 100%;
    display: inline-block;
    margin: 0;
    border: none;
    padding: 0;
    text-align: center;
    color: #272e42;
}

/*-------------------------------------------------------------
	VARIABLE WIDTH ROW
-------------------------------------------------------------*/

.cardRow {
    display: table;
    margin: 0;
    border: none;
    padding: 0;
    text-align: center;
    /*                   Center cards by adjusting the width & left margin sizes dynamically.             */
    /*    Width = (CardWidth + CardMargins + CardBorders + CardPaddings) * NumberOfCards                  */
    /*    Left Margin = (((CardWidth + CardMargins + CardBorders + CardPaddings) * NumberOfCards) / 2)    */
    width: calc((300px + 24px + 24px) * 7);
    margin: 0 0 0 calc(50% - (((300px + 24px + 24px) * 7) / 2));
}

/*                                   room for 6 cards                              */
/* Once the window width is below the size of 7 cards + 10px padding on both sides */
/* Then adjust the width of the box and use the margin to center on the page       */
@media screen and (max-width: calc(((300px + 24px + 24px) * 7) + 20px)) {
    .cardRow {
        width: calc((300px + 24px + 24px) * 6);
        margin: 0 0 0 calc(50% - (((300px + 24px + 24px) * 6) / 2));
    }
}

/*                                   room for 5 cards                              */
/* Once the window width is below the size of 6 cards + 10px padding on both sides */
/* Then adjust the width of the box and use the margin to center on the page       */
@media screen and (max-width: calc(((300px + 24px + 24px) * 6) + 20px)) {
    .cardRow {
        width: calc((300px + 24px + 24px) * 5);
        margin: 0 0 0 calc(50% - (((300px + 24px + 24px) * 5) / 2));
    }
}

/*                                   room for 4 cards                              */
/* Once the window width is below the size of 5 cards + 10px padding on both sides */
/* Then adjust the width of the box and use the margin to center on the page       */
@media screen and (max-width: calc(((300px + 24px + 24px) * 5) + 20px)) {
    .cardRow {
        width: calc((300px + 24px + 24px) * 4);
        margin: 0 0 0 calc(50% - (((300px + 24px + 24px) * 4) / 2));
    }
}

/*                                   room for 3 cards                              */
/* Once the window width is below the size of 4 cards + 10px padding on both sides */
/* Then adjust the width of the box and use the margin to center on the page       */
@media screen and (max-width: calc(((300px + 24px + 24px) * 4) + 20px)) {
    .cardRow {
        width: calc((300px + 24px + 24px) * 3);
        margin: 0 0 0 calc(50% - (((300px + 24px + 24px) * 3) / 2));
    }
}
/*                                   room for 2 cards                              */
/* Once the window width is below the size of 3 cards + 10px padding on both sides */
/* Then adjust the width of the box and use the margin to center on the page       */
@media screen and (max-width: calc(((300px + 24px + 24px) * 3) + 20px)) {
    .cardRow {
        width: calc((300px + 24px + 24px) * 2);
        margin: 0 0 0 calc(50% - (((300px + 24px + 24px) * 2) / 2));
    }
}
/*                                   room for 1 cards                              */
/* Once the window width is below the size of 2 cards + 10px padding on both sides */
/* Then adjust the width of the box and use the margin to center on the page       */
@media screen and (max-width: calc(((300px + 24px + 24px) * 2) + 20px)) {
    .cardRow {
        width: calc((300px + 24px + 24px) * 1);
        margin: 0 0 0 calc(50% - (((300px + 24px + 24px) * 1) / 2));
    }
}

/*-------------------------------------------------------------
	CONTENT CARD BOX
-------------------------------------------------------------*/

.card {
    width: 300px;
    height: 250px;
    display: inline-block;
    position: relative;
    float: left;
    background-color: aliceblue;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
    opacity: .9;
    margin: 12px;
    padding: 12px;
    text-align: center;
    font-family: arial;
    font-size: 14px;
}

    .card h1 {
        text-align: center;
        color: #272e42;
    }

    .card h2 {
        text-align: center;
        color: #272e42;
    }

    .card h3 {
        text-align: center;
        text-decoration: underline;
        color: #272e42;
    }

    .card p {
        text-align: left;
        color: grey;
        font-size: 14px;
        padding: 0px 20px;
    }

    .card a {
        margin: 10px;
        text-decoration: none
    }

        .card a:hover {
            text-decoration: underline
        }

.cardButton {
    height: 30px;
    width: 200px;
    display: flex;
    position: absolute;
    top: 225px;
    left: calc(50% - ((200px) / 2));
    background-color: #272e42;
    margin: 0;
    border-radius: 4px;
    border: none;
    padding: 8px;
    font-size: 16px;
    text-align: center;
    align-items: center;
    justify-content: center;
    color: whitesmoke;
    transition: all 0.5s;
    cursor: pointer;
}

    .cardButton:hover {
        color: white;
        background-color: black;
        /*border: 2px solid;*/
        opacity: .80;
    }

    .cardButton span {
        cursor: pointer;
        display: inline-block;
        position: center;
        transition: 0.5s;
    }

        .cardButton span:after {
            content: '\00bb';
            position: center;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }

    .cardButton:hover span {
        padding-right: 25px;
    }

        .cardButton:hover span:after {
            opacity: 1;
            right: 0;
        }

/*-------------------------------------------------------------
	FOOTER NAVIGATION PANEL
-------------------------------------------------------------*/

.pageFooterNav {
    width: 100%;
    display: flex;
    float: left;
    position: relative;
    background-color: InfoText;
    color: ghostwhite;
    opacity: .9;
    margin: 0;
    padding-bottom: 70px;
}

.footerNavPanel h3 {
    text-align: center;
    text-decoration: underline;
    color: ghostwhite;
}

.footerCardRow {
    display: table;
    margin: 0;
    border: none;
    padding: 0;
    text-align: center;
    /*                   Center cards by adjusting the width & left margin sizes dynamically.             */
    /*                   Start with room for 4 cards, so cards won't extend passed right of page          */
    /*    Width = (CardWidth + CardMargins + CardBorders + CardPaddings) * NumberOfCards                  */
    /*    Left Margin = (((CardWidth + CardMargins + CardBorders + CardPaddings) * NumberOfCards) / 2)    */
    width: calc((200px + 24px + 24px) * 3);
    margin: 0 0 0 calc(50% - (((200px + 24px + 24px) * 3) / 2));
}
/*                                   room for 3 cards                              */
/* Once the window width is below the size of 4 cards + 10px padding on both sides */
/* Then adjust the width of the box and use the margin to center on the page       */
@media screen and (max-width: calc(((200px + 24px + 24px) * 4) + 20px)) {
    .footerCardRow {
        width: calc((200px + 24px + 24px) * 3);
        margin: 0 0 0 calc(50% - (((200px + 24px + 24px) * 3) / 2));
    }
}
/*                                   room for 2 cards                              */
/* Once the window width is below the size of 3 cards + 10px padding on both sides */
/* Then adjust the width of the box and use the margin to center on the page       */
@media screen and (max-width: calc(((200px + 24px + 24px) * 3) + 20px)) {
    .footerCardRow {
        width: calc((200px + 24px + 24px) * 2);
        margin: 0 0 0 calc(50% - (((200px + 24px + 24px) * 2) / 2));
    }
}
/*                                   room for 1 cards                              */
/* Once the window width is below the size of 2 cards + 10px padding on both sides */
/* Then adjust the width of the box and use the margin to center on the page       */
@media screen and (max-width: calc(((200px + 24px + 24px) * 2) + 20px)) {
    .footerCardRow {
        width: calc((200px + 24px + 24px) * 1);
        margin: 0 0 0 calc(50% - (((200px + 24px + 24px) * 1) / 2));
    }
}

.footerCard {
    width: 200px;
    display: inline-block;
    position: relative;
    float: left;
    margin: 0 12px 5px 12px;
    padding: 0 12px 5px 12px;
    text-align: center;
    font-family: arial;
    font-size: 14px;
}

    .footerCard a {
        color: ghostwhite;
        text-decoration: none
    }

        .footerCard a:hover {
            text-decoration: underline
        }