@font-face {
    font-family: "Walkway";
    src: url('Walkway_SemiBold.ttf');
}

html,body {
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  font-color:white;
}

a {
  text-decoration:none; 
  color:#3399FF;
}

a img {
  text-decoration: none;
	border: 0 none;
}

.secret {
  text-decoration: none;
  color:#ffffff;
}

/******************
  Slide Properties
*******************/

.slide {
  height:1000px;
  width:100%;
  
  position: relative;
  box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
  
  z-index:1;
}

.wrapper {
  position:relative;
  background-attachment:fixed;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
}

.foreground {
  background-attachment:fixed;
  position:absolute;
  width:100%;
  height:100%;
  bottom:0px;
}

.background {
  position:absolute;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  
  z-index:-1;
  
  background-attachment:fixed;
  background-repeat:no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.backgroundFill {
  position:absolute;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  
  z-index:-2;
  
  background-attachment:fixed;
  background-size: 100%;
  background-repeat:repeat;
}

.textBox {
  text-align:center;
  background:#700000;
  box-shadow:5px 5px 5px #000;
  font-size:14px;
  padding:0px 10px 20px 10px;
}

.textBox H1 {
  font-family:"Lobster Two", cursive;
  color:white;
  font-size:20pt;
}

.textBox H2 {
  font-family:"Lobster Two", cursive;
  color:white;
  font-size:16pt;
}

.textBox H4 {
  color:white;
  font-size:8pt;
}

/******************
  iPad
*******************/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .background {
    background-size: 1024px 1000px;
    -webkit-background-size: 1024px 1000px;
    -moz-background-size: 1024px 1000px;
    -o-background-size: 1024px 1000px;
  }
}

/************* 
  Navigation 
**************/

.navigation {
  background:#700000;
  min-height:50px;
  width:80%;
  left:10%;
  top:0px;
  margin:0px 0px 0px 0px;
  position:fixed;
  opacity:0.90;
  z-index:999;
  -moz-box-shadow:-5px -1px 5px #000, 5px -1px 5px #000, 0px 2px 7px 2px #000;
  -webkit-box-shadow:-5px -1px 5px #000, 5px -1px 5px #000, 0px 2px 7px 2px #000;
  box-shadow:-5px -1px 5px #000, 5px -1px 5px #000, 0px 2px 7px 2px #000;
}

.navigation ul {
  display:block;
  position:relative;
  list-style:none;
  text-align:center;
  text-shadow:#000 0 1px 2px;
  margin: 15px;
  padding: 0;
}

.navigation li {
  display:inline;
  position:relative;
  margin-left:auto;
  margin-right:auto;
  width:100%;
  color:#fff;
  padding:.5em .75em;
  -webkit-transition: all .2s ease-in-out;
  font-size:15pt;
  font-family:"Lobster Two", cursive;
}

.navigation li:hover, .active{
	cursor:pointer;
	background:#800000;
	font-weight:bold;
}

/******************
  Intro
*******************/
#slideIntro {
  z-index:100;
}

#introForeground {
  top:0px;
  bottom:auto;
}

#introBackground {
  background-image:url("images/alps_background.png");
}

#introBox {
  position:absolute;
  top:150px;
  left:25%;
  width:400px;
  height:300px;
  z-index:101;
}

.introText {
  text-align:center;
  color:white;
  font-family:"Walkway";
  font-size:15pt;
  padding:0px;
}

.introLinkText {
  text-align:center;
  font-family:"Walkway";
  padding:0px;
}

.emailUsText {
  text-align:center;
  font-family:"Walkway";
  font-size:10pt;
  padding:0px;
}

#introTitle {
  font-size:20pt;
}

#farkBox {
  position:absolute;
  left:0px;
  bottom:0px;
  max-width:55%;
}

#farkasBus {
  position:relative;
  z-index:103;
  max-width:100%;
}

#maliaBox {
  position:absolute;
  right:0px;
  bottom:0px;
  max-width:55%;
}

#maliaBus {
  position:relative;
  max-width:100%;
  z-index:102;
}

/******************
  Story
*******************/
#slideStory {
  height:1300px;
  z-index:200;
}

#storyBackground {
  background-image:url("images/st_stephens_background.png");
}

#storyBackgroundFill {
  background-image:url("images/st_stephens_background_fill.png");
}

#dinoAttack {
  position:absolute;
  left:240px;
  bottom:400px;
  max-width:100%;
  max-height:100%;
  z-index:3;
}

.storyBox {
  position:absolute;
  top:150px;
  width:250px;
  height:575px;
  z-index:5;
}

#maliaStoryBox {
  left:2%;
}

#jacobStoryBox {
  right:3%;
}

#usStoryBox {
  left:10%;
  top:760px;
  width:800px;
  height:300px;
}

.storyPic {
  padding: 4px 0 0 0;
}

.storyText {
  color:white;
  font-size:12pt;
}

/******************
  People
*******************/
#slidePeople {
  z-index:300;
  height:1000px;
}

#peopleBackground {
  background-image:url("images/people_background.png");
}

#peopleBackgroundFill {
  background-image:url("images/people_background_fill.png");
}

#peopleBox {
  position:absolute;
  left:15%;
  top:200px;
  width:750px;
  height:400px;
  z-index:5;
}

.personBubble {
  position:relative;
  display:box;
  
  width:75px;
  height:75px;
  
  margin: 20px;
  float:left;
  
  background-size: cover;
}

.personBubble:hover {
  width:100px;
  height:100px;
}

#kalani {
  background-image:url("images/kalani.png");
}

#anakela {
  background-image:url("images/ana.png");
}

#melissa {
  background-image:url("images/melissa.png");
}

#evan {
  background-image:url("images/evan.png");
}

#jordan {
  background-image:url("images/jordan.png");
}

#noe {
  background-image:url("images/noe.png");
}

/******************
  Wedding
*******************/
#slideWedding {
  z-index:300;
  height:1250px;
}

#weddingBackground {
  background-image:url("images/wedding_background.png");
}

#weddingBackgroundFill {
  background-image:url("images/wedding_background_fill.png");
}

#curiodysseySign {
  position:absolute;
  bottom:0px;
  right:0px;
  max-width:100%;
  z-index:5;
}

#weddingBox {
  position:absolute;
  left:10%;
  width:800px;
  height:800px;
  top:100px;
  z-index:3;
}

#noteContainer {
  position:relative;
  height:175px;
  margin-top:40px;
}

.sticky {
  position:absolute;
  font-family: 'Rancho', cursive;
  font-size:18px;
  text-align:center;
  width:300px;
  height:150px;
  color:#000;
  background:#fcfccb;
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
}

.sticky ul li {
  list-style: disc;
  text-align: left;
}

.weddingListIndent li {
  font-size:14px;
}

#listOfStuffToBring {
  left:4%;
  -webkit-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  -moz-transform:rotate(-2deg);
}

#listOfStuffToLeave {
  right:4%;
  -webkit-transform: rotate(6deg);
  -o-transform: rotate(6deg);
  -moz-transform:rotate(6deg);
}

#mapAndInfo {
  position:relative;
  width:100%;
  height:350px;
}

#googleMap {
	height: 350px; 
	width: 45%;
	float:left;
}

#curiodysseyInfo {
  position:absolute;
  width:52%;
  right:0px;
  padding-top:20px;
}

/******************
  Travel
*******************/
#slideTravel {
  z-index:300;
}

#travelBackground {
  background-image:url("images/travel_background.png");
}

#travelBackgroundFill {
  background-image:url("images/travel_background_fill.png");
}

#travelBox {
  position:absolute;
  left:18%;
  top:150px;
  width:800px;
  height:600px;
  z-index:5;
}

#travelForeground {
  pointer-events:none;
}

#hotelContainer {
  position:relative;
  height:175px;
  margin-top:20px;
}

.hotelInfo {
  position:absolute;
}

#residenceHotel {
  left:30%;
  max-width:200px;
}

#hiltonHotel {
  right:30%;
  max-width:200px;
}

#favoriteThings {
  vertical-align:middle;
}

/******************
  Registry
*******************/
#slideRegistry {
  z-index:400;
  height:900px;
}

#registryBackground {
  background-image:url("images/halong_background.png");
  background-repeat:repeat;
  background-size:100%;
}

#registryForeground {
  pointer-events:none;
}

#registries {
  vertical-align:middle;
}

#halong {
  position:absolute;
  bottom:0px;
  left:0px;
  width:100%;
  z-index:5;
}

#registryBox {
  position:absolute;
  top:80px;
  left:10%;
  width:800px;
  height:600px;
  z-index:3;
}

.registryImage {
  margin:20px;
}

/******************
  Reply
*******************/
#slideReply {
  z-index:500;
  height:1000px;
}

#replyBackground {
  background-position:25%;
  background-image:url("images/rsvp_background.png");
}

#hands {
  position:absolute;
  top:0px;
  right:0px;
  max-width:100%;
  z-index:4;
}

#replyTitle {
  position:absolute;
  left:42%;
  top:130px;
  width:250px;
  z-index:5;
}

#replyBox {
  position:absolute;
  top:45%;
  left:20%;
  width:700px;
  height:300px;
  z-index:3;
}

#RSVPPlaceholder {
  margin-top:20%;
  font-size:40px;
}

#peek {
  display:block;
}

#totoro {
  position:absolute;
  bottom:-100px;
}

/******************
Reply Site
*******************/
#replySiteBody {
    position:absolute;
    width:75%;
    left:12%;
    top:148px
}

#replyTextInput {
    background-color: #ffffff;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    font-size: 25px;
    font-weight: bold;
    font-color: #000000;
    border: thick solid black;
}

#submit {
    background-color: #ffffff;
    padding: 10px 30px 10px 30px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: bold;
    font-color: #000000;
    border: thick solid black;
}

#submit:hover {
    background-color: #b3b3b3;
}

.replyField {
    position:relative;
    width:50%;
    left:25%;
    text-align:left;
    color: white;
}

.replyField legend {
    font-family:"Walkway";
    font-weight:bold;
    font-size:20px;
    padding: 5px;
}

.replyList ul li {
    list-style:none;
    display:block;
    position: relative;
    white-space:nowrap;
    padding: 0 0 10px 42px
}

.replyList ul input {
    position: absolute;
    top: 4px;
    left: 0
}

.replyList input {
    position: absolute;
    top:4px;
    left:0px;
}

.replyList ul .icheckbox_square-red, .replyList ul .iradio_square-red {
    position: absolute;
    top: -1px;
    left: 0
}

#attendeeInputGuestLabel {
    display:block;
    position: relative;
}

#attendeeInputGuest {
    position: relative;
    top:0px;
    left:0px;
}

#replySiteBackground {
  background-image:url("http://jacobandmalia.com/images/replySiteBackground.png");
}

#replyContainer {
  height:1000px;
  width:100%;
  
  position: absolute;
  top:0px;
  left:0px;
  box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
  
  z-index:1;
}

#secretImage {
  width:150px;
  height:150px;
  background-color:transparent;
  top:-20px;
  right:-25px;
  -webkit-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -moz-transform:rotate(4deg);
}