/* =Global
============================================================================== */

	/* Base
	-------------------------------------------------------------------------- */
		
		body {
			margin: 0;
			padding: 0;
			color: #333;
			font-size: 16px;
			line-height: 24px;
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
			background: #F5F5F5;
		}

		/* typography */

		p {
			margin: 0 0 20px 0;
		}

	/* Header
	-------------------------------------------------------------------------- */

		#header {
			margin: 20px;
			padding: 5%;
			background: #243b30;
			background-size: cover;
			border-radius: 40px 5px 40px 5px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		#header img {
			min-width: 100px;
			max-width: 10vw;
			height: auto;
		}

	/* Content
	-------------------------------------------------------------------------- */
		
		#main {
			max-width: 800px;
			margin: 5% auto;
			padding: 0 5%;
		}

		/* image section */

		.img-callout {
			margin: 40px -5% 60px -5%;
			display: flex;
			align-items: stretch;
		}
		
		.img-callout figure,
		.img-callout article {
			width: 50%;
			position: relative;
		}
		
		.img-callout figure {
			margin: 0;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: rgba(0,0,0,0.1) 0 2px 2px,rgba(0,0,0,0.1) 0 4px 4px,rgba(0,0,0,0.1) 0 8px 8px,rgba(0,0,0,0.1) 0 16px 16px,rgba(0,0,0,0.1) 0 32px 32px,rgba(0,0,0,0.1) 0 64px 64px;
			overflow: hidden;
			z-index: 2;
		}

		.img-callout:nth-child(even) figure {
			border-radius: 40px 5px 40px 5px;
		}

		.img-callout:nth-child(odd) figure {
			border-radius: 5px 40px 5px 40px;
		}
		
		.img-callout figure img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		
		.img-callout article {
			margin: 5% 0;
			padding: 5%;
			background-color: white;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		
		.img-callout:nth-child(odd) {
			flex-direction: row;
		}
		
		.img-callout:nth-child(even) {
			flex-direction: row-reverse;
		}		

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

		#footer {
			margin: 20px;
			padding: 5%;
			color: #8d9f97;
			background: linear-gradient(#243b30, #2e5648);
			border-radius: 40px 5px 40px 5px;
			position: relative;
		}

		#footer section {
			max-width: 800px;
			margin: 0 auto;
		}