/* -- MEDIUM DISPLAYS -- */

@media screen and (max-width: 980px) {
	
	.mobile-only {
		display: block;
	}

	.carousel-nav {
		width: 624px;
		margin-top: 182px;
	}
	
	.carousel-scroll {
		width: 624px;
	}
	
	.carousel-items .item {
		width: 624px !important;
		height: 227px;
	}
		
	div#wrapper {
		width: 624px;
		padding-bottom: 162px;
	}
	
	div#header {
		height: auto;
		padding-bottom: 0;
	}

	div#header-menu {
		display: block;
		padding-top: 6px;
	}
	
	div#header-menu a {
		display: block;
		width: 140px;
		height: 22px;
		margin-bottom: 2px;
		overflow: hidden;
		text-align: center;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 13px;
		line-height: 23px;
		color: #FFF;
		background: #000;
		border: 2px solid #000;
	}
	
	div#header-menu a.selected {
		color: #000;
		background: #FFF;
		border: 2px solid #000;
	}
	
	div#header-schedule {
		float: right;
		clear: both;
		width: 304px;
		padding: 0;
	}
	
	div#header-schedule a#schedule-link {
		display: inline-block;
	}
	
	div#header-schedule ul {
		display: none;
	}

	div#navigation {	
		float: right;
		width: 304px;
		height: auto;
		padding: 0;
		text-align: center;
		margin-top: -20px;
		padding-top: 26px;
	}
	
	div#navigation ul {
		display: none;
		position: absolute;
		z-index: 100;
		width: 304px; 
		background: #000;
	}
	
	div#navigation ul li {
		float: none;
		border-top: 1px solid #666; 
	}
	
	div#navigation ul li a.top {
		display: block;
		height: auto;
		padding: 4px 0;
		*margin-bottom: 0;
		border-left: 0;
		overflow: visible;
		color: #FFF;
	}
	
	div#navigation ul li a {
		width: auto !important;
	}

	div#navigation ul li a:hover {
		color: #B3B3B3 !important;
	}
		
	div#navigation ul li.selected a.top,
	div#navigation ul li a:hover {
		color: #FFF;
	}
		
	div#navigation ul li ul {
		display: none !important;
		position: relative;
		width: auto;
		padding: 0;
		margin: 0;
		background: #B3B3B3;
	}
	
	div#navigation ul li.current ul {
		display: block !important;
	}
	
	div#navigation ul li ul li {
		padding: 0;
		margin: 0;
		border-top: 1px solid #666;
	}
	
	div#navigation ul li ul li a {
		color: #000;
	}
	
	div#content .col-narrow {
		display: none;
	}
	
	div#content .col-wide {
		float: none;
	}
	
	div#content .col-wide .carousel-nav {
		margin-top: 300px;
	}
	
	div#content .col-wide .carousel-nav,
	div#content .col-wide .carousel-scroll,
	div#content .col-wide .carousel-items .item {
		width: 624px;
		height: 344px;
	}
		
	div#content #mobile-section-subnav {
		display: block;
	}
	
	div#content .cover-image img {
		width: 100%;
		height: auto;
	}
	
	div#content .cover-gallery {
		height: 227px;
	}

	div#content .col-wide .cover-gallery {
		height: 344px;
	}
	
	div#footer-content {
		width: 624px;
	}
	
	div#footer div#footer-logo {
		display: none;
	}
	
	div#footer div#footer-info {
		width: 320px;
	}
	
	div#footer div.footer-links-col:last-child {
		display: none;
	}
		
	/* -- Home -- */
	
	div#home-features-wrap {
		float: none;
		width: auto;
	}
	
	div#home-events-wrap {
		float: none;
		width: auto;
	}
	
	div#home-events {
		float: left;
		width: 304px;
		margin-right: 16px;
	}
	
	div#home-sunday {
		float: left;
		width: 304px;
	}
	
	/* -- Calendar -- */
	
	div#content #calendar .col-narrow {
		display: block;
		position: absolute;
		z-index: 2;
		margin-left: 320px;
		padding-top: 6px;
	}
	
	div#calendar-nav {
		width: 304px;
		height: 45px;
		margin-bottom: 6px;
		overflow: hidden;
	}
	
	div#calendar-nav ul {
		display: none;
	}
	
	div#calendar-category {
		border-top: 0;
		padding-top: 0;
	}
	
	div#calendar-category h2 {
		display: none;
	}
	
	div#calendar-category a.trigger {
		display: block;
		padding: 5px;
		background: #666;
		border: 2px solid #666;
		text-align: center;
		font-weight: bold;
		font-size: 13px;
		line-height: 15px;
		text-transform: uppercase;
		color: #FFF;
	}

	div#calendar-category a.selected {
		background: #FFF;
		color: #666;
		border: 2px solid #666;
	}
					
	div#calendar-category ul {
		display: none;
		position: absolute;
		z-index: 3;
		width: 304px;
		background: #B3B3B3;
		border-bottom: 1px solid #666;
	}

	div#calendar-category ul li {
		display: block;
		border-top: 1px solid #666;
	}
	
	div#calendar-category ul li a {
		display: block;
		padding: 4px 6px;
		color: #000;
		font-size: 13px;
		line-height: 15px;
		font-weight: bold;
		text-align: center;
		text-transform: uppercase;
	}
	
	div#calendar-category ul li a:hover {
		background: #000;
		color: #B3B3B3;
	}

	div#content #calendar h3 {
		margin-bottom: 35px;
	}
	
	div#calendar div#calendar-header {
		display: block;
	}
	
}


/* -- SMALL DISPLAYS -- */

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

	/* -- Global -- */

	div.pagination a {
		padding: 12px 40px;
		font-size: 18px;
		line-height: 22px;
	}
	
	div.pagination a.page-prev,
	div.pagination a.page-next {
		margin: 0 5px;
	}
	
	.button {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.carousel-nav {
		width: 304px;
		margin-top: 66px;
	}
	
	.carousel-scroll {
		width: 304px;
	}
	
	.carousel-items .item {
		width: 304px !important;
		height: 111px;
	}
		
	div#wrapper {
		width: 304px;
		padding-bottom: 225px;
	}
	
	div#header {
		height: auto;
	}
	
	div#header h1 img {
		width: 144px;
		height: 68px;
	}
	
	div#header-items {
		width: auto;
	}
	
	div#header-links {
		display: none;
	}
	
	div#header-buttons {
		display: none;
	}
	
	div#header-search {
		padding-top: 7px;
		float: none;
	}
	
	div#header-social {
		display: none;
	}
	
	div#header-schedule {
		display: none;
	}

	div#header-menu {
		padding-top: 6px;
	}
	
	div#navigation {
		margin-top: 0;
		padding-top: 0;
	}

	div#content .col-wide {
		width: auto;
	}
	
	div#content .page-text {
		float: none;
		width: auto;
	}

	div#content .page-text p img {
		width: 100%;
		height: auto;
	}

	div#content .page-extra {
		float: none;
		width: auto;
		height: 150px;
		padding-top: 6px;
		border-top: 1px solid #000;
	}
	
	div#content .tiles ul {
		width: auto;
	}
	
	div#content .tiles ul li {
		float: none;
	}

	div#content #mobile-section-subnav {
		width: 100%;
		padding-bottom: 0;
	}
	
	div#content #mobile-section-subnav .section-subnav {
		float: none;
		margin-bottom: 6px;
	}
	
	div#content .cover-gallery {
		height: 111px;
	}
	
	div#content .col-wide .cover-gallery {
		height: 170px;
	}
	
	div#content .col-wide .carousel-nav {
		margin-top: 125px;
	}
	
	div#content .col-wide .carousel-nav,
	div#content .col-wide .carousel-scroll,
	div#content .col-wide .carousel-items .item {
		width: 304px;
		height: 168px;
	}
	
	div#mobile-footer {
		display: block;
		text-align: center;
	}
	
	div#mobile-footer-buttons {
		margin: 10px auto 0;
		width: 304px;
	}
	
	div#mobile-footer-buttons a {
		display: block;
		width: 304px;
		height: 26px;
		margin-bottom: 6px;
		overflow: hidden;
		text-align: center;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 13px;
		line-height: 26px;
		color: #000;
		background: #FFDD00;
	}
	
	div#mobile-footer-buttons a:hover {
		background: #FFF199;
	}
	
	div#mobile-footer-social {
		width: 116px;
		padding: 0;
		margin: 14px auto 16px;
	}
	
	div#mobile-footer-social a:last-child {
		margin-right: 0;
	}
	
	div#footer {
		height: 225px;
	}
	
	div#footer-content {
		width: 304px;
		height: auto;
		padding-bottom: 8px;
	}
	
	div#footer div#footer-info {
		float: none;
		width: auto;
		padding-bottom: 10px;
	}
	
	div#footer div.footer-links-col {
		display: none;
	}
	
	div#footer div.always-show {
		display: block;
		width: 100%;
		height: auto;
		border-left: 0;
		padding-left: 0;
		border-top: 1px solid #FFF;
		padding-top: 6px;
		overflow: hidden;
	}
	
	div#footer div.always-show a {
		display: block;
		width: 50%;
		float: left;
	}		
		
	/* -- Home -- */

	div#home-features {
		height: auto;
	}
	
	div#home-features .carousel-nav {
		width: 304px;
		margin-top: 111px;
	}

	div#home-features .carousel-scroll {
		width: 304px;
	}
	
	div#home-features a.item {
		width: 304px;
		height: 232px;
	}
	
	div#home-features a.item img {
		width: 304px;
		height: 156px;
	}
	
	div#home-features a.item span.info {
		width: 292px;
	}
	
	div#home-features a.item span.info span.title {
		float: none;
		width: auto;
		max-height: 51px;
		overflow: hidden;
	}
	
	div#home-features a.item span.info span.date {
		display: none;
		float: none;
		width: auto;
		padding-top: 8px;
	}
	
	div#home-features a.item span.info span.date span {
		display: inline-block;
	}
	
	div#home-subfeatures {
		display: none;
	}
	
	div#home-quicklinks {
		margin-top: 15px;
	}
	
	/* -- Calendar -- */
	
	div#content #calendar .col-narrow {
		margin-left: 0;
		padding-top: 0;
		margin-top: 90px;
	}

	div#content #calendar h3 {
		margin-bottom: 119px;
	}
	
	div.month-day div.date {
		float: none;
		width: auto;
		height: auto;
		padding: 5px 10px;
		font-size: 13px;
		line-height: 15px;
		margin-bottom: 6px;
	}
	
	div.month-day div.events {
		float: none;
		width: auto;
		overflow: visible;
	}
	
	div.month-day div.event span.title {
		display: block;
		font-size: 23px;
		line-height: 27px;
	}
	
	
	div.month-day div.event span.time {
		display: block;
		padding: 5px 0;
		font-size: 13px;
		line-height: 17px;
	}
	
	div.month-day div.event p {
		margin: 15px 0;
	}
	
	
	
	/* -- Sermons -- */
	
	div#sermons-player{
		padding-bottom: 20px;
	}
		
	div#sermons-archive .page-extra {
		border-top: 0;
	}


	div#sermons-filter form {
		width: 100%;
	}
	
	div#sermons-filter .filter {
		float: none;
		width: auto;
		padding-right: 0;
		padding-bottom: 10px;
	}

	ul#sermons-list {
		padding: 10px 0 0;
	}


}


/* -- HD DISPLAYS -- */

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    div#header-search a#search-submit {
		background-image: url(../images/common/search-2x.png);
		background-size: 26px 52px;
	}
	    
	div.social a {
		background-image: url(../images/common/social-2x.png);
		background-size: 130px 52px;
	}
	
	/* -- Home -- */
	
	div#home-features div#feature-nav div a {
		background-image: url(../images/common/nav-arrows-2x.png);
		background-size: 90px 90px;
	}


	div#sermons-player div.download a {
		background-image: url(/images/common/download-1x.png);
		background-size: 25px 48px;
	}
	
	div#sermons-filter .selectmenu .selection {
		background-image: url(/images/common/dropdown-2x.png);
		background-size: 26px 52px;
		
	}
		
		    
}