/* Opening Page */
h1 { text-transform:uppercase; }
div#starting-area { min-width:100%; min-height:100%; height:100vh; width:auto; position:relative; z-index:2; display:table; }
div#openingband { display:table-cell; vertical-align:middle; }
a#explorebutton { width:80%; max-width:648px; height:105px; margin:30px auto; line-height:105px; vertical-align:middle; display:block; text-decoration:none; border-width:3px; border-color:rgba(182,250,133,1); border-style:solid; background-color:rgba(73,118,41,.8); color:#fff; font-size:280%; text-transform:uppercase; font-weight:300; cursor:pointer; text-align:center; transition:all .5s; }
a#explorebutton:hover { background-color:rgba(105,140,69,.9); color:#ecfb85; }
div#starting-area div#message { color:#fff; padding:35px 30px; width:90%; max-width: 1028px; border-width:3px; border-color:rgba(182,250,133,1); border-style:solid; background-color:rgba(73,118,41,.8); display:block; margin:5% auto 0 auto; box-sizing:border-box; }
div#starting-area div#message p { margin:0 0 10px 0; padding:0 0 10px 0; font-size:135%; display:block; line-height:125%; }
div#starting-area div#message p:last-of-type { margin-bottom:0; padding-bottom:0; }
div#starting-area div#message p a { color:#b6fa85; }
div#starting-area div#message p a:hover { color:#ecfb85; }
div#starting-area div#zoomission { position:absolute; left:0; bottom:35px; width:100%; padding:0 20px; box-sizing:border-box; }
div#starting-area div#zoomission img { display:block; width:100%; max-width:1440px; height:auto; margin:0 auto; }

/* Homepage Styles */
section#welcomebox { padding:70px 0; text-align:center; background-color:rgba(105,140,69,.9); overflow:hidden; box-sizing:border-box; display:block; position:relative; margin:600px auto 75px auto; }

/* Zoo Admission */
section#admission { display:block; margin:75px auto; background-color:rgba(234,148,44,.9); color:#fff; position:relative; padding:0; text-align:center; box-sizing:border-box; overflow:hidden; }
section#admission a { color:#fff; }
section#admission a:hover { text-decoration: underline; }
a#accessibility-info { margin: 20px 0; display:inline-block; background-image:url('images/accessibility-icons.png'); background-repeat:no-repeat; background-position:100% 0; padding-right:110px; height:40px; line-height: 1.35em; color: #fff; font-weight:bold; }
div#giraffe-admission { width:30%; height:100%; display:block; overflow:visible; position:absolute; left:0; }
div#giraffe-admission img { width:auto; height:98%; position:absolute; right:0; bottom:0;  }
div#admissionwrap { max-width:1720px; text-align:left; margin:0 auto; padding:0 20px; display:block; position:relative; box-sizing:border-box; }
div#admissionwrap > div { vertical-align:middle; }
div#admissionleftwrap { display:inline-block; width:30%; box-sizing:border-box; }
div#admissionleft { display:block; position:relative; text-align:left; }
div#admissionleft h1 span { margin-left:33px; }
div#admissionleft a#buy-tickets-button { display:block; margin:30px 0 20px 75px; position:relative; }
div#admissionleft a#buy-tickets-button a { width:210px; height:42px; }
div#admissionleft a#buy-tickets-button img { width:200px; height:40px; padding:1px 5px; }
div#admissionleft a#buy-tickets-button img:hover { padding:0; width:210px; height:42px; }

div#admissionmidwrap { width:34%; margin: 0; display:inline-block; padding:2% 3%; box-sizing:border-box; }
div#admissionmid { text-align:left; margin:0; display:block; position:relative; }
div#admissionmid div#single, div#admissionmid div#bestvalues { width:100%; min-width:265px; display:block; margin:0 auto; padding:28px; box-sizing:border-box; text-align:left; }
div#admissionmid div#single h3, div#admissionmid div#bestvalues h3, div#admissionright h3 { white-space:normal; font-size:200%; margin-bottom:10px; display:inline-block; text-transform:uppercase; }
div#admissionmid div#single p, div#admissionmid div#bestvalues p { white-space:normal; font-size:115%; margin-top:5px; line-height:24px; }
div#admissionmid > div.clear { height:60px; }
div#admissionmid div#single { background-color:#3da3ff; } 
div#admissionmid div#bestvalues { background-color:#5ea514; } 
div#admissionmid ul.rates { margin-top:10px; margin-bottom:20px; width:100%; list-style:none; position:relative; }
div#admissionmid ul.rates li { clear:both; line-height:40px; }
div#admissionmid ul.rates li .ticket { text-align:left; }
div#admissionmid ul.rates li .price { float:right; }
div#admissionrightwrap { width:34%; margin: 0; display:inline-block; padding:2% 3%; box-sizing:border-box; margin-top: 42px;}
div#admissionright { display:block; width:100%; padding:30px; height:100%; background-color:#9e005d; white-space:normal; text-align:left; box-sizing:border-box; }
div#admissionright p.intro { padding-bottom:20px; line-height:115%; margin-right:-5px; }
div#admissionright ul.rates { margin-top:5px; margin-bottom:30px; width:100%; list-style:none; position:relative; }
div#admissionright ul.rates li { clear:both; }
div#admissionright ul.rates li .ticket { text-align:left; }
div#admissionright ul.rates li .price { float:right; }

/* Interrupter Sections */
section.interrupter { padding:75px 0; display:block; margin:75px auto; }
section.interrupter h1 { display:inline-block; color:#fff; text-transform:uppercase; margin:0 auto; }
div.interrupter-button { margin:0 auto; display:block; float:right; position:relative; margin-right:31px;  }
div.interrupter-button a { height:62px; box-sizing:border-box; background-color:#3da3ff; display:inline-block; color:#fff; padding:15px 30px; text-transform:uppercase; font-weight:bold; font-size:200%; transition:ease all .5s; position:relative; }
div.interrupter-button a:hover { background-color:#0076a3; }
div.interrupter-button a.aqua { background-color:#00a99d; }
div.interrupter-button a.aqua:hover { background-color:#1a776f; }
div.interrupter-button a.orange { background-color:#ea9400; }
div.interrupter-button a.orange:hover { background-color:#f26700; }

/* Special Events & Highlights */
section.highlights { display:block; margin:75px auto; color:#fff; position:relative; overflow:hidden; }
section#special-events { background-color:rgba(26,119,111,.9); }
section#corevalues { background-color:rgba(0,118,163,.9); }
div.highlightswrap { max-width:1720px; margin:0 auto; padding:40px 20px; display:block; position:relative; box-sizing:border-box; }
.highlights-header { text-align:left; margin:0 auto 10px auto; width:100%; position:relative; z-index:2; }
.highlights-header h1 { display:inline-block; float:left; }
.more-link { display:inline-block; font-size:175%; line-height:50px; vertical-align:middle; box-sizing:border-box; color:#fff; text-transform:uppercase; text-decoration:none; transition:color .5s ease; position:relative; float:right; }
.more-link:hover { color:#f26700; }
.more-link i.fa-chevron-right { border: 2px; border-style:solid; border-color:#fff; border-radius: 50%; padding: 3px 5px 3px 9px; transition:border .5s ease; }
.more-link:hover i.fa-chevron-right { border-color:#f26700; }
.highlight-box { width:33%; display:inline-block; padding:20px 30px; box-sizing:border-box; vertical-align:top; }
.highlight-image { display:block; position:relative; overflow:hidden; height:13.6vw; }
.highlight-image a { display:block; }
.highlight-image img { position:absolute; left:50%; top:50%; height:100%; width:auto; transform:translate(-50%, -50%); }
.highlight-title { display:table; width:100%; background-color:#ea942c; height:82px; transition:background .5s ease; }
.highlight-title p { display:table-cell; position:relative; font-size:150%; padding:0 3%; vertical-align:middle; }
#corevalues .highlight-title { height:auto; }
#corevalues .highlight-title p { font-size:200%; font-weight:bold; padding:4% 3%; text-transform:uppercase; }
.highlightlinks a { text-decoration:none; color:#fff; transition:color .5s ease; }
.highlight-box:hover .highlight-title { background-color:#f26700; }
div.highlightsboxes { width:100%; display:block; margin:40px auto 0 auto; position:relative; }
div.hl-teaser { width:100%; display:block; margin:0 auto; padding:20px 5% 40px 5%; font-size:125%; box-sizing:border-box; position:relative; }
div.hl-teaser p { display:inline; font-weight:400; line-height:1.3em; }
div.hl-teaser a { display:inline; color:#fff; text-transform:uppercase; text-decoration:none; position:absolute; bottom:0; right:5%; transition:color .5s ease; }
div.hl-teaser a:hover { color:#f26700; }
div.hl-teaser a i.fa-chevron-right { transition:border .5s ease; border: 2px; border-style:solid; border-color:#fff; border-radius: 50%; padding: 3px 4px 3px 7px; }
div.hl-teaser a:hover i.fa-chevron-right { border-color:#f26700; }

/* Support */ 
section#support { display:block; background-color:rgba(105,140,69,.9); color:#fff; position:relative; margin:75px auto 0 auto; }
div#supportwrap { max-width:1720px; margin:0 auto; padding:40px 20px; display:block; position:relative; box-sizing:border-box; }
.supportheader { text-align:left; margin:0 auto 10px auto; width:100%; position:relative; z-index:2; }
.supportheader h1 { display:inline-block; float:left; }
.supportheader:after { clear:both; content:''; display:block; }
div#support-home-teaser { max-width:1140px; padding-bottom:20px; display:inline-block; vertical-align:top; font-weight:400; }
.button-links { display:block; width:1224px; position:relative; }
.supbutton { display:table; float:left; width:380px; margin:14px; }
.supbutton a { background-color:#3da3ff; display:table-cell; color:#fff; padding:0 80px 0 20px; text-transform:uppercase; font-weight:600 !important; font-size:200%; transition:background .5s ease; width:380px; height:108px; box-sizing:border-box; text-align:right; vertical-align:middle; position:relative; }
.supbutton i.fa-chevron-right { position:absolute; right:30px; top:32px; border: 3px; border-style:solid; border-color:#fff; border-radius: 50%; padding: 4px 7px 4px 10px; }
.supbutton a:hover { background-color:#0076a3; }
#supportdisclaimer { display:inline-block; width:60%; text-align:left; margin:30px auto 0 auto; }
div#lurkingjaguar { display:block; width:35%; position:absolute; right:0; bottom:0; z-index:-1; }
div#lurkingjaguar img { width:100%; height:auto; display:block; float:right; max-width:782px; }

/* Sponsors */
section#sponsors { display:inline-block; width:100%; text-align:center; margin:0 auto 75px auto; background-color:#fff; }

/* jcarousel styles */
section#sponsors .jcarousel-wrapper { margin: 0 auto; position: relative; width: 1715px; height: 140px; background-color:#fff; }

/** Carousel **/
section#sponsors .jcarousel { position: relative; overflow: hidden; }
section#sponsors .jcarousel ul { width: 20000em; position: relative; list-style: none; margin: 0; padding: 0; }
section#sponsors .jcarousel li { float: left; width: 245px; height: 140px; padding:12px; box-sizing:border-box; margin:0; display:table; }
section#sponsors .jcarousel li a { display:table-cell; vertical-align:middle; }
section#sponsors .jcarousel img { min-height:inherit; height:auto; width:auto; max-height:116px; max-width:221px; }
section#sponsors .jcarousel .loading { text-align: center; line-height: 90px; /* Fake vertical aligning */ }


/* Control panel for background video and elements */
div#controlpanel { transition:ease color .5s; position:fixed; bottom:0; right:0; z-index:100; display:block; }
div#playbar { width:100px; height:50px; background-color:rgba(0,0,0,.8); padding:10px 20px; box-sizing:border-box; }
div#pausebutton, div#hidecontent, div#playbutton, div#showcontent { width:30px; height:30px; font-size:24px; color:#fff; float:left; }
div#pausebutton:hover, div#hidecontent:hover, div#playbutton:hover, div#showcontent:hover { color:#ea942c; cursor:pointer; }
div#playbutton, div#showcontent { display:none; }

@media only screen and (max-width:1735px) {
	section#sponsors .jcarousel-wrapper { width: 1470px; }
}
@media only screen and (max-width:1600px) {
	.button-links { width:939px; }
	.supbutton { width: 285px; }
	.supbutton a { font-size:150%; width:285px; height:81px; padding:0 60px 0 15px; }
	.supbutton i.fa-chevron-right { right:13px; top:24px; }
}
@media only screen and (max-width:1490px) {
	section#sponsors .jcarousel-wrapper { width: 1225px; }
}
@media only screen and (max-width:1260px) {
	section#sponsors .jcarousel-wrapper { width: 980px; }
	div#admissionleftwrap { display:block; float:left; margin-top:20px; width:40%; }
	div#admissionmidwrap { display:block; clear:left; float:left; margin-left:50px; width:40%; }
	div#admissionrightwrap { width:40%; margin-top: 346px; }
	div#admissionmid div#single, div#admissionmid div#bestvalues { padding: 20px; }
	section#admission div#giraffe-admission { display:none; }
	div#admissionmid > div.clear { height:20px; }
	.button-links { width:100%; max-width:626px; }
}
@media only screen and (max-width:1024px) {
	.highlight-box { width:50%; float:left; margin-bottom:30px; }
	section#sponsors .jcarousel-wrapper { width: 735px; }
	div#admissionleftwrap { margin-left:0; }
	div#admissionleftwrap, div#admissionmidwrap, div#admissionrightwrap { width:44%; }
}
@media only screen and (max-width:980px) {
	div#lurkingjaguar { display:none; }
	#supportdisclaimer { width:100%; }
}
@media only screen and (max-width:960px) {
	div#controlpanel { display:none; }
}
@media only screen and (max-width:768px) {
	a#explorebutton { height: 85px; line-height: 85px; font-size:220%; }
	section#welcomebox { margin-top:75px; }
	section#sponsors .jcarousel-wrapper { width: 490px; }
	div#admissionleftwrap, div#admissionmidwrap, div#admissionrightwrap { width:100%; display:block; max-width:430px; clear:left; margin:20px auto; float:none; }
	.highlight-box { width:100%; max-width:430px; float:none; margin:auto; display:block; }
	section.interrupter h1 { display:block; }
	div.interrupter-button { float:left; clear:left; margin-top:25px; }
}
@media only screen and (max-width:500px) {
	section#sponsors .jcarousel-wrapper { width: 245px; }
	a#explorebutton { height: 45px; line-height: 45px; font-size:150%; }
}
@media only screen and (max-width:415px) {
	/* To adjust for font resize */
	div.interrupter-button a { padding:12px 25px; height:50px; }
	.supbutton { margin:14px 0; }
}