@media (max-width: 576px) {
  :root { --gmap-width: 275px; }
  .invite-qr{
    width:150px;
    height:150px
  }
  .event_class2 {padding-left: 15px}
  .event_class3 {padding-left: 30px}
  .event_class4 {padding-left: 45px}
}
@media (min-width: 577px) and (max-width: 768px) {
  :root { --gmap-width: 300px; }
  .invite-qr{
    width:175px;
    height:175px;
  }
  .event_class2 {padding-left: 20px}
  .event_class3 {padding-left: 35px}
  .event_class4 {padding-left: 50px}
}
@media (min-width: 769px) and (max-width: 992px) {
  :root { --gmap-width: 400px; }
  .invite-qr{
    width:200px;
    height:200px;
  }
  .event_class2 {padding-left: 25px}
  .event_class3 {padding-left: 40px}
  .event_class4 {padding-left: 55px}
}
@media (min-width: 993px) and (max-width: 1200px) {
  :root { --gmap-width: 600px; }
  .invite-qr{
    width:225px;
    height:225px;
  }
  .event_class2 {padding-left: 35px}
  .event_class3 {padding-left: 50px}
  .event_class4 {padding-left: 65px}
}
@media (min-width: 1201px) and (max-width: 1400px) {
  :root { --gmap-width: 800px; }
  .invite-qr{
    width:250px;
    height:250px;
  }
  .event_class2 {padding-left: 45px}
  .event_class3 {padding-left: 60px}
  .event_class4 {padding-left: 75px}
}
@media (min-width: 1401px) {
  :root { --gmap-width: 1000px; }
  .invite-qr{
    width:275px;
    height:275px;
  }
  .event_class2 {padding-left: 50px}
  .event_class3 {padding-left: 75px}
  .event_class4 {padding-left: 100px}
}

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main-baseline);
  background-color: var(--pallet-sage-drk);
  background-image: repeating-linear-gradient(90deg, var(--pallet-sage-xdk), var(--pallet-sage-drk) 10px, var(--pallet-sage-lgt) 10px, var(--pallet-sage-drk) 5px);
  background-size: 100vw 100vh;
  color: var(--pallet-white);
  margin: 0;
  padding: 20px 5% 5% 5%;
  text-align: center;
}

body::after {
  content: "";
  background-image: url("/assets/imgs/wedding/ring.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center top 25%;
  opacity: 0.095;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

main {
  position: relative;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
  overflow: auto;
}

.outer-border,
.outer-border-admin {
  border: 2px solid var(--pallet-pink-drk);
  width: 100%;
  padding: 6px;
  margin: 0 auto;
}

.outer-border {
  background-color: var(--pallet-sage-lgt);
}

.outer-border-admin {
  border: 2px solid var(--pallet-sage-drk);
  background-color: white;
}

.inner-border,
.inner-border-admin {
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
  height: 100%;
  width: 100%;
  margin: auto;
  padding: 40px 0 40px 0;
}

.inner-border {
  border: 2px solid var(--pallet-pink-drk);
}

.inner-border-admin {
  border: 2px solid var(--pallet-sage-drk);
}

.mid-border,
.mid-border-admin {
  height: 100%;
  width: 100%;
  padding: 6px;
  margin: auto;
}

.mid-border {
  border: 6px solid var(--pallet-pink-lgt);
}

.mid-border-admin {
  border: 6px solid var(--pallet-sage-lgt);
}

.mid-border-legal {
  background-color: var(--pallet-white);
}

.invite-para,
.invite-end{
   margin: 0;
}
.invite-end {
  margin-bottom:10px;
}
.legal {
  color: var(--pallet-black);
  font-family: Arial, sans-serif;
}

.vertical-decoration {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 11em;
}

.vertical-decoration.top {
  top: 0;
}

.vertical-decoration.bottom {
  bottom: 0;
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}

.corner-decoration.corner-left-top {
  position: absolute;
  right: 0;
  top: 0;
  width: 5em;
}

.corner-decoration.corner-right-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 5em;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.corner-decoration.corner-right-bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 5em;
  -webkit-transform: scale(-1);
  transform: scale(-1);
}

.corner-decoration.corner-left-bottom {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 5em;
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}

.title {
  margin-top: 5px;
}

.smaller {
  font-size: .75rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-main-baseline-bld);
}

.text-pink {
  color: var(--pallet-pink-lgt);
}

.text-sage {
  color: var(--pallet-sage-lgt);
}

.text-pink-drk {
  color: var(--pallet-pink-drk);
}

.text-sage-drk {
  color: var(--pallet-sage-drk);
}

.text-pink-xdk {
  color: var(--pallet-pink-xdk);
}

.text-sage-xdk {
  color: var(--pallet-sage-xdk);
}

.text-white {
  color: var(--pallet-white);
}

.text-black {
  color: var(--pallet-black);
}

.text-realblack {
  color: black;
}

a.pink,
a.pink:active,
a.pink:hover,
a.pink:visited,
a.pink:link,
a.sage,
a.sage:active,
a.sage:hover,
a.sage:visited,
a.sage:link,
a.pinkdark,
a.pinkdark:active,
a.pinkdark:hover,
a.pinkdark:visited,
a.pinkdark:link,
a.sagedark,
a.sagedark:active,
a.sagedark:hover,
a.sagedark:visited,
a.sagedark:link,
a.pinkdarkx,
a.pinkdarkx:active,
a.pinkdarkx:hover,
a.pinkdarkx:visited,
a.pinkdarkx:link,
a.sagedarkx,
a.sagedarkx:active,
a.sagedarkx:hover,
a.sagedarkx:visited,
a.sagedarkx:link{
  font-family: var(--font-main-baseline-bld);
}

a.pink,
a.pink:visited {
  color: var(--pallet-pink-lgt);
}

a.pinkdark,
a.pinkdark:visited {
  color: var(--pallet-pink-drk);
}

a.pinkdarkx,
a.pinkdarkx:visited {
  color: var(--pallet-pink-xdk);
}

a.sage,
a.sage:visited {
  color: var(--pallet-sage-lgt);
}

a.sagedark,
a.sagedark:visited {
  color: var(--pallet-sage-drk);
}

a.sagedarkx,
a.sagedarkx:visited {
  color: var(--pallet-sage-xdk);
}

a.pink:active,
a.pink:hover,
a.pink:focus {
  color: var(--pallet-pink-drk);
}

a.sage:active,
a.sage:hover,
a.sage:focus {
  color: var(--pallet-sage-drk);
}

a.pinkdark:active,
a.pinkdark:hover,
a.pinkdark:focus {
  color: var(--pallet-pink-xdk);

}

a.sagedark:active,
a.sagedark:hover,
a.sagedark:focus {
  color: var(--pallet-sage-xdk);
}

a.pinkdarkx:active,
a.pinkdarkx:hover,
a.pinkdarkx:focus {
  color: var(--pallet-sage-xdk);
  text-shadow:
  0 0 7px #fff,
  0 0 10px #fff,
  0 0 21px #fff,
  0 0 42px var(--pallet-sage-lgt),
  0 0 82px var(--pallet-sage-lgt),
  0 0 92px var(--pallet-sage-lgt),
  0 0 102px #0fa,
  0 0 151px #0fa;

}

a.sagedarkx:active,
a.sagedarkx:hover,
a.sagedarkx:focus {
  color: var(--pallet-sage-lgt);
  text-shadow:
  0 0 7px #fff,
  0 0 10px #fff,
  0 0 21px #fff,
  0 0 42px var(--pallet-pink-lgt),
  0 0 82px var(--pallet-pink-lgt),
  0 0 92px var(--pallet-pink-lgt),
  0 0 102px rgb(255, 0, 251),
  0 0 151px rgb(255, 0, 251),
}

.plain-anchor {
  text-decoration: none;
}

.flip-img {
  border: 2px ridge silver;margin: 2px;
}

.flip-card-bg-img {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  z-index: -20;
}

.party-group {
  margin: 48px 0 0 0;
  padding-bottom: 0;
}

.party-group-note {
  margin: 0;
  padding: 0;
  font-size:.7rem;
}

.party-card {
  background-color: transparent;
  width: 250px;
  height: 250px;
  border: none;
  margin: 10px;
  padding: 10px;
}

.party-card-img {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  z-index: 2;
}

.modal-header-male {
  background-color: var(--pallet-sage-drk);
  border-bottom: none;
}

.modal-header-female {
  background-color: var(--pallet-pink-drk);
  border-bottom: none;
}

.modal-header-special {
  background-color: var(--pallet-pink-xdk);
  border-bottom: none;
}

.modal-header-vendor {
  background-color: var(--pallet-sage-xdk);
  border-bottom: none;
}

.modal-body-male {
  background-color: var(--pallet-sage-lgt);
}

.modal-body-female {
  background-color: var(--pallet-pink-lgt);
}

.modal-body-special {
  background-color: var(--pallet-pink-drk);
}

.modal-body-vendor {
  background-color: var(--pallet-sage-drk);
}

#gmap_canvas {
  display: block;
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  border: 12px;
  z-index: 5;
  width: calc(100% - 24px);
  height: 400px;
}

.gmap-canvas-form {
  width: var(--gmap-width);
  margin: 0 auto;
}

div#iframe1 {
  background-color: var(--pallet-sage-drk);
  width: calc(var(--gmap-width) + 34px); /* */
  height: 434px;  /*434px*/ 
  border: 5px ridge var(--pallet-pink-lgt);
  position: relative;
}

div#iframe2 {
  border: 5px ridge var(--pallet-pink-lgt);
  position: relative;
}

div#iframe1:after,
div#iframe2:after {
  content: "";
  display: block;
  background: none;
  position: absolute;
  top: 6px;
  left: 6px;
  bottom: 6px;
  right: 6px;
  border: 5px ridge var(--pallet-pink-lgt);
  z-index: 2;
}

.pallet1,
.pallet2,
.pallet3,
.pallet4,
.pallet5,
.pallet6,
.pallet7,
.pallet8 {
  aspect-ratio: 1/1;
  width: 150px;
  height: 150px;
  font-size: .8rem;
  margin: auto;
  align-items: center;
  padding: 5px 0 0 0;
}

.pallet1 {
  background-color: var(--pallet-sage-xdk);
  color: var(--pallet-white);
}

.pallet2 {
  background-color: var(--pallet-sage-drk);
  color: var(--pallet-white);
}

.pallet3 {
  background-color: var(--pallet-sage-lgt);
}

.pallet4 {
  background-color: var(--pallet-pink-xdk);
}

.pallet5 {
  background-color: var(--pallet-pink-drk);
  color: var(--pallet-sage-xdk);
}

.pallet6 {
  background-color: var(--pallet-pink-lgt);
  color: var(--pallet-sage-xdk);
}

.pallet7 {
  background-color: var(--pallet-white);
  color: var(--pallet-sage-xdk);
}

.pallet8 {
  background-color: var(--pallet-black);
  border: 1px solid rgb(135, 133, 133);
  color: var(--pallet-white);
}

#test {
  color: rgb(61, 57, 57);
}


div#main_imagecontainer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
}

div#main_imagecontainer1,
div#main_imagecontainer2 {
  display: inline-block;
  text-align: center;
}

#main_image1,
#main_image2 {
  width: 100%;
  max-width: 400px;
  min-width: 100px;
  height: auto;
}

.carousel-inner .item img {
  max-height: 200px;
  margin: auto;
}


div#main_imagecontainer1 {
  transform-origin: bottom right;
  transform: rotate(-10deg) translateX(25px);
  background-color: rgba(40, 40, 40, 0.500);
}

div#main_imagecontainer2 {
  transform-origin: bottom left;
  transform: rotate(10deg) translateX(-25px);
  background-color: rgba(40, 40, 40, 0.500);
}

div#main_imagebound {
  background-color: transparent;
  background-image: url("/assets/imgs/wedding/ring.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

.paper-white,
.paper-pink,
.paper-sage {
  border: 1px solid rgb(181, 181, 181);
  border-radius: 25px;
}

.paper-white {
  background-color: var(--pallet-white);
}

.paper-pink {
  background-color: var(--pallet-pink-lgt);
}

.paper-sage {
  background-color: var(--pallet-sage-lgt);
}

.form_paper {
  background-color: white;
  color: var(--pallet-sage-xdk);
  padding: .8rem;
  border-radius: .5rem;
}

.form_paper_alert {
  margin: 0 10%;
}

.event_class1,
.event_class2,
.event_class3,
.event_class4 {
    vertical-align: top;
}
.event_class1,
.event_class2 {
    font-family: Arial, Helvetica, sans-serif;
}

.event_class1 {
  font-weight: bold;
  text-decoration: underline;
  padding-left: 1rem;
}

.event_class2 { 
  font-weight: bold;
  font-style: italic;
}

.event_class4 {
  font-size: .8rem;
}

.honeypot {display:none;}

.font-red {
  color:red;
}
.font-red-pointer{
  color:red; cursor: pointer;
}

#hidden_navbar {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.75);
  height: 36;
  width: 100%;
  z-index: 10;
  font-size: 14px;
}

.flag-green,
.flag-pink,
.flag-pink-dark,
.flag-pink-xdark,
.flag-sage,
.flag-sage-dark,
.flag-sage-xdark,
.flag-gradient,
.flag-gradient-dark{
  font-size: .7rem;
  font-family: var(--font-main-baseline);
  border: 1px solid rgb(255, 255, 255,.8);
}
.flag-green{background-color:#198754;}
.flag-pink{background-color:var(--pallet-pink-lgt);}
.flag-pink-dark{background-color:var(--pallet-pink-drk);}
.flag-pink-xdark{background-color:var(--pallet-pink-xdk);}
.flag-sage{background-color:var(--pallet-sage-lgt);}
.flag-sage-dark{background-color:var(--pallet-sage-drk);}
.flag-sage-xdark{background-color:var(--pallet-sage-xdk);}
.flag-gradient{background-image: linear-gradient(to right, 
  var(--pallet-sage-lgt),
  var(--pallet-pink-lgt));
  color:var(--pallet-black);
}
.flag-gradient-dark{background-image: linear-gradient(to right, 
  var(--pallet-sage-drk),
  var(--pallet-pink-drk));
}

/*
      #1e2017  30 32 23
      #6D725E  109 114 94
      #949983  148 153 131
      #ab6a6b  171 106 107
      #D7ADAE  215 173 174
    --pallet-pink-lgt  #E4CCCC  228 204 204
    --pallet-white #ECECEA  236 236 234
    --pallet-black #1C1C1C  28 28 28   

*/
