/*
Theme Name: Pride & Groom
Theme URI: https://www.square22.com/
Author: Dan Bacon
Author URI: https://www.square22.com/
Description: Theme for Pride & Groom.
Version: 1.2
License: GNU General Public License v2 or later
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/



/* WORDPRESS START */

	.widget li { list-style: none; }
	.hidden { display:none; }



/* WORDPRESS END */

	body {
		font-family:'Open Sans', sans-serif;
		font-size:11pt;
		margin:0px;
		padding:0px;
		}

		a { text-decoration:none; outline:none; }

		.100_image {
			width:100px;
			}


	.page_width {
		position:relative;
		margin:0 auto !important;
		width:1100px;
		}

	.mobile_hide { display:block !important; }
	.mobile_show { display:none !important; }


	.divider {
		position:relative;
		text-align:center;
		width:100%;
		margin:30px auto;
		border-bottom:1px solid #e4e4e4;
		}



/* NAVIGATION */

	#nav {
		display:block;
		z-index:999;
		width:100%;
		margin-bottom:15px;
		}

	nav {
		background:#5cc7d3;
		z-index:999;
		width:100%;
		}

		.nav_contact {
			padding:8px;
			padding-bottom:15px;
			font-size:12pt;
			color:white;
			text-align:center;
			background: url('images/ripped.png') no-repeat bottom center;
			width: 100%;
			background-size: 100% auto;
			box-sizing: border-box;
			}


		.nav_logo { display: block; float:left; width:40%; background:none; box-sizing: border-box; }

			.logo {
				position:relative;
				display:block;
				height:80px;
				width:auto;
				padding:15px 0;
				}

		.nav_menu {
			display: block;
			float:left;
			width:60%;
			background:none;
			text-align:right;
			}

		.nav_mobile_icon {
			position:relative;
			display:none;
			font-size:24pt;
			text-align:right;
			float:left;
			width:50%;
			box-sizing: border-box;
			padding-right:3%;
			}

			.nav_mobile_icon a { text-decoration:none; padding-right:5%; outline:none; color:#ffffff; }

		.nav_menu ul {
			position:relative;
			padding:0px;
			margin:0 auto;
			list-style:none;
			}

			.nav_menu ul li {
				display:inline-block;
				padding:0;
				}

			.nav_menu ul li a {
				color:#ffffff;
				font-size:20pt;
				text-decoration:none;
				margin-left:15px;
				font-family: 'Satisfy', cursive;
				font-weight:300;
				}





	#nav {
		position:relative;
		z-index:999;
		width:100%;
		}

		.nav_contact {
			padding-top:15px;
			padding-bottom:30px;
			font-size:13pt;
			color:white;
			text-align:center;
			background: url('images/ripped.png') repeat-x bottom center;
			width: 100%;
			box-sizing: border-box;
			}

			.nav_contact a { color:white; display:block-inline; }

			.nav_contact_show { display:none; }
			.nav_contact_hide { display:inline-block; }

			@media only screen and (max-width: 600px) {
				.nav_contact_hide { display:none; }
				.nav_contact_show { display:inline-block !important; }
				}

		.header_panel {
			display:flex;
			justify-content:space-between;
			flex-wrap:wrap;
			box-sizing: border-box;
			flex-direction:row;
			align-items: center;
			}

			.nav_logo {
				position:relative;
				width:30%;
				background:none;
				box-sizing: border-box;
				}

				.logo {
					position:relative;
					display:block;
					width:100%;
					height:auto;
					}

			.nav_menu {
				position:relative;
				width:70%;
				background:none;
				text-align:right;
				}

				.nav_mobile_icon {
					position:relative;
					display:none;
					font-size:24pt;
					text-align:right;
					float:left;
					width:40%;
					box-sizing: border-box;
					padding-right:3%;
					}

					.nav_mobile_icon a { text-decoration:none; padding-right:5%; outline:none; color:#14a8b2; }



		.nav_menu ul {
			position:relative;
			padding:0px;
			margin:0 auto;
			list-style:none;
			}

			.nav_menu ul li {
				display:inline-block;
				padding:0;
				}

			.nav_menu ul li a {
				color:#14a8b2;
				font-size:20pt;
				text-decoration:none;
				margin-left:15px;
				font-family: 'Satisfy', cursive;
				font-weight:300;
				}





	@media only screen and (max-width: 600px) {

		.nav_logo { width:60%; padding-left:3%; }

		.nav_menu { width:100%; display:none; }

		.nav_mobile_icon { display:block; }

		.nav_menu ul {
			position:relative;
			display:block;
			background:#ffffff;
			align:right;
			padding:0px;
			margin:0px;
			line-height:normal;
			text-align:left;
			height:auto;
			line-height:normal;
			padding-bottom:10px;
			}

			.nav_menu ul li {
				display:block;
				margin:0px;
				padding:5px;
				background:none;
				height:auto;
				line-height:normal;
				}

				.nav_menu ul li a {
					height:auto;
					line-height:normal;
					font-size:16pt;
					}

	}


	.hero_image { display:block; margin-bottom:50px !important; }
		.hero_image img { display:block; width:100%; }

	.page_content {
		color:#1d1d1d;
		padding-top:30px;
		padding-bottom:30px;
		}

		.page_content h1 { font-family: 'Satisfy', cursive; margin:0px; padding:0px; margin-bottom:10px; font-weight:300; font-size:26pt; color:#14a8b2; letter-spacing:-1px; }
		.page_content h2 { font-family: 'Satisfy', cursive; margin:0px; padding:0px; margin-bottom:10px; font-weight:300; font-size:18pt; }
		.page_content h3 { font-family: 'Satisfy', cursive; margin:0px; padding:0px; margin-bottom:10px; font-weight:300; font-size:18pt; }
		.page_content h4 { font-family: 'Satisfy', cursive; margin:0px; padding:0px; margin-bottom:10px; font-weight:300; font-size:18pt; }

		.page_content_inner { padding-right:30px; }

	@media only screen and (max-width: 600px) {

		.page_content_inner { padding-right:0px; }

	}


	.callout_box {
		position:relative;
		background:url('images/paws.png') no-repeat #00b5c0 top right;
		clip-path: polygon(0 14%, 100% 0%, 100% 89%, 0% 100%);
		padding:60px 0;
		color:white;
		margin-top:60px;
		margin-bottom:20px;
		}

		.services {
			display:flex;
			justify-content:space-between;
			flex-wrap:wrap;
			box-sizing: border-box;
			flex-direction:row;
			align-items: center;
			}

		.service {
			position:relative;
			width:31%;
			display:flex;
			justify-content:space-between;
			flex-wrap:wrap;
			box-sizing: border-box;
			flex-direction:row;
			align-items: center;
			}

			.service_image {
				width:23%;
				margin-right:2%;
				}

			.service_text {
				width:75%;
				font-family: 'Satisfy', cursive;
				font-weight:300;
				font-size:17pt;
				color:#c2f3f6;
				}


@media only screen and (max-width: 600px) {

	.callout_box {
		position:relative;
		background:url('images/paws.png') no-repeat #00b5c0 top right;
		clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
		padding:50px 0;
		margin:50px 0;
		color:white;
		}

		.service {
			width:100%;
			}

}



	.testimonial {
	 	position:relative;
	 	margin:0 auto;
	 	text-align:center;
	 	margin-bottom:70px;
		background:url('images/paws2.png') no-repeat #c2f3f6 center right;
		clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
		margin-top:30px;
		margin-bottom:70px;
		color:#00b5c0;
		font-size:13pt;
	 	}

	 	.testimonial-inner {
			padding:50px 0;
			width:60%;
			margin:0 auto;
	 		}

	 		.testimonial-inner h3 {
				font-family: 'Satisfy', cursive;
				font-weight:300;
				font-size:17pt;
	 			}

	@media only screen and (max-width: 600px) {

		.testimonial {
			}

	}



		.prices {
			display:flex;
			justify-content:flex-start;
			flex-wrap:wrap;
			box-sizing: border-box;
			flex-direction:row;
			}

			.prices_box {
				position:relative;
				width:31%;
				margin:1%;
				text-align:left;
				background:url('images/paw1.png') no-repeat #c2f3f6 bottom right;
				color:#00b5c0;
				display:block;
				box-sizing: border-box;
	 			}

	 			.prices_box_inner {
	 				padding:15px;
					box-sizing: border-box;
		 			}

					.prices_box_inner h3 {
						font-family: 'Satisfy', cursive;
						font-weight:300;
						font-size:17pt;
						margin:0px;
						padding:0px;
						}

					.prices_box_inner p {
						margin:0px;
						padding:0px;
						margin-top:10px;
						}




	.profiles {
		display:flex;
		justify-content:space-between;
		align-items:flex-start;
		flex-wrap:wrap;
		box-sizing: border-box;
		flex-direction:row;
		padding-top:80px;
		padding-bottom:80px;
		}

	.profiles2 {
		display:flex;
		justify-content:space-between;
		align-items:flex-start;
		flex-wrap:wrap;
		box-sizing: border-box;
		flex-direction:row;
		}

		.profile {
			position:relative;
			width:23.5%;
			text-align:center;
			}

			.profile::after {
				content: '';
				flex: auto;
				}

		.profile2 {
			position:relative;
			width:18%;
			text-align:center;
			margin-bottom:30px;
			}

			.profile2::after {
				content: '';
				flex: auto;
				}

			.profile_image {}

			.profile_text {
				margin-top:10px;
				text-align:center;
				}

			.profile_name {
				font-family: 'Satisfy', cursive;
				font-size:17pt;
				margin-top:10px;
				color:#14a8b2;
				text-align:center;
				}

				.gallery_link {
					font-family: 'Satisfy', cursive;
					font-size:17pt;
					color:#14a8b2;
					}



	@media only screen and (max-width: 600px) {

		.profile { width:100%; margin-bottom:30px; }

	}



	.footer {
		position: relative;
		background: url('images/footer.png') no-repeat top center #00b5c0;
		width: 100%;
		background-size: 100% auto;
		color:white;
		padding:0px;
		margin:0px;
		border:0px;
		}

		.footer h2 { font-family: 'Satisfy', cursive; margin:0px; padding:0px; margin-bottom:10px; font-weight:300; font-size:26pt; color:#ffffff; letter-spacing:-1px; margin-top:30px; }

		.footer a { font-family: 'Satisfy', cursive; margin:0px; padding:0px; margin-bottom:10px; font-weight:300; font-size:16pt; color:#ffffff; }

		.footer img { display:block; float:right; width:70%; }


	@media only screen and (max-width: 600px) {

		.footer img { display:block; align:center; width:50%; }

	}





		div.wpcf7 {
			margin-top:30px;
			border-top:1px solid #e4e4e4;
			padding-top:10px;
			}

		.wpcf7 label {
			font-size:13pt;
			}

		.wpcf7 p {
			margin:14px 0;
			}

			.wpcf7-form-control-wrap {
				display:block;
				margin-top:10px;
				}

			.wpcf7-form-control {
				font-family:verdana;
				width:100%;
				padding:10px;
				font-size:10pt;
				border:1px solid #b7b7b7;
			    box-sizing: border-box;
				}

				.wpcf7-textarea { height:100px; }

				.wpcf7-submit { background:#00b5c0; color:white; font-family:times; font-size:14pt; }

				div.wpcf7-mail-sent-ok { border:0px; padding:20px; background: #088d3f; color:white; font-size:14pt; }





	.copyright {
		position: relative;
		margin:10px 0;
		text-align:right;
		}

		.copyright a {
			font-size:8pt;
			letter-spacing:1px;
			text-transform:uppercase;
			color:#333333;
			}









/* RESPONSIVE */

	.section {
		clear: both;
		padding: 0px;
		margin: 0px;
		}

	.col {
		display: block;
		float:left;
		margin: 0;
		}
		.col:first-child { margin-left: 0; }

	.group:before,
	.group:after { content:""; display:table; }
	.group:after { clear:both;}
	.group { zoom:1; /* For IE 6/7 */ }

	.s12 {width: 100%;}
	.s11 {width: 91.66%;}
	.s10 {width: 83.33%;}
	.s9 {width: 75%;}
	.s8 {width: 66.66%;}
	.s7 {width: 58.33%;}
	.s6 {width: 50%;}
	.s5 {width: 41.66%;}
	.s4 {width: 33.33%;}
	.s3 {width: 25%;}
	.s2 {width: 16.66%;}
	.s1 {width: 8.333%;}


@media only screen and (max-width: 600px) {

	.content_box { padding-right:0px; }

	.col {  margin: 0; }

	.s1, .s2, .s3, .s4, .s5, .s6, .s7, .s8, .s9, .s10, .s11, .s12 { width: 100%; }

	.page_width {
		width:100%;
		}

	.prices_box {
		width:46%;
		margin:2%;
		}

	.mobile_width {
		width:100%;
		padding-left:3% !important;
		padding-right:3% !important;
		box-sizing: border-box;
		}

	.mobile_hide { display:none !important; }
	.mobile_show { display:block !important; }

}