*
{
    margin: 0;
    padding: 0;
}

body
{
    overflow-x: hidden;
}

p
{
    position: relative;

    padding: 2em;
}

h2
{
    padding-top: 1em;
    padding-bottom: 0;
    padding-left: 1.5em;

    color: var(--color-five);

    size: 2em;
}

hr
{
    width: 72vw;
    margin: 0 auto;
}

:root
{
    --color-one: #fff;
    --color-two: #e5e1d1;
    --color-three: #52616d;
    --color-four: #2c343b;
    --color-five: #c44741;
}

.red
{
    opacity: 1.0;
    color: var(--color-five);
}

.c-two
{
    color: var(--color-two);
}

.footer-bar
{
    position: relative;
    top: -13em;

    display: block;

    width: 78vw;
    margin: 0 auto;

    text-align: center;

    color: var(--color-two);
}

.footer-text
{
    font-size: .8em;
}
.text-deco
{
    font-size: 4em !important;

    float: left;

    margin: .1em;
    margin-right: .3em;
}

#top-fold
{
    position: relative;

    display: block;

    width: 100vw;
    height: 30em;

    background: url('/layout/images/reef.jpg');
    background-color: var(--color-two);
    background-position: center center;
    background-size: cover;
    box-shadow: 0 4px 8px #888;
}

#top-menu
{
    position: fixed;
    z-index: 2500;
    z-index: 15000;
    top: 0;

    display: block;

    width: 100vw;
    height: 3em;

    opacity: .8;
    background-color: var(--color-three);
}

#top-menu ul
{
    display: block;

    width: 80vw;
    margin: 0 auto;
    padding: 0;

    list-style-type: none;
}

#top-menu ul li
{
    font-size: 1em;

    display: block;
    float: left;

    width: calc(80vw/5);
    height: 3em;

    text-align: center;
    white-space: pre;

    color: var(--color-two);
}

#top-menu ul li:hover
{
    color: var(--color-one);
    background-color: var(--color-five);
    box-shadow: 0 0 3px black;
}

#top-menu ul li a
{
    position: relative;

    display: block;

    margin: 0;
    padding: 0;

    padding: 1em;

    text-decoration: none;

    color: var(--color-two);
}

#top-menu ul li a:active
{
    background-color: var(--color-four);
}

#bottom-fold
{
    position: relative;
    z-index: 10000;

    display: block;

    width: 100vw;
    min-height: 100vh;

    background-color: var(--color-three);
}

#content-container
{
    position: relative;
    top: -12em;

    display: block;

    width: 80vw;
    min-height: 50vh;
    margin: 0 auto;

    border-top-left-radius: 2em;
    border-top-right-radius: 12em;
    border-bottom-right-radius: 12em;
    border-bottom-left-radius: 2em;
    background-color: var(--color-two);
    box-shadow: 0 0 12px black;
}

#bgcr
{
    position: relative;
    top: 28.5em;
    bottom: 0;

    display: block;
    float: right;

    width: 2em;
    height: 1em;
    padding-right: 1em;

    color: var(--color-one);
}

.lastp
{
    padding-right: 3.5rem;
    margin-bottom: 2rem;
}

/* default styles here for older browsers. 
       I tend to go for a 600em - 960em width max but using percentages
    */
@media only screen and (max-width:959px)
{
    /* styles for browsers larger than 960em; */
    body
    {
        font-size: 18px;
    }

    #top-menu
    {
        height: 3em;
    }

    #top-menu ul li
    {
        width: calc(80vw/5);
    }

    .link_text {
        display: none;
    }
}

@media only screen and (min-width:960px)
{
    /* styles for browsers larger than 960em; */
    body
    {
        font-size: 18px;
    }
}
@media only screen and (min-width:1440px)
{
    /* styles for browsers larger than 1440em; */
    body
    {
        font-size: 22px;
    }
}
@media only screen and (min-width:2000px)
{
    /* for sumo sized (mac) screens */
    body
    {
        font-size: 30px;
    }
}
@media only screen and (max-device-width:480px)
{
    /* styles for mobile browsers smaller than 480em; (iPhone) */
    body
    {
        font-size: 10px;
    }
}
@media only screen and (device-width:768px)
{
    /* default iPad screens */
    body
    {
        font-size: 14px;
    }

}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)
{
    /* For portrait layouts only */
    body
    {
        font-size: 6px;
    }
    

}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)
{
    /* For landscape layouts only */
    body
    {
        font-size: 20px;
    }

}


.box
{
    position: relative;

    -webkit-transform: skewY(-15deg); /* Safari */
        -ms-transform: skewY(-15deg); /* IE 9 */
            transform: skewY(-15deg);

    color: #fff;
    background-color: #e5a700;

    align-items: center;
}

.box:nth-child(even)
{
    -webkit-transform: skewY(15deg); /* Safari */
        -ms-transform: skewY(15deg); /* IE 9 */
            transform: skewY(15deg);

    color: #000;
    background-color: #ffba00;
}

.box:hover:nth-child(even)
{
    background-color: #e5a700;
}

.box:hover:nth-child(odd)
{
    background-color: #ffba00;
}

.box:nth-child(1)
{
    border-top-left-radius: 1em;
}

.box:nth-child(20)
{
    border-top-right-radius: 1em;
}

.box:nth-child(381)
{
    border-bottom-left-radius: 1em;
}

.box:nth-child(400)
{
    border-bottom-right-radius: 1em;
}

.box:nth-child(42)
{
    background-color: #000;
}

.box:nth-child(43)
{
    background-color: #000;
}

.box:nth-child(55)
{
    background-color: #000;
}
.box:nth-child(51)
{
    background-color: #000;
}

.box:nth-child(52)
{
    background-color: #000;
}

.box:nth-child(53)
{
    background-color: #000;
}

.box:nth-child(54)
{
    background-color: #000;
}

.box:nth-child(61)
{
    background-color: #000;
}

.box:nth-child(64)
{
    background-color: #000;
}

.box:nth-child(65)
{
    background-color: #000;
}

.box:nth-child(69)
{
    background-color: #000;
}

.box:nth-child(70)
{
    background-color: #000;
}

.box:nth-child(76)
{
    background-color: #000;
}

.box:nth-child(77)
{
    background-color: #000;
}

.box:nth-child(81)
{
    background-color: #000;
}

.box:nth-child(86)
{
    background-color: #000;
}

.box:nth-child(88)
{
    background-color: #000;
}

.box:nth-child(98)
{
    background-color: #000;
}

.box:nth-child(101)
{
    background-color: #000;
}

.box:nth-child(107)
{
    background-color: #000;
}

.box:nth-child(119)
{
    background-color: #000;
}

.box:nth-child(121)
{
    background-color: #000;
}

.box:nth-child(139)
{
    background-color: #000;
}

.box:nth-child(142)
{
    background-color: #000;
}

.box:nth-child(160)
{
    background-color: #000;
}

.box:nth-child(162)
{
    background-color: #000;
}

.box:nth-child(180)
{
    background-color: #000;
}

.box:nth-child(183)
{
    background-color: #000;
}

.box:nth-child(200)
{
    background-color: #000;
}

.box:nth-child(203)
{
    background-color: #000;
}

.box:nth-child(220)
{
    background-color: #000;
}

.box:nth-child(222)
{
    background-color: #000;
}

.box:nth-child(240)
{
    background-color: #000;
}

.box:nth-child(242)
{
    background-color: #000;
}

.box:nth-child(260)
{
    background-color: #000;
}

.box:nth-child(261)
{
    background-color: #000;
}

.box:nth-child(279)
{
    background-color: #000;
}

.box:nth-child(281)
{
    background-color: #000;
}

.box:nth-child(299)
{
    background-color: #000;
}

.box:nth-child(301)
{
    background-color: #000;
}

.box:nth-child(287)
{
    background-color: #000;
}

.box:nth-child(318)
{
    background-color: #000;
}

.box:nth-child(321)
{
    background-color: #000;
}

.box:nth-child(324)
{
    background-color: #000;
}

.box:nth-child(325)
{
    background-color: #000;
}

.box:nth-child(329)
{
    background-color: #000;
}

.box:nth-child(330)
{
    background-color: #000;
}

.box:nth-child(306)
{
    background-color: #000;
}

.box:nth-child(308)
{
    background-color: #000;
}

.box:nth-child(336)
{
    background-color: #000;
}

.box:nth-child(337)
{
    background-color: #000;
}

.box:nth-child(342)
{
    background-color: #000;
}

.box:nth-child(343)
{
    background-color: #000;
}

.box:nth-child(351)
{
    background-color: #000;
}

.box:nth-child(352)
{
    background-color: #000;
}

.box:nth-child(353)
{
    background-color: #000;
}

.box:nth-child(354)
{
    background-color: #000;
}

.box:nth-child(355)
{
    background-color: #000;
}

.box:nth-child(154)
{
    background-color: #000;
}

.box:nth-child(155)
{
    background-color: #fff;
}

.box:nth-child(174)
{
    background-color: #000;
}

.box:nth-child(175)
{
    background-color: #000;
}

.box:nth-child(170)
{
    background-color: #000;
}

.box:nth-child(149)
{
    background-color: #000;
}

.box:nth-child(148)
{
    background-color: #000;
}

.box:nth-child(167)
{
    background-color: #000;
}

.box:nth-child(187)
{
    background-color: #000;
}

.box:nth-child(207)
{
    background-color: #000;
}

.box:nth-child(227)
{
    background-color: #000;
}

.box:nth-child(248)
{
    background-color: #000;
}

.box:nth-child(249)
{
    background-color: #000;
}

.box:nth-child(230)
{
    background-color: #000;
}



@-webkit-keyframes fish-swim-one
{
    0%
    {
        z-index: 2000;
        top: 5em;
        left: -40em;

        transform: rotate(-5deg);
    }
    16.49%
    {
        z-index: 2000;
        top: 2em;

        transform: rotate(0deg);
    }
    32.99%
    {
        z-index: 2000;
        top: 12em;
        left: calc(100vw + 30em);

        transform: rotate(5deg);
    }
    33%
    {
        right: -50em;
    }
    33.01%
    {
        transform: scaleX(-1);
    }
    48%
    {
        top: 8em;
        left: 50vw;

        transform: scaleX(-1);
    }
    66%
    {
        z-index: 2000;
        top: 5em;
        left: -30em;

        transform: scaleX(-1);
    }
    66.01%
    {
        transform: scaleX(1);
        transform: rotate(-45deg);
    }
    84%
    {
        z-index: 2000;
        top: 25em;
        left: -30em;
    }
    100%
    {
        z-index: 2000;
        top: -15em;
        left: calc(100vw + 20em);
    }
}

@-webkit-keyframes fish-swim-two
{
    0%
    {
        z-index: 2000;
        top: 2em;
        left: calc(80vw + 30em);

        transform: scaleX(-1);
        transform: rotate(-5deg);
    }
    .01%
    {
        z-index: 2000;
        top: 4em;

        transform: scaleX(-1);
    }
    50%
    {
        z-index: 2000;
        top: 2em;

        transform: rotate(-5deg);
        transform: scaleX(-1);
    }
    100%
    {
        z-index: 2000;
        top: 5em;
        left: -40em;

        transform: scaleX(-1);
    }
}

#wrapper
{
    position: absolute;
    z-index: 1500;
    left: -15em;

    display: grid;

    width: 10em;
    height: 10em;

    animation: fish-swim-one 30s infinite linear;
    animation-delay: 2s;

    grid-gap: 0;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(20, 1fr);
}

@support (display: grid;) {
    #nogrid {
        display: none;
    }
}


.error_page_title {
    display: block;
    position: relative;
    margin: 1em;
}

.error_page {
    display: block;
    position: relative;
}