body {
    font-size: 18px;
    font-family: Roboto, sans-serif;
    line-height: 1.5em;
    color:#333;
    margin:0 auto;
    background-color: #ffffff;
}

h1 {
  text-align:center;
  font-family: Oswald, Inter;
  font-size:2.5em;
  font-weight:700;
  /*color:#C89B14;*/
 }
@media only screen and (max-width: 768px) {
h1 {
  font-size: 2em;
  font-weight:500;
  line-height:1.2em;

}
}
h2 {
  text-align:center;
  font-family: Oswald, Inter;
  font-size:1.8em;
  font-weight:700;
  /*color:#C89B14;*/
 }
@media only screen and (max-width: 768px) {
h2 {
  font-size: 1.5em;
  font-weight:500;

}
}


 h3, h4, h5 {
     font-family: Roboto, sans-serif;
     font-weight:600;
     color: #C89B14;
 }
 h3 {
     font-family: Oswald, Roboto;
     font-size:1.5em;
     font-weight:700;
     line-height:1.2em;
     color: #053968;
     padding:5px 0;
 }
@media only screen and (max-width: 768px) {
h3 {
  font-size: 1.3em;
  font-weight:500;

}
}

 h4 {
  font-family: EB Garamond, serif;
     font-size:1.1em;
     font-weight:300;
     letter-spacing: .08em;
     line-height:1.2em;
     color: #B9A25F;
     /*margin-left:-40px;*/
     padding:10px;
     background-color: #fff;
     margin-right:-40px;
     text-align:right;

 }

 @media only screen and (max-width: 768px) {
h4 {
  font-size: 1em;
  font-weight:500;
}
}

 h5 {
     font-family: EB Garamond, serif;
     font-size:2.1em;
     font-weight:300;
     letter-spacing: .08em;
     line-height:1.2em;
     color: #B9A25F;
     /*margin-left:-40px;*/
     padding:10px;
     /*background-color: #fff;*/
     text-align:center;
 }

@media only screen and (max-width: 768px) {
h5 {
  font-size: 1.4em;
  font-weight:500;
}
}

 h6 {
     font-family: EB Garamond, serif;
     font-size:1.5em;
     font-weight:300;
     letter-spacing: .08em;
     line-height:1.2em;
     color: #B9A25F;
     /*margin-left:-40px;*/
     padding:10px;
     /*background-color: #fff;*/
     text-align:center;
 }
 @media only screen and (max-width: 768px) {
h6 {
  font-size: 1.1em;
  font-weight:500;
}
 }

.dot {
  height: 10px;
  width: 10px;
  background-color: #9A791F;
  border-radius: 50%;
  display: inline-block;
  margin-left:-5px;
}
.left-border {
    border-left:1px solid #9c761c;
    padding:20px;
}

.dot2 {
    float:right;
  height: 10px;
  width: 10px;
  background-color: #9A791F;
  border-radius: 50%;
  display: inline-block;
  margin-right:-4px;
}

/* List styles */
li {
    font-size: 1.2em;
  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.2em;
  line-height: 1.5em;
}

/* 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 {
  color: #000;
  text-decoration: none;
  list-style-type: none;
}

a:visited {
  color: #000;
}

a:hover {
  color: #000000;
}

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

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

.radius15 {
  border-radius: 15px;
}

.radius20 {
  border-radius: 20px;
}

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

/* Border Settings */
.border1 {
    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;
}



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

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

/*===============below is for the template instruction display */
.instruct {
    text-align:center;
    font-size:18px;
    font-weight:800;
    padding:0 25px 0 25px;
}
.instext {
    font-size:16px;
    text-align:left;
    font-weight:400;
    padding:0 25px 0 25px;
  }
/*=============== End fo instruction display=========*/

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

.foot {
    padding:5px;
    color:#ffffff;
    font-weight:800;
}
.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 8px 10px rgb(0 0 0 / 0.5);
}*/

.wrapper>* {
    padding: 1em;
}
.info {
    background: #fff;
    color: #333;
}


/* .contact{
    background: #EEEEEE;
} */

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


.contact form label{
    display: block;
}

.contact form p{
    margin: 0;
}

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

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

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

.contact form button:hover, .contact form button:focus{
    color: #333;
    background: #ccc;
    outline:0;
}
.button {
    background:transparent;
    border:0;
    color:#333;
    text-transform: uppercase;
    font-weight:700;
    font-size:1em;
}
.button:hover {
    color: #333;
}

/*================ 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: #3686C5;
    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: #f8f7ed;
    color:#333;
    text-align:center;
}
.displaygal {
    background-color: #f8f7ed;
}
.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: #f8f7ed;
    padding:20px;

}


span.paginator { background-color:#016839; 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: #39c004; }
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;
    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 ;
}



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

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

}

.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;
    position: relative; 
}

.tipgrid .tipcell-noborder {
    padding:20px;
}
.tipgrid .tipcell-shadowborder {
    padding: 15px;
    border-radius:10px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.5);
    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;
    margin:3px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

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 {
    background-color:#52720d;
    color:#FFF;
    padding:10px 15px;
    border-radius:4px;
    border:0;
    cursor:pointer;
    font-family:arial;
    font-weight:700;
    margin-left:30px;
}
.read-more-btn:hover {
    text-decoration: underline;
}

/*======================== 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;
    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;
        /*margin-top:20px;
        margin-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:#000;
}

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




.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:30%;
    text-align:center;
}
/* Double-color dashed line */

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

.hr4 {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}
.hr {
    border: none;
    background-color: #b2a91b;;
    color: #b2a91b;
    overflow: visible;
    text-align: center;
    height: 2px;
    width:99%;
}
.hr:after {
    background-color: #ECE9DA;
    color:#b2a91b;
    font-size:28px;
    content: '\2726';
    padding: 0 10px;
    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;
}
.gethsemane  {
    background-image: url("/cms/assets/_core/image/gethsemane.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:cover;
}
.worship1  {
    background-image: url("/cms/assets/_core/image/worship1.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;
}
/*.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;
}
.well-green-gradient {
    background: linear-gradient(to right, #969d50, #c4c09f);
}

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


.hover1 img {
    /* filter: url(filters.svg#grayscale); Firefox 3.5+ */
    filter: none;
    -webkit-filter: grayscale(0);
    -webkit-transform: scale(1.01);
    -webkit-transition: all .8s ease-in-out;
}

.hover1 img:hover {
    filter: gray; /* IE5+ */
    -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
    -webkit-transform: scale(1.05);
    -webkit-transition: all .8s ease-in-out;
}

.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:2px;
}
.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 {
    color: #FFFFFF !important;
    text-transform: uppercase;

    /* ======== Below is the code to change the color of the button ======== */
    background: #56ab2f;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #64962C, #73C05A);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #a8e063, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    /* ===================================================================== */

    padding: 8px 30px;
    border: 5px solid #bbe87a !important;
    border-radius: 0;
    display: inline-block;
    transition: all 0.8s ease 0s;
}
.btn1:hover {
    border-radius: 50px;

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

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

.btn2 {
    color: #FFFFFF !important;
    text-transform: uppercase;
    /*background: #cccccc;
    padding: 10px 35px;
    border: 1px solid #666666 !important;*/
    border-radius: 0;
    display: inline-block;
    transition: all 0.8s ease 0s;
}
.btn2:hover {
    color: #494949 !important;
    background: #474747;
    border-color: #666666 !important;
    text-decoration: none;
    transition: all 0.5s ease 0s;
}

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

.textresponsive{
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    color: white;
    font-size: 24vw;
    /* font-size: 12vw; */
}

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

.image-wrap img {
width: 100%;
animation: move 25s ease;*/
/* Add infinite to loop. */

/*-ms-animation: move 25s ease;
-webkit-animation: move 25s ease;
-o-animation: move 25s ease;
-moz-animation: move 25s ease;
position: absolute;
}*/
/*  MANY ERRORS IN THIS SECTION.  NOT SURE IF IT IS  PART OF THE kEN BURNS EFFECT BECUASE THIS IS NO ENDING REM  */

@-webkit-keyframes move {
    0%{
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;
    transform: scale(1.0);
    -ms-transform: scale(1.0);
    /* IE 9 */

    -webkit-transform: scale(1.0);
    /* Safari and Chrome */

    -o-transform: scale(1.0);
    /* Opera */

    -moz-transform: scale(1.0);
    /* Firefox */
}
100% {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    /* IE 9 */

    -webkit-transform: scale(1.2);
    /* Safari and Chrome */

    -o-transform: scale(1.2);
    /* Opera */

    -moz-transform: scale(1.2);
    /* Firefox */
}

}
/*==============================  To Top Button ==============================*/
/*  THESE ERRORS ARE CAUSE BY THE PROBLEM WITH THE SECTION IMMEDIATELY ABOVE   */


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

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

/*========================== Gold Text for Headers etc =========================*/
.goldtext {
    color:#B9A25F;
    font-weight:600;
}

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

/*=============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%);
    width:10.6%;
    padding:15px;
    border-radius:5px;
}
.backwhite {
    background-color: #ffffff;
    color:#333;
    /* height:100%;*/
}
.backblack {
    background-color: #000000;
    color:#fff;
}

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


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

.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:60px !important;
    padding-bottom:60px !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;
    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;



}
.vidcontainer {
    width:100%; max-width: 100%; height: 0;
    padding-bottom: 56.25%;
    position: relative;
    background-color:#ffffff;
    border:2px solid #000;
}
.vidcontainer iframe {
    width: 100%; height: 100%;
    padding: 10px 20px;
    position: absolute; top: 0; left: 0;
}
/*div img {
    border:4px solid #a8a044;
}*/
.goldborder {
    border:6px solid #B9A25F;
}
.oswald-head {
    font-family: 'Oswald', sans-serif;
    font-weight:700;
    font-size:2.5em;
    color:#8c0102;
}
.oswald {
    font-family: 'Oswald', sans-serif;
    font-weight:700;
    /*font-size:1.3em;*/
}
.lato-head {
    font-family: 'Lato', sans-serif;
    font-weight:700;
    font-size:1.3em;
}
.lato {
    font-family: 'Lato', sans-serif;
    font-weight:400;
}
.roboto-head {
    font-family: 'Roboto', sans-serif;
    font-weight:700;
    font-size:2.5em;
}
.roboto {
    font-family: 'Roboto', sans-serif;
    font-weight:400;
}
.inter-head {
    font-family: 'Inter', sans-serif;
    font-weight:700;
    font-size:1.4em;
}
.inter {
    font-family: 'Inter', sans-serif;
    font-weight:400;
}
.stencil {
    font-family: 'Stardos Stencil', sans-serif;
    font-weight: 600;
}
/*------------End Font Family Classes-----------*/
/*-----------Used to color the alternating rows of the events article------------*/

.event-oddrow-bkgnd-color {
    border-bottom: 1px solid #cccccc;
    padding:10px 15px;
    background-color:#ebebeb;
}
.event-evenrow-bkgnd-color {
    border-bottom: 1px solid #cccccc;
    padding:10px 15px;
    background-color:#f5f5f5;
}
/*=============================FACEBOOK BUTTON CSS=============================*/

.facebook-btn {
    padding: 10px;
    /*background-color: #a6a150;*/
    width: 10em;
    text-align: center;
    border-radius:5px;
    color:#ffffff;
}
.facebook-btn a {
    color:#ffffff;
}
.facebook-btn:hover, .facebook-btn:focus {
    color:#ffffff;
    /*background:#045ACB;*/
    outline:0;
    transition: background-color 3s ease-out;
    transition: color 0.5s ease-in;
}

.facebook-btn a:visited {
    color:#ffffff;
}

.facebook-btn-vtn {
    background-color: #a6a150;
    text-align: center;
    border-radius:5px;
}
.facebook-btn-vtn a {
    color:#ffffff;
}
.facebook-btn-vtn:hover, .facebook-btn:focus {
    color:#ffffff;
    background:#045ACB;
    outline:0;
    transition: background-color 3s ease-out;
    transition: color 0.5s ease-in;
}

.facebook-btn-vtn a:visited {
    color:#ffffff;
}

/*==========================END OF FACEBOOK BUTTON CSS==========================*/

/* For controlling the width and height of an embedded Google calendar */

/* Set the width and height of the calendar container */
.calendar-container {
  width: 100%; /* Adjust to your desired width */
  margin:0 auto;
  height: 0;
  padding-bottom: 50%; /* 75% of container width, adjust as needed for aspect ratio */
  position: relative;
  border: 1px solid #666666;
  text-align:center;
}

/* Set the width and height of the embedded calendar */
.calendar-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.hor-line {
  position: relative;
  text-align: center;
}
.hr5 {
  border: none; /* Remove default border of hr */
  height: 2px; /* Set the height of the horizontal line */
  background: url('https://berwickhistoricalsociety.org/cms/assets/_core/image/ornament.png') center center no-repeat; /* Set your PNG image as the background and center it */
  background-size: contain; /* Adjust the size of the image as needed */
  margin: 10px 0; /* Adjust the margin as needed to position the line vertically */
}
.img-shadow {
    box-shadow: 0 5px 15px rgb(0 0 0 / 0.3);
}
.img-deco {
   box-shadow: 0 5px 15px rgb(0 0 0 / 0.3);
   border:4px solid #a3a3a3;
}
/* Gold Buttons for BHSO */

.btn-group button {
background-color: #BEB776; /* Green background */
border: 1px solid #BEB776; /* Green border */
border-radius:10px;
color: white; /* White text */
padding: 10px 20px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
width:300px;
margin:10px;
}

/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}

.btn-group button:not(:last-child) {
border-right: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group button:hover {
background-color: #70180A;
}

/* End to Gold Buttons for BHSO */

.header-text-shadow {
  font-size:3.3em;
  text-align:center;
  color:#fff;
  text-shadow: 2px 2px 5px #000;
  line-height: 1.5em;
  display: inline-block;
  vertical-align: middle;
}
@media only screen and (max-width: 768px) {
.header-text-shaow {
  font-size: 1.6em;
  font-weight:500;

}
}
@media only screen and (max-width: 768px) {
.donate-image {
  width:140px;
}
}


/*  .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;
}
/* remove the below if you don't want smooth scrolling */
html,
body {
scroll-behavior: smooth;
}
/*----------------------------*/

.zoom {
    /*background-color: #000;*/
    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 */
}