*{
	padding:0;
	margin:0;
}

/*
@font-face {
  font-family: 'Candlescript';
	src: url('../fonts/candlescript-webfont.woff2') format('woff2'),
     	 url('../fonts/candlescript-webfont.woff') format('woff'),
     	 url('../fonts/Candlescript.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
*/

/*
@font-face{
  font-family: 'MinionProDisplay';
	src: url('../fonts/Minion-Pro-Display.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face{
  font-family: 'MinionProDisplayItalic';
	src: url('../fonts/Minion-Pro-Italic-Display.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
*/

@font-face{
  font-family: 'MinionProDisplayMedium';
	src: url('../fonts/Minion-Pro-Medium-Display.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/*
@font-face{
  font-family: 'MinionProDisplayMediumItlaic';
	src: url('../fonts/Minion-Pro-Medium-Italic-Display.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face{
  font-family: 'MinionProDisplaySemibold';
	src: url('../fonts/Minion-Pro-Semibold-Display.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face{
  font-family: 'MinionProDisplaySemiboldItlaic';
	src: url('../fonts/Minion-Pro-Semibold-Italic-Display.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
*/

body{
	font-family: 'Libre Baskerville', Georgia, Serif;
	font-size:15px;
	line-height: 28px;
	font-style: italic;
	letter-spacing: 0.3px;
	overscroll-behavior: contain;
	overscroll-behavior-y: none;
}


.story{
	position: fixed;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	border:1px solid #F2D47E;
}

.section{
	position: absolute;
	top:0;
	overflow: hidden;
	width:100%;
	height:100%;
}

#section-1{
	background-color: #FFF0F0;
	/* text-align: center; */
	/* background-image: url('../images/star-background2.png'); */
}

#section-2{background-color: #B7E2E1;}
#section-3{background-color: #988984;}
#section-4{background-color: #FEE7CD;}
#section-5{background-color: #FEEBEB;}
#section-6{background-color: #F5E0AA;}
#section-7{background-color: #FBF5DC;}
#section-8{background-color: #A8A8D5;}

#section-9{
	background: white;
}


.section-inner{
	position:relative;
	float:right;
	right:50%;
	height:100%;
}

.section-inner img{
	position: relative;
	right:-50%;
}
		
.navigation{
	position: absolute;
	right:16px;
	top:50%;
	transform: translateY(-50%);
	z-index:100;
}

li{
	list-style: none;
}

.dots{
	text-align: center;
}

.dots a{
	display: inline-block;
	width:28px;
	height:24px;
	
}



.circle{
	width:10px;
	height:10px;
	border:2px solid #EAC65D;
	
	border-radius:8px;
	box-sizing: border-box;
	display: inline-block;
	margin-top: 6px;
}

.circle.active{
	background-color: #EAC65D;
}

.heart, .rsvp{
	display: inline-block;
	margin-top: 4px;
	opacity: 1;
	width:16px;
	height:16px;
}

.heart{
	background: url('../images/heart-icon-outline-gold.svg') no-repeat;
}

.heart.active{
	background: url('../images/heart-icon-fill-gold.svg') no-repeat;
}

.rsvp{
	background: url('../images/mail-icon-outline-gold.svg') no-repeat;
}

.rsvp.active{
	background: url('../images/mail-icon-fill-gold.svg') no-repeat;
}

.hide{
   	display: none;
 }
 
 .notvisible{
   visibility: hidden;
 }
 
 /****** form style *****
   ********************************************************
   *********************************************************
 */

 
/*
 .confirmation-container, .rsvp-container, .rsvp-response-container{
	 display: none;
 }
*/
 
 
 fieldset{
   border:none;
 }
 
 .rsvp-question{
   margin-top:30px;
   margin-bottom: 10px;
 }
 
/*
 .rsvp-radio{
   display: inline-block;
   vertical-align: top;
   margin-top:8px;
 }
 
 .rsvp-radio-label{
   display: inline-block;
   vertical-align: top;
   vertical-align: middle;
   margin-left: 10px;
   text-align: left;
   /* color:rgba(0,0,0,0.70); */
 }
*/
 
 .radio-label-subtext{
   /* font-size: 16px; */
   /* color:rgba(0,0,0,0.65); */
   font-size: 14px;
 }
 
 input[type="text"]{
		font-family: 'Libre Baskerville', Georgia, Serif;
		font-size: 16px;
		font-style: italic;
		color: rgba(0,0,0,0.65);
		border:2px solid rgba(0,0,0,0.40);
		background-color: white;
		font-weight: 400;
		width:100%;
		height:36px;
		border-radius: 2px;
		-webkit-border-radius:  2px;
		-moz-border-radius:  2px;
		max-width: 200px;
		outline: none;
		box-sizing: border-box;
		padding:0px 10px;
		font-weight: 700;
		color:rgba(0,0,0,0.70);
	}
	
	
	::-webkit-input-placeholder{
		color:rgba(0,0,0,0.30);
	  font-style: italic;
	  font-weight: 400;
	}
	
	::-moz-placeholder{
		color:rgba(0,0,0,0.30);
	  font-style: italic;
	  font-weight: 400;
	}
	
	:-ms-input-placeholder{
		color:rgba(0,0,0,0.30);
	  font-style: italic;
	  font-weight: 400;
	}
	
	:-moz-placeholder{
		color:rgba(0,0,0,0.30);
	  font-style: italic;
	  font-weight: 400;
	}
	
	
	.form-input{
		margin-top: 20px;
	}
	
	.second-action{
		margin-left: 10px;
	}
	
	.rsvp-actions{
		margin-top: 48px;
	}
 
 
 .sbutton{
	font-family: 'Libre Baskerville', Georgia, Serif;
	/* border:2px solid #F2D47E; */
	border:none;
	border-radius: 4px;
	-webkit-border-radius:  4px;
	-moz-border-radius:  4px;
	font-size:15px;
	text-transform: uppercase;
	color:rgba(0,0,0,0.65);
	background: #F2D47E;
	/* font-weight: 700; */
	cursor:pointer;
	padding:10px 12px;
	/* margin-top: 44px; */
	outline: none;
	letter-spacing: 0.5px;
	min-width: 100px;
	box-sizing: border-box;
	border: 2px solid #F2D47E;
}

.sbutton:hover{
	/* color:white; */
	background: #F0CC65;
	border-color: #F0CC65;
	color:rgba(0,0,0,0.70);
	border-bottom: 2px solid #D7B85B;
	
	/* border: 1px solid #F2D47E; */
}

 .secondary-button{
	 font-family: 'Libre Baskerville', Georgia, Serif;
	 border:2px solid #F2D47E;
	 font-size: 15px;
	 line-height: 28px;
	 font-style: normal;
	 padding:6px 16px;
	 border-radius: 4px;
	-webkit-border-radius:  4px;
	-moz-border-radius:  4px;
	color:rgba(0,0,0,0.65);
	/* letter-spacing: 0.5px; */
	text-transform: uppercase;
	outline: none;
	cursor: pointer;
	background-color: white;
	
 }
 
 .secondary-button:hover{
 	background-color: #FFF4D6;
 }

 #registry-button{
	 margin-top: 12px;
	 display: inline-block;
 }
 
 
 .response-title{
	 color:#D3AD45;
	 margin-bottom: 20%;
	 display: inline-block;
 }

 .response-title, .form-title{
   /*
font-size:16px;
   line-height: 28px;
*/
  /*  font-weight: 700; */
 }
 
 .response-subtitle, .form-label{
   font-size:16px;
   line-height: 23px;
 }
 
 .form-hint{
	 margin-top: 10px;
    font-size: 13px;
    width: 100%;
    max-width: 300px;
    text-align: left;
    display: inline-block;
    margin-bottom: 10px;
    line-height: 20px;
    letter-spacing: 0px;
    
 }
 
 .wedding-rsvp a{
	 text-decoration: none;
	 /* color:#DCB751; */
 }
 
 .form-name-title{
	 font-size: 16px;
	 font-weight: 700;
	 margin-bottom: 17px;
	 display: inline-block;
	 color:rgba(0,0,0,0.70);
 }
 
 input[type="radio"]:checked ~ .check {
	 border: 2px solid #F2D47E;
	 }

	input[type="radio"]:checked ~ .check::before{
	  background: #FFF;
	}
	
	input[type="radio"]:checked ~ label{
	  /* color: #F2D47E; */
	}
	
	select{
		border:none;
		background: #FFF;
		border-radius:0px;
		outline: none;
		-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
		font-size: 14px;
		width:25px;
		background-image: url('../images/dropdown-arrow.png');
		background-repeat: no-repeat;
		background-position: right center;
		font-family: 'Libre Baskerville', Georgia, serif;
	}
	
	.people-dropdown{
		margin-left:4px;
		margin-right: 8px;
		border-bottom: 1px solid rgba(0,0,0,0.30);
	}
 
 /****** font style *****
   ********************************************************
   *********************************************************
 */
 
.clarendon{
   /* font-family: ClarendonBT-Roman, Georgia, Times, Times New Roman, serif; */
   font-weight: normal;
   font-style: normal;
 }
 
 
 
 
 
 .story-text{
		/* font-family: 'Roboto Slab', Georgia, serif; */
		font-weight: 400;
		position: absolute;
		top:10%;
		color:#FFFFFF;
		left:10%;
		
		opacity: 1;
		font-size:16px;
		line-height: 26px;
		letter-spacing: 0.3px;
		z-index:100;
		max-width: 480px;
		padding-right: 10%;
	}
	
	.story-text-year{
		font-size: 13px;
	}
	
	.text-dark{
		color:rgba(0,0,0,0.70);
	}
	
	.text-light{
		color:rgba(255,255,255,0.95);
	}
 

 .wedding-text, .confirmation-container, .rsvp-container, .details-container{
 	position: absolute;
 	color:rgba(0,0,0,0.65);
	left:10%;
	bottom: 14%;
	padding-right:10%;
   /* margin-top:30%; */
   /*
		 left:50%;
		 transform: translateX(-50%);
		*/
 }
 
  .wedding-rsvp{
   /* position: relative; */
   
  /*
 color:rgba(0,0,0,0.75);
	 max-width: 480px;
*/
	 /*
top:50%;
   transform: translateY(-50%);
   font-family: 'Roboto Slab', serif;
   font-weight: 400;
	 margin: 0 auto;
	 padding:0% 8%;
*/
 }
 
 .confirmation-container, .rsvp-container, .details-container{
	 max-width: 480px;
 }
 
 
 .title-name, .details-title{
   font-family: 'MinionProDisplayMedium', Georgia, serif;
   font-style: normal;
   font-size: 50px;
   line-height: 62px;
   letter-spacing: 3px;
   margin-bottom:32px;
   font-weight: normal;
 }

 
 .title-caption{
   margin-bottom: 44px;
   /* padding-left:40px; */
 }
 
 .title-date{
   /* font-family: 'Libre Baskerville', Georgia, serif; */
   /* line-height: 28px; */
   letter-spacing: 0.3px;
   font-style: italic;
   /* font-size: 16px; */
   /* padding-left:40px; */
   
 }
 
 
 .title-and{
 	 font-family: 'Libre Baskerville', Georgia, serif;
 	 font-style: italic;
 	 font-size: 40px;
 }
 
 .details-subtitle{
	 text-transform: uppercase;
	 margin-bottom: 3px;
	 font-size: 16px;
	 font-style: normal;
	 font-weight: 600;
	 
 }
 
 
 .details-ceremony{
	 margin-bottom: 46px;
 }
 
 .details-ceremony, .details-giftregistry{
	 /* font-size: 16px; */
 }
 
 
 
 .details-subtext{
	 /* line-height: 28px; */
	 /* letter-spacing: 0.3px; */
 }
 
 .rsvp-button{
	 margin-top: 12px;
 }
 
 
/*
 .rsvp-container fieldset{
	 clear: both;
 }
 
 .radio-wrapper{
	 display: block;
	 padding-left: 20px;
 }
 
 .rsvp-radio{
	 float: left;
  padding: 0;
  -webkit-appearance: radio;

  width:20px;
 }
*/
	.break{
		display: none;
	}



.vertical-radio-buttons fieldset {
  clear: both;
}

.vertical-radio-buttons span.rwrapper {
  display: block;
  padding-left: 22px;
  cursor: inherit;
}
.vertical-radio-buttons label {
}
.vertical-radio-buttons input {
  float: left;
  margin-left: -22px;
  margin-top: 6px; 
  padding: 0;
  -webkit-appearance: radio;
}
 
 
 
 @media only screen and (max-width: 1000px) {
 	.wedding-text, .confirmation-container, .rsvp-container, .details-container{
 		bottom:12%;
 	}
 	
 	.title-name, .details-title{
			font-size: 44px;
			line-height: 54px;
		} 
		
		.title-and{
			font-size:36px;
		}
 }
   
 @media only screen and (max-width: 767px), only screen and (max-height: 500px) {
 	.wedding-text{
	   /* margin-top:6%; */
   }
   
   body{
   	line-height: 26px;
   }
   
   
		
   .title-name{
	   /* font-size: 72px; */
	   /* line-height: 40px; */
   }
   .title-caption{
   		/* margin-bottom: 36px; */
	 	/* padding-left:40px; */
	 	}
	 	
	 	.wedding-text, .confirmation-container, .rsvp-container, .details-container{
		 	left:8%;
	 		padding-right: 8%;
	 		bottom:8%;
	 	}
	 	
	 	.story-text{
	 		font-size: 15px; 
	 		line-height: 22px; 
	 		top:5%;
	 		left:7%;
	 		padding-right: 8%;
	 		letter-spacing: 0.1px;
	 	}
	 	 .title-caption, .title-date{
		 	 /* font-size: 15px; */
	 	 }
 }
 
 @media only screen and (max-width: 712px){
		
		
		
 }
 
 
 @media only screen and (max-width: 560px){
	 body{
   	line-height: 25px;
   }
	 
	 .title-lastname{
		 display: none;
	 }
	 
	 .wedding-rsvp{
	 	/*
font-size: 14px;
	 	line-height: 26px;
*/
	 }
	  input[type="text"]{
		  max-width: 140px;
	  }
 }
 
 @media only screen and (max-width: 500px){
 	.break{
 		display: inline;
 	}
 	
 	.venue{
 		display: inline-block;
 		padding-bottom: 8px;
 	}
 
 }
 
 @media only screen and (max-width: 410px){
 	.details-gift{
 		padding-right: 15px;
 	}
 }
 
 
 @media only screen and (max-height: 680px){
 	.response-title{
 		margin-bottom: 10%;
 	}
 	
 	.details-ceremony{
 		margin-bottom: 32px;
 	}
 	
 	.title-name, .details-title{
	 	margin-bottom: 24px;
 	}
 	
 }
 
 
 @media only screen and (max-height: 600px){
 
 
 }
 
 
 @media only screen and (max-height: 500px){
 		#cover-image{
   		/* display: none; !important */
 		}
 }
 
 
  @media only screen and (max-height: 600px){
  	.confirmation-container, .rsvp-container, .details-container{
  	
  	}
  
  
  }
 
  @media only screen and (max-height: 400px){
		.story-text{
	 		top:8%;
	 	}
	 	.rsvp-question{
			margin-top:10px;
			margin-bottom: 10px;
		}
 }
 
 @media only screen and (max-height: 300px){
   /*
.title-name{
	   font-size: 60px;
	   line-height: 32px;
   }
   .wedding-text{
	   margin-top:4%;
   }
   .title-caption{
   		margin-bottom: 28px;
   		font-size: 13px;
	 	/* padding-left:40px; */
	 	}
	 	.title-date{
		 	margin-top:8px;
		 	font-size: 13px;
		 	/* padding-left:40px; */
   
		}
*/
		
 }