/*
Theme Name: Getting Hitched
Author: Kamilah Carter
Description: Theme for Kamilah and Adam's Wedding Webiste
Version: 0.0.1
Tags: simple
*/

/* ---------- CSS Reset ---------- */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
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;
}
/* Additional Resets */
div {
	overflow: hidden;
}
button {
	border: 0;
}
img {
	vertical-align: bottom;
}
a {
	text-decoration: none;
}


/* ---------- Colours ---------- */
/*
Red					#ec3d53
Pink				#ef6d89
Peach				#f49c9a
Blush				#ffddd8
Light Grey			#d6dbdf
Very Light Grey 	#f3f4f6
Black Blue			#303c4a
Dark Grey			#59687d
Dark Blue			#3c567b
Teal				#4fa0a1
Olive Green			#aba44a
Gold				#f8a642
*/


/* ---------- Typoraphy ---------- */
body, button {
	font-size: 90%;
	font-family: 'Raleway', sans-serif;
	letter-spacing: +.6;
}
@media (min-width: 480px) {
	body, button {
		font-size: 100%;
	}
}
body {
	line-height: 1.6;
	color: #303c4a;
}
button {
	line-height: 1;
	color: #fff;
	font-weight: 600;
}

p, li, h1, h2, h3, h4, h5, h6 {
	padding-bottom: 10px;
}
.col:last-child li:last-child, .col:last-child h1:last-child, .col:last-child h2:last-child, .col:last-child h3:last-child, .col:last-child h4:last-child, .col:last-child h5:last-child, .col:last-child h6:last-child {
	padding-bottom: 0;
}
p {
	font-size: 1em;
}
h1, h2 {
	font-size: 3em;
}
h3 {
	font-size: 2.25em;
}
h4 {
	font-size: 1.5em;
}
h5 {
	font-size: 1.375em;
}
h6 {
	font-size: 1.125em;;
}
h1, h2 {
	font-family: "Quintessa";
}
h3, h4, h5, h6 {
	font-family: 'Raleway', sans-serif;
	font-weight: 600;
}
h1, h2 {
}
a {
	color: #ec3d53;
}
a:hover, body a:hover {
	color: #f49c9a;
}
.caption {
	font-weight: 600;
	margin-top: 15px;
	padding-bottom: 0;
	line-height: 1.2;
	color: #576279;
}
.text-center, .text-center p, .text-center h1, .text-center h2, .text-center h3, .text-center h4, .text-center h5, .text-center h6{
	text-align: center;
}

/* --- Dark Background --- */
.bg-dark body, .bg-dark p, .bg-dark li, .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6, .bg-dark a{
	color: #fff;
}
.bg-dark a:hover {
	color: #ffddd8;
}


/* ---------- Structure ---------- */
/* --- Container --- */
.container {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	align-content: stretch;
}
.logged-in.container {
	min-height: calc(100vh - 32px);
}

/* --- Sections --- */
.container, .wrap-outer {
	width: 100%;
}
.wrap-inner {
	width: calc(100% - 40px);
	max-width: 1080px;
	margin: 30px auto 0;
}
.continued .wrap-inner {
	margin-bottom: 0;
}
.continued + .wrap-outer .wrap-inner {
	margin-top: 0;
}
.padding-small {
	margin-top: 20px;
	margin-bottom: -10px;
}
.padding-large {
	margin-top: 30px;
	margin-bottom: 5px;
}

@media (min-width: 480px) {
	.padding-large {
		margin-top: 40px;
		margin-bottom: 10px;
	}
}

/* --- Columns --- */
.col {
	margin: 0 20px 30px;
	float: left;
	width: calc(100% - 40px);
	text-align: center;
	overflow: visible;
}

@media (min-width: 480px) {
	.break-downsize, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6 {
		width: calc(50% - 40px);
		text-align: unset;
	}
}

.break-early {
	width: calc(100% - 40px);
	text-align: center;
}

@media (min-width: 768px) {
	.col{
		text-align: unset;
	}
	.col-1 {
		width: calc(8.33% - 40px);
	}
	.col-2 {
		width: calc((8.33% * 2) - 40px);
	}
	.col-3 {
		width: calc(25% - 40px);
	}
	.col-4 {
		width: calc((8.33% * 4) - 40px);
	}
	.col-5 {
		width: calc((8.33% * 5) - 40px);
	}
	.col-6 {
		width: calc(50% - 40px);
	}
	.col-7 {
		width: calc((8.33% * 7) - 40px);
	}
	.col-8 {
		width: calc((8.33% * 8) - 40px);
	}
	.col-9 {
		width: calc(75% - 40px);
	}
	.col-10 {
		width: calc((8.33% * 10) - 40px);
	}
	.col-11 {
		width: calc((8.33% * 11) - 40px);
	}
	.col-12 {
		width: calc(100% - 40px);
	}
}

.col.col-center {
	float: unset;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 768px) {
	.col-1.col-center {
		max-width: 50px;
	}
	.col-2.col-center {
		max-width: 140px;
	}
	.col-3.col-center {
		max-width: 230px;
	}
	.col-4.col-center {
		max-width: 320px;
	}
	.col-5.col-center {
		max-width: 410px;
	}
	.col-6.col-center {
		max-width: 500px;
	}
	.col-7.col-center {
		max-width: 590px;
	}
	.col-8.col-center {
		max-width: 680px;
	}
	.col-9.col-center {
		max-width: 770px;
	}
	.col-10.col-center {
		max-width: 860px;
	}
	.col-11.col-center {
		max-width: 950px;
	}
}

.show-overflow {
	overflow: visible;
}

/* --- Backgrounds --- */
.bg-dark {
	background-color: #303c4a;
	background-size: cover;
	background-position: center center;
}
.bg-vlgrey {
	background-color: #f3f4f6;
}
.bg-dblue {
	background-image: url(images/bg-dblue.jpg);
}
.bg-blue {
	background-image: url(images/bg-blue.jpg);
}
.bg-teal {
	background-image: url(images/bg-teal.jpg);
}
.bg-olive {
	background-image: url(images/bg-olive.jpg);
}
.bg-gold {
	background-image: url(images/bg-gold.jpg);
}
.bg-peach {
	background-image: url(images/bg-peach.jpg);
}
.bg-blush {
	background-image: url(images/bg-blush.jpg);
}
.bg-pink {
	background-image: url(images/bg-pink.jpg);
}
.bg-red {
	background-image: url(images/bg-red.jpg);
}


/* ---------- Header ---------- */
/* --- Logo --- */
.logo, .sitetitle {
	display: inline-block;
	vertical-align: bottom;
}

.logo img {
	height: 50px;
	width: auto;
	max-width: 100%;
}

@media (min-width: 480px)  {
	.logo img {
		height: 70px;
	}
}

/* --- Site Title --- */
.sitetitle {
	padding-bottom: 0;
	margin-bottom: -20px;
	margin-top: 5px;
}
.sitetitle a {
	color: #f8a642;
}
@media (min-width: 768px)  {
	.sitetitle {
		margin-bottom: -10px;
	}
}
/* --- Header Menu --- */
.logo + .header-menu {
	margin-top: 22px;
}
.sitetitle + .header-menu {
	margin-top: 20px;
}
.header-menu .menu-item {
	display: inline-block;
	font-size: 1em;
	font-weight: 500;
	padding-bottom: none;
}
.header-menu current_page_item a {
	color: #000;
}

@media (max-width: 768px) {
	.header-menu .menu-item {
		padding-left: 9px;
		padding-right: 9px;
	}
	.logo img {
		height: 50px;
	}
	#menu .col {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}

}

@media (min-width: 768px)  {
	.header-menu {
		float: right;
		display: inline-block;
	}
	.header-menu .menu-item {
		font-size: 1.1875em;
    	font-weight: 400;
		padding-left: 30px;
	}
	.header-menu .menu-item {
		padding-left: 18px;
	}
	.header-menu .menu-item:first-child {
		padding-left: 0;
	}
}
/* --- Title --- */
#title h1:last-child, #title h2:last-child {
	margin-bottom: -10px;
}

/* ---------- Elements ---------- */
/* --- Mixins --- */
.hide {
	display: none;
}
.right {
	float: right;
}

/* --- Media --- */

/* Image */
img {
	max-width: 100%;
}
/* Video and Background Images */
.media-container {
	position: relative;
	height: 0;
}
.media-container.v16x9 {
	padding-bottom: 56.25%;
}
.media-container.v4x3 {
	padding-bottom: 75%;
}

.media-container.vblog {
	padding-bottom: calc(75% - 10px);
}

/* Default aspect ratio is .65 for a 3 column layout */
/* col=n=2 calc((300% + 120px - (40 * n))/n) */

.col .media-container.vdefault {
	padding-bottom: 100%;										/* col-3 equiv for square images at small sizes */
}

@media (min-width: 480px) {
	.col-1 .media-container.vdefault, .col-2 .media-container.vdefault, .col-3 .media-container.vdefault, .col-4 .media-container.vdefault, .col-5 .media-container.vdefault, .col-6 .media-container.vdefault {
		padding-bottom: calc((75% - 50px) / 2);					/* col-8 equiv */
	}
}

.break-early .media-container.vdefault, .breake-downsize .media-container.vdefault  {
	padding-bottom: calc(75% - 10px);							/* col-4 equiv */
}

@media (min-width: 768px) {
	.col-1 .media-container.vdefault {
		padding-bottom: calc(300% + 80px);
	}
	.col-2 .media-container.vdefault {
		padding-bottom: calc(150% + 20px);						/* (300% + 40px) / 2 */
	}
	.col-3 .media-container.vdefault {
		padding-bottom: 100%;									/* (300%) / 3 */
	}
	.col-4 .media-container.vdefault {
		padding-bottom: calc(75% - 10px);						/* (300% - 40px) / 4 */
	}
	.col-5 .media-container.vdefault {
		padding-bottom: calc(60% - 16px);						/* (300% - 80px) / 5 */
	}
	.col-6 .media-container.vdefault {
		padding-bottom: calc(50% - 20px);						/* (300% - 120px) / 6 */
	}
	.col-7 .media-container.vdefault {
		padding-bottom: calc((300% - 160px) / 7);
	}
	.col-8 .media-container.vdefault {
		padding-bottom: calc((75% - 50px) / 2);					/* (300% - 200px) / 8) */
	}
	.col-9 .media-container.vdefault {
		padding-bottom: calc((100% - 80px) / 3);				/* (300% - 240px) / 9 */
	}
	.col-10 .media-container.vdefault {
		padding-bottom: calc(30% - 28px);						/* (300% - 280px) / 10 */
	}
	.col-11 .media-container.vdefault {
		padding-bottom: calc((300% - 320px) / 11);
	}
}

/* Default aspect ratio is .65 for a 3 column layout */
/* col=n=2 calc((300% + 120px - (40 * n))/n - 20px)  (the 20px is to account for border width)*/
.col .media-container.vdefault.media-border {
	padding-bottom: calc(100% - 20px);							/* col-3 equiv for square images at small sizes */
}

@media (min-width: 480px) {
	.col-7 .media-container.vdefault.media-border, .col-8 .media-container.vdefault.media-border, .col-9 .media-container.vdefault.media-border, .col-10 .media-container.vdefault.media-border, .col-11 .media-container.vdefault.media-border, .col-12 .media-container.vdefault.media-border {
		padding-bottom: calc((75% - 50px) / 2 - 20px);			/* col-8 equiv */
	}
}

.break-early .media-container.vdefault.media-border, .break-downsize .media-container.vdefault.media-border{
	padding-bottom: calc(75% - 10px - 20px);					/* col-4 equiv */
}

@media (min-width: 768px) {
	.col-1 .media-container.vdefault.media-border {
		padding-bottom: calc(300% + 80px - 20px);
	}
	.col-2 .media-container.vdefault.media-border {
		padding-bottom: calc(150% + 20px - 20px);				/* (300% + 40px) / 2 */
	}
	.col-3 .media-container.vdefault.media-border {
		padding-bottom: calc(100% - 20px);						/* (300%) / 3 */
	}
	.col-4 .media-container.vdefault.media-border {
		padding-bottom: calc(75% - 10px - 20px);				/* (300% - 40px) / 4 */
	}
	.col-5 .media-container.vdefault.media-border {
		padding-bottom: calc(60% - 16px - 20px);				/* (300% - 80px) / 5 */
	}
	.col-6 .media-container.vdefault.media-border {
		padding-bottom: calc(50% - 20px - 20px);				/* (300% - 120px) / 6 */
	}
	.col-7 .media-container.vdefault.media-border {
		padding-bottom: calc((300% - 160px) / 7 - 20px);
	}
	.col-8 .media-container.vdefault.media-border {
		padding-bottom: calc((75% - 50px) / 2 - 20px);			/* (300% - 200px) / 8) */
	}
	.col-9 .media-container.vdefault.media-border {
		padding-bottom: calc((100% - 80px) / 3 - 20px);			/* (300% - 240px) / 9 */
	}
	.col-10 .media-container.vdefault.media-border {
		padding-bottom: calc(30% - 28px - 20px);				/* (300% - 280px) / 10 */
	}
	.col-11 .media-container.vdefault.media-border {
		padding-bottom: calc((300% - 320px) / 11 - 20px);
	}
}

.bg-media {
	position: absolute;
	top: 0;
	left: 0;
	overflow: visible;
}
.video {
	width: 100%;
	height: 100%;
}
.bg-img {
	background-size: cover;
	background-position: center center;
}
/* Border */
.media-border {
	box-sizing: border-box;
	border: 10px solid #303c4a;
	border-color: #576279 #303c4a;
}
.bg-dark .media-border, .bg-vlgrey .media-border {
	border-color: #fff #d6dbdf;
}
a .media-border:hover {
	border-color: #dfdbdf;
}

/* Quotation */
.quote-container {
	position: relative;
	margin-bottom: 5px;
}

.col-8 .quote-container, .col-9 .quote-container, .col-10 .quote-container, .col-11 .quote-container, .col-12 .quote-container {
	font-size: 1.125em;
}

.quote:before, .quote:after {
	font-size: 6em;
	line-height: 1;
	height: 40px;
	width: 40px;
	position: absolute;
	top: 0px;

}

.quote:before {
	content: open-quote;
	left: 0;
}
.quote:after {
	content: close-quote;
	right: 0;
}
.quote {
	padding-top: 15px;
	padding-bottom: 10px;
	padding-left: 60px;
	padding-right: 60px;
}
.quotee {
	font-weight: 600;
}

@media (min-width: 480px) {
	.quote:before {
		left: calc((100% + 40px) / 10 - 20px);
	}
	.quote:after {
		right: calc((100% + 40px) / 10 - 20px);
	}
	.quote {
		padding-left: calc((100% + 40px) / 10 + 40px);
		padding-right: calc((100% + 40px) / 10 + 40px);
	}
	
}

/* --- Buttons --- */
button {
	background-color: #3c567b;
	padding: 10px 30px;
	cursor: pointer;
	margin-top: 15px;
	width: 100%;
}
.btn-green {
	background-color: #4fa0a1;
}
.btn-red {
	background-color: #e21f23;
}
button:hover {
	background-color: #f49c9a;
}
.col-3 button {
	width: 100%;
}

@media (min-width: 480px) {
	button {
		width: unset;
		max-width: 100%;
	}
}


/* ---------- Body ---------- */
#body {
	flex-grow: 1;
}

/* ---------- Footer ---------- */

#footer li:last-child {
	padding-bottom: 0;
}

/* ---------- Blog Posts (Stories) ---------- */
.post {
	margin-bottom: 10px;
}
.post:last-child {
	padding-bottom: 0;
}
.date {
	font-weight: 500;
	color: #f49c9a;
}

/* --- Thumbnails --- */
.attachment-post-thumbnail {
	max-width: 100%;
	height: auto;
}

.thumbnail-placeholder {
	width: 100%;
	height: 400px;
	background-color: #f49c9a;
}

/* ---------- Footer ---------- */
.footer-title, .footer-widget .menu-item {
	font-size: 1.125em;
	font-weight: 600;
}

/* ---------- Embeded Maps ---------- */
.map {
	height: 100%;
}
.map-container {
	width: 100%;
}
.map-container div {
	overflow: initial;
}
.map-content h4, .map-content p {
	padding-bottom: 5px;
}
.map-content p:last-child {
	padding-bottom: 0;
}

/* ---------- RSVP Plugin ---------- */
.rsvpParagraph {
	font-weight: 600;
	padding-top: 0;
	padding-bottom: 0;
}
#rsvpForm > p, .rsvpCustomQuestions > div > p:first-child {
	margin-top: 15px;
	margin-bottom: 5px;
}
#rsvpPlugin h3 {
	font-size: 1.5em;
	color: #f49c9a;
	padding-top: 40px;
	padding-bottom: 0;
}

.rsvpFormField {
	display: block;
	margin-bottom: 0;
	margin-top: 0;
}

.rsvpCheckboxCustomQ {
	float: unset;
	padding-top: 0;
}

#rsvpPlugin label {
	font-weight: 400;
}
#rsvpPlugin p {
	padding-bottom: 0;
}
textarea {
	max-width: 100%;
}
label.error {
	color: #ef6d89;
	font-weight: 500;
}
input.error, textarea.error {
	border: 2px solid #ef6d89;
}

.rsvpBorderTop, .rsvpAdditionalAttendee {
  	border-top: 4px solid #ffddd8;
	margin-top: 30px;
	padding-top: 30px;
	
}