@media screen and ( min-width: 320px ) {
    .top-banner {
	    background: 	url('https://info.msasecurity.net/hubfs/MSA-Homepage-8-5-19.png') no-repeat center 130px fixed;
	}
}
@media screen and ( min-width: 480px ) {

    header {
        height:    		167px;
	}
	header .logo {
		width:			249px;
		height:			95px;
	}
	.top-banner {
        background: 	url('https://info.msasecurity.net/hubfs/MSA-Homepage-8-5-19.png') no-repeat center 167px fixed;
	    padding-top: 	167px;
	}
	.subpage-banner {
	    background-position: center 167px;
	    padding-top: 	167px;
	}
	.top-banner-text-container {
		width:			533px;
		max-width:		70%;
	}
	ul.j4 li {
	    width:			98%;
	    text-align:		left;
	}
	ul.j5 li {
	    width:			48%;
	    text-align:		left;
	}
	ul.col4 li {
	    width:			48%;
	    text-align:		left;
	}
	.social {
		padding:		40px 0 50px;
	}
	.social aside ul li {
		display:		inline;
		margin-right:	18px;
	}
	.social aside input[type="text"] {
		width:			60%;
	}
	.footer aside {
		width:			45%;
	}
}

@media screen and ( min-width: 600px ) {

	.home-callouts {
		margin:			60px 0 30px 0;
	}
	.home-callouts .callout-right {
		width:			100%;
		max-width:		100%;
		height:			auto;
	}
	.home-callouts .callout-right h1 {
		margin:			30px;
		padding:		0;
		color:			#FFFFFF;
		font-size:		24px;
		line-height:	28px;
		font-weight:	800;
	}
	.home-callouts .callout-right p {
		margin:			0 30px 30px 30px;
		padding:		0;
		color:			#FFFFFF;
		font-size:		14px;
		line-height:	30px;
		font-weight:	800;
	}

	.home-callouts h3 {
		margin:			0;
	}
	.home-callouts h4 {
		margin:			10px 0;
	}
	.home-callouts ul {
	    list-style:		none;
	    text-align: 	justify;
	    margin:			0;
	    padding:		0;
	    width:			100%;
	}
	.home-callouts ul li {
	    display: 		inline-block;
	    width:			47%;
	    vertical-align: top;
	    text-align:		left;
	    margin:			0 0 20px;
	}
	.home-callouts ul li p {
		font-size:		18px;
		line-height:	24px;
		margin:			0;
	}
	.home-callouts ul:after {
	    content: 		"";
	    width: 			100%;
	    display: 		inline-block;
	}

	.mobile-nav ul {
	    width: 		48%;
	}
	ul.j2 li {
	    width:			48%;
	    text-align:		left;
	}
	ul.j3 li {
	    width:			48%;
	    text-align:		left;
	}
	ul.j4 li {
	    width:			48%;
	    text-align:		left;
	}
	ul.j5 li {
	    width:			31%;
	}
	ul.col2 li {
	    width:			48%;
	    text-align:		left;
	}
	ul.col3 li {
	    width:			48%;
	    text-align:		left;
	}
	ul.col4 li {
	    width:			48%;
	    text-align:		left;
	}
	.footer aside {
		width:			30%;
	}
	h1 {
		font-size:		24px;
		line-height:	28px;
	}
	h2, h3 {
		font-size:		20px;
		line-height:	26px;
	}
	h4, h5 {
		font-size:		18px;
		line-height:	22px
	}
	p {
		font-size:		16px;
		line-height:	23px;
	}
	p.large {
		font-size:		20px;
		line-height:	28px;
	}
	h1 {
		font-size:		32px;
		line-height:	36px;
	}
	h2 {
		font-size:		28px;
		line-height:	32px;
	}
	h3, h4 {
		font-size:		22px;
		line-height:	26px;
	}
}

@media screen and ( min-width: 768px ) {

	.home-callouts .callout-right {
		float: 			right;
		width:			30%;
		max-width:		361px;
		height:			670px;
		margin:			0 10px 0 0;
	}
	.home-callouts ul {
	    width:			66%;
	}
	.home-callouts ul li {
	    width:			49%;
	}
	.home-callouts ul li p {
		font-size:		18px;
		line-height:	22px;
		margin:			0;
	}

	.home-middle h1 {
		padding: 		40px 0 80px;
	}

	ul.j2 li {
	    width:			48%;
	    text-align:		left;
	}
	ul.j3 li {
	    width:			48%;
	    text-align:		left;
	}
	ul.j4 li {
	    width:			31%;
	}
	ul.j5 li {
	    width:			23%;
	}
	ul.col2 li {
	    width:			48%;
	    text-align:		left;
	}
	ul.col3 li {
	    width:			48%;
	}
	ul.col4 li {
	    width:			31%;
	}
	.contact {
		height:			416px;
	}
	.contact .page-constrain {
		height:			416px;
	}
	.social {
		padding:		80px 0 100px;
	}
	.social aside {
		float:			left;
		width:			48%;
		margin:			0 1%;
	}
	.contact h1 {
		display:		inline-block;
		margin:			0 50px 0 0;
	}
	.footer aside {
		width:			26%;
		padding:		0;
	}
	.footer aside.footer-links {
		width:			50%;
	}
	.footer aside.footer-links ul li.separator {
		margin:			0 10px;
	}
	h1 {
		font-size:		30px;
		line-height:	24px;
	}
	h2, h3 {
		font-size:		24px;
		line-height:	28px;
	}
	h4, h5 {
		font-size:		18px;
		line-height:	22px;
	}
	p {
		font-size:		18px;
		line-height:	26px;
	}
	p.large {
		font-size:		24px;
		line-height:	32px;
	}
	h1 {
		font-size:		48px;
		line-height:	54px;
	}
	h2 {
		font-size:		36px;
		line-height:	42px;
	}
	h3, h4 {
		font-size:		24px;
		line-height:	28px;
	}
	.dog-name {
		width:			100%;
		height:			625px;
		background:		#beaa94 url("//cdn2.hubspot.net/hubfs/91068/images/new/bg_dog_name.jpg") top right no-repeat;
		position:		relative;
	}
	.dog-name .dog-name-content {
		position:		absolute;
		top: 			70px;
		left:			70px;
		width:			40%;
		min-width:		280px;
	}
}


@media screen and ( min-width: 980px ) {
	ul.j2 li {
	    width:			48%;
	}
	ul.j3 li {
	    width:			31%;
	}
	ul.j4 li {
	    width:			23%;
	}
	ul.j5 li {
	    width:			18%;
	}
	ul.j2 li {
	    width:			48%;
	}
	ul.j3 li {
	    width:			31%;
	}
	ul.j4 li {
	    width:			23%;
	}
	ul.j5 li {
	    width:			18%;
	}
}

@media screen and ( min-width: 1000px ) {
    header ul.top-menu,
	header ul.main-menu {
		display: 		block;
	}
	header .mobile-icons {
		display:		none;
	}

	header .top-search {
		display:		block;
		overflow:		hidden;
		width:			280px;
		height:			40px;
		position:		absolute;
		top:			60px;
		right:			20px;
		text-align:		right;
	}
	header .top-search #site-search-form {
		position:		absolute;
		width:			280px;
		left:			100%;
		transition:		all 0.6s ease 0s;
	}
	header .top-search.open #site-search-form {
		left:			0;
		transition:		all 0.6s ease 0s;
	}	
	header .top-search input[type="text"] {
		width:			200px;
		height:			30px;
		border:			1px solid #49545d;
		padding:		3px 10px;
		margin:			0 10px 0 0;
		font-size:		14px;
	}
	header .top-search img {
		display:		block;
		float:			right;
	}
	header .top-search.open img {
		display:		none;
	}

	.where-dogs-live .content-left {
		float:			left;
		height:			416px;
		width:			64%;
	}
	.where-dogs-live .content-left p {
		width:			75%;
		min-width:		200px;
	}
	.where-dogs-live .content-right {
		float:			left;
		height:			416px;
		width:			36%;
	}

}

@media screen and ( min-width: 1920px ) {
	.subpage-banner {
		width:			100%;
		height:			847px;
		background-color:		#ffffff;
		background-position:	center top;
		background-attachment:	fixed;
		background-size: 		cover;
		padding-top:	167px;
	}
}