html
{
    font-size: 62.5%;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

a
{
    cursor: pointer;
    font-weight: bold;
}
a:hover
{
    text-decoration: underline;
}

html, body, body > .ng-scope
{
    width: 100%;
    height: 100%;
}

.centerer1 /* this layer contains the overflow so that the centerer2 doesn't cause scrollbars*/
{
  float: left;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.centerer2 /* this layer contains the shift to the right */
{
  float: left;
  position: relative;
  left: 50%;
}

.centerer3 /* this layer is the one we actually want to be in the center (and visible) */
{
  display: block;
  float: left;
  position: relative;
  right: 50%;
}

.vertCenteredOuter
{
  text-align: center;
  height: 100%;
  white-space: nowrap;
}

.vertCenteredOuter:before
{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

.vertCenteredInner
{
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  white-space: normal;
}

body .wedding
{
    color: #DDD;
}

textarea, input[type='text'], button
{
    color: #000;
}

button
{
    border-radius: 4px;
    padding: 6px 8px;
    border: none;
    box-shadow: 0 0 1px 1px rgba(0,0,0,0.7);
    color: #19393B;
    font-size: 1.8rem;
    vertical-align: middle;
    background-image: linear-gradient(to bottom, rgba(220, 220, 220, 1) 0%, rgba(250,250,250,1) 3%, rgba(180, 180, 180,1) 97%, rgba(150, 150, 150, 1) 100%);
    outline: #54b8b8;
}
button:not(:disabled):hover
{
    box-shadow: 0 0 3px 1px #19393B;
}
button:active
{
    background-image: linear-gradient(to top, rgba(220, 220, 220, 1) 0%, rgba(250,250,250,1) 3%, rgba(180, 180, 180,1) 97%, rgba(150, 150, 150, 1) 100%);
}

textarea, input[type='text'], input[type='password']
{
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border: 1px solid rgb(169, 169, 169);
    padding: 4px;
    font-size: 1.6rem;
}

::-webkit-input-placeholder {
    font-weight: normal;
    font-style: italic;
}

:-moz-placeholder { /* Firefox 18- */
    font-weight: normal;
    font-style: italic;
}

::-moz-placeholder {  /* Firefox 19+ */
    font-weight: normal;
    font-style: italic;
}

:-ms-input-placeholder {
    font-weight: normal;
    font-style: italic;
}

.rsvp-field-label
{
    display: inline-block;
    margin-top: 10px;
    font-size: 2rem;
    font-weight: bold;
    margin-left: 5px;
    margin-bottom: 4px;
}

.rsvp-email .rsvp-email-info
{
    background: url('/assets/img/questionmark.png') 0 0 no-repeat, rgb(25, 67, 69);
    border: 2px solid rgb(25, 67, 69);
    background-size: 16px;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-left: 8px;
    position: relative;
    top: 2px;
    border-radius: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    opacity: 0.7;
    cursor: pointer;
}
.rsvp-email .rsvp-email-info:hover,
.wedding.mobile .rsvp-email .rsvp-email-info.tip-showing
{
    opacity: 1;
}

.rsvp-email .rsvp-email-info .rsvp-email-tip
{
    display: none;
    position: absolute;
    top: 35px;
    left: -49px;
    width: 375px;
    background-color: #ddd;
    border: 3px solid #19393B;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    padding: 12px;
    box-shadow: 0px 2px 30px #000;
}

.wedding:not(.mobile) .rsvp-email .rsvp-email-info:hover .rsvp-email-tip,
.wedding.mobile .rsvp-email .rsvp-email-info.tip-showing .rsvp-email-tip
{
    display: block;
    opacity: 1;
    z-index: 999999;
}
.wedding.mobile .rsvp-email-tip .tip-close
{
    background: url("/assets/img/close_x.png") no-repeat 0 0;
    height: 40px;
    width: 40px;
    background-size: 40px 40px;
    position: relative;
    top: -6px;
    right: -6px;
    cursor: pointer;
    float: right;
    clear: right;
    display: block;
}

.rsvp-email-tip:before {
    content: '';
    display: block;
    position: absolute;
    top: -22px;
    left: 34px;
    width: 0px;
    height: 0px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 22px solid #19393B;
}

.rsvp-email-tip:after {
    content: '';
    display: block;
    position: absolute;
    top: -18px;
    left: 38px;
    width: 0px;
    height: 0px;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 18px solid #ddd;
}

.meal-choices, .meal-choices-add
{
    white-space: nowrap;
    font-size: 0;
}

.toggleButton, .toggleButton-add
{
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    cursor: pointer;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    -o-user-select: none;
    user-select: none;
}

.toggleButton.selectedButton, .toggleButton-add.selectedButton-add
{
    border: 2px solid #19393B;
    box-shadow: 0 0 1px 1px rgba(255,255,255,0.1) inset;
    background-color: rgba(25, 67, 69, 0.9);
    background-image: -webkit-linear-gradient(top, rgba(125, 167, 169, 0.4) 0%, rgba(25, 67, 69, 0.9) 100%);
    background-image: -moz-linear-gradient(top, rgba(125, 167, 169, 0.4) 0%, rgba(25, 67, 69, 0.9) 100%);
    background-image: linear-gradient(to bottom, rgba(125, 167, 169, 0.4) 0%, rgba(25, 67, 69, 0.9) 100%);
    text-shadow: 0 0 4px #141414;
    color: #dddddd;
    font-weight: bold;
}

.toggleButton.selectedButton:hover, .toggleButton-add.selectedButton-add:hover
{
    background-color: rgba(55, 97, 99, 0.9);
    background-image: -webkit-linear-gradient(top, rgba(125, 167, 169, 0.6) 0%, rgba(25, 67, 69, 0.9) 100%);
    background-image: -moz-linear-gradient(top, rgba(125, 167, 169, 0.6) 0%, rgba(25, 67, 69, 0.9) 100%);
    background-image: linear-gradient(to bottom, rgba(125, 167, 169, 0.6) 0%, rgba(25, 67, 69, 0.9) 100%);
}

.toggleButton:not(.selectedButton), .toggleButton-add:not(.selectedButton):not(.selectedButton-add)
{
    border: 2px solid rgba(25, 57, 59, 0.2);
    background-color: rgba(0,0,0,0.08);
}

.toggleButton:not(.selectedButton):hover, .toggleButton-add:not(.selectedButton):not(.selectedButton-add):hover
{
    background-color: rgba(255,255,255,0.3);
}

.selectedButton .meal-choice-desc, .selectedButton-add .meal-choice-desc
{
    color: rgb(155, 187, 189);
    font-weight: normal;
    text-shadow: 0 0 5px #000;
}

.toggleButton input[type="radio"], .toggleButton-add input[type="radio"]
{
    display: none;
}

.meal-choice,
.meal-choice-add
{
    max-width: 150px;
    min-height: 150px;
    display: inline-block;
    vertical-align: top;
    padding: 6px;
    font-size: 1.6rem;
}

.meal-choice-desc
{
    max-width: 150px;
    display: block;
    white-space: normal;
    font-style: italic;
}

.meal-choice-title
{
    display: block;
    font-size: 2rem;
    font-weight: bold;
}

.meal-choice-4 > .meal-choice-title,
.meal-choice-4-add > .meal-choice-title
{
    white-space: normal;
}

a
{
    color: #19393B;
}

h1
{
    margin: 10px 0;
}

.wedding em
{
    font-weight: bold;
    color: #DD8888;
}

button:disabled
{
    color: #AAAAAA;
    box-shadow: 0 0 1px 2px rgb(151,151,151);
}

textarea:disabled,
input[type='text']:disabled
{
    color: #AAAAAA;
    background-color: #CCCCCC;
}

.fade-animation.ng-enter,
.fade-animation.ng-leave {
	-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
	-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
	-ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
	-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
	transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.fade-animation.ng-enter {
	opacity: 0;
}
.fade-animation.ng-enter.ng-enter-active {
	opacity: 1.0;
}
.fade-animation.ng-leave {
	opacity: 1.0;
}
.fade-animation.ng-leave.ng-leave-active {
	opacity: 0;
}

body {
	margin: 0px;
}

.logo {
	cursor: pointer;
}
.logo span {
	display: block;
}
.logo a {
	opacity: 0.2;
}
.logo a:hover {
	opacity: 1.0;
}

.logoContainer, .mashupContainer {
    margin: 0 auto;
    width: 100%;
	text-align: center;
    background-color: white;
}

.caption {
	text-align: center;
	font-size: 2rem;
	font-weight: bold;
}

.mashup img {
	display: inline-block;
	margin: 10px;
	vertical-align: middle;
}
.mashup {
	font-size: 4.8rem;
	font-weight: bold;
}

body {
    background-color: #1f1f1f;
}

.header {
    background: url("/assets/img/handsbw.jpg") no-repeat;
    background-size: cover;
    width: 100%;
    font-family: "Verdana", sans-serif;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

.header .title {
    font-size: 6.4rem;
    text-align: center;
    color: white;
    text-shadow: 0 0 4px rgba(0,0,0,0.75), 1px 0 1px rgba(0,0,0,0.2), 1px 1px 1px rgba(0,0,0,0.2), -1px 0 1px rgba(0,0,0,0.2), -1px -1px 1px rgba(0,0,0,0.2), 0 -1px 1px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.2), 1px -1px 1px rgba(0,0,0,0.2), -1px 1px 1px rgba(0,0,0,0.2);
    text-transform: uppercase;
}
.header .event-date {
    font-size: 3.2rem;
    text-align: center;
    color: white;
    text-shadow: 0 0 4px rgba(0,0,0,0.75), 1px 0 1px rgba(0,0,0,0.2), 1px 1px 1px rgba(0,0,0,0.2), -1px 0 1px rgba(0,0,0,0.2), -1px -1px 1px rgba(0,0,0,0.2), 0 -1px 1px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.2), 1px -1px 1px rgba(0,0,0,0.2), -1px 1px 1px rgba(0,0,0,0.2);
    font-family: "Times New Roman", serif;
    margin-bottom: 30px;
}

.wedding-content {
    text-align: center;
    padding-bottom: 30px;
}

.map-button {
    background: url('/assets/img/google_maps.png') no-repeat;
    background-size: cover;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 60px;
    height: 60px;
}
.map-button:after {
    content: "MAP";
    display: block;
    margin-top: 50px;
    font-family: "Arial", sans-serif;
    font-size: 2rem;
    color: white;
    text-shadow: 0 0 4px rgba(0,0,0,0.75), 2px 0 2px rgba(0,0,0,0.2), 2px 2px 2px rgba(0,0,0,0.2), -2px 0 2px rgba(0,0,0,0.2), -2px -2px 2px rgba(0,0,0,0.2), 0 -2px 2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.2), 2px -2px 2px rgba(0,0,0,0.2), -2px 2px 2px rgba(0,0,0,0.2);
    text-align: center;
}

.wedding:not(.mobile) .map-modal .ng-modal-dialog
{
    width: 60%;
    height: 80%;
}
.map-modal iframe {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    -o-user-select: none;
    user-select: none;
}

.modal-buttons
{
    text-align: center;
    margin-top: 15px;
}

.map-modal .ng-modal-dialog .ng-modal-dialog-content > p
{
    padding: 0 20px;
}

.wedding.mobile .ng-modal,
.map-modal .ng-modal-dialog .ng-modal-dialog-content,
.map-modal .ng-modal-dialog .ng-modal-dialog-content > div,
.wedding:not(.mobile) .map-modal .ng-modal-dialog .ng-modal-dialog-content iframe
{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    width: 100%;
    height: 100%;
}

.wedding.mobile .ng-modal .vertCenteredOuter,
.wedding.mobile .ng-modal .vertCenteredInner
{
    width: 100%;
}

/* -------------------------------------------------------------- */
/* BEGIN MOBILE MODAL SCALING */
.wedding.mobile .ng-modal > .vertCenteredOuter > .vertCenteredInner {
    -ms-transform: scale(3);
    -moz-transform: scale(3);
    -webkit-transform: scale(3);
    transform: scale(3);
    max-width: 33%;
}
/* END MOBILE MODAL SCALING */
/* -------------------------------------------------------------- */

.wedding.mobile .map-modal .ng-modal-dialog .ng-modal-dialog-content iframe
{
    width: 100%;
    height: 16%;
}

.wedding:not(.mobile) a.mobile-map-link
{
    display: none;
}

.login-modal .ng-modal-dialog,
.alert-modal .ng-modal-dialog
{
    background-color: transparent;
    width: auto;
    box-shadow: none;
}
.login-modal .ng-modal-dialog div.login,
.alert-modal .ng-modal-dialog .section-panel
{
    padding: 30px;
    text-align: center;
    margin: 0;
}
.alert-modal .ng-modal-dialog div.alert
{
    padding-top: 45px;
    padding-bottom: 24px;
}
.login-modal .ng-modal-dialog div.login > form
{
    margin-top: 15px;
}
.login-modal .ng-modal-dialog div.login > form p
{
    margin-bottom: 0.4em;
}
.login-modal .ng-modal-dialog div.login > form #confirmationCode
{
    display: inline-block;
}

.login-modal .ng-modal-dialog div.login > form #rememberConfCode
{
    display: block;
    margin-bottom: 20px;
    margin-left: -45px;
}

.contact-modal .ng-modal-dialog,
.wedding:not(.mobile) .contact-modal .ng-modal-dialog
{
    background-color: transparent;
    width: 650px;
}
.contact-modal .section-panel
{
    width: 100%;
    box-shadow: none;
    margin: 0;
    text-align: center;
}
.contact-modal .ng-modal-dialog .ng-modal-close,
.alert-modal .ng-modal-dialog .ng-modal-close
{
    top: 10px;
    right: 10px;
    box-shadow: none;
    background-color: rgba(0,0,0,0.08);
    border: 2px solid rgba(25, 57, 59, 0.2);
}
.contact-modal .ng-modal-dialog .ng-modal-close:hover,
.alert-modal .ng-modal-dialog .ng-modal-close:hover
{
    border: 2px solid #19393B;
    background-color: rgba(25, 67, 69, 0.9);
}

span.menu-section
{
    color: #479B9B;
    font-size: 2.2rem;
    cursor: pointer;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 10px;
    text-shadow: 0px 0px 4px rgba(30, 30, 30, 0.75), 1px 1px 0px rgba(30, 30, 30, 0.2), -1px -1px 0px rgba(30, 30, 30, 0.2), -1px 1px 0px rgba(30, 30, 30, 0.2), 1px -1px 0px rgba(30, 30, 30, 0.2),
    0px 1px 0px rgba(30, 30, 30, 0.2), 0px -1px 0px rgba(30, 30, 30, 0.2), -1px 0px 0px rgba(30, 30, 30, 0.2), 1px 0px 0px rgba(30, 30, 30, 0.2);
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    -o-user-select: none;
    user-select: none;
}
span.menu-section:nth-of-type(6)
{
    color: #970000;
}
span.menu-section:hover
{
    text-decoration: underline;
}

div.event-details
{
    white-space: nowrap;
}

img.panel-header
{
    width: 100%;
}

div.directions
{
    white-space: normal;
    text-align: left;
}

div.directions img.google-marker
{
    position: absolute;
    right: 40px;
    top: 80px;
}

div.directions .directions-origin
{
    display: inline-block;
    width: 30%;
    min-height: 133px;
    vertical-align: top;
}
div.directions .directions-origin:nth-of-type(n+2)
{
    margin-left: 1.5%;
    padding-left: 1.5%;
    box-shadow: -1px 0px 0 0 rgba(0,0,0,0.2);
}
div.directions .directions-origin:last-of-type
{
    width: auto;
    position: absolute;
}


div.section-panel.wedding-party
{
    white-space: nowrap;
    font-size: 0; /* remove extra spacing */
}
div.wedding-party > div
{
    display: inline-block;
    position: relative;
}
div.wedding-party > div > img.wedding-party-thumbnail
{
    cursor: pointer;
    display: block;
}
div.wedding-party > div > img.wedding-party-thumbnail:hover
{
    opacity: 0.75;
}

div.wedding-party > div > .wedding-party-name
{
    font-size: 2.6rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(30, 30, 30, 0.5), -1px -1px 2px rgba(30, 30, 30, 0.5), -1px 1px 2px rgba(30, 30, 30, 0.5), 1px -1px 2px rgba(30, 30, 30, 0.5);
    position: absolute;
    bottom: 5px;
    left: 10px;
    display: none;
}
div.wedding-party > div:hover > img.wedding-party-thumbnail + .wedding-party-name
{
    display: block;
}

.image-modal .ng-modal-dialog
{
    width: auto;
    height: auto;
}

.property-map-modal.ng-modal .ng-modal-dialog
{
    height: calc(90% - 25px);
    height: -webkit-calc(90% - 25px);
    height: -moz-calc(90% - 25px);
}

.property-map-modal.ng-modal .ng-modal-dialog-content
{
    height: 100%;
    overflow-y: auto;
    margin-top: 25px;
    background-color: #fff;
    overflow-x: hidden;
    font-size: 0;
}

.property-map-modal.ng-modal .ng-modal-dialog-content:before
{
    content: '';
    display: inline-block;
    width: 100%;
    height: 25px;
    position: absolute;
    top: 0px;
    background-color: rgb(255, 255, 255);
}

.property-map-modal img.property-map
{
    height: 100%;
    min-height: 825px;
}

div.timeline table tr td
{
    padding: 4px 10px;
}
div.timeline table tr td:first-of-type /* date */
{
    text-align: right;
    white-space: nowrap;
}

div.timeline table tr td p
{
    margin: 0;
}

div.timeline em
{
    color: white;
}

div.registry
{
    padding: 70px 40px 30px 40px;
    font-size: 2.0rem;
    text-align: left;
}
div.registry > p
{
    text-align: center;
}

div.rsvp h1
{
    font-family: "Brush Script MT", cursive;
}

div.rsvp .reservation
{
    text-align: center;
}
div.rsvp .guests
{
    display: inline-block;
    text-align: left;
    width: 100%;
}

div.comments
{
    margin: 30px 15px 0px 15px;
}

div.comments textarea
{
    width: 100%;
    height: 150px;
    display: block;
    margin-bottom: 15px;
}

div.comments h2
{
    text-align: left;
    margin-bottom: 5px;
    display: block;
}

div.rsvp button
{
    margin-left: 6px;
    margin-right: 6px;
    text-align: center;
}

div.rsvp button.save-rsvp.dirty
{
    box-shadow: 0 0 1px 1px rgba(0,0,0,0.4), 0 0 4px 3px #FFBB00;
}

div.rsvp button.save-rsvp,
div.rsvp button.dismiss-rsvp
{
    margin-top: 20px;
    width: 57px;
}

.wedding.mobile div.rsvp button.save-rsvp,
.wedding.mobile div.rsvp button.dismiss-rsvp
{
    margin: 30px 20px 15px 20px;
    font-size: 3.2rem;
    height: 86px;
    width: 106px;
}

.rsvp form.guestInfo > .guestHeader
{
    background-color: rgba(0,0,0,0.2);
    padding: 6px 10px 0 10px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    min-height: 60px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 -1px 2px rgba(0,0,0,0.4);
}

.rsvp form.guestInfo textarea.guest-allergies
{
    display: block;
}

.rsvp form.guestInfo:not(:last-of-type)
{
    margin-bottom: 40px;
}

.rsvp .guestInfo > div:not(.guestHeader) {
    padding: 10px 20px 0 20px;
}

.comments textarea,
.rsvp .guestInfo textarea,
.rsvp .guestInfo input[type="text"]:not(.guestNameEdit)
{
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.rsvp .guestName,
.rsvp input[type="text"].guestNameEdit
{
    font-size: 2rem;
    font-weight: bold;
    color: #19393B;
}

.rsvp .guestName
{
    display: inline-block;
    min-width: 265px;
    min-height: 35px;
    width: calc(100% - 225px);
    width: -webkit-calc(100% - 225px);
    width: -moz-calc(100% - 225px);
    width: -ms-calc(100% - 225px);
    position: relative;
    top: 6px;
}

.rsvp .guestName .guestNameDisplay
{
    display: block;
    margin-bottom: 6px;
    position: relative;
    top: 3px;
}

.rsvp .guestName input[type="text"].guestNameEdit
{
    margin-bottom: 12px;
}

.guestAttending
{
    display: inline-block;
    line-height: 35px;
    padding-bottom: 12px;
    position: relative;
    top: 6px;
}

.guestAttending .toggleButton, .guestAttending .toggleButton-add
{
    padding: 6px;
}

.replyBy
{
    font-style: italic;
    font-family: "Brush Script MT", cursive;
}

.replyBy .date
{
    font-size: 1.8rem;
    font-family: 'arial', 'sans-serif';
    font-style: normal;
    font-weight: bold;
    color: rgb(189, 60, 60);
    white-space: nowrap;
}

.section-panel
{
    background: #B7C2CE;
    background-image: linear-gradient(225deg, rgba(255, 255, 255,0.3) 20%, rgba(0, 0, 0,0.2) 90%);
    /*background: #B7C4CA;*/
    color: #19393B;
    font-size: 1.6rem;
    box-shadow: 4px 4px 80px #000;
    display: inline-block;
    vertical-align: top;
    white-space: normal;
    margin-top: 30px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    position: relative;
    margin-left: 15px;
    margin-right: 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.section-panel.highlight
{
    animation: sectionHighlight 1.2s;
    -webkit-animation: sectionHighlight 1.2s;
}

@keyframes sectionHighlight {
    0%, 100% {box-shadow: 4px 4px 80px #000;}
    30% {box-shadow: 0px 0px 30px rgb(125, 167, 169);}
}
@-webkit-keyframes sectionHighlight {
    0%, 100% {box-shadow: 4px 4px 80px #000;}
    30% {box-shadow: 0px 0px 30px rgb(125, 167, 169);}
}

@keyframes sectionFade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@-webkit-keyframes sectionFade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* TODO */
.active-section-add
{
    animation: sectionFade 1.2s;
    -webkit-animation: sectionFade 1.2s;
}
.active-section-remove
{
    animation: sectionFade 1.2s;
    animation-direction: reverse;
    -webkit-animation: sectionFade 1.2s;
    -webkit-animation-direction: reverse;
}


.section-panel:not(.rsvp)
{
    overflow: hidden; /* can only be put on sections without buttons because the buttons won't be rendered correctly by firefox mobile */
}

.section-panel.rsvp
{
    padding-bottom: 15px;
}
.section-panel.comments
{
    padding: 0px 15px 15px 15px;
}

.section-panel:not(.rsvp) h1
{
    position: absolute;
    top: 0px;
    left: 15px;
    font-size: 3.2rem;
    z-index: 1;
    color: #FFF;
    text-shadow: 0px 0px 4px rgba(30, 30, 30, 0.75), 1px 1px 0px rgba(30, 30, 30, 0.2), -1px -1px 0px rgba(30, 30, 30, 0.2), -1px 1px 0px rgba(30, 30, 30, 0.2), 1px -1px 0px rgba(30, 30, 30, 0.2),
    0px 1px 0px rgba(30, 30, 30, 0.2), 0px -1px 0px rgba(30, 30, 30, 0.2), -1px 0px 0px rgba(30, 30, 30, 0.2), 1px 0px 0px rgba(30, 30, 30, 0.2);
}
.section-panel.hotels h1, .section-panel.timeline h1
{
    position: static;
    padding: 0 15px;
}
.hotels h1
{
    margin-bottom: 0;
}

.panel-content
{
    padding: 0 15px 15px 15px;
}
.hotels
{
    text-align: left;
    padding-right: 0px;
    padding-bottom: 0px;
}
.hotels ul
{
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    height: 370px;
}

.carousel
{
    white-space: nowrap;
    position: relative;
}
.carousel .carousel-pages
{
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}
.carousel .carousel-pages .carousel-page
{
    display: inline-block;
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    vertical-align: top;
}

.carousel .carousel-pages .carousel-page > p
{
    white-space: normal;
}

.carousel .carousel-left,
.carousel .carousel-right
{
    width: 25px;
    height: 100%;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    -o-user-select: none;
    user-select: none;
    opacity: 0.3;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: absolute;
    top: 0;
    cursor: pointer;
}
.carousel .carousel-left:hover,
.carousel .carousel-right:hover
{
    opacity: 1.0;
}
.carousel .carousel-left
{
    left: 0;
    padding-left: 5px;
}
.carousel .carousel-right
{
    right: 0;
}

.carousel .carousel-left:after,
.carousel .carousel-right:after
{
    display: block;
    position: absolute;
    top: calc(50% - 35px);
    top: -webkit-calc(50% - 35px);
    top: -moz-calc(50% - 35px);
    font-size: 6rem;
}

.carousel .carousel-left:after
{
    content: '‹';
}
.carousel .carousel-right:after
{
    content: '›';
}

.hotels .hotel-name
{
    font-size: 2rem;
    font-weight: bold;
}
.sharksmouth, .timeline, .directions
{
    text-align: left;
}

:-moz-ui-invalid:not(output)
{
    box-shadow: none; /* remove "required" red outline */
}

/********************************************************/
/* MODAL */

.wedding:not(.mobile) .ng-modal-overlay {
    /* A dark translucent div that covers the whole screen */
    position:fixed;
    z-index:9999;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:#000000;
    opacity: 0.85;
}
.wedding:not(.mobile) .ng-modal-dialog {
    /* A centered div above the overlay with a box shadow. */
    z-index:10000;
    position: fixed;
    width: 50%; /* Default */

    /* Center the dialog */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);

    box-shadow: 4px 4px 80px #000;
}
.ng-modal-dialog-content {
    text-align: left;
    font-size: 1.6rem;
}

.wedding:not(.mobile) .ng-modal-dialog
{
    width: auto;
}

.wedding:not(.mobile) .ng-modal-close {
    position: absolute;
    top: -20px;
    right: -20px;
    height: 32px;
    width: 32px;
    background: url("/assets/img/close_x.png") no-repeat #000;
    border: 2px solid white;
    cursor: pointer;
    display: inline-block;
    border-radius: 32px;
    -webkit-border-radius: 32px;
    -moz-border-radius: 32px;
    box-shadow: 0 1px 3px black;
    z-index: 1;
}

.wedding.mobile .ng-modal-overlay {
    display: none;
}
.wedding.mobile .ng-modal-dialog {
    width: 100%;
    height: 100%;
}
.wedding.mobile .ng-modal-close {
    display: none; /* TODO */
}

.wedding.mobile .ng-modal-dialog .section-panel
{
    width: 100%;
}

.wedding:not(.mobile) .image-modal .ng-modal-dialog
{
    width: 100%;
    height: 100%;
}

.wedding:not(.mobile) .image-modal .ng-modal-dialog .ng-modal-close
{
    top: 10px;
    right: 10px;
    border: none;
    background-color: transparent;
}

.wedding:not(.mobile) .image-modal .ng-modal-dialog .ng-modal-dialog-content
{
    white-space: nowrap;
    text-align: center;
    height: 100%;
}

.wedding:not(.mobile) .image-modal .ng-modal-dialog .ng-modal-dialog-content img.lightbox-image
{
    vertical-align: top;
    position: absolute;
    right: 150px;
    top: -150px;
    width: 400px;
    clip: rect(0px,400px,400px,0px);
}

.wedding:not(.mobile) .image-modal .ng-modal-dialog .ng-modal-dialog-content div.lightbox-text
{
    display: inline-block;
    position: relative;
    left: 200px;
    width: 300px;
}

.wedding:not(.mobile) .image-modal .ng-modal-dialog
{
    box-shadow: none;
}

.wedding:not(.mobile) .image-modal .ng-modal-dialog .ng-modal-dialog-content .vertCenteredOuter .vertCenteredInner
{
    position: relative;
    overflow: visible;
}

.image-modal .ng-modal-dialog .ng-modal-dialog-content div.lightbox-text
{
    white-space: normal;
    text-align: left;
    padding: 15px;
}

/* END MODAL */
/********************************************************/
/* BEGIN MEDIA QUERIES AND MOBILE/RESOLUTION RELATED ITEMS */

div.wedding:not(.mobile) .header
{
    position: fixed;
    top: 0px;
    z-index: 50;
}

div.wedding.mobile
{
    height: 100%;
}

div.wedding.mobile .event-details
{
    overflow-y: auto;
    height: calc(100% - 133px);
    height: -webkit-calc(100% - 133px);
    height: -moz-calc(100% - 133px);
}

div.our-story
{
    text-align: left;
    font-size: 2.0rem;
    display: inline-block;
    max-width: 1400px;
    margin-top: 50px;
    overflow: hidden;
}

div.our-story h1
{
    text-align: center;
}
div.our-story p.prelude
{
    left: calc(50% - 160px);
    position: relative;
    font-size: 2.4rem;
    font-style: italic;
}

div.our-story table.history-with-pics > tbody > tr > td:first-of-type,
div.our-story table.history-with-pics > tbody > tr > td:last-of-type
{
    vertical-align: middle;
    width: 33%;
}
div.our-story table.history-with-pics > tbody > tr > td > img
{
    vertical-align: top;
    display: block;
    width: 100%;
}
div.our-story table.history-with-pics > tbody > tr > td:nth-of-type(2)
{
    vertical-align: top;
    width: 34%;
}

div.our-story table.swanwick-history tbody tr td:first-of-type
{
    white-space: nowrap;
    text-align: right;
    background-color: rgba(0,0,0,0.2);
    font-size: 2.4rem;
}

div.our-story table.swanwick-history tbody tr td
{
    padding: 15px 20px;
    background-color: rgba(255,255,255,0.04);
}

div.our-story table.swanwick-history tbody tr td .image-series
{
    margin-top: 10px;
    white-space: nowrap;
    font-size: 0;
}
div.our-story table.swanwick-history tbody tr td .image-series img
{
    width: 33%;
}

@media all and (max-width: 709px)
{
    .section-panel
    {
        width: calc(100% - 30px);
        width: -webkit-calc(100% - 30px);
        width: -moz-calc(100% - 30px);
    }
}

@media all and (min-width: 710px) and (max-width: 1389px)
{
    .section-panel:not(.rsvp)
    {
        width: 650px;
    }
}

@media all and (max-width: 1389px)
{
    .event-details .section-divider
    {
        display: block;
    }
}

@media all and (min-width: 1390px) {
    .event-details .section-divider:nth-child(4n),
    .event-details .wedding-party + .section-divider
    {
        display: block;
    }

    .sharksmouth, .timeline, .directions, .hotels, .comments, .registry
    {
        width: 650px;
    }

    .timeline
    {
        height: 576px;
    }
    .hotels
    {
        height: 599px;
    }
}

@media all and (max-width: 553px) {
    .section-panel.wedding-party
    {
        width: auto;
    }

    .section-panel.wedding-party .wedding-party-divider
    {
        display: block;
    }

    .wedding-party > div > img.wedding-party-thumbnail {
        width: 260px;
    }
}

@media all and (min-width: 554px) and (max-width: 734px) {
    .section-panel.wedding-party
    {
        width: auto;
    }

    .section-panel.wedding-party .wedding-party-divider:nth-of-type(2n)
    {
        display: block;
    }

    .wedding-party > div > img.wedding-party-thumbnail {
        height: 200px;
    }
}

@media all and (min-width: 735px) and (max-width: 1250px) {
    .section-panel.wedding-party
    {
        width: auto;
    }

    .section-panel.wedding-party .wedding-party-divider:nth-of-type(3n)
    {
        display: block;
    }

    .wedding-party > div > img.wedding-party-thumbnail {
        height: 200px;
    }
}

@media all and (min-width: 1251px) {
    .section-panel.wedding-party
    {
        width: auto;
    }

    .section-panel.wedding-party .wedding-party-divider:nth-of-type(6)
    {
        display: block;
        height: 45px;
    }

    .wedding-party div:nth-of-type(n+7) > img.wedding-party-thumbnail {
        height: 225px;
    }

    .wedding-party > div > img.wedding-party-thumbnail {
        height: 200px;
    }

    .wedding-party > div:nth-of-type(1) img.wedding-party-thumbnail,
    .wedding-party > div:nth-of-type(7) img.wedding-party-thumbnail
    {
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
    }
    .wedding-party > div:nth-of-type(6) img.wedding-party-thumbnail,
    .wedding-party > div:nth-of-type(11) img.wedding-party-thumbnail
    {
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
    }

    .wedding-party.section-panel h1 {
        position: absolute;
        left: calc(50% - 111px);
        padding-top: 195px;
        z-index: 0;
    }

    .wedding-party.section-panel {
        background: none;
        box-shadow: none;
    }

    .wedding-party.section-panel.highlight
    {
        animation: weddingPartyHighlight 1.2s;
        -webkit-animation: weddingPartyHighlight 1.2s;
    }

    @keyframes weddingPartyHighlight {
        0%, 100% {box-shadow: 0px 0px 0px rgba(0,0,0,0);}
        30% {box-shadow: 0px 0px 30px rgb(125, 167, 169);}
    }
    @-webkit-keyframes weddingPartyHighlight {
        0%, 100% {box-shadow: 0px 0px 0px rgba(0,0,0,0);}
        30% {box-shadow: 0px 0px 30px rgb(125, 167, 169);}
    }
}

@media all and (max-width: 446px) {
    /* 1 column */
    .rsvp .guests .meal-choice-divider
    {
        display: block;
    }

    .meal-choice:nth-of-type(n+2),
    .meal-choice-add:nth-of-type(n+2)
    {
        margin-top: 15px;
    }
}

@media all and (min-width: 447px) and (max-width: 628px) {
    /* 2 columns */
    .rsvp .meal-choices.guest-meal-choices-3 .meal-choice-divider {
        display: inline-block;
        width: 15px;
    }
    .rsvp .meal-choices.guest-meal-choices-3 .meal-choice-divider:nth-of-type(6) {
        display: block;
    }

    .rsvp .meal-choices.guest-meal-choices-3 .meal-choice:nth-of-type(n+6),
    .rsvp .meal-choices.guest-meal-choices-3 .meal-choice-add:nth-of-type(n+6)
    {
        margin-top: 15px;
    }
}

@media all and (min-width: 447px) and (max-width: 810px) {
    /* 2 columns of 2 */
    .rsvp .meal-choices.guest-meal-choices-4 .meal-choice-divider
    {
        display: inline-block;
        width: 15px;
    }
    .rsvp .meal-choices.guest-meal-choices-4 .meal-choice-divider:nth-of-type(4)
    {
        display: block;
    }

    .rsvp .meal-choices.guest-meal-choices-4 .meal-choice:nth-of-type(n+4),
    .rsvp .meal-choices.guest-meal-choices-4 .meal-choice-add:nth-of-type(n+4)
    {
        margin-top: 15px;
    }
}

@media all and (min-width: 447px) {
    /* 2 columns */
    .rsvp .meal-choices.guest-meal-choices-2 .meal-choice:nth-of-type(n+2),
    .rsvp .meal-choices.guest-meal-choices-2 .meal-choice-add:nth-of-type(n+2)
    {
        margin-left: 15px;
    }
}

@media all and (min-width: 629px) {
    /* 3 columns */
    .rsvp .meal-choices.guest-meal-choices-3 .meal-choice:nth-of-type(n+4),
    .rsvp .meal-choices.guest-meal-choices-3 .meal-choice-add:nth-of-type(n+4)
    {
        margin-left: 15px;
    }
}

@media all and (min-width: 811px) {
    /* all columns (2, 3, or 4) */
    .rsvp .meal-choices.guest-meal-choices-4 .meal-choice:nth-of-type(n+2),
    .rsvp .meal-choices.guest-meal-choices-4 .meal-choice-add:nth-of-type(n+2)
    {
        margin-left: 15px;
    }
}

@media all and (orientation: portrait) {
    .wedding.mobile .image-modal .ng-modal-dialog .ng-modal-dialog-content img.lightbox-image
    {
        width: 200px;
    }
}
@media all and (orientation: landscape) {
    .wedding.mobile .image-modal .ng-modal-dialog .ng-modal-dialog-content img.lightbox-image
    {
        width: 200px;
    }

    .wedding.mobile .image-modal .ng-modal-dialog .ng-modal-dialog-content
    {
        white-space: nowrap;
    }
    .wedding.mobile .image-modal .ng-modal-dialog .ng-modal-dialog-content div.lightbox-text
    {
        display: inline-block;
    }
}

@media all and (max-width: 1099px) {
    div.our-story
    {
        min-width: 1000px;
        font-size: 1.6rem;
    }

    div.our-story table.swanwick-history tbody tr td:first-of-type
    {
        font-size: 1.8rem;
    }
    div.our-story table.history-with-pics > tbody > tr > td:first-of-type,
    div.our-story table.history-with-pics > tbody > tr > td:last-of-type
    {
        vertical-align: top;
    }

    div.our-story table.history-with-pics > tbody > tr > td:nth-of-type(2)
    {
        min-width: 600px;
    }
}

@media all and (min-width: 1100px) and (max-width: 1399px) {
    div.our-story
    {
        max-width: 1100px;
        font-size: 1.6rem;
    }

    div.our-story table.swanwick-history tbody tr td:first-of-type
    {
        font-size: 1.8rem;
    }

    div.our-story table.history-with-pics > tbody > tr > td:first-of-type,
    div.our-story table.history-with-pics > tbody > tr > td:last-of-type
    {
        vertical-align: top;
        width: 20%;
    }
    div.our-story table.history-with-pics > tbody > tr > td:nth-of-type(2)
    {
        width: 60%;
    }
}

@media all and (min-width: 1400px) {
    div.our-story
    {
        max-width: 1400px;
    }

    div.our-story table.history-with-pics > tbody > tr > td:first-of-type,
    div.our-story table.history-with-pics > tbody > tr > td:last-of-type
    {
        vertical-align: top;
        width: 20%;
    }
    div.our-story table.history-with-pics > tbody > tr > td:nth-of-type(2)
    {
        width: 60%;
    }
}

/* END MEDIA QUERIES */
/********************************************************/

.oldBrowserText
{
    font-size: 40px;
    max-width: 60%;
}