@font-face {
font-family: 'acgaramond';
src: url("fonts/AGaramondPro-Regular.eot");
src: url("fonts/AGaramondPro-Regular.eot?#iefix") format("embedded-opentype"),
url("fonts/AGaramondPro-Regular.woff2") format("woff2"),
url("fonts/AGaramondPro-Regular.woff") format("woff"),
url("fonts/AGaramondPro-Regular.ttf") format("truetype");
}

.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

* {
margin:0;
padding:0;
}

.clear {
clear:both;
}

img,
img a {
border:none;
max-width:100%;
height:auto;
}

ul {
list-style:none;
margin:0;padding:0;
}

a, a:hover {
-webkit-transition: color 0.2s linear;
   -moz-transition: color 0.2s linear;
		transition: color 0.2s linear;
	 -o-transition: color 0.2s linear;
text-decoration:none;
}

body, html {
height:100%;
background: url("images/bg.jpg?v=1.01") no-repeat;
background-size: cover;
background-position: center right;
background-attachment: fixed;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: none;
-webkit-font-smoothing: antialiased !important;
font-family:'acgaramond', Arial;
color:#000;
}

#container {
margin-left:6%;
width:45%;
padding:20px 0;
}

#presents {
line-height:45px;
vertical-align: middle;
align-content:center;
justify-content:center;
display:flex;
margin:0 0 20px 0;
font-size:22px;
font-weight:bold;
}

#presents span {
margin:0 20px 0 0;
}

#presents img {
max-height:45px;
}

#title {
text-align:center;
font-size:36px;
font-weight:bold;
}

#sub {
text-align:center;
font-size:26px;
font-weight:500;
}

#dates {
margin:50px 0 30px 0;
font-size:19px;
}


#dates li {
display:grid;
grid-template-columns:1fr 1fr 1fr;
text-align:center;
padding:10px 0;
border-bottom:1px solid;
border-bottom-color:rgb(120,137,165,.5);
}

#dates li.head {
font-weight:bold;
font-size:22px;
}

#dates li:last-child {
border:0;
}

#rsvp-container {
border:5px solid;
border-color:rgb(120,137,165,.8);
padding:20px;
font-size:19px;
font-weight:bold;
line-height:160%;
text-align:center;
}

#rsvp-btn {
margin:0 0 50px 0;
}

#rsvp-btn a {
background-color:rgb(120,137,165,.7);
width:50%;
display:block;
margin:0 auto;
text-align:center;
color:#FFF;
padding:10px 0 10px 0;
font-size:20px;
font-weight:bold;
line-height:100%;
-webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
	 -o-transition: all 0.3s ease;
		transition: all 0.3s ease;
}

#rsvp-btn a:hover {
background-color:rgb(120,137,165,1);
}





@media all and (max-width:1000px) {
#container {
margin-left:0;
width:80%;
margin:0 10%;
padding-bottom:80px;
}

body, html {
background: url("images/bg-mobile.jpg?v=1.02") bottom no-repeat #fefefe;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
}

@media all and (max-width:700px) {
#title {
font-size:28px;
}

#sub {
font-size:22px;
}

#dates {
font-size:16px;
}

#dates li.head {
font-size:20px;
}

#rsvp-btn a {
width:100%;
}

#rsvp-container {
font-size:16px;
line-height:160%;
}

}