/* CSS TEMPLATE */
* {margin:0;padding:0;border:none;}
html, body {height: 100%;}
body {
	background:#000;
	font-family: 'Roboto', sans-serif;
	color:#fff;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
a {text-decoration: none;}
a, a:hover {cursor:pointer;color:#fff;}
ul {}
li {list-style:none;display:inline-block;}
input:hover, button:hover, label:hover {cursor: pointer;}
h1 {font-size:6em;font-weight: 400;	text-shadow: 5px 5px 8px #fff;}
h2 {font-size:2.5em;font-weight: 400; text-shadow: 0px 0px 3px #000;}
h3 {font-size:1.5em;font-weight: 400;}
h4 {font-size:1em;font-weight: 400;}

.warp {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
.full {
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}
.error {border-bottom:1px #c00 solid !important;color:#c00;}
.error::-webkit-input-placeholder,
.error:-moz-placeholder,
.error::-moz-placeholder,
.error:-ms-input-placeholder {
	color:#c00 !important;
}
/* Nav */
#nav {
	position: absolute;
	background-color: rgba(0,0,0,0.3);
	top: 0;
	width: 100%;
	z-index: 10;
	margin:0 auto;
	text-align: center;
}
.menu {
	height: 100%;
}
.menu li {
	display: inline-block;
}
.menu li a {
	padding: 1em;
	display: block;
}
.nav-btn {
	display: none;
}
.nav-btn-label {
	display: none;
}
#content {
	height: 100%;
	width: 75%;
	margin:5em auto 0 auto;
	text-align: center;
}
/* Home */
#home h2 {
	letter-spacing:0em;
	font-size: 2em;
}
#home .section {
	display: block;
	width: 100%;
	height: 25%;
	text-align: center;
	margin:0 auto;
	background-repeat: no-repeat;
}
#home .section:hover {
	cursor: pointer;
}
#home .section a {
	display: block;
	height: 100%;
	width: 100%;
	z-index: 2;
}
#home .section .preview-text {
	width: 100%;
}
#home .section .preview-text h3{
	font-size: 1em;
	text-align: center;
}
/* Our Story */
#our-story #content {
	height: auto;
	padding: 1em 0.2em;
	background-color: rgba(0,0,0,0.6);
	text-transform: none;
}
#our-story #content p {
	margin-bottom: 2em;
}
/* Ceremony Reception */
#ceremony-reception .full{
	background-position:center 0%;
	background-size: cover;
}
#ceremony-reception .section {
	position: relative;
	width: 100%;
}
.details {
	padding: 2em;
}
.details, .map{
	vertical-align: top;
	background-color: rgba(0,0,0,0.4);
	margin-bottom: 2em;
}
/* RSVP */
#rsvp h1 {text-shadow: 5px 5px 10px #000;}
#rsvp h3 {text-shadow: 0px 0px 4px #000;}
#rsvp p {text-shadow: 0px 0px 3px #000;}
#rsvp .full{
	background-position:center 0%;
}
#rsvp-form label{
	font-size: 3em;
	text-shadow: 5px 5px 10px #000;
	max-width: 100%;
}
#rsvp-form input {
	font-size: 3em;
	text-align: center;
	background: none;
	border-bottom:1px #fff solid;
	color:#fff;
	max-width: 100%;
}
#rsvp .section {
	text-align: center;
}
#rsvp .section p {
	margin:0 auto;
	background-color: rgba(0,0,0,0.4);
	padding:0.3em 0;
}
#guests {
	min-height: 3em;
}
#guests label {
	font-size:1.4em;
}
.disclaimer {
	font-size: 0.9em;
}
#submit {
	font-size: 3em;
	background:transparent;
	border: 1px #fff solid;
	border-radius: 10px;
	padding:0.1em;
	color:#fff;
}
#submit:hover, #submit:active, #submit:focus{
	background: #fff;
	color:#000;
}
#submit span {
	font-size: 0.5em;
	vertical-align:top;
}
#guest:before {
	font-family: FontAwesome;
	content: "";
}
#add-guest {
	font-size: 2.5em;
	color: #fff;
	background: none;
	position: absolute;
	margin-left: -1.2em;
}
.guest {
	margin: 0 5px 0 0;
}
.guest i {
	color:#c00;
}

/* Smartphone */
@media only screen and (min-device-width : 320px) and (max-device-width : 1024px){
	#content {
		width: 90%;
	}
	#nav {
		background-color: rgba(0,0,0,0);
	}
	.menu {
		position: fixed;
		background-color: rgba(0,0,0,0.8);
		top: 0;
		width: 100%;
		z-index: 10;
		margin:0 auto;
		text-align: center;
		height: 100%;
		display: none;
	}
	.menu li {
		display: block;
		height: 16.66666667%;
	}
	.menu li a {
		display: block;
	}
	.nav-btn-label {
		display: block;
		padding:1em;
		background-color: rgba(0,0,0,0.8);
		width: 1em;
		position: fixed;
		z-index: 99;
		left:0;
		top: 0;
		transition: 1.1s ease-in-out;
	}
	.nav-btn:checked + #content {
		display: none;
	}
	.nav-btn:checked + .nav-btn-label{
		content: "&#xf00d";
	}
	.nav-btn:checked ~ .menu {
		display: block;
	}
	.map {
		height: 18em;
	}
	#rsvp-form input{
		background: rgba(0,0,0,0.6);
		padding:0.3em 0;
	}
	#rsvp-form #add-guest{
		position: relative;
		margin-left: auto;
	}
	#guests label {
		display: block;
	}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#home #content {
		margin: 0;
		width: 100%;
	}
	#home .section a {
		position: relative;
	}
	#home .section h2 {
		position: absolute;
		width: 100%;
		top:30%;
	}
	.full {
		background-size: cover;
		background-position: 60% 20%;
	}
	.our-story {
		background-position: center 46%;
		background-size: 100%;
	}
	.ceremony-reception {
		background-position: center 40%;
		background-size: 150%;
	}
	.gallery {
		background-position: center 90%;
		background-size: 100%;
	}
	.rsvp {
		background-size: 100%;
	}
	#home .section .preview-text {
		visibility: hidden;
	}
}
@media only screen and (min-width : 321px) and (orientation : landscape) {
	#home #content {
		margin: 0;
		width: 100%;
	}
	#home .section {
		float: left;
		height:100%;
		width: 25%;
		text-align: center;
		margin:0 auto;
		position: relative;
		background-size: cover;
	}
	#home .section h2 {
		font-size:1.3em;
	}
	.preview-text {
		background-color: rgba(0,0,0,0.5);
	}
	.our-story {
		background-position: center 50%;
	}
	.ceremony-reception {
		background-position: center center;
	}
	.gallery {
		background-position: 55% 60%;
	}
	.rsvp {
		background-position: 55% 0%;
	}
	#home .section .preview-text {
		bottom: 0;
		position: absolute;
	}
}
/* Tablet */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	#home #content {
		margin: 0;
		width: 100%;
	}
	#home .section h2, .preview-text {
		background-color: rgba(0,0,0,0.5);
		position: relative;
		top: 30%;
	}
	#home .section h2 {
		padding-top:0.1em;
	}
	#home .section .preview-text {
		padding-bottom:1em;
	}
	.our-story {
		background-position: center 49.8%;
		background-size: 100%;
	}
	.ceremony-reception {
		background-position: center center;
	}
	.gallery {
		background-position: center 90%;
	}
	.rsvp {
		background-size: 300%;
		background-position: center 20%;
	}
}
/* Laptop */
@media only screen and (min-width : 1280px){
	#home #content {
		width: 100%;
		margin:0;
	}
	#home h2 {
		margin-top: 40%;
		letter-spacing: 0.5em;
	}
	#home .section {
		float: left;
		height:100%;
		width: 25%;
		text-align: center;
		margin:0 auto;
		position: relative;
		background-size: cover;
	}
	.our-story {
		background-position: 100% center;
		transition: 0.6s ease-in-out;
	}
	.our-story:hover {
		background-position: 25% center;
	}
	.map {
		height: 45em;
	}
	.ceremony-reception {
		background-position: 40% top;
		background-size: cover;
		transition: 1.1s ease-in-out;
	}
	.ceremony-reception:hover {
		background-position: 40% 40%;
	}
	.gallery {
		background-position: 10% 20%;
		background-size: cover;
		transition: 1.3s ease-in-out;
	}
	.gallery:hover {
		background-position: 90% 20%;
	}
	.rsvp {
		background-position: center 100%;
		background-size: cover;
		transition: 1.1s ease-in-out;
	}
	.rsvp:hover {
		background-position: center 0%;
	}
	#rsvp .full {
		background-position: center 30%;
	}
	#rsvp .section p {
		width: 50%;
	}
	#home .section a {
		position: absolute;
		margin-top: -2.5em;
		vertical-align: top;
	}
	#home .section:hover::before {
		background-color: rgba(0,0,0,0);
		content: "";
		z-index: 1; 
		display:inline-block;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		position: absolute;
	}
	#home .section::before {
		background-color: rgba(0,0,0,0.5);
		content: "";
		z-index: 1; 
		display:inline-block;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		transition: 0.3s ease-in-out;
	}
	#home .section .preview-text {
		width: 100%;
		border-top: 1px #fff solid;
		border-bottom: 1px #fff solid;
		background-color: rgba(0,0,0,0.5);
		position: absolute;
		bottom: 10%;
		padding:2em 0;
		opacity: 0;
		filter: alpha(opacity=0);
		transition: 1s ease-in-out;
	}
	#home .section:hover .preview-text {
		opacity:1;
		filter: alpha(opacity=1);
	}
	#home .section .preview-text h3{
		text-align: center;
		line-height: 0%;
		opacity:0;
		filter: alpha(opacity=0);
		transition: opacity 3s ease-in-out, line-height 0.8s ease-in-out;
	}
	#home .section:hover .preview-text h3 {
		line-height: 120%;
		opacity:1;
		filter: alpha(opacity=1);
	}
	/* RSVP */
}
/* Desktop */
@media only screen and (min-width : 1360px) {
	#home .section {
	}
	.our-story {
	}
	#our-story #content {
		width: 40%;
	}
	#our-story.full {
		background-position: center center;
		background-size: 100% auto;
	}
	.ceremony-reception {
	}
	.gallery {
	}
	.rsvp {
	}
}
#gallery {
	position: relative;
}
#gallery-image {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 100%;
	z-index: 0;
	position: absolute;
	-webkit-box-shadow: inset 0px 0px 25px 19px rgba(0,0,0,0.75);
	-moz-box-shadow: inset 0px 0px 25px 19px rgba(0,0,0,0.75);
	box-shadow: inset 0px 0px 25px 19px rgba(0,0,0,0.75);
}
#gallery:hover {

}
.open-thumbnails {
	color: #fff;
	background: none;
	position: fixed;
	z-index: 2;
	bottom: 0;
	width: 100%;
}
.prev-image, .next-image {
	position: absolute;
	background: none;
	height: 100%;
	color: #fff;
    width: 30%;
    opacity: 0;
}
.prev-image {
	left: 0;
	text-align: left;
	padding-left: 1em;
}
.next-image {
	right: 0;
	text-align: right;
	padding-right: 1em;
}
.show {
	/*bottom: 130px;*/
}
.gallery-nav {
	bottom:0;
	height: 133px;
	display: none;
	width: 100%;
	background-color: rgba(0,0,0,0.5);
	opacity:100;
	position: fixed;
	filter: alpha(opacity=0);
	transition: opacity 3s ease-in-out, line-height 0.8s ease-in-out;
	overflow-y:auto;
}
.gallery-wrapper {
	position: relative;
	height: 133px;
	overflow-x:auto;
}
.gallery-nav-images {
	text-align: center;
	position: absolute;
	overflow-x:auto;
	height: auto;
	width: 4351px;
}
.gallery-nav ul li {
	padding:5px;
	width: 100px;
	height: 100px;
	border:1px #fff solid;
	overflow: hidden;
	display: inline-block;
}
.gallery-nav ul li:hover {
	cursor: pointer;
	background: #fff;
  -webkit-animation: 4.1s infinite ease;
  animation: 4.1s infinite ease;
}
.main-loader {
  margin: 40px;
  font-size: 15px;
  width: 15%;
  height: 15%;
  border-radius: 50%;
  position: relative;
  vertical-align: top;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
}
.loader {
  margin: 40px;
  font-size: 15px;
  width: 15%;
  height: 15%;
  border-radius: 50%;
  position: relative;
  vertical-align: top;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}

#wedding-gallery #content{
	line-height: 0;
	-moz-column-count: 5;
	-moz-column-gap: 10px;
	-webkit-column-count: 5;
	-webkit-column-gap: 10px;
	column-count: 5;
	column-gap: 10px;
}
#wedding-gallery #content img{
	height: auto !important;
}