/*

   ____  ___  ____    __   __  ___  _________ __
  /  _/ / _ \/ __ \  / /  / / / / |/ / ___/ // /
 _/ /  / // / /_/ / / /__/ /_/ /    / /__/ _  / 
/___/ /____/\____/ /____/\____/_/|_/\___/_//_/  
												

*/

/*
 * 1. Vars
 */

body{
	--color-lace: #869ab5;
	--color-suit: #2a3e5e;
	--color-baby: #c8dde6;
	--color-copper: #c7664c;
	--color-peach: #e8b5ab;
	--color-offwhite: #e2e5ef;
}


/*
 * 2. Typography
 */

@font-face {
  font-family: 'PlantinWeb';
  src: url('../fonts/Plantin.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Plantin.woff') format('woff'), /* Modern Browsers */
	   url('../fonts/Plantin.ttf')  format('truetype'); /* Safari, Android, iOS */       
  font-style:   normal;
  font-weight:  normal;
}

@font-face {
  font-family: 'PlantinWeb';
  src: url('../fonts/Plantin-Italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Plantin-Italic.woff') format('woff'), /* Modern Browsers */
	   url('../fonts/Plantin-Italic.ttf')  format('truetype'); /* Safari, Android, iOS */       
  font-style:   italic;
  font-weight:  normal;
}

@font-face {
  font-family: 'PlantinWeb';
  src: url('../fonts/Plantin-Light.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Plantin-Light.woff') format('woff'), /* Modern Browsers */
	   url('../fonts/Plantin-Light.ttf')  format('truetype'); /* Safari, Android, iOS */       
  font-style:   normal;
  font-weight:  300;
}

@font-face {
  font-family: 'PlantinWeb';
  src: url('../fonts/Plantin-Light-Italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Plantin-Light-Italic.woff') format('woff'), /* Modern Browsers */
	   url('../fonts/Plantin-Light-Italic.ttf')  format('truetype'); /* Safari, Android, iOS */       
  font-style:   italic;
  font-weight:  300;
}

@font-face {
  font-family: 'PlantinWeb';
  src: url('../fonts/Plantin-Semibold.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Plantin-Semibold.woff') format('woff'), /* Modern Browsers */
	   url('../fonts/Plantin-Semibold.ttf')  format('truetype'); /* Safari, Android, iOS */       
  font-style:   normal;
  font-weight:  600;
}

@font-face {
  font-family: 'PlantinWeb';
  src: url('../fonts/Plantin-Semibold-Italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Plantin-Semibold-Italic.woff') format('woff'), /* Modern Browsers */
	   url('../fonts/Plantin-Semibold-Italic.ttf')  format('truetype'); /* Safari, Android, iOS */       
  font-style:   italic;
  font-weight:  600;
}

h1{
	margin-bottom: 0;
	font-size: 1em;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: .15em;
	text-align: left;
}

h2{
	display: inline-block;
	margin-top: 0;
	font-size: 1.6666em;
	line-height: 1;
	font-weight: 600;
}

p{
	font-variant-numeric: oldstyle-nums;
	font-feature-settings: 'onum' on;
}

.amp{
	font-style: italic;
}

address{
	font-style: normal;
}

p a,
.link{
	color: var(--color-suit);
	text-decoration: none;
	border-bottom: 1px solid var(--color-copper);
}

p a:hover{
	background: var(--color-baby);
}

/*
 * 3. Universal and Wrappers
 */
 
body{
	position: relative;
	margin: 0;
	padding: 0;
	font-family: 'PlantinWeb', 'Plantin Std', 'Plantin', Times, 'Times New Roman', serif;
	font-size: 20px;
	line-height: 1.5;
	color: var(--color-suit);
	background-color: var(--color-suit);
}

header,
main,
footer{
	width: 100%;
}

.container{
	position: relative;
	box-sizing: border-box;
	width: 90%;
	max-width: 36em;
	margin: 0 auto;
}

header{
	padding: 60px 0 30px;
	color: var(--color-peach);
	font-variant-numeric: tabular-nums;
}

	nav{
		position: absolute;
		right: 0;
		bottom: 0;
		padding: .5em;
		font-size: .66em;
		letter-spacing: .08em;
		text-transform: uppercase;
	}
	
	nav a{
		display: inline-block;
		margin: 0 .5em;
		color: var(--color-peach);
		text-decoration: none;
		border-bottom: 1px solid rgba(255,255,255,0);
	}
	
	nav a:hover{
		border-bottom: 1px solid var(--color-peach);
	}
	
	nav a.heer{
		color: var(--color-copper);
		border-bottom: 1px solid var(--color-copper);
	}

main{
	position: relative;
	padding: 60px 0 90px;
	background: var(--color-offwhite);
	z-index: 99;
}

	main .container{
		padding-left: 30px;
		padding-right: 30px;
		border: 1px solid var(--color-peach);
		border-radius: 30px;
	}
	
		main .container > p,
		main .container section {
			padding-right: 30px;
		}
	
	main hr{
		position: relative;
		left: -30px;
		display: block;
		margin-top: 60px;
		border: none;
		outline: none;
		border-bottom: 1px solid var(--color-peach);
	}

	#title{
		padding-top: 60px;
		padding-bottom: 30px;
	}
	
	section{
		display: flex;
		font-size: 14px;
	}
	
		#title section{
			font-size: 16px;
		}
	
	section div{
		box-sizing: border-box;
		width: 50%;
		padding: 15px;
		text-align: center;
	}
	
	section div:first-child{
		border-right: 1px solid var(--color-baby);
	}
	
	section svg{
		stroke: var(--color-suit);
	}
	
	section a{
		text-decoration: none;
		color: var(--color-suit);
	}
	
	section a:hover svg{
		stroke: var(--color-copper);
	}

footer{
	box-sizing: border-box;
	min-height: 616px;
	margin-top: 0;
	padding: 60px 0;
	color: var(--color-lace);
	text-align: center;
	background: url(../img/footer-bow.jpg) top no-repeat;
	background-size: 1400px 616px;

}

@media(min-width:1400px){
	
	footer{
		background-size: 100% auto;
	}
	
}

	footer figure{
		position: absolute;
		left: 50%;
		margin-left: -40px;
		width: 80px;
	}
	
	footer figure svg{
		fill: var(--color-copper);
	}
	
	footer figure:hover svg{
		fill: transparent;
		stroke: var(--color-copper);
	}
	
	footer figure:hover svg path {
	  stroke-dasharray: 150;
	  animation: draw 5s infinite;
	  animation-timing-function: linear;
	}
	
	@keyframes draw {
	  from {
		stroke-dashoffset: 0;
	  }
	  to {
		stroke-dashoffset: 300;
	  }
	}

/*
 * 4. Form Elements
 */
 
form{
	display: none;
}

fieldset{
	margin-top: 1em;
	padding: 2em;
	border: 1px solid var(--color-peach);
	border-radius: 16px;
}

label,
input{
	display: block;
}

label{
	
}

label span{
	font-size: .65em;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: .2em;
	color: var(--color-lace);
}

input[type="radio"]{
	display: inline-block;
	font-size: 2em;
}

input[type="text"]{
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 1em;
	padding: 5px;
	font-family: inherit;
	font-size: 1.333em;
	color: inherit;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--color-lace);
}

input[type="text"]:focus{
	background: var(--color-baby);
	border-bottom: 1px solid var(--color-copper);
	outline: none;
}

input[type="submit"]{
	-webkit-appearance: none;
	margin: 2em 0;
	padding: 15px 30px;
	font-family: inherit;
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .2em;
	color: var(--color-copper);
	background: transparent;
	border: 1px solid var(--color-peach);
	border-radius: 16px;
}

input[type="submit"]:hover{
	color: var(--color-suit);
	background: var(--color-baby);
	border-color: var(--color-suit);
}

input[type="submit"]:active{
	background: var(--color-peach);
}

/*
 * 7. Gallery (cribbed from https://timnwells.medium.com/create-a-simple-responsive-image-gallery-with-html-and-css-fcb973f595ea)
 */

#gallery {
	display: none;
	line-height:0;
	-webkit-column-count:2; /* split it into 5 columns */
	-webkit-column-gap:5px; /* give it a 5px gap between columns */
	-moz-column-count:2;
	-moz-column-gap:5px;
	column-count:2;
	column-gap:5px;
}

#gallery img {
	width: 100% !important;
	height: auto !important;
	margin-bottom:5px; /* to match column gap */
}

/*
 * 6. Animation
 */
 
.sent{
/* 	animation: sent 1500ms ease-in; */
}

@keyframes sent{
	0%{
		transform: translateX(0);
	}
	
	15%{
		transform: translateX(-30px);
	}
	
	20%{
		transform: translateX(-30px);
	}
	
	50%{
		transform: translateX(200%);
	}
	
	100%{
		transform: translate(500%);
		display: none !important;
	}
}

/*
 * 7. Telephones
 */

@media screen and (max-width: 480px){
	
	header,
	main{
		
	}
	
	main{
		box-sizing: border-box;
		padding: 30px;
	}
	
	nav{
		position: relative;
		right: auto;
		left: 0;
		padding: 1.5em 0 .5em;
	}
	
	h1{
		font-size: 1em;
	}
	
	h2{
		font-size: .85em;
	}
	
	section{
		display: block;
	}
	
	section div{
		width: 100%;
	}
	
	section div:first-child{
		border-right: 0;
		border-bottom: 1px solid var(--color-baby);
	}
	
	#gallery{
		-webkit-column-count: 1;
		   -moz-column-count: 1;
		        column-count: 1;
	}
	
}

/*
 * 8. Nice Screens
 */
 
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
	
	footer{
		background-image: url(../img/footer-bow-2x.jpg);
	}
	
}