@media screen and (min-width: 1001px) {
  * {
    font-family: caviar_dreamsregular;
    color: white; }

  html, body, .halapinx {
    height: 100%;
    width: 100%;
    position: absolute;
    background: black; }

  @keyframes pulse {
    0% {
      transform: rotate(-45deg) scale(1); }
    50% {
      transform: rotate(-45deg) scale(1.1); }
    100% {
      transform: rotate(-45deg) scale(1); } }
  section {
    position: absolute;
    width: 50%;
    height: 50%;
    border: 5px solid black;
    background: black;
    transition: 500ms ease;
    overflow: hidden; }

  [class*="bg-"] {
    position: relative;
    height: 100%;
    transition: 500ms ease;
    cursor: pointer; }
    [class*="bg-"] .close {
      position: relative;
      font-size: 5em;
      z-index: 2;
      display: none;
      background: black;
      padding: 0 20px 10px;
      opacity: 0.3; }
    [class*="bg-"] h1 {
      padding: 0;
      margin: 0; }

  [class*="bg-"]:hover {
    transform: scale(0.99);
    -webkit-filter: contrast(200%);
    -moz-filter: contrast(200%);
    filter: contrast(200%); }

  .bg-1 {
    background: url("../images/thatsunset.jpeg") no-repeat bottom;
    background-size: cover; }

  .bg-2 {
    background: url("../images/ganzekraal.jpg") no-repeat bottom;
    background-size: cover; }

  .bg-3 {
    background: url("../images/rsvp.jpg") no-repeat bottom;
    background-size: cover; }

  .bg-4 {
    background: url("../images/registry.jpg") no-repeat bottom;
    background-size: cover; }

  .horivert-align {
    display: flex;
    justify-content: center;
    align-items: center; }

  .vertically-align {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }

  .center-vertical {
    top: 50%;
    transform: translateY(-50%); }

  .center-horizontal {
    left: 50%;
    transform: translateX(-50%); }

  .row.no-pad {
    margin-right: 0;
    margin-left: 0; }

  .row.no-pad > [class*='col-'] {
    padding-right: 0;
    padding-left: 0; }

  .title {
    position: relative;
    text-align: center;
    font-family: lovers_quarrelregular;
    color: white; }
    .title h1 {
      font-size: 5vw; }
    .title h3 {
      font-size: 3vw; }

  .decor {
    font-family: nymphetteregular; }

  .closeBottom {
    padding: 10px;
    font-size: 2em;
    text-align: center;
    width: 100%;
    color: silver;
    border-top: silver solid 1px;
    cursor: pointer;
    transition: 500ms ease; }

  .closeBottom:hover {
    background: silver;
    color: black; }

  footer {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    padding: 20px;
    font-size: 1.5em; }

  .halapinx {
    transform: scale(1);
    background: black;
    transition: 1.5s 500ms ease;
    z-index: 1; }

  .loading {
    transform: scale(0.6);
    background: black; }

  @-moz-document url-prefix() {
    .homescreen {
      display: none; }

    .loading {
      transform: scale(1); } }
  .homescreen {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    perspective: 2000px; }
    .homescreen .left, .homescreen .right {
      position: absolute;
      width: 50%;
      height: 100%;
      left: 0;
      background: #e74c3c;
      -webkit-transform: rotateY(-1deg);
      /* Safari */
      transform: rotateY(-1deg);
      transform-origin: 0 0;
      transition: 1.5s 500ms ease; }
    .homescreen .center {
      position: absolute;
      z-index: 3;
      width: 460px;
      height: 400px;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      transform: scale(1);
      transition: 500ms cubic-bezier(0.6, -1.09, 0.83, 0.67); }
      .homescreen .center img {
        position: relative;
        height: 400px;
        cursor: pointer; }
      .homescreen .center #svgPath {
        transform: scale(5); }
    .homescreen .right {
      left: auto;
      right: 0;
      background: #c0392b;
      -webkit-transform: rotateY(1deg);
      /* Safari */
      transform: rotateY(1deg);
      transform-origin: 100% 100%; }

  .svg-clipped {
    -webkit-clip-path: url(#svgPath);
    clip-path: url(#svgPath);
    -moz-clip-path: url(#svgPath);
    -ms-clip-path: url(#svgPath);
    transform: translate(1px);
    -webkit-transform: translate(1px);
    -moz-transform: translate(1px);
    -ms-transform: translate(1px); }

  .homescreen.loaded {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    perspective: 2000px; }
    .homescreen.loaded .left, .homescreen.loaded .right {
      position: absolute;
      width: 50%;
      height: 100%;
      left: 0;
      background: #e74c3c;
      -webkit-transform: rotateY(-90deg);
      /* Safari */
      transform: rotateY(-90deg);
      transform-origin: 0 0; }
    .homescreen.loaded .center {
      position: absolute;
      z-index: 3;
      width: 460px;
      height: 400px;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      transform: scale(0); }
      .homescreen.loaded .center img {
        position: relative;
        height: 400px;
        cursor: pointer; }
      .homescreen.loaded .center #svgPath {
        transform: scale(5); }
    .homescreen.loaded .right {
      left: auto;
      right: 0;
      background: #c0392b;
      -webkit-transform: rotateY(90deg);
      /* Safari */
      transform: rotateY(90deg);
      transform-origin: 100% 100%; }

  .wrapper {
    width: 100%;
    position: absolute;
    background: black;
    min-height: 100%;
    overflow: hidden;
    text-align: center; }

  .x1 {
    left: 5%;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.6;
    -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate; }

  .x2 {
    left: 25%;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.9;
    -webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -moz-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate; }

  .x3 {
    left: 55%;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.8;
    -webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate; }

  .x4 {
    left: 72%;
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 0.9;
    -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: moveclouds 18s linear infinite, sideWays 0zs ease-in-out infinite alternate; }

  .x5 {
    left: 88%;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.3;
    -webkit-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -moz-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate; }

  .x6 {
    left: 33%;
    opacity: 1;
    -webkit-animation: moveclouds 2s linear infinite, swayWays 1s ease-in-out infinite alternate;
    animation: moveclouds 10s linear infinite, swayWays 9s ease-in-out infinite alternate; }

  @-webkit-keyframes moveclouds {
    0% {
      top: 500px; }
    100% {
      top: -500px; } }
  @keyframes moveclouds {
    0% {
      top: 500px; }
    100% {
      top: -500px; } }
  @-webkit-keyframes sideWays {
    0% {
      margin-left: 0px; }
    100% {
      margin-left: 50px; } }
  @keyframes sideWays {
    0% {
      margin-left: 0px; }
    100% {
      margin-left: 50px; } }
  @keyframes swayWays {
    0% {
      transform: rotate(12deg);
      left: -0.3%; }
    33% {
      transform: rotate(-2deg);
      left: 0.7%; }
    100% {
      transform: rotate(0deg);
      left: -12%; } }
  /* //  HEART CODE */
  .altheart {
    background: url(http://static.indigoimages.ca/2016/shop/113439_img25_twotoneheart.png) no-repeat center;
    width: 24px;
    height: 21px;
    position: relative;
    display: block; }

  .heart {
    position: relative; }

  .heart:before,
  .heart:after {
    position: absolute;
    content: "";
    left: 18px;
    top: 0;
    width: 18px;
    height: 30px;
    background: #CC2022;
    -moz-border-radius: 20px 50% 0 0;
    border-radius: 30px 30px 0 0;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%; }

  .heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%; }

  .us {
    height: 100%; }
    .us p {
      font-size: 1.2em; }
    .us .story {
      text-align: center;
      position: relative;
      height: 100%; }
      .us .story img {
        width: 30%;
        margin: 20px; }
      .us .story > div {
        position: relative;
        background: rgba(0, 0, 0, 0.3);
        height: 100%; }

  #ourstory {
    background: url("../images/thatcannon.jpeg") 50% 0;
    background-size: cover; }
    #ourstory p {
      font-size: 1.5em; }

  #proposal {
    background: url("../images/proposal.jpeg") 0 20%;
    background-size: cover; }

  .logistics {
    left: 50%; }
    .logistics .thumbnail img {
      height: 15vh;
      width: 100%; }

  .venue {
    position: relative;
    width: 100%;
    height: auto; }
    .venue .location {
      position: relative;
      text-align: center;
      width: 100%;
      background: black;
      padding-bottom: 10px; }
      .venue .location .directions {
        color: #DAA520;
        cursor: pointer;
        display: inline-block; }
      .venue .location .directions:hover {
        border-bottom: 1px dotted #DAA520; }
    .venue .details span {
      color: #DAA520; }
    .venue .details p {
      font-size: 1.1em; }
    .venue .popover-content, .venue .popover-title {
      color: black; }
    .venue #map {
      position: relative;
      height: 400px;
      width: 100%; }

  .rsvp, .registry {
    left: 50%;
    top: 50%;
    width: 25%; }

  .rsvp .container {
    height: 50%; }
  .rsvp .reply input, .rsvp .plusone input {
    background: transparent;
    border: 0;
    margin: 50px 0;
    width: 250px;
    border-bottom: 1px dashed white; }
  .rsvp .reply input:focus, .rsvp .plusone input:focus {
    outline: 0;
    border-bottom: 1px dashed #DAA520; }
  .rsvp .reply #yes, .rsvp .reply #no, .rsvp .reply #plusyes, .rsvp .reply #plusno, .rsvp .plusone #yes, .rsvp .plusone #no, .rsvp .plusone #plusyes, .rsvp .plusone #plusno {
    text-decoration: line-through;
    cursor: pointer; }
  .rsvp .reply #yes:hover, .rsvp .reply #no:hover, .rsvp .reply #plusyes:hover, .rsvp .reply #plusno:hover, .rsvp .plusone #yes:hover, .rsvp .plusone #no:hover, .rsvp .plusone #plusyes:hover, .rsvp .plusone #plusno:hover {
    text-decoration: none; }
  .rsvp .reply #yes.choice, .rsvp .reply #no.choice, .rsvp .reply #plusyes.choice, .rsvp .reply #plusno.choice, .rsvp .plusone #yes.choice, .rsvp .plusone #no.choice, .rsvp .plusone #plusyes.choice, .rsvp .plusone #plusno.choice {
    border-bottom: 3px solid #DAA520;
    text-decoration: none; }
  .rsvp .reply #exclamation, .rsvp .plusone #exclamation {
    opacity: 0; }
  .rsvp .reply #exclamation.choice, .rsvp .plusone #exclamation.choice {
    opacity: 1; }
  .rsvp button {
    background: transparent;
    padding: 5px 20px;
    margin-top: 20px;
    border: 1px solid white;
    font-size: 2em; }
  .rsvp button:hover {
    border: 1px solid #DAA520;
    color: #DAA520; }

  .registry {
    left: 75%; }
    .registry .thumbnail img {
      height: 20vh; }

  .popout {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0; }
    .popout [class*="bg-"] {
      height: 50%;
      background-position: center; }
      .popout [class*="bg-"] .close {
        display: block; }
    .popout .bg-3 {
      background-position: 0 20%; }

  .countDown {
    position: relative;
    z-index: 10;
    margin-left: 50%;
    width: 100%;
    text-align: center;
    transform: translateX(-50%);
    color: white; }
    .countDown #countdown {
      color: #DAA520 !important;
      font-style: italic; } }
@media screen and (max-width: 1000px) {
  * {
    font-family: caviar_dreamsregular;
    color: white; }

  html, body, .halapinx {
    height: 100%;
    width: 100%;
    position: absolute;
    background: black; }

  .heart {
    background-color: #e74c3c;
    display: inline-block;
    height: 200px;
    margin: 0 10px;
    position: relative;
    top: 0;
    transform: rotate(-45deg);
    width: 200px;
    animation: pulse 5s ease infinite; }

  .heart:before,
  .heart:after {
    content: "";
    background-color: #e74c3c;
    border-radius: 50%;
    height: 200px;
    position: absolute;
    width: 200px; }

  .heart:before {
    top: -100px;
    left: 0; }

  .heart:after {
    left: 100px;
    top: 0; }

  @keyframes pulse {
    0% {
      transform: rotate(-45deg) scale(1); }
    50% {
      transform: rotate(-45deg) scale(1.1); }
    100% {
      transform: rotate(-45deg) scale(1); } }
  section {
    position: relative;
    width: 100%;
    height: 50%;
    border: 5px solid black;
    background: black;
    transition: 500ms ease;
    overflow: hidden; }

  [class*="bg-"] {
    position: relative;
    height: 100%;
    transition: 500ms ease;
    cursor: pointer; }
    [class*="bg-"] .close {
      position: relative;
      font-size: 5em;
      z-index: 2;
      display: none;
      background: black;
      padding: 0 20px 10px;
      opacity: 0.3; }
    [class*="bg-"] h1 {
      padding: 0;
      margin: 0;
      font-size: 10em; }
    [class*="bg-"] h2 {
      font-size: 3.5em; }
    [class*="bg-"] h3 {
      font-size: 6em; }

  [class*="bg-"]:hover {
    transform: scale(0.99);
    -webkit-filter: contrast(200%);
    -moz-filter: contrast(200%);
    filter: contrast(200%); }

  .bg-1 {
    background: url("../images/thatsunset.jpeg") no-repeat bottom;
    background-size: cover; }

  .bg-2 {
    background: url("../images/ganzekraal.jpg") no-repeat bottom;
    background-size: cover; }

  .bg-3 {
    background: url("../images/rsvp.jpg") no-repeat bottom;
    background-size: cover; }

  .bg-4 {
    background: url("../images/registry.jpg") no-repeat bottom;
    background-size: cover;
    background-position: 0 50%; }

  .horivert-align {
    display: flex;
    justify-content: center;
    align-items: center; }

  .vertically-align {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }

  .center-vertical {
    top: 50%;
    transform: translateY(-50%); }

  .center-horizontal {
    left: 50%;
    transform: translateX(-50%); }

  .row.no-pad {
    margin-right: 0;
    margin-left: 0; }

  .row.no-pad > [class*='col-'] {
    padding-right: 0;
    padding-left: 0; }

  #map {
    height: 50%;
    width: 100%; }

  .title {
    position: relative;
    text-align: center;
    font-family: lovers_quarrelregular;
    color: white; }

  .decor {
    font-family: nymphetteregular; }

  .closeBottom {
    padding: 0;
    font-size: 6em;
    text-align: center;
    width: 100%;
    color: silver;
    border-top: silver solid 1px;
    cursor: pointer;
    transition: 500ms ease; }

  .closeBottom:hover {
    background: silver;
    color: black; }

  .us {
    height: 100%; }
    .us p {
      font-size: 1.5em; }
    .us .story {
      text-align: center;
      position: relative;
      height: 100%; }
      .us .story img {
        width: 30%;
        margin: 20px; }
      .us .story > div {
        position: relative;
        background: rgba(0, 0, 0, 0.3);
        height: 100%; }

  #ourstory {
    background: url("../images/thatcannon.jpeg") 50% 0;
    background-size: cover;
    height: 50%; }

  #proposal {
    background: url("../images/proposal.jpeg") 0 20%;
    background-size: cover;
    height: 50%; }

  .logistics {
    left: 0; }
    .logistics .thumbnail img {
      height: 150px;
      width: 100%; }

  .venue {
    position: relative;
    width: 100%;
    height: auto; }
    .venue .location {
      position: relative;
      text-align: center;
      width: 100%;
      background: black;
      padding-bottom: 10px; }
    .venue .details span {
      color: #DAA520; }
    .venue .details div p {
      font-size: 1.1em !important; }
    .venue .popover-content, .venue .popover-title {
      color: black; }
    .venue #map {
      position: relative;
      height: 300px;
      width: 100%; }

  .rsvp, .registry {
    left: 0;
    top: 0;
    width: 100%; }

  .rsvp .container {
    height: 50%; }
  .rsvp .reply input, .rsvp .plusone input {
    background: transparent;
    border: 0;
    margin: 50px 0;
    width: 250px;
    border-bottom: 1px dashed white; }
  .rsvp .reply input:focus, .rsvp .plusone input:focus {
    outline: 0;
    border-bottom: 1px dashed #DAA520; }
  .rsvp .reply #yes, .rsvp .reply #no, .rsvp .reply #plusyes, .rsvp .reply #plusno, .rsvp .plusone #yes, .rsvp .plusone #no, .rsvp .plusone #plusyes, .rsvp .plusone #plusno {
    text-decoration: line-through;
    cursor: pointer; }
  .rsvp .reply #yes:hover, .rsvp .reply #no:hover, .rsvp .reply #plusyes:hover, .rsvp .reply #plusno:hover, .rsvp .plusone #yes:hover, .rsvp .plusone #no:hover, .rsvp .plusone #plusyes:hover, .rsvp .plusone #plusno:hover {
    text-decoration: none; }
  .rsvp .reply #yes.choice, .rsvp .reply #no.choice, .rsvp .reply #plusyes.choice, .rsvp .reply #plusno.choice, .rsvp .plusone #yes.choice, .rsvp .plusone #no.choice, .rsvp .plusone #plusyes.choice, .rsvp .plusone #plusno.choice {
    border-bottom: 3px solid #DAA520;
    text-decoration: none; }
  .rsvp .reply #exclamation, .rsvp .plusone #exclamation {
    opacity: 0; }
  .rsvp .reply #exclamation.choice, .rsvp .plusone #exclamation.choice {
    opacity: 1; }
  .rsvp button {
    background: transparent;
    padding: 5px 20px;
    margin-top: 20px;
    border: 1px solid white;
    font-size: 2em; }
  .rsvp button:hover {
    border: 1px solid #DAA520;
    color: #DAA520; }

  .registry {
    left: 0; }
    .registry .thumbnail img {
      height: 20vh; }

  .popout {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0; }
    .popout [class*="bg-"] {
      height: 50%;
      background-position: center; }
      .popout [class*="bg-"] .close {
        display: block; }

  .countDown {
    position: relative;
    z-index: 10;
    margin-left: 50%;
    width: 100%;
    text-align: center;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    color: white; }
    .countDown #countdown {
      color: #DAA520 !important;
      font-style: italic; } }

/*# sourceMappingURL=style.css.map */