/*normal size range, from phone to ipad portrait*/
@media only screen and (min-width : 570px) and (max-width : 768px) {
/*@media only screen and (min-width : 631px) and (max-width : 768px) {*/
	
	#wrap {
		width: 92%;
		margin: 0;
		padding: 0;
	}
	
	
	
	
	/*Header, All Divs*/
	
		div#header {

		}
		
			div#header_left {
				width: 71%;
			}
			
				div#header_left h1 img {
					width: 100%;
					height: auto;
					margin-top: 19px;
				}
			
			div#header_right {
				width: 29%;
				margin-top: 20px;
			}
			
				div#subpage_section_head {
					margin-left: 0;
				}
				
					div#subpage_section_head img {
						display: inline;
					}

					div#subpage_section_head h2 {
						display: inline;
					}
					
				#header_right h2.menu-button {
					display: block;
					float: right;
					clear: both;
					margin: 6px 0 0 0;
					padding: 0;
					cursor: pointer;
				}
				
				div#top_nav {
					display: none; /*hides the menu, but other functionality will display the menu when the mobile menu button is clicked*/
					float: right;
					width: 200px;
					margin: 25px 0 25px 100px;
					padding: 0;
					background-color: #5378bc;
					clear: both;
				}
				
					div#top_nav ul {
						width: 100%;
						margin: 0;
						padding: 0;
					}
					
						div#top_nav ul li {
							display: block;
							width: 100%;
							font-size: 2.2em;
							color: #fff;
							border-right: none;
							border-bottom: 2px solid #fff;
							padding: 0;
							margin: 0;
							text-align: center;	
						}
						
							#top_nav ul li a {
								width: 100%;
								padding: 10px 0;
								margin: 0;
								display: block;
							}
					


	/*content divs*/
	

		img.header_image {
			display: none;
		}
		
		div#homepage-right {
			float: none;
			width: 100%;
		}
		
			div#homepage-right img {
				margin-left: auto;
				margin-right: auto;
				display: block;
			}
			
			h3#tagline {
				
			}
			
				span.smaller-tagline-text {
					
				}
				
					span.smallest-tagline-text {
						
					}
		
		
		div#homepage-left {
			float: none;
			width: 100%;
			margin-left: 0;
			margin-right: 0;
		}
		
			div#homepage-left img {
				margin-left: auto;
				margin-right: auto;
				display: block;
			}
		
			#content h2 {
				text-align: center;
				margin-left: 0;
			}
			
			
			/*homepage carousel styles*/
	
			div.carousel {
				float: none;
				margin-left: auto;
				margin-right: auto;
				display: block;
			}
	
	
			div.carousel-inner-container {
				float: none;
				margin-left: auto;
				margin-right: auto;
				display: block;
			}
	
				
				/*styles for the navigation buttons, used the info on this very helpful page for starting reference: 
				http://shhdesign.co.uk/blog/implementing-and-styling-owl-carousel/*/
	
					.owl-prev, .owl-next {
						position: relative;
						display: block; 
						margin-left: auto;
						margin-right: auto;
						margin-top: 0;
						margin-bottom: 0;
						top: -208px;
					}
	
					.owl-next {
						right: -200px; /*placement for the "next" button to the right of the carousel*/
						margin-top: -50px;
						margin-bottom: 0;
					}
	
					.owl-prev {
						left: -200px; /*placement for the "prev" button to the left of the carousel*/
						margin-top: 0;
						margin-bottom: 0;
					}
	
					/*hover styles for the previous and next buttons, if using a transparent button, can become opaque when hovering with this, or can change the level of opacity*/
	
					.owl-prev:hover, .owl-next:hover {
						
					}
	
	


		
	/*footer--all divs*/
		
		
		
		div#footer {
			
		}
		
			div#social_media {
				
			}
			
				div#social_media p {
					
				}
				
				div#social_media img {
					
				}
		
			div#bottom_nav {
				
			}
				
				div.communities {
					text-align: left;
					width: 100%;
					margin-left: 50px;
				}
				
				div.tutorials {
					text-align: left;
					width: 100%;
					margin-left: 50px;
				}
				
				div.materials {
					text-align: left;
					width: 100%;
					margin-left: 50px;
				}
				
				div.research {
					text-align: left;
					width: 100%;
					margin-left: 50px;
				}
				
					div#bottom_nav p {
						font-size: 3.2em;
						font-weight: bold;
					}
			
			div#footer_logos {
				
			}
			
				div#footer_logos img, div#footer_copyright, div#footer_logos img#rightmost-logo {
					margin-left: auto;
					margin-right: auto;
					margin-bottom: 50px;
					display: block;
					float: none;
					clear: both;
					padding: 0;
				}
				
				
				
			/*homepage partner logo styles*/
			
			div.footer-partner-logos {
				margin: 0 0 0 0;
			}
			
			div.footer-partner-logos img, div.footer-partner-logos img.rightmost-partner-logo {
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 50px;
				display: block;
				float: none;
				clear: both;
				padding: 0;
			}
	
	
}







/*normal iPhone range:*/
/*@media only screen and (min-width : 200px) and (max-width : 480px)*/
/*@media only screen and (min-width : 200px) and (max-width : 630px) {*/

@media only screen and (min-width : 200px) and (max-width : 569px) {
		
	#wrap {
		width: 90%;
	}
	
		#container {
			margin-top: 20px;
		}
	
	
	
	
	/*Header, All Divs*/
	
		div#header {
			margin-top: 0;
		}
		
			div#header_left {
				width: 100%;
			}
			
				div#header_left h1 img {
					width: 100%;
					height: auto;
					margin-bottom: 20px;
				}
			
			div#header_right {
				clear: both;
				width: 90%
			}
			
				div#subpage_section_head {
					float: left;
					margin-top: 15px;
				}
				
					div#subpage_section_head img {
						
					}

					div#subpage_section_head h2 {
						
					}
					
				#header_right h2.menu-button {
					display: block;
					float: left;
					clear: both;
					cursor: pointer;
					margin-right: 15px;
					margin-bottom: 20px;
				}
				
				div#top_nav {
					display: none; /*hides the menu, but other functionality will display the menu when the mobile menu button is clicked*/
					float: left;
					width: 200px;
					margin: 0 25px 15px 0;
					padding: 0;
					background-color: #5378bc;
					clear: none;
				}
				
					div#top_nav ul {
						width: 100%;
						margin: 0;
						padding: 0;
					}
					
						div#top_nav ul li {
							display: block;
							width: 100%;
							font-size: 1.6em;
							color: #fff;
							border-right: none;
							border-bottom: 2px solid #fff;
							padding: 0;
							margin: 0;
							text-align: center;
						}
						
							#top_nav ul li a {
								width: 100%;
								padding: 10px 0;
								margin: 0;
								display: block;
							}
		
		
		
	/* content divs */
	
	
		
		img.header_image {
					display: none;
				}
				
				div#homepage-right {
					float: left;
					width: 97%;
				}
				
						div#homepage-blocks {
							float: none;
							margin-left: auto;
							margin-right: auto;
							display: block;
							width: 75%;
						}
					
							div#homepage-blocks img {
								float: none;
								margin-left: auto;
								margin-right: auto;
								display: block;
								width: 100%;
								height: auto;
							}
						
					h3#tagline {
						float: left;
						margin-left: 0;
						width: 97%;
						height: auto;
					}
					
						span.smaller-tagline-text {
							
						}
						
							span.smallest-tagline-text {
								
							}
				
							
				div#homepage-left {
					float: left;
					width: 97%;
					margin-left: 0;
					margin-right: 0;
				}
				
					div#homepage-left img {
						float: left;
						margin-left: 0;
						margin-right: 0;
					}
				
				
					#content h2 {
						text-align: left;
					}
					
					
					/*homepage carousel styles*/
	
	
					div.carousel {
						float: left;
						width: 97%;
						height: auto;
						margin-right: 0;
						margin-bottom: 0;
					}
					
		
					div.carousel-inner-container {
						float: left;
						width: 97%;
						height: auto;
						margin-right: 0;
						margin-bottom: 0;
					}
					
						div.carousel-inner-container img {
							width: 97%;
							height: auto;
							margin-right: 0;
							margin-bottom: 0;
						}
		
						
						/*styles for the navigation buttons, used the info on this very helpful page for starting reference: 
						http://shhdesign.co.uk/blog/implementing-and-styling-owl-carousel/*/
		
							.owl-prev, .owl-next {
								position: absolute;
								display: block; 
								margin-left: auto;
								margin-right: auto;
								margin-top: 0;
								margin-bottom: 0;
								top: 35%;
							}
		
							.owl-next {
								right: 10%; /*placement for the "next" button to the right of the carousel*/
								margin-top: 0;
								margin-bottom: 0;
								margin-right: 0;
							}
		
							.owl-prev {
								left: 4%; /*placement for the "prev" button to the left of the carousel*/
								margin-top: 0;
								margin-bottom: 0;
							}
		
							/*hover styles for the previous and next buttons, if using a transparent button, can become opaque when hovering with this, or can change the level of opacity*/
		
							.owl-prev:hover, .owl-next:hover {
								
							}

		
		/*footer--all divs*/
		
		
		
		div#footer {
			
		}
		
			div#social_media {
				
			}
			
				div#social_media p {
					
				}
				
				div#social_media img {
					
				}
		
			div#bottom_nav {
				
			}
				
				div.communities {
					text-align: left;
					width: 100%;
					margin-left: 0;
				}
				
				div.tutorials {
					text-align: left;
					width: 100%;
					margin-left: 0;
				}
				
				div.materials {
					text-align: left;
					width: 100%;
					margin-left: 0;
				}
				
				div.research {
					text-align: left;
					width: 100%;
					margin-left: 0;
				}
				
					div#bottom_nav p {
						font-size: 3.2em;
						font-weight: bold;
					}
			
			div#footer_logos {
				
			}
			
				div#footer_logos img, div#footer_copyright, div#footer_logos img#rightmost-logo {
					margin-left: auto;
					margin-right: auto;
					margin-bottom: 50px;
					display: block;
					float: none;
					clear: both;
					padding: 0;
				}
				
				
			/*homepage partner logo styles*/
				
			div.footer-partner-logos {
				margin: 0 0 0 0;
			}
			
			div.footer-partner-logos img, div.footer-partner-logos img.rightmost-partner-logo {
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 50px;
				display: block;
				float: none;
				clear: both;
				padding: 0;
			}		
	
}