/*
 * Globals
 */


 @font-face {
    font-family: 'mr_sheffieldregular';
    src: url('../fonts/mr_sheffield_0-webfont.eot');
    src: url('../fonts/mr_sheffield_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/mr_sheffield_0-webfont.woff2') format('woff2'),
         url('../fonts/mr_sheffield_0-webfont.woff') format('woff'),
         url('../fonts/mr_sheffield_0-webfont.ttf') format('truetype'),
         url('../fonts/mr_sheffield_0-webfont.svg#mr_sheffieldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'champagne__limousinesregular';
    src: url('../fonts/champagne__limousines-webfont.eot');
    src: url('../fonts/champagne__limousines-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/champagne__limousines-webfont.woff2') format('woff2'),
         url('../fonts/champagne__limousines-webfont.woff') format('woff'),
         url('../fonts/champagne__limousines-webfont.ttf') format('truetype'),
         url('../fonts/champagne__limousines-webfont.svg#champagne__limousinesregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

#snow{
  background: none;
  font-family: Androgyne;
  background-image: url('../imgs/s1.png'), url('../imgs/s2.png'), url('../imgs/s3.png');
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index:0;
  -webkit-animation: snow 10s linear infinite;
  -moz-animation: snow 10s linear infinite;
  -ms-animation: snow 10s linear infinite;
  animation: snow 10s linear infinite;
 
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
} 

html,
body {
  min-height: 100%;
}
body {
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  font-family: champagne__limousinesregular;

  background: #fff url('../imgs/bg.jpg') 0 0;
 
      background-position: center; 
      background-size: 100% auto;

   
}

.header
{
  position: relative;
}


.header h1
{
    margin-top: 30px;
    font-size: 10em;
    text-align: center;
    font-family: mr_sheffieldregular !important;
    padding: 10px;
}

.header span
{
  position: relative;
  font-size: 52px;
  top: -80px;
}

.champagne
{
  font-family: champagne__limousinesregular !important;
}

.pete
{
    -ms-transform: rotate(-20deg); /* IE 9 */
    -webkit-transform: rotate(-20deg); /* Safari */
    transform: rotate(-20deg);
}

.zoe
{
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg);
}

.images
{
  margin-bottom: 100px;
}

.rsvp-btn
{

  width: 250px;
  margin: 0 auto;
}


#start, #group
{
    z-index:10;
}

#group
{
  display: none;
  margin-left: 5%;
  margin-right: 5%;
}

.modal-content
{
  background: #fdfdfd;
}

.modal
{
  color: #999;
    text-shadow: none; /* Prevent inheritence from `body` */
}

.panel
{
    text-shadow: none; /* Prevent inheritence from `body` */  
}

.gray-bg
{
  border-radius: 1em;
  padding: 1em;
  background: rgba(0,0,0,.3);
}


.tal
{
  text-align: left;
}

.tac
{
  text-align: center !important;
}

.bt
{
  color: #000;
  text-shadow: none; /* Prevent inheritence from `body` */  
}

.fs24
{
  font-size: 24px !important;
}

.fs42
{
  font-size: 42px !important;
}

.fs52
{
  font-size: 52px !important;
}


@media only screen and (max-width : 768px) {
  body
  {
          background-size: auto 100%;
  }
}