/* RSVP Button
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.button {
	display: inline-block;
	border: 1px solid #6a6a6a; /* Dark Gray */
	text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
	font-weight: 400;
	text-decoration: none;
    padding: 10px 55px;
	margin-bottom: 9rem;
	margin-left: auto;
    margin-right: auto;
	margin-top: 2.3rem;
}

/* visited & unvisited links */
a:link.button, a:visited.button {
    color: #6a6a6a;
	background-color: #fff;
}

/* mouse over link */
a:hover.button {
    color: #fff;
	background-color: #F33648;
	border: 1px solid #fff;
}

/* selected link */
a:active.button {
	color: #fff;
	background-color: #D12B3B;
	border: 1px solid #fff;
}

/* text alignment */
p.center {
	text-align: center;
}



/* Images
–––––––––––––––––––––––––––––––––––––––––––––––––– */
img {
	display: block;
	margin: auto;
}

.textonimage img {
  outline: 1px solid white;
  outline-offset: -10px;
}

.threecolumns img {
  outline: 1px solid white;
  outline-offset: -10px;
}

.countingdown {
	padding-bottom: 0rem; 
	padding-top: 0rem;
	width: 260px;
	height: 240px;
}

.grayredhearts_lines {
	padding-bottom: 6rem;
	width: 10rem;
}

.grayredhearts {
	padding-bottom: 2.5rem;
	padding-top: 10.5rem;
	width: 4rem;
}

.hearts {
	width: 10rem;
}

.textonimage {
	position: relative;
	width: 100%; /* for IE 6 */
}

@media (min-width: 440px) {
.overlay {
	position: absolute;
	width: 100%;
	top: 80%;
	left: 20%;
	text-align: center;
	max-width: 60%;
	}}

@media (max-width: 440px) {
	.overlay {
		display: none;
	}}
	

@media (min-width: 440px) {
.heartsoverlay {
	position: absolute;
	top: 75%;
	left: 45%;
	width: 4rem;
	border: 0;
}}

@media (max-width: 440px) {
.heartsoverlay {
		display: none;
	}}


/* Javascript
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#countdown {
	font-size: 1.8rem;
	font-weight: 300;
  	font-family: "Oswald", "Arial", sans-serif;
	letter-spacing: .1rem;
	color: #fff;  
	margin-left: 5rem;
	margin-right: 5rem;
	margin-top: 2.5rem;
	text-align: center;

}



/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
  padding: 8rem 0 7rem;
  text-align: center;
}
.section-heading,
.section-description {
  margin-bottom: 1.2rem;
}

.scriptgraphic {
	text-align: center;
	max-width: 960px;
	padding: 0 20px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 500px) {
.graybackground {
	background-color:#F6F6F6;
	padding-top: 11rem;
	padding-bottom: 5rem;
	}}

@media (min-width: 500px) {
.graybackground {
	background-color:#F6F6F6;
	padding-top: 11rem;
	padding-bottom: 10rem;
	}}

@media (max-width: 750px) {
.whitebackground {
	margin-bottom: 6rem;
	background-color: white;
	padding: 1rem 2.5rem 2.5rem 2.5rem;
	}}

@media (min-width: 750px) {
.whitebackground {
	background-color: white;
	padding: 1rem 2.5rem 2.5rem 2.5rem;
	margin-bottom: 0;
	}}


/* Sections with background images */

@media (max-width: 500px) {
#countingdownbg {
	background-image: url("../images/mobile-countingdown.jpg");
	padding-bottom: 11rem;
	padding-top: 8rem;
	height: 400px;
	background-size: cover;

	}}	

@media (min-width: 500px) {
#countingdownbg {
	background-image: url("../images/WeddingChairs.jpg");
	background-size: cover;
	padding-bottom: 11rem;
	padding-top: 11rem;
	background-attachment: fixed;
	}}
	
@media (max-width: 500px) {	
#thankyoubg {
	background-image: url("../images/mobile-thankyou.jpg");
	background-size: cover;
	background-position: center top; 
	padding-top: 20rem;
	height: 350px;
	}}


@media (min-width: 500px) {	
#thankyoubg {
	background-image: url("../images/Stormberg021-web2.jpg");
	background-size: cover;
	background-position: center top; 
	padding-top: 14rem;
	height: 430px;
	}}

.thankyou {
	width: 220px;
	height: 220px;
}


@media (max-width: 500px) {
.topimage {
	background-image: url("../images/mobile-topimage.jpg");
	background-position: center; 
	padding-bottom: 15rem;
	background-color: #483429;

	}}	

@media (min-width: 500px) {
.topimage {
	background-image: url("../images/Stormberg028-web2.2.jpg");
	background-size: cover;
	background-position: center; 
	padding-bottom: 15rem;
	background-attachment: fixed;
	background-color: #483429;
	}}


@media (min-width: 250px) {
.savethedate {
	padding-top: 15rem;
	width: 250px;
	height: 250px;
	}}

@media (min-width: 840px) {
.savethedate {
	padding-top: 9rem;
	width: 300px;
	height: 300px;
	}}

/* Fonts 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.h2maxwidth {
	margin: 0rem auto 2.9rem auto;
	padding: 1.6rem 0;
}

.h2maxwidth-nobottom {
	margin: 1.5rem auto 0rem auto;
	padding: 1.6rem 0;
}

/* Bigger than 800 */
@media (min-width: 800px) {
  .h2maxwidth, .h2maxwidth-nobottom {
		max-width: 65%;
	}
}

/* Bigger than 1050 */
@media (min-width: 1050px) {
  .h2maxwidth, .h2maxwidth-nobottom {
		max-width: 50%;
	}
}

h5 {
	padding-top: 2.2rem;
}

.threecolumns a:link, .threecolumns a:visited {
	color: #9b9b9b; 
	font-family: "Oswald", "Arial", sans-serif;
	font-size: 1.5rem;
}

.threecolumns a:hover {
	color: #F33648; 
}

.threecolumns a:active {
	color: #D12B3B;
}