@media (min-width: 768px) and (max-width: 990px) {
    .navigation .navbar-brand {
      float: none; }
  	  
  #hero {
	width: 600px;  
  }
  #rowpic {
	width: 300px;
  }

  .hero-area h1 {
    font-size: 48px;
  }
}

@media (min-width: 300px) and (max-width: 768px) {
	.logo h1 {
    font-size: 18px;
	}
	.navigation {
		padding: 10px 0;
	}
	.navbar-toggleable-md .navbar-nav {
    margin-top: 4.5rem;
  }
  #hero {
	width: 380px;  
  }
  #rowpic {
	width: 380px;
  }
    #rowpiccontent {
	margin-top: 25px;
  }
  .hero-area h1 {
    font-size: 32px;
  }
  .hero-area.section {
  padding-top: 0px;
  }
}