/*
  Simple FlexBox Grid created by Mary Adkins GraphixStation June 23 2021.
  Copyright GraphixStation 
  All Rights Reserved
  Contact at https://www.graphixstation.com
*/
/* ====================================== GS FlexBox Grid 2023 Updated ====================================== */

.grid-container {margin: 0 auto; max-width: 1200px; overflow: hidden;position: relative;transition: 0.3s linear; width: 100%;}
.grid-padding {padding: 1.5% 0 0 1.5%;}
.grid-row {display:flex; flex-flow: row wrap; justify-content: flex-start; transition:0.3s linear;}
.grid-row-align {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  transition: 0.3s linear;
}

/* new update to grid style to remove asterisk */
.gr-col {margin: 0 auto; padding: 0 1.5% 1.5% 0; position: relative; transition:0.3s linear;}
.col-1ew {flex: 1; margin: 0 auto; padding: 0 1.5% 1.5% 0; position: relative; transition:0.3s linear;} /* Equal widths */
.col-1-1 {flex-basis: 100%; width: 100%;}
.col-1-2, .col-6-12 {flex-basis: 50%; width: 50%;}
.col-1-3, .col-4-12 {flex: 1; flex-basis: 33.33%; width: 33.33%;}
.col-1-4, .col-3-12 {flex-basis: 25%; width: 25%;}
.col-1-5 {flex-basis: 20%; width: 20%;}
.col-5-12 {flex-basis: 41.66%; width: 41.66%;}
.col-7-12 {flex-basis: 58.33%; width: 58.33%;}
.col-8-12 {flex-basis: 66.66%; width: 66.66%;}
.col-9-12 {flex-basis: 75%; width: 75%;}
.grid-content {padding: 20px; position: relative;}
.grid-content-flex {display: flex; padding: 20px; position: relative;}

@media only screen and (max-width: 880px) {
/*.col-1ew {flex-basis: 33.33%;}*/
.col-1-4 {flex-basis: 50%; width: 50%;} /* removed important for 4 column only 02 10 2023 */
.col-1-5 {flex-basis: 33%; width: 33%;}
.col-3-12 {flex: 1; flex-basis: 30%; width: 30%;}
.col-4-12 {flex-basis: 40%; width: 40%;}
.col-6-12 {flex-basis: 100%; width: 100%;} /* created for 1 of 2 inside of 1 of 2 grids Jan 12 2026 */
/*.col-5-12, .col-7-12 {flex-basis: 50%; width: 50%;}*/
.col-8-12 {flex-basis: 60%; width: 60%;}
.col-9-12 {flex-basis: 70%; width: 70%;}
/*.grid-content {padding: 10px;}*/
}
/* Styles for screen 880px to 768px added important for 4 column only */
@media screen and (max-width: 880px) and (min-width: 769px) {.col-1-4 {flex-basis: 25% !important; width: 25%;}}

/*@media only screen and (max-width: 880px) {.col-1ew {flex-basis: 50%;}}  .grid-content {padding: .5rem;} */

@media (min-width: 810px) {.revers_col {flex-direction: row-reverse;}}

@media only screen and (max-width: 767px) {
	.grid-padding {padding: 0;}
	.gr-col {flex-basis: 100%; padding: 2.5% 3%;}
	.col-1ew {flex-basis: 100%; padding: 2.5% 3%; width: 100%;}
	.col-1-2, .col-1-3, .col-1-4,.col-3-12,.col-4-12, .col-5-12, .col-6-12, .col-7-12,.col-8-12,.col-9-12 {flex-basis: 100%; padding: 2.5% 3%;}
	.col-1-5 {flex-basis: 50%; padding: 2.5% 3%; width: 50%;}
}
@media only screen and (max-width: 526px) {
	.col-1-5 {flex-basis: 100%; padding: 0 3%; width: 100%;}
}

@media only screen and (max-width: 428px) {
.grid-content-flex {padding: 5px 20px;}
.col-1-4 {flex-basis: 100%; padding: 0 3%;} 
}
/* 
  ======================================================================================
  GS FlexBox Grid 2021 with equal heights using Flex Direction Column for PUSH feature
  ======================================================================================
*/
/* to make each column equal width and height */
.rowF {display: flex;}
.rowF2 {display: flex; border-bottom: 1px solid #fff; padding: 20px 0;}

.colF {background-color: red; flex: 1; flex-direction: column; display: flex; padding: 1em 1em 1.75em; margin: 0 1.5% 1.5% 0;} /* padding: 1em; updated jan 9 2025  */
.colF:hover {-webkit-box-shadow: 0 10px 20px 2px rgba(0,0,0,.2); box-shadow:0 10px 20px 2px rgba(0,0,0,.2); transition: all ease-in-out 300ms;}

.push {align-self: center; color: #fff; cursor: pointer; font-weight: 400; letter-spacing: 0.04em; margin-top: auto; text-align: center; text-transform: uppercase;}
.push:hover { -webkit-box-shadow: 0 10px 20px 2px rgba(0,0,0,.2); box-shadow: 0 10px 20px 2px rgba(0,0,0,.2); transition: all ease-in-out 500ms;}
.push a {background-color: #003366; border-radius: 4px;  color: #fff; padding: 6px 12px 4px; }
.push a:hover {background-color: #FFD141; color: #1f1f1f;}

@media only screen and (max-width: 810px) {.rowF {flex-wrap: wrap;} .colF {flex: 1 1 300px;}}
@media only screen and (max-width: 654px) {.rowF {display: block;} .colF {flex-basis: 100%;}}
@media only screen and (max-width: 480px) {.colF {margin: 4%;}} /* margin: 1% 2%; */
/* @media only screen and (max-width: 480px) {.colF {margin: 6%;}} */
/* end equal width and height */