/* CSS Document */
@media screen and (min-width: 767px){
	.menu{display: list-item !important; /*override display:none if going from mobile to full menu */}
}

@media screen and (max-width: 990px){ /* */
  	body{-webkit-text-size-adjust: none}
  	.outer{
  		min-width: 100%;
		overflow: hidden;
  	}
  	.container, .footer, .shadow{width: 100%}
  	/* Header */
  	#topheader{
  		width: 100%;
		background-position: 20% center;
  	}
  	.services, .eventsummary, .eventrow{width: 95%}
 	.eventcell{max-width: 98%}
	.eventimgcell{
		width: 98%;
		background-size: cover;
		border-radius: 20px;
		border: 1px solid #000;
		background-position: 30% 50%;
		height: 140px; 
	}
	.eventimgcell img{display:none}
	body #topnav li a{padding: 0 15px}
}

/* Smaller Screens */
@media screen and (max-width: 930px){
	.mobile-only{display: block}
  	.full-only, .circleimage{display: none}
  	.header{margin-top: 25px}
	/* Top Menu */
  	body #topnav{
  		height: inherit;
		min-height: inherit;
  	}
  	#topnav ul{
  		position: absolute;
		top: 0;
		width: 100%;
		padding: 7px 0;
		z-index: 100;
		background-color: #000;
  	}
  	body #topnav ul li{display: none}
  	body #topnav ul a{
  		border: 0 solid #000;
		padding-left: 0;
	}
  	#topnav ul a:hover{background-color: inherit}
  	#topnav ul li.menuicon{
  		display: block;
		background-image: url(/images/icons/menu-icon.png);
		background-repeat: no-repeat;
		width: 35px;
		height: 30px;
		margin-top: 10px;
		margin-left: 20px;
  	}
  	.menuicon span{display: none}
  	#topnav ul{height: auto}
  	#topnav ul li.home-link{
  		display: block;
		background-image: url(/images/icons/home-icon.png);
		background-repeat: no-repeat;
		margin-left: 20px;
		margin-top: 10px;
		padding-top: 10px;
		width: 35px;
		height: 30px;
  	}
  	#topnav ul li.home-link a span{display: none}
  	#topnav ul li.open{
  		display: list-item;
		width: 100%;
	}
  	.openMenu, .openMenu ul, .openMenu ul li{
  		width: 95%;
		display: block;
		clear: both;
		float: left;
  	}
  	body #nav .menusub{
  		display:block;
		margin-top: 0;
  	}
  	body #nav *:hover ul{top: 0}
  	body #nav .menusub, body #nav .menusub li, body #nav:hover .menusub li{
  		display: list-item;
		left: auto;
		position:inherit;
		top: auto;
		text-align: left;
		padding-left: 20px;
		font-size: 18px;
		width: 90%;
  	}
  	body #nav .openMenu{padding-left: 20px}
  	body #nav .menusub li{list-style: square}
  	body #topnav .openMenu a{border-right: 0 solid #000}
  	.footer #nav{
		height: 86px;
		background-color:#000;
	}
	.hidemenu{display:none}
	.topmenu li.menu{
		width: 100%;
		clear: left;
		font-size: 24px;
		text-align: left;
	}
	.church_menu_box{
		float: none;
		width: 100%;
		display: inline-block;
	}
	body .church_menu_main li a{
		margin-top: 5px;
    	height: 28px;
		background-position: 0 32px;
	}
	#loginform{display:none}
	.churches-on-gallery .church_menu_box {width: 75%}
}

/* Smaller Screens */
@media screen and (max-width: 560px){
	.container{ min-width: 300px}
  	.header{height: 110px}
  	#topheader{
  		background-position: 20% center;
		background-size: cover;
		background-repeat:no-repeat;
		height: 120px;
  	}
  	.leftcol, .rightcol{width: 100%}
  	.services, .eventsummary, .eventrow {width: 98%}
	.eventsummary{
		max-width: inherit;
		padding: 0;
	}
	.footer #nav{
		height: 172px;
		background-color:#000;
	}
	.footer #nav *{
		text-align: center;
		float: none;
	}
	iframe{width: 98%}
	.gtable{
		display: block;
		width: 100%;
	}
	.gtr, .gtd {
		display: inline-block;
		height: auto;
	}
	.gtd{
		float: left;		
		width: 50%;
		text-align: center;
	}
	.church-gallery, .churches-on-gallery .church_menu_box {width: 100%}
	.pag_bar {width: 95%}
	.event_filter_box{
		width: 96%;
		margin: 20px 1%;
		padding: 1%;
	}
	.footer #nav{z-index:auto}
}