/*--- font imports */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,700;0,800;1,500;1,700;1,800&family=Nunito:ital,wght@0,600;0,700;1,600;1,700&family=Oswald:wght@400;500&display=swap');

/* gutenberg to foundation */ 

.hidden { display: none; }
.grid-x { max-width: 1200px; }
.grid-x.full-width { max-width: 100%; }
.contain-to-grid { background: none; }
.clear { clear: both; }
.alignleft {float: left; padding: 0 20px 20px 0; }
.alignright {float: right; padding: 0 0 20px 20px; }
img.aligncenter { width: 100%; margin-bottom: 20px; }

.grid-x, .wp-block-group, .wp-block-columns {
	width: 100% !important;
	max-width: 1200px !important;
	margin: 0 auto;
}

.full-width, .wp-block-group.full-width, .wp-block-columns.full-width {
	max-width: 100% !important;
	width: 100%;
}

.max-600, .wp-block-group.max-600, .wp-block-columns.max-600 {
	max-width: 600px !important;
	width: 100%;
}

.max-800, .wp-block-group.max-800, .wp-block-columns.max-800 {
	max-width: 800px !important;
	width: 100%;
}

.max-1000, .wp-block-group.max-1000, .wp-block-columns.max-1000 {
	max-width: 1000px !important;
	width: 100%;
}

.max-1200, .wp-block-group.max-1200, .wp-block-columns.max-1200 {
	max-width: 1200px !important;
	width: 100%;
}

.max-1400, .wp-block-group.max-1400, .wp-block-columns.max-1400 {
	max-width: 1400px !important;
	width: 100%;
}


.grid-x.max-600, .grid-x.max-800, .grid-x.max-1000, .grid-x.max-1200, .grid-x.full-width {
	margin: 0 auto;
}

@media screen and (max-width: 62.4em){
	.grid-x.max-600, .grid-x.max-800, .grid-x.max-1000, .grid-x.max-1200, .grid-x.full-width {
		padding-left: 20px; 
		padding-right: 20px;
	}
	
	.wp-block-group, .wp-block-columns, .wp-block-atomic-blocks-ab-columns {
		padding-left: 20px;
		padding-right: 20px;
	}
}

.vc {
	display: table;
	margin-left: auto;
	margin-right: auto;
}

.vc-center {
	display: table-cell;
	vertical-align: middle;
}
.vc-bottom {
	display: table-cell;
	vertical-align: bottom;
}


/* colors and elements */

.blue { color: #2378a2; }
.lightgrey { color: #aaaaaa; }
.darkgrey { color: #222; }
.black { color: #000; }
.red { color: #ad0707; }
.orange { color: #faad14; }
.grey { color: #282828; }
.white { color: #fff; }

body {
	font-family: 'Nunito', sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: opximizeLegibility;
	font-display: swap;
	background: #222;
}

.site-wrapper {
	margin: 0 auto 60px;
	padding: 0;
	max-width: 1440px;
	width: 100%;	
	background-color: #222222;
	box-shadow: 3px 3px, 15px #000;
	position: relative;
	overflow: hidden;
}

p, ul, ol {
	margin: 0 0 20px;
	font-family: 'Nunito', sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: opximizeLegibility;
	font-display: swap;
	font-size: 16px;
	line-height: 28px;
	color: #fff;
}

li {
	margin: 0 0 10px 20px;	
}

h1, h2, h3, h4 {
	font-family: 'Montserrat', sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: opximizeLegibility;
	font-display: swap;
	color: #fff;
	font-weight: 800;
}

h1 {
	margin: 0;
	font-size: 46px; 
	line-height: 1.1; 
	text-transform: uppercase;
}

h2 {
	font-family: 'Montserrat', sans-serif;
	margin: 0 0 10px;
	font-size: 46px; 
	text-transform: uppercase;
}

h3 {
	font-family: 'Oswald', sans-serif;
	margin: 0 0 10px;
	font-size: 30px; 
	text-transform: uppercase;
}

h4 {
	margin: 0 0 10px;
	font-size: 20px; 
}

hr {
	margin: 20px auto 20px;
	color: #2378a2;
	width: 100%;
}

hr.wp-block-separator {
	max-width: 1000px;
}

a, a:visited {
	color: #2378a2;
}

a:hover {
	color: #faad14;
	text-decoration: underline;
	transition: .25s;
}

a.button, a.ab-button, a.gb-button {
	margin: 0 0 20px;
	font-family: 'Oswald', serif;
	text-transform: uppercase;
	font-size: 18px; 
	font-weight: bold;
	background: #2378a2 !important;
	padding: 15px 20px;
	border-radius: 3px;
	color: #fff;
	display: inline-block;
	text-decoration: none; 
	transition: all .25s;
	text-align: center;
}

a.button.red-button {
	background: #ad0707 !important;
}

a.button:hover, a.ab-button:hover, a.gb-button:hover {
	background: #faad14 !important;
}

/* black and white to color */
.color-block, body:not(.page-template-page-veterans) .grid-x, .wp-block-group, .wp-block-columns, body:not(.page-template-page-veterans) img {
  filter: gray; 
  -webkit-filter: grayscale(1); 
  filter: grayscale(1); 
   transition: filter 10s;
}

/* Disable grayscale on hover */
.color-block:hover, body:not(.page-template-page-veterans) .grid-x:hover, .wp-block-group:hover, .wp-block-columns:hover, body:not(.page-template-page-veterans) img:hover, .tb-row:hover {
  -webkit-filter: grayscale(0) !important;
  filter: grayscale(0) !important;
   transition: filter .4s;
}

.wp-block-cover {
	background-color: #222;
	background-blend-mode: luminosity;
}

.wp-block-cover:hover {
	background-blend-mode: normal; 
   	transition: .4s;
}


/*--- header styles ---*/

#header {
	margin: 0;padding: 0;
	min-height: 60px;
	background: #333;
	display: block;
}

#header a {
	color: #fff;
	font-size: 24px; 
	text-transform: uppercase;
}

#header a span {
	color: #fff;
	text-indent: -5000px;
}

#header a.logo img {
	max-height: 50px;
}


@media screen and (max-width: 40.2em){
	#header {
		padding: 0 0 15px;
	}

	#header a.logo img {
		margin:10px auto;
	}

	a.btn-menu {
		margin-right: 10px;
		font-size: 30px;
		font-family: #fff;
	}
	
}

.flyout-menu {
	background: rgba(35,120,162,.8);
	min-width: 350px;
	padding: 20px;
	min-height: 667px;
	text-align: left;
	display: block;
	position: absolute;
	right: 0;
	z-index: 1000;
	height: 100vh;
}

.flyout-menu.hidden {
	display: none;
}

.flyout-menu h4 {
	color: #f1592a;
	text-transform: uppercase;
}

.flyout-menu ul {
	list-style-type: none;
	text-align: left;
}

.flyout-menu ul ul {
	margin-bottom: 20px;
	margin-left: 20px;
}

.flyout-menu ul ul li {
	margin-bottom: 0;
} 

.flyout-menu li a {
	color: #fff;
	font-family: 'Oswald', sans-serif;
	margin: 0 0 10px;
	font-size: 26px; 
	text-transform: uppercase;	
}

.flyout-menu li li a {
	font-size: 20px; 
	text-transform: none;
}


.flyout-social {
	text-align: center;
}

.flyout-social a {
	margin: 0 5px;
}

.flyout-social a span {
	font-size: 36px;
}

@media screen and (max-width: 40.2em) {
	.flyout-menu {
		width: 100vw;
		height: 100vh;
		top: 84px;
		text-align: center;
	}

	.flyout-menu .contents {
		height: 100vh;
		overflow-y: auto; 
	}
}




/*--- footer styles ---*/

#footer {
	border-top: solid 4px #2378a2;
	padding: 60px 0 0;
	background: #222222;
	color: #fff;
}

#footer h4 a, #footer h4 {
	color: #2378a2; 
	font-weight: normal; 
	font-size: 24px;
	font-family: 'Oswald', sans-serif;
}

#footer ul {
	list-style-type: none; 
	line-height: 1.05;
}

#footer li {
	margin: 0 0 10px;
	color: #a3b5ca;
}

#footer p {
	margin-bottom: 10px;
	font-size: 14px; 
	line-height: 1.5;
	color: #fff;
	font-weight: 500;
}

#footer a {
	font-size: 14px; 
	color: #fff;
	text-decoration: none;
}

.footer-logo img {
	margin-top: 20px;
}

#footer .footer-social {
	margin-bottom: 20px;
}

#footer .footer-social a span {
	color: #fff;
	font-size: 34px;
	margin-right: 10px;
}

#footer .copyright {
	margin-top: 60px;
	width: 100%; 
}

#footer .copyright p {
	font-size: 12px;
	margin: 10px 0;
	color: #fff;
	font-weight: 500;
}

#footer a span.fab {
	font-size: 30px;
	margin: 5px;
}

@media screen and (max-width: 40.2em){	
	.footer-col-1, .footer-col-2, .footer-col-3 {
		text-align: center;
	}

	.footer-col-2 h4, .footer-col-2 p, .footer-col-2 .footer-social {
		padding-left: 0;
	}
	
	#footer h4 {
		margin-top: 40px;
	}

}


/*--- page styles --*/

#content {
	min-height: 500px;
	height: auto;
	background: url('../assets/img/Inclusion-Project-Logo-bg.png') top left repeat transparent;
	background-attachment: fixed;
}


.wp-block-cover-image.is-position-center-center, .wp-block-cover.is-position-center-center, 
.wp-block-cover {
	justify-content: left;
	align-items: left;
}

.wp-block-cover__inner-container {
	padding: 30px; 
	max-width: 550px !important; 
	width: 100%;
	background: rgba(0, 0, 0, .8);
	float: left;
}

.error404 #content, .search #content {
	padding-top: 40px;
}

p.caption {
	margin-top: 5px; 
	font-size: 10px; 
	text-align: right; 
	width: 100%; 
	display: block;
	font-style: italic;
}

@media screen and (max-width: 62.5em) {

	.wp-block-cover {
		margin-bottom: 250px;
	}

	.wp-block-cover__inner-container {
		position: absolute;
		max-width: 100% !important;
		width: 100% !important;
		bottom: -250px;
		left: 0; 
		background: #000;
	}
}

@media screen and (max-width: 40.2em) {

	.wp-block-cover {
		margin-bottom: 350px;
	}

	.wp-block-cover__inner-container {
		position: absolute;
		max-width: 100% !important;
		width: 100% !important;
		bottom: -350px;
		left: 0; 
		background: #000;
	}
}

/*--- featured block ---*/

.tb-row {
	padding: 5px 0;
	width: 100%;
	display: block;
}

.tb-row.blue {
	background: #555;
	transition: 30s;
}

.tb-row.blue:hover {
	background: #2378a2;
   transition: .4s;
}

.tb-divider {
	border-top: solid 4px #2378a2;
	width: 100%;
	display: inline-block;
	position: absolute;
}

.blue .tb-divider {
	border-top: solid 4px #222222;
}

.image-on-right .tb-divider {
	margin-left: -50%;	
}

.tb-subtext {
	padding-top: 20px;
}

.tb-subtext .tb-divider {
	margin-left: -50%;
	margin-top: -24px;
}

.image-on-right .tb-subtext .tb-divider {
	margin-top: -24px;
	margin-left: 0;	
}

.tb-block {
	margin: 140px auto 80px;
	background: #303030;
	max-width: 1020px;
}

.tb-row.blue a {
	color: #faad14;
}

.tb-row.blue .tb-block {
	background: #505050;
	transition: 30s;
}

.tb-row.blue:hover .tb-block {
	background: #276b8d;
   transition: .4s;
}

.tb-block h2 {
	margin-top: -64px;
	margin-bottom: 0;
}

.tb-image {
	width: 140%;
	margin-top: -90px;
	margin-left: -120px;
}

.image-on-right .tb-image {
	margin-left: -60px;
}

.tb-image img {
	bottom: 0;
}

.tb-content p, .tb-content ol, .tb-content ul, .tb-content h1,  .tb-content h2,  .tb-content h3,  .tb-content h4 {
	padding: 0 20px;
}

@media screen and (max-width: 62.4em) {
	.tb-block h2 {
		 margin-left: 20px;
	}
}

@media screen and (max-width: 40.2em) {

	 .tb-block, .tb-row.blue .tb-block {
	 	margin: 20px auto;
	 	background: none;
	 }

	.tb-divider, .tb-subtext .tb-divider, .image-on-right .tb-subtext .tb-divider, .image-on-right .tb-divider {
		margin-left: 0;
		margin-top: 0;
		width: 100%;
		position: relative;

	}
	.tb-block h2 {
		margin-top: 0;
		 margin-left: 20px;
	}

	.tb-image, .image-on-right .tb-image {
		width: 100%;
		margin-top: 0px;
		margin-left: 0px;
		margin-bottom: 20px;
	}
	

}


/*--- color block ---*/

.color-block, .white_bg, .blue_bg, .orange_bg, .dark_blue_bg {
	width: 100%;
	padding: 30px 30px;
	margin-bottom: 30px;
	
	background: #555;
	transition: 30s;
}

.white_bg:hover,
.color-block.white_area:hover {
	background: #f1f1f1;
	color: #222;
	transition: .4s;
}

.color-block.white_area:hover p,
.color-block.white_area:hover ul, 
.color-block.white_area:hover h1, 
.color-block.white_area:hover h2, 
.color-block.white_area:hover h3,
.color-block.white_area:hover h4 {
	color: #222;
	transition: .4s;
}

.blue_bg:hover, 
.color-block.blue_area:hover {
	background: #2378a2;
	transition: .4s;
}

.dark_blue_bg:hover, 
.color-block.dark_blue_area:hover {
	background: #276b8d;
	transition: .4s;
}

.orange_bg:hover,
.color-block.orange_area:hover {
	background: #faad14;
	transition: .4s;
}

/*-- donate cta ---*/

#donate-block {
	padding: 20px;
	width: 100%;
	background: #000;
} 

/* latest news block ---*/


.white-bg {
	padding: 30px 0;
	background: #fff;
}

.white-bg p, .white-bg h2, .white-bg h3 {
	color: #222;
}

.wp-block-latest-posts {
	margin-top: 20px;
}

.wp-block-latest-posts a {
	font-size: 20px; 
	font-weight: 700; 
	color: #2378a2;
}

.wp-block-latest-posts__post-excerpt {
	color: #222;
}

/*--- blog ---*/

.single-post #content {
	margin-top: 60px; 
}

aside#sidebar {
	background: #2378a2;
	padding: 20px;
}

aside#sidebar a {
	color: #fff;
} 

aside#sidebar .gform_wrapper {
	background: #222; 
	padding: 20px;
}

span.gform_description {
	color: #fff;
}

/*--- form styles ---*/

.gform_wrapper input[type=submit] {
	margin: 0 0 20px;
	font-family: 'Oswald', serif;
	text-transform: uppercase;
	font-size: 18px; 
	font-weight: bold;
	background: #2378a2 !important;
	padding: 15px 20px;
	border-radius: 3px;
	color: #fff;
	display: inline-block;
	text-decoration: none; 
	transition: all .25s;
	text-align: center;
}

.gform_wrapper input[type=submit]:hover {
	background: #faad14 !important;
}



/*--- testimonial ---*/

.gb-block-testimonial {
	background: #555 !important;
	color: #fff !important;
	transition: 30s;
} 

.gb-block-testimonial p {
	font-family: 'Oswald', sans-serif;
	font-size: 18px;
}

.gb-block-testimonial:hover {
	background: #2378a2 !important;
	transition: .4s;
}

.gb-block-testimonial .gb-testimonial-name {
	color: #fff !important;
}

.gb-block-testimonial .gb-testimonial-title {
	color: #fff !important;
}

/*--- Stay Tuned block ---*/

.logo-bg {
	width: 100%;
	padding: 40px 0;
	background: url('../assets/img/blue-logo-big.png') center center no-repeat #333333;
	background-size: cover;
  background-attachment: fixed;
}

div.gform_confirmation_message {
	color: #faad14;
	font-weight: bold; 
}

/*--- vet stories ---*/
.vet-thumb {
	position: relative;
}


.vet-thumb:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.vet-image {
  position: absolute;
  width: 100%;
  height: 100%;
}

.vet-stories {
	margin: 20px auto 60px;
}

a.vet-close {
	color: #fff;
	float: right;
	font-size: 30px;
}

.vet-thumb {
	max-width: 400px;
	max-height: 400px;
	border: solid 1px #fff;
	overflow: hidden;
	display: inline-block;
}

.vet-thumb img {
  object-fit: cover;
  width:100%;
  height:100%;
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
   transition: filter 2s;

}

.vet-stories img.vet-active, .vet-stories img:hover {
  -webkit-filter: grayscale(0) !important;
  filter: grayscale(0) !important;
   transition: filter .4s;
}

.vet-story {
	padding: 40px 0 80px;
}

.vet-story h3 span {
	text-transform: none;
	font-weight: normal;
	font-size: 18px;	
}

.vet-story h4 {
	font-weight: normal;
}

.vet-story nav#post-nav {
	width: 100%;
	display: block;
}

.vet-next {
	float: right;
}

.vet-prev {
	float: left;
}

.story_paragraph {
	padding: 10px 0;
	color: #fff;
}

.vet-quote {
	display: none;
	height: 0;
}

a.vet-image:hover .vet-quote {
	display: block;
	position: absolute; 
	bottom: 0;
	padding: 8px; 
	color: #fff;
	font-style: italic;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	background: rgba(0,0,0,.8);
	width: 100%;
	height: auto;
	max-height: 120px;
}

.grecaptcha-badge {
	right: 20px !important;
}

@media screen and (max-width: 40.2em) {
	.grecaptcha-badge {
		right: -186px !important;
	}
}