@font-face {
	font-family: 'hylian';
	src: url('fonts/hylian.ttf') format('truetype');
}

@font-face {
	font-family: 'charlemagne';
	src: url('fonts/charlemagne.ttf') format('truetype');
}

@font-face {
	font-family: 'aramisi';
	src: url('fonts/aramisi.ttf') format('truetype');
}

@font-face {
	font-family: 'triforce';
	src: url('fonts/triforce.ttf') format('truetype');
}

body {
	/* background: #f8f2da; */
}

body, .ui-widget {
	font-family: 'charlemagne';
}

header {
	width:100%;
	float:left;
}

.bold {
	font-weight:800;
}

.ui-menu.ui-widget.ui-widget-content {
	outline:none;
	border:none;
	background: url("image/new_year_background.png") 100% 100%;
	text-align:center;
	padding: 1em;
}

.ui-menu .ui-menu-item {
	list-style-image: none;
	display: inline-block;
	position: relative;
}

.ui-menu .ui-menu-item .ui-menu-item-wrapper {
	padding:0;
}

.ui-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-active {
	border:none;
	padding:0;
	margin: 0;
	background:none;
	color: #bca409;
}

.ui-menu .ui-menu-item .ui-menu-item-wrapper .ui-icon {
	display:none;
}


/* Computer */
@media (min-width: 1050px) {
	
	.ui-menu.ui-widget.ui-widget-content {
		width:80%;
		margin:1em auto;
		display:block;
	}
	
	.ui-menu .ui-menu-item {
		margin: 0 2em;
	}
	
	.ui-menu-item .ui-menu .ui-menu-item {
		margin:0.5em 1em;
	}
	
	.ui-menu-item .ui-menu.ui-widget.ui-widget-content {
		width:auto;
		display:block;
	}

	.ui-menu-item .ui-menu.ui-widget.ui-widget-content .ui-menu-item {
		display:block;
		width:15em;
		margin:0.5em 0;
	}
}

/* mobile */
@media (max-width: 1050px) {
	#mobileMenuButton {
		display:block;
		width: 5em;
		height: 5em;
		position:absolute;
		top:0;
		left:0;
		cursor:pointer;
		background: url("https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png");
		background-size: contain;
	}
	
	/* #mobileMenuButton:after { */
		/* display:block; */
		/* position:absolute; */
		/* right:-4em; */
		/* top:0.5em; */
		/* content: "Menu"; */
	/* } */
	
	.ui-menu.ui-widget.ui-widget-content {
		width:80%;
		margin:1em auto;
		display:none;
	}
	
	ul.ui-menu {
		font-size:2em;
	}
	
	.ui-menu .ui-menu-item {
		display: block;
		margin: 0.5em 0;
	}
}

.page {
	width:100%;
	float:left;
	clear:both;
}

.pagebreak {
	text-align:center;
	width:100%;
	top:7em;
	margin: 1em 0;
}

.content {
	margin:0 auto 6em;
}

@media (min-width: 1050px) {
	.content {
		width:1050px;
	}
	
	.pagebreak img {
		width:20em;
	}
}

@media (max-width: 1050px) {
	.content {
		/* outline:1px solid red; */
		width:100%;
	}
	
	.pagebreak img {
		width:15em;
	}
}


h1 {
	position:relative;
	font-family:triforce;
	text-align:center;
	margin:0.2em 0;
}

@media (min-width: 1050px) {
	h1 {
		font-size:5em;
	}
}

@media (max-width: 1050px) {
	h1 {
		font-size:4em;
	}
}

@media (max-width: 600px) {
	h1 {
		font-size:2em;
	}
}

h2 {
	position:relative;
	font-family:aramisi;
	text-align:center;
	font-size:3em;
	margin: 1em 0;
}

@media (min-width: 1050px) {
	h2 {
		font-size:3em;
	}
}

@media (max-width: 1050px) {
	h2 {
		font-size:2em;
	}
}

@media (max-width: 600px) {
	h2 {
		font-size:1.4em;
	}
}

h3 {
	position:relative;
	font-family:aramisi;
	font-size:2em;
	text-align:center;
}

@media (min-width: 1050px) {
	h3 {
		font-size:2em;
	}
}

@media (max-width: 1050px) {
	h3 {
		font-size:1.5em;
	}
}

@media (max-width: 600px) {
	h3 {
		font-size:1.5em;
	}
}

h4 {
	position:relative;
	font-family:aramisi;
	font-size:1.5em;
	text-align:center;
	margin: 0.2em 0;
}

@media (min-width: 1050px) {
	h4 {
		font-size:1.5em;
	}
}

@media (max-width: 1050px) {
	h4 {
		font-size:1.3em;
	}
}

@media (max-width: 600px) {
	h4 {
		font-size:1.2em;
	}
}

.sideforce {
	display:inline-block;
	margin:0 1em;
	vertical-align:middle;
	width:1em;
	height:1em;
	background: url('image/triforce.png') 100% 100% no-repeat;
	background-size:contain;
}


#frontPageImgFrame {
	position:relative;
	/* padding: 0 1em; */
}

@media (min-width: 1050px) {
	#frontPageImgFrame {
		width:70%;
		margin: 6em auto 6em;
		/* padding: 0 1em; */
	}
}

@media (max-width: 1050px) {
	#frontPageImgFrame {
		width:85%;
		margin:10em auto 3em;
		/* padding: 0 1em; */
	}
}

#frontPageImg {
	display:block;
	width:100%;
}

.cornerborder {
	display:block;
	position:absolute;
	width:20%;
}

.topleftcornerborder {
	left:-7%;
	top:-10%;
}

.toprightcornerborder {
	right:-7%;
	top:-10%;
	
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}
.botleftcornerborder {
	left:-7%;
	bottom:-10%;
	
	-moz-transform: scaleY(-1);
	-o-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
	filter: FlipV;
	-ms-filter: "FlipV";
}

.botrightcornerborder {
	bottom:-10%;
	right:-7%;
	
	-moz-transform: scaleY(-1) scaleX(-1);
	-o-transform: scaleY(-1 scaleX(-1));
	-webkit-transform: scaleY(-1) scaleX(-1);
	transform: scaleY(-1) scaleX(-1);
	filter: FlipV FlipH;
	-ms-filter: "FlipV FlipH";
}


.contentblock {
	position:relative;
	width:100%;
	margin: 1em 0;
}

.contentblock .leftcontent {
	display:block;
	/* padding:1em; */
}

.contentblock .rightcontent {
	display:block;
}

@media (min-width: 1050px) {
	.contentblock {
		width:100%;
	}

	.contentblock .leftcontent {
		float:left;
		width:45%;
		height:375px;
	}

	.contentblock .rightcontent {
		float:right;
		width:45%;
		height:375px;
	}
	
	.engagementVideo {
		width:100%;
		height:100%;
	}
}

@media (max-width: 1050px) {
	.contentblock {
		width:100%;
	}

	.contentblock .leftcontent {
		margin: 1em 0;
	}

	.contentblock .rightcontent {
		margin: 1em 0;
	}
	
	.engagementVideo {
		width:100%;
		height:375px;
	}
}

.textContent {
	padding: 0 2em;
	text-align:center;
}

.imgContent { 
	padding:1em;
	background: url("image/new_year_background.png") 100% 100%;
}

@media (min-width: 1050px) {
	.textContent {
		font-size:16px;
	}
	
	.imgContent img, .imgContent iframe {
		width:100%;
		height:100%;
	}
}

@media (max-width: 1050px) {
	.textContent {
		font-size:16px;
	}
	
	.imgContent img, .imgContent iframe {
		width:100%;
		height:600px;
	}
}

@media (max-width: 600px) {
	.textContent {
		font-size:14px;
	}
	
	.imgContent img, .imgContent iframe {
		width:100%;
		max-height: 300px;
	}
}

blockquote {
  quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
  content: open-quote;
  font-size: 2em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

blockquote:after {
  content: close-quote;
  font-size: 2em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

a.button {
	color:black;
	text-decoration:none;
	padding:0.5em;
}

input[type="submit"], a.button {
	margin:1em;
	background:none;
	border:none;
	cursor:pointer;
	border:1px solid black;
}

#gallery {
	width:100%;
	text-align:center;
}

#gallery li {
	display:inline-block;
	background: url("image/new_year_background.png") 100% 100%;
	padding:1em;
	margin:1em;
}

#gallery li img {
	max-width:100%;
	max-height:100%;
}

#detailsPage a {
	display:block;
	margin:1em auto;
	width:200px;
	vertical-align:middle;
	text-align:center;
}

#registryPage img {
	display:block;
	margin:0 auto;
	width:100px;
	height:100px;
}

#registryPage p {
	display:block;
	margin:0 auto;
	text-align:center;
}

#registryPage a {
	display:block;
	margin:1em auto;
	width:200px;
	vertical-align:middle;
	text-align:center;
}

@media (max-width: 600px) {
	#registryPage a {
		font-size: 1.5em;
		width: 300px;
	}
}

.rsvpForm ul li:after {
	content:'';
	display:block;
	clear:both;
}

.rsvpForm ul li {
	margin: 1em 0;
	text-align:center;
}

.rsvpForm ul li label {
	text-align:left;
	float:left;
}

.rsvpForm ul li input, .rsvpForm ul li select {
	margin: 0 1em;
	float:right;
}

.rsvpForm input[type="submit"] {
	margin:0 auto;
	display:block;
}

@media (min-width: 1050px) {
	.rsvpForm ul li label {
		width: 500px;
	}
}

@media (max-width: 1050px) {
	.rsvpForm ul li label {
		text-align:center;
		width: 100%;
	}
	.rsvpForm ul li input {
		width:initial;
		margin:0 auto;
		float:none;
	}
}


footer {
	width:100%;
	float:left;
	font-family: 'hylian';
	text-align:center;
	margin: 0 0 2em;
}

@media (max-width: 1050px) {
	footer span {
		display:none;
	}
}

footer a{
	color:black;
	text-decoration:none;
}

#footertriforce {
	width:100px;
	height:100px;
	vertical-align:middle;
}

.ui-menu:after, .page:after, .contentblock:after, #gallery:after  {
	display:block;
	content:'';
	clear:both;
}

img#belklogo {
    width: 328px;
    height: 128px;
}

img#wslogo {
    width: 400px;
    height: 250px;
}

img#targetlogo {
    width: 200px;
    height: 200px;
    margin: 5em auto;
}

img#amazonlogo {
    width: 420px;
    height: 150px;
    margin: 3em auto;
}