/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/**********************************************/
html {
  font-size: 62.5%;
}

body {
  background: url(/img/red-velvet-curtains-background.jpg) center center / 100% 100%;
  color: #1a1a1a;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.8rem;
  line-height: 1.6;
  margin: 0;
	padding: 0;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

h1 {
     font-size: 3rem;
     font-weight: 700;
     margin: 1.2rem 0 3.6rem 0;
		 text-align: center;
}

h2 {
     font-size: 1.8rem;
     font-weight: 700;
}

h3 {
     font-size: 1.4em;
     font-weight: 700;
}

p {
  margin: 2rem 0;
}

a {
	border-bottom: 1px solid #1a1a1a;
  color: #1a1a1a;
  text-decoration: none;
  transition: border 0.1s ease-in-out;
}

a:active, a:focus, a:hover {
    border-bottom: 2px solid #a41a1a;
}

strong, b {
	font-weight: 700;
}

em, i {
	font-style: italic;
}

ul, ol {
	margin-left: 2rem;
}

.alignleft {
  float: right;
  margin: 0 1em 0.5em 0;
}

.alignright {
  float: right;
  margin: 0 0 0.5em 1em;
}

.aligncenter {
	text-align: center;
  margin: 1.5em auto;
  display: block;
  max-width: 100%;
}

.screen-reader-text {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px,1px,1px,1px);
    overflow: hidden;
    height: 1px;
    width: 1px;
}

/****************
 Header Styles
*****************/
header {
  background-color: #fff;
  margin-bottom: 1.5rem;
  padding: 2.5rem 0 0 0;
}

#site-title {
		margin: 0 8.334%;
		max-width: 70%;
}

#site-title a {
	border: none;
  color: #1a1a1a;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.1s ease-in-out;
}

#site-title:hover a {
  color: #666;
}

.tagline {
  font-size: 1.2rem;
	margin: 0 8.334%;
	max-width: 70%;
	padding-bottom: 1.5rem;
}

label {
	display: block;
}

input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
textarea {
    padding: 10px 12px;
    width: 100%;
    max-width: 30em;
    background: #ededed;
    color: #666;
    outline: solid 1px #d4d4d4;
    border: none;
    border-radius: 0;
    -webkit-appearance: none;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=url]:focus,
textarea:focus {
	background: #fff;
}

input[type=submit] {
    padding: 10px 12px;
    color: #fff;
    background: #1a1a1a;
    min-width: 96px;
    outline: 0;
    border: none;
    border-radius: 0;
    -webkit-appearance: none;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

input[type=submit]:active,
input[type=submit]:focus,
input[type=submit]:hover {
    background: #4d4d4d;
}

/***********
 Menu Styles
************/
#menuicon {
		font-size: 2.4rem;
		position: absolute;
		right: 8.334%;
		top: 2rem;
}

#menutoggle {
	display:none;
}

#menutoggle:checked~nav {
  display: block;
}

nav {
	display: none;
	border-top: 1px solid #d4d4d4;
	margin-top: 3rem;
	font-size: 1.2rem;
	letter-spacing: 0.07rem;
	margin: 1rem 0;
	text-transform: uppercase;
}

nav ul {
	margin: 0;
	list-style: none;
}

nav li {
	border-left: 3px solid #fff;
	border-bottom: 1px solid #d4d4d4;
	margin: 0;
  padding: 1rem 8.334%;
}

nav .current {
		border-left: 3px solid #a41a1a;
}

nav li li {
 	border: none;
}

nav a,
nav a:hover {
	border: none;
}

nav .children>.childicon {
	display: none;
}

.social-media-icons {
		font-size: 2.4rem;
		list-style: none;
		margin: 0 8.334%;
		padding: 0;
}

.social-media-icons li {
	border: none;
	display: inline-block;
	margin: 0.5rem;
	padding: 0;
}

.social-media-icons a {
	border: none;
}

.social-media-icons a:hover {
	color: #a41a1a;
}
/*********************
  Main Content Styles
*********************/
#main {
  margin: 6rem 0;
	padding: 0 1rem;
	flex: 1;
}

article {
  background: #fff;
  margin: auto;
  max-width: 700px;
  overflow: auto;
  padding-bottom: 2rem;
}

.content {
  font-size: 1.6rem;
  margin: 3rem 8.334%;
}

.featured {
  width: 100%;
}

#mc_embed_signup {
	margin: auto;
	width: 80%;
}

.block-button a {
	background-color: #1a1a1a;
	border: none;
	color: #fff;
  padding: 1rem 3rem;
}

.block-button a:hover {
	background-color: #666;
}

/*********************
 Footer Styles
*********************/
footer {
  background: #fff;
  font-size: 1.2rem;
  padding: 2rem;
  text-align: center;
}

@media (min-width: 768px) {
	h1 {
	     font-size: 3.6rem;
	     margin: 1.2rem 0 3.6rem 0;
	}

	h2 {
	     font-size: 2.4rem;
	}

	h3 {
	     font-size: 2em;
	}

	#site-title a {
	  font-size: 2.4rem;
	}
	/***********
	 Menu Styles
	************/
	#menuicon {
		display: none;
	}

	nav {
		border: none;
		display: block;
		margin: 0 8.334%;
		padding: 0 0 1.5rem 0;
	}

	nav li {
		display: inline-block;
		margin: 0 1rem;
		position: relative;
	}

	nav a {
		border-bottom-color: #fff;
		box-sizing: border-box;
		padding: 1rem 0;
	}

	nav a:active,
	nav a:focus,
	nav a:hover,
	nav .current>a {
			border-left: none;
			border-bottom: 1px solid #a41a1a;
	}

	nav li,
	nav .current {
		border: none;
		margin: 0 1rem;
	  padding: 0;
	}
	nav li:first-child {
		margin: 0 1rem 0 0;
	}

	nav .children>a::before {
		content: "";
		height: 48px;
	  left: 0;
		position: absolute;
	  right: 0;
	  top: 16px;
	}

	nav .children>.childicon {
		display: inline-block;
		padding: 1rem;
	}

	nav ul ul {
		background: #fff;
		border: 1px solid #d4d4d4;
		display: none;
		left: -50%;
		padding: 0.5rem;
		position: absolute;
		text-align:center;
		top: calc(100% + 13px);
		white-space: nowrap;
	}

	nav ul ul::before {
		border-bottom: solid 13px #d4d4d4;
		border-left: solid 13px transparent;
		border-right: solid 13px transparent;
		content: "";
		left: calc(50% - 13px);
		position: absolute;
		top: -13px;
	}

	nav ul ul::after {
		border-bottom: solid 12px #fff;
		border-left: solid 12px transparent;
		border-right: solid 12px transparent;
		content: "";
		position: absolute;
		top: -11px;
		left: calc(50% - 12px);
	}

	nav ul>li:hover ul,
	nav ul li ul:hover {
		display: block;
	}

	nav ul>li:focus-within ul {
		display: block;
	}

	nav ul ul li {
		display:block;
		margin: 0;
		padding: 1rem 2rem;
	}

	.social-media-icons {
			margin: 0;
			position: absolute;
			top: 2rem;
			right: 8.334%;
	}

	nav .social-media-icons a {
		border: none;
	}

}