@charset "utf-8";
/* CSS Document */

.mainBodyCont {
	width:100%;
	height:100%;
	background-image:url('../img/login.jpg');
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	position:relative;
}
.boxCont {
	width:100%;
	max-width:400px;
	margin:-150px 0 0 -220px;
	padding:20px;
	top:50%;
	left:50%;
	background:rgba(255,255,255,0.9);
	box-shadow:0 2px 5px rgba(0,0,0,0.5);
	position:absolute;
	text-align:center;
	transition:all ease-in-out 200ms;
}

.formHeads {
	font-family:"simon_scriptregular", Sans-serif;
	color: rgb(102,45,144);
	text-align:center;
	font-size: 25px;
	line-height: 30px;
}
.boxCont input[type=text], .boxCont input[type=password] {
	border: 2px solid rgb(102,45,144);
	padding:10px;
	font-size:25px;
	line-height:25px;
	text-align:center;
	color: rgb(102,45,144);
	font-family: 'VintageOne';
}
.message, .error {
	border:3px solid #b71c1c;
	background:#ffebee;
	color:#b71c1c;
	padding:10px 20px;
}

.btn {
	display:inline-block;
	text-transform:uppercase;
	color:#fff;
	padding:5px 20px;
	margin-left:5px;
	margin-bottom:5px;
	border-radius:2px;
	box-shadow:0px 2px 4px rgba(0,0,0,0.5);
	line-height:30px;
	font-size:14px;
	font-weight:600;
	cursor:pointer;
}
.btn:hover { box-shadow:0px 2px 4px rgba(0,0,0,0.5), 0px -2px 0px rgba(0, 0, 0, 0.27) inset; }
.btn:active { box-shadow:0px 2px 4px rgba(0,0,0,0.5), 0px 2px 0px rgba(0, 0, 0, 0.27) inset; }
.btn.lavender { background-color:#8e24aa; }
.btn.lavender:hover { background-color:#ab47bc; }
.btn.lavender:active { background-color: #6a1b9a; }
.btn.green { background-color:rgb(104, 159, 56); }
.btn.green:hover { background-color:rgb(139, 195, 74); }
.btn.green:active { background-color: rgb(51, 105, 30); }
.btn.red { background-color:rgb(229,57,53); }
.btn.red:hover { background-color:rgb(255,82,82);}
.btn.red:active { background-color:rgb(152,23,20);}
.btn.orange { background-color:rgb(239,108,0); }
.btn.orange:hover { background-color:rgb(255,152,0);}
.btn.orange:active { background-color:rgb(191,70,0);}
.btn.blue { background-color:rgb(2,136,209); }
.btn.blue:hover { background-color:rgb(3,155,229);}
.btn.blue:active { background-color:rgb(2,108,166);}
.hiddenControl { display:none; }
.rsvpBox.show { display:block; }
.rsvpBox.hide { display:none; }
.headImg {
	position:absolute;
	top: -55px;
	left: 10px;
	width: 420px;
	height: 90px;
	background-position:center center;
	background-repeat:no-repeat;
	background-image:url(../img/gle.png);
}
.innerBox {
	position:relative;
}
.rsvpCont {
	position:absolute;
	width:170px;
	background:rgba(255,255,255,0.9);
	right:-200px;
	top:0;
	margin:0px;
	padding:20px 5px;
	border-top-right-radius:15px;
	border-bottom-right-radius:15px;
	text-align:center;
	z-index:1;
	box-shadow: 0 2px 5px rgba(0,0,0,0.5);
	font-size:25px;
	line-height: 30px;
	font-family: "simon_scriptregular", Sans-serif;
	font-size: 25px;
	color: rgb(102,45,144);
}
.ynSwitch {
	width:38px;
	margin:0 auto;
	height:18px;
	background:rgb(255,255,255);
	border-radius:10px;
	margin-top:5px;
	padding:1px;
	box-shadow:0 2px 5px rgba(0,0,0,0.5);
	transition:all ease-in-out 200ms;
}
.posSwitch {
	width:18px;
	height:18px;
	border-radius:9px;
	background:rgb(1255,255,255);
	transition:all ease-in-out 200ms;
	
}
.ynSwitch.posY .posSwitch {	margin-left:19px; }
.ynSwitch.posN .posSwitch {	margin-left:0; }
.ynSwitch.posY { background:rgb(104, 159, 56)}
.ynSwitch.posN { background:rgb(229,57,53);}
.boxCont * {
	transition:all ease-in-out 200ms;
}