/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (max-width: 319px) {
	#header {
		height: 180px;
	}
	.header-text h1 {
		font-size: 1.8em;
		margin-top: 10px;
	}
	#flexslider-1 h1 {
		margin-top: 0;
		font-size: 1.4em;
	}
}
/* Super Small Devices */
@media only screen and (min-width : 320px) and (max-width: 479px) {
	.tile11-generic h3 {
		font-size: 1.2em;
	}
	.tile11-generic h2 {
		font-size: 1.4em;
	}
	#header {
		height: 200px;
	}
	.header-text h1 {
	    margin-top: 10px;
	}
	#flexslider-1 h1 {
		margin-top: 0;
		font-size: 1.4em;
	}
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) and (max-width: 768px) {
	#header {
		height: 200px;
	}
}

/* Small Devices, Tablets */
@media only screen and (min-width : 767px) and (max-width: 991px) {
	.menu-right {
		float: right;
	}
	#header {
		height: 340px;
	}
	#collapse-menu > .menu > li > a {
		margin-left: -15px;
		font-weight: bold;
		font-size: 0.9em;
		color: #999;
	}
	#collapse-menu > .menu > li > a:before {
		content: "•";
		color:  #B9B9B9;
		margin-right: 10px;
	}
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) and (max-width: 1199px) {
	.tile11-generic h3 {
	 font-size: 1.3em;
	}
	.tile11-generic h2 {
	 font-size: 1.5em;
	}
	.menu-right {
		float: right;
	}
	#header {
		height: 400px;
	}
	.header-text h1 {
	    margin-top: 40px;
	}
	.tile p {
		font-size: 1em;
	}
	.tile h3 {
		font-size: 1.2em;
	}

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
	.menu-right {
		float: right;
	}
	#header {
		height: 450px;
	}
	.container {
	    width: 1120px;
	}
	.header-text h1 {
	    margin-top: 60px;
	}
	.tile-11,
	.tile-21 {
		max-height: 280px !important;
	}
	.tile-21 .tile {
		max-height: 280px !important;
	}
	.tile-22 {
		max-height: 560px !important;
	}

}

/* Custom rules */
@media only screen and (max-width : 480px) {
	.views-exposed-widgets .views-exposed-widget:last-child {
		margin-top: 10px;
		float: right !important;
	}
	.tile p {
		font-size: 3vw;
	}
	.tile h3 {
		font-size: 5vw;
		margin-top: 0;
	}
	.left,
	.right,
	.tile-22,
	.tile-11 {
		padding-left: 15px;
		padding-right: 15px;
	}
	#flexslider-1 p {
		display: none;
	}
	#flexslider-1 h1 {
		margin-bottom: 20px;
	}
	#getlocations_map_wrapper_key_1 {
		height: 300px !important;
	}
}
@media only screen and (max-width : 767px) {
	.navbar-nav {
	    margin: 0;
	}
	#flexslider-1 .slides img {
		margin-top: 0;
	}
	.menu li:first-child a {
		margin-left: 0;
	}
	.menu li a {
		margin-left: 0;
	}
	.menu > li > a:before {
		display: none;
	}
	.menu li:last-child a:before {
		display: none;
	}
	#collapse-menu {
		padding: 0;
	}
	#collapse-menu > ul > li > a {
		padding-left: 60px;
	}
	.dropdown > a.arrow:after {
		margin-top: 0;
	}
	.no-bullet {
		padding-left: 0 !important;
		border-left: none;
		margin-left: 0 !important;
	}
	#collapse-menu > .menu {
		float: left;
	}
	.header-text p {
	    display: none;
	}
	#collapse-menu > .menu {
	    margin-right: 0;
	}
	.super-nav-right ul li {
		padding: 10px 0;
	}
	.super-nav-right {
		padding: 10px 20px;
	}
	.getlocations_map_wrapper {
		padding: 0 40px;
	}
	.page-search #block-system-main {
		width: 100%;
	}
	.tile-21 p {
	    min-height: 0;
	}
	#collapse-menu > ul > li.last > a {
		margin-left: 0 !important;
		padding-left: 50px !important;
	}
}

@media only screen and (max-width : 992px) {
	.left:after,
	.before:after {
		display: none;
	}
	.tile-21:hover .left,
	.tile-21:hover .right,
	.tile-22:hover .left,
	.tile-22:hover .right {
		opacity: 1;
	}
	.tile-22:hover .left,
	.tile-22:hover .right {
		width: 50%;
	}
	.tile-21 {
		background: none;
	}
	.left {
		padding-top: 20px;
	}
	.views-field-field-section-colour-1 {
	    bottom: 0px;
	}
	#views-exposed-form-branches-block-1 {
		background-color: white;
		padding: 0px;
	}
	#edit-submit-branches {
		margin-left: 0 !important;
	}
	#search-block-form {
		margin-top: 20px;
	}
}