@charset "UTF-8";
/*-------------------------------------------- Variables & Mixins --------------------------------------------*/
/* 
More pink of a color: #e1bfbe;
*/
/*-------------------------------------------- Fonts --------------------------------------------*/
/* Cursive Font */
@font-face {
  font-family: 'young-and-beautiful';
  src: url("../fonts/young-and-beautiful.ttf") format("truetype");
  /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */ }
/* Thick Font */
@font-face {
  font-family: 'bebas-neue';
  src: url("../fonts/bebas-neue.otf") format("opentype");
  /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */ }
/* Thin Font */
@font-face {
  font-family: 'disco';
  src: url("../fonts/Disco.ttf") format("truetype");
  /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */ }
/*-------------------------------------------- General --------------------------------------------*/
body {
  min-width: 320px; }

h1 {
  font-family: 'bebas-neue'; }

h2 {
  font-family: 'bebas-neue';
  font-size: 50px;
  margin-bottom: 0; }

h3 {
  font-family: 'disco';
  margin-top: 0; }

.site-title {
  font-family: 'bebas-neue';
  font-size: 50px;
  margin: 0; }

.site-subtitle {
  font-family: 'young-and-beautiful';
  font-size: 30px;
  margin: 0; }

p {
  font-size: 20px; }

.container {
  width: 100%; }

.row {
  padding: 20px;
  max-width: 1024px;
  margin: 0 auto; }

.responsive-video-wrapper {
  margin-top: 25px;
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0; }
  .responsive-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.btn {
  background-color: #F8D8D2;
  text-transform: uppercase;
  border-radius: 0;
  padding: 15px 30px;
  border: none;
  font-weight: bold;
  color: white; }

.btn,
.btn:hover,
.btn:focus,
.btn:active,
.btn:visited {
  color: white !important;
  outline: none; }

.btn:active,
.btn:hover {
  background-color: #94706F; }

.view-more-btn {
  cursor: pointer;
  border: solid 1px white;
  width: 150px;
  margin: 10px auto 0 auto;
  font-size: 18px;
  padding: 10px 0;
  background: none;
  color: white; }

.view-more-btn,
.view-more-btn:focus {
  outline: none; }

img {
  max-width: 100%; }

/*-------------------------------------------- Header --------------------------------------------*/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 320px;
  z-index: 100;
  height: 50px; }
  header .site-title {
    color: white;
    line-height: 50px;
    margin: 0 0 0 15px;
    font-size: 20px;
    float: left;
    cursor: pointer; }
  header nav ul {
    list-style: none;
    overflow: hidden;
    padding: 0;
    margin: 0; }
    header nav ul li {
      padding: 0 20px;
      cursor: pointer;
      text-transform: uppercase;
      color: #ccc;
      line-height: 50px; }
      header nav ul li.current {
        color: white; }

/*----- Mobile ------*/
@media screen and (max-width: 599px) {
  header {
    background: rgba(0, 0, 0, 0.7); }
    header nav {
      clear: both;
      width: 100%;
      display: none;
      background: rgba(0, 0, 0, 0.7); }
      header nav ul li {
        border-top: solid 1px rgba(0, 0, 0, 0.7); }
        header nav ul li.current {
          background: rgba(0, 0, 0, 0.9); }
    header #menu-icon {
      float: right;
      margin-right: 15px;
      display: block;
      color: white;
      font-size: 30px;
      line-height: 50px;
      cursor: pointer; } }
/*----- Desktop ------*/
@media screen and (min-width: 600px) {
  header {
    background: rgba(0, 0, 0, 0.5);
    display: block !important; }
    header nav {
      float: right; }
      header nav ul li {
        float: left; }
        header nav ul li.current {
          background: rgba(0, 0, 0, 0.8); }
    header #menu-icon {
      display: none; } }
/*-------------------------------------------- General --------------------------------------------*/
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important; }

/*-------------------------------------------- Full Screen Image Section --------------------------------------------*/
/* fullscreen setup */
html, body {
  /* give this to all tags from html to .fullscreen */
  height: 100%; }

.fullscreen,
.content-a {
  width: 100%;
  min-height: 100%;
  background-position-x: 50%; }

.not-fullscreen,
.not-fullscreen .content-a,
.fullscreen.not-overflow,
.fullscreen.not-overflow .content-a {
  height: 100%;
  overflow: hidden; }

.background {
  /* content centering styles */ }
  .background .content-a {
    display: table; }
  .background .content-b {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    text-align: center;
    font-size: 40px;
    color: white;
    padding-top: 200px; }
    .background .content-b .branding .save-the-date {
      font-family: 'young-and-beautiful';
      font-size: 45px;
      margin: 0; }
    .background .content-b .branding .name-holder {
      width: 200px;
      height: 100px;
      position: relative;
      margin: 0 auto;
      overflow: hidden;
      background-image: url(../images/general/brackets.png);
      padding: 4px 32px 0 32px; }
      .background .content-b .branding .name-holder .names {
        float: right;
        font-family: 'bebas-neue';
        font-size: 55px;
        line-height: 50px;
        margin: 0; }
      .background .content-b .branding .name-holder .and {
        position: absolute;
        left: 27px;
        bottom: 0;
        font-family: 'young-and-beautiful';
        font-size: 20px;
        -ms-transform: rotate(270deg);
        /* IE 9 */
        -webkit-transform: rotate(270deg);
        /* Chrome, Safari, Opera */
        transform: rotate(270deg); }
    .background .content-b .branding .date {
      font-family: 'disco';
      font-size: 30px; }

.not-fullscreen {
  height: 50%; }

/*-------------------------------------------- Our Story Page --------------------------------------------*/
#our-story {
  /*----- Mobile ------*/
  /*----- Desktop ------*/ }
  #our-story h2 {
    font-size: 30px; }
  #our-story h3 {
    font-size: 20px; }
  #our-story .holder {
    width: 100%;
    clear: both; }
    #our-story .holder .inner {
      position: relative;
      margin: 0 auto;
      display: block;
      max-width: 1024px;
      overflow: hidden; }
      #our-story .holder .inner .text {
        text-align: center;
        padding: 20px;
        margin: 0;
        position: absolute; }
        #our-story .holder .inner .text h3 {
          font-weight: bold; }
      #our-story .holder .inner .img-holder {
        display: block; }
        #our-story .holder .inner .img-holder a {
          display: block; }
  @media screen and (max-width: 599px) {
    #our-story .holder .text {
      bottom: 0;
      width: 100%;
      color: white;
      background: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
      /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.65)));
      /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
      /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
      /* Opera 11.10+ */
      background: -ms-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
      /* IE10+ */
      background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
      /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
      /* IE6-9 */ }
    #our-story .holder img {
      width: 100%; } }
  @media screen and (min-width: 600px) {
    #our-story .holder {
      padding: 40px;
      margin: 0 auto; }
      #our-story .holder .inner .img-holder a img {
        margin: 10px auto; }
      #our-story .holder .text {
        width: 50%;
        top: 50%;
        transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        /* IE 9 */
        -webkit-transform: translate(0, -50%);
        /* Safari and Chrome */ }
      #our-story .holder .img-holder {
        width: 50%; }
        #our-story .holder .img-holder img {
          margin: 0 auto;
          display: block; }
      #our-story .holder:nth-child(even) {
        /* image on the right side */
        background: #F8D8D2;
        color: white; }
        #our-story .holder:nth-child(even) .img-holder {
          float: right; }
          #our-story .holder:nth-child(even) .img-holder img {
            border: solid 5px white; }
      #our-story .holder:nth-child(odd) {
        /* image on the left side */ }
        #our-story .holder:nth-child(odd) .text {
          right: 0; } }

/*-------------------------------------------- Footer --------------------------------------------*/
footer {
  background: black;
  color: white;
  text-align: center;
  padding: 20px; }
  footer p {
    font-size: 12px; }

/*-------------------------------------------- Ads --------------------------------------------*/
.ads img {
  margin-bottom: 10px; }
.ads .wilson-diamond {
  max-width: 320px;
  margin: 0 auto;
  padding: 10px;
  text-align: center; }
  .ads .wilson-diamond .btn {
    background: #40b9ad;
    margin: 20px auto 0;
    font-size: 12px;
    padding: 10px; }
  .ads .wilson-diamond .btn:hover {
    background: #1B6C64; }

.back-to-top {
  position: fixed;
  bottom: 10px;
  right: 10px;
  color: #333;
  font-size: 30px;
  cursor: pointer; }

/*-------------------------------------------- The Date --------------------------------------------*/
.the-date {
  max-width: 100%;
  background-color: #F8D8D2;
  color: white; }
  .the-date h2 {
    padding: 20px 0px;
    margin: 40px auto;
    width: 300px;
    font-size: 25px;
    font-family: 'disco';
    border-top: solid 1px white;
    border-bottom: solid 1px white; }

/*-------------------------------------------- Home Page --------------------------------------------*/
#home {
  text-align: center; }
  #home .row.profile-pics {
    font-size: 12px; }
    #home .row.profile-pics .name-holder {
      position: relative;
      height: 40px;
      margin-bottom: 5px; }
      #home .row.profile-pics .name-holder h3 {
        font-size: 14px;
        position: absolute;
        bottom: 0;
        width: 100%;
        margin: 0; }
    #home .row.profile-pics p {
      text-align: center;
      margin-top: 5px;
      font-size: 12px;
      color: #aaa; }
    #home .row.profile-pics img {
      max-width: 100%; }
    #home .row.profile-pics.bride-groom-profile-pics img {
      margin-bottom: 10px; }
    #home .row.profile-pics.bride-groom-profile-pics p {
      text-align: center;
      font-size: 20px;
      color: black; }
    #home .row.profile-pics.bride-groom-profile-pics h2 {
      /*----- Tablet ------*/
      /*----- Mobile ------*/ }
      @media screen and (max-width: 600px) {
        #home .row.profile-pics.bride-groom-profile-pics h2 {
          font-size: 30px; } }
      @media screen and (max-width: 400px) {
        #home .row.profile-pics.bride-groom-profile-pics h2 {
          font-size: 20px; } }
  #home .reception {
    max-width: 100%;
    position: relative;
    padding: 0;
    overflow: hidden; }
    #home .reception img {
      width: 100%;
      min-width: 700px; }
    #home .reception .details-content {
      color: white;
      width: 300px;
      height: 250px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -150px;
      margin-top: -125px; }
  #home .registry {
    max-width: 100%;
    background-color: #F8D8D2;
    color: white; }
    #home .registry img {
      margin: 0 auto;
      display: block;
      max-width: 100%;
      padding-bottom: 10px;
      border-bottom: solid 1px white; }
    #home .registry .store .btn {
      margin: 20px auto 0 auto;
      padding: 0; }
    #home .registry .store:hover .btn {
      color: #94706F !important;
      background: #F8D8D2; }

/*-------------------------------------------- RSVP --------------------------------------------*/
.rsvp form {
  max-width: 400px;
  margin: 10px auto 0 auto; }
  .rsvp form .btn {
    display: block;
    margin: 0 auto; }
.rsvp p {
  text-align: center; }

/*-------------------------------------------- Gallery --------------------------------------------*/
.img-gallery img {
  width: 100%;
  height: auto;
  margin-top: 20px; }

/*-------------------------------------------- Date Counter --------------------------------------------*/
.date-counter {
  overflow: hidden;
  background: #F8D8D2;
  color: white;
  max-width: 100%; }
  .date-counter .counter-holder {
    position: relative;
    width: 160px;
    height: 100px;
    margin: 0 auto 20px auto; }
    .date-counter .counter-holder .counter-text {
      position: absolute;
      width: 100%; }
      .date-counter .counter-holder .counter-text.one-item {
        top: 20px; }
        .date-counter .counter-holder .counter-text.one-item p {
          font-size: 40px; }
      .date-counter .counter-holder .counter-text.two-items {
        top: 8px; }
        .date-counter .counter-holder .counter-text.two-items p {
          font-size: 30px; }
      .date-counter .counter-holder .counter-text.three-items {
        top: 4px; }
        .date-counter .counter-holder .counter-text.three-items p {
          font-size: 22px; }
      .date-counter .counter-holder .counter-text p {
        text-align: center;
        width: 100%;
        margin: 0;
        font-family: 'bebas-neue'; }
    .date-counter .counter-holder .lbar,
    .date-counter .counter-holder .rbar {
      background: url(../images/general/brackets.png);
      width: 30px;
      height: 100px;
      position: absolute;
      top: 0; }
    .date-counter .counter-holder .lbar {
      left: 0; }
    .date-counter .counter-holder .rbar {
      background-position: 28px;
      right: 0; }

/*-------------------------------------------- Gallery --------------------------------------------*/
#gallery .row {
  padding: 20px 0 0 0; }
  #gallery .row .gallery-section {
    margin: 0 0 10px 0;
    padding-right: 5px;
    padding-left: 5px; }
    #gallery .row .gallery-section h3 {
      background: #F8D8D2;
      color: white;
      text-align: center;
      padding: 10px;
      margin: 0;
      /* Mobile */
      /* Desktop */ }
      @media screen and (max-width: 599px) {
        #gallery .row .gallery-section h3 {
          font-size: 15px; } }
      @media screen and (min-width: 600px) {
        #gallery .row .gallery-section h3 {
          font-size: 20px; } }
    #gallery .row .gallery-section .img-holder {
      position: relative; }
      #gallery .row .gallery-section .img-holder:hover .overlay {
        background: rgba(0, 0, 0, 0.2); }
      #gallery .row .gallery-section .img-holder .overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        z-index: 1; }
      #gallery .row .gallery-section .img-holder button, #gallery .row .gallery-section .img-holder p {
        position: absolute;
        bottom: 10px;
        z-index: 2; }
      #gallery .row .gallery-section .img-holder button {
        left: 50%;
        width: 100px;
        margin-left: -50px; }
      #gallery .row .gallery-section .img-holder p {
        color: white;
        text-align: center;
        width: 100%; }

/*-------------------------------------------- Reception --------------------------------------------*/
#reception h2 {
  text-align: center; }
#reception h3 {
  text-align: center; }
#reception iframe {
  margin: 0 auto;
  display: block;
  width: 100%;
  max-width: 600px; }
@media screen and (max-width: 599px) {
  #reception .rsvp {
    /* Mobile */
    margin-bottom: 70px; } }

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