/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
	 Base styles: opinionated defaults
	 ========================================================================== */

html {
	color: #222;
	font-size: 1em;
	line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}

::selection {
	background: #b3d4fc;
	text-shadow: none;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
	vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
	resize: vertical;
}

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

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
	display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
	/* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	white-space: inherit;
	width: auto;
}

/*
 * Hide visually and from screen readers, 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: " ";
	display: table;
}

.clearfix::after {
	clear: both;
}





/* ==========================================================================
	 Author's custom styles
	 ========================================================================== */


/* Variables */

:root {

	/* Colours */
	--color-primary:    #ab2c2c;
	--color-secondary:  #009999;
	--color-white:      #ffffff;
	--color-black:      #000000;
	--color-black-opaq: rgba(0, 0, 0, 0.4);
	--color-gold:       #d4af37;
	--color-grey:       #d8d8d8;
	--color-grey-light: #f2f2f2;
	--color-grey-alt:   #888888;

	/* Font Sizing */
	--font-size-xs: 14px;
	--font-size-s:  16px;
	--font-size-m:  18px;
	--font-size-l:  22px;

	/* Spacing */
	--spacer:     48px;
	--spacer-wee: 8px;
	--spacer-xxs: 16px;
	--spacer-xs:  24px;
	--spacer-s:   32px;
	--spacer-m:   var(--spacer);
	--spacer-l:   64px;
	--spacer-xl:  96px;
	--spacer-xxl: 160px;

	/* Transition */
	--transition: all 0.3s ease;
}





/* Icon Font */
@font-face {
	font-family: 'social-icons';
	src: url('../_fonts/social-icons.woff?eapxaw') format('woff'),
			 url('../_fonts/social-icons.ttf?eapxaw') format('truetype'),
			 url('../_fonts/social-icons.svg?eapxaw#social-icons') format('svg');
	font-display: block;
	font-style: normal;
	font-weight: normal;
}

.icon {
	/* Use !important to prevent issues with browser extensions that change fonts */
	font-family: 'social-icons' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better font rendering */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-facebook:before {
	content: '\f09a';
}

.icon-instagram:before {
	content: '\e907';
}

.icon-twitter:before {
	content: '\f099';
}

.icon-youtube:before {
	content: '\ea9d';
}

.icon-vimeo:before {
	content: '\e900';
}





/* General */

/**
* More sensible default box-sizing:
* css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
*/
html {
	box-sizing: border-box;
}

*,
* *,
*:before,
*:after {
	box-sizing: inherit;
}

/**
 * Shared declarations for certain elements.
 *
 * Always declare margins in the same direction:
 * csswizardry.com/2012/06/single-direction-margin-declarations
 */
address,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
p,
pre,
dl,
ol,
ul,
figure,
table,
fieldset {
	margin-bottom: var(--spacer-xxs);
	margin-top: 0;
}

/**
 * Consistent indentation for lists.
 */
dd,
ol,
ul {
	margin-left: calc(var(--spacer-xxs) + 2px);
	padding: 0;
}

	ol > li,
	ul > li {
		margin-bottom: var(--spacer-wee);
	}

body {
	background-color: #fff;
	font-family: 'adobe-caslon-pro', 'Times New Roman', Times, serif;
	font-size: var(--font-size-s);
	font-style: normal;
	font-weight: 400;
	min-width: 320px;
}

@media only screen and (min-width: 768px) {

	body {
		font-size: var(--font-size-m);
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-style: italic;
	font-weight: 400;
	text-align: center;
}

	h2 { font-size: 2em; }
	h3 { font-size: 1.5em; }

a {
	color: var(--color-primary);
	text-decoration: underline;
	transition: var(--transition);
}

a:hover,
a:focus {
	color: var(--color-secondary);
}

img {
	max-width: 100%;
	height: auto;
}

footer.palazzo-footer {
	margin-bottom: var(--spacer-xl);
}





/* Layout */

/* Layout container */
.palazzo-layout-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
	max-width: 800px;
}





/* Content */

/* Header */
.palazzo-header__title {
	padding: var(--spacer-m) var(--spacer-xxs) 38px var(--spacer-xxs);
	text-align: center;
}

.palazzo-header__title > h1 {
	font-family: 'Julius Sans One', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif;
	font-size: 34px;
	font-style: normal;
	font-weight: 400;
	margin-bottom: 12px;
	text-transform: uppercase;
}

.palazzo-header__title > h1 > em {
	display: block;
	font-family: 'adobe-caslon-pro', 'Times New Roman', Times, serif;
	font-size: var(--font-size-l);
	font-weight: 400;
	margin-bottom: var(--spacer-wee);
	text-transform: none;
}

.palazzo-header__title > p {
	font-size: 20px;
}

.palazzo-header__title > p > a {
	font-size: var(--font-size-s);
	font-weight: 700;
	letter-spacing: 0.5px;
	text-decoration: none;
	text-transform: uppercase;
}

.palazzo-header__title > p:last-child {
	margin-bottom: 0;
}


/* Main */
.palazzo-content {
	padding: 0 var(--spacer-xs);
}

@media only screen and (min-width: 640px) {

	.palazzo-content {
		padding: 0 var(--spacer-s);
	}
}


/* Maps */
.palazzo-maps {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--spacer-xl);
}

.palazzo-maps > a {
	display: block;
	margin: 0 auto;
	max-width: 300px;
	width: 100%;
}

.palazzo-maps > a:first-child {
	margin-bottom: var(--spacer-s);
}

@media only screen and (min-width: 768px) {

	.palazzo-maps {
		flex-direction: row;
		justify-content: space-evenly;
	}

	.palazzo-maps > a,
	.palazzo-maps > a:first-child {
		margin: 0;
	}
}

.palazzo-file-type {
	background-color: var(--color-white);
	display: inline-block;
	font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 60%;
	letter-spacing: 0.5px;
	padding-left: 3px;
}

/* Opportunity still */
.palazzo-still {
	background: url('../_img/hero/Girolamo_Muziano-Salone_della_Caminata-Flora.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}





/* Components */

/* Carousels */

/* Slide background images */
.palazzo-carousel__slide {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
	width: 100%;
}

/* Media elements in main (carousels, video, still image) */
.palazzo-layout-container.is-media {
	max-width: 1200px;
}

.palazzo-carousel,
.palazzo-slideshow,
.palazzo-still {
	background-color: var(--color-grey-light);
	width: 100%;
}

.palazzo-carousel,
.palazzo-still {
	/* Taller aspect ratio for small screens
	 * 56.25% for a 16:9 aspect ratio */
	padding-bottom: 70%;
	position: relative;
}

.palazzo-carousel {
	margin-bottom: 14px;
}

.palazzo-carousel.hero,
.palazzo-slideshow {
	margin-bottom: 38px;
}

/* Pseudo element to prevent interaction with hero fading carousel,
 * we don't want it to stop. */
.palazzo-carousel.hero:after {
	bottom: 0;
	content: '';
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

/* Swipe note for small screens */
.palazzo-note--carousel-swipe {
	color: var(--color-grey-alt);
	font-size: var(--font-size-xs);
	font-style: italic;
	margin-bottom: var(--spacer-s);
	text-align: center;
}

@media only screen and (min-width: 960px) {

	.palazzo-carousel {
		margin-bottom: 66px;
	}

	.palazzo-note--carousel-swipe {
		display: none;
		visibility: hidden;
	}
}


/* Flickity Carousel Overrides */

/* Button hover transition */
.flickity-button {
	transition: var(--transition);
}

/* Flickity Viewport
 * Maintain aspect ratio (setGallerySize: false) */
.flickity-viewport {
	position: absolute;
	width: 100%;
}

/* Flickity prev/next buttons
 * Off to start (small screens) */
.flickity-prev-next-button,
.flickity-page-dots {
	display: none;
	visibility: hidden;
}

/* Flickity prev button */
.flickity-prev-next-button.previous {
	left: var(--spacer-xxs);
}

/* Flickity next button */
.flickity-prev-next-button.next {
	right: var(--spacer-xxs);
}

/* Flickity page dots */
.flickity-page-dots {
	bottom: -26px;
	font-size: 0;
	height: auto;
}

@media only screen and (min-width: 960px) {

	/* On (large screens) */
	.flickity-prev-next-button,
	.flickity-page-dots {
		display: block;
		visibility: visible;
	}
}


/* Modal */

.modal {
	align-items: center;
	display: flex;
	height: 100vh;
	justify-content: center;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	transition: var(--transition);
  visibility: hidden;
  width: 100vw;
}

.modal.open {
	bottom: 0;
	opacity: 1;
  transition-delay: 0s;
	visibility: visible;
}

.modal-cover {
	background: var(--color-black-opaq);
	height: 100%;
	position: absolute;
  width: 100%;
}

.modal-container {
	background: var(--color-white);
	border-radius: 6px;
	bottom: calc(var(--spacer-xl) * -1);
	box-shadow: 0 4px 8px 0 var(--color-black-opaq);
	margin: 0;
	max-width: 500px;
	padding: var(--spacer-s);
	padding-bottom: var(--spacer-xxs);
  position: relative;
  transition: var(--transition);
	width: 90%;
}

.modal.open .modal-container {
	bottom: 0;
}

.modal-close {
	appearance: none;
	background: none;
	border: 0 none;
	color: var(--color-black-opaq);
	cursor: pointer;
	display: block;
	font-size: 44px;
	height: 35px;
	line-height: 42px;
	outline: none;
	position: absolute;
  right: var(--spacer-xs);
	text-align: center;
  top: var(--spacer-xs);
	transition: var(--transition);
	width: 35px;
}

.modal-close:active,
.modal-close:focus,
.modal-close:hover {
	color: var(--color-black);
}


/* Form */

.palazzo-form-container {
	width: 100%;
}

.palazzo-form > fieldset {
	margin: 0;
}

.palazzo-form h3 {
	text-align: left;
}

.palazzo-form div {
	margin-bottom: var(--spacer-xxs);
}

.palazzo-form label {
	display: inline-block;
}

.palazzo-form input,
.palazzo-form textarea {
	border: solid 1px var(--color-grey);
	border-radius: 3px;
	color: #222;
	display: block;
	height: 38px;
	line-height: 1;
	padding: 6px var(--spacer-wee) 0;
	width: 100%;
}

.palazzo-form textarea {
	min-height: var(--spacer-xl);
	padding: var(--spacer-wee);
	line-height: 1.4;
}

.palazzo-form input:focus,
.palazzo-form textarea:focus {
	border-color: var(--color-gold);
	outline: none;
}

.palazzo-form-controls > button {
	margin: 0;
}

.palazzo-form-status {
	font-style: italic;
	opacity: 0;
	transition: var(--transition);
}

.palazzo-form-status.error {
	background-color: #ffe6e6;
	border-left: 3px solid #c00;
	opacity: 1;
	padding: var(--spacer-xxs) var(--spacer-xxs) 10px;
}

.palazzo-form-status.success {
	background-color: #f8ffec;
	border-left: 3px solid #76b900;
	opacity: 1;
	padding: var(--spacer-xxs) var(--spacer-xxs) 10px;
}



/* Buttons */

/* Big red button, CTA */
.palazzo-button {
	margin: 0 auto;
	background: linear-gradient(180deg, #d64b4b 0%, var(--color-primary) 100%);
	border: 0 none;
	box-shadow: 0 1px 2px 0 var(--color-black-opaq);
	border-radius: 3px;
	font-family: 'Helvetica Neue', Helvetica, sans-serif;
	font-size: var(--font-size-s);
	color: var(--color-white);
	letter-spacing: 1px;
	overflow: hidden;
	padding: var(--spacer-xxs) var(--spacer-s);
	position: relative;
	text-align: center;
	text-shadow: 0 -1px 0 var(--color-black-opaq);
	text-transform: uppercase;
	transition: var(--transition);
}

.palazzo-button--small {
	font-size: var(--font-size-xs);
	padding: 12px var(--spacer-xxs);
}

.palazzo-button:active,
.palazzo-button:focus,
.palazzo-button:hover,
a.palazzo-modal:active,
a.palazzo-modal:focus,
a.palazzo-modal:hover {
	cursor: pointer;
}

.palazzo-button:after {
	background-color: transparent;
	bottom: 0;
	content: '';
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: var(--transition);
	width: 100%;
}

.palazzo-button:active:after,
.palazzo-button:focus:after,
.palazzo-button:hover:after {
	background-color: rgba(255, 255, 255, 0.1);
}


/* Separator */
.palazzo-separator {
	height: 18px;
	margin: 0 auto var(--spacer-xl) auto;
	padding: 0;
	position: relative;
	width: 200px;
}

.palazzo-separator > hr {
	background-color: var(--color-grey-light);
	border: 0 none;
	display: block;
	height: 1px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	width: 100%;
}

.palazzo-separator > i {
	background-image: url('../_img/potent-cross.svg');
	background-color: var(--color-white);
	background-position: center center;
	background-repeat: no-repeat;
	border-left: var(--spacer-wee) solid var(--color-white);
	border-right: var(--spacer-wee) solid var(--color-white);
	display: block;
	height: 18px;
	left: 50%;
	position: absolute;
	margin-left: -17px;
	width: 34px;
}


/* Callout */
.palazzo-content--callout {
	margin: 0 auto var(--spacer-xl) auto;
	max-width: 420px;
	padding: 0;
	text-align: center;
}

.palazzo-content--callout > button {
	margin-top: var(--spacer-wee);
}

@media only screen and (min-width: 768px) {

	.palazzo-content--callout {
		max-width: 480px;
	}
}


/* Social Links */
.palazzo-social-links {
	font-size: 24px;
	margin: 0;
	padding: 0;
	width: auto;
	text-align: center;
}

.palazzo-social-links > li {
	display: inline-block;
	margin: var(--spacer-wee);
}

.palazzo-social-links > li a {
	color: var(--color-grey-alt);
	display: block;
	padding: var(--spacer-wee);
	text-decoration: none;
}

.palazzo-social-links > li a:active,
.palazzo-social-links > li a:focus,
.palazzo-social-links > li a:hover {
	color: var(--color-secondary);
}




/* Utilities */
.u-margin-bottom--s   { margin-bottom: var(--spacer-s);   }
.u-margin-bottom--m   { margin-bottom: var(--spacer-m);   }
.u-margin-bottom--l   { margin-bottom: var(--spacer-l);   }
.u-margin-bottom--xl  { margin-bottom: var(--spacer-xl);  }
.u-margin-bottom--xxl { margin-bottom: var(--spacer-xxl); }
.u-margin-top--s      { margin-top:    var(--spacer-s);   }
.u-margin-top--m      { margin-top:    var(--spacer-m);   }
.u-margin-top--l      { margin-top:    var(--spacer-l);   }
.u-margin-top--xl     { margin-top:    var(--spacer-xl);  }
.u-margin-top--xxl    { margin-top:    var(--spacer-xxl); }





/* ==========================================================================
	 Print styles.
	 Inlined to avoid the additional HTTP request:
	 https://www.phpied.com/delay-loading-your-print-css/
	 ========================================================================== */

@media print,
	(-webkit-min-device-pixel-ratio: 1.25),
	(min-resolution: 1.25dppx),
	(min-resolution: 120dpi) {
	/* Style adjustments for high resolution devices */
}

@media print {
	*,
	*::before,
	*::after {
		background: #fff !important;
		color: #000 !important;
		/* Black prints faster */
		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 that are fragment identifiers,
	 * or use the `javascript:` pseudo protocol
	 */
	a[href^="#"]::after,
	a[href^="javascript:"]::after {
		content: "";
	}

	pre {
		white-space: pre-wrap !important;
	}

	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	/*
	 * Printing Tables:
	 * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
	 */
	thead {
		display: table-header-group;
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}
}