/* Opening Page */
body { background-image:url('images/animal-bg.jpg');  background-size:100% 100%; background-attachment:fixed; }
h1 { text-transform:uppercase; }

/* 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; }
div.interrupter-button a:after { width:0; height:0; border-top:31px solid transparent; border-bottom:31px solid transparent; border-left:31px solid #3da3ff; content:''; position:absolute; left:100%; top:0; transition:ease all .5s; }
div.interrupter-button a:hover { background-color:#0076a3; }
div.interrupter-button a:hover:after { border-left-color:#0076a3; }
div.interrupter-button a.aqua { background-color:#00a99d; }
div.interrupter-button a.aqua:after { border-left-color:#00a99d; }
div.interrupter-button a.aqua:hover { background-color:#1a776f; }
div.interrupter-button a.aqua:hover:after { border-left-color:#1a776f; }
div.interrupter-button a.orange { background-color:#ea9400; }
div.interrupter-button a.orange:after { border-left-color:#ea9400; }
div.interrupter-button a.orange:hover { background-color:#f26700; }
div.interrupter-button a.orange:hover:after { border-left-color:#f26700; }

/* Animal Wellness */
section.highlights { display:block; margin:220px auto 75px auto; color:#fff; position:relative; overflow:hidden; }
section#animalwellness { 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; }
div.highlightswrap:after { display:block; clear:both; content:''; }
.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:50%; display:inline-block; padding:20px 15px; box-sizing:border-box; vertical-align:top; float:left; }
.highlight-box:nth-child(odd) { padding-left:0; }
.highlight-box:nth-child(even) { padding-right:0; }
.highlight-image { display:block; position:relative; overflow:hidden; }
.highlight-image a { display:block; }
.highlight-image img { width:100%; height:auto; display:block; }
.highlight-title { display:table; width:100%; background-color:#5ea514; height:82px; transition:background .5s ease; }
.highlight-title p { display:table-cell; position:relative; font-size:150%; padding:0 3%; vertical-align:middle; }
.highlights-intro { margin-top: 50px; font-size: 175%; line-height: 125%; max-width: 1100px; }
#animalwellness .highlight-title { height:auto; }
#animalwellness .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 3%; 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; }

/* Meet the Animals */
section#animals { display:block; margin:0 auto; color:#fff; position:relative; }
div.animalswrap { padding:40px 20px; }
div.animalswrap#topwrap { background-color:rgba(26,119,111,.9); }
div.animalswrap#botwrap { background-color:rgba(105,140,69,.7); }
div.animalswrap:after { display:block; clear:both; content:''; }
#loops-selection { display:block; position:relative; padding:50px 0 25px 0; }
#loops-selection:after { display:block; content:''; clear:both; }
#loops-selection ul { margin:0; padding:0; width:100%; display:flex; align-items:stretch; justify-content: space-between; }
#loops-selection li { display:block; flex:0 1 auto; list-style-type:none; font-size:150%; }
.sort { color:#fff; cursor:pointer; font-weight:bold; }
.sort.closed { padding-left: 30px; background-image:url('images/clipart/construction-icon.png'); background-repeat:no-repeat; background-position:0 0; background-size:auto 100%; }
.sort:hover { color:#ea9400; }
.sort.active { color:#ea9400; }
.animal { display:block; width:25%; float:left; padding:22px 20px; box-sizing:border-box; }
.animal.inactive { width:0; overflow:hidden; padding:0; }
.animal a { width:100%; height:0; padding-bottom:65.78%; display:block; text-align:center; position:relative; color:#fff; background-size:100%; background-position:50% 50%; text-shadow: 0 0 5px #000; transition:background 0.25s ease; background-repeat:no-repeat; }
.animal a:hover { background-size:110%; }
.animal a span { position:absolute; bottom:5%; width:100%; left:0; }
.notification-message { font-size:150%; font-weight:400; text-align:center; margin-bottom:20px; }

/* Experiences & Encounters */ 
section#experiences { display:block; background-color:rgba(105,140,69,.9); color:#fff; position:relative; margin:75px auto; }
div#experienceswrap { max-width:1720px; margin:0 auto; padding:40px 20px; display:block; position:relative; box-sizing:border-box; }
.experiencesheader { text-align:left; margin:0 auto 10px auto; width:100%; position:relative; z-index:2; }
.experiencesheader h1 { display:inline-block; float:left; }
.experiencesheader:after { clear:both; content:''; display:block; }
div#experiences-teaser { max-width:62%; padding:20px 0; display:inline-block; vertical-align:top; font-weight:400; }
#experiencesdisclaimer { display:inline-block; width:60%; text-align:left; margin:30px auto 0 auto; }
div#lurkingrhino { display:block; width:35%; position:absolute; right:0; bottom:0; z-index:-1; }
div#lurkingrhino img { width:100%; height:auto; display:block; float:right; max-width:509px; }

@media only screen and (max-width:1250px) {
	#loops-selection li { font-size:125%; }
	.animal { width:33%; }
}
@media only screen and (max-width:1024px) {
	.highlight-box { width:50%; float:left; margin-bottom:30px; }
}
@media only screen and (max-width:980px) {
	div#lurkingrhino { display:none; }
	div#experiences-teaser { max-width:100%; }
	#loops-selection li { font-size:100%; }
	.animal { width:50%; }
}
@media only screen and (max-width:768px) {
	body { background-attachment:scroll; }
	.highlight-box { width:100%; max-width:430px; float:none; margin:auto; display:block; }
	.highlight-box:nth-child(odd) { padding-left:15px; }
	.highlight-box:nth-child(even) { padding-right:15px; }
	section.interrupter h1 { display:block; }
	div.interrupter-button { float:left; clear:left; margin-top:25px; }
	#loops-selection ul { display:block; }
	#loops-selection li { display:block; margin:10px 0; font-size:150%; }
	#loops-selection li a { padding:10px 0; }
	.animal { width:100%; max-width:420px; float:none; margin:0 auto; }
}
@media only screen and (max-width:415px) {
	/* To adjust for font resize */
	div.interrupter-button a { padding:12px 25px; height:50px; }
	div.interrupter-button a:after { border-top:25px solid transparent; border-bottom:25px solid transparent; border-left:25px solid #3da3ff; }
}