@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700');




html, body {
	min-height: 100%;
  background:gold;
}

html {
	font-size: relative;
	line-height:1.3;
}

body { 
	border-top: 3em solid #18121e; 
	font-family: 'Open Sans Condensed', sans-serif;
}

.main,
.preamble { 
	margin:auto;
  font-family: 'Open Sans Condensed', sans-serif;
  color: #18121e;
}

.main,
.preamble { 
	width: 90%;
}

.preamble { margin-bottom: 2em; }

.main p {
	color: #18121e;
	line-height: 2;
}
 
.preamble h3 {
  color:#18121e;
  font-family: 'Open Sans Condensed', sans-serif;
  text-align:right;
}

.preamble p {
    color:#18121e;
    line-height: 1.5;
    font-family: 'Open Sans Condensed', sans-serif;
  text-align:center;
  
}

.summary {
	margin: auto;
	max-width: 45em;
	font-size: 1em;
	text-align: center;
	position: relative;
  color: #18121e;
	margin-bottom: 4em;
  font-family: 'Open Sans Condensed', sans-serif;
}


.summary a, footer a {
	max-width: 45em;
	color: #18121e;
  font-family: 'Open Sans Condensed', sans-serif;
}

.summary a {
	display: inline-block;
	width: 5em;
  max-width: 45em;
	margin: 0 auto;
	text-align: center;
  font-family: 'Open Sans Condensed', sans-serif;
}

.summary a:first-child { 
	margin-top:.5em;
  max-width: 45em;
  ont-family: 'Open Sans Condensed', sans-serif;

  
}

.summary p + p {
  max-width: 45em;
}
.summary a:hover{
	background: #18121e;
	color: white;
}

footer a:hover {
  
	background: #de1919 
	color: #fff;
}

header, h3 {
	font-family: 'Open Sans Condensed', sans-serif;
}

header { 
	text-align: center; 
	padding: 0 1em;
	font-size: 2em;
  color:#233237;
  background:white;

}

h1 {
	font-size: calc(2.5em + 2vw); 
	line-height:1;
	margin-bottom:0;
  
}

h2 {
  color: #18121e;
	margin-bottom: 1em;
}

h3 {
	font-size: calc(1.5em + 1vw); 
	letter-spacing:.05em;
}

.main h3, .preamble h3 {
	border-bottom: .2em solid #18121e;
	padding-bottom: .1em;
	margin-bottom: .55em;
}

.wrapper h3 {
	margin-bottom:0;
}

aside { 
	
	border-top: .25em solid #18121e; 
	border-bottom: .5em solid #18121e; 
	color: #18121e; 
	padding: 
}

a {
	color: #984b43;
}

a:hover {
	color: #984b43;
}

aside a {
	font-weight: bold;
}



p[role="contentinfo"] {
    border-top: 2em solid #18121e;
    padding-top: 1em;
  max-width;10%;
}

.design-name { display: block; text-transform: uppercase;}

.design-selection li {
	margin-bottom: .75em;
}

footer {
	margin-bottom: 4em;
	display: flex;
	flex-wrap: wrap;
}

footer a {
	flex-grow: 3;
	text-align: center;
	margin: .25em;
}

.sidebar h3 {
	margin-top: 0;
	padding-top: .35em;
	font-size: calc(1.5em + 1vw); 
  color:#18121e;
 
}

.wrapper div {
	margin: 0 .5em;
}


@media screen and (min-width: 50em) {
	.wrapper {
		display: flex;
		margin-left: 5%;
	}

	.wrapper a {
		font-size: calc(.70em + .25vw);
	}
	
	.wrapper div {
		flex-grow: 1;
	}
	
	.summary p + p {
		display: block;
	}
	
	.main, .preamble { 
		width: 60%;
		max-width: calc(42em + .5vw);
	}
	
}