/* *****************************************
Custom CSS file
Author: Thomas Volpe
URL: https://ThomasVolpe.com
***************************************** */

/* ************************************************
* Custom Animations from animations.css (reference)
*
* --slideRight   : slides IN FROM THE LEFT (moves right) with fade
* --slideLeft    : slides IN FROM THE RIGHT (moves left) with fade
* --scaleIn      : scales from 0 → 1, centered
* --glow         : animated gradient/background position shift
* --fadeInText   : fades in while moving down from -50px
* --scrollGrow   : horizontal scale from 0 → 1 (e.g., progress bar)
*
* Usage examples:
*   .reveal { animation: var(--scaleIn) var(--anim-base) var(--ease-out) both; }
*   .badge  { animation: var(--glow) 5s linear infinite; }
*   .title  { animation: var(--fadeInText) 1s ease-out both; }
**************************************************/

:root {
  /* Animation names (keyframe names in animations.css) */
  --slideRight: slideRight;
  --slideLeft: slideLeft;
  --scaleIn: scale-in-center;
  --glow: glow;
  --fadeInText: fadeIntext;
  --scrollGrow: scroll-grow;

  /* Global timing & easing tokens */
  --anim-fast: 0.3s;
  --anim-base: 0.5s;
  --anim-slow: 1s;
  --anim-slower: 1.25s;

  --ease-out: cubic-bezier(0.250, 0.460, 0.450, 0.940);   /* matches scale-in-center */
  --ease-smooth: cubic-bezier(0.19, 1, 0.22, 1);          /* long smooth transition */
  --ease-standard: ease;

}

.hidden {display:none;}
/* ****************************
* basic setup
***************************** */
* {outline: none;
-webkit-overflow-scrolling: touch;}

html, body {overflow-y: visible !important; overflow-x:hidden;}

.scrollpos {
  background: #ff0000 none repeat scroll 0 0;
  left: 0;
  padding: 10px;
  position: fixed;
  top: 0;
  z-index: 9999999;
  display: none; }

.scroll-watcher {
  height: 5px;
  background-color: #bbc0ff;
  position: fixed;
  width: 100%;
  z-index: 99999;
  top: 0;
  transform-origin: left;
  opacity: 1;
  scale: 0 1;
  animation: scroll-grow linear;
  animation-timeline: scroll();
}
  
html {
  scroll-behavior: smooth;
	scroll-padding:60px;}
.inner {
  max-width: 1240px;
  margin: 0 auto !important; }

.innerImp {
  max-width: 1240px !important;
  margin: 0 auto !important; }

.innerC600 {
  max-width: 600px;
  margin: 0 auto !important; }

.thinner {
  max-width: 860px;
  margin: 0 auto !important;
  position: relative;
  padding: 0 20px; }

/* Left-aligned text */
.text-left {
  text-align: left;
}

/* Center-aligned text */
.text-center {
  text-align: center;
}

/* Right-aligned text */
.text-right {
  text-align: right;
}

.flexThis {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flexThis.flexCenter {
  align-items: center;
}

.flexThis.flexLeft {
  align-items: left;
}

.flexThis.flexRight {
  align-items: right;
}
.has-filter-grayscale {
    filter: grayscale(1) opacity(0.5);
}


.mediaCard .wp-block-media-text__content {
    box-shadow: 1px 1px 8px 3px rgb(0 0 0 / 30%);
    position: relative;
    z-index: 12;
    background-color: #fff;
    left: -10%;
    padding: 20px !important;
}

@media (max-width: 767px) {
    /*xs*/
	.mediaCard .wp-block-media-text__content {
		box-shadow: 1px 1px 8px 3px rgb(0 0 0 / 30%);
		position: relative;
		z-index: 12;
		background-color: #fff;
		left: 0;
		width: 90%;
		margin: 0 auto;
		top: -20px;
	}
}
.wBW img {
    filter: grayscale(1);
    opacity: 0.5;
    transition: all .4s ease;
}

.wBW img:hover {
    opacity: 1;
    filter: grayscale(0);
}


/* *****************************************
base fonts  & links
body - font-family: 'Open Sans', sans-serif;
Htags - font-family: 'Open Sans', sans-serif;

***************************************** */
.fa {
  font-family: FontAwesome !important; }

.glyphicons, .glyphicon {
  font-family: 'Glyphicons Halflings' !important; }

.has-custom-bright-blue-1-color {
    text-shadow: 1px 1px 1px #000;
}

.shadowOne {
    text-shadow: 1px 2px 6px #000;
}
/* **************************
padding & margins
****************************** */
.noPad {
  padding: 0 !important; }

.noPadTB0 {
  padding-bottom: 0px !important;
  padding-top: 0 !important; }

.noPadLR0 {
  padding-left: 0 !important;
  padding-right: 0 !important; }

.pad20 {
  padding: 20px; }

.padLR20 {
  padding-right: 20px;
  padding-left: 20px; }

.pad30 {
  padding: 30px; }

.padB30 {
  padding-bottom: 30px; }

.padLR30 {
  padding-right: 30px;
  padding-left: 30px; }

.padL30 {
  padding-left: 30px; }

.padR30 {
  padding-right: 30px; }

.pullUp30 {
  margin-bottom: -30px;
  z-index: 2; }

.marZero {
	margin-top:0 !important;
	margin-bottom: 0 !important;
}
.mZeroB {
  margin-bottom: 0 !important; }

.noFlow {overflow:hidden;}
.noFlowX {overflow-x: hidden;}
.noFlowY {overflow-y: hidden;}

/* *****************************************
logo
***************************************** */

.scale-in-center {
	-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.Logo {
    z-index: 1000;
    position: relative;
	-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.Logo img {
    /*max-width: 187px;*/
    padding: 10px 0 0;
    position: relative;
    width: 100%;
    /*margin: -42px auto 0px;*/
    transition: all .3s linear;
    transform: scale(1);
}

/* *************************************
* sticky header #masthead
**************************************** 
body.page-template-default header.wp-block-template-part,
body.page-template-page-no-title header.wp-block-template-part,
body.page-tmeplate-wide-image header.wp-block-template-part,
body.home.page-template-default header.wp-block-template-part,
body.blog header.wp-block-template-part{
    position: sticky;
    top: 0;
    z-index: 2;
} */


.navFixed .Logo {
}

.navFixed .Logo img {
    transition: all .3s linear;
    /* max-width: 50%; */
    margin-bottom: -17px;
    margin-top: -42px;
    transform: scale(0.7);
}

.navFixed #topInfo {
    padding: 0px;
    margin-bottom: -9px;
    line-height: 0;
}

#smallNav {
	position:fixed; 
	width:100%; 
	top:-100px; 
	z-index:30; 
	transition: top .3s linear;
	backdrop-filter: blur(13px);
	    box-shadow: 0 0 8px 0 #000000c9;
}

#smallNav.navUp {
	top:0px; 
}

.navHover li:hover > a, .navHover li.current-menu-item a {
    color: var(--wp--preset--color--custom-cta-blue-00-b-4-ff) !important;
}

/******************************************
sub nav
******************************************/
.nav-menu > li:last-child .sub-menu {
  right: 0; }

.wp-block-navigation-submenu li {
	padding: 3px !important;
	border-bottom: 1px solid #555;

}

.wp-block-navigation-submenu li a {
    padding: 5px 5px;
    text-transform: none;
} 
li.bttn > a {
    background: #ead452;
    color: #000 !important;
    /* border-radius: 10px; */
    padding: 5px;
    /* margin-left: 3px; */
    /* box-shadow: 2px 9px 10px 0px #0006; */
}

.myLine  {
    display: block;
    background: #222;
    height: 1px;
    width: 160px;
}
/****************
buttons
****************/

/* overwrite the base hover and force our colors */
:root :where(.wp-element-button:hover, .wp-block-button__link:hover) {
    background-color:  color-mix(in srgb, var(--wp--preset--color--contrast) 85%, transparent) !important;
	    color: #fff;
}
:root :where(.wp-element-button, .wp-block-button__link), 
header a.wp-block-button__link.has-base-color.has-text-color.has-link-color.wp-element-button {outline: none !important;}

header a.wp-block-button__link.has-base-color.has-text-color.has-link-color.wp-element-button:hover {
    background-color: transparent !important;
    color: #00b4ff !important;
}

.btnWide, aside.gform_widget .btn {
  width: 100% !important; }

.btn, .button, input[type="submit"] {
  background-image: none !important;
  border-radius: 0 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  font-family: "Open Sans", sans-serif;
  font-weight: 800 !important;
  letter-spacing: 1.5px;
  padding: 6px 12px !important;
  position: relative;
  text-transform: uppercase;
  white-space: normal !important; }

.btn-main i {
  background-color: #000;
  padding: 3px 3px;
  border-radius: 10px;
  position: relative;
  top: -1px;
  color: #888 !important;
  text-indent: 3px; }

.btn-main {
  color: #fff !important;
  background-color: #000 !important;
  border-color: #000 !important;
  outline-color: #000 !important;
  outline-offset: 0px !important;
  outline-style: solid !important;
  outline-width: 1px !important;
  -webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  white-space: normal !important; }

.btn-main:hover,
.btn-main:focus,
.btn-main:active,
.btn-main.active,
.open .dropdown-toggle.btn-main {
  color: #000 !important;
  background-color: #fff !important;
  border-color: #fff !important;
  outline-color: rgba(255,255,255, 0) !important;
  outline-offset: 10px !important;
  outline-style: solid !important;
  outline-width: 1px !important;
  -webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1); }

.btn-main:active,
.btn-main.active,
.open .dropdown-toggle.btn-main {
  background-image: none !important; }

.btn-main.disabled,
.btn-main[disabled],
fieldset[disabled] .btn-main,
.btn-main.disabled:hover,
.btn-main[disabled]:hover,
fieldset[disabled] .btn-main:hover,
.btn-main.disabled:focus,
.btn-main[disabled]:focus,
fieldset[disabled] .btn-main:focus,
.btn-main.disabled:active,
.btn-main[disabled]:active,
fieldset[disabled] .btn-main:active,
.btn-main.disabled.active,
.btn-main[disabled].active,
fieldset[disabled] .btn-main.active {
  background-color: #777 !important;
  border-color: #777 !important; }

.btn-main .badge {
  color: #fff !important;
  background-color: #888 !important; }

.btn-trans-main {
  color: #fff !important;
  background-color: transparent !important;
  border-color: #bf7505 !important; }

.btn-trans-main:hover,
.btn-trans-main:focus,
.btn-trans-main:active,
.btn-trans-main.active,
.open .dropdown-toggle.btn-trans-main {
  color: #fff !important;
  background-color: #000000 !important;
  border-color: #bf7505 !important; }

.btn-trans-main:active,
.btn-trans-main.active,
.open .dropdown-toggle.btn-trans-main {
  background-image: none !important; }

.btn-trans-main.disabled,
.btn-trans-main[disabled],
fieldset[disabled] .btn-trans-main,
.btn-trans-main.disabled:hover,
.btn-trans-main[disabled]:hover,
fieldset[disabled] .btn-trans-main:hover,
.btn-trans-main.disabled:focus,
.btn-trans-main[disabled]:focus,
fieldset[disabled] .btn-trans-main:focus,
.btn-trans-main.disabled:active,
.btn-trans-main[disabled]:active,
fieldset[disabled] .btn-trans-main:active,
.btn-trans-main.disabled.active,
.btn-trans-main[disabled].active,
fieldset[disabled] .btn-trans-main.active {
  background-color: #cccccc !important;
  border-color: #000000 !important; }

.btn-trans-main .badge {
  color: #fff !important;
  background-color: #bf7505 !important; }

/************
 * footer gap fix
 * ********************/

footer.wp-block-template-part {
    margin-top: 0;
}

/*******************************************
 * colorshift
 * **********************************/
.bgColorShift {
	transition: all 0.9s ease;
	outline: 1px #00b4ff solid;
	background-image: linear-gradient(164deg, rgb(27, 27, 27) 18%, #325597 18%, #76D0F4 39%, rgb(27, 27, 27) 39%);
		/*background-image: linear-gradient(164deg, rgb(27, 27, 27) 18%, rgb(47, 56, 120) 18%, rgb(0, 180, 255) 39%, rgb(27, 27, 27) 39%);*/

    background-size: 610%;
    background-position: 60% 50%;
    background-repeat: no-repeat;
	overflow:clip;
}

.bgColorShift:hover {
    outline: 1px #6baafd00 solid;
    background-position: 20% 50%;
    background-repeat: no-repeat;
    outline-offset: -20px;
}

.bgColorShift p, .bgColorShift li, .bgColorGrad p, .bgColorGrad li {
	text-shadow:1px 1px 2px #000;
}

.bgColorGrad {
	transition: all 0.9s ease;
	outline: 1px #1b1b1b solid;
	background-image: linear-gradient(164deg, rgb(27, 27, 27) 18%, #325597 18%, #76D0F4 39%, rgb(27, 27, 27) 39%);
	/*background-image: linear-gradient(164deg, rgb(27, 27, 27) 18%, rgb(47, 56, 120) 18%, rgb(0, 180, 255) 39%, rgb(27, 27, 27) 39%);*/
    background-size: 610%;
    background-position: 20% 50%;
    background-repeat: no-repeat;
}

.grid {
    background-color: #33333300;
    transition: all .3s ease 0.3s;
}

.bgColorShift:hover .grid {
    background-color: #333;
    border-radius: 20px;
}

@media (max-width: 767px) {
    .bgColorGrad {
        background-size: 2520%;
        background-position: 22% 0%;
    }
}
/*******************************************
 * past events loop
 * **********************************/
.pstEvnt .wp-block-coblocks-posts__item {
    padding: 10px;
}

.pstEvnt .wp-block-coblocks-posts__item .bg-cover {
	    transform: scale(1);
    transition: all .3s ease;
    box-shadow: 0px 0px 0px #0000008f !important;
    border: 1px solid #fff;
}

.pstEvnt .wp-block-coblocks-posts__item .bg-cover:hover {
    transform: scale(0.95);
    transition: all .3s ease;
    box-shadow: 1px 18px 32px #0000008f !important;
    border: 1px solid #fff;
}

.loopLi li {
    list-style: none;
}


/******************************
 * animated border fx
 * **************************/
.innerBorder {
  border-radius: 20px;
  background: linear-gradient(
    35deg,
    #00b4ff 0%,
    #2989d8 20%,
    #000000 54%,
    #00b4ff 58%,
    #00b4ff 58%,
    #207cca 64%,
    #207cca 78%,
    #00b4ff 100%
  );
  background-size: 400% 400%;
  box-shadow: 0px 5px 16px 0 rgba(0, 0, 0, 0.69);
  padding: 3px;
  max-width: 1280px;
  margin: 0 auto;
  animation: glow 5s ease;
}
.innerBorder:hover {
  animation: glow 5s ease infinite;
}

.info {
  background-color: #333333;
  border-radius: 20px;
  color: #fff;
  padding: 30px;
height:100%;
}

.postGrid .innerBorder, .postGrid .info {
	height:100%;
}

/***********************
 * popup sliding panels
 * ******************/

.gspb_slidingPanel-wrap p {
    text-shadow: 0 0 BLACK;
}

/*****************
 * table extras
 * *************/
.DarkTable {
	overflow-x: auto;
}

.DarkTable table {
	background-color: #222;
}

.bgColorShift:hover .DarkTable thead tr th {
    color: #00b4ff;
}

.DarkTable thead tr th {
    background-color: #222;
    color: #fff;
}

.DarkTable table tr {
    border-bottom: 1px solid #555;
	}

.DarkTable table tr td {
    color: #fff;
    padding: 16px;
    background-color: #222222;
    position: sticky;
    left: 0;
    border-left: 1px solid #444;
}

/**********
 * make first column sticky for small screen
 * *********** 
.DarkTable tr:not(.row-1) .column-1 {
    position: sticky;
    background: #333232;
    left: -2px;
}*/

/*.DarkTable thead th {
	background-color: #000;
	color: #fff;
	text-align: center;
	font-weight: bold;
}

.DarkTable tbody td {
	background-color: #111;
	color: #ccc;
	padding: 10px;
	border: none;
}
*/

/* **********************
forms
********************** */
.gform-theme--framework .gform-field-label>.gfield_required:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme--framework.gform_editor legend.gform-field-label>span>.gfield_required:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) {
    color: #656565 !important;
}

#contact span.gfield_required.gfield_required_text, #contact h2 {
    color: #fff;
}
#contact .gform_validation_errors a {color: #fff !important;}
#contact .gform_validation_errors, #contact .gfield_validation_message {
    background-color: #570000 !important;
    color: #fff !important;
    padding: 5px;
}

.gform_wrapper.gravity-theme .gform_validation_errors>h2 {
    font-size: 18px !important;
}

.gform_wrapper .gform_validation_errors>h2 .gform-icon {
    display: none !important;
}

.gform_wrapper h2 {
    border-bottom: 1px solid #ccc;
    margin-bottom: 5px;
}


.maxH textarea {
  max-height: 285px; }

.gform_wrapper ul li.gfield {
  clear: none !important;
  margin: 0 !important;
  padding-right: 13px !important; }

aside .gform_body input {
  line-height: 1 !important;
  margin: 5px 0 !important;
  padding: 10px 10px !important; }

aside .gform_body div {
  line-height: 1 !important;
  margin: 2px 0 !important; }

aside .gfield {
  clear: none !important; }

aside .datepicker.medium.mdy.datepicker_no_icon.hasDatepicker {
  width: 100% !important; }

.gform_wrapper .datepicker, .votedNoOne .gform_wrapper .datepicker {
  width: 100% !important; }

aside .gform_wrapper .gform_footer {
  margin: 0 !important;
  padding: 0 !important; }

#secondary textarea {
  height: 100px; }

#secondary textarea:focus {
  height: 150px; }

textarea, .textInput, input[type="text"], input[type="email"], input[type="phone"], input[type="tel"], input[type="date"], select {
    max-width: none;
    background-color: rrgb(222 222 222 / 75%) !important;
    border-color: #000;
    border-radius: 0 !important;
    border-style: solid;
    border-width: 1px;
    color: #000;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 0 0 0.5em;
    outline: medium none;
    padding: 5px !important;
    -webkit-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 100% !important;
    /* min-width: 385px; */
}

textarea:focus, .textInput:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="phone"]:focus, input[type="tel"]:focus, input[type="date"]:focus, select:focus {
  background-color: white !important;
  border: 1px solid #000;
  color: #000 !important;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
  font-weight: bold; }

.ui-datepicker-title select {
  width: 32% !important; }

/* Target all placeholder styles with a single selector */
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  color: #000000 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

/* Style the ui-datepicker element */
.ui-datepicker {
  z-index: 300 !important;
}

.faded {
  opacity: 0; }



/*********************************************
 * custom animations
 * *****************************************/
.cardFlip {
  width: 100%;
  height: 250px;
  margin: 1rem auto;
  perspective: 1000px;
  cursor: pointer;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.cardFlip:hover .card-inner,
.cardFlip:focus .card-inner,
.cardFlip:focus-within .card-inner{
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  flex-direction: column;
  padding: 10px;
  align-content: center;
  flex-wrap: nowrap;
}

.card-front {
  background: white;
  border: 1px solid #e5e7eb;
}

.card-back {
  background: #7FB6D9;
  color: #ffffff;
  margin-top: 0;
  transform: rotateY(180deg);
  padding-top: 0;
}

.card-front:after {
    content: '❯';
    position: absolute;
    right: 10px;
    top: 1px;
    color: #999;
    animation: fadeslideIn;
    animation-duration: 0.9s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.card-back:before {
	content: 'i';
	font-size: 1.5rem;
	position:absolute;
	top:10px;
	left:10px;
	opacity:.4;
	font-weight:800;
	border:3px solid;
	padding:15px 10px;
	border-radius:50%;
	line-height:0;
}

@keyframes fadeslideIn {
	from {right:10px;
		scale:1;
		  color: #00b3ff40;}
	to { right:20px;
		scale:0.5;
	   color: #015a8000}
	
}
@-webkit-keyframes leftrigh {
	from {right: 10px;
		  color: #00b3ff;}
	to {right: 20px;
	   color: #015a8000}
}


/* **********************
 * cards with sliding titles
 * **************************/
.cardSlide-container {
    /* width: 1280px; */
    display: grid;
    grid-template-columns: repeat(5, minmax(350px, 1fr));
    grid-gap: 5px;
    margin: 0 auto;
    z-index: 29;
	overflow-x: auto;
}
@media (max-width:767px) {
	.cardSlide-container{ grid-template-columns: repeat(1, minmax(350px, 1fr));}
}
@media (max-width:1024px) {
	.cardSlide-container {    grid-template-columns: repeat(2, minmax(350px, 1fr));
}
}
  .cardSlide-container, .cardSlide-container *,
.cardSlide-wrapper, .cardSlide-wrapper *{
    border-radius: 15px;
  }

.cardSlide {
  background-color: #00000066;
  position: relative;
  overflow: hidden;
  padding:0;
  margin:25px;
  min-height: 150px;
}

.cardSlide-inner {
	min-height: 150px;
	display: block;
}

.cardSlide .topFace {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #96caf25c;
    height: 100%;
    width: 100%;
    /* text-align: center; */
    /* vertical-align: middle; */
    display: flex;
    transition: all .3s ease;
    /* color: #000; */
    z-index: 1;
    padding: 0px;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
	overflow:hidden;
}
.cardSlide:focus-within .topFace:before,.cardSlide:focus-within .topFace:after,
.cardSlide:hover .topFace:before,.cardSlide:hover .topFace:after{display:none;}
.cardSlide .topFace:before {
    content:' ';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-image: linear-gradient(270deg, #00b3ff, transparent);
    background-color: #000000;
    transform-origin: bottom;
    transform: rotate(145deg) translate(-50%, -25%);
} 

.cardSlide .topFace:after {
    content: '❯';
    position: absolute;
    right: 10px;
    bottom: 1px;
    color: #999;
    animation: fadeslideIn;
    animation-duration: 0.9s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    text-shadow: 1px 1px 0px #ffffff;
}

.cardSlide-icon, .cardSlide-icon img {
    width: 60px;
    /* flex-grow: 1; */
    opacity: 1;
    filter: brightness(54);
}


.cardSlide-title {
  color: #ffffff;
  font-size: 19px;
  margin:0;
  text-transform: uppercase;
  transition: all 0.3s ease;
  /* flex-grow: 1; */
  text-align: left;
  text-shadow: 0px 0px 6px #000;
  letter-spacing:1px;
}

.cardSlide .bottomFace {
    padding: 10%;
    margin: 0;
    opacity: 0;
    border-bottom: 4px solid #00b4ff;
    border-left: 1px solid #00b4ff;
    border-right: 1px solid #00b4ff;
}


/* hover and focus states */

.cardSlide:hover .topFace,
.cardSlide:focus-within .topFace{
  height: 100%;
  border-radius: 15px 15px 0px 0px;
  padding: 15px;
  background-color: #00b4ff;
  top: -176px;
}



.cardSlide:hover .cardSlide-icon,
.cardSlide:focus-within .cardSlide-icon{
    width: 30px;
    opacity: 0;
}
.cardSlide:hover .cardSlide-title, .cardSlide:focus-within .cardSlide-title {
    color: #ffffff;
    font-size: 16px;
    transform: translateX(-10px);
    text-shadow: 1px 1px 2px #000;
	letter-spacing:5px;
}
.cardSlide:hover .bottomFace p,
.cardSlide:focus-within .bottomFace p{
  animation: fadeIntext 0.5s both;
  position: relative;
	opacity:1;
}
.cardSlide:hover .bottomFace ,
.cardSlide:focus-within .bottomFace{
	opacity:1;
	background-color: #333333ba;
}

@media(max-width:767px){
	.cardSlide:hover .cardSlide-title, .cardSlide:focus-within .cardSlide-title {
		font-size: 14px;
		letter-spacing: 3px;
	}
}


.growBar {
	height:3px;
	width:0%;
	animation: growing;
	animation-timeline: view();
}

/* separator line that grows */
@-webkit-keyframes growing {
	from {width:0%;}
	to {width:100%;}
}

@keyframes growing {
	from {width:0%;}
	to {width:100%;}
}


/**************************
* info Cards
* **************************/
.card-container {
	display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
    gap: 1rem;
}

/* Effects */
.card { transition: opacity .2s ease, filter .2s ease; }
.card.out-of-focus { opacity: .5; filter: blur(1px); }
.card.in-focus { opacity: 1; filter: none; }

.card-container .wp-block-columns:nth-child(odd) .wp-block-column:nth-child(even) .card {
    background: #f9f9f9 !important;
}

.card-container .wp-block-columns:nth-child(even) .wp-block-column:nth-child(odd) .card {
    background: #f9f9f9 !important;
}

.card-container .card,
.card-container .cardIcon, 
.card-container .cardTitle,
.card-container .cardInfo,
.card-container .cardLink {width:100%;}

.card-container .card {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    position: relative;
    top: 0px;
    transition: all .3s ease;
    box-shadow: 0px 0px 0px -10px #00000099;
    overflow: hidden;
    height: 100%;
    display: flex;
    /* text-align: left; */
    flex-direction: column;
    flex-wrap: wrap;
	margin:0;
}
.card-container .cardIcon img {
	max-width: 40px;
	position:relative;
	transform: translateX(0px);
	transition: all .3s ease;
}
.card-container .cardTitle {  font-weight:800;}
.card-container .cardInfo {flex-grow: 1;}

.card-container .cardLink a {
	position:relative;
	transform: translateX(0px);
	transition: all .3s ease;
	text-decoration: none;
	display:inline-block;
	}

.card-container .card:nth-child(2n) {
	background-color: #f9f9f9;
	
}

/*******info cards hover *****/
.card-container .card:hover {
	box-shadow:0px 10px 10px -10px #00000099;
	top:0px;
}
.card-container .card:hover .cardIcon img {
	max-width: 40px;
	transform: translateX(10px);
}
.card-container .cardLink:hover a {
	text-decoration:underline;
	text-underline-position: under;
	transform: translateX(10px);
}

/* ******************************************
all break points
******************************************** */
@media (max-width: 767px) {
  /*xs*/
	.flipper {
		flex-direction:column-reverse !important;
	}
	.flipper h2 {
		padding-top: 18px;
		text-align: left;
	}
	.flipper p {
		text-align: left;
	}
	
	.topSpace { margin-top: 10px;}
}

@media (min-width: 768px) and (max-width: 991px) {
  /*sm*/
  	.Logo img {
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
  /*md*/
	

}

@media (min-width: 1200px) {
  /*lg*/
	.topSpace { margin-top: 100px;} 
 }
 
 /* ****************************************
bootstrap extras
*************************************** */

@media (max-width: 767px) {
  /** xs **/
  /** Pull left xs **/
  .pull-left-xs {
    float: left; }
  /** Pull right xs **/
  .pull-right-xs {
    float: right; } }

@media (min-width: 768px) {
  /** sm **/
  /** Pull left sm **/
  .pull-left-sm {
    float: left; }
  /** Pull right sm **/
  .pull-right-sm {
    float: right; } }

@media (min-width: 992px) {
  /** md **/
  /** Pull left **/
  .pull-left-md {
    float: left; }
  /** Pull right **/
  .pull-right-md {
    float: right; } }

@media (min-width: 1200px) {
  /** lg **/
  /** Pull left **/
  .pull-left-lg {
    float: left; }
  /** Pull right **/
  .pull-right-lg {
    float: right; } }

.text-left-not-xs, .text-left-not-sm, .text-left-not-md, .text-left-not-lg {
  text-align: left; }

.text-center-not-xs, .text-center-not-sm, .text-center-not-md, .text-center-not-lg {
  text-align: center; }

.text-right-not-xs, .text-right-not-sm, .text-right-not-md, .text-right-not-lg {
  text-align: right; }

.text-justify-not-xs, .text-justify-not-sm, .text-justify-not-md, .text-justify-not-lg {
  text-align: justify; }

@media (max-width: 767px) {
  .text-left-not-xs, .text-center-not-xs, .text-right-not-xs, .text-justify-not-xs {
    text-align: inherit; }
  .text-left-xs {
    text-align: left; }
  .text-center-xs {
    text-align: center; }
  .text-right-xs {
    text-align: right; }
  .text-justify-xs {
    text-align: justify; } }

@media (min-width: 768px) and (max-width: 991px) {
  .text-left-not-sm, .text-center-not-sm, .text-right-not-sm, .text-justify-not-sm {
    text-align: inherit; }
  .text-left-sm {
    text-align: left; }
  .text-center-sm {
    text-align: center; }
  .text-right-sm {
    text-align: right; }
  .text-justify-sm {
    text-align: justify; } }

@media (min-width: 992px) and (max-width: 1199px) {
  .text-left-not-md, .text-center-not-md, .text-right-not-md, .text-justify-not-md {
    text-align: inherit; }
    text-align: left; }
  .text-center-md {
    text-align: center; }
  .text-right-md {
    text-align: right; }
  .text-justify-md {
    text-align: justify; } }

@media (min-width: 1200px) {
  .text-left-not-lg, .text-center-not-lg, .text-right-not-lg, .text-justify-not-lg {
    text-align: inherit; }
  .text-left-lg {
    text-align: left; }
  .text-center-lg {
    text-align: center; }
  .text-right-lg {
    text-align: right; }
  .text-justify-lg {
    text-align: justify; } }