/* font-family: roboto, sans-serif;
font-weight: 400;
font-style: normal;

font-family: roboto, sans-serif;
font-weight: 400;
font-style: italic;

font-family: roboto, sans-serif;
font-weight: 700;
font-style: normal;

font-family: mr-eaves-modern, sans-serif;
font-weight: 400;
font-style: normal; */

/*
font-family: mr-eaves-modern, sans-serif;
font-weight: 700;
font-style: normal;
*/

:root {
	--color-green: #396532;
	--color-green-light: #CFDFB8;
	--color-green-light-2: #E1F2C9;
	--color-gray: #999;
	--color-gray-light: #F2F2F2;
	--color-link-blue: #0285bd;
	--color-link-blue-light: #67b6d7;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}



a {
	text-decoration: none;
	color: inherit
}

a:link, a:visited {
	color: var(--color-link-blue)
}

a:hover {
	color: var(--color-link-blue-light);
	transition: all .3s
}

sup{
	line-height: 0;
	font-size: 1rem;
/*	vertical-align: super;*/
}


html{
  font-size: 62.5%;
  /* not compatiable with Safari or MS Edge */
  /* scroll-behavior: smooth; */
}

body{
  font-family: roboto, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #222;
  background-color: #e6e6e6;
	font-size: 1.4rem;
	line-height: 1.4em;
}


.container{
  max-width: 90rem;
  margin: 0 auto;
  background-color: #fff;
}

.back-to-top{
	margin-left: auto;
	margin-right: 2rem;

	top: 4rem;
	right: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	/* text-align: center; */
	background-color: var(--color-green);
	border-radius: 100%;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	position: absolute;
}

.back-to-top:hover {
	background-color: var(--color-green-light);
}

.back-to-top img{
	width: 2.5rem;
	display: block;
}

.show-back-to-top{
	position: sticky;
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
	transition: all .3s;
}

/************ MAIN HEADER *****************/


.header{
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--color-green)
}

.spidell-logo{
  max-width: 15rem;
	margin-left: 4.75rem;
	margin-bottom: -1rem;
}

.title-container{
	font-family: mr-eaves-modern, sans-serif;
	background-color: var(--color-gray-light);
	border-bottom-right-radius: 20rem;
	padding: 2rem 8rem 1.5rem 4rem;
}

.title-main{
	font-size: 6rem;
	font-weight: 700;
	color: var(--color-green);
	line-height: .8em;
}

.title-tagline{
	font-size: 2.5rem;
	margin-top: 2rem;
}

.issue{
	padding-right: 4rem;
	font-size: 2rem;
	margin-left: auto;
}

/* ******************** NAV ARTICLES *****************/

.in-this-issue{
	margin-bottom: 2rem;
	color: var(--color-green);
	font-weight: 700;
	font-size: 2rem;
}

.nav{
	display: flex;
	font-size: 1.6rem;
	margin: 2rem 4rem 0;
	align-items: center;
}

.nav ul{
	list-style: none;
}

.nav li {
	margin-top: .5rem;
}

.nav a {
	color: var(--color-green)
}

.nav a:hover {
	color: var(--color-green-light);
	transition: all .3s;
}

.nav-author{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: auto;
	font-weight: 700;
}


.nav-author-image img {
	display: block;
	width: 100%;
}

.nav-author-image{
	margin-top: .7rem;
	overflow: hidden;
	width: 8rem;
	height: 8rem;
	border-radius: 100%;
}

/* MOBILE NAV **************/

.btn-mobile-nav{
	border: none;
	background: none;
	cursor: pointer;
	display: none;
}

.icon-mobile-nav{
	position: relative;
	top: 2px;
	height: 2.8rem;
	width: 2.8rem;
	color: var(--color-gray);
}

/********************** COUPONS ***********************/

.coupon{
	margin: 0 auto;
	margin-top: 3rem;
	max-width: 60rem;
	padding: 2rem;
	font-size: 1.8rem;
	line-height: 1.5em;
	background-color: var(--color-gray-light);
	
}

.promo {
	text-align: center;
}

.promo-product {
	font-weight: 700;
}

.promo-price{
	margin: 2rem auto;
	padding: 1rem;
	width: 35rem;
	background-color: var(--color-green-light);
	border-radius: 100px;
}

.original-price{
	text-decoration: line-through;
}

.sale-price{
	font-size: 2.8rem;
	font-weight: 700;
}

.promo-code{
	font-style: italic;
}

.code{
	font-weight: 700;
}

.promo-contact{
	font-size: 1.4rem;
	line-height: 1.4em;
}

.promo-contact-info{
	margin-bottom: 1rem;
}

.coupon-fineprint{
	margin-top: 1rem;
	font-size: 1.2rem;
}

/* ********************* ARTICLES **********************/

.articles{
	max-width: 70rem;
	margin: 6rem auto 0;
}

.article{
	margin-bottom: 4rem;
	padding-top: 4rem;
	border-top: 2px solid var(--color-green);
}

/* ARTICLE DECK */

.article-header{
	margin-bottom: 2rem;
}

.article-title{
	font-size: 2.4rem;
	line-height: 1.1em;
	margin-bottom: 1rem;
}

.article-deck{
	font-size: 1.8rem;
	margin-bottom: 1.2rem;
}

.article-header.contributing .article-author, .article-header.contributing .article-author-title{
	display: block;
}

.article-author, .article-author-title{
	font-style: italic;
	display: none;
}

/* ARTICLE BODY */

.article-body p, ul, ol {
	margin-bottom: 1rem;
}

/* LISTS */
.article-body ul, .article-body ol {
	margin-left: 4rem;
}


/* SUBHEAD */
.article h3 {
	font-size: 1.6rem;
	margin-bottom: .6rem;
}



/******************* EXAMPLE BOX ***************/

.example{
	background-color: var(--color-green-light);
	padding: 2rem;
	border-radius: .5rem;
	margin-bottom: 1rem;
}



.example p:last-child{
	margin-bottom: 0;
}

.example span{
	font-weight: 700;
}

/* Tables */
.example table {
	margin: 0 auto;
	border: 1px solid #777;
	border-collapse: collapse;
	margin-bottom: 1rem;
}

.example table:last-child{
	margin-bottom: 0;
}

.example table tr:nth-child(even){
	background-color: var(--color-green-light-2);
}

.example.full-color table tr{
	background-color: var(--color-green-light-2);
}

.example table td {
	padding: .5rem;
}

/* FOOTNOTES */

.footnotes{
	margin-top: 3rem;
	color: var(--color-gray);
}

.footnotes p {
	margin: 0;
}

.footnotes__two-cols{
	display: flex;
	gap: 1rem;
}

/***************** ABOUT THE AUTHOR *****************/

.about-author{
	padding: 6rem;
	background-color: var(--color-gray-light);
}

.about-author-title{
	margin-bottom: 2rem;
	color: var(--color-green)
}

.author-bio{
	display: flex;
	column-gap: 2rem;
}

.about-author img {
	height: 18rem;
}

/* ************************** FOOTER ***************************/

.footer{
	background-color: var(--color-green);
	padding: 8rem;
	color: #fff;
}

.footer-contact{
	margin-bottom: 2rem;
}

.footer-contact a {
	color: #fff;
	margin: 0 1rem;
}

.footer-contact a:first-child{
	margin-left: 0;
}

.footer-contact a:hover{
	color: var(--color-green-light)
}

.footer .copyright{
	font-size: 1.2rem;
}



/*UTILITIES*/
.margin-bottom-0{
	margin-bottom: 0;
}

/**/