html, body {
		margin:0;
		padding:0;
		font-family: Quicksand, sans-serif;
		line-height: 1.4rem;
		background-color: rgb(254, 251, 246);
	}
	
	html {
	  scroll-behavior: smooth;
	}
	
	body {
		opacity:0;
	}
	
	h1{
		font-family: "Delius Swash Caps", sans-serif;
		font-weight: 400;
		font-size: 35px
	}
	
	h2{
		font-family: "Delius Swash Caps", sans-serif;
		font-weight: 400;
		font-size: 30px
	}

	header {
		min-height: calc(100vh - 150px);
		background-image: url('img/bg-eucaliptus.jpg');
		background-size: cover;
		background-position: center center;
		overflow:hidden;
	}
	
	#go-down {
		position:absolute;
		width: 100px;
		height:100px;
		left: calc( 50vw - 50px );
		top: calc( 100vh - 250px);
		background-image:url('img/down-arrow.gif');
		background-size:contain;
		background-position:center center;
		background-repeat: no-repeat;
		z-index:1000;
	}
	
	a {
		color: #0000AA;
		text-decoration:none;
		transition: all 0.4s;
	}
	
	a:hover {
		color: blue;
		text-decoration:underline;
	}
	
	
	section {
		font-size: 18px;
		font-weight:200;
		margin: 75px auto;
		max-width: 950px;
		padding:0 20px;
	}
	
	#rsvp a {
		display: inline-block;
		padding: 15px;
		border: solid 2px black;
		color: black;
		text-decoration: none;
		transition: all 0.5s;
		min-width: 200px;
		margin: 0 10px;
	}
	
	#rsvp a:hover {
		background-color: rgb(68, 149, 115, 0.1);
	}
	
	#env {
		position: relative;
		left: calc(50vw - 244px);
		margin-top:30px;
	}
	
	#env>div {
		position: absolute;
	}
	
	#env #env-back {
		background-image: url('img/env-back.png');
		width:488px;
		height:351px;
		top:335px;
		z-index:1;
	}
	
	#env #env-front {
		background-image: url('img/env-front.png');
		width:488px;
		height:351px;
		top:335px;
		z-index:100;
	}
	
	#env #flap {
		background-image: url('img/flap-down.png');
		background-size:100% 100%;
		width:488px;
		height:335px;
		top:335px;
		z-index:200;
	}
	
	#letter {
		margin-top:30px;
		background: white;
		border: solid 4px black;
		height:480px;
		width: 342px;
		z-index:50;
		rotate:-90deg;
		position: absolute;
		left: calc(50vw - 175px);
		top:271px;
		box-sizing: border-box;
		scale:1;
		background-image:url('img/letter.png');
		background-size:contain;
	}
	
	.photos {
	}
	
	.photos a {
		display: inline-block;
		width: 200px;
		height: 200px;
		margin: 10px;
		transition: all 0.5s;
		opacity:0.7;
		background-size: cover;
		background-position: center center;
		border: solid 2px white;
	}
	
	.photos a:hover {
		opacity:0.9;
		border: solid 2px white;
	}
	
	
	
	.left {
		text-align:left;
	}
	
	.right {
		text-align:right;
	}
	
	.center {
		text-align:center;
	}
	
	
	
	/*TIMELINE CSS*/
	.timeline {
		background-color:rgb(254, 251, 246);
		color:#444;
	}	
	.timeline ul {
		list-style-type:none;
		border-left:2px solid #ccc;
		padding:10px 5px;
	}
	.timeline ul li {
		padding:20px 20px;
		position:relative;
		transition:.5s;
		border-radius:20px;
	}
	.timeline ul li span {
		display:inline-block;
		border:1px solid #ddd;
		border-radius:25px;
		padding:5px 9px;
		font-size:15px;
		text-align:center;
		transition:.5s;
	}
	.timeline ul li .content h3 {
		display:inline-block;
		padding-top:5px;
		margin:0;
		font-family: "Delius Swash Caps", sans-serif;
	}
	.timeline ul li .content p {
		padding:5px 0px 5px 0px;
		margin:0;
	}
	.timeline ul li:before {
		position:absolute;
		content:'';
		width:10px;
		height:10px;
		background-color:#555;
		border-radius:50%;
		left:-11px;
		top:31px;
		transition:.5s;
	}
	.timeline ul li:hover {
		background-color:rgb(68, 149, 115, 0.1);
	}
	.timeline ul li:hover:before {
		background-color:rgb(68 149 115);
		box-shadow:0px 0px 10px 2px rgb(68 149 115);
	}
	@media (max-width:300px) {
		.timeline{
			width:100%;
			padding:30px 5px 30px 10px;
		}
		.timeline ul li .content h3 {
			color:#34ace0;
			font-size:15px;
		}

	}
	
	.timeline ul li:hover span{
		background-color: rgb(68, 149, 115, 0.3);
	}