@charset "utf-8";
/*
WCAG GREEN LARGE TEXT >>> #619600 *lrg only | ZOO GREEN SMALL TEXT >>> #558300| ZOO GREEN ACCENT BORDER >>>#92C745
*/
html,body{ FONT-FAMILY: 'Libre Franklin', Arial, Helvetica, SansSerif; padding:0px; margin:0px; background-color:#ffffff; text-align:center; font-size: 14px;  scroll-behavior: smooth; height: 100%;}
#home { display: flex; flex-direction: column; position:relative; background-color: #fff; min-height:100%;}
#allcontent {flex: 1;}/* forces the footer to the bottom */
h1 {font-size:48px; color: #558300; font-family: 'Amatic SC', cursive; font-weight: bold; line-height: normal; margin-bottom:.4em;}
h2 {font-size:40px; padding:0; margin:0;font-family: 'Amatic SC', cursive; font-weight: bold; line-height: normal}
h3 {font-size:20px; padding:0; margin:0; font-weight: bold; line-height: normal;}
hr{border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0,0), rgba(226,226,226,1.00), rgba(226,226,226,1.00), rgba(226,226,226,1.00), rgba(0, 0, 0, 0));}
a, a:visited{ color: #558300; text-decoration:none; transition:color .2s ease-out, background .2s ease-in; font-weight: bold; outline: none;
  border: none;}
#tophold{background-color:#fff; position:relative; z-index:10;}
#whitebar{background-color: rgba(255,255,255,0.9); text-align:left; width:75%; margin:0 auto;}
@media only screen and (max-width:1340px){
    #whitebar{ width:78%;}
}
#logo {z-index:30; position:absolute; top:16px; left:12%; width:145px; }
#logoholder{display:inline-block; position:relative; width:200px; height:85px; vertical-align:middle; z-index:30;}
#searchholder{display:inline-block; text-align:left; margin-right:15px;}
#search {display:inline-block; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;-webkit-box-shadow: inset 2px 2px 8px 0px rgba(0,0,0,0.3);-moz-box-shadow: inset 2px 2px 8px 0px rgba(0,0,0,0.3);box-shadow: inset 2px 2px 8px 0px rgba(0,0,0,0.3); white-space: nowrap; vertical-align: middle;}
#searchsubmit{background-color: transparent; height:24px; border:0px; cursor:pointer; background-image:url(/!/img/search-magnifying-glass.gif); background-position:center; background-repeat:no-repeat;}
#hours { padding:0px 0 0 62px; position:relative; z-index:0; top: 0; right:0; display:inline-block; vertical-align:top; background:url(/!/img/clock.gif) no-repeat; background-size:30px; background-position:18px 14px; vertical-align: middle;}
#whitebarbut{display:inline-block; float:right; padding-right:5%;}
#whitebarbut a{display:inline-block; text-decoration:none; padding: 6px 5px;}
a:hover, #whitebarbut a:hover { text-decoration:underline;}
a img:hover{ opacity: 0.7; transition: 0.3s;}
#header {clear:both; text-align:center; padding:2px 0; min-height:54px; position:relative; font-family:'Libre Franklin', Arial, sans-serif; }

footer { width:100%; bottom:0; font-family: 'Libre Franklin', Arial, sans-serif;}
#foottop{height:9px; background: url(/!/img/layout/footer-transition2.png); display:block;}
#foothold{text-align:center; margin:0 auto; background: #2e1c12 url(/!/img/layout/footer3.jpg?a);}
#butfoot{ text-align:center; margin-top:30px; margin-bottom:30px;}
#butfoot a:link, #butfoot a:visited, #butfoot a:hover { color: white; margin: 0 9px 18px 9px; display: inline-block; font-size: 14px;}
#logosfoot { width:65%; display:inline-block; vertical-align:top; text-align:right; float:right;} #logosfoot a{ margin:0.5%; display:inline-block;}
#social { width:34%; display: inline-block; vertical-align:top; text-align:left;  float:left; } #social a{ display:inline-block;}
#social a:hover, #social a:visited, #social a:link {margin: 0.5%;} 
.clear{ clear:both;}

#alertdrop{ width:100%; height:100%; background-color: rgba(255,255,255,.73);  text-align:center; z-index:100; display:none; margin:0 auto;}

/*SOCIAL BAR*/
.share-icon {display: inline-block;  width: 48px;  height: 48px;  cursor: pointer; vertical-align: middle; background-image: url(/!/img/layout/social3.png?e);}
.share-1 {background-position: 0px 0px; }
.share-1:hover {background-position: 0px -48px;}
.share-2 {background-position: -48px 0px; }
.share-2:hover {background-position: -48px -48px;}
.share-3 {background-position: -96px 0px;}
.share-3:hover {  background-position: -96px -48px;}
.share-4 {background-position: -144px 0px;}
.share-4:hover {background-position: -144px -48px;}
.share-5 {background-position: -192px 0px;}
.share-5:hover {background-position: -192px -48px;}
.share-6 {background-position: -240px 0px;}
.share-6:hover {background-position: -240px -48px;}
.share-7 {background-position: -288px 0px;}
.share-7:hover {background-position: -288px -48px;}
/*SOCIAL BAR END*/

/*GENERAL PAGE STYLES*/
.main-content {width:100%; display: inline-block; position:relative;}/*Caps all website content at 1920px*/
.wid { width:100%;}
.pg-wrap{ padding:3px 0 0 0}
.pg{ padding:8px 4%; text-align:left;}
.conpad{padding:0 32px 42px 32px;}
.conleft{vertical-align:top; min-width:1200px; max-width:1200px;  border:solid 1px #f1f1f1; margin:0 auto; display:inline-block; text-align:left; background-color: rgba(255,255,255,0.90); }
.conright{vertical-align:top; max-width:25%; width:100%;  margin:0 auto; display:inline-block; text-align:left;}

/*APPROPRIATED STYLES*/
.leftCol { float:left; width:100%; max-width:705px; text-align: justify;}
.rightCol {	float:right; width:304px;}
.just{text-align: justify; width:875px; float:left;}
.justimg{text-align: justify; }
.but {background-color:#51970b; font-size:1.2em;  display: inline-block; line-height: normal;  text-align:center; vertical-align: middle; border: 2px solid #77b800; padding:14px;  -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; color:#FFFFFF; font-weight:bold;}
a.but{color:#FFFFFF;}
a.but:hover{color:#FFFFFF; background-color:#477504;}
a.evt{border: 1px solid #E2E2E2; width:100%; max-width:338px; display:inline-block; line-height: normal; margin-bottom: 20px;}
.evt-inner{padding:10px 10px 10px 0; float:left; max-width:222px; text-align:left;}
.evt img{ width:80px;  float:left; margin:12px; -moz-border-radius: 8px; border-radius: 8px; -webkit-border-radius: 8px;  }
a.evt:hover{ color:#4E3227; text-decoration:underline;}
.small{ FONT-SIZE: 0.75em; line-height: normal;}
img {border:0;}
img.right { float: right; padding-left:12px; margin-left: 12px; margin-right: 0px; padding-right:0px; }
img.blk { border:2px; border-style:solid; border-color:#000; width:100%; max-width:300px; }
img.i300 { width:100%; max-width:300px; }
img.zico{ border:0px; width:80px; }
#sep{ width:100%; height:1px; margin-top:12px; margin-bottom:12px; color:#E2E2E2}
#spc{ padding-left:12px; margin-left:12px; padding-right:12px; margin-right:12px; vertical-align:middle;}
table.border { border-collapse:collapse; width:100%;}
.border td{	border: 1px solid #E2E2E2; padding:6px; margin:0px; vertical-align:top; border-spacing:0; text-align:left;}
table.border2 { border-collapse:collapse; width:100%;}
.border2 td{	border: 1px solid #000; padding:6px; margin:0px; vertical-align:top; border-spacing:0}
table.noborder { border-collapse:collapse; width:100%;}
.noborder td{	border: 0px none; padding:2px; margin:0px; vertical-align:top; border-spacing:0}
table.lines { border-collapse:collapse; width:100%;}
.lines td { border-bottom:1px solid #e4e4e4; padding:6px; margin:0px; vertical-align:top; text-align:left;}
.btmline { border-bottom:1px solid #e4e4e4; padding:6px;}
.button a { background-color:#ffffff; font-size:1.4em;  display: inline-block; line-height: normal;  text-align:center; vertical-align: middle; border: 2px solid #77b800; padding:16px;  -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; font-weight:normal; color:#6aa400; font-weight:bold;}
.red {color:#FF0000}
.video-container {position: relative;padding-bottom: 56.25%; height: 0; overflow: hidden;} 
.video-container iframe, .video-container object, .video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

/*NEW CONTENT STYLES*/
.font{font-family: 'Amatic SC', cursive; font-weight:bold;}
.iblock {display:inline-block; width:100%; vertical-align:top;}
.space {height:10px;}
.spacer {height:35px;}

#banhold {overflow-x:hidden; display:flex; justify-content:center; align-self: center}
#banr{opacity:0; width:100%; align-self: center}
#bnrtitle{position:absolute; color:#fff; font-family: 'Amatic SC', cursive; font-size:5vw; font-weight:bold; bottom:8%; right:8%; border-bottom: 3px solid white;  z-index:4; text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);}
@font-face {font-family: calibreblack; src: url(/!/fonts/CALIBRE-BLACK.OTF);}
#bnrtxt{position:absolute; color:#fff; font-family: 'calibreblack', cursive;  font-size:6vw; bottom:8%; right:15%; z-index:10; text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);text-align:right; width:66%;}

.c0 {width:100%; text-align: justify; display: inline-block; font-size: 18px; line-height: 32px;}
.c1080 {width:100%; max-width: 1080px; text-align: justify; display: inline-block; font-size: 18px; line-height: 32px;}
.c1280 {width:100%; max-width: 1280px; text-align: justify; display: inline-block; font-size: 18px; line-height: 32px;}
.c1325 {width:100%; max-width: 1325px; text-align: justify; display: inline-block; font-size: 18px; line-height: 32px;}
.c1435 {width:100%; max-width: 1435px; text-align: justify; display: inline-block; font-size: 18px; line-height: 32px;}
.c1920 {width:100%; max-width: 1920px; display: inline-block;}

.h42{font-family: 'Amatic SC', cursive; color: white; font-size: 42px;}
.h35{font-family: 'Amatic SC', cursive; color: white; font-size: 35px; font-weight: bold;}
.h25{font-family: 'Amatic SC', cursive; color: white; font-size: 25px; font-weight: bold;}

.t24{font-size: 24px;}
.tmed{font-family: 'Amatic SC', cursive; font-size:46px; line-height: normal; text-align: left; font-weight: bold; color:#0c5c94;}
.tlg{font-family: 'Amatic SC', cursive; font-size:72px; line-height: normal; text-align: left; font-weight: bold;}

.iflexaround {display: inline-flex; justify-content: space-around; flex-wrap: wrap;}
.iflexbetween {display: inline-flex; justify-content: space-between; flex-wrap: wrap;}/*Plan*/
.iflexcen {display: inline-flex; align-items:center; justify-content: space-around; flex-wrap: wrap;}
.line{line-height: normal}

.cblue { background-color: #117fa7; color: white;  font-size: 18px;}/*Membership*/
.cblue::before {background-image: url('/!/img/cblue-top.png'); background-size: 100% 30px; display: inline-block; width: 100%; height: 30px; content:"";}
.cblue::after {background-image: url('/!/img/cblue-bot.png?d'); background-size: 100% 39px; display: inline-block; width: 100%; height: 39px; content:".";}
.cblue a{color: #4f0f80;}

.col2 {display: inline-block; width: 100%; max-width: 500px; vertical-align: top; text-align: left;}

.col3 {width:100%; max-width:423px; vertical-align:top; display:inline-block; margin-bottom: 50px; text-align:left;}/*Giftshops*/
.col3 img {width:100%; max-width:423px;}

.col3a {width:100%; max-width:390px; vertical-align:top; display:inline-block; margin-bottom: 50px;}/*schools*/
.col3a img {width:100%; max-width:390px;}

.col4 {width:100%; max-width:337px; vertical-align:top; display:inline-block; text-align: center; border: 3px solid #9ed14d; border-radius: 3px; min-height: 524px; position: relative; margin-bottom: 50px;}/*places to stay*/
.col4 img {width:100%; max-width:337px;}

.lc {display:inline-block; width:100%; vertical-align:top; max-width:348px; margin-bottom:50px;}/*gift tickets, group tickets*/
.rc {width:100%; text-align: justify; display: inline-block; max-width:620px; margin-bottom:50px;}

a.book {width: 216px; height:60px; background-color:#9ed14d; color:white; font-size: 24px; display:inline-flex; align-items:center; justify-content: center; flex-wrap: wrap; position: absolute; bottom:15px; left:18%;}/*book now but*/

/*Used in main pages - also tic and adoptapond sections*/
.pgbut  {font-family: 'Amatic SC', cursive; display:inline-block; font-weight: bold; width:100%; vertical-align:top; max-width: 260px; text-align: center; margin-bottom: 50px; font-size: 36px;}
.pgbut img{ max-width:200px; margin-bottom:15px;}

/*ANIMAL PAGE STYLES */
.img0-wrap{position: relative; max-width:614px; width:100%; display:inline-block; vertical-align:top; margin-top: 30px;}
.img0-shade{position: absolute; z-index: 0; width:100%; background-color:#92c745; -ms-transform: rotate(7deg);    -webkit-transform: rotate(7deg);    transform: rotate(7deg);}
.img0{position: relative; z-index: 2; width:100%;}
.img0-bghold{filter: brightness(0.2) sepia(1) saturate(10000%) hue-rotate(71deg); opacity: 0.01; filter: alpha(opacity=01);}
.img1-wrap{position: relative; max-width:35%; width:100%; height:250px; display:inline-block; vertical-align:top; margin:0 4% 4% 0}
.img1-shade{position: absolute; z-index: 1; width:100%; height:250px; background-color:#92c745; -ms-transform: rotate(-7deg);    -webkit-transform: rotate(-7deg);    transform: rotate(-7deg);}
.img1{position: absolute; z-index: 2; width:100%; height:250px; overflow:hidden;}
.fact-wrap{width:100%; max-width:216px; height:372px; background-color:white; display:inline-block; vertical-align:top; margin-top:36px; position:relative; z-index:3}
.fact{width:100%; max-width:216px; height:372px; background-color:white; display:inline-block; vertical-align:top; margin-top:36px; position:absolute}
.con-wrap{width:100%; max-width:55%; background-color:white; display:inline-block; vertical-align:top;}
.thm {display:inline-block; max-width:150px; width:100%; text-align:center; position:relative; text-align:center; margin-bottom: 10px;}
a.thm {font-weight: normal;}
.thm:hover .thm-shade{ background-color: #4E3227; -ms-transform: rotate(4deg);    -webkit-transform: rotate(4deg);    transform: rotate(4deg); transition: all .2s ease;}
.thm-wrap {position: relative; max-width:614px; width:100%; height:90px; display:inline-block; vertical-align:top; margin:15px;}
.thm-shade{position: absolute; z-index: 0; width:90%; height:92px; background-color:#92c745; -ms-transform: rotate(7deg);    -webkit-transform: rotate(7deg);    transform: rotate(7deg); transition: all .2s ease;}
.thm-img{position: absolute; z-index: 2; width:90%; height:92px;}


/*LARGE CSS START*/
@media only screen and (min-width: 941px) and (max-width: 1300px){
    #butmob {min-width:100%;  }
    h1{ font-size:44px}
    h2 { font-size:36px}
    #hours { padding:0px 0 0 45px; background-size:25px; background-position:12px 14px; font-size:12px;}
    #whitebarbut{display:inline-block; padding-right:0;}
    #whitebarbut a{display:inline-block;  text-decoration:none;}
    #whitebarbut a:hover{ text-decoration:underline;}
    #whitebar{ width:88%; font-size:12px;}
    #xfoot { width:95%}

    /*GENERAL PAGE STYLES*/
    .pg-wrap{padding:4px 0}
    .conpad{padding:0 32px 42px 32px;}
    .conright{ max-width:23%}
    .conleft{ min-width:99%; max-width:99%;}
    .leftCol { float:left; width:100%; max-width:65%; text-align: justify;}
    .rightCol {	float:right; width:32%;}

    /*NEW CONTENT STYLES*/
    .c1080, .c1280, .c1325, .c1435 {padding: 0 15px; box-sizing: border-box;}
    .col3 {width:100%; max-width:32%; vertical-align:top; display:inline-block;}
    .col3 img {width:100%; max-width:100%;}
}
/*LARGE END*/

@media only screen and (max-width:1100px){
    #whitebarbut{ padding-right:0;}
    #whitebar{ width:90%;}
}

@media only screen and (max-width:1000px){
    .conpad{padding:0 22px 32px 22px;}
    #whitebarbut{ padding-right:0;}
    #logo-search-holder{ width:95%;}
    #whitebar{ width:93%;}
}

/*MEDIUM CSS*/
@media only screen and (max-width: 940px){
    .main-content{ padding-bottom:0;}
    footer { position:relative; width:100%; bottom:0;}
    #xfoot { width:100%;}
    #logo { width:115px; z-index:20; top:15px}
    #logoholder{display:inline-block; position:relative; width:174px; height:80px;  z-index:3;}
    #whitebar{text-align:center; margin:0 auto; width:84%; font-size:12px;}
    #searchholder{display: block; text-align: center;  margin-right:0;}
    #hours{ padding:2px 0 0 15px; background-size:16px; background-position:8px 14px; min-width:130px; }
    #header { min-height:4px; padding:0;}
    #butmob{ min-width:40px; text-align:left; width:100%; display:none;/**/}
    #whitebarbut{display:block; text-align:center; float:none; padding-right:0;}
    #whitebarbut a{padding: 10px;}
    #logosfoot {width:100%; display:block; vertical-align:top; text-align:center; float:none;} 
    #logosfoot a{ margin:1%; display:inline-block;}
    #social {width:100%; display:block; vertical-align:top; text-align:center; float:none;} 
    #social a{ display:inline-block;}
    #nav-toggle {display: inline-block; position:absolute; top:17px; left:7px; width:40px; opacity:1; cursor: pointer; z-index:30}
    #hours p{ font-size:12px;}
    img.scale{ max-width:260px;}
    h1 { font-size:38px}
    h2 { font-size:30px}
    h3 { font-size:18px}

    #contactpad{text-align:center; padding-top:16%; padding-bottom:1%; padding-left:0;}
    #sliderbars {display:none;}

    .but { font-size:1em;   padding:12px;  }

    /*GENERAL PAGE STYLES*/
    .pg-wrap{}
    .conpad{padding:0 12px 12px 12px;}
    .conleft{ min-width:99%; max-width:99%;}
    .conright{ max-width:99%;}
    .leftCol { float:none; width:100%; max-width:99%; text-align: justify;}
    .rightCol {	float:none; width:100%; max-width:99%; text-align: center}
    .btn a {  width:100%; max-width:42%;  border-radius: 8px;  text-decoration: none; margin:4px 1%; height:45px;}
    .thm { max-width:105px; height:115px;}
    .thm-wrap{position: relative; max-width:614px; width:100%; height:60px; display:inline-block; vertical-align:top; margin:10px;}
    .thm-shade{position: absolute; z-index: 0; width:88%; height:60px; background-color:#92c745; -ms-transform: rotate(7deg);    -webkit-transform: rotate(7deg);    transform: rotate(7deg);}
    .thm-img{position: absolute; z-index: 2; width:88%; height:60px;}
    .pgbut  { max-width: 180px; text-align: center; margin-bottom: 20px; font-size: 36px;}
    .pgbut img{ max-width:140px; margin-bottom:5px;}

    /*NEW CONTENT STYLES*/
    #banr{min-width:900px; position:relative;}
    @media only screen and (max-width:685px){#banr{right:60px;}}
    .c1080, .c1280, .c1325, .c1435, .c0 {padding: 0 12px; box-sizing: border-box; font-size: 16px; line-height:28px;}
    #bnrtitle{ font-size:38px;  border-bottom: 2px solid white;  }
    #bnrtxt{ font-size:8vw;bottom:8%; right:8%; width:66%;}
    /*ANIMAL PAGE STYLES */
    .img0-wrap{ max-width:800px; margin-right:0; margin-top: 0;}
    .img0-shade{ -ms-transform: rotate(0deg);    -webkit-transform: rotate(0deg);    transform: rotate(0deg);}
	.img0{margin-bottom: 15px;}
    .fact-wrap{ max-width:100%; margin-top:12px;}
    .con-wrap{ max-width:100%;}
	.img1-wrap{ max-width:320px;}
}
/*MEDIUM END*/

/*SMALL CSS*/
@media only screen and (max-width: 515px){
    .btn a {  width:100%; max-width:400px;  -webkit-border-radius: 8; -moz-border-radius: 8; border-radius: 8px;  text-decoration: none; margin:3px 0;}
    #logo { width:105px; z-index:20; top:15px;}
    #hours { display:block; background-position:33% 16px;background-size:14px; }
    #logoholder{display:inline-block; position:relative; width:154px; height:60px; vertical-align:middle;}
    .dropdownholder ul { padding:20px;}
    #shop {  background-position:left 15px center;}
    .pgbut  { max-width: 130px; text-align: center; font-size: 26px; line-height:24px; margin-bottom: 8px;}
    .pgbut img{ max-width:110px;}

    /*NEW CONTENT STYLES*/
    #banr{ min-width:800px; right:60px;}
    #bnrtitle{font-size:38px;right:10%;}
    .c1080, .c1280, .c1325, .c1435, .c0, .leftCol {text-align:left;}
}
/*SMALL END*/

@media only screen and (max-width:385px){
    #banr{ min-width:700px; right:60px;}
    #logoholder{display:inline-block; position:relative; width:154px; height:75px; vertical-align:middle;}
    #shop {  background-position:left -5px center;} 
    #hours { display:block; background-position:23% 16px;background-size:14px; }
}
.cen{ text-align:center; margin:0 auto;}