/* $pretty-pink: rgb(242, 204, 210); */
body, html {
  overflow: auto;
  font-family: 'Fira Sans', sans-serif;
  scroll-behavior: smooth; }

.smooth-container {
  scroll-behavior: smooth; }

@media (min-width: 568px) {
  body.noscroll, html.noscroll {
    overflow: hidden;
    margin: 0;
    height: 100%;
    padding: 0; }
  #left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%; }
  #right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: scroll;
    width: 50%; } }

#left {
  background: url(assets/images/joe-and-sarah/stairs-brown.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%; }

.leftside {
  padding: 50%; }

#right {
  height: 100%;
  background-color: white; }

#left h1, h2 {
  color: white; }

.nopad {
  padding: 0; }

.section-top {
  height: 100%; }

h4.coming-soon {
  line-height: 1em;
  margin-top: .5em;
  font-size: 2em;
  color: #eaaaa2;
  font-family: 'Fira Sans';
  font-weight: 400; }

.wedding-date {
  line-height: 0em;
  font-size: 2em;
  color: #eaaaa2;
  font-family: 'Fira Sans';
  font-weight: 400; }

.wedding-place {
  line-height: 3em;
  font-size: 2em;
  color: #d8a9a1;
  font-family: 'Sacramento', cursive; }

.counter-wrap {
  text-align: center;
  padding: 3em;
  padding-top: 0em;
  padding-bottom: 0em;
  font-weight: 400; }
  @media (min-width: 568px) {
    .counter-wrap {
      padding-bottom: 8em; } }

#counter {
  font-size: 1.5em;
  color: #083250;
  font-weight: 400;
  margin-bottom: 3em; }

@media (min-width: 500px) {
  .counter-wrap {
    padding: 3em;
    padding-top: 6em; }
  .wedding-date {
    font-size: 2em; }
  #counter {
    font-size: 1.5em; } }

#logo #logoimg {
  background: url(assets/logo.png) center;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center; }

#logo {
  height: 33%;
  margin-top: 7%; }

p {
  font-size: large;
  color: #003250;
  font-weight: 400; }

h1 {
  color: #003250;
  font-weight: 400;
  margin-bottom: 60px; }

h2 {
  font-size: 3em;
  color: #003250;
  font-weight: 400; }

h3 {
  color: #003250;
  font-weight: 400;
  font-size: 2.5em; }

.section-2 {
  padding: 3em; }

.section-3 {
  padding: 3em; }

.coming-soon {
  margin-top: 1.75em;
  font-size: 2em;
  color: #083250;
  font-weight: 400; }

.coming-soon-hr {
  width: 25%; }
  @media (min-width: 568px) {
    .coming-soon-hr {
      margin-top: 1.5em;
      margin-bottom: 1.5em; } }

.bp-card {
  padding: 1em;
  text-align: center;
  transition: all .1s ease-in-out;
  border-radius: 30px; }
  .bp-card .bp-photo img {
    width: 100%;
    border-radius: 30px 30px 0 0; }
  .bp-card .bp-name {
    margin-top: .5em;
    font-size: 1.5em; }
  .bp-card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.stay-card {
  padding: 1em;
  text-align: center; }
  .stay-card .stay-photo img {
    width: 50%;
    border-radius: 100%;
    transition: all .1s ease-in-out; }
    @media (min-width: 568px) {
      .stay-card .stay-photo img {
        width: 66%; } }
    .stay-card .stay-photo img:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

a.nounder {
  text-decoration: none;
  text-underline: none; }
  a.nounder:link {
    color: inherit; }
  a.nounder:visited {
    color: inherit; }
  a.nounder:hover {
    color: inherit; }
  a.nounder:active {
    color: inherit; }

.btn-primary {
  background-color: #d8a9a1;
  border: none; }

.ontop {
  position: fixed;
  z-index: 1;
  top: 30px;
  left: 30px;
  color: white;
  background-color: transparent;
  border: none;
  transition: 0.3s; }

.ontop button:hover, .ontop button:focus {
  background-color: #083250; }

/*Arrow*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite; }

@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-5px); } }

@keyframes bounce {
  0%, 100% {
    transform: translateY(0); }
  50% {
    transform: translateY(-5px); } }

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce; }

.max {
  margin: 1.5em; }
  .max .img-responsive {
    margin: 0 auto;
    max-width: 80%; }
    @media (min-width: 568px) {
      .max .img-responsive {
        max-width: 66%; } }
  .max .bbb {
    max-width: 66% !important; }
    @media (min-width: 568px) {
      .max .bbb {
        max-width: 55% !important; } }

.tidbit {
  margin-bottom: 2em; }
  .tidbit .answer {
    margin-left: 2em; }

.eat-button {
  width: 18%;
  height: 18%;
  margin-top: 1em;
  margin-bottom: 0;
  margin-left: 1em;
  border-radius: 100%;
  transition: all .1s ease-in-out; }
  @media (min-width: 568px) {
    .eat-button {
      width: 12%; } }
  .eat-button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }