@font-face {
  font-family: "Proxima Nova Regular";
  src: url("../fonts/ProximaNova-Regular.ttf");
}

@font-face {
  font-family: "Gill Sans";
  src: url("../fonts/GillSans.ttf");
}

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.row > [class*='col-'] {
  display: grid;
  flex-direction: column;
}

.stats-grid-center {
  place-items: center;
}

.img-responsive {
  height: 100%;
}


.sm-padding-500px-top {padding-top:500px;}

.p-5 {
  padding: 4rem 0 !important;
}

h2, h5 {
  font-family: 'Gill Sans', 'Montserrat', sans-serif !important;
}

h4, p {
  font-family: 'Proxima Nova Regular', 'Montserrat', sans-serif !important;
}

h4 {
  font-size: 42px;
}

h5 {
  font-size: 36px;
}

@media (max-width: 767px) {
  .highlight {
    line-height: 1em !important;
  }
 h4 {
    font-size: 30px;
  }
  
  h5 {
    font-size: 25px;
  }
  .p-5 {
    padding: 3rem 0 !important;
  }
}

.quote-chart {
  font-size: 33px !important;
}

.quote-chart-author {
  font-size: 22px !important;
}

@media (max-width: 991px) {
  .quote-chart {
    font-size: 25px !important;
  }
  .quote-chart-author {
    font-size: 18px !important;
  }
  header .sidebar-part2 nav.navbar.bootsnav ul > li > a > .fas {
    right: 20px !important;
  }
}

.bg-onahau > h4 {
  color: #000;
}

/* solids */

.bg-cobalt-blue {
  background-color: #0047AB;
}

.bg-cornflower {
  background-color: #94cbec
}

.bg-iris-blue {
  background-color: #04acbc;
}

.bg-amaranth {
  background-color: #ec2343;
}

.bg-gold {
  background-color: #fbd304
}

/* Shades */

.bg-pattens-blue {
  background-color: #D3E9F7;
}

.bg-onahau {
  background-color: #CAEDF1;
}

.bg-light-pink {
  background-color: #F9B7C1;
}

.bg-drover {
  background-color: #FDED98;
}

/* Borders */

.border-cornflower {
  border: 4px solid #94cbec;
  padding: 10px 0;
}

.border-light-pink {
  border: 4px solid #F9B7C1;
  padding: 10px 0;
}

.border-orange {
  border: 4px solid #FF5733;
  padding: 10px 0;
}

.border-sapphire {
  border: 4px solid #081F65;
  padding: 10px 0;
}

.bg-orange {
  background-color: #FF5733;
}

.bg-sapphire {
  background-color: #081F65;
}


.text-amaranth {
color: #ec2343;
}

.btn.btn-amaranth {
background: #ec2343;
border-color: #ec2343;
color: #ffffff;
}
.btn.btn-amaranth:hover {
background: transparent;
border-color: #ec2343;
color: #ec2343;
}

.btn.btn-gold {
  background: #fbd304;
  border-color: #fbd304;
  color: #000;
  }
  .btn.btn-gold:hover {
  background: transparent;
  border-color: #fbd304;
  color: #000;
  }

.icon-rotate-45 {
  -webkit-transform: rotate(45deg); 
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg); 
}

/* logo in menu */
.logo-menu { width: 40px; }
@media (max-width: 767px) { .logo-menu { width: 25px; } }

/* first level menu */
.sidebar-part2 .sidebar-middle { padding: 70px 0; }
.sidebar-part2 ul > li { padding: 10px 0; }
header .sidebar-part2 nav.navbar.bootsnav ul > li > a { font-size: 17px; }
@media (max-width: 767px) {
.sidebar-part2 {
    width: 350px;
    left: -350px;
}
}

/* second level menu */
.sidebar-part2 nav.navbar.bootsnav li.dropdown ul.dropdown-menu { background: #000 !important; width: 300px !important; }
@media (max-width: 991px) {
  header .sidebar-part2 nav.navbar.bootsnav ul li ul li {
      padding: 0 20px;
  }
  header .sidebar-part2 nav.navbar.bootsnav ul > li > a:hover, header .sidebar-part2 nav.navbar.bootsnav ul > li.active > a {
      color: #a9a9a9 !important;
  }
}

.btn.btn-extra-large {
  font-size: 18px !important;
}

/* ********** start menu on desktop ********** */

#menu {
    height:calc(100vh - 8rem);   
    overflow-y:scroll;
    opacity:1;
    top: 40px;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}
.sidebar-part2 nav.navbar.bootsnav li.dropdown ul.dropdown-menu,.sidebar-part2 nav.navbar.bootsnav li.dropdown ul.dropdown-menu .third-level { top: 0; transform: translateY(0); -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); left: 0; background-color: transparent !important; padding-left: 10px !important;}

.sidebar-part2 nav.navbar.bootsnav li.dropdown ul.dropdown-menu {
position: initial;
}

.sidebar-part2 nav.navbar.bootsnav li.dropdown ul.dropdown-menu {
padding: 15px;
}

header .sidebar-part2 nav.navbar.bootsnav ul li ul li a {
  border-bottom: 0;
  font-size: 17px;;
}

header .sidebar-part2 nav.navbar.bootsnav li.dropdown ul.dropdown-menu > li a:hover {border-bottom: 0; background: inherit}

@media (max-width: 991px) {
  /* header .sidebar-part2 nav.navbar.bootsnav ul > li > a:hover, header .sidebar-part2 nav.navbar.bootsnav ul > li.active > a {
      color: #dbdbdb !important;
  } */
  #menu {
    top: 90px !important;
  }
  header .sidebar-part2 nav.navbar.bootsnav ul li ul li {
      padding: 10px 0;
  }
  .sidebar-part2 ul > li {
    padding: 15px 0;
  }
}

/* ********** end menu on desktop ********** */

/* audio button on video */
.audio-control { font-size: 40px; }

@media only screen and (max-width: 768px){ 
  .audio-control {
      opacity: 1;
      position: absolute;
      width: 6%;
      height: 9%;
      bottom: 15%;
      right: 12%;
      transition: opacity 0.3s;
      z-index: 999;
  }
}
@media only screen and (min-width: 768px) {
    .audio-control {
        opacity: 1;
        position: absolute;
        width: 6%;
        height: 9%;
        bottom: 40%;
        right: 4%;
        transition: opacity 0.3s;
        z-index: 999;
    }
}


/* image */
img {
    border-radius: 10px;
}

/* menu text color */
 header .sidebar-part2 nav.navbar.bootsnav ul > li > a {
      color: #fff !important;
}

a > .children:focus { color: #fff !important; }

.nav-icon span, .nav-icon span {
    background-color: red !important;
}

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-size: 18px !important;
    font-family: 'Montserrat', sans-serif !important;
}
input::-moz-placeholder { /* Firefox 19+ */
    font-size: 18px !important;
    font-family: 'Montserrat', sans-serif !important;
}
input::-ms-input-placeholder { /* IE 10+ */
    font-size: 18px !important;
    font-family: 'Montserrat', sans-serif !important;
}
input::-moz-placeholder { /* Firefox 18- */
    font-size: 18px !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* for data boxex */
.text-data { font-size:23px; line-height:26px }

@media (max-width: 1199px) {
    .text-data { font-size:22px; line-height:26px }
}

@media (max-width: 991px) {
    .text-data { font-size:21px; line-height:26px }
    .children { font-size: 16px !important; }
}

.children { font-size: 18px; }

@media (max-width: 767px) {
    .text-data { font-size:20px; line-height:26px }
    .digital-reach-value { font-size: 26px; }
    .digital-reach-title { font-size: 19px; }
    .letter-spacing-minus-1 {
      letter-spacing: -1px;
  }
}

.letter-spacing-minus-1 {
  letter-spacing: 0;
}

#navbar-toggle {
  position: absolute;
  top: -99999px;
  left: -99999px;
  opacity: 0;
  visibility: hidden;
}

.nav-menu {
  display: none;
}

#navbar-toggle:checked + label .nav-menu {
  display: block;
}

/* frame pastor image */
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
    figure.snip1113 {
    font-family: 'Raleway', Arial, sans-serif;
    position: relative;
    overflow: hidden;
    /* min-width: 220px; */
    /* max-width: 310px; */
    width: 100%;
    background: #ffffff;
    text-align: center;
    /* box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); */
}

figure.snip1113 * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

figure.snip1113 img {
    max-width: 75%;
    margin: 20px auto;
    display: block;
    position: relative;
    border: 3px solid #666666;
    padding: 15px 15px 85px 15px;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

figure.snip1113 figcaption {
    position: absolute;
    height: 120px;
    bottom: 0px;
    left: 0;
    right: 0;
    display: block;
}

figure.snip1113 h3 {
    background-color: #ffffff;
    color: #000000;
    font-size: 2em;
    width: 100%;
    padding: 0 12px;
    margin: 0;
    text-transform: uppercase;
    font-weight: 400;
}

figure.snip1113 h3 span {
    font-weight: 800;
}

figure.snip1113 h4 {
    margin: -20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.6;
    font-size: 1.1em;
}

figure.snip1113.red img {
    border-color: #ec2343;
}

figure.snip1113.red h3,
figure.snip1113.red h4 {
    color: #ec2343;
}

@media (max-width: 767px) {
    figure.snip1113 h4 {
        margin: 0px;
    }
}

/* text over image */
.container-over {
    position: relative !important;
    text-align: center !important;
    color: white !important;
}
.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
}
.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}
.top-left-logo {
  position: absolute;
  bottom: 20px;
  left: 0;
}
.text-black-white {
  color:hsl(0deg 0% 100%)
}
.left-nav {
  background: hsl(0deg 0% 0%);
}

.highcharts-credits { display: none !important; }

/* border radius in mobiles */
@media (max-width: 767px) {
    .text-black-white {
      color: hsl(0deg 0% 0%)
    }
    .border-radius-10 {
        /* border-radius: 0; */
        border-radius: 10px;
    }
    .highlight {
      --underline-offset-y: 12px !important;
    }
    .maps {
      width: 100% !important; 
      height: 275px !important;
    }
    #congregant-demographics .jvectormap-container svg, 
    #online-views .jvectormap-container svg,
    #prayerfest-country .jvectormap-container svg {
      margin-top: 30px;
    }
    .jvectormap-zoomout {
      top: 10px !important;
      left: 100px !important;
    }
    
    .highcharts-container {
      height: 340px !important;
    }
    #highcharts-t2u8arw-13 {
      margin-top: -80px !important;
    }
}

@media (min-width:768px) and (max-width: 899px) {
  .maps {
      width: 670px !important; 
  }
}

@media (min-width: 900px) and (max-width: 999px) {
  .maps {
      width: 670px !important; 
  }
}

@media (min-width: 1000px) and (max-width: 1199px) {
  .maps {
      width: 820px !important; 
  }
}

@media (min-width: 1200px) and (max-width: 1300px) {
  .maps {
      width: 1040px !important; 
  }
}

.maps {
    width: 1140px;  
    height: 500px; 
    margin: auto; 
}

#congregant-demographics .jvectormap-container svg {
  width: 100% !important;
  height: 100% !important;
}

.a-gold:link {
    color: #fbd304
}

.a-gold:visited, .a-gold:hover, .a-gold:focus, .a-gold:active {
  color: #FDED98;
}

.a-learn-more {
  color: rgb(34 84 157);
}

.a-learn-more:visited, .a-learn-more:hover, .a-learn-more:focus, .a-learn-more:active {
  color: rgb(0 126 140)
}

.text-italic {
  font-style: italic!important;
}

.text-underline {
  text-decoration: underline !important;
}

.bg-stats-online {
    background-color: hsl(0deg 0% 0% / 42%);
}

.volume-control-bg {
    background: #04acbc;
    padding: 10px;
    border-radius: 10px;
}

:root {
  /* The intrinsic width of the underline stroke (in pixels). This is 
   * the same as the height of the cap images. Don't specify the
   * units! This is because of some of the calculations we do later on. */
  --underline-intrinsic-width: 8;
  
  /* The actual width of the underline stroke we want to render (in pixels).
   * You can modify this, and the sizing and positioning should be calculated
   * accordingly. Again, Don't specify the units! */
  --underline-width: 12;
  
  /* The colour used to draw the underline. It should match the colour
   * used in the cap images... unfortunately we can't modify the SVG
   * fill via CSS because it's a background image. */
  --underline-color: #33AADB;
  --underline-color-2: #33dbac;
  --underline-color-3: #db7233;
  --underline-color-4: #33dbd5;
  --underline-color-5: #dbba33;
  /* --underline-color-6: #52db33; */
  --underline-color-6: #e15369;
  --underline-color-7: #ec2343;
  --underline-color-8: #3383db;
  --underline-color-9: #33db5a;
  --underline-color-10: #98db33;
  --underline-color-smallgroups: #bf33db;
  
  /* We need to know the width of the cap images so that we
   * can position everything on the x axis accordingly. */
  --underline-cap-width: 4px;
  
  /* The border is positioned relative to the bottom of the line.
   * We can move it upwards a little to create an overlap effect. */
  --underline-offset-y: -2px;
  
  /* The padding to add to the x axis. By default, the caps would be
   * aligned with the beginning and end of the line. */
  --underline-padding-x: 0.12em;
  
  /* The cap images to use that form the left and right rounded
   * shape. I guess these could be any shape, they don't
   * necessarily have to be round :) .
   */
  --cap-image-left: url(../images/left.svg);
  --cap-image-right: url(../images/right.svg);
}

.sub-header {
  color: #000 !important;
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(180deg, var(--underline-color), var(--underline-color)),
    var(--cap-image-left),
    var(--cap-image-right);

  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  background-size:
    calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px);
  --underline-width: 8;
  --underline-offset-y: -1px;
  --cap-image-left: url(../images/left.svg);
  --cap-image-right: url(../images/right.svg);
  line-height: 2em;
  
}

.highlight {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-image:
    linear-gradient(180deg, var(--underline-color), var(--underline-color)),
    var(--cap-image-left),
    var(--cap-image-right);
  background-position-x:
    calc(var(--underline-cap-width) * var(--underline-width-scale)),
    0,
    100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  --underline-width: 10;
  line-height: 1em;
}

.highlight-smallgroups {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-image:
    linear-gradient(180deg, var(--underline-color-smallgroups), var(--underline-color-smallgroups)),
    var(--cap-image-left),
    var(--cap-image-right);
  background-position-x:
    calc(var(--underline-cap-width) * var(--underline-width-scale)),
    0,
    100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  --underline-width: 10;
  line-height: 1em;
}
/* ******************* */

.sub-header-2 {
  color: #000 !important;
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(180deg, var(--underline-color-2), var(--underline-color-2)),
    var(--cap-image-left),
    var(--cap-image-right);

  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  background-size:
    calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px);
  --underline-width: 8;
  --underline-offset-y: -1px;
  --cap-image-left: url(../images/left.svg);
  --cap-image-right: url(../images/right.svg);
  line-height: 2em;
  
}

.highlight-2 {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-image:
    linear-gradient(180deg, var(--underline-color-2), var(--underline-color-2)),
    var(--cap-image-left),
    var(--cap-image-right);
  background-position-x:
    calc(var(--underline-cap-width) * var(--underline-width-scale)),
    0,
    100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  --underline-width: 10;
  line-height: 1em;
}
/* ******************* */

.sub-header-3 {
  color: #000 !important;
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(180deg, var(--underline-color-3), var(--underline-color-3)),
    var(--cap-image-left),
    var(--cap-image-right);

  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  background-size:
    calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px);
  --underline-width: 8;
  --underline-offset-y: -1px;
  --cap-image-left: url(../images/left.svg);
  --cap-image-right: url(../images/right.svg);
  line-height: 2em;
  
}

.highlight-3 {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-image:
    linear-gradient(180deg, var(--underline-color-3), var(--underline-color-3)),
    var(--cap-image-left),
    var(--cap-image-right);
  background-position-x:
    calc(var(--underline-cap-width) * var(--underline-width-scale)),
    0,
    100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  --underline-width: 10;
  line-height: 1em;
}

/* ******************* */

.sub-header-4 {
  color: #000 !important;
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(180deg, var(--underline-color-4), var(--underline-color-4)),
    var(--cap-image-left),
    var(--cap-image-right);

  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  background-size:
    calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px);
  --underline-width: 8;
  --underline-offset-y: -1px;
  --cap-image-left: url(../images/left.svg);
  --cap-image-right: url(../images/right.svg);
  line-height: 2em;
  
}

.highlight-4 {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-image:
    linear-gradient(180deg, var(--underline-color-4), var(--underline-color-4)),
    var(--cap-image-left),
    var(--cap-image-right);
  background-position-x:
    calc(var(--underline-cap-width) * var(--underline-width-scale)),
    0,
    100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  --underline-width: 10;
  line-height: 1em;
}

/* ******************* */
.sub-header-5 {
  color: #000 !important;
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(180deg, var(--underline-color-5), var(--underline-color-5)),
    var(--cap-image-left),
    var(--cap-image-right);

  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  background-size:
    calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px);
  --underline-width: 8;
  --underline-offset-y: -1px;
  --cap-image-left: url(../images/left.svg);
  --cap-image-right: url(../images/right.svg);
  line-height: 2em;
  
}

.highlight-5 {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-image:
    linear-gradient(180deg, var(--underline-color-5), var(--underline-color-5)),
    var(--cap-image-left),
    var(--cap-image-right);
  background-position-x:
    calc(var(--underline-cap-width) * var(--underline-width-scale)),
    0,
    100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  --underline-width: 10;
  line-height: 1em;
}

/* ******************* */
.sub-header-6 {
  color: #000 !important;
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(180deg, var(--underline-color-6), var(--underline-color-6)),
    var(--cap-image-left),
    var(--cap-image-right);

  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  background-size:
    calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px);
  --underline-width: 8;
  --underline-offset-y: -1px;
  --cap-image-left: url(../images/left.svg);
  --cap-image-right: url(../images/right.svg);
  line-height: 2em;
  
}

.highlight-6 {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-image:
    linear-gradient(180deg, var(--underline-color-6), var(--underline-color-6)),
    var(--cap-image-left),
    var(--cap-image-right);
  background-position-x:
    calc(var(--underline-cap-width) * var(--underline-width-scale)),
    0,
    100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  --underline-width: 10;
  line-height: 1em;
}

/* ******************* */
.sub-header-7 {
  color: #000 !important;
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(180deg, var(--underline-color-7), var(--underline-color-7)),
    var(--cap-image-left),
    var(--cap-image-right);

  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  background-size:
    calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px);
  --underline-width: 8;
  --underline-offset-y: -1px;
  --cap-image-left: url(../images/left.svg);
  --cap-image-right: url(../images/right.svg);
  line-height: 2em;
  
}

.highlight-7 {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-image:
    linear-gradient(180deg, var(--underline-color-7), var(--underline-color-7)),
    var(--cap-image-left),
    var(--cap-image-right);
  background-position-x:
    calc(var(--underline-cap-width) * var(--underline-width-scale)),
    0,
    100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  --underline-width: 10;
  line-height: 1em;
}

/* ******************* */
.sub-header-8 {
  color: #000 !important;
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(180deg, var(--underline-color-8), var(--underline-color-8)),
    var(--cap-image-left),
    var(--cap-image-right);

  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  background-size:
    calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px);
  --underline-width: 8;
  --underline-offset-y: -1px;
  --cap-image-left: url(../images/left.svg);
  --cap-image-right: url(../images/right.svg);
  line-height: 2em;
  
}

.highlight-8 {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-image:
    linear-gradient(180deg, var(--underline-color-8), var(--underline-color-8)),
    var(--cap-image-left),
    var(--cap-image-right);
  background-position-x:
    calc(var(--underline-cap-width) * var(--underline-width-scale)),
    0,
    100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  --underline-width: 10;
  line-height: 1em;
}

/* ******************* */
.sub-header-9 {
  color: #000 !important;
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(180deg, var(--underline-color-9), var(--underline-color-9)),
    var(--cap-image-left),
    var(--cap-image-right);

  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  background-size:
    calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px);
  --underline-width: 8;
  --underline-offset-y: -1px;
  --cap-image-left: url(../images/left.svg);
  --cap-image-right: url(../images/right.svg);
  line-height: 2em;
  
}

.highlight-9 {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-image:
    linear-gradient(180deg, var(--underline-color-9), var(--underline-color-9)),
    var(--cap-image-left),
    var(--cap-image-right);
  background-position-x:
    calc(var(--underline-cap-width) * var(--underline-width-scale)),
    0,
    100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  --underline-width: 10;
  line-height: 1em;
}

/* ******************* */
.sub-header-10 {
  color: #000 !important;
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(180deg, var(--underline-color-10), var(--underline-color-10)),
    var(--cap-image-left),
    var(--cap-image-right);

  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  background-size:
    calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px);
  --underline-width: 8;
  --underline-offset-y: -1px;
  --cap-image-left: url(../images/left.svg);
  --cap-image-right: url(../images/right.svg);
  line-height: 2em;
  
}

.highlight-10 {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-image:
    linear-gradient(180deg, var(--underline-color-10), var(--underline-color-10)),
    var(--cap-image-left),
    var(--cap-image-right);
  background-position-x:
    calc(var(--underline-cap-width) * var(--underline-width-scale)),
    0,
    100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  --underline-width: 10;
  line-height: 1em;
}


/* Photo Gallery */
.hidden-pics {
    overflow: hidden;
    display: none;
    visibility: hidden;
  }

  .card {
    background-color: transparent !important;
    border: 0 !important;
    /* border-radius: 5px;
    border: 1px solid #e8e0e0;
    box-shadow: 0 3px 10px 0 rgb(0 0 0 / 0.3);
    padding: 5px; */
    display: grid;
  }
  
  .card__content {
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px;
    background-image: linear-gradient(to top, rgb(0 0 0 / 0.4), rgb(0 0 0 / 0));
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
  }
  
  .card__thumb,
  .card__content,
  .card__tag {
    grid-area: 1 / -1;
  }
  
  .card__tag {
    background-color: #04acbc;
    color: #fff;
    padding: 10px 15px;
  }
  
  .card__content {
    z-index: 2;
  }
  
  .card__tag {
    align-self: start;
    justify-self: start;
    z-index: 3;
    margin-top: 2rem;
    border-radius: 0 10rem 10rem 0;
  }
  
  .card:nth-child(1) .card__content {
    background-image: linear-gradient(to top, rgb(0 0 0 / 0.4), rgb(0 0 0 / 0));
  }
  
  .card:nth-child(2) .card__content {
    background-image: linear-gradient(to top, rgb(0 0 0 / 0.4), rgb(0 0 0 / 0));
    background-size: 100% 42.5%;
    background-position: left bottom;
    background-repeat: no-repeat;
  }
  
  .card:nth-child(3) .card__content {
    background-image: linear-gradient(
      to top,
      hsla(0, 0%, 0%, 0.62) 0%,
      hsla(0, 0%, 0%, 0.614) 7.5%,
      hsla(0, 0%, 0%, 0.596) 13.5%,
      hsla(0, 0%, 0%, 0.569) 18.2%,
      hsla(0, 0%, 0%, 0.533) 22%,
      hsla(0, 0%, 0%, 0.49) 25.3%,
      hsla(0, 0%, 0%, 0.441) 28.3%,
      hsla(0, 0%, 0%, 0.388) 31.4%,
      hsla(0, 0%, 0%, 0.333) 35%,
      hsla(0, 0%, 0%, 0.277) 39.3%,
      hsla(0, 0%, 0%, 0.221) 44.7%,
      hsla(0, 0%, 0%, 0.167) 51.6%,
      hsla(0, 0%, 0%, 0.117) 60.2%,
      hsla(0, 0%, 0%, 0.071) 70.9%,
      hsla(0, 0%, 0%, 0.032) 84.1%,
      hsla(0, 0%, 0%, 0) 100%
    );
  }
  
  .card:nth-child(4)::after {
    content: "";
    grid-area: 1 / -1;
    opacity: 0.5;
    background-image: conic-gradient(
      from 90deg at 40% -25%,
      #ffd700,
      #f79d03,
      #ee6907,
      #e6390a,
      #de0d0d,
      #d61039,
      #cf1261,
      #c71585,
      #cf1261,
      #d61039,
      #de0d0d,
      #ee6907,
      #f79d03,
      #ffd700,
      #ffd700,
      #ffd700
    );
  }
  
  .card:nth-child(5) .card__content {
    background-image: linear-gradient(
      to right,
      hsl(0, 0%, 0%) 0%,
      hsla(0, 0%, 0%, 0.964) 7.4%,
      hsla(0, 0%, 0%, 0.918) 15.3%,
      hsla(0, 0%, 0%, 0.862) 23.4%,
      hsla(0, 0%, 0%, 0.799) 31.6%,
      hsla(0, 0%, 0%, 0.73) 39.9%,
      hsla(0, 0%, 0%, 0.655) 48.2%,
      hsla(0, 0%, 0%, 0.577) 56.2%,
      hsla(0, 0%, 0%, 0.497) 64%,
      hsla(0, 0%, 0%, 0.417) 71.3%,
      hsla(0, 0%, 0%, 0.337) 78.1%,
      hsla(0, 0%, 0%, 0.259) 84.2%,
      hsla(0, 0%, 0%, 0.186) 89.6%,
      hsla(0, 0%, 0%, 0.117) 94.1%,
      hsla(0, 0%, 0%, 0.054) 97.6%,
      hsla(0, 0%, 0%, 0) 100%
    );
  }
  
  .card:nth-child(6) .card__content {
    background-image: radial-gradient(
      ellipse 100% 100% at right center,
      transparent 80%,
      #000
    );
  }
  
  .card:nth-child(7) .card__content {
    background-color: rgb(0 0 0 / 0.6);
  }
  
  .card:nth-child(8) .card__content {
    background-color: rgba(0, 0, 0, 0.4);
    background-image: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.8),
      rgba(0, 0, 0, 0) 60%,
      rgba(0, 0, 0, 0.8) 100%
    );
  }
  .card:nth-child(9)::before {
    content: "";
    grid-area: 1 / -1;
    background-color: #000;
    z-index: -1;
  }
  .card:nth-child(9) .card__thumb {
    opacity: 0.5;
  }
  
  .card:nth-child(10) .card__content {
    background-color: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(5px);
  }
  
  .card:nth-child(11) .card__thumb {
    filter: grayscale(1);
  }


  .overlay-menu{
    position:fixed;
    display:block;
    height:100%;
    width:100%;
    z-index: (less from side-menu)
 }