@media (max-width: 320px) {
	#body{align-content: center;
			width:100%;
		text-align: center;
	}
	
	section{overflow:hidden;}
	
	#navbar{width:100%;}
	
	#navbar ul{padding: 5px 10px;
			width:100%;
			margin-right:1em;}
	
	h1{font-size: 15px;}
	
	  h2,h3{font-size:10px}
	
	p{font-size:8px;}
	
	#logo{align-items: center;
			width:40%;}
	
	#events ul li{text-align: left;}
	
	img{width:30px;
		height:25px;
	}
	
	.nav-collapse{width:100%;
		float:none;
	  margin: 10px auto;}
	  .js .nav-collapse {
    position: relative;
     }
     .js .nav-collapse.closed {
     max-height: none;
     }
    .nav-toggle {
     display: none;
     }  
	
	.a_display_left{ position: absolute;
		top:50%;
		left:0%;
		transform: translate(0%,-50%);
		-ms-transform:translate(-0%,-50%);
}

.a_display_right{ position: absolute;
		top:50%;
		right:0%;
		transform: translate(0%,-50%);
		-ms-transform:translate(0%,-50%);
}

.a_btn_floating{width:30px;
		height:30px;
		line-height:30px;
}

.a_display_left, .a_btn_floating{
	display:inline-block;
	text-align:center;
	color:#ffffff;
	background-color:#000000;
	padding:0;
	border-radius:50%;
	cursor:pointer;
	overflow:hidden;
	z-index:1;
	font-size:24px;
}
	
.mySlides{margin-left:2%;
		margin-right:2%;
		height:250px;
		width:200px;
	}

.slideshow{ margin:auto;
		position:relative;
}

  
}

@media (max-width: 480px) {
	#body{font-size:15px;
			width:100%;
	}

	section{overflow:hidden;}
	
	#screen1{
		background:url(pics/screen1.jpg) center center no-repeat; 
		background-size: cover;
		background-attachment: fixed;
		width:100%;
		
		}

	#screen2{background:url(pics/events1.jpg) center center no-repeat; 
		background-size: cover;
		background-attachment: fixed;
		width:100%;
		}

	#screen3{background:url(pics/gallery.jpeg) center center no-repeat; 
		background-size: cover;
		background-attachment: fixed;
		width:100%;
		}

	#screen4{background:url(pics/contact.jpeg) center center no-repeat; 
		background-size: cover;
		background-attachment: fixed;
		width:100%;
		}
	
	h1,h2,h3{font-size:20px;}
	p{font-size:15px;}
	
	#logo{width: 20%;
			height:10%;
			align-content: center;
	}
	
	#navbar{display:table; 
		background-size:100%;
		width:100%;
	}
	
	#navbar ul{width: 100%; 
		padding:15px;
	}
	
	#navbar ul li{
		display: block; 
		width: 100%; 
		text-align: center; 
		margin-left:5px;
	}
	#navbar li.first {margin-left: 0;}
	#navbar ul li:last-child { width: 100%; border-bottom: 0; }
	#navbar ul li a{
		text-decoration:none;
		padding: 10px;
		text-align: center;
	}
	
	#event ul li{font-size:18px;}
	
	img{width:50px;
		height:50px;}
	
	table{border-spacing:2px;
		font-size: 1em;}
	
	.form-settings{
		width:200px;
		
	}
	
	.form_settings input { 
		padding: 2px; 
  		width: 100px;  
	}
	.nav-collapse ul{
		 width: 100%;
	}
	.nav-collapse ul li{
		float: none;
		display: block; 
		width: 100%; 
		text-align: left; 
	}
	.nav-collapse ul li:last-child { width: 100%; border-bottom: 0; }
	.nav-collapse ul li a{
		text-decoration:none;
		padding: 10px;
	}
	
	.a_display_left{ position: absolute;
		top:50%;
		left:0%;
		transform: translate(0%,-50%);
		-ms-transform:translate(-0%,-50%);
}

.a_display_right{ position: absolute;
		top:50%;
		right:0%;
		transform: translate(0%,-50%);
		-ms-transform:translate(0%,-50%);
}

.a_btn_floating{width:30px;
		height:30px;
		line-height:30px;
}

.a_display_left, .a_btn_floating{
	display:inline-block;
	text-align:center;
	color:#ffffff;
	background-color:#000000;
	padding:0;
	border-radius:50%;
	cursor:pointer;
	overflow:hidden;
	z-index:1;
	font-size:24px;
}
	
.mySlides{margin-left:5%;
		margin-right:2%;
		margin-top:2%;
		height:300px;
		width:250px;
	}

.slideshow{ margin:auto;
		position:relative;
}

	
}

/*small tablet*/

@media (max-width: 640px) {
	#navbar{width:100%;
	}
	
	#body{font-size:15px;
			width:100%;
			margin-right:1em;
	}
	
	section{overflow:hidden;}
	
	#screen1{background:url(pics/screen1.jpg) center center no-repeat; 
		background-size: cover;
		background-attachment: fixed;
		width:100%;
	}

	#screen2{background:url(pics/events1.jpg) center center no-repeat; 
		background-size: cover;
		background-attachment: fixed;
	}

	#screen3{background:url(pics/gallery.jpeg) center center no-repeat; 
		background-size: cover;
		background-attachment: fixed;
		width:100%;
	
	}

	#screen4{background:url(pics/contact.jpeg) center center no-repeat; 
		background-size: cover;
		background-attachment: fixed;
		width:100%;
	}
	
	h1,h2,h3{font-size:1.5em;}
	p{font-size:1em;}
	
	#logo{width: 30%;
			height:15%;
			align-content: center;
	}
	
	#events ul li{
		font-size: 20px;
	}
	
	#navbar{display:table; 
		background-size:100%;
		width:100%;
	}
	
	#navbar ul{width: 100%; 
		padding:15px;
	}
	
	#navbar ul li{
		display: block; 
		width: 100%; 
		text-align: center; 
	}
	
	#navbar li.first {margin-left: 0;}
	#navbar ul li:last-child { width: 100%; border-bottom: 0; }
	#navbar ul li a{
		text-decoration:none;
		padding: 10px;
		text-align: center;
	}
	
	img{width:300px;
		height:250px;}
	
	table{border-spacing:2px;
		font-size: 1em;}
	
	.form-settings{
		width:200px;
		
	}
	
	.form_settings input { 
		padding: 2px; 
  		width: 150px;  
	}
	.nav-collapse ul{
		 width: 100%;
	}
	.nav-collapse ul li{
		float: none;
		display: block; 
		width: 100%; 
		text-align: left; 
	}
	.nav-collapse ul li:last-child { width: 100%; border-bottom: 0; }
	.nav-collapse ul li a{
		text-decoration:none;
		padding: 10px;
	}
	
	.a_display_left{ position: absolute;
		top:50%;
		left:0%;
		transform: translate(0%,-50%);
		-ms-transform:translate(-0%,-50%);
}

.a_display_right{ position: absolute;
		top:50%;
		right:0%;
		transform: translate(0%,-50%);
		-ms-transform:translate(0%,-50%);
}

.a_btn_floating{width:30px;
		height:30px;
		line-height:30px;
}

.a_display_left, .a_btn_floating{
	display:inline-block;
	text-align:center;
	color:#ffffff;
	background-color:#000000;
	padding:0;
	border-radius:50%;
	cursor:pointer;
	overflow:hidden;
	z-index:1;
	font-size:24px;
}
	
.mySlides{margin-left:20%;
		margin-right:2%;
		margin-top:3%;
		height:350px;
		width:400px;
	}

.slideshow{ margin:auto;
		position:relative;
}

}



/*iPad in portrait*/

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  
and (orientation : portrait) {
	
	#navbar{width:100%;
	}
	
	#body{font-size:20px;
			width:100%;
	}
	
	section{overflow:hidden;}
	
	#screen1{background:url(pics/screen1.jpg) center center no-repeat; 
		background-size: cover;
		background-attachment: scroll;
		width:100%;
	}

	#screen2{background:url(pics/events1.jpg) center center no-repeat; 
		background-size: cover;
		background-attachment: scroll;
		width:100%;
	}

	#screen3{background:url(pics/gallery.jpeg) center center no-repeat; 
		background-size: cover;
		background-attachment: scroll;
		width:100%;
	
	}

	#screen4{background:url(pics/contact.jpeg) center center no-repeat; 
		background-size: cover;
		background-attachment: scroll;
		width:100%;
	}
	
	/*h1,h2,h3{font-size:25px;}
	p{font-size:15px;}*/
	
	#logo{width: 25%;
			height:20%;
			align-content: center;
	}
	
	#navbar{display:table; 
		background-size:100%;
		width:100%;
	}
	
	#navbar ul{width: 100%; 
		padding:15px;
	}
	
	#navbar ul li{
		display: block; 
		width: 100%; 
		text-align: center; 
		margin-left:5px;
	}
	
	#navbar li.first {margin-left: 0;}
	#navbar ul li:last-child { width: 100%; border-bottom: 0; }
	#navbar ul li a{
		text-decoration:none;
		padding: 10px;
		text-align: center;
	}
	
	img{width:50px;
		height:50px;}
	
	/*table{border-spacing:2px;
		font-size: 1em;}
	
	.form-settings{
		width:200px;
		
	}
	
	.form_settings input { 
		padding: 2px; 
  		width: 100px;  
	}*/
	.nav-collapse ul{
		 width: 100%;
	}
	.nav-collapse ul li{
		float: none;
		display: block; 
		width: 100%; 
		text-align: left; 
	}
	.nav-collapse ul li:last-child { width: 100%; border-bottom: 0; }
	.nav-collapse ul li a{
		text-decoration:none;
		padding: 10px;
	
	}
	
	.a_display_left{ position: absolute;
		top:50%;
		left:0%;
		transform: translate(0%,-50%);
		-ms-transform:translate(-0%,-50%);
}

.a_display_right{ position: absolute;
		top:50%;
		right:0%;
		transform: translate(0%,-50%);
		-ms-transform:translate(0%,-50%);
}

.a_btn_floating{width:30px;
		height:30px;
		line-height:30px;
}

.a_display_left, .a_btn_floating{
	display:inline-block;
	text-align:center;
	color:#ffffff;
	background-color:#000000;
	padding:0;
	border-radius:50%;
	cursor:pointer;
	overflow:hidden;
	z-index:1;
	font-size:24px;
}
	
.mySlides{
		margin-right:10%;
		margin-top:3%;
		height:450px;
		width:550px;
	}

.slideshow{ margin:auto;
		position:relative;
}
}

/*iPad in landscape*/

@media only screen 
and (min-device-width : 1024px) 
and (max-device-width : 768px) 
and (orientation : landscape) { 
	#navbar{width:100%;
	}
	section{overflow:hidden;}
	#screen1{background:url(pics/screen1.jpg) center center no-repeat; 
		background-size: cover;
		background-attachment: scroll;
}

#screen2{background:url(pics/events1.jpg) center center no-repeat; 
		background-size: cover;
		background-attachment:scroll;
		width:100%;
}

#screen3{background:url(pics/gallery.jpeg) center center no-repeat; 
		background-size: cover;
		background-attachment: scroll;
		width:100%;
	
}

#screen4{background:url(pics/contact.jpeg) center center no-repeat; 
		background-size: cover;
		background-attachment: scroll;
		width:100%;
}
	
	
	#logo{width:50%;
			height:20%;
			align-content: center;
	}
	
	#navbar{display:table; 
		background-size:100%;
		width:100%;
	}
	
	#navbar ul{width: 100%; 
		padding:10px 10px;
	}
	
	#navbar ul li{
		display:inline-block; 
		width: 100%; 
		text-align: center;
	}
	
	#navbar li.first {margin-left: 2px;}
	#navbar ul li:last-child { width: 100%; border-bottom: 0; }
	#navbar ul li a{
		text-decoration:none;
		padding: 10px 0 10px 0;
		text-align: left;
	}
	
	
	.nav-collapse ul{
		 width: 100%;
	}
	.nav-collapse ul li{
		float: none;
		display: block; 
		width: 100%; 
		text-align: left; 
	}
	.nav-collapse ul li:last-child { width: 100%; border-bottom: 0; }
	.nav-collapse ul li a{
		text-decoration:none;
		padding: 10px;
	
	}
	
		.a_display_left{ position: absolute;
		top:50%;
		left:0%;
		transform: translate(0%,-50%);
		-ms-transform:translate(-0%,-50%);
}

.a_display_right{ position: absolute;
		top:50%;
		right:0%;
		transform: translate(0%,-50%);
		-ms-transform:translate(0%,-50%);
}

.a_btn_floating{width:30px;
		height:30px;
		line-height:30px;
}

.a_display_left, .a_btn_floating{
	display:inline-block;
	text-align:center;
	color:#ffffff;
	background-color:#000000;
	padding:0;
	border-radius:50%;
	cursor:pointer;
	overflow:hidden;
	z-index:1;
	font-size:24px;
}
	
.mySlides{
		margin-right:10%;
		margin-top:3%;
		height:450px;
		width:550px;
	}

.slideshow{ margin:auto;
		position:relative;
}

	
}