@charset "utf-8";
@import url(animations.css);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800);

/* -----------------------------------------------------

* Filename: styles.css
* Description: master external style sheet for Paws 'N Critters web site
* Version: 1
* Website: https://pawsncritters.com
* Author: Automatit, Inc

== ANCHOR =========================================

	@reset				Standard Reset

-------------------------------------------------------*/

/* @reset
-------------------------------------------------------*/
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td {margin: -5px; padding: 0;}
html {height: 100%; overflow-y: scroll;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;}
img {border: 0; -ms-interpolation-mode: bicubic;}
a {outline: none;}

/* @general
------------------------------------------------------*/
body {margin: 0 auto; padding: 0; background: #fff; height: 100%; width: 100%; position: relative;}
body, select, input {font: 14px 'Open Sans', sans-serif; color: #000;}

/* @typography
------------------------------------------------------*/
a, visited {text-decoration: underline; color: #ea1e3a;}
a:hover {text-decoration: none;}

h1 {font: 700 34px 'Open Sans', sans-serif; color: #ea1e3a; margin-bottom: 20px; text-shadow: 1px 1px 1px #5C5C5C;}
h2 {font: 300 30px 'Open Sans', sans-serif; color: #404041;}
h3 {font: 600 18px 'Open Sans', sans-serif; color: #ea1e3a; margin: 5px 0;}

ul, ol {margin:0; padding: 10px 0;}
li {display:list-item; margin: 0 0 5px 25px;}

/* @defined classes
------------------------------------------------------*/
.clearFloat {clear:both; height:0; font-size:1px;}

.disclaimer {font-size: 12px; color: #ea1e3a;font-style: italic; font-weight: 700; text-align: center; padding: 1em 0 2em;}



/*------------------------------------------------------*/
header {width: 100%; overflow: hidden; text-align: center;}
	#header-content {width: auto; margin: 20px 0;}
	#logo {margin: 0 auto; width: auto;}
	#pull {display: none;}
nav {background-color: #ea1e3a; width: 100%; text-align: center; padding: 5px 0;}
	nav a {color: #fff; font: 300 17px 'Open Sans', sans-serif; text-decoration: none; margin: 0 1%; transition: all 0.5s ease; border-radius: 8px; display: inline-block;}
		nav a.nav-item:hover {background-color: #404041; margin: 0; padding: 3px 1%;}
	nav a.btn-pay {border: 1px solid #fff; padding: 2px 8px; transition: all 0.5s;}
		nav a.btn-pay:hover {background-color: #404041;}
		nav li {list-style: none; display: inline; margin: 0; position: relative;}
			nav li ul {display: none; position: absolute; top: 100%; padding: 5px 0; z-index: 5; width: 200px; left: 0; margin-top: 4px;}
			nav li:hover > ul {display: block;}
			nav li ul li {display: block;}
			nav li ul li a {width: auto; display: block; text-align: left; background: #ea1e3a; padding: 10px 5%; margin: 0; border-radius: 0; color: #fff; transition: none; font-size: 12px;}
			nav li ul li a:hover {background: #404041; margin: 0; padding: 10px 5%;}
#phone-number {background-color: #404041; color: #fff; text-align: center; padding: 5px 0;}
	#phone-number .city-number {width: 20%; display: inline-block; margin: 0 5%;}
	#phone-number .city {font-size: 14px; display: inline-block; margin-right: 3%;}
		#phone-number .city a {color: #fff;}
	#phone-number .number {font-size: 20px; display: inline-block;}

/* Home Page */
header.home {background: url(../images/bg-header.jpg) no-repeat center; background-size: cover; height: 600px;}
	#header-home {width: 280px; margin: 40px 0 0 50%; background: url(../images/bg-header-home.png) no-repeat center; background-size: 100% 100%; padding: 20px 100px;}
	#header-home #logo {width: 100%; height: auto;}
	#slogan {width: 100%; text-transform: uppercase; color: #404041; font-size: 24px; margin: 30px 0; position: relative;}
		#slogan-eyes {position: absolute; top: 55px; left: 55px;}
			#slogan-eyes .eyeballs {width: 25px; height: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; float: left; margin-right: 18px;}
			#slogan-eyes .eye { width: 10px; height: 14px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
		#slogan .looking {color: #ea1e3a; font-weight: bold; font-size: 52px; display: block; clear: both;}
		#slogan .for-you {font-weight: 300; font-size: 59px; display: block;}
		#slogan .we-looking {font-size: 33px; display: block; border-top: 3px solid #404041;}
		#slogan .out-for-them {color: #ea1e3a; font-weight: 600; font-size: 32px; border-bottom: 3px solid #404041; display: block;}
	#view-prices {background: -webkit-linear-gradient(top, rgba(0,0,0,0.30), transparent); background: -moz-linear-gradient(top, rgba(0,0,0,0.30), transparent); background: -ms-linear-gradient(top, rgba(0,0,0,0.30), transparent); width: auto; border-radius: 5px; padding: 2%; margin: 5px auto; width: 80%; transition: all 0.5s;}
		#view-prices .btn-prices {background-color: #ea1e3a; color: #fff; text-decoration: none; font-size: 600; font-size: 23px; padding: 5px 0; width: 100%; border-radius: 5px; display: inline-block; transition: all 0.5s;}
		#view-prices:hover {background: #fff;}
			#view-prices .btn-prices:hover {text-shadow: 1px 1px 8px rgba(0,0,0,0.80);}
#servicesBg {background-color: #e1e2e3; padding: 15px 0; width: 100%; margin: 10px auto;}
	#services {width: 900px; margin: 0 auto; text-align: center;}
	#services .service {width: 30%; height: 270px; border: 1px solid #a1a3a6; border-radius: 5px; font-weight: 300; font-size: 22px; color: #404041; display: inline-block; vertical-align: top; position: relative; margin: 0 1%; transition: all 0.5s;}
		#services .service:hover {border: 1px solid #ea1e3a;}
		#services #pet-sitting.service {background: #fff url(../images/bg-pet-sitting.png) bottom no-repeat;}
		#services #overnight.service {background: #fff url(../images/bg-overnights.png) bottom no-repeat;}
		#services #pet-boarding.service {background: #fff url(../images/elissa.png) bottom no-repeat;}
	#services .btn-prices {background-color: #ea1e3a; display: block; color: #fff; text-decoration: none; font-weight: 600; font-size: 19px; border: 1px solid #fff; border-radius: 5px; margin: 0 20%; width: 60%; bottom: 20px; position: absolute; transition: all 0.5s;}
		#services .btn-prices:hover {background-color: #404041;}
#certifications {text-align: center; width: 900px; margin: 20px auto;}
	#certifications .logo {width: 17%; font-weight: 300; font-size: 16px; display: inline-block; vertical-align: top; margin: 0 1%; text-decoration: none; color: #404041;}
		#bbb-logo {padding: 6px 0 0 0;}
	#certifications .logo-img {display: block; margin: 5px auto;}
		#certifications .logo:hover .logo-img {-webkit-animation: tossing 2s infinite; -moz-animation: tossing 2s infinite; -o-animation: tossing 2s infinite; animation: tossing 2s infinite;}
	#certifications .clearFloat {padding: 15px 0;}
	#certifications .header-line {background-color: #cbcdce; height: 1px; width: 30%; display: inline-block; vertical-align: top; margin: 20px 1%;}
	#certifications h2.and {display: inline-block;}
	#certifications ul {text-align: left; width: 45%; display: inline-block; vertical-align: top;}
		#certifications ul li {list-style-image: url(../images/check-mark.png); font-weight: 300; font-size: 18px;}
#find-zip-bg {background-color: #e1e2e3; width: 100%; padding: 15px 0;}
	#find-zip {width: 900px; margin: 0 auto;}
	#find-zip .find-zip-text {width: 36%; text-align: center; font-size: 17px; padding: 0 2%; float: left;}
	#find-zip .search-zip {width: 34%; float: left;}
		#find-zip .search-zip .zip {border: 0; font-size: 16px; padding: 2%; width: 76%; float: left;}
		#find-zip .search-zip .search {border: 0; color: #fff; font-weight: bold; font-size: 18px; background-color: #ea1e3a; width: 16%; padding: 2%; float: left;}
	#find-zip .search-result {float: right; width: 25%; border-left: 1px solid #464646; text-align: center;}
		#find-zip .search-result span {color: #C9C9C9; font-weight: bold; font-size: 26px; text-shadow: 1px 2px 1px #fff; margin: 0 5%;}
		#find-zip .search-result .yes.active {color: #43D146;}
		#find-zip .search-result .no.active {color: #CD2426;}
		#find-zip .no-text {clear: both; text-align: right; font-weight: 600; margin-top: 10px; color: #E40003; display: none;}
#consultation {background-color: #ea1e3a; width: 100%; border-top: 5px solid #e1e2e3; border-bottom: 5px solid #e1e2e3;}
	#consultation-form {width: 900px; margin: 0 auto; background: url(../images/bg-consultation.png) no-repeat right bottom; text-align: center; padding: 10px 0;}
	#consultation-form h2 {color: #fff; font-size: 30px; font-weight: normal; margin-bottom: 5px;}
	#consultation-form .disclaimer {color: #fff;}
	#contact-info {width: 35%; float: left; margin-left: 20%; visibility: visible;}
		#contact-info input, #contact-info select {width: 98%; display: block; margin-bottom: 10px; padding: 5px 1%; box-shadow: 1px 2px 1px rgba(66,66,66,0.40); background-color: #fff; color: #4D4D4D; font-weight: 300; font-size: 16px; border: 0; text-align: center;}
	#contact-message {width: 28%; margin: 0 1%; float: left; visibility: visible;}
		#contact-message .message {width: 98%; display: block; height: 195px; font: 300 16px 'Open Sans', sans-serif; padding: 1%; border: 0; box-shadow: 1px 2px 1px rgba(66,66,66,0.40); background-color: #fff; color: #4D4D4D;}
		#consultation-form input:focus, #consultation-form select:focus, #consultation-form textarea:focus {box-shadow: 0 0 5px rgba(0,0,0,0.70);}
	.btn-login {background-color: #404041; color: #fff; text-decoration: none; font-weight: 600; font-size: 19px; border: 1px solid #fff; border-radius: 5px; margin: 0 20%; transition: all 0.5s; padding: 5px 3%; box-shadow: 0 0 5px #747474;}
		.btn-login:hover {background-color: #ea1e3a;}
	.send {color: #000; font: 600 16px 'Open Sans', sans-serif; border: 0; background-color: #ffec00; padding: 5px 10px; border-radius: 5px; margin: 20px auto; box-shadow: 1px 3px 4px rgba(0,0,0,0.30)}
	#consultation-form .success, #consultation-form .error {background-color: #fff; padding: 5px 10px; border-radius: 5px;}
	.success {color:green;} .error{color:red;} .loading {background-image: url(../images/loading.gif); background-position:center center;background-repeat:no-repeat; width: 270px; height: 34px;}
	#ajax-message {margin: 20px auto 5px auto; display: block;}


/* Internal Pages */
#content {width: 900px; margin: 25px auto; min-height: 70%;}
#contactlocbtn {position: absolute; width: 110px; height: 32px; background-color: #ea1e3a; margin-top: 2%; margin-left: 21%; border-radius: 7px; box-shadow: gray 2px 2px 2px; color: #ffffff; font-weight: 700; text-align: center; padding-top: 10px; font-size: 16px;}

#consultation_disclaimer {box-sizing: border-box; margin-top: 30px;}
#consultation_disclaimer h3 {color: #404041}
#consultation_disclaimer .disclaimer {padding: 0; color: #404041; font-size: 14px;}

.reviews_disclaimer {font-style: italic;padding: 0 0 3em 0;}

/* Team Page */
#content.team_page .about_team_wrapper {margin-bottom: 20px}
#content.team_page .bio-images {float: left; width: 150px; margin-right: 3%;}
#content.team_page .bioPic {margin: 0 auto; width: 100%; box-shadow: 1px 2px 2px #868686; border: 2px solid #ea1e3a; border-radius: 5px;}
#content.team_page .certPic {width: 110%; margin: 5px auto; height: auto; display: block;}
#content.team_page .divider {clear: both; background-color: #7A7A7A; height: 1px; width: 80%; margin: 40px auto;}
#content.team_page i {display: block; margin-top: 15px; color: #ea1e3a; font-style: italic;}

footer {background-color: #414141; text-align: center; padding: 20px 0;}
	footer a {color: #fff; text-decoration: none; font-weight: 300; font-size: 16px; margin: 0 1%;}
	footer a:hover {text-decoration: underline;}