body {
    font-family: 'Garamond', serif;
    font-size: 14pt;
    color: #555555 !important;
}
h1 {
  padding-top: 8%;
  font-family: 'champignonmedium', cursive;
  font-size: 115pt;
}
@media (max-width: 600px) {
  h1 {
    font-size: 80pt;
  }
}
@media (max-width: 1200px) {
  h1 span {
    display: block;
  }
}
h2, .title {
  font-family: "champignonmedium", cursive;
  font-size: 72pt;
  margin-bottom: 0.5em;
  line-height: 1.1;
}
h3 {
  font-family: 'Cinzel', serif;
  font-size: 22pt;
  margin-top: 1.5em;
  margin-bottom: 0px;
}
.subtitle {
  font-family: 'Cinzel', serif;
  font-size: 26pt;
  margin-top: 1em;
  margin-bottom: 0px;
}
@media (max-width: 600px) {
  .subtitle {
    font-size: 20pt;
  }
}
.contact-text {
  margin-top: 3em;
}
body,
html {
  height: 100%;
}
p {
  line-height: 2;
}
.xDiv {
  color: black;
  border-style: solid;
  border-color: black;
  border-width: medium;
}
.header-img {
  min-height: 100%;
  background-position: center;
  background-size: cover;
}

.bar-img {
  min-height: 50vh;
  background-position: center;
  background-size: cover;
}

.bg-chic {
  background-image: url("../images/IMG_20170422_194422.jpg");
}
.bg-castle {
  background-image: url("../images/IMG_20170507_211848_copy5.jpg");
}

.rsvp-button-small {
  position: absolute;
}

.narrow-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
}

.fill-height {
  min-height: 100vh;
}
.fill-half-height {
  min-height: 50vh;
}

.half-width {
  width: 50%;
}

.flex {
  display: flex
}
.flex-column {
  flex-direction: column;
}
.flex-center {
  justify-content: center;
  align-items: center;
}
@media (min-width: 600px) {
  .tl-flex {
    display: flex;
  }
}
.flex-wrap {
  flex-wrap: wrap
}
.flex-item-1 {
  flex: 1
}
.flex-item-2 {
  flex: 2
}

.shadow {
  filter: drop-shadow(2px 4px 6px black);
  text-shadow: 0px 0px 12px black;
}

.bg-gray-translucent {
  background-color: rgba(128, 128, 128, 0.15);
}

.bg-peach-translucent {
  background-color: rgba(255, 187, 185, 0.4);
}

.bg-peach {
  background-color: rgb(255, 187, 185);
  /* Wedding Wire peach: #ffc39a */
  /* background-color: #ffc39a; */
}
.bg-peach-ww {
  /* background-color: rgb(255, 187, 185); */
  /* Wedding Wire peach: #ffc39a */
  background-color: #ffc29a;
}

.bg-green {
  background-color: #DCECC8;
}

.colour-peach {
  color: #000 !important;
  background-color: #fde5e5c9 !important;
}

.colour-green {
  color: #000 !important;
  background-color: #8bdbb6 !important;
}

/* Program Table */
table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

tr td:nth-child(1) {
  width: 50%;
}

tr td:nth-child(2) {
  width: 50%;
}

th,
td {
  padding: 20px;
}

/* This magic allows responsive iframes. From https://blog.theodo.com/2018/01/responsive-iframes-css-trick/ */
.map-container {
  position: relative;
  overflow: hidden;
  padding-top: 50%;
  margin-right: 20%;
  margin-left: 20%;
}
@media (max-width: 600px) {
  .map-container {
    padding-top: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}
.map-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.margin-top-2 {
  margin-top: 2em
}
.margin-top-4 {
  margin-top: 4em
}

/* Some transform utility classes */
.flip-horizontal {
  transform: scaleX(-1);
}
.rot-90 {
  transform: rotate(90deg);
}
.rot-270 {
  transform: rotate(270deg);
}
.flip-horizontal-rot-270 {
  transform: rotate(270deg) scaleX(-1);
}
.flip-vertical-rot-270 {
  transform: rotate(270deg) scaleY(-1);
}

/* Classes for flower clipart in location section */
.location-flower-left,
.location-flower-right {
  height: 15em;
}
.location-flower-left {
  transform: scaleX(-1);
  padding-left: 3em;
}
.location-flower-right {
  padding-left: 3em;
}

.location-flower-top {
  height: 5em;
  transform: rotate(180deg)
}  
.location-flower-bottom {
  height: 5em;
  margin-top: 2em;
}

/* Utility classes for hiding and showing on tablets */
.display-block {
  display: block;
}

.display-none {
  display: none;
}

@media (min-width: 600px) {
  .tl-display-block {
    display: block;
  }

  .tl-display-none {
    display: none;
  }
}

@media (min-width: 600px) {
  .bg-flower-spray {
    background-image: url("../images/flower-spray.png");
    background-position: right 0 top -10%;
    background-repeat: no-repeat;
    background-size: 30%;
  }
}
@media (min-width: 1025px) {
  .bg-flower-spray {
    background-position: right 0 top -50%;
    background-size: 40%;
  }
}
@media (min-width: 1200px) {
  .bg-flower-spray {
    background-position: right 10% top 0;
    background-size: 40%;
  }
}

.flower-header-left {
  max-width:50%;
  position:absolute;
  top: 0;
  transform: rotate(270deg) scaleX(-1) translate(-35%, -33%);
}

.flower-header-right {
  max-width: 57%;
  position:absolute;
  top: 0;
  transform: translate(52%,-34%);
}

.flower-details-container {
  position: relative;
  overflow: hidden;
}

.flower-details-right {
  max-width: 40%;
  position:absolute;
  top: 0;
  right: 0;
  transform: translate(15%, -35%);
}

.flower-details-right {
  max-width: 30%;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(-10%, -28%) rotate(90deg);
}


.flower-rsvp-bottom {
  max-width: 15%;
  position: absolute;
  right: 0;
  transform: scaleY(-1) scaleX(-1) translate(170%, 70%) rotate(-60deg);
  top: 0;
}

.flower-rsvp-bottom-left {
  max-width: 15%;
  position: absolute;
  left: 0;
  transform: scaleY(-1) translate(170%, 70%) rotate(-60deg);
  top: 0;
}

.bg-offwhite {
  background-color: #fffcfb;
}

.margin-64 {
  margin-top: 64px !important;
  margin-bottom: 64px !important;
}

.position-relative {
  position: relative;
}

.padding-lr-1 {
  padding-left: 1em;
  padding-right: 1em;
}