@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:400,600');

body {
    margin: 0px;
    padding: 0px;
    background-repeat: repeat;
    background-position: center top;
    font-family: 'Libre Franklin', sans-serif;
    background-color: #D4DBDD;
}

.container {
    background-image: url('images/christmas-bg.jpg');
    background-position: center -21px;
    background-repeat: repeat-x;
}

.headercontainer {
    height: 403px;
    width: 100%;
    background-image: url('');
    background-position: center top;
    background-repeat: repeat-x;
}

.innerheader {
    width: 100%;
    height: 403px;
    background-image: url('images/christmas-header.jpg');
    background-repeat: no-repeat;
    background-position: center top;
}

#menu {
    width: 997px;
    margin-left: auto;
    margin-right: auto;
    text-transform: uppercase;
    margin-top: -90px;
    padding-left: 3px;
}

#menu a,
#menu a:visited {
    color: #fff;
    text-decoration: none;
    float: left;
    background: rgb(45,70,0);
    background: linear-gradient(0deg, rgba(45,70,0,1) 15%, rgba(193,230,45,0) 100%);
    background-repeat: repeat-x;
    margin-right: 2px;
    padding-left: 53px;
    padding-right: 53px;
    height: 44px;
    font-size: 19px;
    padding-top: 50px;
}

#menu a:hover {
    background: rgb(70,12,0);
    background: linear-gradient(0deg, rgba(70,12,0,1) 15%, rgba(230,82,45,0) 100%);
}

.clearfix {
    clear: both;
}

.content {
    width: 993px;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    margin-top: 21px;
    padding-top: 15px;
    background-image: url('images/contentbg.jpg');
    background-repeat: repeat-y;
}

.slideshow {
    height: 475px;
    width: 968px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}

.infobar {
    margin-left: auto;
    margin-right: auto;
    width: 968px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.infobar a,
.infobar a:visited {
    width: 312px;
    margin-right: 15px;
    height: 41px;
    background: rgb(208,11,39);
    background: linear-gradient(0deg, rgba(208,11,39,1) 0%, rgba(200,62,38,1) 100%);
    display: block;
    float: left;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    padding-top: 25px;
    font-weight: 600;
    background-position: 0 0px;
}

.infobar a:hover {
    background-position: 0 -66px;
}

.featured {
    width: 968px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 15px;

    /* display: table */
}

.col {
    width: 312px;
    height: 393px;
    background: rgb(10,144,0);
    background: linear-gradient(0deg, rgba(20,86,23,1) 0%, rgba(10,144,0,1) 100%);
    overflow: hidden;
    float: left;
    margin-right: 15px;
    color: #fff;
    position: relative;

    /* display: table-cell */
}

.last {
    margin-right: 0px!important;
}

.col img {
    padding-top: 15px;
    margin-left: 13px;
}

.col p {
    padding-left: 13px;
    padding-right: 13px;
    text-align: justify;
    padding-top: 0px;
    margin-top: 3px;
}

.col h1 {
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 3px;
    padding-bottom: 0px;
    text-transform: uppercase;
    font-size: 18px;
    text-align: left;
    margin-bottom: 5px;
}

.col a,
.col a:visited,
a.morelink,
a.morelink:visited {
    color: #C83E26;
    text-decoration: none;
    background: #fff;
    margin-right: 2px;
    height: 31px;
    font-size: 19px;
    display: block;
    width: 285px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    position: absolute;
    bottom: 15px;
    left: 14px;
}

.col a:hover,
a.morelink:hover {
    background-position: 0px -90px;
}

.col img {
    width: 285px;
    height: 190px;
    object-fit: cover;
}

.footer {
    width: 968px;
    position: relative;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
}

.footer1 {
    position: absolute;
    left: 0px;
    top: 25px;
}

.footer3 {
    position: absolute;
    right: 10px;
    top: 66px;
}

.zaa {
    width: 116px;
    height: 109px;
    display: inline-block;
    background-image: url('images/zaalogo.jpg');
    float: left;
}

.fb {
    width: 52px;
    height: 52px;
    display: inline-block;
    background-image: url('images/fbicon.png');
    margin-top: 30px;
    margin-left: 20px;
}

.anthemlogo {
    width: 118px;
    height: 44px;
    display: block;
    background-image: url('images/anthemlogo.png');
}

.footer2 {
    width: 100%;
    text-align: center;
    padding-top: 50px;
}

.carousel-cell {
    width: 968px;
    height: 475px;
    background-color: #fff;
    background-size: cover;
    background-position: center top;
    position: relative;
    display: block;
}

.flickity-page-dots {
    bottom: 10px!important;
}

.menuswitch {
    display: none;
}

.animalboxTrue,
.animalboxFalse {
    width: 234px;
    height: 167px;
    float: left;
    margin-right: 10px;
    position: relative;
}

.animalboxTrue {
    margin-right: 0px;
}

.animalboxTrue img,
.animalboxFalse img {
    width: 100%;
    height: auto;
}

.animalboxTrue h2,
.animalboxFalse h2 {
    margin-top: -20px;
    background-color: rgba(0,0,0,0.3);
    position: absolute;
    left: 0px;
    bottom: 5px;
    color: #fff;
    font-size: 17px;
    padding: 3px;
    width: 226px;
    padding-left: 5px;
}

.animalboxTrue a,
.animalboxFalse a,
.animalboxTrue a:visited,
.animalboxFalse a:visited {
    text-decoration: none;
}

.animalboxTrue a:hover,
.animalboxFalse a:hover {
    color: #f08e07;
}

.animalpic {
    float: left;
    margin-right: 10px;
    width: 330px;
    height: auto;
    margin-bottom: 10px;
}

.photoentryFalse,
.photoentryTrue,
.galleryentryFalse,
.galleryentryTrue {
    width: 458px;
    float: left;
    margin-right: 50px;
    margin-bottom: 40px;
    height: 438px;
}

.photoentryTrue,
.galleryentryTrue {
    margin-right: 0px;
}

.galleryentryFalse,
.galleryentryTrue {
    height: auto;
}

.gallerypicdiv {
    width: 458px;
    height: 300px;
    overflow: hidden;
    position: relative;
}

.gallerypicdiv img {
    width: 458px;
    height: auto;
    position: absolute;
    top: -100%;
    bottom: -100%;
    left: 0px;
    right: 0px;
    margin: auto;
}

.img-rsp {
    width: 100%;
    height: auto;
}

#thumbBox {
    z-index: 999;
}

.innerfeatured img {
    width: 100%;
    height: auto;
}

#thumbBox {
    /* Outermost DIV for thumbnail viewer */
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    padding: 10px;
    padding-bottom: 0;
    background: #222;
    visibility: hidden;
    z-index: 10;
    cursor: hand;
    cursor: pointer;
}

#thumbBox .footerbar {
    /* Footer DIV of thumbbox that contains "close" link */
    letter-spacing: 5px;
    line-height: 1.1em;
    color: white;
    padding: 5px 0;
    padding-bottom: 10px;
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
}

#thumbBox #thumbImage {
    /* DIV within thumbbox that holds the enlarged image */
    background-color: #222;
    color: #fff;
}

#thumbLoading {
    /* DIV for showing "loading" status while thumbbox is being generated */
    position: absolute;
    visibility: hidden;
    border: 1px solid black;
    background-color: #fff;
    padding: 5px;
    z-index: 5;
    color: #000;
}

#thumbImage img {
    margin-bottom: 10px;
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}

@media screen and (max-width:960px) {
    body {
        font-size: 20px;
    }

    .container {
        background-image: none;
    }

    .headercontainer {
        height: 220px;
        background-size: cover;
    }

    .innerheader {
        height: 220px;
        background-size: cover;
    }

    .menu_hide {
        display: none;
    }

    .menu_show {
        display: block;
    }

    .content {
        width: 95%;
    }

    .slideshow {
        height: 283px;
        width: 95%;
        background-size: cover;
    }

    .slideshow img {
        width: 100%;
        height: auto;
    }

    .infobar a {
        float: none;
        width: 95%;
        margin-left: auto;
        margin-right: auto !important;
        margin-bottom: 15px;
        font-size: 20px;
        height: 44px;
        padding-top: 22px;
    }

    .infobar {
        width: 100%;
        padding-bottom: 0px;
    }

    .last {
        margin-left: 0px;
    }

    .col {
        float: none;
        width: 95%;
        margin-left: auto;
        margin-right: auto!important;
        background-size: contain;
        height: auto;
        margin-bottom: 13px;
        padding-bottom: 15px;
    }

    .featured {
        width: 100%;
    }

    .col img {
        width: 95%;
        height: auto;
        margin-right: 0px;
        margin-left: 10px;
    }

    .col h1 {
        font-size: 25px;
    }

    .col a {
        width: 95%;
        position: relative;
        left: unset;
        bottom: unset;
    }

    .footer {
        width: 95%;
        height: 400px;
    }

    .footer1 {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        top: 0px;
        text-align: center;
    }

    .footer2 {
        width: 100%;
    }

    .footer3 {
        position: relative;
    }

    .zaa {
        margin-left: 55px;
    }

    .anthemlogo {
        margin-left: auto;
        margin-right: auto;
    }

    .carousel-cell {
        height: 283px;
        width: 578px;
    }

    .menuswitch {
        display: block;
        width: 80px;
        height: 80px;
        background-image: url(images/menu_button.png);
        position: absolute;
        right: 15px;
        top: 70px;
        background-size: contain;
        background-repeat: no-repeat;
    }

    #menu {
        width: 555px;
        margin-left: auto;
        margin-right: auto;
        text-transform: uppercase;
        margin-top: -90px;
        padding-left: 3px;
        position: absolute;
        z-index: 9999;
        top: 260px;
        right: 20px;
    }

    #menu a,
    #menu a:visited {
        color: #fff;
        text-decoration: none;
        float: none;
        background-image: url('images/menubg.png');
        background-repeat: repeat-x;
        margin-right: 2px;
        padding-left: 28px;
        padding-right: 28px;
        height: 50px;
        font-size: 25px;
        padding-top: 20px;
        display: block;
        background-color: rgba(0, 0, 0, 0.7);
    }

    .innerfeatured {
        padding-left: 10px;
        padding-right: 10px;
        text-align: justify;
    }

    .animalboxFalse,
    .animalboxTrue {
        width: 100%;
        float: none;
        height: auto;
        padding: 0px;
        margin: 0px;
        margin-bottom: 10px;
    }

    .animalboxFalse h2,
    .animalboxTrue h2 {
        width: 580px;
        font-size: 24px;
    }

    .animalpic {
        float: none;
        width: 100%;
        height: auto;
        margin-right: 0px;
    }

    .photoentryFalse,
    .photoentryTrue,
    .galleryentryFalse,
    .galleryentryTrue {
        width: 100%;
        float: none;
        margin-right: 0px;
        margin-bottom: 20px;
        height: auto;
    }

    .gallerypicdiv {
        width: auto;
        height: auto;
        overflow: visible;
        position: relative;
    }

    .gallerypicdiv img {
        width: 100%;
        height: auto;
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
    }

    .galleryentryFalse a,
    .galleryentryTrue a {
        pointer-events: none;
        cursor: default;
    }

    .gallery {
        height: auto;
    }

    .clickmessage {
        display: none;
    }
}