#dogs-hero{
	padding: 40px 0 25px;
	background-color: #efefef;
}
#dogs-hero h1{
	margin: 26px auto 5px !important;
    padding: 0 !important;
    color: #363b3c;
    font-size: 48px !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    text-align: center;
}
#dogs-hero h2 {
    margin: 0 auto 22px !important;
    padding: 0 0 22px !important;
    color: #777d7f;
    font-size: 22px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    text-align: center;
    letter-spacing: 6px;
    border-bottom: 6px solid #cdcdcd;
}
#dogs-hero h3 {
    margin: 0 auto 15px !important;
    padding: 0 !important;
    color: #5cb2cb;
    font-size: 32px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    text-align: center;
}

/* ANIMATIONS */

	@keyframes hoverCard{
		0%{
			transform: translateY(-20px);

			transition: .2s all ease-out;
			-webkit-transition: .2s all ease-out;
			-moz-transition: .2s all ease-out;
			-o-transition: .2s all ease-out;
		}
		50%{
			transform: translateY(-10px);

			transition: .2s all ease-out;
			-webkit-transition: .2s all ease-out;
			-moz-transition: .2s all ease-out;
			-o-transition: .2s all ease-out;
		}
		100%{
			transform: translateY(0px);

			transition: .2s all ease-out;
			-webkit-transition: .2s all ease-out;
			-moz-transition: .2s all ease-out;
			-o-transition: .2s all ease-out;
		}
	}

#dogs-main{

}
	#dogs-main .wp-block-group__inner-container{
		display: flex;
	    flex-direction: row;
		flex-wrap: wrap;
	}
	#dogs-main .dog-single-wrapper{
		margin: 0 20px 20px 0 !important;
	    padding: 0;
	    position: relative;
	    overflow: hidden;
	    flex-direction: column;
		flex-wrap: wrap;
	    flex: 0 1 calc(25% - 20px);
	    z-index: 99;
	    cursor: pointer;
	}
	.dog-single-wrapper:nth-child(4n){
		margin-right: 0 !important;
	}
	.dog-single-inner{
		margin: 0 !important;
		padding: 0 !important;
	}
	#dogs-main .dog-single-info h2{
		margin: 0 0 3px !important;
    	font-size: 18px !important;
    	font-weight: 700;
	}
	.dog-single-wrapper .dog-single-inner .dog-single-info{
		opacity: 0;
		visibility: hidden;
		height: 0;

		margin: 0 auto !important;
		padding: 15px !important;
		overflow: hidden;

		position: absolute;
		top: -50px;
		left: 0;
		right: 0;

		z-index: 1;

		transition: .2s ease-out all;
			-webkit-transition: .2s ease-out all;
			-moz-transition: .2s ease-out all;
			-o-transition: .2s ease-out all;
	}
		.dog-single-wrapper::after{
			content: "";
			opacity: .7;
			visibility: visible;
			position: absolute;
			top: 0px;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #222222d4;

			transition: .2s ease-out all;
				-webkit-transition: .2s ease-out all;
				-moz-transition: .2s ease-out all;
				-o-transition: .2s ease-out all;
		}
	
	/* DOG CARD BIO */
	.dog-card{
		margin: 0;
		display: flex;
	    flex-direction: row;
	    flex-wrap: wrap;
    	justify-content: space-between;
    	height: 100%;
	}
		.dog-card-bio{
			margin: 0;
			display: flex;
	    	flex-direction: column;
	    	flex: 0 1 calc(77% - 0px);
		}

	.dog-single-wrapper:hover{
		transition: .2s ease-out all;
			-webkit-transition: .2s ease-out all;
			-moz-transition: .2s ease-out all;
			-o-transition: .2s ease-out all;
	}
		.dog-single-wrapper:hover::after{
			content: "";
			opacity: 1;
			visibility: visible;
			top: 0px;
			width: 100%;
			height: 100%;

			transition: .2s ease-out all;
				-webkit-transition: .2s ease-out all;
				-moz-transition: .2s ease-out all;
				-o-transition: .2s ease-out all;
		}
		.dog-single-wrapper:hover .dog-single-inner .dog-single-info{
			animation: hoverCard 1s 1;
	    	animation-fill-mode: forwards;

			transition: .2s ease-out all;
				-webkit-transition: .2s ease-out all;
				-moz-transition: .2s ease-out all;
				-o-transition: .2s ease-out all;
		}

	/* SHOW SINGLE DOG INFO */
	@keyframes showAnimation {
	    5% {
	        box-shadow: 0px 0px 11px 3px #78a1a973;
	    }
	    55% {
	    	box-shadow: 0px 0px 18px 10px #78a1a9c2;
	    }
	}

	.dog-single-wrapper.show{
		flex: 0 1 calc(50% - 20px) !important;

		box-shadow: 0px 0px 11px 3px #78a1a973;

		animation: showAnimation infinite 4s;
			-webkit-animation: showAnimation infinite 4s;
			-moz-animation: showAnimation infinite 4s;
	}
		.dog-single-wrapper.show .dog-single-inner .dog-single-info{
			opacity: 1;
			visibility: visible;
			top: 0px;
			background-color: #e2edf0;
		    height: 100%;
		    width: 100%;
		    overflow-y: scroll;
		    z-index: 9;
		}
		.dog-single-wrapper.show .dog-single-inner .dog-single-info p{
			font-size: 14px;
			line-height: 1.25em;
			color: #363b3c !important;
		}
		#dogs-main .dog-single-wrapper.show .dog-single-inner .dog-single-info h2{
			margin: 5px 0 6px!important;
    		font-size: 20px !important;
			color: #363b3c !important;
		}
		.dog-single-wrapper.show .dog-single-inner .dog-single-info h3{
			margin: 15px 0 2px!important;
			padding: 8px 0 0!important;
			font-size: 16px;
			font-weight: 700;
			text-transform: uppercase;
			color: #646a6b;
			border-top: 2px solid #c8e0e7;
		}
		.dog-single-wrapper.show .dog-single-inner .dog-single-info ul{
			margin: 6px 0 10px !important;
			padding: 0 !important;
			list-style: none;
			z-index: 100;
		}
		.dog-single-wrapper.show .dog-single-inner .dog-single-info ul li{
			margin: 0 0 3px;
			padding: 0 0 0 10px;
			display: inline-block;
			position: relative;
			font-size: 14px;
			color: #363b3c !important;
			width: 100%;
			z-index: 120;
		}
		.dog-single-wrapper.show .dog-single-inner .dog-single-info ul li strong{
			color: #363b3cc4 !important;
		}
		.dog-single-wrapper.show .dog-single-inner .dog-single-info ul li::before{
			content: "";
			position: absolute;
			top: 8px;
			left: 0;
			width: 6px;
			height: 6px;
			background-color: #7f8485;
			border-radius: 50%;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				-o-border-radius: 50%;
		}
		.dog-single-info ul li a.owner-link,
		a.owner-link{
			position: relative;
			display: inline-block;
			z-index: 99;
		}
		.dog-single-info ul li a.owner-link em,
		a.owner-link em{
			font-style: normal !important;
			text-decoration: underline !important;
			color: #258da6!important;
		}
		.dog-single-info ul li a.owner-link::after,
		a.owner-link::after{
			content: "\f35d";

			padding-left: 1px;
			font-size: 12px;
			color: #258da6!important;

			display: inline-block;
		    font-style: normal;
		    font-variant: normal;
		    text-rendering: auto;
		    -webkit-font-smoothing: antialiased;
		    font-weight: 700;
		    font-family: "Font Awesome 5 Free";

		    transition: all .2s ease-out;
		    	-webkit-transition: all .2s ease-out;
		    	-moz-transition: all .2s ease-out;
		    	-o-transition: all .2s ease-out;
		}
		.dog-single-info ul li a.owner-link:hover em,
		.dog-single-info ul li a.owner-link:focus em{
			font-style: normal !important;
			text-decoration: none !important;
			color: #06657c !important;
		}
		.dog-single-info ul li a.owner-link:hover::after,
		a.owner-link:hover::after{
			color: #06657c !important;

			transform: translateX(2px);
				-webkit-transform: translateX(2px);
				-moz-transform: translateX(2px);
				-o-transform: translateX(2px);

			transition: all .2s ease-out;
		    	-webkit-transition: all .2s ease-out;
		    	-moz-transition: all .2s ease-out;
		    	-o-transition: all .2s ease-out;
		}

	/* DOG SINGLE GALLERY */
		.dog-single-gallery{
			margin: 0 12px 0 0 !important;
			padding: 0 !important;
			display: flex;
			flex-direction: column;
		    flex: 0 1 calc(23% - 12px);
		}
			.dog-single-gallery .lightbox{
				margin: 0 0 6px;
				padding: 0;
				height: auto !important;
				width: auto !important;
				overflow: hidden;

				transition: all .2s ease-out;
					-webkit-transition: all .2s ease-out;
					-moz-transition: all .2s ease-out;
					-o-transition: all .2s ease-out;
			}
				.dog-single-gallery .lightbox:last-of-type{
					margin-bottom: 0 !important;
				}
				.dog-single-gallery .lightbox img{
					padding: 4px;
					border: 1px solid #c0c7c8;

					transform: scale(1) rotate(0deg);
						-webkit-transform: scale(1) rotate(0deg);
						-moz-transform: scale(1) rotate(0deg);
						-o-transform: scale(1) rotate(0deg);

				    transition: all .2s ease-out;
						-webkit-transition: all .2s ease-out;
						-moz-transition: all .2s ease-out;
						-o-transition: all .2s ease-out;
				}
				.dog-single-gallery .lightbox:hover img{
					transform: scale(1.8) rotate(10deg);
						-webkit-transform: scale(1.8) rotate(10deg);
						-moz-transform: scale(1.8) rotate(10deg);
						-o-transform: scale(1.8) rotate(10deg);

					transition: all .2s ease-out;
						-webkit-transition: all .2s ease-out;
						-moz-transition: all .2s ease-out;
						-o-transition: all .2s ease-out;
				}

			.dog-single-wrapper .dog-single-inner + h2{
				opacity: .7;
				margin: 0 auto;
			    position: absolute;
			    top: 41%;
			    left: 0;
			    right: 0;
			    color: #fff;
			    font-size: 30px !important;
			    text-align: center;
			    z-index: 3;
			}
			.dog-single-wrapper:hover .dog-single-inner + h2{
				opacity: 1;
				height: auto;
			}
			.dog-single-wrapper.show .dog-single-inner + h2{
				opacity: 0;
				height: 0;
			}


/* POPUPS */
	.lightbox {
	    height: 90px;
	    width: 90px;
	}
	.img-popup {
	    position: fixed;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    background: rgba(38, 40, 52, 0.9);
	    text-align: center;
	    display: none;
	    z-index: 9999999999999;
	    animation: pop-in;
	    animation-duration: 0.5s;
	    -webkit-animation: pop-in 0.5s;
	    -moz-animation: pop-in 0.5s;
	    -ms-animation: pop-in 0.5s;
	}
	.img-popup img {
	    position: absolute;
	    top: 50%;
	    max-width: 100%;
	    max-height: 100vh;
	    display: inline-block;
	    transform: translate(-50%, -50%);;
	}
	.close-lightbox {
	    position: absolute;
	    top: 45px;
	    right: 20%;
	    padding: 0px 10px;

	    color: #fff;
	    font-size: 35px;
	    line-height: 45px;

	    border: 2px solid #fff;
	    border-radius: 50%;
	    	-webkit-border-radius: 50%;
	    	-moz-border-radius: 50%;
	    	-o-border-radius: 50%;
	    z-index: 99;
		cursor: pointer;
	    width: 55px;
	    height: 55px;
	}
	.lightboxfadeout{
	    animation: fadeout;
	    animation-duration: 0.5s;
	    -webkit-animation: fadeout 0.5s;
	    -moz-animation: fadeout 0.5s;
	    -ms-animation: fadeout 0.5s;
	}

	@keyframes pop-in {
	    0% {
	        opacity: 0;
	        transform: scale(0.1);
	    }
	    100% {
	        opacity: 1;
	        transform: scale(1);
	    }
	}

	@-webkit-keyframes pop-in {
	    0% {
	        opacity: 0;
	        -webkit-transform: scale(0.1);
	    }
	    100% {
	        opacity: 1;
	        -webkit-transform: scale(1);
	    }
	}

	@-moz-keyframes pop-in {
	    0% {
	        opacity: 0;
	        -moz-transform: scale(0.1);
	    }
	    100% {
	        opacity: 1;
	        -moz-transform: scale(1);
	    }
	}


	@keyframes fadeout {
	    100% {
	        opacity: 0;
	        transform: scale(0.1);
	    }
	    0% {
	        opacity: 1;
	        transform: scale(1);
	    }
	}

	@-webkit-keyframes fadeout {
	    100% {
	        opacity: 0;
	        -webkit-transform: scale(0.1);
	    }
	    0% {
	        opacity: 1;
	        -webkit-transform: scale(1);
	    }
	}

	@-moz-keyframes fadeout {
	    100% {
	        opacity: 0;
	        -moz-transform: scale(0.1);
	    }
	    0% {
	        opacity: 1;
	        -moz-transform: scale(1);
	    }
	}


#dogsGallery{
    margin: 0;
    padding: 32px 32px 62px !important;
    background-color: #475154;
    overflow: hidden;
}
#dogsGallery h2{
	margin: 0 auto 18px !important;
	padding: 0 !important;
	font-size: 32px !important;
	font-weight: 700 !important;
	text-align: center;
	color: #828282 !important;
}
#dogsGallery h2 span{
    margin: 0 0 0 7px;
    padding: 0 0 0 14px;
    display: inline-block;
    font-size: .9em;
    color: #ddd;
    border-left: 2px solid #515151 !important;
}

/* IMAGE SLIDER */
	.slider {
		margin: 0 auto!important;
	    padding: 15px 15px 0 15px;
	    max-width: 96%;
        background-color: #fff;

	    box-shadow: 8px 8px 17px 2px #242626eb;
		    -webkit-box-shadow: 8px 8px 17px 2px #242626eb;
		    -moz-box-shadow: 8px 8px 17px 2px #242626eb;
		    -o-box-shadow: 8px 8px 17px 2px #242626eb;

       	border-radius: 2px;
       		-webkit-border-radius: 2px;
       		-moz-border-radius: 2px;
       		-o-border-radius: 2px;
	}
	@media only screen and (min-width: 768px) {
		.slide-viewer {
			position: relative;
			overflow: hidden;
			height: 400px;
		}
	}
	.slide-group {
		width: 100%;
		height: 100%;
		position: relative;
	}
	.slide {
		display: block;
		height: 100%;
		position: relative;
		width: 100%;
	}
	@media only screen and (min-width: 768px) {
		.slide {
			display: none;
			position: absolute;
		}
	}
	.slide .slide-items {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.slide .slide-items img{
		border-radius: 15px;
	}
	@media only screen and (min-width: 768px) {
		.slide .slide-items {
			flex-wrap: nowrap;
		}
	}
	.slide .slide-items figure {
		margin: 0 0 0.75rem 0;
		
	}
	@media only screen and (min-width: 450px) {
		.slide .slide-items figure {
			width: 50%;
		}
	}
	@media only screen and (min-width: 768px) {
		.slide .slide-items figure {
			margin-bottom: 0;
		}
	}
	.slide .slide-items figure img {
		padding: 0.25rem;
		min-width: 100%;
	}
	.slide .slide-items figure figcaption {
		text-align: center;
	}
	.slide:first-child {
		display: block;
	}

		/********** BUTTONS **********/
		.slide-buttons {
			margin: 0 auto 15px !important;
			text-align: center;
		}
		@media only screen and (min-width: 768px) {
			.slide-buttons {
				padding: 0 0 6px;
				display: block;
				text-align: center;
			}
		}
		.slide-btn {
			margin: 0 15px 0 0;
			padding: 0;
			position: relative;
			display: inline-block;
			text-align: center;
			width: 22px;
			height: 22px;
			vertical-align: middle;
			background-color: #8dd0e475 !important;
			border: none !important;
			border-radius: 50%;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				-o-border-radius: 50%;

			transition:  all .2s ease-out;
				-webkit-transition:  all .2s ease-out;
				-moz-transition:  all .2s ease-out;
				-o-transition:  all .2s ease-out;
		}
		.slide-btn:last-of-type{
			margin-right: 0 !important;
		}
		.slide-btn .pointer{
			margin: 0 auto;
			position: absolute;
		    top: 7px;
			left: 0;
			right: 0;
			width: 8px;
			height: 8px;
			background-color: #fdfeff !important;

			box-shadow: 0px 0px 5px -1px #39778dba;
				-webkit-box-shadow: 0px 0px 5px -1px #39778dba;
				-moz-box-shadow: 0px 0px 5px -1px #39778dba;
				-o-box-shadow: 0px 0px 5px -1px #39778dba;

			border-radius: 50%;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				-o-border-radius: 50%;

			transition:  all .2s ease-out;
				-webkit-transition:  all .2s ease-out;
				-moz-transition:  all .2s ease-out;
				-o-transition:  all .2s ease-out;
		}
		.slide-btn.active,
		.slide-btn:hover {
			background-color: #8dd0e4b0 !important;
			cursor: pointer;

			transition:  all .2s ease-out;
				-webkit-transition:  all .2s ease-out;
				-moz-transition:  all .2s ease-out;
				-o-transition:  all .2s ease-out;
		}
		.slide-btn.active .pointer,
		.slide-btn:hover .pointer{
			background-color: #ffffff !important;
			transform: scale(1.6);
				-webkit-transform: scale(1.6);
				-moz-transform: scale(1.6);
				-o-transform: scale(1.6);

			transition:  all .2s ease-out;
				-webkit-transition:  all .2s ease-out;
				-moz-transition:  all .2s ease-out;
				-o-transition:  all .2s ease-out;
		}



@media all and (max-width: 1180px){
	.slide-viewer{
		height: 260px;
	}
}


@media all and (max-width: 1024px){
	.slide-viewer{
		height: 200px;
	}
}


@media all and (max-width: 768px){
	#dogs-hero {
    	padding: 20px !important;
	}
	#dogs-hero h1 {
	    margin: 0 0 22px!important;
	    padding: 0!important;
	    font-size: 30px!important;
	    font-weight: 700!important;
	    line-height: 1.25em!important;
	    text-align: left!important;
	    text-transform: none !important;
	}
	#dogs-hero h2 {
		margin: 0 0 20px!important;
		padding: 0 0 6px!important;
		font-size: 26px!important;
		font-weight: 700!important;
		line-height: 1.1em!important;
		text-align: left!important;
		letter-spacing: 0 !important;
		border-bottom: 3px solid #cdcdcd !important;
	}
	#dogs-hero h3{
		margin: 0 0 12px 0!important;
	    padding: 0!important;
	    font-size: 22px!important;
	    font-weight: 700!important;
	    text-align: left;
	    letter-spacing: 0 !important;
	}
	#dogs-main{
		padding: 20px !important;
	}
	#dogs-main .wp-block-group__inner-container{
		justify-content: center;
	}
	#dogs-main .dog-single-wrapper,
	.dog-single-wrapper.show{
		margin: 0 0 25px !important;
		flex: 0 1 100% !important;
		max-width: 100%!important;
	}
	#dogs-main .dog-single-wrapper:nth-child(2n){
		margin-right: 0 !important;
	}
	#dogs-main .dog-single-wrapper img{
		width: 100%;
    	height: auto;
	}
	.dog-card{
		display: inline-block !important;
	}
	.dog-single-gallery{
		display: inline-block !important;
	}
	.dog-single-gallery .lightbox{
		margin-bottom: 0 !important;
		display: inline-block !important;
		width: 75px !important;
		height: 75px !important;
	}
	.dog-single-wrapper.show .dog-single-inner .dog-single-info p{
		text-align: justify !important;
	}
	.dog-single-wrapper .dog-single-inner+h2{
    	margin: 0 auto !important;
    	padding: 0 !important;
    	top: 48%;
		text-align: center !important;
	    opacity: 1;
	}
	.dog-single-wrapper.show .dog-single-inner .dog-single-info h3{
		font-size: 16px !important;
	}
	.slider{
		padding: 15px 15px 5px 15px;
	}
	.slide-viewer{
		height: 590px;
		overflow: hidden;
	}
	.slide-btn{
		margin: 0 15px 10px 0;
		width: 40px;
		height: 40px;
	}
	.slide-btn .pointer{
		top: 12px;
		width: 16px;
		height: 16px;
	}
	.dog-single-gallery .lightbox{
		width: 48%!important;
    	height: 48%!important;
	}
	.dog-single-wrapper.show .dog-single-inner .dog-single-info p{
		font-size: 16px;
		line-height: 1.4em;
		text-align: left;
	}
	#dogs-main .dog-single-wrapper.show .dog-single-inner .dog-single-info h2 {
	    margin: 15px 0 6px!important;
	    padding: 0 !important;
	    font-size: 20px!important;
	    line-height: 1em !important;
	    color: #363b3c!important;
	}

}