<!-- Music -->

 #backgroundaudio {
  display: block;
  position: fixed;
  bottom: -43px;
  left: 5px;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
 }
 #backgroundaudio:hover {
  bottom: 0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
 }
 #backgroundaudio audio {
  background: #ffffff;
  padding: 5px;
  display: table-cell;
  vertical-align: middle;
  height: 43px;
  z-index: 9998;
 }
 #backgroundaudio i {
  font-size: 40px;
  display: block;
  background: #ffffff;
  padding: 5px;
  width: 50px;
  float: none;
  margin-bottom: -1px;
  z-index: 9999;
 }
 
 <!-- End Music -->


#save {
    vertical-align: middle;  
	display: block;
    margin: auto;
	position: relative;
	width: 320px;
	}

#save img {
		width: 320px;
}

#respond {
    vertical-align: middle;  
	display: block;
    margin: auto;
	position: relative;
	width: 600px;
	}

#respond img {
		width: 600px;
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;

}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
	text-decoration: none;
	color: black;
}

a.hover {
	text-decoration: underline;
}

h1,h2,h3,h4,h5,h6,ul,li,span,a {
	font-family: calibri,arial;
	font-weight:normal;
	line-height: 100%;
	margin-top: 0;
}

h1 {
	font-size: 20px;
	color: #000;
}

h2 {
	font-size: 16px;
	color: #000;
}

h3 {
	font-size: 12px;
	color: #000;
}

html {
	background-color: #161417; /*Harry Potter Blue */
}


/*
Custom Color Choices

#161417; /*Harry Potter Blue
#F8E49B; /*Harry Potter Yellow
#633818; /*Harry Potter Orange
#1A1B49; /*Harry Potter Purple
#E3E4E6; /*Harry Potter Moon White 
#B21F25; /*RSVP Red

*/

.wand-cursor {
cursor: url('cursor/wand.png'), 
		url('cursor/wand.cur'),      /* Internet Explorer  */
        move;                        /* Older browsers     */
}

/* Custom Fonts */
@font-face {
	font-family: ruritania;
	src: url(font/RURITANIA.WOFF) format('woff');
}

@font-face {
	font-family: magicschool;
	src: url(font/MAGICSCHOOL.WOFF) format('woff');
}

@font-face {
	font-family: hogs;
	src: url(font/HOGS.WOFF) format('woff');
}

@font-face {
	font-family: harryp;
	src: url(font/HARRY.WOFF) format('woff');
}

@font-face {
	font-family: lumos;
	src: url(font/LUMOS.WOFF) format('woff');
}

@font-face {
	font-family: king;
	src: url(font/KING.WOFF) format('woff');
}

@font-face {
	font-family: parsel;
	src: url(font/PARSELTO.WOFF) format('woff');
}

@font-face {
	font-family: gothic;
	src: url(font/GOTHIC.WOFF) format('woff');
}

@font-face {
	font-family: henny;
	src: url(font/HENNY.WOFF) format('woff');
}

/* Custom fonts end */

.font-ruritania {font-family: ruritania;}
.font-magicschool {font-family: magicschool;}
.font-harryp {font-family: harryp;}
.font-lumos {font-family: lumos;}
.font-king {font-family: king;}
.font-parsel {font-family: parsel;}
.font-gothic {font-family: gothic;}
.font-henny {font-family: henny;}


/* my backgrou classes CSS */

.hogwarts {
	background: #161417 url(images/hogwarts.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	
	padding-top:50px;
}

.candles {
    background: #161417 url(images/candles.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;	
	background-size: cover;	
	padding-top:50px;
}

.reception {
	background: #161417 url(images/reception.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;	
	background-size: cover;	
	padding-top:50px;
}

.church {
	background: #161417 url(images/church.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;	
	background-size: cover;	
	padding-top:50px;
}

.hyrule {
	background: #161417 url(images/hyrule.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;	
	background-size: cover;	
	padding-top:50px;
}

.lone-candle {
	background: #161417 url(images/lone-candle.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	
	padding-top:50px;
}

.forest {
	background: #161417 url(images/forest.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	
	padding-top:50px;
}

.forest-pink {
	background: #161417 url(images/forest-pink.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	
	padding-top:50px;
}

.eagle {
	background: #161417 url(images/eagle.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	
	padding-top:50px;
}


.skel {
	background: #161417 url(images/skel.jpg) repeat center center fixed; 
	padding-top:50px;
}

.patchy {
	background: #161417 url(images/patchy.jpg) repeat center center fixed; 
	padding-top:50px;
}

/* End Background Classes */

#picture {
	width:980px;
	font-family: hogs; /* Harry P Font */
	font-size: 80px;
	color: #F8E49B; /*Harry Potter Yellow */
	margin: auto;
}

#picture h1 {
	font-family: gothic;
}

.picture-back {
	background-image: url("us.jpg");
	height: 489px;
	border-radius: 7px;
}


#head-content {
	width:980px;
	height: 0px;
	font-size: 50px;
	font-family: hogs; /* Harry P Font */
	color: #F8E49B; /*Harry Potter Yellow */
	margin: auto;
}

#picture h1 {
	font-size:80px;
	color: red;
	float: right;
	margin-top: 410px;
}

#columns{
	width: 980px;
	margin: 0em auto;
	font-family:  hogs; /* Harry P Font */
}

#columns h1 {
	color: white;
	font-size: 50px;
}

#columns h2 {
	color: white;
	font-size: 20px;
}

#columns img {
	max-width: 400px;
}
#left { /*720px*/
    width: 720px;
    float: left;
}
 
#right { /*260px*/
    width: 260px;
    float: right;
}

#middle {
	width: 980px;
	margin: auto;
	position:relative;
}

.middle-white {
	background-color:#FFF;
}

#middle-left {
	margin-top: 1%;
	border-radius: 30px;
		border-width:3px;
		border-style:dotted;
		border-color:#CCC;
	background-color: #CECE9D;
	background: #161417 url(images/vic.jpg) repeat center center fixed; 
	top: 0px;
	position:absolute;
	min-height: 70%;
	width: 50%;
	height: 350px;
}

#middle-right {
	width: 500px;
	height: 325px;
	opacity: .9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
	background: #161417 url(images/wood-plank.jpg) no-repeat center center; 
	text-align:center;
	border-width:2px;
	border-radius: 6px;
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-style:solid;
	border-color: black; 
    vertical-align: middle;  
    margin: auto;
	position: relative;
	display: block;
}

#middle-right h1 {
	font-family: magicschool;
	float: right;
}
#middle-right p {
	font-family: magicschool;
	float: right;
}
.middle-pic-right {
	float: right;
	width: 50%;
}

.middle-pic-right img{
	border-radius: 20px;
	padding-bottom: 5px;
}

.middle-pic-left img{
	border-radius: 20px;
	float:right;
	padding-bottom: 5px;
}

.middle-pic-left {
	float: left;
	width: 50%;
}

.middle-spacer {
	padding-bottom: 128px;
}

.transparent {
	opacity: .9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}
.transparent:hover {
    filter: alpha(opacity=100); /* For IE8 and earlier */
}


/* Contact Page Begin */

#contact_us {
	width: 500px;
	height: 325px;
	font-size: 35px;
	opacity: .9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
	background: #161417 url(images/salvage.gif) repeat center center fixed; 
	box-shadow: 10px 10px 5px #888888;
	text-align:center;
	border-width:3px;
	border-radius: 9px;
	-moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    -khtml-border-radius: 9px;
    border-style:solid;
	border-color: #F8E49B; /*Harry Potter Yellow */
    vertical-align: middle;  
	display: block;
    margin: auto;
	position: relative;
}

#contact_us h1 {
	font-size: 40px;
	padding-top: 10px;
	font-family: gothic;
	color: #F8E49B; /* Harry Potter Yellow */
}
.contact_input {
	width: 90%;
	height: 90%;
	border-radius: 6px;
	font-family: gothic;
	font-size: 20px;
}

.contact_textarea {
	width: 80%;
	height: 75px;;
	resize: none;
	max-width: 90%;
	border-radius: 6px;
	font-family: gothic;
	font-size: 20px;
}

.contact_h1 {
	width:300px;
	font-family: gothic;
	font-size:40px;
	color: red;
}


/* RSVP Begins Here */

#rsvp {
	width: 500px;
	height: 325px;
	background: #161417 url(images/wood-plank.jpg) no-repeat center center; 
	text-align:center;
	border-width:2px;
	border-radius: 6px;
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-style:solid;
	border-color: black; 
    vertical-align: middle;  
    margin: auto;
	position: relative;
	display: block;
	font-family: henny;
}
#rsvp_top {
	padding-top: 10px;
	margin-bottom: 10px;
	font-family: henny;
	font-size: 40px;
	color: white;	
}

#rsvp_left {
	width:40%;
	float:left;
}

#rsvp_left h1 {
	font-size: 80px;
	color: black;
	font-family: henny;
	position: relative;
	margin-top: 90px;
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	writing-mode: rl-tb;
}

#rsvp_right {
	width:60%;
	float: right;
}

.rsvp_input {
	width: 76%;
	border-radius: 3px;
	font-family: henny;
	font-size: 12px;
	margin-top: 1px;
	margin-bottom: 2px;
}

.rsvp_textarea {
	margin-top: 1px;
	width: 76%;
	max-width: 76%;
	height: 70px;
	border-radius: 3px;
	font-family: henny;
	font-size: 12px;
	resize:none;
}

.styled-button-7 {
	background: #FF5DB1;
	background: -moz-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FF5DB1),color-stop(100%,#E94A86));
	background: -webkit-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
	background: -o-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
	background: -ms-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
	background: linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#FF5DB1', endColorstr='#E94A86',GradientType=0);
	padding:5px 7px;
	color:#fff;
	font-family:'Helvetica Neue',sans-serif;
	font-size:12px;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border:1px solid #E8124F
}

/* Reception */

#reception-sign {
	width: 350px;
	height: 275px;
	background: #161417 url(images/wood-plank-dark.jpg) no-repeat center center; 
	text-align:center;
	border-width:2px;
	border-radius: 6px;
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-style:solid;
	border-color: black; 
    vertical-align: middle;  
    margin: auto;
	position: relative;
	display: block;
	margin-top: 75px;
	margin-right: 300px;
}

.receptionBigFont {
	margin-top: 30px;
	font-size: 50px;
	color: #E3E4E6; /*Harry Potter Moon White  */
}

.receptionNormalFont {
	font-size: 30px;
	color: #F8E49B; /*Harry Potter Yellow */
}

/* Accomodations Begins Here */

#accom_map {
	width: 65%;
	height: 600px;
	background-color:#000;
	margin: auto;
	float: left;
		border-width: 5px;
		border-top-width:9px;
		border-top-left-radius: 9px;
		border-top-right-radius: 9px;	
		border-style: groove;
		border-color: #E3E4E6; /*Harry Potter Moon White  */
	-moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    -khtml-border-radius: 9px;
    
}

#accom_rec {
	width: 33%;
	height: 300px;
	margin-top: 50px;
	border-radius: 10px;
	float: right;
}

#accom_rec h1 {
	float: right;
	color: #E3E4E6; /*Harry Potter Moon White  */
	margin-top: -50px;
}

#accom_rec p {
	float: left;
	padding-left: 10px;
	color: #E3E4E6; /*Harry Potter Moon White  */
}

.center {
		margin: auto;
}

.inline-block {
	display: inline-block;
}


/* Footer Begins Here */

#footbkg {
	background:#161417; /* Harry Potter Blue */
	position: fixed;
	bottom: 0;
	width:100%;
	border-top: 1px white;
border-style: solid;
padding-top: 10px;
}

#footer {
	background-color:#161417; /* Harry Potter Blue */
	height: 110px;
	width: 980px;
    clear: both;
    margin-left: auto;
    margin-right: auto;
	}

#footer h3 {
	text-align: center;
	color: white;
}
#col1 h1, #col2 h1, #col3 h1, #col4 h1 {
	color:#633818; /* Harry Potter Orange */
	font-size:35px;
	cursor:default;
	font-family: magicschool; /* Font Change */
}

#col1 a, #col2 a, #col3 a, #col4 a {
color:#F8E49B; /*Harry Potter Yellow */
font-family: gothic;/* Font change here */
font-size: 23px;
}

#col1 a:hover, #col2 a:hover, #col3 a:hover, #col4 a:hover {
color: #E3E4E6; /*Harry Potter Moon White */
}

#col1 {
  display:inline;
  text-align: center;
  float: left;
  width: 245px;

  }
  
#col2 {
  display:inline;
  float:left;
  text-align: center;
  width: 245px;
}


#col3 {
  display:inline;
  text-align:center;
  float:left;
  width: 245px;
}

#col4 {
  float:left;
  text-align: center;
  width: 245px;
}

#col4 img {
  max-width:40px;
  border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -khtml-border-radius: 7px;
  padding: 3px 3px 3px 3px;
}

#col4 img:hover {
  filter: none;
}

.footerFont {
	color: #F8E49B; /*Harry Potter Yellow */
	font-family: hogs; /* Harry P Font */
}