/* ----------------------------------------------------------
    BIRMINGHAM ZOO RESPONSIVE CSS
    Version 1.0

    TABLE OF CONTENTS

    01 - MOBILE ITEM STYLES
    02 - BREAKPOINTS - IN ORDER FROM BIGGEST TO SMALLEST
---------------------------------------------------------- */



/* 01 = MOBILE ITEM STYLES
---------------------------------------------------------- */

.mobile-nav-menu {
	display: none;
	font-size: 18px;
	margin-top: 16px;
	margin-right: 20px;
	padding: 10px;
	color: #fff;
	background-color: #faac01;
	font-weight: bold;
	outline: none;
}

	.mobile-nav-menu:hover, .mobile-nav-menu.active {
		background-color: #E6A106;
	}

.nav .mobile-menu-items {
	display: none;
}

	.nav .mobile-menu-items span {
		background-color: #C78A08;
		color: #fff;
		display: block;
		font-size: 14px;
		font-weight: bold;
		margin-right: 2px;
	    padding: 10px 10px 10px 10px !important;
	}

	.nav .mobile-menu-items.bkgd-light-green {
		border-color: #2eab3f;
	}

.mobile-nav-menu span {
	font-weight: bold;
	font-size: 20px;
	margin-right: 5px;
	font-family: Helvetica, Arial, sans-serif;
}

.mobile-search-form {
	margin-top: 20px;
	margin-left: 145px;
	display: none;
}

.mobile-search-form input {
    background: #fff;
    border: none;
    color: #707070;
    font-family: 'Open Sans', 'Arial', 'Helvetica', sans-serif;
    font-size: 12px;
    font-style: italic;
    margin-top: 8px;
    outline: none;
    padding: 3px 0px 3px 7px;
    width: 170px;
}

.mobile-display {
	display: none;
}

.sidebar.mobile-sidebar {
	display: none;
}

.sub-page-menu-btn {
	color: #fff;
	font-weight: 600;
	font-size: 20px;
	display: none;
	padding: 10px;
}

.sub-page-menu-btn .arrow {
	background-image: url(../images/white-down-arrow.png);
	background-size: 25px 25px;
	background-repeat: no-repeat;
	display: block;
	float: right;
	width: 25px;
	height: 25px;
	margin-top: 3px;
}

.sub-page-menu-btn.active .arrow {
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
}



/* 02 = BREAKPOINTS - IN ORDER FROM BIGGEST TO SMALLEST
---------------------------------------------------------- */


@media screen and (max-width: 1045px) {
	
	div.secondary-header-wrapper {
		background-position: 0px -20px;
		height: 20px;
	}

	.secondary-header .right {
		display: none;
	}

	div.header-wrapper {
		top: 14px;
	}

	div.rotator-wrapper {
		margin-top: 10px;
	}

	.mobile-search-form {
		display: block;
	}

	.mobile-nav-menu {
		display: block;
	}

	.nav {
		background: #D79409;
		display: none;
		position: absolute !important;
		right: 20px;
		width: 200px;
		top: 63px;
	}
		.nav .mobile-menu-items {
			display: block;
		}
	
		.nav li {
			float: none;
			width: 100%;
			border-bottom: solid #C78A08 1px;
		}

		.nav li a {
			color: #fff;
			border: none !important;
			padding: 10px 10px 10px 20px !important;
			font-weight: normal !important;
		}

		.nav li a:hover {
			background-image: none !important;
		}

	div.rotator-wrapper.homepage ul.hours {
		top: 87px;
	}
	
	div.rotator-wrapper.homepage, div.rotator-wrapper.homepage .rotator {
		height: 531px;
	}

	div.rotator-wrapper div.rotator div.rotator-btns {
	    padding-top: 352px;
	}

	div.rotator-wrapper.homepage, div.rotator-wrapper-background {
		background-size: 145%;
	}

	ul.hours {
		top: 107px;
		padding-right: 20px;
	}
	

	div.content-area {
		width: 75%
	}

	div.sidebar {
		width: 25%;
	}

	div.section-header {
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}

	div.content {
		padding: 20px 3% 0px 3%;
		width: 94%;
	}
	
	div.footer {
		padding: 20px;
		box-sizing: border-box;
	}

		div.fifth-col {
			float: right;
			clear: both;
			padding-top: 10px;
			width: 100%;
		}

			div.fifth-col p {
				text-align: center;
			}

			div.fifth-col img {
				float: left;
			}
			
			div.fifth-col img:nth-child(1) {
				margin-right: 15px;
			}

			div.footer-logos {
				overflow: auto;
  				width: 276px;
  				margin: 0 auto;
			}

		div.second-col {
			width: 23%;
		}

	.event-grid .event {margin-right: 12px !important; width: 48% !important;}
	.event-grid .event:nth-child(3n) {margin-right: 12px !important;}
	.event-grid .event .title {width: 65% !important;}
	
	div.today-at-the-zoo {
		padding: 18px 20px 20px 20px;
		box-sizing: border-box;
		height: 245px;
	}
	
		div.today-at-the-zoo div.right {
			width: 72.25%;
		}

		div.today-at-the-zoo div.left {
			width: 21.3%;
			text-align: center;
		}

	div.event-grid div.event {
		width: 49.2%;
		margin-right: 12px;
	}

		div.event-grid div.event div.left {
			width: 30%;
			padding: 3.5%;
		}

		div.event-grid div.event div.right {
			float: left;
			width: 56%;
			padding: 3.5%;
		}

		div.event-grid div.event:nth-child(2) {
			margin-right: 0px;
		}

		div.event-grid div.event:nth-child(3) {
			margin-right: 1.5%;
		}

		div.event-grid div.event:nth-child(4) {
			margin-right: 0px;
		}

		div.event-grid div.event:nth-child(6) {
			margin-right: 0px;
		}
	
	div.connect-with-us {
		padding: 36px 20px 31px 20px;
		box-sizing: border-box;
	}

	div.instagram-feed div.photo {
		width: 11.5%;
		margin-right: 1.14%;
	}

		div.instagram-feed div.photo img {
			width: 100%;
		}

	div.animal-spotlight {
		padding: 0px 20px 0px 20px;
		box-sizing: border-box;
	}
	
	div.animal-spotlight div.animal-info {
		width: 62%;
		margin-top: 22px;
	}

	div.animal-spotlight div.spotlight-boxes {
		margin-top: 22px;
	}

	div.animal-spotlight div.left div.details {
		width: 75%;
	}

	div.animal-spotlight div.animal-picture {
		width: 12.7%;
		left: 20px;
	}

		div.animal-spotlight div.animal-picture img {
			width: 100%;
		}

}

@media screen and (max-width: 1014px) {
	
	div.home-banner-area a.banner {
		float: none;
		height: auto;
		margin: 0px auto 15px auto;
		width: 500px;
	}

}

@media screen and (max-width: 1014px) {

	.event-grid .event .title {width: 62% !important;}

}

@media screen and (max-width: 950px) {

	div.second-col {
		width: 28%;
	}

	div.fourth-col {
		width: 30%;
	}

	div.fourth-col .zoo-news {
		width: 100%;
	}

}

@media screen and (max-width: 944px) {
	
	div.sidebar {
		width: 35%;
	}

	div.content-area {
		width: 65%;
	}

	div.content-area img.right, .wp-post-image, div.content-area img.alignright {
		width: 40%;
		height: auto;
	}

	div.content-area img.left, .wp-post-image, div.content-area img.alignleft {
		width: 40%;
		height: auto;
	}
	
	.event-grid .event {width: 47% !important;}
	
	.event-grid .event .title {width: 54% !important;}

}

@media screen and (max-width: 944px) {

	div.today-at-the-zoo div.right {
		width: 63%;
	}

	div.today-at-the-zoo div.left {
		width: 30%;
	}

}

@media screen and (max-width: 900px) { 
	.event-grid .event .title {width: 50% !important;}
}

@media screen and (max-width: 878px) {
	
	div.rotator-wrapper.homepage, div.rotator-wrapper.homepage .rotator {
		height: 481px;
	}

	div.rotator-wrapper div.rotator div.rotator-btns {
	    padding-top: 352px;
	}

	div.rotator-wrapper.homepage, div.rotator-wrapper-background {
		background-size: 155%;
	}
	
	div.animal-spotlight div.animal-picture {
		display: none;
	}

	div.animal-spotlight div.animal-info {
		width: 60%;
	}

	div.animal-spotlight div.left div.details {
		float: none;
		margin-left: 0px;
		width: 100%;
	}
}

@media screen and (max-width: 870px) {
	
	.early-full-width {
		width: 100% !important;
		height: auto;
	}

}

@media screen and (max-width: 830px) {
	

	div.animal-list-species {
    	width:50%; 
    	margin-right: 0%;
	}
	
	div.today-at-the-zoo div.left {width: 28% !important;}
	
	.event-grid .event {width: 98% !important;}
	
	.event-grid .event .title {width: 60% !important;}

}

@media screen and (max-width: 820px) {
	
	div.event-grid div.event {
		width: 100%;
		margin-right: 0px;
		min-height: 0px;
	}

	div.event-grid div.event div.left {
		text-align: left;
		min-height: 0px;
	}

}

@media screen and (max-width: 802px) {

	div.second-col {
	  width: 34%;
	  padding-right: 1%;
	}

	div.fourth-col {
		width: 45%;
	}

	div.third-col {
		display: none;
	}

}

@media screen and (max-width: 794px) {

	div.animal-spotlight div.animal-info {
		width: 55%;
	}

}

@media screen and (max-width: 765px) {

	div.rotator-wrapper.homepage, div.rotator-wrapper.homepage .rotator {
		height: 411px;
	}

	div.rotator-wrapper div.rotator div.rotator-btns {
	    padding-top: 302px;
	}

	div.rotator-wrapper.homepage, div.rotator-wrapper-background {
		background-size: 150%;
	}
}


@media screen and (max-width: 740px) {

	div.today-at-the-zoo div.right {
		width: 60%;
	}

	div.today-at-the-zoo div.left {
		width: 40%;
	}

}

@media screen and (max-width: 730px) {

	div.connect-with-us div.left {
		width: 70%;
	}

}

@media screen and (max-width: 716px) {

	div.animal-spotlight div.animal-info {
		width: 50%;
		margin-bottom: 22px;
	}

}

@media screen and (max-width: 678px) {
	
	div.rotator-wrapper.homepage {
		display: none;
	}

	.mobile-display {
		background: url(../images/lion-mobile.jpg) center center no-repeat;
		display: block;
		height: 350px;
		width: 100%;
		position: relative;
	}

		.mobile-display-content {
			position: relative;
	  		top: 165px;
	  		width: 150px;
	  		margin: 0 auto;
		}

			.mobile-display-content .lion-crown {
				position: absolute;
				top: -35px;
				left: 120px;
				z-index: 0;
				transform: rotate(35deg);
				-moz-transform: rotate(35deg);
				-webkit-transform: rotate(35deg);
			}

			.mobile-display-content .btn {
				display: inline-block;
				z-index: 1;
				position: relative;
				background-image: none;
				background-color: rgba(255, 255, 255, 0.9);
			}

				.mobile-display-content .btn:hover {
					background-color: rgba(255, 255, 255, 0.7);
					opacity: 1;
				}
	.mobile-display ul.hours {
		background-color: rgba(49, 170, 57, 0.70);
		width: 100%;
		position: absolute;
		top: 313px;
		padding-right: 0px;
		z-index: 1;
	}

	.mobile-display ul.hours li {
		background: none;
		margin-top: 10px;
		padding-left: 20px;
		padding-right: 20px;
		text-align: center;
	}

	.rotator-wrapper.subpage ul.hours {
		background-color: rgba(49, 170, 57, 0.70);
		width: 100%;
		position: absolute;
		top: 133px;
		padding-right: 0px;
	}

	.rotator-wrapper.subpage ul.hours li {
		background: none;
		margin-top: 10px;
		padding-left: 20px;
		padding-right: 20px;
		text-align: center;
	}

}

@media screen and (max-width: 650px) {

	div.sidebar {
		display: block;
		float: none;
		width: 100%;
		margin-bottom: 20px;
		overflow: auto;
	}

		div.sidebar .sub-menu {
			float: left;
			width: 70%;
		}

		div.sidebar .sidebar-btns a {
			margin-bottom: 8.4px;
			width: 100%;
		}

		div.content-area {
			width: 100%;
		}

	div.sidebar .sub-menu {
		float: none;
		width: 100%;
		display: none;
	}

	div.sidebar.not-mobile-sidebar .sidebar-btns {
		display:none;
	}

	.sidebar.mobile-sidebar {
		display: block;
	}

	.sub-page-menu-btn {
		display: block;
	}

	div.sidebar .sidebar-btns {
		float: right;
		margin-top: 0px;
		width: 100%;
		display: block;
		margin-top: 20px;
	}

		div.sidebar .sidebar-btns a:nth-child(2), div.sidebar .sidebar-btns a:nth-child(4) {
			margin-right: 0px;
		}

		div.sidebar .sidebar-btns a:nth-child(1) {
			background-color: #39b54a;
		}
		div.sidebar .sidebar-btns a:nth-child(2) {
			background-color: #a771ad;
		}
		div.sidebar .sidebar-btns a:nth-child(3) {
			background-color: #04a0c9;
		}
		div.sidebar .sidebar-btns a:nth-child(4) {
			background-color: #faac01;
		}

}

@media screen and (max-width: 640px) {

	div.animal-spotlight div.animal-info {
		width: 45%;
	}

}

@media screen and (max-width: 638px) {

	div.second-col {
	  width: 70%;
	  padding-right: 1%;
	}

	div.fourth-col {
		width: 100%;
		margin-top: 10px;
		clear: both;
	}
	
	.event-grid .event .title {width: 58% !important;}

}

@media screen and (max-width: 624px) {

	div.connect-with-us div.left {
		width: 60%;
	}

}

@media screen and (max-width: 610px) {

	div.animal-spotlight div.animal-info {
		width: 100%;
		float: none;
	}

	div.animal-spotlight {
		min-height: 0px;
	}

	div.animal-spotlight div.spotlight-boxes {
		width: 100%;
		float: none;
		margin-bottom: 22px;
	}

	div.animal-spotlight div.spotlight-boxes .box {
	  width: 100%;
	  box-sizing: border-box;
	}

	div.animal-spotlight div.spotlight-boxes h3 {
		width: 250px;
		margin: 0 auto 18px auto;
	}

	div.animal-spotlight div.spotlight-boxes .find-animal-form {
		width: 250px;
		margin: 0 auto;
	}

}

@media screen and (max-width: 570px) {

	div.animals-list-header	.left {
		float: none;
	}

	div.animals-list-header	.filters {
		float: none;
		margin: 0 auto 30px auto;
		overflow: auto;
		width: 244px;
	}

	div.animals-list-header	.filters span.label {
		font-weight: bold;
		display: block;
	}

	div.animals-list-header	.filters ul li {
		margin-left: 0px;
		margin-right: 5px;
	}

	div.animals-list-header	.filters ul li:nth-child(3) {
		margin-right: 0px;
	}

	.go-full-width {
		width: 100% !important;
	}

}

@media screen and (max-width: 545px) {
	

	.logo img {
		width: 113px;
	}


	div.today-at-the-zoo {height: auto;}

	div.today-at-the-zoo > div.left {
		width: 100% !important;
		float: none;
		margin: 0px auto 20px auto;
	}

	.event-grid {
		display: none;
	}

	.event-grid-arrows {
		display: none !important;
	}

	div.home-banner-area a.banner {
		width: 90%;
		height: auto;
		margin: 0px 5% 10px 5%;
	}

	div.home-banner-area a.banner img {
		width: 100%;
		height: auto;
	}

	div.home-banner-area a.banner:nth-child(2) {
		margin-bottom: 0px !important;
	}

}

@media screen and (max-width: 539px) {

	div.animal-grid {
		width: 236px;
		margin: 0 auto;
	}

}

@media screen and (max-width: 500px) { 
	
	.mobile-search-form {
		display: none;
	}

	.secondary-header .right {
		display: block;
	}

	.secondary-header .right .sub-nav {
		display: none;
	}

	.secondary-header .right .search-form {
		margin-right: 20px;
	}

	div.secondary-header-wrapper {
		background-position: 0px 0px;
		height: 40px;
	}

	div.header-wrapper {
		top: 34px;
	}

	div.rotator-wrapper.homepage {
		margin-top: 30px;
	}

	div.animal-spotlight-wrapper {
		padding-bottom: 30px;
	}

	ul.nav {
		top: 63px;
		left: 0px;
		right: 0px;
		width: 100%;
		padding: 26px 0px 0px 0px;
	}

	div.connect-with-us .instagram-feed .photo {
		width: 23.8%;
	}

	div.connect-with-us .instagram-feed .photo:nth-child(5), 
	div.connect-with-us .instagram-feed .photo:nth-child(6), 
	div.connect-with-us .instagram-feed .photo:nth-child(7), 
	div.connect-with-us .instagram-feed .photo:nth-child(8) {
		display: none;
	}
	
}

@media screen and (max-width: 480px) {
	div.connect-with-us div.left {
		width: 55%;
	}
}

@media screen and (max-width: 456px) {

	div.second-col {
	  width: 60%;
	  padding-right: 1%;
	}

}

@media screen and (max-width: 456px) {

	div.second-col {
	  width: 60%;
	  padding-right: 1%;
	}

}

@media screen and (max-width: 428px) {
	div.connect-with-us div.left {
		width: 100%;
		display: block;
		float: none;
	}

	div.connect-with-us div.right {
		float: none;
	}
	div.social-icons a {
		margin-left: 0px !important;
		margin-right: 17px !important;
		float: left;
	}
}

@media screen and (max-width: 424px) {

		div.sidebar .sidebar-btns a img {
			margin-left: -3%;
		}

}

@media screen and (max-width: 401px) {

	div.sidebar .sidebar-btns a {
		width: 100%;
		margin-right: 0px;
		float: none;
	}

	div.sidebar .sidebar-btns a img {
		margin-left: 0px;
	}

}

@media screen and (max-width: 348px) {
	
	div.first-col {
		width: 33%;
		padding-right: 6%;
	}

	div.first-col img {
		width: 100%;
	}

	div.second-col {
	  width: 60%;
	  padding-right: 1%;
	}

}