:root {
  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;
}


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: 2.0em;
  line-height: 1.5em;
  /*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.8em;
    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.5em;
}
.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: #000000;
}

/* 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: #d3963f;
    background-color:#6c3f00;
    padding: 13px 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: 700;
    font-family:inter, oswald, arial;
    line-height:1.2em;
    margin:0;
    width:100%
}
@media screen and(max-width: 720px) {
    .tplban {
    font-size: 1.2em;
    font-weight: 600;
    line-height:1.1em;
    }
}

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

.wrapper>* {
    padding: 1em;
}
.info {
   background: #4F0000;
}

.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:#fff;
}

.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: #4f0000;
    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: #4f0000;
}
@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: #4F0000;
}
}

.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 ===============================*/

.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-radius:5px;
    box-shadow: 0 8px 13px rgb(0 0 0 / 0.4);
}

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