@media only screen and (max-width:1140px) {
	
	.header { width:98%; padding:0 2%;}
	.wrapper { width:98%; padding:0 2%; }
	.blog { width:98%; }
	.template-layout { width:98%; }
	.template-layout img { width:100%; padding:10px; }
	.template-layout ul { justify-content:center; }
	.contact-directory { width:100%; }
	.contact-form { width:100%; padding:20px 0px;}
	.contact-directory li { padding:20px 4px; }
	.tags { width:48%; }
	.template-layout .desc-box { height:350px; }
	.preview-container { width:100%; }
	video { width:100%; }
	
}

@media only screen and (max-width:960px) {
	
	body { overflow-x:hidden; }
	.height-spacer { margin:120px 0px 0px 0px; }
	.logo { width:auto; height:65px; margin:0; }
	.main-nav {
		position:absolute;
		right:0px;
		height:100vh;
		top:0;
		background-color: rgba(0,0,0,0.95);
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		width:100%;
		transform:translateX(100%);
		transition:transform 0.5s ease-in;
	}
	.main-nav li { opacity:0; padding:30px 0px; }
	.burger { display:block; cursor:pointer; position:absolute; right:15px; top:15px; }
	.nav-active { transform:translateX(0%); }
	
	@keyframes navLinkFade {
		from { opacity:0; transform:translateX(50px); }
		to { opacity:1; transform:translateX(0px); }
	}

	.toggle .line1{ transform: rotate(-45deg) translate(-5px,11px); }	
	.toggle .line2{ opacity:0; }
	.toggle .line3{ transform: rotate(45deg) translate(-5px,-11px); }
	.cart-delete { display:none; }
	.cart-visible a { display:block; }
	.navbar-fixed-top { background-color: rgba(0,0,0,0.71); }
	.navbar-no-hero { padding:0px; height:75px; }
	.hero-text-box { width:90%; top:35%; }
	.clear-menu { display:block; }
	h3.description { width:100%; }
	.ordering { width:100%; }
	.feature-tags { width:100%; }
	.main-img { width:100%; }
	.testimonial-2 { margin-top:0px; }
	.testimonial p { font-size:150%; height:auto; }
	.lft { float:none; width:100%; height:270px; border-right:0px solid #000; margin-top:10px; padding:0px 30px; }
	.mdl { float:none; width:100%; height:270px; border-right:0px solid #000; margin-top:10px; padding:0px 30px; }
	.rgt { float:none; width:100%; height:270px; border-right:0px solid #fff; margin:10px 0px 30px 0px; padding:0px 30px; }
	.grey p { letter-spacing:1px;  }
	h2.body { font-size:130%; }
	h3.sml-text { text-align:center; }
	.service-img { width:100%; }
	ul.services li { width:100%; height:180px; }
	ul.services li.blk { background-color:#fff; }
	ul.services li p.title { margin:0px 0px 10px 0px; }
	ul.services li p.title-blk { color:#222; margin:0px 0px 10px 0px; }
	ul.services li p.details-blk { color:#222; }
	.rgt-side { float:none; width:100%; }
	.lft-side { float:none; width:100%; }
	.blog .rgt-blog p.title { width:150px; }
	.blog .rgt-blog p.details a,
	.blog .rgt-blog p.details a:visited { width:150px; }
	.contact-directory li { width:100%; }
	input[type=submit] { width:100%; }
	.template-layout .desc-box { height:324px; }
	
}

@media only screen and (max-width:900px) {
	.template-layout .desc-box { height:300px; }
}

@media only screen and (max-width:840px) {
	.template-layout .desc-box { height:285px; }
	.tags { display:block; width:70%; margin:0px auto 5px auto; }
}

@media only screen and (max-width:800px) {
	
	header {background-image:linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url(../img/working-dogs-960px.jpg); }
	h1.hero { font-size:210%; }
	h2.hero { font-size:110%; }
	h2.light { text-align:left; font-size:110%; }
	h2.body { font-size:130%; }
	h3 { text-align:left; font-size:110%; }
	h3.sml-text { font-size:120%; text-align:left; margin:0px 0px 40px 0px; }
	hr.sml { text-align:center; margin:10px auto; }
	.lft { padding:0px; height:auto;}
	.mdl { padding:0px; height:auto; }
	.rgt { padding:0px; height:auto; }
	hr.main { margin-top:40px; }
	.med-font { font-size:110%; }
	.grey p { font-size:110%; text-align:left; padding:0px 10px; }
	.mobile-br { display:none; }
	.spacing-br { padding-left:10px; }
	.add-br { display:inline-block; }
	.bottom-menu { display:none; }
	.preview-container { width:100%; padding:10px 0px 5px 0px; }
	.template-layout { width:100%; }
	.template-layout .rgt-side { float:none; width:100%; padding:0; }
	.template-layout .lft-side { float:none; width:100%; }
	.template-layout .rgt-side-lft { float:none; width:100%; padding:0; }
	.template-layout .lft-side-rgt { float:none; width:100%; }

}

@media only screen and (max-width:768px) {
	
	.intro { margin-bottom: 20px; }
	.box-1 { padding:5px 15px; font-size:27px; }
	.box-2 { padding:5px 15px; font-size:27px; }
	.box-3 { padding:5px 15px; font-size:27px; }
	.lft { margin-top:20px; }
	.mdl { margin-top:0px; }
	.rgt { margin:0px 0px 20px 0px; }
	.lg-font { font-size:140%; }
	ul.services li { width:100%; height:180px; }
	.blog .lft-blog { float:none; width:100%; border-right:0px; }
	.blog .lft-blog p.title { font-size:125%; margin-top:30px;}
	.blog .rgt-blog { float:none; width:100%; border:1px solid #777; margin:30px auto 0px auto; padding:10px; }
	.blog .rgt-blog p.title { width:120px; }
	.blog .rgt-blog p.details a,
	.blog .rgt-blog p.details a:visited { width:120px; }
	.btns { width:520px; }
	.btns .btn-go-back a:link,
	.btns .btn-go-back a:visited { width:240px; font-size:21px; }
	.btns .btn-buy-now a:link,
	.btns .btn-buy-now a:visited { width:240px; font-size:21px; }
	.preview-container { padding:5px 5px 0px 5px; }
	h3.description { font-size:90%; }
	[type=radio] + img.selectiontempl { display:block; width:98%; margin:2px auto; }
	.label-left { width:100%; display:block; margin:0 auto; }
	.blank-template-container { flex-direction: column; }
}

@media only screen and (max-width:640px) {
	
	header::before {background-image:linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url(../img/working-dogs-640px.jpg); }
	h1.hero { margin-bottom:20px; }
	h1.faq { font-size:500%; }
	h2.faq { font-size:140%; margin:-50px auto 15px auto; }
	h2.intro { font-size:120%; }
	h2.light { font-size: 110%; }
	hr.sml { margin:20px auto; }
	.med-font { font-size: 100%; }
	.lg-font { font-size: 130%; }
	h4 { font-size: 80%; }
	ul.services li { width:100%; height:180px; }
	ul.services li p.title { font-size:130%; }
	ul.services li p.title-blk { font-size:130%; }
	.blog .rgt-blog p.title { width:100%; }
	.btns { width:460px; }
	.btns .btn-go-back a:link,
	.btns .btn-go-back a:visited { width:210px; font-size:19px; }
	.btns .btn-buy-now a:link,
	.btns .btn-buy-now a:visited { width:210px; font-size:19px; }
	img.btm-image-1 { width:100%; height:auto; }
	img.btm-image-2 { width:100%; height:auto; }
	.preview-container .centered { font-size:21px; padding:15px 20px; font-weight:normal; }
	.grey p { font-size:95%; }
	.delete { display:none; }
	.add-br { display:none; }
	.top-title-order-form { max-width:480px; width:100%; font-size:32px; }
	.top-title-order-form .colored-pink { font-size:32px; }
	h1.preview { font-size:130%; }
	h2.preview { font-size:100%; }

}

@media only screen and (max-width:575px) {
	
	.mobile-br-575px { display:none; }
	.tags { width:90%; }
	.delete-tags { display:none; }
	h2.preview { font-size:90%; }
	.br-add-break { display:block; }
	
}

@media only screen and (max-width:540px) {
	
	.add-br-faq { display:block; }
	.br-break { display:none; }
	h1.preview { margin-top:15px; }
	[type=radio] + img.selectiontempl { width:77%; }
	.error-msg-layout { font-size:19px; }

}


@media only screen and (max-width:480px) {

	header {background-image:linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url(../img/working-dogs-480px.jpg); }
	.mobile-br-480px { display:none; }
	.spacing-br-480px { padding-left:10px; }
	.testimonial-2 img.center { width:100%; height:100%; }
	.testimonial img { width:100%; height:100%; }
	.testimonial p { font-size:150%; height:250px;}
	h1 { font-size:170%; }
	h1.preview { font-size:100%; }
	h2 { font-size: 110%; }
	h2.main { font-size:100%; padding:0px 10px;}
	h2.body { font-size:100%; padding:15px 0px; }
	h2.light { font-size: 100%; }
	h2.preview { text-align:left; }
	h3 { font-size:100%; }
	h3.sml-text { font-size:110%; margin:0px; }
	h1.faq { font-size:400%; }
	h2.faq { font-size:110%; margin:-30px auto 15px auto; }
	.grey p { padding:10px 0px; font-size:110%; letter-spacing:0; }
	img {width:100%; height:auto; }
	.hero-button:link { width:150px; margin:40px 10px 0px 0px; font-size:17px; padding:5px; }
	.responsive-hide { display:none; }
	ul.services li { width:100%; height:200px; }
	.template-layout { margin:30px auto 0px auto; }
	.template-layout p.title { font-size:130%; }
	.template-layout p.details { font-size:100%; }
	.template-layout .btn-see-more a { width:240px; padding:10px 0px; margin:40px 0px 20px 0px; font-size:100%; }
	.template-layout .btn-see-more-rgt a { width:240px; padding:10px 0px; margin:40px 0px 20px 0px; font-size:100%; }
	.blog .lft-blog .read-more a { width:280px; font-size:100%; }
	.blog .lft-blog p.title { font-size:110%; }
	.captcha { width:120px; }
	.btns { justify-content:center; width:100%; }
	.btns .btn-go-back a:link,
	.btns .btn-go-back a:visited { display:none; }
	.btns .btn-buy-now a:link,
	.btns .btn-buy-now a:visited { width:320px; margin:20px auto; }
	ul.bottom-nav { margin:40px auto 0px auto; }
	.add-br { display:block; }
	.contact-add-br { display:inline-block; }
	button { display:block; width:90%; margin:0px auto 5px auto; }
	#box { display:none; margin:25px auto 0px auto; }
	#box-resp { display:none; margin:25px auto 0px auto; }
	.top-title-order-form { max-width:320px; width:100%; font-size:27px; margin-bottom:15px; }
	.top-title-order-form .colored-pink { font-size:27px; margin-bottom:15px; }
}

@media screen and (max-width:415px) {
	
	h1 { font-size:140%; }
	.logo { width:auto; height:55px; margin-top:10px; }
	h2.main { font-size:90%; text-align:center; margin:20px 0px 20px 0px; }
}

@media screen and (max-width:375px) {
	
	.logo { width:auto; height:48px; }
	h2.body { font-size:100%; }
	h2.error { font-size:100%; }
	.ordering .purchase { margin:0 auto; float:none; }
	/*.ordering p.back a { display:none; }*/
	.preview-container .centered { font-size:17px; padding:10px 15px; font-weight:normal; }
	.xmed-font { font-size:130%; }
	h2.preview { font-size:90%; text-align:left; }
	.mobile-br-375px { display:none; }
	.template-layout p.title { text-align:center; margin:20px 0px; }
	.template-layout .desc-box { padding:0px 10px; }
	.text-rgt { text-align:left; }
	.template-layout .btn-see-more a { margin:40px auto 20px auto; float:none;}
	.template-layout .btn-see-more-rgt a { margin:40px auto 20px auto; float:none;}
	.top-title-order-form { max-width:310px; width:100%; font-size:27px; }
	.top-title-order-form .colored-pink { font-size:27px; }
	.ordering { flex-direction:column; margin:40px auto 40px auto; }
	input[type=submit].btn-order { width:240px; margin:0 auto; font-size:100%; float:none; }
	.ordering p.back a { margin:5px auto 0px auto; float:none; width:240px; font-size:100%; }
	input[type=submit].btn-layouts { width:240px; margin:0 auto; font-size:100%; float:none; }
}

@media screen and (max-width:357px) {
	
	.logo { width:auto; height:41px; }
}

@media screen and (max-width:320px) { 
	
	.responsiveWrapper { display:block; width:320px; min-width:320px; }
	nav { width:320px; min-weight:320px; }
	.hero-text-box { display:block; width:300px; min-width:300px; }
	.hero-button:link { width:240px; margin:15px 0px 0px 0px; font-size:21px; padding:5px; }
	.mobile-br-320px { display:none; }
	h1 { font-size:120%; margin-bottom:20px; }
	h1.hero { font-size:120%; }
	h2 { margin-bottom:30px; }
	h2.hero { margin:0px 0px 35px 0px; }
	h2.body { font-size:110%; }
	h2.dark { font-size: 100%; }
	h3 { font-size: 100%; }
	h3.sml-text { font-size: 100%; }
	.med-font { font-size: 110%; }
	.lg-font { font-size: 150%; }
	h4 { font-size: 60%; }
	.btn-lg:link,
	.btn-lg:visited { width:280px; padding:5px 5px; margin:20px auto 0px auto; }
	h2.testimonial-title { font-size:100%; }
	.testimonial p { font-size:120%; height:190px;}
	.grey p { font-size:90%; text-align:left; padding:5px 5px; }
	ul.services li { width:100%; height:220px; }
	.btns .btn-buy-now a:link,
	.btns .btn-buy-now a:visited { width:280px; margin:20px auto; }
	.top-title-order-form { max-width:280px; width:100%; font-size:23px; }
	.top-title-order-form .colored-pink { font-size:23px; }
}

/* Landscape Screen */

@media only screen and (max-device-width: 823px) and (orientation: landscape) {
	
	header { background-size: auto 100%; }
	.hero-button:link { margin:35px 10px 0px 0px; font-size:19px; padding:5px; }
	h1 { font-size:190%; }
	h2 { font-size:110%; }
	
}

@media only screen and (max-width: 667px) and (orientation: landscape) {
	
	.hero-button:link { width:150px; margin:20px 10px 0px 0px; font-size:17px;  }
	h2 { font-size:110%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
	h2.light { font-size:100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
	h3.center { font-size:100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
	h3.description { font-size:100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
	p.details { font-size:100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
	
}

@media only screen and (max-device-width: 568px) and (orientation: landscape) {
	
	.hero-button:link { margin:10px 10px 0px 0px;  }
	
}