body{font:16px 'Bai Jamjuree';margin:0;overflow:hidden;}
#background{position:absolute;z-index:-1;width:90%;left:0;top:0;margin:5%;width:90%;background-color:#efe3e8;
	height:calc(100vh - 100px);width: calc(100% - 100px);margin:50px;}
#header{position:relative;height:632px;	width: calc(100% - 120px); height: calc(100vh - 120px); margin:60px; overflow: hidden;padding-bottom: 50px;}
#menu{position:relative;height:50px;z-index:5;}
#menu-container{height: 50px;max-width: 750px;margin-left: -375px;left: 50%;position: relative;}
#menu p{float:left;background-color:#bcdbc5;text-align:center;vertical-align:middle;width:94px;margin:0 5px 0 5px;padding:10px;font: 18px 'Chakra Petch', sans-serif;cursor:pointer;border-radius:5px;}
#menu p:hover{background-color: #cff1d9;}
#main{position:relative;clear:both;top:0;width:750px;left:50%;margin-left:-375px;min-height: calc(100vh - 315px);z-index:100;}
#main>div{display:none;padding:20px;}
#main p{text-align:center;margin:10px;line-height: 150%;}
p.intro{padding-bottom: 15px;font-size: large;}
p.quote{font-size: 15px;}
.ui-widget-header{color:#dbc7d0;font-size:smaller;}
#dialog-form{display:none;}
h3,h4,h5{text-align: center;clear: both;}
div#header p{text-align: center;}
#header-container{position:relative;width:100%;text-align: center;height: calc(100vh - 240px);}
#location-container,#location-container2{height:300px;float:left;margin:10px 0 10px 0;}
#location-container2{float:right;}
#rsvp-container{height:750px;}#rsvp-container #blocker{display:none;}
#header-container img,#location-container iframe,#location-container2 iframe,#rsvp-container iframe{top:0;left:0;bottom:0;right:0;margin:auto;max-width: 100%; max-height: 100%;border:0;}
#header-container img{position: absolute;}
/*iframe, #blocker{width: 100%; height: 100%;}*/
#location-container iframe,#location-container2 iframe{max-width: 400px;max-height: 300px;}
.container iframe{max-width: 700px; width: 100%;}
.drive iframe{max-height: 500px;height: 56.25vw;}
.spotify iframe{height: 380px;}
#location-container img,#location-container2 img{margin-left: 10px;}
#rsvp-container #blocker:hover{opacity: 0.2;}
.image-container{text-align: center;}
.image-container>img{margin:10px;max-width:350px;}
#location>.image-container{float:right;}
span.hidden-content{display:none;}
p.more{
	cursor: pointer;
    text-decoration: underline;
    color: rgb(0, 0, 238);
}

div#password{
	margin: 0;
    position: relative;
    width: 250px;
    clear: both;
    left: calc(50% - 125px);
}
form{
	margin-bottom: 20px;
    width: 100%;
}
form p{text-align: center;}
form input{width: 100%;margin-bottom:10px;}
form button{
	width: 80px;
    left: calc(50% - 40px);
}

i.down{
	  border: solid black;
  border-width: 0 10px 10px 0;
  display: inline-block;
  padding: 3px;
    transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
      position: absolute;
    left: 50%;
    text-align: center;
    width: 60px;
    height: 60px;
    margin-left: -30px;
    bottom: 30px;
}

div#footer{position:relative;margin: -90px 90px 0 90px;
    height: 300px;
    left: 0;
    clear: both;
    width: calc(100% - 180px);}

    #footer img{cursor:pointer;}
	#footer div:first-child{float: left;}
		#footer div:first-child img{transform: rotate(170deg);}
	#footer div:last-child{float: right;}    
		#footer div:last-child img{-webkit-transform: scaleX(-1);transform: rotate(190deg) scaleX(-1);}

div#main .header{width:90%;background-color:#bcdbc5;text-align:center;vertical-align:middle;padding:10px;font: 20px 'Chakra Petch', sans-serif;display:none;}

div#main p.header{padding:10px 0 10px 0;margin:10px 5% 0 5%;border-radius:5px;display:none;}

div#wrapper{
	position:absolute;
	background-color: #efe3e8;
	top:0;
	min-height: 100%;
	left:2%;
	width: 96%;
}

@media only screen and (max-width: 768px) {
	div#background{margin:10px;width: calc(100% - 20px);height: calc(100vh - 20px);}
	div#menu{display:none;}
	div#main{height:auto;margin:0 15px 0 15px;width: calc(100% - 30px);left:0;}
	div#main div{display:block;}
	div#main p.header{display:block;}
	div#header{margin:15px;width: calc(100% - 30px);height: calc(100vh - 30px);}
	#location-container,#location-container2{position:relative;overflow:hidden;margin:10px;}
	#header-container{overflow:hidden;left:0;height: calc(100vh - 240px);}
	#rsvp-container{position:relative;overflow:hidden;height:400px;}
	#location-container iframe#location-container2 iframe,#rsvp-container iframe, #rsvp-container #blocker{position:absolute;}
	#location-container iframe,#location-container2 iframe{max-width: unset;}
	#location-container{float:unset;}
	#location>div.image-container{float:unset;}
	#rsvp-container #blocker{display:block;}
	#rsvp-container #blocker{cursor:pointer;opacity:0.1;background-color:gray;}
	.image-container>img{width: calc(100% - 20px);margin:10px 0 10px 0;height:auto;}
	#footer div:first-child{position: relative;width: 240px;left: 50%;margin-left: -120px;}
		#footer div:first-child img{transform: rotate(130deg);max-width:200px;}
	#footer div:last-child{display: none;}
}

@media only screen and (max-width: 768px) and (orientation: landscape) {
	#header-container{height: calc(100vh - 150px);}
}