/* Styles */

body,html{ margin: 0; padding: 0; width: 100%; height: 100%; }
h1,h2,h3,h4,h5{ margin: 0; padding: 0; display: inline; font-weight: normal; }

#website_position{ width: 100%; }
#website{ width: 100%; float: left; overflow-x: hidden; }

#header{ width: 100%; display: inline-block;  float: left; position: relative; background-image: url(../images/header_bgloop.png); background-repeat: repeat; }
	#header_logotitle{ width: 98%; padding: 1%; min-height: 250px; height: auto; float: left; background-image: url(../images/header_dog.png); background-position: top right; background-size: 300px auto; background-repeat: no-repeat; }
		#header_logotitle img{ width: 80%; max-width: 1200px; margin: 20px 0; }
	#header_socialmedia{ width: auto; height: auto; position: absolute; bottom: 10px; left: 4%; font-size: 0; }
		#header_socialmedia img{ max-width: 40px; margin: 2px; padding: 0; }

#header_res{ width: 100%; display: none; float: left; position: relative; background-image: url(../images/header_bgloop.png); background-repeat: repeat; }
	#header_logo_res{ width:20%; float: left; }
		#header_logo_res img{ width: 100%; }
	#header_title_res{ width:60%; float: left; }
		#header_title_res img{ width: 100%; margin: 10% 0; }
	#header_dog_res{ width:20%; float: left; }
		#header_dog_res img{ width: 100%; }
	#header_res_socialmedia{ width: 94%; margin: 10px auto; padding: 0 3%; text-align: left; }
		#header_res_socialmedia img{ max-width: 40px; } 
	
#navigation{ width: 100%; float: left; background-color: #f29d73; text-align: center; font-size: 0; }
	.button{ width: 160px; padding: 15px 3%; display: inline-block; background-color: #f29d73; position: relative; height: auto; }
		
		
		.button a{ width: 100%; height: auto; float: left; }
		.button a:hover .button_graphic{ background-color: #fff; background-size: 80% 80%; }
		.button a:active .button_graphic{ background-color: #fff; background-size: 80% 80%; }
			
			/* Button graphics and text */
			.button_graphic{ width: 80px; height: 80px; margin: 0 40px ; float: left; border: 3px solid #fff; border-radius: 50%; background-repeat: no-repeat; background-size: 1% 1%; background-position: center center; }
			.button_text{ width:100%; height: auto; float: left; font-size: 18px; color: #fff; font-family: 'Averia Sans Libre', cursive; font-size: 24px; }
			
			/* Button graphic images */
			.button_paw{ background-image: url(../images/nav_paw.png); }
			.button_bone{ background-image: url(../images/nav_bone.png); }
			.button_collar{ background-image: url(../images/nav_collar.png); }
			.button_dog{ background-image: url(../images/nav_dog.png); }
			
			/* Dog Popups */
			.button_popup{ position: absolute; top: 0; height: 0; left: 0; right: 0; background-image: url(../images/dog1.png); background-size: 100% auto; }
			.button_popup2{ position: absolute; top: 0; height: 0; left: 0; right: 0; background-image: url(../images/dog2.png); background-size: 100% auto; }
			.button_popup3{ position: absolute; top: 0; height: 0; left: 0; right: 0; background-image: url(../images/dog3.png); background-size: 100% auto; }
			.button_popup4{ position: absolute; top: 0; height: 0; left: -0; right: 0; background-image: url(../images/dog4.png); background-size: 100% auto; }
			
			.button a:focus ~ .button_popup{ top: -160px; height: 160px; }
			.button a:focus ~ .button_popup2{ top: -140px; height: 140px; }
			.button a:focus ~ .button_popup3{ top: -160px; height: 160px; }
			.button a:focus ~ .button_popup4{ top: -160px; height: 160px; }
			
			.button_popup:hover{ top:-40px; height: 40px; }
			
#home{ width: 100%; float: left; background-image: url(../images/about_bgloop01.jpg); background-repeat: repeat-x; background-color: #7a7287; }
	#home_text{ width: 40%; margin: 10% 0 10% 10%; float: left; font-family: 'Love Ya Like A Sister', cursive; color: #fff; font-size: 24px; }
		#home_text h2{ font-size: 38px; }
	#home_pictures{ width:50%; margin: 8% 0; float:right; text-align: right; }
		#home_pictures img{ width: 100%; max-width: 800px; }

#about{ width: 100%; float: left; background-color: #f4e8c4; background-image: url(../images/about_pawsbgloop.png); background-repeat: repeat-x; background-position: bottom center; }
	#about_text{ width: 50%; margin: 10% 0 10% 5%; float: left; font-family: 'Love Ya Like A Sister', cursive; color: #544537; font-size: 24px; }
		#about_text h2{ font-size: 38px; }
	#about_pictures{ width:30%; margin: 10% 0 0 10%; float:left; text-align: right; }
		#about_pictures img{ width: 100%; max-width: 550px; }

#contact{ width: 100%; float: left; background-color: #f29d73; background-image: url(../images/about_pawsbgloop.png); background-repeat: repeat-x; background-position: bottom center; }
	#contact_text{ width: 39%; margin: 10% 1% 10% 10%; float: left; font-family: 'Love Ya Like A Sister', cursive; color: #fff; font-size: 24px; }
		#contact_text h2{ font-size: 38px; }
		#contact_text a{ color: #fff; }
	#contact_map{ width: 39%; margin: 10% 10% 10% 1%; float: left; }
		#map_frame{ width: 720px; height: 571px; position: relative; }
			#map_frame img{ width: 100%; z-index: 10; }
			#map_pos{ position: absolute; width: 75%; height: 68%; top:0; left: 0; right:0; bottom:0; margin: auto; z-index: 1; }
				.map-responsive{ overflow:hidden; padding-bottom:72%; position:relative; height:0; }
				.map-responsive iframe{ left:0; top:0; bottom:0; height:100%; width:100%; position:absolute; }
		
#gallery{ width: 100%; float: left; background-image: url(../images/about_bgloop01.jpg); background-repeat: repeat-x; background-color: #7a7287; }
	#gallery_content{ width: 80%; margin: 10%; float: left; font-family: 'Love Ya Like A Sister', cursive; color: #fff; font-size: 24px; }
		

#prices{ width: 100%; float: left; background-image: url(../images/about_bgloop01.jpg); background-repeat: repeat-x; background-color: #7a7287; }
	#prices_text{ width:80%; margin: 10% 10% 10% 10%; float: left; font-family: 'Love Ya Like A Sister', cursive; color: #fff; font-size: 24px; } 
#prices_textintro{ width:100%; float: left; font-family: 'Love Ya Like A Sister', cursive; color: #fff; font-size: 28px; margin: 30px 0 20px 20px; } 
		#prices_text h2{ font-size: 38px; }
		#priceslist{ width:100%; height: auto; float: left; margin-top: 4% 0; }
			#priceslist_row{ width: 80%; height: 50px; padding: 1%; float: left; }
#priceslist_left{ width: 45%; height: auto; padding: 1%; float: left; }
#priceslist_right{ width: 45%; height: auto; padding: 1%; float: left; }
				#priceslist_header{ width: 98%; height: auto; padding: 1%; float: left; }
				#priceslist_image{ width: 20%; float: left; }
					#priceslist_image img{ width:100%; min-width: 200px; }
				#priceslist_textbox1{ width: 80%; height:20px; float: left; position: relative; font-size: 16px; padding-right:10%;}
					#priceslist_textbox1_pos{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width:90%;  }
				#priceslist_textbox2{ width: 10%; float: left; position: relative; font-size: 16px; text-align: right; }
					#priceslist_textbox2_pos{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width:90%; height: 20%; }
				#priceslist_row h3{ display: inline; font-size: 26px; }
				#priceslist_row h4{ display: inline; font-size: 26px; }
			#prices_text_l{ width:48%; margin: 2% 2% 2% 0; float: left; }
			#prices_text_r{ width:48%; margin: 2% 0 2% 2%; float: left; }
			#prices_text_f{ width: 100%; margin: 2% 0 5% 0; float: left; font-size:20px; }

#grooming{ width: 100%; float: left; background-image: url(../images/about_bgloop01.jpg); background-repeat: repeat-x; background-color: #7a7287; }
	#grooming_text{ width: 40%; margin: 10% 0 10% 10%; float: left; font-family: 'Love Ya Like A Sister', cursive; color: #fff; font-size: 20px; }
		#grooming_text h2{ font-size: 38px; }
	#grooming_image{ width:50%; margin: 8% 0; float:right; text-align: right; }
		#grooming_image img{ width: 100%; max-width: 800px; }

.fadeeffect{ -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; }




/* Responsive Styles */
@media screen and (max-width: 1200px) {

#header{ display: none; }
#header_res{ display: inline-block } 

#button{ padding: 15px 1%; }

.button a:focus ~ .button_popup{ top: -160px; height: 160px; }
.button a:focus ~ .button_popup2{ top: -140px; height: 140px; }
.button a:focus ~ .button_popup3{ top: -160px; height: 160px; }
.button a:focus ~ .button_popup4{ top: -160px; height: 160px; }

#priceslist_image{ width: 30%; float: left; }
#priceslist_image img{ width:100%; min-width: 200px; }
#priceslist_textbox1{ width: 50%; float: left; height: 200px; position: relative; font-size: 18px; }
#priceslist_textbox2{ width: 20%; float: left; height: 200px; position: relative; font-size: 16px; text-align: right; }

}

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

#header_logo_res{ width:100%; float: left; text-align: center; }
	#header_logo_res img{ max-width: 400px; }
#header_title_res{ display: none; }
#header_dog_res{ width:100%; float: left; text-align: center; }
	#header_dog_res img{ max-width: 200px; }
#header_res_socialmedia{ padding: auto; text-align: center; }
.button{ padding: 15px 0%; }
.button_popup{ display: none; }
.button_popup2{ display: none; }
.button_popup3{ display: none; }
.button_popup4{ display: none; }


#home_text{ width: 94%; margin: 8% 3%; text-align: center; }
#home_pictures{ width: 100%; text-align: center; float: left; }
#home_pictures img{ width: 100%; }

#about_text{ width: 94%; margin: 8% 3%; text-align: center; }
#about_pictures{ width: 94%; margin: 8% 3%; text-align: center; float: left; }
#about_pictures img{ width: 100%; max-width: 800px; }

#priceslist_row{ width: 98%; height: auto; padding: 1%; float: left; }
#priceslist_image{ width: 100%; height: auto; float: left; text-align: center; margin-top: 2%; }
#priceslist_image img{ width:60%; height: auto; min-width: 2px; }
#priceslist_textbox1{ width: 100%; float: left; height: auto; position: relative; font-size: 18px; text-align: center; margin: 4% 0; }
#priceslist_textbox1_pos{ position: relative; float: left; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width:90%; height: 50%; }
#priceslist_textbox2{ width: 100%; float: left; height: auto; position: relative; font-size: 16px; text-align: center; margin: 0 0 4% 0; }
#priceslist_textbox2_pos{ position: relative; float: left; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width:90%; height: 50%; }
#prices_text_l{ width:98%; margin: 2% 0; float: left; }
#prices_text_r{ width:98%; margin: 2% 0; float: left; }
#prices_text_f{ width: 100%; margin: 2% 0 5% 0; float: left; }

#grooming_text{ width: 94%; margin: 8% 3%; text-align: center; }
#grooming_image{ width: 100%; text-align: center; float: left; }
#grooming_image img{ width: 100%; }

#grooming_text_content img{ width: 100%; margin: 4% 0; }

}

/* Map frame adaption */
@media screen and (max-width: 1500px) {
#map_frame{ width: 640px; height: 507px; }
}
@media screen and (max-width: 1300px) {
#map_frame{ width: 500px; height: 396px; }
}
@media screen and (max-width: 1100px) {
#contact_text{ width: 79%; margin: 10% 10% 1% 10%; }
#contact_map{ width: 79%; margin: 1% 10% 10% 10%; }
#map_frame{ width: 720px; height: 571px; }
}
@media screen and (max-width: 900px) {
#map_frame{ width: 500px; height: 396px; }
}
@media screen and (max-width: 600px) {
#map_frame{ width: 300px; height: 238px; }
	#priceslist_left{ width: 100%; }
#priceslist_right{ width: 100%; }
}