#libraryContainer
{
max-width: 62.5rem;
margin: 0 auto;
padding: 0 .5rem;
}

.learn-landing-intro
{
font-size: 1rem;
padding: 0 1rem;
text-align: center;
max-width: 46rem;
margin: 2rem auto 2rem;
line-height: 1.25;
}

#library-landing-header
{
background: #000 url(https://dh36nblqpps8a.cloudfront.net/assets/learn/layout/learn-header.jpg) center center no-repeat;
background-size: cover;
display: grid;
justify-content: center;
align-content: center;
position: relative;
}

#library-landing-header::after
{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background-image: linear-gradient(120deg, #eaee44, #33d0ff); */
background: linear-gradient(120deg, #4b6cb7 0%, #182848 100%);
opacity: .65;
}

#library-landing-header > * {
    z-index: 1;
}

#library-landing-header h1
{
color: #fff;
text-align: center;
max-width: 48rem;
font-size: 3rem;
text-shadow: 0 0 .25rem rgba(0,0,0,1);
padding: 2rem;
}

#library-landing-header h1 a
{
color: #fff;
}

.learn-sups #library-landing-header
{
background: #000 url(https://dh36nblqpps8a.cloudfront.net/assets/learn/layout/learn-sup2.jpg) center center no-repeat;
background-size: cover;
}

.learn-camping #library-landing-header
{
background: #000 url(https://dh36nblqpps8a.cloudfront.net/assets/learn/layout/learn-camping.jpg) center center no-repeat;
background-size: cover;
}

.learn-kayak-touring #library-landing-header
{
background: #000 url(https://dh36nblqpps8a.cloudfront.net/assets/learn/layout/learn-touring.jpg) center center no-repeat;
background-size: cover;
}

.learn-whitewater-kayaking #library-landing-header
{
background: #000 url(https://dh36nblqpps8a.cloudfront.net/assets/learn/layout/learn-ww-kayaking.jpg) center center no-repeat;
background-size: cover;
}

.learn-rafting #library-landing-header
{
background: #000 url(https://dh36nblqpps8a.cloudfront.net/assets/learn/layout/learn-rafting.jpg) center center no-repeat;
background-size: cover;
}

.learn-apparel #library-landing-header
{
background: #000 url(https://dh36nblqpps8a.cloudfront.net/assets/learn/layout/learn-apparel.jpg) center center no-repeat;
background-size: cover;
}

.learn-all #library-landing-header
{
background: #000 url(https://dh36nblqpps8a.cloudfront.net/assets/learn/layout/learn-header.jpg) center center no-repeat;
background-size: cover;
}


.learnSearch
{
width: 80%;
max-width: 36rem;
margin: 0 auto;
grid-area: learnSearch;
}

.learn-category-listing .learnSearch
{
width: 100%;
max-width: none;
margin: 2rem 0 1rem;
padding: 0 .5rem;
}

.learnSearch form, .learnSearch fieldset
{
margin: 0;
padding: 0;
position: relative;
}

.learnSearch input[type=text]
{
border: .125rem solid #5e7f1f;
background-image: none;
background-color: #efefef;
box-shadow: none;
width: 100%;
border-radius: 10rem;
font-size: 1.25rem;
padding: .25rem .25rem .25rem 1.75rem;
margin: 0 auto;
color: #5e7f1f;
}

.learnSearch input::placeholder
{
color: #5e7f1f;
}

.learnSearch input::-ms-input-placeholder
{
color: #5e7f1f;
}

.learnSearch button {
border: none;
background-image: none;
background-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
font-size: 1rem;
color: #adc72e;
margin: 0;
padding: 0;
height: 100%;
position: absolute;
top: 50%;
left: .5rem;
transform: translateY(-50%);
}

.learnSearch .visuallyhidden
{
color: #111;
}


.learn-category-links-wrapper
{
max-width: 50rem;
margin: 0 auto 3rem;
display: grid;
grid-gap: 1rem;
margin-top: 1rem;
grid-template-columns: 1fr;
}

.learn-category-links-wrapper > div
{
border-bottom: .0625rem dotted #ccc;
padding: 1rem;
}

.learn-category-links-wrapper h2
{
font-size: 1.5rem;
}

.learn-category-links-wrapper h2 a
{
color: #444;
}

.learn-category-links-wrapper ul
{
margin: .5rem 0 0;
padding: 0 0 0 1.25rem;
}

.learn-category-table td, .learn-category-table th
{
border-top: .0625rem solid #eee;
padding: .5rem;
vertical-align: top;
}

.learn-category-table th {border-top: none;}

.learn-category-table td:first-of-type
{
padding-right: 2rem;
}

.learn-category-table p
{
margin: 0;
}

.learn-category-table p:first-of-type
{
margin-bottom: .5rem;
}

#sideNav
{
margin: 2rem auto;
max-width: 24rem;
border: .0625rem solid #eee;
padding: 1.25rem;
}

.sectionHeader
{
text-transform: uppercase;
font-weight: bold;
border-bottom: .0625rem solid #eee;
padding-bottom: .125rem;
}

#sideNav ul
{
list-style: none;
margin: .5rem 0 1rem;
padding: 0;
}

#sideNav li
{
padding-bottom: .5rem;
}

#sideNav li a
{
display: block;
color: #444;
}

#sideNav li a:hover
{
color: #900;
text-decoration: underline;
}

@media screen and (min-width: 37.5rem)
{
	
	.learn-category-links-wrapper
	{
	grid-template-columns: 1fr 1fr;
	}
   
}

@media screen and (min-width: 40rem)
{

	.learn-landing-intro
	{
	font-size: 1.25rem;
	}
   
} 

@media screen and (min-width: 48rem)
{
	
	#library-landing-header
	{
	min-height: 20rem;
	}
	
	#library-landing-header h1
	{
	font-size: 4rem;
	}
	
	#sideNav
	{
	grid-area: sideNav;
	}

	.learn-category-table
	{
	grid-area: learn-category-table;
	}
	
	.learn-category-listing #libraryContainer
	{
	display: grid;
	grid-template-columns: 1fr 3fr;
	column-gap: .75rem;
	grid-template-areas:
		"sideNav learnSearch"
		"sideNav learn-category-table"
		"sideNav ."
		;
	}
	
	#sideNav
	{
	border: none;
	padding: 0;
	}

}


@media screen and (min-width: 62.5rem)
{

	#sideNav
	{
	flex: 0 0 11.6875rem;
	min-width: 11.6875rem;
	}
	
}