:root {
  --custom-bg: #F0B99A; 
  --custom-dark :#ce9778;
}

body {
/*font-family: 'PT Sans', sans-serif;*/
font-family: 'Mukta Malar', sans-serif;
}
.custom-bg {
  background-color: var(--custom-bg);
}
.custom-dark{
  background-color: var(--custom-dark);
}
.custom-txt {
  color: var(--custom-bg);
}
#mainnav li:hover, #mainnav .active-btn {
  color: var(--custom-bg);
}
#mainnav .active-btn {
  font-weight: 600;
}
/**
DO NOT COPY THIS SECTION *SEE AND COPY THE END OF CSS PANEL

 The css below is added by Gutenberg  Editor in Wordpress 5.0.

 */
.wp-block-cover-image {
  position: relative;
  background-size: cover;
  background-position: 50%;
  min-height: 430px;
  width: 100%;
  margin: 0 0 1.5em;
  display: flex;
/*  justify-content: center;*/
  align-items: center;
}

.wp-block-cover-image .wp-block-cover-image-text,
.wp-block-cover-image h2 {
  color: #fff;
  font-size: 2em;
  line-height: 1.25;
  z-index: 1;
  margin-bottom: 0;
  max-width: 610px;
  padding: 14px;
  text-align: center;
}

/*.wp-block-cover-image.has-background-dim:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.1);
}*/

.wp-block-cover-image {
  background-attachment: fixed;
  background-position: 50% 0;
  height: 600px;
}
.custom-banner {
  background-image: url('/church-template/template6/church-banner.jpg');
  height: 500px;
  background-size: cover;
  background-position: center;
}
.about-banner {
  background-color: #000000b3;
  height: 100%;
}

/*image - overlay css start*/
/*ministry sec start*/
.overlay-image {
  display: block;
  width: 100%;
  height: 230px;

}

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

.overlay-sec:hover .overlay-main {
  height: 100%;
}

.overlay-text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
/*image - overlay css end*/
.custom-tab .active {
  background-color: var(--custom-bg);
  color: #fff;
}
.custom-tab {
  border-bottom: 3px solid var(--custom-bg);
}
.sermon-icon {
  cursor: pointer;
}
.sermon-icon li:hover {
  background-color: var(--custom-dark);
}
.sermon-icon li:hover > svg {
  color: #fff;
} 
/*gallery css start*/


.drybn-collage__overlay{
  width: 100%;
/*  max-width: 1200px;*/
  padding: 1rem;
  box-sizing: border-box;
}

.drybn-collage__content{
  width: 100%;
  height: 100%;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 0.75rem;
  background:  #f7fafc;
  border: 4px solid $pallet-2;
  box-sizing: border-box;
}

.drybn-collage-item{
  background-color: $pallet-2;
  width: 100%;
  height: 280px;
  box-sizing: border-box;
  grid-column: span 3;
  position: relative;
  transition: .5s;
}

.drybn-collage-item--heading{
  background: $pallet-3;
  color: $pallet-1;
}

.drybn-collage-item h2{
  font-family: helvetica;
  font-weight: 300;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%);
}

.drybn-collage-item h2 span{
  font-weight: 700; 
}

.drybn-collage-item:nth-child(1),.drybn-collage-item:nth-child(2){
  grid-column: span 3;
}

.drybn-collage-item:nth-child(1){
  background: url('/church-template/template4/img1.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  clip-path: polygon(0 0, 82% 0, 100% 95%, 0 100%);
}

.drybn-collage-item:nth-child(2){
  background: url('/church-template/template4/img2.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 90%);
  width: 118%;
  margin-left: -18%;
  height: calc(100% + 1rem);
}

.drybn-collage-item:nth-child(3){
  background: url('/church-template/template4/img3.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  grid-row: 3;
  clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 90%);
  margin-top: -2rem;
}

.drybn-collage-item:nth-child(4){
  grid-column: span 6;
  clip-path: polygon(50% 0, 100% 10%, 100% 100%, 0 90%, 0 5%);
  margin-top: -5rem;
}

.drybn-collage-item:nth-child(5){
  background: url('/church-template/template4/img4.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 90%);
  margin-top: -1rem;
}

.drybn-collage-item:nth-child(6){
  background: url('/church-template/template4/img5.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  grid-column: span 6;
  clip-path: polygon(0 0, 100% 10%, 100% 90%, 66% 100%, 0 90%);
  margin-top: -2.7rem;
}

.drybn-collage-item:nth-child(7){
  background: url('/church-template/template4/img6.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  clip-path: polygon(0 0, 100% 10%, 77% 100%, 0 100%);
  margin-top: -1.8rem;
  width: 130%;
}

.drybn-collage-item:nth-child(8){
  background: url('/church-template/template6/img7.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  clip-path: polygon(31% 10%, 100% 0, 100% 100%, 0 100%);
  margin-top: -1.8rem;
}

/*
**  MD BREAKPOINT
*/
@media only screen and (min-width:#{$breakpoint-md}){

  .drybn-collage__overlay{
    margin: 0.75rem auto;
  }
  
  .drybn-collage-item{
    
    filter: sepia(1) blur(1px);
    transition: .3s;
  }
  
  .drybn-collage-item:hover{
    filter: sepia(0);
  }
  
  .drybn-collage-item{
    grid-column: span 2;
  }
  
  .drybn-collage-item h2{
    opacity: 0;
    line-height: 0;
    transition: .3s;
  }

  .drybn-collage-item--heading:hover h2{
    opacity: 1;
    line-height: 1;
  }

  .drybn-collage-item:nth-child(1),.drybn-collage-item:nth-child(2){
    grid-column: span 3;
  }

  .drybn-collage-item:nth-child(1){
    clip-path: polygon(0 0, 100% 0%, 100% 87%, 0% 100%);
    background-position: center;
  }

  .drybn-collage-item:nth-child(2){
    clip-path: polygon(0 0, 100% 0%, 100% 74%, 0% 87%);
    background-position: center;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .drybn-collage-item:nth-child(3){
    clip-path: polygon(0 8%, 100% 0, 100% 65%, 0 100%);
    background-position: center;
    margin-top: -1.5rem;
    grid-row: 2;
  }

  .drybn-collage-item:nth-child(4){
    clip-path: polygon(0 8%, 93% 0, 100% 90%, 69% 100%, 0 88%);
    grid-column: span 2;
    margin-top: -3rem;
    z-index: 999;
  }

  .drybn-collage-item:nth-child(5){
    clip-path: polygon(0 9%, 100% 0, 100% 65%, 7% 98%);
    background-position: center;
    width: (107%);
    margin-top: -4.65rem;
    margin-left: -7%;
  }

  .drybn-collage-item:nth-child(6){
    clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 100%);
    background-position: center;
    margin-top: -6rem;
    grid-column: span 2;
  }

  .drybn-collage-item:nth-child(7){
    clip-path: polygon(70% 26%, 100% 16%, 100% 100%, 0 100%, 0 14%);
    background-position: center;
    margin-top: -6rem;
    width: 100%;
  }

  .drybn-collage-item:nth-child(8){
    clip-path: polygon(0 37%, 100% 11%, 100% 100%, 0 100%);
    background-position: center;
    margin-top: -12rem;
    height: calc(100% + 12rem);
  }
  
  .drybn-collage-item:nth-child(4):hover{
    transform: scale(1.5);
  }
  
  
}
/*gallery css end*/
@media(max-width: 570px) {
  .newsletter {
    right: 0 !important;
  }
}