:root {
    --color-primary-bg: #000000;

    font-size: 1 rem;
  }
  /*
  @font-face {
  font-family: 'OLDENGL';
  src: url('cms/assets/_core/css/OLDENGL.woff') format('woff');

  }
  @font-face {
  font-family: 'Curlz MT';
  src: url('cms/assets/_core/css/CURLZ___.woff') format('woff');tip

  }
  */
  html {
    font-size: 100%;
    line-height: 2 rem;
     /*font-size: calc(14px + 0.390625vw);*/
    scroll-behavior: smooth;
  }

  body {

    color: #333;
    font-family: 'Lato', 'League Spartan', 'Roboto', Arial, sans-serif;
    margin: 0;
    padding: 0;
    border: none;
    background-color:#103A28;
  }


  h1, h2, h3, h4, h5 {
    /*color: #fff;*/
    font-family: 'Inter', 'Roboto', sans-serif;
    font-weight:800;
    /* margin: clamp(0.8em, 1.5vw, 1.5em); */
  }

  h1 {
    font-size: 2.2em;

    /*text-shadow: 3px 3px 5px rgba(54, 54, 54, 0.9);*/
  }

  @media (max-width: 767px) {
    h1 {
      font-size: 1.5em;
      line-height: 1.3em;
      /*text-shadow: 3px 3px 5px rgba(54, 54, 54, 0.9);*/
    }
  }

  h2 {
    font-size: 1.8em;
    line-height: 1.2em;
    /*text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);*/
  }
  /* Media query for screens with a maximum width of 720px */
  @media screen and (max-width: 720px) {
    h2 {
      font-size: 1.3em;
      line-height: 1.5em;
    }
  }

  /* Heading styles */
  h3 {
    font-size: 1.8em;
    line-height: 1.4em;
    color: #A39030;
  }
  @media screen and (max-width: 720px) {
    h3 {
      font-size: 1.5em;
      line-height: 1.5em;
    }
  }

  h4 {
    font-size: 1.5em;
     font-weight:700;
     line-height: 1.35em;
     color: #A39030;
  }

  h5 {
    font-size: 1.2em;
  }

  h6 {
    font-size: 1em;
  }

  /* List styles */
  ul {
      /*margin-left: 20px;*/
      list-style-type: disc;
  }
  li {
    font-size: 1.3em;
    line-height: 1.5em;
    list-style-type: disc;
    margin-left:40px;
  }

  /* Media query for screens with a maximum width of 1300px */
  @media screen and(max-width: 1300px) {
    li {
      font-size: 1em;
    }
  }

  /* Paragraph styles */
  p {
    font-size: 1.3em;
    line-height: 1.3em;
  }
  .fontwt300 {
      font-weight:300;
  }
  .fontwt400 {
      font-weight:400;
  }
  .fontwt500 {
      font-weight:500;
  }
  .fontwt600 {
      font-weight:600;
  }
  .fontwt700 {
      font-weight:700;
  }
  .fontwt800 {
      font-weight:800;
  }

  /* Media query for screens with a maximum width of 1300px */
  @media screen and(max-width: 1300px) {
    p {
      font-size: 1em;
    }
  }

  .margin {
    margin: 2.5vw;
  }

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

  /* Changed Feb 15 to accomdate new menu with buttons */
  a:link {
    color: #A39030;
    text-decoration: none;
    list-style-type: none;
  }
  a:visited {
    color: #A39030;
  }
  a:focus {
    color: #A39030;
  }

  a:hover {
    color: #A28F30;
  }

  /* End of Link CSS */
  /* Radius Styling */
  .radius5 {
    border-radius: 5px;
  }

  .radius10 {
    border-radius: 10px;
    /*border: 6px solid #81781a;*/
  }

  .radius15 {
    border-radius: 15px;
  }

  .radius20 {
    border-radius: 20px;
  }

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

  /* Border Settings */
  .border {
      border: 1px solid #666666;
  }
  .border2 {
      border: 2px solid #666666;
  }
  .border3 {
      border: 3px solid #666666;
  }
  .border4 {
      border: 4px solid #666666;
  }
  .border5 {
      border: 5px solid #666666;
  }

  /* Padding Settings */
  .padding5 {
      padding: 5px;
  }
  .padding10 {
      padding: 10px;
  }
  .padding15 {
      padding: 15px;
  }
  .padding20 {
      padding: 20px;
  }
  .padding25 {
      padding: 25px;
  }
  .padding30 {
      padding: 30px;
  }

  .padding35 {
      padding: 35px;
  }
  .padding40 {
      padding: 40px;
  }
  .padding45 {
      padding: 45px;
  }
  .padding50 {
      padding: 50px;
  }
  @media screen and(max-width: 767px) {
      .padding15,
      .padding20,
      .padding25,
      .padding30,
      .padding35,
      .padding40,
      .padding45,
      .padding50
      {
          padding: 10px;
      }
  }


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

  .center
  {
      text-align: center;
  }

  .right
  {
      text-align: right;
  }

  .left
  {
      text-align: left;
  }

  /*==================End of Alignment Elements =================*/


  .heading
  {
      font-weight: 700;
      color:white;

  }

  /*==========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;
      /*background-color:#000000;*/
      padding: 10px;
      /*font-family: open san, Roboto, sans-serif;
      text-shadow: 3px 3px 5px rgba(54, 54, 54, 0.9);*/
      font-size: 2.1em;
      font-weight: 600;
      font-family:oswald-head, arial;
      line-height:1.2em;
      margin:0;
      width:100%
  }
  @media screen and(max-width: 720px) {
      .tplban {
      font-size: 1em;
      font-weight: 600;
      line-height:1.3em;
      }
  }

  /*================End of Template Banner ===============*/


  /*===================== Data Block 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;
  }

  /*================= End of Data Block CSS ================*/


  /*================== Show Recent ==================*/

  #showrecent
  {
      margin-left: 7%;
      margin-top: 200px;
      padding: 12px;
      padding-top: 6px;
      border: 3px solid #750491;
      border-radius: 15px;
      background-color: #F9EAF9;
      position: absolute;
      ;
      left: 72%;
      top: 10%;
      font-family: Cache-Book;
  }

  @media screen and(max-width: 992px)
  {
      #showrecent
      {
      visibility: hidden;
  }
  }

  @media screen and(max-width: 1132px)
  {
      #showrecent
      {
      top: 40%;
  }
  }

  #showrecentmobile
  {
      width: 95%;
      margin-left: 2%;
      border: 1px solid #750491;
      border-radius: 8px;
      background-color: #F9EAF9;
      position: fixed;
      bottom: 0;
      z-index: 1000;
      font-family: verdana;
      font-size: 12px;
  }

  /*===============End of Show Recent ================*/


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

  .foot {
      padding:5px;
      color:#ffffff;
      font-weight:600;
  }
  .foot a:link
  {
      color: #ffffff;
  }

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

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

  /*=================End of Footer Link CSS ==============*/


  /*================= Copyright CSS =================*/

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

  /*==============End of Copyright CSS ================*/


  /*==================== TPL CSS ====================*/
  /*  These should be in tip-tpl.css ============
  .tpl14 {
      margin: clamp(1em, 1vw, 1em);
   }
  .tpl20
  {
      margin-top: -10px;
      padding: 0 15px;
  }

  .tpl16
  {
      font-family: 'Cachet-Bold';
  }

  .tpl35 {
      line-height: 1.4em;
      padding: 0 15px 0 15px;
  }
  */
  /*============= End of TPL CSS ==============*/


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

  .vtn a:link
  {
      color: #333333;
  }

  .vtn a:hover
  {
      color: #0077c4;
      text-decoration: underline;
  }

  .vtn a:visited
  {
      color: #333333;
  }

  /*===============End of VTN Navigation Links ===============*/


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

  *{
      box-sizing: border-box;
  }

  /*======================SLIDEIN CONTACT FORM CSS======================*/

  /* .info {
  background: #cccccc;
  }*/
  .info h3, .info ul{
      text-align: center;
      margin: 0 0 1rem 0;
  }
  .container2 {
      max-width: 1170px;
      margin-left: auto;
      margin-right: auto;
      padding: 1em;
  }

  ul {
      list-style: none;
      padding: 0;
      list-style-type: none;    /* added for menu with buttons  Feb 15 2023 */
  }

  .brand {
      text-align: center;
  }

  .brand span {
      color: #fff;
  }

  .wrapper{
      box-shadow: 0 4px 10px rgb(0 0 0 / 0.2);
      background-color:#FFF;
  }

  .wrapper>* {
      padding: 1em;
  }
  .info {
     background: #103A28;
  }

  .info1 {
    background: #470000;
  }


  /*  Removed this for single column Event submission form.*/
  .contact form{
      padding: 1em;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap:1rem;
  }

  .contact form label{
      display: block;
      font-weight:600;
  }

  .contact form p{
      margin: 0;
  }

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

  .contact form button, .contact form input, .contact form textarea{
      width: 100%;
      padding: .5rem;
      border: 1px solid #cccccc;
      background-color:#e8f1ef;
  }

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

  .contact form button:hover, .contact form button:focus{
      color: #333;
      background: #ccc;
      outline:0;
  }
  .button {
      background:transparent;
      border:0;
      color:#333;
      text-transform: uppercase;
      font-weight:700;
      font-size:1em;
  }
  button:hover {
      color: #fff;
      background-color:#000000;
  }
  button {
      background: #606060;
      border:0;
      border-radius:5px;
      color: #fff;
     /* padding: 10px 15px; ###### removed for buttons in floated Contact Button worked    */
      cursor:pointer;
  }

  /*================ End of Cotact Form CSS ================*/

  /*=============================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;
  }

  /*==================== End of Titlebar =================*/

  /*==================== Footer Container =================*/

  #footer-container
  {
      min-height: 100px;
      margin: 0 auto;
      background-color: #103a28;
      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*/
  }
  /*
  .footer-article {
  background-image: url("https://tipbuild1.com/cms/assets/_core/image/trees2d.png");
  width:100%;
  }
  */

  /*================ End of Footer Container =================*/

  /*================= Embed Container for Iframe ===================*/

  .embed-container
  {
      position: relative;
      padding-bottom: 56.25%;
      /*padding-top: 15px;*/
      border:16px solid #FFF;
      height: 0;
      overflow: hidden;
  }

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

  /*================= End of Embed Container =====================*/

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

  /*======================  EVENT STUFF ======================*/

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

  /*======================  GALLERY STUFF  =======================*/

  .galleries {
      background-color: #161616;
      color:#ccc;
      text-align:center;
  }
  .displaygal {
      background-color: #000;
  }
  .pagenumgaltop {
      padding-top: 16px;
      text-align:center;
      color:#333;
  }
  .pagenumgalbottom {
      padding:6px;
      padding-bottom:16px;
      /*margin: 25px 0;*/
      text-align:center;
      color:#fff

  }
  .imgbackgrnd {
      background-color: #161616;
      padding:20px;
  }
  .galleryImgContainer {
      background-color: #333;
      vertical-align: top;
     /* border: 10px solid #F0EAD6;*/
      padding:5px;

  }


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


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

  .databoxes
  {
      padding: 10px;
      border: 2px solid #b99245;
      background-color: aqua;
      color: #fff;
      border-radius: 10px;
      /*box-shadow: 0 8px 8px rgb(0 0 0 / 0.4);
      margin: 0 3px 3px 3px;*/
  }
  .databoxes a
  {
      color:#137eaa;
  }
  .databoxes a:hover
  {
      color:#333333;
  }
  .databoxes a:visited
  {
      color:#333333;
  }



  .sub_div
  {
      position: absolute;
      bottom: 0px;
  }
  .tipdatawhite {
      background-color: #FFF;
      border-radius:10px;
      margin: 17px 0 ;
  }
  /*.tipdatablue {
    background-color: #2B60A2;
    border-radius:10px;
    margin: 17px 0 ;
    color:#fff;
  }*/


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

  .tipgrid {
      display: -ms-grid;
      display: grid;
      -ms-grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
      grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));  /* was 25rem  changed to 15 */

  }
  /*
  @media (max-width: 1460px) {
    .tipgrid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (max-width: 735px) {
    .tipgrid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  */
  .tipgrid-footer {
      display: -ms-grid;
      display: grid;
      -ms-grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
      grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));  /* was 25rem  changed to 15 */

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

          display: block;

      }

  }



  .tipgrid2 {
      display: -ms-grid;
      display: grid;
      -ms-grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
      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 .head {
      font-weight: bold;
      background: #fff;
  }

  .tipgrid .tipcell {
      padding:0;
  }

  .tipgrid .tipcell-noborder {
      padding:20px;
  }
  .tipgrid .tipcell-shadowborder {
      padding: 15px;
      border-radius:10px;
      box-shadow: 0 5px 15px rgb(0 0 0 / 0.2);
      margin:15px;   /* changed for Orangeville Charge on phone. */
      position:relative;
      background:#fff; /* added for JD Campground */
  }

  .tipgrid .tipcell-blue {
      padding: 15px;
      border:4px solid #9b9836;
      border-radius:10px;
      box-shadow: 0 3px 10px rgb(0 0 0 / 0.5);
      margin:15px;
      position:relative;
      background:#fff;
  }
  .tipcell__button {
      width:100%;
      padding: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-transform: uppercase;
      color: #ffffff;
      background: #009ADF;
      border-radius: 0 0 9px 9px;
      font-size: 0.8em;
      border-right: 1px solid #008fd5;
      border-left: 1px solid #008fd5;
      border-bottom: 1px solid #008fd5;
      border-top: 1px solid #333;
      position: absolute;
      bottom:0px;
      right:0px;

  }
  .tipcell__button:hover {
      background: #333333;
      transition: ease 1s;
  }

  .tipcell__link {
      font-size: 1em;
      font-weight: 600;
      letter-spacing: .1rem;
      color: #333;
      text-decoration: none;
  }
  .tipcell__link:hover {
      color: #333;
      text-decoration: none;
  }

  .tipcell__link:visited {
      color: #FFF;
      text-decoration: none;
  }
  .sub_div {
      position: absolute;
      bottom: 0px;

  }
  .tipcell__button a:link {
      color: #FFFFFF;
      transition: ease 1s;
  }
  .tipcell__button a:hover {
      background: #333333;
      transition: ease 1s;
  }
  .tipcell__button2 {
      width:100%;
      padding: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-transform: uppercase;
      color: #000;
      background: #009ADF;
      border-radius: 0 0 9px 9px;
      font-size: 0.8em;
      border-right: 1px solid #008fd5;
      border-left: 1px solid #008fd5;
      border-bottom: 1px solid #008fd5;
      border-top: 1px solid #333;

      bottom:0px;
      right:0px;

  }
  .tipcell__button2:hover {
      background: #333333;
      transition: ease 1s;
  }

  .tipcell__button2 a:link {
      color: #FFFFFF;
      transition: ease 1s;
  }
  .tipcell__button2 a:hover {
      background: #333333;
      transition: ease 1s;
  }
  /*====================== END OF TIP GRID STUFF =======================*/


  /*============================  FORM STUFF ===========================*/

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

  label {
      padding: 12px 12px 12px 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;
  }

  .col-25 {
      float: left;
      font-weight:700;
      width: 20%;
      margin-top: 6px;
  }

  .col-75 {
      float: left;
      width: 80%;
      margin-top: 6px;
  }

  /* =============== Clear floats after the columns =============== */
  .fmsect:after {
      content: "";
      display: table;
      clear: both;
  }


  /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
  @media screen and(max-width: 600px) {
      .col-25, .col-75, input[type=Submit] {
      width: 100%;
      margin-top: 0;
  }
  }


  /*==================== End of Form Stuff =====================*/

  /*====================== READ MORE STUFF =======================*/

  .collapse {
      display: none;
      visibility: hidden;
  }
  .collapse.in {
      display: block;
      visibility: visible;
  }
  .collapsing {
      position: relative;
      height: 0;
      overflow: hidden;
      -webkit-transition-timing-function: ease;
      -o-transition-timing-function: ease;
      transition-timing-function: ease;
      -webkit-transition-duration: .35s;
      -o-transition-duration: .35s;
      transition-duration: .35s;
      -webkit-transition-property: height, visibility;
      -o-transition-property: height, visibility;
      transition-property: height, visibility;
  }
  .read-more-btn {
      margin-top:10px;
      background-color:#000;
      color:#FFF;
      padding:10px 15px;
      border-radius:4px;
      border:0;
      cursor:pointer;
      font-family:arial;
      font-weight:700;
      /*margin-left:25px;*/

      margin-bottom:10px;
      text-transform: uppercase;
  }
  .read-more-btn:hover {
      background-color: #4F0000;
  }

  /*======================== END OF READ MORE STUFF ========================*/
  /* +++++++++++++++   This was changed for a purpose on this site!  What was the purpose +++++++++++++*/

  .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;
      display:flex;
  /*    justify-container:center;  ## was causing warning */
      align-content:center;
      top: 0;
      left: 0;
      width: 80%;
      height: 80%;
  }

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

  .event-container {
          padding:20px;
          margin:0 auto;
          overflow:scroll;
          height:500px;
          width:85%;
          background-color:#ffffff;
          padding-top:20px;
          padding-bottom:20px;
          /*border:2px solid #137eaa;*/

  }
  @media (max-width: 450px) {

  .event-container {
      padding:5px;
      width:99%;
      height:auto;
  }
  }





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

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

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

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

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

  .container-fluid
  {
      /*     changed for TipCMs
      padding-right: 15px;
      padding-left: 15px;
      */
      padding-right: 0px;
      padding-left: 0px;
      margin-right: auto;
      margin-left: auto;
      background: #000000;
  }
  @media only screen and (max-width: 959px) {
  .container-fluid
  {
      /*     changed for TipCMs
      padding-right: 15px;
      padding-left: 15px;
      */
      padding-right: 0px;
      padding-left: 0px;
      margin-right: auto;
      margin-left: auto;
      background: #000000;
  }
  }

  .row
  {
      /*  margin-right: -15px;    Removed for TipCMS
      margin-left: -15px;
      */
      margin-right: 0px;
      margin-left: 0px;
  }

  .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
  {
      /*    position: relative;
      min-height: 1px;
      padding was 15 right and 15 left  changed for TipCMS */
      padding-right: 0px;
      padding-left: 0px;
  }

  @media (min-width: 992px)
  {
      .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%;
  }
  /* Modified for TipCMS Template 10 5 pics accross
  .col-md-2 {
  width: 16.66666667%;
  }
  */
  .col-md-2
  {
      width: 20%;
  }

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

  * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }
  *:before,
  *:after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }


  .resize:hover {
      background-color:#333;
      transform: scale(1.08,1.08);
      transform: translate(50%, 50%);
      transform-origin: 1;
      transition: ease .3s;
      border: 1px solid #333;
      z-index:1;
  }

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

  .container2 {
      max-width: 1170px;
      margin-left: auto;
      margin-right: auto;
      padding: 1em;
  }

  /*  .highslide img {
      border: 2px solid silver;
  }
  */
  .highslide:hover img {
      border-color: gray;
  }
  .highslide-image {
      border-width: 2px;
      border-style: solid;
      border-color: white;
  }
  .highslide-dimming {
      /*position: absolute;*/
      background: black;
  }
  /*=================== End Highslide CSS ================*/

  /*============================= 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:100%;
      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.7);
  }
  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;
  }
  .content-color {
      background: rgba( 255, 255, 255, 0.55 );
      box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
      backdrop-filter: blur( 1px );
      -webkit-backdrop-filter: blur( 4px );
      border-radius: 10px;
      border: 1px solid rgba( 255, 255, 255, 0.18 );
      width:100%;
      height:99%;
      padding:20px;
  }
  /*========================= Basckground CSS ===============================*/
  .wood  {
      background-image: url("/cms/assets/_core/image/wood4.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
  }
  .clouds  {
      background-image: url("/cms/assets/_core/image/background3.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
  }
  .clouds2  {
      background-image: url("/cms/assets/_core/image/background7.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
  }
  .pastelclouds  {
      background-image: url("/cms/assets/_core/image/background1.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
  }
  .gradient1  {
      background-image: url("/cms/assets/_core/image/gradient1.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
  }
  .gradient2 {
      background-image: linear-gradient(135deg, #d2fddf 0%, #69a101 100%);
      background-position: center center;
      background-attachment: fixed;
      background-size:cover;
  }
  .gradient3 {
      background-image: linear-gradient(135deg, #f7c153 0%, #621903 100%);
      background-position: center center;
      background-attachment: fixed;
      background-size:cover;
  }
  .gradient4 {
      background-image: linear-gradient(215deg, #ffd4c2 0%, #41007a 100%);
      background-position: center center;
      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;
  }
  .blue-gradient-circles {
      background-image: radial-gradient(circle at 29% 55%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 4%,transparent 4%, transparent 44%,transparent 44%, transparent 100%),radial-gradient(circle at 85% 89%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 51%,transparent 51%, transparent 52%,transparent 52%, transparent 100%),radial-gradient(circle at 6% 90%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 53%,transparent 53%, transparent 64%,transparent 64%, transparent 100%),radial-gradient(circle at 35% 75%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 6%,transparent 6%, transparent 98%,transparent 98%, transparent 100%),radial-gradient(circle at 56% 75%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 16%,transparent 16%, transparent 23%,transparent 23%, transparent 100%),radial-gradient(circle at 42% 0%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 3%,transparent 3%, transparent 26%,transparent 26%, transparent 100%),radial-gradient(circle at 29% 28%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 51%,transparent 51%, transparent 75%,transparent 75%, transparent 100%),radial-gradient(circle at 77% 21%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 35%,transparent 35%, transparent 55%,transparent 55%, transparent 100%),radial-gradient(circle at 65% 91%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 46%,transparent 46%, transparent 76%,transparent 76%, transparent 100%),linear-gradient(45deg, rgb(83, 91, 235),rgb(17,3,141));
      background-position: center center;
      background-attachment: fixed;
      background-size:cover;
  }
  .black-gradient-circles {
      background-image: radial-gradient(circle at 99% 33%, hsla(235,0%,48%,0.03) 0%, hsla(235,0%,48%,0.03) 37%,transparent 37%, transparent 100%),radial-gradient(circle at 46% 16%, hsla(235,0%,48%,0.03) 0%, hsla(235,0%,48%,0.03) 43%,transparent 43%, transparent 100%),radial-gradient(circle at 99% 25%, hsla(235,0%,48%,0.03) 0%, hsla(235,0%,48%,0.03) 22%,transparent 22%, transparent 100%),radial-gradient(circle at 57% 88%, hsla(235,0%,48%,0.03) 0%, hsla(235,0%,48%,0.03) 86%,transparent 86%, transparent 100%),radial-gradient(circle at 82% 78%, hsla(235,0%,48%,0.03) 0%, hsla(235,0%,48%,0.03) 22%,transparent 22%, transparent 100%),linear-gradient(90deg, rgb(12,11,11),rgb(12,11,11));
      background-position: center center;
      background-attachment: fixed;
      background-size:cover;
  }
  .dkgreen-grad-circles {
      background-image: radial-gradient(circle at 67% 83%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 1%,transparent 1%, transparent 5%,transparent 5%, transparent 100%),radial-gradient(circle at 24% 80%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 27%,transparent 27%, transparent 63%,transparent 63%, transparent 100%),radial-gradient(circle at 23% 5%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 26%,transparent 26%, transparent 82%,transparent 82%, transparent 100%),radial-gradient(circle at 21% 11%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 35%,transparent 35%, transparent 45%,transparent 45%, transparent 100%),radial-gradient(circle at 10% 11%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 21%,transparent 21%, transparent 81%,transparent 81%, transparent 100%),radial-gradient(circle at 19% 61%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 20%,transparent 20%, transparent 61%,transparent 61%, transparent 100%),radial-gradient(circle at 13% 77%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 63%,transparent 63%, transparent 72%,transparent 72%, transparent 100%),radial-gradient(circle at 30% 93%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 33%,transparent 33%, transparent 82%,transparent 82%, transparent 100%),linear-gradient(360deg, rgb(3,96,40),rgb(7,44,1));
      background-position: center center;
      background-attachment: fixed;
      background-size:cover;
  }
  .dkbrg-gradient-circles {
      background-image: radial-gradient(circle at 99% 33%, hsla(235,0%,48%,0.03) 0%, hsla(235,0%,48%,0.03) 37%,transparent 37%, transparent 100%),radial-gradient(circle at 46% 16%, hsla(235,0%,48%,0.03) 0%, hsla(235,0%,48%,0.03) 43%,transparent 43%, transparent 100%),radial-gradient(circle at 99% 25%, hsla(235,0%,48%,0.03) 0%, hsla(235,0%,48%,0.03) 22%,transparent 22%, transparent 100%),radial-gradient(circle at 57% 88%, hsla(235,0%,48%,0.03) 0%, hsla(235,0%,48%,0.03) 86%,transparent 86%, transparent 100%),radial-gradient(circle at 82% 78%, hsla(235,0%,48%,0.03) 0%, hsla(235,0%,48%,0.03) 22%,transparent 22%, transparent 100%),linear-gradient(229deg, rgb(24,0,0),rgb(24,0,0));
      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;
  }
  .purple-grad-circles {
      background-image: radial-gradient(circle at 19% 90%, rgba(190, 190, 190,0.04) 0%, rgba(190, 190, 190,0.04) 17%,transparent 17%, transparent 100%),radial-gradient(circle at 73% 2%, rgba(78, 78, 78,0.04) 0%, rgba(78, 78, 78,0.04) 94%,transparent 94%, transparent 100%),radial-gradient(circle at 45% 2%, rgba(18, 18, 18,0.04) 0%, rgba(18, 18, 18,0.04) 55%,transparent 55%, transparent 100%),radial-gradient(circle at 76% 60%, rgba(110, 110, 110,0.04) 0%, rgba(110, 110, 110,0.04) 34%,transparent 34%, transparent 100%),radial-gradient(circle at 68% 56%, rgba(246, 246, 246,0.04) 0%, rgba(246, 246, 246,0.04) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 71% 42%, rgba(156, 156, 156,0.04) 0%, rgba(156, 156, 156,0.04) 47%,transparent 47%, transparent 100%),radial-gradient(circle at 46% 82%, rgba(247, 247, 247,0.04) 0%, rgba(247, 247, 247,0.04) 39%,transparent 39%, transparent 100%),radial-gradient(circle at 50% 47%, rgba(209, 209, 209,0.04) 0%, rgba(209, 209, 209,0.04) 45%,transparent 45%, transparent 100%),linear-gradient(90deg, rgb(84, 36, 210),rgb(47,30,100));
      background-position: center center;
      background-attachment: fixed;
      background-size:cover;
  }
  .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));
  }
  .gethsemane  {
      background-image: url("/cms/assets/_core/image/gethsemane.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
  }
  .guitar {
      background-image: url("/cms/assets/_core/image/guitar.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
  }
  .verseoftheday {
      background-image: url("/cms/assets/_core/image/open-bible(1).jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
  }
  .God {
      background-image: url("/cms/assets/_core/image/God-background.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
  }
  .worship1  {
      background-image: url("/cms/assets/_core/image/worship.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
  }
  .worship2  {
      background-image: url("/cms/assets/_core/image/worship2.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
  }
  .parchment  {
      background-image: url("/cms/assets/_core/image/background5.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
  }
  .stripes1  {
      background-image: url("/cms/assets/_core/image/gradient2.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
  }
  .smoke1  {
      background-image: url("/cms/assets/_core/image/background2.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
  }
  .grunge1  {
      background-image: url("/cms/assets/_core/image/grunge1.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
  }
  .grunge2  {
      background-image: url("/cms/assets/_core/image/grunge2.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
  }
  .grunge3  {
      background-image: url("/cms/assets/_core/image/grunge3.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
  }
  .abstract1  {
      background-image: url("/cms/assets/_core/image/abstract1.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
  }
  .nightsky  {
      background-image: url("/cms/assets/_core/image/night-sky2.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
  }
  .crowd  {
      background-image: url("/cms/assets/_core/image/elks-crowd6.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
  }
  .redchecker  {
      background-image: url("/cms/assets/_core/image/red-checks.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
  }
  .mifflin-bkgrnd  {
      background-image: url("/cms/assets/_core/image/Mifflin-Bkgrnd.jpg");
      background-position: center center;
      background-repeat: repeat-y;
  }
  /*.trees  {
      background-image: url("/cms/assets/_core/image/19E.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
      height:500px;
  }*/
  .orangegradient {
      background: -webkit-linear-gradient(to right, #fcf83b, #fe8052);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #fcf83b, #fe8052); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      background-position: center center;
      background-attachment: fixed;
      background-size:cover;
  }
  .bluegradient  {
      background: #004AAD;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to left, #6BD2F0, #004AAD);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to left, #6BD2F0, #004AAD); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      background-position: center center;
      background-attachment: fixed;
      background-size:cover;
  }
  .redgradient  {
      background: #FF1615;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to left, #FF9415, #FF1615);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to left, #FF9415, #FF1615); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      background-position: center center;
      background-attachment: fixed;
      background-size:cover;
  }
  .greengradient  {
      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+ */
      background-position: center center;
      background-attachment: fixed;
      background-size:cover;
  }
  .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;
  }
  .wellblue {
      background: rgb(74,153,156);
      background: linear-gradient(0deg, rgba(74,153,156,1) 0%, rgba(134,199,217,1) 80%);
  }
  .wellorange {
      background: rgb(156,129,56);
      background: linear-gradient(0deg, rgba(156,129,56,1) 0%, rgba(168,140,64,1) 80%);
  }
  .wellteal {
      background: rgb(134,153,141);
      background: linear-gradient(0deg, rgba(134,153,141,1) 0%, rgba(148,172,158,1) 80%);
  }
  .wellgreen {
      background: rgb(100,126,38);
      background: linear-gradient(0deg, rgba(100,126,38,1) 0%, rgba(120,151,46,1) 80%);
  }
  .wellbrown {
      background: rgb(71,64,47);
      background: linear-gradient(0deg, rgba(71,64,47,1) 0%, rgba(135,120,89,1) 100%);
  }
  /*=============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%);
  }
  .backwhite {
      background-color: #ffffff;
      color:#333;
      /* height:100%;*/
  }
  .backblack {
      background-color: #000000;
      color:#fff;
  }

  /*====================End of Background Colors ====================*/


  /*==============================DropDown Menu============================== */

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


  .hover1 img {
      /* filter: url(filters.svg#grayscale); Firefox 3.5+ */

     /* padding:10px;
      border-radius:10px;*/
      filter: none;
      -webkit-filter: grayscale(0);
      /*
      -webkit-transform: scale(1.01);
      -webkit-transition: all .3s ease-in-out;
      #### two lines above were causing warnings
      */
  }
  /*  Below is causing a fatal error
  .hover1 img:hover {

      /*filter: gray; /* IE5+ */*/
      /*-webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary
      -webkit-transform: scale(1.15); /*<-- ###############################  THIS CODE IS CREATING A FATAL ERROR  IT IS INVALID ############################## /
      -webkit-transition: all .2s ease-in-out;
      /*padding:10px;
      border-radius:10px;
  }
  */
  .hover2 div {
      width: 100%;
      height:100%;
      display: inline-block;
  }
  .hover2 div:hover {
      background-color: #000000;
  }

  .center {
      position: relative;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
  }
  /* #####################  BOOSTRAP BTN-SUCCESS MODIFIED FOR CROSSPOINT SERMON  BTN-CLOSE #################*/
  .btn {
      padding:2px 12px;
      margin:5px;
  }
  .btn-close {
    color: #fff;
    background-color: #065AC8;
    border-color: #034FB6;
  }
  .btn-close:hover,
  .btn-close:focus,
  .btn-close.focus,
  .btn-close:active,
  .btn-close.active,
  .open > .dropdown-toggle.btn-close {
    color: #fff;
    background-color: #034FB6;
    border-color: #398439;
    cursor:pointer; /*======= added this line 3/16/23 ===========*/
  }
  .btn-close:active,
  .btn-close.active,
  .open > .dropdown-toggle.btn-close {
    background-image: none;
  }
  .btn-close.disabled,
  .btn-close[disabled],
  fieldset[disabled] .btn-close,
  .btn-close.disabled:hover,
  .btn-close[disabled]:hover,
  fieldset[disabled] .btn-close:hover,
  .btn-close.disabled:focus,
  .btn-close[disabled]:focus,
  fieldset[disabled] .btn-close:focus,
  .btn-close.disabled.focus,
  .btn-close[disabled].focus,
  fieldset[disabled] .btn-close.focus,
  .btn-close.disabled:active,
  .btn-close[disabled]:active,
  fieldset[disabled] .btn-close:active,
  .btn-close.disabled.active,
  .btn-close[disabled].active,
  fieldset[disabled] .btn-close.active {
    background-color: #5cb85c;
    border-color: #4cae4c;
  }
  .btn-close .badge {
    color: #5cb85c;
    background-color: #fff;
  }

  /* #####################  END OF BOOSTRAP BUTTON SUCCESS MODIVIED FOR CROSSPOINT SERMON CLOSE #################*/
  /*====================Very nice Button Hover Effect====================*/


  .btn1 {
      text-transform: uppercase;
  background: #ffffff;


      padding: 8px 30px;
      border: 4px solid #ccc !important;
      border-radius: 0;
      display: inline-block;
      transition: all 0.8s ease 0s;
      position: relative;
      color: #FFFFFF !important;
  }
  .btn1:hover {
      border-radius: 50px;

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

      color: #494949 !important;
      /* ======== Below is the code to change the color of the button ======== */
      background: #d8782e;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #e3ae46, #d8782e);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #e3ae46, #d8782e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      /* ===================================================================== */

      border-color: #FFF !important;
      text-decoration: none;
      transition: all 0.5s ease 0s;
  }
  /* ==================================================================== */

  .btn2 {
      color: #FFFFFF !important;
      text-transform: uppercase;
      background: #137EAA;
      padding: 5px 25px;
      border-radius: 10px;
      display: inline-block;
      transition: all 0.8s ease 0s;
  }
  .btn2:hover {
      color: #FFFFFF !important;
      background: #7CADCE;
      border-radius: 10px;
      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; */
  }

  .centering {
      display: grid;
      place-items: center;
  }
  .margin20 {
      margin:20px;
  }


  .box {
      width:400px;
      height:400px;
      background-color:#aaaa00;
      margin:150px auto;
  }
  /*=================== Gold Border of 5 Pixels =====================*/

  .gold
  {
      border: 5px solid #a6a150;
  }

  /*========================== Gold Text for s etc =========================*/
  .goldtext {
      color:#9b9045;
  }

  .transp {
      background:transparent;
  }


  /*======================= These are associated with specific sites =======================*/

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

  .tan {
      background-color:#ece9da ;
  }

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

  .purple
  {
      color: #5c2e91;
  }

  .red
  {
      color: #e24045;
  }

  .blue
  {
      color: #008FD5;
  }

  .orange
  {
      color: #fdaf17;
  }

  .teal
  {
      color: #00aa94;
  }

  .white
  {
      color: #FFFFFF;
  }
  /*=================== End of Text Colors =================*/



  .dropdown-submenu {
      position: relative;
  }

  .dropdown-submenu>.dropdown-menu {
      top: 0;
      left: 100%;
      margin-top: -6px;
      margin-left: -1px;
      -webkit-border-radius: 0 6px 6px 6px;
      -moz-border-radius: 0 6px 6px;
      border-radius: 0 6px 6px 6px;
  }

  .dropdown-submenu:hover>.dropdown-menu {
      display: block;
  }

  .dropdown-submenu>a:after {
      display: block;
      content: " ";
      float: right;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      border-width: 5px 0 5px 5px;
      border-left-color: #ccc;
      margin-top: 5px;
      margin-right: -10px;
  }

  .dropdown-submenu:hover>a:after {
      border-left-color: #fff;
  }

  .dropdown-submenu.pull-left {
      float: none;
  }

  .dropdown-submenu.pull-left>.dropdown-menu {
      left: -50%;
      margin-left: 10px;
      -webkit-border-radius: 6px 0 6px 6px;
      -moz-border-radius: 6px 0 6px 6px;
      border-radius: 6px 0 6px 6px;
  }

  /*============= End of DropDown Menu ==============*/
  .pv {
      padding-top:80px !important;
      padding-bottom:80px !important;
  }

  @media screen and(max-width: 720px) {
  .pv {
      padding-top:20px !important;
      padding-bottom:25px !important;
  }
  }
  /*@media screen and (min-width: 720px) {
  .pv {
      padding-top:40px !important;
      padding-bottom:40px !important;
  }
  }*/

  /*=========== mh stands for margin horizontal ===========*/
  .mh {
      margin-left:80px !important;
      margin-right:80px !important;
  }

  @media screen and(max-width: 720px) {
  .mh {
      margin-left:20px !important;
      margin-right:20px !important;
  }
  }
  /*@media screen and (min-width: 720px) {
  .mh {
      margin: left 100px !important;
      margin-right:100px !important;
  }
  }
  @media screen and (min-width: 1023px) {
  .mh {
      margin-left:60px !important;
      margin-right:60px !important;
  }
  }*/
  .oc-blue-button {
      padding: 5px;
      background-color: #137eaa;
      color:#ffffff;
      border-radius:5px;
      width:125px;
      margin:0 auto;
      text-align:center;
      text-transform: uppercase;
      font-weight:600 ;
  }
  /*for embedding iframe videos*/
  .wrapper1 {
    display: flex;
    flex-direction:column;

    align-items: center;
    width: 100%;
    height: 100%;
    padding-bottom:10px;
  }
  .vidwrapper {
      width: 100%; max-width: 800px;
    /*  height:100%; */
      margin: 0 auto;
      padding: 15px 10px;
  }
  .vidcontainer {
      width:100%; max-width: 100%; height: 0;
      padding-bottom: 56.25%;
      position: relative;
      border:2px solid #333;
  }
  .vidcontainer iframe {
      width: 100%; height: 100%;
      position: absolute; top: 0; left: 0;
  }

  .goldborder {
      border:4px solid #B98D33;
      border-radius:10px;
  }
  .goldtext {
      color: #A39030;
  }

  .oswald {
      font-family: 'Oswald', sans-serif;
      font-weight:700;
      font-size:1.3em;
  }
  .oswald-head {
      font-family: 'Oswald', sans-serif;
      font-weight:700;
      font-size:2.8em;
      color:#8c0102;
  }

  .lato {
      font-family: 'Lato', sans-serif;
      font-weight:400;
  }
  .lato-head {
      font-family: 'Lato', sans-serif;
      font-weight:700;
      font-size:2.5em;
  }
  .Lucida{
    font-family: 'Lucida Sans Italic', sans-serif;
    font-weight:500;
  }
  .roboto {
      font-family: 'Roboto', sans-serif;
      font-weight:400;
  }
  .roboto-head {
      font-family: 'Roboto', sans-serif;
      font-weight:700;
      font-size:2.5em;
  }

  .image-container {
  width: 50%; /* Set the desired width as a percentage */
  height: auto; /* Let the height adjust proportionally */
  overflow: hidden; /* Hide overflowing content */
  margin: 10px; /* Add margin to separate containers (optional) */
  }

  .image-container img {
  width: 100%; /* Make the image fill the container */
  height: auto; /* Maintain aspect ratio */
  }

  .inter {
      font-family: 'Inter', sans-serif;
      font-weight:400;
  }
  .inter-head {
      font-family: 'Inter', sans-serif;
      font-weight:700;
      font-size:2.5em;
  }
  /*------------End Font Family Classes-----------*/
  .pacifico {
      font-family: 'Pacifico', cursive;
  }

  .stencil {
      font-family: 'Stardos Stencil', sans-serif;
      font-weight: 600;
  }
  .shadow {
      /*border:1px solid #000;*/
      border:4px solid #000;
      border-radius:10px;
      box-shadow: 0 8px 13px rgb(0 0 0 / 1.0);
  }

  /* ###################### hover row effect #######################*/

  tr.hoveron1 {
      background-color: #c7e0d2;
  }

  tr.hoveroff1 {
      background-color: #F6FBEF;
  }
  tr.hoveron2 {
      background-color: #c7e0d2;
  }

  tr.hoveroff2 {
      background-color: #daf3e5;
  }
  .text-shadow {
      text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.9);
  }

  .font-selection, .text-input {
    margin: 10px;
    padding:10px;
    font-size:1.2em;
    font-weight:400;
    color:#945029;
  }

  .text-display {
    margin: 10px;
    /*border: 1px solid #ccc;*/
    padding: 10px 20px;
  font-size: 1.8em;
  color: #000;
  }
  .hoverbk a:hover {
  display: block;
  background-color:#ccc;
  }
  .headline {
    text-align:center;
    font-weight:800;
    font-size:20px;
  }
  .instruct {
    text-align:left;
    padding:15px;
    font-size:14px;
  }


  /* image overlay with text */

  .imgcontainer {
  position: relative;
  width: 100%;
  }

  .image {
  display: block;
  width: 100%;
  height: auto;
  }

  .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #152E4D;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  opacity: .7;
  }

  .imgcontainer:hover .overlay {
  height: 50%;
  }

  .text {
  white-space: nowrap;
  color: #FFF;
  font-family: 'League Spartan', garamond;
  font-size: 1.5em;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
      font-weight:700;
      font-size:1.5em;
  }
  /* end of image overlay with text */
  .vid-aspect-ratio {
      aspect-ratio: 16/9;
      width:100%;
  }
  .white-shadow-box {
      border-radius:10px;
      box-shadow: 0 5px 15px rgb(0 0 0 / 0.2);
      padding:10px; background-color:#fff;
  }
  /*  .top  and container-top and and body here is used in the .css back to top   --- not sure where else. */
  /*Floating Back-To-Top Button*/
  .back-to-top-wrapper {
      position: absolute;
      top: 100vh;
      right: 1.5rem;
      bottom: 3em;
      width: 3em;
      pointer-events: none;
    }
    .back-to-top-link {
      position: fixed;
      position: sticky;
      pointer-events: all;
      top: calc(100vh - 5rem);
      display: inline-block;
      text-decoration: none;
     /* font-size: 1rem;
      line-height: 1rem;
      text-align: center;
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      padding: 0.25rem;
      border: 2px solid #BEB776;
      background-color: #d6e3f0;*/
      transition: transform 90ms ease-in;
    }
    .back-to-top-link:hover, .back-to-top-link:focus {
      transform: scale(1.1);

    }
    .back-to-top-link:focus {
      outline: none;
      box-shadow: 0 0 0 0px #4e85c0;
    }

    .zoom {
    background-color: #FFF;
    transition: transform 0.3s ease-in-out; /* Smoother transition with ease-in-out */
    margin: 0 auto;
    overflow: hidden; /* Prevents any part of the element from spilling outside */
}

.zoom:hover {
    transform: scale(1.03);
    transform-origin: center center; /* Ensures zoom happens from the center of the element */
}

  /* Honey for forms */

  .website {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* end or Honey /*