/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/* ==========================================================================
Base styles:opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {color:#444;}
html {font-size:14px; line-height:1.715;}

/* Remove text-shadow in selection highlight:h5bp.com/i */
/* These selection rule sets have to be separate. */
/* Customize the background color to match your design. */
::-moz-selection {background:#b3d4fc; text-shadow:none;}
::selection {background:#b3d4fc; text-shadow:none;}

/* A better looking default horizontal rule */
hr {display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0;}

/* Remove the gap between images,videos,audio and canvas and the bottom of their containers:h5bp.com/i/440 */
audio,
canvas,
img,
video {vertical-align:middle;}

/* Remove default fieldset styles. */
fieldset {border:0; margin:0; padding:0;}

/* Allow only vertical resizing of textareas. */
textarea {resize:vertical;}

/* Headlines */
h1 {font-size:3.000em; line-height:1em;}
h2 {font-size:3.429em; line-height:1em; color:#eb827c; font-family:"proxima-nova-extra-condensed"; font-weight:normal;}
h3 {font-size:1.500em; line-height:1em; font-family:"proxima-nova-extra-condensed"; font-weight:normal;}
h4 {font-size:1.000em; line-height:1em;}
h5 {font-size:1.000em; line-height:1em;}
h6 {font-size:1.000em; line-height:1em;}

a {color:#736357; font-weight:600; text-decoration:none;}
a,
a:visited,
a:focus {color:#736357; font-weight:600; text-decoration:none; outline:0 none;}
a:hover,
a:active {color:#736357; text-decoration:none; outline:0 none;}

a {
	-webkit-transition:color 0.5s, background-color 0.5s, opacity 0.5s;
	-moz-transition:color 0.5s, background-color 0.5s, opacity 0.5s;
	-o-transition:color 0.5s, background-color 0.5s, opacity 0.5s;
	transition:color 0.5s, background-color 0.5s, opacity 0.5s;
}
.no-touch a:hover,
.touch a:active {
	-webkit-transition:color 0.3s, background-color 0.3s, opacity 0.3s;
	-moz-transition:color 0.3s, background-color 0.3s, opacity 0.3s;
	-o-transition:color 0.3s, background-color 0.3s, opacity 0.3s;
	transition:color 0.3s, background-color 0.3s, opacity 0.3s;
}

/* ==========================================================================
Browse Happy prompt
========================================================================== */
.browsehappy {margin:0.2em 0; background:#ccc; color:#000; padding:0.2em 0;}


/* ==========================================================================
Author's custom styles
========================================================================== */
.wrap {max-width:1280px; margin:0 auto; padding:0 20px;}

body {text-align:center; text-transform:uppercase; letter-spacing:2px; color:#736357; font-size:1em; font-weight:400; font-family:"Open Sans", sans-serif; background:#fff;}
body img {max-width:100%; height:auto;}
sup {font-size:0.625em;}
.amp {font-style:italic; font-family:Baskerville, Palatino, "Book Antiqua", serif;}

section {padding:4.286em 0;}
footer {padding:2.857em 0;}
section h2 {margin:0 0 40px;}

section .note {max-width:550px; margin:0 auto 2em; padding:15px 20px; text-transform:none; color:#fff; letter-spacing:0; background:#f0a69f; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

section .icon {display:block; width:94px; height:94px; margin:30px auto; border-radius:50%;}
section .icon.ring {margin-bottom:-47px; background-color:#eb827c;}
section .icon.ring img {margin-top:26px;}
section .icon.map {background-color:#f4f3ea;}
section .icon.map img {margin-top:23px;}
section .icon.registry {margin-bottom:0; background-color:#fafafa;}
section .icon.registry img {margin-top:18px;}

section.intro {position:relative; min-height:450px; padding:0; background:url('../img/josh-adaline-portrait.jpg') center top no-repeat; background-size:cover;}
section.intro .wrap {padding:0;}
section.intro .bottom {position:absolute; bottom:0; left:0; width:100%; padding:0 20px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
section.intro .j_a {display:block; max-width:280px; width:100%; height:auto; margin:0 auto; font-size:1em; }

section.celebrate {padding-top:5.714em;}
section.celebrate .secondary {}
section.celebrate .secondary span {display:block; padding:1em 0;}
section.celebrate .secondary span strong {color:#eb827c;}
section.celebrate h4 {margin-top:3.5em; margin-bottom:1em; line-height:1.4;}
section.celebrate ul {max-width:550px; margin:0 auto 1em auto; padding:0; list-style-type:none; text-align:left;}
section.celebrate ul li {border-bottom:1px solid #e2e0e0;}
section.celebrate ul li:last-child {border-bottom-width:0px;}
section.celebrate ul li a {display:block; padding:0 3.571em; line-height:3em; background:#f5f4f4 url('../img/play-icon.svg') 1.429em center no-repeat; background-size:18px 18px;}
.no-touch section.celebrate ul li a:hover,
.touch section.celebrate ul li a:active {background-color:rgba(235,130,124,0.15);}
section.celebrate ul li a:hover {}

section.venue {background:#fcfbf2;}

section.photos ul {width:280px; margin:0 auto; padding:0; list-style-type:none;}
section.photos ul li {display:block; float:left; width:140px; height:140px;}
section.photos ul li a {display:block; width:100%; height:100%; background:rgba(0,0,0,0.1);}

section.registry {border-top:1px solid #f1efee;}
section.registry ul {margin:0; padding:0; list-style-type:none;}
section.registry ul li {display:block; margin-bottom:5px;}
section.registry ul a {display:inline-block; padding:0 1em; line-height:2em; border-radius:1em;}
.no-touch section.registry ul a:hover,
.touch section.registry ul a:active {background-color:rgba(235,130,124,0.15);}
section.registry ul li:last-child {margin-bottom:0px;}

footer {color:#fff; color:rgba(255,255,255,0.6); background-color:#544a45;}
footer .wrap {max-width:550px;}
footer h3 {margin:0 0 30px; font-size:2.5em; color:#fff; color:rgba(255,255,255,0.8);}
footer p {text-transform:none; letter-spacing:0; font-size:0.9em;}
footer p:last-of-type {margin-bottom:0;}
footer a {color:#fff; color:rgba(255,255,255,0.7);}
.no-touch footer a:hover,
.touch footer a:active {color:#fff;}

/* ==========================================================================
Helper classes
========================================================================== */

/* Image replacement */
.ir {background-color:transparent; border:0; overflow:hidden; /* IE 6/7 fallback */ *text-indent:-9999px;}
.ir:before {content:""; display:block; width:0; height:150%;}

/* Hide from both screenreaders and browsers:h5bp.com/u */
.hidden {display:none !important; visibility:hidden;}

/* Hide only visually,but have it available for screenreaders:h5bp.com/v */
.visuallyhidden {border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px;}

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard:h5bp.com/p */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto;}

/* Hide visually and from screenreaders,but maintain layout */
.invisible {visibility:hidden;}

/*
* Clearfix:contain floats
*
* For modern browsers
* 	1.	The space content is one way to avoid an Opera bug when the
* 		`contenteditable` attribute is included anywhere else in the document.
* 		Otherwise it causes space to appear at the top and bottom of elements
* 		that receive the `clearfix` class.
* 	2.	The use of `table` rather than `block` is only necessary if using
* 		`:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {content:" "; /* 1 */ display:table; /* 2 */}
.clearfix:after {clear:both;}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {*zoom:1;}


/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */

/* Photos Section */
@media only screen and (min-width:440px) {section.photos ul {width:420px;}}
@media only screen and (min-width:600px) {section.photos ul {width:560px;}}
@media only screen and (min-width:740px) {section.photos ul {width:700px;}}
@media only screen and (min-width:900px) {section.photos ul {width:840px;}}

@media only screen and (min-width:569px) {
	html {font-size:16px;}
	section {padding:5em 0;}
/*	footer {padding:3.750em 0;}*/
	section h2 {margin:0 0 60px;}

	section .icon {width:114px; height:114px; margin:50px auto;}
	section .icon.ring {margin-top:30px; margin-bottom:-57px;}
	section .icon.ring img {width:61px; margin-top:31px;}
	section .icon.map img {width:63px; margin-top:28px;}
	section .icon.registry img {width:58px; margin-top:22px;}

	section.intro {min-height:550px;}
	section.intro .j_a {max-width:340px;}
	
	section.venue .right .gmap {height:400px;}
}
@media only screen and (min-width:799px) {
	html {font-size:20px;}

	section.intro {min-height:650px;}
	
	section.celebrate ul li a {background-size:25px 25px;}
}
@media only screen and (min-width:1024px) {
	section.celebrate p span {font-size:1.200em;}
	section.celebrate p span br {display:none;}

	section.venue {padding:0;}
	section.venue .wrap {padding:0;}
	section.venue .left,
	section.venue .right {width:50%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
	section.venue .left {float:left; padding:5em 3em;}
	section.venue .note {margin-bottom:0;}
	section.venue .right {float:right; padding:0;}
	section.venue .right .wrap {}
	section.venue .right .gmap {height:100%;}
}
@media only screen and (min-width:1499px) {
	html {font-size:22px;}
	
	section.intro {min-height:750px;}
}
@media only screen and (min-width:1999px) {
	html {font-size:24px;}
	
	section .icon {width:134px; height:134px; margin:50px auto;}
	section .icon.ring {margin-top:30px; margin-bottom:-67px;}
	section .icon.ring img {width:71px; margin-top:36px;}
	section .icon.map img {width:73px; margin-top:33px;}
	section .icon.registry img {width:68px; margin-top:27px;}
	
	section.intro {min-height:850px;}
	
	section.celebrate ul li a {background-size:28px 28px;}
}
@media only screen and (min-width:2299px) {
	section.intro {min-height:950px;}
	section.intro .j_a {max-width:500px;}
}
@media print,
(-o-min-device-pixel-ratio:5/4),
(-webkit-min-device-pixel-ratio:1.25),
(min-resolution:120dpi) {
	/* Style adjustments for high resolution devices */
	
}

/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection:h5bp.com/r
========================================================================== */
@media print {* {background:transparent !important; color:#000 !important; /* Black prints faster:h5bp.com/s */ box-shadow:none !important; text-shadow:none !important;}
	a,
	a:visited {text-decoration:underline;}
	a[href]:after {content:" (" attr(href) ")";}
	abbr[title]:after {content:" (" attr(title) ")";}

	/* Don't show links for images,or javascript/internal links */
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {content:"";}
	pre,
	blockquote {border:1px solid #999; page-break-inside:avoid;}
	thead {display:table-header-group; /* h5bp.com/t */}
	tr,
	img {page-break-inside:avoid;}
	img {max-width:100% !important;}
	@page {margin:0.5cm;}
	p,
	h2,
	h3 {orphans:3; widows:3;}
	h2,
	h3 {page-break-after:avoid;}
}