@font-face {
	font-family: 'CardoRegular';
	src: url("/fonts/Cardo-Regular.ttf") format("truetype");
	font-display: swap;
}

* {
	box-sizing: border-box;
	font-family: 'CardoRegular', 'Arial', serif;
}

body {
	line-height: 1.6;
	font-weight: 500;
}

p { margin: 0; }

a { text-decoration: none; color: black; }
a:visited { color: inherit; }

ul {
	margin: 0;
	padding: 0;
}

label {
	display: block;
	margin: 16px 0;
}

input[type=text],
input[type=tel],
input[type=email] {
	padding: .5em 1em;
	margin-bottom: 1em;
	border-radius: .5em;
	border: 1px solid #a8a8a8;
	transition: .3s;
}

input[type=text]:focus,
input[type=tel]:focus,
textarea:focus {
	border: 1px solid #555;
}

::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; }  /* Chrome <=56, Safari < 10 */
:-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */

*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */

select, textarea, input[type=submit] {
	padding: .5em 1em;
	border-radius: .5em;
	border: 1px solid #a8a8a8;
	transition: .3s;
}

select, textarea {
	margin-bottom: 1em;
}

	textarea {
		transition: none;
	}

input[type=submit] {
	background-color: #b5b5b5;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, gray 50%),
		linear-gradient(135deg, gray 50%, transparent 50%),
		linear-gradient(to right, #ccc, #ccc);
	background-position:
		calc(100% - 1.25em) calc(1.1em), /* ... (1.0em),  */
		calc(100% - 1em) calc(1.1em),
		calc(100% - 2.5em) .55em; /* ... .35em; */
	background-size:
		5px 5px,
		5px 5px,
		1px 1.5em;
	background-repeat: no-repeat;
}

select,
select option {
	color: #000000;
}

select:invalid,
select option[value=""] {
	color: #999999;
}

	button, input, optgroup, select, textarea {
		line-height: 1.6;
	}

/*Added for browser compatibility*/
[hidden] {
	display: none;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #999999;
	opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #999999;
}

::-ms-input-placeholder { /* Microsoft Edge */
	color: #999999;
}

/* Modular CSS */
.block { display: block }
.inline { display: inline }
.inline-block { display: inline-block; }
.flex { display: flex }
.hidden { display: none }
.flex-center { align-items: center; justify-content: center; }
.flex-center-v { align-items: center }
.flex-center-h { justify-content: center }
.flex-right { justify-content: right; justify-content: flex-end; }
.flex-left { justify-content: left; }
.flex-space-between { justify-content: space-between; }
.flex-dir-row { flex-direction: row; }
.flex-dir-col { flex-direction: column; }
.flex-dir-rreverse { flex-direction: row-reverse; }
.flex-dir-creverse { flex-direction: column-reverse; }
.flex-grow-1 { flex-grow: 1; }

.center { margin: 0 auto }
.text-center { text-align: center }
.text-right { text-align: right }
.text-left { text-align: left }

.no-list-style { list-style: none; }

.absolute { position: absolute }
.fixed { position: fixed }
.relative { position: relative }

.full-width { width: 100% }
.max-width-1600 { max-width: 100em }
.max-width-1440 { max-width: 90em }
.max-width-1280 { max-width: 80em }
.max-width-1024 { max-width: 64em }
.max-width-960 { max-width: 60em }
.max-width-768 { max-width: 48em }
.max-width-640 { max-width: 40em }
.max-width-480 { max-width: 30em }

.shadow-bottom {
	-webkit-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.4);
	box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.4);
}

.shadow-top {
	/*
	-webkit-box-shadow: 0px -2px 12px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px -2px 12px 0px rgba(0,0,0,0.4);
	box-shadow: 0px -2px 12px 0px rgba(0,0,0,0.4);
	*/
}

.bg-white { background-color: white }
.bg-grey { background-color: #d9d9d9 }
.bg-red { background-color: red }

.row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: auto;
}

.col {
	display: flex;
	flex-basis: 100%;
	flex: 1;
}

.small-margin { margin: 1em }
.small-margin-top { margin-top: 1em }
.small-margin-right { margin-right: 1em }
.small-margin-bottom { margin-bottom: 1em }
.medium-margin { margin: 2em }
.big-margin { margin: 4em }
.no-margin { margin: 0 }
.no-margin-top { margin-top: 0 }
.no-margin-bottom { margin-bottom: 0 }

.medium-padding { padding: 2em }

.font-normal { font-weight: normal; font-style: normal }
.font-white { color: white }
.bold { font-weight: bold }
.italic { font-style: italic }
.font-size-1125 { font-size: 1.125em }
.font-size-125 { font-size: 1.25em }
.font-size-1375 { font-size: 1.375em }
.font-size-15 { font-size: 1.5em }
.font-size-175 { font-size: 1.75em }
.font-size-2 { font-size: 2em }

.pointer { cursor: pointer; }

.round-image { border-radius: 50% }

.header-underline {
	background-image: linear-gradient(to right, #000, #000);
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 50% 2px;
	transition: background-size .5s ease;
}

.header-underline:hover { background-size: 100% 2px; }

.bubble-grey {
	background-color: #e1e1e1;
	border-radius: 1em;
	padding: 0 1em;
}

.bubble-white {
	background-color: white;
	border-radius: 1em;
	padding: 0 1em;
}

.nav {
	position: fixed;
	top: 0;
	width: 100%;
	height: 4em;
	padding: 0 4em;
	z-index: 10;
}

	.nav + .rellax {
		padding-top: 4em;
	}

.nav-logo { height: 3em; }

.nav-link { transition: .25s ease-in-out; }

	.nav-link:not(.bold) { opacity: .8; }
	
	.nav-link:hover { opacity: 1; }

.nav-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 6em;
	height: 4em;
	transition: .2s;
}

	.nav-link a:hover { background-color: #ededed; }

.section {
	padding: 2em 0;
}
/*
	.section:nth-child(2n+1) {
		background-color: white;
	}

	.section:nth-child(2n) {
		background-color: #d9d9d9;
	}
	
	.section.alt:nth-child(2n+1) {
		background-color: #d9d9d9;
	}

	.section.alt:nth-child(2n) {
		background-color: white;
	}
*/
	.section-btn { width: 5em !important; height: 5em !important; }
	.section-btn-left { left: 35%; }
	.section-btn-right { right: 35%; }

.footer {
	width: 100%;
	bottom: 0;
	padding: 1em 4em;
}

.footer-phrase {
	font-size: 1.5em;
}

.footer-links {}

.image-text {
	font-family: Gabriola;
	font-size: 4em;
	text-shadow: 2px 2px 4px #000000;
	position: absolute;
	top: 35%;
	left: 25%; /* 50% */
	transform: translate(-50%, -50%);
}

.social-media-list a + a { margin-left: 1em; }

.social-media-btn {
	width: 2em;
	vertical-align: bottom;
	transition: all .25s;
	filter: grayscale(1);
}

	.social-media-btn:hover {
		filter: grayscale(0);
	}

.contact-me {
	border: 2px solid black;
	padding: .25em 1em;
	transition: all .15s;
}

	.contact-me:hover {
		background-color: #d0d0d0;
	}

.bg {
	width: 100%;
    height: 640px;
    background-size: cover;
	background-position: center;
	margin-top: 4em;
}

.bg-first {
	margin-top: 4em;
}

.bg-home {
	background-image: url(/img/Home.jpg);
	background-position: 0% 10%;
	z-index: -1;
}

.home-btn {
	width: 10em !important;
	height: 10em !important;
}

.home-badge-left { left: 10%; }
.home-badge-right { right: 10%; }

.bg-about {
	background-image: url(/img/About.jpg);
	background-position: top;
}

.bg-portfolio {
	background-image: url(/img/Portfolio.jpg);
}

.bg-contact {
	background-image: url(/img/Contact.jpg);
	background-position: 0% 15%;
}

.icon-svg {
	width: 1em;
	height: auto;
	margin-right: .5em;
}

.carousel-cell {
	margin: 0 4em;
	width: 1440px !important;
}

/* Alter element styles on "WeddingWire" button */
#wp-rated-reviews {
	font-size: 1em !important;
	top: 1em !important;
}

/* Adapted from https://codepen.io/erikterwan/pen/EVzeRP */
.mobile-nav {
	display: none;
	position: fixed;
	top: 1.3125em;
	left: 1.3125em;

	z-index: 11;

	-webkit-user-select: none;
	user-select: none;
}

.mobile-nav input {
	display: block;
	width: 40px;
	height: 32px;
	position: absolute;
	top: -7px;
	left: -5px;

	cursor: pointer;

	opacity: 0; /* hide this */
	z-index: 2; /* and place it over the hamburger */

	-webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
.mobile-nav span {
	display: block;
	width: 33px;
	height: 4px;
	margin-bottom: 5px;
	position: relative;

	background: #cdcdcd;
	border-radius: 3px;

	z-index: 1;

	transform-origin: 4px 0px;
	
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				opacity 0.55s ease;
}

.mobile-nav span:first-child {
	transform-origin: 0% 0%;
}

.mobile-nav span:nth-last-child(2) {
	transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
.mobile-nav input:checked ~ span {
	opacity: 1;
	transform: rotate(45deg) translate(-2px, -1px);
	background: #232323;
}

.mobile-nav input:checked ~ span:nth-last-child(3) {
	opacity: 0;
	transform: rotate(0deg) scale(0.2, 0.2);
}

.mobile-nav input:checked ~ span:nth-last-child(2) {
	transform: rotate(-45deg) translate(0, -1px);
}

.mobile-menu {
	position: absolute;
	width: 300px;
	margin: -100px 0 0 -50px;
	padding: 0;
	padding-top: 125px;
	
	/* HACK have the bar cover full height, kind of */
	height: 110vh;

	background: #ededed;
	list-style-type: none;
	-webkit-font-smoothing: antialiased;
	/* to stop flickering of text in safari */

	transform-origin: 0% 0%;
	transform: translate(-100%, 0);

	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

.mobile-menu li {
	padding: .5em 2em;
	font-size: 1.5em;
	transition: .35s;
}

.mobile-menu li:hover {
	background-color: white;
}

/*
 * And let's slide it in from the left
 */
.mobile-nav input:checked ~ ul {
	transform: none;
}

/* Media Queries (2k / 4k) */
@media only screen and (min-width: 1921px) {
	.bg {
		height: 75vh;
	}
}

/**************************/
/* Media Queries (Mobile) */
/**************************/

@media only screen and (max-width: 1280px) and (min-width: 1025px) {
	.home-badge-left { left: 1em; }
	.home-badge-right { right: 1em; }
}

@media only screen and (max-width: 1024px) {
	/* Disable Rellax on mobile screens */
	.rellax { transform: translate3d(0,0,0) !important; }
	
	.hide-mobile { display: none }
	
	.shadow-top { box-shadow: none !important; }
	
	.medium-margin { margin: 1em }
	.medium-padding { padding: 1em }
	
	.mobile-dir-col {
		flex-direction: column;
	}
	
	.image-text {
		left: 50%;
		font-size: 3em;
	}
	
	.mobile-text {
		text-align: center;
		margin: 0 1em;
	}
	
	.bg {
		height: 500px;
	}
	
	.parellax-bg {
		height: 100%;
	}
	
	.nav { justify-content: center; }
	
	.mobile-nav { display: block; }
	
	.footer {
		padding: 1em;
	}
	
	.footer-links {
		padding-top: 1em;
	}
	
	/* About - 1024px */
	.about-pic {
		padding-bottom: 1em;
	}
	
	/* Portfolio - 1024px */
	.portfolio-left-col {
		padding-bottom: 1em;
	}
	
	.carousel-cell {
		max-width: 90% !important;
	}
	
	.credits {
		justify-content: center;
	}
	
	/* Contact - 1024px */
	.bg-contact { background-position: 60% 0% !important; }
	.bubble-grey:first-child { margin-bottom: 1em; }
	.bubble-white:first-child { margin-bottom: 1em; }
	
	.section-btn-left { left: 25%; }
	.section-btn-right { right: 25%; }
	
	.home-btn { width: 6em !important; height: 6em !important; }
	.home-badge-left { left: 1em; }
	.home-badge-right { right: 1em; }
}

@media only screen and (max-width: 768px) {
	.home-badge { position: initial; }
	.weddingwire-badge { margin-top: 1.5em; }
}

@media only screen and (max-width: 600px) {
	.section-btn-left { left: 10%; }
	.section-btn-right { right: 10%; }
	.mobile-form { margin: 0 1em; }
	
	.footer-links { flex-direction: column !important; }
	.footer-links > div { padding-bottom: 2em; }
	.contact-me { padding: 1em 2em; }
	
	.image-text { display: none; }
	
	/* Home - 600px */
	.bg-home { background-position: 65% 0% !important; }
	
	.mobile-col { flex-direction: column !important; }
}

@media only screen and (max-height: 768px) {
	.rellax { transform: translate3d(0,0,0) !important; }
}