* {
	box-sizing: border-box;
}
body{
	background-color:#f5f6f7;
	margin: 0;
}
#jar {
	height:100%;
	margin: 0px auto 0px auto;
	position:relative;


}



#rsvp{
		background:url(../images/pattern1.jpg) repeat;


}

#masthead{
	background:rgba(255,255,255,0.91);
	padding:25px;
	width: 600px;
	text-align: center;
	
}

section{
	padding:50px 10% 0 10%;
	text-align: center;
}
	

ul.countdown {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	text-align: center;
	font-family: 'Lora', serif;
		color:#466836;


}
ul.countdown li {
	display: inline-block;
}
ul.countdown li span {
	font-size: 60px;
	font-weight: 300;
	line-height: 40px;
}
ul.countdown li.seperator {
	font-size: 60px;
	line-height: 40px;
	vertical-align: top;
}
ul.countdown li p {
	color: #a7abb1;
	font-size: 14px;
}


p{
	text-align: center;
	font-family: 'Lato', sans-serif;
	color:#999;
	line-height: 22px;
	font-size: 14px;

}

h1 {
	text-align: center;
	font-family: 'Lora', serif;
	color:#fff;
	line-height: 32px;
	font-size: 30px;
	letter-spacing: 0.05em;

}

.subheader {
	text-align: center;
	font-family: 'Lora', serif;
	color:#466836;
	line-height: 32px;
	font-size: 24px;
	letter-spacing: 0em;
	font-style: italic;

}


h2 {
	text-align: center;
	font-family: 'Lora', serif;
	color:#5c535d;
	line-height: 14px;
	font-size: 19px;
	letter-spacing: 0.05em;
	transition: 2s;
	margin: 0;


}



.button {
	padding:12px 20px 12px 20px;
	border: 2px solid #cc9e0a;
	font-family: 'Lora', serif;
	font-size: 20px;
	color: #cc9e0a;
	text-align: center;
	font-weight: 700;
	transition: 1s;


}

textarea {
   resize: none;
}

form {
	background-color:#fff;
   padding: 15px 15px 20px 15px;
	color:#000;
	border-radius: 5px;
	text-align: center;


}

form input[type="text"]{

	width: 500px;
    border-bottom: 2px solid #000;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
    padding: 9px 8px;
    height: initial;
    line-height: initial;
    margin: 10px 0px 10px 0px;
	background: transparent;

	}
	
	::-webkit-input-placeholder {
	font-family: 'Lato', sans-serif;
  	color: #ccc;
}
::-moz-placeholder { /* Firefox 19+ */
  font-family: 'Lato', sans-serif;
  color: #ccc;
}
:-ms-input-placeholder { /* IE 10+ */
 	font-family: 'Lato', sans-serif;
  	color: #ccc;
}


label{
  font-family: 'Lora', serif;
  font-size:36px;
  vertical-align: bottom;
  padding-right: 5px;
}

input[type="text"]:focus{
outline: none;
background-color:#ccc;
transition: all 2s;
}
textarea:focus{
outline: none;
background-color:#e2d7e3;
transition: all 2s;
}


input[type="submit"]{
	background-color:#000;
	  font-family: 'Lora', serif;
	  width: 120px;
	height: 45px;

}


.button:hover {
	padding:12px 20px 12px 20px;
	border: 2px solid #cc9e0a;
	font-family: 'Lora', serif;
	font-size: 20px;
	color: #ffffff;
	text-align: center;
	font-weight: 700;
	background-color: #cc9e0a;

}
.sm-button {
	padding:5px 10px 5px 10px;
	border: 2px solid #000;
	font-family: 'Lora', serif;
	font-size: 14px;
	color: #000;
	text-align: center;
	font-weight: 700;
	transition: 1s;


}
.sm-button:hover {
	padding:5px 10px 5px 10px;
	border: 2px solid #cc9e0a;
	font-family: 'Lora', serif;
	font-size: 14px;
	color: #fff;
	text-align: center;
	font-weight: 700;
	transition: 1s;
	background-color: #cc9e0a;



}
@keyframes fadeIn {
    0% {opacity: 0.0;}
    25% {opacity: 0.0;}
    100%{opacity: 1.0;}
}



nav{
	background-color:rgba(47,68,38,0.0); /*DARK GREY*/
	height: 74px;
	width: 100%;
	padding: 5px; 
	z-index: 1000;
	position: fixed;
	top:0px;
	transition: opacity 2s;
	display:none;

}
@keyframes topbar {
    from {opacity: 0.3;}
    to {opacity: 1.0;}
}
.nav2 {
	background-color:rgba(47,68,38,1.0);
	height: 74px;
	padding: 5px; 
	animation-name: topbar;
    animation-duration: 1s;
}


#home{
	width:100%;
	background-image: url("../images/header_home.jpg");
	background-color: lightgrey;
	background-attachment: fixed;
	height: 99vh;
	background-size: cover;
	padding-top: 75px;
	clear: both;
	top:0px;
	display: flex;
  	justify-content: center;
 	align-items: center;
  	flex-basis: content;
    -webkit-flex-direction: column;
    flex-direction: column;
	position:relative;

}


section.black{
	
	background-color: black;

}

section.registry{
	
	background-color: #b3c9a7;

}

#bridal-party .party-jar img{
	float:left;
	margin-right: 15px;
}


.address{
	text-align: left;
}

.party-jar{
	background: rgba(255,255,255,1);
	padding: 15px;
	margin-bottom:15px;

}

.party-jar img{
width: 100px;
height:100px;
padding: 15px;


}


.party-jar p{

	margin-top:0px;

}



#slider{
	position: relative;
	
}


#slider{
	width: 1050px;
    height: 750px;
margin: auto;
}

#slider img{
		width: 100%;
    height: auto;
	
}


#slider img {
	position: absolute;
	top:0;
	left:0;
	display: none;

}


#slider img:first-child {
	display: block;
}

section {
	padding: 75px;
}

#bridal-party{
	background:#000;
}
	

#links {
	text-align:center;
	position: relative;
	-webkit-padding-start: 0px;
	padding:10px 0px 0px 0px;
	font-family: 'Lora', serif;
	font-size:15px;
	letter-spacing: 1px;
	font-weight: 700;
}

li {
	display: inline;

}
a {
	text-decoration: none;

}



#links li a{
	color:#ffffff; 
	text-transform: uppercase;
	padding: 0px 10px 0px 10px;
	transition: 2s;


}

#links li a:hover{
	color:#cc9e0a;
	text-transform: uppercase;

}
#map {
    height: 500px;
  }


img#icon{
	width:25px;
	height: auto;
	vertical-align:middle;

}




#rsvp-modal-yes{
width:100vw;
height:100vh;
background:rgba(0,0,0,0.7);
position:fixed;
z-index:1000000;
display: flex;
justify-content: center;
align-items: center;
flex-basis: content;
flex-direction:column;

top:0;
left:0;
	}
	
	#rsvp-modal-no{
width:100vw;
height:100vh;
background:rgba(0,0,0,0.7);
position:fixed;
z-index:1000000;
display: flex;
justify-content: center;
align-items: center;
flex-basis: content;
flex-direction:column;
top:0;
left:0;
	}
	.modal{
	width:50%;
	background-color:transparent;
	padding:20px;
	color: white;
	font-family: inherit;
	text-transform:uppercase;
	display: flex;
  	justify-content: center;
  	align-items: center;
  	flex-basis: content;
  	text-align:center;
	flex-direction:column;


		
		}
		
			
	#x{
		position:fixed;
		top:15px;
		right: 20px;
		color: white;
		cursor:pointer;
		z-index:5202000;

		
	}
	
	#x .fa{
				font-size:34px;
	}
		
		
		.modal a{
		padding:20px;
		color: white;
		  box-sizing:border-box;
		  border: 2px solid white;
		  margin: 0 5px;
		  	background:rgba(0,0,0,0.5);



		}
		
		
		.modal a:hover{
		padding:20px;
		color: white;
		border: 2px solid white;
			background:rgba(255,255,255,0.4);


		
		}

/*-------------------------BEGINNING OF GRID SYSTEM STUFF-------------
*/
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
	
	
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 5%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF SIX  */
.span_6_of_6 {
width: 100%;

}

.span_6_of_6_registry {
width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: content;
	
}

.span_6_of_6_registry img{
	margin: 5px;
}

.span_5_of_6 {
	width: 82.5%;
}

.span_4_of_6 {
	width: 65%;
}

.span_3_of_6 {
	width: 47.5%;
}

.span_2_of_6 {
	width: 30%;
}

.span_1_of_6 {
	width: 12.5%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col {  margin: 1% 0 1% 0%; }
.span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 { width: 100%; }
}