/**
 * Tip-Client CSS
 * Modernized for current CSS practices.
 * Uses CSS custom properties, logical properties, shorthand, and minimal vendor prefixes.
 */

:root {
  /* Tip-Client design tokens */
  --tc-font-heading: 'League Spartan', sans-serif;
  --tc-font-body: 'Open Sans', sans-serif;
  --tc-font-roboto: Roboto, sans-serif;
  --tc-color-text: #666666;
  --tc-color-text-light: #666;
  --tc-color-white: #fff;
  --tc-color-black: #000;
  --tc-color-primary: #008FD5;
  --tc-color-hover: #0077c4;
  --tc-color-accent: #bdf6ff;
  --tc-radius-sm: 5px;
  --tc-radius-md: 10px;
  --tc-radius-lg: 15px;
  --tc-transition: 0.3s ease;
  --tc-transition-slow: 0.8s ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {font-size: 99%;} /*16px*/

body {
  font-family: var(--tc-font-heading);
  font-size: 1.2em;
  color: var(--tc-color-white);
  padding: 0;
  margin: 0;
}

.margin {
    margin: clamp(1em, 2.5vw, 2.5em);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tc-font-heading);
  margin: 0.5em 0;
}

h1 {
  font-size: clamp(2rem, 3.3vw, 3.3rem);
  -webkit-text-stroke: 1px rgba(0,0,0,0.45);

  /* fallback stroke using shadow */
   text-shadow: 0 4px 16px rgba(0,0,0,0.45);
}

h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.8rem);
  margin-bottom:0;
}

h3 {
    font-size: clamp(1.4rem, 2.2vw, 2.2rem);
}
h4 {
  margin: 0 0 18px 0;
  font-size: clamp(1.1rem, 1.8vw, 1.8rem);
  line-height: 1.25;
  font-weight: 700;
  color: #074780;
  text-shadow: none !important;
  letter-spacing: normal;
  position: static !important;
  transform: none !important;
  white-space: normal;
}

h4::before,
h4::after {
  content: none !important;
  display: none !important;
}

h5 {
    font-size: clamp(.8rem, 1.4vw, 1.4rem);
    color: #074780;
}

h6 {
    font-size: 1.5rem;
    font-weight:400;
}

p {
  line-height: 1.3;
  font-size: clamp(0.9em, 1em, 1.3em);
  font-family: var(--tc-font-body);
  font-weight: 400;
  margin: 0;

  /* Subtle raised text effect */
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.35);
}
}

/*.headerimg img {
    width: clamp(25vw, 28vw, 31vw);
} */

.small, .text_small {font-size: 0.8rem;}

/*====================== Link CSS ======================*/

a:link { color: var(--tc-color-white); text-decoration: none; }
a:visited { color: var(--tc-color-black); }
a:hover { color: var(--tc-color-accent); text-decoration: underline; }

ul.b {
  list-style-type: square;
  margin-inline-start: 40px;
  line-height: 1.2;
  font-size: clamp(0.9em, 1em, 1.3em);
}

/*========================= Heading Css =======================*/

.tan {
    background-color:#eeeae5 ;
}

/*===============Text Colors================*/

.purple
{
  color: #5c2e91;
}

.red
{
  color: #e24045;
}

.blue
{
  color: #008FD5;
}

.orange
{
  color: #fdaf17;
}

.teal
{
  color: #00aa94;
}

.white
{
  color: #FFFFFF;
}

/*============Radius Styling============*/

.radius5
{
  border-radius: 5px;
}

.radius10
{
  border-radius: 10px;
  border: 6px solid #c6c07a;
}

.radius15
{
  border-radius: 15px;
  border: 6px solid #fff;
}

.radius20
{
  border-radius: 20px;
}

.radius-circle {
    border-radius: 50%;
    border: 6px solid #c6c07a;
}

/*=============Background Colors============*/

.backblue {
  /*background-color: #009adf;*/
  color:#FFF;
  background-image: linear-gradient(135deg, #0061af 10%, #00aeef 100%);
  padding:15px;
}
.backred {
  /*background-color: #dc3e43;*/
  color:#fff;
  background-image: linear-gradient(135deg, #a92c31 15%, #f15a22 100%);
  padding:15px;
}
.backpurple {
  background-color: #01a490;
  color:#fff;
  background-image: linear-gradient(135deg, #5c2e91 0%, #c6168d 100%);
  padding:15px;
}
.backdkpurple {
  background-color: #922780;
  color:#fff;
  /*background-image: linear-gradient(135deg, #5c2e91 0%, #c6168d 100%);*/
  padding:15px;
}
.backteal {
  background-color: #01a490;
  color:#fff;
  background-image: linear-gradient(135deg, #006b6b  15%, #27bdbe 100%);
  padding:15px;
}
.backorange {
  /*background-color: #f47920;*/
  color:#fff;
  background-image: linear-gradient(135deg, #dd5928  15%, #fcaf17 100%);
  padding:15px;
}
.backwhite {
  background-color: #ffffff;
  color:#333;
 /* height:100%;*/
}
.backblack {
  background-color: #000000;
  color:#fff;
}

/*============Border Settings===========*/

.border1
{
  border: 1px solid #666666;
}

.border2
{
  border: 2px solid #666666;
}

.border3
{
  border: 3px solid #666666;
}

/*=============Paddings 5px 10px 15px 20px============*/

.padding5
{
  padding: 5px;
}

.padding10
{
  padding: 10px;
}

.padding15
{
  padding: 15px;
}

.padding20
{
  padding: 20px;
}
/*@media (max-width: 480px)
{
    .padding20 {
        padding:0 10px;
    }
}*/
.padding25
{
  padding: 25px;
}
.padding30
{
  padding: 30px;
}
@media (max-width: 480px)
{
    .padding30 {
        padding:0 15px;
    }
}
.paddingblock {
  padding-block: min(20vh, 20rem);
}

/*================== Alignment Elements ===============*/

.center
{
  text-align: center;
}

.right
{
  text-align: right;
}

.left
{
  text-align: left;
}

.heading
{
  font-weight: 700;
}

/*==========Font Sizes for Headings==========*/

.xsmall, .small, .medium, .large, .xlarge
{
  font-weight: 700;
}

.xsmall
{
  font-size: .8em;
}

.small
{
  font-size: 1em;
}

.medium
{
  font-size: 1.2em;
}

.large
{
  font-size: 1.4em;
}

.xlarge
{
  font-size: 1.7em;
}

/*=================== Template Banner ===================*/

.tplban
{
  color: #FFFFFF;
  padding: 15px 0;
  font-family: Roboto, sans-serif;
  font-size: clamp(1.4rem, 2.3vw, 2.3rem);
  font-weight: 600;
  margin:0;
  width:100%
}

/*=============Datablock CSS================*/

#blockdata
{
  font-size: 14px;
  font-family: Roboto, sans-serif;
  line-height: 1.2em;
  color: #fff;
  width: 100%;
  margin: 0 auto;
  padding: 10px;
  background-color: #00aeef;
  border: 1px solid #025196;
  border-radius: 8px;
}
.datablock-header {
    color:#FFF;
    font-size: 24px;
    text-shadow: 0px 0px 7px rgba(0,0,0,0.91);
    letter-spacing:1px;
    line-height:26px;
}

#datablock5
{
  padding: 12px;
  font-size: 14px;
  font-family: Cachet-Medium;
  color: #666;
  text-align: left;
}
.databoxes
{
  padding: 20px;
  border: 1px solid #999999;
  border-radius: 10px;
  box-shadow: 0 8px 8px rgb(0 0 0 / 0.4);
  margin: 10px;
}
/*==================SHOW RECENT BLOG ENTRY====================*/

#showrecent {
    margin-left: 5%;
    margin-top: 300px;
    padding: 12px;
    padding-left:15px;
    padding-top: 6px;
    border: 2px solid #000;
    border-radius: 15px;
    background-color: #005296;
    left: 72%;
    top: 5%;
    color:#fff;
    /*font-family: verdana;*/
}

@media screen and (max-width: 992px) {
    #showrecent {
        visibility: hidden;
    }
}
/*
   @media screen and (max-width: 1132px) {
       #showrecent {
           top:10%;
       }
      }
*/
#showrecent a:visited {
color:#fff !important
}
#showrecent > a:link {
    color :#fff !important;
    }

#showrecentmobile {

 /* margin-left: 2%; */
    border: 1px solid #666666;
    border-radius: 8px;
    background-color: #005296;
    position: fixed;
    bottom: 0;
    margin-right:3%;
    z-index: 1000;
    /*font-family: verdana;*/
    color:#fff;
    line-height:1.1em;
    font-size:18px;


}

#showrecentmobile > a:link {
    color :#fff !important;
    }

#showrecentmobile > a:visited {
color :#fff !important;
}

/*==================END OFSHOW RECENT BLOG ENTRY====================*/




/*=================Footer Link & Container CSS==================*/
.foot {
    padding:5px;
}
.foot a:link
{
  color: #FFFFFF;
}

.foot a:hover
{
  color: #FFFFFF;
  text-decoration: underline;
}

.foot a:visited
{
  color: #FFFFFF;
}

#footer-container
{
    min-height: 100px;
    margin: 0 auto;
    background-color: #012e5c;
    font-size: 14px;
    line-height: 1.4em;
 /* -webkit-box-shadow: 0 -5px 20px 1px #333; */
 /* box-shadow: 0 -5px 30px 1px #333;*/ /*dropshadow on top*/
}
/*================= Copyright CSS =================*/

.copyright
{
  margin: 0 auto;
  padding-top: 10px;
  color: #000;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

/*==================== TEMPLATE CSS ====================*/
/*  Template base styles (.tpl8, .tpl9, .tpl13, .tpl14, .tpl16, .tpl20, .tpl35) moved to templates.css */

/*============Very Top Navigation Links================*/

.vtn a:link { color: var(--tc-color-text); }
.vtn a:hover { color: var(--tc-color-hover); text-decoration: underline; }
.vtn a:visited { color: var(--tc-color-text); }
/*===================End of vtn links==================*/

/*=============================Titlebar============================

.titlebar
{
  margin-bottom: 10px;
  -webkit-box-shadow: 0px 10px 3px 0px rgba(204,204,204,1);
  -moz-box-shadow: 0px 10px 3px 0px rgba(204,204,204,1);
  box-shadow: 0px 5px 5px #888888;
}
*/
/*==================Embed Container & Video CSS===================*/


.video
{
  width: 100%;
  height: auto;
}

.embed-container {
  position: relative;
  padding-bottom: 65%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container .embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wrap1 {
  border-bottom: 0 solid #ccc;  /* set size to 0px for no border */
}

/* ====================  EVENT CSS ======================== */

.events {
  font-family: Roboto, Arial;
}


/* ========================= GALLERY CSS ===========================  */
.galleries {
  background-color: #BC8484;
  color:#fff;
  text-align:center;
}
.displaygal {
  background-color: #BC8484;
}
.pagenumgaltop {
  padding-top: 16px;
  text-align:center;
  color:#fff;
}
.pagenumgalbottom {
  padding:6px;
  padding-bottom:16px;
  text-align:center;
  color:#fff

}
.imgbackgrnd {
  background-color: #BC8484;

}


span.paginator1 { background-color:#1c4d94; margin: 3px; padding: 10px 15px; border-radius:5px}
	  span.paginator1 span { list-style-type:none; display: inline; padding: 5px; margin: 0; }
		span.paginator1 span.page a:link { text-decoration: none; background-color: #0c7ce1; color: #000; padding:5px 8px; margin:0;}
        span.paginator1 span.page a:visited { text-decoration: none; background-color: #0c7ce1; color: #000; padding:5px 8px; margin:0;}
		span.paginator1 span.page a:hover { color: #000; background-color: #085498; }
		span.paginator1 span.arrow { font-weight: bold; color: #fff; margin: 0; padding: 0 2px 0 2px; }
		span.paginator1 span.arrow a { font-weight: bold; color: #fff; text-decoration: none; }
        span.paginator1 span.arrow a:hover { font-weight: bold; color: #fff; text-decoration: none; }
        span.paginator1 span.arrow a:visited { font-weight: bold; color: #fff; text-decoration: none; }
		span.paginator1 span.selected { font-weight: bold; background-color: #F6F6F6; padding:5px 8px; margin: 3px; border: 1px; border-style: solid; }
		span.paginator1 span.break { color: #cccccc; margin: 0 5px 0 5px; }
		span.paginator1 span.ellipsis { color: #cccccc; }

/* ========================= END OF GALLERY STUFF ========================= */


 /* Below are fckeditor styles */

/* End of fckeditor styles */



.sub_div
{
  position: absolute;
  bottom: 0px;
}
.tipdatawhite {
    background-color: #FFF;
    border-radius:10px;
    margin: 17px 0 ;
}




/*=================== TIP GRID STUFF ====================*/

.tipgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.tipgrid-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

@media screen and (max-width: 915px) {
  .tipgrid-footer {
    display: block;
  }
}

.tipgrid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.tipcontainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    padding:5px;
    color:#666666;
}


/* Tipgrid/tipcell styles moved to templates.css */


/* =========================== FORM CSS ================================  */

input[type=text],[type=textarea],[type=email] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
/*
input[type=textarea] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

input[type=email] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
*/

.label {
  padding:0px 12px 0px 0;
  display: inline-block;
}

/*
input[type=Submit] {
  background-color: #0060af;
  color: white;
  padding: 4px 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}
*/
input[type=Submit]:hover {
  background-color: #333333;
}

input[type=Submit]:visited {
  background-color: #000000;
}

input[type=Submit]:active {
  background-color: #000000;
}

.fmsect {
  display: grid;
  grid-template-columns: 20% 1fr;
  gap: 0.5rem;
  align-items: start;
}

.col-25 {
  font-weight: 700;
  margin-top: 6px;
}

.col-75 {
  margin-top: 6px;
}


/* Responsive layout - when the screen is less than 600px wide, stack columns */
@media screen and (max-width: 600px) {
  .fmsect {
    grid-template-columns: 1fr;
  }
  .col-25,
  .col-75,
  input[type=Submit] {
    margin-top: 0;
  }
}

/* ============================ END OF FORM STUFF ============================= */

/* ======================= READ MORE CSS ======================= */

.collapse {
  display: none;
  visibility: hidden;
}
.collapse.in {
  display: block;
  visibility: visible;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease, visibility 0.35s ease;
}

/* ========================== END OF READ MORE STUFF ======================== */






/* ==================== put all STUFF from Boot strap to Below this line ===================*/
/*  ########### BELOW IS BOOTSTRAP GRID CODE #####THIS MAY NOT BE NEEDED ANYMORE ##############################  */

.container {
  padding-inline: 15px;
  margin-inline: auto;
}

/*@media (min-width: 768px)
{
  .container
  {
    width: 750px;
  }
}

@media (min-width: 992px)
{
  .container
  {
    width: 970px;
  }
}

@media (min-width: 1200px)
{
  .container
  {
    width: 1170px;
  }
}*/

.container-fluid {
  padding-inline: 0;
  margin-inline: auto;
}

.row { margin-inline: 0; }



@media (min-width: 992px) {
  .row { display: flex; flex-wrap: wrap; }
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
  .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }

  .col-md-12
  {
    width: 100%;
  }

  .col-md-11
  {
    width: 91.66666667%;
  }

  .col-md-10
  {
    width: 83.33333333%;
  }

  .col-md-9
  {
    width: 75%;
  }

  .col-md-8
  {
    width: 66.66666667%;
  }

  .col-md-7
  {
    width: 58.33333333%;
  }

  .col-md-6
  {
    width: 50%;
  }

  .col-md-5
  {
    width: 41.66666667%;
  }

  .col-md-4
  {
    width: 33.33333333%;
  }

  .col-md-3
  {
    width: 25%;
  }

  .col-md-2
  {
    width: 20%;
  }

  .col-md-1
  {
    width: 8.33333333%;
  }
}



.resize:hover {
  background-color: var(--tc-color-text);
  transform: scale(1.08);
  transition: transform var(--tc-transition);
  border: 1px solid var(--tc-color-text);
  z-index: 1;
}

/*======================Highslide CSS====================*/

.highslide img {
    border: 0;
}
.highslide:hover img {
    border-color: transparent;
}
.highslide-image {
    border-width: 2px;
    border-style: solid;
    border-color: white;
}
.highslide-dimming {
    /*position: absolute;*/
    background: black;
}
/*=======================================================*/

/*=============================HR Classes===================================*/

.hr1 {
    border: 0;
    height: 5px;
    background: #fff;
    background-image: linear-gradient(to right,  #cccccc, black, #cccccc);
    border-radius:2px;
}
/* Gradient transparent - color - transparent */

.hr2 {
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0));
    width:30%;
    text-align:center;
}
/* Double-color dashed line */

.hr3 {
    border: 0;
    border-bottom: 2px dashed #666666;
    background: #fff;
}
/* Single-direction drop shadow */

.hr4 {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}
hr {
    border: none;

    color: #333;
    overflow: visible;
    text-align: center;
    height: 5px;
}
hr:after {
    background: #fff;
    color:#68217a;
    font-size:28px;
    content: '\2726';
    padding: 0 4px;
    position: relative;
    top: -19px;
}

/* Glyph, by Harry Roberts */

.five {
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    color: #333;
    text-align: center;
    height: 2px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0));
    width:98%;
}
.five:after {
    color:#bdbe89;
    content: "\2726";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
}
/* ====================For Creating a see-through box in a content area==================*/
.content-color {
  background: rgb(255 255 255 / 0.55);
  box-shadow: 0 8px 32px rgb(31 38 135 / 0.37);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--tc-radius-md);
  border: 1px solid rgb(255 255 255 / 0.18);
  width: 100%;
  height: 99%;
  padding: 30px;
}

/*========================= Basckground CSS ===============================*/

.clouds { background: url("/cms/assets/_core/image/background3.jpg") center / cover fixed no-repeat; }
.clouds2 { background: url("/cms/assets/_core/image/background7.jpg") center / cover fixed no-repeat; }
.pastelclouds { background: url("/cms/assets/_core/image/background1.jpg") center / cover fixed no-repeat; }
.gradient1 { background: url("/cms/assets/_core/image/gradient1.jpg") center / cover fixed no-repeat; }
.gradient2 { background: linear-gradient(135deg, #d2fddf 0%, #69a101 100%) center / cover fixed; }
.gradient3 { background: linear-gradient(135deg, #f7c153 0%, #621903 100%) center / cover fixed; }
.gradient4 { background: linear-gradient(215deg, #ffd4c2 0%, #41007a 100%) center / cover; }
.gethsemane {
  background: url("/cms/assets/_core/image/gethsemane.jpg") center / cover fixed no-repeat;}

  /* =========================================
   HERRON HERO
   Full image visible with no cropping
   Section spans full browser width
========================================= */
.herronbkgnd {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  line-height: 0; /* removes inline image spacing */
}

/* =========================================
   HERO IMAGE
   Full width of container, keeps aspect ratio
========================================= */
.herronbkgnd picture,
.herronbkgnd img {
  position: relative;
  z-index: 0;
}

.herronbkgnd .hero-content {
  position: absolute;
  z-index: 2; /* above overlay */
}
.herronbkgnd img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.herronbkgnd {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
  overflow: hidden;
  line-height: 0;
}

.herronbkgnd picture,
.herronbkgnd picture img,
.herronbkgnd > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.herronbkgnd .hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92%, 1200px);
  text-align: center;
  line-height: 1.15;
  z-index: 2;
}

.herronbkgnd .hero-content h1,
.herronbkgnd .hero-content h2 {
  margin: 0;
  color: #fff;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.55),
    0 0 2px rgba(0,0,0,0.75);
}

.herronbkgnd .hero-content h1 {
  font-size: clamp(2rem, 4.2vw, 4.5rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.herronbkgnd .hero-content h2 {
  font-size: clamp(1.2rem, 2.4vw, 2.8rem);
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.herronbkgnd .hero-btn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 1.525rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  color: #fff;
  border-radius: 8px;
  background: linear-gradient(to bottom, #d89b2c 0%, #b97712 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 3px 8px rgba(0,0,0,0.28);
}

@media (max-width: 767px) {
  .herronbkgnd .hero-content {
    width: 92%;
    top: 52%;
  }

  .herronbkgnd .hero-content h1 {
    font-size: clamp(1.7rem, 8vw, 2.7rem);
    margin-bottom: 0.4rem;
  }

  .herronbkgnd .hero-content h2 {
    font-size: clamp(1rem, 5vw, 1.55rem);
    margin-bottom: 0.9rem;
  }

  .herronbkgnd .hero-btn {
    padding: 12px 22px;
    font-size: 1rem;
  }
}

.worship1 { background: url("/cms/assets/_core/image/worship1.jpg") center / cover fixed no-repeat; }
.worship2 { background: url("/cms/assets/_core/image/worship2.jpg") center / cover fixed no-repeat; }
.parchment { background: url("/cms/assets/_core/image/background5.jpg") center / cover fixed no-repeat; }
.stripes1 { background: url("/cms/assets/_core/image/gradient2.jpg") center / cover fixed no-repeat; }
.smoke1 { background: url("/cms/assets/_core/image/background2.jpg") center / cover fixed no-repeat; }
.grunge1 { background: url("/cms/assets/_core/image/grunge1.jpg") center / cover fixed no-repeat; }
.grunge2 { background: url("/cms/assets/_core/image/grunge2.jpg") center / cover fixed no-repeat; }
.grunge3 { background: url("/cms/assets/_core/image/grunge3.jpg") center / cover fixed no-repeat; }
.abstract1 { background: url("/cms/assets/_core/image/abstract1.jpg") center / cover fixed no-repeat; }
.nightsky { background: url("/cms/assets/_core/image/night-sky2.jpg") center / cover fixed no-repeat; }
.crowd { background: url("/cms/assets/_core/image/crowd3.jpg") center / cover fixed no-repeat; }
.redchecker { background: url("/cms/assets/_core/image/redchecks.jpg") center / cover fixed no-repeat; }
.orangegradient { background: linear-gradient(to right, #fcf83b, #fe8052) center / cover fixed; }
.bluegradient { background: linear-gradient(to left, #6BD2F0, #004AAD) center / cover fixed; }
.redgradient { background: linear-gradient(to left, #FF9415, #FF1615) center / cover fixed; }
.greengradient { background: linear-gradient(to right, #a8e063, #56ab2f) center / cover fixed; }
.darkbackground {
    background-image: radial-gradient(circle at center center, transparent,rgb(33,33,33)),repeating-linear-gradient(135deg, rgb(33,33,33) 0px, rgb(33,33,33) 2px,transparent 2px, transparent 10px,rgb(33,33,33) 10px, rgb(33,33,33) 11px,transparent 11px, transparent 21px),repeating-linear-gradient(45deg, rgb(47,47,47) 0px, rgb(47,47,47) 4px,transparent 4px, transparent 8px),linear-gradient(90deg, rgb(33,33,33),rgb(33,33,33));
    background-position: center center;
    background-attachment: fixed;
    background-size:cover;
}
.green-gradient-circles {
    background-image: radial-gradient(circle at 97% 32%, rgba(131, 131, 131,0.05) 0%, rgba(131, 131, 131,0.05) 50%,rgba(20, 20, 20,0.05) 50%, rgba(20, 20, 20,0.05) 100%),radial-gradient(circle at 61% 40%, rgba(35, 35, 35,0.05) 0%, rgba(35, 35, 35,0.05) 50%,rgba(239, 239, 239,0.05) 50%, rgba(239, 239, 239,0.05) 100%),radial-gradient(circle at 47% 73%, rgba(122, 122, 122,0.05) 0%, rgba(122, 122, 122,0.05) 50%,rgba(5, 5, 5,0.05) 50%, rgba(5, 5, 5,0.05) 100%),linear-gradient(90deg, rgb(0, 209, 117),rgb(205, 241, 44));
    background-position: center center;
    background-attachment: fixed;
    background-size:cover;
}
.orange-gradient-circle {
    background-image: radial-gradient(circle at 11% 62%, rgba(205, 205, 205,0.04) 0%, rgba(205, 205, 205,0.04) 50%,rgba(149, 149, 149,0.04) 50%, rgba(149, 149, 149,0.04) 100%),radial-gradient(circle at 78% 10%, rgba(49, 49, 49,0.04) 0%, rgba(49, 49, 49,0.04) 50%,rgba(254, 254, 254,0.04) 50%, rgba(254, 254, 254,0.04) 100%),radial-gradient(circle at 92% 43%, rgba(34, 34, 34,0.04) 0%, rgba(34, 34, 34,0.04) 50%,rgba(206, 206, 206,0.04) 50%, rgba(206, 206, 206,0.04) 100%),linear-gradient(329deg, rgb(241, 77, 33),rgb(218, 227, 61));
    background-position: center center;
    background-attachment: fixed;
    background-size:cover;
}
.purple-gradient-circle {
    background-image: radial-gradient(circle at 79% 8%, rgba(218, 218, 218,0.04) 0%, rgba(218, 218, 218,0.04) 50%,rgba(129, 129, 129,0.04) 50%, rgba(129, 129, 129,0.04) 100%),radial-gradient(circle at 0% 68%, rgba(47, 47, 47,0.04) 0%, rgba(47, 47, 47,0.04) 50%,rgba(30, 30, 30,0.04) 50%, rgba(30, 30, 30,0.04) 100%),radial-gradient(circle at 96% 42%, rgba(88, 88, 88,0.04) 0%, rgba(88, 88, 88,0.04) 50%,rgba(225, 225, 225,0.04) 50%, rgba(225, 225, 225,0.04) 100%),linear-gradient(172deg, rgb(230, 6, 245),rgb(98, 24, 90));
    background-position: center center;
    background-attachment: fixed;
    background-size:cover;
}
.teal-gradient-circles {
    background-image: radial-gradient(circle at 32% 12%, rgba(229, 229, 229,0.05) 0%, rgba(229, 229, 229,0.05) 50%,rgba(101, 101, 101,0.05) 50%, rgba(101, 101, 101,0.05) 100%),radial-gradient(circle at 49% 59%, rgba(113, 113, 113,0.05) 0%, rgba(113, 113, 113,0.05) 50%,rgba(240, 240, 240,0.05) 50%, rgba(240, 240, 240,0.05) 100%),radial-gradient(circle at 16% 86%, rgba(118, 118, 118,0.05) 0%, rgba(118, 118, 118,0.05) 50%,rgba(207, 207, 207,0.05) 50%, rgba(207, 207, 207,0.05) 100%),linear-gradient(252deg,rgb(34, 85, 150),rgb(117, 220, 202));
    background-position: center center;
    background-attachment: fixed;
    background-size:cover;
}
.red-gradient-circles {
    background-image: radial-gradient(circle at 79% 30%, rgba(230, 230, 230,0.04) 0%, rgba(230, 230, 230,0.04) 50%,rgba(12, 12, 12,0.04) 50%, rgba(12, 12, 12,0.04) 100%),radial-gradient(circle at 53% 89%, rgba(210, 210, 210,0.04) 0%, rgba(210, 210, 210,0.04) 50%,rgba(24, 24, 24,0.04) 50%, rgba(24, 24, 24,0.04) 100%),radial-gradient(circle at 92% 89%, rgba(17, 17, 17,0.04) 0%, rgba(17, 17, 17,0.04) 50%,rgba(205, 205, 205,0.04) 50%, rgba(205, 205, 205,0.04) 100%),radial-gradient(circle at 21% 13%, rgba(124, 124, 124,0.04) 0%, rgba(124, 124, 124,0.04) 50%,rgba(243, 243, 243,0.04) 50%, rgba(243, 243, 243,0.04) 100%),radial-gradient(circle at 77% 0%, rgba(16, 16, 16,0.04) 0%, rgba(16, 16, 16,0.04) 50%,rgba(130, 130, 130,0.04) 50%, rgba(130, 130, 130,0.04) 100%),linear-gradient(90deg, rgb(247, 101, 31),rgb(250,25,25));
    background-position: center center;
    background-attachment: fixed;
    background-size:cover;
}
.white-gradient-circles {
    background-image: radial-gradient(circle at 28% 51%, rgba(206, 206, 206,0.03) 0%, rgba(206, 206, 206,0.03) 17%,transparent 17%, transparent 100%),radial-gradient(circle at 45% 10%, rgba(10, 10, 10,0.03) 0%, rgba(10, 10, 10,0.03) 45%,transparent 45%, transparent 100%),radial-gradient(circle at 48% 44%, rgba(74, 74, 74,0.03) 0%, rgba(74, 74, 74,0.03) 84%,transparent 84%, transparent 100%),radial-gradient(circle at 47% 50%, rgba(186, 186, 186,0.03) 0%, rgba(186, 186, 186,0.03) 23%,transparent 23%, transparent 100%),radial-gradient(circle at 29% 70%, rgba(9, 9, 9,0.03) 0%, rgba(9, 9, 9,0.03) 32%,transparent 32%, transparent 100%),radial-gradient(circle at 2% 75%, rgba(179, 179, 179,0.03) 0%, rgba(179, 179, 179,0.03) 19%,transparent 19%, transparent 100%),radial-gradient(circle at 2% 36%, rgba(26, 26, 26,0.03) 0%, rgba(26, 26, 26,0.03) 1%,transparent 1%, transparent 100%),radial-gradient(circle at 53% 70%, rgba(90, 90, 90,0.03) 0%, rgba(90, 90, 90,0.03) 55%,transparent 55%, transparent 100%),radial-gradient(circle at 28% 92%, rgba(31, 31, 31,0.03) 0%, rgba(31, 31, 31,0.03) 35%,transparent 35%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
     background-position: center center;
    background-attachment: fixed;
    background-size:cover;
}
.pizzabuffet { background: url("/cms/assets/_core/image/buffet8.jpg") center / cover fixed no-repeat; }
.blue-lens-flare { background: radial-gradient(circle at center, rgb(6 242 198), rgb(12 102 197)) center / cover fixed no-repeat; }

.phillipsgreengradient {
    background-image: linear-gradient(178deg, rgb(16,56,58),rgb(45,106,109));
}
.phillipsburgundygrad {
    background-image: linear-gradient(178deg, rgb(114,51,65),rgb(80,28,40));
}
.phillips-tan {
    background-image: repeating-linear-gradient(135deg, rgb(221,217,197) 0px, rgb(221,217,197) 2px,transparent 2px, transparent 4px),linear-gradient(90deg, rgb(236,233,218),rgb(236,233,218));
}
.him-blue {
    background-image: linear-gradient(94deg, rgba(163, 163, 163, 0.09) 0%, rgba(163, 163, 163, 0.09) 33.3%,rgba(100, 100, 100, 0.09) 33.3%, rgba(100, 100, 100, 0.09) 66.6%,rgba(162, 162, 162, 0.09) 66.6%, rgba(162, 162, 162, 0.09) 99%),linear-gradient(300deg, rgba(193, 193, 193, 0.06) 0%, rgba(193, 193, 193, 0.06) 33.3%,rgba(169, 169, 169, 0.06) 33.3%, rgba(169, 169, 169, 0.06) 66.6%,rgba(92, 92, 92, 0.06) 66.6%, rgba(92, 92, 92, 0.06) 99%),linear-gradient(171deg, rgba(45, 45, 45, 0.03) 0%, rgba(45, 45, 45, 0.03) 33.3%,rgba(223, 223, 223, 0.03) 33.3%, rgba(223, 223, 223, 0.03) 66.6%,rgba(173, 173, 173, 0.03) 66.6%, rgba(173, 173, 173, 0.03) 99%),linear-gradient(322deg, rgba(226, 226, 226, 0.06) 0%, rgba(226, 226, 226, 0.06) 33.3%,rgba(81, 81, 81, 0.06) 33.3%, rgba(81, 81, 81, 0.06) 66.6%,rgba(186, 186, 186, 0.06) 66.6%, rgba(186, 186, 186, 0.06) 99%),linear-gradient(127deg, rgba(225, 225, 225, 0.04) 0%, rgba(225, 225, 225, 0.04) 33.3%,rgba(95, 95, 95, 0.04) 33.3%, rgba(95, 95, 95, 0.04) 66.6%,rgba(39, 39, 39, 0.04) 66.6%, rgba(39, 39, 39, 0.04) 99%),linear-gradient(170deg, rgba(184, 184, 184, 0.06) 0%, rgba(184, 184, 184, 0.06) 33.3%,rgba(0, 0, 0, 0.06) 33.3%, rgba(0, 0, 0, 0.06) 66.6%,rgba(140, 140, 140, 0.06) 66.6%, rgba(140, 140, 140, 0.06) 99.89999999999999%),linear-gradient(365deg, rgba(40, 40, 40, 0.07) 0%, rgba(40, 40, 40, 0.07) 33.3%,rgba(214, 214, 214, 0.07) 33.3%, rgba(214, 214, 214, 0.07) 66.6%,rgba(190, 190, 190, 0.07) 66.6%, rgba(190, 190, 190, 0.07) 99.89999999999999%),linear-gradient(103deg, rgba(230, 230, 230, 0) 0%, rgba(230, 230, 230, 0) 33.3%,rgba(241, 241, 241, 0) 33.3%, rgba(241, 241, 241, 0) 66.6%,rgba(55, 55, 55, 0) 66.6%, rgba(55, 55, 55, 0) 99%),linear-gradient(42deg, #2625e3,#0bbaef);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:cover;
}
.him-orange {
    background-image: radial-gradient(circle at 11% 62%, rgba(205, 205, 205,0.04) 0%, rgba(205, 205, 205,0.04) 50%,rgba(149, 149, 149,0.04) 50%, rgba(149, 149, 149,0.04) 100%),radial-gradient(circle at 78% 10%, rgba(49, 49, 49,0.04) 0%, rgba(49, 49, 49,0.04) 50%,rgba(254, 254, 254,0.04) 50%, rgba(254, 254, 254,0.04) 100%),radial-gradient(circle at 92% 43%, rgba(34, 34, 34,0.04) 0%, rgba(34, 34, 34,0.04) 50%,rgba(206, 206, 206,0.04) 50%, rgba(206, 206, 206,0.04) 100%),linear-gradient(517deg, rgb(213,45,0),rgb(227,223,61));
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:cover;
}
.orange-banner {
 background: linear-gradient(
    90deg,
    #dba140 0%,
    #c88f32 50%,  /* slightly darker center */
    #dba140 100%
  );
    text-shadow: 0 2px 6px rgba(0,0,0,0.35);

  color: #ffffff; /* ensures text is readable */
}
.HIM-Blue {
    background-color:#053968;
    color:#ffffff;
}
.HIM-Blue-text {
    color:#085498;
}
.HIM-Dark_Navy {
    background-color:#053968;
}

/*==================== image hover effect ====================*/

.hover1 img {
  filter: grayscale(0);
  transform: scale(1.01);
  transition: filter var(--tc-transition-slow), transform var(--tc-transition-slow);
}

.hover1 img:hover {
  filter: grayscale(1);
  transform: scale(1.05);
}

.centering {
  width:99%;
  /*height:16em;*/
  display:flex;
  justify-content:center;
  align-items:center;
  /*gap:15px;*/
}

/*====================Very nice Button Hover Effect====================*/
.btn-green {
    color: #FFFFFF !important;
    text-transform: uppercase;
    cursor: pointer;

/* ======== Below is the code to change the color of the button ======== */
    background: #08984c;  /* fallback for old browsers */
    /*background: -webkit-linear-gradient(to right, #64962C, #73C05A);  /* Chrome 10-25, Safari 5.1-6 */
    /*background: linear-gradient(to right, #a8e063, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* ===================================================================== */
    font-weight: 700;
    padding: 10px 35px;
    border: 5px solid #bbe87a !important;
    border-radius: 10px;
    transition: all 0.8s ease 0s;
    text-align: center;
    text-decoration: none;
}
.btn-green a:link, a:visited {
    color: white;
}
.btn-green:hover {
    border-radius: 15px;

/*==== Below is the code to change the colors of the button on hover ====*/

    color: #ffffff !important;
    background: #000000;
    border-color: #6ca41d !important;
    text-decoration: none;
    transition: all 0.5s ease 0s;
}
/* ==================================================================== */

/*====================Very nice Button Hover Effect Orange====================*/
.btn-orange {
    color: #fff !important;
    text-transform: uppercase;
    cursor: pointer;
    background: linear-gradient(to right, #ff6200, #ffd060);
    font-weight: 700;
    padding: 10px 35px;
    border: 5px solid #ffd060 !important;
    border-radius: 10px;
    transition: all 0.8s ease 0s;
    text-align: center;
    text-decoration: none;
}
.btn-orange a:link, a:visited {
    color: white !important;
}
.btn-orange:hover {
    border-radius: 15px;

/*==== Below is the code to change the colors of the button on hover ====*/

    color: #ffffff !important;
    background: #000000;
    border-color: #ff6200 !important;
    text-decoration: none;
    transition: all 0.5s ease 0s;
}

/* ==================================================================== */

/*====================Very nice Button Hover Effect Red====================*/
.btn-red {
    color: #FFFFFF !important;
    text-transform: uppercase;
    cursor: pointer;

/* ======== Below is the code to change the color of the button ======== */
    background: #ff1616;  /* fallback for old browsers */
    /*background: -webkit-linear-gradient(to right, #c10404, #d07a00);  /* Chrome 10-25, Safari 5.1-6 */
    /*background: linear-gradient(to right, #c10404, #d07a00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* ===================================================================== */
    font-weight: 700;
    padding: 10px 35px;
    border: 5px solid #e78903 !important;
    border-radius: 10px;
    transition: all 0.8s ease 0s;
    text-align: center;
    text-decoration: none;
}
.btn-red a:link, a:visited {
    color: white !important;
}
.btn-red:hover {
    border-radius: 15px;

/*==== Below is the code to change the colors of the button on hover ====*/

    color: #ffffff !important;
    background: #000000;
    border-color: #c10404 !important;
    text-decoration: none;
    transition: all 0.5s ease 0s;
}


/* ==================================================================== */

/*====================Very nice Button Hover Effect Red====================*/
.btn-blue {
    color: #FFFFFF !important;
    text-transform: uppercase;
    cursor: pointer;

/* ======== Below is the code to change the color of the button ======== */
    background: #0b6fc8;  /* fallback for old browsers */
    /*background: -webkit-linear-gradient(to right, #018295, #48cee2);  /* Chrome 10-25, Safari 5.1-6 */
    /*background: linear-gradient(to right, #018295, #48cee2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* ===================================================================== */
    font-weight: 700;
    padding: 10px 35px;
    border: 5px solid #70d4e3 !important;
    border-radius: 10px;
    transition: all 0.8s ease 0s;
    text-align: center;
    text-decoration: none;
    /*display: inline-block;*/
}
.btn-blue a:link, a:visited {
    color: white !important;
}
.btn-blue:hover {
    border-radius: 15px;
    color: #333 !important;

/*==== Below is the code to change the colors of the button on hover ====*/

    color: #ffffff !important;
    background: #000;
    border-color: #008498 !important;
    text-decoration: none;
    transition: all 0.5s ease 0s;
}

/* ==================================================================== */


.fontsizing{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: rgba(1, 1, 1, 0.4);
}

.textresponsive{
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  color: white;
  font-size: 24vw;
  /* font-size: 12vw; */
}
/* ====================Margin Classes====================*/
.margin5 {
    margin:5px;
}
.margin10 {
    margin:10px;
}
.margin15 {
    margin:15px;
}
.margin20 {
    margin:20px;
}
.margin25 {
    margin:25px;
}
.margin30 {
    margin:30px;
}

/*===================== Ken Burns Effect ===================*/
.image-wrap {
  width: 100%;
  height: 40vw;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow: hidden;
  position: relative;
}

.image-wrap img {
  width: 100%;
  animation: move 25s ease;
  position: absolute;
}

@keyframes move {
  0% { transform-origin: bottom left; transform: scale(1); }
  100% { transform: scale(1.2); }
}
/*==============================  To Top Button ==============================*/

#ToTopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#ToTopBtn:hover {
  background-color: #555;
}

/*============================================================================*/

.divresizer div {
 /*  Not sure what you are "clamping" here.  Needs a directive... I remmed it out cause it displayed in error
  clamp(1em, 2.5vw, 2.5em);
*/
 font-size: clamp(.8em, 1vw, 1.1em);
}
/* ===================Slide In Contact Form CSS ================*/
.container2 {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding: 1em;
}

ul {
  list-style: circle;
  padding: 0;
}

.brand {
  text-align: center;
}

.brand span {
  color: #fff;
}

.wrapper{
 box-shadow: 0 8px 10px rgb(0 0 0 / 0.5);
border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.wrapper>* {
  padding: 1em;
}
.info {
  background: #3686C5;
  color:#bdbdbd;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.info h3, .info ul{
  text-align: center;
  margin: 0 0 1rem 0;
}

.contact{
  background: #EEEEEE;
}

.contact form {
  padding: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}


.contact form label{
  display: block;
}

.contact form p{
  margin: 0;
}

.contact form .full{
  grid-column: 1/3;
}

.contact form button, .contact form input, .contact form textarea{
  width: 100%;
  padding: .2rem;
  border: 1px solid #666666;
}

.contact form button {
  background: #fff;
  border: 1px solid #666666;
  text-transform: uppercase;
}

.contact form button:hover, .contact form button:focus{
  color: #FFF;
  background: #a6a150;
  outline:0;
}

/*large screens*/
@media(min-width:700px){
  .wrapper{
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
  .wrapper>*{
    padding: 1.5em;
  }
  .info h3, .info ul, .brand{
    text-align: left;
  }
}
/*=======================End of Form Stuff=====================*/

/*==================RESPONSIVE IFRAME CSS==================*/

.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 96%;
  height: 96%;
  margin:0 auto;
}

/*==========================================================*/










.box {
    width:400px;
    height:400px;
    background-color:#aaaa00;
    margin:150px auto;
}

/* ############################## Stuff for Sponsorship ################################ */
.listkids {
  background: #fff;
  /*      border: 2px solid #dedede;
      border-radius: 5px;  */
  /*       position: absolute;
     positon:relative; left 50%;     */
  float: left;
  text-align: center;
  margin: 12px; /* this is around each image.*/
}

.lmargin {
  margin-left: 20vw;
}

.btn-green-form {
  color: #FFFFFF !important;
  text-transform: uppercase;
  cursor: pointer;

/* ======== Below is the code to change the color of the button ======== */
  background: #56ab2f;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #64962C, #73C05A);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #a8e063, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* ===================================================================== */
  font-weight: 700;
  padding: 6px 15px;
  border: 5px solid #bbe87a !important;
  border-radius: 10px;
  transition: all 0.8s ease 0s;
  text-align: center;
  text-decoration: none;
}
.btn-green-form a:link, a:visited {
  color: white;
}
.btn-green-form:hover {
  border-radius: 15px;
  /*==== Below is the code to change the colors of the button on hover ====*/

  color: #ffffff !important;
  background: #000000;
  border-color: #6ca41d !important;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}


.btn-header {
    color: #333 !important;
    text-transform: uppercase;
    cursor: pointer;

/* ======== Below is the code to change the color of the button ======== */
    background: #fff;  /* fallback for old browsers */
    /*background: -webkit-linear-gradient(to right, #64962C, #73C05A);  /* Chrome 10-25, Safari 5.1-6 */
    /*background: linear-gradient(to right, #a8e063, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* ===================================================================== */
    font-weight: 700;
    padding: 10px 25px;
    /*border: 5px solid #bbe87a !important;*/
    border-radius: 10px;
    transition: all 0.5s ease 0s;
    text-align: center;
    text-decoration: none;
}
.btn-header a:link, a:visited {
    color: #000000 ;
}
.btn-header:hover {
    border-radius: 15px;
    font-size:30px;

/*==== Below is the code to change the colors of the button on hover ====*/

    color: #FFF !important;
    /*background: #ff1616;
    border-color: #6ca41d !important;*/
    text-decoration: none;
    transition: all 0.3s ease 0s;
}
.BLUE-text-HIM {
    color:#085498;
}

.phillips-nav {
    font-family: Bubblegum Sans;
    font-size: 1.7em;
    text-align: center;
}

@media(min-width: 992px) { .phillips-nav {
    font-family: Bubblegum Sans;
    font-size: 1.7em;
    text-align: center;
}
}

.inset-shadow {
    box-shadow:
        inset 0px 25px 20px -10px #333,
        inset 0px -25px 20px -10px #333;
}

.read-more-btn {
    color: #FFFFFF !important;
    text-transform: uppercase;
    cursor: pointer;

/* ======== Below is the code to change the color of the button ======== */
    background: #FF9800;  /* fallback for old browsers */
    /*background: -webkit-linear-gradient(to right, #018295, #48cee2);  /* Chrome 10-25, Safari 5.1-6 */
    /*background: linear-gradient(to right, #018295, #48cee2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* ===================================================================== */
    font-weight: 800;
    padding: 10px 25px;
    /*border: 5px solid #70d4e3 !important;*/
    border-radius: 5px;
    transition: all 0.8s ease 0s;
    text-align: center;
    text-decoration: none;
    margin:15px 0;
    /*display: inline-block;*/
}
.read-more-btn a:link, a:visited {
    color: white !important;
}
.read-more-btn:hover {
    /*border-radius: 15px;
    color: #333 !important;*/
/*==== Below is the code to change the colors of the button on hover ====*/

    color: #ffffff !important;
    background: #000;
    /*border-color: orange !important;*/
    text-decoration: none;
    transition: all 0.5s ease 0s;
}
/*######################  End of Code to change colors of Button on Hover #######/*

/* vidwrapper/vidcontainer moved to templates.css */


/* =========================================
   HERRON HILL SIZE GUIDE WIDGET
========================================= */
.hh-size-guide-widget {
  width: 100%;
  padding: 24px 16px 32px;
  background: #f3f3f3;
}

/* =========================================
   INNER WRAP
========================================= */
.hh-size-guide-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* =========================================
   TITLE
========================================= */
.hh-size-guide-title {
  margin: 0 0 14px;
  font-size: 2.1rem;
  line-height: 1.1;
  font-weight: 800;
  color: #111111;
}

/* =========================================
   TABS BAR
========================================= */
.hh-size-tabs {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow: hidden;
}

.hh-size-tab {
  border: 0;
  border-radius: 0;
  padding: 18px 12px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  background: #0b7ba3;
  color: #ffffff;
  transition: background 0.25s ease, color 0.25s ease;
}

.hh-size-tab:hover {
  background: #096c90;
}

.hh-size-tab.is-active {
  background: #ececec;
  color: #111111;
}

/* =========================================
   MAIN PANEL
========================================= */
.hh-size-panel {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 56px;
  align-items: center;
  padding: 46px 52px;
  background: #ececec;
}

/* =========================================
   MEDIA COLUMN
========================================= */
.hh-size-panel-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hh-size-panel-media img {
  display: block;
  width: 100%;
  max-width: 230px;
  height: auto;
}

/* =========================================
   COPY COLUMN
========================================= */
.hh-size-panel-copy h3 {
  margin: 0 0 18px;
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 800;
  color: #111111;
}

.hh-size-panel-copy p {
  margin: 0 0 24px;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #222222;
  max-width: 760px;
}

.hh-size-panel-copy h4 {
  margin: 0 0 8px;
  font-size: 1.35rem;
  line-height: 1.2;
  font-weight: 800;
  color: #111111;
}

.hh-size-panel-copy ul {
  margin: 0;
  padding-left: 24px;
}

.hh-size-panel-copy li {
  margin-bottom: 6px;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #222222;
}

/* =========================================
   TABLET
========================================= */
@media (max-width: 991px) {
  .hh-size-tabs {
    grid-template-columns: repeat(4, 1fr);
  }

  .hh-size-panel {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 34px 28px;
  }

  .hh-size-panel-media img {
    max-width: 210px;
  }

  .hh-size-panel-copy h3 {
    font-size: 1.75rem;
  }
}

/* =========================================
   MOBILE
========================================= */
@media (max-width: 640px) {
  .hh-size-guide-widget {
    padding: 20px 12px 26px;
  }

  .hh-size-guide-title {
    font-size: 1.7rem;
    margin-bottom: 12px;
  }

  .hh-size-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .hh-size-tab {
    padding: 14px 10px;
    font-size: 0.95rem;
  }

  .hh-size-panel {
    padding: 24px 18px;
    gap: 22px;
  }

  .hh-size-panel-media img {
    max-width: 180px;
  }

  .hh-size-panel-copy h3 {
    font-size: 1.45rem;
    margin-bottom: 12px;
  }

  .hh-size-panel-copy p,
  .hh-size-panel-copy li {
    font-size: 0.98rem;
  }

  .hh-size-panel-copy h4 {
    font-size: 1.15rem;
  }
}
/* =========================================
   FOOTER FORM STYLES
========================================= */

.footer-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 260px; /* keeps it compact like your mockup */
}

.footer-form input,
.footer-form textarea {
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 4px;
  background: #e6e6e6;
  font-size: 0.85rem;
  font-family: inherit;
  resize: none;
}

/* Remove harsh focus outlines and keep it clean */
.footer-form input:focus,
.footer-form textarea:focus {
  outline: none;
  background: #ffffff;
}

/* Button */
.footer-form button {
  padding: 8px;
  border: none;
  border-radius: 4px;
  background: #012e5c; /* subtle gold tone (optional) */
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.footer-form button:hover {
  background: #c19d56;
}
/* =========================================
   CENTER CONTENT IN VIEWPORT
========================================= */
.center-viewport {
  display: flex;
  align-items: center;     /* vertical */
  justify-content: center; /* horizontal */

  min-height: 100vh;       /* full viewport height */
  text-align: center;      /* centers text inside */
}

/* =========================================
   HERO BLUE TINT PANEL
========================================= */

.hero-content {
  display: inline-block;
  max-width: 1100px;
  padding: 18px 24px;
  border-radius: 24px;

  /* Blue-tinted transparency */
 background: linear-gradient(
  to bottom,
  rgba(18, 90, 140, 0.22) 0%,
  rgba(10, 60, 95, 0.30) 100%
);

  /* Optional subtle depth */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.hero-content h1,
.hero-content h2 {
  color: #ffffff;
  text-shadow:
    0 2px 3px rgba(0,0,0,0.5),
    0 6px 14px rgba(0,0,0,0.35);
}


.sitemap-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 20px 80px;
  font-family: Arial, Helvetica, sans-serif;
}

.sitemap-title {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 30px;
  color: #111;
}

.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

@media (max-width: 768px) {
  .sitemap-grid {
    grid-template-columns: 1fr;
  }
}

.sitemap-section h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #222;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 6px;
}

.sitemap-section ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.sitemap-section li {
  margin: 6px 0;
}

.sitemap-section a {
  color: #333;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.sitemap-section a:hover {
  color: #000;
  text-decoration: underline;
}

.sitemap-section ul ul {
  padding-left: 15px;
  margin-top: 4px;
}

.sitemap-section ul ul a {
  font-size: 0.9rem;
  color: #555;
}