/* Fonts */
@font-face {
	font-family: 'BlackJack';
	src: url('/fonts/BlackJackRegular.eot');
	src: url('/fonts/BlackJackRegular.eot?#iefix') format('embedded-opentype'),
		url('/fonts/BlackJackRegular.woff') format('woff'),
		url('/fonts/BlackJackRegular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

* {font-family:"Abhaya Libre", serif;}
p {font-size:1.2em;}
.underline {height:2px; width:100%; background-color:#E8D0D4; display:block; margin-top:-15px; margin-bottom:20px;}
html, body {overflow-x:hidden;}

/* Header */
header {background-color:#fff; position:fixed; z-index:9999;}
.main_nav {text-align:center; margin-left:-5px;}
.main_nav>li {width:15%; margin:0; padding:15px  0;}
.main_nav>li>a {color:#666;}
.main_nav>li>a>img {width:125px; position:absolute; margin-left:-60px; margin-top:-10px;}
.h-nav {left:-20px;}
.mobile-logo img {width:100%; margin-top:10px;}
.collapse {float: right; position: absolute; top: 0; right: 10px; height: 50px; margin: 10px 0px; cursor: pointer; z-index: 9999;}
.collapse span {position: absolute; display: block; top: 17px; height: 3px; width: 30px; background: #222; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s;}
.collapse span:before, .collapse span:after {position: absolute; content: ''; display: block; height: 3px; width: 100%; background: #222; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s;}
.collapse span:before {bottom: 7px;}
.collapse span:after {top: 7px;}
.active span {background: transparent; z-index: 99999;}
.active span:before {bottom: 0; background: #222; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);}
.active span:after {top: 0; background: #222; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg);}

/* Hero */
.hero {height:750px; background-image:url("/images/IMG_1735.jpg"); background-size:cover; background-position:0 -100px; background-repeat:no-repeat; position:relative;}
.hero>img {margin-top:525px; position:relative; z-index:2;}
.hero-grad {
  background: rgba(0,0,0,0); /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(rgba(16, 37, 66, 0), rgba(16, 37, 66, 1)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(rgba(16, 37, 66, 0), rgba(16, 37, 66, 1)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgba(16, 37, 66, 0), rgba(16, 37, 66, 1)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(16, 37, 66, 0), rgba(16, 37, 66, 1)); /* Standard syntax */
  /*margin-top:500px;*/
	bottom:0;
  position:absolute;
  z-index:0;
}

/* About Us */
.about_us {background-color:#fff; padding-top:50px; padding-bottom:50px;}
.about_us * {color:#333; text-align:center;}
.about_us>div {padding:20px;}
.about_us>div>h2 {font-family:"BlackJack", cursive;}
.about_us>div>p {font-size:1.3em; line-height:1.2em;}

/* Countdown */
.countdown {height:500px; overflow:hidden; position:relative; background-color:rgba(16, 37, 66, .75);}
.countdown * {color:#fff;}
.countdown-container {text-align:center; margin-top:125px;}
.countdown-container h3 {font-family:"BlackJack", cursive; margin-top:50px;}
.countdown-container>div {border-top:1px solid #aaa; border-bottom:1px solid #aaa;}
.flx-embed {width:100%; margin-top:-175px; position:absolute; z-index:-1;}
.flx-embed iframe {width:100%;}
#Stage_jbeeb_3 {margin:10px auto!important;}
#Stage_jbeeb_3>div {background-image:none!important;}
#Stage_jbeeb_3>div>div {color:#000!important; background-color:rgba(0,0,0,0)!important;}
#Stage_jbeeb_3 div[id^="Container_jbeeb_"] {border:1px solid rgba(0,0,0,0); border-radius:0px!important;}

/* Party */
.party {background:#fff; padding: 50px 0;}
.party h2 {text-align:center; font-family:"BlackJack", cursive;}
.bridal, .grooms {margin-top:30px;}
.bridal * {text-align:right; margin-right:15%;}
.bridal img {width:50%; margin-left:35%; box-shadow:35px 53px rgba(0,0,0,0.05)}
.bridal h4 {line-height:19px;}
.bridal p {font-family:'Raleway', sans-serif;}
.grooms * {text-align:left; margin-left:15%;}
.grooms img {width:50%; margin-right:35%; box-shadow:35px 53px rgba(0,0,0,0.05)}
.grooms h4 {line-height:19px;}
.grooms p {font-family:'Raleway', sans-serif;}
.grooms#justin {margin-left:75px;}

/* Wedding */
.wedding {text-align:center; padding:50px 0; background:linear-gradient(#fff 0%, #e8d0d4 100%);}
.wedding h2 {line-height:20px; font-family:"BlackJack", cursive;}
.wedding iframe {width:100%; height:400px;}

/* Contact */
#contact {background-color:#e8d0d4; margin-top:-1px;}
#contact form {background-color:#fff; padding:25px; margin-top:100px; box-shadow:35px 53px rgba(0,0,0,0.05);}
#contact form h3 {text-align:center; font-family:"Blackjack", serif;}
#contact form input[type="text"], #contact form select {width:49%; outline:none; border:none!important; border-bottom:1px solid #222!important;}
#contact form input[name="email"], #contact form select[name="guests"] {margin-left:2%;}
#contact form input[name="message"] {width:100%;}
#contact form select {height:35px; border:1px solid #000; background-color:#fff; -webkit-border-radius:0px; -webkit-appearance: none; padding:5px 8px; color:#666;}
#contact form select option:first-child {display:none;}
#contact form input[name="submit"] {border:1px solid #222; margin-top:15px;}

/* Footer */
.footer {text-align:center; padding:30px 0 10px; font-size:12px; background-color:#fff;}
.footer a {color:#000;}
.footer img {width:100px;}

/* Slide out pane */
.pane {width: 200px; height: 1000px; position: fixed; top: 0px; left: -200px; background: white; background-image: url("https://www.transparenttextures.com/patterns/purty-wood.png"); z-index: 5555;}
.pane h2 {display:block; margin:50px auto; font-family: 'Playfair Display', serif; text-align:center;}
.pane a {color:#000;}
.v-menu {margin: 50px 0px;}
.v-menu li {list-style: none; text-align: center; margin-left: -20px;}
.social li {list-style: none; display: inline-block; margin: 5px 20px 5px 0px; display:none;}
.social a {font-size: 2.5rem; color:#000;}
.social a:hover, .social a:focus, .social a:visited {color:#000;}

/* Gallery Page */
.gallery h5 {margin-top:125px;}
.gallery>h3 {margin-bottom:25px;}
.linditimwedding {transition:all .5s ease-in-out;}
.juicer-feed h1.referral {display:none!important;}
.gallery .swipebox {background-size:cover; background-position:center center;}

/* Registry Page */
.registry>h3 {margin-top:125px;}
.reg-img {height:200px; margin-top:100px; transition:all .25s ease-in-out; background-size:250px;}
.dis {background-image:url("/images/disney_grayscale.png"); background-repeat:no-repeat; background-position:top center;}
.dis:hover {background-image:url("/images/disney_color.png");}
.ama {background-image:url("/images/paypal_grayscale.png"); background-repeat:no-repeat; background-position:center 0px; background-size:150px;}
.ama:hover {background-image:url("/images/paypal.png");}
#registry-content {margin-top:200px; min-height:600px;}

/* Stuff To Do Page */
.stuff-to-do>h3 {margin-top:125px;}
.stuff-to-do .overlay {padding:0px;}
.stuff-to-do .overlay>div {top:0px; left:0px; background-color:rgba(0,0,0,0.5);}
.stuff-to-do .overlay .caption {height:40%; margin-top:60%; background-color:rgba(0,0,0,0.5); color:#fff;}
.stuff-to-do .footer {margin-top:150px;}

/* Media Queries */

/* Diminuitive Breakpoint */
@media (max-width:600px) {
	header {height:60px;}
	.hero {background-position:center center;}
	.flx-embed {overflow:hidden;}
	.flx-embed iframe {width:1000px; margin-top:-141px; margin-left:-75px;}
	.grooms h4, .grooms p {text-align:center; margin-left:0;}
	.grooms img {width:50%; margin-left:25%; box-shadow:20px 30px rgba(0,0,0,0.05)}
	.bridal h4, .bridal p {text-align:center; margin-right:0;}
	.bridal img {width:50%; margin-left:25%; box-shadow:20px 30px rgba(0,0,0,0.05)}
    .grooms#justin {margin-left:0px;}
	#contact {height:650px;}
	#contact form {box-shadow:20px 30px rgba(0,0,0,0.05);}
	#contact form input, #contact form select {width:80%!important; margin-left:10%!important;}
	#contact form select[name="attending"] {margin-top:10px;}
	.stuff-to-do .overlay {padding:0; margin-bottom:20px;}
	.stuff-to-do .overlay>div {display:none;}
	.stuff-to-do .overlay .caption {height:30%; margin-top:70%;}
}

/* Small Breakpoint */
@media (min-width:601px) and (max-width:899px) {
	header {height:60px;}
	.hero {background-position:center center; background-image:url("/images/barrel_house.jpg");}
	.flx-embed {overflow:hidden;}
	.flx-embed iframe {width:1000px; margin-top:-100px; margin-left:-75px;}
	#contact form, .grooms img, .bridal img {box-shadow:30px 40px rgba(0,0,0,0.05);}
	.ama {background-position:center 0px;}
	.stuff-to-do .overlay {padding:0;}
	.stuff-to-do .overlay>div {display:none;}
    .grooms#justin {margin-left:45px;}
}

/* Medium Breakpoint */
@media (min-width:900px) and (max-width:1199px) {
	.flx-embed {margin-top:-260px;}
	.bridal img {margin-left:25%;}
	.bridal h4, .bridal p {text-align:center; margin-right:0px;}
	.grooms img {margin-left:25%;}
	.grooms h4, .grooms p {text-align:center; margin-left:0px;}
    .grooms#justin {margin-left:0px;}
}

@media (min-width:900px) {
  .hero {margin-top:40px;}
}