@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {

  a {
    @apply cursor-pointer;
  }

  .btn-grey {
    @apply bg-gray-200 font-medium py-4 px-6 cursor-pointer;
  }

  .light-blue {
    color: #A1ADB3;
  }

  .dark-blue {
    color: #0E2C33;
  }

  .light-gold {
    color: #C8C7BE;
  }

  .dark-gold {
    color: #464A35;
  }

  .bg-light-blue {
    background-color: #A1ADB3;
  }

  .bg-lighter-blue {
    background-color: #DADEE0;
  }

  .bg-dark-blue {
    background-color: #0E2C33;
  }

  .bg-lighter-gold {
    background-color: #C8C7BE;
  }

  .bg-dark-gold {
    background-color: #464A35;
  }
}
/*
header {
	opacity: 0;
  transition: background-color .3s, color .3s, opacity .5s ease-in;
}
*/
/* for the slide side menu */
/* line 10, app/assets/stylesheets/custom.scss */
*:focus {
  outline: 0 !important;
  box-shadow: 0 0 0 0.2rem #fff;
}

/**
 * Undo the above focused button styles when the element received focus
 * via mouse click or touch, but not keyboard navigation.
 */
/* line 21, app/assets/stylesheets/custom.scss */
*:focus:not(:focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

/* line 26, app/assets/stylesheets/custom.scss */
header #menu-toggle {
  z-index: 3;
  position: fixed;
  top: 20px;
  right: 20px;
}

/* line 33, app/assets/stylesheets/custom.scss */
#menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  transition: transform 0.5s ease;
  z-index: 2;
}

/* line 42, app/assets/stylesheets/custom.scss */
.closed {
  transform: translateX(100%);
}

/* line 46, app/assets/stylesheets/custom.scss */
.open {
  transform: none;
}

/* for the slide side menu end */
/* line 52, app/assets/stylesheets/custom.scss */
.post-line:first-child {
  display: none;
}

/* line 56, app/assets/stylesheets/custom.scss */
.fade-in {
  opacity: 1;
}

/* line 60, app/assets/stylesheets/custom.scss */
cite {
  font-style: normal;
}

/* line 64, app/assets/stylesheets/custom.scss */
.IvyJournalLightItalic {
  font-family: ivyjournal, sans-serif;
  font-weight: 300;
  font-style: italic;
}

/* line 70, app/assets/stylesheets/custom.scss */
.IvyJournalThinItalic {
  font-family: ivyjournal, sans-serif;
  font-weight: 200;
  font-style: italic;
}

/* line 76, app/assets/stylesheets/custom.scss */
.IvyJournalSemiBold {
  font-family: ivyjournal, sans-serif;
  font-weight: 600;
  font-style: normal;
}

/* line 82, app/assets/stylesheets/custom.scss */
.IvyJournalLight {
  font-family: ivyjournal, sans-serif;
  font-weight: 300;
  font-style: normal;
}

/* line 88, app/assets/stylesheets/custom.scss */
.IvyJournalThin {
  font-family: ivyjournal, sans-serif;
  font-weight: 200;
  font-style: normal;
}

/* line 94, app/assets/stylesheets/custom.scss */
.IvyJournalSemiBoldItalic {
  font-family: ivyjournal, sans-serif;
  font-weight: 600;
  font-style: italic;
}

/* line 100, app/assets/stylesheets/custom.scss */
.RalewayLight {
  font-family: Raleway, sans-serif;
  font-weight: 300;
}

/* line 105, app/assets/stylesheets/custom.scss */
.RalewaySemiBold {
  font-family: Raleway, sans-serif;
  font-weight: 600;
}

/* line 110, app/assets/stylesheets/custom.scss */
.RalewayBold {
  font-family: Raleway, sans-serif;
  font-weight: 700;
}

/* line 115, app/assets/stylesheets/custom.scss */
.columns {
  column-count: 3;
  column-gap: 2em;
}

/* line 120, app/assets/stylesheets/custom.scss */
#navigation {
  position: fixed;
  top: 32px;
  right: 25px;
  z-index: 100;
}

/* line 127, app/assets/stylesheets/custom.scss */
#splash-bg {
  background-image: url(/assets/splash-bg-a96e0dc05617eb33b5e6d05a868d9bc7f5377ae51550caa36eb8058b309c2321.png);
  background-repeat: no-repeat;
  background-size: contain;
}

/* line 133, app/assets/stylesheets/custom.scss */
.banner {
  background-image: url(/assets/splash-light-b718bed8c8f44e505d1f95c75dcf6435d488f0e11497255862e52dd59a19fba3.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

/* line 140, app/assets/stylesheets/custom.scss */
#headshot {
  background-image: url(/assets/lucy-biggs-present-ascent-independent-funeral-celebrant-macclesfield-cheshire-manchester-peak-district-headshot_4-1d45fbfeac5f4651c80cb1d06213053de926c11e0cee24a844ab0681ffcefeb7.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* line 147, app/assets/stylesheets/custom.scss */
#typewriter {
  background-image: url(/assets/lucy-biggs-present-ascent-independent-funeral-celebrant-macclesfield-cheshire-manchester-peak-district-wheatcroft-willow-funeral-flowers-ea6fa324390b7d3fa062b1be1aab53e29069aaf0a29676956564ad1b3447fb7e.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* line 154, app/assets/stylesheets/custom.scss */
.custom-leading {
  line-height: 5rem;
}

/* line 158, app/assets/stylesheets/custom.scss */
.custom-leading-2 {
  line-height: 5rem;
}

/* line 162, app/assets/stylesheets/custom.scss */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fff;
  z-index: 50;
}

/* line 170, app/assets/stylesheets/custom.scss */
.quote-left {
  position: absolute;
  top: 0px;
  left: -40px;
}

/* line 176, app/assets/stylesheets/custom.scss */
.quote-right {
  position: absolute;
  bottom: 0px;
  right: -40px;
}

/* line 182, app/assets/stylesheets/custom.scss */
.quote-top {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translate(-50%, 0%);
}

/* line 189, app/assets/stylesheets/custom.scss */
.quote-bottom {
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translate(-50%, 0%);
}

/* line 196, app/assets/stylesheets/custom.scss */
#bird-bg {
  background-image: url(/assets/light_gold-568fcc5975cf9e6e8f4e0912f6e02dc39d2339f6651ecb5bc3cf2cffd3a35246.png);
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: right center;
}

/* line 203, app/assets/stylesheets/custom.scss */
#small-bird {
  background-image: url(/assets/light_gold-568fcc5975cf9e6e8f4e0912f6e02dc39d2339f6651ecb5bc3cf2cffd3a35246.png);
  background-repeat: no-repeat;
  background-size: 25%;
  background-position: 75% 50%;
}

/* line 210, app/assets/stylesheets/custom.scss */
#left-corner {
  position: absolute;
  left: -150px;
  top: -150px;
}

/* line 216, app/assets/stylesheets/custom.scss */
#right-corner {
  position: absolute;
  right: -150px;
  bottom: -150px;
  transform: rotate(180deg);
}

/* line 223, app/assets/stylesheets/custom.scss */
.inline-list li {
  display: inline;
}

/* line 227, app/assets/stylesheets/custom.scss */
.dot {
  font-size: 7px;
  vertical-align: text-top;
  padding-top: 4px;
}

/* line 233, app/assets/stylesheets/custom.scss */
#video {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1400px) {
  /* line 239, app/assets/stylesheets/custom.scss */
  #small-bird {
    background-size: 30%;
  }
}

@media (max-width: 1280px) {
  /* line 245, app/assets/stylesheets/custom.scss */
  #footer-logo {
    display: none;
  }
}

@media (min-width: 1400px) {
  /* line 251, app/assets/stylesheets/custom.scss */
  #menu-toggle {
    display: none;
  }
  /* line 255, app/assets/stylesheets/custom.scss */
  .content {
    margin-top: 5rem;
  }
}

@media (max-width: 1400px) {
  /* line 262, app/assets/stylesheets/custom.scss */
  #full-menu, #left-corner, #right-corner {
    display: none;
  }
  /* line 266, app/assets/stylesheets/custom.scss */
  .hide {
    display: none;
  }
  /* line 270, app/assets/stylesheets/custom.scss */
  .custom-leading {
    line-height: 4rem;
  }
  /* line 274, app/assets/stylesheets/custom.scss */
  .sticky {
    position: relative;
    top: none;
    width: 100%;
    background-color: none;
    z-index: none;
  }
  /* line 282, app/assets/stylesheets/custom.scss */
  #small-bird {
    background-size: 70%;
  }
}

@media (max-width: 1024px) {
  /* line 289, app/assets/stylesheets/custom.scss */
  #small-bird {
    background-size: 40%;
    background-position: 75% 1%;
  }
}

@media (max-width: 940px) {
  /* line 296, app/assets/stylesheets/custom.scss */
  #header-strapline {
    display: none;
  }
  /* line 300, app/assets/stylesheets/custom.scss */
  .custom-leading-2 {
    line-height: 3rem;
  }
  /* line 304, app/assets/stylesheets/custom.scss */
  #bird-bg {
    background-size: 75%;
    background-position: top center;
  }
  /* line 309, app/assets/stylesheets/custom.scss */
  .quote-top {
    top: -75px;
  }
  /* line 313, app/assets/stylesheets/custom.scss */
  .quote-bottom {
    bottom: -75px;
  }
  /* line 317, app/assets/stylesheets/custom.scss */
  .banner {
    background-size: cover;
    background-attachment: unset;
  }
  /* line 322, app/assets/stylesheets/custom.scss */
  #video {
    width: 500px;
    height: 280px;
    margin-left: auto;
    margin-right: auto;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */