/**
 * Utility
 */
.is-relative
  position: relative

.is-absolute
  position: absolute


@font-face
  font-family: 'Peas-Carrots'
  src: url('fonts/Peas-Carrots.woff')

/**
 * Base
 */
body, h1, h2, h3, h4, h5, h6
  font-family: "微軟正黑體", Helvetica

.container-fluid
  .row
    margin-right: 0
    margin-left: 0

.layout-jumbotron
  overflow: hidden

.logo
  left: 50%
  transform: translateX(-50%)
  top: 1em
  z-index: 1024

#main-image
  left: 50%
  transform: translateX(-50%)

  @media screen and (orientation: landscape)
    width: 100%

  @media screen and (orientation: portrait) and (min-width: 768px)
    height: 1280px

  @media screen and (orientation: portrait) and (max-width: 767px)
    height: 768px

  @media screen and (orientation: portrait) and (max-width: 320px)
    height: 568px

#save-the-date
  max-width: 80%
  left: 50%
  transform: translate(-50%, -50%)
  top: 40%
  z-index: 1024

.layout-info
  position: relative
  background-color: #40bed4
  background-image: url('https://lh3.googleusercontent.com/-s_tiorvYwpo/VfIz7iTkY2I/AAAAAAAAAOg/zklkKl81KdM/s800-Ic42/info-bg.jpg')
  background-position: bottom left
  background-repeat: repeat-x
  color: #fbd651
  padding-top: 4em
  padding-bottom: 12em

  h1, h2, h3, h4, h5, h6
    font-family: Peas-Carrots

.layout-rsvp
  background-color: #c53440
  padding: 0
  margin-bottom: 0
  color: #fff
  font-family: 'Peas-Carrots'
  font-size: 4em

.layout-rsvp-form
  background-image: url('https://lh3.googleusercontent.com/-zqUkksugI0E/VfIz7UXU8aI/AAAAAAAAAOQ/g125ZeHa3lE/s1024-Ic42/form-bg.jpg')
  background-repeat: repeat
  padding-top: 4em
  padding-bottom: 4em
  color: #435573

.cloud-container
  position: absolute
  top: 0
  left: 0
  background-image: url('https://lh3.googleusercontent.com/-bmazow1jlrs/VfIz7P6_X8I/AAAAAAAAAOM/iD_OI-0R2i4/s960-Ic42/clouds.png')
  background-repeat: repeat-x
  width: 100%
  height: 235px

#rsvp-form
  border-width: 0.25em

.album-container
  margin-bottom: 20px