body{
  font: 16px/26px 'Lora', sans-serif;
  color: #777;
 
}

.title2{margin-bottom:25px;}

h1,h2,h3,h4,h5,h6{
  font-family: 'Joliet', serif;
  color: #3c80d9;
  font-size:24px!important;
  line-height: 1.25em;
  font-weight: normal;
  margin-bottom:13px;
  margin-top:13px;
  letter-spacing: 3px;

}

h5:not(:last-child) {
    margin-top: 13px!important;
    margin-bottom: 13px!important;
}

.social-icons h5:not(:last-child) {
    margin-top: 13px!important;
    margin-bottom: 13px!important;
}
.main-footer p{margin-top:20px;}


.social-icons.style-2 > li {
    padding: 15px 15px 0;
}
.social-icons.style-2 {
    margin: 20px;
}
.social-icons{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    margin-right: 15px!important;
}

.page-banner{
  font-family: 'Joliet', serif;
  font-size: 3.5rem!important;
  color: #575151;
  font-style: italic;
  line-height: 1.25em;
  font-weight: normal;
}

.trans-left-col{
  position: relative;
  left:20px;
  bottom:0;
  width:100%;
  transform: translateY(-20%);
}
.trans-right-col{
  position: relative;
  right:20px;
  bottom:-20%;
  width:100%;
  transform: translateY(20%);
}

.form-control:focus {
  box-shadow: none !important;
}
.form-select:focus {
  box-shadow: none !important;
}


.btn1{background-color: #93c5fd;  color: #ffffff;  font-weight: 700;  padding-top: 0.5rem;  padding-bottom: 0.5rem;  padding-left: 1rem;  padding-right: 1rem;  border-radius: 0.25rem; transition: background-color 0.3s ease;}
.btn1:hover { background-color: #3b82f6;}

.btn2{background-color: #93c5fd; color: #ffffff;font-weight: 700;padding-top: 0.5rem; padding-bottom: 0.5rem;padding-left: 1rem; padding-right: 1rem; border-radius: 0.25rem; transition: background-color 0.3s ease; }
.btn2:hover{ background-color: #60a5fa;}

.btn3{background-color: transparent; color: #374151;  font-weight: 600;  padding-top: 0.5rem;  padding-bottom: 0.5rem;  padding-left: 1rem;  padding-right: 1rem;  border: 1px solid #3b82f6;  border-radius: 0.25rem;  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;}
.btn3:hover{background-color: #3b82f6; color: #000000;  border-color: transparent;}

.btn4{background-color: #93c5fd;  color: #ffffff;  font-weight: 700;  padding-top: 0.5rem;  padding-bottom: 0.5rem;  padding-left: 1rem;  padding-right: 1rem;  border-radius: 9999px;  transition: background-color 0.3s ease;}
.btn4:hover{background-color: #3b82f6;}

.btn5{background-color: #86efac;  color: white;  font-weight: bold;  padding-top: 0.5rem;  padding-bottom: 0.5rem;  padding-left: 1rem;  padding-right: 1rem;  border-radius: 9999px;}
.btn5:hover{background-color: #22c55e;}

.btn6{background-color: transparent;  color: #374151;  font-weight: 600;  padding-top: 0.5rem;  padding-bottom: 0.5rem;  padding-left: 1rem;  padding-right: 1rem;  border-width: 1px;  border-style: solid;  border-color: #3b82f6;  border-radius: 9999px;}
.btn6:hover{background-color: #3b82f6; color: black;  border-color: transparent;}

/* TINYMCE BUTTON */
  /*.tox-tbtn__select-label {*/
  /*  background-color: #e92c0bdc !important; */
  /*  color: white !important; */
  /*  padding: 4px 8px !important; */
  /*  border-radius: 4px !important; */
  /*  cursor:pointer  !important; */
  /*}*/

  /*.tox-tbtn__select-label:hover {*/
  /*  color: #FFC107 !important; */
  /*}*/


input::placeholder {
  opacity: 1;
  transition: opacity 0.3s ease;
}

input:focus::placeholder {
  opacity: 0;
}

/* Force the 'X' to appear using standard text */
/*.ui-dialog-titlebar-close:after {*/
    content: "×"; /* Use multiplication sign for a clean X */
/*    font-size: 20px;*/
/*    font-weight: bold;*/
/*    display: block;*/
/*    line-height: 1;*/
/*    text-align: center;*/
/*}*/

/* Ensure the button is visible and not hidden by other styles */
/*.ui-dialog-titlebar-close {*/
/*    padding: 0 !important;*/
/*    background: transparent !important;*/
/*    border: none !important;*/
/*}*/



/*    .delete {*/
/*      padding-top: 1px;	*/
/*      padding-right: 1px;*/
/*      position: absolute;*/
/*      right: 0;*/
/*      top: 0;*/
/*      display: none;*/
/*    }*/

    .delete a {
      color: #000;
    }

    @media (max-width: 1280px) {
      .masonry { column-count: 1; }
    }

    @media (max-width: 768px) {
      .masonry { column-count: 1; }
    }

    @media (max-width: 640px) {
      .masonry { column-count: 1; }
    }