/*
green: #C3E6DE
*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');

body{
	margin:0;
	padding:0;
	font-family: 'Open Sans Condensed', sans-serif;
	background-color:#FFF;
}

a{
	color:#666;	
}

.container{
	margin:0 auto;
	position:relative;
	text-align:center;
}

#home .container{
	height:100vh;	
}

.rsvp_btn{
	position:absolute;
	top:0;
	left:calc(50% + 50px);
	cursor:pointer;
	z-index:9999;
}

.title{
	height:100%;
	max-width:1277px;
	max-height:823px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

#form, #contentWrap{
	width:470px;
	height:250px;
}
#form input[type=text], #contentWrap input[type=text]{
	width:90%;
	border1px solid #ccc;
	margin-bottom:3px;
	box-sizing:border-box;
}

#formValues, #successfulMessage{
	margin-left:30px;
}

#formValues h1, #successfulMessage h1{
	font-size:21px;
	color:#990000;	
}

#successfulMessage p{
	font-size:14px;
	line-height:160%;
	width:400px;
}

.required{
color:#C60049;
}

#content{
	background-position:top center;
	background-repeat:no-repeat;
	background-size:100%;
	/*background-blend-mode:multiply;*/
	position:relative;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	height:calc(100vh - 100px);
	max-width:calc(100vw - 100px);
}

@media only screen and (max-width: 768px) {
	#content{
		height:calc(100vh - 50px);	
	}
}


@media only screen and (max-width: 768px) and (orientation: portrait) {
	
	.title{
		height:auto;
		width:100%;	
	}
	
}

@media only screen and (orientation: portrait) {
	
	#content {
    	max-width: calc(100vw - 30px);
	}
	
	#portait{
		display:block;	
	}
	
	#main{
		display:none;	
	}
	
	.title{
		height:auto;
		width:100%;	
		max-height:none;
	}
	
	
}

@media only screen and (orientation: landscape) {
	
	#portait{
		display:none;	
	}
	
	#main{
		display:block;	
	}
	
	.rsvp_btn{
		left:75%;	
	}
	
}