/*HERO BANNER SLIDERS */
.hero, .hero-container	{ height: 625px; overflow: hidden; }
.hero-container		{ margin-bottom: 20px; }
.slide				{ position: relative; z-index: 0; }
.slide .hero-text, .slide img { position: absolute; }
.slide.active		{ z-index: 2; }
.slide.last-active	{ z-index: 1; }
.slide img			{ left: 50%; margin-left: -960px; top: -50px; }
.slide .hero-text	{ width: 500px; left: 50%; margin-left: -480px; text-align: left; top: 75px; }
.hero-text h1		{ margin-bottom: 1em; color: #fff; font-size: 6em; }

.features			{ padding-bottom: 40px; }
.features .highlight	{ margin-bottom: 0; padding-bottom: 0; }
.features .col		{ text-align: center; margin-right: 0; width: 23%;  padding: 2.5em 1% 1.5em 1%; transition: color 250ms, background-color 250ms; -webkit-transition: color 250ms, background-color 250ms; -moz-transition: color 250ms, background-color 250ms; -o-transition: color 250ms, background-color 250ms; -ms-transition: color 250ms, background-color 250ms;  }
.features .col:nth-child(4n+5) { clear: both; }
.features img		{ width: 100%; }
.features .button	{ font-size: 1.4em; background: #7e5fb8; }
.features .button:hover	{ background: #aa95cf; }
.features .button:active{ background: #5b3f8e; }
.style-title		{ font-size: 2em; color: #232323;
margin-bottom: .2em; font-weight: 700; }
.style-subtitle		{ font-size: 2em; color: #fff; margin-bottom: 0.4em; }
.features div.img-holder	{ width: 100%; overflow: hidden; margin-bottom: .5em; }


/* BLACK STRIP */


.traffic-lights			{ padding: 50px 0 50px; background: url('/images/home/friendly-dog-collar-traffic-light-system.jpg') no-repeat right top; }
.black-strip .exclaim	{ color: #fff; margin-bottom: 0.7em; }
.traffic-lights h2		{ font-size: 4em; font-weight: normal; }
.red-light				{ color: #EB0F6E; }
.orange-light			{ color: #EC7724; }
.green-light			{ color: #5FCE2A; }
.traffic-lights p		{ color: #8C8C8C; font-size: 1.6em; width: 345px; line-height: 1.5em; }

.description			{ padding-bottom: 2em; }
.description h1			{ margin-bottom: 1em; }
.photo-montage			{ margin-bottom: 40px; }
.photo-montage img		{ width: 20%; }

.divider				{ border-top: solid 1px #CCC; padding-top: 40px; }


/* LOGOUT POP UP */
.logout					{ background: rgba(0, 0, 0, .9); z-index: 9999; width: 480px; text-align: center; position: fixed; left: 50%; margin-left: -285px; top: 50%; margin-top: -120px; padding: 40px; display: none; }
.logout p				{ font-size: 3em; font-weight: 300; text-transform: capitalize; color: 
#fff; margin-bottom: 0; }



/* GREY STRIP */

.grey-strip				{ background: #515151; }
.grey-strip .exclaim	{ color: #fff; margin-bottom: 0.7em; }
.sizing					{ padding: 50px 0 40px; overflow: auto; }
.sizing section, .sizing img { margin-bottom: 20px; }
.sizing img				{ clear: both; }
.sizing h2				{ font-family: "GoodDog", sans-serif; font-size: 4em; font-weight: normal; padding-top: 0.4em; color: #fff; }
.sizing h3				{ color: #FFF; font-size: 1.6em; margin-top: 0.5em; }
.grey-strip p			{ color: #8C8C8C; font-size: 1.6em; line-height: 1.5em; }

.highlights .bodycopy	{ color: #777; }

.facebook-like			{ background: url('/images/home/facebook.png') no-repeat 40px 10px; padding-top: 140px; }
.fb-like				{ padding-left: 80px; }


/* MEDIA QUERIES */


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

	.slide .hero-text 		{ width: 60%; left: 5%; margin-left: 0; }
/*	.slide img 				{ left: -480px; }*/
	.facebook-like 			{ padding-top: 120px; background-size: 80%; }
	.features .col			{ width: 31%; }
	.features .col:nth-child(4n+5) { clear: none; }
	.features .col:nth-child(3n+4) { clear: both; }
	    

}

@media screen and (max-width: 767px) {
	.slide .hero-text		{ top: 35px; }
	.hero-text h1			{ font-size: 4em; margin-bottom: .5em; }
	.slide img				{ left: 0; width: 900px; margin-left: 0; }
	.hero, .hero-container	{ height: 265px; }
	

}


@media screen and (max-width: 567px) {
	.shopping				{ text-align: center; }
	.features .col			{ width: 48%; }
	.features .col:nth-child(2n+3) { clear: both; }
	.features .col:nth-child(3n+4) { clear: none; }
	.four-seventh			{ width: 100%; }
	.description h1			{ font-size: 3.5em; }
	.hero-container			{ margin-bottom: 20px; }
	.facebook-like			{ display: none; }
	.slide .hero-text 		{ width: 70%; }
}

@media screen and (max-width: 479px) {
	.slide img 				{ left: -330px; width: 1040px; }
	.hero, .hero-container 	{ height: 315px; }
	.style-title 			{ font-size: 3em; }
	.highlights .bodycopy { float: left; width: 62%; margin-left: 2%; }
}

@media screen and (max-width: 320px) {
	.style-title 			{ font-size: 2em; }
}